/* ══════════════════════════════════════════════════════════
   RAVING CRM — SHARED BASE STYLESHEET v2
   Single source of truth for all prototype screens.
   See FRONTEND-STANDARDS.md for full documentation.
   ══════════════════════════════════════════════════════════ */

/* ── 1. DESIGN TOKENS ────────────────────────────────────── */
:root{
  /* Primary Brand */
  --brand:#E11D74;
  --brand-hover:#C4185F;
  --brand-bg:#FDF2F7;
  --brand-bg-hover:#FCE8F1;
  --brand-txt:#831847;

  /* Brand Spectrum */
  --brand-50:#FDF2F7;
  --brand-100:#FCE8F1;
  --brand-200:#FBCFE8;
  --brand-300:#F9A8D4;
  --brand-400:#F472B6;
  --brand-500:#EC4899;
  --brand-600:#E11D74;
  --brand-700:#BE185D;
  --brand-800:#9D174D;
  --brand-900:#831847;

  /* Neutrals */
  --bg:#F5F4F1;
  --bg2:#FFFFFF;
  --bg3:#EFEDE8;
  --bg4:#E8E6E0;
  --txt:#1A1917;
  --txt2:#5C5B57;
  --txt3:#9A9893;
  --brd:#E0DDD7;
  --brd2:#CCCAC3;

  /* Semantic */
  --green:#3B6D11;
  --green-bg:#EAF3DE;
  --green-txt:#173404;
  --blue:#185FA5;
  --blue-bg:#E6F1FB;
  --blue-txt:#0C447C;
  --amber:#D97706;
  --amber-bg:#FAEEDA;
  --amber-txt:#633806;
  --red:#A32D2D;
  --red-bg:#FCEBEB;
  --red-txt:#501313;
  --teal:#0F6E56;
  --teal-bg:#E1F5EE;
  --teal-txt:#085041;
  --purple:#534AB7;
  --purple-bg:#EEEDFE;
  --purple-txt:#26215C;

  /* Agent / AI */
  --agent:#2563EB;
  --agent-bg:#EFF6FF;
  --agent-txt:#1E40AF;

  /* Layout */
  --nav-w:200px;
  --nav-w-col:50px;
  --r-md:8px;
  --r-lg:12px;
  --shadow:0 1px 3px rgba(0,0,0,.06),0 4px 12px rgba(0,0,0,.04);
  --shadow-lg:0 4px 20px rgba(0,0,0,.10),0 1px 4px rgba(0,0,0,.05);
}

/* ── 2. RESETS & BASE ────────────────────────────────────── */
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;overflow:hidden}
body{font-family:'Syne',sans-serif;background:var(--bg);color:var(--txt);font-size:13px;line-height:1.5;display:flex}
.mono{font-family:'JetBrains Mono',monospace}
button,select,input,textarea{font-family:'Syne',sans-serif;color:var(--txt)}
input,select,textarea{background:var(--bg2);border:0.5px solid var(--brd2);border-radius:var(--r-md);padding:6px 10px;font-size:12px;color:var(--txt);outline:none;transition:border-color .15s}
input:focus,textarea:focus,select:focus{border-color:var(--brand)}
input[type=checkbox]{width:14px;height:14px;accent-color:var(--brand);cursor:pointer}

/* A11y: focus-visible */
:focus-visible{outline:2px solid var(--brand);outline-offset:2px}

/* Screen-reader only */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Scrollbar */
::-webkit-scrollbar{width:5px;height:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--brd2);border-radius:10px}
::-webkit-scrollbar-thumb:hover{background:var(--txt3)}

