/* =============================================================================
   StockMaster Pro — WOW UI V3 (Glass Light-first, zero regression)
   - Light theme DEFAULT (cookie-controlled)
   - Pure overrides: does not rely on new HTML structure
   - Homogenise: cards, tables, buttons, forms, spacing, hover, transitions
   ============================================================================= */

:root{
  --wow-radius: 16px;
  --wow-radius-sm: 12px;
  --wow-border: rgba(17, 42, 66, .12);
  --wow-glass: rgba(255,255,255,.70);
  --wow-glass-2: rgba(255,255,255,.55);
  --wow-shadow: 0 18px 50px rgba(2, 19, 33, .08);
  --wow-shadow-soft: 0 10px 30px rgba(2, 19, 33, .06);
  --wow-glow: 0 0 0 1px rgba(0, 208, 255, .18), 0 12px 40px rgba(0, 208, 255, .10);
  --wow-accent: #00c8ff;
  --wow-accent-2: #00ffa6;
  --wow-text: #0b2236;
  --wow-muted: rgba(11,34,54,.62);
}

/* Background – subtle cyan/teal gradient + noise */
body{
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(0,200,255,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(0,255,166,.14), transparent 55%),
    radial-gradient(1100px 700px at 55% 80%, rgba(0,140,255,.10), transparent 60%),
    linear-gradient(180deg, #f6fbff 0%, #f2fbf9 40%, #f6f9ff 100%) !important;
  color: var(--wow-text);
}
body:before{
  content:"";
  position:fixed; inset:0;
  pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='280' height='280'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.75' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='280' height='280' filter='url(%23n)' opacity='.18'/%3E%3C/svg%3E");
  opacity:.22;
  mix-blend-mode:soft-light;
}

/* Glass surface helper (works with existing .card/.panel/.page-sect etc.) */
.card, .panel, .page-sect, .box, .kpi-card, .mv-card, .scanner-card, .report-card, .table-wrap, .filters, .toolbar, .sect-toolbar, .pg, .pg * .card{
  border-radius: var(--wow-radius);
}
.card, .panel, .page-sect, .kpi-card, .mv-card, .scanner-card, .report-card, .table-wrap, .filters, .sect-toolbar, .mv-header, .report-header{
  background: var(--wow-glass);
  border: 1px solid var(--wow-border);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  box-shadow: var(--wow-shadow-soft);
}

/* Header / nav: glass + blur (without restructuring HTML) */
.header, header, .topbar, .nav, .nav-wrap, .app-header{
  background: rgba(255,255,255,.65) !important;
  border-bottom: 1px solid rgba(0,0,0,.06);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
}
.nav a, .nav-link, .menu a{
  border-radius: 999px;
  transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease;
}
.nav a:hover, .nav-link:hover, .menu a:hover{
  transform: translateY(-1px);
  box-shadow: 0 10px 24px rgba(0,200,255,.10);
  background: rgba(0,200,255,.08);
}

/* Buttons – gradient + glow + lift */
button, .btn, .btn-primary, .btn-success, .btn-danger, .btn-secondary, .btn-outline, a.btn{
  border-radius: 14px;
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
}
.btn-primary, .btn-success, .btn-main{
  background: linear-gradient(135deg, var(--wow-accent) 0%, #2b8cff 45%, var(--wow-accent-2) 130%) !important;
  border: 0 !important;
  box-shadow: 0 12px 28px rgba(0,200,255,.18);
}
.btn-primary:hover, .btn-success:hover, .btn-main:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(0,200,255,.22), 0 0 0 1px rgba(0,200,255,.25);
}
.btn-danger{
  box-shadow: 0 12px 28px rgba(255,0,64,.14);
}
.btn-danger:hover{
  transform: translateY(-2px);
  box-shadow: 0 18px 45px rgba(255,0,64,.18);
}

/* KPI cards – top gradient bar + value gradient text */
.kpi-card, .kpi{
  position:relative;
  overflow:hidden;
}
.kpi-card:before, .kpi:before{
  content:"";
  position:absolute; left:0; right:0; top:0; height:4px;
  background: linear-gradient(90deg, var(--wow-accent), var(--wow-accent-2));
  opacity:.95;
}
.kpi-card .value, .kpi .value, .kpi-number{
  background: linear-gradient(90deg, #0b2236, #0077ff, #00c8ff);
  -webkit-background-clip:text;
  background-clip:text;
  color: transparent !important;
  font-weight: 800;
}

/* Tables – glass headers + hover rows */
table{
  border-collapse: separate;
  border-spacing: 0;
}
thead th{
  background: rgba(255,255,255,.60) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid rgba(0,0,0,.08) !important;
}
tbody tr{
  transition: background .2s ease, transform .2s ease;
}
tbody tr:hover{
  background: rgba(0,200,255,.06) !important;
}

/* Inputs */
input, select, textarea, .inp{
  border-radius: 14px !important;
  border: 1px solid rgba(0,0,0,.10) !important;
  background: rgba(255,255,255,.80) !important;
  transition: box-shadow .2s ease, border-color .2s ease;
}
input:focus, select:focus, textarea:focus, .inp:focus{
  border-color: rgba(0,200,255,.55) !important;
  box-shadow: 0 0 0 4px rgba(0,200,255,.18) !important;
  outline: none !important;
}

/* View switch (generic) */
.view-switch{
  display:flex; gap:8px; align-items:center;
  background: rgba(255,255,255,.55);
  border:1px solid rgba(0,0,0,.08);
  border-radius: 999px;
  padding:6px;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.view-switch .vs-btn{
  border:0;
  padding:8px 12px;
  border-radius: 999px;
  background: transparent;
  color: var(--wow-muted);
  cursor:pointer;
}
.view-switch .vs-btn.active{
  background: rgba(0,200,255,.16);
  color: #06304f;
  box-shadow: 0 10px 24px rgba(0,200,255,.14);
}

/* Dark theme: keep existing dark, just soften */
html[data-theme="dark"] body{
  background:
    radial-gradient(1200px 700px at 15% 15%, rgba(0,200,255,.18), transparent 55%),
    radial-gradient(900px 600px at 85% 20%, rgba(0,255,166,.12), transparent 55%),
    radial-gradient(1100px 700px at 55% 80%, rgba(0,140,255,.10), transparent 60%),
    linear-gradient(180deg, #07101a 0%, #071722 60%, #07101a 100%) !important;
  color: rgba(255,255,255,.90);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .page-sect,
html[data-theme="dark"] .table-wrap{
  background: rgba(10, 18, 28, .62);
  border: 1px solid rgba(255,255,255,.08);
  box-shadow: 0 18px 55px rgba(0,0,0,.35);
}

/* Products view modes (non-breaking):
   - grid: default existing cards grid
   - list: forces cards into full-width list
   - compact: reduces padding and hides secondary chips where possible
*/
body[data-products-view="list"] .products-grid,
body[data-products-view="list"] .prod-grid{
  display:block !important;
}
body[data-products-view="list"] .product-card,
body[data-products-view="list"] .prod-card{
  display:flex !important;
  align-items:center;
  gap:14px;
}
body[data-products-view="compact"] .product-card,
body[data-products-view="compact"] .prod-card{
  padding:12px !important;
}
body[data-products-view="compact"] .product-card .chips,
body[data-products-view="compact"] .prod-card .chips{
  display:none !important;
}

/* Movements compact: reduce padding + hide less important cols if table-based */
body[data-movements-view="compact"] table td,
body[data-movements-view="compact"] table th{
  padding-top:10px !important;
  padding-bottom:10px !important;
}
body[data-movements-view="compact"] .col-note,
body[data-movements-view="compact"] .col-operator{
  display:none !important;
}
