/* Modern VICIdial admin — design system (matches the agent dialer skin) */
*{ box-sizing:border-box; margin:0; padding:0; }
:root{
  --accent:#15a06b; --accent-d:#0f7a50; --accent-bg:#e7f6ef; --accent-bd:#c7ecd9; --accent-sh:rgba(21,160,107,.28);
  --ink:#1a1d23; --mut:#8a909c; --line:#e7eaef; --bg:#eef0f3; --card:#fff;
  --red:#e5484d; --red-bg:#fdecec; --red-bd:#f6d4d5; --amber:#b5740a; --amber-bg:#fdf3e0;
}
html,body{ height:100%; }
body{ font-family:Manrope, system-ui, sans-serif; background:var(--bg); color:var(--ink); -webkit-font-smoothing:antialiased; }
a{ color:inherit; text-decoration:none; }

.layout{ display:flex; min-height:100dvh; }

/* ---- sidebar ---- */
.sidebar{ width:248px; flex-shrink:0; background:#fff; border-right:1px solid var(--line); padding:16px 12px; position:sticky; top:0; height:100dvh; overflow-y:auto; }
.brand{ display:flex; align-items:center; gap:11px; padding:6px 8px 18px; }
.brand .logo{ width:38px; height:38px; border-radius:11px; background:#157f4f; color:#fff; display:flex; align-items:center; justify-content:center; }
.brand b{ font-size:15px; font-weight:800; display:block; letter-spacing:-.2px; }
.brand small{ font-size:11px; color:var(--mut); font-weight:700; }
.nav-section{ font-size:10.5px; font-weight:800; letter-spacing:.5px; color:#aab0bb; text-transform:uppercase; padding:14px 10px 6px; }
.nav-link{ display:flex; align-items:center; gap:10px; padding:9px 11px; border-radius:11px; color:#4b515e; font-weight:700; font-size:13.5px; margin-bottom:2px; }
.nav-link svg{ color:#9aa0ac; flex-shrink:0; }
.nav-link:hover{ background:#f6f7f9; }
.nav-link.on{ background:var(--accent-bg); color:var(--accent-d); }
.nav-link.on svg{ color:var(--accent); }
.nav-link span{ flex:1; }
.badge-classic{ font-size:9px; font-weight:800; letter-spacing:.3px; text-transform:uppercase; color:#aab0bb; background:#f1f3f6; border:1px solid var(--line); padding:1px 6px; border-radius:6px; font-style:normal; }

/* ---- main ---- */
.main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.topbar{ position:sticky; top:0; z-index:20; display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:14px 26px; background:rgba(255,255,255,.86); backdrop-filter:saturate(180%) blur(14px); border-bottom:1px solid var(--line); }
.topbar h1{ font-size:19px; font-weight:800; letter-spacing:-.3px; }
.topbar-right{ display:flex; align-items:center; gap:14px; }
.who{ display:flex; align-items:center; gap:9px; }
.avatar{ width:34px; height:34px; border-radius:50%; background:#dfe3ea; color:#4b515e; display:flex; align-items:center; justify-content:center; font-weight:800; font-size:13px; }
.who-meta b{ font-size:13px; font-weight:800; display:block; line-height:1.1; }
.who-meta small{ font-size:11px; color:var(--mut); font-weight:700; }
.content{ padding:24px 26px 60px; max-width:1280px; width:100%; }

/* ---- cards / grid ---- */
.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(190px,1fr)); gap:16px; margin-bottom:24px; }
.card{ background:var(--card); border:1px solid var(--line); border-radius:18px; padding:18px; box-shadow:0 1px 2px rgba(20,23,30,.03); }
.stat .label{ font-size:11px; font-weight:800; letter-spacing:.3px; color:var(--mut); text-transform:uppercase; }
.stat .value{ font-size:30px; font-weight:800; letter-spacing:-.6px; margin-top:6px; font-variant-numeric:tabular-nums; }
.stat .value.accent{ color:var(--accent); }
.stat .sub{ font-size:12px; color:var(--mut); font-weight:600; margin-top:3px; }
.stat-ico{ float:right; width:38px; height:38px; border-radius:11px; background:var(--accent-bg); color:var(--accent); display:flex; align-items:center; justify-content:center; }

.panel{ background:var(--card); border:1px solid var(--line); border-radius:18px; box-shadow:0 1px 2px rgba(20,23,30,.03); overflow:hidden; margin-bottom:20px; }
.panel-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:15px 18px; border-bottom:1px solid var(--line); }
.panel-head h2{ font-size:15px; font-weight:800; }
.panel-head .sub{ font-size:12px; color:var(--mut); font-weight:600; }
.panel-body{ padding:18px; }

/* ---- tables ---- */
table.grid{ width:100%; border-collapse:collapse; font-size:13.5px; }
table.grid th{ text-align:left; font-size:10.5px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#aab0bb; padding:10px 14px; border-bottom:1px solid var(--line); }
table.grid td{ padding:12px 14px; border-bottom:1px solid #f1f3f6; vertical-align:middle; }
table.grid tr:last-child td{ border-bottom:none; }
table.grid tr:hover td{ background:#fafbfc; }
table.grid td .strong{ font-weight:800; }
.muted{ color:var(--mut); }
.empty{ padding:40px; text-align:center; color:var(--mut); font-weight:600; }

/* ---- pills ---- */
.pill{ display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:800; padding:3px 9px; border-radius:8px; border:1px solid; }
.pill.green{ background:var(--accent-bg); border-color:var(--accent-bd); color:var(--accent-d); }
.pill.gray{ background:#f1f3f6; border-color:var(--line); color:#4b515e; }
.pill.red{ background:var(--red-bg); border-color:var(--red-bd); color:#c93a3f; }
.pill.amber{ background:var(--amber-bg); border-color:#f0dcae; color:var(--amber); }

/* ---- buttons ---- */
.btn{ display:inline-flex; align-items:center; gap:7px; padding:10px 16px; border:none; border-radius:12px; font-family:inherit; font-weight:800; font-size:13.5px; cursor:pointer; }
.btn.primary{ background:var(--accent); color:#fff; box-shadow:0 6px 16px var(--accent-sh); }
.btn.primary:hover{ background:var(--accent-d); }
.btn.ghost{ background:#fff; border:1px solid #e3e6ec; color:#4b515e; }
.btn.ghost:hover{ border-color:#cfd4db; }
.btn.danger{ background:var(--red-bg); border:1px solid var(--red-bd); color:#c93a3f; }
.btn.danger:hover{ background:#fbdcdc; }
.btn.sm{ padding:6px 11px; font-size:12px; border-radius:9px; }
.ghost-btn{ font-size:12.5px; font-weight:700; color:#6b7280; padding:7px 12px; border-radius:10px; border:1px solid #e3e6ec; background:#fff; }
.ghost-btn:hover{ color:var(--accent-d); border-color:var(--accent-bd); }
.row-actions{ display:flex; gap:8px; justify-content:flex-end; }

/* ---- forms ---- */
.form-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:16px 20px; }
.form-grid .full{ grid-column:1 / -1; }
.field label{ display:block; font-size:11px; font-weight:800; letter-spacing:.3px; color:#9aa0ac; text-transform:uppercase; margin-bottom:5px; }
.field input, .field select, .field textarea{ width:100%; padding:11px 12px; border-radius:11px; border:1px solid #e3e6ec; background:#f8f9fb;
  font-family:inherit; font-size:14px; font-weight:600; color:var(--ink); outline:none; }
.field input:focus, .field select:focus, .field textarea:focus{ border-color:var(--accent); background:#fff; box-shadow:0 0 0 3px var(--accent-bg); }
.field textarea{ min-height:90px; resize:vertical; }
.field .hint{ font-size:11.5px; color:#aab0bb; font-weight:600; margin-top:4px; }
.field.check{ display:flex; align-items:center; gap:9px; background:#f8f9fb; border:1px solid #e3e6ec; border-radius:11px; padding:11px 13px; }
.field.check input{ width:auto; }
.field.check label{ margin:0; text-transform:none; font-size:13px; color:var(--ink); font-weight:700; letter-spacing:0; }
.form-actions{ display:flex; gap:10px; margin-top:22px; padding-top:18px; border-top:1px solid var(--line); }
.section-title{ font-size:11px; font-weight:800; letter-spacing:.4px; text-transform:uppercase; color:#9aa0ac; grid-column:1/-1; margin-top:6px; }

/* ---- flash / toolbar ---- */
.flash{ padding:12px 15px; border-radius:12px; font-size:13.5px; font-weight:700; margin-bottom:18px; }
.flash.ok{ background:var(--accent-bg); border:1px solid var(--accent-bd); color:var(--accent-d); }
.flash.err{ background:var(--red-bg); border:1px solid var(--red-bd); color:#c93a3f; }
.toolbar{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:18px; }
.toolbar .search{ display:flex; gap:8px; }
.toolbar .search input{ padding:10px 13px; border-radius:11px; border:1px solid #e3e6ec; background:#fff; font-family:inherit; font-size:13.5px; min-width:240px; outline:none; }
.toolbar .search input:focus{ border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-bg); }
.breadcrumb{ font-size:12.5px; color:var(--mut); font-weight:700; margin-bottom:14px; }
.breadcrumb a:hover{ color:var(--accent-d); }

/* ---- classic embed ---- */
.classic-frame{ width:100%; height:calc(100dvh - 150px); border:1px solid var(--line); border-radius:14px; background:#fff; }

@media (max-width:900px){ .sidebar{ display:none; } .form-grid{ grid-template-columns:1fr; } }