/* =============================================================
   SOMABRA DASHBOARD — styles.css (redesign 2025)
   Sistema de design unificado com suporte a dark/light mode.
============================================================= */

/* ---- LIGHT MODE (padrão) ---- */
:root {
  --accent:#1A2FCC;--accent-hover:#2A43E8;--accent-rgb:26,47,204;
  --accent2:#F59E0B;--accent3:#10B981;
  --bg:#F3F4F6;--bg2:#FFFFFF;--bg3:#FFFFFF;
  --card:#FFFFFF;--card2:#F8FAFC;
  --border:rgba(0,0,0,0.08);--border-strong:rgba(0,0,0,0.14);
  --text:#1E293B;--text2:#475569;--text3:#94A3B8;
  --green:#10B981;--red:#F87171;--orange:#F59E0B;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.08),0 1px 2px rgba(0,0,0,0.05);
  --shadow-md:0 4px 16px rgba(0,0,0,0.08),0 2px 8px rgba(0,0,0,0.05);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.10),0 4px 16px rgba(0,0,0,0.07);
  --shadow-accent:0 4px 20px rgba(26,47,204,0.25);
  --radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;
}

/* ---- DARK MODE ---- */
body.dark-mode {
  --bg:#0F1117;--bg2:#141720;--bg3:#1A1D27;
  --card:#1A1D27;--card2:#1F2335;
  --border:rgba(255,255,255,0.07);--border-strong:rgba(255,255,255,0.12);
  --text:#E2E8F0;--text2:#94A3B8;--text3:#475569;
  --shadow-sm:0 1px 3px rgba(0,0,0,0.4),0 1px 2px rgba(0,0,0,0.3);
  --shadow-md:0 4px 16px rgba(0,0,0,0.4),0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg:0 8px 32px rgba(0,0,0,0.5),0 4px 16px rgba(0,0,0,0.4);
  --shadow-accent:0 4px 20px rgba(26,47,204,0.35);
}

/* ---- RESET & BASE ---- */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Inter',sans-serif;
  background:var(--bg);
  color:var(--text);
  min-height:100vh;
  overflow-x:hidden;
  transition:background 0.25s ease, color 0.25s ease;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* ---- SIDEBAR ---- */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:240px;
  background:var(--bg2);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:100;
  transition:background 0.25s ease, border-color 0.25s ease;
}
.sidebar-header{padding:20px;border-bottom:1px solid var(--border);}
.somabra-logo{width:130px;height:auto;max-height:48px;object-fit:contain;display:block;border-radius:6px;}
.sidebar-select-wrap{padding:16px;border-bottom:1px solid var(--border);}
.sidebar-select-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.client-select{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 14px;color:var(--text);
  font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;outline:none;
  appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 12px center;
  transition:border-color 0.2s, box-shadow 0.2s;
}
.client-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,47,204,0.15);}
.client-select option{background:var(--bg2);color:var(--text);}
.sidebar-info{flex:1;padding:16px;display:flex;flex-direction:column;gap:10px;overflow-y:auto;}
.meta-badge{display:flex;align-items:center;gap:8px;background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 12px;font-size:11px;color:var(--text3);font-weight:500;}
.sidebar-footer{padding:14px;border-top:1px solid var(--border);}
.config-btn{
  width:100%;padding:9px;background:transparent;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text2);font-family:'Inter',sans-serif;font-size:13px;font-weight:500;
  cursor:pointer;transition:all 0.18s;
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin-bottom:6px;
}
.config-btn:hover{background:var(--bg3);color:var(--text);border-color:var(--border-strong);box-shadow:var(--shadow-sm);}
.config-btn:last-child{margin-bottom:0;}

/* ---- MAIN AREA ---- */
.main{margin-left:240px;min-height:100vh;display:flex;flex-direction:column;transition:margin-left 0.28s cubic-bezier(0.4,0,0.2,1);}
.topbar{
  position:sticky;top:0;
  background:var(--bg2);
  backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
  padding:14px 28px;
  display:flex;align-items:center;justify-content:space-between;z-index:50;
  transition:background 0.25s ease;
}
.topbar-left{display:flex;align-items:center;gap:14px;}
.topbar-client-logo{width:38px;height:38px;border-radius:var(--radius-sm);background:white;padding:4px;object-fit:contain;display:none;box-shadow:var(--shadow-sm);}
.topbar-client-logo.show{display:block;}
.topbar-client-initial{width:38px;height:38px;border-radius:var(--radius-sm);background:var(--accent);display:none;align-items:center;justify-content:center;font-size:16px;font-weight:800;color:white;flex-shrink:0;box-shadow:var(--shadow-sm);}
.topbar-client-initial.show{display:flex;}
.topbar-title{font-size:17px;font-weight:700;letter-spacing:-0.3px;}
.topbar-sub{font-size:11px;color:var(--accent);font-weight:500;letter-spacing:0.5px;text-transform:uppercase;margin-top:2px;}
.topbar-right{display:flex;align-items:center;gap:8px;}

/* ---- DATE RANGE ---- */
.date-range-wrap{
  display:flex;align-items:center;gap:6px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:8px 12px;
  box-shadow:var(--shadow-sm);
}
.date-range-wrap span{font-size:12px;color:var(--text3);}
.date-input{background:transparent;border:none;color:var(--text);font-family:'Inter',sans-serif;font-size:13px;cursor:pointer;outline:none;width:108px;}
.date-input::-webkit-calendar-picker-indicator{filter:invert(0.5);cursor:pointer;}

/* ---- BUTTONS ---- */
.apply-btn{
  padding:7px 14px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:6px;color:var(--text2);
  font-family:'Inter',sans-serif;font-size:12px;font-weight:600;
  cursor:pointer;transition:all 0.18s;white-space:nowrap;
}
.apply-btn:hover{background:var(--accent);color:white;border-color:var(--accent);box-shadow:var(--shadow-accent);}

.export-btn{
  display:flex;align-items:center;gap:8px;
  padding:9px 18px;background:var(--accent);border:none;
  border-radius:var(--radius-sm);color:white;
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;transition:all 0.18s;
  box-shadow:var(--shadow-accent);white-space:nowrap;
}
.export-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 24px rgba(26,47,204,0.45);}
.export-btn:active{transform:translateY(0);}

.disconnect-btn{
  background:transparent;
  border:1px solid rgba(248,113,113,0.3);color:#F87171;
  border-radius:var(--radius-sm);padding:7px 14px;
  font-family:'Inter',sans-serif;font-size:11px;font-weight:600;
  letter-spacing:1px;text-transform:uppercase;
  cursor:pointer;transition:all 0.18s;
}
.disconnect-btn:hover{background:rgba(248,113,113,0.1);border-color:rgba(248,113,113,0.5);}

.theme-toggle-btn{
  display:flex;align-items:center;justify-content:center;
  width:36px;height:36px;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);cursor:pointer;
  color:var(--text2);transition:all 0.18s;flex-shrink:0;
}
.theme-toggle-btn:hover{background:var(--card2);border-color:var(--border-strong);color:var(--accent);}

/* ---- CONTENT ---- */
.content{padding:24px 28px;flex:1;}

