/* v6.352.0: アクセス履歴ページ 専用 CSS（検索バー + 氏名カラムの折り返し解消）。
 *
 * 承認済みサンプル docs/samples/access_log_search_sample.html 準拠。
 *
 * 【色はすべて CSS 変数】DESIGN.md の「リテラル直書き禁止」に従う。
 *   サンプルのリテラル 2 色（#1558b0 / #0f6b2c）は style.css に同等の変数が無いため、
 *   このファイル冒頭のローカル変数にまとめる。ダークモードはここを差し替えるだけで済む。
 *
 * 【氏名カラム】min-width:11em + white-space:nowrap で全角 10 文字まで折り返さない。
 *   その分テーブルが広がるので、収まらない幅は .al-table-wrap の横スクロールで逃がす
 *   （テーブルを圧縮しない = 信介さん確定）。
 */
/* ローカル変数（サンプルのリテラル色をここに集約）。
   ⚠️ **:root に置くこと**。カスタムプロパティは宣言した要素から**継承**で伝わるため、
   .al-search に宣言すると検索バーの外（テーブル内の .al-pill）には届かず、
   `color: var(--al-pill-page-fg)` が無効値になって色が消える（実装中に実測で踏んだ）。
   このファイルは access-log.html でしか読まれないので :root でも影響範囲は閉じている。 */
:root {
  --al-pill-page-fg: #1558b0;   /* PAGE バッジの文字（--color-primary より暗く可読性を確保） */
  --al-pill-post-fg: #0f6b2c;   /* POST バッジの文字（--color-green より暗く） */
}

.al-search {
  background: var(--color-surface-2);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
}
.al-row { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.al-row + .al-row { margin-top: 10px; }

/* ⚠️ flex の子は既定 min-width:auto。長い placeholder / 値で親を押し広げないよう 0 を明示する。 */
.al-field { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.al-label { font-size: 11.5px; color: var(--color-text-muted); padding-left: 2px; }

.al-input, .al-select {
  height: 36px; padding: 0 12px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  background: var(--color-surface);
  color: var(--color-text);
  font-size: 13.5px; font-family: inherit;
  min-width: 0;
}
.al-input::placeholder { color: var(--color-text-faint); }
.al-input:focus, .al-select:focus {
  outline: none; border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-soft);
}
.al-input-name { width: 260px; }
.al-input-path { width: 300px; }
.al-input-date { width: 150px; }
.al-select-dept { width: 140px; }
.al-select-limit { width: 110px; }

.al-date-sep { color: var(--color-text-faint); padding: 0 2px; align-self: flex-end; height: 36px; line-height: 36px; }

/* ===== v6.354.0: 名前の候補リスト + 選択中タグ =====
 * 承認済みサンプル docs/samples/access_log_name_picker_sample.html 準拠。
 * ⚠️ **重ね順はサンプルの z-index:20 を採らず 600**（css-ui.md「重ね順は数値競争ではなく階層で決める」）。
 *   600 は個人勤務予定表のスタッフドロップダウン `.ss-staff-panel` と同値＝「ドロップダウン・ポップオーバー」層。
 *   場当たりの数値を持ち込まず、実在する同格クラスに合わせる。
 */
.al-field-name { position: relative; }   /* 候補リストの絶対配置の基準（これが無いと画面左上に飛ぶ） */

.al-suggest {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 600;
  width: 100%;                       /* 入力欄と同じ幅に追従（スマホの 100% 幅でも画面外に出ない） */
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 10px;
  box-shadow: var(--shadow-2);
  padding: 4px 0;
  max-height: 260px; overflow-y: auto;
}
.al-suggest-head { padding: 6px 14px 4px; font-size: 11px; color: var(--color-text-faint); }
.al-suggest-empty { padding: 12px 14px; font-size: 13px; color: var(--color-text-muted); }
.al-suggest-item {
  display: flex; align-items: center; gap: 8px;
  width: 100%; padding: 8px 14px;
  border: none; background: transparent;
  font-family: inherit; font-size: 13.5px; text-align: left;
  cursor: pointer; min-width: 0;
}
.al-suggest-item:hover,
.al-suggest-item.is-active { background: var(--color-surface-3); }
/* ⚠️ flex の子は既定 min-width:auto。氏名が長くても拠点を押し出さないよう 0 を明示して省略記号に倒す。 */
.al-suggest-name {
  color: var(--color-primary); min-width: 0;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.al-suggest-meta { font-size: 11.5px; color: var(--color-text-faint); margin-left: auto; flex: none; }

/* 選択中タグ（入力欄と入れ替わる。枠線 + 薄い塗りで「固定中」を示す） */
.al-picked {
  display: inline-flex; align-items: center; gap: 6px;
  height: 36px; padding: 0 6px 0 12px;
  border: 1px solid var(--color-primary);
  background: var(--color-primary-soft);
  border-radius: 8px;
  font-size: 13.5px; color: var(--color-text);
  max-width: 260px; min-width: 0;      /* 入力欄 .al-input-name と同じ幅で頭打ちにする */
}
.al-picked-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.al-picked-id { font-size: 11.5px; color: var(--color-text-muted); flex: none; }
.al-picked-x {
  flex: none; width: 22px; height: 22px;
  border: none; background: transparent;
  border-radius: 50%; cursor: pointer;
  color: var(--color-text-muted);
  font-size: 14px; line-height: 1;
  display: flex; align-items: center; justify-content: center;
}
/* ⚠️ hover 色にサンプルのリテラル rgba は使わない（DESIGN.md）。タグの地は --color-primary-soft なので、
   --color-surface-3 だと同系色で差が出ない。素の surface へ戻す形なら明暗どちらでも差が見える。 */
.al-picked-x:hover { background: var(--color-surface); color: var(--color-text); }

.al-check {
  display: flex; align-items: center; gap: 6px;
  height: 36px; align-self: flex-end;
  font-size: 13.5px; color: var(--color-text);
  cursor: pointer; white-space: nowrap;
}
.al-check input { width: 16px; height: 16px; accent-color: var(--color-primary); cursor: pointer; }

.al-clear {
  height: 36px; padding: 0 16px;
  border: 1px solid var(--color-border);
  border-radius: 9999px;              /* DESIGN.md: 全ボタンピル型 */
  background: var(--color-surface);
  color: var(--color-text-muted);
  font-size: 13px; font-family: inherit;
  cursor: pointer; align-self: flex-end;
  box-shadow: var(--shadow-1);
}
.al-clear:hover { background: var(--color-surface-3); }
.al-spacer { flex: 1 1 auto; min-width: 0; }

/* 件数行 */
.al-count {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  font-size: 13px; color: var(--color-text-muted);
  margin: 0 0 10px; padding-left: 2px;
}
.al-count strong { color: var(--color-text); font-weight: 600; }
.al-count-filtered {
  font-size: 11.5px; padding: 1px 8px;
  border: 1px solid var(--color-border);
  border-radius: 9999px; color: var(--color-text-muted);
}
/* 取得中の表示。⚠️ テーブルを空にして「0 件」と誤解させないため、行は残したままこれを出す。 */
.al-loading { font-size: 12px; color: var(--color-primary); }

/* ===== テーブル ===== */
.al-table-wrap { overflow-x: auto; }
.al-table-wrap table { border-collapse: collapse; width: 100%; font-size: 13px; }
.al-table-wrap thead th {
  text-align: left; font-weight: 600; font-size: 12.5px;
  color: var(--color-text-muted);
  padding: 10px 12px;
  border-bottom: 1px solid var(--color-border);
  white-space: nowrap;
}
.al-table-wrap tbody td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--color-divider);
  vertical-align: middle;
}
.al-table-wrap tbody tr:hover { background: var(--color-surface-2); }

