/* Menu shell for oa-talent-matching. Tokens match the dashboards (Recruiter Workload / Handovers). */
:root {
  color-scheme: light;
  --page: #f4f6f9; --surface: #ffffff; --surface-2: #f7f9fc; --surface-3: #eef2f7;
  --ink: #0f1b2d; --ink-2: #475467; --ink-muted: #8a94a6;
  --border: #e3e8ef; --border-2: #d3dae4;
  --brand: #1d4ed8; --brand-bg: #eaf0fd; --focus: #2563eb;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --page: #0b0f16; --surface: #121823; --surface-2: #161d2a; --surface-3: #1c2433;
    --ink: #f1f4f9; --ink-2: #b4bccb; --ink-muted: #7c879a;
    --border: #222b3a; --border-2: #2d3748;
    --brand: #6b9cff; --brand-bg: rgba(107,156,255,0.14); --focus: #6b9cff;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --page: #0b0f16; --surface: #121823; --surface-2: #161d2a; --surface-3: #1c2433;
  --ink: #f1f4f9; --ink-2: #b4bccb; --ink-muted: #7c879a;
  --border: #222b3a; --border-2: #2d3748;
  --brand: #6b9cff; --brand-bg: rgba(107,156,255,0.14); --focus: #6b9cff;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body { margin: 0; font: 14px/1.5 Inter, system-ui, -apple-system, "Segoe UI", sans-serif; background: var(--page); color: var(--ink); display: flex; min-height: 100vh; -webkit-font-smoothing: antialiased; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

nav { width: 230px; flex-shrink: 0; background: var(--surface); border-right: 1px solid var(--border); padding: 20px 12px 14px; display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; }
nav h1 { font-size: 15px; font-weight: 800; letter-spacing: -0.01em; margin: 0 8px 18px; }
nav a { display: block; padding: 8px 10px; border-radius: 8px; color: var(--ink-2); text-decoration: none; margin-bottom: 2px; font-weight: 500; }
nav a:hover { background: var(--surface-2); color: var(--ink); }
nav a.active { background: var(--brand-bg); color: var(--brand); font-weight: 600; }
nav .group { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin: 16px 10px 6px; }
nav a.sub { padding-left: 18px; }
nav .spacer { flex: 1; }

.theme-toggle { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 12px; padding: 9px 10px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface-2); color: var(--ink-2); font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; text-align: left; }
.theme-toggle:hover { border-color: var(--border-2); color: var(--ink); }
.theme-toggle svg { width: 17px; height: 17px; flex: none; stroke: currentColor; fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.theme-toggle .track { margin-left: auto; width: 32px; height: 18px; border-radius: 999px; background: var(--border-2); position: relative; flex: none; transition: background .2s ease; }
.theme-toggle .track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.2); transition: transform .2s ease; }
.theme-toggle[aria-checked="true"] .track { background: var(--brand); }
.theme-toggle[aria-checked="true"] .track::after { transform: translateX(14px); }

main { flex: 1; min-width: 0; }
main.page { padding: 32px 16px 32px 32px; max-width: 1100px; }
main.page h2 { margin: 0 0 6px; font-size: 22px; font-weight: 800; letter-spacing: -0.02em; }
main.page p { color: var(--ink-2); margin: 0; }
main.frame { display: flex; }
main.frame iframe { flex: 1; width: 100%; height: 100vh; border: 0; display: block; background: var(--page); }

@media (max-width: 700px) {
  body { flex-direction: column; }
  nav { width: auto; height: auto; position: static; border-right: 0; border-bottom: 1px solid var(--border); padding: 14px 12px; }
  nav .spacer { display: none; }
  main.page { padding: 20px 16px; }
  main.frame iframe { height: calc(100vh - 60px); min-height: 600px; }
}
@media (prefers-reduced-motion: reduce) { .theme-toggle .track, .theme-toggle .track::after { transition: none; } }