:root{--bg:#f3f6fb;--panel:#fff;--ink:#172033;--muted:#657089;--accent:#3157d5;--line:#dde3ee;--danger:#b42318}*{box-sizing:border-box}body{margin:0;background:var(--bg);color:var(--ink);font:14px/1.5 system-ui,-apple-system,Segoe UI,sans-serif}.topbar{position:sticky;top:0;z-index:5;display:flex;align-items:center;gap:24px;padding:14px 24px;background:#10182b;color:#fff;box-shadow:0 2px 10px #0002}.brand{font-size:19px;font-weight:800;color:#fff;text-decoration:none;white-space:nowrap}nav{display:flex;gap:14px;align-items:center;overflow-x:hidden}nav a{color:#dce4ff;text-decoration:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.container{max-width:1500px;margin:26px auto;padding:0 20px}.page-head{display:flex;justify-content:space-between;align-items:end;gap:20px;margin-bottom:18px}h1{margin:0;font-size:28px}h2{margin-top:0}.page-head p,.muted{color:var(--muted)}.panel,.auth-card,.metric{background:var(--panel);border:1px solid var(--line);border-radius:12px;box-shadow:0 4px 18px #1c2b4d0b}.panel{padding:20px;margin-bottom:18px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px;margin-bottom:18px}.metric{padding:18px}.metric span{display:block;text-transform:capitalize;color:var(--muted)}.metric strong{font-size:30px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%}th,td{border-bottom:1px solid var(--line);padding:10px;text-align:left;vertical-align:top}th{text-transform:capitalize;background:#f8faff;position:sticky;top:0}td{max-width:520px;word-break:break-word}a{color:var(--accent)}.button,button{display:inline-block;border:0;border-radius:7px;background:var(--accent);color:#fff;padding:9px 14px;text-decoration:none;cursor:pointer;font-weight:650}.button.secondary{background:#e8edfa;color:#24304b}.actions{display:flex;gap:10px;align-items:center}.actions form{display:inline}.link{background:none;padding:0;color:var(--accent)}.danger{color:var(--danger)}.auth-card{max-width:430px;margin:8vh auto;padding:28px}.auth-card label,.form-panel label{display:flex;flex-direction:column;gap:6px;font-weight:650;margin-bottom:14px}input,select,textarea{width:100%;border:1px solid #cbd3e2;border-radius:7px;padding:10px;background:#fff;color:var(--ink);font:inherit}textarea{resize:vertical}.alert{padding:10px;border-radius:7px;margin:12px 0}.alert.error{background:#fee4e2;color:#912018}.form-grid{display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:0 18px}.form-grid .wide{grid-column:1/-1}.check{display:flex;align-items:center;gap:8px;padding:8px 0;font-weight:400}.check input{width:auto}.form-actions{display:flex;gap:10px}.details{display:grid;grid-template-columns:minmax(160px,260px) 1fr;gap:6px 14px}.details dt{font-weight:700}.details dd{margin:0}.timeline article{border-left:3px solid #b8c4ed;padding:0 0 16px 14px}.timeline header{display:flex;justify-content:space-between;gap:10px}.timeline span{color:var(--muted);font-size:12px}.timeline p{font-size:16px;margin:6px 0}pre{white-space:pre-wrap;overflow:auto;background:#111827;color:#e8eefc;padding:14px;border-radius:8px}footer{text-align:center;color:var(--muted);padding:30px}@media(max-width:800px){.topbar{align-items:flex-start;flex-direction:column}.form-grid{grid-template-columns:1fr}.page-head{align-items:flex-start;flex-direction:column}.container{padding:0 12px}}
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:14px}.detail-grid>div{min-width:0}.detail-grid strong{display:block;text-transform:capitalize;margin-bottom:6px}.detail-grid pre{margin:0;max-height:420px}

/* ---------------------------------------------------------------------------
   Palette: green through blue to purple. Hue runs 160 (teal-green) to 265
   (violet), with saturation and lightness held close so the three read as one
   family rather than three unrelated accents.
   --------------------------------------------------------------------------- */
