/* Operator console — semantic theme and Bootstrap/DataTables integration. */
:root {
  --surface: #ffffff;
  --surface-2: #f4f7fb;
  --surface-sunken: #eaf0f7;
  --text: #182230;
  --text-muted: #65758b;
  --border: #d8e0ea;
  --link: #1769c2;
  --navbar-bg: #17212f;
  --shadow: 0 8px 24px rgba(20, 37, 63, .08);
}
html[data-bs-theme="dark"] {
  --surface: #1f2630;
  --surface-2: #12161d;
  --surface-sunken: #0c0f15;
  --text: #e6e8eb;
  --text-muted: #9aa3ad;
  --border: #2d3744;
  --link: #69adff;
  --navbar-bg: #11161d;
  --shadow: 0 8px 24px rgba(0, 0, 0, .25);
  color-scheme: dark;
}

body.console-shell { min-height: 100vh; background: var(--surface-2); color: var(--text); }

/* Login page (src/admin/templates/sqladmin/login.html) — rendered standalone through SQLAdmin's
   own Jinja loader, so it repeats these tokens rather than inheriting .console-shell. */
html:has(body.login-page) { height: 100%; }
body.login-page { height: 100%; display: flex; align-items: center; justify-content: center; padding: 40px 0; background: var(--surface-2); color: var(--text); }
.login-form__brand-icon { font-size: 2rem; color: var(--link); }
.login-form .form-control { background: var(--surface); border-color: var(--border); color: var(--text); }
.login-form .form-control:focus { background: var(--surface); color: var(--text); border-color: var(--link); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--link) 24%, transparent); }
.login-form .btn-primary { border-radius: .5rem; }
a { color: var(--link); text-decoration: none; }
a:hover { color: color-mix(in srgb, var(--link) 78%, var(--text)); }
:focus-visible { outline: 3px solid color-mix(in srgb, var(--link) 55%, transparent); outline-offset: 2px; }
.console-navbar { background: var(--navbar-bg); border-bottom: 1px solid var(--border); box-shadow: var(--shadow); }
.console-navbar .navbar-brand, .console-navbar .nav-link, .console-navbar .navbar-text { color: #f7f9fc; }
.console-navbar .navbar-brand span { color: #aeb9c7; font-size: .8rem; font-weight: 400; }
.console-navbar .nav-link { border-radius: 999px; padding: .42rem .7rem; }
.console-navbar .nav-link:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.console-main { max-width: 1500px; padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 3rem; }
.flash-stack { max-width: 1120px; margin: 0 auto 1rem; }

.card {
  --bs-card-border-radius: .85rem;
  --bs-card-inner-border-radius: calc(.85rem - 1px);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--bs-card-border-radius);
  box-shadow: var(--shadow);
  overflow: hidden;
}

.card-header {
  background: color-mix(in srgb, var(--surface-sunken) 72%, var(--surface));
  border-bottom: 1px solid var(--border);
  color: var(--text);
  font-weight: 600;
}

/* Monospace treatment for identifiers (UIDs, keys, site codes). */
.mono {
  font-family: var(--bs-font-monospace);
  font-size: 0.875rem;
}

/* The provisioning key shown once after onboarding. */
.provisioning-key {
  font-family: var(--bs-font-monospace);
  word-break: break-all;
  background: var(--bs-tertiary-bg);
  border: 1px dashed var(--bs-border-color);
  border-radius: 0.375rem;
  padding: 0.5rem 0.75rem;
}

.stat-value {
  font-size: 1.75rem;
  font-weight: 600;
  line-height: 1;
}

.stat-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-muted);
}

