/*
 * Mohap.Web.Ui — semantic design-theme variables.
 * Served by the RCL at _content/Mohap.Web.Ui/css/theme.css; consumed by BOTH apps
 * (Console + Portal).
 *
 * The palette is the warm one of the sibling Veterinary Verify app: a dark gold accent on warm paper,
 * warm greys for ink and hairlines, and one colour per status meaning — green for met / verified /
 * complete, amber for pending / in progress, red for failed, steel blue for information.
 * Tailwind utilities (text-accent, border, …) read these variables too (tailwind.config.js), so this
 * file is the whole theme.
 *
 * Naming: the console's legacy tokens.css defines bare --accent / --ink / --line …; those are now
 * aliases of the --ui-* variables below, so every name resolves to the same colour.
 *
 * Dark theme: the console stamps data-theme on <html> (light, dark or system, from the officer's
 * preference). Every colour is a token; the dark values below, and the same values again for system when
 * the device prefers dark, are the only place a colour changes between themes. The dark palette keeps the
 * warmth: brown-black surfaces, warm off-white ink, the gold lifted so it reads on dark (a light gold fill
 * carries dark text, --ui-on-accent-fill), and the status tints desaturated.
 */
:root {
  /* Accent — the gold. Text and filled controls use --ui-accent, dark enough to read on white. */
  --ui-accent: #8A6229;
  --ui-accent-hover: #6F4E1F;
  --ui-accent-tint: #F7F0E4;
  --ui-accent-rgb: 138 98 41; /* --ui-accent as channels, for Tailwind's accent/<alpha> utilities */
  --ui-accent-fill: #8A6229; /* solid accent fills (primary buttons, selected counts) */
  --ui-accent-fill-hover: #6F4E1F;
  --ui-on-accent-fill: #FFFFFF; /* text and icons on --ui-accent-fill */
  --ui-accent-strong: #6F4E1F; /* emphasised accent text */
  --ui-accent-line: #E3D2B4; /* accent-tinted borders */
  --ui-accent-line-soft: #EEE3CF;
  --ui-accent-ring: rgba(138, 98, 41, .22);
  --ui-accent-mark: #996F33; /* the logo gold: decorative marks such as the active-nav bar */
  --ui-on-fill: #FFFFFF; /* text and icons on the status and inverse fills; white in both themes */

  /* Surfaces. */
  --ui-surface: #FFFFFF; /* cards / panels / sidebar */
  --ui-surface-page: #F8F6F1; /* page background — warm paper */
  --ui-surface-sunken: #F2EEE6; /* subtle fills inside a surface: chips, tracks */
  --ui-surface-strong: #E8E2D6;
  --ui-inverse: #2A241C; /* dark chips and buttons with white text */
  --ui-inverse-hover: #3B3327;
  --ui-document-paper: #FFFFFF; /* a document's own paper (scans): white in both themes */
  --ui-topbar-bg: rgb(255 255 255 / .92); /* translucent sticky top bar, blurred behind */
  --ui-scrim: rgb(42 36 28 / .45); /* drawer and dialog backdrops */

  /* Ink ramp (text). */
  --ui-ink: #1F1B16;
  --ui-ink-2: #3D372F;
  --ui-ink-3: #575046;
  --ui-muted: #6F675C;
  --ui-faint: #A39B8E; /* the faintest text and dividers */

  /* Hairlines. */
  --ui-line: #E6E0D4;
  --ui-line-soft: #EFEAE0;
  --ui-line-strong: #CFC7B8;

  /* Elevation — warm-tinted shadows. */
  --ui-shadow-sm: 0 1px 2px rgb(42 36 28 / .05);
  --ui-shadow-lift: 0 1px 2px rgb(42 36 28 / .05), 0 8px 20px -8px rgb(42 36 28 / .16);
  --ui-shadow-pop: 0 12px 32px rgb(42 36 28 / .14);

  /* Status. Danger is validation red; bad / good / warn / info are the case statuses. */
  --ui-danger: #C2372B;
  --ui-danger-ring: rgba(194, 55, 43, .20);
  --ui-attention: #35557A; /* attention accent (steel blue) for text and lines */
  --ui-attention-fill: #35557A;
  --ui-bad: #A8291F; /* failed / not met */
  --ui-bad-fill: #A8291F;
  --ui-bad-tint: #F6E3E0;
  --ui-bad-line: #E7BDB7;
  --ui-good: #1B7A43; /* met / verified / complete */
  --ui-good-fill: #1B7A43;
  --ui-good-tint: #E1F1E7;
  --ui-good-line: #B5DCC3;
  --ui-warn: #A2590A; /* pending / in progress / needs attention */
  --ui-warn-ink: #8A4B06; /* warn text on its tint */
  --ui-warn-fill: #A2590A;
  --ui-warn-tint: #F8ECD3;
  --ui-warn-line: #EBD3A2;
  --ui-info: #1F5673; /* informational */
  --ui-info-tint: #E1ECF2;
  --ui-info-line: #C3D7E3;

  /* Chart marks: one meaning each, the same as the chips. */
  --ui-chart-good: #1B7A43;
  --ui-chart-warn: #BC7A0E;
  --ui-chart-bad: #A8291F;
  --ui-chart-gold: #996F33; /* a plain quantity */
  --ui-chart-steel: #35557A;
  --ui-chart-info: #5B7FA6;
  --ui-chart-done: #8C8478;
  --ui-chart-neutral: #B5AD9F;
  --ui-chart-track: #EFEAE0;

  --ui-logo-filter: none; /* the brand logo is drawn for light backgrounds */
}

