/* n360-forms.css v1.2 - 3rd Sep 2026 - WCAG 2.2 batch 1: the default-theme palette remap moved to n360-tokens.css; component reskins stay  VERIFY-A11YB1-03SEP2026-K7WQD */
/* (was v1.1 - 24th Aug 2026 - switch knob fix  VERIFY-OND-S5-24AUG2026-J3XPW) */
/* v1.1 - BUG FIX, and it affected EVERY switch in the platform, not just one.
   The :focus rule below was written for "unchecked and focused" - its own comment
   said so - but the selector never said :not(:checked). So a switch that was
   focused AND on got a navy knob on a navy track and vanished. Clicking away
   restored it, which is why it read as a glitch that "sorted itself out".
   Found by KP on the discovery toggle in Platform Preferences, 24th Aug 2026.
   (was v1.0 - 17th Aug 2026 - default-theme control theming) */
/* ============================================================================
   N360 PLATFORM FORM CONTROLS - THE DEFAULT THEME

   WHY THIS FILE EXISTS
   n360-themes.css remaps Bootstrap's own palette onto the house palette, but
   every one of those rules is scoped [data-n360-theme] - and _Sidebar.cshtml
   only writes that attribute when the preset is NOT "default":

       @if (themePreset != "default") { ...setAttribute('data-n360-theme')... }

   So the three client presets are covered and N360 Default, the preset almost
   everyone is actually looking at, is the single case none of them reach.
   Bootstrap's stock #0d6efd therefore drives primary buttons, checkboxes,
   radios, switches, sliders, focus rings, links, pill tabs and the info
   palette on the default theme. n360-themes.css says as much in its own
   comment - "stray #0d6efd blues leak through on every page" - and then
   fixes it for the themed cases only.

   This file is the missing half. It mirrors the generic rules at the end of
   n360-themes.css, scoped to html:not([data-n360-theme]) so the two can never
   both apply: the attribute is either present or absent.

   HOUSE PALETTE (from n360-global.css / dashboard.css :root)
       --n360-primary   #005a84 light   #00bde7 dark
       --n360-cyan      #00bde7         the accent
       --n360-on-cyan   #003450         readable ink on an accent fill

   TWO DECISIONS MADE HERE, both cheap to overrule:

   1. --bs-primary follows --n360-primary, so it inverts to cyan in dark mode.
      That is right for TEXT and LINKS - #005a84 type on a dark surface is
      unreadable. It follows the precedent already set in n360-global.css
      (--bs-primary: var(--n360-primary)).

   2. Primary button FILLS stay #005a84 in both modes rather than following
      that inversion. A cyan fill needs dark ink and would be a large,
      untested visual change to every button in the platform. Navy reads
      cleanly on light and dark alike and matches the existing dark View
      buttons on the dashboard. Change the two fill blocks below if the
      inverted look is wanted.

   NO !important ANYWHERE. This sheet is linked from _Sidebar.cshtml, which
   renders in the body, so it loads AFTER every page's own head stylesheets
   and wins ties on order alone. Keep it that way - an !important here would
   also beat the Accent Colour preference's inline styles, which must win.
   ============================================================================ */


/* ── PALETTE REMAP ───────────────────────────────────────────────────────────
   v1.2: MOVED. --bs-primary / --bs-primary-rgb / the link pair / --n360-accent-rgb /
   --bs-info are declared in n360-tokens.css for the base palette (light and
   dark) and for every preset, so the default theme no longer needs its own
   scoped copy here. This sheet keeps the component reskins below. */


/* ── PRIMARY BUTTONS ─────────────────────────────────────────────────────────
   Bootstrap 5.3 bakes literal blues into .btn-primary's own component
   variables, so remapping --bs-primary above does NOT reach them. Hover and
   active are the standard 15% and 20% shades of #005a84. */
html:not([data-n360-theme]) .btn-primary {
    --bs-btn-bg: #005a84;
    --bs-btn-border-color: #005a84;
    --bs-btn-color: #fff;
    --bs-btn-hover-bg: #004c70;
    --bs-btn-hover-border-color: #004769;
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: #00486a;
    --bs-btn-active-border-color: #004363;
    --bs-btn-active-color: #fff;
    --bs-btn-disabled-bg: #005a84;
    --bs-btn-disabled-border-color: #005a84;
    --bs-btn-disabled-color: #fff;
}

/* Same treatment for outline-primary - the preferences page's UPLOAD and the
   Force White / White Plate / As-Is controls are these. */
html:not([data-n360-theme]) .btn-outline-primary {
    --bs-btn-color: var(--bs-primary);
    --bs-btn-border-color: var(--bs-primary);
    --bs-btn-hover-bg: var(--bs-primary);
    --bs-btn-hover-border-color: var(--bs-primary);
    --bs-btn-hover-color: #fff;
    --bs-btn-active-bg: var(--bs-primary);
    --bs-btn-active-border-color: var(--bs-primary);
    --bs-btn-active-color: #fff;
}

/* Focus shadow on the button families that use the primary ring. */
html:not([data-n360-theme]) .btn-primary,
html:not([data-n360-theme]) .btn-outline-primary,
html:not([data-n360-theme]) .btn-info {
    --bs-btn-focus-shadow-rgb: var(--bs-primary-rgb);
}

