/* =====================================================================
   THEME: "Console" — LockerRoom as a working tool rather than a web page.

   This was one of two options put up on September 3, 2026; Chris chose it
   over the lighter "Clean", which has since been deleted rather than left
   in the tree carrying a locker palette that fails contrast. Three moves
   define it:

     1. A dark top bar. The chrome recedes and the room is the only bright
        thing on the screen, which is what the front desk is actually
        looking at. The orange stays as the wordmark and the accent.
     2. A denser layout. Smaller chrome, tighter rows, more of the report
        on one screen — this is a screen someone stands in front of all
        day, not a page they read once.
     3. The legend becomes a compact row of pills instead of a full-width
        band of paint, so the map starts higher up the page.

   The standing guarantee: no locker moves, the room's shape is untouched,
   and the four occupancy colours keep their meaning.

   "Desk" (theme-desk.css) imports this file and amends three of these
   choices — see that file. Anything shared belongs here, not there.
   ===================================================================== */

:root {
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                         "Helvetica Neue", Arial, sans-serif;
  --bs-body-font-size: 14px;
  --bs-body-line-height: 1.5;
  --bs-body-color: #334155;
  --bs-border-radius: 6px;
  --bs-link-color: #2563eb;
  --bs-link-hover-color: #1d4ed8;
  --bs-link-color-rgb: 37, 99, 235;

  --lr-ink:     #0f172a;
  --lr-body:    #334155;
  --lr-muted:   #64748b;
  --lr-line:    #e2e8f0;
  --lr-line-2:  #cbd5e1;
  --lr-canvas:  #f1f5f9;
  --lr-bar:     #1e293b;
  --lr-bar-2:   #0f172a;
  --lr-brand:   #ffa500;
  /* One number for the fixed navbar's height. body's top padding, the
     sticky report headers and (in Desk) the orange rule under the bar all
     have to agree with it -- when they were three separate 52s and the bar
     actually measured 55, the first 3px of every page sat underneath it
     and the sticky column headings were clipped by the same 3px. Setting
     min-height AND the offsets from one variable makes that unrepeatable. */
  --lr-navh:    56px;
  --lr-primary: #2563eb;
}

body { background: var(--lr-canvas); padding-top: var(--lr-navh); }

h1, .h1 { font-size: 26px; }
h2, .h2 { font-size: 21px; }
h3, .h3 { font-size: 18px; }
h4, .h4 { font-size: 16px; }
h5, .h5 { font-size: 14px; }
h6, .h6 { font-size: 12px; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-weight: 600; line-height: 1.25; letter-spacing: -0.01em; color: var(--lr-ink);
}
h1, h2, h3 { margin-top: 18px; margin-bottom: 10px; }
.page-header { padding-bottom: 8px; margin: 2px 0 12px; border-bottom: 1px solid var(--lr-line); }

/* ---- Dark chrome ----------------------------------------------------- */
/* The separate orange band is gone; the orange is the logo and the active
   tab marker. That buys ~30px of vertical room back for the map. */
div.top-bar { display: none; }

