/* ═══════════════════════════════════════════════════════════════════════════
   TYLER SKIN — "Enterprise Justice" institutional theme for JusticeLink
   ---------------------------------------------------------------------------
   Loads AFTER oceanview.css and is inert until <html> carries
   data-skin="tyler". It re-skins the whole app the same way the Oceanview
   Bootstrap bridge does: by repointing the --ov-* tokens the bridge already
   feeds into every --bs-* variable. No template needs new classes to change
   colour — only the chrome (masthead, menu strip, status bar) uses the new
   .tyx-* components.

   DESIGN TARGET: the county court case-management look — Tyler Odyssey /
   Enterprise Justice-style. Light institutional surfaces, navy masthead,
   steel-blue panel headers, dense 13px data grids, squared corners. This is
   deliberately *government software*, not a marketing site: density and
   legibility over whitespace, and nothing animates.

   STRUCTURE
     1. Token overrides       — light institutional palette
     2. Bootstrap literals    — the -rgb triplets the bridge hardcodes
     3. Base density          — type scale, headings, links, tables, forms
     4. Legacy dark classes   — bg-dark/table-dark/text-white remapped
     5. Chrome components     — .tyx-masthead / menubar / crumbs / statusbar
     6. Content components    — panels, grids, tiles, case band, pills
     7. Print

   NO EXTERNAL RESOURCES. System font stacks only (Segoe UI first: these
   screens should look like the Windows terminal apps they are imitating).
   ═══════════════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════════════════════════════════════
   1. TOKEN OVERRIDES
   Specificity (0,1,1) beats the :root definitions in oceanview.css (0,1,0).
   Every --bs-* var the bridge maps through these follows automatically.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-skin="tyler"] {
  color-scheme: light;

  /* ── brand ──────────────────────────────────────────────────────────────
     Navy is the masthead and primary action colour; the steel accent is the
     link/detail blue. Both are the classic court-software register.        */
  --tyx-navy:        #16365C;   /* masthead, primary buttons               */
  --tyx-navy-deep:   #0F2645;   /* masthead lower edge, active menu        */
  --tyx-steel:       #1D5FAE;   /* links, focus, selected tab              */
  --tyx-steel-deep:  #17497F;
  --tyx-gold:        #C8A44B;   /* seal + masthead rule, used sparingly    */
  --tyx-panel-head-a:#EDF1F7;   /* panel header gradient top               */
  --tyx-panel-head-b:#DCE4EE;   /* panel header gradient bottom            */

  /* ── surfaces ─────────────────────────────────────────────────────────── */
  --ov-surface-sunk:    #F1F3F7;   /* inputs, wells, table stripes         */
  --ov-surface-page:    #E7EAEF;   /* the page behind the panels           */
  --ov-surface-raised:  #FFFFFF;   /* cards, panels, grids                 */
  --ov-surface-overlay: #FFFFFF;   /* dropdowns, modals                    */
  --ov-surface-hover:   rgba(29, 95, 174, 0.07);
  --ov-surface-active:  rgba(29, 95, 174, 0.12);

  --ov-border:          #B9C2CE;
  --ov-border-soft:     #D6DCE4;
  --ov-border-strong:   #8D99A8;

  /* ── text ── all measured on #FFFFFF ──────────────────────────────────────
       primary   #1B2430  15.4:1
       secondary #46515F   7.6:1
       muted     #5F6B7A   5.2:1                                            */
  --ov-text-primary:    #1B2430;
  --ov-text-secondary:  #46515F;
  --ov-text-muted:      #5F6B7A;
  --ov-text-on-accent:  #FFFFFF;
  --ov-text-inverse:    #FFFFFF;

  /* ── accent ── steel blue; 4.9:1 on white as text ─────────────────────── */
  --ov-accent:          #1D5FAE;
  --ov-accent-hover:    #2568BC;
  --ov-accent-active:   #17497F;
  --ov-accent-text:     #17497F;   /* 6.6:1 on white                       */
  --ov-accent-subtle:   rgba(29, 95, 174, 0.10);
  --ov-accent-line:     rgba(29, 95, 174, 0.45);
  --ov-brand-primary:   #1D5FAE;
  --ov-brand-primary-rgb: 29, 95, 174;

  /* ── status ── same six buckets, light-theme values.
       Text values clear 4.5:1 on white AND on their own -bg tint.          */
  --ov-status-critical:     #B3261E;
  --ov-status-critical-bg:  #FAE9E8;
  --ov-status-caution:      #7A5300;
  --ov-status-caution-bg:   #FBF1D8;
  --ov-status-positive:     #1E6F33;
  --ov-status-positive-bg:  #E6F2E9;
  --ov-status-info:         #17497F;
  --ov-status-info-bg:      #E7EFF9;
  --ov-status-adjudicated:  #5E3796;
  --ov-status-adjudicated-bg:#EFE9F8;
  --ov-status-neutral:      #4E5866;
  --ov-status-neutral-bg:   #ECEFF3;

  /* ── type ── the register IS the density. 13px body, tighter leading.   */
  --ov-font-sans: "Segoe UI", Tahoma, Arial, "Helvetica Neue", sans-serif;
  --ov-font-mono: Consolas, "Cascadia Mono", "Courier New", monospace;
  --ov-text-md:   0.8125rem;      /* 13px                                  */
  --ov-leading-normal: 1.45;

  /* ── geometry ── court software is squared. ───────────────────────────── */
  --ov-radius-sm:   1px;
  --ov-radius-md:   2px;
  --ov-radius-lg:   3px;
  --ov-radius-xl:   3px;
  --ov-radius-pill: 2px;

  --ov-shadow-1: 0 1px 2px rgba(15, 38, 69, 0.10);
  --ov-shadow-2: 0 1px 3px rgba(15, 38, 69, 0.14);
  --ov-shadow-3: 0 4px 14px rgba(15, 38, 69, 0.18);
}


/* ═══════════════════════════════════════════════════════════════════════════
   2. BOOTSTRAP LITERALS
   The bridge writes these as literal channel triplets (Bootstrap feeds them
   to rgba()), so overriding the tokens alone is not enough. (0,2,1) beats
   the bridge's (0,2,0).
   ═══════════════════════════════════════════════════════════════════════════ */

:root[data-ov-bridge~="bootstrap"][data-skin="tyler"] {
  --bs-body-bg-rgb:    231, 234, 239;
  --bs-body-color-rgb:  27,  36,  48;
  --bs-primary-rgb:     29,  95, 174;
  --bs-link-color-rgb:  23,  73, 127;
  --bs-success-rgb:     30, 111,  51;
  --bs-danger-rgb:     179,  38,  30;
  --bs-warning-rgb:    122,  83,   0;
  --bs-info-rgb:        23,  73, 127;
  --bs-link-hover-color: var(--tyx-steel);
  /* Bootstrap light-theme internals that the dark bridge never had to set. */
  --bs-secondary-bg-subtle: #ECEFF3;
  --bs-dark-rgb:        22,  54,  92;   /* .bg-dark → navy, see §4         */
  --bs-light-rgb:      241, 243, 247;
}


/* ═══════════════════════════════════════════════════════════════════════════
   3. BASE DENSITY
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-skin="tyler"] body {
  background: var(--ov-surface-page);
  color: var(--ov-text-primary);
  font-family: var(--ov-font-sans);
  font-size: var(--ov-text-md);
  letter-spacing: 0.1px;
}

/* Headings step down hard: an h1 in a records system is a screen title,
   not a headline. */
html[data-skin="tyler"] h1, html[data-skin="tyler"] .h1 { font-size: 1.35rem; font-weight: 600; color: var(--tyx-navy); }
html[data-skin="tyler"] h2, html[data-skin="tyler"] .h2 { font-size: 1.15rem; font-weight: 600; color: var(--tyx-navy); }
html[data-skin="tyler"] h3, html[data-skin="tyler"] .h3 { font-size: 1.02rem; font-weight: 600; }
html[data-skin="tyler"] h4, html[data-skin="tyler"] .h4 { font-size: 0.95rem; font-weight: 600; }
html[data-skin="tyler"] h5, html[data-skin="tyler"] .h5 { font-size: 0.875rem; font-weight: 600; }
html[data-skin="tyler"] h6, html[data-skin="tyler"] .h6 { font-size: 0.8125rem; font-weight: 600; }
html[data-skin="tyler"] .lead { font-size: 0.9rem; }

html[data-skin="tyler"] a { color: var(--ov-accent-text); text-decoration: none; }
html[data-skin="tyler"] a:hover { color: var(--tyx-steel); text-decoration: underline; }
/* …but never inside buttons, navs or list-group items, where underline is noise */
html[data-skin="tyler"] .btn:hover, html[data-skin="tyler"] .nav-link:hover,
html[data-skin="tyler"] .dropdown-item:hover, html[data-skin="tyler"] .list-group-item:hover,
html[data-skin="tyler"] .navbar-brand:hover, html[data-skin="tyler"] .page-link:hover
  { text-decoration: none; }

