/* ─────────────────────────────────────────────────────────
   canalsystem 管理画面
   方針: 温かみのある紙色 × 墨色 × シャンパンの1アクセント。
        線を減らし、余白と階層で情報を分ける。
        primary は黒（時代で古びない）、アクセントは差し色に留める。
   ───────────────────────────────────────────────────────── */
:root{
  color-scheme: light dark;

  --bg:#F5F3EF;
  --surface:#FFFFFF;
  --surface-alt:#FAF8F5;
  --ink:#141619;
  --ink-2:#5A6068;
  --ink-3:#8D9299;
  --line:#E8E3DA;
  --line-soft:#F1EDE6;
  --accent:#A8834F;
  --accent-soft:#F4EEE4;
  --ok:#2E6B4C;
  --warn:#8A6321;
  --bad:#A33A28;

  --primary:#141619;
  --primary-ink:#FFFFFF;

  --r-sm:10px; --r:14px; --r-lg:20px;
  --tap:48px;
  --safe-b: env(safe-area-inset-bottom, 0px);

  --sh-sm: 0 1px 2px rgba(20,22,25,.05);
  --sh:    0 1px 3px rgba(20,22,25,.06), 0 6px 18px -8px rgba(20,22,25,.10);
  --sh-lg: 0 -2px 12px rgba(20,22,25,.05), 0 24px 60px -12px rgba(20,22,25,.28);

  --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Hiragino Sans",
          "Hiragino Kaku Gothic ProN", "Noto Sans JP", "Yu Gothic UI", Meiryo, sans-serif;
  --font-display: "Hiragino Mincho ProN", "Yu Mincho", YuMincho, "Noto Serif JP", serif;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0E1012;
    --surface:#16191C;
    --surface-alt:#1B1F23;
    --ink:#ECEAE5;
    --ink-2:#9BA1A8;
    --ink-3:#6C727A;
    --line:#252A2F;
    --line-soft:#1E2327;
    --accent:#C8A672;
    --accent-soft:#221E17;
    --ok:#5FB489;
    --warn:#D0A45C;
    --bad:#DF7A66;
    --primary:#ECEAE5;
    --primary-ink:#111316;
    --sh-sm: 0 1px 2px rgba(0,0,0,.4);
    --sh:    0 1px 3px rgba(0,0,0,.45), 0 8px 22px -10px rgba(0,0,0,.7);
    --sh-lg: 0 -2px 12px rgba(0,0,0,.35), 0 24px 60px -12px rgba(0,0,0,.8);
  }
}

*{ box-sizing:border-box; -webkit-tap-highlight-color:transparent; }
html,body{ margin:0; padding:0; }
body{
  background:var(--bg); color:var(--ink);
  font-family:var(--font);
  font-size:15px; line-height:1.65;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  font-feature-settings:"palt" 1;
}
a{ color:var(--ink); text-underline-offset:3px; }
h1,h2,h3{ margin:0; line-height:1.4; letter-spacing:.01em; font-weight:650; }
h2{ font-size:17px; } h3{ font-size:14px; }
p{ margin:0; }
svg{ display:block; }

/* ── ログイン ─────────────────────────────────────────── */
body.auth{
  display:grid; place-items:center; min-height:100dvh; padding:24px;
  background:
    radial-gradient(1100px 520px at 50% -12%, color-mix(in srgb, var(--accent) 12%, transparent), transparent 70%),
    var(--bg);
}
.auth-wrap{ width:100%; max-width:392px; }
.auth-card{
  padding:36px 28px 30px; border-radius:var(--r-lg);
  background:var(--surface); border:1px solid var(--line-soft); box-shadow:var(--sh);
}
.auth-mark{
  width:42px; height:42px; margin:0 auto 18px; border-radius:12px;
  display:grid; place-items:center;
  background:var(--primary); color:var(--primary-ink);
  font-family:var(--font-display); font-size:20px; line-height:1; letter-spacing:.02em;
}
.auth-title{
  font-family:var(--font-display); font-size:23px; font-weight:600;
  letter-spacing:.06em; text-align:center; margin-bottom:6px;
}
.auth-sub{
  text-align:center; color:var(--ink-3); font-size:11px;
  letter-spacing:.22em; text-transform:uppercase; margin-bottom:26px;
}
.auth-note{ color:var(--ink-3); font-size:11.5px; margin-top:20px; text-align:center; line-height:1.7; }

