/* ═══════════════════════════════════════════════════════════
   AgentDesk — shared.css
   Used by: index.html (Agent Dashboard) + admin.html (Admin Panel)
   ═══════════════════════════════════════════════════════════ */

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'DM Sans',sans-serif;background:#0d0f14;color:#e2e8f0;font-size:14px;line-height:1.5}
button{font-family:inherit;cursor:pointer}
input,textarea,select{font-family:inherit}
::-webkit-scrollbar{width:4px;height:4px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:#2d3748;border-radius:2px}

:root{
  --bg-0:#0d0f14;--bg-1:#131720;--bg-2:#1a2030;--bg-3:#222a3a;--bg-4:#2a3347;
  --border:rgba(255,255,255,0.07);--border-hover:rgba(255,255,255,0.14);
  --text-primary:#e2e8f0;--text-secondary:#8892a4;--text-muted:#4a5568;
  --accent:#3b82f6;--accent-dim:rgba(59,130,246,0.15);--accent-border:rgba(59,130,246,0.4);
  --green:#10b981;--green-dim:rgba(16,185,129,0.12);
  --amber:#f59e0b;--amber-dim:rgba(245,158,11,0.12);
  --red:#ef4444;--red-dim:rgba(239,68,68,0.12);
  --purple:#8b5cf6;--purple-dim:rgba(139,92,246,0.12);
  --pink:#ec4899;--pink-dim:rgba(236,72,153,0.12);
  --teal:#14b8a6;--teal-dim:rgba(20,184,166,0.12);
  --sidebar-w:230px;--header-h:56px;
  --radius:8px;--radius-lg:12px;--shadow:0 4px 24px rgba(0,0,0,0.4);
  --brand-primary:#3b82f6;--brand-accent:#8b5cf6;
}

/* ── LOGIN ──────────────────────────────────────────────── */
#login-screen{position:fixed;inset:0;background:var(--bg-0);display:flex;align-items:center;justify-content:center;z-index:1000;}
.login-card{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:36px 40px;width:380px;box-shadow:var(--shadow);}
.login-logo{display:flex;align-items:center;gap:12px;margin-bottom:28px;}
.login-logo-mark{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));display:flex;align-items:center;justify-content:center;font-size:22px;flex-shrink:0;overflow:hidden;}
.login-logo-mark img{width:100%;height:100%;object-fit:cover;}
.login-logo-text{font-size:22px;font-weight:700;color:var(--text-primary);}
.login-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}
.login-input{width:100%;padding:10px 14px;background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;outline:none;transition:all .15s;margin-bottom:14px;}
.login-input:focus{border-color:var(--accent-border);background:var(--bg-4);}
.login-btn{width:100%;padding:11px;background:var(--accent);border:none;border-radius:var(--radius);color:white;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s;}
.login-btn:hover{background:#2563eb;}
.login-hint{font-size:11px;color:var(--text-muted);text-align:center;margin-top:14px;}
.login-err{color:var(--red);font-size:12px;margin-bottom:10px;display:none;}
.login-links{display:flex;justify-content:center;gap:16px;margin-top:14px;}
.login-links a{font-size:11px;color:var(--text-muted);text-decoration:none;}
.login-links a:hover{color:var(--accent);}

/* ── APP SHELL ──────────────────────────────────────────── */
#app{display:flex;flex-direction:column;height:100vh;}
.topbar{height:var(--header-h);background:var(--bg-1);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 20px;gap:16px;flex-shrink:0;z-index:10;}
.logo{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:600;color:var(--text-primary);text-decoration:none;}
.logo-mark{width:32px;height:32px;border-radius:9px;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));display:flex;align-items:center;justify-content:center;font-size:15px;overflow:hidden;flex-shrink:0;}
.logo-mark img{width:100%;height:100%;object-fit:cover;}
.topbar-divider{width:1px;height:20px;background:var(--border);}
.topbar-stats{display:flex;gap:20px;}
.tstat{display:flex;align-items:center;gap:7px;font-size:12px;color:var(--text-secondary);}
.tstat-num{font-size:18px;font-weight:600;color:var(--text-primary);font-family:'JetBrains Mono',monospace;}
.tstat-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.dot-green{background:var(--green);box-shadow:0 0 6px var(--green);}
.dot-amber{background:var(--amber);box-shadow:0 0 6px var(--amber);}
.dot-blue{background:var(--accent);box-shadow:0 0 6px var(--accent);}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px;}
.topbar-btn{padding:6px 14px;border-radius:var(--radius);background:var(--bg-3);border:1px solid var(--border);color:var(--text-secondary);font-size:12px;font-weight:500;transition:all .15s;text-decoration:none;display:inline-flex;align-items:center;gap:6px;}
.topbar-btn:hover{border-color:var(--border-hover);color:var(--text-primary);}
.topbar-btn.primary{background:var(--accent-dim);border-color:var(--accent-border);color:var(--accent);}
.topbar-btn.active{background:var(--green-dim);border-color:rgba(16,185,129,.3);color:var(--green);}
.avatar-btn{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,var(--brand-primary),var(--brand-accent));border:none;color:white;font-size:12px;font-weight:600;cursor:pointer;}
.main{display:flex;flex:1;overflow:hidden;}

