/* Menu Turbo — Estilos globais */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap');

*{box-sizing:border-box;margin:0;padding:0}

/* ── TEMA ESCURO (padrão) ── */
:root,
[data-theme="dark"] {
  --bg:#08080f;--surface:#0f0f18;--card:#13131a;--border:#ffffff1e;
  --text:#e8e8f0;--muted:#ffffffaa;--faint:#ffffff0f;
  --input-bg:#0a0a12;--input-border:#ffffff2a;
  --footer-color:#ffffff22;
  --grad:linear-gradient(90deg,#e63312 0%,#f97316 100%);
  --grad-text:linear-gradient(90deg,#e63312 0%,#f97316 100%);
  --orange:#f97316;--red:#e63312;--purple:#a78bfa;--green:#00ff88;--danger:#ff4444;
  --sb-bg:#0c0c16;--sb-border:#ffffff14;
  --sb-item-active-bg:rgba(249,115,22,.1);--sb-item-active-border:#f97316;
  --tema-icon-dark:block;--tema-icon-light:none;
}

/* ── TEMA CLARO ── */
[data-theme="light"] {
  --bg:#f4f4f8;--surface:#ffffff;--card:#ffffff;--border:#e0e0ea;
  --text:#1a1a2e;--muted:#6b6b8a;--faint:#00000008;
  --input-bg:#f8f8fc;--input-border:#d0d0e0;
  --footer-color:#00000020;
  --orange:#e05a00;--red:#c22b0c;--purple:#6d3fcc;--green:#00a060;--danger:#cc2222;
  --sb-bg:#ffffff;--sb-border:#e0e0ea;
  --sb-item-active-bg:rgba(224,90,0,.08);--sb-item-active-border:#e05a00;
  --tema-icon-dark:none;--tema-icon-light:block;
}

body{background:var(--bg);color:var(--text);font-family:'Plus Jakarta Sans',system-ui,sans-serif;min-height:100vh;transition:background .2s,color .2s}
a{text-decoration:none;color:inherit}

/* ══════════════════════════════════════════════
   LAYOUT — sidebar + conteúdo
══════════════════════════════════════════════ */
.app-layout{display:flex;min-height:100vh}

/* ── SIDEBAR ── */
.sidebar{
  width:220px;flex-shrink:0;
  background:var(--sb-bg);
  border-right:1px solid var(--sb-border);
  display:flex;flex-direction:column;
  position:fixed;top:0;left:0;bottom:0;
  overflow-y:auto;overflow-x:hidden;
  z-index:100;transition:background .2s;
}

/* Logo/marca */
.sb-brand{
  padding:16px 16px 12px;
  border-bottom:1px solid var(--sb-border);
  flex-shrink:0;
}
.sb-brand-top{display:flex;align-items:center;gap:8px;margin-bottom:4px}
.sb-logo{height:32px;width:auto;display:block}
.sb-badge{font-size:10px;letter-spacing:.5px;text-transform:uppercase;padding:2px 8px;border-radius:99px;font-weight:700}
.sb-badge.master{color:#f97316;border:1px solid #f9731640;background:rgba(255,61,46,.12)}
.sb-badge.operador{color:#0ea5e9;border:1px solid #0ea5e940;background:rgba(14,165,233,.12)}
.sb-back-admin{font-size:9px;color:var(--orange);letter-spacing:1px;text-decoration:none;opacity:.7;transition:opacity .15s}
.sb-back-admin:hover{opacity:1}

/* Navegação */
.sb-nav{flex:1;padding:8px 0;overflow-y:auto}
.sb-section{padding:12px 10px 4px}
.sb-section-label{
  display:block;font-size:10px;font-weight:700;letter-spacing:.8px;
  text-transform:uppercase;color:var(--muted);opacity:.5;
  padding:0 6px;margin-bottom:4px;
}
.sb-item{
  display:flex;align-items:center;gap:9px;
  padding:7px 8px;border-radius:8px;border-left:2px solid transparent;
  font-size:12.5px;font-weight:500;color:var(--muted);
  cursor:pointer;transition:all .15s;margin-bottom:1px;
  text-decoration:none;
}
.sb-item:hover{background:var(--faint);color:var(--text)}
.sb-item.active{
  background:var(--sb-item-active-bg);
  color:var(--orange);
  border-left-color:var(--sb-item-active-border);
  font-weight:600;
}
.sb-icon{font-size:13px;width:18px;text-align:center;flex-shrink:0;opacity:.8}
.sb-item.active .sb-icon{opacity:1}

/* Rodapé da sidebar */
.sb-foot{
  padding:12px 14px;border-top:1px solid var(--sb-border);
  display:flex;align-items:center;gap:8px;flex-shrink:0;
}
.sb-user{font-size:12px;color:var(--muted);flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-weight:600}
.sb-logout{font-size:11px;font-weight:600;color:var(--orange);padding:4px 10px;border:1px solid #f9731630;border-radius:6px;transition:background .2s;white-space:nowrap}
.sb-logout:hover{background:#f9731615}

/* ── SUB-MENU EXPANSÍVEL ── */
.sb-group{margin-bottom:1px}
.sb-group-btn{
  width:100%;text-align:left;background:none;border:none;
  font-family:inherit;cursor:pointer;
}
.sb-group-btn .sb-arrow{
  margin-left:auto;font-size:12px;opacity:.5;
  transition:transform .2s;display:inline-block;flex-shrink:0;
}
.sb-group.open .sb-arrow{transform:rotate(90deg)}
.sb-sub{display:none;padding:2px 0 4px 27px}
.sb-sub.show{display:block}
.sb-sub-item{
  display:block;padding:6px 10px;border-radius:7px;
  font-size:11.5px;font-weight:500;color:var(--muted);
  text-decoration:none;transition:all .15s;margin-bottom:1px;
  border-left:2px solid transparent;
}
.sb-sub-item:hover{background:var(--faint);color:var(--text)}
.sb-sub-item.active{color:var(--orange);border-left-color:var(--orange);background:var(--sb-item-active-bg)}

/* ── ÁREA PRINCIPAL ── */
.sb-main{
  flex:1;
  margin-left:220px;
  min-height:100vh;
  display:flex;flex-direction:column;
}
/* PDV balcão — sem sidebar, tela cheia */
.sb-main.sb-full{margin-left:0}

/* ── TOPBAR MOBILE ── */
.sb-topbar{
  display:none;position:fixed;top:0;left:0;right:0;z-index:200;
  height:52px;align-items:center;gap:12px;padding:0 16px;
  background:var(--sb-bg);border-bottom:1px solid var(--sb-border);
}
.sb-ham{
  background:none;border:1px solid var(--sb-border);border-radius:8px;
  padding:6px 10px;cursor:pointer;color:var(--text);font-size:18px;line-height:1;
  flex-shrink:0;transition:background .15s;
}
.sb-ham:hover{background:var(--faint)}

/* Overlay ao abrir sidebar no mobile */
.sb-overlay{display:none;position:fixed;inset:0;z-index:99;background:rgba(0,0,0,.55)}
.sb-overlay.show{display:block}

/* Botão recolher (desktop) */
.sb-collapse-btn{
  margin-left:auto;background:none;border:1px solid var(--sb-border);
  border-radius:6px;padding:2px 8px;cursor:pointer;color:var(--muted);
  font-size:14px;line-height:1.5;transition:all .2s;flex-shrink:0;
}
.sb-collapse-btn:hover{background:var(--faint);color:var(--text)}

/* ── RESPONSIVO PDV/TABLET — sidebar aberta em 1024-1440px ── */
/* Cobre: 1024x768 (sidebar 220px → ~760px úteis) e 1280x800 (~1020px úteis) */
@media(max-width:1440px){
  main{padding:18px 20px}
  .hero{padding:22px 24px 18px}
  .card-body{padding:16px 18px}
  .page-title h2{font-size:22px}
  .page-title{margin-bottom:18px}
  .stats-grid{grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:10px;margin-bottom:16px}
  .form-grid{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
  .tbl th{padding:9px 10px}
  .tbl td{padding:11px 10px;font-size:12px}
  .card{border-radius:12px}
  .btn{padding:8px 16px;font-size:12px}
  .btn-sm{padding:4px 10px;font-size:11px}
}
/* Tabelas com scroll horizontal em telas apertadas */
@media(max-width:1100px){
  .card{overflow-x:auto}
}

/* ── RESPONSIVO MOBILE ── */
@media(max-width:767px){
  .sb-topbar{display:flex}
  .sidebar{transform:translateX(-100%);transition:transform .25s;top:52px;z-index:200}
  .sidebar.open{transform:translateX(0)}
  .sb-main{margin-left:0;padding-top:52px}
  .sb-collapse-btn{display:none!important}
  main{padding:16px 14px}
}

/* ── SIDEBAR RECOLHIDA (desktop) ── */
@media(min-width:768px){
  .sidebar{transition:width .25s,background .2s}
  .sb-main{transition:margin-left .25s}
  .sidebar.collapsed{width:56px}
  .sidebar.collapsed .sb-section-label,
  .sidebar.collapsed .sb-item>span:not(.sb-icon),
  .sidebar.collapsed .sb-group-btn>span:not(.sb-icon),
  .sidebar.collapsed .sb-arrow,
  .sidebar.collapsed .sb-badge,
  .sidebar.collapsed .sb-back-admin,
  .sidebar.collapsed .sb-logo,
  .sidebar.collapsed .sb-user,
  .sidebar.collapsed .sb-logout{display:none!important}
  .sidebar.collapsed .sb-sub{display:none!important}
  .sidebar.collapsed .sb-section{padding:8px 4px 2px}
  .sidebar.collapsed .sb-item,.sidebar.collapsed .sb-group-btn{justify-content:center;padding:8px 4px}
  .sidebar.collapsed .sb-icon{width:auto;opacity:1}
  .sidebar.collapsed .sb-brand{padding:12px 4px}
  .sidebar.collapsed .sb-brand-top{justify-content:center}
  .sidebar.collapsed .sb-foot{padding:10px 4px;justify-content:center;gap:4px;flex-wrap:wrap}
  .sidebar.collapsed .sb-collapse-btn{transform:rotate(180deg);margin-left:0}
  .sidebar.collapsed~.sb-main{margin-left:56px}
}

/* ── BOTÃO DE TEMA ── */
.tema-btn{background:none;border:1px solid var(--border);border-radius:7px;padding:4px 8px;cursor:pointer;font-size:14px;line-height:1;transition:background .2s,border-color .2s;color:var(--text);flex-shrink:0}
.tema-btn:hover{background:var(--faint);border-color:var(--muted)}
.tema-icon-dark{display:var(--tema-icon-dark)}
.tema-icon-light{display:var(--tema-icon-light)}

/* ── MAIN ── */
main{padding:28px 32px;flex:1}

/* ── PAGE TITLE ── */
.page-title{margin-bottom:28px}
.page-title small{font-size:11px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;display:block;margin-bottom:6px;font-weight:600}
.page-title h2{font-size:26px;font-weight:800;color:var(--text);letter-spacing:-0.8px}

/* ── CARDS ── */
.card{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;transition:background .2s}
.card-body{padding:24px 28px}

/* ── HERO ── */
.hero{position:relative;border-radius:20px;overflow:hidden;padding:36px 40px 32px;background:var(--surface);border:1px solid var(--border);margin-bottom:20px}
.hero-glow{position:absolute;inset:0;background:linear-gradient(135deg,#f9731614 0%,#e633120d 50%,#f9731608 100%);pointer-events:none}
.hero-inner{position:relative}
.grad-text{background:var(--grad-text);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}

/* ── STAT CARDS ── */
.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:14px;margin-bottom:24px}
.stat-card{background:var(--card);border:1px solid var(--border);border-radius:14px;padding:18px 20px;transition:background .2s}
.stat-card .sc-label{font-size:11px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;margin-bottom:10px;font-weight:700}
.stat-card .sc-value{font-size:23px;font-weight:700;letter-spacing:-.5px}
.stat-card .sc-sub{font-size:11.5px;color:var(--muted);margin-top:4px;font-weight:500}

/* ── TABLE ── */
.tbl{width:100%;border-collapse:collapse}
.tbl thead tr{background:var(--faint)}
.tbl th{padding:11px 16px;font-size:10.5px;color:var(--muted);letter-spacing:.5px;text-transform:uppercase;font-weight:700;text-align:left}
.tbl tbody tr{border-top:1px solid var(--border);transition:background .15s}
.tbl tbody tr:hover{background:var(--faint)}
.tbl td{padding:15px 16px;font-size:13px;color:var(--text);vertical-align:middle}

/* ── BADGES ── */
.badge{display:inline-block;border-radius:5px;padding:2px 9px;font-size:11px;font-weight:700;letter-spacing:.2px}
.badge-green{background:#00ff8820;color:var(--green);border:1px solid #00ff8840}
.badge-orange{background:#f9731620;color:var(--orange);border:1px solid #f9731640}
.badge-purple{background:#a78bfa20;color:var(--purple);border:1px solid #a78bfa40}
.badge-red{background:#ff444420;color:var(--danger);border:1px solid #ff444440}
.badge-gray{background:var(--faint);color:var(--muted);border:1px solid var(--border)}

/* ── FORMS ── */
.form-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}
.form-group{display:flex;flex-direction:column;gap:7px}
.form-group label{font-size:11px;color:var(--muted);letter-spacing:.3px;text-transform:uppercase;font-weight:600}
.form-group input,.form-group select,.form-group textarea{background:var(--input-bg);border:1px solid var(--input-border);border-radius:8px;padding:10px 14px;color:var(--text);font-family:inherit;font-size:13px;outline:none;transition:border-color .2s,background .2s;resize:vertical}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:#f9731660}
.form-group input[type=file]{padding:8px 14px;cursor:pointer}
.form-group input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#f97316}

/* ── BUTTONS ── */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 22px;border-radius:9px;border:none;cursor:pointer;font-family:inherit;font-size:13px;font-weight:700;letter-spacing:.2px;transition:opacity .2s}
.btn:hover{opacity:.82}
.btn-primary{background:var(--grad);color:#fff}
.btn-secondary{background:var(--faint);color:var(--text);border:1px solid var(--border)}
.btn-danger{background:#ff444418;color:var(--danger);border:1px solid #ff444435}
.btn-sm{padding:5px 13px;font-size:11px;letter-spacing:.1px}

/* ── ALERTS ── */
.alert{padding:12px 18px;border-radius:10px;margin-bottom:20px;font-size:13px}
.alert-success{background:#00ff8815;color:var(--green);border:1px solid #00ff8830}
.alert-error{background:#ff444415;color:var(--danger);border:1px solid #ff444430}
.alert-info{background:#a78bfa15;color:var(--purple);border:1px solid #a78bfa30}

/* ── PRODUCT IMAGE ── */
.img-preview{width:60px;height:60px;object-fit:cover;border-radius:8px;border:1px solid var(--border)}
.img-placeholder{width:60px;height:60px;background:var(--faint);border-radius:8px;border:1px dashed var(--border);display:flex;align-items:center;justify-content:center;font-size:20px}

/* ── LOGIN PAGE ── */
.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:24px;
  background:radial-gradient(ellipse at 20% 50%,#f9731615 0%,transparent 50%),
             radial-gradient(ellipse at 80% 50%,#e6331215 0%,transparent 50%),var(--bg)}
.login-card{background:var(--card);border:1px solid var(--border);border-radius:20px;padding:44px 40px;width:100%;max-width:420px;transition:background .2s}
.login-logo{text-align:center;margin-bottom:32px;display:flex;flex-direction:column;align-items:center;gap:10px}
.login-logo-img{height:50px;width:auto}
.login-logo small{font-size:11px;color:var(--muted);letter-spacing:.8px;text-transform:uppercase;font-weight:600}

/* ── FOOTER ── */
footer{text-align:center;padding:20px;font-size:11px;color:var(--footer-color)}

/* ── MINI PROGRESS ── */
.mini-prog{background:var(--faint);border-radius:99px;height:5px;width:90px;overflow:hidden;margin-top:5px}
.mini-prog-fill{height:100%;border-radius:99px;transition:width .6s}

/* ── Botão Ajuda na sidebar ── */
.sb-faq-btn{
  display:flex;align-items:center;gap:10px;
  margin:0 10px 4px;padding:8px 10px;
  border-radius:8px;border:1px solid var(--sb-border);
  color:var(--muted);font-size:12px;font-weight:600;
  text-decoration:none;transition:all .15s;
}
.sb-faq-btn:hover{background:var(--faint);color:var(--text);border-color:var(--orange)}
.sb-faq-btn.active{background:var(--sb-item-active-bg);color:var(--orange);border-color:var(--sb-item-active-border)}
.sb-faq-btn span:first-child{
  width:22px;height:22px;border-radius:50%;
  background:var(--faint);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  font-weight:800;flex-shrink:0;font-size:12px;
}
.sidebar.collapsed .sb-faq-label{display:none}
.sidebar.collapsed .sb-faq-btn{justify-content:center;padding:8px 4px}

/* scrollbar */
::-webkit-scrollbar{width:5px}
::-webkit-scrollbar-track{background:transparent}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:99px}