/* GROVA Command Center — Dashboard styles */
/* Sharp, elegant, calm and operationally dense. Legibility and speed. */

@font-face{font-family:Manrope;src:url('../assets/manrope-400.ttf') format('truetype');font-weight:400;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/manrope-600.ttf') format('truetype');font-weight:600;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/manrope-700.ttf') format('truetype');font-weight:700;font-display:swap}
@font-face{font-family:Manrope;src:url('../assets/manrope-800.ttf') format('truetype');font-weight:800;font-display:swap}
@font-face{font-family:Plex;src:url('../assets/mono-400.ttf') format('truetype');font-weight:400;font-display:swap}

:root{
  --bg:#111610;--bg-surface:#191e16;--bg-card:#1f251b;--bg-elevated:#252c20;
  --border:#2e3529;--border-light:#3a4233;
  --text:#e8ece2;--text-muted:#94a085;--text-dim:#6b7a5d;
  --orange:#ff582d;--orange-hover:#ff6e48;--orange-dim:#c53c17;
  --green:#4caf6a;--green-bg:#1a2e1d;--green-text:#7dd89a;
  --amber:#e5a730;--amber-bg:#2a2315;--amber-text:#f0c45a;
  --red:#e5463d;--red-bg:#2e1a18;--red-text:#f07470;
  --blue:#4a90d9;--blue-bg:#1a2430;
  --sidebar-w:240px;--topbar-h:56px;
  --ease:cubic-bezier(.22,1,.36,1);--radius:6px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Manrope,Arial,sans-serif;background:var(--bg);color:var(--text);font-size:14px;line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;border:0;background:none}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%;height:auto}