/* ── 3. SIDEBAR ──────────────────────────────────────────── */
.sidebar{width:var(--nav-w);flex-shrink:0;background:var(--bg2);border-right:0.5px solid var(--brd);display:flex;flex-direction:column;height:100vh;transition:width .2s ease;position:relative}
.sidebar.collapsed{width:var(--nav-w-col)}
.nav-logo{display:flex;align-items:center;justify-content:space-between;padding:14px 14px 13px;border-bottom:0.5px solid var(--brd);min-height:52px}
.sidebar.collapsed .nav-logo{padding:14px 10px 13px;justify-content:center}
.logo-text{font-size:17px;font-weight:600;letter-spacing:-.3px;white-space:nowrap;overflow:hidden}
.sidebar.collapsed .logo-text{display:none}
.logo-raving{color:var(--txt)}
.logo-crm{color:var(--brand)}
.logo-icon{display:none;width:24px;height:24px;background:var(--brand);color:#fff;border-radius:6px;align-items:center;justify-content:center;font-size:11px;font-weight:700}
.sidebar.collapsed .logo-icon{display:flex}
.collapse-btn{width:24px;height:24px;border:none;background:transparent;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt3);transition:all .12s;flex-shrink:0}
.collapse-btn:hover{background:var(--bg3);color:var(--txt)}
.collapse-btn svg{transition:transform .2s ease}
.sidebar.collapsed .collapse-btn{position:absolute;right:-12px;top:14px;background:var(--bg2);border:0.5px solid var(--brd);box-shadow:var(--shadow)}
.nav-items{flex:1;padding:8px 7px;overflow-y:auto;display:flex;flex-direction:column;gap:1px}
.sidebar.collapsed .nav-items{padding:8px 5px}
.nav-divider{height:0.5px;background:var(--brd);margin:5px 3px}
.nav-item{display:flex;align-items:center;gap:9px;padding:8px 10px;border-radius:var(--r-md);cursor:pointer;border:none;background:transparent;width:100%;text-align:left;transition:background .12s,color .12s;color:var(--txt2);font-size:12px;font-weight:500;position:relative;text-decoration:none}
.sidebar.collapsed .nav-item{justify-content:center;padding:10px}
.nav-item:hover{background:var(--bg3);color:var(--txt)}
.nav-item.act{background:var(--brand-bg);color:var(--brand-txt)}
.nav-item.act svg{color:var(--brand)}
.nav-item svg{flex-shrink:0;width:16px;height:16px}
.nav-item span{white-space:nowrap;overflow:hidden}
.sidebar.collapsed .nav-item span{display:none}
.nav-badge{background:var(--brand);color:#fff;font-size:9px;font-family:'JetBrains Mono',monospace;padding:2px 6px;border-radius:100px;flex-shrink:0}
.sidebar.collapsed .nav-badge{position:absolute;top:4px;right:4px;padding:1px 4px;font-size:8px;min-width:14px;text-align:center}
.nav-bottom{padding:7px;border-top:0.5px solid var(--brd)}
.sidebar.collapsed .nav-bottom{padding:7px 5px}
.user-row{display:flex;align-items:center;gap:8px;padding:6px 8px;border-radius:var(--r-md);cursor:pointer;transition:background .12s}
.sidebar.collapsed .user-row{justify-content:center;padding:6px}
.user-row:hover{background:var(--bg3)}
.user-av{width:28px;height:28px;border-radius:50%;background:var(--brand-bg);display:flex;align-items:center;justify-content:center;font-size:9px;font-weight:700;color:var(--brand-txt);flex-shrink:0}
.user-info{overflow:hidden}
.sidebar.collapsed .user-info{display:none}
.user-name{font-size:12px;font-weight:500;color:var(--txt)}
.user-role{font-size:9px;color:var(--txt3)}

/* Sidebar tooltips (collapsed) */
.sidebar.collapsed .nav-item::after{content:attr(data-tooltip);position:absolute;left:100%;top:50%;transform:translateY(-50%);margin-left:8px;padding:6px 10px;background:var(--txt);color:var(--bg2);font-size:11px;font-weight:500;border-radius:var(--r-md);white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s;z-index:100}
.sidebar.collapsed .nav-item:hover::after{opacity:1}

/* ── 4. MAIN LAYOUT ──────────────────────────────────────── */
.main{flex:1;min-width:0;display:flex;height:100vh;overflow:hidden;flex-direction:column}

/* Page header (shared across most screens) */
.page-header{display:flex;align-items:center;justify-content:space-between;padding:12px 20px;background:var(--bg2);border-bottom:0.5px solid var(--brd);min-height:52px;flex-shrink:0}
.page-header-left{display:flex;align-items:center;gap:10px}
.page-header-right{display:flex;align-items:center;gap:8px}
.page-title{font-size:14px;font-weight:600;color:var(--txt);display:flex;align-items:center;gap:8px}
.page-title svg{color:var(--brand)}

/* ── 5. SHARED COMPONENTS ────────────────────────────────── */

/* Buttons: Primary */
.btn-primary{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-md);border:none;background:var(--brand);color:#fff;font-size:11px;font-weight:500;cursor:pointer;transition:background .15s}
.btn-primary:hover{background:var(--brand-hover)}

/* Buttons: Ghost */
.btn-ghost{display:inline-flex;align-items:center;gap:6px;padding:7px 14px;border-radius:var(--r-md);border:0.5px solid var(--brd2);background:transparent;color:var(--txt);font-size:11px;font-weight:500;cursor:pointer;transition:background .12s}
.btn-ghost:hover{background:var(--bg3)}

/* Buttons: Header (used in page headers and section actions) */
.header-btn{display:inline-flex;align-items:center;gap:6px;padding:7px 12px;border-radius:var(--r-md);border:0.5px solid var(--brd2);background:var(--bg2);color:var(--txt2);font-size:11px;font-weight:500;cursor:pointer;transition:all .12s}
.header-btn:hover{background:var(--bg3);color:var(--txt)}
.header-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.header-btn svg{width:14px;height:14px}
.header-btn.primary:hover{background:var(--brand-hover)}

/* Buttons: Icon */
.icon-btn{width:30px;height:30px;border:0.5px solid var(--brd);background:var(--bg2);border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt3);transition:all .12s}
.icon-btn:hover{background:var(--bg3);color:var(--txt)}
.icon-btn.act{background:var(--brand-bg);color:var(--brand-txt);border-color:var(--brand-200)}
.icon-btn svg{width:14px;height:14px}