/* ---- METRIC CARDS ---- */
.metrics-carousel-wrap{position:relative;margin-bottom:20px;}
.metrics-carousel-inner{display:flex;gap:12px;overflow:hidden;scroll-behavior:smooth;}
.metrics-carousel-track{display:flex;gap:12px;transition:transform 0.3s ease;}
.metric-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:18px;
  transition:all 0.2s;position:relative;cursor:pointer;
  user-select:none;flex:0 0 180px;min-width:180px;
  box-shadow:var(--shadow-sm);
}
.metric-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
}
.metric-card.primary{}
.metric-card.primary::before{ content:none; }
.metric-card.active-chart{box-shadow:var(--shadow-md);}
.metric-card.active-chart::after{content:none;}
.metric-card.no-daily{cursor:default;}
.metric-card.no-daily:hover{transform:none;box-shadow:var(--shadow-sm);}
.metric-label{font-size:10px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.metric-value{font-size:22px;font-weight:700;font-family:'JetBrains Mono',monospace;line-height:1;margin-bottom:4px;letter-spacing:-0.5px;}
.metric-sub{font-size:10px;color:var(--text3);}
.metric-hint{font-size:9px;color:var(--accent);margin-top:4px;opacity:0.8;}

.carousel-btn{
  position:absolute;top:50%;transform:translateY(-50%);
  width:32px;height:32px;
  background:var(--card2);border:1px solid var(--border);
  border-radius:50%;color:var(--text);font-size:14px;cursor:pointer;
  z-index:10;display:flex;align-items:center;justify-content:center;
  transition:all 0.18s;box-shadow:var(--shadow-sm);
}
.carousel-btn:hover{background:var(--accent);border-color:var(--accent);box-shadow:var(--shadow-accent);}
.carousel-btn.prev{left:-16px;}
.carousel-btn.next{right:-16px;}
.carousel-btn:disabled{opacity:0.3;cursor:default;}
.carousel-btn:disabled:hover{background:var(--card2);border-color:var(--border);box-shadow:none;}

/* ---- CHART ---- */
.chart-section{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:20px;
  margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.chart-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:16px;flex-wrap:wrap;gap:8px;}
.chart-title{font-size:13px;font-weight:600;color:var(--text2);display:flex;align-items:center;gap:8px;}
.chart-legend{display:flex;gap:6px;flex-wrap:wrap;}
.legend-item{
  display:flex;align-items:center;gap:5px;
  font-size:11px;color:var(--text2);font-weight:500;
  background:var(--bg3);border:1px solid var(--border);
  border-radius:20px;padding:3px 10px;cursor:pointer;
  transition:all 0.18s;
}
.legend-item:hover{border-color:var(--border-strong);color:var(--text);}
.legend-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}

/* ---- PIE ROW ---- */
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
.pie-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;box-shadow:var(--shadow-sm);}
.pie-card canvas{max-height:180px;}
.pie-legend{margin-top:12px;display:flex;flex-direction:column;gap:6px;}
.pie-legend-item{display:flex;align-items:center;justify-content:space-between;font-size:11px;padding:4px 0;border-bottom:1px solid var(--border);}
.pie-legend-item:last-child{border-bottom:none;}
.pie-legend-label{display:flex;align-items:center;gap:6px;color:var(--text2);flex:1;min-width:0;}
.pie-legend-label span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.pie-legend-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.pie-legend-value{font-family:'JetBrains Mono',monospace;font-weight:600;color:var(--accent2);white-space:nowrap;margin-left:8px;}

/* ---- CATEGORIAS DE CAMPANHA ---- */
.cat-section{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:20px;
  margin-bottom:16px;box-shadow:var(--shadow-sm);
}
.cat-section .section-title{margin-bottom:14px;}
.cat-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(180px,1fr));
  gap:12px;
}
.cat-card{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:14px;cursor:pointer;
  transition:all 0.2s;
  position:relative;
  user-select:none;
}
.cat-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow-md);
  filter:brightness(1.05);
}
.cat-card.cat-card-open{
  box-shadow:var(--shadow-md);
}
.cat-card-header{
  display:flex;align-items:center;gap:10px;margin-bottom:10px;
}
.cat-card-icon{
  width:34px;height:34px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.cat-card-title{flex:1;min-width:0;}
.cat-card-label{
  font-size:12px;font-weight:700;color:var(--text);
  letter-spacing:0.3px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.cat-card-sub{
  font-size:10px;color:var(--text3);margin-top:2px;
}
.cat-card-arrow{
  font-size:11px;color:var(--text3);
  transition:transform 0.2s;flex-shrink:0;
}
.cat-card-open .cat-card-arrow{transform:rotate(90deg);}
.cat-card-value{
  font-size:18px;font-weight:800;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:-0.5px;line-height:1;
  margin-bottom:4px;
}
.cat-card-hint{
  font-size:9px;color:var(--text3);opacity:0.7;
}
.cat-expand{
  margin-top:14px;
}
.cat-expand-inner{
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  padding:18px;
}
.cat-expand-title{
  font-size:14px;font-weight:700;
  display:flex;align-items:center;gap:8px;
  margin-bottom:14px;
  flex-wrap:wrap;
}
.cat-expand-meta{
  font-size:11px;color:var(--text3);font-weight:500;
  margin-left:auto;
  font-family:'JetBrains Mono',monospace;
}
.cat-kpi-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(140px,1fr));
  gap:10px;margin-bottom:14px;
}
.cat-kpi{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:10px 12px;
}
.cat-kpi-label{
  font-size:9px;font-weight:600;
  letter-spacing:1.2px;text-transform:uppercase;
  display:flex;align-items:center;gap:5px;
  margin-bottom:6px;
}
.cat-kpi-value{
  font-size:16px;font-weight:700;
  font-family:'JetBrains Mono',monospace;
  letter-spacing:-0.3px;color:var(--text);
}
.cat-chart-wrap{
  border:1px solid var(--border);
  border-radius:var(--radius-sm);
  padding:14px;background:rgba(0,0,0,0.02);
}
body.dark-mode .cat-chart-wrap{background:rgba(255,255,255,0.02);}
.cat-chart-title{
  font-size:11px;font-weight:600;
  letter-spacing:0.5px;
  display:flex;align-items:center;gap:6px;
  margin-bottom:10px;
}
.cat-chart-canvas-box{width:100%;}
.cat-chart-canvas-box > canvas{
  position:absolute!important;
  top:0;left:0;width:100%!important;height:100%!important;
}
@media (max-width:640px){
  .cat-grid{grid-template-columns:repeat(auto-fill,minmax(150px,1fr));}
  .cat-kpi-grid{grid-template-columns:repeat(auto-fill,minmax(120px,1fr));}
  .cat-card-value{font-size:16px;}
}

/* ---- ADS ---- */
.ads-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;margin-bottom:16px;box-shadow:var(--shadow-sm);}
.section-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;gap:8px;}
.ads-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px;}
.ad-card{background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);overflow:hidden;transition:all 0.2s;box-shadow:var(--shadow-sm);}
.ad-card:hover{border-color:rgba(26,47,204,0.2);transform:translateY(-2px);box-shadow:var(--shadow-md);}
.ad-thumb{width:100%;height:110px;object-fit:cover;}
.ad-thumb-placeholder{width:100%;height:110px;background:linear-gradient(135deg,var(--bg2),var(--card));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text3);font-size:11px;}
.ad-info{padding:10px;}
.ad-campaign{font-size:10px;color:var(--text3);margin-bottom:3px;}
.ad-title{font-size:12px;font-weight:600;margin-bottom:6px;line-height:1.4;}
.ad-stats{display:flex;gap:10px;flex-wrap:wrap;}
.ad-stat{font-size:10px;color:var(--text3);}
.ad-stat span{font-family:'JetBrains Mono',monospace;color:var(--text);font-weight:500;}

