/* ===== PCM/PCA 2026 · Design System ===== */
:root {
  --brand: #052b6c;
  --brand-2: #f15a24;
  --brand-ink: #0a1f44;

  --bg: #eef1f7;
  --bg-grad-1: rgba(5, 43, 108, .06);
  --bg-grad-2: rgba(241, 90, 36, .06);
  --surface: #ffffff;
  --surface-2: #f4f7fc;
  --surface-3: #eaeff8;
  --text: #0c1b33;
  --muted: #5a6a86;
  --line: #e1e8f3;
  --line-strong: #cdd8ea;

  --ok: #0f9d63;     --ok-bg: #e3f7ee;
  --late: #d98a00;   --late-bg: #fdf1d8;
  --pending: #6b7a99;--pending-bg: #eef1f7;
  --missing: #d23b46;--missing-bg: #fde8ea;
  --na: #aab4c6;     --na-bg: #f1f4f9;

  --shadow-sm: 0 1px 2px rgba(10, 31, 68, .06), 0 1px 3px rgba(10, 31, 68, .05);
  --shadow: 0 10px 30px rgba(10, 31, 68, .08);
  --shadow-lg: 0 24px 60px rgba(10, 31, 68, .14);
  --radius: 14px;
  --radius-sm: 10px;
  --radius-pill: 999px;
  --rail-w: 268px;

  --font: "Inter", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif;
}

[data-theme="dark"] {
  --bg: #0a1120;
  --bg-grad-1: rgba(56, 110, 214, .10);
  --bg-grad-2: rgba(241, 90, 36, .08);
  --surface: #121b2e;
  --surface-2: #161f34;
  --surface-3: #1d2842;
  --text: #eaf0fb;
  --muted: #94a3bd;
  --line: #233048;
  --line-strong: #2f3e5b;
  --brand: #4f80e3;
  --brand-ink: #cfe0ff;
  --ok: #34d399;     --ok-bg: rgba(16,157,99,.16);
  --late: #fbbf24;   --late-bg: rgba(217,138,0,.18);
  --pending: #93a4c4;--pending-bg: rgba(107,122,153,.16);
  --missing: #f87171;--missing-bg: rgba(210,59,70,.18);
  --na: #5d6b85;     --na-bg: rgba(120,135,165,.12);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.4);
  --shadow: 0 12px 32px rgba(0,0,0,.45);
  --shadow-lg: 0 28px 70px rgba(0,0,0,.55);
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  color: var(--text);
  background:
    radial-gradient(1200px 600px at 100% -10%, var(--bg-grad-2), transparent 60%),
    radial-gradient(1000px 500px at -10% 0%, var(--bg-grad-1), transparent 55%),
    var(--bg);
  line-height: 1.4;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
button, input, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: var(--brand); }
::selection { background: rgba(241,90,36,.25); }

