/* ============================================================
   RDI – Rapportini Di Intervento  |  Design System v3.0
   ============================================================ */

:root {
  /* Brand colours */
  --c-primary:        #2563eb;
  --c-primary-dark:   #1d4ed8;
  --c-primary-light:  #dbeafe;

  /* Semantic */
  --c-success:        #10b981;
  --c-success-light:  #d1fae5;
  --c-danger:         #ef4444;
  --c-danger-light:   #fee2e2;
  --c-warning:        #f59e0b;
  --c-warning-light:  #fef3c7;

  /* Neutrals */
  --c-bg:             #f1f5f9;
  --c-surface:        #ffffff;
  --c-border:         #e2e8f0;
  --c-border-hover:   #cbd5e1;
  --c-text:           #0f172a;
  --c-text-secondary: #64748b;
  --c-text-muted:     #94a3b8;
  --c-text-inverse:   #ffffff;

  /* Typography */
  --font: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --fs-xs:   0.75rem;
  --fs-sm:   0.875rem;
  --fs-base: 1rem;
  --fs-lg:   1.125rem;
  --fs-xl:   1.375rem;
  --fs-2xl:  1.625rem;

  /* Spacing */
  --s1: 0.25rem; --s2: 0.5rem;  --s3: 0.75rem; --s4: 1rem;
  --s5: 1.25rem; --s6: 1.5rem;  --s8: 2rem;    --s10: 2.5rem;

  /* Shape */
  --r-sm: 0.375rem;
  --r-md: 0.5rem;
  --r-lg: 0.75rem;
  --r-xl: 1rem;
  --r-full: 9999px;

  /* Shadow */
  --shadow-sm: 0 1px 2px rgba(0,0,0,.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,.08), 0 2px 4px -1px rgba(0,0,0,.05);
  --shadow-lg: 0 10px 25px -3px rgba(0,0,0,.1), 0 4px 8px -2px rgba(0,0,0,.06);

  --transition: 150ms ease-in-out;
}

/* ─── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--font);
  background: var(--c-bg);
  color: var(--c-text);
  line-height: 1.6;
  min-height: 100vh;
}
a { color: var(--c-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--c-primary-dark); }
img { max-width: 100%; display: block; }

/* ─── Layout wrapper ─────────────────────────────────────── */
.form-container {
  max-width: 1140px;
  margin: var(--s6) auto;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-md);
  padding: var(--s6);
  overflow-x: hidden;
}

/* ─── Page header ────────────────────────────────────────── */
.page-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s4);
  margin-bottom: var(--s6);
  padding-bottom: var(--s5);
  border-bottom: 1px solid var(--c-border);
  flex-wrap: wrap;
}
.header-left  { display: flex; align-items: center; gap: var(--s4); }
.header-right { display: flex; align-items: center; gap: var(--s3); }

.page-header h2 {
  font-size: var(--fs-xl);
  font-weight: 700;
  color: var(--c-text);
  margin: 0;
  line-height: 1.3;
}

/* Logo variants */
.logo        { display: block; max-height: 48px; max-width: 120px; object-fit: contain; }
.logo-center { margin: 0 auto var(--s6); max-height: 64px; max-width: 150px; }

/* ─── Toolbar ─────────────────────────────────────────────── */
.toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-bottom: var(--s5);
  align-items: center;
}

/* ─── Buttons ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  padding: var(--s2) var(--s4);
  font-size: var(--fs-sm);
  font-weight: 500;
  font-family: var(--font);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  cursor: pointer;
  text-decoration: none;
  white-space: nowrap;
  line-height: 1.5;
  transition: background-color var(--transition), border-color var(--transition), color var(--transition), transform var(--transition);
  background-color: var(--c-primary);
  color: var(--c-text-inverse);
}
.btn:hover  { background-color: var(--c-primary-dark); color: var(--c-text-inverse); }
.btn:active { transform: translateY(1px); }

.btn-secondary {
  background-color: var(--c-surface);
  color: var(--c-text);
  border-color: var(--c-border);
}
.btn-secondary:hover {
  background-color: var(--c-bg);
  border-color: var(--c-border-hover);
  color: var(--c-text);
}

.btn-danger  { background-color: var(--c-danger);  border-color: var(--c-danger); }
.btn-danger:hover { background-color: #dc2626; color: white; }

.btn-success { background-color: var(--c-success); border-color: var(--c-success); }
.btn-success:hover { background-color: #059669; color: white; }

.btn-sm { padding: var(--s1) var(--s3); font-size: var(--fs-xs); }

/* ─── Forms ───────────────────────────────────────────────── */
.form-section { margin-bottom: var(--s6); }

