@charset "UTF-8";
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;600;700;800&display=swap');
/* --------------------------------------------------------------------------
   1. VARIABILI GLOBALI (Design Tokens)
   -------------------------------------------------------------------------- */
:root {
  /* Palette Principale */
  --color-bg-base:        #111827;   /* Sfondo body principale */
  --color-bg-surface:     #1F2937;   /* Card, sidebar, modali */
  --color-bg-elevated:    #374151;   /* Hover, input, elementi sovrapposti */
  --color-bg-header:      #1F2937;   /* Header navbar */

  /* Accenti */
  --color-primary:        #10B981;   /* Verde smeraldo - bottoni, link, accenti */
  --color-primary-hover:  #059669;   /* Verde smeraldo scuro - hover */
  --color-primary-muted:  rgba(16, 185, 129, 0.15); /* Sfondo badge/highlight */
  --color-primary-rgb:    16, 185, 129;

  /* Testo */
  --color-text-primary:   #F9FAFB;   /* Testo principale */
  --color-text-secondary: #9CA3AF;   /* Testo secondario, placeholder */
  --color-text-muted:     #6B7280;   /* Testo disabilitato, hint */
  --color-text-inverse:   #111827;   /* Testo su sfondo chiaro */

  /* Bordi */
  --color-border:         #374151;   /* Bordo standard */
  --color-border-subtle:  #2D3748;   /* Bordo leggero */

  /* Stato */
  --color-success:        #10B981;
  --color-success-bg:     rgba(16, 185, 129, 0.12);
  --color-warning:        #F59E0B;
  --color-warning-bg:     rgba(245, 158, 11, 0.12);
  --color-danger:         #EF4444;
  --color-danger-bg:      rgba(239, 68, 68, 0.12);
  --color-info:           #3B82F6;
  --color-info-bg:        rgba(59, 130, 246, 0.12);
  --piterp-refresh-color: rgba(var(--color-primary-rgb), 0.3);

  /* Sidebar */
  --sidebar-width:        260px;
  --sidebar-collapsed-width: 4.6rem;
  --sidebar-bg:           #1F2937;
  --sidebar-header-bg:    #111827;
  --sidebar-text:         #D1D5DB;
  --sidebar-text-muted:   #6B7280;
  --sidebar-icon:         #9CA3AF;
  --sidebar-hover-bg:     rgba(16, 185, 129, 0.1);
  --sidebar-hover-text:   #F9FAFB;
  --sidebar-active-bg:    rgba(16, 185, 129, 0.18);
  --sidebar-active-text:  #10B981;
  --sidebar-active-border: #10B981;
  --sidebar-parent-bg:    rgba(16, 185, 129, 0.08);

  /* Header */
  --header-height:        3.75rem;
  --header-bg:            #1F2937;
  --header-border:        #374151;
  --header-text:          #D1D5DB;

  /* Layout */
  --border-radius-sm:     0.375rem;
  --border-radius:        0.625rem;
  --border-radius-lg:     0.875rem;
  --border-radius-xl:     1.25rem;
  --shadow-sm:            0 1px 3px rgba(0,0,0,0.4), 0 1px 2px rgba(0,0,0,0.3);
  --shadow:               0 4px 6px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3);
  --shadow-lg:            0 10px 25px rgba(0,0,0,0.5), 0 4px 10px rgba(0,0,0,0.3);
  --transition-fast:      0.15s ease-in-out;
  --transition:           0.25s ease-in-out;

  /* Font */
  --font-family-base:     'Inter', 'Nunito', system-ui, -apple-system, sans-serif;
  --font-size-xs:         0.75rem;
  --font-size-sm:         0.8125rem;
  --font-size-base:       0.9rem;
  --font-size-md:         0.9375rem;

  /* Bootstrap overrides (dark) */
  --bs-body-bg:           var(--color-bg-base);
  --bs-body-color:        var(--color-text-primary);
  --bs-border-color:      var(--color-border);
  --bs-primary:           var(--color-primary);
  --bs-primary-rgb:       var(--color-primary-rgb);
  --bs-secondary-bg:      var(--color-bg-elevated);
  --bs-tertiary-bg:       var(--color-bg-surface);
  --bs-link-color:        var(--color-primary);
  --bs-link-hover-color:  var(--color-primary-hover);
  --bs-border-radius:     var(--border-radius);
  --bs-border-radius-sm:  var(--border-radius-sm);
  --bs-border-radius-lg:  var(--border-radius-lg);
  --bs-form-invalid-border-color: var(--color-danger);
  --bs-form-invalid-color: var(--color-danger);
  --bs-form-valid-border-color: var(--color-success);
  --bs-form-valid-color:  var(--color-success);

  /* AdminLTE */
  --lte-sidebar-width:    var(--sidebar-width);
}

/* --------------------------------------------------------------------------
   2. RESET E BASE
   -------------------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

@media (prefers-reduced-motion: no-preference) {
  :root { scroll-behavior: smooth; }
}

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  height: 100%;
  overflow: hidden;
}

body {
  margin: 0;
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.6;
  color: var(--color-text-primary);
  background-color: var(--color-bg-base);
  -webkit-tap-highlight-color: transparent;
  color-scheme: dark;
  height: 100%;
  overflow: hidden;
}

/* Import Google Font Inter */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

/* --------------------------------------------------------------------------
   3. TIPOGRAFIA
   -------------------------------------------------------------------------- */
h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 {
  margin-top: 0;
  margin-bottom: 0.5rem;
  font-weight: 600;
  line-height: 1.3;
  color: var(--color-text-primary);
  letter-spacing: -0.01em;
}

h1, .h1 { font-size: 1.875rem; }
h2, .h2 { font-size: 1.5rem; }
h3, .h3 { font-size: 1.25rem; }
h4, .h4 { font-size: 1.125rem; }
h5, .h5 { font-size: 1rem; }
h6, .h6 { font-size: 0.875rem; }

p { margin-top: 0; margin-bottom: 1rem; }

a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}
a:hover { color: var(--color-primary-hover); text-decoration: none; }
a:not([href]):not([class]) { color: inherit; text-decoration: none; }

small, .small { font-size: var(--font-size-sm); }

hr {
  margin: 1.25rem 0;
  color: var(--color-border);
  border: 0;
  border-top: 1px solid var(--color-border);
  opacity: 1;
}

/* --------------------------------------------------------------------------
   4. LAYOUT PRINCIPALE (AdminLTE Grid)
   -------------------------------------------------------------------------- */
.app-wrapper {
  position: relative;
  display: grid;
  grid-template-areas:
    "lte-app-sidebar lte-app-header"
    "lte-app-sidebar lte-app-main"
    "lte-app-sidebar lte-app-footer";
  grid-template-rows: min-content 1fr min-content;
  grid-template-columns: auto 1fr;
  grid-gap: 0;
  align-content: stretch;
  align-items: stretch;
  max-width: 100vw;
  width: 100vw;
  height: 100vh;        /* altezza fissa alla viewport: il footer non scende mai */
  overflow: hidden;     /* nessuna scrollbar sulla finestra principale */
  background-color: var(--color-bg-base);
}
.app-wrapper > * { min-width: 0; }

/* --------------------------------------------------------------------------
   5. HEADER / NAVBAR
   -------------------------------------------------------------------------- */
.app-header {
  z-index: 1034;
  grid-area: lte-app-header;
  max-width: 100vw;
  height: var(--header-height);
  background-color: var(--header-bg) !important;
  border-bottom: 1px solid var(--header-border);
  transition: var(--transition);
  box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.app-header .navbar {
  background-color: var(--header-bg) !important;
  padding: 0 1rem;
  height: var(--header-height);
}

.app-header .nav-link {
  position: relative;
  height: 2.5rem;
  color: var(--header-text) !important;
  padding: 0.375rem 0.625rem;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
}
.app-header .nav-link:hover {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary) !important;
}

.app-header .nav-link i,
.app-header .nav-link .bi {
  font-size: 1.25rem;
  color: var(--color-text-secondary);
  transition: color var(--transition-fast);
}
.app-header .nav-link:hover i,
.app-header .nav-link:hover .bi {
  color: var(--color-primary);
}

.navbar-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  padding: 2px 5px;
  font-size: 0.6rem;
  font-weight: 600;
  border-radius: 50rem;
  background-color: var(--color-danger);
  color: #fff;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   6. SIDEBAR
   -------------------------------------------------------------------------- */
.app-sidebar {
  --lte-sidebar-hover-bg:           var(--sidebar-hover-bg);
  --lte-sidebar-color:              var(--sidebar-text);
  --lte-sidebar-hover-color:        var(--sidebar-hover-text);
  --lte-sidebar-active-color:       var(--sidebar-active-text);
  --lte-sidebar-menu-active-bg:     var(--sidebar-active-bg);
  --lte-sidebar-menu-active-color:  var(--sidebar-active-text);
  --lte-sidebar-submenu-bg:         transparent;
  --lte-sidebar-submenu-color:      var(--sidebar-text-muted);
  --lte-sidebar-submenu-hover-color: var(--sidebar-hover-text);
  --lte-sidebar-submenu-hover-bg:   var(--sidebar-hover-bg);
  --lte-sidebar-submenu-active-color: var(--sidebar-active-text);
  --lte-sidebar-submenu-active-bg:  var(--sidebar-active-bg);
  --lte-sidebar-header-color:       var(--sidebar-text-muted);

  z-index: 1038;
  display: flex;
  flex-direction: column;
  height: 100vh;
  grid-area: lte-app-sidebar;
  min-width: var(--lte-sidebar-width);
  max-width: var(--lte-sidebar-width);
  background-color: var(--sidebar-bg) !important;
  border-right: 1px solid var(--color-border-subtle);
  transition: min-width var(--transition), max-width var(--transition),
              margin-left var(--transition), margin-right var(--transition);
  box-shadow: 2px 0 8px rgba(0,0,0,0.3);
}

/* Brand / Logo */
.sidebar-brand {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: var(--header-height);
  padding: 0 1.125rem;
  overflow: hidden;
  font-size: 1.125rem;
  white-space: nowrap;
  background-color: var(--sidebar-header-bg);
  border-bottom: 1px solid var(--color-border-subtle);
  transition: width var(--transition);
  flex-shrink: 0;
}

.sidebar-brand .brand-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  gap: 0.625rem;
}

.sidebar-brand .brand-link .brand-image {
  width: auto;
  max-height: 32px;
  border-radius: var(--border-radius-sm);
}

.sidebar-brand .brand-text {
  font-size: 1rem;
  font-weight: 700;
  color: var(--color-text-primary);
  letter-spacing: 0.01em;
  transition: opacity var(--transition), width var(--transition);
  white-space: nowrap;
  overflow: hidden;
}

/* Sidebar Wrapper (scrollable area) */
.sidebar-wrapper {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0.75rem 0.5rem;
  scrollbar-color: var(--color-bg-elevated) transparent;
  scrollbar-width: thin;
}
.sidebar-wrapper::-webkit-scrollbar { width: 4px; }
.sidebar-wrapper::-webkit-scrollbar-track { background: transparent; }
.sidebar-wrapper::-webkit-scrollbar-thumb {
  background-color: var(--color-bg-elevated);
  border-radius: 4px;
}

/* Sidebar Footer (Logout) */
.sidebar-footer {
  flex: 0 0 auto;
  position: sticky;
  bottom: 0;
  background: var(--sidebar-bg);
  border-top: 1px solid var(--color-border-subtle);
  padding: 0.625rem 0.75rem;
}

.app-sidebar .sidebar-footer .nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  color: var(--sidebar-text) !important;
  padding: 0.5rem 0.75rem;
  border-radius: var(--border-radius);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  transform: none;
  justify-content: flex-start;
  width: 100%;
}
.app-sidebar .sidebar-footer .nav-link:hover {
  background-color: var(--color-danger-bg);
  color: var(--color-danger) !important;
}
.app-sidebar .sidebar-footer .nav-link i,
.app-sidebar .sidebar-footer .nav-link span {
  color: inherit;
}

/* --------------------------------------------------------------------------
   7. MENU SIDEBAR - VOCI DI NAVIGAZIONE
   -------------------------------------------------------------------------- */
.sidebar-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.sidebar-wrapper .nav-item {
  max-width: 100%;
  margin-bottom: 0.125rem;
}

/* Link foglia (voce senza figli) */
.sidebar-wrapper .nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--border-radius);
  color: var(--sidebar-text);
  font-size: var(--font-size-sm);
  font-weight: 500;
  white-space: nowrap;
  transition: background-color var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  position: relative;
}

.sidebar-wrapper .nav-link:hover,
.sidebar-wrapper .sidebar-menu > .nav-item:hover > .nav-link,
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link:focus,
nav .nav-item.deeper.parent .nav-item:hover > .nav-link {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
}

