/* ===========================================================
   Design system compartilhado — NIU Estoque
   Paleta clara/escura, tipografia e componentes base reutilizados
   em todas as páginas. Superfícies são majoritariamente OPACAS
   (não translúcidas) para evitar texto de baixo contraste sobre
   gradientes de fundo — o vidro/blur fica reservado só para
   elementos realmente flutuantes (modais, toasts, dropdowns).
   =========================================================== */

:root, [data-theme="dark"] {
  --bg: #0b0d12;
  --bg-glow-1: rgba(60, 82, 160, .28);
  --bg-glow-2: rgba(110, 70, 170, .22);

  --surface: rgba(23, 26, 35, .94);
  --surface-2: rgba(31, 35, 47, .96);
  --surface-hover: rgba(255, 255, 255, .05);
  --border: rgba(255, 255, 255, .12);

  --text: #f1f3f8;
  --text-strong: #ffffff;
  --muted: #a6afc4;
  --muted-2: #7d8598;

  --primary: #5b8cff;
  --primary-2: #7c5cff;
  --primary-contrast: #ffffff;
  --ok: #34d399;
  --warn: #fbbf24;
  --danger: #f87171;

  --led: #34d399; --transf: #5b8cff; --cabo: #c084fc; --t8: #22d3ee; --reator: #f472b6; --outro: #a3acc2;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow-card: 0 4px 18px rgba(0, 0, 0, .28);
  --shadow-float: 0 16px 44px rgba(0, 0, 0, .45);
  --blur-float: blur(20px) saturate(150%);
}

[data-theme="light"] {
  --bg: #e9ebf0;
  --bg-glow-1: rgba(120, 150, 255, .12);
  --bg-glow-2: rgba(160, 120, 255, .10);

  --surface: #f5f6f9;
  --surface-2: #fcfdfe;
  --surface-hover: rgba(15, 23, 42, .065);
  --border: rgba(15, 23, 42, .18);

  --text: #10131a;
  --text-strong: #000000;
  --muted: #495164;
  --muted-2: #6b7280;

  --primary: #3358d4;
  --primary-2: #6440d6;
  --primary-contrast: #ffffff;
  --ok: #08875a;
  --warn: #92600a;
  --danger: #cc2536;

  --led: #08875a; --transf: #3358d4; --cabo: #8a2be2; --t8: #0678a0; --reator: #c81f6b; --outro: #55607a;

  --shadow-card: 0 2px 10px rgba(15, 23, 42, .07), 0 1px 2px rgba(15, 23, 42, .06);
  --shadow-float: 0 16px 44px rgba(15, 23, 42, .22);
}

/* ---------- base ---------- */
*{box-sizing:border-box}
html{color-scheme:dark}
[data-theme="light"]{color-scheme:light}
body{
  font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1200px 800px at 10% -10%, var(--bg-glow-1) 0%, transparent 60%),
    radial-gradient(1000px 700px at 100% 0%, var(--bg-glow-2) 0%, transparent 55%),
    var(--bg);
  transition:background-color .25s, color .25s;
}
::selection{background:rgba(91,140,255,.35)}
*{scrollbar-width:thin;scrollbar-color:var(--border) transparent}

/* ---------- botão de tema (claro/escuro) ---------- */
.theme-toggle{
  display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:10px;
  border:1px solid var(--border);background:var(--surface-hover);
  color:var(--muted);cursor:pointer;transition:.15s;flex-shrink:0;
}
.theme-toggle:hover{color:var(--text);border-color:var(--primary)}
.theme-toggle svg{width:17px;height:17px}
.theme-toggle .ic-sun{display:none}
.theme-toggle .ic-moon{display:block}
[data-theme="light"] .theme-toggle .ic-sun{display:block}
[data-theme="light"] .theme-toggle .ic-moon{display:none}

/* ---------- componentes comuns ---------- */
input,select,textarea{
  font-family:inherit;color:var(--text);background:var(--surface-2);
  border:1px solid var(--border);border-radius:var(--radius-sm);
}
input::placeholder,textarea::placeholder{color:var(--muted-2)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--primary)}
select option{background:var(--surface-2);color:var(--text)}

.badge,.cat{background:var(--surface-hover);border:1px solid var(--border);color:var(--text)}
.empty{color:var(--muted)}

/* ---------- skeleton loading ---------- */
@keyframes niuShimmer{0%{background-position:-200% 0}100%{background-position:200% 0}}
.skel{background:linear-gradient(90deg,var(--surface-hover) 25%,var(--border) 37%,var(--surface-hover) 63%);background-size:400% 100%;animation:niuShimmer 1.4s ease infinite;border-radius:8px;display:block}
.skel-card{height:132px;border-radius:var(--radius,16px)}
.skel-row{height:16px;margin:8px 0}
.skel-row.w60{width:60%}
.skel-row.w40{width:40%}
.skel-row.w80{width:80%}

/* ---------- micro-interações ---------- */
.btn,.btn.sec,button{transition:transform .12s ease,box-shadow .12s ease,filter .12s ease,background .15s ease,border-color .15s ease,color .15s ease}
.btn:not(:disabled):hover,.btn.sec:not(:disabled):hover{filter:brightness(1.08)}
.btn:not(:disabled):active,.btn.sec:not(:disabled):active,button:not(:disabled):active{transform:scale(.96)}
.card,.glass,.est-card,.kpi{transition:transform .18s cubic-bezier(.16,1,.3,1),box-shadow .18s ease,border-color .18s ease}
.est-card:hover,.item-card:hover{transform:translateY(-3px);box-shadow:var(--shadow-float)}
.kpi:hover{transform:translateY(-2px)}
input,select,textarea{transition:border-color .15s ease,box-shadow .15s ease}
input:focus,select:focus,textarea:focus{box-shadow:0 0 0 3px color-mix(in srgb, var(--primary) 20%, transparent)}