/* juribooks-executive-dashboard-v2.1.css — scoped presentation for the executive
   dashboard. Every rule sits under .exec-dashboard; uses the active JuriBooks
   theme variables; no global selectors, no !important globals. */

.exec-dashboard { display: block; }

/* header */
.exec-dashboard .exec-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; flex-wrap: wrap; margin-bottom: 16px; }
.exec-dashboard .exec-entity { font-size: var(--f-sm, .82rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--navy, #233F6B); margin-bottom: 3px; }
.exec-dashboard .exec-title { font-size: var(--f-2xl, 1.5rem); font-weight: 700; color: var(--ink, #172235); margin: 0; }
.exec-dashboard .exec-sub { font-size: var(--f-sm, .82rem); color: var(--mute, #68758a); margin-top: 4px; }
.exec-dashboard .exec-actions { display: flex; gap: 8px; flex-shrink: 0; }

/* KPI grid — dedicated, responsive (NOT the global .kpi-grid) */
.exec-dashboard .exec-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
.exec-dashboard .exec-kpi { background: var(--surface, #fff); border: 1px solid var(--line, #e4e9f1); border-radius: 10px; padding: 14px 15px; min-width: 0; }
.exec-dashboard .exec-kpi-l { font-size: var(--f-xs, .72rem); font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mute, #68758a); }
.exec-dashboard .exec-kpi-v { font-size: var(--f-xl, 1.3rem); font-weight: 700; color: var(--ink, #172235); margin-top: 6px; overflow-wrap: anywhere; line-height: 1.15; }
.exec-dashboard .exec-kpi-s { font-size: var(--f-xs, .72rem); color: var(--mute, #68758a); margin-top: 4px; }
.exec-dashboard .exec-kpi-b { font-size: var(--f-2xs, .66rem); color: var(--mute-2, #96a1b4); margin-top: 3px; font-style: italic; }
.exec-dashboard .exec-kpi--ok .exec-kpi-s { color: var(--balanced, #16815b); }
.exec-dashboard .exec-kpi--warn .exec-kpi-s { color: var(--flag, #9a6a00); }
.exec-dashboard .exec-kpi--critical .exec-kpi-s { color: var(--credit, #c0392b); }
.exec-dashboard .exec-kpi--muted { opacity: .82; }

/* control strip — dedicated, responsive (NOT inline repeat(7,1fr)) */
.exec-dashboard .exec-control-strip { display: grid; grid-template-columns: repeat(7, minmax(130px, 1fr)); gap: 8px; margin-bottom: 16px; }
.exec-dashboard .exec-control { text-align: left; width: 100%; background: var(--surface, #fff); border: 1px solid var(--line, #e4e9f1); border-left-width: 3px; border-radius: 8px; padding: 10px 12px; cursor: pointer; font: inherit; color: inherit; display: block; }
.exec-dashboard button.exec-control:hover { background: var(--surface-2, #f4f6fa); }
.exec-dashboard .exec-control-l { display: block; font-size: var(--f-xs, .72rem); font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--mute, #68758a); }
.exec-dashboard .exec-control-m { display: block; font-size: var(--f-lg, 1.05rem); font-weight: 800; margin: 2px 0; }
.exec-dashboard .exec-control-d { display: block; font-size: var(--f-xs, .72rem); color: var(--mute, #68758a); overflow-wrap: anywhere; }
.exec-dashboard .exec-control--ok { border-left-color: var(--balanced, #16815b); }
.exec-dashboard .exec-control--ok .exec-control-m { color: var(--balanced, #16815b); }
.exec-dashboard .exec-control--warning { border-left-color: var(--flag, #9a6a00); }
.exec-dashboard .exec-control--warning .exec-control-m { color: var(--flag, #9a6a00); }
.exec-dashboard .exec-control--critical { border-left-color: var(--credit, #c0392b); }
.exec-dashboard .exec-control--critical .exec-control-m { color: var(--credit, #c0392b); }
.exec-dashboard .exec-control--info { border-left-color: var(--navy, #233F6B); }
.exec-dashboard .exec-control--info .exec-control-m { color: var(--navy, #233F6B); font-size: var(--f-sm, .82rem); }
.exec-dashboard .exec-control--muted { border-left-color: var(--line, #e4e9f1); }
.exec-dashboard .exec-control--muted .exec-control-m { color: var(--mute-2, #96a1b4); }

/* rows / panels */
.exec-dashboard .exec-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; }
.exec-dashboard .exec-row--one { grid-template-columns: 1fr; }
.exec-dashboard .exec-panel { background: var(--surface, #fff); border: 1px solid var(--line, #e4e9f1); border-radius: 10px; padding: 16px 18px; min-width: 0; }
.exec-dashboard .exec-eyebrow { font-size: var(--f-xs, .72rem); font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--navy, #233F6B); margin-bottom: 10px; }
.exec-dashboard .exec-note { font-size: var(--f-xs, .72rem); color: var(--mute, #68758a); margin-top: 10px; line-height: 1.5; }
.exec-dashboard .exec-empty { font-size: var(--f-sm, .82rem); color: var(--mute, #68758a); padding: 18px 4px; }
.exec-dashboard .exec-ok-note { color: var(--balanced, #16815b); font-weight: 600; font-size: var(--f-sm, .82rem); padding: 8px 0; }

/* attention */
.exec-dashboard .exec-attention { display: flex; flex-direction: column; }
.exec-dashboard .exec-attention-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; background: none; border: 0; border-bottom: 1px solid var(--line, #e4e9f1); padding: 11px 2px; cursor: pointer; font: inherit; color: var(--ink, #172235); line-height: 1.5; }
.exec-dashboard .exec-attention-item:hover { background: var(--surface-2, #f4f6fa); }
.exec-dashboard .exec-attention-item .exec-dot { width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; margin-top: 6px; }
.exec-dashboard .exec-attention-item--critical .exec-dot { background: var(--credit, #c0392b); }
.exec-dashboard .exec-attention-item--warning .exec-dot { background: var(--flag, #9a6a00); }

/* mini metric grid */
.exec-dashboard .exec-minigrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.exec-dashboard .exec-mx { background: var(--surface-2, #f4f6fa); border-radius: 8px; padding: 10px 12px; }
.exec-dashboard .exec-mx-l { font-size: var(--f-xs, .72rem); color: var(--mute, #68758a); }
.exec-dashboard .exec-mx-v { font-size: var(--f-lg, 1.05rem); font-weight: 700; color: var(--ink, #172235); margin-top: 2px; overflow-wrap: anywhere; }

/* ageing bars */
.exec-dashboard .exec-ageing-row { margin-bottom: 9px; }
.exec-dashboard .exec-ageing-h { display: flex; justify-content: space-between; font-size: var(--f-sm, .82rem); }
.exec-dashboard .exec-ageing-h span:first-child { font-weight: 600; }
.exec-dashboard .exec-bar { height: 6px; background: var(--surface-2, #f4f6fa); border-radius: 4px; overflow: hidden; margin-top: 3px; display: block; }
.exec-dashboard .exec-bar-fill { display: block; height: 100%; }
.exec-dashboard .exec-bar-fill--ok { background: var(--navy, #233F6B); }
.exec-dashboard .exec-bar-fill--warn { background: var(--flag, #9a6a00); }
.exec-dashboard .exec-bar-fill--critical { background: var(--credit, #c0392b); }
.exec-dashboard .exec-bar-fill--navy { background: var(--navy, #233F6B); }

/* trust */
.exec-dashboard .exec-trust-status { margin-top: 10px; font-weight: 700; }
.exec-dashboard .exec-trust-status::before { content: "✓ "; }
.exec-dashboard .exec-trust-status--ok { color: var(--balanced, #16815b); }
.exec-dashboard .exec-trust-status--critical { color: var(--credit, #c0392b); }
.exec-dashboard .exec-trust-status--critical::before { content: "✗ "; }

/* practice rows (buttons) */
.exec-dashboard .exec-practice-row { display: block; width: 100%; text-align: left; background: none; border: 0; padding: 8px 2px; margin-top: 6px; cursor: pointer; font: inherit; color: var(--ink, #172235); }
.exec-dashboard .exec-practice-row:hover { background: var(--surface-2, #f4f6fa); }
.exec-dashboard .exec-practice-h { display: flex; justify-content: space-between; gap: 8px; font-size: var(--f-sm, .82rem); }
.exec-dashboard .exec-practice-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-dashboard .exec-practice-row .exec-bar { margin-top: 4px; }

/* recent postings */
.exec-dashboard .exec-scroll { overflow-x: auto; }
.exec-dashboard .exec-recent-table { width: 100%; border-collapse: collapse; font-size: var(--f-sm, .82rem); }
.exec-dashboard .exec-recent-table th { text-align: left; font-size: var(--f-xs, .72rem); text-transform: uppercase; letter-spacing: .03em; color: var(--mute, #68758a); padding: 6px 8px; border-bottom: 1px solid var(--line, #e4e9f1); }
.exec-dashboard .exec-recent-table th.r, .exec-dashboard .exec-recent-table td.r { text-align: right; }
.exec-dashboard .exec-recent-table td { padding: 7px 8px; border-bottom: 1px solid var(--line, #e4e9f1); }
.exec-dashboard .exec-recent-table .mono, .exec-dashboard .exec-recent-table .num { font-variant-numeric: tabular-nums; }
.exec-dashboard .exec-recent-row { cursor: pointer; }
.exec-dashboard .exec-recent-row:hover { background: var(--surface-2, #f4f6fa); }
.exec-dashboard .exec-recent-row.is-void { opacity: .55; }
.exec-dashboard .exec-status--posted { color: var(--balanced, #16815b); font-weight: 600; }
.exec-dashboard .exec-status--pending { color: var(--flag, #9a6a00); font-weight: 600; }
.exec-dashboard .exec-status--void { color: var(--mute-2, #96a1b4); font-weight: 600; }

/* tax statement */
.exec-dashboard .exec-stmt { width: 100%; border-collapse: collapse; font-size: var(--f-sm, .82rem); }
.exec-dashboard .exec-stmt td { padding: 5px 0; }
.exec-dashboard .exec-stmt td.r { text-align: right; font-variant-numeric: tabular-nums; }
.exec-dashboard .exec-stmt-tot td { border-top: 1px solid var(--line, #e4e9f1); font-weight: 700; padding-top: 8px; }
.exec-dashboard .exec-stmt-gap { padding-top: 10px; }
.exec-dashboard .exec-pos { color: var(--balanced, #16815b); }
.exec-dashboard .exec-nrs { display: flex; justify-content: space-between; align-items: center; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line, #e4e9f1); font-weight: 600; }
.exec-dashboard .exec-nrs-pct--ok { color: var(--balanced, #16815b); font-weight: 800; }
.exec-dashboard .exec-nrs-pct--warn { color: var(--flag, #9a6a00); font-weight: 800; }

/* buttons full width helper */
.exec-dashboard .exec-wide { width: 100%; margin-top: 12px; }

/* error / failure state */
.exec-dashboard .exec-fail { max-width: 520px; margin: 60px auto; text-align: center; background: var(--surface, #fff); border: 1px solid var(--line, #e4e9f1); border-radius: 12px; padding: 28px 26px; }
.exec-dashboard .exec-fail-h { font-size: var(--f-lg, 1.05rem); font-weight: 700; color: var(--ink, #172235); }
.exec-dashboard .exec-fail-b { color: var(--mute, #68758a); margin-top: 6px; }
.exec-dashboard .exec-fail-a { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
.exec-dashboard .exec-fail-id { font-size: var(--f-2xs, .66rem); color: var(--mute-2, #96a1b4); margin-top: 12px; }

/* accessible focus ring on every interactive element */
.exec-dashboard button:focus-visible,
.exec-dashboard [role="button"]:focus-visible,
.exec-dashboard a:focus-visible { outline: 2px solid var(--navy, #233F6B); outline-offset: 2px; border-radius: 6px; }

/* responsive */
@media (max-width: 1500px) { .exec-dashboard .exec-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 1400px) { .exec-dashboard .exec-control-strip { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 1000px) { .exec-dashboard .exec-row { grid-template-columns: 1fr; } }
@media (max-width: 900px) { .exec-dashboard .exec-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } .exec-dashboard .exec-control-strip { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .exec-dashboard .exec-kpis { grid-template-columns: 1fr; } .exec-dashboard .exec-control-strip { grid-template-columns: 1fr; } .exec-dashboard .exec-minigrid { grid-template-columns: 1fr; } }

/* ============================================================================
   3D / elevation layer — depth via layered shadows, a soft raised top-light,
   carved bars and hover-lift. Theme-aware (light + dark). Purely cosmetic.
   ========================================================================== */
.exec-dashboard {
  --exd-e1: 0 1px 2px rgba(16,24,40,.06), 0 1px 3px rgba(16,24,40,.10);
  --exd-e2: 0 1px 2px rgba(16,24,40,.05), 0 8px 18px -6px rgba(16,24,40,.16);
  --exd-eh: 0 6px 12px -4px rgba(16,24,40,.12), 0 18px 34px -10px rgba(16,24,40,.26);
  --exd-top: linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,0) 58%);
  --exd-edge: inset 0 1px 0 rgba(255,255,255,.85), inset 0 0 0 1px rgba(16,24,40,.02);
  --exd-inset: inset 0 1px 3px rgba(16,24,40,.16), inset 0 -1px 0 rgba(255,255,255,.5);
  --exd-fill-gloss: inset 0 1px 0 rgba(255,255,255,.38);
}
/* raised cards */
.exec-dashboard .exec-kpi,
.exec-dashboard .exec-panel,
.exec-dashboard .exec-control {
  background-image: var(--exd-top);
  background-repeat: no-repeat;
  box-shadow: var(--exd-e2), var(--exd-edge);
  transition: box-shadow .18s ease, transform .16s ease;
}
/* KPI tiles sit a touch higher */
.exec-dashboard .exec-kpi { transform: translateZ(0); }
.exec-dashboard .exec-kpi:hover { transform: translateY(-3px); box-shadow: var(--exd-eh), var(--exd-edge); }
/* interactive controls lift on hover/focus */
.exec-dashboard button.exec-control:hover,
.exec-dashboard button.exec-control:focus-visible { transform: translateY(-2px); box-shadow: var(--exd-eh), var(--exd-edge); }
.exec-dashboard button.exec-control:active { transform: translateY(0); box-shadow: var(--exd-e1); }
/* inner-carved mini tiles + progress bars for tactile depth */
.exec-dashboard .exec-mx { box-shadow: var(--exd-edge), var(--exd-e1); }
.exec-dashboard .exec-bar { box-shadow: var(--exd-inset); }
.exec-dashboard .exec-bar-fill { box-shadow: var(--exd-fill-gloss); background-image: linear-gradient(180deg, rgba(255,255,255,.22), rgba(0,0,0,.06)); }
/* attention + practice rows: subtle press feedback */
.exec-dashboard .exec-attention-item,
.exec-dashboard .exec-practice-row { border-radius: 8px; transition: background .15s ease, box-shadow .15s ease, transform .15s ease; }
.exec-dashboard .exec-attention-item:hover,
.exec-dashboard .exec-practice-row:hover { box-shadow: var(--exd-e1); transform: translateY(-1px); }
/* recent-postings table gets a light raised surface */
.exec-dashboard .exec-scroll { border-radius: 8px; box-shadow: var(--exd-edge); }
/* the failure card floats */
.exec-dashboard .exec-fail { box-shadow: var(--exd-eh), var(--exd-edge); }

/* dark theme: deeper shadows, a faint top light for the raised edge */
:root[data-theme="dark"] .exec-dashboard,
.exec-dashboard[data-theme="dark"] {
  --exd-e1: 0 1px 2px rgba(0,0,0,.5);
  --exd-e2: 0 2px 4px rgba(0,0,0,.45), 0 10px 22px -6px rgba(0,0,0,.6);
  --exd-eh: 0 8px 16px -4px rgba(0,0,0,.55), 0 22px 40px -10px rgba(0,0,0,.7);
  --exd-top: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 58%);
  --exd-edge: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.03);
  --exd-inset: inset 0 1px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
  --exd-fill-gloss: inset 0 1px 0 rgba(255,255,255,.14);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .exec-dashboard {
    --exd-e1: 0 1px 2px rgba(0,0,0,.5);
    --exd-e2: 0 2px 4px rgba(0,0,0,.45), 0 10px 22px -6px rgba(0,0,0,.6);
    --exd-eh: 0 8px 16px -4px rgba(0,0,0,.55), 0 22px 40px -10px rgba(0,0,0,.7);
    --exd-top: linear-gradient(180deg, rgba(255,255,255,.05), rgba(255,255,255,0) 58%);
    --exd-edge: inset 0 1px 0 rgba(255,255,255,.06), inset 0 0 0 1px rgba(255,255,255,.03);
    --exd-inset: inset 0 1px 3px rgba(0,0,0,.55), inset 0 -1px 0 rgba(255,255,255,.04);
    --exd-fill-gloss: inset 0 1px 0 rgba(255,255,255,.14);
  }
}
@media (prefers-reduced-motion: reduce) {
  .exec-dashboard .exec-kpi, .exec-dashboard .exec-control,
  .exec-dashboard .exec-attention-item, .exec-dashboard .exec-practice-row { transition: none; }
  .exec-dashboard .exec-kpi:hover, .exec-dashboard button.exec-control:hover,
  .exec-dashboard .exec-attention-item:hover, .exec-dashboard .exec-practice-row:hover { transform: none; }
}

/* ===========================================================================
   Home page structure (architecture brief §18): section headings, workspace
   tiles, and My tasks. Same tokens and raised-card treatment as the KPIs and
   controls above, so light and dark themes follow automatically.
   =========================================================================== */
.exec-dashboard .exec-section-h {
  margin: 22px 0 10px; font-size: var(--f-xs, .72rem); font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--mute, #5b6577); line-height: 1.2;
}
.exec-dashboard .exec-header + .exec-section-h { margin-top: 6px; }

.exec-dashboard .exec-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
.exec-dashboard .exec-tile {
  display: flex; flex-direction: column; align-items: flex-start; gap: 3px; min-width: 0; width: 100%;
  text-align: left; font: inherit; color: inherit; cursor: pointer;
  background: var(--surface, #fff); border: 1px solid var(--line, #e4e9f1); border-top: 3px solid var(--navy, #233F6B);
  border-radius: 10px; padding: 13px 15px 14px;
  background-image: var(--exd-top); background-repeat: no-repeat;
  box-shadow: var(--exd-e2), var(--exd-edge); transition: box-shadow .18s ease, transform .16s ease;
}
.exec-dashboard .exec-tile:hover,
.exec-dashboard .exec-tile:focus-visible { transform: translateY(-2px); box-shadow: var(--exd-eh), var(--exd-edge); }
.exec-dashboard .exec-tile:active { transform: translateY(0); box-shadow: var(--exd-e1); }
.exec-dashboard .exec-tile--warn { border-top-color: var(--flag, #9a6a00); }
.exec-dashboard .exec-tile--critical { border-top-color: var(--credit, #c0392b); }
.exec-dashboard .exec-tile-n { font-size: var(--f-sm, .8rem); font-weight: 700; color: var(--navy, #233F6B); }
.exec-dashboard .exec-tile-v { font-size: var(--f-num, 1.15rem); font-weight: 700; color: var(--ink, #1f2733); font-variant-numeric: tabular-nums; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exec-dashboard .exec-tile-s { font-size: var(--f-sm, .8rem); color: var(--mute, #5b6577); line-height: 1.35; }

.exec-dashboard .exec-tasks { display: flex; flex-direction: column; }
.exec-dashboard .exec-task {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; font: inherit; color: inherit;
  background: none; border: 0; border-bottom: 1px solid var(--line, #e4e9f1); padding: 10px 2px; cursor: pointer;
  border-radius: 8px; transition: background .15s ease, box-shadow .15s ease, transform .15s ease;
}
.exec-dashboard .exec-task:last-child { border-bottom: 0; }
.exec-dashboard .exec-task:hover { background: var(--surface-2, #f4f6fa); box-shadow: var(--exd-e1); transform: translateY(-1px); }
.exec-dashboard .exec-task-n {
  min-width: 30px; height: 26px; padding: 0 8px; border-radius: 13px; display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f4f6fa); color: var(--navy, #233F6B); font-weight: 700; font-size: var(--f-sm, .8rem); flex-shrink: 0;
  box-shadow: var(--exd-edge);
}
.exec-dashboard .exec-task-t { flex: 1 1 auto; min-width: 0; }

@media (max-width: 1200px) { .exec-dashboard .exec-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px)  { .exec-dashboard .exec-tiles { grid-template-columns: 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .exec-dashboard .exec-tile, .exec-dashboard .exec-task { transition: none; }
  .exec-dashboard .exec-tile:hover, .exec-dashboard .exec-task:hover { transform: none; }
}
/* a tile whose value is words (Reports, "Not set up") wraps instead of being cut off */
.exec-dashboard .exec-tile-v--text { font-size: var(--f-md, .95rem); line-height: 1.3; white-space: normal; overflow: visible; text-overflow: clip; }