/* ═══════════════════════════════════════════════
   MAIN.CSS — Variáveis, reset, layout base
   (sidebar, topbar, login, screens)
   Athenis Performance — Kit do Lojista
═══════════════════════════════════════════════ */

:root {
  /* Athenis brand colors */
  --teal:    #64C4D9;
  --teal2:   #5DA3A9;
  --teal3:   #4A8187;
  --tglow:   rgba(100,196,217,0.13);
  --tglow2:  rgba(100,196,217,0.07);
  --green:   #4CAF77;
  --red:     #E05555;
  --yellow:  #E0A455;
}

/* ─── DARK THEME (default) ─── */
:root, [data-theme="dark"] {
  --black:   #0d1417;
  --dark:    #131b1e;
  --card:    #182024;
  --card2:   #1e282c;
  --border:  #253035;
  --border2: #2e3d43;
  --accent:  #64C4D9;
  --accent2: #7dd6e8;
  --aglow:   rgba(100,196,217,0.13);
  --white:   #E8F0F2;
  --muted:   #3d5258;
  --muted2:  #6b8a92;
  --surface: rgba(100,196,217,0.06);
}

/* ─── LIGHT THEME ─── */
[data-theme="light"] {
  --black:   #f0f4f5;
  --dark:    #e4eced;
  --card:    #ffffff;
  --card2:   #f5f8f9;
  --border:  #d0dde0;
  --border2: #bccdd1;
  --accent:  #4A8187;
  --accent2: #5DA3A9;
  --aglow:   rgba(74,129,135,0.12);
  --white:   #1a2a2e;
  --muted:   #8aadb3;
  --muted2:  #5c848c;
  --surface: rgba(74,129,135,0.06);
}

/* legacy alias so existing code still works */
:root { --orange:var(--accent); --orange2:var(--accent2); --oglow:var(--aglow); }

