/* ============================================================================
   Doorcom - design system (Access Controller tokens, green brand)
   A premium, multi-tenant access-control SaaS. Evolves the 2plus1 identity:
   ocean-blue primary, teal + amber accents, "doorway + access leaf" mark.
   Lexend (display) · Source Sans 3 (body) · JetBrains Mono (data).

   Theme model (all three must work):
     :root                                        -> light tokens (default)
     @media (prefers-color-scheme: dark)
       :root:not([data-theme="light"])            -> follow the OS when unset
     :root[data-theme="dark"]                     -> explicit dark (toggle wins)
   The toggle writes an explicit data-theme="light"|"dark", so it always beats
   the OS preference in both directions.
   ============================================================================ */

/* ---------------------------------------------------------------- fonts ---- */
@font-face { font-family:"Lexend"; font-weight:600; font-display:swap;
  src:url("/static/fonts/Lexend-600.woff2") format("woff2"); }
@font-face { font-family:"Lexend"; font-weight:700; font-display:swap;
  src:url("/static/fonts/Lexend-700.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:400; font-display:swap;
  src:url("/static/fonts/Source_Sans_3-400.woff2") format("woff2"); }
@font-face { font-family:"Source Sans 3"; font-weight:600; font-display:swap;
  src:url("/static/fonts/Source_Sans_3-600.woff2") format("woff2"); }
@font-face { font-family:"JetBrains Mono"; font-weight:400; font-display:swap;
  src:url("/static/fonts/JetBrains_Mono-400.woff2") format("woff2"); }

/* ------------------------------------------------------- light tokens ---- */
:root {
  color-scheme: light;

  /* ink & neutrals - cool, considered slate ramp */
  --ink:         #0B1220;
  --navy:        #0E1A2E;
  --slate:       #3A465C;
  --muted:       #5B6A82;
  --faint:       #92A0B5;
  --bg:          #F3F6FB;
  --bg-soft:     #E9EFF7;
  --surface:     #FFFFFF;
  --surface-2:   #F9FBFE;
  --line:        #E3E9F2;
  --line-strong: #CBD5E4;

  /* brand - ocean blue anchored on the original #0B8F3C */
  --cta:           #0B8F3C;
  --cta-dark:      #086B2D;
  --cta-bright:    #1FD65A;
  --brand-deep:    #064E23;
  --accent:        #15803D;
  --accent-bright: #22C55E;
  --cyan:          #1FD65A;
  --cyan-deep:     #0B8F3C;
  --amber:         #F0A800;
  --amber-deep:    #B07A00;

  /* primary button surface - follows --cta so per-tenant accent flows through
     in light mode; dark mode overrides with a fixed AA-safe deep blue below. */
  --btn-primary-bg:   var(--cta);
  --btn-primary-bg-h: var(--cta-dark);
  --btn-primary-fg:   #FFFFFF;

  /* signature brand gradient (accent -> cyan -> teal) */
  --grad-brand:      linear-gradient(135deg, var(--cta) 0%, #16A34A 52%, #1FD65A 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(11,143,60,.12), rgba(22,184,166,.10));
  --grad-line:       linear-gradient(90deg, var(--cta), var(--accent-bright), var(--amber));

  /* radii */
  --radius-xs:   6px;
  --radius-sm:   10px;
  --radius:      14px;
  --radius-lg:   20px;
  --radius-full: 999px;

  /* shadows - soft, layered */
  --shadow-xs: 0 1px 2px rgba(15,23,42,.06);
  --shadow-sm: 0 1px 2px rgba(15,23,42,.05), 0 2px 6px -1px rgba(15,23,42,.06);
  --shadow:    0 12px 28px -14px rgba(15,23,42,.20);
  --shadow-lg: 0 30px 64px -26px rgba(15,23,42,.32);
  --ring:      0 0 0 3px rgba(11,143,60,.28);

  /* status */
  --up:        #15803D; --up-bg:   #E4F6EA; --up-line:   #BEE7CC;
  --down:      #DC2626; --down-bg: #FCE9E8; --down-line: #F6C9C6;
  --warn-ink:  #8A6100; --warn-bg: #FDF4DC; --warn-line: #F0DFAC;

  /* component tokens (so dark theme only re-declares this block) */
  --sidebar-bg:      linear-gradient(180deg, #FFFFFF, #FBFCFE 60%, #F7FAFE);
  --sidebar-line:    #E3E9F2;
  --nav-active-bg:   #E4F6EA;
  --nav-active-fg:   #086B2D;
  --nav-hover-bg:    #EEF3FA;

  --flash-bg:   #E9F3FB; --flash-ink: #086B2D; --flash-line: #C3E0F3;
  --code-bg:    #EEF3F9; --code-ink:  #3A465C;
  --termlog-bg: #0E1A2E; --termlog-ink: #DBE7F3;
  --selection:  rgba(11,143,60,.16);

  --chip-blue-bg:#E7F1FB; --chip-blue-fg:#0B8F3C;
  --chip-violet-bg:#E4F5F2; --chip-violet-fg:#15803D;
  --chip-brass-bg:#FBF1D8; --chip-brass-fg:#B07A00;
  --chip-green-bg:#E4F6EA; --chip-green-fg:#15803D;
  --chip-teal-bg:#E6F5FA; --chip-teal-fg:#0B8F3C;
  --chip-red-bg:#FCE9E8; --chip-red-fg:#DC2626;

  /* role badges */
  --role-super-bg:#EEE9FD; --role-super-fg:#6D28D9; --role-super-line:#DDD2FB;
  --role-admin-bg:#E7F1FB; --role-admin-fg:#086B2D; --role-admin-line:#C3E0F3;
  --role-viewer-bg:#EEF1F6; --role-viewer-fg:#55627A; --role-viewer-line:#DCE2EC;

  /* read-only banner */
  --readonly-bg:#EFF4FA; --readonly-ink:#3A465C; --readonly-line:#D6E2F0;

  /* fonts */
  --font-display: "Lexend", system-ui, sans-serif;
  --font-body:    "Source Sans 3", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  --mono:         "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;

  /* type scale */
  --fs-xs:   11px;
  --fs-sm:   12.5px;
  --fs-base: 14.5px;
  --fs-md:   15.5px;
  --fs-lg:   18px;
  --fs-xl:   21px;
  --fs-2xl:  26px;
  --fs-3xl:  33px;

  /* spacing scale */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-7: 32px; --sp-8: 40px; --sp-9: 56px;
}

/* ---------------------------------------------- dark tokens (shared) ----
   Declared once for the OS-preference case and once for the explicit toggle.
   Keep the two blocks identical. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;

    --ink:         #E7EDF6;
    --navy:        #F3F7FC;
    --slate:       #C2CEDE;
    --muted:       #93A2B8;
    --faint:       #67788F;
    --bg:          #090E1B;
    --bg-soft:     #111A2B;
    --surface:     #141E31;
    --surface-2:   #18233A;
    --line:        #26324A;
    --line-strong: #3A4A66;

    --cta:           #46ABE8;
    --cta-dark:      #6FC0F1;
    --cta-bright:    #56C3F5;
    --brand-deep:    #8BCBF3;
    --accent:        #4ADE80;
    --accent-bright: #4ADE80;
    --cyan:          #5BC0D8;
    --cyan-deep:     #74CEE0;
    --amber:         #F0B429;
    --amber-deep:    #FBBF24;

    --btn-primary-bg:   #1668A8;
    --btn-primary-bg-h: #1E7FC2;
    --btn-primary-fg:   #FFFFFF;

    --grad-brand:      linear-gradient(135deg, #0B6FB8 0%, #0E90B0 52%, #17B8A6 100%);
    --grad-brand-soft: linear-gradient(135deg, rgba(70,171,232,.18), rgba(45,212,191,.12));

    --shadow-xs: 0 1px 2px rgba(0,0,0,.42);
    --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px -2px rgba(0,0,0,.34);
    --shadow:    0 14px 32px -16px rgba(0,0,0,.62);
    --shadow-lg: 0 32px 70px -28px rgba(0,0,0,.72);
    --ring:      0 0 0 3px rgba(70,171,232,.38);

    --up:   #4ADE80; --up-bg:   #12301F; --up-line:   #1F5236;
    --down: #F87171; --down-bg: #3A1A1C; --down-line: #5E2B2D;
    --warn-ink: #FBBF24; --warn-bg: #332810; --warn-line: #58451A;

    --sidebar-bg:   linear-gradient(180deg, #0F1930, #0C1425 65%, #0A1120);
    --sidebar-line: #223049;
    --nav-active-bg: rgba(70,171,232,.16);
    --nav-active-fg: #93C8EE;
    --nav-hover-bg:  rgba(148,163,184,.08);

    --flash-bg:   #10263A; --flash-ink: #9FD0F0; --flash-line: #1F4661;
    --code-bg:    #0F1B2E; --code-ink:  #C2CEDE;
    --termlog-bg: #060B16; --termlog-ink: #C9D8EA;
    --selection:  rgba(70,171,232,.32);

    --chip-blue-bg:rgba(70,171,232,.16); --chip-blue-fg:#7BBEEC;
    --chip-violet-bg:rgba(45,212,191,.14); --chip-violet-fg:#4FD6C2;
    --chip-brass-bg:rgba(240,180,41,.15); --chip-brass-fg:#F4C95B;
    --chip-green-bg:rgba(74,222,128,.15); --chip-green-fg:#5FE08F;
    --chip-teal-bg:rgba(103,199,221,.15); --chip-teal-fg:#74CEE0;
    --chip-red-bg:rgba(248,113,113,.15); --chip-red-fg:#F58A8A;

    --role-super-bg:rgba(139,92,246,.18); --role-super-fg:#B79CF7; --role-super-line:rgba(139,92,246,.30);
    --role-admin-bg:rgba(70,171,232,.16); --role-admin-fg:#8AC4EE; --role-admin-line:rgba(70,171,232,.30);
    --role-viewer-bg:rgba(148,163,184,.15); --role-viewer-fg:#A9B6CA; --role-viewer-line:rgba(148,163,184,.28);

    --readonly-bg:rgba(70,171,232,.10); --readonly-ink:#C2CEDE; --readonly-line:rgba(70,171,232,.22);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;

  --ink:         #E7EDF6;
  --navy:        #F3F7FC;
  --slate:       #C2CEDE;
  --muted:       #93A2B8;
  --faint:       #67788F;
  --bg:          #090E1B;
  --bg-soft:     #111A2B;
  --surface:     #141E31;
  --surface-2:   #18233A;
  --line:        #26324A;
  --line-strong: #3A4A66;

  --cta:           #46ABE8;
  --cta-dark:      #6FC0F1;
  --cta-bright:    #56C3F5;
  --brand-deep:    #8BCBF3;
  --accent:        #4ADE80;
  --accent-bright: #4ADE80;
  --cyan:          #5BC0D8;
  --cyan-deep:     #74CEE0;
  --amber:         #F0B429;
  --amber-deep:    #FBBF24;

  --btn-primary-bg:   #1668A8;
  --btn-primary-bg-h: #1E7FC2;
  --btn-primary-fg:   #FFFFFF;

  --grad-brand:      linear-gradient(135deg, #0B6FB8 0%, #0E90B0 52%, #17B8A6 100%);
  --grad-brand-soft: linear-gradient(135deg, rgba(70,171,232,.18), rgba(45,212,191,.12));

  --shadow-xs: 0 1px 2px rgba(0,0,0,.42);
  --shadow-sm: 0 1px 2px rgba(0,0,0,.40), 0 2px 8px -2px rgba(0,0,0,.34);
  --shadow:    0 14px 32px -16px rgba(0,0,0,.62);
  --shadow-lg: 0 32px 70px -28px rgba(0,0,0,.72);
  --ring:      0 0 0 3px rgba(70,171,232,.38);

  --up:   #4ADE80; --up-bg:   #12301F; --up-line:   #1F5236;
  --down: #F87171; --down-bg: #3A1A1C; --down-line: #5E2B2D;
  --warn-ink: #FBBF24; --warn-bg: #332810; --warn-line: #58451A;

  --sidebar-bg:   linear-gradient(180deg, #0F1930, #0C1425 65%, #0A1120);
  --sidebar-line: #223049;
  --nav-active-bg: rgba(70,171,232,.16);
  --nav-active-fg: #93C8EE;
  --nav-hover-bg:  rgba(148,163,184,.08);

  --flash-bg:   #10263A; --flash-ink: #9FD0F0; --flash-line: #1F4661;
  --code-bg:    #0F1B2E; --code-ink:  #C2CEDE;
  --termlog-bg: #060B16; --termlog-ink: #C9D8EA;
  --selection:  rgba(70,171,232,.32);

  --chip-blue-bg:rgba(70,171,232,.16); --chip-blue-fg:#7BBEEC;
  --chip-violet-bg:rgba(45,212,191,.14); --chip-violet-fg:#4FD6C2;
  --chip-brass-bg:rgba(240,180,41,.15); --chip-brass-fg:#F4C95B;
  --chip-green-bg:rgba(74,222,128,.15); --chip-green-fg:#5FE08F;
  --chip-teal-bg:rgba(103,199,221,.15); --chip-teal-fg:#74CEE0;
  --chip-red-bg:rgba(248,113,113,.15); --chip-red-fg:#F58A8A;

  --role-super-bg:rgba(139,92,246,.18); --role-super-fg:#B79CF7; --role-super-line:rgba(139,92,246,.30);
  --role-admin-bg:rgba(70,171,232,.16); --role-admin-fg:#8AC4EE; --role-admin-line:rgba(70,171,232,.30);
  --role-viewer-bg:rgba(148,163,184,.15); --role-viewer-fg:#A9B6CA; --role-viewer-line:rgba(148,163,184,.28);

  --readonly-bg:rgba(70,171,232,.10); --readonly-ink:#C2CEDE; --readonly-line:rgba(70,171,232,.22);
}

/* ------------------------------------------------------------- base ---- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
a { color: var(--cta); text-decoration: none; }
a:hover { color: var(--cta-dark); text-decoration: underline; }
::selection { background: var(--selection); }
* { scrollbar-width: thin; scrollbar-color: var(--line-strong) transparent; }

:focus-visible {
  outline: none;
  box-shadow: var(--ring);
  border-radius: var(--radius-xs);
}

/* ------------------------------------------------------- app shell ---- */
body.app { display: flex; min-height: 100vh; }

.sidebar {
  width: 250px;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--sidebar-bg);
  border-right: 1px solid var(--sidebar-line);
  padding: 18px 14px 14px;
}

/* brand block */
.brand {
  display: inline-flex; align-items: center; gap: 11px;
  font-family: var(--font-display);
  font-weight: 600;
  font-size: var(--fs-md);
  color: var(--navy) !important;
  white-space: nowrap;
  text-decoration: none !important;
  padding: 2px 8px 14px;
  letter-spacing: -.01em;
}
.brand .logo { display: block; flex-shrink: 0; color: var(--navy); }
.brand img.logo { object-fit: contain; border-radius: 6px; }
.brand .b1 { font-weight: 700; }
.brand .b2 { font-weight: 600; color: var(--muted); }
.brand.big { font-size: var(--fs-xl); }

/* sidebar brand: stack the mark on top with the wordmark underneath, and let an
   uploaded tenant logo run wider than the square default icon */
.sidebar .brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 9px;
  white-space: normal;
}
.sidebar .brand img.logo {
  width: auto; height: auto;
  max-width: 100%; max-height: 48px;
  border-radius: 8px;
}

/* tenant switcher - a <form> wrapping a <select> under the brand (super-admins) */
.tenant-switch { margin: 0 4px 12px; }
.tenant-switch select {
  appearance: none; -webkit-appearance: none;
  width: 100%;
  padding: 8px 30px 8px 12px;
  font-family: var(--font-body);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--navy);
  background:
    var(--surface)
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235B6A82' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M6 9l6 6 6-6'/></svg>")
    no-repeat right 10px center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-xs);
  cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.tenant-switch select:hover { border-color: var(--cta); }
