/* =====================================================================
   KPI dashboard (workspace, Raycast style). Loaded after styles.css.
   Status tokens: good #0ca30c · warning #fab219 · critical (text-safe on dark) #f07a6a
   ===================================================================== */
.nav-item { margin-top: 10px; }
.nav-item svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.sidebar select { background: rgba(255,255,255,.04); border: 1px solid var(--graphite); color: var(--chalk); border-radius: 8px; padding: 8px; font: 13px var(--ui); }
.sidebar select option { background: var(--ink); }

.kpis { flex: 1; overflow-y: auto; padding: 40px 4vw 48px; background:
  radial-gradient(50% 35% at 85% -8%, rgba(252,80,0,.18), transparent 70%), var(--void); }
.kpi-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.kpi-head h1 { font: 400 clamp(28px, 3vw, 40px)/1.1 var(--ui); color: var(--chalk); margin: 0; }
.kpi-head .sub { color: var(--ash); margin: 6px 0 0; }
.kpi-empty { background: var(--ink); box-shadow: var(--key-shadow); border-radius: 16px; padding: 32px; max-width: 640px; }
.kpi-empty h2 { font: 500 20px var(--ui); color: var(--chalk); margin: 0 0 8px; }
.kpi-empty p { color: var(--ash); margin: 0 0 20px; }

