/* ============================================================
   BURBLE CORE — Design system tokens + universal components
   ============================================================
   The :root tokens, base rules and .bc-* components, without the
   admin shell layout (burble-admin.css), which assumes an inner
   pane scrolls and would break the document-scroll /me portal.

   Loaded, after the core files, by common/burble_core_css.php from
   common/burble-admin/header.php (after burble-admin.css),
   common/customer_redesign/header.php and
   common/public_redesign/login_header.php (after burble-login.css).

   On admin pages it must come after burble-admin.css so .bc-* rules
   win specificity ties against the shell.

   The components are in core/core-*.css, one file per group, each its
   own <link> in common/burble_core_css.php, versioned by
   CSS_FILE_VERSION. That list's order is the cascade: an overriding
   rule goes below the one it overrides, or in a later file.
   ============================================================ */

/* ═══════════════════════════════════════
           DESIGN SYSTEM TOKENS
        ═══════════════════════════════════════ */
/* The 2026 palette. Saturated blue is reserved for the sidebar, the
           active nav row, the primary action and the date chip; everything else
           is a light ground, white surfaces and hairline borders. Teal is the
           secondary accent. Rules elsewhere reference these names, so the
           palette changes in one place. */
:root {
  --sl-50: #f8fafc;
  --sl-100: #f1f5f9;
  --sl-200: #e2e8f0;
  --sl-300: #cbd5e1;
  --sl-400: #94a3b8;
  --sl-500: #64748b;
  --sl-700: #374151;
  --sl-800: #1e293b;
  --sl-900: #0f172a;

  --blue: #2563eb;
  --blue-light: #5aa3e8;
  --blue-strong: #153eb1;
  --blue-bg: #e0eeff;

  /* ── Teal, secondary ── */
  --teal: #12b5c9;
  --teal-light: #5dd1db;
  --teal-strong: #0e93a6;
  --teal-bg: #e2f6f8;
  --teal-glow: rgba(18, 181, 201, 0.18);
  /* Focus rings: a field (input, select, Chosen) lights up softly; a checkbox
     or switch, being small, needs the stronger ring to be seen. */
  --focus-ring: 0 0 0 3px rgba(18, 181, 201, 0.12);
  --focus-ring-strong: 0 0 0 3px rgba(18, 181, 201, 0.25);

  --navy: #0f2a4d;
  --navy-light: #17406f;
  --navy-strong: #0b1f3a;
  --purple: #7c3aed;
  --purple-light: #8b5cf6;
  --purple-strong: #6118d3;
  --purple-bg: #f3e8ff;
  --plum: #8a3b90;
  --plum-light: #a64dac;
  --plum-strong: #6e2a74;
  --rose: #db2777;
  --rose-strong: #be185d;

  --cyan: #3fc9da;
  --white: #ffffff;

  --danger: #dc2626;
  --danger-bg: #fef2f2;
  --danger-strong: #b91c1c;
  --danger-border: #fecaca;
  --warn: #d97706;
  --warn-bg: #f9f0c8;
  --warn-light: #fcd34d;
  --warn-strong: #b45309;
  --warn-border: var(--warn-light);
  --success: #2e7d32;
  --success-bg: #d1f1db;
  --success-light: #5db961;
  --success-strong: #1b5e20;
  --success-border: var(--success-light);
  --info: var(--blue);
  --info-light: var(--blue-light);
  --info-strong: var(--blue-strong);
  --info-bg: var(--blue-bg);
  --info-border: var(--info-light);
  /* Category colours: a .bc-table-th--* header and its .bc-table-col-filter-chip--*
     chip. */
  --tone-blue: var(--blue);
  --tone-green: var(--success);
  --tone-yellow: #6b6e3a;
  --tone-plum: var(--plum);

  /* ── Surfaces ── */
  --page-bg: #f4f7fb;
  --page-bg-end: #d7dfe9; /* bottom of the content-area gradient; between --sl-200 and --sl-300 */
  --bg-light: #fcfcfc;
  --surface: var(--white);
  --surface-sunken: var(--sl-50);
  --border-color-light: var(--sl-100);
  --border-color: var(--sl-200);
  --border-hover: #cfe0f5;

  /* ── Text ── */
  --text: var(--navy);
  --text-strong: var(--sl-700);
  --text-soft: var(--sl-500);
  --text-label: #687789;
  --control-chevron: var(--sl-400);

  /* ── Accent ── */
  --accent: var(--blue);
  --accent-strong: var(--blue-strong);
  --accent-soft: var(--blue-bg);
  --on-accent: var(--white);
  --on-accent-muted: #d8e8fb;
  --card-accent: var(--accent);
  --icon-tile: var(--accent-soft);

  /* The sidebar's tokens live in burble-admin.css: nothing outside the
     admin shell draws a sidebar. */

  /* ── Shadows ── 0 .125rem .25rem 0 rgba(58,59,69,.2)!important */
  --shadow-rest: 0 0.125rem 0.25rem 0 rgba(58, 59, 69, 0.2); /*0 1px 2px rgba(15, 42, 77, 0.05);*/
  --shadow-hover: 0 6px 18px rgba(15, 42, 77, 0.1);
  --shadow-card:
    0 24px 64px rgba(27, 93, 174, 0.18), 0 4px 16px rgba(27, 93, 174, 0.08);

  /* The shell's --sidebar-w and --header-h live in burble-admin.css. */
  --radius: 16px;
  --radius-sm: 10px;
  --radius-xs: 4px;
  --radius-input: 12px;
  --radius-card: 22px;

  /* ── Type ── */
  --font-sans: "Inter", sans-serif;
  /* The platform's own code face first: nothing loads a web mono font. */
  --font-mono:
    ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;

  /* ── Tables ── */
  --table-row-hover: #eef6ff;

  --sep-color: var(--sl-300);
}