/* ── フォーム ─────────────────────────────────────────── */
.field{ display:block; margin-bottom:16px; }
.field > span{
  display:block; font-size:11px; color:var(--ink-2); margin-bottom:7px;
  letter-spacing:.08em; font-weight:600;
}
input,select,textarea{
  width:100%; min-height:var(--tap); padding:11px 14px;
  font-size:16px; font-family:inherit; color:var(--ink);
  background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r-sm);
  transition:border-color .15s, box-shadow .15s, background .15s;
}
input::placeholder,textarea::placeholder{ color:var(--ink-3); }
input:focus,select:focus,textarea:focus{
  outline:none; background:var(--surface);
  border-color:color-mix(in srgb, var(--accent) 55%, var(--line));
  box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 16%, transparent);
}
textarea{ min-height:92px; resize:vertical; line-height:1.7; }
select{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%),linear-gradient(135deg,var(--ink-3) 50%,transparent 50%);
  background-position:calc(100% - 18px) 50%, calc(100% - 13px) 50%;
  background-size:5px 5px, 5px 5px; background-repeat:no-repeat; padding-right:38px;
}
input[type=checkbox]{ width:auto; min-height:auto; accent-color:var(--accent); }

/* ── ボタン ───────────────────────────────────────────── */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:7px;
  min-height:var(--tap); padding:0 18px; border-radius:var(--r-sm);
  border:1px solid var(--line); background:var(--surface); color:var(--ink);
  font-family:inherit; font-size:14.5px; font-weight:600; letter-spacing:.02em;
  white-space:nowrap; cursor:pointer; transition:transform .08s, box-shadow .15s, background .15s, border-color .15s;
  box-shadow:var(--sh-sm);
}
.btn:active{ transform:translateY(1px); }
.btn.primary{
  background:var(--primary); color:var(--primary-ink); border-color:transparent;
  box-shadow:0 1px 2px rgba(20,22,25,.2), 0 8px 20px -10px rgba(20,22,25,.5);
}
.btn.ghost{ background:transparent; border-color:transparent; box-shadow:none; color:var(--ink-2); }
.btn.ghost:active{ background:var(--line-soft); }
.btn.outline{ background:transparent; }
.btn.danger{ color:var(--bad); border-color:color-mix(in srgb, var(--bad) 26%, var(--line)); }
.btn.block{ width:100%; }
.btn.sm{ min-height:38px; padding:0 12px; font-size:13px; border-radius:9px; }
.btn:disabled{ opacity:.45; pointer-events:none; }
.btn svg{ width:17px; height:17px; }

/* ── レイアウト ───────────────────────────────────────── */
.app-root{ min-height:100dvh; padding-bottom:calc(78px + var(--safe-b)); }
.topbar{
  position:sticky; top:0; z-index:20;
  display:flex; align-items:center; gap:12px; padding:14px 18px 13px;
  background:color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter:saturate(180%) blur(14px);
  -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--line-soft);
}
.topbar .title{ font-size:16.5px; font-weight:680; letter-spacing:.01em; }
.topbar .sub{ font-size:11px; color:var(--ink-3); letter-spacing:.04em; margin-top:1px; }
.topbar select{ width:auto; min-height:36px; font-size:12.5px; padding:0 30px 0 11px; border-radius:9px; }
.content{ max-width:920px; margin:0 auto; padding:18px 16px 28px; }
.boot-loading{ padding:64px 20px; text-align:center; color:var(--ink-3); font-size:13px; letter-spacing:.06em; }

/* ── タブバー ─────────────────────────────────────────── */
.tabbar{
  position:fixed; left:0; right:0; bottom:0; z-index:30;
  display:grid; grid-template-columns:repeat(5,1fr);
  background:color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter:saturate(180%) blur(18px);
  -webkit-backdrop-filter:saturate(180%) blur(18px);
  border-top:1px solid var(--line-soft);
  padding-bottom:var(--safe-b);
}
.tabbar button{
  position:relative; background:none; border:0; cursor:pointer;
  color:var(--ink-3); font-family:inherit; font-size:10px; font-weight:600; letter-spacing:.04em;
  padding:11px 2px 12px; display:flex; flex-direction:column; align-items:center; gap:5px; min-height:60px;
  transition:color .15s;
}
.tabbar button svg{ width:21px; height:21px; }
.tabbar button.on{ color:var(--ink); }
.tabbar button.on::before{
  content:''; position:absolute; top:0; left:50%; transform:translateX(-50%);
  width:26px; height:2px; border-radius:0 0 2px 2px; background:var(--accent);
}

/* ── カード ───────────────────────────────────────────── */
.card{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:16px 18px; margin-bottom:14px; box-shadow:var(--sh-sm);
}
.card > h3{
  font-size:12px; letter-spacing:.1em; color:var(--ink-2); font-weight:700;
  margin-bottom:12px;
}
.card > h3 + .item{ padding-top:0; }

