/* ============================================================
   base.css — shared design tokens, reset, animations,
               topbar, drawer, avatar menu, dark-mode toggle
   ============================================================ */

/* ── DESIGN TOKENS ── */
:root{
  --brand:oklch(0.546 0.245 262.881);--brand-d:oklch(0.44 0.245 262.881);
  --brand-lt:oklch(0.96 0.04 262.881);--brand-glow:oklch(0.546 0.245 262.881/.22);
  --bg:#f1f5f9;--surface:#fff;--border:#e2e8f0;--hover-bg:#f8fafc;
  --txt-1:#0f172a;--txt-2:#475569;--txt-3:#94a3b8;
  --c-green:#059669;--c-green-bg:#ecfdf5;--c-green-b:#6ee7b7;
  --c-amber:#d97706;--c-amber-bg:#fffbeb;--c-amber-b:#fcd34d;
  --c-red:#dc2626;--c-red-bg:#fef2f2;--c-red-b:#fca5a5;
  --c-blue:#3b82f6;--c-blue-bg:#eff6ff;--c-blue-b:#93c5fd;
  --c-purple:#7c3aed;--c-purple-bg:#f5f3ff;--c-purple-b:#c4b5fd;
  --c-slate:#64748b;--c-slate-bg:#f1f5f9;
  --c-whatsapp:#25D366;--c-whatsapp-bg:#f0fdf4;--c-whatsapp-b:#86efac;
  --c-teams:#6264A7;--c-teams-bg:#f5f3ff;--c-teams-b:#c4b5fd;
  --r-sm:5px;--r-md:8px;--r-lg:12px;--r-xl:16px;--r-full:999px;
  --sh-xs:0 1px 3px rgb(0 0 0/.06);--sh-sm:0 2px 8px rgb(0 0 0/.08);--sh-md:0 4px 16px rgb(0 0 0/.09);
  --glow:drop-shadow(0 0 6px var(--brand-glow));
  --font:ui-sans-serif,system-ui,sans-serif;--ease:cubic-bezier(.4,0,.2,1);
}
[data-theme="dark"]{
  --brand-lt:oklch(0.22 0.06 262);--brand-glow:oklch(0.546 0.245 262.881/.35);
  --bg:#0f172a;--surface:#1e293b;--border:#334155;--hover-bg:#263044;
  --txt-1:#f1f5f9;--txt-2:#94a3b8;--txt-3:#64748b;
  --c-slate-bg:#1e293b;
  --c-green-bg:#052e16;--c-green-b:#166534;
  --c-amber-bg:#1c1000;--c-amber-b:#92400e;
  --c-red-bg:#1c0505;--c-red-b:#991b1b;
  --c-blue-bg:#0f1e3d;--c-blue-b:#1e3a6e;
  --c-purple-bg:#150d2e;--c-purple-b:#3b1d8e;
  --c-whatsapp-bg:#052e16;--c-whatsapp-b:#166534;
  --c-teams-bg:#150d2e;--c-teams-b:#3b1d8e;
  --sh-xs:0 1px 3px rgb(0 0 0/.3);--sh-md:0 4px 16px rgb(0 0 0/.4);
}
[data-theme="dark"] body{color-scheme:dark}

/* ── RESET ── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
/* overflow-x:hidden on <html> (not body) prevents body becoming the scroll container,
   keeping window.scrollY / window.scrollTo() working correctly everywhere */
html{overflow-x:hidden}
body{font-family:var(--font);font-size:13px;color:var(--txt-1);background:var(--bg);-webkit-font-smoothing:antialiased;min-height:100vh}