/* ── SIDEBAR ────────────────────────────────────────────── */
.sidebar{width:var(--sidebar-w);background:var(--bg-1);border-right:1px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;}
.nav-group{padding:16px 12px 4px;}
.nav-label{font-size:10px;font-weight:600;color:var(--text-muted);letter-spacing:.08em;text-transform:uppercase;padding:0 6px 6px;}
.nav-item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);cursor:pointer;font-size:13px;font-weight:500;color:var(--text-secondary);transition:all .15s;margin-bottom:2px;text-decoration:none;}
.nav-item:hover{background:var(--bg-3);color:var(--text-primary);}
.nav-item.active{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);}
.nav-icon{font-size:15px;width:20px;text-align:center;flex-shrink:0;}
.nav-badge{margin-left:auto;padding:2px 7px;border-radius:20px;font-size:10px;font-weight:600;background:var(--accent-dim);color:var(--accent);}
.nav-badge.green{background:var(--green-dim);color:var(--green);}
.nav-badge.amber{background:var(--amber-dim);color:var(--amber);}
.nav-badge.red{background:var(--red-dim);color:var(--red);}
.sidebar-footer{margin-top:auto;padding:12px;border-top:1px solid var(--border);}
.agent-self{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:var(--radius);background:var(--bg-2);}
.agent-self-info{flex:1;}
.agent-self-name{font-size:13px;font-weight:500;color:var(--text-primary);}
.agent-self-role{font-size:11px;color:var(--text-secondary);}
.status-dot-wrap{position:relative;}
.agent-avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;flex-shrink:0;}
.online-ring{position:absolute;bottom:-1px;right:-1px;width:10px;height:10px;border-radius:50%;background:var(--green);border:2px solid var(--bg-2);}

/* ── PAGE PANELS ────────────────────────────────────────── */
.content-area{flex:1;display:flex;overflow:hidden;}
.page-panel{display:none;flex:1;flex-direction:column;overflow:hidden;}
.page-panel.active{display:flex;}

/* ── ADMIN PAGE LAYOUT ──────────────────────────────────── */
.admin-page{flex:1;overflow-y:auto;padding:24px;background:var(--bg-0);}
.admin-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px;flex-wrap:wrap;gap:12px;}
.admin-title{font-size:20px;font-weight:700;color:var(--text-primary);}
.admin-sub{font-size:13px;color:var(--text-secondary);margin-top:2px;}