.industry-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; max-width: 900px; }
.industry-btn { background: var(--ink); box-shadow: var(--key-shadow); border: 0; border-radius: 14px; padding: 20px; text-align: left; color: var(--chalk); font: 500 15px var(--ui); cursor: pointer; }
.industry-btn:hover { background: #0c0d10; box-shadow: rgba(252,80,0,.5) 0 0 0 1px; }

.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 12px; }
.kpi-tile { background: var(--ink); box-shadow: var(--key-shadow); border-radius: 16px; padding: 20px; display: flex; flex-direction: column; gap: 10px; position: relative; min-width: 0; }
.kpi-tile.muted { opacity: .75; }
.kpi-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.kpi-top h3 { font: 500 14px var(--ui); color: var(--mist); margin: 0; }
#app .kpi-target { font-size: 12px; color: var(--ash); white-space: nowrap; }
#app .kpi-target:hover { color: var(--chalk); }
.kpi-value { font: 600 34px/1.1 var(--ui); color: var(--chalk); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.kpi-value small { font: 400 12px var(--ui); color: var(--smoke); }
.kpi-meta { display: flex; gap: 8px 12px; flex-wrap: wrap; align-items: center; font-size: 12px; }
.status { display: inline-flex; align-items: center; gap: 6px; padding: 3px 9px; border-radius: 9999px; background: var(--recess); color: var(--mist); font-weight: 500; }
.status i { font-style: normal; font-size: 11px; }
.status.good i { color: #0ca30c; }
.status.neutral i { color: var(--ash); }
.status.warn i { color: #fab219; }
.status.good { box-shadow: inset 0 0 0 1px rgba(12,163,12,.45); }
.status.warn { box-shadow: inset 0 0 0 1px rgba(250,178,25,.45); }
.delta { color: var(--ash); }
.delta i { font-style: normal; font-size: 9px; margin-right: 4px; }
.delta.good { color: #0ca30c; }
.delta.bad { color: #f07a6a; }
.delta small { color: var(--smoke); font-size: 12px; }
.kpi-need { color: var(--ash); font-size: 13px; margin: 0; }
.kpi-bench { font-size: 12px; color: var(--smoke); margin: 0; line-height: 1.5; }
.kpi-bench a { color: var(--ash); }
.kpi-note { display: block; margin-top: 4px; }

.kpi-chart { position: relative; height: 120px; }
.kpi-chart svg { display: block; overflow: visible; outline: none; }
.kpi-chart svg:focus-visible { box-shadow: 0 0 0 2px rgba(252,80,0,.6); border-radius: 6px; }
.kpi-chart .band { fill: rgba(255,255,255,.06); }
.kpi-chart .ref { stroke: #383835; stroke-width: 1; }
.kpi-chart .target { stroke: var(--ash); stroke-width: 1; stroke-dasharray: 3 3; }
.kpi-chart .axis { stroke: #2c2c2a; stroke-width: 1; }
.kpi-chart .tick, .kpi-chart .ref-label { fill: #898781; font: 10px var(--mono); font-variant-numeric: tabular-nums; }
.kpi-chart .ref-label { paint-order: stroke; stroke: var(--ink); stroke-width: 3px; stroke-linejoin: round; }
.kpi-chart .line { fill: none; stroke: var(--ember); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.kpi-chart .dot { fill: var(--ember); stroke: var(--ink); stroke-width: 2; }
.kpi-chart .cross-line { stroke: var(--smoke); stroke-width: 1; }
.kpi-chart .end-label { fill: #f0efec; font: 600 11px var(--ui); }
.chart-tip { position: absolute; top: -6px; background: var(--graphite); box-shadow: var(--key-shadow); border-radius: 8px; padding: 6px 10px; pointer-events: none; white-space: nowrap; display: grid; z-index: 2; }
.chart-tip[hidden] { display: none; }
.chart-tip b { color: var(--chalk); font: 600 14px var(--ui); }
.chart-tip span { color: var(--ash); font-size: 11px; }

.kpi-table-wrap { margin-top: 32px; }
.kpi-table-wrap h2 { font: 500 16px var(--ui); color: var(--chalk); margin: 0 0 12px; }
.table-scroll { overflow-x: auto; background: var(--ink); box-shadow: var(--key-shadow); border-radius: 14px; }
.kpi-table { border-collapse: collapse; width: 100%; font-size: 13px; }
.kpi-table th { text-align: right; font: 500 11px/1.3 var(--ui); color: var(--smoke); padding: 12px 14px; border-bottom: 1px solid var(--graphite); vertical-align: bottom; min-width: 72px; }
.kpi-table th:first-child, .kpi-table td:first-child { text-align: left; }
.kpi-table td { padding: 10px 14px; text-align: right; color: var(--mist); border-bottom: 1px solid var(--graphite); font-variant-numeric: tabular-nums; white-space: nowrap; }
.kpi-table tr:last-child td { border-bottom: 0; }
.kpi-table td b { color: var(--chalk); font-weight: 500; }
.kpi-table td small { display: block; color: var(--smoke); font-size: 11px; }
.row-actions { display: flex; gap: 12px; justify-content: flex-end; }
#app .row-actions .link { color: var(--ash); font-size: 12px; }
#app .row-actions .link:hover { color: var(--chalk); }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* dark modal for KPI entry */
.modal.dark .modal-card { background: var(--ink); color: var(--mist); border-radius: 18px; box-shadow: var(--key-shadow), rgba(0,0,0,.6) 0 20px 60px; max-width: 560px; max-height: calc(100vh - 32px); overflow-y: auto; font: 400 14px var(--ui); }
.modal.dark .modal-card h2 { font: 500 22px var(--ui); text-transform: none; letter-spacing: 0; color: var(--chalk); margin: 0 0 4px; }
.modal.dark .sub { color: var(--ash); margin: 0 0 20px; }
.modal.dark .modal-x { color: var(--ash); }
.kpi-period { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 18px; }
.seg { display: inline-flex; background: var(--recess); border-radius: 9px; padding: 3px; box-shadow: var(--key-shadow); }
.seg label { cursor: pointer; }
.seg input { position: absolute; opacity: 0; pointer-events: none; }
.seg span { display: block; padding: 7px 14px; border-radius: 7px; font: 500 13px var(--ui); color: var(--ash); }
.seg input:checked + span { background: var(--mist); color: var(--obsidian); }
.seg input:focus-visible + span { outline: 2px solid var(--ember); }
.kpi-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 16px; }
.field { display: grid; gap: 5px; font: 500 12px var(--ui); color: var(--mist); align-content: start; }
.field em { font-style: normal; color: var(--smoke); font-weight: 400; }
.field small { color: var(--smoke); font-weight: 400; font-size: 11px; line-height: 1.4; }
.input-wrap { display: flex; align-items: center; background: rgba(255,255,255,.05); border-radius: 8px; box-shadow: inset 0 0 0 1px var(--graphite); }
.input-wrap:focus-within { box-shadow: inset 0 0 0 1px var(--ember); }
.input-wrap input { flex: 1; min-width: 0; background: transparent; border: 0; color: var(--chalk); padding: 9px 10px; font: 14px var(--ui); outline: none; }
.field > input { background: rgba(255,255,255,.05); border: 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--graphite); color: var(--chalk); padding: 8px 10px; font: 14px var(--ui); color-scheme: dark; }
.affix { color: var(--smoke); font-size: 12px; padding: 0 10px; }
.input-wrap .affix:first-child { padding-right: 0; }
.modal.dark .form-error { background: var(--ember-hush); color: #ffc9ad; margin-top: 14px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 20px; }
.modal.dark .btn { background: var(--mist); color: var(--iron); border: 0; border-radius: 8px; padding: 9px 16px; font: 500 14px var(--ui); }
.modal.dark .btn:hover { background: var(--chalk); color: var(--obsidian); }
.modal.dark .btn-ghost { background: transparent; color: var(--mist); box-shadow: inset 0 0 0 1px var(--hairline); }
.modal.dark .btn-ghost:hover { background: var(--graphite); color: var(--chalk); }
.modal.dark #kpi-save { background: var(--ember); color: var(--obsidian); }
.modal.dark #kpi-save:hover { background: #ff6a24; }

@media (max-width: 760px) {
  .sidebar select { display: none; }
  .nav-item { margin: 0; }
  .kpis { padding: 28px 16px; }
  .kpi-grid { grid-template-columns: 1fr; }
  .kpi-inputs { grid-template-columns: 1fr; }
}

/* delete-account */
#app .danger-link { color: #f07a6a; }
#app .danger-link:hover { color: #ff9b8e; }
.delete-list { color: var(--ash); font-size: 13px; padding-left: 18px; margin: 0 0 18px; line-height: 1.55; }
.delete-list strong { color: var(--chalk); }
.modal.dark .btn-danger { background: #d03b3b; color: #fff; }
.modal.dark .btn-danger:hover { background: #e04848; color: #fff; }