/* ===========================================================
   koban ダッシュボード（架空の配車管理SaaS）
   型: dashboard-real × max × ui-first × plain

   方針:
   ・LPではなく「管理画面そのもの」。ヒーローもコピーも無い。
   ・craftkit の reveal は最小限（KPI帯のstagger／2パネルの初期フェードのみ）に絞り、
     密度・整列・罫線・等幅数字の精度で finish を出す。
   ・暗色のプロダクトUI。ネオンは使わず、ステータス色は落ち着いた彩度に抑える。
   =========================================================== */

:root{
  --bg:#0a0e13;
  --panel:#111720;
  --panel-2:#151c26;
  --panel-3:#0d131b;
  --line:#212a35;
  --line-soft:#1a222c;
  --ink:#e7ecf3;
  --ink-2:#98a5b5;
  --ink-3:#7b879a; /* AA(4.5:1)確保のため #5c6a7a から明るく調整 */
  --accent:#4fa3c4;
  --accent-ink:#bfe3f2;
  --accent-soft:rgba(79,163,196,.14);

  --run:#4c8fd1;   /* 運行中 */
  --stb:#7c8794;   /* 待機 */
  --dly:#d17a45;   /* 遅延 */
  --don:#4f9e6e;   /* 完了 */
  --sch:#8f85c9;   /* 予定 */

  --sans-jp:"Noto Sans JP","Inter",system-ui,-apple-system,sans-serif;
  --sans:"Inter","Noto Sans JP",system-ui,sans-serif;
  --mono:"JetBrains Mono","Noto Sans JP",ui-monospace,monospace;

  --side-w:228px;
  --notif-w:288px;
  --radius:10px;
  --radius-sm:6px;
}

*, *::before, *::after{ box-sizing:border-box; }
html, body{ max-width:100%; overflow-x:hidden; }
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:var(--sans-jp); font-size:14px; line-height:1.5;
  -webkit-font-smoothing:antialiased;
}
.ic-defs{ position:absolute; width:0; height:0; overflow:hidden; }
.ic{ width:18px; height:18px; fill:currentColor; flex:none; }
a{ color:inherit; }
button{ font:inherit; color:inherit; }
input{ font:inherit; color:inherit; }
.num{ font-family:var(--mono); font-variant-numeric:tabular-nums; }
.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
  clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

.nav-toast{
  position:fixed; left:50%; bottom:22px; transform:translate(-50%, 12px);
  margin:0; padding:9px 16px; background:#1a212b; border:1px solid var(--line);
  border-radius:999px; color:var(--ink-2); font-size:12.5px; box-shadow:0 8px 24px rgba(0,0,0,.4);
  opacity:0; pointer-events:none; z-index:20;
  transition:opacity .2s var(--ck-ease,ease), transform .2s var(--ck-ease,ease);
}
.nav-toast.is-shown{ opacity:1; transform:translate(-50%, 0); }
@media (prefers-reduced-motion:reduce){ .nav-toast{ transition:none; } }

/* ---------- シェル（3カラム：サイド / メイン / 通知） ---------- */
.shell{
  display:grid;
  grid-template-columns:var(--side-w) 1fr var(--notif-w);
  grid-template-areas:"side main notif";
  min-height:100vh;
  align-items:stretch;
}