/* Voce attiva */
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active:not(:hover),
.mod-menu__sub .nav-item .nav-link.active:not(:hover),
.nav-item:has(a.active) .m-0 {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}
.sidebar-wrapper .sidebar-menu > .nav-item > .nav-link.active:not(:hover)::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  background-color: var(--sidebar-active-border);
  border-radius: 0 3px 3px 0;
}

/* Icone sidebar */
.sidebar-wrapper .nav-icon,
.nav_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  max-width: 1.375rem;
  font-size: 1.125rem;
  color: var(--sidebar-icon);
  transition: color var(--transition-fast);
  flex-shrink: 0;
}
.sidebar-wrapper .nav-link:hover .nav-icon,
.sidebar-wrapper .nav-link.active .nav-icon {
  color: var(--color-primary);
}

/* Testo voce menu */
.sidebar-wrapper .nav-link p,
.sidebar-wrapper .nav-link span.ps-5 {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  padding-left: 0 !important;
  margin: 0;
  flex: 1;
}

/* Header di sezione (separatori) */
.sidebar-wrapper .nav-header {
  padding: 1rem 0.75rem 0.375rem;
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--sidebar-text-muted);
  background-color: inherit;
}

/* Link sidebar */
.sidebar-wrapper a {
  color: var(--sidebar-text);
}

/* --------------------------------------------------------------------------
   8. MENU SIDEBAR - VOCI PADRE (con sottomenu collassabile)
   -------------------------------------------------------------------------- */
li.nav-item.deeper.parent {
  padding-left: 0 !important;
  background: transparent;
}

li.nav-item.deeper.parent > .nav-link,
li.nav-item.deeper.parent > span.nav-link {
  background-color: transparent;
  color: var(--sidebar-text);
}

li.nav-item.deeper.parent > .nav-link:hover,
li.nav-item.deeper.parent > span.nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
}

/* Span collassabile padre */
.sidebar-wrapper .sidebar-menu > .nav-item > span.nav-link.collapsed,
.sidebar-wrapper .sidebar-menu > .nav-item > span.nav-link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.5625rem 0.75rem;
  border-radius: var(--border-radius);
  cursor: pointer;
  user-select: none;
}

.nav_parent_link {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  flex: 1;
  min-width: 0;
}

.nav_parent_link .nav_icon {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  max-width: 1.375rem;
  font-size: 1.125rem;
  color: var(--sidebar-icon);
  flex-shrink: 0;
  margin-right: 0 !important;
}

.nav_parent_link .nav_name {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--sidebar-text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
}

li.nav-item.deeper.parent > .nav-link .nav_parent_link > span.nav_name {
  color: var(--sidebar-text);
}
li.nav-item.deeper.parent > .nav-link .nav_parent_link > i.nav_icon {
  margin-right: 0 !important;
  color: var(--sidebar-icon);
}

/* Freccia collasso */
.link-arrow {
  display: flex;
  align-items: center;
  color: var(--sidebar-text-muted);
  transition: transform var(--transition-fast);
  flex-shrink: 0;
}
.link-arrow .icon { width: 1rem; height: 1rem; }

[aria-expanded="true"] .link-arrow {
  transform: rotate(90deg);
}

/* Sottomenu collassabile */
.multi-level {
  margin-left: 0 !important;
  padding-left: 0.5rem;
  border-left: 1px solid var(--color-border);
  margin-top: 0.125rem;
  margin-bottom: 0.125rem;
}

.multi-level .nav-item {
  background: transparent !important;
}

.multi-level .nav-item > .nav-link {
  padding: 0.4375rem 0.75rem 0.4375rem 1rem;
  font-size: var(--font-size-xs);
  color: var(--sidebar-text-muted);
  border-radius: var(--border-radius-sm);
}
.multi-level .nav-item > .nav-link:hover {
  background-color: var(--sidebar-hover-bg);
  color: var(--sidebar-hover-text);
}
.multi-level .nav-item > .nav-link.active {
  background-color: var(--sidebar-active-bg);
  color: var(--sidebar-active-text);
  font-weight: 600;
}

.multi-level .mod-menu__sub {
  list-style: none;
  padding: 0;
  margin: 0;
}

li.nav-item.deeper.parent > .multi-level .mod-menu__sub .nav-item {
  background: transparent !important;
}
li.nav-item.deeper.parent > .multi-level .mod-menu__sub .nav-item > .nav-link > span {
  margin-top: 0 !important;
}
li.nav-item.deeper.parent > .multi-level .mod-menu__sub .nav-item > .nav-link > i {
  margin-right: 0 !important;
}

/* Sidebar mini collapse */
.sidebar-mini.sidebar-collapse .app-sidebar {
  min-width: var(--sidebar-collapsed-width);
  max-width: var(--sidebar-collapsed-width);
}
.sidebar-mini.sidebar-collapse .sidebar-menu .nav-header { display: none; }
.sidebar-mini.sidebar-collapse .sidebar-menu .nav-link {
  width: 3.25rem;
  justify-content: center;
  padding: 0.625rem;
}
.sidebar-mini.sidebar-collapse .sidebar-menu .nav-link p,
.sidebar-mini.sidebar-collapse .brand-text,
.sidebar-mini.sidebar-collapse .logo-xl,
.sidebar-mini.sidebar-collapse .nav-arrow {
  visibility: hidden;
  width: 0;
  overflow: hidden;
  animation-name: fadeOut;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
.sidebar-mini.sidebar-collapse .sidebar-menu .nav-badge,
.sidebar-mini.sidebar-collapse .sidebar-menu .nav-arrow { display: none; }
.sidebar-mini.sidebar-collapse .brand-text {
  display: inline-block;
  max-width: 0;
  overflow: hidden;
}
.sidebar-mini.sidebar-collapse .logo-xs {
  display: inline-block;
  visibility: visible;
  animation-name: fadeIn;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
.sidebar-mini.sidebar-collapse .sidebar-footer .nav-link {
  justify-content: center;
  padding: 0.5rem;
}
.sidebar-mini.sidebar-collapse .sidebar-footer .brand-text { display: none; }
.sidebar-mini.sidebar-collapse .sidebar-footer .nav-icon {
  display: inline-block;
  margin-left: 0;
}

/* Sidebar collapse hover expand */
.sidebar-mini.sidebar-collapse .app-sidebar:hover {
  min-width: var(--lte-sidebar-width);
  max-width: var(--lte-sidebar-width);
}
.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-menu .nav-header {
  display: inline-block;
}
.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-menu .nav-link {
  width: auto;
  justify-content: flex-start;
  padding: 0.5625rem 0.75rem;
}
.sidebar-mini.sidebar-collapse .app-sidebar:hover .sidebar-menu .nav-link p,
.sidebar-mini.sidebar-collapse .app-sidebar:hover .brand-text,
.sidebar-mini.sidebar-collapse .app-sidebar:hover .logo-xl {
  width: auto;
  visibility: visible;
  animation-name: fadeIn;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}
.sidebar-mini.sidebar-collapse .app-sidebar:hover .brand-text {
  display: inline;
  max-width: inherit;
  margin-left: 0.5rem;
}
.sidebar-mini.sidebar-collapse .app-sidebar:hover .nav-badge,
.sidebar-mini.sidebar-collapse .app-sidebar:hover .nav-arrow {
  display: inline-block;
  visibility: visible;
  animation-name: fadeIn;
  animation-duration: 0.2s;
  animation-fill-mode: both;
  animation-delay: 0.2s;
}
.sidebar-mini.sidebar-collapse .app-sidebar:hover .logo-xs {
  visibility: hidden;
  animation-name: fadeOut;
  animation-duration: 0.2s;
  animation-fill-mode: both;
}

/* --------------------------------------------------------------------------
   9. CONTENUTO PRINCIPALE
   -------------------------------------------------------------------------- */
.app-main {
  grid-area: lte-app-main;
  display: flex;
  flex-direction: column;
  min-height: 0;        /* fondamentale per far funzionare flex in un contesto grid */
  overflow: hidden;     /* il main non cresce oltre la cella della griglia */
  background-color: var(--color-bg-base);
}

/* Content Header (titolo pagina + breadcrumb) */
.app-content-header {
  padding: 1rem 1.25rem 0.75rem;
  background-color: var(--color-bg-surface);
  border-bottom: 1px solid var(--color-border);
}

.app-content-header h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}

/* Breadcrumb */
.breadcrumb {
  background-color: transparent;
  padding: 0;
  margin: 0;
  justify-content: flex-end;
}
.breadcrumb-item { font-size: var(--font-size-sm); }
.breadcrumb-item a { color: var(--color-primary); }
.breadcrumb-item.active { color: var(--color-text-secondary); }
.breadcrumb-item + .breadcrumb-item::before {
  color: var(--color-text-muted);
}

/* App Content Area */
.app-content {
  padding: 1.25rem;
  flex: 1 1 auto;
  min-height: 0;        /* permette al flex-child di restringersi sotto il suo contenuto */
  overflow-y: auto;     /* scrollbar interna al contenuto, non sulla finestra */
  overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   10. FOOTER
   -------------------------------------------------------------------------- */
.app-footer {
  grid-area: lte-app-footer;
  padding: 0.75rem 1.25rem;
  background-color: var(--color-bg-surface);
  border-top: 1px solid var(--color-border);
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
}
.app-footer strong { color: var(--color-text-secondary); font-weight: 500; }

/* Overlay sidebar mobile */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.6);
  z-index: 1037;
  backdrop-filter: blur(2px);
}

/* --------------------------------------------------------------------------
   11. CARD
   -------------------------------------------------------------------------- */
.card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--transition);
  overflow: hidden;
}
.card:hover { box-shadow: var(--shadow); }

.card-header {
  background-color: transparent;
  border-bottom: 1px solid var(--color-border);
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.card-header .card-title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
}
.card-header .card-tools { margin-left: auto; }

.card-body { padding: 1.25rem; }
.card-footer {
  background-color: transparent;
  border-top: 1px solid var(--color-border);
  padding: 0.875rem 1.25rem;
}

/* Card colori stato */
.card.border-success { border-color: var(--color-success) !important; }
.card.border-warning { border-color: var(--color-warning) !important; }
.card.border-danger  { border-color: var(--color-danger) !important; }
.card.border-info    { border-color: var(--color-info) !important; }

/* --------------------------------------------------------------------------
   12. BOTTONI
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
  padding: 0.4375rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  line-height: 1.5;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast),
              box-shadow var(--transition-fast), color var(--transition-fast),
              transform var(--transition-fast);
  text-decoration: none;
  white-space: nowrap;
  vertical-align: middle;
  user-select: none;
}
.btn:active { transform: translateY(1px); }
.btn:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

.btn-sm {
  padding: 0.3125rem 0.75rem;
  font-size: var(--font-size-xs);
  border-radius: var(--border-radius-sm);
}
.btn-lg {
  padding: 0.625rem 1.375rem;
  font-size: 1rem;
  border-radius: var(--border-radius-lg);
}

/* Primary */
.btn-primary {
  --bs-btn-color: #fff;
  --bs-btn-bg: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary-hover);
  --bs-btn-hover-border-color: var(--color-primary-hover);
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-disabled-bg: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
  box-shadow: 0 1px 3px rgba(16, 185, 129, 0.3);
}
.btn-primary:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
  color: #fff;
  box-shadow: 0 4px 12px rgba(16, 185, 129, 0.4);
}