/* ── KEYFRAMES ── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes shimmer{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes popIn{0%{transform:scale(.8);opacity:0}70%{transform:scale(1.06)}100%{transform:scale(1);opacity:1}}
@keyframes dropIn{from{opacity:0;transform:translateY(-5px)}to{opacity:1;transform:translateY(0)}}
@keyframes countUp{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse-soft{0%,100%{opacity:1}50%{opacity:.6}}

/* ── TOPBAR ── */
.topbar{position:sticky;top:0;z-index:200;background:var(--surface);border-bottom:1.5px solid var(--border);height:56px;box-shadow:var(--sh-xs)}
/* Inner content aligned to the same 1200 px grid as .main */
.topbar-inner{max-width:1200px;margin:0 auto;height:100%;display:flex;align-items:center;padding:0 28px;gap:2px;width:100%}
.topbar-brand{font-size:15px;font-weight:700;color:var(--brand);text-decoration:none;display:flex;align-items:center;gap:6px;margin-right:10px;flex-shrink:0}
.brand-logo{height:28px;width:auto;display:block;object-fit:contain}
.brand-logo.logo-dark{display:none}
[data-theme="dark"] .brand-logo.logo-light{display:none}
[data-theme="dark"] .brand-logo.logo-dark{display:block}
/* Text fallback when no logo image is configured — the .logo-light/.logo-dark toggle rules above already apply (same classes), no img, no broken-image icon. */
.brand-logo-text{height:auto;font-size:15px;font-weight:700;color:var(--brand);white-space:nowrap}
.topbar-brand .brand-wordmark{display:none}
.admin-badge{display:inline-flex;align-items:center;gap:5px;margin-left:8px;padding:2px 9px;border-radius:var(--r-full);font-size:10px;font-weight:700;letter-spacing:.4px;text-transform:uppercase;background:var(--brand-lt);color:var(--brand)}
.topbar-nav{display:flex;align-items:center;gap:1px;flex:1}
.topbar-nav a{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-md);font-size:13px;font-weight:500;color:var(--txt-2);text-decoration:none;transition:background .12s,color .12s;white-space:nowrap}
.topbar-nav a i{font-size:13px;width:14px;text-align:center}
.topbar-nav a:hover,.topbar-nav a.active{background:var(--brand-lt);color:var(--brand)}
.topbar-nav a:hover i,.topbar-nav a.active i{color:var(--brand);filter:var(--glow)}
.topbar-nav a.active{font-weight:600}
.topbar-settings{display:flex;align-items:center;gap:6px;padding:5px 11px;border-radius:var(--r-md);font-size:13px;font-weight:500;color:var(--txt-2);text-decoration:none;white-space:nowrap;transition:background .12s,color .12s}
.topbar-settings:hover,.topbar-settings.active{background:var(--brand-lt);color:var(--brand)}
.topbar-settings.active{font-weight:600}
.topbar-settings i{font-size:13px}
.topbar-spacer{flex:1}
.topbar-ham{display:none;background:none;border:none;cursor:pointer;padding:5px 7px;border-radius:var(--r-sm);color:var(--txt-2);font-size:17px}
.topbar-ham:hover{background:var(--brand-lt);color:var(--brand)}
/* Mobile-only logout in topbar — hidden on desktop, shown when .topbar-nav is hidden */
.topbar-mob-logout{display:none;align-items:center;justify-content:center;width:32px;height:32px;border-radius:var(--r-sm);color:var(--c-red);text-decoration:none;font-size:16px;transition:background .12s;flex-shrink:0;margin-left:auto}
.topbar-mob-logout:hover{background:var(--c-red-bg)}

/* ── AVATAR MENU ── */
.av-wrap{position:relative;margin-left:4px;flex-shrink:0}
.topbar-avatar{width:30px;height:30px;border-radius:50%;background:var(--brand);color:#fff;font-size:11px;font-weight:700;display:grid;place-items:center;cursor:pointer;border:2px solid var(--brand-lt);filter:var(--glow);user-select:none;transition:transform .15s}
.topbar-avatar:hover{transform:scale(1.08)}
.av-menu{display:none;position:absolute;top:calc(100% + 7px);right:0;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-lg);box-shadow:var(--sh-md);min-width:200px;z-index:300;overflow:hidden;animation:dropIn .13s var(--ease)}
.av-menu.open{display:block}
.av-menu-header{padding:12px 14px 9px;border-bottom:1.5px solid var(--border)}
.av-menu-name{font-size:12.5px;font-weight:600;color:var(--txt-1)}
.av-menu-email{font-size:10.5px;color:var(--txt-3);margin-top:2px;word-break:break-all}
.av-menu a{display:flex;align-items:center;gap:9px;padding:9px 14px;font-size:13px;font-weight:500;color:var(--txt-2);text-decoration:none;transition:background .1s,color .1s}
.av-menu a i{font-size:13px;width:14px;text-align:center;color:var(--txt-3)}
.av-menu a:hover{background:var(--hover-bg);color:var(--brand)}
.av-menu a:hover i{color:var(--brand);filter:var(--glow)}
.av-menu-div{height:1px;background:var(--border);margin:3px 0}
.av-menu a.av-danger{color:var(--c-red)}.av-menu a.av-danger i{color:var(--c-red)}
.av-menu a.av-danger:hover{background:var(--c-red-bg)}