/* ===== App bar ===== */
.appbar {
  position: sticky; top: 0; z-index: 50;
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px;
  background: color-mix(in srgb, var(--surface) 86%, transparent);
  backdrop-filter: saturate(140%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.brand { display: flex; align-items: center; gap: 12px; min-width: 0; }
.brand-logo {
  width: 42px; height: 42px; flex: 0 0 auto;
  border-radius: 11px; overflow: hidden; background: #fff;
  border: 1px solid var(--line-strong); box-shadow: var(--shadow-sm);
  display: grid; place-items: center;
}
.brand-logo img { width: 100%; height: 100%; object-fit: contain; padding: 5px; }
.brand-text h1 { margin: 0; font-size: 15px; font-weight: 800; letter-spacing: -.01em; }
.brand-text p { margin: 1px 0 0; font-size: 12px; color: var(--muted); }
.brand-stripe { display: flex; gap: 4px; margin-top: 5px; }
.brand-stripe i { height: 3px; border-radius: 999px; display: block; }
.brand-stripe i:first-child { width: 22px; background: var(--brand); }
.brand-stripe i:last-child { width: 34px; background: var(--brand-2); }

.appbar-spacer { flex: 1; }
.search {
  position: relative; flex: 0 1 320px; min-width: 0;
}
.search input {
  width: 100%; border: 1px solid var(--line-strong); background: var(--surface-2);
  border-radius: var(--radius-pill); padding: 10px 14px 10px 38px; outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.search input:focus { border-color: var(--brand); box-shadow: 0 0 0 4px color-mix(in srgb, var(--brand) 18%, transparent); }
.search svg { position: absolute; left: 13px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--muted); }

.icon-btn {
  width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  border-radius: 11px; color: var(--text); transition: border-color .15s, background .15s, transform .1s;
}
.icon-btn:hover { border-color: var(--brand); }
.icon-btn:active { transform: scale(.95); }
.icon-btn svg { width: 18px; height: 18px; }

.sync-pill {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--line-strong); background: var(--surface-2);
  border-radius: var(--radius-pill); padding: 7px 12px 7px 11px; font-size: 12.5px; color: var(--muted);
  white-space: nowrap;
}
.sync-pill .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ok); box-shadow: 0 0 0 4px var(--ok-bg); }
.sync-pill.stale .dot { background: var(--late); box-shadow: 0 0 0 4px var(--late-bg); }
.sync-pill.error .dot { background: var(--missing); box-shadow: 0 0 0 4px var(--missing-bg); }
.sync-pill b { color: var(--text); font-weight: 700; }
.sync-pill.loading .dot { animation: pulse 1s infinite; }
@keyframes pulse { 50% { opacity: .3; } }
@keyframes spin { to { transform: rotate(360deg); } }
.spinning { animation: spin .8s linear infinite; }

/* ===== Layout ===== */
.layout { display: grid; grid-template-columns: var(--rail-w) minmax(0, 1fr); align-items: start; }
.layout.rail-collapsed { grid-template-columns: 0 minmax(0, 1fr); }

.rail {
  position: sticky; top: 65px; height: calc(100vh - 65px);
  overflow: auto; padding: 22px 18px;
  border-right: 1px solid var(--line);
  display: grid; gap: 18px; align-content: start;
  transition: transform .2s, opacity .2s, padding .2s;
}
.layout.rail-collapsed .rail { transform: translateX(-100%); opacity: 0; padding: 0; pointer-events: none; }
.rail-group { display: grid; gap: 8px; }
.rail-group > label { font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); font-weight: 700; }
.rail select {
  width: 100%; border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: var(--radius-sm); padding: 10px 11px; outline: none; transition: border-color .15s;
}
.rail select:focus { border-color: var(--brand); }
.segmented { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; }
.segmented.three { grid-template-columns: repeat(3, 1fr); }
.segmented button {
  border: 1px solid var(--line-strong); background: var(--surface);
  border-radius: var(--radius-sm); padding: 9px 6px; font-size: 12.5px; font-weight: 600; color: var(--muted);
  transition: all .12s;
}
.segmented button.active { background: var(--brand); border-color: var(--brand); color: #fff; box-shadow: var(--shadow-sm); }
.btn-reset {
  border: 1px dashed var(--line-strong); background: transparent; color: var(--muted);
  border-radius: var(--radius-sm); padding: 10px; font-weight: 600;
}
.btn-reset:hover { color: var(--missing); border-color: var(--missing); }
.rail-note { font-size: 11.5px; color: var(--muted); line-height: 1.5; border-top: 1px solid var(--line); padding-top: 14px; }
.rail-note a { font-weight: 600; }

.main { padding: 22px clamp(16px, 3vw, 30px) 60px; min-width: 0; }

/* ===== Page head ===== */
.page-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 20px; flex-wrap: wrap; margin-bottom: 18px; }
.page-head .eyebrow { margin: 0 0 4px; font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--brand-2); }
.page-head h2 { margin: 0; font-size: clamp(22px, 2.6vw, 32px); letter-spacing: -.02em; }
.page-head .sub { margin: 6px 0 0; color: var(--muted); font-size: 13.5px; }
.views { display: inline-flex; background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-pill); padding: 4px; gap: 4px; }
.views button { border: 0; background: transparent; border-radius: var(--radius-pill); padding: 8px 16px; font-weight: 700; font-size: 13px; color: var(--muted); }
.views button.active { background: var(--surface); color: var(--brand); box-shadow: var(--shadow-sm); }

