/* Visual aprovado para Estoque. Escopado à página para não alterar outras abas.
   Mantém os campos, estados e ações existentes; mobile-first a partir de 390px. */
body.estoque-active {
  --bg:#0b1119; --surface:#0f1b2a; --surface-2:#122134;
  --line:#283d54; --line-strong:#3a526f;
  --ink:#eff4fb; --ink-2:#afc5df; --muted:#8ba4c2;
  --accent:#347ef5; --accent-ink:#fff; --accent-2:#58a0ff; --accent-soft:#142e4e;
  --good:#22d777; --good-ink:#4ade80; --warn:#f5ab17; --crit:#ef646e; --crit-ink:#ff969e;
  --shadow:0 5px 18px rgba(0,0,0,.12);
  color-scheme:dark;
}
body.estoque-active .nav,
body.estoque-active .topbar,
body.estoque-active .tabbar { background:#0d1825; }
body.estoque-active .nav { padding:16px 12px; }
body.estoque-active .brand { padding:2px 6px 18px; }
body.estoque-active .brand .logo { width:44px; height:44px; border-radius:10px; font-size:20px; }
body.estoque-active .nav-btn { min-height:40px; color:#cedcf0; }
body.estoque-active .nav-btn.active,
body.estoque-active .sub button.active { background:var(--accent-soft); color:var(--accent-2); }
body.estoque-active .sub button { padding-top:7px; padding-bottom:7px; color:var(--ink-2); }
body.estoque-active .sub button.active { border-left-color:var(--accent-2); }
body.estoque-active .topbar { min-height:64px; gap:10px; padding:10px 14px; }
body.estoque-active .crumbs b { font-size:18px; font-weight:800; }
body.estoque-active .acct { min-width:0; max-width:100%; }
body.estoque-active .acct select { min-width:0; max-width:100%; }
body.estoque-active .pill.on { color:#49e18e; background:#102d25; }
body.estoque-active .iconbtn { width:38px; height:38px; }

#page-estoque { padding:16px 14px 32px; }
#page-estoque .estkpis { grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-bottom:14px; }
#page-estoque .estkpis .tile {
  --est-accent:#347ef5; --est-icon:#1767ed;
  display:grid; grid-template-columns:32px minmax(0,1fr);
  grid-template-areas:"icon label" "value value" "note note";
  grid-template-rows:auto auto 1fr; align-content:start; align-items:start;
  gap:8px; padding:13px 12px; min-width:0; min-height:150px;
  border:1px solid var(--line); border-top:2px solid var(--est-accent); border-radius:10px;
  background:linear-gradient(120deg,#122134,#0f1b2a); box-shadow:var(--shadow);
}
#page-estoque .estkpis .est-kpi-reserved { --est-accent:#f5ab17; --est-icon:#d99005; }
#page-estoque .estkpis .est-kpi-full { --est-accent:#ff801e; --est-icon:#f27617; }
#page-estoque .estkpis .est-kpi-total { --est-accent:#25d984; --est-icon:#0eb369; }
#page-estoque .estkpis .est-kpi-value { --est-accent:#22d777; --est-icon:#0c9458; grid-column:1 / -1; grid-template-areas:"icon label" "icon value" ". note"; min-height:114px; }
#page-estoque .est-kpi-icon { grid-area:icon; display:grid; place-items:center; width:32px; height:36px; border-radius:8px; background:var(--est-icon); color:#fff; }
#page-estoque .est-kpi-icon svg { width:23px; height:23px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
#page-estoque .estkpis .lbl { grid-area:label; align-self:center; font-size:11px; line-height:1.4; text-transform:none; letter-spacing:0; color:var(--ink-2); }
#page-estoque .estkpis .val { grid-area:value; font-size:25px; line-height:1.2; font-weight:800; letter-spacing:-.65px; overflow-wrap:anywhere; }
#page-estoque .estkpis .fine { grid-area:note; margin:0; font-size:11px; line-height:1.6; color:var(--ink-2); overflow-wrap:anywhere; }
#page-estoque .panel { padding:14px 12px; border:1px solid var(--line); border-radius:10px; background:var(--surface); box-shadow:var(--shadow); }
#page-estoque .panel h3 { font-size:16px; }
#page-estoque .actions { gap:10px; margin-bottom:16px; }
#page-estoque .actions > div:first-child { flex:1 1 100%; min-width:0; }
#page-estoque .actions > .grow { display:none; }
#page-estoque #estInfo { display:block; margin:4px 0 0; font-size:11px; line-height:1.6; overflow-wrap:anywhere; }
#page-estoque #estBusca {
  flex:1 1 100%; min-height:44px; padding:10px 12px 10px 38px; font-size:13px;
  background:var(--surface-2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23afc5df' stroke-width='1.8' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='7'/%3E%3Cpath d='m16 16 5 5'/%3E%3C/svg%3E") no-repeat 12px center;
  border-color:var(--line); border-radius:8px;
}
#page-estoque .btn { min-height:44px; border-radius:8px; justify-content:center; }
#page-estoque #estMovNovo { width:100%; }
#page-estoque .btn.primary { background:var(--accent); border-color:#5093ff; color:#fff; }
#page-estoque .btn.primary:hover { background:#276feb; }
#page-estoque .btn:disabled { opacity:.55; cursor:wait; }
#page-estoque .est-lista { gap:12px; margin-top:0; }
#page-estoque #estMovInfo:empty { display:none; }
#page-estoque .est-fam { background:var(--surface-2); border-color:var(--line); border-radius:10px; }
#page-estoque .est-fam > header { background:transparent; border:0; }
#page-estoque .est-toggle {
  grid-template-columns:10px 26px minmax(0,1fr);
  grid-template-areas:"chevron icon title" ". icon quantity" ". meta meta" ". value value";
  gap:4px 10px; min-height:130px; padding:14px 12px;
}
#page-estoque .est-toggle:hover { background:#172b42; }
#page-estoque .est-toggle:focus-visible { outline-offset:-3px; border-radius:9px; }
#page-estoque .est-toggle .chev { grid-area:chevron; width:8px; height:8px; border:0; border-top:2px solid currentColor; border-right:2px solid currentColor; transform:rotate(45deg); opacity:.9; }
#page-estoque .est-fam.aberta .est-toggle .chev { transform:rotate(135deg); }
#page-estoque .est-toggle::before {
  content:""; grid-area:icon; align-self:center; width:26px; height:28px; background:var(--accent);
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8' stroke-linejoin='round'%3E%3Cpath d='m12 2 9 5v10l-9 5-9-5V7Z M3 7l9 5 9-5 M12 12v10'/%3E%3C/svg%3E") center / contain no-repeat;
}
#page-estoque .est-toggle > span { grid-area:title; font-size:13px; line-height:1.5; }
#page-estoque .est-toggle > b:last-child { grid-area:quantity; font-size:21px; line-height:1.3; white-space:normal; overflow-wrap:anywhere; }
#page-estoque .est-toggle small { grid-area:meta; justify-self:start; text-align:left; font-size:11px; line-height:1.6; font-weight:500; color:var(--ink-2); margin-top:5px; overflow-wrap:anywhere; }
#page-estoque .est-toggle .valor { grid-area:value; justify-self:start; font-size:17px; color:var(--good); margin-top:3px; white-space:normal; overflow-wrap:anywhere; }
#page-estoque .est-itens { background:#0e1a29; }
#page-estoque .est-linha { grid-template-columns:minmax(0,1fr) auto; gap:8px 12px; padding:14px 12px; }
#page-estoque .est-linha > div { min-width:0; }
#page-estoque .est-linha > div:first-child { grid-column:1 / -1; }
#page-estoque .est-linha .nome { display:block; font-size:13px; }
#page-estoque .est-linha .sku { font-size:11px; overflow-wrap:anywhere; }
#page-estoque .est-linha .valor { grid-column:1; align-self:start; font-size:13px; text-align:left; }
#page-estoque .est-linha .saldo { font-size:18px; min-width:0; }
#page-estoque .est-linha .saldo small { font-size:11px; white-space:normal; overflow-wrap:anywhere; max-width:190px; }
#page-estoque .est-linha .valor small { display:block; margin:3px 0 0; font-size:10px; white-space:normal; }
#page-estoque .est-linha .renomear { min-height:36px; font-size:11px; }
#page-estoque .est-mov-form { grid-template-columns:1fr; gap:12px; padding:14px; background:var(--surface-2); border-color:var(--line); margin:0 0 16px; }
#page-estoque .est-mov-form .finance-field,
#page-estoque .est-mov-form .btn { grid-column:auto; min-width:0; }
#page-estoque .est-mov-form input,
#page-estoque .est-mov-form select { width:100%; min-width:0; min-height:44px; padding:9px 10px; border:1px solid var(--line-strong); border-radius:7px; background:var(--surface); color:var(--ink); color-scheme:dark; }
#page-estoque .est-mov-form label { color:var(--ink-2); }

@media (min-width:761px) {
  body.estoque-active .topbar { padding:10px 24px; }
  #page-estoque { padding:18px 24px 36px; }
  #page-estoque .estkpis { grid-template-columns:repeat(3,minmax(0,1fr)); gap:12px; }
  #page-estoque .estkpis .tile { grid-column:auto; min-height:152px; }
  #page-estoque .panel { padding:18px; }
  #page-estoque .actions > div:first-child { flex:1 1 320px; }
  #page-estoque #estBusca { flex:1 1 240px; max-width:420px; }
  #page-estoque #estMovNovo { width:auto; }
  #page-estoque .est-toggle { grid-template-columns:12px 30px minmax(0,1fr) auto; grid-template-areas:"chevron icon title value" "chevron icon quantity value" ". . meta meta"; min-height:98px; padding:16px 18px; gap:3px 16px; }
  #page-estoque .est-toggle > span { font-size:14px; }
  #page-estoque .est-toggle .valor { justify-self:end; margin:0; font-size:18px; }
  #page-estoque .est-toggle small { margin:4px 0 0; font-size:12px; }
  #page-estoque .est-linha { grid-template-columns:minmax(0,1fr) auto minmax(180px,.8fr); padding:14px 18px 14px 80px; }
  #page-estoque .est-linha > div:first-child { grid-column:auto; }
  #page-estoque .est-linha .valor { grid-column:auto; text-align:right; }
  #page-estoque .est-linha .saldo small { max-width:none; }
  #page-estoque .est-mov-form { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (min-width:1350px) {
  #page-estoque .estkpis { grid-template-columns:repeat(5,minmax(0,1fr)); }
  #page-estoque .estkpis .tile { grid-template-columns:48px minmax(0,1fr); grid-template-areas:"icon label" "icon value" ". note"; gap:4px 16px; padding:20px 16px 16px; min-height:158px; }
  #page-estoque .est-kpi-icon { width:48px; height:54px; border-radius:10px; }
  #page-estoque .est-kpi-icon svg { width:28px; height:28px; }
  #page-estoque .estkpis .lbl { font-size:12px; }
  #page-estoque .estkpis .val { font-size:clamp(21px,1.55vw,28px); }
  #page-estoque .estkpis .fine { padding-top:12px; }
  #page-estoque .estkpis .est-kpi-value { grid-template-columns:40px minmax(0,1fr); gap:4px 12px; }
  #page-estoque .est-kpi-value .est-kpi-icon { width:40px; }
  #page-estoque .est-kpi-value .val { font-size:clamp(19px,1.45vw,27px); }
  #page-estoque .est-toggle { grid-template-columns:12px 30px minmax(200px,1fr) minmax(220px,auto) auto; grid-template-areas:"chevron icon title meta value" "chevron icon quantity meta value"; min-height:80px; }
  #page-estoque .est-toggle small { justify-self:end; text-align:right; max-width:520px; margin:0; }
  #page-estoque .est-mov-form { grid-template-columns:repeat(3,minmax(0,1fr)); }
}