/* console.css — 文件中心 as a Service 主控台
   同一套 design tokens（來源：site/src/styles/global.css :root），
   主控台以中性灰階為主、品牌色只做少量點綴。 */
:root {
  --color-brand: #256575;
  --color-brand-hover: #1B4A56;
  --color-brand-subtle: #E6F3F6;
  --color-brand-border: #5FA3B5;
  --color-on-brand: #FFFFFF;
  --color-accent: #FACB66;
  --color-accent-subtle: #FFF6E5;
  --color-ink: #334155;
  --color-ink-secondary: #475569;
  --color-ink-muted: #64748B;
  --color-ink-faint: #94A3B8;
  --color-surface: #FFFFFF;
  --color-surface-subtle: #F8FAFC;
  --color-surface-muted: #F1F5F9;
  --color-border: #E2E8F0;
  --color-border-strong: #CBD5E1;
  --color-success: #15803D;
  --color-success-bg: #DCFCE7;
  --color-danger: #B91C1C;
  --color-danger-bg: #FEE2E2;
  --color-warning: #C2410C;
  --color-warning-bg: #FFEDD5;
  --color-info: #0369A1;
  --color-info-bg: #E0F2FE;
  --space-2xs: 4px; --space-xs: 8px; --space-sm: 12px; --space-md: 16px;
  --space-lg: 24px; --space-xl: 32px; --space-2xl: 48px;
  --font-family: Inter, -apple-system, 'Helvetica Neue', 'PingFang TC', 'Microsoft JhengHei', sans-serif;
  --radius-sm: 4px; --radius-md: 6px; --radius-lg: 12px; --radius-full: 999px;
  --shadow-sm: 0 1px 2px 0 rgba(18,18,23,0.05);
  --shadow-md: 0 4px 8px 0 rgba(9,7,0,0.04);
}

* { margin: 0; padding: 0; box-sizing: border-box; }
body {
  font-family: var(--font-family);
  font-size: 14px; line-height: 1.65;
  color: var(--color-ink);
  background: var(--color-surface-subtle);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--color-brand); text-decoration: none; }
a:hover { color: var(--color-brand-hover); text-decoration: underline; }
button { font-family: inherit; cursor: pointer; }
code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; background: var(--color-surface-muted); padding: 1px 5px; border-radius: var(--radius-sm); }

/* DEMO 帶 */
.demo-band {
  background: repeating-linear-gradient(-45deg, #3F3F46, #3F3F46 14px, #52525B 14px, #52525B 28px);
  color: #FAFAFA; text-align: center;
  padding: 6px var(--space-md);
  font-size: 12px; letter-spacing: 0.06em;
}
.demo-band strong { color: var(--color-accent); }

/* Header */
.console-header {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: var(--space-md) var(--space-lg);
  display: flex; flex-wrap: wrap; gap: var(--space-sm) var(--space-lg);
  align-items: baseline; justify-content: space-between;
}
.console-header h1 { font-size: 18px; font-weight: 700; }
.console-header h1 .scope { color: var(--color-ink-muted); font-weight: 400; font-size: 13px; margin-left: var(--space-xs); }
.console-header nav { display: flex; gap: var(--space-md); font-size: 13px; flex-wrap: wrap; }

/* 時間戳帶 */
.stamp-band {
  padding: var(--space-xs) var(--space-lg);
  font-size: 12px; color: var(--color-ink-muted);
  display: flex; gap: var(--space-lg); flex-wrap: wrap;
  background: var(--color-surface-muted);
  border-bottom: 1px solid var(--color-border);
}
.stamp-band .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; margin-right: 5px; }
.dot-ok { background: var(--color-success); }
.dot-warn { background: var(--color-warning); }

main { max-width: 1120px; margin: 0 auto; padding: var(--space-lg); display: grid; gap: var(--space-lg); }

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}
.card > header {
  padding: var(--space-md) var(--space-lg);
  border-bottom: 1px solid var(--color-border);
  display: flex; align-items: baseline; gap: var(--space-sm); flex-wrap: wrap;
}
.card > header h2 { font-size: 15px; font-weight: 700; }
.card > header .sub { font-size: 12px; color: var(--color-ink-muted); }
.card .body { padding: var(--space-md) var(--space-lg); }
.card .body.flush { padding: 0; }

