/* ========================================================================
   Depth + palette layer — loaded LAST, across the board.
   Direction: off-white canvas, white surfaces, GREEN as accent, BLUE as a
   second accent. Depth is a *slight* drop shadow — restrained, neutral-tinted.
   ======================================================================== */

:root {
  /* Slight, neutral (cool blue-gray) drop-shadow ramp */
  --el-1: 0 1px 2px rgba(38,50,70,0.06);
  --el-2: 0 1px 2px rgba(38,50,70,0.05),
          0 3px 8px -2px rgba(38,50,70,0.08);
  --el-3: 0 2px 6px -1px rgba(38,50,70,0.08),
          0 10px 22px -8px rgba(38,50,70,0.12);
  --el-4: 0 6px 14px -4px rgba(38,50,70,0.12),
          0 22px 44px -16px rgba(38,50,70,0.18);

  /* Flat surfaces — off-white canvas, clean white cards */
  --surf:        #FFFFFF;
  --surf-raised: #FFFFFF;
  --surf-sunk:   #FAFAF7;
  --inset-sheen: 0 0 0 0 transparent;
}

[data-theme="dark"] {
  --el-1: 0 1px 2px rgba(0,0,0,0.4);
  --el-2: 0 1px 2px rgba(0,0,0,0.4), 0 3px 8px -2px rgba(0,0,0,0.5);
  --el-3: 0 2px 6px -1px rgba(0,0,0,0.45), 0 10px 22px -8px rgba(0,0,0,0.55);
  --el-4: 0 6px 14px -4px rgba(0,0,0,0.5), 0 22px 44px -16px rgba(0,0,0,0.6);
  --surf:        #181C11;
  --surf-raised: #1B1F13;
  --surf-sunk:   #14170E;
  --inset-sheen: 0 0 0 0 transparent;
}

/* ---- Cards & panels: clean white, slight drop shadow ---- */
.card {
  background: var(--surf);
  box-shadow: var(--el-2);
}
.card-flat,
.panel {
  background: var(--surf);
  box-shadow: var(--el-1);
}
.panel { transition: box-shadow .2s ease; }

/* ---- KPI / scorecards ---- */
.kpi-tile,
.scorecards .kpi-tile.kpi-rich {
  background: var(--surf);
  box-shadow: var(--el-1);
  transition: box-shadow .18s ease, transform .18s ease;
}
.scorecards .kpi-tile.kpi-rich:hover {
  box-shadow: var(--el-2);
  transform: translateY(-1px);
}

/* ---- Triage / list rows ---- */
.triage-item { background: var(--surf); box-shadow: var(--el-1); }
.triage-item:hover { box-shadow: var(--el-2); }

/* ---- Buttons: flat accent fill + slight drop shadow ---- */
.btn { box-shadow: var(--el-1); }
.btn-primary {
  background: var(--sage);
  box-shadow: 0 1px 2px rgba(38,50,70,0.10), 0 2px 6px -1px rgba(20,49,9,0.20);
}
.btn-primary:hover {
  background: var(--forest);
  box-shadow: 0 2px 4px rgba(38,50,70,0.12), 0 4px 12px -2px rgba(20,49,9,0.28);
}
.btn-secondary {
  background: var(--surf-raised);
  box-shadow: var(--el-1);
}
.btn-secondary:hover { border-color: var(--blue-l); background: var(--blue-bg); color: var(--blue-d); }
.btn-ghost { box-shadow: none; }
.btn-dark { box-shadow: 0 2px 6px -1px rgba(38,50,70,0.22); }

/* ---- Inputs: faint recess ---- */
.input, .select, .textarea {
  background: var(--surf);
  box-shadow: inset 0 1px 2px rgba(38,50,70,0.05);
}
.input:focus, .select:focus, .textarea:focus {
  border-color: var(--blue);
  box-shadow: inset 0 1px 2px rgba(38,50,70,0.05),
              0 0 0 3px color-mix(in oklab, var(--blue) 22%, transparent);
}

/* ════════════════════════════════════════════════════════════════════════
   BLUE — second accent, used deliberately in a few places.
   ════════════════════════════════════════════════════════════════════════ */

/* Section links / drill-downs read as interactive blue */
.panel-head .ph-link,
.drill-link,
.ob-link,
.ob-foot-note a { color: var(--blue); }
.panel-head .ph-link:hover,
.drill-link:hover,
.ob-link:hover,
.ob-foot-note a:hover { color: var(--blue-d); }

/* Subtle blue accent bar on info triage rows */
.triage-item.info { border-left-color: var(--blue); }
.triage-item.info .ti-ic { background: var(--blue-bg); color: var(--blue-d); }

/* Eyebrows / progress stay in the green brand family */

/* ════════════════════════════════════════════════════════════════════════
   Per-page surfaces — slight depth for every route.
   ════════════════════════════════════════════════════════════════════════ */

/* Page header strips become clean raised panels */
.hero,
.hero-flat {
  background: var(--surf);
  border: 1px solid var(--sage-l);
  box-shadow: var(--el-2);
}

/* 2×2 hero stat cells */
.hero-cell { background: var(--surf); box-shadow: var(--el-1); }

/* Data tables */
.data-table { background: var(--surf); box-shadow: var(--el-2); }
.data-table th {
  background: var(--surf-sunk);
  box-shadow: inset 0 -1px 0 var(--line-2);
}

/* Resource + request cards */
.res-card,
.req-card { background: var(--surf); box-shadow: var(--el-1); }
.res-card:hover,
.req-card:hover { box-shadow: var(--el-2); transform: translateY(-1px); }

/* Board toolbar chips + sort pill */
.board-cat { background: var(--surf-raised); box-shadow: var(--el-1); }
.board-cat.on { background: var(--forest); }
.board-sort { box-shadow: inset 0 1px 2px rgba(38,50,70,0.05); }

/* Capacity board rows (Scheduling) */
.cap-row { box-shadow: var(--el-1); }
.cap-row:hover { box-shadow: var(--el-2); }

/* Donut charts */
.donut { box-shadow: var(--el-1); }

/* Drawer / detail panels float above the page */
.drawer, .side-drawer, .detail-drawer { box-shadow: var(--el-4); }

/* Placeholder cards keep a soft recessed look */
.placeholder-card { box-shadow: inset 0 1px 3px rgba(38,50,70,0.05); }

/* ---- Scheduling toolbar bits ---- */
.sched-views { background: var(--surf-raised); box-shadow: var(--el-1); }
.week-tutor-chip { background: var(--surf); box-shadow: var(--el-1); }
.week-tutor-chip:hover { box-shadow: var(--el-2); }
.week-tutor-chip.on { background: var(--sage-m); border-color: var(--forest); }
.week-tutor-chip.on .wt-sub { color: var(--forest); }