/* ==========================================================================
   Deck: operations management
   MiniBytez product demonstration

   Visual language: light grey ground, navy structure, one amber operational accent.
   The densest product in this suite, on purpose: 12px UI type, 27px rows, zebra
   striping, tabular numerals, hairline rules. No cards. Radius never exceeds 2px.
   The only colour event on the screen is an SLA clock running out, which is exactly
   why it works.
   ========================================================================== */

:root {
  --grey:      #eef0f3;
  --grey-2:    #e4e7eb;
  --panel:     #ffffff;
  --zebra:     #f8f9fa;
  --navy:      #16243d;
  --navy-2:    #22355a;
  --navy-3:    #33496f;
  --ink:       #1c2331;
  --ink-2:     #414b5c;
  --muted:     #6a7484;
  --faint:     #939cab;
  --line:      #d8dce2;
  --line-2:    #e8eaee;

  --amber:     #c77e00;
  --amber-bg:  #fdf4e3;
  --red:       #b4271f;
  --red-bg:    #fdedeb;
  --green:     #1f6b41;
  --green-bg:  #ecf5f0;

  --rail: 208px;
  --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(--grey);
  color: var(--ink);
  font: 400 12px/1.45 var(--ff);
  -webkit-font-smoothing: antialiased;
}

a { color: var(--navy-2); }
button { font: inherit; color: inherit; }
:focus-visible { outline: 2px solid var(--navy-2); outline-offset: 1px; }

.mono { font-family: var(--mono); font-size: 11.5px; }
.num { font-variant-numeric: tabular-nums; }

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

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

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

