@import "tailwindcss";
/* Self-hosted Material Symbols Rounded — instanced to a single weight (wght=400,
   FILL=0, GRAD=0, opsz=24) with fonttools varLib.instancer, dropping the 4 axes'
   variation data. Cuts the file 5.3 MB -> 445 KB with ALL ~4200 icons intact
   (no glyph subsetting), so no icon can regress to raw text. Replaces the
   `@import "material-symbols/rounded.css"` that loaded the full variable font.
   The .material-symbols-rounded/-outlined utility below forces this family. */
@font-face {
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url("./assets/fonts/material-symbols-rounded.woff2") format("woff2");
}

@custom-variant dark (&:where(.dark, .dark *));

/* Per-tenant brand colors — overridden at runtime via brandingStore.ts's
   applyBranding(), seeded here with today's literal defaults so the shell
   never regresses before branding has loaded. Dark mode stays fixed/shared
   (not tenant-customizable) — these are light-mode-only, unlike the MD3
   tokens in @theme below. */
:root {
  --brand-primary: #0F4C81;
  --brand-secondary: #00A6A6;
  --brand-button: #00A6A6;
}

@theme {
  /* Branded dark-mode surface scale — deep navy (not generic gray), matching
     the brand's #00355f/#0F4C81 hue family so dark mode reads as a designed
     extension of the brand rather than a generic Tailwind slate dark theme.
     Same lightness stops as Tailwind's slate scale, re-hued to navy — every
     `dark:bg-slate-NNN` / `dark:text-slate-NNN` / `dark:border-slate-NNN` in
     the app was swapped to the matching `navy-NNN` shade. */
  --color-navy-50: #eaf2fb;
  --color-navy-100: #d3e3f5;
  --color-navy-200: #a8c6e8;
  --color-navy-300: #7aa8d8;
  --color-navy-400: #5085c0;
  --color-navy-500: #3a6a9e;
  --color-navy-600: #2a527d;
  --color-navy-700: #1c3a5c;
  --color-navy-800: #122943;
  --color-navy-900: #0a1a2e;
  --color-navy-950: #050e1c;

  /* Color Palette */
  --color-primary: #00355f;
  --color-primary-container: #0f4c81;
  --color-on-primary-container: #8ebdf9;
  --color-on-primary: #ffffff;
  --color-primary-fixed: #d2e4ff;
  --color-primary-fixed-dim: #a0c9ff;
  --color-on-primary-fixed: #001c37;
  --color-on-primary-fixed-variant: #07497d;

  --color-secondary: #006a6a;
  --color-secondary-container: #7af5f5;
  --color-on-secondary-container: #007070;
  --color-on-secondary: #ffffff;
  --color-secondary-fixed: #7af5f5;
  --color-secondary-fixed-dim: #5bd9d8;
  --color-on-secondary-fixed: #002020;
  --color-on-secondary-fixed-variant: #004f4f;

  --color-tertiary: #443100;
  --color-tertiary-container: #604600;
  --color-on-tertiary-container: #e8b22c;
  --color-on-tertiary: #ffffff;
  --color-tertiary-fixed: #ffdfa0;
  --color-tertiary-fixed-dim: #f6be39;
  --color-on-tertiary-fixed: #261a00;
  --color-on-tertiary-fixed-variant: #5c4300;

  --color-background: #f8f9ff;
  --color-surface-background: #f5f7fa;
  --color-surface: #f8f9ff;
  --color-surface-dim: #cbdbf5;
  --color-surface-bright: #f8f9ff;
  --color-on-background: #0b1c30;
  --color-on-surface: #0b1c30;
  --color-on-surface-variant: #42474f;
  
  --color-surface-container-lowest: #ffffff;
  --color-surface-container-low: #eff4ff;
  --color-surface-container: #e5eeff;
  --color-surface-container-high: #dce9ff;
  --color-surface-container-highest: #d3e4fe;
  
  --color-outline: #727780;
  --color-outline-variant: #c2c7d1;
  --color-inverse-surface: #213145;
  --color-inverse-on-surface: #eaf1ff;
  --color-inverse-primary: #a0c9ff;
  --color-surface-tint: #2d6197;

  --color-error: #ba1a1a;
  --color-error-container: #ffdad6;
  --color-on-error: #ffffff;
  --color-on-error-container: #93000a;

  --color-success: #0ab39c;
  --color-info: #299cdb;

  /* Typography */
  --font-display: "Poppins", sans-serif;
  --font-poppins: "Poppins", sans-serif;
  --font-body: "Inter", sans-serif;
  --font-sans: "Inter", sans-serif;
  --font-inter: "Inter", sans-serif;
  --font-mono: "Inter", ui-monospace, SFMono-Regular, monospace;

  /* Layout and Spacing */
  --size-compact-gap: 8px;
  --size-container-padding: 24px;
  --size-gutter: 16px;
  --size-sidebar-width: 260px;
  --size-header-height: 72px;
  --size-section-gap: 32px;
}

