/* pbx-panel design system: same family as Doorcom / Access Controller.
   Lexend headings, Source Sans 3 body, JetBrains Mono for numbers, slate ink,
   the PBX green (#0B8F3C / #1FD65A) as a sparing accent. Three theme states:
   :root light, prefers-color-scheme dark when no explicit choice, and
   :root[data-theme=dark] when the toggle chose dark. */

@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"); }

:root {
  color-scheme: light;
  --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;
  --cta:#0B8F3C; --cta-dark:#086B2D; --cta-bright:#1FD65A; --accent:#15803D; --amber:#B07A00;
  --btn-fg:#fff;
  --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;
  --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:#E4F6EA; --flash-ink:#086B2D; --flash-line:#BEE7CC;
  --code-bg:#EEF3F9; --code-ink:#3A465C; --selection:rgba(11,143,60,.16);
  --ring:0 0 0 3px rgba(11,143,60,.28);
  --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,.2);
  --role-super-bg:#EEE9FD; --role-super-fg:#6D28D9; --role-staff-bg:#E7F1FB; --role-staff-fg:#1D5396; --role-customer-bg:#EEF1F6; --role-customer-fg:#55627A;
  --k-number:#0b8f3c; --k-schedule:#c77d0a; --k-ring_group:#2557c9; --k-menu:#7a3fc1; --k-queue:#0e8a86; --k-ext:#4b5563; --k-voicemail:#c2325a; --k-media:#2b8ab8; --k-action:#d1580e; --k-toggle:#5f9a0c; --k-phonebook:#8a919c; --k-hangup:#6b7280; --k-busy:#6b7280;
  --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;
  --radius-xs:6px; --radius-sm:10px; --radius:14px; --radius-full:999px;
  --fs-xs:11px; --fs-sm:12.5px; --fs-base:14.5px; --fs-md:15.5px; --fs-lg:18px; --fs-xl:21px; --fs-2xl:26px;
}
@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:#2FBF66; --cta-dark:#5BD98A; --cta-bright:#1FD65A; --accent:#4ADE80; --amber:#FBBF24; --btn-fg:#06170c;
  --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(31,214,90,.14); --nav-active-fg:#7EE2A2; --nav-hover-bg:rgba(148,163,184,.08);
  --flash-bg:#12301F; --flash-ink:#7EE2A2; --flash-line:#1F5236; --code-bg:#0F1B2E; --code-ink:#C2CEDE; --selection:rgba(31,214,90,.3);
  --ring:0 0 0 3px rgba(31,214,90,.35);
  --shadow-xs:0 1px 2px rgba(0,0,0,.42); --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px -2px rgba(0,0,0,.34); --shadow:0 14px 32px -16px rgba(0,0,0,.62);
  --role-super-bg:rgba(139,92,246,.18); --role-super-fg:#B79CF7; --role-staff-bg:rgba(70,171,232,.16); --role-staff-fg:#8AC4EE; --role-customer-bg:rgba(148,163,184,.15); --role-customer-fg:#A9B6CA;
  --k-ext:#9aa3b2; --k-phonebook:#a4abb6;
}}
: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:#2FBF66; --cta-dark:#5BD98A; --cta-bright:#1FD65A; --accent:#4ADE80; --amber:#FBBF24; --btn-fg:#06170c;
  --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(31,214,90,.14); --nav-active-fg:#7EE2A2; --nav-hover-bg:rgba(148,163,184,.08);
  --flash-bg:#12301F; --flash-ink:#7EE2A2; --flash-line:#1F5236; --code-bg:#0F1B2E; --code-ink:#C2CEDE; --selection:rgba(31,214,90,.3);
  --ring:0 0 0 3px rgba(31,214,90,.35);
  --shadow-xs:0 1px 2px rgba(0,0,0,.42); --shadow-sm:0 1px 2px rgba(0,0,0,.4),0 2px 8px -2px rgba(0,0,0,.34); --shadow:0 14px 32px -16px rgba(0,0,0,.62);
  --role-super-bg:rgba(139,92,246,.18); --role-super-fg:#B79CF7; --role-staff-bg:rgba(70,171,232,.16); --role-staff-fg:#8AC4EE; --role-customer-bg:rgba(148,163,184,.15); --role-customer-fg:#A9B6CA;
  --k-ext:#9aa3b2; --k-phonebook:#a4abb6;
}

/* ---------------------------------------------------------------- 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.5; -webkit-font-smoothing:antialiased; }
a { color:var(--cta); text-decoration:none; }
a:hover { color:var(--cta-dark); text-decoration:underline; }
::selection { background:var(--selection); }
h1,h2,h3,h4 { font-family:var(--font-display); font-weight:600; color:var(--navy); margin:0 0 .5em; letter-spacing:-.01em; line-height:1.25; }
h1 { font-size:var(--fs-2xl); } h2 { font-size:var(--fs-xl); } h3 { font-size:var(--fs-md); } h4 { font-size:var(--fs-base); }
p { margin:0 0 .8em; }
code, .mono, .num { font-family:var(--mono); font-size:.92em; }
code { background:var(--code-bg); color:var(--code-ink); padding:1px 5px; border-radius:4px; }
pre { background:var(--code-bg); color:var(--code-ink); padding:12px 14px; border-radius:var(--radius-sm); overflow:auto; font:12.5px/1.5 var(--mono); }
.muted { color:var(--muted); } .faint { color:var(--faint); } .small { font-size:var(--fs-sm); }
.right { text-align:right; } .nowrap { white-space:nowrap; } .inline { display:inline; }
:focus-visible { outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs); }
hr { border:0; border-top:1px solid var(--line); margin:16px 0; }

/* ---------------------------------------------------------------- shell */
body.app { display:flex; min-height:100vh; }
.sidebar { width:240px; 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:16px 12px 12px; overflow-y:auto; }
.brand { display:flex; align-items:center; gap:10px; font-family:var(--font-display); font-weight:700; font-size:var(--fs-md); color:var(--navy) !important; text-decoration:none !important; padding:2px 6px 14px; }
.nav-toggle { display:none; }
.side-nav { display:flex; flex-direction:column; gap:1px; margin-top:4px; }
.side-nav a { display:block; padding:6px 10px; border-radius:8px; color:var(--slate); font-weight:600; font-size:13.5px; text-decoration:none; }
.side-nav a:hover { background:var(--nav-hover-bg); color:var(--navy); }
.side-nav a.on { background:var(--nav-active-bg); color:var(--nav-active-fg); }
.side-nav .seg { font-size:var(--fs-xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:12px 10px 4px; }
.nav-count { display:inline-block; min-width:18px; padding:0 6px; border-radius:999px; background:var(--cta); color:#fff; font-size:11px; text-align:center; margin-left:6px; }
.side-foot { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.side-user { display:flex; align-items:center; gap:8px; flex:1; min-width:0; }
.side-user .who { font-weight:600; color:var(--navy); overflow:hidden; text-overflow:ellipsis; }
.badge { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:var(--role-customer-bg); color:var(--role-customer-fg); }
.badge.role-super { background:var(--role-super-bg); color:var(--role-super-fg); }
.badge.role-staff { background:var(--role-staff-bg); color:var(--role-staff-fg); }
.theme-toggle { width:32px; height:32px; border-radius:8px; border:1px solid var(--line); background:var(--surface); color:var(--slate); cursor:pointer; display:grid; place-items:center; padding:0; }
.theme-toggle svg { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.theme-toggle .i-sun { display:none; }
:root[data-theme="dark"] .theme-toggle .i-sun { display:block; } :root[data-theme="dark"] .theme-toggle .i-moon { display:none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .theme-toggle .i-sun { display:block; } :root:not([data-theme="light"]) .theme-toggle .i-moon { display:none; } }
.content { flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar { display:flex; align-items:center; justify-content:space-between; gap:12px; padding:14px 28px; border-bottom:1px solid var(--line); background:var(--surface); position:sticky; top:0; z-index:5; }
.crumbs { font-family:var(--font-display); font-size:var(--fs-lg); font-weight:600; color:var(--navy); display:flex; align-items:center; gap:8px; min-width:0; }
.crumbs a { color:var(--muted); font-weight:600; font-size:var(--fs-base); }
.crumbs span { color:var(--faint); }
.top-actions { display:flex; gap:8px; align-items:center; flex-wrap:wrap; }
main { padding:22px 28px 60px; max-width:1400px; width:100%; }
.flash { margin:16px 28px 0; padding:10px 14px; border-radius:var(--radius-sm); background:var(--flash-bg); color:var(--flash-ink); border:1px solid var(--flash-line); font-weight:600; }
.flash.err { background:var(--down-bg); color:var(--down); border-color:var(--down-line); }

/* tenant switcher */
.tenant-switch { position:relative; margin:0 2px 8px; }
.ts-btn { width:100%; display:flex; align-items:center; gap:8px; padding:8px 10px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--navy); cursor:pointer; font:inherit; text-align:left; box-shadow:var(--shadow-xs); }
.ts-btn:hover { border-color:var(--cta); }
.ts-code { font-family:var(--mono); font-size:12px; font-weight:600; background:var(--bg-soft); padding:2px 6px; border-radius:6px; }
.ts-name { flex:1; font-weight:600; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ts-pop { position:absolute; left:0; right:0; top:100%; margin-top:4px; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); box-shadow:var(--shadow); z-index:20; padding:8px; }
.ts-pop input { width:100%; padding:7px 10px; border:1px solid var(--line); border-radius:8px; font:inherit; background:var(--bg); color:var(--ink); margin-bottom:6px; }
.ts-pop ul { list-style:none; margin:0; padding:0; max-height:300px; overflow:auto; }
.ts-pop li a { display:flex; gap:8px; align-items:baseline; padding:6px 8px; border-radius:6px; color:var(--ink); text-decoration:none; }
.ts-pop li a b { font-family:var(--mono); font-size:12px; font-weight:600; }
.ts-pop li a span { flex:1; font-size:13px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ts-pop li a em { font-size:11px; color:var(--faint); font-style:normal; }
/* Two different things used to look the same in here: the tenant you are
   in, and where the keyboard is. The first is green and says so; the second
   is a plain highlight with a ring round it. */
.ts-pop li a:hover { background:var(--surface-2); }
.ts-pop li.on a { background:var(--nav-active-bg); color:var(--nav-active-fg); }
.ts-pop li.on a::after { content:"current"; font-size:10px; letter-spacing:.5px; text-transform:uppercase; color:var(--cta); }
.ts-pop li.cur a { background:var(--surface-2); box-shadow:inset 0 0 0 2px var(--line-strong); }
.ts-pop li.on.cur a { background:var(--nav-active-bg); box-shadow:inset 0 0 0 2px var(--cta); }
.ts-pop li[hidden] { display:none; }
.ts-hint { font-size:11px; color:var(--faint); padding:6px 4px 0; }

/* ---------------------------------------------------------------- components */
.card { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:18px 20px; box-shadow:var(--shadow-xs); margin-bottom:18px; }
.card h2, .card h3 { margin-top:0; }
.card.tight { padding:12px 14px; }
.grid { display:grid; gap:18px; }
.grid.two { grid-template-columns:repeat(auto-fit,minmax(340px,1fr)); }
/* A condition is mostly its rules - a week grid or a table of dates -
   with a short aside beside it, so the rules take two thirds. */
.grid.cond { display:grid; gap:18px; grid-template-columns:minmax(0,2fr) minmax(0,1fr); align-items:start; }
@media (max-width:1000px) { .grid.cond { grid-template-columns:minmax(0,1fr); } }
/* A mailbox: its settings on the left, what callers left on the right,
   where the table needs the room. */
.grid.vm { display:grid; gap:18px; grid-template-columns:minmax(0,1fr) minmax(0,1.6fr); align-items:start; }
@media (max-width:1000px) { .grid.vm { grid-template-columns:minmax(0,1fr); } }
/* The dashboard is two columns rather than a four-up grid: the tables on the
   wide side, and the two short cards - the toggles and what changed - stacked
   on the narrow one. A five-column call table in half the page had to
   overflow, and the toggles left a column of white space beside them. */
.dash-cols { display:grid; gap:0 18px; grid-template-columns:minmax(0,3fr) minmax(0,2fr); align-items:start; }
.dash-col { min-width:0; }
@media (max-width:900px) { .dash-cols { grid-template-columns:minmax(0,1fr); } }
.grid.three { grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); }
.stats { display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px; margin-bottom:18px; }
.stat { background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:14px 16px; }
.stat .n { font-family:var(--mono); font-size:26px; font-weight:400; color:var(--navy); line-height:1.1; }
.stat .l { font-size:var(--fs-sm); color:var(--muted); font-weight:600; text-transform:uppercase; letter-spacing:.05em; margin-top:4px; }
.stat.good .n { color:var(--up); } .stat.warn .n { color:var(--warn-ink); }

/* The hidden attribute has to beat every display rule below it, or a button
   that the page has hidden - the answer button when there is no call - sits
   there anyway. The browser's own rule loses to any class that sets display,
   which is most of them. */
[hidden] { display:none !important; }

.btn { display:inline-flex; align-items:center; gap:6px; padding:8px 14px; border-radius:var(--radius-sm); border:1px solid transparent; font:inherit; font-weight:600; font-size:13.5px; cursor:pointer; text-decoration:none !important; background:var(--cta); color:var(--btn-fg); line-height:1.2; white-space:nowrap; }
.btn:hover { background:var(--cta-dark); color:var(--btn-fg); }
.btn.ghost { background:transparent; border-color:var(--line-strong); color:var(--slate); }
.btn.ghost:hover { border-color:var(--cta); color:var(--cta); background:transparent; }
.btn.danger { background:var(--down); color:#fff; }
.btn.danger.ghost { background:transparent; color:var(--down); border-color:var(--down-line); }
.btn.danger.ghost:hover { background:var(--down-bg); }
.btn.sm { padding:5px 10px; font-size:12.5px; }
.btn.wide { width:100%; justify-content:center; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.ic { border:1px solid var(--line); background:var(--surface); color:var(--slate); border-radius:6px; width:26px; height:26px; cursor:pointer; font-size:11px; padding:0; }
.ic:hover { border-color:var(--cta); color:var(--cta); }
.ic.danger:hover { border-color:var(--down); color:var(--down); }

table.list { width:100%; border-collapse:collapse; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; font-size:var(--fs-base); }
table.list th, table.list td { padding:9px 12px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle; }
table.list th { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; letter-spacing:.06em; color:var(--muted); background:var(--surface-2); white-space:nowrap; }
table.list th a { color:var(--muted); }
table.list tbody tr:last-child td { border-bottom:0; }
table.list tbody tr:hover td { background:var(--bg-soft); }
table.list td.num, table.list th.num { text-align:right; font-family:var(--mono); }
table.list .empty td { text-align:center; color:var(--muted); padding:28px; }
.tablewrap { overflow-x:auto; border-radius:var(--radius); }
/* A condition's dates: two dates, two times, a label and a remove. A date
   input is 190px wide left to itself, which squeezed the label down to two
   characters and pushed the table out of its card. Fixed columns instead,
   with the label taking what is left. */
table.list.dates { table-layout:fixed; min-width:600px; }
/* Access roles: an area a row, a level a column. */
table.list.access { table-layout:fixed; min-width:520px; }
table.list.access th:first-child, table.list.access td:first-child { width:auto; }
table.list.access th:not(:first-child), table.list.access td:not(:first-child) { width:110px; text-align:center; }
table.list.access td:first-child .ni { margin-right:8px; opacity:.7; }
table.list.access tr.sec td { background:var(--surface-2); font-size:var(--fs-xs); text-transform:uppercase; letter-spacing:.06em; color:var(--muted); padding:5px 12px; }
table.list.access input[type=checkbox] { width:16px; height:16px; }
/* Voicemail messages: the player takes what is left, and a caller's number
   stays on one line instead of stacking into three and pushing the buttons
   off the side of the card. */
table.list.msgs { table-layout:fixed; min-width:560px; }
table.list.msgs col.when { width:150px; }
table.list.msgs col.from { width:122px; }
table.list.msgs col.len { width:56px; }
table.list.msgs col.act { width:150px; }
table.list.msgs .btn.ico.on .ni { color:var(--cta); }
table.list.msgs th, table.list.msgs td { padding:7px 8px; }
table.list.msgs audio { width:100%; min-width:0; height:34px; }
table.list.dates col.d { width:142px; }
table.list.dates col.t { width:88px; }
table.list.dates col.x { width:44px; }
table.list.dates th, table.list.dates td { padding:6px 8px; }
table.list.dates input { width:100%; min-width:0; box-sizing:border-box; }
.dot { display:inline-block; width:9px; height:9px; border-radius:50%; background:var(--faint); vertical-align:middle; margin-right:6px; }
.dot.idle { background:var(--up); box-shadow:0 0 0 3px rgba(21,128,61,.18); }
.dot.busy, .dot.ringing, .dot.hold { background:var(--amber); }
.dot.offline, .dot.unknown { background:var(--faint); }
.dot.virtual { background:transparent; border:2px solid var(--faint); width:7px; height:7px; }
.tag { display:inline-block; padding:1px 8px; border-radius:999px; font-size:11.5px; font-weight:600; background:var(--bg-soft); color:var(--slate); border:1px solid var(--line); }
.tag.on { background:var(--up-bg); color:var(--up); border-color:var(--up-line); }
.tag.off { background:var(--down-bg); color:var(--down); border-color:var(--down-line); }
.tag.warn { background:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-line); }
.tag.k { color:#fff; border:0; }
.list-head { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-bottom:14px; }
.search { display:flex; gap:6px; align-items:center; flex-wrap:wrap; }
.search input[type=search], .search select { padding:7px 10px; border:1px solid var(--line-strong); border-radius:8px; font:inherit; background:var(--surface); color:var(--ink); min-width:220px; }
.search select { min-width:0; }
.pager { display:flex; gap:10px; align-items:center; justify-content:flex-end; margin-top:12px; color:var(--muted); font-size:var(--fs-sm); }

/* forms */
form.edit { display:block; }
.form-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:12px 18px; }
.form-grid .full { grid-column:1 / -1; }
label.f { display:block; font-size:var(--fs-sm); font-weight:700; color:var(--slate); }
label.f > span { display:block; margin-bottom:4px; }
label.f .help { font-weight:400; color:var(--muted); margin-top:3px; font-size:var(--fs-xs); }
input[type=text], input[type=search], input[type=number], input[type=password], input[type=email], input[type=date], input[type=time], input[type=url], select, textarea { width:100%; padding:8px 10px; border:1px solid var(--line-strong); border-radius:8px; font:inherit; background:var(--surface); color:var(--ink); }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--cta); box-shadow:var(--ring); }
textarea { min-height:90px; resize:vertical; }
textarea.code { font-family:var(--mono); font-size:12.5px; min-height:320px; white-space:pre; }
label.chk { display:flex; align-items:center; gap:8px; font-weight:600; font-size:var(--fs-base); color:var(--ink); padding:6px 0; }
label.chk input { width:16px; height:16px; accent-color:var(--cta); }
.field-err { display:block; color:var(--down); font-size:var(--fs-sm); font-weight:600; margin-top:3px; }
.has-err input, .has-err select { border-color:var(--down); }
.form-actions { display:flex; gap:10px; align-items:center; margin-top:18px; flex-wrap:wrap; }
.form-actions .spacer { flex:1; }
fieldset { border:1px solid var(--line); border-radius:var(--radius-sm); padding:12px 14px 14px; margin:0 0 14px; }
legend { font-family:var(--font-display); font-weight:600; font-size:var(--fs-sm); color:var(--muted); padding:0 6px; }
.secret-row { display:flex; gap:6px; align-items:center; }
.secret-row input { flex:1; font-family:var(--mono); }
.multi { max-height:220px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:6px 10px; background:var(--surface); }
.multi label.chk { padding:3px 0; font-weight:400; }

/* destination picker */
/* overflow stays visible so a picker popup can hang out of the slot box */
.slot { border:1px solid var(--line); border-radius:var(--radius-sm); margin-bottom:10px; background:var(--surface); }
.slot-head { display:flex; justify-content:space-between; align-items:center; padding:7px 12px; background:var(--surface-2); border-bottom:1px solid var(--line); border-radius:var(--radius-sm) var(--radius-sm) 0 0; font-family:var(--font-display); font-weight:600; font-size:13px; }
.slot-hint { font-size:11px; color:var(--faint); font-weight:400; font-family:var(--font-body); }
.slot-list { list-style:none; margin:0; padding:6px 8px; counter-reset:slot; }
.slot-list:empty::after { content:"nothing yet - the call stops here"; display:block; padding:6px 4px; color:var(--faint); font-size:var(--fs-sm); }
.slot-row { display:flex; gap:6px; align-items:center; padding:3px 0; counter-increment:slot; }
.slot-row .ord::before { content:counter(slot); font-family:var(--mono); font-size:11px; color:var(--faint); width:16px; display:inline-block; text-align:right; }
.slot-row select { flex:1; padding:5px 8px; font-size:13px; }
.slot-add { display:flex; gap:6px; padding:4px 8px 10px 30px; }
.slot-add select { flex:1; padding:5px 8px; font-size:13px; }
.slot[data-readonly] .slot-add { display:none; }
.slot-row .pk, .slot-add .pk { flex:1; min-width:0; }

/* the destination combobox (picker.js). A native select cannot show an icon,
   so the button and the popup are drawn here; the real <select> stays in the
   row, hidden, still carrying the name and the value the form submits. */
.pk { position:relative; }
.pk-btn { display:flex; align-items:center; gap:7px; width:100%; min-width:0; text-align:left; padding:5px 7px 5px 5px; font:inherit; font-size:13px; color:var(--ink);
  background:var(--surface); border:1px solid var(--line-strong); border-left:3px solid var(--k,var(--line-strong)); border-radius:var(--radius-xs); cursor:pointer; }
.pk-btn:hover { border-color:var(--k,var(--line-strong)); }
.pk-btn:focus-visible { outline:none; box-shadow:var(--ring); }
.pk-btn[disabled] { cursor:default; opacity:.65; background:var(--surface-2); }
.pk-btn.empty { color:var(--faint); border-left-color:var(--line-strong); }
.pk-i, .pk-gi { width:15px; height:15px; flex:none; fill:none; stroke:var(--k,var(--muted)); stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; }
.pk-t { font-weight:600; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.pk-d { color:var(--faint); font-size:12px; font-weight:400; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.pk-c { width:14px; height:14px; flex:none; margin-left:auto; fill:none; stroke:var(--faint); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
/* fixed, and placed by picker.js: a slot card and the designer's inspector
   clip or scroll their own overflow, and an absolute popup would be cut off */
.pk-pop[hidden] { display:none; }   /* display:flex below would otherwise beat the hidden attribute */
.pk-pop { position:fixed; z-index:600; max-width:min(460px,90vw); display:flex; flex-direction:column; background:var(--surface); border:1px solid var(--line-strong); border-radius:var(--radius-sm); box-shadow:var(--shadow); padding:6px; }
.pk-f { flex:none; width:100%; padding:5px 8px; font-size:13px; margin-bottom:5px; }
.pk-list { list-style:none; margin:0; padding:0; max-height:290px; overflow:auto; }
.pk-grp { display:flex; align-items:center; gap:6px; padding:7px 8px 3px; font-family:var(--font-display); font-size:10.5px; font-weight:600; letter-spacing:.05em; text-transform:uppercase; color:var(--muted); }
.pk-opt { display:flex; align-items:center; gap:7px; padding:5px 7px 5px 6px; border-left:3px solid var(--k,var(--line)); border-radius:var(--radius-xs); cursor:pointer; min-width:0; }
.pk-grp[hidden], .pk-opt[hidden] { display:none; } /* display:flex would win over [hidden] */
.pk-opt.cur { background:var(--nav-hover-bg); }
.pk-opt[aria-selected="true"] { background:var(--nav-active-bg); }
.pk-tick { width:13px; height:13px; flex:none; margin-left:auto; fill:none; stroke:var(--cta); stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; visibility:hidden; }
.pk-opt[aria-selected="true"] .pk-tick { visibility:visible; }
.pk-none { padding:8px; color:var(--faint); font-size:var(--fs-sm); }

/* schedule grid */
.sgrid { display:grid; grid-template-columns:44px repeat(48,1fr); gap:1px; user-select:none; background:var(--line); border:1px solid var(--line); border-radius:8px; overflow:hidden; }
.sgrid .h { background:var(--surface-2); font-size:10px; color:var(--muted); text-align:center; padding:2px 0; font-family:var(--mono); grid-column:span 2; }
.sgrid .h.first { grid-column:1; }
.sgrid .d { background:var(--surface-2); font-size:12px; font-weight:700; color:var(--slate); padding:4px 6px; }
.sgrid .c { background:var(--surface); height:22px; cursor:pointer; }
.sgrid .c.on { background:var(--cta); }
.sgrid .c:hover { outline:1px solid var(--cta-bright); outline-offset:-1px; }
.sgrid-hint { font-size:var(--fs-sm); color:var(--muted); margin-top:6px; }

/* toggle switch */
.switch { position:relative; display:inline-flex; align-items:center; gap:10px; cursor:pointer; }
.switch input { position:absolute; opacity:0; width:0; height:0; }
.switch .track { width:52px; height:28px; border-radius:999px; background:var(--line-strong); position:relative; transition:background .15s; }
.switch .track::after { content:""; position:absolute; top:3px; left:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.3); transition:left .15s; }
.switch input:checked + .track { background:var(--cta); }
.switch input:checked + .track::after { left:27px; }
.switch .lab { font-weight:700; }
.switch.big .track { width:72px; height:38px; } .switch.big .track::after { width:32px; height:32px; } .switch.big input:checked + .track::after { left:37px; }

/* misc */
.usedby ul { margin:0; padding-left:18px; }
.kv { display:grid; grid-template-columns:max-content 1fr; gap:4px 14px; font-size:var(--fs-base); }
.kv dt { color:var(--muted); font-weight:600; } .kv dd { margin:0; }
audio { height:32px; vertical-align:middle; max-width:220px; }
.rec { display:inline-block; vertical-align:middle; }
.rec audio { max-width:260px; }
.rec-notice { display:inline-block; font-size:var(--fs-sm); color:var(--warn-ink); background:var(--warn-bg); border:1px solid var(--warn-line); border-radius:999px; padding:2px 9px; white-space:nowrap; }
.rec-quick { display:inline-flex; gap:4px; align-self:end; }
.rec-quick a.on { border-color:var(--cta); color:var(--cta); }
.rec-bulk { display:flex; gap:8px; align-items:center; flex-wrap:wrap; margin-top:12px; }
.rec-bulk input { width:110px; padding:6px 8px; border:1px solid var(--line-strong); border-radius:8px; font:inherit; background:var(--surface); color:var(--ink); }
.qr { width:180px; height:180px; padding:8px; background:#fff; border:1px solid var(--line); border-radius:10px; }
.codes { display:grid; grid-template-columns:repeat(2,max-content); gap:4px 24px; font-family:var(--mono); font-size:15px; padding:10px 14px; background:var(--code-bg); border-radius:8px; }
.msg { padding:10px 14px; border-radius:8px; margin-bottom:12px; border:1px solid var(--line); background:var(--bg-soft); }
.msg.err { background:var(--down-bg); color:var(--down); border-color:var(--down-line); font-weight:600; }
.msg.warn { background:var(--warn-bg); color:var(--warn-ink); border-color:var(--warn-line); }
.msg.ok { background:var(--up-bg); color:var(--up); border-color:var(--up-line); }
.chips { display:flex; flex-wrap:wrap; gap:4px; }
.chips b { font-weight:500; font-family:var(--mono); font-size:11.5px; background:var(--bg-soft); border:1px solid var(--line); border-radius:4px; padding:1px 6px; color:var(--slate); }
.timeline { list-style:none; margin:0; padding:0; }
.timeline li { padding:6px 0; border-bottom:1px solid var(--line); display:flex; gap:10px; font-size:var(--fs-sm); }
.timeline li:last-child { border-bottom:0; }
.timeline .t { font-family:var(--mono); color:var(--faint); white-space:nowrap; }
.btngrid { display:grid; grid-template-columns:40px 130px 1fr 1fr; gap:6px 8px; align-items:center; }
.btngrid .hd { font-size:var(--fs-xs); font-weight:700; text-transform:uppercase; color:var(--muted); }
.regtest { font-family:var(--mono); font-size:13px; }
.regtest .hit { color:var(--up); font-weight:700; } .regtest .miss { color:var(--faint); } .regtest .bad { color:var(--down); }

/* auth pages */
body.auth { min-height:100vh; }
.auth-shell { display:grid; grid-template-columns:minmax(300px,40%) 1fr; min-height:100vh; }
.auth-hero { background:linear-gradient(160deg,#0B1220,#0E1A2E 60%,#0b3a1c); color:#E7EDF6; padding:36px; display:flex; flex-direction:column; }
.auth-hero .brand { color:#fff !important; padding:0; font-size:var(--fs-lg); }
.auth-hero .b2 { font-size:var(--fs-sm); color:#9AA3B2; font-weight:400; }
.hero-body { margin:auto 0; }
.hero-body h1 { color:#fff; font-size:30px; max-width:420px; }
.hero-sub { color:#B7BEC9; max-width:420px; font-size:var(--fs-md); }
.hero-foot { color:#7D8694; font-size:var(--fs-sm); }
.auth-main { display:grid; place-items:center; padding:30px 16px; }
.auth-card { width:100%; max-width:420px; background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); }
.auth-card h1 { font-size:var(--fs-xl); }
.auth-card label.f { margin-bottom:12px; }
.auth-sub { color:var(--muted); }
.auth-foot { color:var(--muted); font-size:var(--fs-sm); margin:14px 0 0; }
ol.steps { padding-left:20px; margin:0 0 12px; } ol.steps li { margin:4px 0; }

@media (max-width: 900px) {
  body.app { flex-direction:column; }
  .sidebar { width:100%; height:auto; position:relative; padding:10px 16px; flex-direction:row; flex-wrap:wrap; align-items:center; gap:8px; }
  .brand { padding:0; flex:1; }
  .nav-toggle { display:inline-flex; flex-direction:column; gap:4px; background:none; border:1px solid var(--line); border-radius:8px; padding:8px; cursor:pointer; }
  .nav-toggle span { display:block; width:18px; height:2px; background:var(--slate); }
  .tenant-switch, .side-nav, .side-foot { display:none; width:100%; }
  body.nav-open .tenant-switch, body.nav-open .side-nav, body.nav-open .side-foot { display:flex; flex-direction:column; }
  body.nav-open .tenant-switch { display:block; }
  .topbar, main { padding-left:16px; padding-right:16px; }
  .flash { margin-left:16px; margin-right:16px; }
  .auth-shell { grid-template-columns:1fr; } .auth-hero { display:none; }
  .sgrid { grid-template-columns:36px repeat(48,1fr); }
}

/* ---------- iconed nav and header search */
.side-nav a { display:flex; align-items:center; gap:9px; padding:6px 10px; }
/* The icon sprite. Every rule for .ni used to name the place it was used, so
   a page that reached for one anywhere else got the browser's default 300x150
   svg box filled solid black. This is what an icon is; the rules below only
   adjust it. */
.ni { width:16px; height:16px; flex:none; fill:none; stroke:currentColor; stroke-width:1.7; stroke-linecap:round; stroke-linejoin:round; vertical-align:-3px; }
.side-nav a .ni, .topsearch .ni, .search.big .ni, .search-group h3 .ni { opacity:.75; }
.side-nav a.on .ni { opacity:1; }
/* A value you can read and click to copy: the SIP username and password in
   the extensions table, where retyping them into a phone is the whole job. */
.copy { font:inherit; color:inherit; background:none; border:0; padding:0; cursor:pointer; border-bottom:1px dotted var(--line); }
.copy:hover { color:var(--accent); border-bottom-color:currentColor; }
.copy.pw { color:var(--muted); }
.copylist { list-style:none; padding:0; margin:0 0 8px; }
.copylist li { padding:2px 0; }
.copylist .copy { text-align:left; word-break:break-all; }
.copy.copied { color:var(--cta); border-bottom-color:transparent; }
.copy.copied::after { content:" copied"; font-size:10px; letter-spacing:.4px; text-transform:uppercase; }
/* An icon-only button keeps the button's height without its text padding. */
.btn.ico { padding:4px 7px; line-height:0; }
.btn.ico .ni { width:15px; height:15px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; vertical-align:middle; }
.side-nav a .nav-count { margin-left:auto; }
.side-nav .seg { padding:14px 10px 4px; }
.side-nav .seg.seg-top { margin-top:6px; border-top:1px solid var(--line); padding-top:14px; }
.topsearch { display:flex; align-items:center; gap:6px; position:relative; }
.topsearch input { width:220px; max-width:40vw; padding:7px 34px 7px 30px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--bg-soft, var(--surface)); color:var(--ink); font:inherit; font-size:13px; outline:none; }
.topsearch input:focus { border-color:var(--cta); width:300px; }
.topsearch .ni { position:absolute; left:9px; top:50%; transform:translateY(-50%); pointer-events:none; }
.topsearch kbd { position:absolute; right:8px; top:50%; transform:translateY(-50%); font:11px var(--mono); color:var(--faint); border:1px solid var(--line); border-radius:4px; padding:0 5px; pointer-events:none; }
.topsearch input:focus ~ kbd { display:none; }
.search-page .search.big { display:flex; align-items:center; gap:8px; margin-bottom:18px; }
.search-page .search.big .field { position:relative; flex:1; }
.search-page .search.big input { width:100%; box-sizing:border-box; padding:11px 12px 11px 36px; font-size:15px; border:1px solid var(--line-strong); border-radius:var(--radius-sm); background:var(--surface); color:var(--ink); outline:none; }
.search-page .search.big input:focus { border-color:var(--cta); }
.search-page .search.big .ni { position:absolute; left:12px; top:50%; transform:translateY(-50%); width:18px; height:18px; }
.search-group { margin-bottom:14px; }
.search-group h3 { display:flex; align-items:center; gap:8px; margin:0 0 8px; font-size:14px; }
.search-group .hits { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill, minmax(260px, 1fr)); gap:4px 14px; }
.search-group .hits a { display:flex; gap:8px; align-items:baseline; padding:6px 8px; border-radius:6px; text-decoration:none; color:var(--ink); }
.search-group .hits a:hover { background:var(--nav-hover-bg); }
.search-group .hits a b { font-weight:600; white-space:nowrap; }
.search-group .hits a .muted { font-size:12px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.search-group .hits a .tag { margin-left:auto; font-style:normal; font-size:10.5px; font-family:var(--mono); color:var(--faint); }
@media (max-width: 900px) { .topsearch input { width:140px; } .topsearch input:focus { width:180px; } }

/* security: country picker */
.cc-list { max-height:320px; overflow:auto; border:1px solid var(--line); border-radius:8px; padding:6px; margin-top:8px; display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:2px 8px; }
.cc-list label.cc { display:flex; align-items:center; gap:8px; padding:4px 6px; border-radius:6px; font-size:var(--fs-sm); cursor:pointer; }
.cc-list label.cc:hover { background:var(--nav-hover-bg); }
.cc-list label.cc.on { background:var(--nav-active-bg); color:var(--nav-active-fg); }
.cc-list label.cc[hidden] { display:none; }
.cc-list label.cc input { width:15px; height:15px; accent-color:var(--cta); }
.cc-list label.cc b { font-weight:600; font-size:12px; min-width:24px; }
.cc-list label.cc span { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* back to the fleet menu from inside a tenant */
.side-nav a.side-back { margin-top:10px; padding-top:12px; border-top:1px solid var(--line); border-radius:0 0 8px 8px; color:var(--faint); }
.side-nav a.side-back:hover { color:var(--navy); background:transparent; }