/**
 * Nawili Premium — Bridge : applique le look premium (gradients, glass, glow,
 * rayons) directement sur le DOM réel NexoPOS (sidebar, cartes, KPI, topbar,
 * boutons), au-delà du simple override de variables.
 *
 * Chargé UNIQUEMENT en mode premium (html.nw-premium).
 * Non-destructif : styles additifs, aucune classe NexoPOS renommée.
 */

/* ── Sidebar : verre + items arrondis ──────────────────────────────────── */
html.nw-premium #dashboard-aside > div {
  background: linear-gradient(180deg, rgba(8,22,49,.92), rgba(5,8,22,.92)) !important;
  border-right: 1px solid rgba(32,231,255,.14);
  backdrop-filter: blur(14px);
}
html.nw-premium ns-menu .ns-menu,
html.nw-premium #dashboard-aside a {
  border-radius: 12px;
  margin: 2px 8px;
  transition: background .15s, box-shadow .15s;
}
html.nw-premium #dashboard-aside a:hover {
  background: rgba(32,231,255,.08) !important;
}
html.nw-premium #dashboard-aside .active,
html.nw-premium ns-menu .active {
  background: linear-gradient(135deg, rgba(32,231,255,.18), rgba(20,118,255,.18)) !important;
  box-shadow: inset 3px 0 0 #20e7ff, 0 0 18px rgba(32,231,255,.18);
}

/* ── Logo wordmark gradient ────────────────────────────────────────────── */
html.nw-premium .logo h1 {
  background: linear-gradient(135deg, #20e7ff, #9d4dff) !important;
  -webkit-background-clip: text !important; background-clip: text !important;
  color: transparent !important;
  letter-spacing: .5px;
}

/* ── Topbar : barre de verre ───────────────────────────────────────────── */
html.nw-premium .ns-topbar,
html.nw-premium header {
  background: linear-gradient(180deg, rgba(8,22,49,.6), rgba(8,22,49,.25)) !important;
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(32,231,255,.12);
}

/* ── Cartes : glass + rayon + halo léger ───────────────────────────────── */
html.nw-premium .ns-box {
  border-radius: 18px !important;
  border: 1px solid rgba(32,231,255,.16) !important;
  background: linear-gradient(180deg, rgba(8,22,49,.72), rgba(7,20,45,.72)) !important;
  box-shadow: 0 16px 44px -22px rgba(0,0,0,.6);
  overflow: hidden;
}

/* ── Cartes KPI dashboard : bandeau gradient haut ──────────────────────── */
html.nw-premium .ns-box.dashboard-card,
html.nw-premium [class*="kpi"] .ns-box,
html.nw-premium .ns-box:has(.las.la-chart-line) {
  position: relative;
}
html.nw-premium .ns-box::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: linear-gradient(90deg, #20e7ff, #9d4dff);
  opacity: .85;
}

/* ── Boutons 3D ────────────────────────────────────────────────────────── */
html.nw-premium .ns-button {
  border-radius: 13px !important;
  font-weight: 700 !important;
  transition: transform .1s, box-shadow .15s !important;
}
html.nw-premium .ns-button:active { transform: translateY(2px); }
html.nw-premium .ns-button.info {
  background: linear-gradient(180deg, #2fe9ff, #1476ff 60%, #1060dc) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 26px -10px rgba(20,118,255,.7) !important;
  color: #04081a !important;
}
html.nw-premium .ns-button.success {
  background: linear-gradient(180deg, #5dffb6, #14a768 60%, #0e8a55) !important;
  box-shadow: 0 1px 0 rgba(255,255,255,.4) inset, 0 12px 26px -10px rgba(54,255,166,.6) !important;
  color: #04081a !important;
}
html.nw-premium .ns-button.error,
html.nw-premium .ns-button.danger {
  background: linear-gradient(180deg, #ff7d90, #ff5d73 60%, #e23f57) !important;
  color: #fff !important;
}

/* ── Tables ────────────────────────────────────────────────────────────── */
html.nw-premium table thead td,
html.nw-premium table thead th {
  background: rgba(32,231,255,.06) !important;
  color: #aebfe0 !important;
  font-weight: 700;
}
html.nw-premium table tbody tr:hover {
  background: rgba(32,231,255,.05) !important;
}

/* ── POS : grille produits & panier ────────────────────────────────────── */
html.nw-premium .pos-products-grid > *,
html.nw-premium [class*="ns-pos-grid"] > * {
  border-radius: 14px !important;
  transition: transform .12s, box-shadow .12s;
}
html.nw-premium .pos-products-grid > *:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 26px -12px rgba(32,231,255,.5);
}

/* ── Scrollbar premium ─────────────────────────────────────────────────── */
html.nw-premium ::-webkit-scrollbar { width: 9px; height: 9px; }
html.nw-premium ::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, #20e7ff66, #9d4dff66);
  border-radius: 20px;
}

/* ── Inputs ────────────────────────────────────────────────────────────── */
html.nw-premium input, html.nw-premium select, html.nw-premium textarea {
  border-radius: 12px !important;
}
html.nw-premium input:focus, html.nw-premium select:focus, html.nw-premium textarea:focus {
  box-shadow: 0 0 0 3px rgba(32,231,255,.12) !important;
}