:root {
  --verde-escuro: #023015;
  --verde-escuro-2: #01200d;
  --verde-limao: #A9F31C;
  --verde-limao-hover: #97DE15;
  --amarelo: #FFD60A;
  --vermelho: #E5484D;
  --branco: #FFFFFF;
  --cinza-claro: #F2F4F3;
  --cinza-texto: #6B7A72;
  --sombra: 0 4px 14px rgba(0, 0, 0, 0.15);
  --radius: 14px;
}

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Segoe UI', Roboto, Arial, sans-serif;
  background: var(--cinza-claro);
  color: #1c1c1c;
  -webkit-tap-highlight-color: transparent;
}

#app { min-height: 100vh; display: flex; flex-direction: column; }

button { font-family: inherit; cursor: pointer; }

/* ---------- NAVBAR ---------- */
.navbar {
  background: var(--verde-escuro);
  color: var(--branco);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: var(--sombra);
}
.navbar .brand { display: flex; align-items: center; gap: 10px; }
.navbar .brand img, .navbar .brand svg { height: 34px; }
.navbar .brand-text { font-weight: 800; font-size: 1.05rem; letter-spacing: .3px; }
.navbar .brand-text span { color: var(--verde-limao); }
.navbar-actions { display: flex; align-items: center; gap: 10px; }
.icon-btn {
  background: transparent;
  border: none;
  color: var(--branco);
  font-size: 1.3rem;
  padding: 6px;
  border-radius: 8px;
}
.icon-btn:active { background: rgba(255,255,255,.15); }

/* ---------- LOGIN ---------- */
.login-screen {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: linear-gradient(160deg, var(--verde-escuro) 0%, var(--verde-escuro-2) 100%);
  padding: 24px;
}
.login-logo { margin-bottom: 4px; }
.login-logo img { height: 200px; width: auto; display: block; }
.login-sub { color: #cfe3d7; font-size: .9rem; margin: 4px 0 28px; text-align: center; }
.login-card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 28px 22px;
  width: 100%;
  max-width: 380px;
  box-shadow: var(--sombra);
}
.login-error { background: #fdeceb; color: var(--vermelho); padding: 10px 12px; border-radius: 10px; font-size: .85rem; margin-bottom: 14px; display:none; }
.login-hint { text-align: center; color: var(--cinza-texto); font-size: .78rem; margin-top: 16px; }

/* ---------- FORM ---------- */
.field { margin-bottom: 16px; }
.field label { display: block; font-size: .82rem; font-weight: 700; color: var(--verde-escuro); margin-bottom: 6px; }
.field input, .field select {
  width: 100%;
  padding: 13px 14px;
  border-radius: 10px;
  border: 2px solid #E3E8E5;
  font-size: 1rem;
  background: #FAFBFA;
}
.field input:focus, .field select:focus { outline: none; border-color: var(--verde-limao); background: var(--branco); }
.field-row { display: flex; gap: 10px; }
.field-row .field { flex: 1; }
.field-with-btn { display: flex; gap: 8px; }
.field-with-btn input { flex: 1; }

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: none;
  border-radius: 12px;
  padding: 14px 18px;
  font-weight: 800;
  font-size: 1rem;
  width: 100%;
}
.btn-primary { background: var(--verde-limao); color: var(--verde-escuro-2); }
.btn-primary:active { background: var(--verde-limao-hover); }
.btn-outline { background: transparent; border: 2px solid var(--verde-escuro); color: var(--verde-escuro); }
.btn-danger { background: #FDECEB; color: var(--vermelho); }
.btn-secondary { background: var(--verde-escuro); color: var(--branco); }
.btn-block-sm { width: auto; padding: 10px 16px; font-size: .88rem; border-radius: 10px; }
.btn-icon-square { width: 52px; flex: 0 0 52px; border-radius: 10px; background: var(--verde-escuro); color: var(--branco); border: none; font-size: 1.2rem; }

/* ---------- LAYOUT GERAL ---------- */
.container { padding: 16px; max-width: 720px; margin: 0 auto; width: 100%; flex: 1; }
.page-title { font-size: 1.25rem; font-weight: 800; color: var(--verde-escuro); margin: 4px 0 16px; }
.page-title small { display: block; font-weight: 500; color: var(--cinza-texto); font-size: .8rem; margin-top: 2px; }

/* ---------- DASHBOARD ---------- */
.stats-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 20px; }
.stat-card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 16px;
  box-shadow: var(--sombra);
  border-left: 6px solid var(--verde-limao);
}
.stat-card .stat-num { font-size: 1.8rem; font-weight: 800; color: var(--verde-escuro); }
.stat-card .stat-label { font-size: .78rem; color: var(--cinza-texto); font-weight: 600; margin-top: 2px; }
.stat-card.vermelho { border-left-color: var(--vermelho); }
.stat-card.vermelho .stat-num { color: var(--vermelho); }
.stat-card.amarelo { border-left-color: var(--amarelo); }
.stat-card.amarelo .stat-num { color: #A98600; }
.stat-card.full { grid-column: 1 / -1; }

.section-title { font-weight: 800; color: var(--verde-escuro); margin: 22px 0 10px; font-size: 1rem; }

.loja-resumo-card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.loja-resumo-card .nome { font-weight: 700; color: var(--verde-escuro); }
.loja-resumo-card .badges { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; }

/* ---------- BADGES ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 20px; font-size: .72rem; font-weight: 700; }
.badge-vermelho { background: #FDECEB; color: var(--vermelho); }
.badge-amarelo { background: #FFF6D6; color: #A98600; }
.badge-verde { background: #E7F7DC; color: #2F7A2F; }
.badge-ruptura { background: var(--verde-escuro); color: var(--verde-limao); }

/* ---------- LOJAS (SELETOR) ---------- */
.loja-select-card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 18px;
  box-shadow: var(--sombra);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border: 2px solid transparent;
}
.loja-select-card:active { border-color: var(--verde-limao); }
.loja-select-card .info .nome { font-weight: 800; color: var(--verde-escuro); font-size: 1.05rem; }
.loja-select-card .info .endereco { font-size: .82rem; color: var(--cinza-texto); margin-top: 2px; }
.loja-select-card .arrow { font-size: 1.4rem; color: var(--verde-limao); }

