/* ============ TELAGA VOICE CHAT · Dashboard Theme ============ */
:root{
  --bg:#0c0f1a; --bg2:#141a2b; --card:#171e30; --card2:#1d263c;
  --line:#26304a; --txt:#e6ebf5; --muted:#8592ad;
  --pri:#4f8cff; --pri2:#3a72e0; --ok:#2ecc71; --warn:#f5a623;
  --danger:#ff4d5e; --accent:#7c5cff;
}
*{box-sizing:border-box;margin:0;padding:0}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:radial-gradient(1200px 600px at 80% -10%,#1a2340 0,var(--bg) 55%);
  color:var(--txt);min-height:100vh;font-size:14px;
}

/* ---------- LOGIN ---------- */
.login-body{display:flex;align-items:center;justify-content:center}
.login-card{
  width:360px;background:var(--card);border:1px solid var(--line);
  border-radius:18px;padding:34px;margin:60px auto;
  box-shadow:0 24px 60px rgba(0,0,0,.5);
}
.brand{text-align:center;margin-bottom:22px}
.brand-logo{font-size:44px}
.brand h1{font-size:20px;letter-spacing:1px;margin-top:6px}
.brand h1 span{color:var(--pri);display:block;font-size:13px;letter-spacing:3px}
.brand-sub{color:var(--muted);font-size:12px;margin-top:8px}
.login-card label{display:block;margin:14px 0 6px;color:var(--muted);font-size:12px}
.login-card input{width:100%}
.login-hint{text-align:center;color:var(--muted);font-size:12px;margin-top:16px}
code{background:var(--bg2);padding:2px 6px;border-radius:5px;color:var(--pri)}

/* ---------- APP LAYOUT ---------- */
:root { --topbar-h: 49px; }

.app-body {
  display: flex;
  min-height: calc(100vh - var(--topbar-h));
}

.sidebar {
  width: 220px;
  flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--line);
  display: flex;
  flex-direction: column;
  padding: 16px 12px;
  position: sticky;
  top: var(--topbar-h);
  height: calc(100vh - var(--topbar-h));
  overflow-y: auto;
}

.sidebar-logo {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 1px;
  color: var(--pri);
  padding: 0 8px 14px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 10px;
}

.nav-list {
  list-style: none;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-radius: 9px;
  color: var(--muted);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  transition: .15s;
}

.nav-item:hover {
  background: var(--card2);
  color: var(--txt);
}

.nav-item.active {
  background: rgba(79,140,255,.15);
  color: var(--pri);
  font-weight: 600;
}

.sidebar-user {
  padding: 10px 8px 0;
  line-height: 1.6;
}

.sidebar-footer {
  padding-top: 12px;
  border-top: 1px solid var(--line);
  margin-top: auto;
}

.content {
  flex: 1;
  min-width: 0;
}

/* ---------- TABLE ---------- */
.tbl {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.tbl th {
  text-align: left;
  padding: 8px 12px;
  color: var(--muted);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .5px;
  border-bottom: 1px solid var(--line);
}
.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid rgba(38,48,74,.5);
  vertical-align: middle;
}
.tbl tr:last-child td { border-bottom: none; }
.tbl tr:hover td { background: rgba(255,255,255,.02); }

.code-chip {
  font-family: 'Consolas', monospace;
  background: var(--bg);
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 8px;
  font-size: 12px;
  letter-spacing: 1px;
  cursor: pointer;
}
.code-chip:hover { border-color: var(--pri); color: var(--pri); }

.tag-active   { color: var(--ok);  font-weight: 600; font-size: 12px; }
.tag-inactive { color: var(--muted); font-size: 12px; }
.tag-expired  { color: var(--danger); font-size: 12px; }

/* ---------- TOPBAR ---------- */
.topbar{
  display:flex;justify-content:space-between;align-items:center;
  padding:14px 24px;background:rgba(20,26,43,.85);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--line);position:sticky;top:0;z-index:10;
}
.topbar-brand{font-weight:700;letter-spacing:1px}
.topbar-brand span{color:var(--pri)}
.topbar-right{display:flex;align-items:center;gap:12px;color:var(--muted);font-size:13px}
.divider{opacity:.4}
.live-dot{width:9px;height:9px;border-radius:50%;background:var(--ok);
  box-shadow:0 0 0 0 rgba(46,204,113,.6);animation:pulse 1.6s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(46,204,113,.6)}70%{box-shadow:0 0 0 8px rgba(46,204,113,0)}100%{box-shadow:0 0 0 0 rgba(46,204,113,0)}}

