/* Stream Bridge Admin — brand layer (copied from SBOS sbosadmin theme.css) on top of Tabler 1.6 (MIT). Only colours, font and the few app-specific widgets live
   here; everything else is stock Tabler so new features can use any Tabler component unchanged.
   Themes (html[data-app-theme], set by js/theme.js):
     halfwhite (default, neutral #F5F6F8) · white · red  (red = Tabler's built-in data-bs-navbar-theme="primary" sidebar)
   All themes use Tabler's NEUTRAL grey scale (the warm 'stone' base read as beige/yellow).  */

@font-face { font-family: "Inter"; src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-wght-normal.woff2") format("woff2"); font-weight: 100 800; font-display: swap; }

:root {
  --tblr-primary: #C8102E;                          /* brand crimson = primary AND alert colour */
  --tblr-primary-rgb: 200, 16, 46;
  --tblr-red: #C8102E;
  --tblr-font-sans-serif: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --tblr-font-monospace: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
html[data-app-theme="halfwhite"] { --tblr-body-bg: #F5F6F8; }   /* neutral half-white — no warm/yellow tint */
html[data-app-theme="white"]     { --tblr-body-bg: #FFFFFF; }
html[data-app-theme="red"]       { --tblr-body-bg: #F5F6F8; }
html[data-app-theme="red"] .page > .navbar-vertical { background: linear-gradient(180deg, #C8102E 0%, #9E0C24 62%, #7E0A1C 100%); }

/* brand mark */
.brand-mark { display: inline-grid; place-items: center; width: 2rem; height: 2rem; border-radius: .5rem; font-weight: 800; font-size: .8rem;
  letter-spacing: -.02em; background: var(--tblr-primary); color: #fff; flex: none; }
html[data-app-theme="red"] .navbar-vertical .brand-mark { background: #fff; color: var(--tblr-primary); }
.navbar-brand .brand-text { font-weight: 700; font-size: 1rem; line-height: 1.1; }
.navbar-brand .brand-sub { font-size: .72rem; font-weight: 500; opacity: .65; }

/* sidebar section labels + footer (clock, fold) */
.navbar-vertical .nav-section { padding: 1rem .75rem .35rem; font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
  color: var(--tblr-navbar-color); opacity: .6; }
.sidebar-foot { padding: .75rem; }
.side-clock { border-radius: var(--tblr-border-radius); padding: .6rem .75rem; background: color-mix(in oklab, var(--tblr-navbar-color) 8%, transparent); }
.side-clock .time { font-family: var(--tblr-font-monospace); font-size: 1.05rem; font-weight: 600; }
.side-clock .tz { font-size: .65rem; font-weight: 700; letter-spacing: .08em; opacity: .7; margin-left: .35rem; }
.side-clock .date { font-size: .75rem; opacity: .7; }
html[data-bs-sidebar="folded"] .navbar-vertical .nav-section, html[data-bs-sidebar="folded"] .sidebar-foot .side-clock,
html[data-bs-sidebar="folded"] .navbar-brand .brand-words, html[data-bs-sidebar="folded"] .sidebar-foot .fold-label { display: none; }
.navbar-vertical .nav-link .badge { margin-inline-start: auto; }

/* theme switch (header) */
.theme-dots { display: inline-flex; gap: .35rem; padding: .25rem; border: 1px solid var(--tblr-border-color); border-radius: 999px; background: var(--tblr-bg-surface); }
.theme-dots button { width: 1.25rem; height: 1.25rem; border-radius: 50%; padding: 0; border: 2px solid transparent; outline: 1px solid rgba(0, 0, 0, .15); outline-offset: -1px; cursor: pointer; }
.theme-dots button[data-set="halfwhite"] { background: #E9EBEF; }
.theme-dots button[data-set="white"] { background: #FFFFFF; }
.theme-dots button[data-set="red"] { background: #C8102E; }
.theme-dots button.on { box-shadow: 0 0 0 2px var(--tblr-primary); border-color: var(--tblr-bg-surface); }

/* global search results */
.search-results { position: absolute; top: calc(100% + .35rem); left: 0; right: 0; z-index: 1050; max-height: 60vh; overflow-y: auto; }
.search-results .dropdown-item.active { background: var(--tblr-primary-lt); color: inherit; }

/* KPI tiles: coloured top edge */
.kpi { border-top: 3px solid var(--kpi, var(--tblr-border-color)); }
.kpi-green { --kpi: var(--tblr-green); } .kpi-red { --kpi: var(--tblr-primary); } .kpi-azure { --kpi: var(--tblr-azure); } .kpi-muted { --kpi: var(--tblr-gray-400); }

/* tables */
tr.rowlink { cursor: pointer; }
.table .text-issue { color: var(--tblr-primary); font-size: .8125rem; }
.mini-progress { width: 3.25rem; }
td .src { font-family: var(--tblr-font-monospace); font-size: .75rem; color: var(--tblr-secondary); word-break: break-all; }

/* 24 h sparkline charts */
.spark { display: block; width: 100%; height: 4rem; }

/* loading overlay + toast (feedback for every save) */
.loadmask { display: none; position: fixed; inset: 0; z-index: 3000; background: rgba(24, 24, 27, .28); align-items: center; justify-content: center; }
.loadmask.show { display: flex; }
/* toasts sit just BELOW the top bar (≈56 px), top-right — not over the header / account menu */
.toast-stack { position: fixed; top: 4.75rem; right: 1.5rem; z-index: 2000; width: min(26rem, calc(100vw - 2rem)); }
/* feedback toast: solid green = done, solid red = error — icon badge, title line + message, countdown bar
   (white text on #15803d / #c8102e, ≥ 4.5:1 contrast) */
.sb-toast { position: relative; overflow: hidden; display: flex; align-items: center; gap: .8rem; padding: .85rem 1rem .95rem;
  margin-bottom: .6rem; border-radius: 12px; color: #fff; box-shadow: 0 12px 32px rgba(0, 0, 0, .2), 0 2px 6px rgba(0, 0, 0, .12);
  animation: sbToastIn .22s cubic-bezier(.2, .8, .2, 1); }
.sb-toast-ok { background: linear-gradient(135deg, #16a34a, #15803d); }
.sb-toast-err { background: linear-gradient(135deg, #dc2626, #c8102e); }
.sb-toast .badge-ic { flex: none; width: 2.25rem; height: 2.25rem; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; background: rgba(255, 255, 255, .18); font-size: 1.3rem; }
.sb-toast .msg { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.sb-toast .msg .t { display: block; font-weight: 600; font-size: .9375rem; line-height: 1.3; }
.sb-toast .msg .d { display: block; font-size: .8125rem; line-height: 1.4; opacity: .92; margin-top: .1rem; }
.sb-toast .x { flex: none; align-self: flex-start; width: 1.75rem; height: 1.75rem; border-radius: 6px; background: none; border: 0;
  color: #fff; opacity: .8; font-size: 1.1rem; line-height: 1; cursor: pointer; }
.sb-toast .x:hover { opacity: 1; background: rgba(255, 255, 255, .15); }
.sb-toast .bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: rgba(255, 255, 255, .45);
  transform-origin: left; animation: sbToastBar linear forwards; }
.sb-toast:hover .bar { animation-play-state: paused; }
@keyframes sbToastIn { from { transform: translateX(16px); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes sbToastBar { from { transform: scaleX(1); } to { transform: scaleX(0); } }
@media (prefers-reduced-motion: reduce) { .sb-toast { animation: none; } }

/* polish after visual review */
.navbar .nav-link { position: relative; }
/* top-bar alerts bell: round hover target; the count sits on the bell's top-right corner, ringed so it reads cleanly */
.navbar .bell-link { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; padding: 0;
  border-radius: 50%; }
.navbar .bell-link:hover { background: var(--tblr-bg-surface-secondary); }
.bell { position: relative; display: inline-flex; line-height: 1; }
.bell .icon { width: 1.35rem; height: 1.35rem; font-size: 1.35rem; margin: 0; }
.bell-badge { position: absolute; top: -.45rem; left: .7rem; min-width: 1.15rem; height: 1.15rem; padding: 0 .3rem;
  border-radius: 999px; background: #c8102e; color: #fff; font-size: .6875rem; font-weight: 600; line-height: 1.15rem;
  text-align: center; font-variant-numeric: tabular-nums; box-shadow: 0 0 0 2px var(--tblr-bg-surface); pointer-events: none; }
.bell-badge[hidden] { display: none; }
html[data-app-theme="red"] .navbar-vertical .badge { background: #fff !important; color: var(--tblr-primary) !important; }
.auth-cover, .auth-cover .h1, .auth-cover p, .auth-cover div { color: #fff; }
.kpi .subheader { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* locked (admin-only) fields look locked: disabled selects get the same muted fill as readonly inputs */
.form-select:disabled, .form-control[readonly] { background-color: var(--tblr-bg-surface-secondary); color: var(--tblr-secondary); cursor: not-allowed; }
/* license key: large, readable, easy to dictate */
.license-key { font-size: 1.6rem; font-weight: 600; letter-spacing: .08em; padding: .35rem .8rem; border-radius: 8px;
  background: var(--tblr-bg-surface-secondary); border: 1px dashed var(--tblr-border-color); user-select: all; }
/* admin logged in as a reseller: impossible to miss */
.impersonation-bar { background: #7a1020; color: #fff; padding: .5rem 1rem; font-size: .875rem; }
.impersonation-bar strong { color: #fff; }
/* box lists: long names / problems wrap inside the cell instead of widening the table (no sideways scroll) */
.table .box-cell { min-width: 14rem; white-space: normal; overflow-wrap: anywhere; }
.table .text-issue { line-height: 1.35; margin-top: .15rem; }
/* compact meter for table cells: number over a thin bar (keeps the box list within the screen width) */
.mini-meter { width: 3.25rem; line-height: 1.2; }
.mini-meter .progress { height: 3px; margin-top: .2rem; }
.box-no { font-family: var(--tblr-font-monospace); font-size: .75rem; color: var(--tblr-secondary); margin-right: .5rem; }
/* My Account → Change theme: three clickable previews */
.theme-choice { width: 100%; background: none; border: 2px solid var(--tblr-border-color); border-radius: 10px; padding: .6rem; text-align: left; cursor: pointer; }
.theme-choice.on { border-color: var(--tblr-primary); box-shadow: 0 0 0 3px rgba(200, 16, 46, .12); }
.theme-preview { display: flex; height: 64px; border-radius: 6px; overflow: hidden; border: 1px solid rgba(0, 0, 0, .08); }
.theme-preview .tp-side { width: 26%; background: #fff; border-right: 1px solid rgba(0, 0, 0, .08); }
.theme-preview .tp-main { flex: 1; display: flex; gap: 6px; padding: 8px; }
.theme-preview .tp-card { flex: 1; background: #fff; border-radius: 4px; box-shadow: 0 0 0 1px rgba(0, 0, 0, .06); }
.theme-preview-halfwhite .tp-main { background: #F5F6F8; }
.theme-preview-white .tp-main { background: #FFFFFF; }
.theme-preview-red .tp-main { background: #F5F6F8; }
.theme-preview-red .tp-side { background: #C8102E; }
/* box page tabs: only the active pane shows; the tab bar scrolls sideways on phones */
.box-tab { display: none; }
.box-tab.active { display: block; }
.box-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; }
.box-tabs .nav-link { white-space: nowrap; }
.status-strip { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem 1.25rem; font-size: .875rem; }
.status-strip .strip-item { display: inline-flex; align-items: center; gap: .35rem; }
/* channel row actions: one compact joined group */
.ch-actions .btn { padding: .3rem .5rem; }
.ch-actions .btn .icon { margin: 0; }
/* Channel Library → Available To: reseller checkboxes in a compact scroll box */
.scope-list { max-height: 11rem; overflow-y: auto; padding: .6rem .8rem; border: 1px solid var(--tblr-border-color); border-radius: 8px;
  columns: 2 12rem; column-gap: 1.5rem; }
.scope-list .form-check { break-inside: avoid; }

/* Stop / Start: solid media glyphs (the outline icon font has no filled square / triangle) */
.ch-glyph { display: inline-flex; width: 1.25rem; height: 1.25rem; align-items: center; justify-content: center; }
.ch-glyph::before { content: ""; display: block; }
.ch-glyph-stop::before { width: .68rem; height: .68rem; border-radius: 2px; background: var(--tblr-red); }
.ch-glyph-play::before { width: .78rem; height: .82rem; margin-left: .12rem; background: var(--tblr-green); clip-path: polygon(0 0, 100% 50%, 0 100%); }
.ch-actions .ch-power:hover { background: rgba(var(--tblr-red-rgb), .08); }
.ch-actions .ch-power.is-stopped:hover { background: rgba(var(--tblr-green-rgb), .1); }

/* Yes / No question — centred card over a blurred page */
.sb-confirm { position: fixed; inset: 0; z-index: 3100; display: flex; align-items: center; justify-content: center; padding: 1rem;
  background: rgba(24, 24, 27, .32); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); animation: sbc-fade .15s ease-out; }
.sb-confirm-card { width: min(25rem, 100%); padding: 1.75rem 1.5rem 1.25rem; text-align: center; border-radius: 14px;
  background: var(--tblr-bg-surface); color: var(--tblr-body-color); box-shadow: 0 24px 64px rgba(0, 0, 0, .28); animation: sbc-pop .18s ease-out; }
.sb-confirm-icon { width: 3.25rem; height: 3.25rem; margin: 0 auto .85rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.6rem; }
.sb-confirm-icon.danger { background: rgba(200, 16, 46, .1); color: #c8102e; }
.sb-confirm-icon.primary { background: rgba(var(--tblr-azure-rgb), .12); color: var(--tblr-azure); }
.sb-confirm h3 { margin: 0 0 .4rem; font-size: 1.125rem; font-weight: 600; }
.sb-confirm p { margin: 0 0 1.35rem; color: var(--tblr-secondary); overflow-wrap: anywhere; }
.sb-confirm-actions { display: flex; gap: .6rem; }
.sb-confirm-actions .btn { flex: 1; }
body.sb-noscroll { overflow: hidden; }
@keyframes sbc-fade { from { opacity: 0; } }
@keyframes sbc-pop { from { opacity: 0; transform: translateY(8px) scale(.97); } }
@media (prefers-reduced-motion: reduce) { .sb-confirm, .sb-confirm-card { animation: none; } }

/* Phones: page headers stack — title on its own line, buttons underneath (they used to squeeze the title into a
   narrow column and cover the status badge); card headers wrap instead of pushing a badge past the card edge;
   the Boxes status filter scrolls sideways by itself instead of widening the whole page. */
@media (max-width: 767.98px) {
  .page-header .row > .col { flex: 0 0 100%; max-width: 100%; }
  .page-header .row > .col-auto.ms-auto { margin-left: 0 !important; }
  .card-header { flex-wrap: wrap; row-gap: .5rem; }
  .card-header .card-actions .badge { white-space: normal; text-align: left; }
  #seg { max-width: 100%; overflow-x: auto; }
  #seg > .btn { flex: 0 0 auto; }
}
/* --- sbosappadmin additions --- */
.navbar.sticky-top { background: var(--tblr-bg-surface); border-bottom: 1px solid var(--tblr-border-color); }
.kpi[data-filter-to] { cursor: pointer; }
.license-key { display: inline-block; }