/* Left rail is a list of queues with live counts, like a mail client. Not an icon strip. */
.rail {
  background: var(--navy); color: #c2cbd9;
  display: flex; flex-direction: column; overflow-y: auto;
}
.rail__brand { padding: 12px 14px 10px; border-bottom: 1px solid var(--navy-2); }
.rail__brand b { display: block; font-size: 15px; font-weight: 660; letter-spacing: -0.02em; color: #fff; }
.rail__brand span { font-size: 10.5px; color: #8593a8; }

.rail__site { padding: 9px 10px; border-bottom: 1px solid var(--navy-2); }
.rail__site select {
  width: 100%; height: 26px; background: var(--navy-2); color: #fff;
  border: 1px solid var(--navy-3); border-radius: 2px; font: inherit; font-size: 11.5px; padding: 0 6px;
}

.rail__section {
  font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: #6d7d96; padding: 13px 14px 5px;
}
.rail a.q, .rail button.q {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 5px 14px; color: #c2cbd9; text-decoration: none; font-size: 12px;
  background: none; border: 0; cursor: pointer; text-align: left; border-left: 3px solid transparent;
}
.rail a.q:hover, .rail button.q:hover { background: var(--navy-2); color: #fff; }
.rail a.q[aria-current="page"], .rail button.q[aria-pressed="true"] {
  background: var(--navy-2); color: #fff; border-left-color: var(--amber); font-weight: 600;
}
.rail .n { margin-left: auto; font-size: 11px; font-variant-numeric: tabular-nums; color: #8593a8; }
.rail .n--alert { color: #f0a8a2; font-weight: 700; }
.rail a.q[aria-current="page"] .n, .rail button.q[aria-pressed="true"] .n { color: #fff; }

.rail__foot { margin-top: auto; padding: 10px 14px 12px; border-top: 1px solid var(--navy-2); font-size: 11px; }
.rail__foot button { background: none; border: 0; color: #c2cbd9; cursor: pointer; padding: 0; font-size: 11.5px; text-align: left; }
.rail__foot button:hover { color: #fff; }
.rail__foot .oncall { color: #8593a8; margin-top: 4px; }

.main { min-width: 0; display: flex; flex-direction: column; overflow: hidden; }

/* --- Demo banner ---------------------------------------------------------- */

.demobar {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap;
  padding: 4px 14px; background: var(--navy-2); color: #9aa6b8;
  font-size: 10.5px; flex: none;
}
.demobar strong { color: #dbe2ec; font-weight: 600; }
.demobar .gap { flex: 1; }
.demobar button, .demobar a {
  background: none; border: 1px solid var(--navy-3); border-radius: 2px;
  padding: 0 7px; font-size: 10.5px; color: #c2cbd9; cursor: pointer; text-decoration: none;
}
.demobar button:hover, .demobar a:hover { border-color: var(--amber); color: #fff; }

/* --- Toolbar -------------------------------------------------------------- */

.bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 8px 14px; background: var(--panel); border-bottom: 1px solid var(--line); flex: none;
}
.bar h1 { font-size: 14px; font-weight: 650; letter-spacing: -0.01em; margin: 0; }
.bar .sub { font-size: 11.5px; color: var(--muted); }
.bar .gap { flex: 1; }
.bar .hint { font-size: 11px; color: var(--faint); }
.bar .hint kbd {
  font-family: var(--mono); font-size: 10.5px; background: var(--grey);
  border: 1px solid var(--line); border-radius: 2px; padding: 0 4px; margin: 0 1px;
}

.btn {
  height: 24px; padding: 0 9px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 2px; font-size: 11.5px; cursor: pointer; color: var(--ink-2); white-space: nowrap;
  display: inline-flex; align-items: center; gap: 5px;
}
.btn:hover { border-color: var(--faint); color: var(--ink); }
.btn--go { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }
.btn--go:hover { background: var(--navy-2); border-color: var(--navy-2); color: #fff; }
.btn--warn { border-color: #e0c48a; background: var(--amber-bg); color: #8a5800; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

.field {
  height: 24px; padding: 0 6px; font: inherit; font-size: 11.5px;
  border: 1px solid var(--line); border-radius: 2px; background: var(--panel); color: var(--ink);
}
textarea.field { height: auto; padding: 5px 6px; resize: vertical; }
.field:focus { border-color: var(--navy-2); outline: none; }
.lbl { display: block; font-size: 10.5px; font-weight: 650; color: var(--muted); margin-bottom: 3px; text-transform: uppercase; letter-spacing: .05em; }

/* --- Split: queue list and detail ----------------------------------------- */

.split { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 420px; min-height: 0; }
.split--wide { grid-template-columns: minmax(0, 1fr); }
.listpane { min-width: 0; overflow: auto; background: var(--panel); }
.detailpane { border-left: 1px solid var(--line); background: var(--panel); overflow-y: auto; min-width: 0; }

/* The grid. Everything about it is tuned for reading many rows quickly. */
table.grid { width: 100%; border-collapse: collapse; font-size: 12px; }
table.grid thead th {
  position: sticky; top: 0; z-index: 3; background: var(--grey);
  text-align: left; font-size: 10.5px; font-weight: 700; letter-spacing: .04em;
  text-transform: uppercase; color: var(--muted);
  padding: 6px 9px; border-bottom: 1px solid var(--line); white-space: nowrap;
}
table.grid thead th.r { text-align: right; }
table.grid tbody tr { height: 27px; cursor: pointer; border-bottom: 1px solid var(--line-2); }
table.grid tbody tr:nth-child(even) { background: var(--zebra); }
table.grid tbody tr:hover { background: #eef3fa; }
table.grid tbody tr[aria-selected="true"] { background: #dfe8f6; box-shadow: inset 3px 0 0 var(--navy); }
table.grid td { padding: 0 9px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
table.grid td.r { text-align: right; font-variant-numeric: tabular-nums; }
table.grid td.wrap { white-space: normal; }
table.grid .ref { font-family: var(--mono); font-size: 11px; color: var(--muted); }
table.grid .ttl { max-width: 0; }

/* Priority chips are the one place a label beats a colour. */
.pri {
  display: inline-block; width: 22px; text-align: center; font-family: var(--mono);
  font-size: 10.5px; font-weight: 700; border-radius: 2px; padding: 1px 0; line-height: 1.3;
}
.pri--p1 { background: var(--red); color: #fff; }
.pri--p2 { background: var(--amber); color: #fff; }
.pri--p3 { background: var(--grey-2); color: var(--ink-2); }
.pri--p4 { background: var(--panel); color: var(--muted); border: 1px solid var(--line); }

.st { font-size: 11.5px; color: var(--ink-2); }
.st--open { color: var(--navy-2); font-weight: 600; }
.st--done { color: var(--green); }
.st--hold { color: var(--muted); }

/* The SLA bar: the only colour event on the screen. */
.sla { display: flex; align-items: center; gap: 7px; min-width: 116px; }
.sla__bar { flex: 1; height: 5px; background: var(--grey-2); border-radius: 1px; overflow: hidden; min-width: 46px; }
.sla__bar i { display: block; height: 100%; background: var(--navy-3); }
.sla__bar i.warn { background: var(--amber); }
.sla__bar i.bad { background: var(--red); }
.sla__txt { font-size: 11px; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 52px; text-align: right; }
.sla__txt.warn { color: var(--amber); font-weight: 600; }
.sla__txt.bad { color: var(--red); font-weight: 700; }

/* --- Detail pane ---------------------------------------------------------- */

.detail__head { padding: 11px 14px; border-bottom: 1px solid var(--line); }
.detail__ref { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.detail__head h2 { margin: 3px 0 8px; font-size: 15px; font-weight: 640; letter-spacing: -0.015em; line-height: 1.3; }
.detail__actions { display: flex; gap: 6px; flex-wrap: wrap; }

.detail__body { padding: 12px 14px 40px; }
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 5px 10px; font-size: 12px; margin: 0 0 14px; }
.kv dt { color: var(--muted); }
.kv dd { margin: 0; }

.sec {
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--faint); margin: 16px 0 7px; padding-bottom: 4px; border-bottom: 1px solid var(--line-2);
  display: flex; justify-content: space-between; align-items: center;
}
.sec button { background: none; border: 0; color: var(--navy-2); cursor: pointer; font-size: 10.5px; letter-spacing: 0; text-transform: none; font-weight: 600; }

.check { list-style: none; margin: 0; padding: 0; }
.check li { display: flex; gap: 8px; padding: 4px 0; align-items: flex-start; font-size: 12px; }
.check input { margin: 2px 0 0; accent-color: var(--navy); width: 13px; height: 13px; }
.check li.done label { color: var(--faint); text-decoration: line-through; }
.check label { cursor: pointer; }

.log { list-style: none; margin: 0; padding: 0; font-size: 11.5px; }
.log li { padding: 6px 0; border-bottom: 1px solid var(--line-2); display: grid; grid-template-columns: 92px minmax(0, 1fr); gap: 9px; }
.log li:last-child { border-bottom: 0; }
.log .at { color: var(--faint); font-variant-numeric: tabular-nums; }
.log .who { font-weight: 600; color: var(--ink-2); }
.log .txt { color: var(--ink-2); }

.nodetail { padding: 44px 20px; text-align: center; color: var(--faint); font-size: 12px; }
.nodetail strong { display: block; color: var(--muted); font-size: 13px; font-weight: 600; margin-bottom: 5px; }

/* --- Desk ----------------------------------------------------------------- */

.desk { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 340px; min-height: 0; }
.desk__live { min-width: 0; overflow: auto; background: var(--panel); }
.desk__side { border-left: 1px solid var(--line); background: var(--grey); overflow-y: auto; padding: 12px; }

.tile { background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; }
.tile__head {
  padding: 7px 11px; border-bottom: 1px solid var(--line-2);
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between;
}
.tile__body { padding: 10px 11px; }

.figs { display: flex; flex-wrap: wrap; }
.figs > div { flex: 1 1 50%; padding: 7px 11px; border-right: 1px solid var(--line-2); border-bottom: 1px solid var(--line-2); }
.figs > div:nth-child(2n) { border-right: 0; }
.figs dt { font-size: 10.5px; color: var(--muted); }
.figs dd { margin: 1px 0 0; font-size: 19px; font-weight: 660; letter-spacing: -0.025em; font-variant-numeric: tabular-nums; line-height: 1.1; }
.figs dd.bad { color: var(--red); }
.figs dd.warn { color: var(--amber); }

.hbar { display: grid; grid-template-columns: 92px minmax(0, 1fr) 34px; gap: 8px; align-items: center; font-size: 11.5px; padding: 3px 0; }
.hbar .t { height: 10px; background: var(--grey-2); border-radius: 1px; overflow: hidden; }
.hbar .t i { display: block; height: 100%; background: var(--navy-3); }
.hbar .t i.load { background: var(--amber); }
.hbar .v { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); }

/* --- Generic page --------------------------------------------------------- */

.page { flex: 1; overflow-y: auto; padding: 12px 14px 40px; }
.page h1 { font-size: 15px; font-weight: 650; margin: 0 0 2px; letter-spacing: -0.015em; }
.page .lede { font-size: 12px; color: var(--muted); margin: 0 0 14px; }

.panel { background: var(--panel); border: 1px solid var(--line); margin-bottom: 14px; }
.panel__head {
  padding: 7px 11px; border-bottom: 1px solid var(--line-2);
  font-size: 10px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--muted);
  display: flex; justify-content: space-between; align-items: center;
}
.panel__body { padding: 11px; }

.empty { padding: 40px 18px; text-align: center; color: var(--muted); font-size: 12px; }
.empty strong { display: block; color: var(--ink); font-size: 13px; font-weight: 650; margin-bottom: 5px; }
.empty p { margin: 0 auto; max-width: 48ch; }

.tabs { display: flex; gap: 5px; margin-bottom: 12px; flex-wrap: wrap; }
.tabs button {
  height: 24px; padding: 0 10px; border: 1px solid var(--line); background: var(--panel);
  border-radius: 2px; font-size: 11.5px; cursor: pointer; color: var(--ink-2);
}
.tabs button[aria-pressed="true"] { background: var(--navy); border-color: var(--navy); color: #fff; font-weight: 600; }

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

.overlay { position: fixed; inset: 0; z-index: 80; background: rgba(28,35,49,.42); display: flex; align-items: flex-start; justify-content: center; padding: 9vh 20px 20px; overflow-y: auto; }
.overlay[hidden] { display: none; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; width: 100%; max-width: 460px; box-shadow: 0 16px 40px rgba(28,35,49,.3); }
.modal__head { padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
.modal__head h2 { margin: 0; font-size: 14px; font-weight: 650; }
.modal__head p { margin: 4px 0 0; font-size: 11.5px; color: var(--muted); }
.modal__body { padding: 13px 16px; display: grid; gap: 11px; }
.modal__foot { padding: 11px 16px 13px; display: flex; gap: 7px; justify-content: flex-end; border-top: 1px solid var(--line-2); }
.modal .field { width: 100%; }

.toasts { position: fixed; bottom: 14px; left: 50%; transform: translateX(-50%); z-index: 90; display: grid; gap: 6px; }
.toast { background: var(--navy); color: #fff; font-size: 11.5px; padding: 7px 13px; border-radius: 2px; box-shadow: 0 5px 18px rgba(28,35,49,.34); display: flex; gap: 12px; align-items: center; }
.toast button { background: none; border: 0; color: #f0c078; cursor: pointer; font-size: 11.5px; }

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

@media (max-width: 1080px) {
  .split { grid-template-columns: minmax(0, 1fr); }
  .detailpane { display: none; }
  .split--showdetail .listpane { display: none; }
  .split--showdetail .detailpane { display: block; border-left: 0; }
  .desk { grid-template-columns: minmax(0, 1fr); }
  .desk__side { border-left: 0; border-top: 1px solid var(--line); }
}

@media (max-width: 860px) {
  .frame { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); height: auto; min-height: 100vh; }
  .rail { flex-direction: row; align-items: center; overflow-x: auto; padding: 0 8px; gap: 4px; scrollbar-width: none; }
  .rail::-webkit-scrollbar { display: none; }
  .rail__brand { border-bottom: 0; padding: 8px 8px; white-space: nowrap; }
  .rail__brand span { display: none; }
  .rail__site { border-bottom: 0; padding: 0 6px; }
  .rail__site select { width: 118px; }
  .rail__section { display: none; }
  .rail a.q, .rail button.q { width: auto; white-space: nowrap; border-left: 0; border-bottom: 3px solid transparent; padding: 6px 9px; }
  .rail a.q[aria-current="page"], .rail button.q[aria-pressed="true"] { border-left: 0; border-bottom-color: var(--amber); }
  .rail__foot { display: none; }
  .main { overflow: visible; }
  .bar .hint { display: none; }
  table.grid { font-size: 11.5px; }
  table.grid .hide-sm { display: none; }
}

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