/* Outline Primary */
.btn-outline-primary {
  --bs-btn-color: var(--color-primary);
  --bs-btn-border-color: var(--color-primary);
  --bs-btn-hover-bg: var(--color-primary);
  --bs-btn-hover-border-color: var(--color-primary);
  --bs-btn-hover-color: #fff;
  --bs-btn-active-bg: var(--color-primary-hover);
  --bs-btn-active-border-color: var(--color-primary-hover);
  --bs-btn-disabled-color: var(--color-primary);
  --bs-btn-disabled-border-color: var(--color-primary);
  color: var(--color-primary);
  border-color: var(--color-primary);
  background-color: transparent;
}
.btn-outline-primary:hover {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

/* Secondary */
.btn-secondary {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.btn-secondary:hover {
  background-color: #4B5563;
  border-color: #4B5563;
  color: var(--color-text-primary);
}

/* Danger */
.btn-danger {
  background-color: var(--color-danger);
  border-color: var(--color-danger);
  color: #fff;
}
.btn-danger:hover {
  background-color: #DC2626;
  border-color: #DC2626;
  color: #fff;
}
.btn-outline-danger {
  color: var(--color-danger);
  border-color: var(--color-danger);
  background-color: transparent;
}
.btn-outline-danger:hover {
  background-color: var(--color-danger);
  color: #fff;
}

/* Warning */
.btn-warning {
  background-color: var(--color-warning);
  border-color: var(--color-warning);
  color: var(--color-text-inverse);
}
.btn-warning:hover {
  background-color: #D97706;
  border-color: #D97706;
  color: var(--color-text-inverse);
}

/* Info */
.btn-info {
  background-color: var(--color-info);
  border-color: var(--color-info);
  color: #fff;
}
.btn-info:hover {
  background-color: #2563EB;
  border-color: #2563EB;
  color: #fff;
}

/* Light / Dark */
.btn-light {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}
.btn-dark {
  background-color: var(--color-bg-base);
  border-color: var(--color-border);
  color: var(--color-text-primary);
}

/* --------------------------------------------------------------------------
   13. FORM CONTROLS
   -------------------------------------------------------------------------- */
.form-control,
.form-select {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  padding: 0.4375rem 0.875rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
  line-height: 1.5;
}
.form-control::placeholder { color: var(--color-text-muted); }
.form-control:focus,
.form-select:focus {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  color: var(--color-text-primary);
  outline: none;
}
.form-control:disabled,
.form-select:disabled {
  background-color: var(--color-bg-surface);
  color: var(--color-text-muted);
  opacity: 0.7;
  cursor: not-allowed;
}

.form-control-sm { padding: 0.3125rem 0.625rem; font-size: var(--font-size-xs); }
.form-control-lg { padding: 0.625rem 1rem; font-size: 1rem; }

.form-label {
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-text-secondary);
  margin-bottom: 0.375rem;
  display: block;
}

.form-text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* Checkbox e Radio */
.form-check-input {
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border);
  width: 1rem;
  height: 1rem;
}
.form-check-input:checked {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}
.form-check-input:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  border-color: var(--color-primary);
}
.form-check-label {
  font-size: var(--font-size-sm);
  color: var(--color-text-secondary);
}

/* Input group */
.input-group-text {
  background-color: var(--color-bg-surface);
  border-color: var(--color-border);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

/* Validation */
.form-control.is-valid, .form-select.is-valid {
  border-color: var(--color-success);
}
.form-control.is-valid:focus, .form-select.is-valid:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
}
.form-control.is-invalid, .form-select.is-invalid {
  border-color: var(--color-danger);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus {
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2);
}
.valid-feedback { color: var(--color-success); font-size: var(--font-size-xs); }
.invalid-feedback { color: var(--color-danger); font-size: var(--font-size-xs); }

/* --------------------------------------------------------------------------
   14. TABELLE (DataTables)
   -------------------------------------------------------------------------- */
.table {
  --bs-table-bg: transparent;
  --bs-table-border-color: var(--color-border);
  --bs-table-striped-bg: rgba(255,255,255,0.025);
  --bs-table-hover-bg: rgba(16, 185, 129, 0.06);
  --bs-table-color: var(--color-text-primary);
  width: 100%;
  margin-bottom: 0;
  color: var(--color-text-primary);
  border-collapse: collapse;
  font-size: var(--font-size-sm);
}

.table > thead > tr > th {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-secondary);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
  border-top: none;
  white-space: nowrap;
}

.table > tbody > tr > td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border-subtle);
  vertical-align: middle;
  color: var(--color-text-primary);
  line-height: 1.5;
}

.table > tbody > tr:last-child > td { border-bottom: none; }

.table > tbody > tr:hover > td {
  background-color: var(--bs-table-hover-bg);
}

.table-striped > tbody > tr:nth-of-type(odd) > td {
  background-color: var(--bs-table-striped-bg);
}

.table-bordered { border: 1px solid var(--color-border); }
.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > td {
  border: 1px solid var(--color-border);
}

/* DataTables specifico */
.dataTables_wrapper {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
}

.dataTables_wrapper .dataTables_length label,
.dataTables_wrapper .dataTables_filter label,
.dataTables_wrapper .dataTables_info,
.dataTables_wrapper .dataTables_paginate {
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  color: var(--color-text-primary);
  padding: 0.25rem 0.5rem;
  font-size: var(--font-size-sm);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2);
  outline: none;
}

.dataTables_wrapper .dataTables_paginate .paginate_button {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-text-secondary) !important;
  padding: 0.25rem 0.625rem !important;
  margin: 0 2px;
  font-size: var(--font-size-xs);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  cursor: pointer;
}
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background-color: var(--color-primary-muted) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  opacity: 0.4;
  cursor: not-allowed;
}

table.dataTable thead .sorting::after,
table.dataTable thead .sorting_asc::after,
table.dataTable thead .sorting_desc::after {
  opacity: 0.6;
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   15. BADGE E PILLS
   -------------------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.625em;
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  border-radius: 50rem;
  white-space: nowrap;
  letter-spacing: 0.02em;
}

.bg-primary   { background-color: var(--color-primary) !important; color: #fff; }
.bg-success   { background-color: var(--color-success) !important; color: #fff; }
.bg-warning   { background-color: var(--color-warning) !important; color: var(--color-text-inverse); }
.bg-danger    { background-color: var(--color-danger) !important; color: #fff; }
.bg-info      { background-color: var(--color-info) !important; color: #fff; }
.bg-secondary { background-color: var(--color-bg-elevated) !important; color: var(--color-text-secondary); }
.bg-dark      { background-color: var(--color-bg-base) !important; color: var(--color-text-primary); }
.bg-light     { background-color: var(--color-bg-elevated) !important; color: var(--color-text-primary); }

.text-primary   { color: var(--color-primary) !important; }
.text-success   { color: var(--color-success) !important; }
.text-warning   { color: var(--color-warning) !important; }
.text-danger    { color: var(--color-danger) !important; }
.text-info      { color: var(--color-info) !important; }
.text-muted     { color: var(--color-text-muted) !important; }
.text-secondary { color: var(--color-text-secondary) !important; }

/* --------------------------------------------------------------------------
   16. ALERT / MESSAGGI
   -------------------------------------------------------------------------- */
.alert {
  padding: 0.875rem 1.125rem;
  border-radius: var(--border-radius);
  border: 1px solid transparent;
  font-size: var(--font-size-sm);
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
}
.alert-success {
  background-color: var(--color-success-bg);
  border-color: rgba(16, 185, 129, 0.3);
  color: #6EE7B7;
}
.alert-warning {
  background-color: var(--color-warning-bg);
  border-color: rgba(245, 158, 11, 0.3);
  color: #FCD34D;
}
.alert-danger {
  background-color: var(--color-danger-bg);
  border-color: rgba(239, 68, 68, 0.3);
  color: #FCA5A5;
}
.alert-info {
  background-color: var(--color-info-bg);
  border-color: rgba(59, 130, 246, 0.3);
  color: #93C5FD;
}
.alert-dismissible .btn-close {
  filter: invert(1);
  opacity: 0.6;
}
.alert-dismissible .btn-close:hover { opacity: 1; }

/* Joomla system messages */
#message-container {
  position: sticky;
  top: 0;
  z-index: 1033;
}
.system-message-container { padding: 0.5rem 1.25rem; }

/* --------------------------------------------------------------------------
   17. MODALI
   -------------------------------------------------------------------------- */
.modal-content {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl);
  box-shadow: var(--shadow-lg);
  color: var(--color-text-primary);
}
.modal-header {
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  border-radius: var(--border-radius-xl) var(--border-radius-xl) 0 0;
  padding: 1rem 1.25rem;
}
.modal-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--color-text-primary);
}
.modal-body { padding: 1.25rem; }
.modal-footer {
  border-top: 1px solid var(--color-border);
  padding: 0.875rem 1.25rem;
  gap: 0.5rem;
}
.btn-close {
  filter: invert(1);
  opacity: 0.6;
  transition: opacity var(--transition-fast);
}
.btn-close:hover { opacity: 1; }
.modal-backdrop { background-color: rgba(0, 0, 0, 0.7); }

/* --------------------------------------------------------------------------
   18. TABS (Bootstrap Nav Tabs/Pills)
   -------------------------------------------------------------------------- */