/* ---------- サイドバー ---------- */
.side{
  grid-area:side;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; justify-content:space-between;
  background:var(--panel); border-right:1px solid var(--line);
  padding:20px 14px 16px;
  min-height:0;
}
.side-brand{ padding:4px 10px 20px; display:flex; flex-direction:column; gap:2px; }
.side-mark{ font-family:var(--mono); font-weight:700; font-size:20px; letter-spacing:.01em; color:#fff; }
.side-sub{ font-size:10px; font-weight:600; letter-spacing:.14em; color:var(--ink-3); }

.side-nav{ display:flex; flex-direction:column; gap:2px; }
.nav-item{
  display:flex; align-items:center; gap:11px;
  padding:9px 11px; border-radius:var(--radius-sm);
  font-size:13px; font-weight:500; color:var(--ink-2); text-decoration:none;
  border:1px solid transparent;
}
.nav-item .ic{ width:17px; height:17px; color:var(--ink-3); }
.nav-item:hover{ background:var(--panel-2); color:var(--ink); }
.nav-item:hover .ic{ color:var(--ink-2); }
.nav-item.is-active{
  background:var(--accent-soft); color:var(--accent-ink); border-color:rgba(79,163,196,.28);
}
.nav-item.is-active .ic{ color:var(--accent-ink); }
.nav-item:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.side-foot{ border-top:1px solid var(--line-soft); padding-top:14px; }
.side-user{ display:flex; align-items:center; gap:10px; padding:4px 10px; }
.avatar{
  width:30px; height:30px; border-radius:50%; flex:none;
  display:grid; place-items:center; background:#243349; color:#bcd3ea;
  font-size:12.5px; font-weight:700;
}
.avatar-sm{ width:28px; height:28px; font-size:12px; }
.side-user-txt{ display:flex; flex-direction:column; min-width:0; }
.side-user-txt b{ font-size:12.5px; font-weight:700; color:var(--ink); }
.side-user-txt small{ font-size:11px; color:var(--ink-3); }

/* ---------- メイン ---------- */
.main{ grid-area:main; min-width:0; padding:20px 24px 40px; display:flex; flex-direction:column; gap:18px; }

.topbar{ display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; }
.topbar-title h1{ margin:0; font-size:19px; font-weight:700; letter-spacing:.01em; }
.topbar-date{ margin:3px 0 0; font-size:12px; color:var(--ink-3); font-family:var(--mono); }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.live-clock{
  display:flex; align-items:center; gap:7px; font-family:var(--mono); font-size:13px;
  color:var(--ink-2); background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:6px 12px;
}
.live-dot{ width:7px; height:7px; border-radius:50%; background:var(--don); flex:none; }
@media (prefers-reduced-motion:no-preference){
  .live-dot{ animation:ck-pulse 2.2s ease-in-out infinite; }
}
@keyframes ck-pulse{ 0%,100%{ opacity:1 } 50%{ opacity:.35 } }

.bell{
  position:relative; width:34px; height:34px; border-radius:var(--radius-sm);
  background:var(--panel); border:1px solid var(--line); cursor:pointer;
  display:grid; place-items:center;
}
.bell .ic{ width:16px; height:16px; color:var(--ink-2); }
.bell:hover{ background:var(--panel-2); }
.bell:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.bell-badge{
  position:absolute; top:-5px; right:-5px; min-width:16px; height:16px; padding:0 4px;
  border-radius:999px; background:var(--dly); color:#fff; font-family:var(--mono);
  font-size:10px; font-weight:700; line-height:16px; text-align:center; border:1.5px solid var(--bg);
}
.bell-badge[data-zero="1"]{ background:var(--ink-3); }

/* ---------- KPI帯 ----------
   auto-fit/minmaxも試したが、side(228px)+notif(288px)の固定レールを差し引くと
   main内側は概ね700px前後しかなく、1040〜1260px帯でminmaxの下限を割り込んで
   5枚目が孤立して次行に落ちる（不格好な折り返し）。固定1280px基準の本ショーケースでは
   「常に1行に収まる」ことを優先し、比率で素直に縮む repeat(5,1fr) を採用する。 */
.kpis{ display:grid; grid-template-columns:repeat(5, 1fr); gap:12px; }
.kpi{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--radius);
  padding:14px 16px; display:flex; flex-direction:column; gap:6px;
}
.kpi-label{ font-size:11.5px; color:var(--ink-3); font-weight:600; letter-spacing:.01em; }
.kpi-value{ font-family:var(--mono); font-size:25px; font-weight:700; color:var(--ink); line-height:1; }
.kpi-value span{ font-size:13px; font-weight:600; color:var(--ink-3); margin-left:2px; }
.kpi-sub{ font-size:11.5px; color:var(--ink-3); }
.kpi-sub b{ color:var(--ink-2); font-weight:600; }
.kpi.is-alert .kpi-value{ color:var(--dly); }
.kpi.is-alert{ border-color:rgba(209,122,69,.35); }
.kpi.is-good .kpi-value{ color:var(--don); }

/* ---------- パネル共通 ---------- */
.panel{ background:var(--panel); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; }

/* ---------- ツールバー（フィルタ・検索） ---------- */
.toolbar{
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:14px 16px; border-bottom:1px solid var(--line);
}
.chips{ display:flex; gap:6px; flex-wrap:wrap; }
.chip{
  display:flex; align-items:center; gap:6px; border:1px solid var(--line); background:var(--panel-3);
  color:var(--ink-2); border-radius:999px; padding:6px 12px 6px 10px; font-size:12.5px; font-weight:600;
  cursor:pointer; white-space:nowrap;
}
.chip .dot{ width:7px; height:7px; border-radius:50%; background:var(--ink-3); flex:none; }
.chip .n{ font-family:var(--mono); color:var(--ink-3); }
.chip:hover{ border-color:#33404e; color:var(--ink); }
.chip.is-active{ background:var(--accent-soft); border-color:rgba(79,163,196,.4); color:var(--accent-ink); }
.chip.is-active .n{ color:var(--accent-ink); }
.chip:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }

.search{
  display:flex; align-items:center; gap:8px; background:var(--panel-3); border:1px solid var(--line);
  border-radius:var(--radius-sm); padding:7px 12px; min-width:260px; flex:0 1 320px;
}
.search .ic{ width:15px; height:15px; color:var(--ink-3); }
.search input{ flex:1; min-width:0; background:none; border:0; outline:0; font-size:13px; color:var(--ink); }
.search input::placeholder{ color:var(--ink-3); }
.search:focus-within{ border-color:var(--accent); }

/* ---------- テーブル ---------- */
.table-scroll{ overflow-x:auto; scrollbar-width:thin; scrollbar-color:#2c3644 var(--panel-3); }
.table-scroll::-webkit-scrollbar{ height:8px; }
.table-scroll::-webkit-scrollbar-track{ background:var(--panel-3); }
.table-scroll::-webkit-scrollbar-thumb{ background:#2c3644; border-radius:4px; }
.table-scroll::-webkit-scrollbar-thumb:hover{ background:#3a4757; }
.dispatch-table{ width:100%; min-width:960px; border-collapse:collapse; font-size:13px; }
.dispatch-table thead th{
  position:sticky; top:0; z-index:1; background:var(--panel-2);
  text-align:left; font-size:11px; font-weight:700; color:var(--ink-3); letter-spacing:.03em;
  padding:0; border-bottom:1px solid var(--line); white-space:nowrap;
}
.th-btn{
  display:flex; align-items:center; gap:5px; width:100%; background:none; border:0; cursor:pointer;
  padding:10px 14px; font:inherit; font-size:11px; font-weight:700; color:inherit; letter-spacing:.03em;
  text-transform:uppercase;
}
.th-btn:hover{ color:var(--ink-2); }
.th-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:-2px; }
.th-arrow{ font-size:9px; opacity:0; color:var(--accent-ink); }
th[aria-sort="ascending"] .th-arrow{ opacity:1; }
th[aria-sort="ascending"] .th-arrow::before{ content:"▲"; }
th[aria-sort="descending"] .th-arrow{ opacity:1; }
th[aria-sort="descending"] .th-arrow::before{ content:"▼"; }

.dispatch-table tbody td{
  padding:10px 14px; border-bottom:1px solid var(--line-soft); vertical-align:middle;
  color:var(--ink); white-space:nowrap;
}
.dispatch-table tbody tr{ transition:background-color .12s linear; }
.dispatch-table tbody tr:hover{ background:var(--panel-2); }
.dispatch-table tbody tr.is-touched{ background:rgba(79,163,196,.09); }
.dispatch-table tbody tr:last-child td{ border-bottom:0; }

.td-id{ font-family:var(--mono); color:var(--ink-2); font-weight:600; }
.td-driver b{ font-weight:600; }
.td-route{ color:var(--ink-2); font-size:12.5px; }
.td-time{ font-family:var(--mono); }
.td-delay{ font-family:var(--mono); text-align:right; }
.td-delay.is-late{ color:var(--dly); font-weight:700; }
.td-delay.is-flat{ color:var(--ink-3); }

.status{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:12.5px; }
.status .dot{ width:8px; height:8px; border-radius:50%; flex:none; }
.status.st-run .dot{ background:var(--run); } .status.st-run{ color:#bcd6f2; }
.status.st-stb .dot{ background:var(--stb); } .status.st-stb{ color:var(--ink-2); }
.status.st-dly .dot{ background:var(--dly); } .status.st-dly{ color:#f0c1a0; }
.status.st-don .dot{ background:var(--don); } .status.st-don{ color:#b6e2c8; }
.status.st-sch .dot{ background:var(--sch); } .status.st-sch{ color:#cdc6ef; }

.load-cell{ display:flex; align-items:center; gap:8px; }
.load-bar{ width:52px; height:5px; border-radius:3px; background:var(--line); overflow:hidden; flex:none; }
.load-bar span{ display:block; height:100%; background:var(--accent); border-radius:3px; }
.load-num{ font-family:var(--mono); font-size:12px; color:var(--ink-2); min-width:30px; text-align:right; }

.table-empty{ margin:0; padding:36px 16px; text-align:center; color:var(--ink-3); font-size:13px; }

/* ---------- フッター（ページネーション＋集計） ---------- */
.table-foot{
  display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:12px 16px; border-top:1px solid var(--line); background:var(--panel-3);
}
.pager{ display:flex; align-items:center; gap:4px; }
.pg-btn{
  min-width:28px; height:28px; padding:0 8px; border-radius:var(--radius-sm); border:1px solid var(--line);
  background:var(--panel); color:var(--ink-2); font-family:var(--mono); font-size:12px; cursor:pointer;
}
.pg-btn:hover:not(:disabled){ border-color:#33404e; color:var(--ink); }
.pg-btn.is-current{ background:var(--accent-soft); border-color:rgba(79,163,196,.45); color:var(--accent-ink); }
.pg-btn:disabled{ opacity:.35; cursor:default; }
.pg-btn:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
.pg-ellipsis{ padding:0 4px; color:var(--ink-3); font-family:var(--mono); font-size:12px; }

.summary{ display:flex; gap:18px; margin:0; flex-wrap:wrap; }
.summary div{ display:flex; align-items:baseline; gap:6px; }
.summary dt{ font-size:11px; color:var(--ink-3); }
.summary dd{ margin:0; font-family:var(--mono); font-size:13px; font-weight:700; color:var(--ink); }

/* ---------- 通知ログ ---------- */
.notif{
  grid-area:notif;
  position:sticky; top:0; height:100vh;
  display:flex; flex-direction:column; min-height:0;
  background:var(--panel); border-left:1px solid var(--line);
  padding:18px 16px 14px;
}
.notif-head{ display:flex; align-items:center; justify-content:space-between; margin-bottom:12px; }
.notif-head h2{ margin:0; font-size:13.5px; font-weight:700; }
.live-tag{
  display:flex; align-items:center; gap:6px; font-family:var(--mono); font-size:10.5px; font-weight:700;
  color:var(--don); letter-spacing:.06em;
}
.live-tag .live-dot{ background:var(--don); }

.notif-list{
  list-style:none; margin:0; padding:0; flex:1; min-height:0; overflow-y:auto;
  display:flex; flex-direction:column; gap:8px;
  scrollbar-width:thin; scrollbar-color:#2c3644 transparent;
}
.notif-list::-webkit-scrollbar{ width:7px; }
.notif-list::-webkit-scrollbar-track{ background:transparent; }
.notif-list::-webkit-scrollbar-thumb{ background:#2c3644; border-radius:4px; }
.notif-item{
  display:flex; gap:9px; padding:9px 10px; border-radius:var(--radius-sm); background:var(--panel-3);
  border:1px solid var(--line-soft);
}
.notif-item .n-mark{ width:7px; height:7px; border-radius:50%; margin-top:5px; flex:none; }
.notif-item.n-info .n-mark{ background:var(--run); }
.notif-item.n-warn .n-mark{ background:var(--dly); }
.notif-item.n-good .n-mark{ background:var(--don); }
.notif-item.n-mute .n-mark{ background:var(--stb); }
.notif-body{ min-width:0; }
.notif-msg{ margin:0; font-size:12.5px; line-height:1.5; color:var(--ink); }
.notif-time{ margin:2px 0 0; font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }

@media (prefers-reduced-motion:no-preference){
  .notif-item.n-enter{ animation:notif-in .4s ease-out; }
  @keyframes notif-in{ from{ opacity:0; transform:translateY(-6px); } to{ opacity:1; transform:none; } }
}

.notif-note{ margin:12px 0 0; padding-top:10px; border-top:1px solid var(--line-soft); font-family:var(--mono); font-size:10.5px; color:var(--ink-3); }

/* ---------- 架空注記 ---------- */
.disc{ padding:18px 24px 26px; border-top:1px solid var(--line); background:var(--panel-3); }
.disc p{ margin:0; max-width:1100px; font-size:11px; line-height:1.8; color:var(--ink-3); }

/* ---------- レスポンシブ ---------- */
@media (max-width:1160px){
  :root{ --notif-w:260px; }
}

@media (max-width:1040px){
  .shell{ grid-template-columns:1fr; grid-template-areas:"side" "main" "notif"; }
  .side{
    position:static; height:auto; flex-direction:row; align-items:center; justify-content:flex-start;
    gap:22px; padding:12px 16px; overflow-x:auto;
  }
  .side-top{ display:flex; align-items:center; gap:18px; }
  .side-brand{ padding:0; flex-direction:row; align-items:baseline; gap:8px; white-space:nowrap; }
  .side-nav{ flex-direction:row; gap:4px; }
  .nav-item span{ display:none; }
  .nav-item{ padding:9px; }
  .side-foot{ border-top:0; padding-top:0; margin-left:auto; }
  .side-user-txt{ display:none; }
  .notif{ position:static; height:auto; border-left:0; border-top:1px solid var(--line); }
  .notif-list{ max-height:340px; }
}

@media (max-width:720px){
  .main{ padding:16px 14px 32px; }
  .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)); }
  .topbar{ align-items:flex-start; }
  .toolbar{ align-items:stretch; }
  .search{ min-width:0; flex:1 1 auto; }
  .table-foot{ flex-direction:column; align-items:flex-start; }
}

@media (pointer:coarse){
  .chip, .pg-btn, .nav-item, .bell{ padding-top:9px; padding-bottom:9px; }
  .th-btn{ padding-top:12px; padding-bottom:12px; }
}

@media (prefers-reduced-motion:reduce){
  *{ animation:none !important; transition:none !important; }
}