/* ── DARK MODE TOGGLE (inside avatar menu / drawer) ── */
.dm-toggle-row{display:flex;align-items:center;justify-content:space-between;padding:9px 14px}
.dm-toggle-label{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:var(--txt-2)}
.dm-toggle-label i{font-size:13px;width:14px;color:var(--txt-3)}
.dm-switch{position:relative;width:32px;height:18px;flex-shrink:0}
.dm-switch input{opacity:0;width:0;height:0;position:absolute}
.dm-slider{position:absolute;inset:0;background:var(--border);border-radius:var(--r-full);cursor:pointer;transition:background .2s}
.dm-slider::before{content:'';position:absolute;width:12px;height:12px;left:3px;top:3px;background:#fff;border-radius:50%;transition:transform .2s}
.dm-switch input:checked+.dm-slider{background:var(--brand)}
.dm-switch input:checked+.dm-slider::before{transform:translateX(14px)}

/* ── MOBILE OVERLAY + DRAWER ── */
.overlay{display:none;position:fixed;inset:0;z-index:400;background:rgb(0 0 0/.42);opacity:0;transition:opacity .25s var(--ease);backdrop-filter:blur(2px)}
.overlay.open{display:block}.overlay.visible{opacity:1}
.drawer{position:fixed;top:0;left:0;width:270px;max-width:88vw;height:100dvh;z-index:500;background:var(--surface);border-right:1.5px solid var(--border);overflow-y:auto;padding-bottom:env(safe-area-inset-bottom,20px);transform:translateX(-100%);transition:transform .27s var(--ease);box-shadow:4px 0 24px rgb(0 0 0/.12)}
.drawer.open{transform:translateX(0)}
.drawer-top{display:flex;align-items:center;justify-content:space-between;padding:14px;border-bottom:1.5px solid var(--border);position:sticky;top:0;background:var(--surface);z-index:1}
.drawer-close{background:none;border:none;cursor:pointer;padding:5px;border-radius:var(--r-sm);color:var(--txt-2);font-size:15px}
.drawer-close:hover{background:var(--brand-lt);color:var(--brand)}
.drawer-body{padding:14px 12px}
.drawer-user{display:flex;align-items:center;gap:9px;padding:10px 11px;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-lg);margin-bottom:16px}
.drawer-av{width:32px;height:32px;border-radius:50%;background:var(--brand);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center;flex-shrink:0;filter:var(--glow)}
.drawer-name{font-size:12.5px;font-weight:600;color:var(--txt-1)}
.drawer-email{font-size:10.5px;color:var(--txt-3);margin-top:1px;word-break:break-all}
.drawer-lbl{font-size:9.5px;font-weight:700;letter-spacing:.8px;text-transform:uppercase;color:var(--txt-3);padding:0 8px;margin:12px 0 5px}
.drawer-nav a{display:flex;align-items:center;gap:9px;padding:8px 9px;border-radius:var(--r-md);font-size:13.5px;font-weight:500;color:var(--txt-2);text-decoration:none;transition:all .12s}
.drawer-nav a i{width:15px;font-size:13px;color:var(--txt-3)}
.drawer-nav a:hover,.drawer-nav a.active{background:var(--brand-lt);color:var(--brand)}
.drawer-nav a:hover i,.drawer-nav a.active i{color:var(--brand);filter:var(--glow)}
.drawer-div{height:1px;background:var(--border);margin:8px 8px 3px}

/* ── SHARED LAYOUT ── */
/* Standardised to 1200 px / 28 px — matches topbar-inner for perfect alignment */
.main{padding:32px 28px 80px;max-width:1200px;margin:0 auto}

/* ── SHARED COMPONENTS ── */
.alert{display:flex;align-items:center;gap:8px;padding:9px 12px;border-radius:var(--r-lg);font-size:12.5px;margin-bottom:10px;border:1.5px solid;line-height:1.4}
.alert-warn{background:var(--c-amber-bg);border-color:var(--c-amber-b);color:var(--c-amber)}

