/* ============================================================================
   Systshare - SYSTAG light theme: the token layer.
   ----------------------------------------------------------------------------
   There is no build step in this project, so this file does its work through
   CSS custom properties at runtime. Bootstrap 5.3 exposes its whole theme that
   way - `.btn-primary` is nothing but seven `--bs-btn-*` assignments - so
   redefining the variables below recolours the entire framework, the DataTables
   Bootstrap-5 integration and every scaffolded Identity page without a single
   `!important`.

   `--sys-*` is the single source of truth for the SYSTAG identity; the `--bs-*`
   and `--dt-*` blocks are fed from it. Change a colour once, here.

   Load order matters and is set in Pages/Shared/_Layout.cshtml:
     bootstrap.css -> theme.css -> site.css
   ========================================================================== */

:root {
  /* -- SYSTAG identity ----------------------------------------------------- */

  /* Slate blue. Split in two roles, because the dark theme cannot serve both
     with one value: --sys-brand is the *fill* that white text sits on, and
     --sys-brand-text is the *ink* that sits on a surface. In this theme they
     are the same colour; in the dark block below they are not. */
  --sys-brand: #4c6a79;
  --sys-brand-rgb: 76, 106, 121;
  --sys-brand-text: #4c6a79;
  --sys-brand-text-rgb: 76, 106, 121;
  --sys-brand-2: #5c7a89;              /* lighter stop of the progress stripe */

  /* Interaction stops for the filled brand button, 15% and 22% toward black.
     The fill has to carry white text, which is what fixes the direction: see
     the note in the dark block for why neither theme can lighten instead. */
  --sys-brand-hover: #415a67;
  --sys-brand-active: #3b535e;

  /* Red: active state, hover, destructive. Used sparingly, on purpose.
     Split the same way - --sys-accent fills, --sys-accent-text inks. */
  --sys-accent: #e4003c;
  --sys-accent-rgb: 228, 0, 60;
  --sys-accent-text: #e4003c;
  --sys-accent-text-rgb: 228, 0, 60;
  --sys-accent-dark: #c40034;          /* destructive at rest - see note below */

  /* The danger family, one step past the accent. These were literals scattered
     through site.css until the dark theme needed to move them together. */
  --sys-danger-fill: #a30029;          /* destructive hover/active fill */
  --sys-danger-text: #a30029;          /* .text-danger, alert and validation ink */
  --sys-danger-bg: #fdeaef;
  --sys-danger-border: #f6c2d1;

  /* Surfaces, lightest to most recessed. */
  --sys-surface: #fff;                 /* page and panel */
  --sys-surface-tint: #f4f6f7;         /* hero band, footer, input addons */
  --sys-surface-sunken: #fafbfc;       /* dropzone fill, table stripe */
  --sys-track: #eaeff1;                /* progress track */

  /* Text, in one readable step and two decorative ones. --sys-text is the only
     grey that clears WCAG AA on both the white and the tinted surface (5.1:1
     and 4.6:1), so all text uses it. The mockup's lighter greys measure 2.8:1
     to 4.2:1, which is why they are confined to non-text roles: --sys-muted
     for rules and icon fills, --sys-faint for disabled controls. */
  --sys-text: #5f6b73;
  --sys-muted: #8b979e;
  --sys-faint: #a0abb1;

  /* Lines, weakest to strongest. */
  --sys-hairline: #edf1f2;             /* hr, section rule, data-row divider */
  --sys-border: #e4e9ec;               /* panel, header, footer */
  --sys-border-input: #dde4e7;
  --sys-border-btn: #cfd8dd;           /* secondary button */
  --sys-border-dashed: #c3ced4;        /* dropzone */

  /* Geometry. The 2px radius is what makes this read as corporate rather than
     consumer; only the progress bar is a pill. */
  --sys-radius: 2px;
  --sys-radius-pill: 999px;
  --sys-btn-border-w: 1.5px;
  --sys-rule-active: 2px;              /* nav underline, accent fieldset */

  /* Modal lift. Brand-tinted here; plain black in the dark theme, where a
     coloured shadow reads as a glow rather than as depth. */
  --sys-shadow: 0 18px 48px rgba(var(--sys-brand-rgb), .14);

  /* Letter-spacing carries the identity that a webfont would otherwise: this
     project ships no webfonts, so uppercase + tracking does the work. */
  --sys-ls-tight: .01em;               /* page title */
  --sys-ls-wide: .14em;                /* section headings, labels, tabs */
  --sys-ls-brand: .06em;               /* wordmark fallback */
  --sys-ls-btn: .02em;

  --sys-font: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
              "Noto Sans", "Liberation Sans", Arial, sans-serif,
              "Apple Color Emoji", "Segoe UI Emoji";

  /* -- Bootstrap, fed from the above --------------------------------------- */

  --bs-font-sans-serif: var(--sys-font);
  --bs-body-font-family: var(--sys-font);
  --bs-body-font-size: 1rem;
  --bs-body-line-height: 1.65;
  --bs-body-color: var(--sys-text);
  --bs-body-color-rgb: 95, 107, 115;
  --bs-body-bg: var(--sys-surface);
  --bs-body-bg-rgb: 255, 255, 255;

  --bs-emphasis-color: var(--sys-brand-text);
  --bs-emphasis-color-rgb: var(--sys-brand-text-rgb);
  --bs-secondary-color: var(--sys-text);
  --bs-secondary-color-rgb: 95, 107, 115;
  --bs-tertiary-color: var(--sys-muted);
  --bs-secondary-bg: var(--sys-surface-tint);
  --bs-secondary-bg-rgb: 244, 246, 247;
  --bs-tertiary-bg: var(--sys-surface-sunken);
  --bs-tertiary-bg-rgb: 250, 251, 252;
  --bs-heading-color: var(--sys-brand-text);

  --bs-primary: var(--sys-brand);
  --bs-primary-rgb: var(--sys-brand-rgb);
  --bs-primary-text-emphasis: var(--sys-brand-text);
  --bs-primary-bg-subtle: var(--sys-surface-tint);
  --bs-primary-border-subtle: var(--sys-border);

  --bs-secondary: var(--sys-muted);
  --bs-secondary-rgb: 139, 151, 158;
  --bs-secondary-text-emphasis: var(--sys-text);
  --bs-secondary-bg-subtle: var(--sys-surface-tint);
  --bs-secondary-border-subtle: var(--sys-border);

  /* The palette has two colours, so success and info collapse onto brand. The
     app uses `btn-success` for its *primary* action on the download, install
     and save screens, and `btn-outline-info` for the copy buttons; collapsing
     is what makes those read correctly instead of stock green and cyan. */
  --bs-success: var(--sys-brand);
  --bs-success-rgb: var(--sys-brand-rgb);
  --bs-success-text-emphasis: var(--sys-brand-text);
  --bs-success-bg-subtle: var(--sys-surface-tint);
  --bs-success-border-subtle: var(--sys-border);
  --bs-info: var(--sys-brand);
  --bs-info-rgb: var(--sys-brand-rgb);
  --bs-info-text-emphasis: var(--sys-brand-text);
  --bs-info-bg-subtle: var(--sys-surface-tint);
  --bs-info-border-subtle: var(--sys-border);

  /* ...and danger and warning collapse onto the accent. Mapping warning too
     means `bg-warning` / `border-warning` on the deletion fieldset turn red
     with no markup change, which is a free safety net for stray usages. */
  --bs-danger: var(--sys-accent);
  --bs-danger-rgb: var(--sys-accent-rgb);
  --bs-danger-text-emphasis: var(--sys-danger-text);
  --bs-danger-bg-subtle: var(--sys-danger-bg);
  --bs-danger-border-subtle: var(--sys-danger-border);
  --bs-warning: var(--sys-accent);
  --bs-warning-rgb: var(--sys-accent-rgb);
  --bs-warning-text-emphasis: var(--sys-danger-text);
  --bs-warning-bg-subtle: var(--sys-danger-bg);
  --bs-warning-border-subtle: var(--sys-danger-border);

  --bs-light: var(--sys-surface-tint);
  --bs-light-rgb: 244, 246, 247;
  --bs-dark: var(--sys-brand);
  --bs-dark-rgb: var(--sys-brand-rgb);

  --bs-border-color: var(--sys-border);
  --bs-border-color-translucent: var(--sys-hairline);
  --bs-border-radius: var(--sys-radius);
  --bs-border-radius-sm: var(--sys-radius);
  --bs-border-radius-lg: var(--sys-radius);
  --bs-border-radius-xl: var(--sys-radius);
  --bs-border-radius-xxl: var(--sys-radius);
  --bs-border-radius-2xl: var(--sys-radius);
  --bs-border-radius-pill: var(--sys-radius-pill);

  --bs-link-color: var(--sys-brand-text);
  --bs-link-color-rgb: var(--sys-brand-text-rgb);
  --bs-link-hover-color: var(--sys-accent-text);
  --bs-link-hover-color-rgb: var(--sys-accent-text-rgb);
  --bs-code-color: var(--sys-accent-text);
  --bs-highlight-bg: var(--sys-danger-bg);
  --bs-highlight-color: var(--sys-text);

  --bs-focus-ring-width: 2px;
  --bs-focus-ring-opacity: 1;
  --bs-focus-ring-color: rgba(var(--sys-brand-rgb), .25);

  --bs-form-valid-color: var(--sys-brand-text);
  --bs-form-valid-border-color: var(--sys-brand);
  --bs-form-invalid-color: var(--sys-danger-text);
  --bs-form-invalid-border-color: var(--sys-accent);

  /* -- DataTables 2.x -------------------------------------------------------
     The admin tables build their own markup in JavaScript, but the library
     reads these at runtime, so the rows follow the palette for free. */
  --dt-row-selected: var(--sys-brand-rgb);
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-stripe: var(--sys-brand-rgb);
  --dt-row-hover: var(--sys-brand-rgb);
  --dt-column-ordering: var(--sys-brand-rgb);
  --dt-html-background: #fff;
}

