/* ============================================================================
   Stinson CRM -- Borealis design layer
   ----------------------------------------------------------------------------
   Tokens + shared primitives + the global admin chrome (top toolbar), styled
   after the Borealis desktop app: neutral near-black surfaces, hairline
   borders, brand red for active/primary state, compact uppercase micro-labels,
   tile grids.

   Palette is sampled from the logo file itself: red #C1272D, grey #CCCCCC.

   Load order matters -- this file must come AFTER admin_theme.css so its
   chrome rules win. Primitives (.sas-panel, .sas-tiles, ...) are opt-in
   classes and have no effect until a template uses them.
   ========================================================================= */

:root {
  /* brand */
  --sas-red: #c1272d;
  --sas-red-bright: #d8383e;
  --sas-red-soft: rgba(193, 39, 45, 0.15);
  --sas-red-line: rgba(216, 56, 62, 0.55);
  --sas-grey: #cccccc;

  /* surfaces, darkest to lightest */
  --sas-bg-0: #0a0a0b;
  --sas-bg-1: #101012;
  --sas-bg-2: #16161a;
  --sas-bg-3: #1e1e23;

  /* lines */
  --sas-line: rgba(255, 255, 255, 0.08);
  --sas-line-strong: rgba(255, 255, 255, 0.15);

  /* ink */
  --sas-fg: #f1f1f2;
  --sas-fg-2: rgba(241, 241, 242, 0.74);
  --sas-fg-3: rgba(241, 241, 242, 0.54);

  /* radii */
  --sas-r-sm: 7px;
  --sas-r-md: 10px;
  --sas-r-lg: 14px;

  /* type scale -- explicit px, because html{font-size:110%} inflates rem */
  --sas-t-micro: 10.5px;
  --sas-t-xs: 11.5px;
  --sas-t-sm: 12.5px;
  --sas-t-md: 14px;
  --sas-t-lg: 17px;

  --sas-chrome-h: 48px;

  /* The toolbar is dark in both themes, so its ink and surfaces must NOT flip
     with the theme tokens above -- otherwise light theme paints dark text on
     the dark bar. */
  --sas-chrome-fg: #f1f1f2;
  --sas-chrome-fg-2: rgba(241, 241, 242, 0.74);
  --sas-chrome-fg-3: rgba(241, 241, 242, 0.54);
  --sas-chrome-surface: #16161a;
  --sas-chrome-surface-hover: #1e1e23;
  --sas-chrome-line: rgba(255, 255, 255, 0.09);
  --sas-chrome-line-strong: rgba(255, 255, 255, 0.16);
}

/* ----------------------------------------------------------------------------
   Light theme. Borealis itself is dark-only, but the CRM ships a theme toggle
   and staff do run it in light, so the same design language is expressed with
   light surfaces rather than forcing dark on everyone. Only the tokens flip --
   component rules below reference tokens exclusively.

   The chrome (#header) stays dark in both themes: it keeps the white-wordmark
   logo readable and matches Borealis's dark toolbar.
   ------------------------------------------------------------------------- */
html[data-theme="light"] {
  --sas-bg-0: #eef1f6;
  --sas-bg-1: #ffffff;
  --sas-bg-2: #f4f7fb;
  --sas-bg-3: #e7ecf4;
  --sas-line: rgba(11, 35, 64, 0.13);
  --sas-line-strong: rgba(11, 35, 64, 0.24);
  --sas-fg: #16233a;
  --sas-fg-2: rgba(22, 35, 58, 0.78);
  --sas-fg-3: rgba(22, 35, 58, 0.56);
  --sas-red-soft: rgba(193, 39, 45, 0.09);
  --sas-red-line: rgba(193, 39, 45, 0.45);
}
@media (prefers-color-scheme: light) {
  html[data-theme="auto"] {
    --sas-bg-0: #eef1f6;
    --sas-bg-1: #ffffff;
    --sas-bg-2: #f4f7fb;
    --sas-bg-3: #e7ecf4;
    --sas-line: rgba(11, 35, 64, 0.13);
    --sas-line-strong: rgba(11, 35, 64, 0.24);
    --sas-fg: #16233a;
    --sas-fg-2: rgba(22, 35, 58, 0.78);
    --sas-fg-3: rgba(22, 35, 58, 0.56);
    --sas-red-soft: rgba(193, 39, 45, 0.09);
    --sas-red-line: rgba(193, 39, 45, 0.45);
  }
}