.badge{display:inline-flex;align-items:center;padding:2px 7px;border-radius:var(--r-full);font-size:10.5px;font-weight:600;white-space:nowrap}
.b-open{background:var(--c-blue-bg);color:var(--c-blue);border:1px solid var(--c-blue-b)}
.b-progress{background:var(--c-amber-bg);color:var(--c-amber);border:1px solid var(--c-amber-b)}
.b-followup{background:var(--c-purple-bg);color:var(--c-purple);border:1px solid var(--c-purple-b)}
.b-escalated,.b-response{background:var(--c-red-bg);color:var(--c-red);border:1px solid var(--c-red-b)}
.b-completed,.b-closed,.b-cancelled{background:var(--c-slate-bg);color:var(--c-slate);border:1px solid var(--border)}
/* Distinct from .b-followup (also purple-family) so a "Proofing" task
   doesn't read as just another follow-up at a glance. Shared here (not
   admin.css) since a task's own status badge — Task::badgeClass() — renders
   on client-facing pages too. */
.b-proofing{background:#ecfeff;color:#0e7490;border:1px solid #67e8f9}
:root:not([data-theme="light"]) .b-proofing,[data-theme="dark"] .b-proofing{background:#062a30;color:#67e8f9;border-color:#0e7490}

.card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-xs);overflow:hidden;margin-bottom:10px}
.card:last-child{margin-bottom:0}
.card-head{padding:10px 14px 9px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:8px}
.card-title{font-size:12.5px;font-weight:700;color:var(--txt-1);display:flex;align-items:center;gap:6px}
.card-title i{color:var(--brand);filter:var(--glow);font-size:13px}
.card-sub{font-size:10.5px;color:var(--txt-3);margin-top:1px}

.lbtn{display:inline-flex;align-items:center;gap:4px;font-size:11px;font-weight:600;color:var(--brand);text-decoration:none;padding:3px 8px;border-radius:var(--r-md);transition:background .12s;white-space:nowrap}
.lbtn:hover{background:var(--brand-lt)}
.lbtn i{font-size:10px}

.empty{display:flex;flex-direction:column;align-items:center;padding:28px 16px;gap:7px;text-align:center}
.empty i{font-size:26px;color:var(--txt-3);opacity:.4}
.empty-t{font-size:13px;font-weight:600;color:var(--txt-2)}
.empty-s{font-size:11.5px;color:var(--txt-3)}

.sk{background:linear-gradient(90deg,var(--border) 25%,var(--hover-bg) 50%,var(--border) 75%);background-size:400px 100%;animation:shimmer 1.3s infinite;border-radius:3px}
.sk-row{display:flex;align-items:center;gap:10px;padding:10px 12px;border-bottom:1px solid var(--border)}
.sk-row:last-child{border-bottom:none}