/* ── KPI ──────────────────────────────────────────────── */
.kpis{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; margin-bottom:14px; }
@media(min-width:660px){ .kpis{ grid-template-columns:repeat(4,1fr); } }
.kpi{
  background:var(--surface); border:1px solid var(--line-soft); border-radius:var(--r);
  padding:15px 16px 14px; box-shadow:var(--sh-sm);
}
.kpi .k{
  font-size:10.5px; color:var(--ink-3); letter-spacing:.12em; font-weight:600;
  text-transform:uppercase; margin-bottom:4px;
}
.kpi .v{
  font-size:27px; font-weight:660; letter-spacing:-.02em; line-height:1.2;
  font-variant-numeric:tabular-nums;
}
.kpi .v.sm{ font-size:22px; }

/* ── リスト ───────────────────────────────────────────── */
.item{
  display:flex; gap:13px; align-items:flex-start;
  padding:13px 0; border-bottom:1px solid var(--line-soft);
}
.item:last-child{ border-bottom:0; padding-bottom:0; }
.item[data-resv],.item[data-t],.item[data-u],.item[data-x],.item[data-sub]{
  cursor:pointer; border-radius:8px; margin:0 -8px; padding-left:8px; padding-right:8px;
  transition:background .12s;
}
.item[data-resv]:active,.item[data-t]:active,.item[data-u]:active,
.item[data-x]:active,.item[data-sub]:active{ background:var(--line-soft); }
.item .when{
  flex:0 0 54px; font-weight:660; font-size:15px;
  font-variant-numeric:tabular-nums; letter-spacing:-.01em; padding-top:1px;
}
.item .body{ flex:1 1 auto; min-width:0; }
.item .body .l1{ font-weight:600; font-size:14.5px; display:flex; align-items:center; gap:7px; flex-wrap:wrap; }
.item .body .l2{ font-size:12px; color:var(--ink-3); margin-top:2px; letter-spacing:.01em; }
.item .amount{ font-variant-numeric:tabular-nums; font-size:13px; color:var(--ink-2); font-weight:600; padding-top:2px; }
.item .chev{ color:var(--ink-3); flex:0 0 auto; padding-top:3px; }
.item .chev svg{ width:16px; height:16px; }
.item .lead{
  flex:0 0 36px; height:36px; border-radius:10px; display:grid; place-items:center;
  background:var(--accent-soft); color:var(--accent);
}
.item .lead svg{ width:18px; height:18px; }

/* ── 補助 ─────────────────────────────────────────────── */
.row{ display:flex; gap:10px; align-items:center; }
.row.wrap{ flex-wrap:wrap; }
.grow{ flex:1 1 auto; min-width:0; }
.muted{ color:var(--ink-3); }
.small{ font-size:12px; }
.right{ text-align:right; }
.section-title{
  font-size:11px; letter-spacing:.14em; color:var(--ink-3); font-weight:700;
  text-transform:uppercase; margin:22px 2px 10px;
}
.hint{ font-size:12px; color:var(--ink-3); line-height:1.75; margin-top:10px; }

.badge{
  display:inline-flex; align-items:center; font-size:10.5px; font-weight:650;
  padding:2.5px 8px; border-radius:999px; letter-spacing:.05em; white-space:nowrap;
  background:var(--line-soft); color:var(--ink-2);
}
.badge.ok{ background:color-mix(in srgb, var(--ok) 13%, transparent); color:var(--ok); }
.badge.warn{ background:color-mix(in srgb, var(--warn) 15%, transparent); color:var(--warn); }
.badge.bad{ background:color-mix(in srgb, var(--bad) 12%, transparent); color:var(--bad); }
.badge.accent{ background:var(--accent-soft); color:var(--accent); }

.alert,.notice{
  border-radius:var(--r-sm); padding:11px 13px; font-size:12.5px; line-height:1.7; margin-bottom:14px;
}
.alert{ background:color-mix(in srgb, var(--bad) 10%, var(--surface)); color:var(--bad);
        border:1px solid color-mix(in srgb, var(--bad) 22%, transparent); }
.notice{ background:var(--accent-soft); color:var(--ink-2);
         border:1px solid color-mix(in srgb, var(--accent) 22%, transparent); }
.empty{ color:var(--ink-3); text-align:center; padding:34px 12px; font-size:13px; letter-spacing:.03em; }

