/* =====================================================
   NEON STORE - Painel Admin
   ===================================================== */

:root{
  --accent:#0990d3;
  --accent-2:#0bb0ff;
  --accent-glow:rgba(9,144,211,.30);
  --bg:#050609;
  --sidebar:#080a0e;
  --card:#0d1016;
  --card-2:#10141b;
  --border:#1a1f29;
  --text:#e9edf3;
  --text-muted:#8b95a5;
  --text-dim:#5a6373;
  --danger:#ef3e52;
  --success:#1fbf6b;
  --warning:#e0a82e;
  --radius:14px;
  --font:'Inter','Segoe UI',system-ui,-apple-system,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
body{font-family:var(--font);background:var(--bg);color:var(--text);-webkit-font-smoothing:antialiased}
a{text-decoration:none;color:inherit}
img{display:block;max-width:100%}

/* ---------- LAYOUT ---------- */
.layout{display:flex;min-height:100vh}

/* ---------- SIDEBAR ---------- */
.sidebar{
  width:264px;flex-shrink:0;background:var(--sidebar);
  border-right:1px solid var(--border);
  display:flex;flex-direction:column;
  position:fixed;top:0;bottom:0;left:0;z-index:50;
}
.sidebar-brand{
  display:flex;align-items:center;gap:11px;font-weight:800;font-size:18px;letter-spacing:.5px;
  padding:22px 22px;border-bottom:1px solid var(--border);
}
.sidebar-brand .logo{
  width:36px;height:36px;border-radius:10px;display:grid;place-items:center;
  background:linear-gradient(135deg,var(--accent),#063e63);color:#fff;box-shadow:0 0 16px var(--accent-glow);
}
.sidebar-nav{flex:1;padding:18px 14px;display:flex;flex-direction:column;gap:4px}
.sidebar-nav a{
  display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:10px;
  color:var(--text-muted);font-size:14.5px;font-weight:500;transition:.18s;
}
.sidebar-nav a svg{flex-shrink:0}
.sidebar-nav a:hover{background:var(--card);color:var(--text)}
.sidebar-nav a.active{
  background:linear-gradient(135deg,rgba(9,144,211,.20),rgba(9,144,211,.06));
  color:#fff;border:1px solid rgba(9,144,211,.35);
}
.sidebar-footer{padding:14px;border-top:1px solid var(--border);display:flex;flex-direction:column;gap:4px}
.sidebar-footer a{display:flex;align-items:center;gap:13px;padding:11px 14px;border-radius:10px;font-size:14.5px;color:var(--text-muted);transition:.18s}
.sidebar-footer a:hover{background:var(--card);color:var(--text)}
.sidebar-footer a.logout{color:var(--danger)}
.sidebar-footer a.logout:hover{background:rgba(239,62,82,.1)}

/* ---------- MAIN ---------- */
.main{flex:1;margin-left:264px;min-width:0}
.topbar{display:none}
.content{padding:34px 40px}

.page-head{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:30px;flex-wrap:wrap}
.page-head h1{font-size:30px;font-weight:900;letter-spacing:.5px;text-transform:uppercase}
.page-head .subtitle{color:var(--text-muted);font-size:14.5px;margin-top:4px}

/* ---------- BOTÕES ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  padding:11px 20px;border-radius:10px;font-weight:600;font-size:14px;cursor:pointer;
  border:none;transition:.2s;font-family:inherit;white-space:nowrap;
}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-2));color:#fff;box-shadow:0 6px 20px var(--accent-glow)}
.btn-primary:hover{transform:translateY(-1px);box-shadow:0 9px 26px var(--accent-glow)}
.btn-ghost{background:var(--card);border:1px solid var(--border);color:var(--text)}
.btn-ghost:hover{border-color:var(--accent);color:#fff}
.btn-danger{background:rgba(239,62,82,.12);border:1px solid rgba(239,62,82,.35);color:#ff8a96}
.btn-danger:hover{background:rgba(239,62,82,.22)}
.btn-sm{padding:7px 12px;font-size:13px;border-radius:8px}
.btn-icon{padding:8px;width:36px;height:36px}

/* ---------- CARDS DE ESTATÍSTICA ---------- */
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:26px}
.stat-card{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;display:flex;justify-content:space-between;align-items:flex-start;gap:16px;
  transition:.2s;
}
.stat-card:hover{border-color:rgba(9,144,211,.4)}
.stat-card .label{color:var(--text-muted);font-size:14px;margin-bottom:12px}
.stat-card .value{font-size:34px;font-weight:900;line-height:1}
.stat-icon{width:46px;height:46px;border-radius:11px;display:grid;place-items:center;flex-shrink:0}
.stat-icon.blue{background:rgba(9,144,211,.14);color:var(--accent-2)}
.stat-icon.green{background:rgba(31,191,107,.14);color:var(--success)}
.stat-icon.gold{background:rgba(224,168,46,.14);color:var(--warning)}

/* ---------- PAINEL / CARD ---------- */
.panel{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);overflow:hidden}
.panel-head{display:flex;justify-content:space-between;align-items:center;padding:20px 24px;border-bottom:1px solid var(--border)}
.panel-head h2{font-size:15px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase}
.panel-head a.see-all{color:var(--accent-2);font-size:13.5px;font-weight:500}
.panel-body{padding:8px 0}