[hidden]{display:none!important}
::selection{background:var(--orange);color:#fff}
:focus-visible{outline:2px solid var(--orange);outline-offset:2px}

/* ═══════ LOGIN ═══════ */
.login-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;position:relative;overflow:hidden}
.login-bg{position:absolute;inset:0;background:radial-gradient(ellipse at 30% 20%,#1a2615 0%,var(--bg) 70%);z-index:0}
.login-card{position:relative;z-index:1;background:var(--bg-card);border:1px solid var(--border);border-radius:12px;padding:48px 44px;width:100%;max-width:420px;box-shadow:0 30px 80px #08100540}
.login-brand{display:flex;align-items:center;gap:12px;margin-bottom:28px}
.login-icon{width:38px;height:38px;background:var(--orange);border-radius:8px;display:flex;align-items:center;justify-content:center}
.login-icon svg{width:38px;height:38px;fill:var(--bg)}
.login-wordmark{font-size:32px;font-weight:800;letter-spacing:-1.8px}
.login-wordmark i{font-style:normal;color:var(--orange)}
.login-card h1{font-size:28px;font-weight:700;letter-spacing:-0.04em;margin-bottom:6px}
.login-subtitle{color:var(--text-muted);font-size:14px;margin-bottom:28px}
.login-field{margin-bottom:18px;position:relative}
.login-field label{display:block;font-size:12px;font-weight:600;color:var(--text-muted);margin-bottom:6px;letter-spacing:.02em}
.login-field input,.login-field select{width:100%;height:44px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:0 14px;font-size:14px;color:var(--text);transition:border-color .2s}
.login-field input:focus,.login-field select:focus{border-color:var(--orange);outline:none}
.login-field input::placeholder{color:var(--text-dim)}
.toggle-pass{position:absolute;right:10px;top:30px;width:28px;height:28px;display:grid;place-items:center;opacity:.5}
.toggle-pass:hover{opacity:1}
.toggle-pass svg{width:18px;height:18px;fill:none;stroke:var(--text-muted);stroke-width:1.5}
.login-submit{width:100%;height:48px;background:var(--orange);color:#fff;font-weight:700;font-size:15px;border-radius:var(--radius);display:flex;align-items:center;justify-content:center;gap:10px;margin-top:24px;transition:background .2s,transform .2s}
.login-submit:hover{background:var(--orange-hover);transform:translateY(-1px)}
.login-submit:active{transform:translateY(0)}
.login-submit svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2}
.login-note{font-size:11px;color:var(--text-dim);text-align:center;margin-top:16px;line-height:1.6}
.login-footer{display:flex;justify-content:space-between;align-items:center;margin-top:32px;padding-top:20px;border-top:1px solid var(--border);font-size:11px;color:var(--text-dim)}
.login-footer a{color:var(--text-muted);transition:color .2s}
.login-footer a:hover{color:var(--orange)}

/* ═══════ DASHBOARD SHELL ═══════ */
.dashboard-shell{display:block;min-height:100vh;width:100%;position:relative;background:var(--bg)}
.dashboard-shell.sidebar-collapsed{width:100%}

/* ═══════ SIDEBAR ═══════ */
.sidebar{background:var(--bg-surface);border-right:1px solid var(--border);display:flex;flex-direction:column;position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);z-index:40;transition:width .3s var(--ease);overflow:hidden}
.sidebar-brand{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;border-bottom:1px solid var(--border);height:var(--topbar-h)}
.sidebar-logo{display:flex;align-items:center;gap:10px;font-size:24px;font-weight:800;letter-spacing:-1.5px}
.sidebar-icon{width:30px;height:30px;background:var(--orange);border-radius:6px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.sidebar-icon svg{width:30px;height:30px;fill:var(--bg)}
.sidebar-logo i{font-style:normal;color:var(--orange)}
.sidebar-collapse{width:28px;height:28px;display:grid;place-items:center;border-radius:4px;transition:background .2s,transform .3s}
.sidebar-collapse:hover{background:var(--bg-elevated)}
.sidebar-collapse svg{width:16px;height:16px;fill:none;stroke:var(--text-muted);stroke-width:2}
.sidebar-collapsed .sidebar-collapse{transform:rotate(180deg)}
.sidebar-collapsed .sidebar-name,.sidebar-collapsed .nav-item span,.sidebar-collapsed .user-info,.sidebar-collapsed .nav-badge{display:none}
.sidebar-collapsed .sidebar{width:64px}
.sidebar-collapsed .nav-item{justify-content:center;padding:12px}
.sidebar-collapsed .sidebar-brand{justify-content:center;padding:14px 10px}
.sidebar-collapsed .sidebar-user{justify-content:center}

.sidebar-nav{flex:1;padding:12px 8px;display:flex;flex-direction:column;gap:2px;overflow-y:auto}
.nav-item{display:flex;align-items:center;gap:12px;padding:9px 12px;border-radius:var(--radius);color:var(--text-muted);font-size:13px;font-weight:500;transition:all .15s;position:relative}
.nav-item:hover{background:var(--bg-elevated);color:var(--text)}
.nav-item.active{background:var(--bg-elevated);color:var(--text);font-weight:600}
.nav-item.active::before{content:'';position:absolute;left:0;top:25%;bottom:25%;width:3px;background:var(--orange);border-radius:0 2px 2px 0}
.nav-item svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5;flex-shrink:0}
.nav-badge{margin-left:auto;background:var(--orange);color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px;line-height:1.3}
.nav-divider{height:1px;background:var(--border);margin:8px 12px}

.sidebar-footer{padding:12px;border-top:1px solid var(--border)}
.sidebar-user{display:flex;align-items:center;gap:10px;padding:8px}
.user-avatar{width:32px;height:32px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border-light);display:grid;place-items:center;font-size:11px;font-weight:700;color:var(--orange);flex-shrink:0}
.user-info strong{display:block;font-size:12px;font-weight:600}
.user-info span{font-size:10px;color:var(--text-dim)}

/* ═══════ MAIN AREA ═══════ */
.main-area{margin-left:var(--sidebar-w);width:calc(100% - var(--sidebar-w));min-width:0;display:flex;flex-direction:column;min-height:100vh;transition:margin-left .3s var(--ease),width .3s var(--ease)}
.sidebar-collapsed .main-area{margin-left:64px;width:calc(100% - 64px)}

/* ═══════ TOPBAR ═══════ */
.topbar{height:var(--topbar-h);background:var(--bg-surface);border-bottom:1px solid var(--border);display:flex;align-items:center;gap:16px;padding:0 24px;position:sticky;top:0;z-index:30}
.topbar-menu{display:none;width:32px;height:32px;place-items:center}
.topbar-menu svg{width:18px;height:18px;fill:none;stroke:var(--text);stroke-width:2}
.topbar-workspace select{background:transparent;border:1px solid var(--border);border-radius:var(--radius);padding:6px 12px;font-size:12px;font-weight:600;color:var(--text);cursor:pointer}
.topbar-campaign{display:flex;align-items:center;gap:8px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:4px 10px}
.topbar-campaign-label{display:inline-flex;align-items:center;gap:6px;font-size:11px;font-weight:700;color:var(--orange);text-transform:uppercase;letter-spacing:0.04em;white-space:nowrap}
.topbar-campaign-label svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2}
.topbar-campaign select{background:transparent;border:none;font-size:12px;font-weight:600;color:var(--text);cursor:pointer;outline:none;padding-right:4px}
.topbar-campaign select option{background:var(--bg-surface);color:var(--text)}
.topbar-search svg{position:absolute;left:12px;width:16px;height:16px;fill:none;stroke:var(--text-dim);stroke-width:2}
.topbar-search input{width:100%;height:36px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:0 14px 0 36px;font-size:13px;color:var(--text);transition:border-color .2s}
.topbar-search input:focus{border-color:var(--orange);outline:none}
.topbar-search input::placeholder{color:var(--text-dim)}
.topbar-actions{display:flex;align-items:center;gap:8px;margin-left:auto}
.topbar-btn{width:36px;height:36px;border-radius:var(--radius);display:grid;place-items:center;transition:background .15s;position:relative}
.topbar-btn:hover{background:var(--bg-elevated)}
.topbar-btn svg{width:18px;height:18px;fill:none;stroke:var(--text-muted);stroke-width:1.5}
.notif-dot{position:absolute;top:6px;right:6px;width:8px;height:8px;background:var(--orange);border-radius:50%;border:2px solid var(--bg-surface)}
.topbar-profile{display:flex;align-items:center;gap:6px;width:auto;padding:4px 8px}
.topbar-avatar{width:28px;height:28px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border-light);display:grid;place-items:center;font-size:10px;font-weight:700;color:var(--orange)}
.topbar-profile .chevron{width:14px;height:14px;stroke:var(--text-dim);transition:transform .2s}