/* ============================================================================
   SYSTAG dark theme.
   ----------------------------------------------------------------------------
   Everything above maps `--bs-*` onto `--sys-*` through var(), so redefining
   the `--sys-*` stops here carries Bootstrap, DataTables and the scaffolded
   Identity pages across with it. Only the `--bs-*`/`--dt-*` entries that hold
   *literal* values have to be repeated at the bottom of this block.

   Specificity is (0,2,0), which beats the `:root` above and, being later in the
   file, ties are broken in its favour too.

   Contrast was measured in the browser, not eyeballed. Against --sys-surface:
   body text 8.6:1, --sys-brand-text 7.1:1, --sys-accent-text 6.1:1,
   --sys-danger-text 7.1:1; white on the brand fill 5.0:1 and on the accent
   4.8:1. The fills clear the 3:1 that WCAG 1.4.11 asks of a control's edge:
   brand 3.2:1, accent 3.3:1. The destructive fill is the one exception at
   2.6:1 - see the note on --sys-danger-fill for why it stays there.
   ========================================================================== */

:root[data-bs-theme="dark"] {
  /* -- SYSTAG identity, dark ----------------------------------------------- */

  /* The fill is lifted one stop from #4c6a79. That is what buys the button edge
     its 3:1 against the page - at the light value it measures 2.7:1 - while
     white on it still clears AA at 5.0:1. The ink stop goes much lighter, which
     is the whole reason these two are separate tokens. */
  --sys-brand: #547485;
  --sys-brand-rgb: 84, 116, 133;
  --sys-brand-text: #8fb3c4;
  --sys-brand-text-rgb: 143, 179, 196;
  --sys-brand-2: #628597;

  /* Deepening on hover rather than lightening looks backwards for a dark
     theme, but white text decides it: the fill can only lighten to about
     #56778a before white drops under 4.5:1, and that is a 3-point move nobody
     would see. So both themes take the same 15%/22% step toward black, which
     also keeps the interaction feeling identical across the two. White reads
     6.4:1 on the hover stop. The button edge softens to 2.5:1 while hovered -
     below the 3:1 that WCAG 1.4.11 wants - which is accepted here because the
     control is already identified at rest (3.2:1) and the pointer is on it. */
  --sys-brand-hover: #476371;
  --sys-brand-active: #425a68;

  /* The accent does not move. #e4003c is already legible on a dark ground
     (3.3:1) and still carries white text (4.8:1), so the signature red is the
     same colour in both themes. Only its ink stop lightens. */
  --sys-accent: #e4003c;
  --sys-accent-rgb: 228, 0, 60;
  --sys-accent-text: #ff7391;
  --sys-accent-text-rgb: 255, 115, 145;
  --sys-accent-dark: #c40034;

  /* The destructive fill does NOT move. Brightening it on hover reads better on
     a dark ground, but white text caps a red at about #e8123f, and the only
     stop in that band is #e4003c - which is exactly what a primary button turns
     on hover. Sharing one colour between "confirm" and "delete" is the failure
     site.css warns about, and this app deletes files, so the scale keeps the
     light theme's direction instead: rest at --sys-accent-dark, darken to
     #a30029 on hover. White stays legible on it at 8.1:1. */
  --sys-danger-fill: #a30029;
  --sys-danger-text: #ff8a9f;
  --sys-danger-bg: #331018;
  --sys-danger-border: #7a2138;

  /* Surfaces. Slate-tinted rather than neutral grey, so the dark theme reads as
     the same brand and not as a generic dark mode. Same semantics as the light
     ramp - tint and sunken recede from the panel - which is why no component
     rule in site.css has to change. */
  --sys-surface: #1b2429;              /* page, panel, header */
  --sys-surface-tint: #141b1f;         /* hero band, footer, input addons */
  --sys-surface-sunken: #10161a;       /* dropzone fill, table stripe */
  --sys-track: #2a363c;                /* progress track */

  /* Text. --sys-text clears AA comfortably on all three surfaces (8.6:1, 9.5:1,
     10.0:1). --sys-muted and --sys-faint stay confined to the non-text roles
     they hold in the light theme; --sys-faint doubles as the disabled fill and
     carries white at 5.3:1. */
  --sys-text: #b3c2c9;
  --sys-muted: #6e8089;
  --sys-faint: #5e6e76;

  /* Lines. Kept at roughly the light theme's separation from the surface, so
     panels divide without drawing attention to the division. */
  --sys-hairline: #243036;
  --sys-border: #2c3940;
  --sys-border-input: #38474f;
  --sys-border-btn: #455760;
  --sys-border-dashed: #3f5058;

  /* A brand-tinted shadow reads as a glow on a dark ground, so this one is
     plain black and deeper to compensate for the lower surrounding contrast. */
  --sys-shadow: 0 18px 48px rgba(0, 0, 0, .55);

  /* -- The literals, repeated ----------------------------------------------
     Everything else follows through var(); these are the entries the light
     block spells out as numbers, so they do not. */

  /* Bootstrap's .text-danger utility is `!important` and composed from
     --bs-danger-rgb, so site.css cannot reach it; the ink stop has to be
     delivered here. On the accent itself error text would measure 3.3:1. This
     is dark-only on purpose - in the light theme .text-danger already renders
     the accent, and changing that would move colour the design has signed off.
     It also tints .bg-danger / .border-danger, which no view uses. */
  --bs-danger-rgb: 255, 138, 159;

  --bs-body-color-rgb: 179, 194, 201;
  --bs-body-bg-rgb: 27, 36, 41;
  --bs-secondary-color-rgb: 179, 194, 201;
  --bs-secondary-rgb: 110, 128, 137;
  --bs-secondary-bg-rgb: 20, 27, 31;
  --bs-tertiary-bg-rgb: 16, 22, 26;
  --bs-light-rgb: 20, 27, 31;

  /* DataTables paints stripe, hover and sort tint as low-alpha overlays. On a
     dark ground they have to lighten, so the channels flip to white. Selected
     rows keep white text - it sits on the brand fill, not on the page. */
  --dt-row-selected-text: 255, 255, 255;
  --dt-row-stripe: 255, 255, 255;
  --dt-row-hover: 255, 255, 255;
  --dt-column-ordering: 255, 255, 255;
  --dt-html-background: #1b2429;
}