.nav-tabs {
  border-bottom: 1px solid var(--color-border);
  gap: 0.25rem;
}
.nav-tabs .nav-item .nav-link {
  color: var(--color-text-secondary);
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: var(--border-radius) var(--border-radius) 0 0;
  padding: 0.5625rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.nav-tabs .nav-item .nav-link:hover {
  color: var(--color-text-primary);
  background-color: var(--color-bg-elevated);
  border-color: var(--color-border) var(--color-border) transparent;
}
.nav-tabs .nav-item .nav-link.active {
  color: var(--color-primary);
  background-color: var(--color-bg-surface);
  border-color: var(--color-border) var(--color-border) var(--color-bg-surface);
  font-weight: 600;
}

.nav-pills .nav-item .nav-link {
  color: var(--color-text-secondary);
  background-color: transparent;
  border-radius: var(--border-radius);
  padding: 0.5rem 1rem;
  font-size: var(--font-size-sm);
  font-weight: 500;
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.nav-pills .nav-item .nav-link:hover {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.nav-pills .nav-item .nav-link.active {
  background-color: var(--color-primary);
  color: #fff;
  font-weight: 600;
}

.tab-content {
  border: 1px solid var(--color-border);
  border-top: none;
  padding: 1.25rem;
  background-color: var(--color-bg-surface);
  border-radius: 0 0 var(--border-radius-lg) var(--border-radius-lg);
}
.tab-content .tab-pane {
  background-color: transparent;
  color: var(--color-text-primary);
  min-height: 100px;
}

/* --------------------------------------------------------------------------
   19. DROPDOWN
   -------------------------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 0.375rem;
  min-width: 12rem;
}
.dropdown-item {
  color: var(--color-text-primary);
  font-size: var(--font-size-sm);
  padding: 0.5rem 0.875rem;
  border-radius: var(--border-radius-sm);
  transition: background-color var(--transition-fast), color var(--transition-fast);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.dropdown-item:hover, .dropdown-item:focus {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
}
.dropdown-item.active, .dropdown-item:active {
  background-color: var(--color-primary-muted);
  color: var(--color-primary);
}
.dropdown-divider { border-color: var(--color-border); margin: 0.25rem 0; }
.dropdown-header {
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.375rem 0.875rem;
}

/* --------------------------------------------------------------------------
   20. TOMSELECT
   -------------------------------------------------------------------------- */
.ts-wrapper .ts-control {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
  padding: 0.375rem 0.75rem !important;
  min-height: calc(1.5em + 0.875rem + 2px);
  box-shadow: none !important;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast) !important;
}
.ts-wrapper.focus .ts-control {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}
.ts-wrapper .ts-control input {
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
}
.ts-wrapper .ts-control input::placeholder { color: var(--color-text-muted) !important; }

.ts-dropdown {
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: var(--font-size-sm) !important;
  color: var(--color-text-primary) !important;
}
.ts-dropdown .option {
  padding: 0.5rem 0.875rem !important;
  color: var(--color-text-primary) !important;
  transition: background-color var(--transition-fast) !important;
}
.ts-dropdown .option:hover,
.ts-dropdown .option.active {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}
.ts-dropdown .option.selected {
  background-color: var(--color-primary-muted) !important;
  color: var(--color-primary) !important;
}
.ts-wrapper .item {
  background-color: var(--color-primary-muted) !important;
  color: var(--color-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  border: 1px solid rgba(16, 185, 129, 0.3) !important;
  font-size: var(--font-size-xs) !important;
  padding: 0.125rem 0.5rem !important;
}
.ts-wrapper .item .remove {
  color: var(--color-primary) !important;
  border-left: 1px solid rgba(16, 185, 129, 0.3) !important;
}

/* --------------------------------------------------------------------------
   21. TEMPUS DOMINUS (Date/Time Picker)
   -------------------------------------------------------------------------- */
.tempus-dominus-widget,
.td-widget {
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
}
.tempus-dominus-widget .date,
.tempus-dominus-widget .time,
.td-widget .date,
.td-widget .time {
  color: var(--color-text-primary) !important;
}
.tempus-dominus-widget .picker-switch,
.td-widget .picker-switch {
  color: var(--color-text-primary) !important;
}
.tempus-dominus-widget td.day:hover,
.tempus-dominus-widget td.hour:hover,
.tempus-dominus-widget td.minute:hover,
.td-widget td.day:hover,
.td-widget td.hour:hover,
.td-widget td.minute:hover {
  background-color: var(--color-bg-elevated) !important;
  border-radius: var(--border-radius-sm) !important;
}
.tempus-dominus-widget td.active,
.tempus-dominus-widget td.active:hover,
.td-widget td.active,
.td-widget td.active:hover {
  background-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--border-radius-sm) !important;
}
.tempus-dominus-widget th,
.td-widget th {
  color: var(--color-text-secondary) !important;
  font-weight: 600 !important;
}
.tempus-dominus-widget .prev,
.tempus-dominus-widget .next,
.td-widget .prev,
.td-widget .next {
  color: var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   22. SWEETALERT2
   -------------------------------------------------------------------------- */
.swal2-popup {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-xl) !important;
  box-shadow: var(--shadow-lg) !important;
}
.swal2-title { color: var(--color-text-primary) !important; font-weight: 600 !important; }
.swal2-content, .swal2-html-container { color: var(--color-text-secondary) !important; }
.swal2-confirm {
  background-color: var(--color-primary) !important;
  border-radius: var(--border-radius) !important;
  font-weight: 500 !important;
}
.swal2-confirm:hover { background-color: var(--color-primary-hover) !important; }
.swal2-cancel {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius) !important;
  font-weight: 500 !important;
}
.swal2-cancel:hover { background-color: #4B5563 !important; }
.swal2-close { color: var(--color-text-muted) !important; }
.swal2-close:hover { color: var(--color-text-primary) !important; }

/* --------------------------------------------------------------------------
   23. BOOTSTRAP LAYOUT UTILITIES (Grid, Flex, Spacing)
   -------------------------------------------------------------------------- */
.container, .container-fluid,
.container-xxl, .container-xl,
.container-lg, .container-md, .container-sm {
  --bs-gutter-x: 1.5rem;
  --bs-gutter-y: 0;
  width: 100%;
  padding-right: calc(var(--bs-gutter-x) * 0.5);
  padding-left: calc(var(--bs-gutter-x) * 0.5);
  margin-right: auto;
  margin-left: auto;
}

/* Breakpoints Bootstrap 5 */
:root {
  --bs-breakpoint-xs: 0;
  --bs-breakpoint-sm: 576px;
  --bs-breakpoint-md: 768px;
  --bs-breakpoint-lg: 992px;
  --bs-breakpoint-xl: 1200px;
  --bs-breakpoint-xxl: 1400px;
}

/* --------------------------------------------------------------------------
   24. SIDEBAR RESPONSIVE (expand-lg)
   -------------------------------------------------------------------------- */
@media (min-width: 992px) {
  .sidebar-expand-lg.layout-fixed .app-main {
    margin-left: 0;
  }
  .sidebar-expand-lg.layout-fixed .app-sidebar {
    position: sticky;
    top: 0;
    bottom: 0;
    max-height: 100vh;
  }
  .sidebar-expand-lg.layout-fixed .app-sidebar .sidebar-wrapper {
    height: calc(100vh - var(--header-height) - 3.5rem - 2px);
    overflow-y: auto;
  }
  .sidebar-expand-lg .app-sidebar {
    display: flex;
  }
  .sidebar-expand-lg.sidebar-open .app-sidebar {
    margin-left: 0;
  }
}

@media (max-width: 991.98px) {
  .sidebar-expand-lg .app-sidebar {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 1038;
    transform: translateX(-100%);
    transition: transform var(--transition);
  }
  .sidebar-expand-lg.sidebar-open .app-sidebar {
    transform: translateX(0);
  }
  .sidebar-expand-lg.sidebar-open .sidebar-overlay {
    display: block;
  }
  .app-wrapper {
    grid-template-columns: 0 1fr;
  }
}

/* --------------------------------------------------------------------------
   25. PROGRESS BAR
   -------------------------------------------------------------------------- */
.progress {
  background-color: var(--color-bg-elevated);
  border-radius: 50rem;
  height: 0.5rem;
  overflow: hidden;
}
.progress-bar {
  background-color: var(--color-primary);
  border-radius: 50rem;
  transition: width 0.4s ease;
}
.progress-bar.bg-warning { background-color: var(--color-warning) !important; }
.progress-bar.bg-danger  { background-color: var(--color-danger) !important; }
.progress-bar.bg-info    { background-color: var(--color-info) !important; }

/* --------------------------------------------------------------------------
   26. TOOLTIP E POPOVER
   -------------------------------------------------------------------------- */
.tooltip-inner {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  border-radius: var(--border-radius-sm);
  font-size: var(--font-size-xs);
  padding: 0.375rem 0.625rem;
  box-shadow: var(--shadow);
}
.bs-tooltip-auto[data-popper-placement^=top] .tooltip-arrow::before,
.bs-tooltip-top .tooltip-arrow::before {
  border-top-color: var(--color-bg-elevated);
}

.popover {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-lg);
}
.popover-header {
  background-color: var(--color-bg-elevated);
  border-bottom: 1px solid var(--color-border);
  color: var(--color-text-primary);
  font-weight: 600;
  border-radius: var(--border-radius-lg) var(--border-radius-lg) 0 0;
}
.popover-body { color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   27. SPINNER / LOADING
   -------------------------------------------------------------------------- */
.spinner-border, .spinner-grow {
  color: var(--color-primary);
}

/* --------------------------------------------------------------------------
   28. OVERLAY SCROLLBARS
   -------------------------------------------------------------------------- */
.os-theme-light.os-scrollbar > .os-scrollbar-track > .os-scrollbar-handle {
  background-color: var(--color-bg-elevated);
}
.os-theme-light.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle {
  background-color: #4B5563;
}

/* --------------------------------------------------------------------------
   29. ANIMAZIONI
   -------------------------------------------------------------------------- */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeOut {
  from { opacity: 1; }
  to   { opacity: 0; }
}
@keyframes slideInLeft {
  from { transform: translateX(-100%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}

/* --------------------------------------------------------------------------
   30. UTILITIES CUSTOM
   -------------------------------------------------------------------------- */

/* Separatore sezione */
.section-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 1.5rem 0 1rem;
  color: var(--color-text-muted);
  font-size: var(--font-size-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.section-divider::before, .section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--color-border);
}

/* Stat card (dashboard) */
.stat-card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: box-shadow var(--transition), transform var(--transition);
}
.stat-card:hover {
  box-shadow: var(--shadow);
  transform: translateY(-2px);
}
.stat-card .stat-icon {
  width: 3rem;
  height: 3rem;
  border-radius: var(--border-radius);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.375rem;
  flex-shrink: 0;
}
.stat-card .stat-icon.primary { background-color: var(--color-primary-muted); color: var(--color-primary); }
.stat-card .stat-icon.warning { background-color: var(--color-warning-bg); color: var(--color-warning); }
.stat-card .stat-icon.danger  { background-color: var(--color-danger-bg); color: var(--color-danger); }
.stat-card .stat-icon.info    { background-color: var(--color-info-bg); color: var(--color-info); }
.stat-card .stat-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text-primary);
  line-height: 1;
}
.stat-card .stat-label {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* Scrollbar globale */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
  background-color: var(--color-bg-elevated);
  border-radius: 6px;
}
::-webkit-scrollbar-thumb:hover { background-color: #4B5563; }

/* Focus ring globale */
:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Selezione testo */
::selection {
  background-color: rgba(16, 185, 129, 0.25);
  color: var(--color-text-primary);
}

/* Nasconde il testo "admin" del tema Bootstrap */
[data-bs-theme=admin] { color-scheme: dark; }

/* --------------------------------------------------------------------------
   31. PRINT
   -------------------------------------------------------------------------- */
@media print {
  .app-sidebar, .app-header, .app-footer { display: none !important; }
  .app-wrapper { display: block; }
  .app-content { padding: 0; }
  body { background-color: #fff; color: #000; }
  .card { border: 1px solid #ccc; box-shadow: none; }
  .table > thead > tr > th { background-color: #f0f0f0; color: #000; }
  .table > tbody > tr > td { color: #000; border-color: #ccc; }
}

/* --------------------------------------------------------------------------
   32. SIDEBAR - STILI AGGIUNTIVI VOCI MENU
   -------------------------------------------------------------------------- */

/* Testo voce menu (nuovo span .nav-link-text) */
.sidebar-wrapper .nav-link .nav-link-text {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  flex: 1;
  font-size: var(--font-size-sm);
  font-weight: 500;
}

/* Icona fallback lettera iniziale */
.nav-icon-initial {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 1.375rem;
  max-width: 1.375rem;
  height: 1.375rem;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--sidebar-icon);
  background-color: rgba(255,255,255,0.06);
  border-radius: 0.3rem;
  flex-shrink: 0;
  font-style: normal;
  line-height: 1;
  letter-spacing: 0;
  transition: color var(--transition-fast), background-color var(--transition-fast);
}
.sidebar-wrapper .nav-link:hover .nav-icon-initial,
.sidebar-wrapper .nav-link.active .nav-icon-initial {
  color: var(--color-primary);
  background-color: var(--color-primary-muted);
}

/* Voce sottomenu (sub-item) */
.sidebar-wrapper .nav-link.sub-item {
  padding-left: 1.25rem;
  font-size: var(--font-size-xs);
}

/* Separatore visivo tra sezioni menu */
.sidebar-wrapper .nav-item.divider {
  border-top: 1px solid var(--color-border-subtle);
  margin: 0.5rem 0;
  padding: 0;
  height: 0;
  pointer-events: none;
}


/* ==========================================================================
   SEZIONE PROFILO UTENTE (com_users)
   Classi BEM con prefisso "prf-" — nessun conflitto con Bootstrap
   ========================================================================== */

/* --------------------------------------------------------------------------
   Wrapper pagina
   -------------------------------------------------------------------------- */
.prf-view,
.prf-edit {
  padding: 1rem 0;
}

/* --------------------------------------------------------------------------
   Page header
   -------------------------------------------------------------------------- */
.prf-page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.75rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--color-border);
}

.prf-page-header__left {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.prf-page-header__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: var(--border-radius);
  background: var(--color-primary-muted);
  color: var(--color-primary);
  font-size: 1.375rem;
  flex-shrink: 0;
}

.prf-page-header__title {
  font-size: 1.375rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.2;
}

.prf-page-header__sub {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0.125rem 0 0;
}

/* --------------------------------------------------------------------------
   Card generica
   -------------------------------------------------------------------------- */
.prf-card {
  background-color: var(--color-bg-surface);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  transition: box-shadow var(--transition-fast);
}

.prf-card:hover {
  box-shadow: var(--shadow);
}

.prf-card__header {
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid var(--color-border);
  background-color: rgba(255, 255, 255, 0.02);
}

.prf-card__header-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: var(--border-radius-sm);
  font-size: 1rem;
  flex-shrink: 0;
}

.prf-card__header-icon--blue   { background: var(--color-info-bg);    color: var(--color-info); }
.prf-card__header-icon--green  { background: var(--color-primary-muted); color: var(--color-primary); }
.prf-card__header-icon--amber  { background: var(--color-warning-bg);  color: var(--color-warning); }
.prf-card__header-icon--teal   { background: rgba(20,184,166,0.15);    color: #14B8A6; }
.prf-card__header-icon--red    { background: var(--color-danger-bg);   color: var(--color-danger); }
.prf-card__header-icon--purple { background: rgba(139,92,246,0.15);    color: #8B5CF6; }

.prf-card__title {
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin: 0;
  line-height: 1.3;
}

.prf-card__subtitle {
  font-size: 0.75rem;
  color: var(--color-text-secondary);
  margin: 0.125rem 0 0;
}

.prf-card__body {
  padding: 1.25rem;
}

/* --------------------------------------------------------------------------
   Card identità (colonna sinistra)
   -------------------------------------------------------------------------- */
.prf-card--identity {
  position: sticky;
  top: 1rem;
}

/* ── Sezione avatar + nome ── */
.prf-identity {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 2rem 1.5rem 1.5rem;
  border-bottom: 1px solid var(--color-border);
}

.prf-avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 1rem;
}

.prf-avatar {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), var(--shadow);
  display: block;
}

.prf-avatar--xl {
  width: 8rem;
  height: 8rem;
}

.prf-avatar-initials {
  width: 6rem;
  height: 6rem;
  border-radius: 50%;
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 3px solid rgba(16, 185, 129, 0.4);
  box-shadow: 0 0 0 4px rgba(16, 185, 129, 0.1), var(--shadow);
  user-select: none;
}

.prf-avatar-initials--xl {
  width: 8rem;
  height: 8rem;
  font-size: 2rem;
}

.prf-avatar-status {
  position: absolute;
  bottom: 4px;
  right: 4px;
  width: 1rem;
  height: 1rem;
  border-radius: 50%;
  border: 2px solid var(--color-bg-surface);
}

.prf-avatar-status--online  { background-color: var(--color-success); }
.prf-avatar-status--offline { background-color: var(--color-danger); }

.prf-identity__name {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-text-primary);
  margin: 0 0 0.25rem;
}

.prf-identity__username {
  font-size: 0.8125rem;
  color: var(--color-text-secondary);
  margin: 0 0 0.75rem;
}

.prf-identity__username .bi {
  font-size: 0.875rem;
  margin-right: 0.125rem;
}

/* --------------------------------------------------------------------------
   Sezioni interne alla card identità
   -------------------------------------------------------------------------- */