/* Filtering hooks from admin_index.js -- [hidden] must beat display:grid/flex */
.sas-group[hidden],
.sas-mtile[hidden],
.stinson-admin-nav-item[hidden] { display: none !important; }

/* ============================================================================
   1. Global chrome -- the top toolbar
   ========================================================================= */

body.sas-chrome #header {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: var(--sas-chrome-h);
  padding: 0 14px;
  background: linear-gradient(180deg, #131316, #0d0d0f) !important;
  border-bottom: 1px solid var(--sas-chrome-line) !important;
  box-shadow: 0 1px 0 rgba(0, 0, 0, 0.6), 0 8px 24px -18px rgba(0, 0, 0, 0.9);
  color: var(--sas-chrome-fg);
}
/* Staging: a red underline instead of a full red wash, so the bar keeps its
   Borealis look while still being unmistakably not-production. */
body.sas-chrome.sas-env-staging #header {
  border-bottom: 1px solid var(--sas-red) !important;
  box-shadow: inset 0 -3px 0 -1px rgba(193, 39, 45, 0.55);
}

body.sas-chrome #branding {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 0;
  min-width: 0;
  flex: 1 1 auto;
}
body.sas-chrome #branding h1,
body.sas-chrome #site-name {
  margin: 0;
  padding: 0;
  font-size: inherit;
  font-weight: inherit;
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  flex: 1 1 auto;
}

body.sas-chrome #header .sas-brand-link {
  display: inline-flex;
  align-items: center;
  flex: 0 0 auto;
  padding: 4px 2px;
  border-radius: var(--sas-r-sm);
}
body.sas-chrome #header .sas-brand-logo {
  display: block;
  width: auto;
  height: 24px;
}
body.sas-chrome #header .sas-brand-link:focus-visible,
body.sas-chrome #header .sas-nav-item:focus-visible,
body.sas-chrome #user-tools .sas-icon-btn:focus-visible {
  outline: 2px solid var(--sas-red-bright);
  outline-offset: 2px;
}

body.sas-chrome #header .sas-chrome-badge {
  flex: 0 0 auto;
  padding: 3px 7px;
  border-radius: 5px;
  background: var(--sas-red);
  color: #fff;
  font-size: 9.5px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.4;
}

body.sas-chrome #header .sas-chrome-sep {
  flex: 0 0 auto;
  width: 1px;
  height: 22px;
  background: var(--sas-chrome-line-strong);
}

/* --- nav -------------------------------------------------------------- */
body.sas-chrome #header .sas-nav {
  display: flex;
  align-items: center;
  gap: 2px;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
body.sas-chrome #header .sas-nav::-webkit-scrollbar { display: none; }

body.sas-chrome #header .sas-nav-item {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  flex: 0 0 auto;
  height: 32px;
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: var(--sas-r-sm);
  color: var(--sas-chrome-fg-2) !important;
  font-size: var(--sas-t-sm);
  font-weight: 600;
  letter-spacing: 0.005em;
  text-decoration: none !important;
  white-space: nowrap;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
body.sas-chrome #header .sas-nav-item:hover {
  background: var(--sas-chrome-surface-hover);
  border-color: var(--sas-chrome-line);
  color: var(--sas-chrome-fg) !important;
}
body.sas-chrome #header .sas-nav-item[aria-current="page"] {
  background: var(--sas-red-soft);
  border-color: var(--sas-red-line);
  color: #ffdfe0 !important;
}
body.sas-chrome #header .sas-nav-i {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.85;
}
body.sas-chrome #header .sas-nav-item[aria-current="page"] .sas-nav-i { opacity: 1; }