/* 氏名カラム: 全角 10 文字まで折り返さない（この改修の主目的） */
.col-name { min-width: 11em; white-space: nowrap; }
.col-datetime { white-space: nowrap; color: var(--color-text-muted); }
.col-userid { white-space: nowrap; }
.col-method { white-space: nowrap; }
.col-page { min-width: 12em; }
.col-action { white-space: nowrap; color: var(--color-text-muted); }
/* パス・ページ名は長いので折り返しを許容する */
.col-path { min-width: 16em; color: var(--color-text-muted); font-size: 12.5px; word-break: break-all; }
.col-ip { white-space: nowrap; color: var(--color-text-muted); font-size: 12.5px; }
.col-env { white-space: nowrap; color: var(--color-text-muted); font-size: 12.5px; }

.al-pill {
  display: inline-block; padding: 1px 9px;
  border-radius: 9999px; font-size: 11px; font-weight: 500;
  border: 1px solid var(--color-border);
  color: var(--color-text-muted);
}
.al-pill.is-page { border-color: rgba(26, 115, 232, .35); color: var(--al-pill-page-fg); }
.al-pill.is-post { border-color: rgba(24, 128, 56, .35); color: var(--al-pill-post-fg); }

.al-empty { text-align: center; padding: 32px; color: var(--color-text-muted); font-size: 13px; }

/* ===== スマホ ===== */
@media (max-width: 640px) {
  .al-search { padding: 12px; }
  .al-input-name, .al-input-path, .al-input-date, .al-select-dept, .al-select-limit { width: 100%; }
  .al-field { flex: 1 1 100%; }
  /* v6.354.0: タグも入力欄と同じ全幅に。max-width の 260px を外さないと右に余白が残る。
     氏名が長い場合は .al-picked-name の ellipsis で切れる（min-width:0 を併記済み）。 */
  .al-picked { max-width: 100%; width: 100%; }
  .al-spacer { display: none; }
  .al-clear { width: 100%; }
}

/* ===== ダークモード（ローカル変数の差し替えのみ・:root と同じスコープで上書きする） ===== */
[data-theme="dark"] {
  --al-pill-page-fg: #8ab4f8;
  --al-pill-post-fg: #81c995;
}