/*
 * ═══════════════════════════════════════════════════════════════
 *  LUMALUX GESTIONALE - CUSTOM THEME
 *  Basato sul brand Lumalux con focus su usabilità gestionale
 * ═══════════════════════════════════════════════════════════════
 */

:root {
  /* ─────────────────────────────────────────────────────────────
   *  COLORI PRIMARI - ORO / GOLD (dal brand)
   * ───────────────────────────────────────────────────────────── */
  --luma-gold-primary: #C9A227;
  --luma-gold-light: #D4AF37;
  --luma-gold-dark: #A68521;
  --luma-gold-muted: #B8962B;
  --luma-gold-bright: #E8C547;

  /* Versione HSL per manipolazioni */
  --luma-gold-h: 45;
  --luma-gold-s: 70%;
  --luma-gold-l: 47%;

  /* ─────────────────────────────────────────────────────────────
   *  COLORI SECONDARI - TONI SCURI (per contrasto)
   * ───────────────────────────────────────────────────────────── */
  --luma-black-deep: #1A1A1A;
  --luma-black-soft: #2D2D2D;
  --luma-charcoal: #3D3D3D;

  /* ─────────────────────────────────────────────────────────────
   *  SFONDO GESTIONALE (dark theme coerente col brand)
   * ───────────────────────────────────────────────────────────── */
  --luma-bg-body: #232323;
  --luma-bg-card: #2D2D2D;
  --luma-bg-sidebar: #1A1A1A;
  --luma-bg-hover: rgba(201, 162, 39, 0.12);

  /* ─────────────────────────────────────────────────────────────
   *  TESTI (adattati per dark theme)
   * ───────────────────────────────────────────────────────────── */
  --luma-text-primary: #E8E8E8;
  --luma-text-secondary: #AAAAAA;
  --luma-text-muted: #888888;
  --luma-text-on-dark: #F5F5F5;
  --luma-text-on-gold: #1A1A1A;

  /* ─────────────────────────────────────────────────────────────
   *  STATI FUNZIONALI (mantenuti per usabilità)
   * ───────────────────────────────────────────────────────────── */
  --luma-success: #28a745;
  --luma-success-bg: #d4edda;
  --luma-warning: #C9A227;
  --luma-warning-bg: #fff8e1;
  --luma-danger: #dc3545;
  --luma-danger-bg: #f8d7da;
  --luma-info: #6B6B6B;
  --luma-info-bg: #e9ecef;

  /* ─────────────────────────────────────────────────────────────
   *  GRADIENTI
   * ───────────────────────────────────────────────────────────── */
  --luma-gradient-gold: linear-gradient(135deg, #C9A227 0%, #E8C547 50%, #C9A227 100%);
  --luma-gradient-gold-subtle: linear-gradient(135deg, #C9A227 0%, #D4AF37 100%);
  --luma-gradient-sidebar: linear-gradient(180deg, #1A1A1A 0%, #2D2D2D 100%);

  /* ─────────────────────────────────────────────────────────────
   *  OMBRE
   * ───────────────────────────────────────────────────────────── */
  --luma-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
  --luma-shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
  --luma-shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12);
  --luma-shadow-gold: 0 4px 16px rgba(201, 162, 39, 0.25);

  /* ─────────────────────────────────────────────────────────────
   *  BORDI (adattati per dark theme)
   * ───────────────────────────────────────────────────────────── */
  --luma-border-color: #3D3D3D;
  --luma-border-gold: #C9A227;
}

/* ═══════════════════════════════════════════════════════════════
 *  OVERRIDE SNEAT - COLORI PRIMARI
 * ═══════════════════════════════════════════════════════════════ */

/* Primary color override + Sneat paper-bg per dark theme */
:root {
  --bs-primary: var(--luma-gold-primary) !important;
  --bs-primary-rgb: 201, 162, 39 !important;
  --bs-paper-bg: var(--luma-bg-card) !important;

  /* ─── Fix testo leggibile su sfondo scuro ─── */
  --bs-body-color: var(--luma-text-primary) !important;           /* #E8E8E8 */
  --bs-body-color-rgb: 232, 232, 232 !important;
  --bs-heading-color: #F5F5F5 !important;
  --bs-secondary-color: var(--luma-text-secondary) !important;    /* #AAAAAA */
  --bs-secondary-color-rgb: 170, 170, 170 !important;
  --bs-tertiary-color: var(--luma-text-muted) !important;         /* #888888 */
  --bs-tertiary-color-rgb: 136, 136, 136 !important;
  --bs-emphasis-color: #FFFFFF !important;
  --bs-emphasis-color-rgb: 255, 255, 255 !important;
  --bs-light-text-emphasis: var(--luma-text-secondary) !important;
  --bs-dark-text-emphasis: var(--luma-text-secondary) !important;
  --bs-highlight-color: var(--luma-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  LAYOUT GENERALE
 * ═══════════════════════════════════════════════════════════════ */

body {
  background-color: var(--luma-bg-body) !important;
}

.layout-page {
  background-color: var(--luma-bg-body) !important;
}

.content-wrapper {
  background-color: var(--luma-bg-body) !important;
}

/* Override gradienti e sfondi Sneat */
.layout-wrapper,
.layout-container,
.layout-page::before,
.layout-page::after,
.content-wrapper::before,
.content-wrapper::after {
  background: none !important;
  background-color: transparent !important;
}

/* Rimuovi pseudo-elementi con gradienti */
[data-bs-theme] .layout-page::before,
[data-bs-theme] .content-wrapper::before {
  display: none !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  SIDEBAR / MENU LATERALE - TEMA SCURO ELEGANTE
 * ═══════════════════════════════════════════════════════════════ */

.layout-menu,
.menu-vertical {
  --bs-menu-bg: var(--luma-bg-sidebar);       /* #1A1A1A - usato da .menu-inner-shadow */
  --bs-menu-bg-rgb: 26, 26, 26;
  background: var(--luma-gradient-sidebar) !important;
  border-right: 1px solid var(--luma-charcoal) !important;
}

/* Logo area */
.app-brand {
  border-bottom: 1px solid var(--luma-charcoal) !important;
}

.app-brand-link {
  color: var(--luma-text-on-dark) !important;
}

/* Logo lumaca - posizione fissa assoluta */
.app-brand {
  position: relative !important;
}

.app-brand-logo {
  position: absolute !important;
  left: 1rem !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  min-width: 32px !important;
  z-index: 1 !important;
}

.app-brand-logo img {
  display: block !important;
}

/* Testo LUMALUX - margine per non sovrapporsi alla lumaca */
.app-brand-text {
  margin-left: 44px !important;
}

/* Quando sidebar collassata: nascondi testo */
.layout-menu-collapsed .layout-menu:not(:hover) .app-brand-text {
  display: none !important;
}

.layout-menu-collapsed .layout-menu:not(:hover) .app-brand-link {
  justify-content: flex-start !important;
}

/* Menu items */
.menu-inner > .menu-item > .menu-link {
  color: var(--luma-text-on-dark) !important;
  transition: all 0.2s ease;
}

.menu-inner > .menu-item > .menu-link:hover {
  background-color: rgba(201, 162, 39, 0.15) !important;
  color: var(--luma-gold-light) !important;
}

.menu-inner > .menu-item > .menu-link .menu-icon {
  color: var(--luma-gold-muted) !important;
}

/* Menu item attivo */
.menu-inner > .menu-item.active > .menu-link {
  background: var(--luma-gradient-gold-subtle) !important;
  color: var(--luma-text-on-gold) !important;
  box-shadow: var(--luma-shadow-gold);
}

.menu-inner > .menu-item.active > .menu-link .menu-icon {
  color: var(--luma-text-on-gold) !important;
}

/* Submenu */
.menu-sub > .menu-item > .menu-link {
  color: rgba(245, 245, 245, 0.8) !important;
}

.menu-sub > .menu-item > .menu-link:hover {
  color: var(--luma-gold-light) !important;
  background-color: rgba(201, 162, 39, 0.1) !important;
}

.menu-sub > .menu-item.active > .menu-link {
  color: var(--luma-gold-primary) !important;
  background-color: rgba(201, 162, 39, 0.15) !important;
}

/* Menu header/section title */
.menu-header {
  color: var(--luma-gold-muted) !important;
  text-transform: uppercase;
  letter-spacing: 1px;
  font-size: 0.7rem;
}

/* Divider menu - linea separatrice semplice, identica a quella del logo */
.menu-divider {
  height: 0 !important;
  border: none !important;
  border-bottom: 1px solid var(--luma-charcoal) !important;
  background-color: transparent !important;
  margin: 0.75rem 0 !important;
  padding: 0 !important;
  list-style: none !important;
}

/* Transizione fluida per tutti gli elementi del menu quando si chiude/apre */
.layout-menu .menu-item,
.layout-menu .menu-link,
.layout-menu .app-brand,
.layout-menu .app-brand-link,
.layout-menu .app-brand-text,
.layout-menu .menu-divider {
  transition: all 0.3s ease !important;
}

/* Toggle button */
.layout-menu-toggle {
  color: var(--luma-gold-primary) !important;
}

.layout-menu-toggle:hover {
  color: var(--luma-gold-light) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  SIDEBAR MOBILE - Animazione nativa e blocco contenuto
 * ═══════════════════════════════════════════════════════════════ */

/* Transizione fluida apertura/chiusura (stile app nativa) */
@media (max-width: 1199.98px) {
  .layout-menu {
    transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    -webkit-transition: -webkit-transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
  }

  /* Blocca lo scroll/drag del contenuto della sidebar */
  .layout-menu,
  .layout-menu .menu-inner {
    overscroll-behavior: contain !important;
    -webkit-overscroll-behavior: contain !important;
    touch-action: pan-y !important;
    -webkit-touch-callout: none !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Il menu-inner scorre internamente ma non trascina la sidebar */
  .layout-menu .menu-inner {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    height: 100% !important;
  }

  /* Overlay con transizione fade (non snap) */
  .layout-overlay {
    transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    opacity: 0 !important;
    display: block !important;
    pointer-events: none !important;
    background: rgba(0, 0, 0, 0.6) !important;
  }

  .layout-menu-expanded .layout-overlay {
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Impedisci scroll del body quando sidebar è aperta */
  .layout-menu-expanded body {
    overflow: hidden !important;
    touch-action: none !important;
  }

  /* Impedisci pull-to-refresh e rubber-banding sulla sidebar */
  .layout-menu {
    overscroll-behavior: none !important;
    -ms-scroll-chaining: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  NAVBAR SUPERIORE - GLASSMORPHISM
 * ═══════════════════════════════════════════════════════════════ */

.layout-navbar {
  background: rgba(35, 35, 35, 0.75) !important;
  backdrop-filter: blur(3px) saturate(180%) !important;
  -webkit-backdrop-filter: blur(12px) saturate(180%) !important;
  box-shadow: 0 1px 0 0 rgba(201, 162, 39, 0.1) !important;
}

.layout-navbar .navbar-nav-right {
  background-color: transparent !important;
}

.layout-navbar-container,
.layout-navbar .container-xxl,
.layout-navbar .container-fluid {
  background-color: transparent !important;
}

.navbar-nav .nav-link {
  color: var(--luma-text-primary) !important;
}

.navbar-nav .nav-link:hover {
  color: var(--luma-gold-primary) !important;
}

/* Rimuovi qualsiasi gradiente/sfondo dalla navbar */
.layout-page {
  background-color: var(--luma-bg-body) !important;
}

.content-wrapper > *:first-child {
  background-color: transparent !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  CARD
 * ═══════════════════════════════════════════════════════════════ */

.card {
  background-color: var(--luma-bg-card) !important;
  border: 1px solid var(--luma-border-color) !important;
  box-shadow: var(--luma-shadow-sm) !important;
  border-radius: 8px !important;
}

.card:hover {
  box-shadow: var(--luma-shadow-md) !important;
}

.card-header {
  background-color: transparent !important;
  border-bottom: 1px solid var(--luma-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  BOTTONI
 * ═══════════════════════════════════════════════════════════════ */

/* Primary button - Gold */
.btn-primary {
  background: var(--luma-gradient-gold-subtle) !important;
  border-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
  font-weight: 500;
  transition: all 0.2s ease;
}

.btn-primary:hover,
.btn-primary:focus {
  background: var(--luma-gold-light) !important;
  border-color: var(--luma-gold-light) !important;
  color: var(--luma-text-on-gold) !important;
  box-shadow: var(--luma-shadow-gold) !important;
  transform: translateY(-1px);
}

.btn-primary:active {
  background: var(--luma-gold-dark) !important;
  border-color: var(--luma-gold-dark) !important;
  transform: translateY(0);
}

/* Outline primary */
.btn-outline-primary {
  border-color: var(--luma-gold-primary) !important;
  color: var(--luma-gold-primary) !important;
}

.btn-outline-primary:hover {
  background-color: var(--luma-gold-primary) !important;
  border-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

/* Secondary button - Dark */
.btn-secondary {
  background-color: var(--luma-black-soft) !important;
  border-color: var(--luma-black-soft) !important;
  color: var(--luma-text-on-dark) !important;
}

.btn-secondary:hover {
  background-color: var(--luma-black-deep) !important;
  border-color: var(--luma-black-deep) !important;
}

/* Label buttons (soft variants) */
.btn-label-primary,
.bg-label-primary {
  background-color: rgba(201, 162, 39, 0.25) !important;
  color: var(--luma-gold-bright) !important;
}

.btn-label-primary:hover {
  background-color: rgba(201, 162, 39, 0.35) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  BADGE
 * ═══════════════════════════════════════════════════════════════ */

.badge.bg-primary,
.badge.bg-label-primary {
  background-color: rgba(201, 162, 39, 0.25) !important;
  color: var(--luma-gold-bright) !important;
}

.badge.bg-secondary,
.badge.bg-label-secondary {
  background-color: rgba(45, 45, 45, 0.16) !important;
  color: var(--luma-black-soft) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  FORM CONTROLS
 * ═══════════════════════════════════════════════════════════════ */

.form-control,
.form-select {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.form-control::placeholder {
  color: var(--luma-text-muted) !important;
}

.form-control:focus,
.form-select:focus {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-gold-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25) !important;
  color: var(--luma-text-primary) !important;
}

.form-check-input {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
}

.form-check-input:checked {
  background-color: var(--luma-gold-primary) !important;
  border-color: var(--luma-gold-primary) !important;
}

.form-switch .form-check-input:checked {
  background-color: var(--luma-gold-primary) !important;
}

.form-label {
  color: var(--luma-text-primary) !important;
}

.form-check-label {
  color: var(--luma-text-primary) !important;
}

.input-group-text {
  background-color: var(--luma-charcoal) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-secondary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  TABELLE
 * ═══════════════════════════════════════════════════════════════ */

.table {
  --bs-table-bg: var(--luma-bg-card);
  --bs-table-color: var(--luma-text-primary);
  --bs-table-border-color: var(--luma-border-color);
  --bs-table-striped-bg: var(--luma-bg-card);
  --bs-table-striped-color: var(--luma-text-primary);
  color: var(--luma-text-primary) !important;
}

.table thead th {
  background-color: var(--luma-black-soft) !important;
  border-bottom: 2px solid var(--luma-gold-primary) !important;
  color: var(--luma-text-primary) !important;
  font-weight: 600;
}

.table tbody tr {
  border-color: var(--luma-border-color) !important;
  background-color: var(--luma-bg-card) !important;
}

/* Rimuovi zebra striping */
.table-striped > tbody > tr:nth-of-type(odd) > *,
.table-striped > tbody > tr:nth-of-type(even) > * {
  --bs-table-bg-type: var(--luma-bg-card) !important;
  background-color: var(--luma-bg-card) !important;
}

.table tbody tr:hover {
  background-color: var(--luma-bg-hover) !important;
}

.table tbody tr:hover > * {
  --bs-table-bg-type: var(--luma-bg-hover) !important;
  background-color: var(--luma-bg-hover) !important;
}

.table td, .table th {
  border-color: var(--luma-border-color) !important;
}

/* DataTables */
.dataTables_wrapper .dataTables_paginate .paginate_button.current {
  background: var(--luma-gradient-gold-subtle) !important;
  border-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--luma-bg-hover) !important;
  border-color: var(--luma-gold-primary) !important;
  color: var(--luma-gold-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  PAGINATION
 * ═══════════════════════════════════════════════════════════════ */

.page-item.active .page-link {
  background-color: var(--luma-gold-primary) !important;
  border-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.page-link {
  color: var(--luma-gold-primary) !important;
}

.page-link:hover {
  background-color: var(--luma-bg-hover) !important;
  color: var(--luma-gold-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  MODAL
 * ═══════════════════════════════════════════════════════════════ */

.modal-content {
  background-color: var(--luma-bg-card) !important;
  border: 1px solid var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.modal-header {
  border-bottom: 1px solid var(--luma-border-color) !important;
}

.modal-header .modal-title {
  color: var(--luma-text-primary) !important;
}

.modal-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

.modal-footer {
  border-top: 1px solid var(--luma-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  DROPDOWN
 * ═══════════════════════════════════════════════════════════════ */

.dropdown-menu {
  background-color: var(--luma-bg-card) !important;
  border: 1px solid var(--luma-border-color) !important;
}

.dropdown-item {
  color: var(--luma-text-primary) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--luma-bg-hover) !important;
  color: var(--luma-gold-light) !important;
}

.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.dropdown-divider {
  border-color: var(--luma-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  ALERT
 * ═══════════════════════════════════════════════════════════════ */

.alert-primary {
  background-color: rgba(201, 162, 39, 0.12) !important;
  border-color: rgba(201, 162, 39, 0.3) !important;
  color: var(--luma-gold-dark) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  PROGRESS BAR
 * ═══════════════════════════════════════════════════════════════ */

.progress-bar {
  background-color: var(--luma-gold-primary) !important;
}

.progress-bar.bg-primary {
  background: var(--luma-gradient-gold-subtle) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  LINK
 * ═══════════════════════════════════════════════════════════════ */

a {
  color: var(--luma-gold-primary);
}

a:hover {
  color: var(--luma-gold-dark);
}

/* ═══════════════════════════════════════════════════════════════
 *  SCROLLBAR CUSTOM (per browser webkit)
 * ═══════════════════════════════════════════════════════════════ */

::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  background: var(--luma-bg-body);
}

::-webkit-scrollbar-thumb {
  background: var(--luma-gold-muted);
  border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--luma-gold-primary);
}

/* ═══════════════════════════════════════════════════════════════
 *  UTILITIES LUMALUX
 * ═══════════════════════════════════════════════════════════════ */

.text-gold {
  color: var(--luma-gold-primary) !important;
}

.bg-gold {
  background-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.bg-gold-subtle {
  background-color: rgba(201, 162, 39, 0.12) !important;
}

.border-gold {
  border-color: var(--luma-gold-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  SPINNER / LOADING
 * ═══════════════════════════════════════════════════════════════ */

.spinner-border.text-primary {
  color: var(--luma-gold-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  NAV TABS / PILLS
 * ═══════════════════════════════════════════════════════════════ */

.nav-pills .nav-link.active {
  background-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.nav-tabs .nav-link.active {
  border-color: var(--luma-border-color) var(--luma-border-color) var(--luma-bg-card) !important;
  color: var(--luma-gold-primary) !important;
}

.nav-tabs .nav-link,
.nav-pills .nav-link {
  color: var(--luma-text-primary) !important;
}

.nav-tabs .nav-link:hover {
  border-color: var(--luma-border-color) !important;
  color: var(--luma-gold-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  ACCORDION
 * ═══════════════════════════════════════════════════════════════ */

.accordion-button:not(.collapsed) {
  background-color: var(--luma-bg-hover) !important;
  color: var(--luma-gold-dark) !important;
}

.accordion-button:focus {
  border-color: var(--luma-gold-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  TOAST
 * ═══════════════════════════════════════════════════════════════ */

.toast {
  border: 1px solid var(--luma-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  SELECTION HIGHLIGHT
 * ═══════════════════════════════════════════════════════════════ */

::selection {
  background-color: var(--luma-gold-primary);
  color: var(--luma-text-on-gold);
}

::-moz-selection {
  background-color: var(--luma-gold-primary);
  color: var(--luma-text-on-gold);
}

/* ═══════════════════════════════════════════════════════════════
 *  TESTI GENERALI - DARK THEME
 * ═══════════════════════════════════════════════════════════════ */

body {
  color: var(--luma-text-primary) !important;
}

h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--luma-text-primary) !important;
}

p, span, div {
  color: inherit;
}

.text-body {
  color: var(--luma-text-primary) !important;
}

.text-muted {
  color: var(--luma-text-muted) !important;
}

.text-dark {
  color: var(--luma-text-primary) !important;
}

.text-heading {
  color: var(--luma-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  BADGE COLORI - DARK THEME
 * ═══════════════════════════════════════════════════════════════ */

.bg-label-success {
  background-color: rgba(40, 167, 69, 0.2) !important;
  color: #5dd879 !important;
}

.bg-label-danger {
  background-color: rgba(220, 53, 69, 0.2) !important;
  color: #e8747f !important;
}

.bg-label-warning {
  background-color: rgba(201, 162, 39, 0.2) !important;
  color: var(--luma-gold-light) !important;
}

.bg-label-info {
  background-color: rgba(3, 195, 236, 0.2) !important;
  color: #03c3ec !important;
}

.bg-label-secondary {
  background-color: rgba(108, 117, 125, 0.25) !important;
  color: #b8bfc6 !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  PAGINATION - DARK THEME
 * ═══════════════════════════════════════════════════════════════ */

.page-link {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  PAGINATION - MOBILE RESPONSIVE
 * ═══════════════════════════════════════════════════════════════ */

@media (max-width: 576px) {
  /* Container paginazione: stack verticale su mobile */
  .d-flex:has(> nav .pagination),
  .d-flex:has(> .d-flex .pagination) {
    flex-direction: column !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }

  /* Paginazione: wrap e centrata su mobile */
  .pagination {
    flex-wrap: wrap;
    justify-content: center;
    gap: 2px;
  }

  .pagination .page-link {
    padding: 0.3rem 0.55rem;
    font-size: 0.8rem;
    min-width: 32px;
    text-align: center;
  }

  /* Nasconde input "vai a pagina" su schermi piccoli */
  .pagination .pagination-goto-wrapper {
    display: none !important;
  }

  /* Prima colonna tabella sticky su mobile */
  .table-responsive table thead th:first-child,
  .table-responsive table tbody td:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    background-color: var(--luma-bg-card, #2D2D2D);
  }

  .table-responsive table thead th:first-child {
    z-index: 3;
  }

  /* Ombra per indicare che c'è contenuto a destra */
  .table-responsive table thead th:first-child::after,
  .table-responsive table tbody td:first-child::after {
    content: '';
    position: absolute;
    top: 0;
    right: -6px;
    bottom: 0;
    width: 6px;
    background: linear-gradient(to right, rgba(0,0,0,0.15), transparent);
    pointer-events: none;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  TOOLTIP / POPOVER
 * ═══════════════════════════════════════════════════════════════ */

.tooltip-inner {
  background-color: var(--luma-black-deep) !important;
  color: var(--luma-text-on-dark) !important;
}

.popover {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
}

.popover-body {
  color: var(--luma-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  LIST GROUP
 * ═══════════════════════════════════════════════════════════════ */

.list-group-item {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.list-group-item:hover {
  background-color: var(--luma-bg-hover) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  BREADCRUMB
 * ═══════════════════════════════════════════════════════════════ */

.breadcrumb-item a {
  color: var(--luma-gold-primary) !important;
}

.breadcrumb-item.active {
  color: var(--luma-text-muted) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  AVATAR INIZIALI
 * ═══════════════════════════════════════════════════════════════ */

.avatar-initial {
  background-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  HR / DIVIDER
 * ═══════════════════════════════════════════════════════════════ */

hr {
  border-color: var(--luma-border-color) !important;
  opacity: 1;
}

/* ═══════════════════════════════════════════════════════════════
 *  TIMELINE / STORICO ORDINE
 * ═══════════════════════════════════════════════════════════════ */

.timeline,
.timeline-item,
.timeline-event {
  background-color: transparent !important;
}

.timeline-item .timeline-event {
  background-color: var(--luma-bg-card) !important;
  border: 1px solid var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.timeline-point {
  background-color: var(--luma-gold-primary) !important;
  border-color: var(--luma-gold-primary) !important;
}

.timeline-indicator {
  background-color: var(--luma-gold-primary) !important;
}

.timeline::before,
.timeline-item::before {
  background-color: var(--luma-border-color) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  ACCORDION - DARK THEME
 * ═══════════════════════════════════════════════════════════════ */

.accordion {
  --bs-accordion-bg: var(--luma-bg-card);
  --bs-accordion-border-color: var(--luma-border-color);
  --bs-accordion-color: var(--luma-text-primary);
}

.accordion-item {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.accordion-button {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

.accordion-button:not(.collapsed) {
  background-color: var(--luma-bg-hover) !important;
  color: var(--luma-gold-primary) !important;
}

.accordion-button::after {
  filter: invert(1) brightness(2);
}

.accordion-body {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  PRODOTTI / ITEM CARDS
 * ═══════════════════════════════════════════════════════════════ */

.product-item,
.order-item,
.item-card,
[class*="product-"],
[class*="order-line"] {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  CATCH-ALL: SFONDI BIANCHI RESIDUI
 * ═══════════════════════════════════════════════════════════════ */

/* Override generico per elementi con sfondo bianco inline o ereditato */
.card .card-body,
.card .card-header,
.card .card-footer {
  background-color: transparent !important;
  color: var(--luma-text-primary) !important;
}

/* Elementi interni alle card */
.card .border,
.card [class*="border-"] {
  border-color: var(--luma-border-color) !important;
}

/* Box e contenitori generici */
.box,
.panel,
.well,
.container-fluid > div,
.row > div > div {
  background-color: inherit;
}

/* Elementi con bg-white o bg-light */
.bg-white,
.bg-light {
  background-color: var(--luma-bg-card) !important;
}

/* Elementi con sfondo inline bianco */
[style*="background-color: white"],
[style*="background-color: #fff"],
[style*="background-color: #ffffff"],
[style*="background: white"],
[style*="background: #fff"],
[style*="background: #ffffff"] {
  background-color: var(--luma-bg-card) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  COLLAPSE / EXPANDABLE CONTENT
 * ═══════════════════════════════════════════════════════════════ */

.collapse,
.collapsing {
  background-color: transparent !important;
}

.collapse.show,
.collapse .card,
.collapse .card-body {
  background-color: var(--luma-bg-card) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  OFFCANVAS
 * ═══════════════════════════════════════════════════════════════ */

.offcanvas {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.offcanvas-header {
  border-bottom: 1px solid var(--luma-border-color) !important;
}

.offcanvas-header .btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
}

/* ═══════════════════════════════════════════════════════════════
 *  SELECT / DROPDOWN OPTIONS - DARK THEME
 * ═══════════════════════════════════════════════════════════════ */

/* Select nativo - opzioni dropdown */
select.form-select option,
select.form-control option,
select option {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

select.form-select option:checked,
select.form-control option:checked,
select option:checked {
  background-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

select.form-select option:hover,
select.form-control option:hover,
select option:hover {
  background-color: var(--luma-bg-hover) !important;
}

/* Bootstrap Select / Select2 */
.select2-container--default .select2-selection--single,
.select2-container--default .select2-selection--multiple {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.select2-container--default .select2-results__option {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

.select2-container--default .select2-results__option--highlighted[aria-selected],
.select2-container--default .select2-results__option:hover {
  background-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.select2-container--default .select2-results__option[aria-selected=true] {
  background-color: var(--luma-bg-hover) !important;
  color: var(--luma-gold-primary) !important;
}

.select2-dropdown {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
}

.select2-search--dropdown .select2-search__field {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__rendered {
  color: var(--luma-text-primary) !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice {
  background-color: rgba(105, 108, 255, 0.2) !important;
  border-color: rgba(105, 108, 255, 0.4) !important;
  color: #696cff !important;
}

.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
  color: #696cff !important;
}

.select2-container--default .select2-selection__placeholder {
  color: var(--luma-text-muted) !important;
}

.select2-results__message {
  color: var(--luma-text-muted) !important;
  background-color: var(--luma-bg-card) !important;
}

.select2-container--default .select2-selection--multiple .select2-search__field {
  color: var(--luma-text-primary) !important;
}

.select2-container--default.select2-container--focus .select2-selection--multiple {
  border-color: var(--luma-gold-primary) !important;
  box-shadow: 0 0 0 0.2rem rgba(201, 162, 39, 0.25) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  FLATPICKR / DATE PICKER - DARK THEME
 * ═══════════════════════════════════════════════════════════════ */

.flatpickr-calendar {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4) !important;
}

.flatpickr-calendar::before,
.flatpickr-calendar::after {
  border-bottom-color: var(--luma-bg-card) !important;
}

.flatpickr-months {
  background-color: var(--luma-bg-card) !important;
}

.flatpickr-months .flatpickr-month {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

.flatpickr-current-month .flatpickr-monthDropdown-months option {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

.flatpickr-current-month input.cur-year {
  color: var(--luma-text-primary) !important;
}

.flatpickr-months .flatpickr-prev-month,
.flatpickr-months .flatpickr-next-month {
  color: var(--luma-text-primary) !important;
  fill: var(--luma-text-primary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover,
.flatpickr-months .flatpickr-next-month:hover {
  color: var(--luma-gold-primary) !important;
}

.flatpickr-months .flatpickr-prev-month svg,
.flatpickr-months .flatpickr-next-month svg {
  fill: var(--luma-text-primary) !important;
}

.flatpickr-months .flatpickr-prev-month:hover svg,
.flatpickr-months .flatpickr-next-month:hover svg {
  fill: var(--luma-gold-primary) !important;
}

.flatpickr-weekdays {
  background-color: var(--luma-bg-card) !important;
}

.flatpickr-weekday {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-secondary) !important;
}

.flatpickr-days {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
}

.flatpickr-day {
  color: var(--luma-text-primary) !important;
  border-color: transparent !important;
}

.flatpickr-day:hover {
  background-color: var(--luma-bg-hover) !important;
  border-color: var(--luma-gold-primary) !important;
}

.flatpickr-day.today {
  border-color: var(--luma-gold-primary) !important;
}

.flatpickr-day.selected,
.flatpickr-day.startRange,
.flatpickr-day.endRange,
.flatpickr-day.selected.inRange,
.flatpickr-day.startRange.inRange,
.flatpickr-day.endRange.inRange,
.flatpickr-day.selected:focus,
.flatpickr-day.startRange:focus,
.flatpickr-day.endRange:focus,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange:hover,
.flatpickr-day.endRange:hover,
.flatpickr-day.selected.prevMonthDay,
.flatpickr-day.startRange.prevMonthDay,
.flatpickr-day.endRange.prevMonthDay,
.flatpickr-day.selected.nextMonthDay,
.flatpickr-day.startRange.nextMonthDay,
.flatpickr-day.endRange.nextMonthDay {
  background-color: var(--luma-gold-primary) !important;
  border-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.flatpickr-day.inRange {
  background-color: rgba(201, 162, 39, 0.2) !important;
  border-color: rgba(201, 162, 39, 0.2) !important;
  color: var(--luma-text-primary) !important;
}

.flatpickr-day.prevMonthDay,
.flatpickr-day.nextMonthDay {
  color: var(--luma-text-muted) !important;
}

.flatpickr-day.flatpickr-disabled,
.flatpickr-day.flatpickr-disabled:hover {
  color: var(--luma-text-muted) !important;
  opacity: 0.5;
}

.flatpickr-time {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
}

.flatpickr-time input {
  background-color: var(--luma-bg-card) !important;
  color: var(--luma-text-primary) !important;
}

.flatpickr-time input:hover,
.flatpickr-time input:focus {
  background-color: var(--luma-bg-hover) !important;
}

.flatpickr-time .flatpickr-time-separator,
.flatpickr-time .flatpickr-am-pm {
  color: var(--luma-text-primary) !important;
}

.flatpickr-time .flatpickr-am-pm:hover {
  background-color: var(--luma-bg-hover) !important;
}

/* Arrows in time picker */
.flatpickr-time .numInputWrapper span.arrowUp:after {
  border-bottom-color: var(--luma-text-primary) !important;
}

.flatpickr-time .numInputWrapper span.arrowDown:after {
  border-top-color: var(--luma-text-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  BOOTSTRAP DATEPICKER - DARK THEME (alternativa)
 * ═══════════════════════════════════════════════════════════════ */

.datepicker {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
}

.datepicker table tr td,
.datepicker table tr th {
  color: var(--luma-text-primary) !important;
}

.datepicker table tr td.active,
.datepicker table tr td.active:hover,
.datepicker table tr td.active.highlighted {
  background-color: var(--luma-gold-primary) !important;
  color: var(--luma-text-on-gold) !important;
}

.datepicker table tr td.today {
  background-color: rgba(201, 162, 39, 0.2) !important;
  color: var(--luma-gold-primary) !important;
}

.datepicker table tr td:hover,
.datepicker table tr th:hover {
  background-color: var(--luma-bg-hover) !important;
}

.datepicker table tr td.disabled,
.datepicker table tr td.disabled:hover {
  color: var(--luma-text-muted) !important;
  opacity: 0.5;
}

.datepicker .datepicker-switch,
.datepicker .prev,
.datepicker .next,
.datepicker tfoot tr th {
  color: var(--luma-text-primary) !important;
}

.datepicker .datepicker-switch:hover,
.datepicker .prev:hover,
.datepicker .next:hover,
.datepicker tfoot tr th:hover {
  background-color: var(--luma-bg-hover) !important;
  color: var(--luma-gold-primary) !important;
}

/* ═══════════════════════════════════════════════════════════════
 *  INPUT TYPE DATE/TIME NATIVI - DARK THEME
 * ═══════════════════════════════════════════════════════════════ */

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="month"],
input[type="week"] {
  background-color: var(--luma-bg-card) !important;
  border-color: var(--luma-border-color) !important;
  color: var(--luma-text-primary) !important;
  color-scheme: dark;
}

input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator,
input[type="week"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
}

/* ═══════════════════════════════════════════════════════════════
 *  RICERCA GLOBALE - NAVBAR SEARCH
 * ═══════════════════════════════════════════════════════════════ */

.global-search-container {
  position: relative;
}

.global-search-container .input-group {
  background-color: #363636 !important;
  border: 1px solid #4D4D4D !important;
  border-radius: 8px;
  overflow: hidden;
  transition: all 0.2s ease;
}

.global-search-container .input-group:focus-within {
  border-color: #C9A227 !important;
  box-shadow: 0 0 0 3px rgba(201, 162, 39, 0.2);
}

.global-search-container .input-group-text {
  background-color: transparent !important;
  border: none !important;
  padding: 0.5rem 0.75rem;
}

.global-search-container .input-group-text i {
  color: #888888;
  font-size: 1.1rem;
}

.global-search-container .form-control {
  background-color: transparent !important;
  border: none !important;
  font-size: 0.875rem;
  color: #E8E8E8 !important;
  padding: 0.5rem 0;
}

.global-search-container .form-control:focus {
  box-shadow: none !important;
}

.global-search-container .form-control::placeholder {
  color: #888888;
  font-size: 0.8125rem;
}

/* Clear button */
.global-search-container #globalSearchClear {
  cursor: pointer;
  padding: 0.5rem;
}

.global-search-container #globalSearchClear:hover i {
  color: var(--luma-gold-primary);
}

/* Dropdown risultati */
.global-search-results {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  width: 420px;
  max-height: 500px;
  overflow-y: auto;
  background-color: #2D2D2D !important;
  border: 1px solid #4D4D4D !important;
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
  z-index: 9999 !important;
  display: none;
  opacity: 1 !important;
}

.global-search-results.show {
  display: block !important;
  animation: searchDropdownIn 0.15s ease-out;
}

@keyframes searchDropdownIn {
  from {
    opacity: 0;
    transform: translateX(-50%) translateY(-8px);
  }
  to {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
}

/* Sezioni risultati */
.search-section {
  padding: 0;
  background-color: #2D2D2D !important;
}

.search-section + .search-section {
  border-top: 1px solid #4D4D4D;
}

.search-section-header {
  padding: 0.75rem 1rem 0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #C9A227;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  position: sticky;
  top: 0;
  background-color: #252525 !important;
  z-index: 1;
  border-bottom: 1px solid #3D3D3D;
}

.search-section-header i {
  font-size: 1rem;
  opacity: 0.9;
}

.search-section-header .badge {
  font-size: 0.625rem;
  padding: 0.2rem 0.5rem;
  margin-left: auto;
  background-color: rgba(201, 162, 39, 0.25) !important;
  color: #C9A227 !important;
}

/* Items risultati */
.search-result-item {
  display: flex;
  align-items: center;
  padding: 0.75rem 1rem;
  text-decoration: none !important;
  color: #E8E8E8 !important;
  transition: all 0.15s ease;
  cursor: pointer;
  gap: 0.875rem;
  border-left: 3px solid transparent;
  background-color: #2D2D2D !important;
}

.search-result-item:hover,
.search-result-item.selected {
  background-color: #3A3A3A !important;
  color: #E8E8E8 !important;
  border-left-color: #C9A227;
}

/* Icone per tipo risultato */
.search-result-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 1.25rem;
}

/* Ordini - Viola */
.search-result-icon.bg-label-primary {
  background: rgba(105, 108, 255, 0.16) !important;
  color: #696cff !important;
}

/* Clienti - Ciano */
.search-result-icon.bg-label-info {
  background: rgba(3, 195, 236, 0.16) !important;
  color: #03c3ec !important;
}

/* Prodotti - Verde */
.search-result-icon.bg-label-success {
  background: rgba(113, 221, 55, 0.16) !important;
  color: #71dd37 !important;
}

.search-result-content {
  flex: 1;
  min-width: 0;
}

.search-result-title {
  font-size: 0.875rem;
  font-weight: 600;
  color: #E8E8E8 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-bottom: 0.125rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.search-result-title .badge {
  font-size: 0.625rem;
  font-weight: 500;
  padding: 0.2rem 0.5rem;
}

.search-result-subtitle {
  font-size: 0.75rem;
  color: #888888 !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Freccia navigazione */
.search-result-item > i.bx-chevron-right {
  color: #888888;
  opacity: 0;
  transition: opacity 0.15s ease;
  font-size: 1.25rem;
}

.search-result-item:hover > i.bx-chevron-right,
.search-result-item.selected > i.bx-chevron-right {
  opacity: 1;
  color: #C9A227;
}

/* Highlight match - Usato per ricerca globale e ricerche nelle pagine */
.search-highlight {
  background-color: rgba(201, 162, 39, 0.35) !important;
  color: #E8C547 !important;
  border-radius: 3px;
  padding: 0 3px;
  font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════
 *  PRODUCT THUMBNAILS - Stili comuni per miniature prodotti
 * ═══════════════════════════════════════════════════════════════ */

.product-thumbnail {
  width: 50px;
  height: 50px;
  object-fit: cover;
  border-radius: 6px;
  background-color: var(--luma-charcoal);
  border: 1px solid var(--luma-border-color);
}

.product-thumbnail-lg {
  width: 60px;
  height: 60px;
}

.product-thumbnail-sm {
  width: 40px;
  height: 40px;
}

.product-thumbnail-placeholder {
  width: 50px;
  height: 50px;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--luma-charcoal);
  border-radius: 6px;
  color: var(--luma-text-muted);
  font-size: 1.25rem;
}

.product-thumbnail-placeholder-lg {
  width: 60px;
  height: 60px;
}

.product-thumbnail-placeholder-sm {
  width: 40px;
  height: 40px;
}

/* ═══════════════════════════════════════════════════════════════
 *  STOCK STATUS BADGES - Indicatori stock
 * ═══════════════════════════════════════════════════════════════ */

.stock-badge {
  font-weight: 600;
  min-width: 40px;
  text-align: center;
}

.stock-ok {
  background-color: rgba(40, 167, 69, 0.2) !important;
  color: #5dd879 !important;
}

.stock-low {
  background-color: rgba(201, 162, 39, 0.2) !important;
  color: var(--luma-gold-light) !important;
}

.stock-critical {
  background-color: rgba(220, 53, 69, 0.2) !important;
  color: #e8747f !important;
}

/* Empty/no results state */
.search-no-results {
  padding: 2.5rem 1.5rem;
  text-align: center;
  color: #888888;
  background-color: #2D2D2D !important;
}

.search-no-results i {
  display: block;
  font-size: 3rem;
  margin-bottom: 0.75rem;
  opacity: 0.4;
  color: #888888;
}

.search-no-results strong {
  color: #E8E8E8;
}

/* Footer risultati */
.search-footer {
  padding: 0.625rem 1rem;
  text-align: center;
  background-color: #252525 !important;
  border-top: 1px solid #3D3D3D;
}

.search-footer small {
  font-size: 0.6875rem;
  color: #888888;
}

.search-footer kbd {
  background-color: #3D3D3D !important;
  border: 1px solid #4D4D4D;
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
  font-size: 0.625rem;
  font-family: inherit;
  color: #AAAAAA;
  margin: 0 0.1rem;
}

/* ═══════════════════════════════════════════════════════════════
 *  MOBILE BOTTOM NAV - Navigazione sezioni/tab su mobile
 * ═══════════════════════════════════════════════════════════════ */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: #1A1A1A;
  border-top: 1px solid rgba(255,255,255,0.12);
  display: flex;
  justify-content: stretch;
  align-items: stretch;
  padding: 0;
  padding-bottom: env(safe-area-inset-bottom, 0px);
  z-index: 1080;
  box-sizing: border-box;
}
.mobile-bottom-nav .bottom-nav-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 8px 4px 6px;
  cursor: pointer;
  transition: color 0.2s ease;
  color: rgba(255,255,255,0.45);
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
  position: relative;
  border: none;
  background: none;
  min-width: 0;
}
.mobile-bottom-nav .bottom-nav-item.active {
  color: #C9A227;
}
.mobile-bottom-nav .bottom-nav-item .nav-icon {
  font-size: 1.35rem;
  line-height: 1;
  flex-shrink: 0;
}
.mobile-bottom-nav .bottom-nav-item .nav-label {
  font-size: 0.65rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
  line-height: 1.2;
}
.mobile-bottom-nav .bottom-nav-item .nav-badge {
  position: absolute;
  top: 2px;
  right: 50%;
  margin-right: -18px;
  font-size: 0.55rem;
  padding: 1px 4px;
  border-radius: 10px;
  line-height: 1.2;
  min-width: 16px;
  text-align: center;
}
/* Padding contenuto per non essere coperto dalla bottom nav */
@media (max-width: 767.98px) {
  .has-bottom-nav .content-wrapper {
    padding-bottom: 72px !important;
  }
}

/* Navbar: previeni overflow avatar e titolo su schermi piccoli */
@media (max-width: 575.98px) {
  #layout-navbar {
    overflow: hidden;
  }
  #layout-navbar .navbar-nav-right {
    min-width: 0;
  }
  #layout-navbar .navbar-nav-right > .navbar-nav:first-child {
    min-width: 0;
    overflow: hidden;
  }
  #layout-navbar .navbar-nav-right > .navbar-nav:first-child h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  MOBILE RESPONSIVE UTILITIES (< 576px)
 * ═══════════════════════════════════════════════════════════════ */
@media (max-width: 575.98px) {
  /* Nascondi colonne/elementi secondari su mobile */
  .d-mobile-none { display: none !important; }

  /* Tabelle compatte */
  .table-mobile-compact { font-size: 0.78rem; }
  .table-mobile-compact th,
  .table-mobile-compact td { padding: 0.35rem 0.4rem; white-space: nowrap; }
  .table-mobile-compact code { font-size: 0.7rem; }

  /* Card body padding ridotto */
  .card-body-mobile-compact { padding: 0.75rem !important; }

  /* Card header: titolo e bottoni su righe separate */
  .card-header.d-flex,
  .card-header .d-flex {
    flex-wrap: wrap;
    gap: 0.5rem;
  }
}

/* ═══════════════════════════════════════════════════════════════
 *  SCHERMI MOLTO PICCOLI (< 320px)
 *  Menu sidebar: bottone chiudi sempre visibile e accessibile.
 *  Sneat posiziona il toggle a inset-inline-start: 15.2rem (~243px)
 *  che puo uscire dallo schermo su viewport stretti. Lo spostiamo
 *  all'interno della sidebar e nascondiamo il testo brand per
 *  recuperare spazio.
 * ═══════════════════════════════════════════════════════════════ */
/* Su mobile (< 1200px) il toggle e' posizionato a inset-inline-start: 15.2rem
   (~243px) con bordo 7px, che lo fa debordare dalla sidebar di 260px.
   Lo riposizioniamo all'interno su tutti gli schermi mobile. */
@media (max-width: 1199.98px) {
  .layout-menu-expanded .menu .app-brand .layout-menu-toggle {
    inset-inline-start: auto !important;
    inset-inline-end: -0.5rem !important;
  }
}