/* 表格 */
.tbl-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 13px; }
th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--color-border); vertical-align: top; }
th { background: var(--color-surface-muted); color: var(--color-ink-secondary); font-weight: 600; white-space: nowrap; font-size: 12px; }
tr:last-child td { border-bottom: none; }
td.num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
tr.row-danger td { background: var(--color-danger-bg); }
tr.row-ghost td { color: var(--color-ink-faint); background: var(--color-surface-subtle); }

/* badge */
.badge {
  display: inline-block; padding: 1px 8px; border-radius: var(--radius-full);
  font-size: 11px; font-weight: 600; white-space: nowrap; line-height: 18px;
}
.badge-live { background: var(--color-success-bg); color: var(--color-success); }
.badge-warn { background: var(--color-warning-bg); color: var(--color-warning); }
.badge-danger { background: var(--color-danger-bg); color: var(--color-danger); }
.badge-info { background: var(--color-info-bg); color: var(--color-info); }
.badge-muted { background: var(--color-surface-muted); color: var(--color-ink-muted); }
.badge-brand { background: var(--color-brand-subtle); color: var(--color-brand); }
.badge-human { background: var(--color-accent-subtle); color: #8a6a1c; }

/* KPI 帶 */
.kpi-grid {
  display: grid; gap: var(--space-sm);
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.kpi {
  background: var(--color-surface); border: 1px solid var(--color-border);
  border-radius: var(--radius-lg); padding: var(--space-sm) var(--space-md);
  box-shadow: var(--shadow-sm);
}
.kpi .k-label { font-size: 12px; color: var(--color-ink-muted); }
.kpi .k-value { font-size: 24px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.3; }
.kpi .k-note { font-size: 11px; color: var(--color-ink-faint); }
.kpi.k-live { border-left: 3px solid var(--color-brand); }
.kpi .k-value.neg { color: var(--color-danger); }

/* 清單/檢核 */
.checklist { list-style: none; }
.checklist li {
  display: flex; gap: var(--space-xs); align-items: flex-start;
  padding: 7px 0; border-bottom: 1px dashed var(--color-border);
}
.checklist li:last-child { border-bottom: none; }
.checklist input[type="checkbox"] { margin-top: 4px; accent-color: var(--color-brand); }
.checklist label { flex: 1; cursor: pointer; }
.checklist .meta { font-size: 12px; color: var(--color-ink-muted); }
.checklist li.done label { color: var(--color-ink-faint); text-decoration: line-through; }

.owner-group h3 {
  font-size: 13px; margin: var(--space-md) 0 var(--space-2xs);
  display: flex; gap: var(--space-xs); align-items: baseline;
}
.owner-group:first-child h3 { margin-top: 0; }

/* 按鈕 */
.btn {
  border: 1px solid var(--color-border-strong); background: var(--color-surface);
  color: var(--color-ink-secondary); border-radius: var(--radius-md);
  padding: 3px 10px; font-size: 12px; white-space: nowrap;
}
.btn:hover { border-color: var(--color-brand); color: var(--color-brand); }
.btn[disabled] { opacity: 0.55; cursor: default; }
.btn-queued { background: var(--color-brand-subtle); border-color: var(--color-brand-border); color: var(--color-brand); }

/* toast */
#toast {
  position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%) translateY(20px);
  background: #1F2937; color: #F9FAFB; padding: 10px 18px; border-radius: var(--radius-md);
  font-size: 13px; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none;
  transition: opacity .25s ease, transform .25s ease; max-width: 90vw; z-index: 50;
}
#toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

.note { font-size: 12px; color: var(--color-ink-muted); }
.nodata { color: var(--color-ink-faint); font-size: 12px; }
.roi-figure { font-size: 30px; font-weight: 700; color: var(--color-brand); }

footer.console-footer {
  max-width: 1120px; margin: 0 auto; padding: 0 var(--space-lg) var(--space-2xl);
  font-size: 12px; color: var(--color-ink-faint);
}

@media (max-width: 640px) {
  main { padding: var(--space-sm); gap: var(--space-sm); }
  .card .body { padding: var(--space-sm) var(--space-md); }
  .console-header { padding: var(--space-sm) var(--space-md); }
  .kpi .k-value { font-size: 20px; }
}