/* lista de últimos produtos */
.list-row{display:flex;align-items:center;gap:16px;padding:14px 24px;border-bottom:1px solid var(--border);transition:.15s}
.list-row:last-child{border-bottom:none}
.list-row:hover{background:var(--card-2)}
.list-thumb{width:52px;height:52px;border-radius:10px;object-fit:cover;background:#06080c;flex-shrink:0}
.list-info{flex:1;min-width:0}
.list-info .name{font-weight:700;font-size:15px}
.list-info .cat{color:var(--text-dim);font-size:13px}
.list-price{color:var(--accent-2);font-weight:800;font-size:15px;white-space:nowrap}

/* ---------- TABELA ---------- */
.table-wrap{overflow-x:auto}
table{width:100%;border-collapse:collapse}
thead th{
  text-align:left;padding:14px 24px;font-size:11.5px;letter-spacing:1px;text-transform:uppercase;
  color:var(--text-dim);font-weight:700;border-bottom:1px solid var(--border);white-space:nowrap;
}
tbody td{padding:14px 24px;border-bottom:1px solid var(--border);font-size:14.5px;vertical-align:middle}
tbody tr:last-child td{border-bottom:none}
tbody tr:hover{background:var(--card-2)}
.cell-prod{display:flex;align-items:center;gap:13px}
.cell-prod img{width:46px;height:46px;border-radius:9px;object-fit:cover;background:#06080c}
.cell-prod .nm{font-weight:600}
.actions{display:flex;gap:8px;justify-content:flex-end}

.tag{display:inline-flex;align-items:center;gap:5px;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600}
.tag-on{background:rgba(31,191,107,.14);color:var(--success)}
.tag-off{background:rgba(138,149,165,.12);color:var(--text-muted)}
.tag-star{background:rgba(224,168,46,.14);color:var(--warning)}
.tag-cat{background:rgba(9,144,211,.12);color:var(--accent-2)}

/* ---------- FORMULÁRIOS ---------- */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.field{display:flex;flex-direction:column;gap:8px;margin-bottom:4px}
.field.full{grid-column:1/-1}
.field label{font-size:13px;font-weight:600;color:var(--text-muted)}
.field input,.field textarea,.field select{
  background:var(--bg);border:1px solid var(--border);border-radius:10px;
  padding:12px 14px;color:var(--text);font-size:14.5px;font-family:inherit;transition:.18s;width:100%;
}
.field textarea{resize:vertical;min-height:120px}
.field input:focus,.field textarea:focus,.field select:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-glow)}
.field .hint{font-size:12.5px;color:var(--text-dim)}
.form-actions{display:flex;gap:12px;margin-top:24px;padding-top:22px;border-top:1px solid var(--border)}

.switch{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none}
.switch input{display:none}
.switch .track{width:46px;height:26px;border-radius:20px;background:var(--border);position:relative;transition:.2s;flex-shrink:0}
.switch .track::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked + .track{background:var(--accent)}
.switch input:checked + .track::after{transform:translateX(20px)}
.switch .switch-label{font-size:14px}

/* upload de imagem */
.upload{
  border:2px dashed var(--border);border-radius:12px;padding:22px;text-align:center;
  cursor:pointer;transition:.2s;color:var(--text-muted);
}
.upload:hover{border-color:var(--accent);color:var(--text)}
.upload svg{margin-bottom:8px;color:var(--text-dim)}
.upload-preview{margin-top:14px}
.upload-preview img{width:120px;height:120px;object-fit:cover;border-radius:10px;border:1px solid var(--border)}

/* ---------- ALERTAS ---------- */
.alert{padding:13px 18px;border-radius:10px;font-size:14px;margin-bottom:22px;display:flex;align-items:center;gap:10px}
.alert-success{background:rgba(31,191,107,.12);border:1px solid rgba(31,191,107,.3);color:#5fe0a0}
.alert-error{background:rgba(239,62,82,.12);border:1px solid rgba(239,62,82,.3);color:#ff8a96}

/* ---------- LOGIN ---------- */
.login-wrap{min-height:100vh;display:grid;place-items:center;padding:20px;
  background:radial-gradient(ellipse at top,rgba(9,144,211,.08),transparent 60%),var(--bg)}
.login-card{width:100%;max-width:400px;background:var(--card);border:1px solid var(--border);border-radius:18px;padding:38px 34px}
.login-logo{display:flex;flex-direction:column;align-items:center;gap:14px;margin-bottom:28px}
.login-logo .logo{width:54px;height:54px;border-radius:14px;display:grid;place-items:center;background:linear-gradient(135deg,var(--accent),#063e63);color:#fff;box-shadow:0 0 24px var(--accent-glow)}
.login-logo h1{font-size:22px;font-weight:800;letter-spacing:1px}
.login-logo p{color:var(--text-dim);font-size:14px}
.login-card .field{margin-bottom:18px}
.empty-state{text-align:center;padding:50px 20px;color:var(--text-dim)}
.empty-state svg{opacity:.4;margin-bottom:12px}

/* mobile toggle */
.menu-btn{display:none}
.overlay{display:none}

/* ---------- RESPONSIVO ---------- */
@media(max-width:980px){
  .stats{grid-template-columns:1fr}
  .form-grid{grid-template-columns:1fr}
}
@media(max-width:820px){
  .sidebar{transform:translateX(-100%);transition:.25s;box-shadow:0 0 40px rgba(0,0,0,.6)}
  .sidebar.open{transform:translateX(0)}
  .main{margin-left:0}
  .topbar{display:flex;align-items:center;gap:14px;padding:16px 20px;border-bottom:1px solid var(--border);background:var(--sidebar);position:sticky;top:0;z-index:30}
  .menu-btn{display:grid;place-items:center;width:42px;height:42px;border-radius:10px;background:var(--card);border:1px solid var(--border);color:var(--text);cursor:pointer}
  .topbar .brand-mini{font-weight:800;letter-spacing:.5px}
  .content{padding:22px 18px}
  .page-head h1{font-size:24px}
  .overlay.show{display:block;position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:40}
}