/* 共通ログイン。トークンは design-system.md §1（紺＝会社・全社 §11）。ライト/ダーク両対応 */
:root {
  --primary: #0B4975; --on-primary: #FFFFFF;
  --primary-container: #CDE1F3; --on-primary-container: #002642;
  --surface: #F8FAFD; --surface-container-lowest: #FFFFFF; --surface-container-low: #F3F6FA;
  --surface-container: #EBF1F6; --surface-container-high: #E2E9F0;
  --on-surface: #161B20; --on-surface-variant: #4A545D;
  --outline: #B4BFCA; --outline-variant: #D8DFE6;
  --success: #2B795C; --success-container: #C7F0DC; --on-success-container: #073B28;
  --warning-container: #FAE6BB; --on-warning-container: #574400;
  --error: #A64355; --error-container: #FFDADD; --on-error: #FFFFFF; --on-error-container: #5C1022;
  --inverse-surface: #2B3137; --inverse-on-surface: #EEF1F4;
  --font-sans: system-ui, -apple-system, "Segoe UI", "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Noto Sans JP", sans-serif;
  --font-mono: "Cascadia Code", "SFMono-Regular", Consolas, "Noto Sans Mono", monospace;
  --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --radius-full: 999px;
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-6: 24px; --space-8: 32px;
  --elev-1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --elev-3: 0 4px 8px rgba(16,24,40,.06), 0 8px 16px rgba(16,24,40,.10);
  --motion-effect-default-dur: 210ms;
  --motion-effect-default: linear(0, 0.16, 0.414, 0.627, 0.774, 0.868, 0.925, 0.958, 0.977, 0.987, 0.993, 0.996, 1);
  --top-bg: var(--primary); --top-fg: var(--on-primary);
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --primary: #96C3EC; --on-primary: #002846;
    --primary-container: #17466A; --on-primary-container: #CDE1F3;
    --surface: #101316; --surface-container-lowest: #0B0E11; --surface-container-low: #161A1E;
    --surface-container: #1C2126; --surface-container-high: #232A30;
    --on-surface: #E1E5E8; --on-surface-variant: #B5BBC2;
    --outline: #4A545D; --outline-variant: #282F35;
    --success: #8CCFB1; --success-container: #043726; --on-success-container: #C7F0DC;
    --warning-container: #3C2B00; --on-warning-container: #DBB970;
    --error: #F2A6AE; --error-container: #472026; --on-error: #5C1022; --on-error-container: #FFDADD;
    --inverse-surface: #E1E5E8; --inverse-on-surface: #2B3137;
    --elev-1: 0 1px 2px rgba(0,0,0,.30), 0 1px 3px rgba(0,0,0,.40);
    --elev-3: 0 4px 8px rgba(0,0,0,.30), 0 8px 16px rgba(0,0,0,.45);
    --top-bg: var(--surface-container-high); --top-fg: var(--on-surface);
  }
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--surface); color: var(--on-surface);
  font-family: var(--font-sans); font-size: 1rem; line-height: 1.65; -webkit-font-smoothing: antialiased;
  padding-bottom: env(safe-area-inset-bottom);
}
h1 { font-size: 1.375rem; font-weight: 700; line-height: 1.3; margin: 0 0 var(--space-4); }
h2 { font-size: 1.125rem; font-weight: 600; margin: 0 0 var(--space-3); display: flex; align-items: center; gap: var(--space-2); }
h3 { font-size: .9375rem; font-weight: 600; margin: 0 0 var(--space-2); display: flex; align-items: center; gap: var(--space-2); color: var(--on-surface-variant); }
p { margin: 0; }
a { color: var(--primary); }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 1.25em; height: 1.25em; flex-shrink: 0; fill: currentColor; vertical-align: -0.25em; }
.mono { font-family: var(--font-mono); font-size: .875rem; }
.sub { color: var(--on-surface-variant); font-size: .875rem; }
.empty { color: var(--on-surface-variant); padding: var(--space-4) 0; }
:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }

/* ---- 上の帯 ---- */
.top {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: calc(env(safe-area-inset-top) + var(--space-2)) max(var(--space-4), env(safe-area-inset-right)) var(--space-2) max(var(--space-4), env(safe-area-inset-left));
  background: var(--top-bg); color: var(--top-fg); min-height: 56px;
}
.brand { font-weight: 700; letter-spacing: .02em; }
.top-nav { display: flex; gap: var(--space-1); flex-wrap: wrap; justify-content: flex-end; }
.nav-link {
  display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); color: inherit; text-decoration: none; background: transparent; border: 0;
  font: inherit; font-size: .875rem; font-weight: 600; cursor: pointer;
}
.nav-link:hover { background: rgba(255,255,255,.12); }
.nav-link.is-current { background: rgba(255,255,255,.18); }
@media (max-width: 520px) { .nav-link span { display: none; } .nav-link { min-width: 44px; justify-content: center; } }

.wrap { max-width: 1100px; margin: 0 auto; padding: var(--space-6) max(var(--space-4), env(safe-area-inset-left)); }

/* ---- カード・ボタン ---- */
.card {
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant);
  border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--elev-1);
}
.center-card { max-width: 420px; margin: 8vh auto 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-4); }
.center-card h1 { margin: 0; }
.hero-icon { width: 56px; height: 56px; fill: var(--primary); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  min-height: 48px; padding: 10px 20px; border-radius: var(--radius-md); border: 0;
  background: var(--primary); color: var(--on-primary); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: none; box-shadow: var(--elev-1);
  transition: background-color var(--motion-effect-default-dur) var(--motion-effect-default), opacity var(--motion-effect-default-dur) var(--motion-effect-default);
}
.btn:disabled { opacity: .45; cursor: default; }
.btn--big { width: 100%; min-height: 56px; font-size: 1.0625rem; }
.btn--ghost { background: transparent; color: var(--primary); border: 1px solid var(--outline); box-shadow: none; }
.btn--danger { background: var(--error); color: var(--on-error); }
.btn--danger-text { color: var(--error); }
.btn:not(:disabled):hover { filter: brightness(1.06); }
.btn--ghost:not(:disabled):hover { background: var(--surface-container-low); filter: none; }

.msg { width: 100%; padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: .9375rem; text-align: left; }
.msg--error { background: var(--error-container); color: var(--on-error-container); }
.msg--success { background: var(--success-container); color: var(--on-success-container); }
.wrap > .msg { margin-top: var(--space-4); }

.chips { display: inline-flex; flex-wrap: wrap; gap: 6px; vertical-align: middle; }
.chip {
  display: inline-flex; align-items: center; gap: 4px; padding: 1px 10px; border-radius: var(--radius-full);
  background: var(--surface-container-high); color: var(--on-surface-variant); font-size: .75rem; font-weight: 600; white-space: nowrap;
}
.chip .icon { width: 14px; height: 14px; }
.chip--primary { background: var(--primary-container); color: var(--on-primary-container); }
.chip--warning { background: var(--warning-container); color: var(--on-warning-container); }
.chip--error { background: var(--error-container); color: var(--on-error-container); }

/* ---- アプリの一覧 ---- */
.apps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
.app-link {
  display: flex; align-items: center; gap: var(--space-3); min-height: 64px; padding: var(--space-4);
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-lg);
  color: var(--on-surface); text-decoration: none; font-weight: 600; box-shadow: var(--elev-1);
}
.app-link .icon { color: var(--primary); width: 28px; height: 28px; }
.app-link:hover { background: var(--surface-container-low); }

/* ---- 一覧（パスキー） ---- */
.list { list-style: none; margin: 0 0 var(--space-4); padding: 0; display: grid; gap: var(--space-2); }
.item {
  display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4);
  background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-md);
}
.item-icon .icon { width: 28px; height: 28px; color: var(--on-surface-variant); }
.item-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.item-title { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); font-weight: 600; }
.item-sub { color: var(--on-surface-variant); font-size: .8125rem; }
@media (max-width: 520px) { .item { flex-wrap: wrap; } .item > .btn { width: 100%; } }

