:root {
    --bs-shadow: rgba(0, 0, 0, 0.1);
    
    /* Additional font sizes that complement Bootstrap's system */
    --font-size-xs: 0.75rem;      /* 12px - micro text, badges */
    --font-size-2xs: 0.6875rem;   /* 11px - very small text */
    
    /* Font weights for hierarchy (inherit Bootstrap's pattern) */
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    /* Bootstrap 5.3 z-index scale */
    --zindex-dropdown: 1000;
    --zindex-sticky: 1020;
    --zindex-fixed: 1030;
    --zindex-offcanvas-backdrop: 1040;
    --zindex-offcanvas: 1045;
    --zindex-modal-backdrop: 1050;
    --zindex-modal: 1055;
    --zindex-popover: 1070;
    --zindex-tooltip: 1080;
    --zindex-toast: 1090;
}

/* =========================================================================
   Token foundation (light + dark), copied from doohcrm's app.css so the two
   products share one look. --app-* tokens are mapped onto Bootstrap's --bs-*
   variables, so stock Bootstrap components inherit the theme for free. Every
   component stylesheet uses these tokens only: no hex, no rgba() (§1.10).
   ========================================================================= */
:root {
    /* Surfaces */
    --app-bg: oklch(0.98 0.004 255);
    --app-surface: oklch(1 0 0);
    --app-surface-2: oklch(0.973 0.004 255);
    --app-surface-3: oklch(0.955 0.005 255);
    /* Borders */
    --app-border: oklch(0.915 0.006 255);
    --app-border-strong: oklch(0.86 0.008 255);
    /* Form fields (mockup --input-bg/--input-border): surface-2 fill with a
       strong border so fields read as wells on white cards. */
    --app-input-bg: var(--app-surface-2);
    --app-input-border: var(--app-border-strong);
    /* Text */
    --app-text: oklch(0.24 0.02 265);
    --app-text-muted: oklch(0.52 0.02 265);
    --app-text-subtle: oklch(0.66 0.015 265);
    /* Accent (aligned with --bs-primary #2563eb) */
    --app-accent: oklch(0.55 0.2 264);
    --app-accent-strong: oklch(0.48 0.21 264);
    --app-accent-soft: oklch(0.955 0.03 264);
    --app-accent-fg: #fff;
    /* Semantic */
    --app-positive: oklch(0.58 0.14 155);
    --app-positive-soft: oklch(0.955 0.045 155);
    --app-negative: oklch(0.58 0.2 25);
    --app-negative-soft: oklch(0.96 0.04 25);
    --app-warning: oklch(0.7 0.14 68);
    --app-warning-soft: oklch(0.96 0.05 75);
    /* Radii */
    --app-radius-control: 10px;
    --app-radius-card: 16px;
    /* Shadows */
    --app-shadow: 0 1px 2px rgba(16, 24, 40, .05), 0 1px 3px rgba(16, 24, 40, .05);
    --app-shadow-lg: 0 18px 44px -14px rgba(16, 24, 40, .22);
    /* The veil behind a dialog of ours (the library's confirm and preview) */
    --app-modal-backdrop: oklch(0.24 0.02 265 / 0.45);
    /* Spacing rhythm */
    --app-pad: 20px;
    --app-gap: 20px;

    /* ---- Map onto Bootstrap so the whole app inherits the look ---- */
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-emphasis-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-secondary-bg: var(--app-surface-2);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-border);
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    --bs-card-cap-bg: var(--app-surface);
    --bs-box-shadow: var(--app-shadow-lg);
    --bs-box-shadow-sm: var(--app-shadow);
    /* Softer, larger radii to match the mockup */
    --bs-border-radius: 0.625rem;      /* 10px — controls */
    --bs-border-radius-sm: 0.5rem;     /* 8px */
    --bs-border-radius-lg: 0.875rem;   /* 14px */
    --bs-border-radius-xl: 1rem;       /* 16px */
    --bs-card-border-radius: var(--app-radius-card);
}

[data-bs-theme="dark"] {
    /* Dark palette v2 (mockup update 2026-07-21): higher contrast throughout —
       darker page, lighter cards, brighter borders/text, and much stronger
       soft-chip tints so status pills stay readable on dark surfaces. */
    --app-bg: oklch(0.145 0.014 265);
    --app-surface: oklch(0.215 0.017 265);
    --app-surface-2: oklch(0.26 0.019 265);
    --app-surface-3: oklch(0.31 0.022 265);
    --app-border: oklch(0.33 0.02 265);
    --app-border-strong: oklch(0.44 0.024 265);
    /* Inputs get their own darker-than-card fill + strong border (mockup
       --input-bg/--input-border): fields that reuse surface colors disappear
       on dark cards. */
    --app-input-bg: oklch(0.16 0.012 265);
    --app-input-border: oklch(0.44 0.024 265);
    --app-text: oklch(0.97 0.005 265);
    --app-text-muted: oklch(0.74 0.017 265);
    --app-text-subtle: oklch(0.6 0.017 265);
    --app-accent: oklch(0.68 0.18 264);
    --app-accent-strong: oklch(0.74 0.17 264);
    --app-accent-soft: oklch(0.42 0.13 264);
    --app-positive: oklch(0.78 0.17 155);
    --app-positive-soft: oklch(0.42 0.11 155);
    --app-negative: oklch(0.72 0.2 25);
    --app-negative-soft: oklch(0.42 0.13 25);
    --app-warning: oklch(0.82 0.15 78);
    --app-warning-soft: oklch(0.46 0.11 75);
    --app-shadow: 0 1px 2px rgba(0, 0, 0, .5);
    --app-shadow-lg: 0 20px 48px -14px rgba(0, 0, 0, .7);
    --app-modal-backdrop: oklch(0.1 0.01 265 / 0.7);

    /* Re-map onto Bootstrap dark (this block wins — app.css loads after Bootstrap) */
    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-emphasis-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-secondary-bg: var(--app-surface-2);
    --bs-tertiary-bg: var(--app-surface-2);
    --bs-border-color: var(--app-border);
    --bs-card-bg: var(--app-surface);
    --bs-card-border-color: var(--app-border);
    --bs-card-cap-bg: var(--app-surface);
}

html {
    /* Match body's overflow-x: hidden — without this, Chromium / Safari still
       show a page-level horizontal scrollbar when an inner element overflows
       its parent, because the scrollbar can promote to the root scrolling
       element instead of being clipped by body. */
    overflow-x: hidden;
}

body {
    margin: 0;
    padding: 0;
    /* clip, NOT hidden: with html's overflow non-visible, body's overflow no
       longer propagates to the viewport, so `hidden` turns body itself into a
       scroll container that never scrolls — and every position:sticky element
       inside (topbar, grid paging footer, action bars) silently stops
       sticking. clip contains horizontal overflow without that side effect. */
    overflow-x: clip;
    color: var(--bs-body-color);
    background-color: var(--bs-body-bg);
    transition: background-color 0.3s ease, color 0.3s ease;
}

/* Body text: Inter, self-hosted under lib/inter (the page is cross-origin isolated, so a
   third-party font would be blocked; and it would send every visitor's IP away). */
body {
    font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}