/* ─── LIGHT THEME SPECIFIC OVERRIDES ───────── */
[data-theme="light"] .sidebar{ border-right-color:var(--border); }
[data-theme="light"] .hero-strip{ background:linear-gradient(135deg,var(--card2) 0%,var(--card) 100%); }
[data-theme="light"] .hero-strip h1 span{ color:var(--accent); }
[data-theme="light"] .top-bar{ background:var(--card); border-bottom-color:var(--border); }
[data-theme="light"] .card{ box-shadow:0 1px 3px rgba(0,0,0,.06); }
[data-theme="light"] .result-hero{ background:linear-gradient(135deg,var(--teal3),var(--teal2)); }
[data-theme="light"] .result-hero .rl,
[data-theme="light"] .result-hero .rv,
[data-theme="light"] .result-hero .rs{ color:#fff; }
[data-theme="light"] .lf input{ background:var(--card2); }
[data-theme="light"] .btn-calc{ background:var(--accent);color:#fff; }
[data-theme="light"] .sync-badge{ background:var(--card2); }
[data-theme="light"] .admin-card{ background:var(--card); }
[data-theme="light"] .editable{ background:var(--card2) !important; color:var(--white) !important; }

/* ─── OCULTAR login-theme-btn quando o app estiver ativo ── */
/* O botão flutuante de tema só deve aparecer na tela de login */
#s-app.active ~ #login-theme-btn,
#s-app.active #login-theme-btn {display:none!important;}
/* Regra simplificada: quando #s-app está ativo (visível), oculta o botão flutuante */
body:has(#s-app.active) #login-theme-btn{display:none!important;}

/* ─── RESET ─────────────────────────────────── */
*{margin:0;padding:0;box-sizing:border-box;}
html,body{height:100%;overflow:hidden;}

body{
  background:var(--black);
  color:var(--white);
  font-family:'Montserrat',sans-serif;
  font-size:clamp(12px,2.5vw,14px);
  transition:background .3s,color .3s;
}

/* ─── SCREENS ─────────────────────────────── */
.screen{display:none;height:100vh;overflow:hidden;}
.screen.active{display:flex;flex-direction:column;}

/* ─── LOGIN ───────────────────────────────── */
#s-login{
  align-items:center;
  justify-content:center;
  background:var(--black);
  position:relative;
  overflow:hidden;
}
.login-grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--border) 1px,transparent 1px),
    linear-gradient(90deg,var(--border) 1px,transparent 1px);
  background-size:56px 56px;
  opacity:.35;
  mask-image:radial-gradient(ellipse 80% 80% at 50% 50%,black 20%,transparent 100%);
}
.login-glow{
  position:absolute;top:0;left:50%;transform:translateX(-50%);
  width:600px;height:300px;
  background:radial-gradient(ellipse at 50% 0%,rgba(100,196,217,.12) 0%,transparent 70%);
}
.login-box{
  position:relative;z-index:10;
  width:min(360px, 92vw);
  animation:fadeUp .5s ease;
}
.login-brand{
  text-align:center;margin-bottom:28px;
}
.login-brand .brand-icon{display:flex;align-items:center;justify-content:center;gap:10px;margin-bottom:4px;}
.login-brand .brand-icon svg{width:48px;height:48px;color:var(--accent);}
.login-brand .brand-name{font-family:'Montserrat',sans-serif;font-size:clamp(16px,3vw,20px);font-weight:800;color:var(--white);letter-spacing:-0.3px;}
.login-brand p{
  font-size:clamp(8px,1.8vw,9px);letter-spacing:3px;text-transform:uppercase;
  color:var(--muted2);margin-top:2px;font-weight:600;
}
.login-card{
  background:var(--card);
  border:1px solid var(--border2);
  border-radius:6px;
  padding:clamp(20px,5vw,32px);
}
.login-card h2{
  font-family:'Montserrat',sans-serif;font-size:clamp(15px,4vw,18px);font-weight:800;
  margin-bottom:4px;
}
.login-card .sub{font-size:clamp(11px,2.2vw,12px);color:var(--muted2);margin-bottom:24px;}
.lf{margin-bottom:14px;}
.lf label{display:block;font-size:clamp(9px,1.8vw,10px);letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2);margin-bottom:6px;}
.lf input{
  width:100%;background:var(--black);border:1px solid var(--border2);
  border-radius:3px;padding:11px 13px;
  color:var(--white);font-family:'DM Mono',monospace;font-size:clamp(12px,2.5vw,13px);
  outline:none;transition:border-color .2s,box-shadow .2s;box-sizing:border-box;
}
.lf input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--aglow);}
.login-err{
  background:rgba(224,85,85,.1);border:1px solid var(--red);
  border-radius:3px;padding:9px 12px;font-size:12px;color:#e57d7d;
  margin-bottom:12px;display:none;
}
.btn-login{
  width:100%;background:var(--accent);color:#0d1417;
  border:none;border-radius:3px;padding:13px;
  font-family:'Montserrat',sans-serif;font-size:clamp(10px,2vw,11px);font-weight:800;
  letter-spacing:2px;text-transform:uppercase;cursor:pointer;
  transition:all .2s;margin-top:4px;
}
.btn-login:hover{background:var(--accent2);transform:translateY(-1px);box-shadow:0 6px 20px var(--aglow);}
.login-hint{text-align:center;font-size:clamp(10px,2vw,11px);color:var(--muted);margin-top:16px;}
.login-hint strong{color:var(--accent);}
.login-tabs{display:flex;border-bottom:1px solid var(--border);margin-bottom:20px;}
.ltab{flex:1;background:none;border:none;padding:10px;font-family:'Montserrat',sans-serif;font-size:clamp(10px,2vw,11px);font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted2);cursor:pointer;transition:all .2s;border-bottom:2px solid transparent;margin-bottom:-1px;}
.ltab.active{color:var(--accent);border-bottom-color:var(--accent);}
.ltab:not(.active):hover{color:var(--white);}
.login-divider{display:flex;align-items:center;gap:10px;margin:16px 0;color:var(--muted);font-size:10px;letter-spacing:1px;}
.login-divider::before,.login-divider::after{content:'';flex:1;height:1px;background:var(--border2);}
.btn-google{
  width:100%;background:var(--card2);border:1px solid var(--border2);border-radius:3px;
  padding:11px;font-family:'Montserrat',sans-serif;font-size:clamp(10px,2vw,11px);font-weight:700;
  letter-spacing:1px;color:var(--white);cursor:pointer;transition:all .2s;
  display:flex;align-items:center;justify-content:center;gap:8px;
}
.btn-google:hover{border-color:var(--accent);background:var(--surface);}

/* ─── APP SHELL ───────────────────────────── */
#s-app{flex-direction:row;}