.tenant-switch select:focus { outline: none; border-color: var(--cta); box-shadow: var(--ring); }
.tenant-switch option { color: var(--ink); background: var(--surface); }

/* current tenant label (non-super accounts) */
.tenant-name {
  margin: 0 4px 12px;
  padding: 7px 12px;
  font-size: 12px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted);
  background: var(--bg-soft);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* nav divider between primary and admin sections */
.nav-sep {
  height: 1px; margin: 10px 12px;
  background: var(--sidebar-line);
}

/* nav */
.side-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; overflow-y: auto; }
.side-nav a {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  color: var(--slate);
  padding: 9px 12px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  text-decoration: none !important;
  transition: background .14s, color .14s;
}
.side-nav a svg {
  width: 18px; height: 18px; flex-shrink: 0;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
  opacity: .8;
}
.side-nav a:hover { background: var(--nav-hover-bg); color: var(--navy); }
.side-nav a.on {
  background: color-mix(in srgb, var(--cta) 13%, transparent);
  color: var(--cta);
  font-weight: 600;
}
.side-nav a.on svg { opacity: 1; }
.side-nav a.on::before {
  content: ""; position: absolute; left: 0; top: 8px; bottom: 8px;
  width: 3px; border-radius: 999px; background: var(--cta);
}
.side-nav .seg {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .12em;
  color: var(--faint); padding: 15px 12px 5px;
}
.side-nav .seg:first-child { padding-top: 4px; }
.side-nav a.sub { padding-left: 30px; font-size: 13px; }
.side-nav a.sub svg { width: 15px; height: 15px; }

