/* =====================================================================
   ImmunoLytics LIMS — design system
   Source of truth: "Immunolytics Logo Style Guide" (brand palette, Texta type).
   Everything page-level should use these tokens/classes; no raw hex in views.
   ===================================================================== */

/* ---------- 1. Brand tokens ---------- */
:root {
  /* Brand palette (style guide) */
  --il-blue:      #1B4387;   /* primary — text on white 9.7:1 */
  --il-turquoise: #008298;   /* secondary — white text 4.9:1 */
  --il-purple:    #993185;   /* tertiary — white text 6.5:1 */
  --il-green:     #8CC63F;   /* accent — use as fill with dark text only */
  --il-orange:    #F7931D;   /* accent — use as fill/border with dark text only (2.2:1 vs white) */
  --il-yellow:    #FFC20D;   /* accent — fill with dark text only */

  /* Neutrals (derived, style-guide gray family) */
  --il-ink:       #2B2D31;
  --il-ink-2:     #58595B;   /* reverse-logo gray from the guide */
  --il-ink-3:     #5F636B;   /* muted text — 5.9:1 on white so small/muted text still passes AA */
  --il-line:      #D9DDE2;
  --il-line-soft: #EEF1F4;
  --il-surface:   #FFFFFF;
  --il-surface-2: #F6F8FA;
  --il-surface-3: #EEF3F8;

  /* Tints for status fills (pass AA with --il-ink text) */
  --il-blue-tint:      #E3EAF5;
  --il-turquoise-tint: #DDF1F3;
  --il-purple-tint:    #F1E1EE;
  --il-green-tint:     #ECF6DB;
  --il-orange-tint:    #FDEBD6;
  --il-yellow-tint:    #FFF3C9;

  /* Semantic (the palette has no red; a compliant red is reserved for destructive/blocked) */
  --il-danger:      #B02A37;   /* white text 5.9:1 */
  --il-danger-tint: #F8E0E3;

  /* Typography: Texta (licensed, install locally) → Nunito Sans (open) → system */
  --il-font: "Texta", "Nunito Sans", "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --il-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --il-radius: 8px;
  --il-radius-sm: 5px;
  --il-shadow: 0 1px 2px rgba(27, 67, 135, .06), 0 4px 14px rgba(27, 67, 135, .08);
  --il-focus: 0 0 0 3px #fff, 0 0 0 5px var(--il-turquoise);

  /* Bootstrap 5.3 theme overrides */
  --bs-primary: var(--il-blue);
  --bs-primary-rgb: 27, 67, 135;
  --bs-secondary: var(--il-ink-2);
  --bs-success: #3F7D1E;              /* darker green so white text passes (5.1:1) */
  --bs-success-rgb: 63, 125, 30;
  --bs-info: var(--il-turquoise);
  --bs-info-rgb: 0, 130, 152;
  --bs-warning: var(--il-yellow);
  --bs-danger: var(--il-danger);
  --bs-danger-rgb: 176, 42, 55;
  --bs-body-color: var(--il-ink);
  --bs-body-bg: var(--il-surface-2);
  --bs-body-font-family: var(--il-font);
  --bs-link-color: var(--il-blue);
  --bs-link-color-rgb: 27, 67, 135;
  --bs-link-hover-color: var(--il-turquoise);
  --bs-link-hover-color-rgb: 0, 130, 152;
  --bs-border-color: var(--il-line);
  --bs-heading-color: var(--il-blue);
  /* Bootstrap's default secondary gray (#6c757d) is 4.4:1 on our off-white — below AA. */
  --bs-secondary-color: var(--il-ink-2);
  --bs-secondary-rgb: 88, 89, 91;
  --bs-tertiary-color: var(--il-ink-3);
}
.btn-outline-secondary { --bs-btn-color: var(--il-ink-2); --bs-btn-border-color: #9AA0A6; --bs-btn-hover-bg: var(--il-ink-2); --bs-btn-hover-border-color: var(--il-ink-2); --bs-btn-active-bg: var(--il-ink-2); --bs-btn-active-border-color: var(--il-ink-2); }
.btn-secondary { --bs-btn-bg: var(--il-ink-2); --bs-btn-border-color: var(--il-ink-2); --bs-btn-hover-bg: #46474A; --bs-btn-hover-border-color: #46474A; }
.form-text, .text-secondary { color: var(--il-ink-3) !important; }

/* ---------- 2. Base ---------- */
html { font-size: 15px; position: relative; min-height: 100%; }
@media (min-width: 992px) { html { font-size: 16px; } }
body { margin-bottom: 64px; font-family: var(--il-font); color: var(--il-ink); background: var(--il-body-bg, var(--il-surface-2)); -webkit-font-smoothing: antialiased; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 700; letter-spacing: -.01em; color: var(--il-blue); }
h1 small, .h3 small { color: var(--il-ink-3); font-weight: 400; }
a { text-decoration-thickness: from-font; text-underline-offset: .12em; }
main a:not(.btn):not(.nav-link):not(.navbar-brand):hover { text-decoration: underline; }
code, kbd, pre { font-family: var(--il-font-mono); }

/* Focus: always visible, consistent, high-contrast (WCAG 2.4.7 / 2.4.11) */
:focus { outline: none; }
:focus-visible, .btn:focus-visible, .form-control:focus, .form-select:focus, .form-check-input:focus,
.nav-link:focus-visible, .navbar-brand:focus-visible, a:focus-visible, button:focus-visible, [tabindex]:focus-visible {
  outline: none;
  box-shadow: var(--il-focus) !important;
  border-color: var(--il-turquoise);
}
input.res:focus, input.detail-input:focus { box-shadow: var(--il-focus) !important; }

/* Skip link (WCAG 2.4.1) */
.skip-link { position: absolute; left: -999px; top: .5rem; z-index: 2000; background: var(--il-blue); color: #fff; padding: .5rem .9rem; border-radius: var(--il-radius-sm); font-weight: 700; }
.skip-link:focus { left: .5rem; outline: none; box-shadow: var(--il-focus); }

/* Motion & contrast preferences */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } }
@media (forced-colors: active) { .btn, .badge, .flag-pill { border: 1px solid CanvasText; } }

/* Field help: a circled "i" beside a label. Shows the same text as the label's hover title on hover,
   keyboard focus or tap (Bootstrap tooltip, initialised in site.js). Owner request 2026-09-21. */
.il-help { display: inline-flex; align-items: center; justify-content: center; width: 1.05em; height: 1.05em; margin-left: .3em;
  border-radius: 50%; border: 1px solid var(--il-turquoise); color: var(--il-turquoise); background: #fff;
  font-size: .72em; font-weight: 700; font-style: normal; line-height: 1; vertical-align: .12em; cursor: help; user-select: none; }
.il-help:hover, .il-help:focus-visible { background: var(--il-turquoise); color: #fff; outline: none; box-shadow: var(--il-focus); }
.tooltip { --bs-tooltip-bg: var(--il-blue); --bs-tooltip-max-width: 320px; --bs-tooltip-font-size: .82rem; }

/* Back-to-top button (lab request 2026-09-22): fixed bottom-right, shown by site.js once the page is scrolled. */
.il-totop { position: fixed; right: 1.25rem; bottom: 1.25rem; z-index: 1030; width: 2.75rem; height: 2.75rem; border-radius: 50%;
  border: 0; background: var(--il-blue); color: #fff; font-size: 1.35rem; font-weight: 700; line-height: 1;
  box-shadow: 0 4px 14px rgba(27, 67, 135, .35); cursor: pointer; opacity: .92; transition: opacity .15s, transform .15s; }
.il-totop:hover, .il-totop:focus-visible { opacity: 1; transform: translateY(-2px); outline: none; box-shadow: var(--il-focus), 0 4px 14px rgba(27, 67, 135, .35); }
.il-totop[hidden] { display: none; }
@media (prefers-reduced-motion: reduce) { .il-totop { transition: none; } }
@media print { .il-totop { display: none !important; } }

/* Minimum target size for icon-only controls (WCAG 2.5.8) */
.icon-btn { min-width: 24px; min-height: 24px; display: inline-flex; align-items: center; justify-content: center; }

/* ---------- 3. Header / navigation ---------- */
.il-header { background: var(--il-surface); border-bottom: 1px solid var(--il-line); }
.il-brand { display: flex; align-items: center; gap: .75rem; padding: .55rem 0; text-decoration: none; }
.il-brand img { height: 40px; width: auto; display: block; }
.il-brand .il-app { font-weight: 700; color: var(--il-blue); font-size: 1.05rem; letter-spacing: .02em; border-left: 1px solid var(--il-line); padding-left: .75rem; line-height: 1.1; }
.il-brand .il-app small { display: block; font-weight: 400; font-size: .68rem; color: var(--il-ink-3); letter-spacing: .08em; text-transform: uppercase; }
.il-nav { background: var(--il-blue);
  /* Bootstrap navbar color hooks — keep every state white on brand blue (12.6:1) */
  --bs-navbar-color: #fff; --bs-navbar-hover-color: #fff; --bs-navbar-active-color: #fff; --bs-navbar-disabled-color: rgba(255,255,255,.55);
  --bs-navbar-brand-color: #fff; --bs-navbar-brand-hover-color: #fff; }
.il-nav .nav-link, .il-nav .nav-link.active, .il-nav .nav-link:hover { color: #fff; }
.il-nav .nav-link { font-weight: 600; padding: .6rem .9rem; border-bottom: 3px solid transparent; }
.il-nav .nav-link:hover, .il-nav .nav-link:focus-visible { color: #fff; background: rgba(255, 255, 255, .08); }
.il-nav .nav-link.active { border-bottom-color: var(--il-orange); }
.il-nav .navbar-text { color: rgba(255, 255, 255, .85); }
.il-nav .navbar-toggler { border-color: rgba(255, 255, 255, .5); }
.il-nav .navbar-toggler-icon { filter: invert(1) grayscale(1) brightness(2); }
/* Grouped navigation (§17.2): dropdown groups on brand blue; the parent shows the orange marker when a child is current. */
.il-nav .dropdown-menu { border: 1px solid var(--il-line); border-radius: var(--il-radius-sm); box-shadow: 0 8px 24px rgba(27, 67, 135, .18); padding: .35rem 0; min-width: 12rem; margin-top: 0; }
.il-nav .dropdown-item { font-weight: 600; color: var(--il-blue); padding: .45rem 1rem; }
.il-nav .dropdown-item:hover, .il-nav .dropdown-item:focus-visible { background: var(--il-blue-tint); color: var(--il-blue); }
.il-nav .dropdown-item.active { background: var(--il-surface-3); color: var(--il-blue); box-shadow: inset 3px 0 0 var(--il-orange); }
.il-nav .dropdown-item-text { color: var(--il-ink-3); padding: .25rem 1rem; }
.il-nav .il-user { display: inline-flex; align-items: center; gap: .5rem; }
.il-nav .il-avatar { width: 26px; height: 26px; border-radius: 50%; background: var(--il-turquoise); color: #fff; font-size: .8rem; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.il-nav .il-jump .form-control { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .35); color: #fff; }
.il-nav .il-jump .form-control::placeholder { color: rgba(255, 255, 255, .7); }
.il-nav .il-jump .form-control:focus { background: #fff; color: var(--il-ink); border-color: var(--il-orange); box-shadow: 0 0 0 .2rem rgba(247, 147, 29, .35); }
@media (max-width: 767.98px) {
  .il-nav .dropdown-menu { background: rgba(255, 255, 255, .08); border: 0; box-shadow: none; }
  .il-nav .dropdown-item, .il-nav .dropdown-item-text { color: #fff; }
  .il-nav .dropdown-item:hover, .il-nav .dropdown-item.active { background: rgba(255, 255, 255, .14); color: #fff; }
  .il-nav .il-jump { margin: .5rem 0; }
}
.il-tagline { font-style: italic; color: var(--il-ink-3); }

/* ---------- 3b. Per-user appearance preferences (My Account) ---------- */
html.ts-large { font-size: 112.5%; }                   /* 18px base; everything in rem scales with it */
html.ts-xlarge { font-size: 125%; }                    /* 20px — UAT 2026-09-21: more steps, per user */
html.ts-xxlarge { font-size: 140%; }                   /* 22.4px */
html.ts-huge { font-size: 160%; }                      /* 25.6px */
html.hc { --il-ink-3: #3F434A; --il-line: #9AA1AA; --il-line-soft: #C9CED5; --il-surface-2: #FFFFFF; --il-surface-3: #E4EBF3; }
html.hc body { color: #000; }
html.hc .btn, html.hc .form-control, html.hc .form-select, html.hc .card, html.hc .table { border-color: #6B717A; }
html.hc a:not(.btn):not(.nav-link):not(.dropdown-item) { text-decoration: underline; }
html.hc .text-muted { color: #3F434A !important; }

/* ---------- 4. Buttons ---------- */
.btn { border-radius: var(--il-radius-sm); font-weight: 600; }
.btn-brand { background: var(--il-blue); border-color: var(--il-blue); color: #fff; }
.btn-brand:hover, .btn-brand:focus-visible { background: #153670; border-color: #153670; color: #fff; }
.btn-brand:disabled, .btn-brand.disabled { background: var(--il-blue); border-color: var(--il-blue); color: #fff; opacity: .55; }
.btn-brand-secondary { background: var(--il-turquoise); border-color: var(--il-turquoise); color: #fff; }
.btn-brand-secondary:hover, .btn-brand-secondary:focus-visible { background: #006B7D; border-color: #006B7D; color: #fff; }
.btn-brand-accent { background: var(--il-orange); border-color: var(--il-orange); color: var(--il-ink); }   /* dark text on orange: 7.9:1 */
.btn-brand-accent:hover, .btn-brand-accent:focus-visible { background: #E27F0C; border-color: #E27F0C; color: var(--il-ink); }
.btn-outline-brand { color: var(--il-blue); border-color: var(--il-blue); }
.btn-outline-brand:hover { background: var(--il-blue); color: #fff; }
.btn-primary { --bs-btn-bg: var(--il-blue); --bs-btn-border-color: var(--il-blue); --bs-btn-hover-bg: #153670; --bs-btn-hover-border-color: #153670; }
.btn-outline-primary { --bs-btn-color: var(--il-blue); --bs-btn-border-color: var(--il-blue); --bs-btn-hover-bg: var(--il-blue); --bs-btn-hover-border-color: var(--il-blue); }
.btn-success { --bs-btn-bg: #3F7D1E; --bs-btn-border-color: #3F7D1E; --bs-btn-hover-bg: #346819; --bs-btn-hover-border-color: #346819; }
.btn-outline-success { --bs-btn-color: #3F7D1E; --bs-btn-border-color: #3F7D1E; --bs-btn-hover-bg: #3F7D1E; --bs-btn-hover-border-color: #3F7D1E; }
.btn-danger { --bs-btn-bg: var(--il-danger); --bs-btn-border-color: var(--il-danger); }
.btn-outline-danger { --bs-btn-color: var(--il-danger); --bs-btn-border-color: var(--il-danger); --bs-btn-hover-bg: var(--il-danger); --bs-btn-hover-border-color: var(--il-danger); }

/* ---------- 5. Cards, section labels, tables ---------- */
.card { border: 1px solid var(--il-line); border-radius: var(--il-radius); box-shadow: var(--il-shadow); background: var(--il-surface); }
.card-header { background: var(--il-surface-2); border-bottom: 1px solid var(--il-line); }
.card-header-brand { background: var(--il-blue) !important; color: #fff !important; font-size: .78rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; border-bottom: 0; }
.card-header-brand a { color: #fff; }
.card-header-section { background: var(--il-surface-3) !important; color: var(--il-blue) !important; font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
.card-header-status { font-size: .8rem; text-transform: uppercase; font-weight: 700; background: var(--il-surface-3); color: var(--il-blue); }
.card-header-status.is-danger { background: var(--il-danger); color: #fff; }
.section-label { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--il-blue); }
.text-plain { text-transform: none !important; font-weight: 400 !important; letter-spacing: 0 !important; }
.table { --bs-table-striped-bg: var(--il-surface-2); --bs-table-hover-bg: var(--il-blue-tint); }
.table thead th { color: var(--il-blue); font-weight: 700; border-bottom: 2px solid var(--il-line); background: var(--il-surface); }
/* Links inside tables/lists get a 24px hit target (WCAG 2.5.8) without changing the visual layout */
.table td a:not(.btn), .list-unstyled a:not(.btn), dd a:not(.btn) { display: inline-block; min-height: 24px; line-height: 24px; padding: 0 .15rem; }
.breadcrumb { font-size: .9rem; }
.breadcrumb-item.active { color: var(--il-ink-3); }
.nav-tabs .nav-link { color: var(--il-ink-2); }
.nav-tabs .nav-link.active { color: var(--il-blue); font-weight: 700; border-bottom-color: #fff; }
.form-label { color: var(--il-ink-2); }
.form-control, .form-select { border-color: var(--il-line); border-radius: var(--il-radius-sm); }
.alert { border-radius: var(--il-radius); }
.alert-success { --bs-alert-bg: var(--il-green-tint); --bs-alert-border-color: var(--il-green); --bs-alert-color: #2E5A15; }
.alert-danger { --bs-alert-bg: var(--il-danger-tint); --bs-alert-border-color: var(--il-danger); --bs-alert-color: #7A1F2B; }
.alert-warning { --bs-alert-bg: var(--il-yellow-tint); --bs-alert-border-color: var(--il-yellow); --bs-alert-color: #6B4E00; }
.alert-info { --bs-alert-bg: var(--il-turquoise-tint); --bs-alert-border-color: var(--il-turquoise); --bs-alert-color: #005A69; }
.alert-light { background: var(--il-surface-2); border-color: var(--il-line); color: var(--il-ink-2); }
.text-muted { color: var(--il-ink-3) !important; }

/* Status badges: brand fills with dark text (all ≥ 4.5:1) */
.badge { font-weight: 700; letter-spacing: .02em; }
.badge.bg-info      { background: var(--il-turquoise) !important; color: #fff; }
.badge.bg-primary   { background: var(--il-blue) !important; color: #fff; }
.badge.bg-success   { background: var(--il-green) !important; color: var(--il-ink) !important; }
.badge.bg-secondary { background: var(--il-line) !important; color: var(--il-ink-2) !important; }
.badge.bg-danger    { background: var(--il-danger) !important; color: #fff; }
.badge.bg-warning   { background: var(--il-yellow) !important; color: var(--il-ink) !important; }

/* Workorder list flag pills (A/C/R) */
.flag-pill { display: inline-block; min-width: 1.5rem; text-align: center; font-size: .7rem; font-weight: 700; border-radius: .35rem; padding: .12rem .35rem; }
.flag-on  { background: var(--il-blue); color: #fff; }
.flag-off { background: var(--il-line-soft); color: var(--il-ink-3); }
.flag-hold { background: var(--il-danger); color: #fff; margin-left: .3rem; }

/* ---------- 6. Footer ---------- */
.footer { position: absolute; bottom: 0; width: 100%; line-height: 64px; white-space: nowrap; border-top: 1px solid var(--il-line); color: var(--il-ink-3); font-size: .85rem; background: var(--il-surface); }
.footer .il-tagline { margin-left: .5rem; }

/* ---------- 7. Print ---------- */
@media print {
  .il-nav, .skip-link, .footer, .btn, form.d-flex, .presence-banner, .conflict-banner { display: none !important; }
  body { background: #fff; margin: 0; }
  .card { box-shadow: none; border-color: #999; }
  a { color: inherit; text-decoration: none; }
}