/* ── Base ─────────────────────────────────────────────────────
   Element and universal selectors, weaker than the component classes, so
   following the imports changes nothing the components set. */
/* The reset: no element brings a margin or padding of its own, so spacing
   is whatever the component sets. */
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

/* The page font. Browsers do not pass it down to form controls, so they
   are told to inherit it. */
body {
  font-family: var(--font-sans);
}
button,
input,
optgroup,
select,
textarea {
  font-family: inherit;
}

/* One placeholder colour for every field. .form-control is named so this
   outranks Bootstrap's own .form-control::placeholder (#858796); opacity:1
   stops Firefox fading it further. The dark sidebar search keeps its own. */
::placeholder,
.form-control::placeholder {
  color: var(--sl-400);
  opacity: 1;
}

/* Text links are teal, darker and underlined on hover. Same specificity as
   Bootstrap's a / a:hover, so anything that styles its own anchors still
   wins. */
a {
  color: var(--teal);
  text-decoration: none;
}
a:hover {
  color: var(--teal-strong);
  text-decoration: underline;
}
/* An icon in a text link is never underlined: a link with a direct-child
   icon becomes an inline flex row, and on hover only its <span> text is
   underlined, so wrap the text:
     <a href="…"><span>Read more</span> <i class="fas fa-arrow-right"></i></a> */
a:has(> i) {
  display: inline-flex;
  align-items: center;
  gap: 0.35em;
}
a:has(> i):hover,
a.bc-link:has(> i):hover {
  text-decoration: none;
}
a:not(.bc-btn):has(> i):hover > span {
  text-decoration: underline;
}

/* One focus ring for anything focusable that has none of its own: teal, 1px,
   like .bc-btn's, for the keyboard; nothing after a click, where the
   browser's black-and-white default used to box the back button, nav links
   and the like. :where() keeps it at zero weight, so any component's own
   focus style wins. Fields are left out: they light up with --focus-ring. */
:where(a, button, summary, [tabindex]):focus-visible {
  outline: 1px solid var(--teal);
  outline-offset: 2px;
}
:where(a, button, summary, [tabindex]):focus:not(:focus-visible) {
  outline: none;
}

/* ── Spinner ──────────────────────────────────────────────────
   Something is working: a save in progress, a list loading.

   Usage: <span class="bc-spinner" aria-hidden="true"></span>

   Teal on the border grey; inside a .bc-btn it takes the button's text
   colour. extensions/ba-busy-button.js adds one to any .bc-btn whose label
   is changed to "Saving…", "Processing..." and the like. */
@keyframes ba-spin {
  to {
    transform: rotate(360deg);
  }
}
.bc-spinner {
  display: inline-block;
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  border: 2px solid var(--border-color);
  border-top-color: var(--teal);
  border-radius: 50%;
  animation: ba-spin 0.7s linear infinite;
}
.bc-btn .bc-spinner {
  border-color: currentColor;
  border-right-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .bc-spinner {
    animation-duration: 2s;
  }
}