/* ---- TABLE ---- */
.table-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);padding:20px;margin-bottom:16px;overflow-x:auto;box-shadow:var(--shadow-sm);}
table{width:100%;border-collapse:collapse;}
th{text-align:left;font-size:10px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);padding:8px 12px;border-bottom:2px solid var(--border-strong);white-space:nowrap;transition:color 0.15s;border-right:1px solid var(--border);}
th:last-child{border-right:none;}
th[onclick]:hover{color:var(--accent);}
td{padding:11px 12px;font-size:13px;border-bottom:1px solid var(--border);border-right:1px solid var(--border);}
td:last-child{border-right:none;}
tr:last-child td{border-bottom:none;}
tr:hover td{background:rgba(26,47,204,0.03);}
.vagas-row td{color:rgba(245,158,11,0.8)!important;background:rgba(245,158,11,0.04);}
.vagas-row:hover td{background:rgba(245,158,11,0.07)!important;}
.vagas-tag{font-size:9px;background:rgba(245,158,11,0.15);color:var(--orange);border-radius:4px;padding:2px 6px;margin-left:6px;font-weight:600;}
.forms-row td{color:rgba(139,92,246,0.85)!important;background:rgba(139,92,246,0.04);}
.forms-row:hover td{background:rgba(139,92,246,0.08)!important;}
.forms-tag{font-size:9px;background:rgba(139,92,246,0.18);color:#a78bfa;border-radius:4px;padding:2px 6px;margin-left:6px;font-weight:600;}
.camp-status{font-size:10px;margin-right:5px;}
.camp-status.active{color:var(--green);}
.camp-status.paused{color:var(--red);}
.camp-status.inactive{color:var(--text3);}

/* ---- LOADING / EMPTY ---- */
.loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:300px;gap:14px;color:var(--text3);}
.spinner{width:36px;height:36px;border:3px solid var(--border);border-top-color:var(--accent);border-radius:50%;animation:spin 0.8s linear infinite;}
@keyframes spin{to{transform:rotate(360deg);}}
.empty-state{text-align:center;padding:60px 20px;color:var(--text3);}
.empty-state h3{font-size:18px;margin-bottom:8px;color:var(--text2);}
.empty-state p{font-size:14px;line-height:1.6;}

/* ---- MODALS ---- */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.65);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);z-index:1000;align-items:center;justify-content:center;}
.modal-overlay.show{display:flex;}
.modal{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-xl);padding:32px;width:480px;max-width:90vw;box-shadow:var(--shadow-lg);}
.modal h2{font-size:18px;font-weight:700;margin-bottom:20px;letter-spacing:-0.3px;}
.form-group{margin-bottom:16px;}
.form-label{display:block;font-size:11px;font-weight:600;letter-spacing:1px;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.form-input{
  width:100%;background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:11px 14px;
  color:var(--text);font-family:'Inter',sans-serif;font-size:14px;
  outline:none;transition:border-color 0.2s, box-shadow 0.2s;
}
.form-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,47,204,0.15);}
.form-input::placeholder{color:var(--text3);}
.modal-note{font-size:12px;color:var(--text3);background:var(--bg3);border-radius:var(--radius-sm);padding:10px 12px;margin-bottom:16px;line-height:1.6;border:1px solid var(--border);}
.modal-actions{display:flex;gap:10px;margin-top:24px;}
.btn-primary{
  flex:1;padding:12px;background:var(--accent);border:none;
  border-radius:var(--radius-sm);color:white;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:600;
  cursor:pointer;transition:all 0.18s;box-shadow:var(--shadow-accent);
}
.btn-primary:hover{background:var(--accent-hover);box-shadow:0 6px 24px rgba(26,47,204,0.45);transform:translateY(-1px);}
.btn-secondary{
  padding:12px 18px;background:transparent;
  border:1px solid var(--border);border-radius:var(--radius-sm);
  color:var(--text2);font-family:'Inter',sans-serif;font-size:14px;
  cursor:pointer;transition:all 0.18s;
}
.btn-secondary:hover{background:var(--bg3);color:var(--text);border-color:var(--border-strong);}

/* ---- HAMBÚRGUER + SIDEBAR COLAPSÁVEL ---- */
.hamburger-btn{
  display:flex;align-items:center;justify-content:center;
  width:40px;height:40px;
  background:var(--bg3);border:1px solid var(--border);border-radius:var(--radius-sm);
  cursor:pointer;flex-shrink:0;transition:all 0.18s;box-shadow:var(--shadow-sm);
}
.hamburger-btn:hover{background:var(--card2);border-color:var(--border-strong);}
.hamburger-btn svg{width:20px;height:20px;stroke:var(--text2);transition:stroke 0.18s;}
.hamburger-btn:hover svg{stroke:var(--accent);}

.sidebar-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,0.55);backdrop-filter:blur(4px);z-index:99;}
.sidebar-overlay.show{display:block;}

.sidebar{width:240px;transition:width 0.28s cubic-bezier(0.4,0,0.2,1);overflow:hidden;}

.sidebar-select-label,
.meta-badge,
.sidebar-select-wrap .client-select,
.config-btn-label,
.sidebar-logo-text{
  transition:opacity 0.18s ease, transform 0.18s ease;opacity:1;white-space:nowrap;overflow:hidden;
}

body.sidebar-collapsed .sidebar{width:56px;}
body.sidebar-collapsed .main{margin-left:56px;}
body.sidebar-collapsed .sidebar-select-label,
body.sidebar-collapsed .meta-badge,
body.sidebar-collapsed #balanceCard,
body.sidebar-collapsed .sidebar-logo-text,
body.sidebar-collapsed .config-btn-label{opacity:0;pointer-events:none;}
body.sidebar-collapsed .sidebar-header{padding:14px;justify-content:center;}
body.sidebar-collapsed .sidebar-select-wrap{padding:10px;display:flex;justify-content:center;}
body.sidebar-collapsed .sidebar-select-wrap .client-select{opacity:0;width:0;padding:0;border:none;}
body.sidebar-collapsed .sidebar-info{padding:8px;align-items:center;}
body.sidebar-collapsed .sidebar-footer{padding:10px;align-items:center;}
body.sidebar-collapsed .config-btn{justify-content:center;padding:10px;width:36px;border-radius:var(--radius-sm);}
body.sidebar-collapsed .somabra-logo{opacity:0;width:0;}
body.sidebar-collapsed .sidebar-collapsed-icon{display:flex !important;}

.sidebar-collapsed-icon{
  display:none;width:32px;height:32px;background:var(--accent);border-radius:var(--radius-sm);
  align-items:center;justify-content:center;font-size:16px;font-weight:800;color:white;flex-shrink:0;
}

.main{margin-left:240px;transition:margin-left 0.28s cubic-bezier(0.4,0,0.2,1);}

/* ---- TABLET ---- */
@media(max-width:1024px){
  .sidebar{width:200px;}
  .main{margin-left:200px;}
  body.sidebar-collapsed .sidebar{width:56px;}
  body.sidebar-collapsed .main{margin-left:56px;}
  .topbar{padding:12px 18px;}
  .content{padding:16px 18px;}
}