.prf-section {
  padding: 1rem 1.25rem;
}

.prf-section__label {
  font-size: 0.6875rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--color-text-muted);
  margin-bottom: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.375rem;
}

.prf-divider {
  height: 1px;
  background-color: var(--color-border);
  margin: 0;
}

/* --------------------------------------------------------------------------
   Badge stato e ruoli
   -------------------------------------------------------------------------- */
.prf-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
  padding: 0.3em 0.75em;
  border-radius: 50rem;
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.4;
}

.prf-badge--sm {
  font-size: 0.6875rem;
  padding: 0.2em 0.55em;
}

.prf-badge--success { background: var(--color-success-bg);  color: var(--color-success); }
.prf-badge--danger  { background: var(--color-danger-bg);   color: var(--color-danger); }
.prf-badge--warning { background: var(--color-warning-bg);  color: var(--color-warning); }
.prf-badge--info    { background: var(--color-info-bg);     color: var(--color-info); }
.prf-badge--muted   { background: rgba(107,114,128,0.15);   color: var(--color-text-secondary); }

.prf-roles {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
}

.prf-role {
  display: inline-flex;
  align-items: center;
  padding: 0.25em 0.65em;
  border-radius: 50rem;
  font-size: 0.6875rem;
  font-weight: 600;
}

.prf-role--primary { background: var(--color-info-bg);      color: var(--color-info); }
.prf-role--success { background: var(--color-success-bg);   color: var(--color-success); }
.prf-role--danger  { background: var(--color-danger-bg);    color: var(--color-danger); }
.prf-role--info    { background: rgba(20,184,166,0.15);     color: #14B8A6; }
.prf-role--warning { background: var(--color-warning-bg);   color: var(--color-warning); }
.prf-role--muted   { background: rgba(107,114,128,0.15);    color: var(--color-text-secondary); }

/* --------------------------------------------------------------------------
   Lista info (contatti + account info)
   -------------------------------------------------------------------------- */
.prf-info-list {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
}

.prf-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
}

.prf-info-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  flex-shrink: 0;
  margin-top: 0.125rem;
}

.prf-info-item__icon--blue   { background: var(--color-info-bg);    color: var(--color-info); }
.prf-info-item__icon--green  { background: var(--color-success-bg); color: var(--color-success); }
.prf-info-item__icon--amber  { background: var(--color-warning-bg); color: var(--color-warning); }
.prf-info-item__icon--teal   { background: rgba(20,184,166,0.15);   color: #14B8A6; }
.prf-info-item__icon--muted  { background: rgba(107,114,128,0.12);  color: var(--color-text-muted); }

.prf-info-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.prf-info-item__label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.prf-info-item__value {
  font-size: 0.8125rem;
  color: var(--color-text-primary);
  font-weight: 500;
  word-break: break-all;
  line-height: 1.4;
}

.prf-info-item__value--link {
  color: var(--color-primary);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.prf-info-item__value--link:hover {
  color: #34D399;
  text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Campi dettaglio (params + custom)
   -------------------------------------------------------------------------- */
.prf-field-item {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.75rem;
  background-color: rgba(255, 255, 255, 0.02);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius);
  transition: background-color var(--transition-fast);
}

.prf-field-item:hover {
  background-color: rgba(255, 255, 255, 0.04);
}

.prf-field-item__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--border-radius-sm);
  font-size: 0.875rem;
  flex-shrink: 0;
}

.prf-field-item__icon--amber { background: var(--color-warning-bg); color: var(--color-warning); }
.prf-field-item__icon--teal  { background: rgba(20,184,166,0.15);   color: #14B8A6; }
.prf-field-item__icon--blue  { background: var(--color-info-bg);    color: var(--color-info); }

.prf-field-item__body {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}

.prf-field-item__label {
  font-size: 0.6875rem;
  color: var(--color-text-muted);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.125rem;
}

.prf-field-item__value {
  font-size: 0.875rem;
  color: var(--color-text-primary);
  font-weight: 500;
  word-break: break-word;
}

/* --------------------------------------------------------------------------
   Bottoni profilo
   -------------------------------------------------------------------------- */
.prf-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 1.125rem;
  border-radius: var(--border-radius);
  font-size: 0.875rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background-color var(--transition-fast), box-shadow var(--transition-fast), transform var(--transition-fast);
  line-height: 1.4;
  white-space: nowrap;
}

.prf-btn:active {
  transform: translateY(1px);
}

.prf-btn--primary {
  background: linear-gradient(135deg, #10B981 0%, #059669 100%);
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}

.prf-btn--primary:hover {
  background: linear-gradient(135deg, #34D399 0%, #10B981 100%);
  box-shadow: 0 4px 14px rgba(16, 185, 129, 0.4);
  color: #fff !important;
}

.prf-btn--secondary {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border);
}

.prf-btn--secondary:hover {
  background-color: rgba(255, 255, 255, 0.08);
  color: var(--color-text-primary) !important;
}

.prf-btn--lg {
  padding: 0.625rem 1.5rem;
  font-size: 0.9375rem;
}

/* --------------------------------------------------------------------------
   Form (edit.php) — input dark
   -------------------------------------------------------------------------- */
.prf-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.prf-form-group .form-label,
.prf-form-label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0;
}

/* Tutti gli input dentro il form profilo → tema dark */
.prf-edit input[type="text"],
.prf-edit input[type="email"],
.prf-edit input[type="password"],
.prf-edit input[type="tel"],
.prf-edit input[type="url"],
.prf-edit input[type="number"],
.prf-edit input[type="date"],
.prf-edit input[type="file"],
.prf-edit textarea,
.prf-edit select,
.prf-form-group .form-control,
.prf-form-group .form-select,
.prf-form-control,
.prf-form-select {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  color: var(--color-text-primary) !important;
  font-size: 0.875rem;
  padding: 0.5rem 0.875rem;
  transition: border-color var(--transition-fast), box-shadow var(--transition-fast);
}

.prf-edit input:focus,
.prf-edit textarea:focus,
.prf-edit select:focus,
.prf-form-group .form-control:focus,
.prf-form-group .form-select:focus,
.prf-form-control:focus,
.prf-form-select:focus {
  border-color: rgba(16, 185, 129, 0.5) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.12) !important;
  outline: none;
}

.prf-edit input[type="file"] {
  padding: 0.4rem 0.75rem;
  cursor: pointer;
}

.prf-edit label {
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 0.25rem;
  display: block;
}

.prf-edit input[type="checkbox"],
.prf-edit input[type="radio"] {
  accent-color: var(--color-primary);
  width: 1rem;
  height: 1rem;
}

.prf-form-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
  display: block;
}

/* Upload avatar */
.prf-avatar-upload {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.prf-avatar-upload__preview { flex-shrink: 0; }

.prf-avatar-upload__input {
  flex: 1;
  min-width: 200px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

/* Azioni form */
.prf-form-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* --------------------------------------------------------------------------
   Alert profilo
   -------------------------------------------------------------------------- */
.prf-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.625rem;
  padding: 0.875rem 1rem;
  border-radius: var(--border-radius);
  font-size: 0.8125rem;
  font-weight: 500;
  line-height: 1.5;
}

.prf-alert .bi { font-size: 1rem; flex-shrink: 0; margin-top: 0.0625rem; }

.prf-alert--info    { background: var(--color-info-bg);    color: #93C5FD; border: 1px solid rgba(59,130,246,0.2); }
.prf-alert--warning { background: var(--color-warning-bg); color: #FCD34D; border: 1px solid rgba(245,158,11,0.2); }
.prf-alert--success { background: var(--color-success-bg); color: #6EE7B7; border: 1px solid rgba(16,185,129,0.2); }
.prf-alert--danger  { background: var(--color-danger-bg);  color: #FCA5A5; border: 1px solid rgba(239,68,68,0.2); }

/* --------------------------------------------------------------------------
   Codici OTEP
   -------------------------------------------------------------------------- */
.prf-otep-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.5rem;
}

.prf-otep-code {
  display: block;
  padding: 0.5rem 0.75rem;
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius-sm);
  font-size: 0.8125rem;
  color: var(--color-primary);
  text-align: center;
  letter-spacing: 0.05em;
  font-family: 'Courier New', Courier, monospace;
}

/* --------------------------------------------------------------------------
   Accordion 2FA (override Bootstrap dark)
   -------------------------------------------------------------------------- */
.prf-edit .accordion-item {
  background-color: var(--color-bg-elevated);
  border: 1px solid var(--color-border);
  border-radius: var(--border-radius) !important;
  margin-bottom: 0.5rem;
  overflow: hidden;
}

.prf-edit .accordion-button {
  background-color: var(--color-bg-elevated);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  font-weight: 600;
  box-shadow: none;
}

.prf-edit .accordion-button:not(.collapsed) {
  background-color: var(--color-primary-muted);
  color: var(--color-primary);
}

.prf-edit .accordion-button::after {
  filter: invert(1) opacity(0.6);
}

.prf-edit .accordion-body {
  background-color: var(--color-bg-surface);
  color: var(--color-text-primary);
  font-size: 0.875rem;
  padding: 1rem 1.25rem;
}

/* --------------------------------------------------------------------------
   Responsive profilo
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .prf-card--identity { position: static; }
}

@media (max-width: 575.98px) {
  .prf-page-header {
    flex-direction: column;
    align-items: flex-start;
  }
  .prf-avatar-upload {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .prf-form-actions {
    flex-direction: column-reverse;
  }
  .prf-form-actions .prf-btn {
    width: 100%;
    justify-content: center;
  }
  .prf-otep-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}
/* ==========================================================================
   DARK THEME — PATCH CORREZIONI SISTEMICHE
   Da appendere in fondo a: templates/{tpl}/css/tpl_admin.css
   Versione: 2.0
   Problemi risolti:
     1. Testo bottoni invisibile su sfondo trasparente
     2. Paginazione DataTables bianca
     3. TinyMCE non dark
     4. Placeholder input poco leggibili
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. VARIABILI GLOBALI — OVERRIDE BOOTSTRAP 5 DARK
   Aggiunge le variabili Bootstrap mancanti per il tema dark
   -------------------------------------------------------------------------- */
:root {
  /* Sovrascrive il default Bootstrap #212529 che rendeva il testo invisibile */
  --bs-btn-color:               var(--color-text-primary);

  /* Placeholder più leggibile: da #6B7280 a #9CA3AF */
  --color-text-muted:           #9CA3AF;
  --bs-secondary-color:         #9CA3AF;
  --bs-tertiary-color:          #6B7280;

  /* Variabili Bootstrap dark mode per input/form */
  --bs-body-color:              var(--color-text-primary);
  --bs-emphasis-color:          #fff;
  --bs-secondary-bg:            var(--color-bg-elevated);
  --bs-tertiary-bg:             var(--color-bg-surface);
}

/* --------------------------------------------------------------------------
   2. BOTTONI — TESTO VISIBILE SU SFONDO TRASPARENTE/DARK
   Il problema: Bootstrap 5 eredita --bs-btn-color: #212529 (quasi nero)
   che su sfondo dark diventa invisibile.
   Soluzione: forza il colore testo su tutti i bottoni outline e border-*
   -------------------------------------------------------------------------- */

/* Reset globale: qualsiasi .btn senza classe specifica eredita testo chiaro */
.btn {
  --bs-btn-color: var(--color-text-primary);
  color: var(--color-text-primary);
}

/* Bottoni outline: testo = colore del bordo, non nero */
.btn-outline-primary {
  --bs-btn-color:       var(--color-primary);
  --bs-btn-hover-color: #fff;
  color: var(--color-primary) !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:active,
.btn-outline-primary.active {
  color: #fff !important;
  background-color: var(--color-primary) !important;
}

.btn-outline-secondary {
  --bs-btn-color:       var(--color-text-secondary);
  --bs-btn-hover-color: var(--color-text-primary);
  color: var(--color-text-secondary) !important;
  border-color: var(--color-border) !important;
}
.btn-outline-secondary:hover {
  color: var(--color-text-primary) !important;
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-text-secondary) !important;
}

.btn-outline-danger {
  --bs-btn-color:       var(--color-danger);
  --bs-btn-hover-color: #fff;
  color: var(--color-danger) !important;
}
.btn-outline-danger:hover {
  color: #fff !important;
  background-color: var(--color-danger) !important;
}

.btn-outline-warning {
  --bs-btn-color:       var(--color-warning);
  --bs-btn-hover-color: var(--color-text-inverse);
  color: var(--color-warning) !important;
}
.btn-outline-warning:hover {
  color: var(--color-text-inverse) !important;
  background-color: var(--color-warning) !important;
}

.btn-outline-success {
  --bs-btn-color:       var(--color-success);
  --bs-btn-hover-color: #fff;
  color: var(--color-success) !important;
}
.btn-outline-success:hover {
  color: #fff !important;
  background-color: var(--color-success) !important;
}

.btn-outline-info {
  --bs-btn-color:       var(--color-info);
  --bs-btn-hover-color: #fff;
  color: var(--color-info) !important;
}
.btn-outline-info:hover {
  color: #fff !important;
  background-color: var(--color-info) !important;
}

.btn-outline-light {
  --bs-btn-color:       var(--color-text-primary);
  color: var(--color-text-primary) !important;
  border-color: var(--color-border) !important;
}
.btn-outline-light:hover {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}

/* Bottoni con solo bordo Bootstrap (border border-primary, border-2, ecc.)
   Caso specifico: <button class="btn btn-sm border border-2 border-primary ...">
   Il testo interno non ha colore esplicito → eredita il nero Bootstrap */
.btn.border-primary,
.btn.border-primary > *,
.btn.border-primary div,
.btn.border-primary span {
  color: var(--color-primary) !important;
}
.btn.border-primary:hover,
.btn.border-primary:hover > *,
.btn.border-primary:hover div,
.btn.border-primary:hover span {
  color: #fff !important;
  background-color: var(--color-primary) !important;
}

.btn.border-danger,
.btn.border-danger > *,
.btn.border-danger div {
  color: var(--color-danger) !important;
}
.btn.border-warning,
.btn.border-warning > *,
.btn.border-warning div {
  color: var(--color-warning) !important;
}
.btn.border-success,
.btn.border-success > *,
.btn.border-success div {
  color: var(--color-success) !important;
}
.btn.border-info,
.btn.border-info > *,
.btn.border-info div {
  color: var(--color-info) !important;
}
.btn.border-secondary,
.btn.border-secondary > *,
.btn.border-secondary div {
  color: var(--color-text-secondary) !important;
}

/* btn-link: deve essere verde, non nero */
.btn-link {
  color: var(--color-primary) !important;
  text-decoration: none;
}
.btn-link:hover {
  color: var(--color-primary-hover) !important;
  text-decoration: underline;
}

/* btn-close: icona X deve essere visibile su dark */
.btn-close {
  filter: invert(1) grayscale(100%) brightness(200%);
  opacity: 0.7;
}
.btn-close:hover { opacity: 1; }

/* --------------------------------------------------------------------------
   3. PLACEHOLDER INPUT — CONTRASTO MIGLIORATO
   -------------------------------------------------------------------------- */
.form-control::placeholder,
.form-select::placeholder,
input::placeholder,
textarea::placeholder {
  color: #9CA3AF !important;
  opacity: 1 !important;
}

/* Input con classe specifica del template */
.input-control::placeholder {
  color: #9CA3AF !important;
  opacity: 1 !important;
}

/* Filtri DataTables nella thead */
.search-devices-rfid-input::placeholder,
.search-vehicle-input::placeholder,
thead input[type="text"]::placeholder,
thead input[type="search"]::placeholder {
  color: #6B7280 !important;
  opacity: 1 !important;
  font-style: italic;
}

/* --------------------------------------------------------------------------
   4. DATATABLES — PAGINAZIONE E WRAPPER DARK
   Sovrascrive con !important il CSS vendor datatables.min.css
   -------------------------------------------------------------------------- */

/* Wrapper generale */
.dataTables_wrapper {
  background-color: transparent !important;
  color: var(--color-text-primary) !important;
}

/* Barra info (es. "Mostrando 1-10 di 50 risultati") */
.dataTables_wrapper .dataTables_info {
  color: var(--color-text-secondary) !important;
  padding-top: 0.5rem !important;
  font-size: var(--font-size-xs) !important;
}

/* Select lunghezza pagina */
.dataTables_wrapper .dataTables_length select {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 0.2rem 0.5rem !important;
}

/* Input ricerca globale */
.dataTables_wrapper .dataTables_filter input {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
}
.dataTables_wrapper .dataTables_filter input::placeholder {
  color: #9CA3AF !important;
}

/* Contenitore paginazione */
.dataTables_wrapper .dataTables_paginate {
  background-color: transparent !important;
  padding: 0.5rem 0 !important;
}

/* Singolo bottone pagina */
.dataTables_wrapper .dataTables_paginate .paginate_button {
  background: var(--color-bg-elevated) !important;
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-text-secondary) !important;
  padding: 0.3rem 0.7rem !important;
  margin: 0 2px !important;
  font-size: var(--font-size-xs) !important;
  transition: all var(--transition-fast) !important;
  cursor: pointer !important;
  box-shadow: none !important;
  line-height: 1.5 !important;
}

/* Hover bottone pagina */
.dataTables_wrapper .dataTables_paginate .paginate_button:hover {
  background: rgba(16, 185, 129, 0.15) !important;
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Pagina corrente */
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--color-primary) !important;
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
}

/* Bottoni disabilitati (Prima / Precedente all'inizio) */
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled,
.dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover {
  background: var(--color-bg-surface) !important;
  background-color: var(--color-bg-surface) !important;
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text-muted) !important;
  opacity: 0.5 !important;
  cursor: not-allowed !important;
  box-shadow: none !important;
}