/* ── TAB BAR (billing, account-settings) ── */
.tab-bar{display:flex;align-items:center;gap:4px;background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);padding:5px;margin-bottom:22px;box-shadow:var(--sh-xs);overflow-x:auto}
.tab-btn{display:flex;align-items:center;gap:8px;padding:9px 18px;border-radius:var(--r-lg);font-size:13.5px;font-weight:500;color:var(--txt-2);background:none;border:none;font-family:var(--font);cursor:pointer;white-space:nowrap;transition:all .15s;flex-shrink:0}
.tab-btn i{font-size:14px;color:var(--txt-3);transition:all .15s}
.tab-btn:hover{background:var(--hover-bg);color:var(--txt-1)}
.tab-btn:hover i{color:var(--txt-2)}
.tab-btn.active{background:var(--brand);color:#fff;font-weight:600;box-shadow:0 2px 8px var(--brand-glow)}
.tab-btn.active i{color:#fff}
.tab-btn:disabled{opacity:.45;cursor:not-allowed;pointer-events:none}
.tab-count{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;padding:0 6px;border-radius:var(--r-full);font-size:10.5px;font-weight:700;background:rgba(255,255,255,.25);color:#fff;margin-left:2px}
.tab-btn:not(.active) .tab-count{background:var(--bg);color:var(--txt-3)}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* ── PAGE CARDS (larger variant for portal pages) ── */
.page-card{background:var(--surface);border:1.5px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-xs);overflow:hidden;margin-bottom:18px}
.page-card-head{padding:16px 22px 12px;border-bottom:1.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-card-title{font-size:14px;font-weight:700;color:var(--txt-1);display:flex;align-items:center;gap:8px}
.page-card-title i{color:var(--brand);filter:var(--glow);font-size:15px}
.page-card-sub{font-size:12px;color:var(--txt-3);margin-top:2px}
.page-card-body{padding:22px}

/* ── PORTAL ACTION BUTTON ── */
.pb-btn{display:inline-flex;align-items:center;gap:6px;padding:8px 16px;border-radius:var(--r-md);font-size:13px;font-weight:600;font-family:var(--font);cursor:pointer;text-decoration:none;transition:all .12s;border:1.5px solid var(--border);background:var(--surface);color:var(--txt-2)}
.pb-btn:hover{background:var(--hover-bg);border-color:var(--txt-3);color:var(--txt-1)}
.pb-btn.pb-primary{background:var(--brand);border-color:var(--brand);color:#fff}
.pb-btn.pb-primary:hover{background:var(--brand-d);box-shadow:0 4px 12px var(--brand-glow)}

/* ── INFO NOTES ── */
.info-note{border-radius:var(--r-lg);padding:13px 18px;margin-bottom:18px;font-size:13px;display:flex;align-items:flex-start;gap:10px;line-height:1.55}
.info-note i{font-size:15px;margin-top:1px;flex-shrink:0}
.info-note.brand{background:var(--brand-lt);border:1.5px solid oklch(0.85 0.08 262);color:var(--brand-d)}
.info-note.success{background:var(--c-green-bg);border:1.5px solid var(--c-green);color:var(--c-green)}
.info-note.warning{background:var(--c-amber-bg);border:1.5px solid var(--c-amber);color:var(--c-amber)}
.info-note.danger{background:var(--c-red-bg);border:1.5px solid var(--c-red);color:var(--c-red)}

/* ── CONTACT BUTTONS (shared across dashboard & drawer) ── */
.contact-btn{display:flex;align-items:center;gap:10px;padding:9px 12px;border-radius:var(--r-md);font-size:12.5px;font-weight:600;text-decoration:none;border:1.5px solid;transition:all .15s;cursor:pointer}
.contact-btn-icon{width:28px;height:28px;border-radius:var(--r-sm);display:grid;place-items:center;font-size:14px;flex-shrink:0}
.contact-btn-text{flex:1;min-width:0}
.contact-btn-label{font-size:12px;font-weight:700;line-height:1.2}
.contact-btn-sub{font-size:10px;font-weight:500;opacity:.75;margin-top:1px}
.contact-btn-arr{font-size:10px;color:inherit;opacity:.5}
.contact-btn.btn-portal{background:var(--bg);color:var(--txt-2);border-color:var(--border)}
.contact-btn.btn-portal .contact-btn-icon{background:var(--brand-lt);color:var(--brand)}
.contact-btn.btn-portal:hover{background:var(--brand-lt);color:var(--brand);border-color:var(--brand)}
.contact-btn.btn-whatsapp{background:var(--c-whatsapp-bg);color:var(--c-whatsapp);border-color:var(--c-whatsapp-b)}
.contact-btn.btn-whatsapp .contact-btn-icon{background:var(--c-whatsapp);color:#fff}
.contact-btn.btn-whatsapp:hover{background:var(--c-whatsapp);color:#fff;border-color:var(--c-whatsapp)}
.contact-btn.btn-whatsapp:hover .contact-btn-icon{background:rgba(255,255,255,.2);color:#fff}
.contact-btn.btn-teams{background:var(--c-teams-bg);color:var(--c-teams);border-color:var(--c-teams-b)}
.contact-btn.btn-teams .contact-btn-icon{background:var(--c-teams);color:#fff}
.contact-btn.btn-teams:hover{background:var(--c-teams);color:#fff;border-color:var(--c-teams)}
.contact-btn.btn-teams:hover .contact-btn-icon{background:rgba(255,255,255,.2);color:#fff}
[data-theme="dark"] .contact-btn.btn-whatsapp{color:#4ade80}
[data-theme="dark"] .contact-btn.btn-whatsapp:hover{color:#fff}
[data-theme="dark"] .contact-btn.btn-teams{color:#a78bfa}
[data-theme="dark"] .contact-btn.btn-teams:hover{color:#fff}

/* ── RESPONSIVE (topbar breakpoints) ── */
@media(max-width:960px){
  .topbar{height:52px}
  .topbar-inner{padding:0 14px}
  .topbar-nav,.topbar-settings,.topbar-spacer,.av-wrap{display:none}
  .topbar-ham{display:block}
  .brand-logo{height:19px}
  .topbar-mob-logout{display:flex}
  /* Same "who's logged in" info already shows in the drawer (see topbar.php) —
     without .topbar-spacer to push it away, this badge crowds the hamburger
     and logo instead of sitting at the right edge. */
  .topbar-team-badge{display:none}
}
@media(max-width:480px){
  .main{padding:12px 12px 56px}
}