/* ---- MOBILE ---- */
@media(max-width:768px){
  .sidebar{
    width:280px !important;transform:translateX(-100%);
    transition:transform 0.3s cubic-bezier(0.4,0,0.2,1), width 0s;
    z-index:200;box-shadow:4px 0 30px rgba(0,0,0,0.4);
  }
  .sidebar.open{transform:translateX(0) !important;}
  body.sidebar-collapsed .sidebar{width:280px !important;}
  body.sidebar-collapsed .sidebar-select-label,
  body.sidebar-collapsed .client-card,
  body.sidebar-collapsed .meta-badge,
  body.sidebar-collapsed #balanceCard,
  body.sidebar-collapsed .sidebar-logo-text,
  body.sidebar-collapsed .config-btn-label{opacity:1;pointer-events:auto;}
  body.sidebar-collapsed .sidebar-header{padding:20px;justify-content:flex-start;}
  body.sidebar-collapsed .sidebar-select-wrap{padding:16px;display:block;}
  body.sidebar-collapsed .sidebar-select-wrap .client-select{opacity:1;width:100%;padding:10px 14px;border:1px solid var(--border);}
  body.sidebar-collapsed .sidebar-info{padding:16px;align-items:stretch;}
  body.sidebar-collapsed .sidebar-footer{padding:14px;align-items:stretch;}
  body.sidebar-collapsed .config-btn{justify-content:center;padding:10px;width:100%;border-radius:var(--radius-sm);}
  body.sidebar-collapsed .somabra-logo{opacity:1;width:110px;}
  .somabra-logo{width:110px;max-height:44px;}
  body.sidebar-collapsed .sidebar-collapsed-icon{display:none !important;}
  .main{margin-left:0 !important;}
  .topbar{padding:10px 14px;flex-wrap:wrap;gap:8px;}
  .topbar-left{flex:1;min-width:0;}
  .topbar-title{font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
  .topbar-sub{font-size:10px;}
  .topbar-client-logo{width:30px;height:30px;}
  .topbar-right{width:100%;order:3;flex-direction:column;gap:6px;}
  .date-range-wrap{width:100%;padding:7px 10px;gap:4px;box-sizing:border-box;}
  .date-input{flex:1;min-width:0;font-size:12px;}
  .apply-btn{padding:6px 10px;font-size:11px;white-space:nowrap;}
  .disconnect-btn{width:100%;text-align:center;padding:8px 10px;}
  .export-btn{padding:8px 12px;font-size:12px;}
  .content{padding:12px 14px;}
  .metric-card{flex:0 0 150px;min-width:150px;padding:12px;}
  .metric-value{font-size:18px;}
  .charts-row{grid-template-columns:1fr;}
  .table-section{padding:12px 10px;}
  table{font-size:12px;}
  td,th{padding:8px 8px;}
  .vagas-grid{grid-template-columns:1fr;}
  .modal{width:95vw;padding:20px 16px;border-radius:var(--radius-lg);}
  .champ-card{width:170px;}
}

@media(max-width:400px){
  .date-input{font-size:11px;}
  .metric-card{flex:0 0 140px;min-width:140px;}
  .topbar-title{font-size:13px;}
  .export-btn{font-size:11px;padding:7px 10px;}
}

/* ---- PRINT ---- */
@media print{
  .sidebar,.topbar{display:none!important;}
  .main{margin-left:0;}
  .content{padding:20px;}
  .print-header{display:block!important;}
  .carousel-btn{display:none!important;}
  .metrics-carousel-track{flex-wrap:wrap;transform:none!important;}
  .metric-card{flex:0 0 160px;}
  body{background:white;color:black;}
  .metric-card,.chart-section,.ads-section,.table-section,.pie-card,.vagas-section{background:white!important;border:1px solid #ddd!important;page-break-inside:avoid;}
  .metric-value{color:black!important;}
}

/* ---- ADSETS / TABLE ---- */
.adset-row td{background:rgba(0,0,0,0.03)!important;}
body.dark-mode .adset-row td{background:rgba(0,0,0,0.15)!important;}
.adset-table{width:100%;border-collapse:collapse;margin:0;}
.adset-table th{font-size:9px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--text3);padding:6px 12px 6px 40px;border-bottom:1px solid var(--border);background:rgba(0,0,0,0.04);}
.adset-table td{font-size:12px;padding:8px 12px 8px 40px;border-bottom:1px solid rgba(0,0,0,0.04);color:var(--text2);}
body.dark-mode .adset-table td{border-bottom:1px solid rgba(255,255,255,0.03);}
.adset-table tr:last-child td{border-bottom:none;}
.adset-table tr:hover td{background:rgba(26,47,204,0.04);}
.campaign-row.expanded .expand-icon{transform:rotate(90deg);display:inline-block;}
.expand-icon{display:inline-block;transition:transform 0.2s;}

/* ---- CAMPAIGN FILTER ---- */
.campaign-filter-wrap{margin-bottom:20px;}
.campaign-filter-label{font-size:10px;font-weight:600;letter-spacing:2px;text-transform:uppercase;color:var(--text3);margin-bottom:8px;}
.campaign-filter-select{
  width:100%;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:10px 16px;
  color:var(--text);font-family:'Inter',sans-serif;font-size:13px;
  cursor:pointer;outline:none;appearance:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%2394A3B8' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;transition:border-color 0.2s, box-shadow 0.2s;
}
.campaign-filter-select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,47,204,0.15);}
.campaign-filter-select option{background:var(--bg2);color:var(--text);}

