/* Paper Watch Dashboard — compact, information-dense, theme-aware. */

:root {
  --bg: #fafafa;
  --bg-elev: #ffffff;
  --bg-soft: #f1f3f5;
  --border: #d8dde3;
  --border-soft: #e9ecef;
  --text: #1a2029;
  --text-soft: #5a6573;
  --text-mute: #8a94a3;
  --accent: #2563eb;
  --accent-soft: #dbeafe;
  --ok: #16a34a;
  --ok-soft: #dcfce7;
  --warn: #d97706;
  --warn-soft: #fef3c7;
  --bad: #dc2626;
  --bad-soft: #fee2e2;
  --a: #b91c1c;
  --b: #c2410c;
  --c: #6b7280;
  --shadow: 0 1px 2px rgba(0,0,0,.04), 0 1px 3px rgba(0,0,0,.06);
  --mono: ui-monospace, "Cascadia Code", "JetBrains Mono", Consolas, monospace;
  --sans: system-ui, -apple-system, "Segoe UI", "Microsoft YaHei", sans-serif;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0f1115;
    --bg-elev: #161a21;
    --bg-soft: #1c2128;
    --border: #2a323d;
    --border-soft: #232a33;
    --text: #e4e9f0;
    --text-soft: #a4adbc;
    --text-mute: #6b7585;
    --accent: #60a5fa;
    --accent-soft: #1e3a5f;
    --ok: #4ade80;
    --ok-soft: #143524;
    --warn: #fbbf24;
    --warn-soft: #3d2f0a;
    --bad: #f87171;
    --bad-soft: #3c1414;
    --a: #f87171;
    --b: #fb923c;
    --c: #9ca3af;
    --shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.3);
  }
}

[data-theme="dark"] {
  --bg: #0f1115; --bg-elev: #161a21; --bg-soft: #1c2128;
  --border: #2a323d; --border-soft: #232a33;
  --text: #e4e9f0; --text-soft: #a4adbc; --text-mute: #6b7585;
  --accent: #60a5fa; --accent-soft: #1e3a5f;
  --ok: #4ade80; --ok-soft: #143524;
  --warn: #fbbf24; --warn-soft: #3d2f0a;
  --bad: #f87171; --bad-soft: #3c1414;
  --a: #f87171; --b: #fb923c; --c: #9ca3af;
  --shadow: 0 1px 2px rgba(0,0,0,.2), 0 1px 3px rgba(0,0,0,.3);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 14px;
  line-height: 1.45;
}

/* Layout */
.app-header {
  display: flex; align-items: center; gap: 1rem;
  padding: .6rem 1.1rem;
  background: var(--bg-elev);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 10;
}
.app-title { font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; }
.app-title .pw { color: var(--accent); }
.app-nav { display: flex; gap: .25rem; }
.app-nav a {
  padding: .35rem .7rem; border-radius: 6px;
  color: var(--text-soft); text-decoration: none; font-size: .85rem;
  border: 1px solid transparent;
}
.app-nav a:hover { background: var(--bg-soft); color: var(--text); }
.app-nav a.active { background: var(--accent-soft); color: var(--accent); border-color: var(--accent); }
.app-spacer { flex: 1; }
.theme-toggle {
  background: var(--bg-soft); border: 1px solid var(--border); color: var(--text-soft);
  border-radius: 6px; padding: .3rem .55rem; cursor: pointer; font-size: 1rem;
}
.theme-toggle:hover { color: var(--text); }

main { padding: 1.1rem; max-width: 1400px; margin: 0 auto; }

/* View title row */
.view-head { display: flex; align-items: baseline; gap: .8rem; margin-bottom: 1rem; flex-wrap: wrap; }
.view-head h2 { margin: 0; font-size: 1.15rem; }
.view-head .sub { color: var(--text-mute); font-size: .82rem; }

/* Batch grid */
.batch-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: .8rem;
}
.batch-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: .8rem .9rem; cursor: pointer; transition: border-color .12s, box-shadow .12s;
  box-shadow: var(--shadow);
}
.batch-card:hover { border-color: var(--accent); box-shadow: 0 2px 8px rgba(0,0,0,.08); }
.batch-card .bc-head { display: flex; align-items: baseline; gap: .4rem; margin-bottom: .5rem; }
.batch-card .bc-conf { font-weight: 700; font-size: 1rem; }
.batch-card .bc-year { color: var(--text-mute); font-size: .85rem; }
.batch-card .bc-pct { margin-left: auto; font-weight: 700; color: var(--accent); font-size: .95rem; }
.batch-card .bc-bars { display: flex; gap: 3px; margin: .5rem 0 .6rem; }
.batch-card .bc-bar { flex: 1; height: 7px; border-radius: 3px; background: var(--border-soft); }
.batch-card .bc-bar.done { background: var(--ok); }
.batch-card .bc-bar.in_progress { background: var(--warn); }
.batch-card .bc-bar.blocked { background: var(--bad); }
.batch-card .bc-stats { display: flex; gap: .8rem; font-size: .78rem; color: var(--text-soft); }
.batch-card .bc-stats b { color: var(--text); }
.batch-card .bc-stats .err { color: var(--bad); }
.batch-card .bc-stats .bc-refine { color: var(--warn); font-weight: 600; }