.page-header { display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; margin-bottom: 1.25rem; }
.page-header__actions, .action-row { display: flex; flex-wrap: wrap; gap: .5rem; }
.btn { border-radius: 999px; box-shadow: 0 2px 7px rgba(20, 37, 63, .1); transition: transform .15s ease, box-shadow .15s ease; }
.btn:hover { transform: translateY(-1px); box-shadow: 0 5px 12px rgba(20, 37, 63, .16); }
.btn-outline-secondary { --bs-btn-color: var(--text); --bs-btn-border-color: var(--border); --bs-btn-hover-color: var(--text); --bs-btn-hover-bg: var(--surface-sunken); --bs-btn-hover-border-color: var(--border); }
.theme-switch {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #f7f9fc;
  display: inline-flex;
  font-size: 1.1rem;
  height: 2rem;
  justify-content: center;
  padding: 0;
  width: 2rem;
}
.theme-switch:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.account-menu__trigger {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: #f7f9fc;
  display: inline-flex;
  font-size: 1.3rem;
  height: 2rem;
  justify-content: center;
  padding: 0;
  width: 2rem;
}
.account-menu__trigger:hover { background: rgba(255, 255, 255, .1); color: #fff; }
.account-menu__dropdown { min-width: 15rem; padding: .4rem; }
.account-menu__email { align-items: center; color: var(--text-muted); display: flex; font-size: .875rem; gap: .5rem; overflow-wrap: anywhere; padding: .5rem .6rem; }
.table { --bs-table-bg: var(--surface); --bs-table-color: var(--text); --bs-table-border-color: var(--border); --bs-table-hover-bg: color-mix(in srgb, var(--link) 5%, var(--surface)); margin-bottom: 0; }
.table > :not(caption) > * > * { padding: .75rem .85rem; }
.installation-row { cursor: pointer; }
.installation-row:focus-visible { outline: 3px solid color-mix(in srgb, var(--link) 55%, transparent); outline-offset: -3px; }
.table thead th { background: var(--surface-sunken); color: var(--text-muted); font-size: .73rem; letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; }
.dataTables_wrapper { padding: .85rem; color: var(--text); }
.dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { background: var(--surface); border-color: var(--border); color: var(--text); border-radius: 999px; }
.dataTables_wrapper .dataTables_info { color: var(--text-muted); }
/* DataTables' Bootstrap adapter places `.paginate_button` on the list item and the visible
   control in its nested `.page-link`. Theme Bootstrap's pagination variables instead of
   styling both layers, which keeps the controls a single joined pagination group. */
.dataTables_wrapper .pagination {
  --bs-pagination-color: var(--link);
  --bs-pagination-bg: var(--surface);
  --bs-pagination-border-color: var(--border);
  --bs-pagination-hover-color: var(--surface);
  --bs-pagination-hover-bg: var(--link);
  --bs-pagination-hover-border-color: var(--link);
  --bs-pagination-focus-color: var(--link);
  --bs-pagination-focus-bg: color-mix(in srgb, var(--link) 10%, var(--surface));
  --bs-pagination-focus-box-shadow: 0 0 0 .25rem color-mix(in srgb, var(--link) 24%, transparent);
  --bs-pagination-active-color: var(--surface);
  --bs-pagination-active-bg: var(--link);
  --bs-pagination-active-border-color: var(--link);
  --bs-pagination-disabled-color: var(--text-muted);
  --bs-pagination-disabled-bg: var(--surface);
  --bs-pagination-disabled-border-color: var(--border);
}
.dropdown-menu { background: var(--surface); border-color: var(--border); box-shadow: var(--shadow); }
.dropdown-item, .action-menu button { color: var(--text); }
.dropdown-item:hover, .action-menu button:hover { background: var(--surface-sunken); color: var(--text); }
.action-menu form { margin: 0; }.action-menu button { background: transparent; border: 0; text-align: left; width: 100%; padding: .25rem 1rem; }
/* Responsive table scrollers otherwise clip Popper-positioned dropdown menus. */
.table-responsive .dropdown { position: static; }
/* Canonical collapsible-card trigger: pointer cursor, chevron rotates off Bootstrap's own
   aria-expanded toggle on the trigger element — no page JS needed to animate it. */
.collapse-trigger { cursor: pointer; }
.collapse-trigger .bi-chevron-down { transition: transform .15s ease; }
.collapse-trigger[aria-expanded="true"] .bi-chevron-down { transform: rotate(180deg); }
.empty-state { background: var(--surface); border: 1px dashed var(--border); border-radius: .85rem; color: var(--text-muted); padding: 2rem; text-align: center; }
.modal-content { background: var(--surface); color: var(--text); border-color: var(--border); }.modal-header, .modal-footer { border-color: var(--border); }
.form-control, .form-select { background: var(--surface); border-color: var(--border); color: var(--text); }
.form-control:focus, .form-select:focus { background: var(--surface); color: var(--text); border-color: var(--link); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--link) 24%, transparent); }
/* Neutral `tag_badge` labels need an explicit foreground in light mode too: Bootstrap badges
   default to white text, which is invisible on its light utility background. */