.side-foot {
  margin: 0; padding: 12px 8px 2px;
  border-top: 1px solid var(--sidebar-line);
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
}
.side-foot form { flex: 1; margin: 0; }
.side-foot form .btn { width: 100%; justify-content: center; }
.side-manual {
  display: inline-flex; align-items: center; gap: 6px; flex: 1 1 100%;
  padding: 6px 8px; border-radius: var(--radius-sm);
  color: var(--muted); font-size: 13px; text-decoration: none;
}
.side-manual:hover { color: var(--text); background: var(--surface); }
.side-manual svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

/* signed-in identity row (username + role badge) */
.side-user {
  flex: 1 0 100%;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 2px 4px 10px;
}
.side-user .who {
  font-size: 13px; font-weight: 600; color: var(--slate);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.content { flex: 1; min-width: 0; display: flex; flex-direction: column; }
main { width: 100%; max-width: 1120px; margin: 0 auto; padding: var(--sp-7) var(--sp-7) var(--sp-9); }
/* the log is a wide table - let it use the screen it is given */
main.page-events { max-width: 1560px; }

/* ------------------------------------------------- read-only banner ---- */
.readonly-bar {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 18px;
  font-size: 13px; font-weight: 600;
  color: var(--readonly-ink);
  background: var(--readonly-bg);
  border-bottom: 1px solid var(--readonly-line);
  box-shadow: inset 3px 0 0 var(--amber);
}
.readonly-bar svg {
  width: 16px; height: 16px; flex-shrink: 0;
  fill: none; stroke: var(--amber-deep); stroke-width: 1.9;
  stroke-linecap: round; stroke-linejoin: round;
}
.readonly-bar .rb-hint { font-weight: 400; color: var(--muted); }

/* ------------------------------------------------------- page head ---- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 2px 0 22px;
}
.page-head h1 { margin: 0; }
.page-head .sub { color: var(--muted); font-size: 14px; margin: 5px 0 0; max-width: 68ch; }
.page-head .actions { display: flex; gap: 8px; flex-wrap: wrap; }
.crumbs + .page-head { margin-top: 0; }

/* ---------------------------------------------------------- toolbar ---- */
.toolbar {
  display: flex; gap: 9px; flex-wrap: wrap; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px 14px; margin: 0 0 16px;
  box-shadow: var(--shadow-sm);
}
.toolbar input, .toolbar select { width: auto; }
.toolbar .tb-end { display: flex; flex-wrap: wrap; gap: 9px; align-items: center; margin-left: auto; }
.grow { flex: 1 1 220px; }

/* People: scan box and add-person box side by side above the search row */
.people-top { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: stretch; margin: 14px 0 16px; }
.people-top > .panel { display: flex; flex-direction: column; min-width: 0; }
.people-top .scan-input { min-width: 0; }
.people-top > .panel { margin: 0; }
.people-top h2 { margin-top: 0; }
.add-person { display: grid; gap: 9px; margin: 0; }
.add-person input { width: 100%; }
.add-person .btn { justify-self: start; }
@media (max-width: 760px) { .people-top { grid-template-columns: 1fr; } }

/* --------------------------------------------------- bulk actions ---- */
.bulk-bar {
  position: sticky; top: 8px; z-index: 30;
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  background: var(--surface); border: 1px solid var(--cta);
  border-radius: var(--radius); padding: 9px 14px; margin: 0 0 12px;
  box-shadow: var(--shadow);
}
/* display:flex above would otherwise beat the hidden attribute the page sets */
.bulk-bar[hidden] { display: none; }
.bulk-bar .bulk-count { font-size: 13px; color: var(--navy); margin-right: 6px; white-space: nowrap; }
.bulk-bar .bulk-count strong { font-size: 15px; }
.bulk-bar select.bulk-levels { width: auto; min-width: 150px; font-size: 13px; padding: 3px 6px; }
.bulk-bar .bulk-sep { width: 1px; height: 22px; background: var(--line-strong); margin: 0 3px; }
th.sel, td.sel { width: 26px; padding-right: 0; }
th.sel input, td.sel input { width: auto; margin: 0; display: inline; accent-color: var(--cta); cursor: pointer; }

.toolbar .tb-label { font-size: 12px; font-weight: 700; color: var(--muted); margin-right: 2px; white-space: nowrap; text-transform: uppercase; letter-spacing: .05em; }

/* ------------------------------------------------------ table wrap ---- */
.table-wrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow-x: auto; box-shadow: var(--shadow-sm); margin: 0 0 16px;
  background: var(--surface);
}
.table-wrap > table { border: 0; border-radius: 0; box-shadow: none; }
@media (max-width: 760px) { .table-wrap > table { min-width: 560px; } }

/* ----------------------------------------------------- empty / hint ---- */
.empty {
  text-align: center; color: var(--muted); font-size: 14px;
  padding: 34px 20px; border: 1px dashed var(--line-strong);
  border-radius: var(--radius); background: var(--bg-soft);
}
.hint { color: var(--muted); font-size: 13px; margin: 6px 0 0; }

/* ------------------------------------------------------ section head ---- */
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 28px 0 12px; }
.sec-head h2 { margin: 0; }
.sec-head a { font-size: 13px; font-weight: 600; }