/* -- Dark fixes that a token cannot reach ---------------------------------- */

/* Bootstrap substitutes its own grey chevron at `[data-bs-theme=dark]
   .form-select` (bootstrap.css), which is (0,2,0) and would otherwise beat the
   brand chevron in site.css. This is the same rule at (0,3,0). */
:root[data-bs-theme="dark"] .form-select {
  --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%238fb3c4' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* The wordmark is #4c6a79 artwork on transparent, which measures 2.7:1 on the
   dark surface. Brightening lifts it to 5.2:1 and leaves the red chevrons red.
   Replace this with a light-variant asset if one is ever exported. */
:root[data-bs-theme="dark"] .sys-brand-logo {
  filter: brightness(1.45);
}

/* DNTCaptcha bakes asp-fore-color and asp-back-color into a server-rendered
   image, and the theme is a client-side decision the server never sees - so the
   plate is corrected here instead. Inverting and rotating the hue back keeps
   the slate blue slate blue rather than turning it orange. The class is the
   .Identifier() set in RegisterServices.cs. */
:root[data-bs-theme="dark"] .schutz-css img {
  filter: invert(1) hue-rotate(180deg);
}

/* The old stylesheet ran the root at 14px and stepped up to 16px at 768px,
   which made every rem dimension 14% smaller on phones. One size throughout. */
html {
  font-size: 100%;
}

/* Sticky footer. Short pages - the error pages, the imprint, an empty admin
   table - did not fill the viewport, so the footer floated wherever the content
   happened to end with dead space beneath it. Making the body a column and
   letting .sys-main take up the slack pins it to the bottom without pinning it
   over the content the way `position: fixed` would.

   Both viewport units are declared on purpose: 100dvh is what mobile browsers
   need so the address bar does not push the page into a scroll, and the 100vh
   line before it is the fallback for anything that does not know dvh. */
body {
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background-color: var(--sys-surface);
  color: var(--sys-text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}