/* ── シフト表 ─────────────────────────────────────────── */
.shift-grid{ overflow-x:auto; padding:8px; -webkit-overflow-scrolling:touch; }
.shift-grid table{ border-collapse:separate; border-spacing:4px; width:100%; min-width:600px; font-size:12px; }
.shift-grid th{
  font-size:10.5px; font-weight:650; color:var(--ink-3); letter-spacing:.06em;
  padding:4px 2px 8px; text-align:center;
}
.shift-grid th .wd{ display:block; font-size:9.5px; margin-top:1px; }
.shift-grid td{ text-align:center; }
.shift-grid th:first-child,.shift-grid td:first-child{
  text-align:left; position:sticky; left:0; z-index:1;
  background:var(--surface); min-width:92px; font-weight:600; font-size:13px; padding-left:2px;
}
.shift-cell{
  cursor:pointer; height:46px; border-radius:9px; background:var(--surface-alt);
  color:var(--ink-3); font-variant-numeric:tabular-nums; font-size:11px; line-height:1.35;
  border:1px solid transparent; transition:background .12s, border-color .12s;
}
.shift-cell.on{
  background:color-mix(in srgb, var(--accent) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--accent) 28%, transparent);
  color:var(--ink); font-weight:600;
}
.shift-cell.worked{
  background:color-mix(in srgb, var(--ok) 12%, var(--surface));
  border-color:color-mix(in srgb, var(--ok) 26%, transparent); color:var(--ok); font-weight:600;
}
.shift-cell.absent{
  background:color-mix(in srgb, var(--bad) 11%, var(--surface));
  border-color:color-mix(in srgb, var(--bad) 26%, transparent); color:var(--bad); font-weight:650;
}

/* ── 時間枠 ───────────────────────────────────────────── */
.slots{ display:grid; grid-template-columns:repeat(auto-fill,minmax(82px,1fr)); gap:9px; }
.slot{
  min-height:46px; border-radius:var(--r-sm); background:var(--surface-alt);
  border:1px solid var(--line); color:var(--ink); font-family:inherit;
  font-weight:640; font-size:14.5px; font-variant-numeric:tabular-nums; letter-spacing:.01em;
  cursor:pointer; transition:all .12s;
}
.slot:active{ transform:translateY(1px); }
.slot.on{ background:var(--primary); color:var(--primary-ink); border-color:transparent; }

/* ── モーダル ─────────────────────────────────────────── */
.modal-bg{
  position:fixed; inset:0; z-index:50; display:flex; align-items:flex-end; justify-content:center;
  background:rgba(12,14,16,.44); backdrop-filter:blur(3px); -webkit-backdrop-filter:blur(3px);
  animation:fade .18s ease;
}
@media(min-width:660px){ .modal-bg{ align-items:center; } }
@keyframes fade{ from{ opacity:0 } to{ opacity:1 } }
@keyframes rise{ from{ transform:translateY(16px); opacity:.6 } to{ transform:none; opacity:1 } }
.modal{
  background:var(--surface); width:100%; max-width:520px; max-height:90dvh; overflow:auto;
  border-radius:var(--r-lg) var(--r-lg) 0 0; padding:22px 20px;
  padding-bottom:calc(20px + var(--safe-b)); box-shadow:var(--sh-lg);
  animation:rise .22s cubic-bezier(.2,.8,.2,1);
}
@media(min-width:660px){ .modal{ border-radius:var(--r-lg); } }
.modal h2{ font-size:18px; margin-bottom:18px; letter-spacing:.01em; }
.modal h3{ font-size:11px; letter-spacing:.1em; color:var(--ink-3); font-weight:700; margin:20px 0 10px; }
.modal .card{ box-shadow:none; background:var(--surface-alt); }
.modal-actions{ display:flex; gap:10px; margin-top:20px; }
.modal-actions .btn{ flex:1; }

/* ── その他 ───────────────────────────────────────────── */
.code-box{
  background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--r-sm);
  padding:12px 13px; font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  font-size:11.5px; line-height:1.85; word-break:break-all; white-space:pre-wrap; color:var(--ink-2);
}
details.card > summary{
  cursor:pointer; font-size:12.5px; color:var(--ink-2); font-weight:600; list-style:none;
}
details.card > summary::-webkit-details-marker{ display:none; }
details.card > summary::before{ content:'＋ '; color:var(--ink-3); }
details.card[open] > summary::before{ content:'− '; }

.toast{
  position:fixed; left:14px; right:14px; z-index:60; margin:0;
  bottom:calc(88px + var(--safe-b)); box-shadow:var(--sh);
  animation:rise .22s cubic-bezier(.2,.8,.2,1);
}
@media(min-width:660px){ .toast{ left:auto; right:20px; max-width:360px; } }