/* theme-znsg.css — ZNSG's colours on the product's screens.
   ===========================================================================
   Work order §1: "One UI, themed per tenant. This deployment uses the SAME
   screens, components, tables and spacing as the other instance. Per-tenant
   identity is a theme — colours, logo, title, optionally a display font."

   So this file changes TOKENS and the one piece of chrome the owner asked for
   — the gold bar beside the selected nav item. It does not restyle a single
   component. Anything that looks different here looks different everywhere,
   which is the point: a theme that needs per-screen exceptions is a fork
   wearing a stylesheet's clothes.

   Loaded AFTER base-layout.css so it overrides by cascade rather than by
   !important. If a rule here ever needs !important, the token it should have
   changed has been hard-coded somewhere and that is the bug to fix.
   =========================================================================== */

:root {
  /* Read from znsg.pk's own computed styles, not sampled by eye. */
  --znsg-gold:      #B8892E;
  --znsg-gold-lt:   #D4A84B;
  --znsg-ink:       #1A1916;
  --znsg-cream:     #F0EDE6;

  /* THE BUTTON GOLD IS DARKER THAN THE BRAND GOLD, deliberately. White text on
     #B8892E is about 3.5:1 — under the 4.5:1 a normal-sized label needs. The
     brand gold stays exactly itself everywhere it is a MARK or an accent; only
     the fill behind white text is darkened, and that is a legibility decision
     rather than a second brand colour. */
  --primary:      #8F6A22;
  --primary-2:    #B8892E;
  --primary-soft: #F6EFE0;

  --accent:       #B8892E;
  --accent-soft:  #F6EFE0;
}

/* ── the selected item, with its gold bar ──────────────────────────────────
   .navitem already carries position:relative, so the bar hangs off it without
   changing the box or shifting the label by a pixel. */
.navitem.active {
  background: rgba(184,137,46,.15);
  color: var(--znsg-cream);
}
.navitem.active::before {
  content: '';
  position: absolute;
  left: 0; top: 4px; bottom: 4px;
  width: 3px;
  border-radius: 0 3px 3px 0;
  background: var(--znsg-gold);
}
/* The collapsed rail centres its items, so a bar pinned to the left edge would
   float away from the icon. It goes under it instead. */
.sidebar:not(.expanded) .navitem.active::before {
  left: 50%; right: auto; transform: translateX(-50%);
  top: auto; bottom: 2px; width: 16px; height: 2px;
  border-radius: 2px;
}
.navitem:hover { color: var(--znsg-cream); }

/* The company name under the mark, and the online dot beside it. */
.sideBrandRow .sideCompany { color: var(--znsg-gold-lt); }

/* ── the financial year selector ───────────────────────────────────────────
   Sits in the topbar and has to read as a STATEMENT of which books you are
   in, not as one more filter beside the screen's own. So it carries the gold
   and a border, where the screen's controls are plain. */
.fyWrap { display: flex; align-items: center; }
.fyPick {
  appearance: auto;
  background: var(--znsg-ink);
  color: var(--znsg-cream);
  border: 1px solid rgba(184,137,46,.55);
  border-radius: 8px;
  padding: 6px 10px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .2px;
  cursor: pointer;
  max-width: 230px;
}
.fyPick:focus-visible { outline: 2px solid var(--znsg-gold); outline-offset: 1px; }
.fyPick option { background: #ffffff; color: #1A1916; font-weight: 500; }
@media (max-width: 640px) {
  /* On a phone the label is the first casualty, not the control. */
  .fyPick { max-width: 120px; font-size: 12px; padding: 5px 7px; }
}