/* The sidebar in the dashboard's language (2026-10-05): rounded rows, the
   current page as a pale-blue pill with a blue icon, sub-pages on a guide
   line with a dot for the current one, and a soft hover fill. Plain icons -
   no tinted tiles, glows or slide-in animation, which made it read as made
   by AI.

   A layer over sidebar-light.css, loaded after it on the office and the
   platform admin. To go back to the previous sidebar, remove this file's
   <link> from index.html and platform/index.html - nothing depends on it.

   sidebar-light.css marks its colours !important, so the few rules here that
   replace them must be too; the doubled .nav.nav lifts these selectors above
   its own. */
@media screen {
:root, :root[data-theme='light'] {
  --side-tile: transparent;
  --side-tile-hover: transparent;
  --side-pill: var(--primary-soft);
  --side-hover: var(--surface-alt);
  --side-inset: max(12px, calc(var(--side-pad, 40px) - 18px));
}
:root[data-theme='dark'] {
  --side-tile: transparent;
  --side-tile-hover: transparent;
  --side-pill: color-mix(in srgb, var(--primary) 16%, transparent);
  --side-hover: rgb(255 255 255 / .05);
}

/* Section names, lined up with the icons below them: the row's inset, its
   14px padding, and the 2px between the 22px icon box and its 18px glyph. */
:root body .nav.nav .nav__label { padding-inline: calc(var(--side-inset) + 16px); margin: 18px 0 8px; font-size: 11px; font-weight: 700; opacity: .75; }

:root body .nav.nav .nav__group { gap: 4px; }

/* Every row is a rounded pill, inset from the column's edges. */
:root body .nav.nav :is(a, .nav__parent) {
  width: auto;
  min-height: 46px;
  margin-inline: var(--side-inset);
  padding-inline: 14px 12px;
  gap: 12px;
  border-radius: 14px;
  /* Passed over all day, so the fill is near-instant rather than a fade. */
  transition: background-color .1s ease, color .1s ease;
}
:root body .nav.nav :is(a, .nav__parent) .nav__icon {
  display: grid;
  place-items: center;
  flex: none;
  width: 22px;
  height: 22px;
  min-width: 22px;
  border-radius: 0;
  background: var(--side-tile);
  transition: background-color .1s ease, color .1s ease;
}
:root body .nav.nav :is(a, .nav__parent) .nav__icon svg { width: 18px; height: 18px; }

/* Hover and keyboard focus: a soft fill, the tile a shade stronger. */
:root body .nav.nav :is(a, .nav__parent):focus-visible { background: var(--side-hover) !important; color: var(--fg) !important; }
@media (hover: hover) and (pointer: fine) { :root body .nav.nav :is(a, .nav__parent):hover { background: var(--side-hover) !important; color: var(--fg) !important; } }
:root body .nav.nav :is(a, .nav__parent):focus-visible .nav__icon { background: var(--side-tile-hover); }
@media (hover: hover) and (pointer: fine) { :root body .nav.nav :is(a, .nav__parent):hover .nav__icon { background: var(--side-tile-hover); } }
:root body .nav.nav :is(a, .nav__parent):focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* The current page: a pale-blue pill, blue label, icon on a solid blue tile
   with navy strokes (6.3:1). The edge bar it replaces is switched off. */
:root body .nav.nav a[aria-current='page']:not(.nav__sub a),
:root body .platform-nav.nav .nav__parent--current {
  background: var(--side-pill) !important;
  color: var(--side-active) !important;
  font-weight: 600;
}
:root body .nav.nav a[aria-current='page']:not(.nav__sub a) .nav__icon,
:root body .platform-nav.nav .nav__parent--current .nav__icon {
  color: var(--side-active) !important;
}
:root body .nav.nav a[aria-current='page']::after,
:root body .platform-nav.nav .nav__parent--current::after { content: none; }

/* A group holding the current page: its label darker, its tile tinted. */
:root body .nav.nav:not(.platform-nav) .nav__parent--current { color: var(--fg) !important; font-weight: 600; }
:root body .nav.nav:not(.platform-nav) .nav__parent--current .nav__icon { background: var(--side-tile-hover); color: var(--side-active) !important; }

/* Sub-pages hang from a thin guide line under their group's tile; the
   current one is a pill with a dot on the line. Opening animates in. */
:root body .nav.nav .nav__sub {
  position: relative;
  /* Logical sides, so the line sits under the tile in Pashto and Dari too. */
  margin-block: 2px 6px;
  margin-inline: calc(var(--side-inset) + 14px + 10px) var(--side-inset);
  padding-inline-start: 14px;
  border-inline-start: 2px solid var(--border);
  gap: 2px;
}
:root body .nav.nav .nav__sub a {
  min-height: 38px;
  margin: 0;
  /* 8px puts a page's name on the same line as its section's name above;
     the guide line is what shows it is nested. */
  padding-inline: 8px;
  border-radius: 11px;
  font-size: 14px;
}
:root body .nav.nav .nav__sub a[aria-current='page'] {
  background: var(--side-pill) !important;
  color: var(--side-active) !important;
  font-weight: 600;
}
:root body .nav.nav .nav__sub a[aria-current='page']::after { content: none; }
:root body .nav.nav .nav__sub a[aria-current='page']::before {
  content: '';
  display: block; /* office.css hides this pseudo-element on current links */
  position: absolute;
  inset-inline-start: -20px; /* centred on the 2px guide line */
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -5px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px var(--rail);
}

/* Sign out: the same pill, warming to pink on hover. */
:root body .nav.nav .nav__signout:focus-visible { color: var(--berry-ink, var(--danger)) !important; }
@media (hover: hover) and (pointer: fine) { :root body .nav.nav .nav__signout:hover { color: var(--berry-ink, var(--danger)) !important; } }
:root body .nav.nav .nav__signout:focus-visible .nav__icon { background: color-mix(in srgb, var(--dash-girls, #f72585) 14%, transparent); }
@media (hover: hover) and (pointer: fine) { :root body .nav.nav .nav__signout:hover .nav__icon { background: color-mix(in srgb, var(--dash-girls, #f72585) 14%, transparent); } }

/* Language: a rounded pill like the charts' tags. */
:root body .nav.nav .nav__foot { padding-inline: var(--side-inset); }
:root body .nav.nav .nav__foot .nav__label { padding-inline: 6px; }
:root body .nav.nav .langmenu__btn { border-radius: 999px; }

/* A finger needs 44px; a mouse is fine with 38. */
@media (pointer: coarse) {
  :root body .nav.nav .nav__sub a { min-height: 44px; }
}

@media (prefers-reduced-motion: reduce) {
  :root body .nav.nav :is(a, .nav__parent), :root body .nav.nav .nav__icon { transition: none; }
}
}