:root{
  --green:#10b981;      /* success, active calls, completed */
  --green-dim:#0d9668;
  --blue:#3b82f6;       /* primary actions, links */
  --blue-dim:#2563eb;
  --purple:#8b5cf6;     /* campaigns, secondary emphasis */
  --purple-dim:#7c3aed;
  --amber:#f59e0b;      /* warnings */
  --red:#ef4444;        /* failures, destructive actions */

  --bg:#0f1729;         /* page */
  --bg-side:#141d33;    /* sidebar */
  --panel:#18213a;      /* cards */
  --panel-2:#1e2947;    /* table headers, hover */
  --border:#2a3760;
  --text:#e8edfb;
  --text-dim:#9dabd0;

  --sidebar-w:230px;
  --radius:10px;
}

/* --------------------------------------------------------------- structure */
body{background:var(--bg);color:var(--text)}
header{
  display:flex;align-items:center;gap:12px;padding:12px 18px;
  background:linear-gradient(90deg,var(--green-dim) 0%,var(--blue-dim) 48%,var(--purple-dim) 100%);
  border-bottom:1px solid var(--border);position:sticky;top:0;z-index:30
}
.brand{color:#fff;font-weight:700;letter-spacing:.3px;text-decoration:none;font-size:17px}
.nav-toggle{
  display:none;background:#ffffff22;color:#fff;border:0;border-radius:8px;
  font-size:18px;line-height:1;padding:6px 11px;cursor:pointer
}
.shell{display:flex;align-items:flex-start;min-height:calc(100vh - 108px)}
/* Data-heavy pages want the width. 1500px left a third of a wide screen empty
   while the table beside it was crushed. */
main.container{flex:1;min-width:0;padding:22px 26px;max-width:min(1900px,100%)}

/* ----------------------------------------------------------------- sidebar */
#sidebar{
  width:var(--sidebar-w);flex:0 0 var(--sidebar-w);align-self:stretch;
  background:var(--bg-side);border-right:1px solid var(--border);
  padding:14px 10px;display:flex;flex-direction:column;gap:2px;
  position:sticky;top:56px;max-height:calc(100vh - 56px);overflow-y:auto
}
#sidebar a{
  display:block;color:var(--text-dim);text-decoration:none;
  padding:8px 12px;border-radius:8px;font-size:14px
}
#sidebar a:hover{background:var(--panel-2);color:var(--text)}
#sidebar a.active{background:var(--blue);color:#fff;font-weight:600}
.nav-top{font-weight:600;color:var(--text) !important}
.nav-foot{margin-top:auto;color:var(--text-dim) !important}

#sidebar details.menu>summary{
  cursor:pointer;list-style:none;user-select:none;
  padding:9px 12px;border-radius:8px;font-size:13px;font-weight:650;
  color:var(--text);text-transform:uppercase;letter-spacing:.4px
}
#sidebar details.menu>summary::-webkit-details-marker{display:none}
#sidebar details.menu>summary::after{content:"\203A";float:right;transition:transform .15s;opacity:.6}
#sidebar details.menu[open]>summary::after{transform:rotate(90deg)}
#sidebar details.menu>summary:hover{background:var(--panel-2)}
/* The open group gets a colour spine, so its section is obvious at a glance. */
#sidebar details.menu[open]{
  background:#ffffff06;border-radius:8px;padding-bottom:4px;
  border-left:3px solid var(--purple);margin:2px 0
}
#sidebar details.menu>div{display:flex;flex-direction:column;gap:1px;padding:2px 0 2px 8px}
#sidebar details.menu>div a{font-size:13.5px;padding:7px 12px}

@media(max-width:900px){
  .nav-toggle{display:block}
  .shell{flex-direction:column}
  #sidebar{
    display:none;width:100%;flex:1 1 auto;position:static;max-height:none;
    border-right:0;border-bottom:1px solid var(--border)
  }
  #sidebar.open{display:flex}
  main.container{padding:16px}
}

/* -------------------------------------------------------------- components */
.panel{background:var(--panel);border:1px solid var(--border);border-radius:var(--radius);padding:16px 18px;margin-bottom:18px}
.panel h2{margin:0 0 12px;font-size:15px;color:var(--text);letter-spacing:.2px}
.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{margin:0 0 4px;font-size:21px}
.page-head p{margin:0;color:var(--text-dim);font-size:13.5px}
.muted{color:var(--text-dim);font-size:13px}

