/* 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)}
/* The wordmark (Wordmark.razor), with no dot here: its «24» wears the console's accent, on the bar and on the sign-in. */
.topbar .wordmark span,.login-box .wordmark 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. */
/* 4 px a side, so the 15 counts of «Employees» stay inside a laptop window of 1366 px (8 px pushed them past it). */
.traffic th.num,.traffic td.num{width:1%;white-space:nowrap;text-align:right;padding:6px 4px;font-variant-numeric:tabular-nums}
.traffic th.group{text-align:center;text-transform:uppercase;letter-spacing:.05em;font-size:12px}
/* The name of a window of counts in a row: the head of the table says it on a computer, so only a phone shows it. */
.traffic td.window{display:none}
.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}
/* A dropdown in a table row is as wide as its longest choice: at 100% it gets no width of its own in a table whose slack
   goes to another column, and it shrank to its arrow (the account manager on «Prospects», the discount on «Signed up»). */
td select{width:auto}
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;white-space:nowrap} .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}
/* ConfirmButton, on every screen (the client's too, whose look is client.css): the first button opens the question in place,
   and the red one under it is the only one that acts. In a table cell the question keeps a width it can be read at. */
.confirm > summary{list-style:none} .confirm > summary::-webkit-details-marker{display:none}
.confirm-ask{margin-top:8px} .confirm-ask p{margin:0 0 8px} td .confirm-ask p{min-width:240px}
/* 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}
/* Panels that do not depend on each other, side by side while the width holds them, and one under the other on a phone
   (the prospect page of an account manager). */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr));gap:14px;align-items:start;margin-bottom:14px}
.cols > .panel{margin-bottom:0} .cols textarea{font:inherit}
/* A short list of facts in a panel: the name of each beside its value. A name is as wide as its text up to 45% of the
   list, and a longer one (a mail address on the tenant page's «People») breaks inside its own column: as wide as its
   text, it left the value a column of one letter (2026-11-11, Fincas Demo). */
.facts{display:grid;grid-template-columns:fit-content(45%) minmax(0,1fr);gap:4px 14px;margin:0}
.facts dt{color:var(--muted);font-size:13px;font-weight:600;overflow-wrap:anywhere} .facts dd{margin:0;overflow-wrap:anywhere}
.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);white-space:pre-wrap;overflow-wrap:anywhere}
.transcript .employee.msg{margin-left:auto}
.transcript .owner{background:rgba(251,191,36,.12);border:1px solid rgba(251,191,36,.32)} .transcript .owner.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, and
   a list marked .stack turns each row into a block whose free text (.wide) takes the whole width. A table of counts
   (.traffic, «Employees» and «Telnyx») is a .stack too, since 2026-11-11, when it scrolled sideways inside its panel
   (Miguel: «fix the finding»): each window of counts takes a line of its own under its name (td.window), and its
   counts stand side by side there, each under its own label (data-label). */
@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%}
    .traffic td.num{width:auto;flex:1 0 2.4em;text-align:center}
    .traffic td.num[data-label]::before{content:attr(data-label);display:block;font-size:11px;font-weight:400;color:var(--muted)}
    .traffic .gstart{border-left:0}
    .traffic td.window{display:block;flex-basis:100%;margin-top:6px;font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted)}
}