/* スミジョブ管理画面(dashboard.htmlの検証済みパレットを踏襲) */
:root { color-scheme: light dark; }
* { box-sizing: border-box; }
body { margin: 0; font-family: system-ui, -apple-system, "Segoe UI", "Hiragino Sans", "Yu Gothic UI", sans-serif;
       background: var(--page); color: var(--ink); }
.viz {
  --page:#f9f9f7; --surface:#fcfcfb; --ink:#0b0b0b; --ink-2:#52514e; --muted:#898781;
  --grid:#e1e0d9; --axis:#c3c2b7; --border:rgba(11,11,11,.10);
  --s1:#2a78d6; --good:#006300; --bad:#d03b3b; --line:#eda100;
  --f1:#86b6ef; --f2:#5598e7; --f3:#2a78d6; --f4:#184f95;
}
@media (prefers-color-scheme: dark) {
  .viz { --page:#0d0d0d; --surface:#1a1a19; --ink:#fff; --ink-2:#c3c2b7; --muted:#898781;
         --grid:#2c2c2a; --axis:#383835; --border:rgba(255,255,255,.10);
         --s1:#3987e5; --good:#0ca30c; --bad:#d03b3b; --line:#eda100;
         --f1:#9ec5f4; --f2:#6da7ec; --f3:#3987e5; --f4:#256abf; }
}
.topbar { display:flex; align-items:center; gap:20px; padding:10px 20px; background:var(--surface);
          border-bottom:1px solid var(--border); flex-wrap:wrap; position:sticky; top:0; z-index:5; }
.topbar .brand { font-weight:700; }
.topbar nav { display:flex; gap:4px; flex-wrap:wrap; }
.topbar nav a { padding:6px 12px; border-radius:8px; text-decoration:none; color:var(--ink-2); font-size:14px; }
.topbar nav a.active, .topbar nav a:hover { background:var(--page); color:var(--ink); }
.topbar .who { margin-left:auto; font-size:12px; color:var(--muted); }
.topbar .who a { color:var(--s1); }
main { padding:20px; max-width:1400px; margin:0 auto; }
h1 { font-size:20px; margin:0 0 16px; }
h2 { font-size:14px; margin:0 0 12px; }
.cards { display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:20px; }
.card { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:14px 16px; }
.card .k { font-size:12px; color:var(--ink-2); }
.card .v { font-size:26px; font-weight:700; margin-top:2px; }
.card .d { font-size:11px; color:var(--muted); margin-top:2px; }
.panel { background:var(--surface); border:1px solid var(--border); border-radius:10px; padding:16px; margin-bottom:16px; }
.scroll-x { overflow-x:auto; }
.grid2 { display:grid; grid-template-columns:1fr 1fr; gap:16px; }
@media (max-width:900px){ .grid2 { grid-template-columns:1fr; } }
table { border-collapse:separate; border-spacing:0; width:100%; font-size:12px; white-space:nowrap; }
th { text-align:right; color:var(--muted); font-weight:600; border-bottom:1px solid var(--axis); padding:6px 8px;
     background:var(--surface); }
th:first-child, td:first-child { text-align:left; }
td { text-align:right; padding:5px 8px; border-bottom:1px solid var(--grid); font-variant-numeric:tabular-nums;
     background:var(--surface); }
tr:last-child td { border-bottom:none; }
/* 先頭列を固定(横スクロールしても行の見出しが見える) */
th:first-child, td:first-child { position:sticky; left:0; z-index:1; box-shadow:2px 0 0 var(--grid); }
/* スクロール領域はパネルの余白を含めない(余白部分に文字が透けるのを防ぐ) */
.panel.scroll-x { padding-left:0; padding-right:0; }
.panel.scroll-x > *:not(table):not(svg) { margin-left:16px; margin-right:16px; }
.panel .scroll-x { margin:0 -16px; padding:0; }
th:first-child, td:first-child { padding-left:16px; }
/* 行ホバーのハイライト(sticky列も同色に) */
tbody tr:hover td { background:color-mix(in srgb, var(--s1) 10%, var(--surface)); }
/* 積み上げグラフ用カテゴリカルパレット(dataviz検証済み) */
.viz { --c1:#2a78d6; --c2:#1baf7a; --c3:#eda100; --c4:#008300; --c5:#4a3aa7; --c6:#e34948; --c7:#e87ba4; --c8:#eb6834; }
@media (prefers-color-scheme: dark) {
  .viz { --c1:#3987e5; --c2:#199e70; --c3:#c98500; --c4:#008300; --c5:#9085e9; --c6:#e66767; --c7:#d55181; --c8:#d95926; }
}
/* カレンダー */
.cal { display:grid; grid-template-columns:repeat(7,1fr); gap:4px; }
.cal .dow { text-align:center; font-size:11px; color:var(--muted); padding:4px 0; }
.cal .day { min-height:74px; border:1px solid var(--grid); border-radius:8px; padding:5px 7px; font-size:11px; background:var(--surface); }
.cal .day.out { opacity:.35; }
.cal .day.today { border-color:var(--s1); box-shadow:0 0 0 1px var(--s1) inset; }
.cal .day .dn { color:var(--muted); }
.cal .day .hn { font-weight:700; font-size:14px; }
.cal .day .fee { color:var(--good); }
.bar-row { display:grid; grid-template-columns:160px 1fr 64px; align-items:center; gap:8px; margin:4px 0; font-size:12px; }
.bar-row .lbl { color:var(--ink-2); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; text-align:right; }
.bar-fill { height:16px; border-radius:0 4px 4px 0; background:var(--s1); min-width:2px; }
.bar-val { color:var(--ink-2); font-variant-numeric:tabular-nums; }
.tt { position:fixed; pointer-events:none; background:var(--surface); border:1px solid var(--border);
      border-radius:6px; padding:6px 9px; font-size:12px; box-shadow:0 2px 8px rgba(0,0,0,.15); display:none; z-index:10; }
.note { color:var(--muted); font-size:11px; margin-top:8px; }
input, select, button, textarea { font:inherit; padding:6px 10px; border:1px solid var(--axis); border-radius:8px;
  background:var(--surface); color:var(--ink); }
button, .btn { cursor:pointer; background:var(--s1); color:#fff; border:none; padding:7px 16px; border-radius:8px; text-decoration:none; display:inline-block; }
button.ghost { background:var(--surface); color:var(--ink); border:1px solid var(--axis); }
.login-box { max-width:360px; margin:80px auto; }
.login-box .panel { display:flex; flex-direction:column; gap:12px; }
.err { color:var(--bad); font-size:13px; }
.ok { color:var(--good); font-size:13px; }
.filters { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin-bottom:12px; }
.badge { display:inline-block; padding:1px 8px; border-radius:10px; font-size:11px; background:var(--page); border:1px solid var(--grid); }
.badge.warn { color:var(--bad); border-color:var(--bad); }
.spend-grid input, .paste-grid input { width:96px; text-align:right; padding:4px 6px;
  border:1px solid var(--grid); border-radius:4px; background:var(--surface); }
.paste-grid input:focus { outline:2px solid var(--s1); outline-offset:-1px; border-color:var(--s1); }
.paste-grid input.pasted { background:color-mix(in srgb, var(--line) 20%, var(--surface)); }
.paste-grid td { padding:2px 3px; }
details.rowdetail summary { cursor:pointer; color:var(--s1); }
svg text { font-family:inherit; }