/* ── Dark theme ─────────────────────────────────────────────────────────────────────────── */
:root[data-theme="dark"] {
  color-scheme: dark;
  --ui-accent: #D4A762;
  --ui-accent-hover: #E2BC80;
  --ui-accent-tint: #33291A;
  --ui-accent-rgb: 212 167 98;
  --ui-accent-fill: #D4A762;
  --ui-accent-fill-hover: #E2BC80;
  --ui-on-accent-fill: #1A160F;
  --ui-accent-strong: #E8C995;
  --ui-accent-line: #6A532F;
  --ui-accent-line-soft: #4A3B22;
  --ui-accent-ring: rgba(212, 167, 98, .32);
  --ui-accent-mark: #D4A762;
  --ui-on-fill: #FFFFFF;
  --ui-surface: #1F1B16;
  --ui-surface-page: #17140F;
  --ui-surface-sunken: #2A241C;
  --ui-surface-strong: #352E24;
  --ui-inverse: #4A4135;
  --ui-inverse-hover: #5A4F41;
  --ui-document-paper: #FFFFFF;
  --ui-topbar-bg: rgb(31 27 22 / .92);
  --ui-scrim: rgb(0 0 0 / .55);
  --ui-ink: #F2EDE4;
  --ui-ink-2: #DDD5C8;
  --ui-ink-3: #C4BBAC;
  --ui-muted: #A9A091;
  --ui-faint: #7E7568;
  --ui-line: #3B3327;
  --ui-line-soft: #2E281F;
  --ui-line-strong: #574C3E;
  --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / .35);
  --ui-shadow-lift: 0 1px 2px rgb(0 0 0 / .35), 0 8px 20px -8px rgb(0 0 0 / .55);
  --ui-shadow-pop: 0 12px 32px rgb(0 0 0 / .5);
  --ui-danger: #F08A7C;
  --ui-danger-ring: rgba(240, 138, 124, .30);
  --ui-attention: #9DB8D8;
  --ui-attention-fill: #3F6189;
  --ui-bad: #F2998E;
  --ui-bad-fill: #B3372C;
  --ui-bad-tint: #3B201B;
  --ui-bad-line: #6B3229;
  --ui-good: #82CC9E;
  --ui-good-fill: #1E7743;
  --ui-good-tint: #19301F;
  --ui-good-line: #2F5C3F;
  --ui-warn: #E8B46A;
  --ui-warn-ink: #EBBD7A;
  --ui-warn-fill: #9C5709;
  --ui-warn-tint: #3A2B14;
  --ui-warn-line: #6A4C1F;
  --ui-info: #93C1DB;
  --ui-info-tint: #172C38;
  --ui-info-line: #2D4E61;
  --ui-chart-good: #4FAE74;
  --ui-chart-warn: #D99A3A;
  --ui-chart-bad: #DE6B5B;
  --ui-chart-gold: #C9974F;
  --ui-chart-steel: #7393BA;
  --ui-chart-info: #8AABCF;
  --ui-chart-done: #8C8478;
  --ui-chart-neutral: #5E564B;
  --ui-chart-track: #2E281F;
  --ui-logo-filter: invert(1) hue-rotate(180deg); /* lightness flipped, hues turned back */
}

