/* ===== Side navigation layout (desktop/tablet only, >=960px) ===== */
@media (min-width:960px){
  body.layout-side header.top{position:sticky;top:0;z-index:60}
  body.layout-side header.top + .wrap{display:grid;grid-template-columns:240px minmax(0,1fr);grid-template-areas:"side privacy" "side subnav" "side main" "side foot";column-gap:20px;align-items:start}
  body.layout-side header.top + .wrap > .privacy{grid-area:privacy}
  body.layout-side #nav{grid-area:side;flex-direction:column;flex-wrap:nowrap;position:sticky;top:var(--hdr-h,190px);max-height:calc(100vh - var(--hdr-h,190px) - 12px);overflow-y:auto;gap:10px;margin:14px 0 8px;padding:10px;border:1px solid var(--line2);border-radius:12px}
  body.layout-side #nav a{width:100%;box-sizing:border-box}
  body.layout-side #subnav{grid-area:subnav}
  body.layout-side #view{grid-area:main;min-width:0}
  body.layout-side footer.foot{grid-area:foot}

  /* Smaller KPI cards */
  body.layout-side .dash-kpi{padding:12px 16px}
  body.layout-side .dash-kpi .dash-label{min-height:0;font-size:13px}
  body.layout-side .dash-kpi .dash-value{font-size:26px;margin:2px 0 8px}
  body.layout-side .dash-icon{width:30px;height:30px}
  body.layout-side .dash-icon svg{width:19px;height:19px}
  body.layout-side .dash-overview{padding:14px 16px}
  body.layout-side .dash-overview-value strong{font-size:26px}
  body.layout-side .dash-salary .dash-value{font-size:24px}
  body.layout-side .dx-k{min-height:118px;padding:12px 14px}
  body.layout-side .dx-kv{font-size:24px}
  body.layout-side .dx-kl{font-size:12px}
  body.layout-side .dx-ks{font-size:10.5px}
  body.layout-side .dx-sp{height:24px}
}

/* Larger side-nav buttons/icons + emblem centered over the tabs (desktop/tablet only) */
@media (min-width:960px){
  body.layout-side #nav{gap:3px;padding:6px 10px}
  body.layout-side #nav a{min-height:0;padding:6.5px 12px;font-size:18px;border-radius:10px}
  body.layout-side #nav a svg{width:24px;height:24px;margin-inline-end:6px;vertical-align:-4px}
  body.layout-side header.top .logo{margin-inline-start:35px}
}

/* Clock + date docked under the side tabs (desktop/tablet only) */
@media (min-width:960px){
  body.layout-side #side-stack{grid-area:side;position:sticky;top:var(--hdr-h,190px);max-height:calc(100vh - var(--hdr-h,190px) - 12px);display:flex;flex-direction:column;gap:12px;margin:14px 0 8px}
  body.layout-side #side-stack #nav{position:static;top:auto;max-height:none;flex:1 1 auto;min-height:0;margin:0;padding-top:3px;padding-bottom:3px;gap:2px}
  body.layout-side #side-stack #top-clock{flex:none;display:grid;grid-template-columns:auto minmax(0,1fr);align-items:center;gap:8px;padding:5px 8px;contain:layout paint;pointer-events:none;border:1px solid var(--line2);border-radius:12px;color:var(--ink)}
  body.layout-side #side-stack #top-clock .tc-text{display:block;text-align:center;line-height:1.3;min-width:0}
  body.layout-side #side-stack #top-clock .tc-face{width:36px;height:36px}
  body.layout-side #side-stack #top-clock .tc-rim{fill:none;stroke:var(--teal);stroke-width:1.8}
  body.layout-side #side-stack #top-clock .tc-h{stroke:var(--teal);stroke-width:3}
  body.layout-side #side-stack #top-clock .tc-m{stroke:var(--teal);stroke-width:2.2}
  body.layout-side #side-stack #top-clock .tc-s{stroke:#2ee640;stroke-width:1.6}
  body.layout-side #side-stack #top-clock .tc-hub{fill:var(--teal)}
  body.layout-side #side-stack #top-clock .tc-dot{fill:#16305c}
  body.layout-side #side-stack #top-clock .tc-day{display:block;font-size:13px;font-weight:700}
  body.layout-side #side-stack #top-clock .tc-date{display:block;font-size:13px;font-weight:600;margin:0;min-width:0}
  body.layout-side #side-stack #top-clock .tc-time{display:block;font-size:17px;font-weight:800;margin-top:1px;color:#16305c;min-width:0}
  html.dark body.layout-side #side-stack #top-clock .tc-time{color:#f2f7ff}
  html.dark body.layout-side #side-stack #top-clock{color:#f2f7ff}
  html.dark body.layout-side #side-stack #top-clock .tc-rim{stroke:#6ea8ff}
  html.dark body.layout-side #side-stack #top-clock .tc-h,
  html.dark body.layout-side #side-stack #top-clock .tc-m{stroke:#6ea8ff}
  html.dark body.layout-side #side-stack #top-clock .tc-hub{fill:#6ea8ff}
  /* Docked clock: hands driven by CSS animation (zero per-second DOM churn) */
  @keyframes tc-spin{to{transform:rotate(360deg)}}
  body.layout-side #side-stack #top-clock .tc-h,
  body.layout-side #side-stack #top-clock .tc-m,
  body.layout-side #side-stack #top-clock .tc-s{transform-box:view-box;transform-origin:50% 50%;animation-name:tc-spin;animation-timing-function:linear;animation-iteration-count:infinite}
  body.layout-side #side-stack #top-clock .tc-h{animation-duration:43200s}
  body.layout-side #side-stack #top-clock .tc-m{animation-duration:3600s}
  body.layout-side #side-stack #top-clock .tc-s{animation-duration:60s}
  html.dark body.layout-side #side-stack #top-clock .tc-dot{fill:#e8edf5}
}