/* ---------- LAYOUT ---------- */
.wrap{max-width:1240px;margin:0 auto;padding:24px}
.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:22px}
.stat{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.stat-label{color:var(--muted);font-size:12px;text-transform:uppercase;letter-spacing:1px}
.stat-val{font-size:34px;font-weight:800;margin-top:6px;color:var(--pri)}

.grid{display:grid;grid-template-columns:1fr 360px;gap:22px}
.col-main{display:flex;flex-direction:column;gap:18px}
.col-side{display:flex;flex-direction:column;gap:18px}
.card-2{display:grid;grid-template-columns:1fr 1fr;gap:18px}

/* ---------- CARD ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:18px}
.card h3{font-size:15px;margin-bottom:14px}
.card form{display:flex;flex-direction:column;gap:10px}
.row{display:flex;gap:10px}
.row label{flex:1;display:flex;flex-direction:column;gap:4px;color:var(--muted);font-size:12px}
.card label{color:var(--muted);font-size:12px;display:flex;flex-direction:column;gap:4px}

/* ---------- INPUT ---------- */
input,textarea,select{
  background:var(--bg2);border:1px solid var(--line);color:var(--txt);
  border-radius:9px;padding:10px 12px;font-size:14px;font-family:inherit;width:100%;
}
input:focus,textarea:focus,select:focus{outline:none;border-color:var(--pri)}
input[type=color]{padding:4px;height:40px}
input[type=range]{padding:0}
output{color:var(--pri);font-weight:700;text-align:center}
textarea{resize:vertical}

/* ---------- BUTTON ---------- */
.btn{border:none;border-radius:9px;padding:11px 16px;font-size:14px;font-weight:600;
  cursor:pointer;transition:.15s;color:#fff}
.btn-primary{background:var(--pri)}.btn-primary:hover{background:var(--pri2)}
.btn-warn{background:var(--warn);color:#181818}.btn-warn:hover{filter:brightness(1.1)}
.btn-danger{background:var(--danger)}.btn-danger:hover{filter:brightness(1.1)}
.btn-ghost{background:transparent;border:1px solid var(--line);color:var(--txt)}
.btn-ghost:hover{background:var(--card2)}
.btn-block{width:100%}
.btn-sm{padding:6px 12px;font-size:12px}

/* ---------- ALERT ---------- */
.alert{padding:12px 16px;border-radius:10px;margin-bottom:18px;font-size:14px}
.alert-ok{background:rgba(46,204,113,.12);border:1px solid var(--ok);color:#9ff0c1}
.alert-error{background:rgba(255,77,94,.12);border:1px solid var(--danger);color:#ffb3ba}

/* ---------- LIST / MONITOR ---------- */
.list{display:flex;flex-direction:column;gap:8px;max-height:320px;overflow-y:auto}
.li{display:flex;justify-content:space-between;align-items:center;
  background:var(--bg2);border:1px solid var(--line);border-radius:9px;padding:9px 12px}
.li b{font-size:13px}
.sub{color:var(--muted);font-size:11px;margin-top:2px}
.pill{background:var(--card2);border:1px solid var(--line);border-radius:20px;
  padding:3px 10px;font-size:12px;font-weight:700;color:var(--pri)}
.muted{color:var(--muted);font-size:13px;text-align:center;padding:12px}

.badge{font-size:11px;padding:3px 9px;border-radius:20px;font-weight:700}
.b-pending{background:rgba(245,166,35,.18);color:var(--warn)}
.b-deliver{background:rgba(124,92,255,.18);color:var(--accent)}
.b-ok{background:rgba(46,204,113,.18);color:var(--ok)}
.b-fail{background:rgba(255,77,94,.18);color:var(--danger)}
.b-exp{background:rgba(133,146,173,.18);color:var(--muted)}

.log{font-family:'Consolas',monospace;font-size:12px}
.logline{padding:5px 8px;border-radius:6px;border-left:3px solid var(--line)}
.logline i{color:var(--pri);font-style:normal}
.lvl-info{border-color:var(--pri)}
.lvl-warn{border-color:var(--warn)}
.lvl-error{border-color:var(--danger)}
.lvl-event{border-color:var(--accent)}

/* ---------- RESPONSIVE ---------- */
@media(max-width:980px){
  .grid{grid-template-columns:1fr}
  .stats{grid-template-columns:repeat(2,1fr)}
  .card-2{grid-template-columns:1fr}
}
@media(max-width:768px){
  .sidebar{display:none}
}