:root {
  /* Paleta Piteco (2026-07): azul-marinho + azul royal + vermelho + branco */
  --bg: #0a1226;
  --bg2: #0e1a33;
  --card: #14213d;
  --card-hover: #1b2b4d;
  --border: #24365c;
  --text: #f0f4fc;
  --text2: #93a3c4;
  --text3: #5d6f96;
  --accent: #2f6bff;
  --accent-light: #6a97ff;
  --accent-bg: rgba(47,107,255,0.14);
  --brand-red: #e02f2f;
  --green: #22c55e;
  --green-bg: rgba(34,197,94,0.12);
  --red: #ef4444;
  --red-bg: rgba(239,68,68,0.12);
  --yellow: #f59e0b;
  --yellow-bg: rgba(245,158,11,0.12);
  --radius: 12px;
  --radius-sm: 8px;
  --shadow: 0 2px 8px rgba(0,0,0,0.3);
  --shadow-lg: 0 8px 32px rgba(0,0,0,0.4);
  --font: 'Outfit', system-ui, sans-serif;
  --mono: 'JetBrains Mono', monospace;
  --sidebar-w: 230px;
}
*{margin:0;padding:0;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
html,body{font-family:var(--font);background:var(--bg);color:var(--text);min-height:100vh;overflow-x:hidden;}
button{font-family:inherit;cursor:pointer;border:none;outline:none;background:none;color:inherit;}
input,textarea,select{font-family:inherit;outline:none;color:var(--text);background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);padding:10px 14px;font-size:14px;transition:border .15s;}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px rgba(47,107,255,0.2);}
::selection{background:var(--accent);color:#fff;}
::-webkit-scrollbar{width:6px;height:6px;}
::-webkit-scrollbar-track{background:transparent;}
::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}

/* Sidebar */
.sidebar{
  position:fixed;left:0;top:0;bottom:0;width:var(--sidebar-w);
  background:var(--bg2);border-right:1px solid var(--border);
  display:flex;flex-direction:column;z-index:100;
  transition:transform .2s;
}
.sidebar-logo{padding:20px 18px;display:flex;align-items:center;gap:10px;}
.logo-icon{font-size:22px;color:var(--brand-red,#e02f2f);}
.logo-text{font-size:17px;font-weight:700;letter-spacing:-0.5px;}
.sidebar-nav{flex:1;padding:4px 10px;display:flex;flex-direction:column;gap:1px;overflow-y:auto;overflow-x:hidden;}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:11px 14px;
  border-radius:var(--radius-sm);font-size:14px;font-weight:500;
  color:var(--text2);transition:all .15s;text-align:left;width:100%;
}
.nav-item:hover{background:var(--card);color:var(--text);}
.nav-item.active{background:var(--accent-bg);color:var(--accent-light);font-weight:600;}
.nav-icon{font-size:18px;width:24px;text-align:center;}
.nav-divider{height:1px;background:var(--border);margin:8px 0;}
.sidebar-footer{padding:16px 18px;font-size:11px;color:var(--text3);}

/* Mobile nav */
.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;
  background:var(--bg2);border-top:1px solid var(--border);
  z-index:100;padding:6px 0 env(safe-area-inset-bottom,4px);
  justify-content:space-around;
}
.mob-nav-item{
  display:flex;flex-direction:column;align-items:center;gap:2px;
  padding:6px 12px;border-radius:var(--radius-sm);font-size:18px;
  color:var(--text3);transition:all .15s;
}
.mob-nav-item small{font-size:10px;font-weight:600;}
.mob-nav-item.active{color:var(--accent-light);}

@media(max-width:768px){
  .sidebar{transform:translateX(-100%);}
  .mobile-nav{display:flex;}
  .main-content{margin-left:0!important;padding-bottom:72px!important;}
}

/* Main content */
.main-content{margin-left:var(--sidebar-w);padding:24px;min-height:100vh;}
@media(max-width:1024px){.main-content{padding:16px;}}

.panel{display:none;}
.panel.active{display:block;animation:fadeIn .2s ease;}
#panel-mensagens.active{display:flex;flex-direction:column;height:calc(100vh - 32px);overflow:hidden;border-radius:var(--radius);border:1px solid var(--border);}
@keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

/* Common components */
.page-header{margin-bottom:24px;}
.page-title{font-size:24px;font-weight:800;letter-spacing:-0.5px;margin-bottom:4px;}
.page-subtitle{font-size:13px;color:var(--text2);font-weight:400;}

