/* desktop.css — the Calwide CRM look at >=1200px (banking F30/D95).
   Linked with media="(min-width: 1200px)". Re-points tokens.css to the CRM
   palette; the brand blue is --desktop-brand (organisation colour, set by
   theme-init.js), default #1A56DB. */

@media (min-width: 1200px) {
:root {
  --bg:#F4F6FB; --surface:#FFFFFF; --surface-2:#E8EDF7;
  --border:#DDE3F0; --border-strong:#C4CFE8;
  --text:#212529; --text-muted:#5A6B86; --text-subtle:#8A99C2;
  --brand:var(--desktop-brand, #1A56DB);
  --brand-hover:color-mix(in oklab, var(--brand), black 18%);
  --brand-subtle:#E8EDF7;
  --nav-text:#334170; --nav-label:#5A6B86;
  --chrome-bg:linear-gradient(90deg, #0A1F44 0%, #112D6B 100%);
  --chrome-shadow:0 2px 8px rgba(10,31,68,.35);
  --shadow-card:0 2px 4px rgba(10,31,68,.08);
}
body { --on-brand:var(--desktop-on-brand, #FFFFFF); }
}
@media (min-width: 1200px) and (prefers-color-scheme: dark) {
:root:not([data-theme="light"]) {
  --bg:#0A1222; --surface:#111B30; --surface-2:#16223B;
  --border:#26365A; --border-strong:#33466F;
  --text:#E3E9F6; --text-muted:#A3B0CC; --text-subtle:#6F7FA3;
  --brand:color-mix(in oklab, var(--desktop-brand, #1A56DB), white 50%);
  --brand-hover:color-mix(in oklab, var(--desktop-brand, #1A56DB), white 62%);
  --brand-subtle:#1A2A4F; --nav-text:#C3CEE6; --nav-label:#97A6C8;
  --chrome-bg:linear-gradient(90deg, #071430 0%, #0D2150 100%);
  --chrome-shadow:0 2px 10px rgba(0,0,0,.5);
  --shadow-card:0 2px 6px rgba(0,0,0,.35);
}
:root:not([data-theme="light"]) body { --on-brand:#0A1222; }
}
@media (min-width: 1200px) {
:root[data-theme="dark"] {
  --bg:#0A1222; --surface:#111B30; --surface-2:#16223B;
  --border:#26365A; --border-strong:#33466F;
  --text:#E3E9F6; --text-muted:#A3B0CC; --text-subtle:#6F7FA3;
  --brand:color-mix(in oklab, var(--desktop-brand, #1A56DB), white 50%);
  --brand-hover:color-mix(in oklab, var(--desktop-brand, #1A56DB), white 62%);
  --brand-subtle:#1A2A4F; --nav-text:#C3CEE6; --nav-label:#97A6C8;
  --chrome-bg:linear-gradient(90deg, #071430 0%, #0D2150 100%);
  --chrome-shadow:0 2px 10px rgba(0,0,0,.5);
  --shadow-card:0 2px 6px rgba(0,0,0,.35);
}
:root[data-theme="dark"] body { --on-brand:#0A1222; }

/* Top bar (CRM .crm-navbar): navy, blue edge, full width over the sidebar. */
.app-bar {
  background:var(--chrome-bg); color:#FFFFFF;
  border-bottom:3px solid var(--desktop-brand, #1A56DB); box-shadow:var(--chrome-shadow);
}
.app-bar .icon-btn { color:rgba(255,255,255,.85); }
.app-bar .icon-btn:hover, .app-bar .menu[open] > summary { color:#FFFFFF; background:rgba(255,255,255,.12); }
.app-bar :focus-visible { outline-color:#FFFFFF; }

/* Sidebar (CRM .crm-sidebar): white, dividers, solid-blue active pill. */
.nav { background:var(--surface); border-right:1px solid var(--border); }

/* Cards (CRM .card): soft navy shadow on every card surface. */
.list, .card, .kpi, .filter-bar, .table-wrap, .auth-card { box-shadow:var(--shadow-card); }
.kpi { padding:20px; }
.kpi__value { font-size:26px; }

/* Footer (CRM .crm-footer). */
.app-footer {
  background:var(--chrome-bg); color:rgba(255,255,255,.72);
  border-top:2px solid var(--desktop-brand, #1A56DB);
}

/* Denser controls for mouse and keyboard. */
.btn { min-height:40px; }
.btn--sm { min-height:32px; }
.input,
.form-field :is(input:not([type=checkbox], [type=radio], [type=hidden], [type=file]), select) { min-height:42px; padding:9px 12px; font-size:15px; }
.form-field textarea { font-size:15px; }
.page-head__title { font-size:26px; }
}