.form-section-title {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--c-text-secondary);
  margin-bottom: var(--s3);
  padding-bottom: var(--s2);
  border-bottom: 1px solid var(--c-border);
}

.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: var(--s4);
  margin-bottom: var(--s4);
}

.form-group,
.form-group-in-row {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  margin-bottom: var(--s4);
}
.form-group-in-row { margin-bottom: 0; }

label {
  display: block;
  font-size: var(--fs-sm);
  font-weight: 500;
  color: var(--c-text-secondary);
  margin-bottom: var(--s1);
}

input[type="text"],
input[type="number"],
input[type="date"],
input[type="password"],
input[type="email"],
textarea,
select {
  width: 100%;
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
  font-family: var(--font);
  color: var(--c-text);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  outline: none;
  line-height: 1.5;
  transition: border-color var(--transition), box-shadow var(--transition);
  margin-top: 0;
}

input[type="text"]:focus,
input[type="number"]:focus,
input[type="date"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
textarea:focus,
select:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}

textarea { min-height: 100px; resize: vertical; }

input[type="submit"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--s2) var(--s6);
  font-size: var(--fs-sm);
  font-weight: 600;
  font-family: var(--font);
  background: var(--c-primary);
  color: var(--c-text-inverse);
  border: none;
  border-radius: var(--r-md);
  cursor: pointer;
  margin-top: var(--s4);
  width: auto;
  transition: background-color var(--transition);
}
input[type="submit"]:hover { background: var(--c-primary-dark); }

input[readonly], textarea[readonly] {
  background: var(--c-bg);
  color: var(--c-text-secondary);
  cursor: not-allowed;
}

/* ─── Input group (icon inside) ──────────────────────────── */
.input-group {
  position: relative;
  margin-bottom: var(--s5);
}
.input-group i {
  position: absolute;
  left: 14px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--c-text-muted);
  pointer-events: none;
}
.input-group input {
  padding-left: 40px;
}

/* ─── Filter form ─────────────────────────────────────────── */
.filter-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-end;
  background: var(--c-bg);
  border: 1px solid var(--c-border);
  border-radius: var(--r-lg);
  padding: var(--s4);
  margin-bottom: var(--s5);
}
.filter-group {
  display: flex;
  flex-direction: column;
  gap: var(--s1);
  min-width: 150px;
}
.filter-group label {
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-secondary);
}
.filter-group select { width: 100%; }
.filter-actions {
  display: flex;
  gap: var(--s2);
  align-items: flex-end;
}

/* Legacy inline-form (used in lista.php) */
.inline-form {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s3);
  align-items: flex-end;
}
.inline-form label { display: block; margin-bottom: var(--s1); }
.inline-form select { width: auto; min-width: 130px; }
.inline-form .btn   { margin-top: 0; }

/* ─── Tables ──────────────────────────────────────────────── */
.table-responsive-container,
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-radius: var(--r-md);
  border: 1px solid var(--c-border);
  margin-top: var(--s4);
}

table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  margin-top: 0;
}

th {
  padding: var(--s3) var(--s4);
  text-align: left;
  font-size: var(--fs-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--c-text-inverse);
  background: var(--c-primary);
  white-space: nowrap;
  border-bottom: none;
}

td {
  padding: var(--s3) var(--s4);
  border-bottom: 1px solid var(--c-border);
  color: var(--c-text);
  vertical-align: middle;
  word-wrap: break-word;
}