/* Progress strip (dashboard) */
.prog-strip { display: flex; gap: .5rem; margin-bottom: 1.1rem; flex-wrap: wrap; }
.prog-phase {
  flex: 1; min-width: 110px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 7px;
  padding: .5rem .6rem;
}
.prog-phase .pp-num { font-size: .7rem; color: var(--text-mute); font-weight: 600; }
.prog-phase .pp-title { font-size: .78rem; font-weight: 600; margin-bottom: .25rem; }
.prog-phase .pp-status {
  display: inline-block; font-size: .68rem; padding: .1rem .4rem; border-radius: 4px;
  font-weight: 600;
}
.prog-phase .pp-status.done { background: var(--ok-soft); color: var(--ok); }
.prog-phase .pp-status.in_progress { background: var(--warn-soft); color: var(--warn); }
.prog-phase .pp-status.blocked { background: var(--bad-soft); color: var(--bad); }
.prog-phase .pp-status.not_started { background: var(--bg-soft); color: var(--text-mute); }
.prog-phase .pp-counts { font-size: .72rem; color: var(--text-soft); margin-top: .25rem; }

/* Stat cards */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(95px, 1fr)); gap: .5rem; margin-bottom: 1.1rem; }
.stat {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 7px;
  padding: .55rem .65rem; text-align: center;
}
.stat .sv { font-size: 1.3rem; font-weight: 700; line-height: 1.2; }
.stat .sl { font-size: .72rem; color: var(--text-mute); margin-top: .1rem; }
.stat.a .sv { color: var(--a); }
.stat.b .sv { color: var(--b); }
.stat.c .sv { color: var(--c); }
.stat.err .sv { color: var(--bad); }

/* Tables */
.table-wrap {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
.table-toolbar {
  display: flex; gap: .5rem; padding: .5rem .6rem; border-bottom: 1px solid var(--border-soft);
  flex-wrap: wrap; align-items: center;
}
.table-toolbar select, .table-toolbar input {
  padding: .3rem .45rem; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg); color: var(--text); font-size: .8rem;
}
.table-toolbar input[type="text"] { flex: 1; min-width: 140px; }
.btn {
  padding: .3rem .6rem; border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-soft); color: var(--text-soft); cursor: pointer; font-size: .78rem;
}
.btn:hover { color: var(--text); border-color: var(--accent); }
.btn.primary { background: var(--accent); color: #fff; border-color: var(--accent); }

table { width: 100%; border-collapse: collapse; font-size: .8rem; }
thead th {
  background: var(--bg-soft); color: var(--text-soft); font-weight: 600;
  text-align: left; padding: .45rem .6rem; border-bottom: 1px solid var(--border);
  position: sticky; top: 0; white-space: nowrap;
}
tbody td { padding: .4rem .6rem; border-bottom: 1px solid var(--border-soft); vertical-align: top; }
tbody tr { cursor: pointer; }
tbody tr:hover { background: var(--accent-soft); }
tbody tr.row-non-master { opacity: .55; }

.pri { font-weight: 700; padding: .05rem .35rem; border-radius: 3px; font-size: .75rem; }
.pri.A { background: var(--bad-soft); color: var(--a); }
.pri.B { background: var(--warn-soft); color: var(--b); }
.pri.C { background: var(--bg-soft); color: var(--c); }

.cell-id { font-family: var(--mono); font-size: .72rem; color: var(--accent); }
.cell-title { max-width: 380px; }
.cell-id, .cell-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-mono { font-family: var(--mono); font-size: .72rem; }

.table-foot { padding: .4rem .6rem; border-top: 1px solid var(--border-soft); color: var(--text-mute); font-size: .75rem; }

/* Detail view */
.detail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1.2rem; margin-bottom: 1rem; }
.detail-row { display: flex; gap: .5rem; padding: .28rem 0; border-bottom: 1px solid var(--border-soft); font-size: .8rem; }
.detail-row .dk { color: var(--text-mute); min-width: 120px; flex-shrink: 0; }
.detail-row .dv { color: var(--text); word-break: break-word; }
.detail-row .dv.code { font-family: var(--mono); font-size: .74rem; }
.back-link { color: var(--accent); text-decoration: none; font-size: .82rem; }
.back-link:hover { text-decoration: underline; }