/* Tables size to their content and scroll as a unit. Forcing width:100% onto a
   fourteen-column table gave each column about 75px, which wrapped every value
   one character per line and turned the actions into a vertical column of
   letters. Horizontal scrolling is far better than shredding. */
/* separate, not collapse. position:sticky does not apply to cells of a
   border-collapse:collapse table in Chrome or Firefox, so the sticky header and
   the sticky actions column were both silently ignored. Borders move onto the
   cells to keep the same appearance. */
table{width:100%;border-collapse:separate;border-spacing:0;font-size:13.5px}
/* No content-sized minimum width and no nowrap on data cells: together those
   made every table exactly as wide as its longest unwrapped row, which
   produced a very long horizontal scroll on every list page. Tables now fit
   the container; long values wrap inside their cell instead of stretching the
   whole table, and overflow-x on .table-wrap remains only as a safety net for
   a genuinely oversized table. */
thead th{
  text-align:left;padding:9px 10px;background:var(--panel-2);
  color:var(--text-dim);font-weight:600;font-size:12px;
  text-transform:uppercase;letter-spacing:.4px;white-space:nowrap
}
tbody td{padding:9px 10px;border-top:1px solid var(--border);vertical-align:top}
tbody tr:hover{background:#ffffff05}
/* The scroll container. A subtle inset shadow on the right edge hints there is
   more to see, which a bare scrollbar does not. */
.table-wrap{overflow-x:auto;overflow-y:visible;border-radius:var(--radius);
  background:linear-gradient(to left,rgba(0,0,0,.25),transparent 24px)}
.table-wrap::-webkit-scrollbar{height:10px}
.table-wrap::-webkit-scrollbar-thumb{background:var(--border);border-radius:5px}
.table-wrap::-webkit-scrollbar-thumb:hover{background:var(--text-dim)}

/* Headers keep to one line; data cells wrap. overflow-wrap:anywhere lets
   unbroken tokens (UUIDs, URLs, long emails) break mid-token, which is what
   allows a wide table to shrink into its container at all -- without it the
   cell's minimum width is the full token and the table overflows anyway. Long
   values still carry the full text as a tooltip. */
th{white-space:nowrap}
td{max-width:420px;overflow-wrap:anywhere;word-break:break-word}
td.wrap{white-space:normal;max-width:420px}
/* Opt-in single-line clipping for columns where wrapping reads badly. */
td.clip{white-space:nowrap;max-width:240px;overflow:hidden;text-overflow:ellipsis}

/* The header stays put while scrolling a long list. */
thead th{position:sticky;top:0;z-index:2;background:var(--panel-2)}

tbody tr:hover{background:rgba(255,255,255,.03)}

/* Actions never wrap, and sit against the right edge where the eye expects
   them. Previously the buttons broke one letter per line. */
/* display:table-cell overrides an earlier '.actions{display:flex}' rule meant
   for form button rows. Inherited by the cell it made the buttons collapse to
   nothing, which is why the column rendered with width but no content.
   !important is warranted: the generic rule appears earlier and matches the
   same element, and renaming it would touch every form in the app. */
/* Actions sit in the first column, so they are visible without scrolling a wide
   table sideways. Two earlier attempts pinned them to the right with
   position:sticky, which is unreliable on table cells -- it is ignored under
   border-collapse:collapse, and an inherited '.actions{display:flex}' rule
   collapsed the buttons. The first column needs neither.
   display:table-cell still overrides that flex rule, which appears earlier. */
td.actions,th.actions{display:table-cell !important;white-space:nowrap;width:1%;
  vertical-align:middle;padding-right:16px}
td.actions a,td.actions button{display:inline-block;margin:0 6px 0 0;padding:4px 9px;
  font-size:12px;line-height:1.4;border-radius:6px;text-decoration:none;white-space:nowrap}
td.actions a{border:1px solid var(--border);color:var(--text-dim)}
td.actions a:hover{background:var(--panel-2);color:var(--text);border-color:var(--text-dim)}
td.actions form{display:inline}
td.actions button.link.danger{border:1px solid transparent;background:transparent;
  color:var(--red);cursor:pointer}
td.actions button.link.danger:hover{background:rgba(255,90,90,.12);border-color:var(--red)}

button,.button{
  display:inline-block;background:var(--blue);color:#fff;border:0;
  border-radius:8px;padding:9px 15px;font-size:13.5px;font-weight:600;
  cursor:pointer;text-decoration:none
}
button:hover,.button:hover{background:var(--blue-dim)}
.button.secondary{background:transparent;border:1px solid var(--border);color:var(--text-dim)}
.button.secondary:hover{background:var(--panel-2);color:var(--text)}
.button.danger,button.danger{background:var(--red)}
.button.success,button.success{background:var(--green)}
.button.accent,button.accent{background:var(--purple)}

.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:14px}
.form-grid label{display:flex;flex-direction:column;gap:5px;font-size:13px;color:var(--text-dim);font-weight:600}
.form-grid input,.form-grid select,.form-grid textarea{
  background:#0d1424;color:var(--text);border:1px solid var(--border);
  border-radius:8px;padding:9px 11px;font-size:14px;font-family:inherit;width:100%
}
.form-grid input:focus,.form-grid select:focus,.form-grid textarea:focus{
  outline:0;border-color:var(--blue);box-shadow:0 0 0 3px #3b82f633
}
.form-grid input[type=checkbox]{width:auto;accent-color:var(--green)}
.form-grid small{color:var(--text-dim);font-weight:400;font-size:12px}
.form-actions{display:flex;gap:10px;margin-top:16px;flex-wrap:wrap}
.inline-form{display:flex;gap:8px;align-items:center}
.inline-form select{background:#0d1424;color:var(--text);border:1px solid var(--border);border-radius:8px;padding:7px 10px}

/* Status pills. Green for good, amber for in-progress, red for failure. */
.pill{display:inline-block;padding:2px 9px;border-radius:999px;font-size:11.5px;font-weight:650;letter-spacing:.2px}
.pill.ok,.pill.completed,.pill.active,.pill.answered{background:#10b98122;color:var(--green)}
.pill.warn,.pill.pending,.pill.ringing,.pill.callback,.pill.recording{background:#f59e0b22;color:var(--amber)}
.pill.bad,.pill.failed,.pill.missing,.pill.busy,.pill.no_answer{background:#ef444422;color:var(--red)}
.pill.info,.pill.draft,.pill.placed{background:#8b5cf622;color:var(--purple)}

footer{padding:14px 26px;color:var(--text-dim);font-size:12.5px;border-top:1px solid var(--border)}
a{color:var(--blue)}
a:hover{color:var(--purple)}


/* Call transcript rendered as a conversation. A table of rows makes it hard to
   follow who said what; alternating sides reads the way the call happened. */
.dialogue{display:flex;flex-direction:column;gap:14px}
.dialogue .turn{display:flex;flex-direction:column;max-width:76%}
.dialogue .from-caller{align-self:flex-start}
.dialogue .from-assistant{align-self:flex-end;align-items:flex-end}
.dialogue .who{font-size:12px;font-weight:650;opacity:.75;margin-bottom:3px}
.dialogue .bubble{padding:10px 13px;border-radius:12px;line-height:1.45;white-space:pre-wrap;word-break:break-word}
.dialogue .from-caller .bubble{background:#243252;border-bottom-left-radius:3px}
.dialogue .from-assistant .bubble{background:#1d4b46;border-bottom-right-radius:3px}
.dialogue .meta{font-size:11px;opacity:.55;margin-top:3px}
@media(max-width:700px){.dialogue .turn{max-width:92%}}


/* Sortable column headers and the list search box. */
th a.sort{color:inherit;text-decoration:none;display:inline-block;white-space:nowrap}
th a.sort:hover{text-decoration:underline}
th a.sort.active{font-weight:700}
form.list-search{display:flex;gap:8px;align-items:center;margin:0 0 12px}
form.list-search input[type=search]{flex:1;max-width:420px}