/* ---- CHAMPIONS ---- */
.champions-section{margin-bottom:16px;}
.champions-title{font-size:13px;font-weight:600;color:var(--text2);margin-bottom:14px;display:flex;align-items:center;gap:8px;flex-wrap:wrap;}
.champions-filter{display:flex;gap:8px;flex-wrap:wrap;}
.champ-filter-btn{padding:6px 14px;background:var(--bg3);border:1px solid var(--border);border-radius:20px;color:var(--text3);font-family:'Inter',sans-serif;font-size:12px;font-weight:500;cursor:pointer;transition:all 0.18s;}
.champ-filter-btn.active{background:var(--accent);border-color:var(--accent);color:white;box-shadow:var(--shadow-accent);}
.champ-filter-btn:hover{border-color:var(--border-strong);color:var(--text);}
.champions-carousel{display:flex;align-items:center;justify-content:center;gap:20px;}
.champions-carousel .carousel-btn{position:static;transform:none;width:38px;height:38px;flex-shrink:0;}
.champ-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;width:200px;flex-shrink:0;position:relative;box-shadow:var(--shadow-sm);transition:all 0.2s;}
.champ-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.champ-card.champion-1st{border-color:var(--accent2);box-shadow:0 0 16px rgba(245,158,11,0.2);}
.champ-card.champion-2nd{border-color:rgba(26,47,204,0.4);}
.champ-badge{position:absolute;top:6px;left:6px;padding:3px 7px;border-radius:5px;font-size:9px;font-weight:800;letter-spacing:0.5px;text-transform:uppercase;z-index:2;}
.champ-badge.gold{background:var(--accent2);color:#000;}
.champ-badge.silver{background:var(--accent);color:#fff;}
.champ-img{width:100%;height:120px;object-fit:cover;display:block;}
.champ-img-placeholder{width:100%;height:120px;background:linear-gradient(135deg,var(--bg2),var(--bg3));display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;color:var(--text3);font-size:11px;}
.champ-info{padding:8px 10px;}
.champ-name{font-size:11px;font-weight:600;margin-bottom:5px;line-height:1.3;color:var(--text);}
.champ-metrics{display:grid;grid-template-columns:1fr 1fr;gap:4px;}
.champ-metric{background:var(--bg3);border-radius:5px;padding:4px 6px;}
.champ-metric-label{font-size:8px;color:var(--text3);font-weight:600;letter-spacing:0.8px;text-transform:uppercase;margin-bottom:1px;}
.champ-metric-value{font-size:11px;font-weight:700;font-family:'JetBrains Mono',monospace;}

/* ---- PRINT HEADER ---- */
.print-header{display:none;padding:0 0 20px;border-bottom:2px solid var(--accent);margin-bottom:20px;}

/* ---- SCROLLBAR ---- */
::-webkit-scrollbar{width:5px;height:5px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
::-webkit-scrollbar-thumb:hover{background:var(--border-strong);}

/* ---- LOGIN ---- */
.login-overlay{position:fixed;inset:0;background:var(--bg);display:flex;align-items:center;justify-content:center;z-index:9999;padding:20px;}
.login-box{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-xl);padding:48px 40px;
  width:100%;max-width:400px;display:flex;flex-direction:column;
  align-items:center;gap:8px;box-shadow:var(--shadow-lg);
}
.login-logo-wrap{margin-bottom:12px;}
.login-logo{height:56px;width:auto;display:block;}
.login-title{font-size:20px;font-weight:700;color:var(--text);margin:0;text-align:center;letter-spacing:-0.3px;}
.login-subtitle{font-size:13px;color:var(--text3);margin:0 0 12px;text-align:center;}
.login-form{width:100%;display:flex;flex-direction:column;gap:14px;}
.login-field{display:flex;flex-direction:column;gap:6px;}
.login-label{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--text3);}
.login-input{
  background:var(--bg3);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:12px 16px;
  color:var(--text);font-family:'Inter',sans-serif;font-size:14px;
  outline:none;transition:border-color 0.2s, box-shadow 0.2s;width:100%;box-sizing:border-box;
}
.login-input:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(26,47,204,0.15);}
.login-input::placeholder{color:var(--text3);}
.login-error{font-size:12px;color:#F87171;text-align:center;display:none;padding:8px 12px;background:rgba(248,113,113,0.08);border-radius:var(--radius-sm);border:1px solid rgba(248,113,113,0.2);}
.login-error.visible{display:block;}
.login-btn{
  background:var(--accent);color:white;border:none;
  border-radius:var(--radius-sm);padding:14px;
  font-family:'Inter',sans-serif;font-size:14px;font-weight:700;
  letter-spacing:0.5px;cursor:pointer;
  transition:all 0.18s;margin-top:4px;
  box-shadow:var(--shadow-accent);
}
.login-btn:hover{background:var(--accent-hover);transform:translateY(-1px);box-shadow:0 6px 24px rgba(26,47,204,0.45);}
.login-btn:active{transform:translateY(0);}
.login-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none;}
.forgot-btn{background:none;border:none;color:var(--text3);font-family:'Inter',sans-serif;font-size:12px;cursor:pointer;padding:6px 0;text-align:center;transition:color 0.2s;text-decoration:underline;}
.forgot-btn:hover{color:var(--accent);}
.login-msg{font-size:12px;text-align:center;min-height:18px;padding:2px 0;}
.login-msg.success{color:var(--green);}
.login-msg.error{color:var(--red);}
.login-overlay.hidden{display:none;}

/* ---- USERS TABLE ---- */
.users-table{width:100%;border-collapse:collapse;font-size:13px;}
.users-table th{text-align:left;padding:8px 10px;color:var(--text3);font-size:11px;letter-spacing:1px;text-transform:uppercase;border-bottom:1px solid var(--border);}
.users-table td{padding:10px 10px;border-bottom:1px solid rgba(0,0,0,0.05);vertical-align:middle;}
body.dark-mode .users-table td{border-bottom:1px solid rgba(255,255,255,0.04);}
.users-table tr:last-child td{border-bottom:none;}
.user-role-badge{display:inline-block;padding:2px 8px;border-radius:4px;font-size:10px;font-weight:700;letter-spacing:1px;text-transform:uppercase;}
.user-role-badge.admin{background:rgba(26,47,204,0.15);color:var(--accent);}
.user-role-badge.client{background:rgba(0,0,0,0.06);color:var(--text3);}
body.dark-mode .user-role-badge.client{background:rgba(255,255,255,0.06);}
.user-action-btn{background:none;border:1px solid var(--border);border-radius:6px;padding:4px 10px;font-size:11px;cursor:pointer;color:var(--text2);font-family:'Inter',sans-serif;transition:all 0.15s;margin-left:4px;}
.user-action-btn:hover{border-color:var(--accent);color:var(--accent);}
.user-action-btn.danger:hover{border-color:var(--red);color:var(--red);}

/* ---- DISCONNECT BUTTON ---- */
.disconnect-btn{background:transparent;border:1px solid rgba(248,113,113,0.3);color:#F87171;border-radius:var(--radius-sm);padding:6px 14px;font-family:'Inter',sans-serif;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;cursor:pointer;transition:all 0.18s;}
.disconnect-btn:hover{background:rgba(248,113,113,0.08);border-color:rgba(248,113,113,0.5);}

/* ---- COLLAPSIBLE SECTIONS ---- */
.collapsible-section{margin-bottom:16px;background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm);}
.collapsible-header{display:flex;align-items:center;justify-content:space-between;padding:14px 20px;cursor:pointer;font-size:13px;font-weight:600;color:var(--text2);letter-spacing:0.3px;user-select:none;transition:background 0.15s;}
.collapsible-header:hover{background:rgba(26,47,204,0.04);}
.collapse-arrow{font-size:12px;color:var(--text3);transition:transform 0.2s;display:inline-block;}
.collapsible-body{padding:0 20px 20px;}
.collapsible-body .charts-row{margin-top:4px;margin-bottom:0;}

/* ---- BREAKDOWNS ---- */
.breakdown-bars-wrap{width:100%;}
.breakdown-empty{font-size:12px;color:var(--text3);text-align:center;padding:16px 0;}
.breakdown-plat-block{margin-bottom:16px;}
.breakdown-plat-block:last-child{margin-bottom:0;}
.breakdown-plat-header{display:flex;align-items:center;gap:12px;margin-bottom:6px;}
.breakdown-plat-name{font-size:12px;font-weight:700;min-width:120px;letter-spacing:0.3px;}
.breakdown-plat-pct{font-size:12px;font-weight:700;font-family:'JetBrains Mono',monospace;color:var(--text2);min-width:40px;text-align:right;}
.breakdown-pos-list{padding-left:12px;border-left:2px solid var(--border);margin-left:8px;display:flex;flex-direction:column;gap:4px;}
.breakdown-pos-row{display:flex;align-items:center;gap:10px;}
.breakdown-pos-label{font-size:11px;color:var(--text3);min-width:110px;}
.breakdown-pos-pct{font-size:11px;color:var(--text3);font-family:'JetBrains Mono',monospace;min-width:32px;text-align:right;}
.breakdown-bar-wrap{flex:1;height:6px;background:var(--bg3);border-radius:3px;overflow:hidden;position:relative;}
.breakdown-bar-wrap.main{height:8px;}
.breakdown-bar-fill{height:100%;border-radius:3px;transition:width 0.4s ease;}
.breakdown-age-grid{display:flex;flex-direction:column;gap:8px;}
.breakdown-age-row{display:flex;align-items:center;gap:12px;}
.breakdown-age-label{font-size:12px;color:var(--text2);min-width:80px;font-family:'JetBrains Mono',monospace;}
.breakdown-age-pct{font-size:12px;font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--text2);min-width:40px;text-align:right;}