/* Ellipsis "..." */
.dataTables_wrapper .dataTables_paginate .ellipsis {
  color: var(--color-text-muted) !important;
  padding: 0.3rem 0.4rem !important;
}

/* Intestazione tabella (thead) */
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-secondary) !important;
  border-bottom: 2px solid var(--color-border) !important;
  font-size: var(--font-size-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
  font-weight: 600 !important;
}

/* Corpo tabella */
table.dataTable tbody tr {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
}
table.dataTable tbody tr:nth-child(even) {
  background-color: rgba(31, 41, 55, 0.6) !important;
}
table.dataTable tbody tr:hover {
  background-color: rgba(16, 185, 129, 0.07) !important;
}
table.dataTable tbody td {
  border-bottom: 1px solid var(--color-border-subtle) !important;
  color: var(--color-text-primary) !important;
  vertical-align: middle !important;
}

/* Processing overlay */
.dataTables_processing {
  background: rgba(17, 24, 39, 0.92) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: var(--font-size-sm) !important;
}

/* --------------------------------------------------------------------------
   5. TINYMCE — TEMA DARK COMPLETO
   Sovrascrive l'interfaccia TinyMCE (editor .tox-*) per il tema dark
   -------------------------------------------------------------------------- */

/* Contenitore principale */
.tox.tox-tinymce {
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  background-color: var(--color-bg-elevated) !important;
  box-shadow: none !important;
}
.tox.tox-tinymce:focus-within {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
}

/* Barra degli strumenti (toolbar) */
.tox .tox-toolbar,
.tox .tox-toolbar__overflow,
.tox .tox-toolbar-overlord,
.tox .tox-toolbar__primary {
  background-color: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
}

/* Gruppi di bottoni nella toolbar */
.tox .tox-toolbar__group {
  border-right: 1px solid var(--color-border) !important;
}
.tox .tox-toolbar__group:last-child {
  border-right: none !important;
}

/* Bottoni toolbar */
.tox .tox-tbtn {
  color: var(--color-text-secondary) !important;
  background-color: transparent !important;
  border-radius: var(--border-radius-sm) !important;
  transition: background-color var(--transition-fast), color var(--transition-fast) !important;
}
.tox .tox-tbtn:hover {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}
.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover {
  background-color: rgba(16, 185, 129, 0.2) !important;
  color: var(--color-primary) !important;
}
.tox .tox-tbtn svg {
  fill: var(--color-text-secondary) !important;
}
.tox .tox-tbtn:hover svg {
  fill: var(--color-text-primary) !important;
}
.tox .tox-tbtn--enabled svg {
  fill: var(--color-primary) !important;
}

/* Select nella toolbar (es. dimensione font, stile paragrafo) */
.tox .tox-tbtn--select,
.tox .tox-tbtn--bespoke {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
}
.tox .tox-tbtn--select:hover {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-primary) !important;
}

/* Area di editing (iframe body) — impostata via content_css in tinymce.init */
.tox .tox-edit-area {
  background-color: var(--color-bg-elevated) !important;
}
.tox .tox-edit-area__iframe {
  background-color: var(--color-bg-elevated) !important;
}

/* Barra di stato inferiore */
.tox .tox-statusbar {
  background-color: var(--color-bg-surface) !important;
  border-top: 1px solid var(--color-border) !important;
  color: var(--color-text-muted) !important;
}
.tox .tox-statusbar a,
.tox .tox-statusbar__path-item,
.tox .tox-statusbar__wordcount {
  color: var(--color-text-muted) !important;
}
.tox .tox-statusbar a:hover {
  color: var(--color-primary) !important;
}

/* Menu dropdown della toolbar */
.tox .tox-menu,
.tox .tox-collection {
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-lg) !important;
}
.tox .tox-collection__item {
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
}
.tox .tox-collection__item:hover,
.tox .tox-collection__item--active {
  background-color: rgba(16, 185, 129, 0.15) !important;
  color: var(--color-primary) !important;
}
.tox .tox-collection__item-label {
  color: inherit !important;
}
.tox .tox-collection__item-checkmark svg,
.tox .tox-collection__item-icon svg {
  fill: var(--color-text-secondary) !important;
}
.tox .tox-collection__item--active .tox-collection__item-checkmark svg,
.tox .tox-collection__item--active .tox-collection__item-icon svg {
  fill: var(--color-primary) !important;
}

/* Separatori nel menu */
.tox .tox-collection__separator {
  border-top: 1px solid var(--color-border) !important;
}

/* Dialog/modale TinyMCE (es. inserisci link, inserisci immagine) */
.tox .tox-dialog {
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--color-text-primary) !important;
}
.tox .tox-dialog-wrap__backdrop {
  background-color: rgba(0, 0, 0, 0.7) !important;
}
.tox .tox-dialog__header {
  background-color: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
.tox .tox-dialog__title {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}
.tox .tox-dialog__body {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
}
.tox .tox-dialog__body-nav-item {
  color: var(--color-text-secondary) !important;
}
.tox .tox-dialog__body-nav-item--active {
  border-bottom: 2px solid var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.tox .tox-dialog__footer {
  background-color: var(--color-bg-surface) !important;
  border-top: 1px solid var(--color-border) !important;
}

/* Input e label nei dialog TinyMCE */
.tox .tox-label,
.tox .tox-toolbar-label {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}
.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-listbox,
.tox .tox-selectfield select {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
}
.tox .tox-textfield:focus,
.tox .tox-textarea:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  outline: none !important;
}
.tox .tox-textfield::placeholder,
.tox .tox-textarea::placeholder {
  color: #9CA3AF !important;
}

/* Bottoni nei dialog TinyMCE */
.tox .tox-button {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: var(--font-size-sm) !important;
  font-weight: 600 !important;
}
.tox .tox-button:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
}
.tox .tox-button--secondary {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
.tox .tox-button--secondary:hover {
  background-color: #4B5563 !important;
  border-color: #4B5563 !important;
}
.tox .tox-button--icon {
  background-color: transparent !important;
  border-color: transparent !important;
  color: var(--color-text-secondary) !important;
}
.tox .tox-button--icon:hover {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}
.tox .tox-button--icon svg {
  fill: var(--color-text-secondary) !important;
}

/* Tooltip TinyMCE */
.tox .tox-tooltip__body {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: var(--font-size-xs) !important;
  box-shadow: var(--shadow) !important;
}

/* Notifiche TinyMCE */
.tox .tox-notification {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius) !important;
}
.tox .tox-notification--warning {
  border-color: var(--color-warning) !important;
  background-color: var(--color-warning-bg) !important;
}
.tox .tox-notification--error {
  border-color: var(--color-danger) !important;
  background-color: var(--color-danger-bg) !important;
}
.tox .tox-notification--success {
  border-color: var(--color-success) !important;
  background-color: var(--color-success-bg) !important;
}

/* Resize handle */
.tox .tox-statusbar__resize-handle svg {
  fill: var(--color-text-muted) !important;
}

.tox:not(.tox-tinymce-inline) .tox-editor-header {
  background-color: transparent !important;
}

/* --------------------------------------------------------------------------
   6. SWEETALERT2 — TEMA DARK COERENTE
   -------------------------------------------------------------------------- */