tbody tr:last-child td { border-bottom: none; }
tbody tr:hover td      { background: var(--c-primary-light); }

.interventi td, .interventi th { padding: var(--s2) var(--s3); font-size: var(--fs-xs); }

/* ─── Status badges ───────────────────────────────────────── */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 2px var(--s2);
  font-size: var(--fs-xs);
  font-weight: 600;
  border-radius: var(--r-full);
  white-space: nowrap;
}
.badge-success  { background: var(--c-success-light); color: #065f46; }
.badge-danger   { background: var(--c-danger-light);  color: #991b1b; }
.badge-warning  { background: var(--c-warning-light); color: #92400e; }
.badge-primary  { background: var(--c-primary-light); color: #1e40af; }

/* Nome cliente con colori dell'anagrafica (clienti.colore_sfondo / colore_testo) */
.chip-cliente {
  display: inline-block;
  padding: 1px var(--s2);
  border-radius: var(--r-sm);
  font-weight: 600;
  white-space: nowrap;
}

/* Licence expiry rows */
.scadenza-scaduta    td { background: var(--c-danger-light)  !important; }
.scadenza-in-scadenza td { background: var(--c-warning-light) !important; }

/* ─── Action icons ────────────────────────────────────────── */
.action-icons {
  display: flex;
  gap: var(--s1);
  align-items: center;
}
.action-icons a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: var(--r-sm);
  color: var(--c-text-secondary);
  transition: color var(--transition), background-color var(--transition);
  font-size: 0.9rem;
}
.action-icons a:hover             { color: var(--c-primary); background: var(--c-primary-light); }
.action-icons a.action-delete:hover { color: var(--c-danger); background: var(--c-danger-light); }
.action-icons a.action-print:hover  { color: var(--c-success); background: var(--c-success-light); }

/* ─── Popup / Modal ───────────────────────────────────────── */
.popup-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.45);
  backdrop-filter: blur(2px);
  z-index: 999;
}
.popup {
  display: none;
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 90%;
  max-width: 520px;
  background: var(--c-surface);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-lg);
  z-index: 1000;
  overflow: hidden;
}
.popup-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--s4) var(--s5);
  background: var(--c-primary);
  color: var(--c-text-inverse);
}
.popup-title { font-size: var(--fs-base); font-weight: 600; }
.popup-content {
  padding: var(--s5);
  max-height: 50vh;
  overflow-y: auto;
  line-height: 1.7;
  color: var(--c-text);
  font-size: var(--fs-sm);
}
.popup-footer {
  padding: var(--s3) var(--s5);
  background: var(--c-bg);
  border-top: 1px solid var(--c-border);
  display: flex;
  justify-content: flex-end;
}
.close-btn {
  background: rgba(255,255,255,.2);
  color: white;
  border: none;
  width: 28px;
  height: 28px;
  border-radius: var(--r-sm);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--fs-base);
  transition: background-color var(--transition);
  line-height: 1;
}
.close-btn:hover { background: rgba(255,255,255,.35); }

/* Tooltip popup */
.popup-anchor { position: relative; }
.popup-text {
  visibility: hidden;
  opacity: 0;
  width: max-content;
  max-width: 180px;
  background: rgba(15,23,42,.9);
  color: white;
  font-size: var(--fs-xs);
  padding: var(--s1) var(--s2);
  border-radius: var(--r-sm);
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  white-space: nowrap;
  transition: opacity var(--transition), visibility var(--transition);
  z-index: 10;
  pointer-events: none;
}
.popup-anchor:hover .popup-text { visibility: visible; opacity: 1; }

/* ─── Error / Alert messages ──────────────────────────────── */
.error-message,
.alert-danger {
  background: var(--c-danger-light);
  color: #991b1b;
  border: 1px solid #fca5a5;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
}
.alert-success {
  background: var(--c-success-light);
  color: #065f46;
  border: 1px solid #6ee7b7;
  padding: var(--s3) var(--s4);
  border-radius: var(--r-md);
  margin-bottom: var(--s4);
  font-size: var(--fs-sm);
}