/* ---------------------------------------------------- responsive nav ---- */
.nav-toggle { display: none; }
@media (max-width: 880px) {
  body.app { flex-direction: column; }
  /* Top bar: logo left, hamburger right. The menu drops down under it when open. */
  .sidebar {
    width: 100%; height: auto; position: sticky; top: 0; z-index: 40;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    padding: 8px 10px; border-right: none; border-bottom: 1px solid var(--sidebar-line);
  }
  .brand { padding: 4px 8px; }
  .nav-toggle { display: inline-flex; flex-direction: column; justify-content: center; gap: 5px; margin-left: auto;
    width: 44px; height: 40px; padding: 8px 10px; border: 1px solid var(--sidebar-line); border-radius: 10px; background: transparent; cursor: pointer; }
  .nav-toggle span { display: block; height: 2px; border-radius: 2px; background: currentColor; color: var(--side-text, #cdd9e8); }
  body.nav-open .nav-toggle { background: rgba(255,255,255,.08); }
  .tenant-switch, .tenant-name, .side-nav, .side-foot { display: none; }
  body.nav-open .tenant-switch, body.nav-open .tenant-name { display: block; width: 100%; margin: 10px 0 4px; }
  .tenant-switch select { max-width: 100%; width: 100%; }
  .sidebar { min-height: 0; max-height: none; }
  .sidebar .brand { flex-direction: row; align-items: center; gap: 10px; text-align: left; }
  .sidebar .brand img.logo, .sidebar .brand svg.logo { width: 30px; height: 30px; margin: 0; }
  body.nav-open .side-nav { display: flex; flex: none; flex-direction: column; width: 100%; height: auto; max-height: none; overflow: visible; gap: 2px; padding-top: 4px; }
  .side-nav a { padding: 11px 12px; }
  .side-nav a.on::before { display: none; }
  .nav-sep { display: block; width: 100%; }
  .side-nav .seg { width: 100%; }
  body.nav-open .side-foot { display: flex; width: 100%; border-top: 1px solid var(--sidebar-line); padding: 10px 8px 4px; }
  main { padding: 18px 14px 60px; }
}

/* ---------------------------------------------------- typography ---- */
h1 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  font-weight: 700;
  letter-spacing: -.025em;
  color: var(--navy);
  margin: 0 0 6px;
  line-height: 1.15;
}
h1 + p.muted { margin-top: 0; margin-bottom: 22px; font-size: 14px; }
h2 {
  font-family: var(--font-display);
  font-size: var(--fs-md);
  font-weight: 600;
  letter-spacing: -.01em;
  color: var(--navy);
  margin: 24px 0 10px;
}
.panel h2:first-child { margin-top: 2px; }

code {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--code-bg);
  border: 1px solid var(--line);
  padding: 1px 6px;
  border-radius: 5px;
  color: var(--code-ink);
}
.muted { color: var(--muted); }
.dim { color: var(--faint); font-size: .6em; font-family: var(--font-body); font-weight: 400; }
.crumbs { margin: 0 0 6px; font-size: 13px; }

/* -------------------------------------------------------- flash ---- */
.flash {
  max-width: 1084px;
  margin: 16px auto 0;
  padding: 11px 16px;
  background: var(--flash-bg);
  color: var(--flash-ink);
  border: 1px solid var(--flash-line);
  border-left: 3px solid var(--cta);
  border-radius: var(--radius-sm);
  font-size: 14px;
  animation: rise .3s both;
}
.flash.error { background: var(--down-bg); color: var(--down); border-color: var(--down-line); border-left-color: var(--down); }
@keyframes rise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* -------------------------------------------------------- panels ---- */
.panel {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 18px 20px;
  margin: 14px 0;
  box-shadow: var(--shadow-sm);
  animation: rise .35s both;
}
.panel.warn  { background: var(--warn-bg); border-color: var(--warn-line); color: var(--warn-ink); }
.panel.grant { background: var(--up-bg); border-color: var(--up-line); }
.panel.deny  { background: var(--down-bg); border-color: var(--down-line); }
.panel.grant h2, .panel.deny h2 { margin-top: 0; }
.panel.danger-zone { border-style: dashed; box-shadow: none; background: transparent; }
.panel.scanbox { border-left: 4px solid var(--amber); }

.scan-input { font-family: var(--mono); font-size: 15px; min-width: 280px; }

/* ---------------------------------------------- reception screen page ---- */
.recep-doors { display: flex; flex-wrap: wrap; gap: 2px 22px; margin: 0 0 12px; }
.recep-preview { margin: 0 0 18px; }
.recep-frame {
  position: relative; aspect-ratio: 16 / 9; width: 100%;
  max-width: 760px; margin: 0 auto;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: #070c16; box-shadow: var(--shadow-sm);
}
.recep-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.recep-preview .hint { text-align: center; }

.termlog {
  font-family: var(--mono);
  font-size: 12.5px;
  background: var(--termlog-bg);
  color: var(--termlog-ink);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  margin-top: 12px;
  max-height: 240px;
  overflow-y: auto;
  white-space: pre-wrap;
}

/* ----------------------------------------------------- stat cards ---- */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 14px; margin: 18px 0 26px; }
.card {
  position: relative;
  overflow: hidden;
  display: flex; align-items: center; gap: 13px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 16px 18px;
  box-shadow: var(--shadow-sm);
  color: var(--ink) !important;
  text-decoration: none !important;
  animation: rise .4s both;
  transition: box-shadow .14s, transform .14s, border-color .14s;
}
/* flat cards - the accent lives in the icon chip, not a gradient strip */
.cards .card:nth-child(2) { animation-delay: .05s; }
.cards .card:nth-child(3) { animation-delay: .1s; }
.cards .card:nth-child(4) { animation-delay: .15s; }
.cards .card:nth-child(5) { animation-delay: .2s; }
.cards .card:nth-child(6) { animation-delay: .25s; }
a.card:hover { box-shadow: var(--shadow); transform: translateY(-2px); border-color: var(--line-strong); }
.card .num {
  display: block;
  font-family: var(--font-display);
  font-size: var(--fs-2xl); font-weight: 700;
  letter-spacing: -.03em; line-height: 1.1;
  color: var(--navy);
}
.card .lbl {
  display: block;
  color: var(--muted);
  font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .08em;
}
.card .chip {
  width: 40px; height: 40px; flex-shrink: 0;
  border-radius: 11px;
  display: grid; place-items: center;
}
.card .chip svg {
  width: 20px; height: 20px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.chip.c-blue   { background: var(--chip-blue-bg);   color: var(--chip-blue-fg); }
.chip.c-violet { background: var(--chip-violet-bg); color: var(--chip-violet-fg); }
.chip.c-brass  { background: var(--chip-brass-bg);  color: var(--chip-brass-fg); }
.chip.c-green  { background: var(--chip-green-bg);  color: var(--chip-green-fg); }
.chip.c-teal   { background: var(--chip-teal-bg);   color: var(--chip-teal-fg); }
.chip.c-red    { background: var(--chip-red-bg);    color: var(--chip-red-fg); }
/* dashboard stat chips: solid tenant accent (denied = red) so the accent
   carries the dashboard instead of a rainbow of category colours */
.chip.acc    { background: var(--cta); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--cta) 55%, transparent); }
.chip.danger { background: var(--down); color: #fff; box-shadow: 0 4px 12px -4px color-mix(in srgb, var(--down) 55%, transparent); }
.card .num { color: var(--navy); }
a.card:hover { border-color: color-mix(in srgb, var(--cta) 45%, var(--line)); }
.card.alert { border-color: var(--down-line); }
.card.alert .num { color: var(--down); }

.cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.g3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 18px; align-items: start; }
@media (max-width: 900px) { .g3 { grid-template-columns: 1fr; } }
@media (max-width: 860px) { .cols { grid-template-columns: 1fr; } }

