/* ============================================================
   SISTEMA PRENOTAZIONI — Design System Completo
   app-responsive.css?v=2.4  |  Admin + Frontend
   ============================================================ */

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

/* ── RESET GLOBALE RESPONSIVE ── */
*, *::before, *::after {
  box-sizing: border-box !important;
}
html {
  overflow-x: hidden;
}
body {
  overflow-x: hidden;
  max-width: 100vw;
}


/* ── Variabili globali ──────────────────────────── */
:root {
  --brand:          #0f4c81;
  --brand-dark:     #093560;
  --brand-mid:      #1a6abf;
  --brand-light:    #e8f2fb;
  --accent:         #e8a020;
  --success:        #18794e;
  --success-bg:     #d1fae5;
  --warning:        #b45309;
  --warning-bg:     #fef3c7;
  --danger:         #c0392b;
  --danger-bg:      #fee2e2;
  --info:           #0369a1;
  --info-bg:        #e0f2fe;
  --surface:        #ffffff;
  --surface-2:      #f7f9fc;
  --surface-3:      #eef2f7;
  --border:         #dde3ec;
  --border-strong:  #c4cdd9;
  --text-primary:   #0f1923;
  --text-secondary: #4a5568;
  --text-muted:     #718096;
  --radius-sm:      6px;
  --radius:         10px;
  --radius-lg:      16px;
  --radius-xl:      24px;
  --shadow-xs:      0 1px 2px rgba(0,0,0,.06);
  --shadow-sm:      0 2px 8px rgba(0,0,0,.07), 0 1px 3px rgba(0,0,0,.05);
  --shadow:         0 6px 20px rgba(0,0,0,.09), 0 2px 8px rgba(0,0,0,.06);
  --shadow-lg:      0 16px 40px rgba(0,0,0,.12), 0 6px 16px rgba(0,0,0,.07);
  --transition:     all .2s cubic-bezier(.4,0,.2,1);
  --font:           'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono:      'JetBrains Mono', 'Courier New', monospace;
}

*, *::before, *::after { box-sizing: border-box; }

/* ── BODY ───────────────────────────────────────── */
body.app-ui {
  font-family: var(--font);
  font-size: 14px;
  line-height: 1.6;
  color: var(--text-primary);
  background-color: #edf1f7;
  background-image:
    radial-gradient(circle at 0% 0%, rgba(15,76,129,.08) 0%, transparent 50%),
    radial-gradient(circle at 100% 100%, rgba(26,106,191,.06) 0%, transparent 50%);
  min-height: 100vh;
  animation: pageIn .3s ease both;
}
@keyframes pageIn {
  from { opacity:0; transform:translateY(6px); }
  to   { opacity:1; transform:translateY(0); }
}

/* ── TYPOGRAPHY ─────────────────────────────────── */
body.app-ui h1 {
  font-size: 1.6rem; font-weight: 800;
  color: var(--text-primary); letter-spacing: -.03em;
  margin-bottom: 1.5rem; padding-bottom: .9rem;
  position: relative;
}
body.app-ui h1::after {
  content:''; position:absolute; bottom:0; left:0;
  width:48px; height:3px;
  background:linear-gradient(90deg,var(--brand),var(--brand-mid));
  border-radius:99px;
}
body.app-ui h1.text-center::after { left:50%; transform:translateX(-50%); }
body.app-ui h2 {
  font-size:1.05rem; font-weight:700;
  color:var(--text-primary); letter-spacing:-.01em; margin-bottom:.85rem;
}
body.app-ui b, body.app-ui strong { font-weight:700; }

/* ── CONTAINERS ─────────────────────────────────── */
body.app-ui .container-fluid { padding-left:1.25rem; padding-right:1.25rem; }

/* ============================================================
   ADMIN NAVBAR — Barra menu in index.php admin
   overflow:visible su tutti i contenitori per i dropdown
   ============================================================ */
body.app-ui .container.mt-4 > .row {
  background: linear-gradient(135deg, var(--brand) 0%, var(--brand-mid) 100%);
  border-radius: var(--radius-lg);
  padding: 14px 16px;
  margin: 0 0 1.5rem;
  box-shadow: var(--shadow-lg);
  gap: 10px;
  overflow: visible !important;
}
body.app-ui .container.mt-4 > .row > [class*="col-"] {
  padding: 0;
  flex: 1 1 0;
  min-width: 0;
  overflow: visible !important;
}