.swal2-popup {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
}
.swal2-title {
  color: var(--color-text-primary) !important;
  font-size: 1.1rem !important;
}
.swal2-html-container,
.swal2-content {
  color: var(--color-text-secondary) !important;
}
.swal2-confirm {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  border-radius: var(--border-radius-sm) !important;
  font-weight: 600 !important;
}
.swal2-confirm:hover {
  background-color: var(--color-primary-hover) !important;
}
.swal2-cancel {
  background-color: var(--color-bg-elevated) !important;
  border-color: var(--color-border) !important;
  color: var(--color-text-primary) !important;
  border-radius: var(--border-radius-sm) !important;
}
.swal2-cancel:hover {
  background-color: #4B5563 !important;
}
.swal2-deny {
  background-color: var(--color-danger) !important;
  border-radius: var(--border-radius-sm) !important;
}
.swal2-icon.swal2-warning {
  border-color: var(--color-warning) !important;
  color: var(--color-warning) !important;
}
.swal2-icon.swal2-error {
  border-color: var(--color-danger) !important;
  color: var(--color-danger) !important;
}
.swal2-icon.swal2-success {
  border-color: var(--color-success) !important;
  color: var(--color-success) !important;
}
.swal2-icon.swal2-success [class^='swal2-success-line'] {
  background-color: var(--color-success) !important;
}
.swal2-icon.swal2-success .swal2-success-ring {
  border-color: rgba(16, 185, 129, 0.3) !important;
}
.swal2-icon.swal2-info {
  border-color: var(--color-info) !important;
  color: var(--color-info) !important;
}
.swal2-icon.swal2-question {
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
}
.swal2-select {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
}
.swal2-select:focus {
  border-color: var(--color-primary) !important;
  box-shadow: none !important;
}
.swal2-select option {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
}
/* Toast SweetAlert2 (position: top-end) */
.swal2-container.swal2-top-end .swal2-popup,
.swal2-container.swal2-top-right .swal2-popup {
  background-color: var(--color-bg-elevated) !important;
  border-left: 3px solid var(--color-primary) !important;
}

/* --------------------------------------------------------------------------
   7. MODAL BOOTSTRAP — SFONDO E CONTENUTO DARK
   -------------------------------------------------------------------------- */
.modal-content {
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-lg) !important;
  color: var(--color-text-primary) !important;
  box-shadow: var(--shadow-lg) !important;
}
.modal-header {
  background-color: var(--color-bg-surface) !important;
  border-bottom: 1px solid var(--color-border) !important;
  color: var(--color-text-primary) !important;
}
.modal-title {
  color: var(--color-text-primary) !important;
  font-weight: 600 !important;
}
.modal-body {
  background-color: var(--color-bg-surface) !important;
  color: var(--color-text-primary) !important;
}
.modal-footer {
  background-color: var(--color-bg-surface) !important;
  border-top: 1px solid var(--color-border) !important;
}
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.75) !important;
}

/* --------------------------------------------------------------------------
   8. TOOLTIP BOOTSTRAP — DARK
   -------------------------------------------------------------------------- */
.tooltip .tooltip-inner {
  background-color: var(--color-bg-elevated) !important;
  color: var(--color-text-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
  font-size: var(--font-size-xs) !important;
  max-width: 300px !important;
  text-align: left !important;
}
.tooltip.bs-tooltip-top .tooltip-arrow::before   { border-top-color:    var(--color-bg-elevated) !important; }
.tooltip.bs-tooltip-bottom .tooltip-arrow::before{ border-bottom-color: var(--color-bg-elevated) !important; }
.tooltip.bs-tooltip-start .tooltip-arrow::before { border-left-color:   var(--color-bg-elevated) !important; }
.tooltip.bs-tooltip-end .tooltip-arrow::before   { border-right-color:  var(--color-bg-elevated) !important; }

/* --------------------------------------------------------------------------
   9. DROPDOWN BOOTSTRAP — DARK
   -------------------------------------------------------------------------- */
.dropdown-menu {
  background-color: var(--color-bg-surface) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-lg) !important;
  color: var(--color-text-primary) !important;
}
.dropdown-item {
  color: var(--color-text-primary) !important;
  font-size: var(--font-size-sm) !important;
  border-radius: var(--border-radius-sm) !important;
  margin: 1px 4px !important;
  padding: 0.4rem 0.75rem !important;
}
.dropdown-item:hover,
.dropdown-item:focus {
  background-color: rgba(16, 185, 129, 0.12) !important;
  color: var(--color-primary) !important;
}
.dropdown-item.active,
.dropdown-item:active {
  background-color: var(--color-primary) !important;
  color: #fff !important;
}
.dropdown-divider {
  border-top: 1px solid var(--color-border) !important;
  margin: 4px 0 !important;
}
.dropdown-header {
  color: var(--color-text-muted) !important;
  font-size: var(--font-size-xs) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.06em !important;
}
/* ==========================================================================
   DATATABLES 2.x — PAGINAZIONE BOOTSTRAP 5 DARK
   Struttura HTML: .dt-paging > nav > ul.pagination > li.page-item > button.page-link
   Da appendere in fondo a: templates/{tpl}/css/tpl_admin.css
   ========================================================================== */

/* --------------------------------------------------------------------------
   DATATABLES 2.x — PAGINAZIONE (struttura Bootstrap 5 nativa)
   -------------------------------------------------------------------------- */

/* Contenitore paginazione */
.dt-paging {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  padding: 0.5rem 0;
}

/* Lista pagination Bootstrap */
.dt-paging .pagination {
  margin: 0;
  gap: 2px;
}

/* Singolo item */
.dt-paging .page-item .page-link {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  color: var(--color-text-secondary) !important;
  border-radius: var(--border-radius-sm) !important;
  padding: 0.3rem 0.65rem !important;
  font-size: var(--font-size-xs) !important;
  line-height: 1.5 !important;
  transition: background-color var(--transition-fast), color var(--transition-fast), border-color var(--transition-fast) !important;
  box-shadow: none !important;
  cursor: pointer !important;
  min-width: 2rem !important;
  text-align: center !important;
}

/* Hover */
.dt-paging .page-item:not(.disabled):not(.active) .page-link:hover {
  background-color: rgba(16, 185, 129, 0.15) !important;
  border-color: var(--color-primary) !important;
  color: var(--color-primary) !important;
  box-shadow: none !important;
}

/* Pagina corrente (active) */
.dt-paging .page-item.active .page-link {
  background-color: var(--color-primary) !important;
  border-color: var(--color-primary) !important;
  color: #fff !important;
  font-weight: 600 !important;
  box-shadow: 0 2px 8px rgba(16, 185, 129, 0.4) !important;
  cursor: default !important;
}
.dt-paging .page-item.active .page-link:hover {
  background-color: var(--color-primary-hover) !important;
  border-color: var(--color-primary-hover) !important;
  color: #fff !important;
}

/* Disabilitato (Prima/Precedente all'inizio, Successivo/Ultima alla fine) */
.dt-paging .page-item.disabled .page-link {
  background-color: var(--color-bg-surface) !important;
  border-color: var(--color-border-subtle) !important;
  color: var(--color-text-muted) !important;
  opacity: 0.45 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Focus ring accessibilità */
.dt-paging .page-item .page-link:focus {
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.25) !important;
  outline: none !important;
}

/* --------------------------------------------------------------------------
   DATATABLES 2.x — LAYOUT GENERALE (dt-layout-row, dt-info, dt-length)
   -------------------------------------------------------------------------- */

/* Riga layout DataTables 2.x */
.dt-layout-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 0.4rem 0;
}
.dt-layout-row:first-child {
  border-bottom: 1px solid var(--color-border-subtle);
  padding-bottom: 0.5rem;
  margin-bottom: 0.25rem;
}
.dt-layout-row:last-child {
  border-top: 1px solid var(--color-border-subtle);
  padding-top: 0.5rem;
  margin-top: 0.25rem;
}

/* Celle layout */
.dt-layout-cell {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* Info risultati (es. "Mostrando 1-10 di 50") */
.dt-info,
.dataTables_info {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs) !important;
  white-space: nowrap;
}

/* Select lunghezza pagina */
.dt-length select,
.dataTables_length select {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-text-primary) !important;
  padding: 0.2rem 0.5rem !important;
  font-size: var(--font-size-xs) !important;
}
.dt-length label,
.dataTables_length label {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs) !important;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Input ricerca globale */
.dt-search input,
.dataTables_filter input {
  background-color: var(--color-bg-elevated) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius-sm) !important;
  color: var(--color-text-primary) !important;
  padding: 0.3rem 0.6rem !important;
  font-size: var(--font-size-xs) !important;
}
.dt-search input:focus,
.dataTables_filter input:focus {
  border-color: var(--color-primary) !important;
  box-shadow: 0 0 0 3px rgba(16, 185, 129, 0.2) !important;
  outline: none !important;
}
.dt-search input::placeholder,
.dataTables_filter input::placeholder {
  color: #9CA3AF !important;
}
.dt-search label,
.dataTables_filter label {
  color: var(--color-text-secondary) !important;
  font-size: var(--font-size-xs) !important;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* Processing overlay DataTables 2.x */
.dt-processing,
.dataTables_processing {
  background: rgba(17, 24, 39, 0.92) !important;
  color: var(--color-primary) !important;
  border: 1px solid var(--color-border) !important;
  border-radius: var(--border-radius) !important;
  box-shadow: var(--shadow-lg) !important;
  font-size: var(--font-size-sm) !important;
  padding: 0.75rem 1.5rem !important;
}

/* Icone ordinamento colonne DataTables 2.x */
table.dataTable thead th.dt-orderable-asc,
table.dataTable thead th.dt-orderable-desc,
table.dataTable thead th.dt-ordering-asc,
table.dataTable thead th.dt-ordering-desc {
  cursor: pointer !important;
}
table.dataTable thead th .dt-column-order {
  color: var(--color-primary) !important;
  opacity: 0.6 !important;
}
table.dataTable thead th.dt-ordering-asc .dt-column-order,
table.dataTable thead th.dt-ordering-desc .dt-column-order {
  opacity: 1 !important;
}

/* Scrollbar orizzontale DataTables */
.dataTables_scrollBody,
.dt-scroll-body {
  scrollbar-width: thin;
  scrollbar-color: var(--color-bg-elevated) transparent;
}
.dataTables_scrollBody::-webkit-scrollbar,
.dt-scroll-body::-webkit-scrollbar { height: 5px; }
.dataTables_scrollBody::-webkit-scrollbar-track,
.dt-scroll-body::-webkit-scrollbar-track { background: transparent; }
.dataTables_scrollBody::-webkit-scrollbar-thumb,
.dt-scroll-body::-webkit-scrollbar-thumb {
  background: var(--color-bg-elevated);
  border-radius: 3px;
}


/* ==========================================================================
   DATATABLES — SISTEMA DI CARICAMENTO (dt-loading / dt-ready)
   Nasconde la tabella grezza prima dell'inizializzazione DataTables,
   mostra uno spinner e rivela la tabella con fade-in in initComplete.
   Utilizzo:
     1. Aggiungi classe "dt-loading" al wrapper .table-responsive della view
     2. Chiama dtReveal('#table-id') in initComplete di DataTables
   ========================================================================== */

.dt-loading {
  position: relative;
  min-height: 180px;
}

.dt-loading table {
  visibility: hidden;
  opacity: 0;
  transition: opacity 0.35s ease, visibility 0s linear 0.35s;
}

.dt-ready table {
  visibility: visible;
  opacity: 1;
  transition: opacity 0.35s ease;
}

.dt-loading-spinner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  background-color: var(--color-bg-surface);
  border-radius: var(--border-radius);
  z-index: 10;
  pointer-events: none;
  opacity: 1;
  transition: opacity 0.3s ease;
}

.dt-loading-spinner__icon {
  width: 2.5rem;
  height: 2.5rem;
  border: 3px solid rgba(16, 185, 129, 0.2);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: dt-spin 0.75s linear infinite;
}

.dt-loading-spinner__text {
  font-size: var(--font-size-xs);
  color: var(--color-text-muted);
  letter-spacing: 0.04em;
}

.dt-ready .dt-loading-spinner {
  opacity: 0;
  pointer-events: none;
}

.dt-loading-spinner.dt-spinner-hidden {
  display: none;
}