.link-card { display: flex; flex-wrap: wrap; gap: var(--space-6); align-items: center; margin-top: var(--space-4); }
.qr { width: 200px; max-width: 100%; background: #FFFFFF; border-radius: var(--radius-sm); padding: var(--space-2); }
.qr svg { display: block; width: 100%; height: auto; }
.link-body { flex: 1; min-width: 220px; display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.left { font-weight: 700; font-variant-numeric: tabular-nums; }
.url { word-break: break-all; color: var(--on-surface-variant); }

/* ---- 管理 ---- */
.admin { display: grid; gap: var(--space-6); }
@media (min-width: 960px) { .admin { grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); align-items: start; } .detail { position: sticky; top: var(--space-4); } }
.bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-3); }
.bar h1 { margin: 0; }
.table-wrap { overflow-x: auto; background: var(--surface-container-lowest); border: 1px solid var(--outline-variant); border-radius: var(--radius-md); }
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
th { text-align: left; font-weight: 600; color: var(--on-surface-variant); border-bottom: 2px solid var(--outline); padding: var(--space-2) var(--space-3); white-space: nowrap; font-size: .8125rem; }
td { border-bottom: 1px solid var(--outline-variant); padding: var(--space-2) var(--space-3); white-space: nowrap; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
#users tbody tr { cursor: pointer; }
#users tbody tr:hover { background: var(--surface-container-low); }
#users tbody tr.is-selected { background: var(--primary-container); color: var(--on-primary-container); }
.detail { display: flex; flex-direction: column; gap: var(--space-4); }
.detail-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--space-3); }
.detail-head h2 { margin: 0; }
.detail-sec { border-top: 1px solid var(--outline-variant); padding-top: var(--space-4); }
.detail .list { margin-bottom: var(--space-3); }
.row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
.checks { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); }
.check { display: inline-flex; align-items: center; gap: var(--space-2); min-height: 44px; cursor: pointer; }
.check input { width: 20px; height: 20px; accent-color: var(--primary); }
.audit { margin-top: var(--space-8); }
.audit-list { list-style: none; margin: 0; padding: 0; font-size: .875rem; }
.audit-list li { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-4); padding: var(--space-2) 0; border-bottom: 1px solid var(--outline-variant); }
.audit-list time { color: var(--on-surface-variant); font-variant-numeric: tabular-nums; min-width: 7.5em; }
.audit-type { font-weight: 600; min-width: 9em; }
.audit-list li.is-warn .audit-type { color: var(--error); }

/* ---- ダイアログ・入力 ---- */
.dialog {
  border: 0; border-radius: var(--radius-lg); padding: var(--space-6); width: min(440px, calc(100vw - 32px));
  background: var(--surface-container-lowest); color: var(--on-surface); box-shadow: var(--elev-3);
}
.dialog::backdrop { background: rgba(0,0,0,.4); }
.dialog form { display: flex; flex-direction: column; gap: var(--space-4); }
.dialog h2 { margin: 0; }
.facts { font-size: .9375rem; }
.facts th { border: 0; padding: var(--space-1) var(--space-3) var(--space-1) 0; width: 1%; }
.facts td { border: 0; padding: var(--space-1) 0; white-space: normal; }
.dialog-body { color: var(--on-surface-variant); }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-3); flex-wrap: wrap; }
.field { display: flex; flex-direction: column; gap: var(--space-1); font-size: .875rem; font-weight: 600; color: var(--on-surface-variant); }
.field input {
  font: inherit; font-size: 1rem; font-weight: 400; color: var(--on-surface); background: var(--surface);
  border: 1px solid var(--outline); border-radius: var(--radius-sm); padding: 10px 12px; min-height: 44px;
}

.snackbar {
  position: fixed; left: 50%; bottom: calc(var(--space-6) + env(safe-area-inset-bottom)); transform: translate(-50%, 16px);
  background: var(--inverse-surface); color: var(--inverse-on-surface); padding: var(--space-3) var(--space-6);
  border-radius: var(--radius-sm); box-shadow: var(--elev-3); opacity: 0; pointer-events: none; max-width: calc(100vw - 32px);
  transition: opacity var(--motion-effect-default-dur) var(--motion-effect-default), transform var(--motion-effect-default-dur) var(--motion-effect-default);
}
.snackbar.is-open { opacity: 1; transform: translate(-50%, 0); }

@media (prefers-reduced-motion: reduce) { * { transition-duration: 1ms !important; } }