/* ---------------------------------------------------------- wizard ---- */
.wizard { max-width: 780px; }
.wsteps {
  list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 20px;
}
.wsteps li {
  flex: 1; min-width: 0; display: flex; align-items: center; justify-content: center; gap: 8px;
  font-size: 13px; font-weight: 600; color: var(--muted);
  padding: 9px 10px; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line);
  white-space: nowrap; overflow: hidden;
}
.wsteps li .wnum {
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  display: grid; place-items: center; font-size: 12px;
  background: var(--bg-soft); color: var(--muted);
}
.wsteps li.clickable { cursor: pointer; }
.wsteps li.on { color: var(--cta); border-color: color-mix(in srgb, var(--cta) 45%, var(--line)); }
.wsteps li.on .wnum { background: var(--cta); color: #fff; }
.wsteps li.done .wnum { background: color-mix(in srgb, var(--cta) 22%, transparent); color: var(--cta); }
@media (max-width: 620px) { .wsteps li span:not(.wnum) { display: none; } }
/* With the labels hidden on a phone, name the step you are on beneath the bar. */
.wstep-name { display: none; margin: -14px 0 16px; font-weight: 600; color: var(--cta); }
@media (max-width: 620px) { .wstep-name { display: block; } }

.wstep {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 22px 24px; box-shadow: var(--shadow-sm);
}
.wstep > h2 { margin-top: 0; }
.wchoice { display: grid; gap: 12px; }
.wpick {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 15px 16px; border: 1.5px solid var(--line);
  border-radius: var(--radius-sm); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.wpick:hover { border-color: var(--line-strong); }
.wpick input { margin-top: 3px; accent-color: var(--cta); }
.wpick:has(input:checked) { border-color: var(--cta); background: color-mix(in srgb, var(--cta) 6%, transparent); }
.wpick-body { display: flex; flex-direction: column; gap: 3px; }
.wpick-body strong { font-family: var(--font-display); font-size: var(--fs-md); }
.wnav { display: flex; justify-content: space-between; align-items: center; margin-top: 22px; }
.wchips { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-bottom: 12px; font-size: 13px; color: var(--muted); }
.flashrow { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; margin: 10px 0 4px; }
.cbx { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cbx input { accent-color: var(--cta); margin: 0; }
.fprog {
  height: 8px; border-radius: 999px; overflow: hidden; margin: 12px 0 2px;
  background: var(--bg-soft); border: 1px solid var(--line);
}
.fbar { height: 100%; width: 0; background: var(--cta); transition: width .2s linear; }
.wupload { margin-top: 16px; }
.wupload summary { cursor: pointer; color: var(--cta); font-size: 13px; font-weight: 600; }
.wupload .inline-form { margin-top: 10px; display: flex; flex-wrap: wrap; gap: 8px; }
.wsummary {
  display: flex; flex-wrap: wrap; gap: 18px; align-items: center;
  background: var(--bg-soft); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px 15px; margin: 12px 0 14px;
}
.wsummary .k { display: block; font-size: 10.5px; text-transform: uppercase; letter-spacing: .08em; color: var(--faint); margin-bottom: 2px; }
.wsummary a.btn { margin-left: auto; }
.wdone { text-align: center; padding: 18px 0 8px; }
.wcheck {
  width: 54px; height: 54px; border-radius: 50%; margin: 0 auto 14px;
  display: grid; place-items: center; font-size: 26px; color: #fff;
  background: var(--up); box-shadow: 0 8px 20px -8px color-mix(in srgb, var(--up) 60%, transparent);
}
.wdone .btn { margin-top: 8px; }

/* -------------------------------------------------------- accordion ---- */
.accordion { padding: 0; overflow: hidden; }
.accordion > summary {
  list-style: none; cursor: pointer;
  padding: 16px 18px;
  font-family: var(--font-display); font-weight: 600; font-size: var(--fs-lg);
  color: var(--navy);
  display: flex; align-items: center; justify-content: space-between;
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after {
  content: ""; width: 9px; height: 9px; margin-left: 12px; flex-shrink: 0;
  border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted);
  transform: rotate(45deg); transition: transform .16s;
}
.accordion[open] > summary::after { transform: rotate(-135deg); }
.accordion > summary:hover { color: var(--cta); }
.accordion .acc-body { padding: 0 18px 18px; }

/* -------------------------------------------------------- tables ---- */
table {
  width: 100%;
  border-collapse: collapse;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-sm);
}
th, td { text-align: left; padding: 11px 16px; font-size: 14px; vertical-align: middle; }
th {
  color: var(--muted);
  font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .07em;
  border-bottom: 1px solid var(--line);
  background: var(--bg-soft);
}
td { border-bottom: 1px solid var(--line); color: var(--slate); }
tr:last-child td { border-bottom: none; }
tbody tr { transition: background .12s; }
tr:hover td { background: var(--bg-soft); }
td a { font-weight: 600; }
table.sched input, table.sched select { width: auto; }
table.sched tr:hover td { background: transparent; }

/* access log: one line per entry - the timestamp never breaks, the reason may */
/* every column shrinks to its content; the reason column soaks up the rest */
.log-table th, .log-table td { white-space: nowrap; width: 1%; }
.log-table th.when, .log-table td.when { font-variant-numeric: tabular-nums; }
.log-table th.detail, .log-table td.detail { white-space: normal; width: 99%; }
@media (max-width: 760px) { .table-wrap > table.log-table { min-width: 780px; } }
.actions { display: flex; flex-wrap: wrap; gap: 5px; }
.actions form { display: inline-block; margin: 0; }

/* controller list: info row + full-width actions row beneath */
/* Controllers: one compact card per controller, no sideways scrolling */
.dev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; margin: 0 0 18px; }
@media (max-width: 480px) { .dev-grid { grid-template-columns: 1fr; } }
.dev-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-sm); padding: 14px 16px 12px; display: flex; flex-direction: column; gap: 10px; }
/* card header: status pill, uid and firmware on top; address and last seen under */
.dev-head { display: flex; flex-direction: column; align-items: stretch; gap: 4px; }
.dev-id { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.dev-id code { font-size: 13px; }
.dev-id .dev-fw { font-size: 12px; color: var(--muted); }
.dev-meta { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 12px; align-items: center; }
.dev-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; }
.dev-fields label { margin: 0; font-size: 12px; }
.dev-fields input, .dev-fields select { width: 100%; margin-top: 3px; }
.dev-fields label:nth-child(3) { grid-column: 1 / -1; }
@media (max-width: 560px) { .dev-fields { grid-template-columns: 1fr; } }
.dev-actions { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1px solid var(--line); padding-top: 10px; }
.dev-actions form { display: inline-block; margin: 0; }

/* the rarely used actions live behind an "Advanced" disclosure on the right */
.dev-advanced { position: relative; margin-left: auto; }
.dev-advanced > summary { list-style: none; cursor: pointer; }
.dev-advanced > summary::-webkit-details-marker { display: none; }
.dev-advanced[open] > .dev-adv-body {
  position: absolute; z-index: 30; right: 0; top: calc(100% + 4px);
  width: 262px; display: grid; gap: 7px; text-align: left;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 12px;
  box-shadow: var(--shadow);
}
.dev-adv-body form { display: block; margin: 0; }
.dev-adv-body > form > .btn { width: 100%; justify-content: center; }
.dev-adv-body .repoint { display: block; }
.dev-adv-body .repoint > summary.btn { width: 100%; justify-content: center; }
.dev-adv-body .repoint[open] > form {
  position: static; width: auto; padding: 10px 0 0;
  background: transparent; border: 0; box-shadow: none;
}

/* re-point disclosure popover */
.repoint { position: relative; display: inline-block; margin: 0; }
.repoint > summary { list-style: none; cursor: pointer; }
.repoint > summary::-webkit-details-marker { display: none; }
.repoint[open] > form {
  position: absolute; z-index: 30; left: 0; top: calc(100% + 4px);
  width: 250px; text-align: left; display: grid; gap: 7px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 13px;
  box-shadow: var(--shadow);
}
.repoint[open] > form label { font-size: 12px; font-weight: 600; display: block; }
.repoint[open] > form input { width: 100%; box-sizing: border-box; margin-top: 3px; }
.repoint[open] > form .hint { margin: 0; }