/* ─── SIDEBAR ─────────────────────────────── */
.sidebar{
  width:210px;flex-shrink:0;
  background:var(--dark);border-right:1px solid var(--border);
  display:flex;flex-direction:column;height:100vh;overflow-y:auto;
}
.sb-logo{
  padding:20px 18px;border-bottom:1px solid var(--border);flex-shrink:0;
}
.sb-logo .brand-icon{display:flex;align-items:center;gap:9px;}
.sb-logo .brand-icon svg{width:28px;height:28px;color:var(--accent);flex-shrink:0;}
.sb-logo .brand-name{font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;color:var(--white);letter-spacing:-0.2px;line-height:1.2;}
.sb-logo p{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);margin-top:3px;}

.sb-section{padding:16px 10px 6px;}
.sb-label{font-size:9px;letter-spacing:2px;text-transform:uppercase;color:var(--muted);padding:0 8px;margin-bottom:6px;}
.nav-item{
  display:flex;align-items:center;gap:9px;padding:9px 10px;
  border-radius:3px;cursor:pointer;font-size:12.5px;color:var(--muted2);
  transition:all .15s;border:1px solid transparent;margin-bottom:1px;
}
.nav-item:hover{background:rgba(255,255,255,.04);color:var(--white);}
.nav-item.active{background:var(--aglow);border-color:rgba(100,196,217,.2);color:var(--accent);}
.nav-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0;}

/* Lucide icons in nav */
.nav-lucide{width:14px;height:14px;flex-shrink:0;color:var(--muted2);transition:color .15s;}
.nav-item.active .nav-lucide{color:var(--accent);}
.nav-item:hover .nav-lucide{color:var(--white);}

/* Accordion sidebar */
.sb-label.accordion-header{
  cursor:pointer;display:flex;justify-content:space-between;align-items:center;
  user-select:none;padding:0 8px;margin-bottom:6px;
}
.sb-label.accordion-header:hover{color:var(--muted2);}
.acc-chevron{width:10px;height:10px;transition:transform .22s ease;color:var(--muted);}
.accordion-section.collapsed .acc-chevron{transform:rotate(-90deg);}
.accordion-body{overflow:hidden;max-height:600px;transition:max-height .28s ease;}
.accordion-section.collapsed .accordion-body{max-height:0;}
.nav-soon{
  font-size:9px;margin-left:auto;background:var(--border2);
  color:var(--muted2);padding:2px 5px;border-radius:2px;letter-spacing:.5px;
}