/* ===== Cards / KPIs ===== */
.kpis { display: grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 14px; margin-bottom: 18px; }
.kpi {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 16px 17px; box-shadow: var(--shadow-sm); position: relative; overflow: hidden;
}
.kpi::before { content:""; position:absolute; inset:0 auto 0 0; width:4px; background: var(--accent, var(--brand)); }
.kpi.k-ok { --accent: var(--ok); } .kpi.k-pending { --accent: var(--pending); }
.kpi.k-late { --accent: var(--late); } .kpi.k-missing { --accent: var(--missing); }
.kpi .k-top { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.kpi .k-title { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.kpi .k-ico { width:30px;height:30px;border-radius:9px;display:grid;place-items:center;background:var(--na-bg);color:var(--accent,var(--brand)); }
.kpi .k-ico svg { width:16px;height:16px; }
.kpi .k-val { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 8px 0 2px; font-variant-numeric: tabular-nums; }
.kpi .k-val small { font-size: 13px; font-weight: 600; color: var(--muted); }
.kpi .k-foot { font-size: 12px; color: var(--muted); }
.progress { height: 7px; background: var(--surface-3); border-radius: 999px; overflow: hidden; margin-top: 11px; }
.progress > i { display:block; height:100%; width:0; border-radius:inherit; background: linear-gradient(90deg, var(--brand), var(--brand-2)); transition: width .5s cubic-bezier(.2,.8,.2,1); }

/* ===== Panels ===== */
.grid-2 { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 16px; }
.stack { display: grid; gap: 16px; }
.panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); overflow: hidden; }
.panel-head { padding: 16px 18px; display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--line); }
.panel-head h3 { margin: 0; font-size: 15px; font-weight: 700; }
.panel-head p { margin: 3px 0 0; font-size: 12.5px; color: var(--muted); }
.panel-body { padding: 16px 18px; }

/* bar chart */
.bars { display: grid; gap: 11px; }
.bar { display: grid; grid-template-columns: 116px minmax(56px,1fr) 76px; gap: 10px; align-items: center; font-size: 13px; }
.bar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); }
.bar .track { height: 10px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.bar .track > i { display:block; height:100%; border-radius:inherit; background: var(--brand); transition: width .5s; }
.bar .track > i.ok{background:var(--ok)} .bar .track > i.late{background:var(--late)} .bar .track > i.low{background:var(--missing)}
.bar .val { text-align: right; color: var(--muted); font-variant-numeric: tabular-nums; }

/* stacked month bar */
.mbar { display:grid; grid-template-columns: 46px minmax(0,1fr) 96px; gap:10px; align-items:center; font-size:12.5px; }
.mbar .seg { display:flex; height:14px; border-radius:6px; overflow:hidden; background: var(--surface-3); }
.mbar .seg > span { display:block; height:100%; }
.mbar .seg .s-ok{background:var(--ok)} .mbar .seg .s-late{background:var(--late)} .mbar .seg .s-pending{background:var(--pending)} .mbar .seg .s-missing{background:var(--missing)}
.mbar .mval { display:flex; flex-direction:column; align-items:flex-end; line-height:1.25; font-variant-numeric:tabular-nums; }
.mbar .mval strong{font-weight:800;color:var(--text);font-size:13px}
.mbar .mval strong small{font-weight:600;color:var(--muted)}
.mbar .mval em{font-style:normal;font-size:10.5px;color:var(--pending)}

/* attention list */
.attn { display:grid; gap:2px; }
.attn-row { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); }
.attn-row:last-child{border-bottom:0}
.attn-info{min-width:0}
.attn-row strong{font-size:13px;font-weight:700;display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:320px}
.attn-row span{font-size:12px;color:var(--muted)}
.attn-tail{display:flex;align-items:center;gap:10px;white-space:nowrap}
.attn-urg{font-size:11px;font-weight:700;color:var(--late);background:var(--late-bg);border-radius:999px;padding:3px 9px}
.attn-urg.today{color:var(--missing);background:var(--missing-bg)}
.attn-score{font-weight:800;font-size:15px;color:var(--brand);font-variant-numeric:tabular-nums;white-space:nowrap}