.card{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;transition:all .15s;}
.card:hover{border-color:var(--accent);background:var(--card-hover);}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:10px 18px;border-radius:var(--radius-sm);font-size:13px;
  font-weight:600;transition:all .15s;
}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--accent);color:#fff;}
.btn-primary:hover{background:var(--accent-light);}
.btn-secondary{background:var(--card);border:1px solid var(--border);color:var(--text2);}
.btn-secondary:hover{border-color:var(--accent);color:var(--text);}
.btn-danger{background:var(--red-bg);color:var(--red);border:1px solid rgba(239,68,68,0.2);}
.btn-danger:hover{background:rgba(239,68,68,0.2);}
.btn-success{background:var(--green-bg);color:var(--green);border:1px solid rgba(34,197,94,0.2);}
.btn-sm{padding:6px 12px;font-size:12px;}

.badge{
  display:inline-flex;align-items:center;padding:3px 8px;border-radius:20px;
  font-size:11px;font-weight:700;letter-spacing:0.3px;
}
.badge-green{background:var(--green-bg);color:var(--green);}
.badge-red{background:var(--red-bg);color:var(--red);}
.badge-yellow{background:var(--yellow-bg);color:var(--yellow);}
.badge-accent{background:var(--accent-bg);color:var(--accent-light);}

.progress-bar{height:6px;background:var(--border);border-radius:3px;overflow:hidden;}
.progress-fill{height:100%;border-radius:3px;transition:width .4s ease;background:var(--accent);}
.progress-fill.green{background:var(--green);}

.empty-state{
  text-align:center;padding:48px 24px;
  border:2px dashed var(--border);border-radius:var(--radius);
}
.empty-state .icon{font-size:40px;margin-bottom:10px;}
.empty-state p{color:var(--text3);font-size:13px;margin-top:4px;}

/* Grid layouts */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:12px;}
.grid-3{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;}
@media(max-width:600px){.grid-2,.grid-3{grid-template-columns:1fr;}}

/* Table */
.data-table{width:100%;border-collapse:collapse;}
.data-table th{
  text-align:left;padding:10px 14px;font-size:11px;font-weight:700;
  color:var(--text3);text-transform:uppercase;letter-spacing:0.5px;
  border-bottom:1px solid var(--border);
}
.data-table td{
  padding:10px 14px;font-size:13px;border-bottom:1px solid var(--border);
  vertical-align:middle;
}
.data-table tr:hover td{background:var(--card-hover);}
.data-table .mono{font-family:var(--mono);font-size:12px;}

/* Scan overlay */
.scan-overlay{
  position:fixed;inset:0;z-index:9999;
  background:var(--bg);display:flex;align-items:center;justify-content:center;
  animation:zoomIn .3s ease;
  cursor:pointer; /* toque em qualquer lugar fecha e libera o próximo bipe */
}
.scan-overlay.hidden{display:none;}
.scan-overlay-content{text-align:center;padding:24px;max-width:600px;width:90vw;max-height:90vh;overflow-y:auto;}
.scan-overlay-content img{
  width:200px;height:200px;object-fit:contain;border-radius:var(--radius);
  background:var(--card);margin-bottom:24px;
}
.scan-overlay-content h1{font-size:28px;font-weight:800;margin-bottom:16px;line-height:1.2;}
.scan-overlay-qty{font-size:64px;font-weight:800;color:var(--accent);font-family:var(--mono);}
.scan-overlay-check{
  font-size:48px;margin-top:20px;color:var(--green);
  animation:pulse 1s infinite;
}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:0.5}}
@keyframes zoomIn{from{transform:scale(0.9);opacity:0}to{transform:scale(1);opacity:1}}

/* Modal */
.modal-overlay{
  position:fixed;inset:0;background:rgba(0,0,0,0.7);z-index:1000;
  display:flex;align-items:center;justify-content:center;padding:16px;
  animation:fadeIn .15s ease;
}
.modal{
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  padding:24px;width:100%;max-width:560px;max-height:90vh;overflow-y:auto;
  box-shadow:var(--shadow-lg);animation:slideUp .2s ease;
}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-title{font-size:18px;font-weight:700;margin-bottom:16px;}
.modal-actions{display:flex;gap:8px;margin-top:20px;justify-content:flex-end;}

.form-group{margin-bottom:14px;}
.form-label{font-size:12px;font-weight:600;color:var(--text2);margin-bottom:4px;display:block;}
.form-input{width:100%;}
.form-textarea{width:100%;resize:vertical;font-family:var(--mono);font-size:12px;}
.form-error{color:var(--red);font-size:12px;font-weight:600;margin-top:4px;}

/* File upload */
.file-upload{
  border:2px dashed var(--border);border-radius:var(--radius);padding:20px;
  text-align:center;cursor:pointer;transition:all .15s;position:relative;
}
.file-upload:hover{border-color:var(--accent);background:var(--accent-bg);}
.file-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%;}
.file-upload .icon{font-size:28px;margin-bottom:6px;}
.file-upload .label{font-size:12px;color:var(--text2);}
.file-upload .filename{font-size:12px;color:var(--accent);font-weight:600;margin-top:4px;}