/* Disabled state */
.disabled-btn{opacity:.5;cursor:not-allowed !important;pointer-events:none}

/* Count badge (used next to page titles) */
.count-badge{background:var(--bg3);border:0.5px solid var(--brd);color:var(--txt2);font-size:10px;font-family:'JetBrains Mono',monospace;padding:2px 8px;border-radius:100px}

/* Tags */
.tag{font-size:8px;padding:1.5px 5px;border-radius:3px;font-weight:500;display:inline-flex;align-items:center;gap:3px}
.tag.deal{background:var(--teal-bg);color:var(--teal-txt)}
.tag.new{background:var(--purple-bg);color:var(--purple-txt)}
.tag.escalated{background:var(--red-bg);color:var(--red-txt)}
.tag.assigned{background:var(--blue-bg);color:var(--blue-txt)}
.tag.student{background:var(--green-bg);color:var(--green-txt)}
.tag.agent-type{background:var(--agent-bg);color:var(--agent-txt)}

/* Status badges */
.status-badge{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px}
.status-badge.connected{background:var(--green-bg);color:var(--green-txt)}
.status-badge.disconnected{background:var(--bg3);color:var(--txt3)}
.coming-soon-badge{font-size:9px;font-weight:600;padding:2px 7px;border-radius:4px;background:var(--bg3);color:var(--txt3)}