/* ── BUTTONS ────────────────────────────────────────────── */
.btn{padding:8px 16px;border-radius:var(--radius);font-size:13px;font-weight:600;cursor:pointer;border:1px solid transparent;transition:all .15s;display:inline-flex;align-items:center;gap:6px;}
.btn-primary{background:var(--accent);border-color:var(--accent);color:white;}
.btn-primary:hover{background:#2563eb;}
.btn-secondary{background:var(--bg-3);border-color:var(--border);color:var(--text-secondary);}
.btn-secondary:hover{color:var(--text-primary);border-color:var(--border-hover);}
.btn-danger{background:var(--red-dim);border-color:rgba(239,68,68,.3);color:var(--red);}
.btn-danger:hover{background:var(--red);color:white;border-color:var(--red);}
.btn-green{background:var(--green-dim);border-color:rgba(16,185,129,.3);color:var(--green);}
.btn-green:hover{background:var(--green);color:white;}
.btn-amber{background:var(--amber-dim);border-color:rgba(245,158,11,.3);color:var(--amber);}
.btn-sm{padding:5px 10px;font-size:11px;}

/* ── CARDS ──────────────────────────────────────────────── */
.card{background:var(--bg-1);border:1px solid var(--border);border-radius:var(--radius-lg);padding:20px;margin-bottom:16px;}
.card-title{font-size:14px;font-weight:600;color:var(--text-primary);margin-bottom:16px;display:flex;align-items:center;gap:8px;}
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:16px;}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:16px;}
@media(max-width:900px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* ── FORMS ──────────────────────────────────────────────── */
.form-group{margin-bottom:14px;}
.form-label{font-size:12px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;display:block;}
.form-input{width:100%;padding:9px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;outline:none;transition:all .15s;}
.form-input:focus{border-color:var(--accent-border);background:var(--bg-3);}
.form-select{width:100%;padding:9px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;outline:none;appearance:auto;}
.form-select option{background:var(--bg-2);}
.form-textarea{width:100%;padding:9px 12px;background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius);color:var(--text-primary);font-size:13px;outline:none;resize:vertical;min-height:80px;}
.form-textarea:focus{border-color:var(--accent-border);}
.form-hint{font-size:11px;color:var(--text-muted);margin-top:4px;}

/* ── TABLES ─────────────────────────────────────────────── */
.table-wrap{overflow-x:auto;}
.table{width:100%;border-collapse:collapse;}
.table th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;color:var(--text-muted);letter-spacing:.05em;text-transform:uppercase;border-bottom:1px solid var(--border);background:var(--bg-2);white-space:nowrap;}
.table td{padding:12px 14px;font-size:13px;color:var(--text-secondary);border-bottom:1px solid var(--border);}
.table tr:hover td{background:rgba(255,255,255,.02);color:var(--text-primary);}
.table tr:last-child td{border-bottom:none;}

/* ── BADGES ─────────────────────────────────────────────── */
.badge{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;}
.badge-online{background:var(--green-dim);color:var(--green);}
.badge-offline{background:var(--bg-3);color:var(--text-muted);}
.badge-admin{background:var(--accent-dim);color:var(--accent);}
.badge-agent{background:var(--purple-dim);color:var(--purple);}
.badge-supervisor{background:var(--amber-dim);color:var(--amber);}
.badge-active{background:var(--green-dim);color:var(--green);}
.badge-inactive{background:var(--red-dim);color:var(--red);}

