:root{
  --bg:#0b0f14;
  --panel:#131a24;
  --panel-2:#0f151e;
  --line:#1d2837;
  --text:#e7edf5;
  --muted:#9aa9bd;
  --accent:#7fb2ff;
  --success:#22c55e;
  --danger:#ef4444;
  --r-lg:18px;
  --r-md:12px;
  --r-sm:10px;
  --shadow-1:0 8px 24px rgba(0,0,0,.35);
  --shadow-2:0 14px 36px rgba(0,0,0,.45);
  --sidebar-w:264px;
  --topbar-h:64px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:
    radial-gradient(1200px 800px at -10% -10%,#0c1421 0%,transparent 60%),
    radial-gradient(900px 650px at 120% -15%,#0d1a2b 0%,transparent 55%),
    var(--bg);
  color:var(--text);
  font:14px/1.5 system-ui,-apple-system,"Segoe UI",Roboto,Inter,Arial,sans-serif;
  letter-spacing:.2px;
}

a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
img{display:block;max-width:100%}
h1,h2,h3{margin:0 0 8px 0}

/* ===========================
   App Layout
   =========================== */
.app{
  display:grid;
  grid-template-columns:var(--sidebar-w) 1fr;
  grid-template-rows:var(--topbar-h) 1fr;
  min-height:100vh;
}

.sidebar{
  grid-row:1 / span 2;
  background:linear-gradient(180deg,var(--panel),var(--panel-2));
  border-right:1px solid var(--line);
  padding:16px;
  position:sticky;
  top:0;
  align-self:start;
  height:100vh;
}

.brand{
  display:flex;align-items:center;gap:10px;
  font-weight:800;letter-spacing:.35px;
  margin:6px 4px 16px;
}
.brand .dot{
  width:8px;height:8px;border-radius:50%;
  background:var(--success);
  box-shadow:0 0 0 4px rgba(34,197,94,.18);
}

.section{font-size:12px;color:var(--muted);margin:10px 6px}

.nav{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.nav a{
  padding:10px 12px;border-radius:12px;color:var(--muted);
  border:1px solid transparent;display:flex;align-items:center;gap:10px;
  transition:.18s ease;
}
.nav a:hover{background:rgba(255,255,255,.03);color:var(--text)}
.nav a.active{
  background:linear-gradient(180deg,#152238,#0f1a2a);
  border-color:var(--line);color:var(--text);box-shadow:var(--shadow-1)
}

.topbar{
  grid-column:2/3;
  display:flex;align-items:center;justify-content:space-between;
  padding:0 16px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(127,178,255,.08),rgba(127,178,255,.03));
  backdrop-filter:saturate(120%) blur(2px);
}

.page-title{font-size:18px;font-weight:800;letter-spacing:.3px}

.user-panel{
  display:flex;align-items:center;gap:12px;
  background:#0e1520;border:1px solid var(--line);
  padding:8px 10px;border-radius:14px
}
.user-panel .avatar{
  width:36px;height:36px;border-radius:50%;overflow:hidden;
  border:1px solid #233247;box-shadow:0 4px 12px rgba(0,0,0,.35);
  background:#0b0f14
}
.user-panel .meta{display:flex;flex-direction:column;line-height:1.2}
.user-panel .name{font-weight:700}
.user-panel .role{font-size:12px;color:var(--muted)}

.btn{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 10px;border-radius:10px;border:1px solid #2a3a50;
  background:#0f1826;transition:.15s ease
}
.btn:hover{background:#122037}
.btn:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.btn.primary{border:0;background:linear-gradient(180deg,#8abaff,#6ea6ff);color:#081226}
.btn.danger{border:0;background:var(--danger);color:#fff}

.content{padding:18px}

.card{
  background:linear-gradient(180deg,rgba(255,255,255,.02),rgba(255,255,255,.01)),#0f141d;
  border:1px solid var(--line);border-radius:var(--r-lg);
  padding:16px;box-shadow:var(--shadow-1)
}

.grid{display:grid;gap:16px}
.grid.cols-3{grid-template-columns:repeat(3,1fr)}
.grid.cols-2{grid-template-columns:repeat(2,1fr)}

@media(max-width:1100px){
  .grid.cols-3{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:880px){
  .app{grid-template-columns:72px 1fr}
  .sidebar{padding:12px}
  .brand .title{display:none}
  .nav a{justify-content:center}
  .nav a .text{display:none}
}
@media(max-width:560px){
  .user-panel .meta{display:none}
}

/* ===========================
   Chips, Inputs & Tables
   =========================== */
.chip{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;border:1px solid var(--line);
  background:#0d1520;color:var(--muted);font-size:12px
}
.chip--sm{padding:4px 8px;font-size:12px}

.input{
  width:100%;padding:8px 10px;border-radius:10px;border:1px solid var(--line);
  background:#0e1520;color:var(--text)
}

.table-wrap{overflow:auto}
table{width:100%;border-collapse:separate;border-spacing:0}
th,td{text-align:left;padding:10px 12px}
thead th{
  position:sticky;top:0;background:#0f1723;border-bottom:1px solid var(--line);
  z-index:1;
}
tbody tr{border-bottom:1px solid var(--line)}
tbody tr:hover{background:#0f1720}

/* ===========================
   Utilities
   =========================== */
.card--mb16{margin-bottom:16px}
.row{display:flex;gap:10px}
.row.wrap{flex-wrap:wrap}
.row--center{align-items:center}
.row--sb{justify-content:space-between}
.row--mb8{margin-bottom:8px}
.h1{margin:0}
.h1--sm{font-size:16px}
.btn--xs{font-size:12px;padding:6px 10px}
.muted{color:var(--muted)}
.mono{font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace}
.gap-8 { gap: 8px; }
.flex-1 { flex: 1; }
.mt-12 { margin-top: 12px; }
.mt-8  { margin-top: 8px; }
.mb-10 { margin-bottom: 10px; }
.justify-end { justify-content: flex-end; }
.gap-12 { gap: 12px; }
.mt-6   { margin-top: 6px; }
.ml-auto { margin-left: auto; }
.stack-16 { display:flex; flex-direction:column; gap:16px; }
.stack-12 { display:flex; flex-direction:column; gap:12px; }
.divider { border:0; height:1px; background:var(--line); opacity:.8; }

/* ===========================
   Account page layout
   =========================== */
.case-header{
  position:sticky;
  top:calc(var(--topbar-h) + 8px);
  z-index:5;
  backdrop-filter:saturate(115%) blur(2px);
}

.account-grid{
  display:grid;
  grid-template-columns: 2fr 1fr;
  gap:16px;
}

.col-main { min-width: 0; }
.col-side { min-width: 0; }

.side-sticky{
  position:sticky;
  top:calc(var(--topbar-h) + 96px);
  display:flex;
  flex-direction:column;
  gap:16px;
}

/* Documents sidebar */
.doc-controls{
  display:flex;
  flex-direction:column;
  gap:8px;
  margin-top:12px;
}
.doc-filters{
  display:flex; gap:8px; flex-wrap:wrap;
}
.docs-table th:nth-child(2), .docs-table td:nth-child(2){ width:120px; }
.docs-table th:nth-child(4), .docs-table td:nth-child(4){ width:90px; }

@media(max-width:1100px){
  .account-grid{ grid-template-columns: 1fr; }
  .side-sticky{ position:static; top:auto; }
}

/* ===========================
   Softphone page styles (existing)
   =========================== */

/* keep the main softphone card at a comfortable width */
.content > .card { max-width: 1200px; }

/* header area inside the card */
.softphone-head{
  align-items:center;justify-content:space-between;
  padding:16px 18px;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,rgba(127,178,255,.06),transparent)
}

/* header chips group can wrap on smaller widths */
.header-chips{flex-wrap:wrap;gap:8px}

/* pill chips used for id/region/codec */
.badge{
  display:inline-flex;align-items:center;gap:8px;
  border:1px solid var(--line);background:#0f1722;color:#0f1722;
  padding:6px 10px;border-radius:999px;font-size:12px
}
.badge{ color: var(--muted); }

/* two-column body: left (call) / right (devices+log) */
.grid.softphone{display:grid;gap:16px;grid-template-columns:1fr 420px}
@media (max-width:1100px){.grid.softphone{grid-template-columns:1fr 380px}}
@media (max-width:980px){ .grid.softphone{grid-template-columns:1fr}}

/* log and misc (unchanged) */
#log{
  white-space:pre-wrap;background:#0a0f17;color:var(--text);
  border:1px solid var(--line);border-top:0;height:260px;overflow:auto;
  font-family:ui-monospace,Menlo,Consolas,"Liberation Mono",monospace;
  padding:12px 14px;border-radius:0 0 12px 12px;
}

/* status pill next to title */
.status{
  display:inline-flex;align-items:center;gap:8px;
  padding:6px 10px;border-radius:999px;
  border:1px solid var(--line);background:#0f1722;font-size:12px
}
.status .dot{
  width:9px;height:9px;border-radius:50%;background:#64748b;transition:.2s
}
.status.ready .dot{background:var(--success);box-shadow:0 0 0 4px rgba(34,197,94,.18)}
.status.warn .dot{background:#f59e0b}
.status.bad  .dot{background:var(--danger)}

/* presence switch */
.switch-wrap{
  display:inline-flex;align-items:center;gap:10px;
  border:1px solid #233042;background:#0b111a;
  padding:6px 10px;border-radius:12px
}
#presenceToggle{position:absolute;opacity:0;width:0;height:0}
.switch{
  position:relative;width:42px;height:24px;border-radius:999px;
  background:#121b29;border:1px solid #223047;transition:.15s
}
.switch .knob{
  position:absolute;top:50%;left:3px;width:18px;height:18px;
  transform:translateY(-50%);background:linear-gradient(180deg,#fff,#dfe7f0);
  border-radius:50%;box-shadow:0 2px 6px rgba(0,0,0,.35);transition:left .16s
}
#presenceToggle:checked + .switch{background:#0f274f;border-color:#2b4f86}
#presenceToggle:checked + .switch .knob{left:21px}

/* banners relative to sidebar (incoming & ACW) */
.incoming,.acwbar{
  position:fixed;left:var(--sidebar-w);right:16px;bottom:16px;z-index:50;
  display:none;background:linear-gradient(180deg,rgba(255,255,255,.03),rgba(255,255,255,.02)),#161e2a;
  border:1px solid var(--line);border-radius:12px;padding:12px 14px;box-shadow:var(--shadow-2)
}
.incoming:not([hidden]), .acwbar:not([hidden]) { display:flex; }

@media (max-width:880px){.incoming,.acwbar{left:16px}}
.incoming-inner{align-items:center;justify-content:space-between;gap:12px}
.incoming-title{font-size:12px}
.acw-text{gap:10px}
.acw-actions{gap:8px}

/* Motion preferences */
@media (prefers-reduced-motion: reduce){
  *{transition:none !important;animation:none !important}
}