/* Material symbols config - Enforcing Material Symbols Rounded as default */
.material-symbols-rounded,
.material-symbols-outlined {
  font-family: 'Material Symbols Rounded' !important;
  font-weight: normal;
  font-style: normal;
  /* No font-size here on purpose. This rule is UNLAYERED, and unlayered CSS
     outranks anything in a cascade layer — so a `font-size` declared here beat
     every Tailwind text-* utility (which live in @layer utilities), regardless
     of specificity. `text-[360px]` on the login brand watermark rendered at the
     inherited 16px, leaving a stray thumbnail-sized icon on the panel seam.
     Omitting the declaration gives the same inherit-by-default behaviour for
     icons with no size class, while letting text-* utilities win as intended. */
  display: inline-block;
  line-height: 1;
  text-transform: none;
  letter-spacing: normal;
  word-wrap: normal;
  white-space: nowrap;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  vertical-align: middle;
}

/* Custom Scrollbar for modern systems */
::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}
::-webkit-scrollbar-track {
  background: transparent;
}
::-webkit-scrollbar-thumb {
  background: #c2c7d1;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #a0a5b0;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

html, body {
  font-family: var(--font-sans) !important;
}

/* Topbar.tsx renders a fixed h-[72px] header; without this, scrollIntoView()/
   Tab-focus/anchor navigation can land a target element at scroll-y 0, hiding
   it behind the header instead of below it. */
html {
  scroll-padding-top: 72px;
}

/* Centralized Typography Configuration */
h1, h2, h3, h4, h5, h6,
.font-display,
.font-poppins,
.page-title,
.section-title,
.card-title,
.dialog-title,
.dashboard-title {
  font-family: var(--font-poppins) !important;
}

/* Respect explicit overrides for metadata labels and body metrics rendering in Inter */
h1.font-sans, h2.font-sans, h3.font-sans, h4.font-sans, h5.font-sans, h6.font-sans,
h1.font-body, h2.font-body, h3.font-body, h4.font-body, h5.font-body, h6.font-body,
h1.font-inter, h2.font-inter, h3.font-inter, h4.font-inter, h5.font-inter, h6.font-inter {
  font-family: var(--font-sans) !important;
}

h1.font-mono, h2.font-mono, h3.font-mono, h4.font-mono, h5.font-mono, h6.font-mono {
  font-family: var(--font-mono) !important;
}

/* Force standard elements to inherit/use Inter */
button, input, select, textarea, label, table, th, td, caption, span, p, li, a {
  font-family: var(--font-sans);
}

/* Maintain monospace overrides */
.font-mono, code, pre {
  font-family: var(--font-mono) !important;
}

/* Material Design 3 Typography Scale */

/* Display (Poppins) */
.display-large, .displayLarge, .DisplayLarge,
.display-medium, .displayMedium, .DisplayMedium,
.display-small, .displaySmall, .DisplaySmall {
  font-family: var(--font-poppins) !important;
}

/* Headline (Poppins) */
.headline-large, .headlineLarge, .HeadlineLarge,
.headline-medium, .headlineMedium, .HeadlineMedium,
.headline-small, .headlineSmall, .HeadlineSmall {
  font-family: var(--font-poppins) !important;
}

/* Title (Poppins) */
.title-large, .titleLarge, .TitleLarge,
.title-medium, .titleMedium, .TitleMedium,
.title-small, .titleSmall, .TitleSmall {
  font-family: var(--font-poppins) !important;
}

/* Body (Inter) */
.body-large, .bodyLarge, .BodyLarge,
.body-medium, .bodyMedium, .BodyMedium,
.body-small, .bodySmall, .BodySmall {
  font-family: var(--font-sans) !important;
}

/* Label (Inter) */
.label-large, .labelLarge, .LabelLarge,
.label-medium, .labelMedium, .LabelMedium,
.label-small, .labelSmall, .LabelSmall {
  font-family: var(--font-sans) !important;
}



/* ── Touch target minimum ──────────────────────────────────────────────────
   Apple HIG and WCAG 2.5.8 require ~44px for touch. The app's button scale
   (h-8 = 32px, h-9 = 36px, h-10 = 40px) sits below that, so on a phone or
   tablet every control is a mis-tap risk.

   Scoped to `pointer: coarse` so it applies only to touch input and leaves the
   dense mouse-driven desktop layout exactly as designed. min-height alone grows
   the control vertically, which cannot introduce horizontal overflow; width is
   raised only for controls that are too narrow to hit, which are icon buttons. */
@media (pointer: coarse) {
  button,
  [role="button"],
  input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]),
  select,
  textarea {
    min-height: 44px;
  }

  /* Icon-only controls: too narrow to hit reliably. Checkboxes/radios keep
     their own sizing — widening them would break form alignment. */
  button:not(:has(span:not([class*="material-symbols"]))):not(:has(> :not(svg):not(span))) {
    min-width: 44px;
  }
}