/* ---- INSTAGRAM CARDS ---- */
.metric-card.ig-card{border-color:rgba(225,48,108,0.2);background:linear-gradient(135deg,var(--card),rgba(225,48,108,0.03));}
.metric-card.ig-card:hover{border-color:rgba(225,48,108,0.35);}
.ig-icon{width:13px;height:13px;vertical-align:middle;margin-right:4px;display:inline-block;}

/* ---- DIST SUB-SECTIONS ---- */
.dist-sub-section{margin-top:20px;padding-top:16px;border-top:1px solid var(--border);}
.dist-sub-title{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--text3);margin-bottom:12px;text-transform:uppercase;}

.breakdown-bars-wrap.compact .breakdown-age-row{padding:2px 0;}
.breakdown-bars-wrap.compact .breakdown-age-label{font-size:11px;min-width:60px;}
.breakdown-bars-wrap.compact .breakdown-bar-wrap{height:5px;}
.breakdown-bars-wrap.compact .breakdown-age-pct{font-size:11px;min-width:36px;}

/* ---- PLATFORM COMPACT ---- */
.plat-compact-grid{display:flex;flex-direction:column;gap:7px;}
.plat-compact-row{display:flex;align-items:center;gap:8px;}
.plat-compact-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0;}
.plat-compact-label{font-size:12px;color:var(--text2);min-width:140px;white-space:nowrap;}
.plat-compact-pos{font-size:10px;color:var(--text3);font-weight:400;}
.plat-compact-pct{font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--text2);min-width:36px;text-align:right;}

/* ---- CHART HEIGHT ---- */
@media(min-width:769px){
  #mainChart{max-height:200px!important;}
  .chart-section{padding:16px 20px;}
}

/* ---- DISTRIBUTION SECTION HEADER ---- */
.collapsible-section:has(#chartsRow) .collapsible-header{
  background:linear-gradient(90deg,rgba(26,47,204,0.07),transparent);
  border-bottom:1px solid rgba(26,47,204,0.12);color:var(--accent);
}
.collapsible-section:has(#chartsRow) .collapsible-header .collapse-arrow{color:var(--accent);}
.collapsible-section.dist-section .collapsible-header{
  background:linear-gradient(90deg,rgba(26,47,204,0.07),transparent);
  border-bottom:1px solid rgba(26,47,204,0.12);color:var(--accent);
}

/* ---- CHAMPIONS GRID ---- */
.champ-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(155px,1fr));gap:10px;padding:4px 0;}
.champ-grid-card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);overflow:hidden;position:relative;box-shadow:var(--shadow-sm);transition:all 0.2s;}
.champ-grid-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-md);}
.champ-grid-card.champion-1st{border-color:var(--accent2);box-shadow:0 0 12px rgba(245,158,11,0.2);}
.champ-grid-card.champion-2nd{border-color:rgba(26,47,204,0.4);}
.champ-img-wrap{position:relative;overflow:hidden;}
.champ-img-wrap .champ-img{width:100%;height:100px;object-fit:cover;display:block;cursor:zoom-in;transition:transform 0.2s;}
.champ-img-wrap .champ-img-placeholder{width:100%;height:100px;background:linear-gradient(135deg,var(--bg2),var(--bg3));display:flex;align-items:center;justify-content:center;color:var(--text3);font-size:20px;}
.champ-img-wrap .champ-badge{position:absolute;top:5px;left:5px;}

/* ---- IMG PREVIEW OVERLAY ---- */
#imgPreviewOverlay{position:fixed;z-index:9999;pointer-events:none;display:none;border-radius:10px;overflow:hidden;box-shadow:0 8px 40px rgba(0,0,0,0.7);border:2px solid rgba(255,255,255,0.12);background:#111;transition:opacity 0.12s;}

/* ============================================================
   MAIN TAB BAR (Tráfego Pago / Orgânico)
   ============================================================ */
.main-tab-bar{
  display:flex;align-items:center;gap:6px;
  padding:6px;
  background:var(--card);
  border:1px solid var(--border);
  border-radius:var(--radius-md);
  margin-bottom:20px;
  width:fit-content;
}
.main-tab-btn{
  padding:7px 18px;
  border:none;
  border-radius:var(--radius-sm, 8px);
  background:transparent;
  color:var(--text3);
  font-family:'Inter',sans-serif;
  font-size:13px;
  font-weight:600;
  cursor:pointer;
  transition:all 0.18s;
  letter-spacing:0.01em;
}
.main-tab-btn:hover{ background:var(--bg2); color:var(--text2); }
.main-tab-btn.active{ background:var(--accent); color:#fff; box-shadow:0 2px 8px rgba(var(--accent-rgb),0.35); }

/* ============================================================
   ORGÂNICO — layout geral
   ============================================================ */
.org-section{ margin-bottom:28px; }
.org-sub-tab-bar{
  display:flex;gap:4px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.org-sub-tab-btn{
  padding:8px 16px;
  border:none;background:transparent;
  color:var(--text3);
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all 0.18s;
}
.org-sub-tab-btn:hover{ color:var(--text2); }
.org-sub-tab-btn.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* KPI row */
.org-kpi-row{
  display:flex;flex-wrap:wrap;gap:10px;
  margin-bottom:24px;
}
.org-kpi-card{
  flex:1;min-width:130px;max-width:200px;
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:14px 16px;
}
.org-kpi-label{font-size:10px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:6px;}
.org-kpi-value{font-size:22px;font-weight:800;font-family:'JetBrains Mono',monospace;color:var(--text1);}
.org-kpi-sub{font-size:10px;color:var(--text3);margin-top:3px;}
.org-kpi-delta-pos{color:var(--green);font-size:11px;font-weight:600;margin-top:3px;}
.org-kpi-delta-neg{color:var(--red);font-size:11px;font-weight:600;margin-top:3px;}

/* Gráficos e seções */
.org-chart-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:18px 20px;
  margin-bottom:16px;
}
.org-chart-title{font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;color:var(--text3);margin-bottom:14px;}
.org-audience-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-bottom:16px;}
@media(max-width:600px){ .org-audience-row{grid-template-columns:1fr;} }

/* Cidades */
.org-cities-list{display:flex;flex-direction:column;gap:8px;}
.org-city-row{display:flex;align-items:center;gap:8px;}
.org-city-name{font-size:12px;color:var(--text2);min-width:120px;}
.org-city-bar-wrap{flex:1;height:5px;background:var(--bg3);border-radius:3px;overflow:hidden;}
.org-city-bar-fill{height:100%;border-radius:3px;background:var(--accent);}
.org-city-pct{font-size:11px;font-weight:600;font-family:'JetBrains Mono',monospace;color:var(--text2);min-width:36px;text-align:right;}