.lr-navbar {
  min-height: var(--lr-navh);
  background: var(--lr-bar);
  background-image: none;
  border-bottom: 1px solid var(--lr-bar-2);
  box-shadow: none;
}
.lr-navbar .navbar-brand {
  padding: 15px 16px 15px 0;
  font-size: 18px;
  color: #fff;
  text-shadow: none;
}
.lr-navbar .navbar-brand:hover, .lr-navbar .navbar-brand:focus { color: #fff; }
.lr-navbar #logoB { color: var(--lr-brand); }
.lr-navbar .navbar-nav .nav-link {
  padding: 16px 14px;
  font-size: 14px;
  font-weight: 500;
  color: #cbd5e1;
  text-shadow: none;
  border-bottom: 2px solid transparent;
}
.lr-navbar .navbar-nav .nav-link:hover,
.lr-navbar .navbar-nav .nav-link:focus { color: #fff; background: rgba(255,255,255,.06); }
.lr-navbar .nav-link.dropdown-toggle.show {
  color: #fff; background: rgba(255,255,255,.08); background-image: none;
  box-shadow: none; border-bottom-color: var(--lr-brand);
}
.lr-navbar .navbar-toggler { border-color: #475569; }
.lr-navbar .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%28255,255,255,0.85%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

.dropdown-menu {
  --bs-dropdown-border-color: var(--lr-line);
  --bs-dropdown-border-radius: 8px;
  --bs-dropdown-padding-y: 6px;
  --bs-dropdown-item-padding-y: 7px;
  --bs-dropdown-item-padding-x: 14px;
  --bs-dropdown-font-size: 14px;
  --bs-dropdown-link-hover-bg: #f1f5f9;
  box-shadow: 0 10px 30px rgba(15, 23, 42, .18);
}

/* ---- Buttons --------------------------------------------------------- */
.btn {
  --bs-btn-font-size: 13px;
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: 7px;
  --bs-btn-padding-x: 13px;
  --bs-btn-border-radius: 6px;
  background-image: none; text-shadow: none; box-shadow: none;
  transition: background-color .12s ease, border-color .12s ease;
}
.btn:focus-visible { box-shadow: 0 0 0 3px rgba(255, 165, 0, .35); }
.btn-sm, .btn-group-sm > .btn { padding: 5px 10px; font-size: 12px; line-height: 1.4; border-radius: 6px; }

.btn-secondary {
  --bs-btn-color: var(--lr-body);      --bs-btn-bg: #fff;
  --bs-btn-border-color: var(--lr-line-2);
  --bs-btn-hover-color: var(--lr-ink); --bs-btn-hover-bg: #f1f5f9;
  --bs-btn-hover-border-color: var(--lr-line-2);
  --bs-btn-active-color: var(--lr-ink);--bs-btn-active-bg: #e2e8f0;
  --bs-btn-active-border-color: #94a3b8;
  background-image: none; text-shadow: none;
}
.btn-primary { --bs-btn-bg:#2563eb; --bs-btn-border-color:#2563eb; --bs-btn-hover-bg:#1d4ed8;
  --bs-btn-hover-border-color:#1d4ed8; --bs-btn-active-bg:#1e40af; --bs-btn-active-border-color:#1e40af; background-image:none; }
.btn-success { --bs-btn-bg:#16a34a; --bs-btn-border-color:#16a34a; --bs-btn-hover-bg:#15803d;
  --bs-btn-hover-border-color:#15803d; --bs-btn-active-bg:#166534; --bs-btn-active-border-color:#166534; background-image:none; }
.btn-info { --bs-btn-color:#fff; --bs-btn-bg:#0891b2; --bs-btn-border-color:#0891b2; --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#0e7490; --bs-btn-hover-border-color:#0e7490; --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#155e75; --bs-btn-active-border-color:#155e75; background-image:none; }
.btn-warning { --bs-btn-color:#fff; --bs-btn-bg:#ea8c00; --bs-btn-border-color:#ea8c00; --bs-btn-hover-color:#fff;
  --bs-btn-hover-bg:#c97800; --bs-btn-hover-border-color:#c97800; --bs-btn-active-color:#fff;
  --bs-btn-active-bg:#a86400; --bs-btn-active-border-color:#a86400; background-image:none; }
.btn-danger { --bs-btn-bg:#dc2626; --bs-btn-border-color:#dc2626; --bs-btn-hover-bg:#b91c1c;
  --bs-btn-hover-border-color:#b91c1c; --bs-btn-active-bg:#991b1b; --bs-btn-active-border-color:#991b1b; background-image:none; }

/* The zoom controls read as one instrument rather than four loose buttons. */
.lr-room-toolbar { margin-bottom: 8px; display: flex; gap: 6px; align-items: center; }
.lr-room-toolbar .btn { border-radius: 0; margin: 0; }
.lr-room-toolbar .btn:first-child { border-radius: 6px 0 0 6px; }
.lr-room-toolbar #lrZoomIn { border-radius: 0; margin-right: 8px; }
.lr-room-toolbar #lrZoomOut + #lrZoomIn { border-left-width: 0; }
.lr-room-toolbar #lrZoomFitH { border-radius: 6px 0 0 6px; }
.lr-room-toolbar #lrZoomFitV { border-radius: 0 6px 6px 0; border-left-width: 0; }
.lr-room-toolbar #lrZoomOut, .lr-room-toolbar #lrZoomIn { min-width: 34px; font-size: 15px; line-height: 1; }

/* ---- Tables: denser -------------------------------------------------- */
.table {
  --bs-table-color: var(--lr-body);
  --bs-table-striped-bg: transparent;
  --bs-table-striped-color: var(--lr-body);
  --bs-table-hover-bg: #eef2f7;
  --bs-table-hover-color: var(--lr-ink);
  font-size: 13px;
}
.table > :not(caption) > * > * {
  padding: 8px 10px; border-top: 0; border-bottom: 1px solid var(--lr-line); vertical-align: middle;
}
.table > thead > tr > * {
  border-top: 0; border-bottom: 1px solid var(--lr-line-2);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  color: var(--lr-muted); vertical-align: bottom;
}
.table > thead > tr > * a { color: var(--lr-muted); }
.table > thead > tr > * a:hover { color: var(--lr-ink); }

/* ---- Forms ----------------------------------------------------------- */
.form-control, .form-select {
  padding: 8px 11px; font-size: 14px; line-height: 1.5; border-radius: 6px; border-color: var(--lr-line-2);
}
.form-select { padding-right: 32px; }
.form-control:focus, .form-select:focus {
  border-color: var(--lr-brand); box-shadow: 0 0 0 3px rgba(255, 165, 0, .25);
}
label { font-weight: 600; font-size: 12px; letter-spacing: .02em; color: var(--lr-muted);
  text-transform: uppercase; margin-bottom: 5px; }
.form-group { margin-bottom: 16px; }

/* ---- Cards, alerts, badges ------------------------------------------- */
.card, .lr-login-card {
  border: 1px solid var(--lr-line); border-radius: 10px;
  box-shadow: 0 1px 2px rgba(15,23,42,.04), 0 8px 24px rgba(15,23,42,.06);
}
.lr-login-card > .card-header { padding: 20px 22px 0; background: transparent; border-bottom: 0; }
.lr-login-card > .card-body { padding: 8px 22px 22px; }

.alert {
  --bs-alert-padding-x: 13px; --bs-alert-padding-y: 11px; --bs-alert-border-radius: 8px;
  background-image: none; text-shadow: none; box-shadow: none;
  border-width: 1px 1px 1px 4px; font-size: 13px;
}
.alert-success { --bs-alert-color:#14532d; --bs-alert-bg:#f0fdf4; --bs-alert-border-color:#16a34a; }
.alert-info    { --bs-alert-color:#164e63; --bs-alert-bg:#ecfeff; --bs-alert-border-color:#0891b2; }
.alert-warning { --bs-alert-color:#7c4a03; --bs-alert-bg:#fffbeb; --bs-alert-border-color:#ea8c00; }
.alert-danger  { --bs-alert-color:#7f1d1d; --bs-alert-bg:#fef2f2; --bs-alert-border-color:#dc2626; }

.badge {
  --bs-badge-padding-x: .7em; --bs-badge-padding-y: .38em; --bs-badge-border-radius: 999px;
  font-size: 10.5px; font-weight: 600; letter-spacing: .03em;
}

.popover {
  --bs-popover-border-radius: 10px; --bs-popover-inner-border-radius: 9px;
  --bs-popover-border-color: var(--lr-line); --bs-popover-font-size: 13px;
  --bs-popover-header-bg: #f8fafc; --bs-popover-header-color: var(--lr-ink);
  --bs-popover-body-color: var(--lr-body);
  box-shadow: 0 12px 32px rgba(15,23,42,.18);
}

/* ---- The locker map -------------------------------------------------- */
/* Flat fills, no bevel -- the only change this theme makes to the map. The
   four colours themselves are NOT set here: they are the accessible palette
   in custom.css, decided once and shared by every theme, so a theme can
   never quietly reintroduce a fill that fails contrast against its own
   locker number. */
.lr-cell, td.lr-swatch { background-image: none; text-shadow: none; box-shadow: none; }

/* The legend, as a row of pills. Same colours, same order, ~90px less of
   the screen spent saying them. */
.lr-legend, .lr-legend > tbody, .lr-legend > tbody > tr, .lr-legend > tr { display: block; }
.lr-legend > tbody > tr, .lr-legend > tr {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding-left: 2px;
}
.lr-legend { margin-bottom: 8px; width: auto; }
.lr-legend > :not(caption) > * > * { border: 0; }
.lr-legend th.locker {
  display: inline-flex; align-items: center;
  background: transparent !important; color: var(--lr-muted);
  font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  padding: 4px 10px 4px 2px;
}
/* inline-BLOCK, not inline-flex: a flex container drops the whitespace
   between its children, which ate the space in "is <strong>0</strong>". */
.lr-legend td.lr-swatch {
  display: inline-block;
  padding: 4px 12px; border-radius: 999px;
  font-size: 12px; font-weight: 500; white-space: nowrap; line-height: 1.5;
}

.lr-room-viewport {
  border: 1px solid var(--lr-line-2); border-radius: 10px; background: #fff;
  /* No max-height. custom.css gives the room page's viewport the exact
     height left over in the window (body > section.lr-room-page), which is
     what 76vh was guessing at. A guess here would just fight it. */
}
.lr-room-totals { font-size: 13px; color: var(--lr-muted); margin-bottom: 2px; }
.lr-client-name { color: var(--lr-muted); }

/* ---- Footer ---------------------------------------------------------- */
body > .site-footer {
  border-top: 1px solid var(--lr-line); background-color: #e9eef4;
  color: var(--lr-muted); padding: 18px 0;
}
.site-footer .footer-copy, .site-footer .footer-env { color: var(--lr-muted); font-size: 12px; }
.site-footer a { color: var(--lr-body); }
.site-footer a:hover { color: var(--lr-ink); }
.site-footer .footer-version { color: #94a3b8; }

/* ---- Reading a 250-row report --------------------------------------- */
/* The sticky column heading itself now lives in custom.css, next to
   .lr-scroll-table, which is the box it sticks to. It was here, in the theme
   layer, and a theme layer is optional -- so with no ?theme= at all the
   report's headings scrolled away with the rows and nothing said why. A
   reading aid for a 250-row table is not decoration, and it does not belong
   in the file that decides what colour things are.

   All that is left here is the colour: the heading has to be opaque or the
   rows show through it as they pass underneath, and on this theme the page
   is not white. custom.css falls back to white when no theme is loaded. */
.lr-sticky-head > thead > tr > * {
  background-color: var(--lr-canvas);
}

/* ---- Keyboard focus -------------------------------------------------- */
/* Visible, consistent, and only for keyboard users -- :focus-visible does
   not fire on a mouse click. */
a:focus-visible,
.dropdown-item:focus-visible,
.form-control:focus-visible,
.form-select:focus-visible,
td.locker a:focus-visible {
  outline: 2px solid var(--lr-brand);
  outline-offset: 2px;
  border-radius: 3px;
}
td.locker a:focus-visible { outline-offset: -1px; }