/* btn-frame: solo styling visivo, niente overflow nascosto */
body.app-ui .btn-frame {
  border: none !important;
  border-radius: var(--radius) !important;
  padding: 0 !important;
  margin-bottom: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  position: relative;
  overflow: visible !important;
}

/* Bottone toggle nella navbar */
body.app-ui .btn-frame .btn.dropdown-toggle,
body.app-ui .btn-frame .btn-primary.dropdown-toggle,
body.app-ui .btn-frame .btn.btn-custom.dropdown-toggle {
  background: rgba(255,255,255,.15) !important;
  border: 1px solid rgba(255,255,255,.3) !important;
  color: #fff !important;
  font-weight: 700; font-size: 13.5px;
  height: 44px !important; width: 100%;
  border-radius: var(--radius) !important;
  transition: var(--transition);
  box-shadow: none !important;
}
body.app-ui .btn-frame .btn.dropdown-toggle:hover,
body.app-ui .btn-frame .btn.dropdown-toggle[aria-expanded="true"] {
  background: rgba(255,255,255,.3) !important;
  border-color: rgba(255,255,255,.6) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(0,0,0,.25) !important;
}

/* Logoff nella navbar */
body.app-ui .btn-frame > .btn-danger,
body.app-ui .btn-frame > button.btn-danger {
  background: rgba(185,28,28,.75) !important;
  border: 1px solid rgba(185,28,28,.4) !important;
  color: #fff !important; font-weight: 700;
  height: 44px !important; width: 100%;
  border-radius: var(--radius) !important;
  transition: var(--transition);
}
body.app-ui .btn-frame > .btn-danger:hover {
  background: rgba(153,27,27,.9) !important;
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(153,27,27,.45) !important;
}

/* ── DROPDOWN MENU — FIX PRINCIPALE ──────────────
   Posizionamento assoluto, z-index alto,
   nessun clip sul genitore
   ─────────────────────────────────────────────── */
body.app-ui .dropdown {
  position: relative !important;
  overflow: visible !important;
}
body.app-ui .dropdown-menu {
  position: absolute !important;
  top: calc(100% + 6px) !important;
  left: 0 !important;
  z-index: 99999 !important;
  display: none !important;
  min-width: 270px;
  max-height: 80vh;
  overflow-y: auto;
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  padding: 8px !important;
}
body.app-ui .dropdown-menu.show {
  display: block !important;
  animation: dropIn .18s cubic-bezier(.4,0,.2,1) both;
}
@keyframes dropIn {
  from { opacity:0; transform:translateY(-8px) scale(.97); }
  to   { opacity:1; transform:translateY(0)    scale(1); }
}
body.app-ui .dropdown-item {
  display: block !important;
  border-radius: var(--radius-sm) !important;
  padding: 8px 12px !important;
  font-size: 13px; font-weight: 500;
  color: var(--text-secondary) !important;
  transition: var(--transition);
  line-height: 1.4; white-space: normal; margin-bottom: 1px;
}
body.app-ui .dropdown-item:hover,
body.app-ui .dropdown-item:focus {
  background: var(--brand-light) !important;
  color: var(--brand) !important;
  padding-left: 16px !important;
}
body.app-ui .dropdown-divider {
  border-color: var(--border) !important;
  margin: 5px 4px !important;
}

/* ── BUTTONS generali ───────────────────────────── */
body.app-ui .btn {
  font-family: var(--font); font-size: 13.5px; font-weight: 600;
  border-radius: var(--radius) !important;
  padding: 8px 18px; transition: var(--transition);
  border: 1.5px solid transparent; cursor: pointer;
}
body.app-ui .btn:active { transform:translateY(1px) scale(.99); }

body.app-ui .btn-primary {
  background: linear-gradient(135deg,var(--brand-mid),var(--brand));
  border-color: var(--brand-dark); color: #fff;
  box-shadow: 0 2px 8px rgba(15,76,129,.3);
}
body.app-ui .btn-primary:hover {
  background: linear-gradient(135deg,var(--brand),var(--brand-dark));
  box-shadow: 0 6px 20px rgba(15,76,129,.4);
  transform: translateY(-1px); color: #fff;
}

body.app-ui .btn-secondary {
  background:var(--surface); border-color:var(--border-strong);
  color:var(--text-secondary); box-shadow:var(--shadow-xs);
}
body.app-ui .btn-secondary:hover {
  background:var(--surface-3); border-color:var(--brand); color:var(--brand);
}