/* Posts / Stories / Reels grid */
.org-posts-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:12px;
}
.org-sort-bar{display:flex;gap:6px;}
.org-sort-btn{
  padding:4px 10px;font-size:11px;font-weight:600;
  border:1px solid var(--border);border-radius:20px;
  background:var(--bg2);color:var(--text3);cursor:pointer;
  transition:all 0.15s;
}
.org-sort-btn:hover{ color:var(--text2); }
.org-sort-btn.active{ background:var(--accent);border-color:var(--accent);color:#fff; }

.org-posts-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.org-post-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  transition:all 0.2s;
}
.org-post-card:hover{ transform:translateY(-2px);box-shadow:var(--shadow-md); }
.org-post-thumb{
  width:100%;height:110px;object-fit:cover;display:block;
  cursor:zoom-in;background:var(--bg2);
}
.org-post-placeholder{
  width:100%;height:110px;display:flex;align-items:center;justify-content:center;
  font-size:22px;
}
.org-post-meta{padding:8px 10px;}
.org-post-stat{font-size:11px;color:var(--text3);display:flex;justify-content:space-between;line-height:1.7;}
.org-post-stat b{color:var(--text2);font-family:'JetBrains Mono',monospace;font-size:11px;}

.org-section-title{
  font-size:12px;font-weight:700;letter-spacing:1.2px;text-transform:uppercase;
  color:var(--text3);margin-bottom:12px;margin-top:24px;
  padding-top:18px;border-top:1px solid var(--border);
}
.org-section-title:first-child{margin-top:0;padding-top:0;border-top:none;}

/* Follower chart */
.org-follower-bar-wrap{ position:relative; height:180px; }

/* Wrappers de altura controlada para charts orgânico */
.org-chart-wrap{ position:relative; height:140px; }
.org-chart-sm{ height:150px; }
@media(max-width:768px){
  .org-chart-wrap{ height:110px; }
  .org-chart-sm{ height:130px; }
  .org-audience-row{ grid-template-columns:1fr!important; }
}

/* Empty organic */
.org-empty{
  padding:48px 24px;text-align:center;color:var(--text3);
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-md);
}
.org-empty h3{ font-size:18px;color:var(--text2);margin-bottom:8px; }

/* ============================================================
   ORGÂNICO — classes usadas por organic.js
   ============================================================ */
/* Sub-tabs (Instagram / Facebook) */
.org-sub-tabs{
  display:flex;gap:4px;
  border-bottom:1px solid var(--border);
  margin-bottom:20px;
}
.org-sub-tab{
  display:flex;align-items:center;gap:7px;
  padding:8px 16px;
  border:none;background:transparent;
  color:var(--text3);
  font-family:'Inter',sans-serif;font-size:13px;font-weight:600;
  cursor:pointer;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  transition:all 0.18s;
}
.org-sub-tab:hover{ color:var(--text2); }
.org-sub-tab.active{ color:var(--accent); border-bottom-color:var(--accent); }

/* Card container */
.org-card{
  background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius-md);padding:18px 20px;
  margin-bottom:16px;
}
.org-card-title{
  font-size:12px;font-weight:700;letter-spacing:1.2px;
  text-transform:uppercase;color:var(--text3);margin-bottom:14px;
}
.org-card-header{
  display:flex;align-items:center;justify-content:space-between;
  margin-bottom:14px;
}
.org-sort-wrap{
  display:flex;align-items:center;gap:6px;
  font-size:12px;color:var(--text3);
}
.org-sort-select{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:6px;color:var(--text2);
  font-size:11px;padding:3px 8px;cursor:pointer;
}

/* Grid de posts */
.org-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(160px,1fr));
  gap:12px;
}
.org-post-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;
  transition:all 0.2s;
}
.org-post-card:hover{ transform:translateY(-2px);box-shadow:var(--shadow-md); }
.org-post-thumb{
  width:100%;height:110px;object-fit:cover;display:block;
  cursor:zoom-in;background:var(--bg3);
}
.org-thumb-placeholder{
  width:100%;height:110px;display:flex;align-items:center;
  justify-content:center;font-size:22px;
}
.org-post-info{ padding:8px 10px; }
.org-post-date{ font-size:10px;color:var(--text3);margin-bottom:2px; }
.org-post-caption{
  font-size:11px;color:var(--text2);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  margin-bottom:5px;
}
.org-post-stats{ display:grid;grid-template-columns:1fr 1fr;gap:4px 6px;margin-top:4px; }
.org-post-stats span{ font-size:10px;color:var(--text3);display:flex;align-items:center;gap:3px; }

/* City bar */
.org-city-bar{
  height:100%;border-radius:3px;
  background:var(--accent);
  transition:width 0.4s;
}

/* Stories grid */
.org-stories-grid{
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(130px,1fr));
  gap:10px;
}
.org-story-card{
  background:var(--bg2);border:1px solid var(--border);
  border-radius:var(--radius-md);overflow:hidden;text-align:center;
}
.org-story-thumb{
  width:100%;height:130px;object-fit:cover;display:block;
  cursor:zoom-in;
}
.org-story-date{
  font-size:10px;color:var(--text3);padding:4px 6px;
}
.org-story-stats{
  display:grid;grid-template-columns:1fr 1fr;
  gap:4px;padding:6px 8px;border-top:1px solid var(--border);
}
.org-story-stat{ text-align:center; }
.org-story-stat-val{
  display:block;font-size:13px;font-weight:700;
  font-family:'JetBrains Mono',monospace;color:var(--text1);
}
.org-story-stat-lbl{
  display:block;font-size:9px;color:var(--text3);
  text-transform:uppercase;letter-spacing:0.8px;
}

/* ============================================================
   KPI CARDS — borda gradiente Instagram / Facebook
   ============================================================ */
.org-kpi-card.ig {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #f09433, #e6683c, #dc2743, #cc2366, #bc1888) border-box;
}
.org-kpi-card.fb {
  border: 1.5px solid transparent;
  background:
    linear-gradient(var(--card), var(--card)) padding-box,
    linear-gradient(135deg, #1877F2, #0a5dc7, #1877F2) border-box;
}

/* Header do gráfico de seguidores com legenda */
.org-followers-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 14px;
}
.org-followers-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--text3);
}
.org-legend-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  display: inline-block;
  flex-shrink: 0;
}


/* =============================================================
   GEOMAP — Card do mapa do Mato Grosso (alcance por cidade)
   ============================================================= */