.sb-footer{
  margin-top:auto;padding:14px 10px;border-top:1px solid var(--border);flex-shrink:0;
}
.user-row{display:flex;align-items:center;gap:9px;padding:8px 10px;}
.user-av{
  width:30px;height:30px;border-radius:50%;
  background:var(--aglow);border:1px solid var(--accent);
  display:flex;align-items:center;justify-content:center;
  font-family:'Montserrat',sans-serif;font-size:11px;font-weight:800;color:var(--accent);
  flex-shrink:0;
}
.user-name{font-size:12px;font-weight:500;}
.user-role{font-size:10px;color:var(--muted2);}
.btn-minha-loja{
  background:var(--aglow);border:1px solid rgba(100,196,217,.3);border-radius:2px;
  padding:5px 8px;color:var(--accent);font-size:10px;cursor:pointer;
  transition:all .2s;margin:8px 10px 4px;display:flex;align-items:center;gap:6px;
  width:calc(100% - 20px);font-family:'Montserrat',sans-serif;font-weight:600;
}
.btn-minha-loja:hover{background:var(--accent);color:#090909;}
.btn-tema{
  background:none;border:1px solid var(--border2);border-radius:2px;
  padding:4px 8px;color:var(--muted2);font-size:10px;cursor:pointer;
  transition:all .2s;margin:4px 10px;display:flex;align-items:center;gap:6px;
  width:calc(100% - 20px);font-family:'Montserrat',sans-serif;
}
.btn-tema:hover{border-color:var(--accent);color:var(--accent);}
.plan-select{
  background:var(--card2);border:1px solid var(--border2);border-radius:3px;
  color:var(--white);font-family:'Montserrat',sans-serif;font-size:10px;font-weight:700;
  padding:4px 8px;cursor:pointer;transition:border-color .2s;
}
.plan-select:hover{border-color:var(--accent);}
.plan-select:focus{outline:none;border-color:var(--accent);}
.btn-logout{
  background:none;border:1px solid var(--border2);border-radius:2px;
  padding:4px 8px;color:var(--muted2);font-size:10px;cursor:pointer;
  transition:all .2s;margin:4px 10px 0;display:block;width:calc(100% - 20px);
  font-family:'Montserrat',sans-serif;
}
.btn-logout:hover{border-color:var(--red);color:var(--red);}

/* ── Sync banner ──────────────────────────── */
.perfil-sync-banner{
  display:flex;align-items:center;gap:10px;
  background:rgba(100,196,217,.07);border:1px solid rgba(100,196,217,.25);
  border-radius:4px;padding:10px 14px;margin-bottom:16px;
  font-size:12px;color:var(--accent);line-height:1.5;
}
.perfil-sync-banner i{ color:var(--accent); }
.perfil-sync-banner span{ color:var(--muted2); }
.pf-banner-link{
  background:none;border:none;color:var(--accent);cursor:pointer;
  font-size:12px;font-family:'Montserrat',sans-serif;font-weight:600;
  padding:0;text-decoration:underline;
}
.pf-banner-link:hover{color:var(--accent2);}

/* ── Análise de resultado: positivo / negativo ── */
td.pos, .mv.pos{ color:var(--green) !important; }
td.neg, .mv.neg{ color:var(--red)   !important; }

/* ── Tabs (Painel de Resultados e outros) ──────── */
.atab-bar{
  display:flex;gap:4px;flex-wrap:wrap;
  border-bottom:1px solid var(--border);padding-bottom:0;margin-bottom:0;
}
.atab{
  background:none;border:none;border-bottom:2px solid transparent;
  color:var(--muted2);font-size:12px;font-family:'Montserrat',sans-serif;
  font-weight:600;padding:8px 14px;cursor:pointer;transition:all .18s;
  margin-bottom:-1px;border-radius:3px 3px 0 0;
}
.atab:hover{ color:var(--white); }
.atab.active{
  color:var(--accent);border-bottom-color:var(--accent);
  background:rgba(100,196,217,.06);
}

/* role pill in sidebar */
.role-pill{
  display:inline-block;font-size:8px;letter-spacing:1px;text-transform:uppercase;
  padding:2px 6px;border-radius:2px;margin-top:2px;font-family:'Montserrat',sans-serif;font-weight:700;
}
.rp-admin{background:var(--aglow);color:var(--accent);}
.rp-pro{background:rgba(224,164,85,.1);color:var(--yellow);}
.rp-user{background:rgba(76,175,119,.1);color:var(--green);}

/* ─── MAIN AREA ───────────────────────────── */
.main-area{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0;}

.top-bar{
  padding:0 28px;height:52px;flex-shrink:0;
  border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  background:var(--black);
}
.top-bar-left h2{font-family:'Montserrat',sans-serif;font-size:clamp(13px,2.5vw,15px);font-weight:800;}
.top-bar-left p{font-size:clamp(10px,1.8vw,11px);color:var(--muted2);}
.top-bar-right{display:flex;align-items:center;gap:10px;}
.top-bar-center{display:none !important;}
.btn-tema-top{
  background:none;border:1px solid var(--border2);border-radius:3px;
  padding:5px 8px;color:var(--muted2);cursor:pointer;
  transition:all .2s;display:flex;align-items:center;justify-content:center;
  flex-shrink:0;
}
.btn-tema-top:hover{border-color:var(--accent);color:var(--accent);}
.sync-badge{
  font-family:'DM Mono',monospace;font-size:9px;color:var(--muted2);
  background:var(--card);border:1px solid var(--border);
  padding:4px 10px;border-radius:2px;
}
.sync-badge .dot{color:var(--green);margin-right:4px;}

.page-content{flex:1;overflow-y:auto;padding:clamp(14px,3vw,28px);}

/* ─── VIEWS ───────────────────────────────── */
.view{display:none;}
.view.active{display:block;animation:fadeUp .25s ease;}

/* ─── HAMBURGER BUTTON ────────────────────────── */
.hamburger-btn{
  display:none;
  background:none;border:1px solid var(--border2);border-radius:3px;
  padding:5px 9px;color:var(--muted2);cursor:pointer;font-size:16px;line-height:1;
  transition:all .2s;flex-shrink:0;
}
.hamburger-btn:hover{border-color:var(--accent);color:var(--accent);}

/* ─── MOBILE OVERLAY ──────────────────────────── */
#mobile-overlay{
  display:none;
  position:fixed;inset:0;
  background:rgba(0,0,0,.65);
  z-index:199;
  backdrop-filter:blur(2px);
}
#mobile-overlay.open{display:block;}