body.app-ui .btn-danger {
  background: linear-gradient(135deg,#e53e3e,#c0392b);
  border-color: #a93226; color: #fff;
  box-shadow: 0 2px 8px rgba(192,57,43,.3);
}
body.app-ui .btn-danger:hover {
  background: linear-gradient(135deg,#c0392b,#962d22);
  box-shadow: 0 6px 20px rgba(192,57,43,.4);
  transform: translateY(-1px); color: #fff;
}

body.app-ui .btn-success {
  background: linear-gradient(135deg,#27ae60,#1e8449);
  border-color:#1a7a42; color:#fff;
  box-shadow:0 2px 8px rgba(30,132,73,.3);
}
body.app-ui .btn-success:hover {
  background: linear-gradient(135deg,#1e8449,#155d34);
  box-shadow:0 6px 20px rgba(30,132,73,.4);
  transform:translateY(-1px); color:#fff;
}

body.app-ui .btn-warning {
  background: linear-gradient(135deg,#f39c12,#d68910);
  border-color:#b7770d; color:#fff;
}
body.app-ui .btn-warning:hover { transform:translateY(-1px); color:#fff; }

body.app-ui .btn-outline-primary {
  background:transparent; border-color:var(--brand-mid); color:var(--brand-mid);
}
body.app-ui .btn-outline-primary:hover {
  background:var(--brand-light); color:var(--brand); border-color:var(--brand);
}

body.app-ui .btn-outline-secondary {
  background:transparent; border-color:var(--border-strong); color:var(--text-secondary);
}
body.app-ui .btn-outline-secondary:hover {
  background:var(--surface-3); color:var(--text-primary);
}

body.app-ui .btn-sm  { padding:5px 12px; font-size:12px; }
body.app-ui .btn-block, body.app-ui .w-100 { width:100%; display:block; }
body.app-ui .btn-custom { height:44px !important; }

body.app-ui .back-button,
body.app-ui a.btn.back-button { color:#fff !important; text-decoration:none; }

/* Bottone verde custom (stile inline) */
body.app-ui [style*="#164916"] {
  background: linear-gradient(135deg,#27ae60,#1a7a42) !important;
  border-color: #155d34 !important; color:#fff !important;
  box-shadow: 0 4px 14px rgba(30,132,73,.4) !important;
  border-radius: var(--radius) !important;
}
body.app-ui [style*="#164916"]:hover {
  background: linear-gradient(135deg,#1e8449,#145a30) !important;
  transform: translateY(-1px);
  box-shadow: 0 8px 20px rgba(30,132,73,.5) !important;
}

/* ── FORMS ──────────────────────────────────────── */
body.app-ui .form-control,
body.app-ui .form-select,
body.app-ui select,
body.app-ui input[type="text"],
body.app-ui input[type="email"],
body.app-ui input[type="number"],
body.app-ui input[type="password"],
body.app-ui textarea {
  font-family: var(--font); font-size: 13.5px;
  color: var(--text-primary); background: var(--surface);
  border: 1.5px solid var(--border);
  border-radius: var(--radius) !important;
  padding: 8px 12px; transition: border-color .15s, box-shadow .15s;
}
body.app-ui .form-control:focus,
body.app-ui input[type="text"]:focus,
body.app-ui input[type="email"]:focus,
body.app-ui input[type="number"]:focus,
body.app-ui input[type="password"]:focus,
body.app-ui select:focus, body.app-ui textarea:focus {
  border-color: var(--brand-mid);
  box-shadow: 0 0 0 3px rgba(26,106,191,.15);
  outline: none;
}

body.app-ui label, body.app-ui .form-label {
  font-weight: 600; font-size: 12.5px;
  color: var(--text-secondary); margin-bottom: 5px;
  letter-spacing: .01em; text-transform: uppercase;
}
body.app-ui .form-check-label { font-size:13.5px; text-transform:none; font-weight:500; color:var(--text-primary); }
body.app-ui input[type="checkbox"],
body.app-ui .form-check-input {
  width:17px; height:17px; accent-color:var(--brand);
  cursor:pointer; border-radius:4px;
}

/* ── CARDS ──────────────────────────────────────── */
body.app-ui .card {
  background:var(--surface);
  border:1px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  box-shadow:var(--shadow-sm);
}
body.app-ui .card-header {
  background:linear-gradient(135deg,var(--brand),var(--brand-mid));
  color:#fff;
  border-radius:var(--radius-lg) var(--radius-lg) 0 0 !important;
  padding:1.25rem 1.5rem; border-bottom:none;
}
body.app-ui .card-header h4,
body.app-ui .card-header h1 { color:#fff; font-weight:700; margin:0; }
body.app-ui .card-header h4::after,
body.app-ui .card-header h1::after { display:none; }
body.app-ui .card-body { padding:1.5rem; }
body.app-ui .card.p-3, body.app-ui form.card { padding:1.25rem !important; }
body.app-ui .shadow-sm { box-shadow:var(--shadow-sm) !important; }

/* ── TABLES ─────────────────────────────────────── */
body.app-ui .table-responsive {
  border-radius:var(--radius-lg); border:1px solid var(--border);
  box-shadow:var(--shadow-sm); overflow-x:auto; background:var(--surface);
}
body.app-ui .table-responsive table { box-shadow:none; border-radius:0; border:none; }

body.app-ui table {
  width:100%; border-collapse:collapse; font-size:13px;
  background:var(--surface); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--shadow-sm);
}
body.app-ui table thead tr {
  background:linear-gradient(135deg,var(--brand),var(--brand-mid));
}
body.app-ui table th {
  color:rgba(255,255,255,.9); font-weight:700;
  font-size:11px; letter-spacing:.07em; text-transform:uppercase;
  padding:11px 14px; border:none; white-space:nowrap;
}
body.app-ui .thead-light th, body.app-ui .table-light th {
  background:var(--surface-3) !important;
  color:var(--text-secondary) !important;
  border-bottom:2px solid var(--border) !important;
}
body.app-ui table td {
  padding:10px 14px;
  border-bottom:1px solid var(--surface-3);
  border-right:none; border-left:none; border-top:none;
  vertical-align:middle;
}
body.app-ui table tbody tr:last-child td { border-bottom:none; }
body.app-ui table tbody tr:nth-child(odd)  { background:#fafbfd; }
body.app-ui table tbody tr:nth-child(even) { background:var(--surface); }
body.app-ui table tbody tr:hover { background:var(--brand-light) !important; }

body.app-ui table td:nth-child(7),
body.app-ui input[name^="targa"],
body.app-ui input[name="targa"] { font-family:var(--font-mono); font-size:12px; letter-spacing:.04em; }

body.app-ui td[data-stato="0"] { background:var(--danger-bg) !important; color:var(--danger); font-weight:700; }
body.app-ui td[data-stato="1"] { background:var(--success-bg) !important; color:var(--success); font-weight:700; }
body.app-ui td[data-stato="2"] { background:var(--warning-bg) !important; color:var(--warning); font-weight:700; }
body.app-ui td[data-stato="3"] { background:var(--info-bg) !important; color:var(--info); font-weight:700; }

/* ── ALERTS ─────────────────────────────────────── */
body.app-ui .alert {
  border-radius:var(--radius); border:none;
  font-size:13.5px; font-weight:600;
  padding:12px 18px; border-left:4px solid;
}
body.app-ui .alert-success { background:var(--success-bg); border-color:var(--success); color:var(--success); }
body.app-ui .alert-danger  { background:var(--danger-bg);  border-color:var(--danger);  color:var(--danger); }
body.app-ui .alert-warning { background:var(--warning-bg); border-color:var(--warning); color:var(--warning); }
body.app-ui .alert-info    { background:var(--info-bg);    border-color:var(--info);    color:var(--info); }

/* ── HEADER pagine interne admin ────────────────── */
body.app-ui .container-fluid > h1:first-of-type,
body.app-ui .container-fluid > div > h1:first-of-type,
body.app-ui .container-fluid > .container > h1:first-of-type {
  background: linear-gradient(135deg,var(--brand),var(--brand-mid));
  color:#fff !important; padding:1rem 1.5rem;
  border-radius:var(--radius-lg); margin-bottom:1.5rem;
  box-shadow:var(--shadow);
}
body.app-ui .container-fluid > h1:first-of-type::after,
body.app-ui .container-fluid > div > h1:first-of-type::after,
body.app-ui .container-fluid > .container > h1:first-of-type::after { display:none; }

/* ── CRUSCOTTO KPI ──────────────────────────────── */
body.app-ui .container-kpi {
  display:flex; flex-wrap:wrap; gap:1.25rem;
}
body.app-ui .table-container {
  flex:1 1 calc(50% - .625rem); min-width:280px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem;
  box-shadow:var(--shadow-sm); transition:var(--transition);
}
body.app-ui .table-container:hover { box-shadow:var(--shadow); transform:translateY(-2px); }
body.app-ui .table-container h2 {
  font-size:.88rem; text-transform:uppercase; letter-spacing:.05em;
  color:var(--brand); border-bottom:2px solid var(--brand-light);
  padding-bottom:.6rem; margin-bottom:1rem;
}
body.app-ui .chart-container {
  flex:1 1 calc(50% - .625rem); min-width:280px;
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:1.25rem;
  box-shadow:var(--shadow-sm); height:380px !important;
}
body.app-ui .chart-container h2 {
  font-size:.88rem; font-weight:700; text-transform:uppercase;
  letter-spacing:.05em; color:var(--brand);
  border-bottom:2px solid var(--brand-light);
  padding-bottom:.5rem; margin-bottom:.75rem;
}

/* ── LOGIN ──────────────────────────────────────── */
body.app-ui .login-card {
  border:none !important;
  border-radius:var(--radius-xl) !important;
  box-shadow:var(--shadow-lg) !important; overflow:hidden;
}
body.app-ui .login-card .card-body { padding:2.5rem !important; }

/* ── CAMPO AGGIUNTIVO prenotazione pubblica ─────── */
body.app-ui .campo {
  background:var(--surface-2) !important;
  border:1.5px solid var(--border) !important;
  border-radius:var(--radius-lg) !important;
  padding:1.25rem !important; margin-top:1rem !important;
  position:relative;
}
body.app-ui .campo::before {
  content:''; position:absolute; top:0; left:0;
  width:4px; height:100%;
  background:linear-gradient(180deg,var(--brand),var(--brand-mid));
  border-radius:4px 0 0 4px;
}

/* ── STATO PRENOTAZIONE — verifica pubblica ─────── */
body.app-ui .content {
  background:var(--surface) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--radius-xl) !important;
  padding:2rem !important; margin:1.5rem auto !important;
  box-shadow:var(--shadow-lg) !important;
}

/* anomalie */
body.app-ui font[color="red"] { color:var(--danger) !important; font-weight:700; }
body.app-ui font[color="green"] { color:var(--success) !important; font-weight:700; }
body.app-ui font[color="orange"] { color:var(--warning) !important; font-weight:700; }
body.app-ui font[color="blue"] { color:var(--info) !important; font-weight:700; }

/* ── SCROLLBAR ──────────────────────────────────── */
::-webkit-scrollbar { width:6px; height:6px; }
::-webkit-scrollbar-track { background:var(--surface-3); border-radius:99px; }
::-webkit-scrollbar-thumb { background:var(--border-strong); border-radius:99px; }
::-webkit-scrollbar-thumb:hover { background:var(--brand-mid); }

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width:991px) {
  body.app-ui .container.mt-4 > .row { flex-wrap:wrap; gap:8px; padding:10px; overflow:visible !important; }
  body.app-ui .container.mt-4 > .row > [class*="col-"] { flex:1 1 calc(50% - 4px); min-width:calc(50% - 4px); }
}
@media (max-width:576px) {
  body.app-ui h1 { font-size:1.2rem; }
  body.app-ui .container-fluid { padding-left:.75rem; padding-right:.75rem; }
  body.app-ui .container.mt-4 > .row > [class*="col-"] { flex:1 1 100%; min-width:100%; }
  body.app-ui .btn { padding:9px 14px; font-size:13.5px; }
  body.app-ui table { font-size:12px; }
  body.app-ui table th, body.app-ui table td { padding:8px 9px; }
  body.app-ui .table-container, body.app-ui .chart-container { flex:1 1 100%; min-width:100%; }
  body.app-ui .login-card .card-body { padding:1.75rem !important; }
  body.app-ui .campo { padding:1rem !important; }
}

/* ── PRINT ──────────────────────────────────────── */
@media print {
  body.app-ui { background:#fff !important; background-image:none !important; }
  body.app-ui table { box-shadow:none; border:1px solid #ccc; }
  body.app-ui table thead tr { background:#e5e7eb !important; -webkit-print-color-adjust:exact; print-color-adjust:exact; }
  body.app-ui table th { color:#333 !important; }
}