/* ============================================================
   Salumitalia Ispezioni — Design System
   Brand colors estratti dal logo ufficiale:
   - Rosso Salumitalia #E31837
   - Nero/grafite (testo) #1a1a1a
   - Verde tricolore (accento) #008C44
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;500;600;700&display=swap');

:root {
  /* === BRAND SALUMITALIA === */
  --sl-red: #E31837;             /* rosso del logo (banner "CONSORZI INDICAZIONE GEOGRAFICA") */
  --sl-red-dark: #b8132c;        /* hover */
  --sl-red-darker: #8e0e22;
  --sl-red-light: #f04a64;
  --sl-red-ultra-light: #fcebee;

  /* Nero/Grafite (testo del logo, header) */
  --sl-dark: #1a1a1a;
  --sl-dark-light: #2c2c2c;
  --sl-dark-lighter: #3a3a3a;

  /* Verde tricolore (accento sul puntino della "i") */
  --sl-green: #008C44;
  --sl-green-dark: #006e35;

  /* Bianco/Crema */
  --sl-white: #ffffff;
  --sl-cream: #fafafa;
  --sl-gray: #9aa6b2;
  --sl-gray-light: #e0e0e0;
  --sl-gray-ultra-light: #f5f5f5;
  --sl-text-dark: #1a1a1a;
  --sl-text-muted: #6c7a8d;

  /* Stato */
  --sl-success: #2BA56F;
  --sl-warning: #E0A030;
  --sl-info: #428bca;
  --sl-danger: #d9534f;

  /* Layout */
  --sl-sidebar-width: 250px;
  --sl-sidebar-collapsed-width: 60px;
  --sl-topbar-height: 60px;

  /* Ombre */
  --sl-shadow-sm: 0 1px 3px rgba(26, 26, 26, 0.08);
  --sl-shadow: 0 2px 10px rgba(26, 26, 26, 0.10);
  --sl-shadow-lg: 0 10px 30px rgba(26, 26, 26, 0.18);

  /* Raggi */
  --sl-radius: 6px;
  --sl-radius-sm: 4px;
  --sl-radius-lg: 12px;

  --sl-font-sans: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}

/* === OVERRIDE RADZEN === */
:root {
  --rz-primary: #E31837;
  --rz-primary-dark: #b8132c;
  --rz-primary-darker: #8e0e22;
  --rz-primary-light: #f04a64;
  --rz-secondary: #1a1a1a;
  --rz-base-100: #f5f5f5;
  --rz-base-200: #fcebee;
  --rz-base-300: #e0e0e0;
  --rz-base-background-color: #fafafa;
  --rz-surface-background-color: #ffffff;
  --rz-text-color: #1a1a1a;
  --rz-text-secondary-color: #6c7a8d;
  --rz-text-h-color: #1a1a1a;
  --rz-border-radius: 6px;
  --rz-text-font-family: 'Open Sans', sans-serif;
}

/* === RESET === */
* { box-sizing: border-box; }

