/* ============================================================================
   FCA co-brand — Family Care Authority (Abu Dhabi), deploying authority.
   Pulses OS remains the product. Loaded AFTER app.css, overrides.css and
   shell.css: every rule here is an override or an addition, never a change
   to the design-system export. Accent only — do not add gauge/KPI/chart fill
   colours here (those are set inline in the screen JS by design).

   The FCA mark is a real government organisation's logo, used for this
   customer demo only. It must not be published externally or presented as
   an FCA endorsement without FCA's written approval.
   ============================================================================ */

:root{
  --fca-brown:#59483c;      /* dominant logo colour */
  --fca-bronze:#b56f28;     /* site accent, 67 uses on adfca.gov.ae */
  --fca-tan:#aa8f70;        /* site secondary */
  --fca-charcoal:#3f3e45;   /* site body text */
  --fca-surface:#f5f5f7;    /* site surface */
  /* logo dot accents, for a future multi-series chart secondary palette —
     nothing in this app currently draws a second series (both bar charts in
     case-record.js / supervisor.js are single-series, fill="#2962D8" inline);
     these are here so that colour is drawn from the mark, not invented, the
     day one exists. */
  --fca-accent-sky:#a2c2cc;
  --fca-accent-slate:#829eaa;
  --fca-accent-sage:#a5af8c;
  --fca-accent-clay:#d7897e;
}

/* ----------------------------------------------------------------------------
   Sidebar lockup. The markup is fixed (index.html, owned by the shell agent):
     .side-nav (flex column, fixed, 248px / 64px collapsed)
       .side-brand > img.logo         <- currently the ONLY branding, at top
       .side-list#nav                 <- flex:1, nav items injected by app.js
   Reordered with flexbox `order` (no markup change):
     .side-nav::before   FCA lockup, generated content   -> order -1 (top)
     .side-list          nav (untouched, default order 0, flex:1 already set)
     .side-brand         Pulses mark, restyled as footer -> order 2 (bottom)
   ---------------------------------------------------------------------------- */
.side-nav::before{
  content:"";
  order:-1;
  display:block;
  flex:none;
  background-repeat:no-repeat;
  background-position:left top;
  background-size:contain;
  background-image:url("fca-logo.png");
  background-image:image-set(url("fca-logo.png") 1x, url("fca-logo@2x.png") 2x);
}
.side-brand{order:2}

/* wide sidebar (matches shell.css's own >1100px rules) */
@media (min-width:1101px){
  .side-nav::before{
    width:196px;height:83px;             /* 1876:795 mark ratio at the 26px-padded content width */
    margin:28px 26px 0;
    padding-bottom:22px;
    border-bottom:1px solid var(--mist);
    background-position:left top;
    background-size:196px 83px;
  }
  .side-brand{
    padding:18px 26px 22px;
    border-top:1px solid var(--mist);
    display:flex;
    flex-direction:column;
    gap:8px;
  }
  .side-brand::before{
    content:"Powered by";
    font-family:'Exo 2',sans-serif;
    font-weight:600;
    font-size:10px;
    letter-spacing:.14em;
    text-transform:uppercase;
    color:var(--faint);
  }
  .side-brand .logo{width:84px}          /* shrunk from 148px so the lockup above reads first */
}

/* collapsed icon rail (matches shell.css's own <=1100px rules) */
@media (max-width:1100px){
  .side-nav::before{
    width:38px;height:22px;
    margin:18px auto 0;
    padding-bottom:14px;
    border-bottom:1px solid var(--mist);
    background-position:center top;
  }
  .side-brand{
    padding:14px 0 16px;
    border-top:1px solid var(--mist);
  }
  .side-brand::before{content:none}      /* no room for the "Powered by" label in the icon rail */
}

/* ----------------------------------------------------------------------------
   Accent only: bronze for the active-nav bar and focus rings. Everything else
   — chrome, gauges, KPI numbers, chart fills — stays Pulses midnight/blue.
   ---------------------------------------------------------------------------- */
.nav-i.on{border-left-color:var(--fca-bronze)}
.qi:focus-visible{outline-color:var(--fca-bronze)}
.rsn-i:focus,.rsn-x:focus{border-color:var(--fca-bronze)}
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.nav-i:focus-visible{
  outline:2px solid var(--fca-bronze);
  outline-offset:2px;
}