/* Profile Dropdown */
.profile-dropdown{position:absolute;right:24px;top:calc(var(--topbar-h) + 4px);background:var(--bg-card);border:1px solid var(--border);border-radius:8px;width:260px;box-shadow:0 15px 40px #08100560;z-index:50;overflow:hidden}
.profile-info{display:flex;align-items:center;gap:12px;padding:16px;border-bottom:1px solid var(--border)}
.profile-avatar{width:36px;height:36px;border-radius:50%;background:var(--bg-elevated);border:1px solid var(--border-light);display:grid;place-items:center;font-size:12px;font-weight:700;color:var(--orange);flex-shrink:0}
.profile-info strong{display:block;font-size:13px}
.profile-info span{font-size:11px;color:var(--text-dim)}
.profile-menu{padding:6px}
.profile-menu button{display:block;width:100%;text-align:left;padding:10px 12px;font-size:13px;color:var(--text-muted);border-radius:4px;transition:all .15s}
.profile-menu button:hover{background:var(--bg-elevated);color:var(--text)}
.logout-btn:hover{color:var(--red-text)!important}

/* ═══════ PAGE LAYOUT ═══════ */
.page-container{flex:1;padding:24px;overflow-y:auto;width:100%;min-width:0;box-sizing:border-box}
.page{animation:page-in .3s var(--ease);width:100%;min-width:0}
@keyframes page-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.page-header{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:24px;flex-wrap:wrap}
.page-header h1{font-size:24px;font-weight:700;letter-spacing:-0.03em}
.page-subtitle{font-size:13px;color:var(--text-muted);margin-top:4px}
.page-actions{display:flex;gap:10px;flex-wrap:wrap}
.data-freshness{color:var(--green-text);font-size:11px}

/* ═══════ BUTTONS ═══════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:8px 16px;font-size:13px;font-weight:600;border-radius:var(--radius);transition:all .15s;white-space:nowrap;border:1px solid transparent}
.btn svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2}
.btn-primary{background:var(--orange);color:#fff;border-color:var(--orange)}
.btn-primary:hover{background:var(--orange-hover);transform:translateY(-1px)}
.btn-outline{border-color:var(--border-light);color:var(--text-muted)}
.btn-outline:hover{border-color:var(--text-muted);color:var(--text);background:var(--bg-elevated)}
.btn-ghost{color:var(--text-muted);padding:6px 10px}
.btn-ghost:hover{color:var(--text);background:var(--bg-elevated);border-radius:var(--radius)}
.btn-sm{padding:5px 12px;font-size:12px}
.btn-approve{background:var(--green-bg);color:var(--green-text);border-color:var(--green-bg)}
.btn-approve:hover{background:#1f3a23}
.btn-reject{background:var(--red-bg);color:var(--red-text);border-color:var(--red-bg)}
.btn-reject:hover{background:#3a1f1d}
.btn:disabled{opacity:.5;cursor:not-allowed;transform:none}
.back-btn{margin-bottom:8px;padding:4px 0;font-size:12px}

/* ═══════ BADGES ═══════ */
.badge{display:inline-flex;align-items:center;padding:3px 8px;border-radius:4px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-active{background:var(--green-bg);color:var(--green-text)}
.badge-verified{background:var(--green-bg);color:var(--green-text)}
.badge-review{background:var(--amber-bg);color:var(--amber-text)}
.badge-rejected{background:var(--red-bg);color:var(--red-text)}
.badge-draft{background:var(--bg-elevated);color:var(--text-dim)}
.badge-completed{background:var(--green-bg);color:var(--green-text)}
.badge-assigned{background:var(--blue-bg);color:var(--blue)}
.badge-not-started{background:var(--bg-elevated);color:var(--text-dim)}
.badge-rework{background:var(--amber-bg);color:var(--amber-text)}

/* ═══════ METRIC CARDS ═══════ */
.metric-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:14px;margin-bottom:24px}
.metric-grid-sm{grid-template-columns:repeat(6,1fr);margin-bottom:24px}
.metric-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:transform .2s,border-color .2s;cursor:pointer}
.metric-card:hover{transform:translateY(-2px);border-color:var(--border-light)}
.metric-label{font-size:11px;color:var(--text-dim);font-weight:600;letter-spacing:.03em;display:block;margin-bottom:6px}
.metric-value{font-size:32px;font-weight:700;letter-spacing:-0.04em;display:block;line-height:1.1;font-variant-numeric:tabular-nums}
.metric-grid-sm .metric-value{font-size:26px}
.metric-sub{font-size:11px;color:var(--text-muted);margin-top:4px;display:block}
.metric-card.accent{border-color:var(--orange-dim)}.metric-card.accent .metric-value{color:var(--orange)}
.metric-card.warn{border-color:var(--amber)20}.metric-card.warn .metric-value{color:var(--amber-text)}
.metric-card.danger{border-color:var(--red)20}.metric-card.danger .metric-value{color:var(--red-text)}
.metric-card.muted-card .metric-value{color:var(--text-dim)}

/* ═══════ OVERVIEW BAR ═══════ */
.overview-bar-section{margin-bottom:24px}
.overview-bar{height:10px;display:flex;gap:3px;border-radius:5px;overflow:hidden;margin-bottom:10px}
.overview-bar>span{transition:width .6s var(--ease)}
.obar-verified{background:var(--orange)}.obar-review{background:var(--amber)}.obar-rejected{background:var(--red)60}.obar-pending{background:var(--bg-elevated)}
.overview-bar-legend{display:flex;gap:16px;font-size:11px;color:var(--text-muted)}
.dot{display:inline-block;width:8px;height:8px;border-radius:2px;margin-right:5px}
.dot-verified{background:var(--orange)}.dot-review{background:var(--amber)}.dot-rejected{background:var(--red)}.dot-pending{background:var(--bg-elevated);border:1px solid var(--border)}

/* ═══════ CARDS ═══════ */
.card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.card-header{display:flex;justify-content:space-between;align-items:center;padding:16px 18px;border-bottom:1px solid var(--border);gap:12px}
.card-header h2{font-size:15px;font-weight:600;letter-spacing:-0.02em}
.card-count{font-size:12px;color:var(--text-dim)}
.card-filters{display:flex;gap:8px}

/* ═══════ DATA TABLE ═══════ */
.table-wrap{overflow-x:auto}
.data-table{width:100%;border-collapse:collapse}
.data-table th{text-align:left;padding:10px 14px;font-size:11px;font-weight:600;color:var(--text-dim);letter-spacing:.03em;border-bottom:1px solid var(--border);white-space:nowrap;background:var(--bg-surface)}
.data-table td{padding:12px 14px;border-bottom:1px solid var(--border);font-size:13px;vertical-align:middle}
.data-table tr{transition:background .1s}
.data-table tbody tr:hover{background:var(--bg-elevated);cursor:pointer}
.data-table td strong{font-weight:600}
.table-sub{font-size:11px;color:var(--text-dim)}
.table-pagination{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;font-size:12px;color:var(--text-dim);border-top:1px solid var(--border)}
.pagination-btns{display:flex;gap:8px}

/* ═══════ FILTERS ═══════ */
.filter-bar{display:flex;gap:10px;margin-bottom:20px;flex-wrap:wrap;align-items:center}
.filter-select{height:36px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;font-size:12px;color:var(--text);cursor:pointer}
.filter-select:focus{border-color:var(--orange);outline:none}
.search-box{position:relative;display:flex;align-items:center;flex:1;min-width:200px;max-width:340px}
.search-box svg{position:absolute;left:10px;width:15px;height:15px;fill:none;stroke:var(--text-dim);stroke-width:2}
.search-box input{width:100%;height:36px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px 0 32px;font-size:13px;color:var(--text)}
.search-box input:focus{border-color:var(--orange);outline:none}
.search-box input::placeholder{color:var(--text-dim)}
.view-toggle{display:flex;border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.vt-btn{padding:7px 12px;font-size:14px;color:var(--text-dim);transition:all .15s}
.vt-btn.active{background:var(--bg-elevated);color:var(--text)}
.vt-btn:hover{color:var(--text)}

/* ═══════ OVERVIEW GRID ═══════ */
.overview-grid{display:grid;grid-template-columns:1.4fr .6fr;gap:18px;margin-bottom:24px}

/* ═══════ EXCEPTIONS ═══════ */
.exception-list{padding:8px}
.exception-item{display:flex;align-items:center;gap:12px;padding:12px;border-radius:var(--radius);transition:background .15s;margin-bottom:4px}
.exception-item:hover{background:var(--bg-elevated)}
.exception-icon{font-size:18px;flex-shrink:0;width:28px;text-align:center}
.exception-item strong{font-size:13px;display:block}
.exception-item p{font-size:11px;color:var(--text-dim);margin-top:2px}
.exception-item .btn{margin-left:auto;flex-shrink:0}
.exception-urgent{border-left:3px solid var(--amber)}

/* ═══════ ACTIVITY FEED ═══════ */
.activity-feed{padding:12px 18px}
.activity-item{display:flex;align-items:center;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.activity-item:last-child{border-bottom:0}
.activity-time{font-size:11px;color:var(--text-dim);min-width:75px;flex-shrink:0}
.activity-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}

/* ═══════ DEMO BANNER ═══════ */
.demo-banner{display:flex;align-items:center;gap:14px;padding:16px 20px;background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);margin-top:24px;color:var(--text-muted);font-size:12px;line-height:1.7}
.demo-banner span{font-size:22px;color:var(--orange);flex-shrink:0}

/* ═══════ CAMPAIGN CARDS ═══════ */
.campaign-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
.campaign-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:24px;transition:transform .2s,border-color .2s,box-shadow .2s;cursor:pointer;position:relative}
.campaign-card:hover{transform:translateY(-3px);border-color:var(--border-light)}
.campaign-card.is-selected-campaign{border-color:var(--orange);background:linear-gradient(180deg, rgba(255,88,45,0.08) 0%, var(--bg-card) 100%);box-shadow:0 0 0 1px var(--orange),0 12px 32px rgba(0,0,0,0.45)}
.campaign-card.is-selected-campaign .cc-top .badge{background:var(--orange);color:#fff;font-weight:700}
.campaign-card.is-selected-campaign .cc-footer .btn{background:var(--green);border-color:var(--green);color:#fff}
.cc-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cc-type{font-size:11px;color:var(--text-dim);font-weight:600;letter-spacing:.05em;background:var(--bg-elevated);padding:3px 8px;border-radius:3px}
.campaign-card h3{font-size:17px;font-weight:600;letter-spacing:-0.02em;margin-bottom:6px}
.campaign-card p{font-size:12px;color:var(--text-dim);margin-bottom:16px}
.cc-progress{margin-bottom:16px}
.cc-bar{height:6px;background:var(--bg-elevated);border-radius:3px;overflow:hidden;margin-bottom:6px}
.cc-bar span{display:block;height:100%;background:var(--orange);border-radius:3px;transition:width .6s var(--ease)}
.cc-progress>span{font-size:11px;color:var(--text-muted)}
.cc-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:14px;border-top:1px solid var(--border)}
.cc-stats div{text-align:center}
.cc-stats strong{display:block;font-size:16px;font-weight:600}
.cc-stats span{font-size:9px;color:var(--text-dim);letter-spacing:.03em}
.cc-footer{display:flex;justify-content:space-between;align-items:center;margin-top:16px;padding-top:14px;border-top:1px solid var(--border)}
.cc-footer span{font-size:11px;color:var(--text-dim)}
.campaign-card-new{border-style:dashed;display:flex;align-items:center;justify-content:center;min-height:280px}
.ccn-inner{text-align:center;color:var(--text-dim)}
.ccn-inner svg{width:48px;height:48px;margin:0 auto 16px;opacity:.5}
.ccn-inner h3{font-size:15px;margin-bottom:6px;color:var(--text-muted)}
.ccn-inner p{font-size:12px;max-width:200px;margin:0 auto}
.campaign-card-new:hover{border-color:var(--orange);background:var(--bg-elevated)}
.campaign-card-new:hover .ccn-inner{color:var(--text-muted)}

/* ═══════ DETAIL TABS ═══════ */
.detail-tabs{display:flex;gap:0;border-bottom:1px solid var(--border);margin-bottom:24px;overflow-x:auto}
.dtab{padding:12px 20px;font-size:13px;font-weight:500;color:var(--text-dim);border-bottom:2px solid transparent;transition:all .15s;white-space:nowrap}
.dtab:hover{color:var(--text)}
.dtab.active{color:var(--text);border-color:var(--orange);font-weight:600}
.dtab-panel{display:none}.dtab-panel.active{display:block;animation:page-in .25s var(--ease)}

/* ═══════ RULES LIST ═══════ */
.rules-list{padding:12px}
.rule-item{display:flex;align-items:center;gap:14px;padding:12px;border-bottom:1px solid var(--border)}
.rule-item:last-child{border-bottom:0}
.rule-icon{font-size:20px;width:32px;text-align:center;flex-shrink:0}
.rule-item strong{font-size:13px;display:block}
.rule-item p{font-size:11px;color:var(--text-dim);margin-top:2px}
.rule-status{margin-left:auto;font-size:10px;font-weight:600;padding:3px 8px;border-radius:3px}
.active-rule{background:var(--green-bg);color:var(--green-text)}
.planned-rule{background:var(--bg-elevated);color:var(--text-dim)}

/* ═══════ TIMELINE ═══════ */
.timeline{padding:16px}
.timeline-item{position:relative;padding:0 0 24px 28px;border-left:2px solid var(--border)}
.timeline-item:last-child{border-left-color:transparent;padding-bottom:0}
.timeline-item::before{content:'';position:absolute;left:-5px;top:4px;width:8px;height:8px;border-radius:50%;background:var(--border-light);border:2px solid var(--bg-card)}
.timeline-item.current::before{background:var(--orange);border-color:var(--orange)40}
.timeline-date{font-size:10px;color:var(--text-dim);font-weight:600;letter-spacing:.03em;display:block;margin-bottom:4px}
.timeline-item strong{font-size:13px;display:block}
.timeline-item p{font-size:11px;color:var(--text-dim);margin-top:2px}

/* ═══════ MAP ═══════ */
.map-container{border-radius:var(--radius);overflow:hidden;border:1px solid var(--border);min-height:400px}
.map-full{min-height:calc(100vh - 220px)}
.map-placeholder{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;background:var(--bg-card);color:var(--text-dim);text-align:center;padding:40px}
.map-placeholder svg{width:48px;height:48px;margin-bottom:16px;opacity:.4}
.map-placeholder h3{font-size:18px;color:var(--text-muted);margin-bottom:8px}
.map-placeholder p{font-size:13px;max-width:420px;line-height:1.7}
.map-legend{display:flex;gap:16px;margin-top:20px;font-size:12px}

/* ═══════ EVIDENCE GRID ═══════ */
.evidence-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
.evidence-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden;transition:transform .2s,border-color .2s;cursor:pointer}
.evidence-card:hover{transform:translateY(-3px);border-color:var(--border-light)}
.ev-thumb{position:relative;aspect-ratio:1.5;overflow:hidden}
.ev-thumb img{width:100%;height:100%;object-fit:cover}
.ev-thumb .badge{position:absolute;top:8px;right:8px}
.ev-info{padding:12px}
.ev-info strong{display:block;font-size:13px;margin-bottom:4px}
.ev-info span{display:block;font-size:11px;color:var(--text-dim)}
.ev-time{margin-top:4px!important;font-size:10px!important}

/* ═══════ REVIEW LIST ═══════ */
.review-list{display:flex;flex-direction:column;gap:12px}
.review-item{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);display:flex;gap:16px;padding:18px;transition:border-color .2s}
.review-item:hover{border-color:var(--border-light)}
.ri-evidence{width:140px;flex-shrink:0;border-radius:4px;overflow:hidden}
.ri-evidence img{width:100%;height:100px;object-fit:cover}
.ri-details{flex:1;min-width:0}
.ri-top{display:flex;justify-content:space-between;align-items:center;gap:10px;margin-bottom:6px}
.ri-top strong{font-size:14px}
.ri-details>p{font-size:12px;color:var(--text-dim);margin-bottom:10px}
.ri-checks{display:flex;gap:8px;flex-wrap:wrap}
.check-pass{font-size:11px;color:var(--green-text);background:var(--green-bg);padding:3px 8px;border-radius:3px}
.check-flag{font-size:11px;color:var(--amber-text);background:var(--amber-bg);padding:3px 8px;border-radius:3px}
.ri-actions{display:flex;flex-direction:column;gap:6px;flex-shrink:0;justify-content:center}

/* ═══════ VENDOR CARDS ═══════ */
.vendor-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:14px;padding:16px}
.vendor-card{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.vendor-card h3{font-size:16px;font-weight:600;margin-bottom:4px}
.vendor-card p{font-size:12px;color:var(--text-dim);margin-bottom:14px}
.vendor-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;padding-top:14px;border-top:1px solid var(--border);text-align:center}
.vendor-stats strong{display:block;font-size:18px;font-weight:600}
.vendor-stats span{font-size:9px;color:var(--text-dim);letter-spacing:.03em}

/* ═══════ ROLES GRID ═══════ */
.roles-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:14px}
.role-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px}
.role-card h3{font-size:15px;font-weight:600;margin-bottom:6px}
.role-card p{font-size:12px;color:var(--text-dim);margin-bottom:12px;line-height:1.6}
.role-card ul{list-style:none;padding:0}
.role-card li{font-size:12px;padding:5px 0;color:var(--text-muted);position:relative;padding-left:16px}
.role-card li::before{content:'✓';position:absolute;left:0;color:var(--green-text);font-size:11px}
.role-card .badge{margin-top:8px}

/* ═══════ REPORT TYPES ═══════ */
.report-types{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.report-type-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:22px;transition:border-color .2s}
.report-type-card:hover{border-color:var(--border-light)}
.report-type-card h3{font-size:15px;margin-bottom:8px}
.report-type-card p{font-size:12px;color:var(--text-dim);line-height:1.6;margin-bottom:14px}

/* ═══════ SETTINGS ═══════ */
.settings-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.settings-form{padding:16px}
.settings-form label{display:block;margin-bottom:14px;font-size:12px;font-weight:600;color:var(--text-muted)}
.settings-form input,.settings-form select,.settings-form textarea{display:block;width:100%;margin-top:6px;height:40px;background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:0 12px;font-size:13px;color:var(--text)}
.settings-form textarea{height:70px;padding:10px 12px;resize:vertical}
.settings-form input:focus,.settings-form select:focus,.settings-form textarea:focus{border-color:var(--orange);outline:none}
.settings-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.settings-note{font-size:11px;color:var(--text-dim);padding:14px 16px;border-top:1px solid var(--border);line-height:1.6}
.toggle-label{display:flex!important;align-items:center;gap:10px;cursor:pointer;padding:10px 0;border-bottom:1px solid var(--border)}
.toggle-label input[type="checkbox"]{width:16px;height:16px;accent-color:var(--orange);margin:0;flex-shrink:0}
.toggle-label span{font-size:13px;color:var(--text)}
.workspace-info{padding:16px}
.ws-item{display:flex;justify-content:space-between;padding:10px 0;border-bottom:1px solid var(--border);font-size:13px}
.ws-item span{color:var(--text-dim)}

/* ═══════ INTEGRATION GRID ═══════ */
.integration-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
.integration-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:20px}
.integration-card h3{font-size:14px;margin-bottom:6px}
.integration-card p{font-size:12px;color:var(--text-dim);margin-bottom:10px}

/* ═══════ WIZARD ═══════ */
.modal-dialog{background:var(--bg-card);border:1px solid var(--border);border-radius:12px;color:var(--text);max-width:640px;width:calc(100% - 32px);max-height:90vh;overflow-y:auto;padding:0;box-shadow:0 25px 80px #08100580}
.modal-dialog::backdrop{background:#0a0f08cc;backdrop-filter:blur(8px)}
.modal-dialog[open]{animation:modal-in .3s var(--ease)}
@keyframes modal-in{from{opacity:0;transform:translateY(16px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}
.modal-d-top{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border)}
.modal-d-top h2{font-size:18px;font-weight:600}
.modal-d-close{width:32px;height:32px;font-size:22px;color:var(--text-dim);display:grid;place-items:center;border-radius:var(--radius)}
.modal-d-close:hover{background:var(--bg-elevated);color:var(--text)}
.campaign-wizard{padding:24px}
.wizard-steps{display:flex;gap:0;margin-bottom:28px;border-bottom:1px solid var(--border);padding-bottom:14px;overflow-x:auto}
.ws{padding:6px 14px;font-size:12px;color:var(--text-dim);white-space:nowrap;border-radius:3px}
.ws.active{background:var(--bg-elevated);color:var(--text);font-weight:600}
.ws.done{color:var(--green-text)}
.wizard-panel{display:none}.wizard-panel.active{display:block;animation:page-in .25s var(--ease)}
.wizard-panel h3{font-size:17px;font-weight:600;margin-bottom:18px}
.upload-zone{border:2px dashed var(--border);border-radius:var(--radius);padding:40px;text-align:center;color:var(--text-dim);cursor:pointer;transition:border-color .2s}
.upload-zone:hover{border-color:var(--orange)}
.upload-zone svg{width:40px;height:40px;margin:0 auto 12px;opacity:.5}
.upload-zone p{font-size:14px;margin-bottom:6px}
.upload-zone span{font-size:11px}
.wizard-nav{display:flex;gap:10px;justify-content:flex-end;margin-top:24px;padding-top:18px;border-top:1px solid var(--border)}
.wizard-summary p{font-size:13px;color:var(--text-dim);margin-bottom:18px;line-height:1.7}
.ws-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.ws-summary-grid div{background:var(--bg-surface);border:1px solid var(--border);border-radius:var(--radius);padding:14px}
.ws-summary-grid span{display:block;font-size:10px;color:var(--text-dim);margin-bottom:4px}
.ws-summary-grid strong{font-size:13px}

/* ═══════ NOTIFICATIONS PANEL ═══════ */
.notif-panel{position:fixed;right:24px;top:calc(var(--topbar-h) + 8px);width:340px;background:var(--bg-card);border:1px solid var(--border);border-radius:8px;box-shadow:0 15px 50px #08100570;z-index:50;overflow:hidden;animation:modal-in .2s var(--ease)}
.notif-header{display:flex;justify-content:space-between;align-items:center;padding:14px 16px;border-bottom:1px solid var(--border)}
.notif-header h3{font-size:14px;font-weight:600}
.notif-list{max-height:360px;overflow-y:auto}
.notif-item{display:flex;gap:10px;padding:12px 16px;border-bottom:1px solid var(--border);transition:background .15s;cursor:pointer}
.notif-item:hover{background:var(--bg-elevated)}
.notif-item.unread{background:var(--bg-surface)}
.notif-dot-item{width:8px;height:8px;border-radius:50%;background:var(--green);flex-shrink:0;margin-top:6px}
.notif-dot-item.warn{background:var(--amber)}
.notif-dot-item.danger{background:var(--red)}
.notif-item strong{display:block;font-size:12px}
.notif-item p{font-size:11px;color:var(--text-dim);margin-top:2px}

/* ═══════ TOAST ═══════ */
.dash-toast{position:fixed;bottom:24px;left:50%;transform:translate(-50%,20px);background:var(--bg-card);color:var(--text);border:1px solid var(--border);border-radius:var(--radius);padding:14px 24px;font-size:13px;z-index:100;opacity:0;pointer-events:none;transition:opacity .25s,transform .3s var(--ease);box-shadow:0 10px 30px #08100560;max-width:calc(100% - 32px);text-align:center}
.dash-toast.visible{opacity:1;transform:translate(-50%,0);pointer-events:auto}

/* ═══════ RESPONSIVE ═══════ */
@media(max-width:1200px){
  .metric-grid{grid-template-columns:repeat(3,1fr)}
  .metric-grid-sm{grid-template-columns:repeat(3,1fr)}
  .campaign-cards{grid-template-columns:repeat(2,1fr)}
  .evidence-grid{grid-template-columns:repeat(3,1fr)}
  .report-types{grid-template-columns:repeat(2,1fr)}
  .integration-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:960px){
  .overview-grid{grid-template-columns:1fr}
  .settings-grid{grid-template-columns:1fr}
  .ws-summary-grid{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:768px){
  .sidebar{transform:translateX(-100%);width:var(--sidebar-w)}
  .sidebar.mobile-open{transform:translateX(0);box-shadow:20px 0 60px #08100580}
  .main-area{margin-left:0}
  .topbar-menu{display:grid}
  .topbar-workspace{display:none}
  .metric-grid,.metric-grid-sm{grid-template-columns:repeat(2,1fr)}
  .campaign-cards{grid-template-columns:1fr}
  .evidence-grid{grid-template-columns:repeat(2,1fr)}
  .review-item{flex-direction:column}
  .ri-evidence{width:100%}
  .ri-evidence img{height:160px}
  .ri-actions{flex-direction:row}
  .report-types{grid-template-columns:1fr}
  .integration-grid{grid-template-columns:1fr}
  .page-header{flex-direction:column}
  .page-actions{width:100%}
  .filter-bar{flex-direction:column}
  .search-box{max-width:100%;width:100%}
  .detail-tabs{gap:0;overflow-x:auto}
  .dtab{padding:10px 14px;font-size:12px}
  .roles-grid{grid-template-columns:1fr}
  .vendor-cards{grid-template-columns:1fr}
  .notif-panel{right:8px;left:8px;width:auto}
}
@media(max-width:480px){
  .page-container{padding:16px}
  .metric-grid,.metric-grid-sm{grid-template-columns:1fr 1fr}
  .metric-value{font-size:26px}
  .evidence-grid{grid-template-columns:1fr}
  .overview-bar-legend{flex-wrap:wrap;gap:8px}
  .cc-stats{grid-template-columns:repeat(2,1fr)}
}

/* ═══════ UNIT DRAWER (Split-view for Map & Units) ═══════ */
.unit-drawer-backdrop {
  position: fixed; inset: 0; background: rgba(8,16,5,0.6); backdrop-filter: blur(3px);
  z-index: 105; opacity: 0; pointer-events: none; transition: opacity .3s var(--ease);
}
.unit-drawer-backdrop.active { opacity: 1; pointer-events: auto; }
.unit-drawer {
  position: fixed; top: 0; right: 0; bottom: 0; width: 440px; max-width: 92vw;
  background: var(--bg-surface); border-left: 1px solid var(--border);
  box-shadow: -16px 0 50px rgba(0,0,0,0.55); z-index: 110;
  display: flex; flex-direction: column; transform: translateX(100%);
  transition: transform .35s var(--ease);
}
.unit-drawer.open { transform: translateX(0); }
.drawer-header {
  padding: 18px 24px; border-bottom: 1px solid var(--border);
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  background: var(--bg-card); flex-shrink: 0;
}
.drawer-title-group h2 { font-size: 18px; font-weight: 800; display: flex; align-items: center; gap: 10px; }
.drawer-subtitle { font-size: 12px; color: var(--text-muted); margin-top: 3px; }
.drawer-close {
  width: 32px; height: 32px; border-radius: 6px; display: grid; place-items: center;
  color: var(--text-muted); font-size: 20px; transition: background .2s, color .2s;
}
.drawer-close:hover { background: var(--bg-elevated); color: var(--text); }
.drawer-content { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 18px; }
.drawer-section { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; }
.drawer-sec-title {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px;
  color: var(--text-dim); margin-bottom: 12px; display: flex; align-items: center; justify-content: space-between;
}
.coord-box { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 10px; }
.coord-item { background: var(--bg-surface); padding: 9px 12px; border-radius: 4px; border: 1px solid var(--border); }
.coord-label { font-size: 10px; font-weight: 700; text-transform: uppercase; color: var(--text-muted); }
.coord-val { font-family: Plex, monospace; font-size: 11px; color: var(--text); margin-top: 3px; }
.coord-diff {
  font-size: 12px; padding: 9px 12px; border-radius: 4px; background: var(--bg-elevated);
  display: flex; align-items: center; justify-content: space-between;
}
.drawer-media-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.drawer-media-item {
  border-radius: 6px; overflow: hidden; position: relative; border: 1px solid var(--border);
  background: #000; cursor: pointer; transition: transform .2s var(--ease);
}
.drawer-media-item:hover { transform: scale(1.02); }
.drawer-media-item img { width: 100%; height: 110px; object-fit: cover; }
.drawer-media-tag {
  position: absolute; bottom: 6px; left: 6px; font-size: 10px; font-weight: 700;
  background: rgba(0,0,0,0.8); padding: 2px 6px; border-radius: 3px; color: #fff;
}
.checks-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.checks-table tr { border-bottom: 1px solid var(--border); }
.checks-table tr:last-child { border-bottom: none; }
.checks-table td { padding: 9px 0; }
.check-name { color: var(--text); font-weight: 500; }
.check-detail { font-size: 11px; color: var(--text-muted); }
.check-status { font-weight: 700; text-align: right; }
.check-status.pass { color: var(--green-text); }
.check-status.warn { color: var(--amber-text); }
.check-status.fail { color: var(--red-text); }
.drawer-footer {
  padding: 16px 24px; border-top: 1px solid var(--border); background: var(--bg-card);
  display: flex; gap: 10px; flex-shrink: 0;
}
.drawer-footer .btn { flex: 1; justify-content: center; }

/* ═══════ MAP HUD & MARKERS ═══════ */
.map-canvas-wrap {
  width: 100%; height: 640px; position: relative; border-radius: var(--radius);
  overflow: hidden; border: 1px solid var(--border); background: #0c0f0a;
}
.map-hud {
  position: absolute; top: 16px; left: 16px; z-index: 400;
  background: rgba(25,30,22,0.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 10px 14px; font-size: 12px; display: flex; gap: 16px; align-items: center;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.map-hud-stat { display: flex; flex-direction: column; }
.map-hud-stat small { font-size: 10px; text-transform: uppercase; color: var(--text-dim); font-weight: 700; }
.map-hud-stat strong { font-size: 14px; font-weight: 800; color: var(--text); }
.map-legend-overlay {
  position: absolute; bottom: 16px; left: 16px; z-index: 400;
  background: rgba(25,30,22,0.92); backdrop-filter: blur(10px);
  border: 1px solid var(--border); border-radius: var(--radius);
  padding: 8px 14px; font-size: 11px; display: flex; gap: 14px;
}
.grova-pin-marker {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid rgba(255,255,255,0.9);
  display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800;
  color: #fff; cursor: pointer; transition: transform .2s ease, box-shadow .2s;
  box-shadow: 0 2px 6px rgba(0,0,0,0.5);
}
.grova-pin-marker:hover { transform: scale(1.3); z-index: 1000 !important; }
.grova-pin-marker.pin-verified { background: var(--green); }
.grova-pin-marker.pin-review { background: var(--amber); }
.grova-pin-marker.pin-rejected { background: var(--red); }
.grova-pin-marker.pin-pending { background: #55624b; opacity: 0.85; }
.leaflet-popup-content-wrapper {
  background: var(--bg-card) !important; color: var(--text) !important;
  border: 1px solid var(--border) !important; border-radius: 8px !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.6) !important;
}
.leaflet-popup-tip { background: var(--bg-card) !important; }