/* Scan area */
.scan-section{background:var(--card);border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:16px;}
.scan-mode-toggle{display:flex;gap:6px;margin-bottom:12px;}
.scan-mode-btn{
  flex:1;padding:10px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  border:2px solid var(--border);color:var(--text2);text-align:center;transition:all .15s;
}
.scan-mode-btn.active{border-color:var(--accent);background:var(--accent-bg);color:var(--accent-light);}
.scan-input{
  width:100%;padding:14px 16px;font-size:20px;font-weight:600;
  border:2px solid var(--accent);border-radius:var(--radius);
  background:var(--bg);letter-spacing:1px;font-family:var(--mono);
}

/* Product cards for daily/full */
.product-item{
  display:flex;align-items:center;gap:12px;padding:12px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius);
  transition:all .2s;
}
.product-item.done{opacity:0.4;border-color:var(--green);}
.product-item img{width:56px;height:56px;object-fit:contain;border-radius:var(--radius-sm);background:var(--bg);}
.product-item .info{flex:1;min-width:0;}
.product-item .info h4{font-size:13px;font-weight:600;margin-bottom:2px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.product-item .info p{font-size:11px;color:var(--text3);}
.product-item .qty-badge{
  font-family:var(--mono);font-size:16px;font-weight:700;
  padding:6px 12px;border-radius:var(--radius-sm);
  background:var(--accent-bg);color:var(--accent-light);min-width:48px;text-align:center;
}

/* Toast */
.toast-container{position:fixed;bottom:80px;right:16px;z-index:9000;display:flex;flex-direction:column;gap:8px;}
@media(max-width:768px){.toast-container{bottom:90px;left:16px;right:16px;}}
.toast{
  padding:12px 16px;border-radius:var(--radius-sm);font-size:13px;font-weight:600;
  box-shadow:var(--shadow-lg);animation:slideIn .2s ease;min-width:250px;
}
.toast.success{background:#15803d;color:#dcfce7;}
.toast.error{background:#991b1b;color:#fecaca;}
.toast.warn{background:#92400e;color:#fef3c7;}
@keyframes slideIn{from{transform:translateX(30px);opacity:0}to{transform:translateX(0);opacity:1}}

/* Tabs inside panels */
.tabs{display:flex;gap:2px;margin-bottom:16px;background:var(--bg2);border-radius:var(--radius-sm);padding:3px;}
.tab-btn{
  flex:1;padding:8px 14px;border-radius:6px;font-size:12px;font-weight:600;
  color:var(--text3);text-align:center;transition:all .15s;
}
.tab-btn.active{background:var(--card);color:var(--text);box-shadow:var(--shadow);}

/* Stats row */
.stats-row{display:flex;gap:12px;margin-bottom:16px;flex-wrap:wrap;}
.stat-card{
  flex:1;min-width:120px;background:var(--card);border:1px solid var(--border);
  border-radius:var(--radius);padding:14px;
}
.stat-card .label{font-size:11px;color:var(--text3);font-weight:600;text-transform:uppercase;letter-spacing:0.5px;}
.stat-card .value{font-size:22px;font-weight:800;font-family:var(--mono);margin-top:4px;}

/* Toolbar */
.toolbar{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;align-items:center;}
.toolbar .search-input{
  flex:1;min-width:200px;padding:8px 14px;font-size:13px;
  background:var(--bg2);border:1px solid var(--border);border-radius:var(--radius-sm);
}

/* Camera */
#camera-reader video{width:100%!important;border-radius:var(--radius)!important;}
.camera-select{
  width:100%;padding:8px 12px;font-size:13px;margin-bottom:8px;
  background:var(--card);border:1px solid var(--border);border-radius:var(--radius-sm);
}

/* Stock table coloring */
.stock-deficit{color:var(--red);font-weight:700;}
.stock-ok{color:var(--green);}
.stock-warn{color:var(--yellow);}

/* Admin dropdown in sidebar — now flat sections, no dropdown */
.nav-section-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:1px;
  padding:16px 14px 6px;
  user-select:none;
}
.nav-section-label:first-child{padding-top:4px;}
.nav-item-parent{position:relative;}
.nav-chevron{
  margin-left:auto;font-size:10px;color:var(--text3);
  transition:transform .2s;
}
.nav-chevron.open{transform:rotate(90deg);}
.nav-submenu{
  display:none;flex-direction:column;gap:1px;
  padding-left:16px;overflow:hidden;
}
.nav-submenu.open{display:flex;animation:slideDown .2s ease;}
@keyframes slideDown{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:translateY(0)}}
.nav-sub{
  padding:9px 14px!important;font-size:13px!important;
}
.nav-sub.active{color:var(--accent-light)!important;background:var(--accent-bg)!important;}

/* Mobile drawer section labels */
.mobile-drawer-section-label{
  font-size:10px;font-weight:700;color:var(--text3);
  text-transform:uppercase;letter-spacing:1px;
  padding:14px 16px 4px;
}
.mobile-drawer-section-label:first-child{padding-top:4px;}

/* Mobile admin drawer */
.mobile-admin-drawer{
  position:fixed;inset:0;z-index:200;
}
.mobile-admin-drawer.hidden{display:none;}
.mobile-admin-drawer-bg{
  position:absolute;inset:0;background:rgba(0,0,0,0.6);
}
.mobile-admin-drawer-content{
  position:absolute;bottom:0;left:0;right:0;
  background:var(--bg2);border-top:1px solid var(--border);
  border-radius:20px 20px 0 0;padding:20px 16px env(safe-area-inset-bottom,16px);
  animation:slideUp .2s ease;
  /* Lista cresceu — limita altura e habilita rolagem interna */
  max-height:85vh;max-height:85dvh;
  overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
}
.mobile-admin-option{
  display:block;width:100%;text-align:left;padding:14px 16px;
  font-size:15px;font-weight:500;color:var(--text);
  border-radius:var(--radius-sm);transition:background .15s;
}
.mobile-admin-option:active{background:var(--card);}
@keyframes spin{to{transform:rotate(360deg)}}

/* ─── Login Screen ─────────────────────────────────────────────────────────── */
#login-screen{
  position:fixed;inset:0;z-index:99999;
  background:var(--bg);
  display:flex;align-items:center;justify-content:center;
}
.login-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:40px 36px 32px;width:95vw;max-width:380px;
  box-shadow:var(--shadow-lg);text-align:center;
}
.login-logo{font-size:28px;font-weight:800;margin-bottom:4px;color:var(--text);}
.login-logo .logo-icon{color:var(--accent);margin-right:6px;}
.login-sub{font-size:13px;color:var(--text3);margin-bottom:28px;}
.login-roles{display:flex;flex-direction:column;gap:8px;margin-bottom:0;}
.login-role-btn{
  display:flex;align-items:center;gap:12px;padding:14px 18px;
  background:var(--bg2);border:1.5px solid var(--border);border-radius:var(--radius);
  cursor:pointer;transition:all .18s;text-align:left;width:100%;
}
.login-role-btn:hover{border-color:var(--accent);background:var(--accent-bg);}
.login-role-btn .role-icon{font-size:24px;flex-shrink:0;width:36px;text-align:center;}
.login-role-btn .role-info{flex:1;}
.login-role-btn .role-name{font-size:15px;font-weight:700;color:var(--text);}
.login-role-btn .role-desc{font-size:11px;color:var(--text3);margin-top:2px;}
/* Password modal inside login */
.login-pw-overlay{
  position:fixed;inset:0;z-index:100000;
  background:rgba(0,0,0,.7);
  display:flex;align-items:center;justify-content:center;
  animation:fadeIn .15s ease;
}
.login-pw-card{
  background:var(--card);border:1px solid var(--border);border-radius:16px;
  padding:28px 32px 24px;width:95vw;max-width:340px;text-align:center;
  box-shadow:var(--shadow-lg);
}
.login-pw-card input{
  width:100%;margin:14px 0 8px;padding:12px 16px;font-size:15px;
  background:var(--bg);border:1.5px solid var(--border);border-radius:var(--radius-sm);
  text-align:center;letter-spacing:1px;
}
.login-pw-card input:focus{border-color:var(--accent);}
.login-pw-error{font-size:12px;color:var(--red);min-height:18px;margin-bottom:8px;}
.login-pw-actions{display:flex;gap:8px;}
.login-pw-actions button{flex:1;padding:11px;border-radius:var(--radius-sm);font-size:14px;font-weight:600;}
.login-pw-cancel{background:var(--bg2);border:1px solid var(--border);color:var(--text2);}
.login-pw-cancel:hover{background:var(--card-hover);}
.login-pw-submit{background:var(--accent);color:#fff;}
.login-pw-submit:hover{background:var(--accent-light);}
.login-spinner{
  width:24px;height:24px;margin:0 auto;
  border:3px solid var(--border);border-top-color:var(--accent);
  border-radius:50%;animation:spin .7s linear infinite;
}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
/* Sidebar logout */
.sidebar-logout-btn{
  display:flex;align-items:center;gap:8px;padding:8px 16px;width:100%;
  font-size:12px;font-weight:600;color:var(--text3);cursor:pointer;
  background:transparent;border:none;transition:all .15s;border-radius:var(--radius-sm);
}
.sidebar-logout-btn:hover{color:var(--red);background:var(--red-bg);}