html, body {
  margin: 0; padding: 0; height: 100%;
  font-family: var(--sl-font-sans);
  color: var(--sl-text-dark);
  background: var(--sl-cream);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 { color: var(--sl-dark); font-weight: 700; margin: 0 0 .6em 0; }

a { color: var(--sl-red); text-decoration: none; }
a:hover { color: var(--sl-red-dark); }

/* === LAYOUT === */
.sl-app { display: flex; min-height: 100vh; position: relative; }

/* SIDEBAR */
.sl-sidebar {
  width: var(--sl-sidebar-width);
  background: var(--sl-dark);
  color: var(--sl-white);
  display: flex; flex-direction: column;
  position: fixed; top: 0; bottom: 0; left: 0;
  z-index: 1000;
  transition: width .2s ease, transform .2s ease;
  overflow-y: auto; overflow-x: hidden;
}

.sl-app.sidebar-collapsed .sl-sidebar { width: var(--sl-sidebar-collapsed-width); }
.sl-app.sidebar-collapsed .sl-brand-text,
.sl-app.sidebar-collapsed .sl-nav-text,
.sl-app.sidebar-collapsed .sl-sidebar-footer .sl-user-details,
.sl-app.sidebar-collapsed .sl-submenu { display: none; }

.sl-brand {
  height: var(--sl-topbar-height);
  display: flex; align-items: center;
  padding: 0 16px;
  background: linear-gradient(180deg, #000 0%, var(--sl-dark) 100%);
  border-bottom: 2px solid var(--sl-red);
  flex-shrink: 0;
}
.sl-brand-logo {
  display: flex; align-items: center; gap: 10px; width: 100%;
}
.sl-brand-icon {
  width: 40px; height: 40px;
  border-radius: var(--sl-radius);
  object-fit: cover;
  flex-shrink: 0;
  background: #fff;
}
.sl-brand-text {
  font-size: 15px; font-weight: 700; letter-spacing: .3px; line-height: 1.15;
}
.sl-brand-text small {
  display: block; font-size: 11px; font-weight: 400; opacity: .65; letter-spacing: 0;
}

/* Nav */
.sl-nav { flex: 1; padding: 8px 0; }
.sl-nav ul { list-style: none; margin: 0; padding: 0; }

.sl-nav-item > a,
.sl-nav-item > .sl-nav-link {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 16px;
  color: #c1c8d2;
  cursor: pointer;
  transition: background .15s, color .15s;
  border-left: 3px solid transparent;
  font-size: 14px; white-space: nowrap;
  text-decoration: none;
}
.sl-nav-item > a:hover,
.sl-nav-item > .sl-nav-link:hover {
  background: rgba(227,24,55,.10);
  color: #fff;
  border-left-color: var(--sl-red);
}
.sl-nav-item.active > a,
.sl-nav-item > a.active,
.sl-nav-item.active > .sl-nav-link {
  background: rgba(227,24,55,.18);
  color: #fff;
  border-left-color: var(--sl-red);
}
.sl-nav-item .sl-nav-icon {
  width: 20px; text-align: center; font-size: 16px; flex-shrink: 0;
}
.sl-nav-item .sl-nav-text { flex: 1; }
.sl-nav-item .sl-nav-arrow {
  font-size: 11px; transition: transform .15s;
}
.sl-nav-item.expanded > .sl-nav-link .sl-nav-arrow { transform: rotate(90deg); }

.sl-submenu {
  background: rgba(0,0,0,.30);
  max-height: 0; overflow: hidden;
  transition: max-height .25s ease;
}
.sl-nav-item.expanded > .sl-submenu { max-height: 800px; }
.sl-submenu li a {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 16px 8px 48px;
  color: #98a3b1; font-size: 13px;
  border-left: 3px solid transparent;
  text-decoration: none;
}
.sl-submenu li a:hover {
  background: rgba(227,24,55,.08);
  color: #fff;
  border-left-color: var(--sl-red);
}
.sl-submenu li a.active {
  color: #fff;
  border-left-color: var(--sl-red);
  background: rgba(227,24,55,.12);
}
.sl-submenu .sl-nav-icon { font-size: 6px; width: 6px; }

/* Sidebar footer */
.sl-sidebar-footer {
  border-top: 1px solid rgba(255,255,255,.06);
  padding: 12px 16px;
  display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
.sl-user-avatar {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--sl-red); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.sl-user-details { flex: 1; min-width: 0; }
.sl-user-name {
  font-size: 13px; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sl-user-role { font-size: 11px; color: #98a3b1; }
.sl-logout-btn {
  background: none; border: none; color: #c1c8d2;
  cursor: pointer; padding: 6px;
  border-radius: var(--sl-radius);
}
.sl-logout-btn:hover { background: var(--sl-red); color: #fff; }

/* MAIN AREA */
.sl-main {
  flex: 1;
  margin-left: var(--sl-sidebar-width);
  display: flex; flex-direction: column;
  min-height: 100vh;
  transition: margin-left .2s ease;
}
.sl-app.sidebar-collapsed .sl-main { margin-left: var(--sl-sidebar-collapsed-width); }

/* TOPBAR */
.sl-topbar {
  height: var(--sl-topbar-height);
  background: #fff;
  border-bottom: 1px solid var(--sl-gray-light);
  display: flex; align-items: center;
  padding: 0 24px;
  box-shadow: var(--sl-shadow-sm);
  position: sticky; top: 0; z-index: 100;
}
.sl-topbar-toggle {
  background: none; border: none;
  color: var(--sl-dark); font-size: 18px; cursor: pointer;
  padding: 8px; border-radius: var(--sl-radius); margin-right: 8px;
}
.sl-topbar-toggle:hover { background: var(--sl-gray-ultra-light); }
.sl-topbar-title { font-size: 18px; font-weight: 600; color: var(--sl-dark); flex: 1; }
.sl-topbar-right {
  display: flex; align-items: center; gap: 16px;
  color: var(--sl-text-muted); font-size: 13px;
}
.sl-topbar-badge {
  background: var(--sl-red-ultra-light);
  color: var(--sl-red);
  padding: 4px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
}

/* CONTENT */
.sl-content { padding: 24px; flex: 1; background: var(--sl-cream); }

/* PAGE HEADER */
.sl-page-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 20px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sl-gray-light);
  gap: 16px; flex-wrap: wrap;
}
.sl-page-header h1 { font-size: 22px; margin: 0; }
.sl-page-header .sl-page-subtitle {
  color: var(--sl-text-muted); font-size: 13px; margin-top: 2px;
}
.sl-page-header-actions {
  display: flex; gap: 8px; align-items: center;
}

/* CARDS / PANELS */
.sl-panel {
  background: #fff;
  border-radius: var(--sl-radius-lg);
  box-shadow: var(--sl-shadow-sm);
  padding: 20px;
  margin-bottom: 16px;
}
.sl-panel-header {
  display: flex; align-items: center; justify-content: space-between;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--sl-gray-light);
  margin-bottom: 16px;
}
.sl-panel-title { font-weight: 600; font-size: 15px; color: var(--sl-dark); }

/* KPI cards */
.sl-kpi {
  border-radius: var(--sl-radius-lg);
  padding: 18px 20px;
  color: #fff;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.sl-kpi-label { font-size: 13px; opacity: .85; margin-bottom: 6px; }
.sl-kpi-value { font-size: 32px; font-weight: 700; line-height: 1; }
.sl-kpi-icon {
  position: absolute; right: 12px; bottom: 8px;
  font-size: 56px; opacity: .12;
}

.sl-kpi-red    { background: linear-gradient(135deg, #E31837 0%, #b8132c 100%); }
.sl-kpi-dark   { background: linear-gradient(135deg, #2c2c2c 0%, #1a1a1a 100%); }
.sl-kpi-green  { background: linear-gradient(135deg, #2BA56F 0%, #1f8456 100%); }
.sl-kpi-orange { background: linear-gradient(135deg, #E0A030 0%, #b8821f 100%); }

/* RADZEN OVERRIDES */
.rz-data-grid {
  border-radius: var(--sl-radius);
  overflow: hidden;
  background: #fff;
}
.rz-grid-table thead { background: var(--sl-dark); }
.rz-grid-table thead th {
  color: #fff !important;
  font-weight: 600;
  white-space: normal !important;
  line-height: 1.2;
  vertical-align: middle;
}
.rz-grid-table thead th .rz-column-title { white-space: normal !important; }
.rz-grid-table thead th .rz-cell-data { color: #fff !important; }
.rz-grid-table thead th .rz-cell-filter-row input { font-weight: 400; }
.rz-grid-table tbody tr:hover { background: var(--sl-red-ultra-light); }

.rz-button.rz-primary {
  background: var(--sl-red); border-color: var(--sl-red);
}
.rz-button.rz-primary:hover {
  background: var(--sl-red-dark); border-color: var(--sl-red-dark);
}
.rz-button.rz-secondary {
  background: var(--sl-dark); border-color: var(--sl-dark); color: #fff;
}
.rz-button.rz-light {
  background: #fff; border-color: var(--sl-gray-light); color: var(--sl-dark);
}
.rz-button.rz-success { background: var(--sl-success); border-color: var(--sl-success); }

/* DataGrid container con scrollbar orizzontale sempre visibile */
.sl-grid-scroll { overflow-x: auto; }
.sl-grid-scroll::-webkit-scrollbar { height: 12px; }
.sl-grid-scroll::-webkit-scrollbar-thumb { background: var(--sl-gray-light); border-radius: 6px; }

/* Badge utility */
.sl-badge {
  display: inline-block; padding: 3px 10px;
  border-radius: 999px; font-size: 12px; font-weight: 600;
  white-space: nowrap;
}
.sl-badge-success { background: #e6f7ee; color: var(--sl-success); }
.sl-badge-danger  { background: #fde8e8; color: var(--sl-danger); }
.sl-badge-warning { background: #fdf2dd; color: var(--sl-warning); }
.sl-badge-info    { background: #e6f0fa; color: var(--sl-info); }
.sl-badge-dark    { background: #ebebeb; color: var(--sl-dark); }
.sl-badge-red     { background: #fcebee; color: var(--sl-red); }

/* RESPONSIVE */
@media (max-width: 768px) {
  .sl-sidebar { transform: translateX(-100%); }
  .sl-sidebar.active { transform: translateX(0); }
  .sl-main { margin-left: 0 !important; }
}

/* LOGIN LAYOUT */
.sl-login-wrapper {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, #1a1a1a 0%, #3a3a3a 100%);
  position: relative;
  padding: 20px;
}
.sl-login-wrapper::before {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(ellipse at top right, rgba(227,24,55,.25), transparent 60%);
}
.sl-login-card {
  background: #fff;
  border-radius: var(--sl-radius-lg);
  box-shadow: 0 20px 60px rgba(0,0,0,.5);
  padding: 40px 36px;
  width: 100%; max-width: 440px;
  position: relative;
  z-index: 1;
}
.sl-login-logo {
  text-align: center; margin-bottom: 24px;
}
.sl-login-logo img {
  max-width: 260px; height: auto;
}
.sl-login-title {
  text-align: center;
  font-size: 18px; font-weight: 600;
  color: var(--sl-dark);
  margin-bottom: 4px;
}
.sl-login-subtitle {
  text-align: center;
  font-size: 13px; color: var(--sl-text-muted);
  margin-bottom: 24px;
}
.sl-login-field { margin-bottom: 16px; }
.sl-login-field label {
  display: block;
  font-size: 12px; font-weight: 600;
  margin-bottom: 6px;
  color: var(--sl-text-muted);
  text-transform: uppercase; letter-spacing: .5px;
}
.sl-login-footer {
  margin-top: 20px; text-align: center;
  font-size: 12px; color: var(--sl-text-muted);
}
.sl-login-demo-note {
  background: var(--sl-red-ultra-light);
  border-left: 3px solid var(--sl-red);
  padding: 10px 14px;
  border-radius: var(--sl-radius);
  font-size: 12px; color: var(--sl-dark);
  margin-bottom: 20px;
}