/* ==========================================================================
   Perimeter: access control and connected systems
   MiniBytez product demonstration

   The only dark product in this suite. The justification is the context: this is a
   monitored environment, often on a wall display in a low-light control room, watched
   for hours. That is a real reason for a dark interface, and it is the only one.

   This palette must not appear in any other demonstration.

   Red and green are reserved exclusively for access outcomes and device state.
   Nothing decorative may use them. Records sit on white panels inside the dark
   shell, because reading a person's file on a dark ground is a strain.
   ========================================================================== */

:root {
  --shell:    #14161a;
  --shell-2:  #1b1e24;
  --shell-3:  #23272f;
  --shell-4:  #2f343d;
  --graphite: #1f232a;
  --edge:     #313742;
  --edge-2:   #3d4450;

  --dim:      #7d8794;
  --text:     #c9d1da;
  --bright:   #f2f5f8;

  --panel:    #ffffff;
  --panel-ink:#161a20;
  --panel-2:  #6b7480;
  --panel-line:#e2e6ea;

  --granted:  #2f9e5f;
  --granted-d:#123a24;
  --denied:   #d9483c;
  --denied-d: #3d1613;
  --warn:     #d8952b;
  --warn-d:   #3a2a0e;

  --rail: 194px;
  --ff: "Segoe UI", -apple-system, BlinkMacSystemFont, Inter, Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, "Cascadia Mono", "SF Mono", Menlo, Consolas, monospace;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; height: 100%; }

body {
  margin: 0; height: 100%;
  background: var(--shell);
  color: var(--text);
  font: 400 13px/1.5 var(--ff);
  -webkit-font-smoothing: antialiased;
}