/* ── cards → institutional panels ─────────────────────────────────────────
   White, hard 1px border, steel gradient header with navy small-caps title.
   This single rule is most of the "Tyler look" on the 40 existing pages.  */
html[data-skin="tyler"] .card {
  background: var(--ov-surface-raised);
  border: 1px solid var(--ov-border);
  border-radius: var(--ov-radius-md);
  box-shadow: var(--ov-shadow-1);
}
html[data-skin="tyler"] .card-header {
  background: linear-gradient(var(--tyx-panel-head-a), var(--tyx-panel-head-b));
  border-bottom: 1px solid var(--ov-border);
  color: var(--tyx-navy);
  font-size: 0.8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  padding: 0.4rem 0.75rem;
}
html[data-skin="tyler"] .card-header .btn { text-transform: none; letter-spacing: 0; }
html[data-skin="tyler"] .card-footer {
  background: var(--ov-surface-sunk);
  border-top: 1px solid var(--ov-border-soft);
  padding: 0.35rem 0.75rem;
}
html[data-skin="tyler"] .card-body { padding: 0.75rem; }
/* Bootstrap "shadow" utilities scream on a light theme; mute them. */
html[data-skin="tyler"] .shadow,
html[data-skin="tyler"] .shadow-lg,
html[data-skin="tyler"] .shadow-sm { box-shadow: var(--ov-shadow-1) !important; }

/* ── tables → data grids ─────────────────────────────────────────────────── */
html[data-skin="tyler"] .table {
  --bs-table-bg: var(--ov-surface-raised);
  --bs-table-color: var(--ov-text-primary);
  --bs-table-border-color: var(--ov-border-soft);
  --bs-table-striped-bg: #F6F8FB;
  --bs-table-striped-color: var(--ov-text-primary);
  --bs-table-hover-bg: #EBF1F9;
  --bs-table-hover-color: var(--ov-text-primary);
  font-size: 0.8rem;
  margin-bottom: 0.5rem;
}
html[data-skin="tyler"] .table > :not(caption) > * > * { padding: 0.3rem 0.55rem; }
html[data-skin="tyler"] .table thead th {
  background: #E4E9F0;
  color: #2B3A4E;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  border-bottom: 1px solid var(--ov-border);
  white-space: nowrap;
}
html[data-skin="tyler"] .table tbody { border-top: 1px solid var(--ov-border); }

/* ── forms ── compact, squared, classic focus ring ───────────────────────── */
html[data-skin="tyler"] .form-control,
html[data-skin="tyler"] .form-select,
html[data-skin="tyler"] .select2-container--bootstrap-5 .select2-selection {
  background-color: #FFFFFF;
  border: 1px solid var(--ov-border-strong);
  border-radius: var(--ov-radius-sm);
  color: var(--ov-text-primary);
  font-size: 0.8125rem;
  padding: 0.28rem 0.5rem;
  min-height: 0;
}
html[data-skin="tyler"] .form-control:focus,
html[data-skin="tyler"] .form-select:focus {
  border-color: var(--tyx-steel);
  box-shadow: 0 0 0 2px rgba(29, 95, 174, 0.25);
  background-color: #FFFFFF;
  color: var(--ov-text-primary);
}
html[data-skin="tyler"] .form-control::placeholder { color: var(--ov-text-muted); }
html[data-skin="tyler"] .form-label,
html[data-skin="tyler"] label.col-form-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.3px;
  color: #3A4756;
  margin-bottom: 0.15rem;
}
html[data-skin="tyler"] .form-text { color: var(--ov-text-muted); }
html[data-skin="tyler"] .input-group-text {
  background: var(--ov-surface-sunk);
  border: 1px solid var(--ov-border-strong);
  border-radius: var(--ov-radius-sm);
  font-size: 0.78rem;
}

/* ── buttons ── compact; primary is navy, default is the gray workstation
   button every records clerk has clicked ten thousand times. ─────────────── */