/* ---------------------------------------------------- status pills ---- */
.badge {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 2px 11px;
  border-radius: var(--radius-full);
  font-size: 12px; font-weight: 600;
  background: var(--bg-soft);
  color: var(--muted);
  border: 1px solid var(--line);
  white-space: nowrap;
}
.badge::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--faint); }
.badge.ok   { background: var(--up-bg);   color: var(--up);       border-color: var(--up-line); }
.badge.ok::before   { background: var(--up); }
.badge.bad  { background: var(--down-bg); color: var(--down);     border-color: var(--down-line); }
.badge.bad::before  { background: var(--down); }
.badge.warn { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.badge.warn::before { background: var(--amber); }

/* role badges (multi-tenant) - no leading dot, uppercase micro-label */
.badge.role-super, .badge.role-admin, .badge.role-viewer {
  gap: 0; padding: 2px 9px;
  font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em;
}
.badge.role-super::before, .badge.role-admin::before, .badge.role-viewer::before { display: none; }
.badge.role-super  { background: var(--role-super-bg);  color: var(--role-super-fg);  border-color: var(--role-super-line); }
.badge.role-admin  { background: var(--role-admin-bg);  color: var(--role-admin-fg);  border-color: var(--role-admin-line); }
.badge.role-viewer { background: var(--role-viewer-bg); color: var(--role-viewer-fg); border-color: var(--role-viewer-line); }

/* --------------------------------------------------------- forms ---- */
label { display: block; margin: 12px 0; font-size: 13px; font-weight: 600; color: var(--slate); }
label input, label select, label textarea { display: block; width: 100%; margin-top: 6px; font-weight: 400; }
label.check { font-weight: 400; margin: 7px 0; color: var(--slate); }
label.check input { display: inline; width: auto; margin-right: 6px; accent-color: var(--cta); }

input, select, textarea {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  padding: 9px 12px;
  font-size: var(--fs-base);
  font-family: var(--font-body);
  transition: border-color .12s, box-shadow .12s, background .12s;
}
input:hover, select:hover, textarea:hover { border-color: var(--faint); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--cta); box-shadow: var(--ring); }
input::placeholder, textarea::placeholder { color: var(--faint); }
input.sm { padding: 5px 9px; font-size: 13px; margin-top: 4px; }
input[name="fob"], input[name="uid"] { font-family: var(--mono); }

.inline-form { display: flex; gap: 9px; flex-wrap: wrap; align-items: center; margin: 0; }
.inline-form input, .inline-form select { width: auto; }

/* -------------------------------------------------------- buttons ---- */
.btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface);
  color: var(--slate);
  border: 1px solid var(--line-strong);
  cursor: pointer;
  padding: 8px 15px;
  border-radius: var(--radius-sm);
  font-size: 14px; font-weight: 600;
  font-family: var(--font-body);
  transition: background .14s, color .14s, border-color .14s, box-shadow .14s, transform .08s;
}
.btn:hover { background: var(--bg-soft); color: var(--navy); border-color: var(--cta); }
.btn:active { transform: translateY(1px); }
.btn.primary {
  background: var(--btn-primary-bg);
  color: var(--btn-primary-fg);
  border-color: transparent;
  box-shadow: var(--shadow-sm);
}
.btn.primary:hover { background: var(--btn-primary-bg-h); color: var(--btn-primary-fg); box-shadow: var(--shadow); }
.btn.danger { background: var(--surface); color: var(--down); border-color: var(--down-line); }
.btn.danger:hover { background: var(--down-bg); color: var(--down); border-color: var(--down); }
.btn.ghost { background: transparent; border-color: var(--line); color: var(--muted); }
.btn.ghost:hover { background: var(--bg-soft); color: var(--navy); border-color: var(--line-strong); }
.btn.sm { padding: 5px 11px; font-size: 13px; }
.btn.wide { width: 100%; justify-content: center; margin-top: 14px; padding: 10px 15px; }

/* ---------------------------------------------------------- auth ---- */
/* Two-panel product sign-in: brand hero + form. */
.auth {
  min-height: 100vh;
  display: grid;
  place-items: stretch;
  background: var(--bg);
}
.auth-shell {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  min-height: 100vh;
  width: 100%;
}

