/* ===================================================================
   ONIX Estoque — BASE: reset, layout (sidebar/topbar), login.
   Estrutura de tela herdada do NIXX. Cores/medidas só via tokens.
   =================================================================== */

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--fonte);
  background: var(--cor-fundo);
  color: var(--cor-texto);
  -webkit-font-smoothing: antialiased;
  overflow: hidden;
}

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
input, select { font-family: inherit; }
a { color: inherit; text-decoration: none; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--cor-borda); border-radius: var(--raio-sm); }
::-webkit-scrollbar-track { background: transparent; }

.hide { display: none !important; }

/* ================= LAYOUT ================= */
.app { display: flex; height: 100vh; }

/* ---------- Marca / logo ---------- */
.brand { display: flex; align-items: center; gap: var(--esp-3); padding: var(--esp-1) var(--esp-2) var(--esp-6); }
.brand .logo {
  width: 42px; height: 42px; border-radius: 12px;
  background: linear-gradient(150deg, #1c1c1c, #0e0e0e);
  border: 1px solid var(--cor-marca-borda);
  box-shadow: 0 6px 16px var(--cor-marca-suave);
  display: flex; align-items: center; justify-content: center;
  font-weight: var(--peso-black); font-size: var(--fs-lg); letter-spacing: -1px;
}
.brand .logo span:first-child { color: #fff; }
.brand .logo .lx { color: var(--cor-marca); margin-left: -2px; }
.brand .name { font-size: var(--fs-xl); font-weight: var(--peso-black); letter-spacing: .5px; color: var(--cor-texto); }
.brand .name .ax { color: var(--cor-marca); }

.brand-solo { padding: 0 0 var(--esp-5); justify-content: center; }
.brand-solo .logo { width: 56px; height: 56px; border-radius: var(--raio); font-size: 25px; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--largura-sidebar); flex-shrink: 0;
  background: var(--cor-fundo);
  border-right: 1px solid var(--cor-borda-suave);
  display: flex; flex-direction: column;
  padding: var(--esp-6) var(--esp-4);
  z-index: 60;
}
.nav { display: flex; flex-direction: column; gap: var(--esp-1); }
.nav-item {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); border-radius: 12px;
  color: var(--cor-texto-2); font-size: var(--fs-md); font-weight: var(--peso-medio);
  position: relative; transition: background var(--transicao), color var(--transicao);
  cursor: pointer;
}
.nav-item svg { width: 20px; height: 20px; flex-shrink: 0; }
.nav-item:hover { background: var(--cor-card); color: var(--cor-texto); }
.nav-item.active { background: var(--cor-marca-suave); color: var(--cor-marca); }
.nav-item.active::before {
  content: ""; position: absolute; left: calc(-1 * var(--esp-4)); top: 20%; bottom: 20%;
  width: 4px; border-radius: 0 4px 4px 0; background: var(--cor-marca);
}
.sidebar-footer { margin-top: auto; display: flex; flex-direction: column; gap: var(--esp-1); }
.sidebar-user {
  display: flex; align-items: center; gap: var(--esp-3);
  padding: var(--esp-3) var(--esp-4); border-radius: 12px;
  border: 1px solid var(--cor-borda); margin-bottom: var(--esp-3);
}
.sidebar-user .su-av {
  width: 30px; height: 30px; border-radius: var(--raio-full); flex: none;
  display: grid; place-items: center; font-weight: var(--peso-bold); font-size: var(--fs-sm);
  background: var(--cor-marca); color: var(--cor-marca-contraste);
}
.sidebar-user .su-id { min-width: 0; }
.sidebar-user .su-nome { font-size: var(--fs-sm); font-weight: var(--peso-semi); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-user .su-papel { font-size: var(--fs-xs); color: var(--cor-texto-3); }

/* ---------- Main / topbar ---------- */
.main { flex: 1; overflow-y: auto; padding: var(--esp-6) var(--esp-8) var(--esp-10); }
.topbar {
  display: flex; align-items: flex-start; gap: var(--esp-5); margin-bottom: var(--esp-6); flex-wrap: wrap;
  padding-bottom: var(--esp-6); border-bottom: 1px solid var(--cor-borda);
}
.hello h1 { font-size: var(--fs-2xl); font-weight: var(--peso-bold); }
.hello p { color: var(--cor-texto-2); font-size: var(--fs-base); margin-top: var(--esp-1); }
.topbar-actions { margin-left: auto; display: flex; align-items: center; gap: var(--esp-3); }

.hamburger { display: none; }

/* ---------- Bottom nav (mobile) ---------- */
.bottom-nav { display: none; }
.bn-item {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--esp-1);
  flex: 1; min-width: 0; padding: var(--esp-2) var(--esp-1);
  color: var(--cor-texto-3); font-size: 10px; font-weight: var(--peso-semi);
}
.bn-item span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.bn-item svg { width: 22px; height: 22px; }
.bn-item.active { color: var(--cor-marca); }