a { color: #7fb3e8; text-decoration: none; }
a:hover { text-decoration: underline; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid #6ea8dd; outline-offset: 2px; }

.mono { font-family: var(--mono); font-size: 12px; letter-spacing: -0.01em; }
.num { font-variant-numeric: tabular-nums; }

.skip { position: absolute; left: -9999px; background: var(--bright); color: var(--shell); padding: 9px 14px; z-index: 100; }
.skip:focus { left: 6px; top: 6px; }

/* --- Frame ---------------------------------------------------------------- */

.frame {
  display: grid;
  grid-template-columns: var(--rail) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr);
  height: 100vh;
}

/* Persistent status strip. Always visible, on every screen. */
.status {
  grid-column: 1 / -1;
  display: flex; align-items: stretch; gap: 0;
  background: var(--graphite); border-bottom: 1px solid var(--edge);
  overflow-x: auto; scrollbar-width: none;
}
.status::-webkit-scrollbar { display: none; }
.status__brand {
  padding: 9px 16px; border-right: 1px solid var(--edge); white-space: nowrap;
  display: flex; flex-direction: column; justify-content: center;
}
.status__brand b { color: var(--bright); font-size: 14.5px; font-weight: 650; letter-spacing: -0.01em; }
.status__brand span { font-size: 10px; color: var(--dim); }

.status__cell {
  padding: 9px 16px; border-right: 1px solid var(--edge); white-space: nowrap;
  display: flex; flex-direction: column; justify-content: center; min-width: 0;
}
.status__cell dt { font-size: 9.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 3px; }
.status__cell dd { margin: 0; font-size: 14px; font-weight: 620; color: var(--bright); font-variant-numeric: tabular-nums; }
.status__cell dd small { font-size: 11px; font-weight: 400; color: var(--dim); }
.status__cell dd.ok { color: var(--granted); }
.status__cell dd.bad { color: var(--denied); }
.status__cell dd.warn { color: var(--warn); }

.status__gap { flex: 1; border-right: 0; }
.status__site { padding: 9px 14px; display: flex; align-items: center; border-left: 1px solid var(--edge); }
.status__site select {
  background: var(--shell-3); color: var(--bright); border: 1px solid var(--edge-2);
  border-radius: 3px; font: inherit; font-size: 12px; padding: 4px 7px;
}
.status__lockdown {
  padding: 9px 14px; display: flex; align-items: center; gap: 8px;
  border-left: 1px solid var(--edge);
}
.status__lockdown.on { background: var(--denied-d); }

/* Live pulse: the only animation in this product, and it communicates state. */
.pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--granted); flex: none; }
.pulse--live { animation: pulse 2.4s ease-in-out infinite; }
.pulse--paused { background: var(--dim); animation: none; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@media (prefers-reduced-motion: reduce) { .pulse--live { animation: none; } }

/* --- Rail ----------------------------------------------------------------- */

.rail { background: var(--shell-2); border-right: 1px solid var(--edge); overflow-y: auto; padding-bottom: 12px; }
.rail__group {
  font-size: 9.5px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase;
  color: #5d6773; padding: 15px 16px 6px;
}
.rail a.m {
  display: flex; align-items: center; gap: 8px; padding: 7px 16px;
  color: var(--text); text-decoration: none; font-size: 13px; border-left: 3px solid transparent;
}
.rail a.m:hover { background: var(--shell-3); color: var(--bright); text-decoration: none; }
.rail a.m[aria-current="page"] { background: var(--shell-3); color: var(--bright); border-left-color: #6ea8dd; font-weight: 600; }
.rail .n { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: var(--dim); }
.rail .n--bad { color: var(--denied); font-weight: 700; }
.rail .n--warn { color: var(--warn); font-weight: 700; }

.rail__foot { padding: 14px 16px 0; margin-top: 10px; border-top: 1px solid var(--edge); }
.rail__foot button { background: none; border: 0; color: var(--text); cursor: pointer; padding: 0; font-size: 12.5px; text-align: left; }
.rail__foot button:hover { color: var(--bright); }
.rail__foot .role { font-size: 10.5px; color: var(--dim); margin-top: 2px; }

.demo {
  margin: 14px 16px 0; padding: 9px 11px; background: var(--shell-3);
  border: 1px solid var(--edge); border-radius: 3px; font-size: 10.5px; color: var(--dim);
}
.demo strong { display: block; color: var(--text); font-size: 11px; margin-bottom: 3px; }
.demo .row { display: flex; gap: 7px; margin-top: 7px; }
.demo button, .demo a {
  background: none; border: 1px solid var(--edge-2); border-radius: 3px;
  padding: 1px 7px; font-size: 10.5px; color: var(--text); cursor: pointer; text-decoration: none;
}
.demo button:hover, .demo a:hover { border-color: #6ea8dd; color: var(--bright); text-decoration: none; }

/* --- Main ----------------------------------------------------------------- */

.main { min-width: 0; min-height: 0; overflow-y: auto; }

.bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  padding: 12px 18px; border-bottom: 1px solid var(--edge); background: var(--shell-2);
  position: sticky; top: 0; z-index: 20;
}
.bar h1 { font-size: 16px; font-weight: 640; margin: 0; color: var(--bright); letter-spacing: -0.015em; }
.bar .sub { font-size: 12px; color: var(--dim); }
.bar .gap { flex: 1; }

.btn {
  height: 28px; padding: 0 11px; border: 1px solid var(--edge-2); background: var(--shell-3);
  border-radius: 3px; font-size: 12.5px; cursor: pointer; color: var(--text); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 6px;
}
.btn:hover { border-color: #5c6675; color: var(--bright); }
.btn--danger { border-color: #7a2b24; background: var(--denied-d); color: #f0a49c; }
.btn--danger:hover { border-color: var(--denied); color: #fff; }
.btn--go { background: #24405c; border-color: #325779; color: var(--bright); font-weight: 600; }
.btn--go:hover { background: #2c4d6f; }
.btn--sm { height: 24px; padding: 0 9px; font-size: 12px; }

.field {
  height: 28px; padding: 0 8px; font: inherit; font-size: 12.5px;
  background: var(--shell-3); border: 1px solid var(--edge-2); border-radius: 3px; color: var(--bright);
}
.field::placeholder { color: #616b78; }
.field:focus { border-color: #6ea8dd; outline: none; }

.page { padding: 16px 18px 50px; }

/* --- Live stream ---------------------------------------------------------- */

.live { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 0; min-height: 0; }
.stream { min-width: 0; }

table.ev { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.ev thead th {
  position: sticky; top: 0; z-index: 5; background: var(--shell-2);
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); padding: 8px 12px; border-bottom: 1px solid var(--edge); white-space: nowrap;
}
table.ev tbody tr { border-bottom: 1px solid #1e222a; }
table.ev tbody tr:hover { background: var(--shell-2); }
table.ev td { padding: 7px 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.ev td.wide { max-width: 0; }
table.ev .who { color: var(--bright); font-weight: 550; }
table.ev .who:hover { text-decoration: underline; cursor: pointer; }
table.ev .t { font-family: var(--mono); font-size: 11.5px; color: var(--dim); }

/* New rows arrive at the top. The flash is state, not decoration. */
tr.arriving { animation: arrive .7s ease-out; }
@keyframes arrive { from { background: #26313d; } to { background: transparent; } }
@media (prefers-reduced-motion: reduce) { tr.arriving { animation: none; } }

.outcome { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12px; }
.outcome::before { content: ""; width: 7px; height: 7px; border-radius: 50%; flex: none; }
.outcome--granted { color: var(--granted); }
.outcome--granted::before { background: var(--granted); }
.outcome--denied { color: var(--denied); }
.outcome--denied::before { background: var(--denied); }

/* --- Door tiles: state objects, not cards --------------------------------- */

.doorside { border-left: 1px solid var(--edge); background: var(--shell-2); overflow-y: auto; }
.doorside__head {
  padding: 9px 14px; border-bottom: 1px solid var(--edge);
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--dim);
  display: flex; justify-content: space-between; position: sticky; top: 0; background: var(--shell-2); z-index: 5;
}

.doorgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; padding: 12px; }
.doortile {
  background: var(--graphite); border: 1px solid var(--edge); border-radius: 3px;
  padding: 9px 10px; text-align: left; cursor: pointer; width: 100%; color: inherit; font: inherit;
  border-left: 3px solid var(--edge-2);
}
.doortile:hover { border-color: var(--edge-2); background: var(--shell-3); }
.doortile--secured { border-left-color: var(--granted); }
.doortile--held { border-left-color: var(--warn); background: #211d12; }
.doortile--lockdown { border-left-color: var(--denied); background: #231513; }
.doortile--unlocked { border-left-color: var(--warn); }
.doortile--offline { border-left-color: #5d6773; opacity: .72; }
.doortile--alarm { border-color: var(--denied); background: var(--denied-d); }
.doortile__ref { display: block; font-family: var(--mono); font-size: 10.5px; color: var(--dim); }
.doortile__name { display: block; font-size: 12.5px; color: var(--bright); font-weight: 550; margin: 2px 0 5px; line-height: 1.3; }
.doortile__state { font-size: 11px; display: flex; align-items: center; gap: 6px; }
.doortile__state i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* --- Data grids on dark --------------------------------------------------- */

table.grid { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.grid thead th {
  text-align: left; font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dim); padding: 8px 12px; border-bottom: 1px solid var(--edge); white-space: nowrap;
  position: sticky; top: 0; background: var(--shell); z-index: 5;
}
table.grid thead th.r { text-align: right; }
table.grid tbody tr { border-bottom: 1px solid #1e222a; }
table.grid tbody tr:hover { background: var(--shell-2); }
table.grid td { padding: 8px 12px; }
table.grid td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.grid .b { color: var(--bright); font-weight: 550; }

.state { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; white-space: nowrap; }
.state::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dim); flex: none; }
.state--ok::before { background: var(--granted); }
.state--warn::before { background: var(--warn); }
.state--bad::before { background: var(--denied); }
.state--ok { color: var(--granted); }
.state--warn { color: var(--warn); }
.state--bad { color: var(--denied); }

.chip {
  display: inline-block; padding: 1px 8px; border-radius: 10px; font-size: 11px;
  background: var(--shell-3); color: var(--text); border: 1px solid var(--edge-2);
}
.chip--sensitive { border-color: #6a4a1e; color: #dfae63; background: #241c0e; }

/* --- White record panels inside the dark shell --------------------------- */

.record {
  background: var(--panel); color: var(--panel-ink); border-radius: 4px;
  overflow: hidden; margin-bottom: 14px;
}
.record__head { padding: 15px 18px; border-bottom: 1px solid var(--panel-line); display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.record__head h2 { margin: 0 0 3px; font-size: 19px; font-weight: 650; letter-spacing: -0.02em; }
.record__head .meta { font-size: 12.5px; color: var(--panel-2); }
.record__head .acts { margin-left: auto; display: flex; gap: 7px; flex-wrap: wrap; }
.record__body { padding: 15px 18px; }
.record h3 {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--panel-2); margin: 0 0 9px;
}
.record h3:not(:first-child) { margin-top: 22px; }

.record .btn {
  background: #f2f4f6; border-color: var(--panel-line); color: var(--panel-ink);
}
.record .btn:hover { border-color: #b9c0c8; }
.record .btn--go { background: #1f3a56; border-color: #1f3a56; color: #fff; }
.record .btn--danger { background: #fdeceb; border-color: #f0c6c2; color: #9c2f26; }

.kv { display: grid; grid-template-columns: 116px minmax(0, 1fr); gap: 7px 12px; font-size: 13px; margin: 0; }
.kv dt { color: var(--panel-2); }
.kv dd { margin: 0; }

.rlist { list-style: none; margin: 0; padding: 0; }
.rlist li { padding: 9px 0; border-bottom: 1px solid #f0f2f4; display: flex; gap: 11px; align-items: flex-start; }
.rlist li:last-child { border-bottom: 0; }
.rlist .grow { flex: 1; min-width: 0; }
.rlist .t { font-size: 13px; font-weight: 550; }
.rlist .s { font-size: 12px; color: var(--panel-2); }

table.rec { width: 100%; border-collapse: collapse; font-size: 12.5px; }
table.rec th { text-align: left; font-size: 10.5px; font-weight: 650; color: var(--panel-2); padding: 0 12px 7px 0; border-bottom: 1px solid var(--panel-line); }
table.rec td { padding: 8px 12px 8px 0; border-bottom: 1px solid #f0f2f4; }
table.rec tr:last-child td { border-bottom: 0; }
table.rec .r { text-align: right; }

.recstate { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; }
.recstate::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.recstate--ok { color: #1c7a44; } .recstate--ok::before { background: #1c7a44; }
.recstate--bad { color: #b0332a; } .recstate--bad::before { background: #b0332a; }
.recstate--warn { color: #96650f; } .recstate--warn::before { background: #96650f; }

/* --- Overlay panel over the stream --------------------------------------- */

.scrim { position: fixed; inset: 0; background: rgba(10,12,15,.62); z-index: 60; }
.scrim[hidden] { display: none; }
.panelover {
  position: fixed; top: 0; right: 0; bottom: 0; width: min(560px, 100%);
  background: var(--shell); z-index: 61; overflow-y: auto;
  border-left: 1px solid var(--edge); box-shadow: -14px 0 40px rgba(0,0,0,.5);
}
.panelover[hidden] { display: none; }
.panelover__head {
  padding: 12px 16px; border-bottom: 1px solid var(--edge);
  display: flex; align-items: center; gap: 12px; position: sticky; top: 0; background: var(--shell); z-index: 5;
}
.panelover__head h2 { margin: 0; font-size: 15px; color: var(--bright); font-weight: 640; }
.panelover__close { margin-left: auto; background: none; border: 0; color: var(--dim); font-size: 20px; cursor: pointer; padding: 2px 8px; }
.panelover__close:hover { color: var(--bright); }
.panelover__body { padding: 14px 16px 40px; }

.empty { padding: 40px 18px; text-align: center; color: var(--dim); font-size: 12.5px; }
.empty strong { display: block; color: var(--text); font-size: 14px; font-weight: 620; margin-bottom: 5px; }
.empty p { margin: 0 auto; max-width: 48ch; }

/* --- Modal and toast ------------------------------------------------------ */

.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(10,12,15,.66); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 20px 20px; overflow-y: auto; }
.overlay[hidden] { display: none; }
.modal { background: var(--shell-2); border: 1px solid var(--edge-2); border-radius: 4px; width: 100%; max-width: 480px; box-shadow: 0 20px 50px rgba(0,0,0,.55); }
.modal__head { padding: 14px 18px 11px; border-bottom: 1px solid var(--edge); }
.modal__head h2 { margin: 0; font-size: 15px; font-weight: 640; color: var(--bright); }
.modal__head p { margin: 5px 0 0; font-size: 12.5px; color: var(--dim); }
.modal__body { padding: 15px 18px; display: grid; gap: 12px; max-height: 56vh; overflow-y: auto; }
.modal__foot { padding: 12px 18px 15px; display: flex; gap: 8px; justify-content: flex-end; border-top: 1px solid var(--edge); }
.modal .field { width: 100%; }
.lbl { display: block; font-size: 11px; font-weight: 650; color: var(--dim); margin-bottom: 4px; letter-spacing: .05em; text-transform: uppercase; }

.toasts { position: fixed; bottom: 16px; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 6px; }
.toast { background: var(--shell-3); border: 1px solid var(--edge-2); color: var(--bright); font-size: 12.5px; padding: 9px 14px; border-radius: 3px; box-shadow: 0 8px 24px rgba(0,0,0,.5); display: flex; gap: 13px; align-items: center; }
.toast button { background: none; border: 0; color: #7fb3e8; cursor: pointer; font-size: 12px; }

/* --- Responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
  .live { grid-template-columns: minmax(0, 1fr); }
  .doorside { border-left: 0; border-top: 1px solid var(--edge); }
}

@media (max-width: 860px) {
  .frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto auto minmax(0, 1fr); height: auto; min-height: 100vh; }
  .status { grid-column: 1; }
  .status__cell { padding: 8px 12px; }
  .rail {
    display: flex; align-items: center; overflow-x: auto; padding: 0 8px;
    border-right: 0; border-bottom: 1px solid var(--edge); gap: 3px; scrollbar-width: none;
  }
  .rail::-webkit-scrollbar { display: none; }
  .rail__group, .rail__foot, .demo { display: none; }
  .rail a.m { white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 9px 10px; }
  .rail a.m[aria-current="page"] { border-left: 0; border-bottom-color: #6ea8dd; }
  .main { overflow-y: visible; }
  /* On a phone the live view is the event stream. Door tiles move below it. */
  table.ev .hide-sm, table.grid .hide-sm { display: none; }
  /* Wide grids scroll inside themselves rather than pushing the page sideways. */
  table.grid { display: block; overflow-x: auto; white-space: nowrap; }
  table.grid thead, table.grid tbody { display: table; width: 100%; min-width: 520px; }
  /* The event stream carries fixed column widths, so even with the .hide-sm
     columns dropped it stays wider than a 320px phone. Same treatment. */
  table.ev { display: block; overflow-x: auto; }
  table.ev thead, table.ev tbody { display: table; width: 100%; min-width: 360px; }
  .panelover { width: 100%; }
  .page { padding: 14px 12px 40px; }
}

@media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } }