/* Miguel's own console: every operator screen (App.razor, which says why it is dark and dense). It sat inside App.razor
   until 2026-10-18, and went out with every page. It loads after the head outlet, as the <style> did. */
/* Dark, and only dark: this is Miguel's own console, never a customer's screen. */
:root{color-scheme:dark;
      --bg:#0f1216;--panel:#161a20;--raise:#1d222a;--sunk:#10141a;
      --ink:#e7eaee;--muted:#98a2b3;--faint:#49515e;--line:#272d36;
      --accent:#2dd4bf;--accent-h:#5eead4;--on-accent:#06231f;
      --red:#f87171;--good:#4ade80;--amber:#fbbf24;--radius:8px}
*{box-sizing:border-box}
body{margin:0;font-family:ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
     color:var(--ink);background:var(--bg);line-height:1.5;font-size:15px}
a{color:var(--accent);text-decoration:none} a:hover{text-decoration:underline}
.topbar{background:var(--panel);border-bottom:1px solid var(--line);padding:0 20px;display:flex;align-items:center;gap:24px;height:52px}
.topbar .brand{font-weight:800;font-size:17px;color:var(--ink)}
.topbar .brand span{color:var(--accent)}
.topbar nav{display:flex;gap:4px;align-self:stretch}
.topbar nav a{display:flex;align-items:center;padding:0 12px;font-weight:600;color:var(--muted);
    border-bottom:2px solid transparent} .topbar nav a:hover{color:var(--ink);text-decoration:none}
.topbar nav a.active{color:var(--accent);border-bottom-color:var(--accent);background:rgba(45,212,191,.10)}
.topbar .spacer{flex:1}
.wrap{padding:14px 20px}
h1{font-size:20px;margin:0 0 10px} h2{font-size:15px;margin:22px 0 8px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
.panel{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:14px;margin-bottom:14px}
table{width:100%;border-collapse:collapse}
th,td{text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);vertical-align:top}
.nw{white-space:nowrap}
th{color:var(--muted);font-weight:600;font-size:13px}
tr:hover td{background:var(--raise)}
/* A count table: names take the width they need, numbers shrink to their digits. */
.traffic th.num,.traffic td.num{width:1%;white-space:nowrap;text-align:right;padding:6px 8px;font-variant-numeric:tabular-nums}
.traffic th.group{text-align:center;text-transform:uppercase;letter-spacing:.05em;font-size:12px}
.traffic .gstart{border-left:2px solid #3d4653}
.traffic .total{font-weight:700;color:var(--ink)}
.traffic th.total{color:var(--muted)}
/* A silent channel stays legible but steps back, so the eye lands on the counts that moved. */
.traffic td.zero{color:var(--faint)}
/* A count that moved opens the conversations behind it. The link takes the whole cell, so the
   pointer finds it, and keeps the cell's own colour, so the column still reads as numbers. */
.traffic td.num a,.traffic td.num span{color:inherit;display:block}
/* The employee has no channel of this kind — a gap in the setup, not a quiet week. It holds
   its shading through the row hover, which would otherwise paint the gap away. */
.traffic td.off,.traffic tr:hover td.off{color:var(--faint);
    background:repeating-linear-gradient(135deg,#0c0f13 0 6px,#171c23 6px 12px)}
input[type=text],select,textarea{width:100%;padding:6px 10px;border:1px solid var(--line);
    border-radius:6px;font:inherit;background:var(--sunk);color:var(--ink)}
/* Full-width pages would otherwise stretch one-line fields across the whole monitor. */
input[type=text],select{max-width:560px}
td input[type=text]{max-width:none}
textarea{font-family:ui-monospace,Consolas,monospace;font-size:13px}
label{font-size:13px;color:var(--muted);font-weight:600;display:block;margin:10px 0 4px}
.btn{display:inline-block;background:var(--accent);color:var(--on-accent);border:0;border-radius:6px;padding:9px 16px;
     font:inherit;font-weight:600;cursor:pointer} .btn:hover{background:var(--accent-h)}
.btn.small{padding:5px 10px;font-size:13px}
.btn.danger{background:var(--red);color:#2b0b0b}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{background:var(--raise)}
.btn:disabled{opacity:.4;cursor:not-allowed} .btn.ghost:disabled:hover{background:transparent}
/* A button beside the field it acts on, and the two final answers pushed apart. */
.actions{display:flex;gap:8px;align-items:center} .actions input[type=text]{margin:0}
/* The pager under every list: one row, the dead arrow faint, the dropdown only as wide as its words. */
.pager{display:flex;align-items:center;gap:16px;margin-top:10px;font-size:14px}
.pager .dead{color:var(--faint)} .pager form{margin:0} .pager select{width:auto;margin:0}
.chip{display:inline-block;border-radius:999px;padding:2px 10px;font-size:12px;font-weight:700;border:1px solid var(--line)}
.chip.active{background:rgba(74,222,128,.14);color:var(--good);border-color:rgba(74,222,128,.35)}
.chip.draft{background:rgba(251,191,36,.14);color:var(--amber);border-color:rgba(251,191,36,.35)}
.chip.paused,.chip.disabled{background:rgba(248,113,113,.14);color:var(--red);border-color:rgba(248,113,113,.35)}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.saved{background:rgba(74,222,128,.12);border:1px solid rgba(74,222,128,.35);color:var(--good);border-radius:6px;padding:8px 12px;margin-bottom:14px;font-size:14px}
.err{background:rgba(248,113,113,.12);border:1px solid rgba(248,113,113,.35);color:var(--red);border-radius:6px;padding:8px 12px;margin-bottom:14px;font-size:14px}
.muted{color:var(--muted)} .mono{font-family:ui-monospace,Consolas,monospace;font-size:13px}
/* A second line in a cell of a list, under the value it belongs to: the status under the start, the number under the channel. */
.under{margin-top:4px}
/* A tenant's logo, from its own site, so the eye tells the tenants apart. Every logo takes the same white box, a wide
   one as wide as the box and a square one as high (Miguel, 2026-10-16: «I want all logos to occupy the same»). White,
   because each logo is drawn for the white page of its site: a black logo on the dark list would vanish. */
.logo{display:block;width:120px;height:36px;object-fit:contain;background:#fff;border-radius:4px;padding:3px 6px}
/* Amber says a person is in the loop: what the employee wants to do, and what a tool did.
   One rule carries the colour, and the transcript row adds only its typeface. */
.note,.transcript .tool{background:rgba(251,191,36,.10);border:1px solid rgba(251,191,36,.30);border-radius:8px;padding:10px 14px}
.transcript .caller{background:var(--raise);border:1px solid var(--line)}
.transcript .employee{background:rgba(45,212,191,.12);border:1px solid rgba(45,212,191,.32)}
.transcript .tool{font-family:ui-monospace,Consolas,monospace;font-size:13px}
.transcript .msg{border-radius:8px;padding:10px 14px;margin:8px 0;max-width:min(75%,760px)}
.transcript .employee.msg{margin-left:auto}
.transcript .msg-photo{display:block;max-width:100%;max-height:260px;border-radius:6px;margin:2px 0 6px}
.login-box{max-width:360px;margin:10vh auto;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:28px}
/* The bar over a list: the filter, then the count pushed right. On a narrow screen the count goes under the filter. */
.bar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 12px;margin-bottom:10px} .bar select{width:auto}
.bar .count{margin-left:auto}
.pager{flex-wrap:wrap}
/* A phone (Miguel, 2026-10-16: «Make mobile responsive this admin site»). The tabs take a row of their own,
   a list marked .stack turns each row into a block whose free text (.wide) takes the whole width, and a
   table of counts scrolls sideways inside its panel instead of crushing the columns. */
@media (max-width:760px){
    .topbar{height:auto;flex-wrap:wrap;gap:0 12px;padding:0 12px}
    .topbar .brand{padding:12px 0}
    .topbar .spacer{display:none}
    .topbar .who{flex:1 1 0;min-width:0;text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:13px}
    .topbar nav.main{order:1;flex-basis:100%;overflow-x:auto;scrollbar-width:none;border-top:1px solid var(--line)}
    .topbar nav a{padding:10px;white-space:nowrap}
    .wrap{padding:10px}
    .panel{padding:10px;overflow-x:auto}
    .grid2{grid-template-columns:1fr}
    .transcript .msg{max-width:90%}
    table.stack thead{display:none}
    table.stack tr{display:flex;flex-wrap:wrap;align-items:baseline;gap:2px 12px;padding:10px 0;border-bottom:1px solid var(--line)}
    table.stack td{border:0;padding:0} table.stack tr:hover td{background:none}
    table.stack td.wide{flex-basis:100%}
}