/* ==========================================================================
   Sydekyck — Design System theme (ported from "Sydekyck UI Guide.html")
   --se-* brand tokens mapped onto Bootstrap 5.3 --bs-* variables, plus a
   [data-bs-theme="dark"] block. Loaded after Bootstrap in the app base
   templates; the app's own stylesheets bridge their legacy tokens onto these.

   NOTE: the warm accent is locked to Amber (#F4A02B) per the brand spec; the
   guide ships coral (#FF8264) by default and swaps to Amber via a tweaks
   script we don't ship, so the swap is baked in here.
   The guide-only showcase classes (.guide-*, .tp*, .resp-*, .bp-*, .swatch,
   .scale-strip, .type-row, .logo-card, .sydekyck-logo, .app-mock, .toast-demo,
   .theme-toggle, .kbd, .pill-tab, .quote, .empty-state) have been REMOVED — they
   had no app markup and their stray border/bg/padding/grid/flex leaked onto the
   like-named kit classes loaded on the same page. See the per-section REMOVED
   notes below. What remains is the token layer + the Bootstrap (--bs-*) skin the
   un-migrated overlays still depend on.
   ========================================================================== */

  /* ---------- Brand Tokens ---------- */
  :root {
    /* Robin egg blue scale */
    --se-blue-50:  #EAF8FA;
    --se-blue-100: #CDEEF2;
    --se-blue-200: #A5E1E8;
    --se-blue-300: #7BD2DC;
    --se-blue-400: #4FC3D1;   /* PRIMARY */
    --se-blue-500: #2FB0BF;
    --se-blue-600: #1F8E9C;
    --se-blue-700: #176C77;
    --se-blue-800: #114E56;
    --se-blue-900: #0B343A;

    /* Accents */
    --se-coral:    #F4A02B;   /* brand-locked warm accent: Amber (was #FF8264 coral) */
    --se-coral-soft:#FBE6C5;
    --se-coral-700: #8B5510;  /* deep amber — text on soft amber */
    --se-marigold-700: #8E6713;
    --se-sage-700: #2E6B4A;
    --se-plum-700: #5E3F7C;
    --se-marigold: #F5B945;
    --se-marigold-soft:#FBEACB;
    --se-sage:     #6FB58A;
    --se-sage-soft: #DAEDDF;
    --se-plum:     #8E6BB0;
    --se-plum-soft:#E6DCEF;
    --se-ink-blue: #2F4DB2;

    /* Neutrals — warm slate */
    --se-ink-900:  #0F1A22;
    --se-ink-800:  #1B2731;
    --se-ink-700:  #2E3A45;
    --se-ink-600:  #485663;
    --se-ink-500:  #6B7884;
    --se-ink-400:  #95A2AE;
    --se-ink-300:  #C2CCD4;
    --se-ink-200:  #E2E7EC;
    --se-ink-100:  #F0F3F5;
    --se-ink-50:   #F7F9FA;
    --se-paper:    #FBFAF6; /* warm off-white */
    --se-surface:  #FFFFFF; /* app card/surface bg — flips dark via the block below */

    --se-success: #2BAE6A;
    --se-warning: #E89B1F;
    --se-danger:  #E55353;
    --se-info:    var(--se-blue-500);

    /* Type */
    --se-font-display: "Outfit", system-ui, sans-serif;
    --se-font-sub:     "DM Sans", system-ui, sans-serif;
    --se-font-body:    "DM Sans", system-ui, sans-serif;
    --se-font-mono:    "Fira Code", ui-monospace, monospace;

    /* Geometry */
    --se-radius-sm: 6px;
    --se-radius:    10px;
    --se-radius-lg: 16px;
    --se-radius-xl: 22px;

    /* Elevation (light) */
    --se-shadow-1: 0 1px 2px rgba(15,26,34,.06), 0 1px 1px rgba(15,26,34,.04);
    --se-shadow-2: 0 4px 12px rgba(15,26,34,.06), 0 2px 4px rgba(15,26,34,.04);
    --se-shadow-3: 0 18px 40px -12px rgba(15,26,34,.18), 0 6px 12px rgba(15,26,34,.06);

    /* Bootstrap variable overrides — light */
    --bs-primary: var(--se-blue-400);
    --bs-primary-rgb: 79, 195, 209;
    --bs-body-font-family: var(--se-font-body);
    --bs-body-color: var(--se-ink-800);
    --bs-body-bg: var(--se-paper);
    --bs-border-color: var(--se-ink-200);
    --bs-border-radius: var(--se-radius);
    --bs-border-radius-sm: var(--se-radius-sm);
    --bs-border-radius-lg: var(--se-radius-lg);
    --bs-link-color: var(--se-blue-600);
    --bs-link-hover-color: var(--se-blue-700);

    /* Aliases — colors_and_type.css token names (lets design snippets work as-is) */
    --font-display: var(--se-font-display);
    --font-sub: var(--se-font-sub);
    --font-body: var(--se-font-body);
    --font-mono: var(--se-font-mono);
    --bg-base: var(--se-paper);
    --bg-surface: var(--se-surface);
    --bg-deep: #0F1A22;
    --border: var(--se-ink-200);
    --halo: rgba(79,195,209,0.16);
    --link: var(--se-blue-600);
    --primary-on: #03323A;
    --r-sm: var(--se-radius-sm);
    --r: var(--se-radius);
    --r-lg: var(--se-radius-lg);
    --r-xl: var(--se-radius-xl);
    --shadow-1: var(--se-shadow-1);
    --shadow-2: var(--se-shadow-2);
    --shadow-3: var(--se-shadow-3);
  }

  [data-bs-theme="dark"] {
    --se-paper: #0E141A;
    --se-ink-50: #131A21;
    --se-ink-100:#19222B;
    --se-ink-200:#243140;
    --se-ink-300:#33455A;
    --se-ink-400:#5B6E83;
    --se-ink-500:#8395A8;
    --se-ink-600:#A9B7C6;
    --se-ink-700:#C8D2DC;
    --se-ink-800:#E4EAF0;
    --se-ink-900:#F2F5F8;
    --se-surface: var(--se-ink-100); /* dark surface for app cards/panels */

    --se-blue-50:  #0F2A30;   /* subtle blue surface INVERTS to dark teal (tiles, badges, soft boxes) */
    --se-coral-soft:#3A2E14;  /* amber-dark soft */
    --se-marigold-soft:#3A2E14;
    --se-sage-soft: #1E2F25;
    --se-plum-soft: #2A2235;

    --se-shadow-1: 0 1px 2px rgba(0,0,0,.4);
    --se-shadow-2: 0 4px 12px rgba(0,0,0,.4);
    --se-shadow-3: 0 18px 40px -12px rgba(0,0,0,.6);

    --bs-primary: var(--se-blue-300);
    --bs-primary-rgb: 123, 210, 220;
    --bs-body-color: var(--se-ink-700);
    --bs-body-bg: var(--se-paper);
    --bs-border-color: var(--se-ink-200);
    --bs-link-color: var(--se-blue-300);
    --bs-link-hover-color: var(--se-blue-200);
    --bg-deep: #06090D;
    --halo: rgba(123,210,220,0.16);
    --link: var(--se-blue-300);
    color-scheme: dark;
  }

  /* ---------- Page chrome ---------- */
  html, body { background: var(--se-paper); }
  body {
    font-family: var(--se-font-body);
    color: var(--bs-body-color);
    font-feature-settings: "ss01","cv11";
  }
  h1,h2,.display-1,.display-2,.display-3,.display-4 {
    font-family: var(--se-font-display);
    letter-spacing: -0.02em;
    color: var(--se-ink-900);
    font-weight: 600;
  }
  h3,h4,h5,h6 {
    font-family: var(--se-font-sub);
    letter-spacing: -0.015em;
    color: var(--se-ink-900);
    font-weight: 600;
  }
  [data-bs-theme="dark"] h1,
  [data-bs-theme="dark"] h2,
  [data-bs-theme="dark"] h3,
  [data-bs-theme="dark"] h4,
  [data-bs-theme="dark"] h5,
  [data-bs-theme="dark"] h6 { color: var(--se-ink-900); }

  .eyebrow {
    font-family: var(--se-font-mono);
    font-size: 11px;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--se-coral);
    font-weight: 600;
  }
  [data-bs-theme="dark"] .eyebrow { color: var(--se-coral); }

  /* ---------- UI-guide showcase chrome (REMOVED) ----------
     `.guide-shell` `.guide-nav` `.guide-main` `section.guide-section` and the
     demo `.theme-toggle` pill were the design-guide page's own layout. They have
     NO app markup (verified: 0 templates/JS use them; the 5 "theme-toggle" hits
     are the `theme-toggle.js` filename, not the class). The grid/flex/border/bg
     they carried could only leak; removed wholesale. */

  /* ---------- Brand: logo card (REMOVED) ----------
     `.logo-card` `.sydekyck-logo` and their `.tag` child were guide brand demos
     (no app markup). `.tag` is a kit class — scoping it under `.logo-card` here
     meant it died with the block, but it is gone now regardless. */

  /* ---------- Color swatches (REMOVED) ----------
     `.swatch` `.scale-strip` (+ `.meta`/`.chip`/`.step` children) were the guide
     palette specimen (no app markup). `.meta` is a kit class; the theme's only
     used it as `.swatch .meta`, so removing the block clears that scoped leak. */

  /* ---------- Type specimen (REMOVED) ----------
     `.type-row` (+ its `.meta` child) was the guide type-scale table (no app
     markup). Removed; clears the second `.meta` (kit class) scoped leak. */

  /* ---------- Component preview frame (REMOVED) ----------
     This inert UI-guide demo `.preview` frame (border/padding/bg) collided
     with the kit's `.preview` LINK (Forms template cards), painting a bordered
     box around the teal "Preview" link. Removed so the kit link renders right.
     `.preview-grid` (grid + align-items:center) was its sibling demo wrapper —
     also inert, also removed. */

  /* ---------- Buttons ---------- */
  .btn {
    --bs-btn-padding-y: 0.55rem;
    --bs-btn-padding-x: 1.1rem;
    --bs-btn-font-family: var(--se-font-body);
    --bs-btn-font-weight: 600;
    --bs-btn-border-radius: var(--se-radius);
    letter-spacing: -0.005em;
    transition: all .15s ease;
  }
  .btn-primary {
    --bs-btn-bg: var(--se-blue-400);
    --bs-btn-border-color: var(--se-blue-400);
    --bs-btn-hover-bg: var(--se-blue-500);
    --bs-btn-hover-border-color: var(--se-blue-500);
    --bs-btn-active-bg: var(--se-blue-600);
    --bs-btn-active-border-color: var(--se-blue-600);
    --bs-btn-color: #03323A;
    --bs-btn-hover-color: #03323A;
  }
  .btn-secondary {
    --bs-btn-bg: var(--se-ink-900);
    --bs-btn-border-color: var(--se-ink-900);
    --bs-btn-hover-bg: var(--se-ink-800);
    --bs-btn-hover-border-color: var(--se-ink-800);
    --bs-btn-color: white;
  }
  [data-bs-theme="dark"] .btn-secondary {
    --bs-btn-bg: var(--se-ink-800);
    --bs-btn-border-color: var(--se-ink-300);
    --bs-btn-color: var(--se-ink-900);
    --bs-btn-hover-bg: var(--se-ink-700);
  }
  /* .btn-outline-primary — REMOVED the teal re-theme so the kit's blue
     `.btn-outline-primary` (e.g. Clients "View profile") renders as designed. */
  .btn-ghost {
    --bs-btn-color: var(--se-ink-700);
    --bs-btn-bg: transparent;
    --bs-btn-border-color: transparent;
    --bs-btn-hover-bg: var(--se-ink-100);
    --bs-btn-hover-color: var(--se-ink-900);
  }
  .btn-coral { --bs-btn-bg: var(--se-coral); --bs-btn-border-color: var(--se-coral); --bs-btn-color: #3A1E14; --bs-btn-hover-bg: var(--se-coral-700); --bs-btn-hover-color: #3A1E14; --bs-btn-hover-border-color: var(--se-coral-700);}
  .btn-marigold { --bs-btn-bg: var(--se-marigold); --bs-btn-border-color: var(--se-marigold); --bs-btn-color: #3A2A0A; --bs-btn-hover-bg: #E0A92F; --bs-btn-hover-color:#3A2A0A;--bs-btn-hover-border-color: #E0A92F;}
  .btn-sage { --bs-btn-bg: var(--se-sage); --bs-btn-border-color: var(--se-sage); --bs-btn-color: #133024; --bs-btn-hover-bg: #5BA379; --bs-btn-hover-color: #133024; --bs-btn-hover-border-color:#5BA379;}
  .btn-plum { --bs-btn-bg: var(--se-plum); --bs-btn-border-color: var(--se-plum); --bs-btn-color: white; --bs-btn-hover-bg: #7A5B9A; --bs-btn-hover-color:white;--bs-btn-hover-border-color:#7A5B9A;}

  /* ---------- Forms ---------- */
  .form-control, .form-select {
    --bs-border-radius: var(--se-radius);
    border-color: var(--bs-border-color);
    background: var(--se-paper);
    color: var(--se-ink-800);
    padding: 0.6rem 0.85rem;
    font-family: var(--se-font-body);
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .form-control:focus, .form-select:focus {
    border-color: var(--se-blue-400);
    box-shadow: 0 0 0 4px rgba(79,195,209,0.18);
  }
  [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select {
    background: var(--se-ink-100);
    color: var(--se-ink-800);
  }
  .form-label {
    font-weight: 600;
    font-size: 13px;
    margin-bottom: 6px;
    color: var(--se-ink-800);
  }
  .form-text { font-size: 12px; color: var(--se-ink-500); }

  .form-check-input {
    border-color: var(--se-ink-300);
    width: 1.1em; height: 1.1em;
  }
  .form-check-input:checked {
    background-color: var(--se-blue-400);
    border-color: var(--se-blue-400);
  }
  .form-switch .form-check-input {
    width: 2.4em; height: 1.3em;
  }
  .form-switch .form-check-input:focus {
    box-shadow: 0 0 0 4px rgba(79,195,209,0.22);
  }
  .form-range::-webkit-slider-thumb { background: var(--se-blue-400); }
  .form-range::-moz-range-thumb { background: var(--se-blue-400); }

  /* ---------- Badges/Pills/Status ---------- */
  .badge { --bs-badge-font-weight: 600; --bs-badge-padding-x: .7em; --bs-badge-padding-y: .4em; border-radius: 999px; font-family: var(--se-font-body); letter-spacing: -0.005em;}
  .badge-soft-blue { background: var(--se-blue-50); color: var(--se-blue-700); }
  .badge-soft-coral { background: var(--se-coral-soft); color: #B14323; }
  .badge-soft-marigold { background: var(--se-marigold-soft); color: #8E6713; }
  .badge-soft-sage { background: var(--se-sage-soft); color: #2E6B4A; }
  .badge-soft-plum { background: var(--se-plum-soft); color: #5E3F7C; }
  .badge-soft-ink { background: var(--se-ink-100); color: var(--se-ink-700); }
  [data-bs-theme="dark"] .badge-soft-blue { background: rgba(79,195,209,0.18); color: var(--se-blue-200); }
  [data-bs-theme="dark"] .badge-soft-coral { background: var(--se-coral-soft); color: var(--se-coral); }
  [data-bs-theme="dark"] .badge-soft-marigold { background: rgba(245,185,69,0.18); color: #F5CB76; }
  [data-bs-theme="dark"] .badge-soft-sage { background: rgba(111,181,138,0.18); color: #9CD2B0; }
  [data-bs-theme="dark"] .badge-soft-plum { background: rgba(142,107,176,0.22); color: #C9AEDD; }
  [data-bs-theme="dark"] .badge-soft-ink { background: var(--se-ink-200); color: var(--se-ink-700); }

  .status-dot {
    width: 8px; height: 8px; border-radius: 999px;
    display: inline-block; margin-right: 6px; vertical-align: middle;
    box-shadow: 0 0 0 3px currentColor;
    opacity: 0.9;
  }
  .status-dot.live { background: var(--se-success); color: rgba(43,174,106,0.18); }
  .status-dot.pending { background: var(--se-marigold); color: rgba(232,155,31,0.18); }
  .status-dot.paused { background: var(--se-ink-500); color: rgba(107,120,132,0.18); }
  .status-dot.churned { background: var(--se-danger); color: rgba(229,83,83,0.18); }

  /* ---------- Cards ---------- */
  .card {
    --bs-card-bg: var(--se-paper);
    --bs-card-border-color: var(--bs-border-color);
    --bs-card-border-radius: var(--se-radius-lg);
    --bs-card-inner-border-radius: calc(var(--se-radius-lg) - 1px);
    box-shadow: var(--se-shadow-1);
  }
  [data-bs-theme="dark"] .card { --bs-card-bg: var(--se-ink-100); }
  .card-stat .label { font-family: var(--se-font-mono); font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--se-ink-500); }
  .card-stat .value { font-family: var(--se-font-display); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; line-height: 1; }
  .card-stat .trend { font-size: 13px; font-weight: 600; }
  .card-stat .trend.up { color: var(--se-success); }
  .card-stat .trend.down { color: var(--se-danger); }

  /* Client card — REMOVED. The legacy `.client-card` (grid + align-items:center)
     and its `.avatar` rules collided with the kit's `.client-card` (flex column),
     centering the card content and overriding the kit avatar. The kit owns it now. */

  /* ---------- Tables ---------- */
  .table {
    --bs-table-bg: transparent;
    --bs-table-color: var(--se-ink-800);
    --bs-table-border-color: var(--bs-border-color);
    --bs-table-hover-bg: var(--se-ink-50);
    font-size: 14px;
  }
  .table thead th {
    font-family: var(--se-font-mono);
    font-size: 11px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--se-ink-500);
    font-weight: 500;
    border-bottom: 1px solid var(--bs-border-color);
    padding: 12px 14px;
  }
  .table tbody td { padding: 14px; vertical-align: middle; }
  .table tbody tr { border-bottom: 1px solid var(--bs-border-color); }

  /* ---------- Alerts / Toasts ---------- */
  .alert {
    --bs-alert-border-radius: var(--se-radius);
    border: 1px solid transparent;
    padding: 14px 16px;
    font-weight: 500;
    display: flex; gap: 12px; align-items: flex-start;
  }
  .alert i:first-child { font-size: 18px; margin-top: 2px; }
  .alert-info-soft   { background: var(--se-blue-50); color: var(--se-blue-700); border-color: rgba(31,142,156,0.15); }
  .alert-success-soft{ background: var(--se-sage-soft); color: #2E6B4A; border-color: rgba(46,107,74,0.15); }
  .alert-warn-soft   { background: var(--se-marigold-soft); color: #8E6713; border-color: rgba(232,155,31,0.2); }
  .alert-danger-soft { background: #FBE3E3; color: #A03333; border-color: rgba(229,83,83,0.18); }
  [data-bs-theme="dark"] .alert-info-soft   { background: rgba(79,195,209,0.12); color: var(--se-blue-200); border-color: rgba(79,195,209,0.25); }
  [data-bs-theme="dark"] .alert-success-soft{ background: rgba(111,181,138,0.14); color: #B6DEC3; border-color: rgba(111,181,138,0.25); }
  [data-bs-theme="dark"] .alert-warn-soft   { background: rgba(245,185,69,0.14); color: #F5CB76; border-color: rgba(245,185,69,0.3); }
  [data-bs-theme="dark"] .alert-danger-soft { background: rgba(229,83,83,0.14); color: #F1A6A6; border-color: rgba(229,83,83,0.3); }

  /* ---------- Toast demo (REMOVED) ----------
     `.toast-demo` (+ `.icon`/`.body`/`.title`/`.desc`) was the guide's static
     toast specimen (no app markup; the app builds real toasts elsewhere).
     Removed — its flex/padding/bg/box-shadow could only leak. */

  /* ---------- Sidebar product mock (REMOVED) ----------
     `.app-mock` and ALL its descendants (`.sb` `.nav-grp` `.topbar` `.search`
     `.avatar-sm` `.logo` `.badge-count`) were the guide's fake-app screenshot.
     No app markup uses `.app-mock`. NOTE: this scoped the demo `.sb` so it could
     never reach the real `.sb` sidebar — but the kit's top-level `.avatar-sm`/
     `.sb` own those now; the demo block is gone. */

  /* ---------- Guide misc (REMOVED) ----------
     `.kbd` `.pill-tab` (+ button) `.empty-state` `.quote` were guide specimens.
     `.kbd`/`.pill-tab`/`.quote`: no app markup. `.empty-state`: 15 app files use
     it, BUT each migrated screen ships its OWN `.empty-state` in a per-screen
     redesign CSS (sessions/recordings/messaging/etc. — 13 files); the kit does
     not define it. The guide's dashed-border/padding/text-align version here was
     a global that leaked into (and competed with) those per-screen ones, so it
     is removed and the screen-local rules own it. */

  /* ---------- Responsive demo blocks (REMOVED) ----------
     All `.bp-*` (breakpoint scale specimen) and all `.resp-*` (responsive
     preview frames: `.resp-frame` `.resp-stat` `.resp-grid-*` `.resp-table`
     `.resp-phone*` `.resp-app*` + their `.tab`/`.line`/`.mono`/`.name`/`.top`
     children, plus the mock `.sb-logo`/`.sb-item`) were the guide's
     responsive-behaviour showcase. No app markup uses any of them (verified).
     They carried grid/flex/border/bg/padding and — critically — a top-level
     `.sb-item` and `.tab` (both KIT classes) that would have leaked
     display:flex/align-items/padding/border-radius onto the kit's real
     sidebar items and tabs. Removed wholesale. */
  /* ---------- Tweaks panel (REMOVED) ----------
     `.tp` and every `.tp-*` (header/title/dot/close/body/row/select/swatches/
     sw/preview/footer/reset) were the design-guide's live theme-tweaker
     widget — the file header lists them as guide-only, and the tweak script
     that drives them is not shipped. No app markup uses any `.tp*`. None
     collide with a kit class by name, but they are inert showcase chrome, so
     removed. The `@media (max-width:1000px)` block that followed held ONLY
     `.guide-shell`/`.guide-nav`/`.guide-main` overrides (all now removed), so
     it was dead and is gone too. */

/* Bootstrap sets `.modal-dialog { pointer-events: none }` (it pairs with `.modal-content`).
   The app's custom `.modal-overlay` modals reuse `.modal-dialog` without `.modal-content`,
   so re-enable pointer events globally to keep their fields clickable. */
.modal-overlay .modal-dialog { pointer-events: auto; }