/* left hero */
.auth-hero {
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  padding: 48px 56px;
  color: #EAF4FC;
  background: var(--grad-brand);
  isolation: isolate;
}
.auth-hero::before {   /* radial glow mesh */
  content: ""; position: absolute; inset: 0; z-index: -1;
  background:
    radial-gradient(680px 460px at 78% 8%, rgba(255,255,255,.20), transparent 60%),
    radial-gradient(560px 520px at 8% 96%, rgba(9,40,64,.42), transparent 62%);
}
.auth-hero::after {    /* fine grid texture */
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: .16;
  background-image:
    linear-gradient(rgba(255,255,255,.5) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.5) 1px, transparent 1px);
  background-size: 34px 34px;
  mask-image: radial-gradient(circle at 30% 30%, #000, transparent 78%);
  -webkit-mask-image: radial-gradient(circle at 30% 30%, #000, transparent 78%);
}
.auth-hero .brand { color: #fff !important; padding: 0; font-size: var(--fs-lg); }
.auth-hero .brand .b2 { color: rgba(255,255,255,.72); }
.auth-hero .brand .logo { color: #fff; }
.auth-hero .hero-body { margin-top: auto; }
.auth-hero h1 {
  color: #fff;
  font-size: clamp(28px, 3.2vw, 40px);
  line-height: 1.1;
  letter-spacing: -.03em;
  margin: 0 0 14px;
  max-width: 15ch;
}
.auth-hero .hero-sub {
  color: rgba(255,255,255,.82);
  font-size: var(--fs-md);
  max-width: 42ch;
  margin: 0 0 30px;
}
.auth-features { list-style: none; margin: 0; padding: 0; display: grid; gap: 13px; }
.auth-features li { display: flex; align-items: center; gap: 12px; font-size: 14.5px; color: rgba(255,255,255,.92); }
.auth-features svg {
  width: 20px; height: 20px; flex-shrink: 0;
  fill: none; stroke: #fff; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
  padding: 7px; border-radius: 10px;
  background: rgba(255,255,255,.14);
  box-sizing: content-box;
}
.auth-hero .hero-foot {
  margin-top: 40px;
  font-size: 12.5px; color: rgba(255,255,255,.6);
  letter-spacing: .02em;
}

/* right form panel */
.auth-main {
  display: grid; place-items: center;
  padding: 40px 24px;
  background:
    radial-gradient(700px 420px at 50% -8%, var(--grad-brand-soft), transparent 60%),
    var(--bg);
}
.auth-card {
  width: 100%; max-width: 380px;
  animation: rise .45s both;
}
.auth-card .brand.mobile-brand {
  display: none;
  justify-content: center; padding: 0 0 8px;
}
.auth-card h1 { font-size: var(--fs-xl); margin: 0 0 4px; }
.auth-card .auth-sub { color: var(--muted); font-size: 14px; margin: 0 0 22px; }
.auth-card form { text-align: left; }
.auth-card .flash { margin: 0 0 14px; max-width: none; }

/* two-column sign-in pages: green hero on the left, card on the right */
body.auth { margin: 0; background: var(--bg); }
.auth-hero { background: linear-gradient(135deg, #0B8F3C 0%, #16A34A 55%, #1FD65A 100%); color: #EAF4FC; }
.auth-hero .brand { display: flex; align-items: center; gap: 12px; }
.auth-hero .brand .b1 { color: #fff; font-family: var(--font-display); font-size: 22px; }
.auth-hero .brand .b2 { color: rgba(255,255,255,.72); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.auth-hero h1 { font-family: var(--font-display); }
.auth-card .brand.mobile-brand { display: none; align-items: center; gap: 10px; }
.auth-card .brand .b1 { font-family: var(--font-display); font-size: 20px; }
.auth-card .brand .b2 { font-size: 11px; text-transform: uppercase; letter-spacing: .12em; }
.auth-card .auth-foot { color: var(--muted); font-size: 12.5px; margin: 18px 0 0; }
.auth-card .msg { margin: 0 0 14px; }
.auth-card .stack { display: grid; gap: 8px; margin-bottom: 8px; }
.auth-card .btn.primary { background: #0B8F3C; border-color: #0B8F3C; color: #fff; }
.auth-card .btn.primary:hover { background: #16A34A; border-color: #16A34A; }
.auth-card input:focus { border-color: #1FD65A; box-shadow: 0 0 0 3px rgba(31,214,90,.25); outline: none; }

/* single-card pages (authenticator code, enrolment, recovery codes) */
body.login {
  min-height: 100vh; margin: 0;
  display: grid; place-items: center;
  padding: 20px;
  background:
    radial-gradient(900px 540px at 50% -10%, var(--grad-brand-soft), transparent 60%),
    var(--bg);
}
.login-card .brand-lg { display: flex; align-items: center; justify-content: center; gap: 12px; margin-bottom: 18px; text-align: left; }
.login-card .brand-lg .b1 { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); }
.login-card .brand-lg .sub { color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: .14em; font-weight: 600; }

/* legacy single-card login (kept for compatibility) */
.login-body {
  min-height: 100vh;
  display: grid; place-items: center;
  padding: 20px;
  background:
    radial-gradient(900px 540px at 50% -10%, var(--grad-brand-soft), transparent 60%),
    var(--bg);
}
.login-card {
  width: 384px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 32px 32px 28px;
  box-shadow: var(--shadow-lg);
  position: relative; overflow: hidden;
  text-align: center;
  animation: rise .45s both;
}
.login-card::before {
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--grad-line);
}
.login-card .brand { color: var(--navy) !important; justify-content: center; margin-top: 12px; padding: 0; }
.login-card .tagline {
  color: var(--muted);
  font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .18em;
  margin: 6px 0 20px;
}
.login-card form { text-align: left; }
.login-card .flash { margin: 12px 0; max-width: none; }

@media (max-width: 860px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-hero { display: none; }
  .auth-card .brand.mobile-brand { display: flex; }
  .auth-card { text-align: center; }
  .auth-card form { text-align: left; }
}

/* ------------------------------------------- shared serial panel ---- */
/* One Web Serial connection drives the whole wizard, so its controls and log
   sit below the step content and stay in view as the steps change. */
.serialbar {
  position: sticky; bottom: 0; z-index: 5;
  max-width: 780px; margin: 18px 0 0;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow-sm);
  padding: 12px 14px 14px;
}
.serialbar .sbhead { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.serialbar .sbtitle { font-family: var(--font-display); font-size: var(--fs-md); }
.serialbar .sbspace { flex: 1 1 auto; }
.serialbar .termlog { margin-top: 10px; max-height: 190px; min-height: 84px; }

/* -------------------------------------------------- dark-mode toggle ---- */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--muted); cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.theme-toggle:hover { background: var(--bg-soft); color: var(--navy); border-color: var(--cta); }
.theme-toggle svg {
  width: 17px; height: 17px;
  fill: none; stroke: currentColor; stroke-width: 1.8;
  stroke-linecap: round; stroke-linejoin: round;
}
.theme-toggle .i-sun { display: none; }
:root[data-theme="dark"] .theme-toggle .i-moon { display: none; }
:root[data-theme="dark"] .theme-toggle .i-sun  { display: block; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .theme-toggle .i-moon { display: none; }
  :root:not([data-theme="light"]) .theme-toggle .i-sun  { display: block; }
}
.theme-toggle.fixed { position: fixed; top: 18px; right: 18px; z-index: 5; box-shadow: var(--shadow-sm); }

/* smooth theme flip without animating layout */
body, .sidebar, .panel, .card, table, th, td, code, .badge,
.btn, input, select, textarea, .theme-toggle, .flash, .tenant-switch, .readonly-bar {
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* --------------------------------------------- global enrolment banner ---- */
.enrol-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 9px 18px; font-size: 13.5px; color: var(--ink);
  background: color-mix(in srgb, var(--up) 14%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--up) 40%, var(--line));
}
.enrol-bar .dot {
  width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--up);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 25%, transparent);
  animation: enrolpulse 1.6s ease-in-out infinite;
}
@keyframes enrolpulse { 50% { box-shadow: 0 0 0 7px color-mix(in srgb, var(--up) 8%, transparent); } }
.enrol-bar form { margin-left: auto; }

/* ------------------------------------------- dashboard check simulator ---- */
.check-panel .sec-head { margin-top: 0; }
.check-result {
  margin-top: 12px; padding: 10px 14px; border-radius: var(--radius-sm);
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  border: 1px solid var(--line);
}
.check-result.grant { background: color-mix(in srgb, var(--up) 12%, var(--surface)); border-color: color-mix(in srgb, var(--up) 40%, var(--line)); }
.check-result.deny  { background: color-mix(in srgb, var(--down) 12%, var(--surface)); border-color: color-mix(in srgb, var(--down) 40%, var(--line)); }

/* ---------------------------------------------- wizard: icon option cards ---- */
.wchoice.two { grid-template-columns: 1fr 1fr; }
@media (max-width: 640px) { .wchoice.two { grid-template-columns: 1fr; } }
.wpick { position: relative; align-items: center; gap: 14px; }
.wpick input { position: absolute; opacity: 0; width: 0; height: 0; margin: 0; }
.wpick .wico {
  width: 52px; height: 52px; border-radius: 14px; flex-shrink: 0;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--cta) 10%, var(--surface)); color: var(--cta);
  transition: background .12s, color .12s;
}
.wpick .wico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.wpick:has(input:checked) .wico { background: var(--cta); color: #fff; }
.wpick:has(input:checked) { box-shadow: 0 0 0 3px color-mix(in srgb, var(--cta) 22%, transparent); }
.wpick .wtick {
  margin-left: auto; width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  border: 1.5px solid var(--line); display: grid; place-items: center; color: #fff; font-size: 13px;
}
.wpick:has(input:checked) .wtick { background: var(--cta); border-color: var(--cta); }
.wpick:has(input:checked) .wtick::after { content: "✓"; }
.wsteps li svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.wsub { margin: 4px 0 14px; }

/* ------------------------------- dashboard: combined stat cards ---- */
.cards.cards-dual { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .cards.cards-dual { grid-template-columns: 1fr; } }
.card.card-dual { padding: 0; gap: 0; align-items: stretch; }
.card.card-dual:hover { box-shadow: var(--shadow); border-color: var(--line-strong); }
.card-dual .stat {
  flex: 1 1 0; min-width: 0; display: flex; align-items: center; gap: 13px;
  padding: 16px 18px; color: inherit !important; text-decoration: none !important;
  transition: background .12s;
}
.card-dual .stat + .stat { border-left: 1px solid var(--line); }
.card-dual .stat:hover { background: var(--bg-soft); }
.card-dual .stat.alert .num { color: var(--down); }

/* live-listening indicator (door capture) */
.dot-live { display: inline-block; width: 9px; height: 9px; border-radius: 50%; background: var(--up); box-shadow: 0 0 0 4px color-mix(in srgb, var(--up) 25%, transparent); animation: enrolpulse 1.6s ease-in-out infinite; margin-right: 6px; vertical-align: middle; }
.listening { margin: 10px 0 6px; }

/* ------------------------------------------------- schedule editor ---- */
.sched-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 12px 0 14px; }
.sched-head, .sched-row {
  display: grid; grid-template-columns: 92px 150px 108px 108px minmax(160px, 1fr) auto;
  gap: 12px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.sched-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); padding-bottom: 4px; }
.sched-row:last-child { border-bottom: none; }
.sched-day { font-weight: 600; }
.sched-row input[type=time], .sched-row select { width: 100%; margin: 0; }
.sched-row input.dim { opacity: .35; }
.tl {
  position: relative; display: block; height: 12px; border-radius: 6px; overflow: hidden;
  background: repeating-linear-gradient(to right, var(--bg-soft) 0, var(--bg-soft) calc(100% / 24 - 1px), var(--line) calc(100% / 24 - 1px), var(--line) calc(100% / 24));
}
.tl-seg { position: absolute; top: 0; bottom: 0; background: var(--up); display: none; }
.tl-now { position: absolute; top: -1px; bottom: -1px; width: 2px; background: var(--amber); }
.sched-copy { display: flex; gap: 4px; }
.sched-sum { margin: 12px 0 2px; font-size: 13.5px; color: var(--slate); }
@media (max-width: 900px) {
  .sched-head { display: none; }
  .sched-row { grid-template-columns: 1fr 1fr; }
  .sched-row .tl, .sched-row .sched-copy { grid-column: 1 / -1; }
}

/* ------------------------------------------------ role editor tree ---- */
.ptree { margin: 6px 0 12px; }
.ptree-head, .ptree-row {
  display: grid; grid-template-columns: 1fr 84px 84px; align-items: center;
  gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.ptree-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ptree-head span:not(:first-child), .ptree-row > span:not(:first-child) { text-align: center; }
.ptree-row:last-child { border-bottom: none; }
.ptree-row:hover { background: var(--bg-soft); }
.ptree-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ptree-row.child .ptree-label { padding-left: 26px; color: var(--slate); font-weight: 500; }
.ptree-branch { color: var(--faint); }
.ptree-ico { width: 16px; height: 16px; fill: none; stroke: var(--cta); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex-shrink: 0; }
.ptree-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--cta); }
.badge.role-custom { background: color-mix(in srgb, var(--cta) 12%, var(--surface)); color: var(--cta); border: 1px solid color-mix(in srgb, var(--cta) 35%, var(--line)); text-decoration: none; }

/* ---------------------------------------------- person avatars ---- */
.avatar-cell { width: 44px; }
.avatar { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; display: block; }
.avatar-blank {
  display: grid; place-items: center; background: color-mix(in srgb, var(--cta) 14%, var(--surface));
  color: var(--cta); font-size: 12px; font-weight: 700; font-family: var(--font-display);
}
.photo-edit { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; }
.photo-lg { width: 76px; height: 76px; border-radius: 14px; object-fit: cover; flex-shrink: 0; }
.photo-lg.avatar-blank { border-radius: 14px; font-size: 26px; }

/* webcam capture (person photo) */
#camWrap video { width: 260px; max-width: 100%; border-radius: 12px; background: #000; display: block; }

/* ------------------------------------------------- room hours editor ---- */
/* The schedule editor's shape, with the extra ticks a room's day needs. */
.hours-tools { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 10px 0 14px; }
.hours-head, .hours-row {
  display: grid; grid-template-columns: 84px 60px 64px 100px 100px 100px 100px minmax(130px, 1fr) auto;
  gap: 9px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.hours-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding-bottom: 4px;
}
.hours-row:last-child { border-bottom: none; }
.hours-row .hd, .peak-row .hd { font-weight: 600; }
.hours-row input[type=time], .peak-row input[type=time] { width: 100%; margin: 0; }
.hours-row input.dim, .peak-row input.dim { opacity: .35; }
.tick { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--slate); }
.tick input { margin: 0; accent-color: var(--cta); }
.day-copy { display: flex; gap: 4px; }
.hours-sum { margin: 12px 0 2px; font-size: 13.5px; color: var(--slate); }
/* peak windows: one a day, so a narrower grid */
.peak-head, .peak-row {
  display: grid; grid-template-columns: 84px 60px 64px 100px 100px minmax(130px, 1fr) auto;
  gap: 9px; align-items: center; padding: 7px 0; border-bottom: 1px solid var(--line);
}
.peak-head {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em;
  color: var(--muted); padding-bottom: 4px;
}
.peak-row:last-child { border-bottom: none; }
.tl-peak { background: var(--amber); }
@media (max-width: 960px) {
  .hours-head, .peak-head { display: none; }
  .hours-row, .peak-row { grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 0; }
  .hours-row .hd, .peak-row .hd,
  .hours-row .tl, .hours-row .day-copy,
  .peak-row .tl, .peak-row .day-copy { grid-column: 1 / -1; }
}

/* ----------------------------------------------------- room pictures ---- */
.shots { display: flex; flex-wrap: wrap; gap: 12px; margin: 10px 0 4px; }
.shot { width: 168px; max-width: 100%; }
.shot img {
  width: 100%; height: 118px; object-fit: cover; border-radius: 12px; display: block;
  border: 1px solid var(--line); background: var(--bg-soft);
}
.shot .shot-bar { display: flex; gap: 4px; align-items: center; margin-top: 6px; }
.shot .shot-bar form { display: inline; }
.shot .shot-no {
  font-size: 11px; font-weight: 700; color: var(--muted); margin-right: auto;
  text-transform: uppercase; letter-spacing: .06em;
}
.room-thumb {
  width: 46px; height: 34px; object-fit: cover; border-radius: 7px; display: block;
  border: 1px solid var(--line);
}

/* --------------------------------------------------- peak and passes ---- */
.badge.peak { background: var(--warn-bg); color: var(--warn-ink); border-color: var(--warn-line); }
.tabbar { display: flex; gap: 8px; margin: 4px 0 16px; flex-wrap: wrap; }
.tabbar a {
  text-decoration: none; font-size: 14px; font-weight: 600; color: var(--slate);
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface);
}
.tabbar a.on { background: var(--cta); border-color: var(--cta); color: #fff; }

/* wizard: "settings sent" confirmation */
.wdialog { border: 1px solid var(--line); border-radius: var(--radius); padding: 28px 32px; background: var(--surface); color: var(--text); box-shadow: var(--shadow); max-width: 440px; width: calc(100% - 40px); }
.wdialog::backdrop { background: rgba(10, 16, 30, 0.55); }
.wdialog .wdone { text-align: center; }

/* --- permission tree (group editor) and user access --------------------- */
.ptree { margin: 6px 0 12px; }
.ptree-head, .ptree-row {
  display: grid; grid-template-columns: 1fr 84px 84px; align-items: center;
  gap: 10px; padding: 8px 10px; border-bottom: 1px solid var(--line);
}
.ptree-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); }
.ptree-head span:not(:first-child), .ptree-row > span:not(:first-child) { text-align: center; }
.ptree-row:last-child { border-bottom: none; }
.ptree-row:hover { background: var(--bg-soft); }
.ptree-row.above .ptree-label { color: var(--muted); }
.ptree-label { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.ptree-ico { width: 16px; height: 16px; fill: none; stroke: var(--cta); stroke-width: 1.8; stroke-linejoin: round; stroke-linecap: round; flex-shrink: 0; }
.ptree-row input[type=checkbox] { width: 17px; height: 17px; accent-color: var(--cta); }
.ptree-row input[type=checkbox]:disabled { opacity: .35; }
.access-form { min-width: 220px; text-align: left; margin-top: 8px; }
.access-form fieldset { border: 1px solid var(--line); border-radius: 8px; padding: 6px 10px; margin: 8px 0; }
.access-form legend { font-size: 12px; color: var(--muted); }
details > summary.btn { list-style: none; display: inline-block; cursor: pointer; }
details > summary.btn::-webkit-details-marker { display: none; }

/* ------------------------------------------- sidebar search ---- */
.side-search { position: relative; margin: 6px 0 4px; }
.side-search input { width: 100%; padding: 8px 10px; border: 1px solid var(--sidebar-line); border-radius: 10px;
  background: var(--surface); color: var(--ink); font: inherit; font-size: 13.5px; }
.side-search input:focus { outline: none; box-shadow: var(--ring); border-color: var(--cta); }

/* live results: a dropdown under the box, over the nav */
.side-search .ssr {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  max-height: min(70vh, 480px); overflow-y: auto;
  padding: 6px;
  background: var(--surface); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 12px;
  box-shadow: var(--shadow);
}
.ssr-group { padding: 2px 0 4px; }
.ssr-group + .ssr-group { border-top: 1px solid var(--line); margin-top: 2px; padding-top: 6px; }
.ssr-group h4 {
  margin: 4px 9px 3px; font-family: var(--font-body);
  font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: var(--muted);
}
.ssr-hit {
  display: block; padding: 6px 9px; border-radius: 8px;
  color: var(--ink) !important; text-decoration: none !important;
  line-height: 1.3;
}
.ssr-hit .t { display: block; font-weight: 600; font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr-hit .d { display: block; color: var(--muted); font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ssr-hit:hover { background: var(--nav-hover-bg); }
.ssr-hit.on { background: var(--nav-hover-bg); box-shadow: inset 0 0 0 1px var(--cta); }
.ssr-more {
  display: block; margin: 4px 0 0; padding: 8px 9px; border-top: 1px solid var(--line);
  font-size: 13px; font-weight: 600; color: var(--cta) !important; text-decoration: none !important;
}
.ssr-more:hover { background: var(--nav-hover-bg); border-radius: 0 0 8px 8px; }
.ssr-empty { padding: 10px 9px; color: var(--muted); font-size: 13px; }
@media (max-width: 880px) {
  .side-search { display: none; }
  body.nav-open .side-search { display: block; width: 100%; margin: 8px 0 0; }
  .side-search .ssr { max-height: 60vh; }
}