html[data-skin="tyler"] .btn {
  border-radius: var(--ov-radius-md);
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.28rem 0.75rem;
  letter-spacing: 0.2px;
}
html[data-skin="tyler"] .btn-lg { font-size: 0.9rem; padding: 0.45rem 1.1rem; }
html[data-skin="tyler"] .btn-sm { font-size: 0.72rem; padding: 0.18rem 0.5rem; }
html[data-skin="tyler"] .btn-primary {
  --bs-btn-bg: var(--tyx-navy);
  --bs-btn-border-color: var(--tyx-navy-deep);
  --bs-btn-color: #FFFFFF;
  --bs-btn-hover-bg: #1C4272;
  --bs-btn-hover-border-color: var(--tyx-navy-deep);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-active-bg: var(--tyx-navy-deep);
  --bs-btn-active-border-color: var(--tyx-navy-deep);
  --bs-btn-active-color: #FFFFFF;
  --bs-btn-disabled-bg: #8D99A8;
  --bs-btn-disabled-border-color: #8D99A8;
}
html[data-skin="tyler"] .btn-primary:hover { background-color: #1C4272; border-color: var(--tyx-navy-deep); }
html[data-skin="tyler"] .btn-secondary,
html[data-skin="tyler"] .btn-light {
  --bs-btn-bg: #F3F5F8;
  --bs-btn-border-color: var(--ov-border-strong);
  --bs-btn-color: #2B3A4E;
  --bs-btn-hover-bg: #E4E9F0;
  --bs-btn-hover-border-color: var(--ov-border-strong);
  --bs-btn-hover-color: #1B2430;
  --bs-btn-active-bg: #D8DFE8;
  --bs-btn-active-border-color: var(--ov-border-strong);
  --bs-btn-active-color: #1B2430;
}
html[data-skin="tyler"] .btn-outline-primary {
  --bs-btn-color: var(--tyx-steel-deep);
  --bs-btn-border-color: var(--tyx-steel);
  --bs-btn-hover-bg: var(--tyx-steel);
  --bs-btn-hover-color: #FFFFFF;
  --bs-btn-hover-border-color: var(--tyx-steel);
  --bs-btn-active-bg: var(--tyx-steel-deep);
  --bs-btn-active-color: #FFFFFF;
}
html[data-skin="tyler"] .btn-outline-secondary,
html[data-skin="tyler"] .btn-outline-light,
html[data-skin="tyler"] .btn-outline-dark {
  --bs-btn-color: #3A4756;
  --bs-btn-border-color: var(--ov-border-strong);
  --bs-btn-hover-bg: #E4E9F0;
  --bs-btn-hover-color: #1B2430;
  --bs-btn-hover-border-color: var(--ov-border-strong);
  --bs-btn-active-bg: #D8DFE8;
  --bs-btn-active-color: #1B2430;
  --bs-btn-active-border-color: var(--ov-border-strong);
}

/* ── badges → rectangular status chips with a border, so a printed or
   greyscale copy still reads. ─────────────────────────────────────────────── */
html[data-skin="tyler"] .badge {
  border-radius: var(--ov-radius-sm);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0.22em 0.5em;
  border: 1px solid transparent;
}
html[data-skin="tyler"] .badge.bg-success { background: var(--ov-status-positive-bg) !important; color: var(--ov-status-positive) !important; border-color: var(--ov-status-positive); }
html[data-skin="tyler"] .badge.bg-danger  { background: var(--ov-status-critical-bg) !important; color: var(--ov-status-critical) !important; border-color: var(--ov-status-critical); }
html[data-skin="tyler"] .badge.bg-warning { background: var(--ov-status-caution-bg)  !important; color: var(--ov-status-caution)  !important; border-color: var(--ov-status-caution); }
html[data-skin="tyler"] .badge.bg-info    { background: var(--ov-status-info-bg)     !important; color: var(--ov-status-info)     !important; border-color: var(--ov-status-info); }
html[data-skin="tyler"] .badge.bg-primary { background: var(--ov-accent-subtle)      !important; color: var(--tyx-steel-deep)     !important; border-color: var(--tyx-steel); }
html[data-skin="tyler"] .badge.bg-secondary { background: var(--ov-status-neutral-bg) !important; color: var(--ov-status-neutral) !important; border-color: var(--ov-status-neutral); }
/* Bootstrap 5.3's text-bg-* helpers set their own solid fill + white text;
   fold them into the same bordered-chip language. */
html[data-skin="tyler"] .badge.text-bg-success { background: var(--ov-status-positive-bg) !important; color: var(--ov-status-positive) !important; border-color: var(--ov-status-positive); }
html[data-skin="tyler"] .badge.text-bg-danger  { background: var(--ov-status-critical-bg) !important; color: var(--ov-status-critical) !important; border-color: var(--ov-status-critical); }
html[data-skin="tyler"] .badge.text-bg-warning { background: var(--ov-status-caution-bg)  !important; color: var(--ov-status-caution)  !important; border-color: var(--ov-status-caution); }
html[data-skin="tyler"] .badge.text-bg-info    { background: var(--ov-status-info-bg)     !important; color: var(--ov-status-info)     !important; border-color: var(--ov-status-info); }
html[data-skin="tyler"] .badge.text-bg-primary { background: var(--ov-accent-subtle)      !important; color: var(--tyx-steel-deep)     !important; border-color: var(--tyx-steel); }
html[data-skin="tyler"] .badge.text-bg-secondary,
html[data-skin="tyler"] .badge.text-bg-light,
html[data-skin="tyler"] .badge.text-bg-dark { background: var(--ov-status-neutral-bg) !important; color: var(--ov-status-neutral) !important; border-color: var(--ov-status-neutral); }

/* ── dropdown menus / modals / list groups / pagination ──────────────────── */
html[data-skin="tyler"] .dropdown-menu {
  background: #FFFFFF;
  border: 1px solid var(--ov-border-strong);
  border-radius: var(--ov-radius-md);
  box-shadow: var(--ov-shadow-3);
  font-size: 0.8rem;
  padding: 0.2rem 0;
}
html[data-skin="tyler"] .dropdown-item { color: var(--ov-text-primary); padding: 0.3rem 0.9rem; }
html[data-skin="tyler"] .dropdown-item:hover,
html[data-skin="tyler"] .dropdown-item:focus { background: var(--tyx-steel); color: #FFFFFF; }
html[data-skin="tyler"] .dropdown-divider { border-color: var(--ov-border-soft); }
html[data-skin="tyler"] .modal-content {
  background: #FFFFFF;
  border: 1px solid var(--ov-border-strong);
  border-radius: var(--ov-radius-lg);
}
html[data-skin="tyler"] .modal-header {
  background: var(--tyx-navy);
  color: #FFFFFF;
  border-radius: 0;
  padding: 0.5rem 0.9rem;
}
html[data-skin="tyler"] .modal-header .modal-title { font-size: 0.9rem; font-weight: 600; }
html[data-skin="tyler"] .modal-header .btn-close { filter: invert(1) grayscale(100%) brightness(200%); }
html[data-skin="tyler"] .list-group-item {
  background: #FFFFFF;
  border-color: var(--ov-border-soft);
  color: var(--ov-text-primary);
  font-size: 0.8rem;
  padding: 0.4rem 0.75rem;
}
html[data-skin="tyler"] .list-group-item-action:hover { background: var(--ov-surface-hover); }
/* The -dark list variant forced a dark row surface; on the light theme it is
   just an ordinary row. */
html[data-skin="tyler"] .list-group-item-dark {
  background: var(--ov-surface-raised);
  color: var(--ov-text-primary);
  border-color: var(--ov-border-soft);
}
html[data-skin="tyler"] .list-group-item-dark.list-group-item-action:hover,
html[data-skin="tyler"] .list-group-item-dark.list-group-item-action:focus {
  background: var(--ov-surface-hover);
  color: var(--ov-text-primary);
}
html[data-skin="tyler"] .page-link {
  color: var(--tyx-steel-deep);
  border-color: var(--ov-border);
  font-size: 0.78rem;
}
html[data-skin="tyler"] .page-item.active .page-link { background: var(--tyx-navy); border-color: var(--tyx-navy); }
html[data-skin="tyler"] .nav-tabs { border-bottom-color: var(--ov-border); }
html[data-skin="tyler"] .nav-tabs .nav-link { color: #3A4756; font-size: 0.8rem; border-radius: 0; }
html[data-skin="tyler"] .nav-tabs .nav-link.active {
  color: var(--tyx-navy);
  font-weight: 700;
  border-color: var(--ov-border) var(--ov-border) #FFFFFF;
  box-shadow: inset 0 2px 0 var(--tyx-steel);
}
html[data-skin="tyler"] .accordion-button { font-size: 0.82rem; background: var(--tyx-panel-head-a); color: var(--tyx-navy); }
html[data-skin="tyler"] .accordion-button:not(.collapsed) { background: var(--tyx-panel-head-b); color: var(--tyx-navy); }

/* Light scrollbars: a dark scrollbar on a light records screen is the one
   detail that instantly betrays a re-skin. */
html[data-skin="tyler"] ::-webkit-scrollbar { width: 12px; height: 12px; }
html[data-skin="tyler"] ::-webkit-scrollbar-track { background: #E4E7EC; }
html[data-skin="tyler"] ::-webkit-scrollbar-thumb { background: #AEB8C4; border: 2px solid #E4E7EC; border-radius: 6px; }
html[data-skin="tyler"] ::-webkit-scrollbar-thumb:hover { background: #8D99A8; }


/* ═══════════════════════════════════════════════════════════════════════════
   4. LEGACY DARK CLASSES
   The templates were written against a dark theme: `bg-dark` ×80,
   `table-dark` ×20, `text-white` ×8… Remapping them here re-skins forty
   templates without editing forty templates.

   `bg-dark` is NOT remapped to navy: in the dark theme it was used to force a
   dark surface onto whole cards and sections (view_docket, the jail rosters,
   every warrants panel), so a navy remap turns half a records screen into a
   dark blue slab. In a light theme "force a dark surface" simply has no
   meaning — the honest translation is the ordinary raised light surface, and
   its `text-white`/`text-light` partners become ordinary ink.
   ═══════════════════════════════════════════════════════════════════════════ */

html[data-skin="tyler"] .bg-dark,
html[data-skin="tyler"] .bg-black {
  background-color: var(--ov-surface-raised) !important;
  color: var(--ov-text-primary);
}
/* The badge/text helper variant carries its own foreground; neutralize both. */
html[data-skin="tyler"] .text-bg-dark {
  background-color: var(--ov-status-neutral-bg) !important;
  color: var(--ov-status-neutral) !important;
}
html[data-skin="tyler"] .text-light { color: var(--ov-text-primary) !important; }
html[data-skin="tyler"] .link-light,
html[data-skin="tyler"] .link-light:hover { color: var(--ov-accent-text) !important; }
html[data-skin="tyler"] .text-white-50 { color: var(--ov-text-muted) !important; }

html[data-skin="tyler"] .table-dark {
  --bs-table-bg: #E4E9F0;
  --bs-table-color: #2B3A4E;
  --bs-table-border-color: var(--ov-border);
  --bs-table-striped-bg: #DCE3EC;
  --bs-table-striped-color: #2B3A4E;
  --bs-table-hover-bg: #D2DBE7;
  --bs-table-hover-color: #1B2430;
  color: #2B3A4E;
  border-color: var(--ov-border);
}
/* thead.table-dark cells inherit the grid-header treatment from §3 */
html[data-skin="tyler"] thead.table-dark th,
html[data-skin="tyler"] .table-dark th { background: #E4E9F0 !important; color: #2B3A4E !important; }

/* text-white survives only where it sits on a surface that is still dark
   (masthead, modal headers). Anywhere else — including inside the now-light
   .bg-dark panels — it would be white-on-white, so default it to primary ink
   and re-whiten it only in the known dark chrome. */
html[data-skin="tyler"] .text-white { color: var(--ov-text-primary) !important; }
html[data-skin="tyler"] .modal-header .text-white,
html[data-skin="tyler"] .tyx-masthead .text-white { color: #FFFFFF !important; }
html[data-skin="tyler"] .btn-close-white { filter: none; }


/* ═══════════════════════════════════════════════════════════════════════════
   5. CHROME — masthead, CJIS ribbon, menu strip, breadcrumbs, status bar
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── masthead ── the navy identity band. ─────────────────────────────────── */
.tyx-masthead {
  background: linear-gradient(180deg, #1B4270 0%, var(--tyx-navy) 55%, var(--tyx-navy-deep) 100%);
  border-bottom: 2px solid var(--tyx-gold);
  color: #FFFFFF;
}
.tyx-masthead__inner {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.45rem 1rem;
}
.tyx-masthead__seal {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  border-radius: 50%;
  border: 2px solid var(--tyx-gold);
  background: radial-gradient(circle at 35% 30%, #24507F, var(--tyx-navy-deep));
  color: #E7D9AE;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.25rem;
}
.tyx-masthead__id { line-height: 1.15; min-width: 0; }
.tyx-masthead__agency {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 1.6px;
  text-transform: uppercase;
  color: #BCCBDD;
  white-space: nowrap;
}
.tyx-masthead__product {
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.2px;
  color: #FFFFFF;
  white-space: nowrap;
}
.tyx-masthead__product .tyx-product-sub {
  font-weight: 300;
  color: #A9BDD4;
  font-size: 0.85rem;
}
.tyx-masthead__spacer { flex: 1 1 auto; }
.tyx-masthead__session {
  text-align: right;
  line-height: 1.3;
  font-size: 0.68rem;
  color: #BCCBDD;
  white-space: nowrap;
}
.tyx-masthead__session a { color: #DCE6F2; text-decoration: underline; }
.tyx-masthead__session a:hover { color: #FFFFFF; }
.tyx-masthead__user {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.4rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: #FFFFFF;
}
.tyx-masthead__user img { border-radius: 50%; border: 1px solid #3E6491; }

/* ── CJIS ribbon ── the compliance strip under the masthead. ─────────────── */
.tyx-ribbon {
  background: #0F2645;
  color: #8FA6C2;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.9px;
  text-transform: uppercase;
  padding: 0.18rem 1rem;
  display: flex;
  gap: 1rem;
  justify-content: space-between;
  border-bottom: 1px solid #071A33;
  white-space: nowrap;
  overflow: hidden;
}
.tyx-ribbon strong { color: #D9B65E; font-weight: 700; }

/* ── menu strip ── the horizontal application menu. Bootstrap's collapse and
   dropdown JS still drive it; only the paint changes. ─────────────────────── */
.tyx-menubar {
  background: linear-gradient(#FBFCFE, #EFF2F6);
  border-bottom: 1px solid var(--ov-border);
  box-shadow: 0 1px 2px rgba(15, 38, 69, 0.08);
}
.tyx-menubar .navbar { min-height: 0; padding: 0; background: transparent; border: 0; box-shadow: none; }
.tyx-menubar .navbar-brand { display: none; }
.tyx-menubar .nav-link {
  color: #24303E !important;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.42rem 0.8rem !important;
  border-right: 1px solid var(--ov-border-soft);
  border-radius: 0;
}
.tyx-menubar .nav-link:hover { background: #E2E8F0; color: var(--tyx-navy) !important; }
.tyx-menubar .nav-link.active {
  background: #FFFFFF;
  color: var(--tyx-navy) !important;
  box-shadow: inset 0 -3px 0 var(--tyx-steel);
}
.tyx-menubar .nav-link.disabled { color: var(--ov-text-muted) !important; }
.tyx-menubar .dropdown-toggle::after { vertical-align: 0.14em; }
.tyx-menubar .navbar-toggler {
  border-color: var(--ov-border-strong);
  color: var(--ov-text-primary);
  padding: 0.15rem 0.45rem;
  margin: 0.2rem 0.5rem;
}
.tyx-menubar .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%2836, 48, 62, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── breadcrumbs ─────────────────────────────────────────────────────────── */
.tyx-crumbs {
  background: var(--ov-surface-sunk);
  border-bottom: 1px solid var(--ov-border-soft);
  font-size: 0.72rem;
  padding: 0.28rem 1rem;
  color: var(--ov-text-muted);
}
.tyx-crumbs a { color: var(--tyx-steel-deep); }
.tyx-crumbs .tyx-crumb-sep { margin: 0 0.4rem; color: var(--ov-border-strong); }
.tyx-crumbs .tyx-crumb-here { color: var(--ov-text-primary); font-weight: 600; }

/* ── status bar ── pinned footer strip, terminal style. ──────────────────── */
.tyx-statusbar {
  background: linear-gradient(#EFF2F6, #E2E7EE);
  border-top: 1px solid var(--ov-border);
  font-size: 0.68rem;
  color: #46515F;
  padding: 0.3rem 1rem;
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}
.tyx-statusbar strong { color: var(--tyx-navy); }
.tyx-statusbar .tyx-status-cjis { color: var(--ov-status-critical); font-weight: 700; }


/* ═══════════════════════════════════════════════════════════════════════════
   6. CONTENT COMPONENTS
   ═══════════════════════════════════════════════════════════════════════════ */

/* Screen title row: the "you are here" line every Odyssey screen opens with */
.tyx-screen-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  border-bottom: 2px solid var(--tyx-navy);
  margin-bottom: 0.9rem;
  padding-bottom: 0.35rem;
  flex-wrap: wrap;
}
.tyx-screen-head h1 { margin: 0; }
.tyx-screen-head .tyx-screen-meta { font-size: 0.72rem; color: var(--ov-text-muted); }

/* Case band: the gray identity banner above a case/record detail screen */
.tyx-caseband {
  background: linear-gradient(#F4F6F9, #E8ECF2);
  border: 1px solid var(--ov-border);
  border-left: 4px solid var(--tyx-navy);
  border-radius: var(--ov-radius-md);
  padding: 0.5rem 0.9rem;
  margin-bottom: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 2rem;
  align-items: baseline;
}
.tyx-caseband__no { font-family: var(--ov-font-mono); font-size: 1rem; font-weight: 700; color: var(--tyx-navy); }
.tyx-caseband__style { font-size: 0.85rem; font-weight: 600; }
.tyx-caseband__meta { font-size: 0.72rem; color: var(--ov-text-muted); }

/* Field rows: label-over-value pairs in record panels */
.tyx-field { margin-bottom: 0.45rem; }
.tyx-field dt, .tyx-field .tyx-field-label {
  font-size: 0.66rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.4px;
  color: var(--ov-text-muted);
  margin-bottom: 0.05rem;
}
.tyx-field dd, .tyx-field .tyx-field-value { font-size: 0.82rem; margin: 0; }
.tyx-field .tyx-field-value--mono { font-family: var(--ov-font-mono); }

/* Application tiles for the landing dashboard */
.tyx-tile {
  display: block;
  background: #FFFFFF;
  border: 1px solid var(--ov-border);
  border-top: 3px solid var(--tyx-steel);
  border-radius: var(--ov-radius-md);
  padding: 0.8rem 0.9rem;
  height: 100%;
  color: var(--ov-text-primary);
  box-shadow: var(--ov-shadow-1);
}
.tyx-tile:hover { border-top-color: var(--tyx-navy); background: #FAFBFD; color: var(--ov-text-primary); text-decoration: none; }
.tyx-tile__icon { font-size: 1.3rem; color: var(--tyx-steel-deep); }
.tyx-tile__name { font-weight: 700; font-size: 0.88rem; color: var(--tyx-navy); margin: 0.2rem 0 0.15rem; }
.tyx-tile__desc { font-size: 0.74rem; color: var(--ov-text-secondary); margin: 0; }
.tyx-tile--locked { opacity: 0.55; }
.tyx-tile--locked:hover { border-top-color: var(--tyx-steel); background: #FFFFFF; }

/* NCIC hit severity band — the one place the UI is allowed to shout */
.tyx-hitband {
  background: var(--ov-status-critical-bg);
  border: 1px solid var(--ov-status-critical);
  border-left-width: 5px;
  border-radius: var(--ov-radius-md);
  color: var(--ov-status-critical);
  font-weight: 700;
  letter-spacing: 0.6px;
  padding: 0.4rem 0.8rem;
  margin-bottom: 0.6rem;
  text-transform: uppercase;
}
.tyx-caveat {
  background: var(--ov-status-caution-bg);
  border: 1px solid var(--ov-status-caution);
  border-left-width: 4px;
  border-radius: var(--ov-radius-md);
  color: #5C4200;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.4rem 0.7rem;
}

/* Compact key-value strip used on audit rows and confirmations */
.tyx-kv { font-size: 0.74rem; color: var(--ov-text-secondary); }
.tyx-kv b { color: var(--ov-text-primary); font-weight: 600; }
.tyx-kv .sep { margin: 0 0.45rem; color: var(--ov-border-strong); }

/* Monospace identifiers — NIC numbers, docket numbers, ORIs */
.tyx-id { font-family: var(--ov-font-mono); font-size: 0.8em; letter-spacing: 0.3px; }


/* ═══════════════════════════════════════════════════════════════════════════
   7. PRINT — records get printed. Chrome goes, ink stays.
   ═══════════════════════════════════════════════════════════════════════════ */

@media print {
  html[data-skin="tyler"] .tyx-menubar,
  html[data-skin="tyler"] .tyx-ribbon,
  html[data-skin="tyler"] .tyx-statusbar,
  html[data-skin="tyler"] .btn,
  html[data-skin="tyler"] .navbar { display: none !important; }
  html[data-skin="tyler"] body { background: #FFFFFF; padding-top: 0 !important; }
  html[data-skin="tyler"] .card { box-shadow: none; border-color: #000; }
}