/* The portal shell: the GlenTrak® wordmark, the Help page, and the colours
   FLATLY gets wrong for WCAG 2.1 AA contrast (GitHub #28).
   Not a restyle — the FLATLY baseline stands (docs/glentrak-app-design-current.md).
   Only what the navbar, the Help page and the theme cannot express inline lives here. */

/* Plain text with the registered mark, larger than FLATLY's 1.25rem brand.
   Placement is Bootstrap's own: brand left, menu right (`ms-auto`). */
.core-brand {
  font-size: 2rem;
  line-height: 1;
  white-space: nowrap;
}

/* Help page */
.help-doc-tile {                          /* white artwork on a navy tile */
  width: 2.25rem; height: 2.25rem; flex: 0 0 auto;
  border-radius: .375rem;
  display: flex; align-items: center; justify-content: center;
}
.help-doc-tile img { width: 1.25rem; height: 1.25rem; }
.help-symbol { width: 2.5rem; height: 2.5rem; }
.help-logo   { width: 7rem; filter: brightness(0); opacity: .8; }  /* the white wordmark, darkened for a light card */

/* The Surgical Planner's controls at about 150% (GitHub #19 item 1; design
   meeting of 16 Oct 2026, Adam and Harpal). Scoped to the pane's root class
   so nothing else in the portal grows; the pads and the ± buttons set their
   own size inline (glentrak/ui/panes/planner.py). */
.sp-pane .btn-sm { font-size: 1.05rem; padding: .55rem .9rem; }
.sp-pane .form-check-label { font-size: .9rem; }

/* ---- WCAG 2.1 AA contrast (GitHub #28) --------------------------------
   FLATLY is loaded from outside the repo, so its failing colours are
   overridden here, each kept in its own hue and darkened until it reads:
   4.5:1 for text (4.6:1 picked on white and on the 3-D views' overlay
   cards, #fdfdfd; still 4.5:1 where a card sits over bone, #fcfaf8),
   3:1 for borders, focus rings and slider tracks.
   core-app/tests/test_wcag_contrast.py reads these values and checks them. */

/* Theme colours: feed .text-*, badges (.bg-*), .border-* and links. */
:root {
  --bs-secondary: #657779;  --bs-secondary-rgb: 101, 119, 121;
  --bs-success: #11826c;    --bs-success-rgb: 17, 130, 108;
  --bs-info: #2079b5;       --bs-info-rgb: 32, 121, 181;
  --bs-danger: #dd2d1b;     --bs-danger-rgb: 221, 45, 27;
  --bs-link-color: #11826c; --bs-link-color-rgb: 17, 130, 108;
  --bs-link-hover-color: #0e6856; --bs-link-hover-color-rgb: 14, 104, 86;
  --bs-code-color: #dd1a74;
}

/* Buttons carry their colours as literals in the theme, not through the
   variables above. Hover and active are Bootstrap's 15% / 20% darker steps. */
.btn-secondary {
  --bs-btn-bg: #657779; --bs-btn-border-color: #657779;
  --bs-btn-hover-bg: #566567; --bs-btn-hover-border-color: #515f61;
  --bs-btn-active-bg: #515f61; --bs-btn-active-border-color: #4c595b;
  --bs-btn-disabled-bg: #657779; --bs-btn-disabled-border-color: #657779;
}
.btn-success {
  --bs-btn-bg: #11826c; --bs-btn-border-color: #11826c;
  --bs-btn-hover-bg: #0e6e5c; --bs-btn-hover-border-color: #0e6856;
  --bs-btn-active-bg: #0e6856; --bs-btn-active-border-color: #0d6251;
  --bs-btn-disabled-bg: #11826c; --bs-btn-disabled-border-color: #11826c;
}
.btn-info {
  --bs-btn-bg: #2079b5; --bs-btn-border-color: #2079b5;
  --bs-btn-hover-bg: #1b679a; --bs-btn-hover-border-color: #1a6191;
  --bs-btn-active-bg: #1a6191; --bs-btn-active-border-color: #185b88;
  --bs-btn-disabled-bg: #2079b5; --bs-btn-disabled-border-color: #2079b5;
}
.btn-danger {
  --bs-btn-bg: #dd2d1b; --bs-btn-border-color: #dd2d1b;
  --bs-btn-hover-bg: #bc2617; --bs-btn-hover-border-color: #b12416;
  --bs-btn-active-bg: #b12416; --bs-btn-active-border-color: #a62214;
  --bs-btn-disabled-bg: #dd2d1b; --bs-btn-disabled-border-color: #dd2d1b;
}
.btn-outline-secondary {
  --bs-btn-color: #657779; --bs-btn-border-color: #657779;
  --bs-btn-hover-bg: #657779; --bs-btn-hover-border-color: #657779;
  --bs-btn-active-bg: #657779; --bs-btn-active-border-color: #657779;
  --bs-btn-disabled-color: #657779; --bs-btn-disabled-border-color: #657779;
}
.btn-outline-success {
  --bs-btn-color: #11826c; --bs-btn-border-color: #11826c;
  --bs-btn-hover-bg: #11826c; --bs-btn-hover-border-color: #11826c;
  --bs-btn-active-bg: #11826c; --bs-btn-active-border-color: #11826c;
  --bs-btn-disabled-color: #11826c; --bs-btn-disabled-border-color: #11826c;
}
.btn-outline-info {
  --bs-btn-color: #2079b5; --bs-btn-border-color: #2079b5;
  --bs-btn-hover-bg: #2079b5; --bs-btn-hover-border-color: #2079b5;
  --bs-btn-active-bg: #2079b5; --bs-btn-active-border-color: #2079b5;
  --bs-btn-disabled-color: #2079b5; --bs-btn-disabled-border-color: #2079b5;
}
.btn-outline-danger {
  --bs-btn-color: #dd2d1b; --bs-btn-border-color: #dd2d1b;
  --bs-btn-hover-bg: #dd2d1b; --bs-btn-hover-border-color: #dd2d1b;
  --bs-btn-active-bg: #dd2d1b; --bs-btn-active-border-color: #dd2d1b;
  --bs-btn-disabled-color: #dd2d1b; --bs-btn-disabled-border-color: #dd2d1b;
}