@media (prefers-color-scheme: dark) {
  :root[data-theme="system"] {
    color-scheme: dark;
    --ui-accent: #D4A762;
    --ui-accent-hover: #E2BC80;
    --ui-accent-tint: #33291A;
    --ui-accent-rgb: 212 167 98;
    --ui-accent-fill: #D4A762;
    --ui-accent-fill-hover: #E2BC80;
    --ui-on-accent-fill: #1A160F;
    --ui-accent-strong: #E8C995;
    --ui-accent-line: #6A532F;
    --ui-accent-line-soft: #4A3B22;
    --ui-accent-ring: rgba(212, 167, 98, .32);
    --ui-accent-mark: #D4A762;
    --ui-on-fill: #FFFFFF;
    --ui-surface: #1F1B16;
    --ui-surface-page: #17140F;
    --ui-surface-sunken: #2A241C;
    --ui-surface-strong: #352E24;
    --ui-inverse: #4A4135;
    --ui-inverse-hover: #5A4F41;
    --ui-document-paper: #FFFFFF;
    --ui-topbar-bg: rgb(31 27 22 / .92);
    --ui-scrim: rgb(0 0 0 / .55);
    --ui-ink: #F2EDE4;
    --ui-ink-2: #DDD5C8;
    --ui-ink-3: #C4BBAC;
    --ui-muted: #A9A091;
    --ui-faint: #7E7568;
    --ui-line: #3B3327;
    --ui-line-soft: #2E281F;
    --ui-line-strong: #574C3E;
    --ui-shadow-sm: 0 1px 2px rgb(0 0 0 / .35);
    --ui-shadow-lift: 0 1px 2px rgb(0 0 0 / .35), 0 8px 20px -8px rgb(0 0 0 / .55);
    --ui-shadow-pop: 0 12px 32px rgb(0 0 0 / .5);
    --ui-danger: #F08A7C;
    --ui-danger-ring: rgba(240, 138, 124, .30);
    --ui-attention: #9DB8D8;
    --ui-attention-fill: #3F6189;
    --ui-bad: #F2998E;
    --ui-bad-fill: #B3372C;
    --ui-bad-tint: #3B201B;
    --ui-bad-line: #6B3229;
    --ui-good: #82CC9E;
    --ui-good-fill: #1E7743;
    --ui-good-tint: #19301F;
    --ui-good-line: #2F5C3F;
    --ui-warn: #E8B46A;
    --ui-warn-ink: #EBBD7A;
    --ui-warn-fill: #9C5709;
    --ui-warn-tint: #3A2B14;
    --ui-warn-line: #6A4C1F;
    --ui-info: #93C1DB;
    --ui-info-tint: #172C38;
    --ui-info-line: #2D4E61;
    --ui-chart-good: #4FAE74;
    --ui-chart-warn: #D99A3A;
    --ui-chart-bad: #DE6B5B;
    --ui-chart-gold: #C9974F;
    --ui-chart-steel: #7393BA;
    --ui-chart-info: #8AABCF;
    --ui-chart-done: #8C8478;
    --ui-chart-neutral: #5E564B;
    --ui-chart-track: #2E281F;
    --ui-logo-filter: invert(1) hue-rotate(180deg);
  }
}

/* Blazor validation output — plain CSS here (NOT the Tailwind layer) because these class names
   are emitted by the framework at runtime and never appear in the scanned markup, so Tailwind would
   purge them. <ValidationMessage> → .validation-message (per-field); <ValidationSummary> →
   ul.validation-errors > li.validation-message. Both render in the semantic danger red. */
.validation-message {
  display: block;
  margin-block-start: 4px;
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-danger);
}
.validation-errors {
  margin: 0;
  padding-inline-start: 1.1em;
  font-size: 12px;
  font-weight: 500;
  color: var(--ui-danger);
}

/* ── Self-hosted IBM Plex Sans + IBM Plex Mono (WOFF2) — the UI typeface for BOTH apps ────────
   Same-origin, so text renders identically on the Linux box with no CDN and no CSP third-party
   allowance. Plex Sans ships as static 400/500/600/700 faces in Google's `latin` and `latin-ext`
   subsets; Plex Mono 400/500 sets reference numbers. Licence: fonts/IBM-Plex-OFL.txt (SIL OFL 1.1). */
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-400-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-400-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-500-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-500-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-600-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 600; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-600-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-700-normal.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "IBM Plex Sans"; font-style: normal; font-weight: 700; font-display: swap; src: url("../fonts/ibm-plex-sans-latin-ext-700-normal.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-400-normal.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../fonts/ibm-plex-mono-latin-500-normal.woff2") format("woff2"); }

/* ── Inter (variable, WOFF2) — kept as the second face for the alphabets Plex's subsets leave out ─
   Plex Sans is first in every stack, so Inter only draws what Plex lacks: Cyrillic, Greek and
   Vietnamese names (Google's subsets of the variable Inter, one file per subset, weights 100–900).
   Arabic and the other scripts are self-hosted in the console's fonts.css (Noto, via --font-native). */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02AF, U+0304, U+0308, U+0329, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic-ext.woff2') format('woff2');
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-cyrillic.woff2') format('woff2');
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-greek-ext.woff2') format('woff2');
  unicode-range: U+1F00-1FFF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-greek.woff2') format('woff2');
  unicode-range: U+0370-0377, U+037A-037F, U+0384-038A, U+038C, U+038E-03A1, U+03A3-03FF;
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('../fonts/inter-vietnamese.woff2') format('woff2');
  unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}