@import url("https://api.fontshare.com/v2/css?f[]=cabinet-grotesk@400,500,700,800&f[]=satoshi@400,500,700&display=swap");
@import url("https://fonts.googleapis.com/css2?family=IBM+Plex+Sans:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap");

@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
    :root {
        /* ============================================================
           RBS Regal — "Premium Navy" Theme (Light)
           Approved reference design: navy blue + white + gold accent.
             • Primary  : Royal Navy     #1E40AF — confidence, premium ERP
             • Accent   : Royal Gold     #D4A017 — crown / premium highlight
             • Chart-3  : Sky Blue       #2196F3 — info / charts
             • Background: Crisp White   #FFFFFF — clean enterprise canvas
           ============================================================ */
        --background: 0 0% 100%;           /* pure white       */
        --foreground: 222 47% 11%;         /* navy ink         */
        --card: 0 0% 100%;
        --card-foreground: 222 47% 11%;
        --popover: 0 0% 100%;
        --popover-foreground: 222 47% 11%;
        --primary: 222 76% 41%;            /* Royal Navy #1E40AF */
        --primary-foreground: 0 0% 100%;
        --secondary: 214 32% 96%;          /* pale blue-grey */
        --secondary-foreground: 222 47% 11%;
        --muted: 214 32% 96%;
        --muted-foreground: 215 16% 42%;
        --accent: 42 84% 46%;              /* Royal Gold #D4A017 */
        --accent-foreground: 222 47% 11%;
        --destructive: 0 72% 51%;
        --destructive-foreground: 0 0% 100%;
        --border: 214 22% 88%;             /* soft cool border */
        --input: 214 22% 88%;
        --ring: 222 76% 41%;
        --chart-1: 222 76% 41%;            /* navy */
        --chart-2: 42 84% 46%;             /* gold */
        --chart-3: 207 90% 54%;            /* sky blue */
        --chart-4: 142 71% 45%;            /* growth green */
        --chart-5: 0 72% 51%;              /* signal red */
        --radius: 0.5rem;
        --sidebar-bg: 222 56% 14%;         /* deep navy sidebar (#0F1E3F) */
        --sidebar-fg: 210 40% 96%;
        --sidebar-active: 42 84% 50%;      /* gold active highlight */
    }
    .dark {
        /* "Premium Navy" — Midnight variant */
        --background: 222 47% 7%;          /* midnight navy */
        --foreground: 210 40% 96%;
        --card: 222 47% 11%;
        --card-foreground: 210 40% 96%;
        --popover: 222 47% 11%;
        --popover-foreground: 210 40% 96%;
        --primary: 222 76% 60%;            /* brightened navy */
        --primary-foreground: 222 47% 7%;
        --secondary: 222 32% 16%;
        --secondary-foreground: 210 40% 96%;
        --muted: 222 32% 16%;
        --muted-foreground: 215 14% 65%;
        --accent: 42 84% 56%;              /* gold, brightened */
        --accent-foreground: 222 47% 7%;
        --destructive: 0 72% 55%;
        --destructive-foreground: 0 0% 100%;
        --border: 222 28% 22%;
        --input: 222 28% 22%;
        --ring: 222 76% 60%;
        --chart-1: 222 76% 60%;
        --chart-2: 42 84% 56%;
        --chart-3: 207 90% 64%;
        --chart-4: 142 71% 55%;
        --chart-5: 0 72% 60%;
        --sidebar-bg: 222 64% 6%;
        --sidebar-fg: 210 40% 96%;
        --sidebar-active: 42 84% 50%;
    }
}

@layer base {
    * { @apply border-border; }
    /* ============================================================
       Horizontal overflow safety net (P0 fix).
       The floating WhatsApp & AI FABs use `animate-ping` rings with
       `scale(2)` that briefly stretch ~8px past the right viewport
       edge. Without clamping, this causes a constant left/right
       "shaking" because the body width oscillates between 1920 and
       ~1923px every animation frame. Clamping at `html,body` is the
       canonical safe fix (vertical scroll is preserved).
       ============================================================ */
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
    body {
        @apply bg-background text-foreground;
        font-family: "IBM Plex Sans", ui-sans-serif, system-ui, sans-serif;
        font-feature-settings: "ss01", "cv01";
    }
    h1, h2, h3, h4, h5, h6, .font-display {
        font-family: "Cabinet Grotesk", "IBM Plex Sans", sans-serif;
        letter-spacing: -0.01em;
    }
    .font-mono, code, kbd, pre {
        font-family: "JetBrains Mono", ui-monospace, monospace;
    }
}

@layer components {
    .label-cap {
        @apply text-[10px] font-semibold tracking-[0.12em] uppercase text-muted-foreground;
    }
    .num {
        font-family: "JetBrains Mono", ui-monospace, monospace;
        font-variant-numeric: tabular-nums;
        letter-spacing: -0.02em;
    }
    .grain {
        background-image:
            radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
            radial-gradient(rgba(255, 255, 255, 0.02) 1px, transparent 1px);
        background-size: 6px 6px, 11px 11px;
        background-position: 0 0, 3px 3px;
    }
}

/* Scrollbars */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: hsl(var(--border)); border-radius: 8px; }
::-webkit-scrollbar-thumb:hover { background: hsl(var(--muted-foreground)); }

/* Table density */
.dense-table th, .dense-table td { padding-top: 0.55rem; padding-bottom: 0.55rem; }

/* Selection */
::selection { background: hsl(var(--accent) / 0.3); color: hsl(var(--foreground)); }