/* ===== Table ===== */
.table-toolbar { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; padding:14px 18px; border-bottom:1px solid var(--line); }
.table-toolbar .quick { display:flex; gap:6px; flex-wrap:wrap; }
.chip-btn { border:1px solid var(--line-strong); background:var(--surface); color:var(--muted); border-radius:999px; padding:7px 13px; font-size:12.5px; font-weight:600; transition:all .12s; }
.chip-btn:hover{border-color:var(--brand);color:var(--brand)}
.chip-btn.active{background:var(--brand);border-color:var(--brand);color:#fff}
.chip-btn.ghost { border-style:dashed; }
.table-scroll { overflow:auto; max-height: 72vh; }
table { width:100%; border-collapse:separate; border-spacing:0; font-size:13px; min-width: 1180px; }
thead th { position:sticky; top:0; z-index:3; background:var(--surface-2); color:var(--muted); font-weight:700; text-align:left; padding:11px 10px; border-bottom:1px solid var(--line-strong); white-space:nowrap; }
th.num, td.num { text-align:center; }
th.col-h { cursor:pointer; user-select:none; transition:color .12s, background .12s; }
th.col-h:hover { color:var(--brand); background:var(--surface-3); }
th.col-h.active { color:#fff; background:var(--brand); }
th.pin, td.pin { position:sticky; background:var(--surface); z-index:2; }
thead th.pin { z-index:4; background:var(--surface-2); }
.pin-id { left:0; width:42px; min-width:42px; text-align:center; color:var(--muted); }
.pin-ent { left:42px; min-width:240px; }
.pin-ent.shadow, .pin-id { }
.pin-ent::after { content:""; position:absolute; top:0; right:0; bottom:0; width:10px; box-shadow: 8px 0 12px -8px rgba(10,31,68,.25); }
td { padding:9px 10px; border-bottom:1px solid var(--line); vertical-align:middle; }
tbody tr:hover td { background: var(--surface-2); }
tbody tr:hover td.pin { background: var(--surface-2); }
.ent-name { font-weight:700; }
.ent-meta { display:block; font-size:11px; color:var(--muted); font-weight:500; margin-top:2px; }
.tag { display:inline-block; font-size:11px; font-weight:600; color:var(--muted); background:var(--surface-3); border-radius:6px; padding:3px 7px; }

.cell { display:inline-grid; place-items:center; width:30px; height:26px; border-radius:7px; font-size:11px; font-weight:800; }
.cell.ok{background:var(--ok-bg);color:var(--ok)} .cell.late{background:var(--late-bg);color:var(--late)}
.cell.pending{background:var(--pending-bg);color:var(--pending)} .cell.missing{background:var(--missing-bg);color:var(--missing)}
.cell.na{background:var(--na-bg);color:var(--na)}

.rowprog { display:flex; align-items:center; gap:8px; min-width:120px; }
.rowprog .t{flex:1;height:7px;border-radius:999px;background:var(--surface-3);overflow:hidden;min-width:60px}
.rowprog .t>i{display:block;height:100%;border-radius:inherit;background:linear-gradient(90deg,var(--brand),var(--brand-2))}
.rowprog span{color:var(--muted);font-variant-numeric:tabular-nums;width:34px;text-align:right}

.legend { display:flex; flex-wrap:wrap; gap:14px; padding:12px 18px; border-top:1px solid var(--line); background:var(--surface-2); font-size:12px; color:var(--muted); }
.legend i{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.legend .l-ok{background:var(--ok)} .legend .l-late{background:var(--late)} .legend .l-pending{background:var(--pending)} .legend .l-missing{background:var(--missing)} .legend .l-na{background:var(--na)}

.empty { color:var(--muted); font-size:13px; padding:8px 0; }

.summary-top { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-bottom:16px; }
.summary-top > div { background:var(--surface-2); border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px; }
.summary-top .st-label { display:block; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--muted); font-weight:700; }
.summary-top strong { display:block; font-size:26px; font-weight:800; margin:4px 0 2px; font-variant-numeric:tabular-nums; }
.summary-top strong small { font-size:15px; color:var(--muted); font-weight:600; }
.summary-top .st-sub { font-size:11.5px; color:var(--muted); }

/* ===== Notes ===== */
.notes { margin-top:16px; }
.note-form { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:10px; margin-bottom:12px; }
.note-form input { border:1px solid var(--line-strong); background:var(--surface-2); border-radius:var(--radius-sm); padding:11px 12px; outline:none; }
.note-form input:focus{border-color:var(--brand)}
.note-form button, .btn-primary { background:var(--brand); color:#fff; border:0; border-radius:var(--radius-sm); padding:0 18px; font-weight:700; }
.notes-list{list-style:none;margin:0;padding:0;display:grid;gap:9px}
.note-item{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:10px;align-items:center;padding:11px 13px;background:var(--surface-2);border:1px solid var(--line);border-radius:var(--radius-sm)}
.note-item p{margin:0;overflow-wrap:anywhere;font-size:13px}
.note-item input{width:100%;border:1px solid var(--brand);background:var(--surface);border-radius:8px;padding:8px 10px}
.note-actions{display:flex;gap:6px}
.mini-btn{border:1px solid var(--line-strong);background:var(--surface);border-radius:8px;padding:7px 11px;font-size:12.5px;font-weight:600;color:var(--muted)}
.mini-btn:hover{border-color:var(--brand);color:var(--brand)}
.mini-btn.danger:hover{border-color:var(--missing);color:var(--missing)}
.notes-empty{color:var(--muted);font-size:13px;border:1px dashed var(--line-strong);border-radius:var(--radius-sm);padding:12px}

/* deadline banner */
.deadline-card { display:flex; align-items:center; gap:14px; background:var(--surface); border:1px solid var(--line); border-left:4px solid var(--brand-2); border-radius:var(--radius); padding:14px 16px; box-shadow:var(--shadow-sm); }
.deadline-card .dl-ico{width:40px;height:40px;border-radius:11px;background:var(--late-bg);color:var(--late);display:grid;place-items:center;flex:0 0 auto}
.deadline-card .dl-ico svg{width:20px;height:20px}
.deadline-card .dl-label{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}
.deadline-card strong{display:block;font-size:16px}
.deadline-card .dl-days{font-size:12.5px;color:var(--muted)}

.view{display:none}
.view.active{display:block;animation:fade .25s ease}
@keyframes fade{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}

.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--text);color:var(--surface);padding:11px 18px;border-radius:var(--radius-pill);font-size:13px;font-weight:600;box-shadow:var(--shadow-lg);opacity:0;pointer-events:none;transition:all .25s;z-index:100}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

/* ===== Responsive ===== */
@media (max-width: 1100px){ .kpis{grid-template-columns:repeat(2,1fr)} .grid-2{grid-template-columns:1fr} }
@media (max-width: 900px){
  .layout, .layout.rail-collapsed{grid-template-columns:1fr}
  .rail{position:static;height:auto;border-right:0;border-bottom:1px solid var(--line)}
  .layout.rail-collapsed .rail{display:none}
  .search{flex-basis:180px}
}
@media (max-width: 620px){
  .appbar{flex-wrap:wrap;gap:10px}
  .search{order:5;flex-basis:100%}
  .kpis{grid-template-columns:1fr}
  .note-form{grid-template-columns:1fr}
  .brand-text p{display:none}
}
@media (prefers-reduced-motion: reduce){ *{animation:none!important;transition:none!important} }