/* ── PILLS ──────────────────────────────────────────────── */
.pill{font-size:10px;font-weight:600;padding:3px 8px;border-radius:20px;display:inline-flex;align-items:center;gap:4px;}
.pill-bot{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(139,92,246,.2);}
.pill-waiting{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,158,11,.2);}
.pill-agent{background:var(--green-dim);color:var(--green);border:1px solid rgba(16,185,129,.2);}
.pill-resolved{background:rgba(107,114,128,.15);color:#9ca3af;border:1px solid rgba(107,114,128,.2);}
.pill-accent{background:var(--accent-dim);color:var(--accent);border:1px solid var(--accent-border);}

/* ── TOGGLES ────────────────────────────────────────────── */
.setting-row{display:flex;align-items:center;justify-content:space-between;padding:9px 0;border-bottom:1px solid var(--border);}
.setting-row:last-child{border-bottom:none;}
.setting-label{font-size:12px;color:var(--text-secondary);font-weight:500;}
.toggle{width:34px;height:18px;border-radius:9px;cursor:pointer;transition:background .2s;position:relative;flex-shrink:0;}
.toggle.on{background:var(--accent)}.toggle.off{background:var(--bg-4)}
.toggle-knob{width:14px;height:14px;border-radius:50%;background:white;position:absolute;top:2px;transition:left .2s;box-shadow:0 1px 3px rgba(0,0,0,.3);}
.toggle.on .toggle-knob{left:18px}.toggle.off .toggle-knob{left:2px}

/* ── MISC COMPONENTS ────────────────────────────────────── */
.webhook-url-box{background:var(--bg-3);border:1px solid var(--border);border-radius:var(--radius);padding:10px 14px;font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--teal);word-break:break-all;display:flex;align-items:center;justify-content:space-between;gap:8px;}
.copy-btn{padding:4px 10px;background:var(--bg-4);border:1px solid var(--border);border-radius:6px;color:var(--text-secondary);font-size:11px;cursor:pointer;white-space:nowrap;transition:all .15s;}
.copy-btn:hover{color:var(--text-primary);border-color:var(--border-hover);}
.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:48px 20px;color:var(--text-muted);text-align:center;}
.empty-state-icon{font-size:36px;margin-bottom:12px;opacity:.4;}
.empty-state-title{font-size:14px;font-weight:600;color:var(--text-secondary);margin-bottom:6px;}
.empty-state-sub{font-size:12px;line-height:1.6;max-width:280px;}
.info-box{background:var(--accent-dim);border:1px solid var(--accent-border);border-radius:var(--radius);padding:12px 16px;font-size:13px;color:var(--text-primary);margin-bottom:16px;}
.info-box.green{background:var(--green-dim);border-color:rgba(16,185,129,.2);}
.info-box.amber{background:var(--amber-dim);border-color:rgba(245,158,11,.2);}

/* ── MODAL ──────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:1000;backdrop-filter:blur(4px);}
.modal{background:var(--bg-2);border:1px solid var(--border);border-radius:var(--radius-lg);padding:24px;width:500px;box-shadow:var(--shadow);max-height:88vh;overflow-y:auto;}
.modal-title{font-size:16px;font-weight:600;color:var(--text-primary);margin-bottom:6px;}
.modal-sub{font-size:13px;color:var(--text-secondary);margin-bottom:20px;}
.modal-footer{display:flex;justify-content:flex-end;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.mbtn{padding:8px 16px;border-radius:var(--radius);font-size:12px;font-weight:600;cursor:pointer;border:1px solid var(--border);background:var(--bg-3);color:var(--text-secondary);transition:all .15s;}
.mbtn:hover{color:var(--text-primary);}
.mbtn.primary{background:var(--accent);border-color:var(--accent);color:white;}
.mbtn.primary:hover{background:#2563eb;}
.mbtn.danger{background:var(--red-dim);border-color:rgba(239,68,68,.3);color:var(--red);}

/* ── TOAST ──────────────────────────────────────────────── */
#toast-container{position:fixed;bottom:20px;right:20px;display:flex;flex-direction:column;gap:8px;z-index:9999;pointer-events:none;}
.toast{padding:10px 16px;border-radius:var(--radius);background:var(--bg-3);border:1px solid var(--border);color:var(--text-primary);font-size:12px;font-weight:500;display:flex;align-items:center;gap:8px;animation:toastIn .3s ease;box-shadow:var(--shadow);max-width:320px;}
.toast.success{border-color:rgba(16,185,129,.3);background:var(--green-dim);color:var(--green);}
.toast.warning{border-color:rgba(245,158,11,.3);background:var(--amber-dim);color:var(--amber);}
.toast.error{border-color:rgba(239,68,68,.3);background:var(--red-dim);color:var(--red);}
.toast.info{border-color:var(--accent-border);background:var(--accent-dim);color:var(--accent);}
@keyframes toastIn{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}

/* ── LOADING ────────────────────────────────────────────── */
.loading-spinner{display:inline-block;width:16px;height:16px;border:2px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;}
.loading-spinner.lg{width:28px;height:28px;border-width:3px;}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.pulsing{animation:pulse 2s infinite;}