/* FLATLY's alerts are solid fills with white text. */
.alert-secondary { background-color: #657779; }
.alert-success   { background-color: #11826c; }
.alert-info      { background-color: #2079b5; }
.alert-danger    { background-color: #dd2d1b; }

/* Warning keeps its orange and takes near-black text, as the environment
   banner and the "not saved" badge already do (7.9:1). Orange text or an
   orange outline on white is the darker hue; a hovered outline button
   fills with the orange, like the solid one. */
.alert-warning, .badge.bg-warning { color: #1a1a1a; }
.btn-warning {
  --bs-btn-color: #1a1a1a; --bs-btn-hover-color: #1a1a1a;
  --bs-btn-active-color: #1a1a1a; --bs-btn-disabled-color: #1a1a1a;
}
.btn-outline-warning {
  --bs-btn-color: #a26708; --bs-btn-border-color: #a26708;
  --bs-btn-hover-color: #1a1a1a; --bs-btn-hover-bg: #f39c12; --bs-btn-hover-border-color: #f39c12;
  --bs-btn-active-color: #1a1a1a; --bs-btn-active-bg: #f39c12; --bs-btn-active-border-color: #f39c12;
  --bs-btn-disabled-color: #a26708; --bs-btn-disabled-border-color: #a26708;
}
.text-warning { color: #a26708 !important; }

/* The Admin menu's items. */
.dropdown-menu { --bs-dropdown-link-color: #697677; }

/* A temp password inside a solid alert takes the alert's white: no pink
   reads on the teal or the blue. */
.alert code { color: inherit; }

/* Tabs: the open tab's outline was its only cue, at 1.5:1. Now a 3:1
   outline, and a heavier label so it is not the outline alone. */
.nav-tabs {
  --bs-nav-tabs-border-color: #7f8e9e;
  --bs-nav-tabs-link-active-border-color: #7f8e9e #7f8e9e transparent;
  --bs-nav-tabs-link-active-color: #11826c;
}
.nav-tabs .nav-link.active { font-weight: 600; }

/* Control boundaries: inputs, selects, checkboxes, radios, switch tracks.
   Scoped to the controls — --bs-border-color also draws every card, table
   and list rule, which are not controls and stay pale. */
.form-control, .form-select, .form-check-input { border-color: #7f8e9e; }
/* The unchecked switch knob, the same grey (FLATLY: black at .25, 1.8:1). */
.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='%237f8e9e'/%3e%3c/svg%3e");
}

/* Keyboard focus. Inputs: the navy border and a ring dense enough to read.
   Buttons: a white ring inside a navy one, visible on any ground (FLATLY's
   half-alpha ring was 2.3:1). */
.form-control:focus, .form-select:focus, .form-check-input:focus {
  border-color: #2c3e50;
  box-shadow: 0 0 0 .25rem rgba(44, 62, 80, .6);
}
.btn { --bs-btn-focus-box-shadow: 0 0 0 .125rem #ffffff, 0 0 0 .3rem #2c3e50; }

/* dcc.Slider's unfilled track (Dash 4: navy at .1, 1.2:1). Two classes,
   because Dash injects its own stylesheet after this one; a disabled
   slider keeps Dash's faint track. */
.dash-slider-root .dash-slider-track { background-color: rgba(0, 24, 102, .5); }

/* AG Grid (Quartz): the search box under each column heading. Set on the
   element that carries the grid's theme parameters, which outranks them. */
[class*="ag-theme-params-"] { --ag-input-border: solid 1px #7f8e9e; }

/* The case the proxy case list opens on (admin/cases.py's rowClassRules):
   bold, with a navy rule down its left edge, not a tint alone. */
.ag-row.row-highlight {
  background-color: #ecf0f1;
  font-weight: 600;
  box-shadow: inset 4px 0 0 #2c3e50;
}

/* The Surgical Planner's tunnel table: the selected tunnel was shown by
   AG Grid's pale tint alone (1.1:1). A marker before its name, the name in
   bold and the navy rule now say which one it is. */
#sp-tunnel-grid .ag-row-selected { box-shadow: inset 4px 0 0 #2c3e50; }
#sp-tunnel-grid .ag-row-selected .ag-cell[col-id="name"] { font-weight: 700; }
#sp-tunnel-grid .ag-row-selected .ag-cell[col-id="name"]::before { content: "▶ "; }