/* ---------- ESTOQUE ---------- */
.toolbar { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.toolbar .search-field { flex: 1; min-width: 160px; position: relative; }
.toolbar .search-field input { width: 100%; padding: 12px 14px 12px 38px; border-radius: 10px; border: 2px solid #E3E8E5; }
.toolbar .search-field .icon { position: absolute; left: 12px; top: 50%; transform: translateY(-50%); color: var(--cinza-texto); }

.produto-card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  margin-bottom: 10px;
  border-left: 6px solid var(--verde-limao);
  cursor: pointer;
}
.produto-card.status-vermelho { border-left-color: var(--vermelho); }
.produto-card.status-amarelo { border-left-color: var(--amarelo); }
.produto-card.status-verde { border-left-color: #2F7A2F; }
.produto-card .top-row { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.produto-card .nome { font-weight: 700; color: var(--verde-escuro); font-size: 1rem; }
.produto-card .ean { font-size: .75rem; color: var(--cinza-texto); margin-top: 2px; }
.produto-card .grid-info { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; font-size: .8rem; }
.produto-card .grid-info .label { color: var(--cinza-texto); }
.produto-card .grid-info .valor { font-weight: 700; color: #1c1c1c; }
.produto-card .badges-row { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.produto-card .actions { display: flex; gap: 8px; margin-top: 12px; }
.produto-card .actions button { flex: 1; padding: 9px; font-size: .82rem; border-radius: 8px; }

.empty-state { text-align: center; padding: 40px 20px; color: var(--cinza-texto); }
.empty-state .emoji { font-size: 2.4rem; margin-bottom: 8px; }

/* ---------- FAB / BOTTOM ACTIONS ---------- */
.fab-bar { position: sticky; bottom: 0; background: var(--branco); padding: 12px 16px; box-shadow: 0 -4px 14px rgba(0,0,0,.1); display: flex; gap: 10px; }
.fab-bar .btn { flex: 1; }

/* ---------- SCANNER ---------- */
.scanner-modal { position: fixed; inset: 0; background: rgba(0,0,0,.85); z-index: 100; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 20px; }
.scanner-modal #reader { width: 100%; max-width: 420px; border-radius: var(--radius); overflow: hidden; }
.scanner-modal .btn { max-width: 420px; margin-top: 16px; }

/* ---------- TOAST ---------- */
#toast-container { position: fixed; top: 70px; left: 0; right: 0; display: flex; flex-direction: column; align-items: center; gap: 8px; z-index: 200; pointer-events: none; }
.toast { background: var(--verde-escuro); color: var(--branco); padding: 10px 18px; border-radius: 30px; font-size: .85rem; font-weight: 600; box-shadow: var(--sombra); }
.toast.erro { background: var(--vermelho); }
.toast.sucesso { background: #2F7A2F; }

/* ---------- MENU LATERAL ---------- */
.drawer-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 90; }
.drawer { position: fixed; top: 0; left: 0; bottom: 0; width: 78%; max-width: 300px; background: var(--verde-escuro); z-index: 95; padding: 20px; color: var(--branco); }
.drawer .drawer-user { font-weight: 700; margin-bottom: 4px; }
.drawer .drawer-email { font-size: .78rem; color: #cfe3d7; margin-bottom: 24px; }
.drawer-link { display: flex; align-items: center; gap: 10px; padding: 12px 8px; border-radius: 10px; color: var(--branco); text-decoration: none; font-weight: 600; margin-bottom: 4px; }
.drawer-link:active, .drawer-link.active { background: rgba(255,255,255,.1); color: var(--verde-limao); }

/* ---------- IMPORT/EXPORT ---------- */
.import-box { background: var(--branco); border-radius: var(--radius); padding: 16px; box-shadow: var(--sombra); margin-bottom: 16px; }
.import-box .titulo { font-weight: 700; color: var(--verde-escuro); margin-bottom: 6px; }
.import-box .desc { font-size: .8rem; color: var(--cinza-texto); margin-bottom: 12px; }
.import-actions { display: flex; gap: 8px; }
.import-actions .btn { width: auto; padding: 10px 14px; font-size: .85rem; }
input[type="file"] { display: none; }

/* ---------------- BOTTOM NAV ---------------- */
.bottom-nav {
  position: sticky;
  bottom: 0;
  background: var(--branco);
  display: flex;
  box-shadow: 0 -4px 14px rgba(0,0,0,.12);
  z-index: 40;
  padding-bottom: env(safe-area-inset-bottom);
}
.bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 10px 4px 8px;
  text-decoration: none;
  color: var(--cinza-texto);
  font-size: .68rem;
  font-weight: 700;
  position: relative;
}
.bottom-nav a.active { color: var(--verde-escuro); }
.bottom-nav a .nav-icon { font-size: 1.25rem; }
.bottom-nav a .nav-dot {
  position: absolute;
  top: 4px;
  right: 22%;
  background: var(--vermelho);
  color: #fff;
  font-size: .6rem;
  font-weight: 800;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 3px;
}

/* ---------------- DIVERGÊNCIAS ---------------- */
.divergencia-card {
  background: var(--branco);
  border-radius: var(--radius);
  padding: 14px 16px;
  box-shadow: var(--sombra);
  margin-bottom: 10px;
  border-left: 6px solid var(--vermelho);
}
.divergencia-card.justificada { border-left-color: #2F7A2F; }
.divergencia-card .top-row { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.divergencia-card .nome { font-weight: 700; color: var(--verde-escuro); }
.divergencia-card .meta { font-size: .76rem; color: var(--cinza-texto); margin-top: 3px; }
.divergencia-card .diff { font-weight: 800; color: var(--vermelho); font-size: 1.05rem; white-space: nowrap; }
.divergencia-card .actions { display: flex; gap: 8px; margin-top: 10px; }
.divergencia-card .actions button { flex: 1; padding: 9px; font-size: .8rem; border-radius: 8px; }

.filtro-chips { display: flex; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.chip { padding: 7px 14px; border-radius: 20px; background: #E9EEEB; color: var(--verde-escuro); font-size: .8rem; font-weight: 700; border: none; }
.chip.active { background: var(--verde-escuro); color: var(--verde-limao); }

/* ---------------- MODAIS DE AÇÃO RÁPIDA (abastecer/contar) ---------------- */
.action-modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 90; display: flex; align-items: flex-end; }
.action-modal { background: var(--branco); border-radius: 18px 18px 0 0; padding: 22px 18px; width: 100%; max-width: 480px; margin: 0 auto; }
.action-modal .titulo { font-weight: 800; color: var(--verde-escuro); font-size: 1.1rem; margin-bottom: 4px; }
.action-modal .sub { font-size: .82rem; color: var(--cinza-texto); margin-bottom: 16px; }
.action-modal .qtd-atual-info { background: #F2F4F3; border-radius: 10px; padding: 10px 14px; font-size: .85rem; margin-bottom: 14px; }

/* ---------------- USUÁRIOS ---------------- */
.usuario-card { background: var(--branco); border-radius: var(--radius); padding: 14px 16px; box-shadow: var(--sombra); margin-bottom: 10px; }
.usuario-card .top-row { display: flex; justify-content: space-between; align-items: center; }
.usuario-card .nome { font-weight: 700; color: var(--verde-escuro); }
.usuario-card .email { font-size: .78rem; color: var(--cinza-texto); }
.usuario-card .papel-tag { font-size: .68rem; font-weight: 800; padding: 3px 9px; border-radius: 20px; background: var(--verde-escuro); color: var(--verde-limao); text-transform: uppercase; }
.usuario-card .lojas-vinculadas { font-size: .76rem; color: var(--cinza-texto); margin-top: 8px; }
.checkbox-loja { display: flex; align-items: center; gap: 8px; padding: 8px 0; }
.checkbox-loja input { width: 18px; height: 18px; }

/* ajusta container para não ficar colado na bottom nav */
.container { padding-bottom: 24px; }


@media (min-width: 700px) {
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
}