/* --- right-hand user cluster ------------------------------------------ */
body.sas-chrome #user-tools {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding: 0;
  flex: 0 0 auto;
  font-size: var(--sas-t-xs);
  text-transform: none;
  letter-spacing: 0;
}
body.sas-chrome #user-tools .sas-user-name {
  display: inline-flex;
  align-items: center;
  height: 28px;
  padding: 0 9px;
  border: 1px solid var(--sas-chrome-line);
  border-radius: 999px;
  background: var(--sas-chrome-surface);
  color: var(--sas-chrome-fg-2);
  font-size: var(--sas-t-micro);
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  white-space: nowrap;
}
body.sas-chrome #user-tools .sas-icon-btn {
  display: inline-grid;
  border-bottom: 1px solid var(--sas-chrome-line);
  place-items: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 1px solid var(--sas-chrome-line);
  border-radius: var(--sas-r-sm);
  background: var(--sas-chrome-surface);
  color: var(--sas-chrome-fg-2) !important;
  cursor: pointer;
  text-decoration: none !important;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
body.sas-chrome #user-tools .sas-icon-btn:hover {
  background: var(--sas-chrome-surface-hover);
  border-color: var(--sas-chrome-line-strong);
  color: var(--sas-chrome-fg) !important;
}
body.sas-chrome #user-tools .sas-icon-btn.sas-danger:hover {
  background: var(--sas-red-soft);
  border-color: var(--sas-red-line);
  color: #ffdfe0 !important;
}
body.sas-chrome #user-tools .sas-icon-btn svg {
  flex: 0 0 auto;
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}
body.sas-chrome #user-tools form#logout-form {
  display: inline-flex;
  margin: 0;
  padding: 0;
}
/* The theme toggle ships as its own button; normalise it into the cluster. */
body.sas-chrome #user-tools .theme-toggle {
  width: 30px;
  height: 30px;
  border: 1px solid var(--sas-chrome-line);
  border-radius: var(--sas-r-sm);
  background: var(--sas-chrome-surface);
  color: var(--sas-chrome-fg-2);
  margin: 0;
}
body.sas-chrome #user-tools .theme-toggle:hover {
  background: var(--sas-chrome-surface-hover);
  border-color: var(--sas-chrome-line-strong);
}
body.sas-chrome #user-tools .theme-toggle svg { width: 15px; height: 15px; }

/* ============================================================================
   2. Shared primitives (opt-in -- used by the console, reusable elsewhere)
   ========================================================================= */

.sas-panel {
  background: var(--sas-bg-1);
  border: 1px solid var(--sas-line);
  border-radius: var(--sas-r-lg);
}
.sas-panel-pad { padding: 14px; }

.sas-label {
  display: block;
  margin: 0 0 8px;
  font-size: var(--sas-t-micro);
  font-weight: 700;
  letter-spacing: 0.17em;
  text-transform: uppercase;
  color: var(--sas-fg-3);
}

.sas-pills {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--sas-bg-2);
  border: 1px solid var(--sas-line);
  border-radius: 999px;
}
.sas-pill {
  appearance: none;
  border: 1px solid transparent;
  border-radius: 999px;
  background: transparent;
  color: var(--sas-fg-2);
  padding: 5px 13px;
  font-family: inherit;
  font-size: var(--sas-t-xs);
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.sas-pill[aria-selected="true"],
.sas-pill.is-active {
  background: var(--sas-red-soft);
  border-color: var(--sas-red-line);
  color: #ffdfe0;
}

.sas-tiles {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(168px, 1fr));
  gap: 8px;
}
.sas-tile {
  display: block;
  position: relative;
  padding: 10px 11px;
  border: 1px solid var(--sas-line);
  border-radius: var(--sas-r-md);
  background: var(--sas-bg-2);
  color: var(--sas-fg) !important;
  text-decoration: none !important;
  transition: background 120ms ease, border-color 120ms ease, transform 90ms ease;
}
.sas-tile:hover {
  background: var(--sas-bg-3);
  border-color: var(--sas-red-line);
}
.sas-tile:active { transform: translateY(1px); }

.sas-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 22px;
  padding: 0 8px;
  border: 1px solid var(--sas-line);
  border-radius: 999px;
  background: var(--sas-bg-2);
  color: var(--sas-fg-3);
  font-size: var(--sas-t-micro);
  font-weight: 700;
  letter-spacing: 0.06em;
}

@media (prefers-reduced-motion: reduce) {
  #header .sas-nav-item, #user-tools .sas-icon-btn, .sas-tile { transition: none; }
  .sas-tile:active { transform: none; }
}