/* btn-check segmented groups - Export Scope and Live Search on the
   preferences page are these, and the checked segment is a .btn-primary,
   so the block above already carries it. This covers the outline variant. */
html:not([data-n360-theme]) .btn-check:checked + .btn-outline-primary,
html:not([data-n360-theme]) .btn-check:active + .btn-outline-primary {
    color: #fff;
}


/* ── CHECKBOXES, RADIOS AND SWITCHES ─────────────────────────────────────────
   .form-check-input is not variable-driven in 5.3 - the checked fill, the
   focus border and the switch knob are all literal blues in the compiled
   stylesheet, and the switch knob is a baked data URI. */
html:not([data-n360-theme]) .form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

html:not([data-n360-theme]) .form-check-input:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.18);
}

/* Solid knobs keep the OFF state readable, including during keyboard focus.
   Checked switches keep Bootstrap's white knob against the house dark fill. */
html:not([data-n360-theme]) .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23005a84'/%3e%3c/svg%3e");
}

html:not([data-n360-theme])[data-bs-theme="dark"] .form-switch .form-check-input:not(:checked) {
    --bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23dee2e6'/%3e%3c/svg%3e");
}

html:not([data-n360-theme]) .form-switch .form-check-input:checked {
    background-color: var(--n360-primary-fill);
    border-color: var(--n360-primary-fill);
}

html:not([data-n360-theme]) .form-check-input:indeterminate {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}


/* ── TEXT INPUTS, SELECTS AND THE NATIVE POPUP ───────────────────────────────
   accent-color tints checkboxes, radios, range thumbs and - in modern
   Chromium - the open select popup. option:checked covers the selected row
   where the browser honours it. Older browsers keep the native blue in the
   OPEN popup only; the only full fix is replacing native selects with custom
   dropdowns, which is not worth the accessibility trade. */
html:not([data-n360-theme]) .form-control:focus,
html:not([data-n360-theme]) .form-select:focus {
    border-color: rgba(var(--bs-primary-rgb), 0.55);
    box-shadow: 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.18);
}

html:not([data-n360-theme]) {
    accent-color: rgb(var(--bs-primary-rgb));
}

html:not([data-n360-theme]) select option:checked {
    background: rgb(var(--bs-primary-rgb)) linear-gradient(rgb(var(--bs-primary-rgb)), rgb(var(--bs-primary-rgb)));
    color: #fff;
}


/* ── RANGE SLIDERS ───────────────────────────────────────────────────────────
   Result Cap and Smart Search Sensitivity on the preferences page. The thumb
   needs both vendor pseudo-elements; they cannot be combined into one rule,
   because an unrecognised selector invalidates the whole list. */
html:not([data-n360-theme]) .form-range::-webkit-slider-thumb {
    background-color: var(--bs-primary);
}
html:not([data-n360-theme]) .form-range::-webkit-slider-thumb:active {
    background-color: rgba(var(--bs-primary-rgb), 0.55);
}
html:not([data-n360-theme]) .form-range::-moz-range-thumb {
    background-color: var(--bs-primary);
}
html:not([data-n360-theme]) .form-range::-moz-range-thumb:active {
    background-color: rgba(var(--bs-primary-rgb), 0.55);
}
html:not([data-n360-theme]) .form-range:focus::-webkit-slider-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}
html:not([data-n360-theme]) .form-range:focus::-moz-range-thumb {
    box-shadow: 0 0 0 1px var(--bs-body-bg), 0 0 0 0.25rem rgba(var(--bs-primary-rgb), 0.25);
}


/* ── PILL TABS AND PROGRESS ──────────────────────────────────────────────────
   Both bake their blue as a literal on the parent, exactly as the themed
   cases do at the top of n360-themes.css. */
html:not([data-n360-theme]) .nav-pills {
    --bs-nav-pills-link-active-bg: #005a84;
    --bs-nav-pills-link-active-color: #fff;
}

html:not([data-n360-theme]) .progress,
html:not([data-n360-theme]) .progress-stacked {
    --bs-progress-bar-bg: var(--bs-primary);
}


/* ── FOCUS RING UTILITY ──────────────────────────────────────────────────────
   v1.2: MOVED. --bs-focus-ring-color: rgba(var(--bs-primary-rgb), .25) is in
   n360-tokens.css at :root, so every preset gets a branded ring, not just the
   default. */


/* ── HAND CURSORS ────────────────────────────────────────────────────────────
   Native checkboxes, radios, switches and selects show an arrow by default,
   which reads as "not clickable" on a control that is. Labels only get the
   pointer when they are actually bound to a control - a bare .form-label
   above a text input is not clickable and must not pretend to be. */
html:not([data-n360-theme]) .form-check-input:not(:disabled),
html:not([data-n360-theme]) .form-check-input:not(:disabled) + .form-check-label,
select:not(:disabled):not([aria-disabled="true"]),
[data-bs-toggle="dropdown"]:not(:disabled):not(.disabled):not([aria-disabled="true"]),
html:not([data-n360-theme]) .form-range:not(:disabled),
html:not([data-n360-theme]) .btn:not(:disabled):not(.disabled),
html:not([data-n360-theme]) summary {
    cursor: pointer;
}