/* Avatars */
.avatar{width:36px;height:36px;border-radius:50%;background:var(--bg3);display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:600;color:var(--txt2);flex-shrink:0}
.avatar-sm{width:28px;height:28px;font-size:9px;font-weight:700}
.avatar.whatsapp{background:#DCF8C6;color:#075E54}
.avatar.agent{background:var(--agent-bg);color:var(--agent-txt)}
.avatar img{width:100%;height:100%;border-radius:50%;object-fit:cover}

/* Toggle switch */
.toggle{position:relative;width:34px;height:18px;display:inline-block;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0;position:absolute}
.toggle-track{position:absolute;inset:0;background:var(--brd2);border-radius:100px;cursor:pointer;transition:background .2s}
.toggle input:checked+.toggle-track{background:var(--brand)}
.toggle-thumb{position:absolute;top:2px;left:2px;width:14px;height:14px;background:#fff;border-radius:50%;transition:transform .2s;box-shadow:0 1px 2px rgba(0,0,0,.15)}
.toggle input:checked~.toggle-thumb{transform:translateX(16px)}

/* Forms */
.form-group{margin-bottom:14px}
.form-label{display:block;font-size:10px;font-weight:600;color:var(--txt2);text-transform:uppercase;letter-spacing:.4px;margin-bottom:5px}
.form-input,.form-select{width:100%;padding:8px 12px;font-size:12px}
.form-select{appearance:auto}
.form-row{display:flex;gap:12px}
.form-row .form-group{flex:1}
.form-check{display:flex;align-items:center;gap:8px;margin:10px 0 14px;cursor:pointer}
.form-check label{font-size:12px;color:var(--txt2);cursor:pointer}

/* Filter pills */
.filter-pills{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:16px}
.filter-pill{padding:5px 10px;border-radius:100px;font-size:10px;font-weight:500;border:0.5px solid var(--brd);background:var(--bg2);color:var(--txt2);cursor:pointer;transition:all .12s;white-space:nowrap}
.filter-pill:hover{background:var(--bg3);color:var(--txt)}
.filter-pill.act{background:var(--brand-bg);color:var(--brand-txt);border-color:var(--brand-200)}

/* ── 6. MODALS ───────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.25);z-index:200;opacity:0;pointer-events:none;transition:opacity .25s;display:flex;align-items:center;justify-content:center}
.modal-overlay.open{opacity:1;pointer-events:auto}
.modal{background:var(--bg2);border-radius:var(--r-lg);box-shadow:var(--shadow-lg);width:420px;max-width:90vw;max-height:85vh;overflow-y:auto;transform:translateY(12px);transition:transform .25s;scrollbar-width:thin}
.modal-overlay.open .modal{transform:translateY(0)}
.modal-header{padding:16px 18px;border-bottom:0.5px solid var(--brd);display:flex;align-items:center;justify-content:space-between}
.modal-title{font-size:14px;font-weight:600;color:var(--txt)}
.modal-close{width:28px;height:28px;border:none;background:transparent;border-radius:var(--r-md);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--txt3);transition:all .12s}
.modal-close:hover{background:var(--bg3);color:var(--txt)}
.modal-close svg{width:12px;height:12px}
.modal-body{padding:18px}
.modal-footer{padding:12px 18px;border-top:0.5px solid var(--brd);display:flex;justify-content:flex-end;gap:8px}
.modal-btn{padding:8px 16px;border-radius:var(--r-md);font-size:11px;font-weight:500;cursor:pointer;border:0.5px solid;transition:all .12s}
.modal-btn.primary{background:var(--brand);color:#fff;border-color:var(--brand)}
.modal-btn.primary:hover{background:var(--brand-hover)}
.modal-btn.ghost{background:transparent;color:var(--txt);border-color:var(--brd2)}
.modal-btn.ghost:hover{background:var(--bg3)}

/* ── 7. DRAWERS ──────────────────────────────────────────── */
.drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.3);z-index:900;opacity:0;pointer-events:none;transition:opacity .25s}
.drawer-overlay.open{opacity:1;pointer-events:auto}
.drawer{position:fixed;top:0;right:-420px;width:420px;height:100vh;background:var(--bg2);box-shadow:var(--shadow-lg);z-index:901;display:flex;flex-direction:column;transition:right .25s ease}
.drawer-overlay.open+.drawer,.drawer.open{right:0}
.drawer-header{padding:16px;border-bottom:0.5px solid var(--brd);display:flex;align-items:center;justify-content:space-between}
.drawer-body{flex:1;overflow-y:auto;padding:16px;scrollbar-width:thin}
.drawer-footer{padding:12px 16px;border-top:0.5px solid var(--brd);display:flex;justify-content:flex-end;gap:8px}

/* ── 8. TOAST / NOTIFICATION ─────────────────────────────── */
.notif{position:fixed;bottom:20px;left:50%;transform:translateX(-50%) translateY(20px);background:var(--txt);color:var(--bg2);padding:10px 16px;border-radius:var(--r-lg);font-size:12px;font-weight:500;opacity:0;transition:all .25s;z-index:300;pointer-events:none;white-space:nowrap}
.notif.show{opacity:1;transform:translateX(-50%) translateY(0)}