@keyframes dt-spin {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   MOD_DASHBOARDCARDS — CARD DARK
   Il modulo nasce con card bianche: qui le sue variabili --dc-* vengono
   ridefinite con i token del template. Il colore scelto nella card resta
   l'accento (bordo superiore e icona). Il CSS del modulo e' caricato dopo
   questo file (jdoc styles), quindi serve un selettore piu' specifico.
   -------------------------------------------------------------------------- */
body .mod-dashboardcards {
  --dc-surface:       var(--color-bg-surface);
  --dc-line:          var(--color-border);
  --dc-line-strong:   var(--color-bg-elevated);
  --dc-ink:           var(--color-text-primary);
  --dc-muted:         var(--color-text-secondary);
  --dc-footer-bg:     var(--color-bg-base);
  --dc-link:          var(--color-primary);
  --dc-link-hover:    var(--color-primary);
  --dc-link-hover-bg: var(--color-primary-muted);
}

/* Su fondo scuro il 10% di accento non si vede: tessera dell'icona piu' carica */
body .mod-dashboardcards .dc-card {
  --dc-accent-soft: color-mix(in srgb, var(--dc-accent, #657068) 22%, var(--dc-surface));
}

/* ==========================================================================
   TEMA ABC NAPOLI (chiaro, blu #2e61ae / navy #164d78, Open Sans)
   ========================================================================== */
:root {
  --abc-blue:             #2e61ae;
  --abc-blue-dark:        #234b86;
  --abc-navy:             #164d78;
  --abc-navy-deep:        #0e314d;
  --abc-sky:              #54bae2;

  --color-bg-base:        #f5f5f5;
  --color-bg-surface:     #ffffff;
  --color-bg-elevated:    #eef2f8;
  --color-bg-header:      #ffffff;

  --color-primary:        var(--abc-blue);
  --color-primary-hover:  var(--abc-blue-dark);
  --color-primary-muted:  rgba(46, 97, 174, 0.1);
  --color-primary-rgb:    46, 97, 174;

  --color-text-primary:   #333333;
  --color-text-secondary: #666666;
  --color-text-muted:     #8a8a8a;
  --color-text-inverse:   #1a1a1a;

  --color-border:         #dddddd;
  --color-border-subtle:  #e8e8e8;

  --color-success:        #2e8540;
  --color-success-bg:     rgba(46, 133, 64, 0.1);
  --color-warning:        #f0ad4e;
  --color-warning-bg:     rgba(240, 173, 78, 0.14);
  --color-danger:         #cc0000;
  --color-danger-bg:      rgba(204, 0, 0, 0.08);
  --color-info:           #2a9fd0;
  --color-info-bg:        rgba(84, 186, 226, 0.14);

  --sidebar-bg:           var(--abc-navy);
  --sidebar-header-bg:    #ffffff;
  --sidebar-text:         rgba(255, 255, 255, 0.88);
  --sidebar-text-muted:   rgba(255, 255, 255, 0.55);
  --sidebar-icon:         rgba(255, 255, 255, 0.7);
  --sidebar-hover-bg:     rgba(255, 255, 255, 0.1);
  --sidebar-hover-text:   #ffffff;
  --sidebar-active-bg:    var(--abc-blue);
  --sidebar-active-text:  #ffffff;
  --sidebar-active-border: var(--abc-sky);
  --sidebar-parent-bg:    rgba(255, 255, 255, 0.05);

  --header-bg:            #ffffff;
  --header-border:        var(--abc-navy);
  --header-text:          #333333;

  --border-radius-sm:     3px;
  --border-radius:        4px;
  --border-radius-lg:     4px;
  --border-radius-xl:     6px;
  --shadow-sm:            0 1px 2px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.08);
  --shadow:               0 4px 8px rgba(0,0,0,0.1), 0 2px 4px rgba(0,0,0,0.06);
  --shadow-lg:            0 6px 20px rgba(0,0,0,0.15), 0 4px 8px rgba(0,0,0,0.1);

  --font-family-base:     'Open Sans', Verdana, sans-serif;

  --bs-body-bg:           var(--color-bg-base);
  --bs-body-color:        var(--color-text-primary);
  --bs-emphasis-color:    #000;
  --bs-secondary-color:   #666666;
  --bs-tertiary-color:    #8a8a8a;
  --bs-btn-color:         var(--color-text-primary);
}

body,
[data-bs-theme=admin] { color-scheme: light; }

h1, .h1, h2, .h2, h3, .h3, h4, .h4, h5, .h5, h6, .h6 { color: var(--abc-navy); }

::selection { background-color: rgba(46, 97, 174, 0.2); color: inherit; }

.app-header { border-bottom: 3px solid var(--abc-navy); box-shadow: 0 2px 4px rgba(0,0,0,0.06); }
.app-header .navbar { height: calc(var(--header-height) - 3px); }

.app-sidebar { border-right: none; box-shadow: 2px 0 6px rgba(0,0,0,0.12); }
.sidebar-brand { border-bottom: 3px solid var(--abc-navy); }
.sidebar-brand .brand-text { color: var(--abc-navy); font-weight: 800; }
.sidebar-wrapper { scrollbar-color: rgba(255,255,255,0.25) transparent; }
.sidebar-wrapper::-webkit-scrollbar-thumb { background-color: rgba(255,255,255,0.25); }
.sidebar-footer { border-top: 1px solid rgba(255,255,255,0.12); }
.app-sidebar .sidebar-footer .nav-link:hover {
  background-color: var(--color-danger);
  color: #fff !important;
}
.sidebar-wrapper .nav-link:hover .nav-icon,
.sidebar-wrapper .nav-link.active .nav-icon,
.sidebar-wrapper .nav-link:hover .nav_icon { color: #fff; }
.sidebar-wrapper .nav-link:hover .nav-icon-initial,
.sidebar-wrapper .nav-link.active .nav-icon-initial {
  color: #fff;
  background-color: rgba(255,255,255,0.18);
}
.multi-level { border-left-color: rgba(255,255,255,0.18); }
.sidebar-wrapper .nav-item.divider { border-top-color: rgba(255,255,255,0.12); }

.app-content-header {
  background-color: var(--abc-blue);
  border-bottom: none;
}
.app-content-header h3 { color: #fff; font-weight: 600; }
.app-content-header .breadcrumb-item a { color: rgba(255,255,255,0.85); }
.app-content-header .breadcrumb-item a:hover { color: #fff; }
.app-content-header .breadcrumb-item.active { color: #fff; }
.app-content-header .breadcrumb-item + .breadcrumb-item::before { color: rgba(255,255,255,0.6); }

.app-footer {
  background-color: var(--abc-blue);
  border-top: none;
  color: rgba(255,255,255,0.85);
}
.app-footer strong { color: #fff; }
.app-footer a { color: #fff; }

.card-header { background-color: #f5f5f5; }
.card-header .card-title,
.prf-card__title { color: var(--abc-navy); }
.prf-card__header { background-color: #f5f5f5; }

.btn-primary { box-shadow: none; }
.btn-primary:hover { box-shadow: 0 2px 6px rgba(46, 97, 174, 0.35); }
.btn-secondary:hover { background-color: #dfe5ee; border-color: #cfd6e0; }
.btn-dark { background-color: var(--abc-navy-deep); border-color: var(--abc-navy-deep); color: #fff; }
.bg-dark  { background-color: var(--abc-navy-deep) !important; color: #fff; }
.btn-warning, .btn-warning:hover { color: #fff; }
.bg-warning { color: #fff; }
.btn-close,
.alert-dismissible .btn-close { filter: none; opacity: 0.55; }
.btn-close:hover { opacity: 1; }
.prf-edit .accordion-button::after { filter: none; }

.form-control,
.form-select,
.form-control:focus,
.form-select:focus,
.ts-wrapper .ts-control,
.prf-edit input[type="text"],
.prf-edit input[type="email"],
.prf-edit input[type="password"],
.prf-edit input[type="tel"],
.prf-edit input[type="url"],
.prf-edit input[type="number"],
.prf-edit input[type="date"],
.prf-edit input[type="file"],
.prf-edit textarea,
.prf-edit select,
.prf-form-control,
.prf-form-select,
.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input,
.dt-length select,
.dt-search input,
.tox .tox-textfield,
.tox .tox-textarea,
.tox .tox-listbox,
.tox .tox-selectfield select { background-color: #fff !important; }
.form-control:disabled,
.form-select:disabled { background-color: #f0f0f0 !important; }
.form-check-input { background-color: #fff; }

.form-control:focus,
.form-select:focus,
.form-check-input:focus,
.form-control.is-valid:focus,
.form-select.is-valid:focus,
.dataTables_wrapper .dataTables_filter input:focus { box-shadow: 0 0 0 3px rgba(46, 97, 174, 0.2); }
.ts-wrapper.focus .ts-control,
.tox.tox-tinymce:focus-within,
.tox .tox-textfield:focus,
.tox .tox-textarea:focus,
.dt-search input:focus,
.dataTables_filter input:focus,
.dt-paging .page-item .page-link:focus { box-shadow: 0 0 0 3px rgba(46, 97, 174, 0.2) !important; }
.prf-edit input:focus,
.prf-edit textarea:focus,
.prf-edit select:focus,
.prf-form-group .form-control:focus,
.prf-form-group .form-select:focus,
.prf-form-control:focus,
.prf-form-select:focus {
  border-color: rgba(46, 97, 174, 0.6) !important;
  box-shadow: 0 0 0 3px rgba(46, 97, 174, 0.15) !important;
}
.form-control.is-invalid:focus,
.form-select.is-invalid:focus { box-shadow: 0 0 0 3px rgba(204, 0, 0, 0.15); }

.ts-wrapper .item { border-color: rgba(46, 97, 174, 0.3) !important; }
.ts-wrapper .item .remove { border-left-color: rgba(46, 97, 174, 0.3) !important; }

.table {
  --bs-table-striped-bg: #f9fafc;
  --bs-table-hover-bg: rgba(46, 97, 174, 0.06);
}
.table > thead > tr > th,
table.dataTable thead th,
table.dataTable thead td {
  background-color: var(--color-bg-elevated) !important;
  color: var(--abc-navy) !important;
}
table.dataTable thead th,
table.dataTable thead td { border-bottom: 2px solid var(--abc-blue) !important; }
table.dataTable tbody tr:nth-child(even) { background-color: #f9fafc !important; }
table.dataTable tbody tr:hover { background-color: rgba(46, 97, 174, 0.06) !important; }

.dataTables_wrapper .dataTables_paginate .paginate_button:hover,
.dt-paging .page-item:not(.disabled):not(.active) .page-link:hover {
  background: rgba(46, 97, 174, 0.1) !important;
  background-color: rgba(46, 97, 174, 0.1) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button,
.dt-paging .page-item .page-link { background: #fff !important; background-color: #fff !important; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover,
.dt-paging .page-item.active .page-link {
  background: var(--abc-blue) !important;
  background-color: var(--abc-blue) !important;
  box-shadow: none !important;
}
.dt-processing,
.dataTables_processing { background: rgba(255, 255, 255, 0.96) !important; }
.dt-loading-spinner__icon { border-color: rgba(46, 97, 174, 0.2); border-top-color: var(--color-primary); }

.alert-success, .prf-alert--success { color: #1e5e2c; border-color: rgba(46, 133, 64, 0.3); }
.alert-warning, .prf-alert--warning { color: #7a4e00; border-color: rgba(240, 173, 78, 0.45); }
.alert-danger,  .prf-alert--danger  { color: #990000; border-color: rgba(204, 0, 0, 0.3); }
.alert-info,    .prf-alert--info    { color: #1d5f80; border-color: rgba(84, 186, 226, 0.45); }

.prf-avatar,
.prf-avatar-initials {
  border-color: rgba(46, 97, 174, 0.4);
  box-shadow: 0 0 0 4px rgba(46, 97, 174, 0.1), var(--shadow);
}
.prf-avatar-initials { background: linear-gradient(135deg, var(--abc-blue) 0%, var(--abc-navy) 100%); }
.prf-btn--primary {
  background: var(--abc-blue);
  box-shadow: none;
}
.prf-btn--primary:hover {
  background: var(--abc-blue-dark);
  box-shadow: 0 2px 6px rgba(46, 97, 174, 0.35);
}
.prf-btn--secondary:hover { background-color: #dfe5ee; }
.prf-info-item__value--link:hover { color: var(--abc-blue-dark); }
.prf-field-item { background-color: #fafbfc; }
.prf-field-item:hover { background-color: #f3f6fa; }

.tox .tox-tbtn--enabled,
.tox .tox-tbtn--enabled:hover,
.tox .tox-collection__item:hover,
.tox .tox-collection__item--active { background-color: rgba(46, 97, 174, 0.12) !important; }
.tox .tox-button--secondary:hover { background-color: #dfe5ee !important; border-color: #cfd6e0 !important; }
.tox .tox-dialog-wrap__backdrop { background-color: rgba(0, 0, 0, 0.45) !important; }

.swal2-cancel:hover { background-color: #dfe5ee !important; }
.swal2-icon.swal2-success .swal2-success-ring { border-color: rgba(46, 133, 64, 0.3) !important; }

.dropdown-item:hover,
.dropdown-item:focus { background-color: rgba(46, 97, 174, 0.1) !important; }

.modal-header { background-color: #f5f5f5 !important; }
.modal-backdrop { background-color: rgba(0, 0, 0, 0.5) !important; }

.os-theme-light.os-scrollbar:hover > .os-scrollbar-track > .os-scrollbar-handle { background-color: #b5bcc6; }
::-webkit-scrollbar-thumb { background-color: #ccd3dc; }
::-webkit-scrollbar-thumb:hover { background-color: #b5bcc6; }