/* ── Dark-mode legibility ─────────────────────────────────────────────────────
   The brand dark-blues (--color-primary #00355f, --color-primary-container
   #0f4c81, and the literal #0F4C81 used across the app) are designed for dark
   text on a LIGHT surface. In dark mode they sit on the deep-navy surface and
   become effectively invisible — page titles, values, links and outline-button
   labels disappear. These unlayered rules win over Tailwind's layered utilities,
   so every dark-blue *text* usage is lifted to a light on-primary blue in dark
   mode. Filled backgrounds (bg-primary buttons) are left untouched, so they keep
   their brand fill and white label. */
.dark .text-primary,
.dark .text-primary-container,
.dark [class~="text-[#0f4c81]"],
.dark [class~="text-[#0F4C81]"],
.dark [class~="text-[#00355f]"],
.dark [class~="text-[#00355F]"] {
  color: #8ebdf9;
}

/* Hover states that flip text to the dark brand blue — keep them legible too. */
.dark [class~="hover:text-[#0f4c81]"]:hover,
.dark [class~="hover:text-[#0F4C81]"]:hover,
.dark [class~="hover:text-[#00355f]"]:hover,
.dark [class~="hover:text-[#00355F]"]:hover {
  color: #a0c9ff;
}

/* Outline buttons / accent borders in the dark-blue brand colour are invisible
   on the dark surface — lift them to a visible navy so the control still reads. */
.dark .border-primary,
.dark [class~="border-[#0f4c81]"],
.dark [class~="border-[#0F4C81]"] {
  border-color: #3a6a9e;
}

/* Neutral dark text (hardcoded greys + slate/gray-800/900 used without a dark:
   variant) is likewise invisible on the dark surface — lift it to a soft light
   neutral so body copy, values and headings stay readable. Kept distinct from
   the brand-blue rule above: neutral → light-neutral, brand-blue → light-blue. */
.dark [class~="text-[#1F2937]"],
.dark [class~="text-[#1f2937]"],
.dark [class~="text-[#111827]"],
.dark [class~="text-[#0f172a]"],
.dark [class~="text-[#0F172A]"],
.dark [class~="text-[#1e293b]"],
.dark [class~="text-[#1E293B]"],
.dark .text-slate-900,
.dark .text-slate-800,
.dark .text-gray-900,
.dark .text-gray-800 {
  color: #d3e3f5;
}

/* ---------------------------------------------------------------------------
   WCAG 2.4.7 (Focus Visible) — guarantee a keyboard-focus indicator on every
   interactive element, even the ~87 that use Tailwind's `outline-none` without
   a `focus:ring` replacement. Unlayered, so it beats the `utilities` cascade
   layer regardless of specificity; scoped to :focus-visible so mouse/pointer
   focus stays clean. Dark mode lifts the ring to the light on-primary blue so
   it stays visible on the deep-navy surfaces.
   --------------------------------------------------------------------------- */
:focus-visible {
  outline: 2px solid #0F4C81;
  outline-offset: 2px;
  border-radius: 3px;
}
.dark :focus-visible {
  outline-color: #8ebdf9;
}