.card-render {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: 1rem 1.2rem; margin-top: .5rem;
  font-size: .85rem; line-height: 1.6;
}
.card-render h1 { font-size: 1.1rem; margin: 0 0 .6rem; }
.card-render h2 { font-size: .95rem; margin: 1rem 0 .4rem; border-bottom: 1px solid var(--border-soft); padding-bottom: .2rem; }
.card-render h3 { font-size: .88rem; margin: .8rem 0 .3rem; }
.card-render table { font-size: .78rem; }
.card-render ul { padding-left: 1.2rem; }
.card-render code { background: var(--bg-soft); padding: .1rem .3rem; border-radius: 3px; font-size: .78rem; }

.pdf-preview { margin: .5rem 0 1rem; }
.pdf-preview iframe { display: block; max-width: 100%; }

/* Compare view */
.compare-charts { display: flex; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; }
.chart-card {
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: .8rem; flex: 1; min-width: 320px;
}
.chart-card h3 { margin: 0 0 .6rem; font-size: .85rem; }
/* Fixed-height positioned container is required for Chart.js responsive
   mode with maintainAspectRatio:false; without it the canvas grows without
   bound, stretching the y-axis and scrolling the page. */
.chart-box { position: relative; height: 220px; width: 100%; }
.chart-box canvas { position: absolute; inset: 0; }
.compare-table { margin-top: .5rem; }

.empty { color: var(--text-mute); padding: 2rem; text-align: center; }
.loading { color: var(--text-mute); padding: 1rem; }
.error { color: var(--bad); padding: 1rem; }

a { color: var(--accent); }

/* ===== Trend analysis view ===== */
.trend-overview {
  display: flex; gap: .8rem; flex-wrap: wrap;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: .8rem 1rem; margin-bottom: 1rem;
}
.trend-overview .stat { min-width: 96px; }
.trend-grid { display: flex; flex-direction: column; gap: 1rem; }
.trend-card { min-width: 0; }
.tc-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; margin-bottom: .6rem; }
.tc-head h3 { margin: 0; font-size: .85rem; }
.tc-head .sub { font-size: .72rem; color: var(--text-mute); }
.tc-select {
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: .2rem .4rem; font-size: .78rem; margin-left: auto;
}
.chart-box.tall { height: 340px; }
.chart-box.sankey { height: 560px; }
.chart-box.heatmap { height: 520px; }
.data-table { width: 100%; border-collapse: collapse; font-size: .78rem; }
.data-table th, .data-table td {
  border-bottom: 1px solid var(--border-soft); padding: .32rem .5rem; text-align: left;
  white-space: nowrap;
}
.data-table th { color: var(--text-mute); font-weight: 600; font-size: .72rem; }
.data-table tbody tr:hover { background: var(--bg-soft); }
.data-table td.ok { color: var(--ok); font-weight: 600; }
.readiness-table { display: block; overflow-x: auto; }

/* ===== Author graph view ===== */
.graph-toolbar {
  display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  padding: .6rem .8rem; margin-bottom: .8rem; font-size: .8rem;
}
.graph-toolbar label { display: flex; align-items: center; gap: .35rem; color: var(--text-soft); }
.graph-toolbar select {
  background: var(--bg-soft); color: var(--text); border: 1px solid var(--border);
  border-radius: 6px; padding: .25rem .4rem; font-size: .78rem; max-width: 280px;
}
.legend-chips { display: flex; gap: .35rem; flex-wrap: wrap; }
.legend-chip {
  --chip: var(--text-mute);
  display: inline-flex; align-items: center; gap: .3rem;
  background: var(--bg-soft); color: var(--text-soft);
  border: 1px solid var(--border); border-radius: 999px;
  padding: .15rem .55rem; font-size: .72rem; cursor: pointer;
}
.legend-chip::before {
  content: ''; width: .55rem; height: .55rem; border-radius: 50%;
  background: var(--chip);
}
.legend-chip.off { opacity: .35; text-decoration: line-through; }
.graph-wrap {
  position: relative; height: calc(100vh - 220px); min-height: 420px;
  background: var(--bg-elev); border: 1px solid var(--border); border-radius: 8px;
  overflow: hidden;
}
.graph-wrap canvas { position: absolute; inset: 0; width: 100%; height: 100%; cursor: grab; }
.graph-wrap canvas:active { cursor: grabbing; }
.graph-hint {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); font-size: .85rem; pointer-events: none;
}
.graph-hint[hidden] { display: none; }
.graph-tip {
  position: absolute; z-index: 5; max-width: 320px; pointer-events: none;
  background: var(--bg-elev); color: var(--text);
  border: 1px solid var(--border); border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .18);
  padding: .5rem .7rem; font-size: .75rem; line-height: 1.5;
}
.graph-tip h3 { margin: 0 0 .25rem; font-size: .8rem; }
.graph-tip p { margin: 0; }