.badge.bg-light { background: var(--surface-sunken) !important; color: var(--text) !important; }

/* Observability workspace: a form-heavy tab (Configure/Credentials/Approve) constrains its own
   fields to a readable width without narrowing the shared shell around it. */
.workspace-form { max-width: 60rem; }

/* Availability strip state colors — the reserved status palette, deliberately distinct from the
   categorical badge hues so a state block never impersonates a series. Mode-invariant by design
   (same hex in light/dark; only its contrast against --surface differs), so no dark redeclaration
   is needed — see docs/UIArchitecture.md. Never read alone: every use pairs it with the legend's
   text label, the outage summary's prose, and the heartbeat table underneath. */
:root {
  --state-up: #0ca30c;
  --state-degraded: #fab219;
  --state-down: #d03b3b;
  --state-nodata: var(--border);
  /* Matches the `bg-info` badge used for the maintenance pill and liveness badge elsewhere on this
     page, so the same colour means "maintenance" everywhere it appears, not just on the strip. */
  --state-maintenance: #0dcaf0;
}

.uptime-strip {
  display: flex;
  gap: 2px;
  height: 28px;
  border-radius: .35rem;
  overflow: hidden;
}
.uptime-strip__cell { flex: 1 1 0; min-width: 2px; cursor: help; }
/* Brightness rather than an outline or a border: a cell can be 2px wide on a 30-day window, where
   any box treatment would cover the colour it is meant to point at. */
.uptime-strip__cell:hover { filter: brightness(1.35); }
.uptime-strip__cell--up { background: var(--state-up); }
.uptime-strip__cell--degraded { background: var(--state-degraded); }
.uptime-strip__cell--down { background: var(--state-down); }
.uptime-strip__cell--maintenance { background: var(--state-maintenance); }
.uptime-strip__cell--no-data { background: var(--state-nodata); }
.uptime-strip__range-line { display: flex; justify-content: space-between; font-size: .72rem; color: var(--text-muted); margin-top: .3rem; }
.uptime-strip__legend { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem; font-size: .8rem; color: var(--text-muted); margin-top: .6rem; }
.uptime-strip__legend-swatch { display: inline-block; width: .7rem; height: .7rem; border-radius: 2px; margin-right: .35rem; vertical-align: -1px; }
.uptime-strip__legend-swatch--up { background: var(--state-up); }
.uptime-strip__legend-swatch--degraded { background: var(--state-degraded); }
.uptime-strip__legend-swatch--down { background: var(--state-down); }
.uptime-strip__legend-swatch--maintenance { background: var(--state-maintenance); }
.uptime-strip__legend-swatch--no-data { background: var(--state-nodata); }

/* Hover detail for one strip cell. Bootstrap's tooltip body is dark in both colour modes, so this
   block is deliberately token-free apart from the state swatches, which stay the reserved status
   palette they carry in the strip itself. Markup is delegated + sanitized by Bootstrap, which
   allows `class` but not `style` — hence real classes rather than inline styling. */
.uptime-tooltip .tooltip-inner { max-width: 15rem; text-align: left; padding: .45rem .6rem; }
.uptime-tip { font-size: .78rem; line-height: 1.4; }
.uptime-tip__when { font-weight: 600; margin-bottom: .15rem; }
.uptime-tip__state { display: flex; align-items: center; gap: .35rem; }
.uptime-tip__dot { display: inline-block; width: .55rem; height: .55rem; border-radius: 2px; }
.uptime-tip__dot--up { background: var(--state-up); }
.uptime-tip__dot--degraded { background: var(--state-degraded); }
.uptime-tip__dot--down { background: var(--state-down); }
.uptime-tip__dot--maintenance { background: var(--state-maintenance); }
.uptime-tip__dot--no-data { background: var(--state-nodata); }
@media (max-width: 991.98px) { .console-navbar .navbar-nav { align-items: stretch !important; padding-top: .75rem; } .page-header { flex-direction: column; } }
@media (max-width: 575.98px) { .console-main { padding-inline: .75rem; } .table > :not(caption) > * > * { padding: .65rem; } .page-header__actions, .action-row { width: 100%; } }