.geomap-section{ margin-bottom:16px; background:var(--card); border:1px solid var(--border); border-radius:var(--radius-md); overflow:hidden; box-shadow:var(--shadow-sm); padding:16px; }
.geomap-header{ display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; color:var(--text); margin-bottom:12px; letter-spacing:.2px; }
.geomap-grid{ display:grid; grid-template-columns:1.6fr 1fr; gap:16px; align-items:stretch; }
@media (max-width: 880px){ .geomap-grid{ grid-template-columns:1fr; } }
.geomap-canvas{ width:100%; height:460px; min-height:380px; background:var(--bg2); border:1px solid var(--border); border-radius:10px; overflow:hidden; }
.geomap-list{ display:flex; flex-direction:column; gap:8px; max-height:460px; overflow:auto; padding-right:4px; }
.geomap-list-title{ font-size:11px; color:var(--text3); text-transform:uppercase; letter-spacing:1.5px; font-weight:600; margin-bottom:4px; }
.geomap-row{ display:flex; align-items:center; gap:10px; padding:6px 4px; }
.geomap-rank{ font-size:11px; color:var(--text3); font-family:'JetBrains Mono',monospace; min-width:18px; text-align:right; }
.geomap-name{ font-size:12px; color:var(--text); font-weight:600; min-width:120px; flex-shrink:0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.geomap-bar{ flex:1; height:6px; background:var(--bg3); border-radius:3px; overflow:hidden; }
.geomap-bar-fill{ height:100%; background:#6C63FF; border-radius:3px; transition:width 0.4s; }
.geomap-val{ font-size:11px; font-family:'JetBrains Mono',monospace; color:var(--text2); min-width:64px; text-align:right; }


/* =============================================================
   DATE RANGE PICKER (Litepicker) — substitui os 2 inputs date
   ============================================================= */
.date-range-input{
  width: 240px;
  min-width: 220px;
  cursor: pointer !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  text-align: center;
  letter-spacing: 0.3px;
  caret-color: transparent;
  pointer-events: auto;
}
.date-range-input:hover,
.date-range-input:focus{ cursor: pointer !important; }

/* Wrapper inteiro fica clicável visualmente */
.date-range-wrap:has(.date-range-input){
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.date-range-wrap:has(.date-range-input):hover{
  border-color: var(--accent);
  background: var(--bg3);
  box-shadow: 0 0 0 3px rgba(108, 99, 255, 0.12);
}
.date-range-wrap:has(.date-range-input):hover .date-range-input,
.date-range-wrap:has(.date-range-input):hover i[data-lucide="calendar"]{
  color: var(--accent);
}

/* Setinha indicando dropdown */
.date-range-wrap:has(.date-range-input)::after{
  content: '';
  display: inline-block;
  width: 0; height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid var(--text3);
  margin-left: 4px;
  transition: border-top-color 0.18s ease;
}
.date-range-wrap:has(.date-range-input):hover::after{
  border-top-color: var(--accent);
}

@media (max-width: 768px){
  .date-range-input{ width: 100%; min-width: 0; }
}

/* Container do popup */
.litepicker{
  font-family: 'Inter', system-ui, sans-serif !important;
  --litepicker-month-header-color: var(--text);
  --litepicker-button-prev-month-color: var(--text3);
  --litepicker-button-next-month-color: var(--text3);
  --litepicker-button-prev-month-color-hover: var(--accent);
  --litepicker-button-next-month-color-hover: var(--accent);
  --litepicker-month-weekday-color: var(--text3);
  --litepicker-day-color: var(--text);
  --litepicker-day-color-hover: var(--accent);
  --litepicker-is-today-color: var(--accent);
  --litepicker-is-in-range-color: rgba(108, 99, 255, 0.18);
  --litepicker-is-start-color: #fff;
  --litepicker-is-start-color-bg: var(--accent);
  --litepicker-is-end-color: #fff;
  --litepicker-is-end-color-bg: var(--accent);
  --litepicker-day-color-disabled: var(--text3);
  --litepicker-button-cancel-color: var(--text2);
  --litepicker-button-cancel-bg: var(--bg3);
  --litepicker-button-apply-color: #fff;
  --litepicker-button-apply-bg: var(--accent);
  --litepicker-button-reset-color: var(--text3);
  --litepicker-button-reset-color-hover: var(--accent);
  --litepicker-tooltip-color: #fff;
  --litepicker-tooltip-bg-color: var(--accent);
  --litepicker-container-months-color-bg: var(--card);
  --litepicker-container-months-box-shadow-color: var(--shadow-md);
  --litepicker-footer-color-bg: var(--card);
  --litepicker-footer-box-shadow-color: var(--border);
  --litepicker-highlighted-day-color: var(--text);
  --litepicker-highlighted-day-color-bg: var(--bg3);
}
.litepicker .container__months{
  background: var(--card) !important;
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: var(--shadow-md);
  padding: 6px;
}
.litepicker .container__days .day-item{
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  border-radius: 8px;
  transition: all 0.15s;
}
.litepicker .container__days .day-item.is-today{
  font-weight: 700;
  text-decoration: none;
  outline: 1px solid var(--accent);
}
.litepicker .container__months .month-item-header{
  padding: 8px 4px 12px;
  font-weight: 700;
  font-size: 13px;
  text-transform: capitalize;
}
/* Dropdowns de mês/ano nos headers */
.litepicker .month-item-header .month-item-name,
.litepicker .month-item-header .month-item-year{
  background: var(--bg3);
  border: 1px solid var(--border);
  color: var(--text);
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: 6px;
  cursor: pointer;
  margin: 0 3px;
  text-transform: capitalize;
  transition: all 0.15s;
}
.litepicker .month-item-header .month-item-name:hover,
.litepicker .month-item-header .month-item-year:hover{
  border-color: var(--accent);
  color: var(--accent);
}
.litepicker .month-item-header .month-item-name:focus,
.litepicker .month-item-header .month-item-year:focus{
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 2px rgba(108, 99, 255, 0.2);
}
.litepicker .container__months .month-item-weekdays-row > div{
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text3);
}

/* Painel de atalhos (plugin ranges) */
.litepicker .container__predefined-ranges{
  background: var(--bg2);
  border-right: 1px solid var(--border);
  border-radius: 12px 0 0 12px;
  padding: 8px 4px;
  min-width: 160px;
}
.litepicker .container__predefined-ranges button{
  display: block;
  width: 100%;
  text-align: left;
  background: transparent;
  border: none;
  padding: 8px 14px;
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--text2);
  cursor: pointer;
  border-radius: 8px;
  margin-bottom: 2px;
  transition: all 0.15s;
}
.litepicker .container__predefined-ranges button:hover{
  background: var(--bg3);
  color: var(--accent);
}

/* Botão de footer (apply/cancel) */
.litepicker .container__footer{
  padding: 8px 12px;
  border-top: 1px solid var(--border);
  background: var(--card);
  border-radius: 0 0 12px 12px;
}
.litepicker .container__footer .button-apply{
  background: var(--accent);
  color: #fff;
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
  cursor: pointer;
}
.litepicker .container__footer .button-cancel{
  background: var(--bg3);
  color: var(--text2);
  border: none;
  padding: 8px 16px;
  border-radius: 8px;
  font-size: 12px;
  cursor: pointer;
  margin-right: 6px;
}

/* =============================================================
   AUTH SPLASH — cobre tudo enquanto Firebase verifica a sessão
   (elimina o "flash" da tela de login pra quem já está autenticado)
   ============================================================= */
.auth-splash{
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; align-items: center; justify-content: center;
  z-index: 10000;
  transition: opacity 0.25s ease;
}
.auth-splash.hidden{ opacity: 0; pointer-events: none; }
.auth-splash-inner{
  display: flex; flex-direction: column; align-items: center; gap: 24px;
}
.auth-splash-logo{ width: 160px; height: auto; opacity: 0.92; }
.auth-splash-spinner{
  width: 28px; height: 28px;
  border: 2.5px solid var(--bg3);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
}
@keyframes spin{ to { transform: rotate(360deg); } }

/* Checkbox "Manter conectado" no formulário de login */
.login-remember{
  display: flex; align-items: center; gap: 8px;
  margin: 4px 0 12px;
  font-size: 13px; color: var(--text2);
  cursor: pointer; user-select: none;
}
.login-remember input[type="checkbox"]{
  width: 16px; height: 16px;
  accent-color: var(--accent);
  cursor: pointer;
  margin: 0;
}
.login-remember:hover{ color: var(--accent); }