.scrim { display: none; }

/* ================= LOGIN (tela de bloqueio) ================= */
.lock {
  position: fixed; inset: 0; z-index: 300;
  display: grid; place-items: center; padding: var(--esp-5);
  background: radial-gradient(1200px 600px at 50% -10%, var(--cor-marca-suave), transparent), var(--cor-fundo);
  overflow-y: auto;
}
.lock-card {
  width: 100%; max-width: 384px;
  background: var(--cor-fundo-elev); border: 1px solid var(--cor-borda);
  border-radius: var(--raio-lg); padding: var(--esp-8) var(--esp-6) var(--esp-6);
  box-shadow: var(--sombra);
}
.lock-head { text-align: center; margin-bottom: var(--esp-6); }
.lock-title { font-size: var(--fs-xl); font-weight: var(--peso-bold); margin: 0 0 var(--esp-2); }
.lock-sub { color: var(--cor-texto-3); font-size: var(--fs-sm); line-height: 1.5; max-width: 260px; margin: 0 auto; }
.lock-error { color: var(--cor-vermelho); font-size: var(--fs-sm); min-height: 18px; margin: var(--esp-1) 0 var(--esp-2); text-align: center; }
.lock-foot {
  color: var(--cor-texto-3); font-size: var(--fs-xs); text-align: center; line-height: 1.5;
  margin-top: var(--esp-6); padding-top: var(--esp-4); border-top: 1px solid var(--cor-borda-suave);
}
.pw-field { position: relative; }
.pw-field input { padding-right: 44px !important; }
.pw-toggle {
  position: absolute; right: var(--esp-2); top: 50%; transform: translateY(-50%);
  width: 34px; height: 34px; border-radius: var(--esp-2); display: grid; place-items: center;
  color: var(--cor-texto-3); font-size: var(--fs-md); transition: color var(--transicao);
}
.pw-toggle:hover { color: var(--cor-texto); }

/* ================= RESPONSIVO (celular) ================= */
@media (max-width: 820px) {
  body { overflow: auto; }
  .app { display: block; height: auto; }
  .sidebar {
    position: fixed; top: 0; bottom: 0; left: 0;
    transform: translateX(-100%); transition: transform .25s ease;
    box-shadow: var(--sombra); height: 100vh;
  }
  .sidebar.open { transform: translateX(0); }
  .scrim { position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 55; }
  .scrim.open { display: block; }
  .main { height: auto; padding: var(--esp-4) var(--esp-4) calc(96px + env(safe-area-inset-bottom)); }

  .bottom-nav {
    display: flex; align-items: center; justify-content: space-around;
    position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
    background: var(--cor-fundo-elev); border-top: 1px solid var(--cor-borda);
    padding: var(--esp-1) var(--esp-2) calc(var(--esp-1) + env(safe-area-inset-bottom));
  }
  .hamburger {
    display: grid; place-items: center; width: 42px; height: 42px;
    border-radius: var(--raio-sm); border: 1px solid var(--cor-borda);
    background: var(--cor-card); color: var(--cor-texto);
  }
  .hamburger svg { width: 22px; height: 22px; }
  .topbar { align-items: center; }
  .hello h1 { font-size: var(--fs-xl); }
  .hello p { display: none; }
}