/* ============================================================
   Premium Navy theme — global remap of legacy emerald accents.
   The codebase still has ~370 hardcoded `emerald-*` Tailwind classes
   from the previous "India Green" theme. We surgically re-paint the
   most visually-loud ones to the navy palette so the entire app feels
   consistent without touching every component file.
   This is a CSS-only override, fully reversible.
   ============================================================ */
.bg-emerald-50, .bg-emerald-50\/50, .bg-emerald-50\/30, .bg-emerald-50\/40, .hover\:bg-emerald-50:hover { background-color: hsl(214 100% 97%) !important; }
.bg-emerald-100 { background-color: hsl(214 95% 93%) !important; }
.bg-emerald-500, .bg-emerald-500\/10, .bg-emerald-500\/20 { background-color: hsl(222 76% 50% / var(--tw-bg-opacity, 1)) !important; }
.bg-emerald-600, .hover\:bg-emerald-600:hover, .bg-emerald-600\/80 { background-color: hsl(222 76% 41%) !important; }
.bg-emerald-700, .hover\:bg-emerald-700:hover { background-color: hsl(222 76% 35%) !important; }
.bg-emerald-800, .hover\:bg-emerald-800:hover { background-color: hsl(222 70% 28%) !important; }
.bg-emerald-900 { background-color: hsl(222 64% 18%) !important; }
.bg-emerald-950, .bg-emerald-950\/30, .dark\:bg-emerald-950\/20 { background-color: hsl(222 64% 8%) !important; }
.text-emerald-400, .dark\:text-emerald-400 { color: hsl(222 75% 70%) !important; }
.text-emerald-500 { color: hsl(222 76% 50%) !important; }
.text-emerald-600, .hover\:text-emerald-600:hover { color: hsl(222 76% 41%) !important; }
.text-emerald-700, .dark\:text-emerald-700 { color: hsl(222 76% 35%) !important; }
.text-emerald-800 { color: hsl(222 70% 28%) !important; }
.text-emerald-900 { color: hsl(222 64% 18%) !important; }
.border-emerald-100 { border-color: hsl(214 95% 93%) !important; }
.border-emerald-200 { border-color: hsl(214 50% 85%) !important; }
.border-emerald-300 { border-color: hsl(214 50% 75%) !important; }
.border-emerald-400 { border-color: hsl(222 76% 55%) !important; }
.border-emerald-500, .border-emerald-500\/30, .border-emerald-500\/50, .focus\:ring-emerald-500:focus { border-color: hsl(222 76% 50% / var(--tw-border-opacity, 1)) !important; }
.border-emerald-600 { border-color: hsl(222 76% 41%) !important; }
.ring-emerald-500\/40, .focus\:ring-emerald-500\/40:focus, .focus\:ring-emerald-600\/40:focus { --tw-ring-color: hsl(222 76% 41% / 0.4) !important; }
.from-emerald-50 { --tw-gradient-from: hsl(214 100% 97%) !important; }
.from-emerald-500 { --tw-gradient-from: hsl(222 76% 50%) !important; }
.from-emerald-600 { --tw-gradient-from: hsl(222 76% 41%) !important; }
.from-emerald-700 { --tw-gradient-from: hsl(222 76% 35%) !important; }
.to-emerald-50, .to-emerald-100 { --tw-gradient-to: hsl(214 95% 95%) !important; }
.to-emerald-500 { --tw-gradient-to: hsl(222 76% 50%) !important; }
.to-emerald-700 { --tw-gradient-to: hsl(222 76% 35%) !important; }
.to-emerald-900 { --tw-gradient-to: hsl(222 64% 18%) !important; }
.via-emerald-700 { --tw-gradient-via: hsl(222 76% 35%) !important; }

@layer base {
    [data-debug-wrapper="true"] { display: contents !important; }
    [data-debug-wrapper="true"] > * {
        margin: inherit; padding: inherit; gap: inherit;
        border-width: inherit; border-style: inherit; border-color: inherit;
    }
}


/* ──────────────────────────────────────────────────────────────────────
   Smart Display & Brightness Controller (additive layer)
   ──────────────────────────────────────────────────────────────────────
   These CSS variables are driven by `BrightnessContext`. When the user
   has not opened the controller yet, all variables default to `1` which
   is a no-op filter chain — i.e. the rendered app looks exactly like
   before this module was added.

   Print output (window.print / jsPDF .save / blob URLs) is NEVER
   touched because:
     (a) jsPDF rasterises text/vectors directly into a PDF stream — CSS
         filters do not exist in PDF.
     (b) For window.print, the browser uses the printable cascade which
         we leave untouched. The `@media print` rule below resets all
         brightness filters during the print roll so the printer always
         gets unfiltered output.
   ────────────────────────────────────────────────────────────────────── */
:root {
    --app-brightness: 1;
    --app-contrast: 1;
    --app-saturate: 1;
    --preview-brightness: 1;
    --preview-contrast: 1;
}

body {
    /* Filter on body is safe: it does not change layout, only repaint.
       Browsers gracefully fall back to no-op when filter is unsupported. */
    filter:
        brightness(var(--app-brightness))
        contrast(var(--app-contrast))
        saturate(var(--app-saturate));
    /* Force GPU compositing so the filter cost is negligible on modern
       hardware (off-main-thread layer). */
    will-change: filter;
}

/* Preview-only opt-in surface. Components that want the preview-mode
   filter (label canvas, invoice preview, payslip preview) add the class
   `brightness-preview-target` to their container. */
.brightness-preview-target {
    filter:
        brightness(var(--preview-brightness))
        contrast(var(--preview-contrast));
}

/* Print safety net — reset every brightness filter during printing so
   the printer driver receives pristine output regardless of UI brightness. */
@media print {
    body, .brightness-preview-target {
        filter: none !important;
    }
}