/* ─── RESPONSIVE — TABLET ─────────────────── */
@media(max-width:900px){
  .calc-layout{grid-template-columns:1fr;}
  .stats-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));}
  .sidebar{width:180px;}
}

/* ─── RESPONSIVE — MOBILE ─────────────────── */
@media(max-width:640px){
  /* Hamburger visível */
  .hamburger-btn{display:flex;align-items:center;justify-content:center;}

  /* Sidebar vira drawer lateral */
  .sidebar{
    position:fixed;top:0;left:0;
    width:240px;height:100vh;
    z-index:200;
    transform:translateX(-100%);
    transition:transform .25s ease;
    box-shadow:4px 0 24px rgba(0,0,0,.5);
  }
  .sidebar.open{transform:translateX(0);}

  /* Top-bar mobile */
  .top-bar{padding:0 12px;gap:8px;}
  .top-bar-left p{display:none;}
  .top-bar-right .sync-badge{display:none;}

  /* Top-title centralizado no mobile */
  .top-bar-center{
    display:flex !important;flex:1;align-items:center;justify-content:center;
    font-family:'Montserrat',sans-serif;font-size:13px;font-weight:800;
    color:var(--white);
  }
  /* Esconder top-bar-left no mobile pois usamos o centro */
  .top-bar-left{display:none;}

  /* Conteúdo — evita scroll horizontal */
  .page-content{padding:14px 12px;overflow-x:hidden;}

  /* Todos os inputs/selects contidos no grid */
  input,select,textarea{min-width:0;}

  /* Formulários */
  .f-row,.f2,.f2.f3{grid-template-columns:1fr;}

  /* Grids utilitários responsivos */
  .mob-col1{grid-template-columns:1fr !important;}
  .mob-col2{grid-template-columns:1fr 1fr !important;}

  /* Grid marketplace */
  .mp-grid{grid-template-columns:repeat(auto-fit,minmax(100px,1fr));}

  /* Stats row */
  .stats-row{grid-template-columns:1fr 1fr;}

  /* Calc layout — resultado abaixo do formulário */
  .calc-layout{grid-template-columns:1fr;}

  /* Wizard steps — scroll horizontal */
  .eq-wizard{overflow-x:auto;padding-bottom:4px;}
  .eq-step{flex-shrink:0;}

  /* Tabelas admin — scroll horizontal */
  .admin-card{overflow-x:auto;}
  table.dt{min-width:520px;}

  /* User cards no mobile */
  .user-card{flex-wrap:wrap;gap:10px;}
  .user-card-right{width:100%;justify-content:flex-end;}

  /* Plano actions */
  .plano-actions{flex-direction:column;}
  .plano-actions .btn{width:100%;text-align:center;}

  /* Hero strip */
  .hero-strip h1{font-size:clamp(18px,6vw,26px);}
  .hero-strip p{font-size:12px;}

  /* Métricas 3 colunas → 2 no mobile */
  .metrics-2[style*="repeat(3"]{grid-template-columns:1fr 1fr !important;}

  /* Planejamento 4 colunas → 2 no mobile */
  .pl-sazon-grid{grid-template-columns:1fr 1fr !important;}

  /* Rows de adição de produto (1fr 140px 32px) → empilhado */
  .row-add-item{grid-template-columns:1fr auto 32px !important;}
  .row-add-item input[type=number]{width:80px;}

  /* Grids de ação (salvar/analisar) mantém 1fr 1fr */
  /* mas em telas bem pequenas empilha */
}

/* ─── RESPONSIVE — MOBILE PEQUENO ─────────── */
@media(max-width:380px){
  .page-content{padding:10px 8px;}
  .top-bar{padding:0 8px;gap:6px;}
  .stats-row{grid-template-columns:1fr;}
  .metrics-2{grid-template-columns:1fr !important;}
  .metrics-2[style*="repeat(3"]{grid-template-columns:1fr !important;}
  .hero-strip h1{font-size:clamp(16px,7vw,22px);}
  /* Grids de ação empilham em telas menores */
  [style*="grid-template-columns:1fr 1fr"]:has(.btn){grid-template-columns:1fr !important;}
}

@keyframes fadeUp{
  from{opacity:0;transform:translateY(8px);}
  to{opacity:1;transform:translateY(0);}
}