/* ─── Legend strip (licenze) ──────────────────────────────── */
.legend-strip {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
  margin-top: var(--s3);
}
.legend-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--s1);
  padding: var(--s1) var(--s3);
  border-radius: var(--r-full);
  font-size: var(--fs-xs);
  font-weight: 600;
}
.legend-chip-warning { background: var(--c-warning-light); color: #92400e; }
.legend-chip-danger  { background: var(--c-danger-light);  color: #991b1b; }

/* ─── Footer ──────────────────────────────────────────────── */
.footer {
  text-align: center;
  margin-top: var(--s8);
  padding-top: var(--s4);
  border-top: 1px solid var(--c-border);
  font-size: var(--fs-xs);
  color: var(--c-text-muted);
}

/* ─── Dashboard cards (index.php) ────────────────────────── */
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: var(--s4);
  margin-top: var(--s6);
}
.dash-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--s3);
  padding: var(--s6) var(--s4);
  background: var(--c-surface);
  border: 1px solid var(--c-border);
  border-radius: var(--r-xl);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
  color: var(--c-text);
  transition: border-color var(--transition), box-shadow var(--transition), transform var(--transition);
  text-align: center;
}
.dash-card:hover {
  border-color: var(--c-primary);
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  color: var(--c-primary);
}
.dash-card i {
  font-size: 2.25rem;
  color: var(--c-primary);
  transition: color var(--transition);
}
.dash-card:hover i { color: var(--c-primary-dark); }
.dash-card span {
  font-size: var(--fs-sm);
  font-weight: 600;
  line-height: 1.3;
}
.dash-card.card-logout i    { color: var(--c-danger); }
.dash-card.card-logout:hover { border-color: var(--c-danger); color: var(--c-danger); }
.dash-card.card-logout:hover i { color: var(--c-danger); }

/* ─── DataTables overrides ────────────────────────────────── */
.dataTables_wrapper .dataTables_filter input {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s2) var(--s3);
  font-size: var(--fs-sm);
  font-family: var(--font);
  outline: none;
  margin-left: var(--s2);
}
.dataTables_wrapper .dataTables_filter input:focus {
  border-color: var(--c-primary);
  box-shadow: 0 0 0 3px rgba(37,99,235,.12);
}
.dataTables_wrapper .dataTables_length select {
  border: 1px solid var(--c-border);
  border-radius: var(--r-md);
  padding: var(--s1) var(--s2);
  font-size: var(--fs-sm);
}
.dataTables_wrapper .dataTables_paginate .paginate_button {
  border-radius: var(--r-sm) !important;
  font-size: var(--fs-sm) !important;
}
.dataTables_wrapper .dataTables_paginate .paginate_button.current,
.dataTables_wrapper .dataTables_paginate .paginate_button.current:hover {
  background: var(--c-primary) !important;
  border-color: var(--c-primary) !important;
  color: white !important;
}

/* ─── Responsive ─────────────────────────────────────────── */
@media (max-width: 768px) {
  .form-container {
    margin: var(--s3);
    padding: var(--s4);
    border-radius: var(--r-lg);
  }
  .form-row { grid-template-columns: 1fr; }
  .page-header { flex-direction: column; align-items: flex-start; }
  .toolbar { gap: var(--s2); }
  .filter-form { flex-direction: column; }
  .filter-group { min-width: 0; width: 100%; }
  .filter-actions { width: 100%; }
  .filter-actions .btn { flex: 1; justify-content: center; }
  th, td { padding: var(--s2) var(--s2); font-size: var(--fs-xs); }
  .popup { width: 95%; }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); }
  .inline-form { flex-direction: column; }
  .inline-form select { width: 100%; }
}

@media (max-width: 480px) {
  .form-container { margin: var(--s2); padding: var(--s3); }
  .dashboard-grid { grid-template-columns: repeat(2, 1fr); gap: var(--s3); }
  .btn span.btn-label { display: none; }
}