/* ═══════════════════════════════════════════════════════════════
   EUROPING · UI REFRESH (proposta)
   Caricato DOPO gli stili di ogni pagina: rifinisce l'aspetto senza
   cambiare struttura, categorie o funzioni. Rispetta i 4 temi.
   ═══════════════════════════════════════════════════════════════ */
:root {
  --r-sm: 10px; --r-md: 14px; --r-lg: 18px;
  --ombra-1: 0 1px 2px rgba(16,40,44,.06), 0 2px 8px rgba(16,40,44,.06);
  --ombra-2: 0 2px 4px rgba(16,40,44,.06), 0 10px 24px rgba(16,40,44,.10);
  --font-titoli: 'Poppins', 'Segoe UI', system-ui, sans-serif;
  --font-testo: 'Inter', 'Segoe UI', system-ui, -apple-system, sans-serif;
}
body { font-family: var(--font-testo); -webkit-font-smoothing: antialiased; }
h1, h2, h3, .card h3, .stat-value { font-family: var(--font-titoli); letter-spacing: -.01em; }

/* ---------- Selettore lingua: una pillola compatta ---------- */
#lang-switcher {
  background: rgba(127,127,127,.18) !important; border-radius: 999px !important;
  padding: 3px !important; gap: 2px !important; backdrop-filter: blur(8px);
  width: max-content;
}
#lang-switcher [data-lang-btn] {
  border: 0 !important; background: transparent !important; color: inherit !important; opacity: .85;
  border-radius: 999px !important; padding: 5px 10px !important; font-size: 11px !important;
  letter-spacing: .04em; min-height: 0 !important;
}
#lang-switcher [data-lang-btn][aria-pressed="true"] { background: #fff !important; color: var(--primary, #0D5C63) !important; opacity: 1; box-shadow: 0 1px 3px rgba(0,0,0,.18); }

/* ---------- Pulsanti ---------- */
button, .btn { border-radius: var(--r-sm); font-family: var(--font-testo); }
.btn-warning, .btn-success { border: 0 !important; box-shadow: var(--ombra-1); font-weight: 600 !important; }
button:focus-visible, a:focus-visible, input:focus-visible { outline: 3px solid #2E9CCA; outline-offset: 2px; }

/* ═══════════════ MENU PRINCIPALE (base.html) ═══════════════ */
body:has(#grid-cards) { justify-content: flex-start; padding: 24px 20px 40px; }
body:has(#grid-cards) .header { margin: 56px 0 28px; }
body:has(#grid-cards) .header h1 { font-size: 30px; text-shadow: none; }
body:has(#grid-cards) .logout { top: 18px; right: 76px; padding: 8px 16px; border-width: 1.5px; font-size: 13px; }
.grid#grid-cards { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)) !important; gap: 16px; max-width: 1100px; }
#grid-cards .card {
  display: none; grid-template-columns: 56px 1fr; column-gap: 16px; align-items: center;
  text-align: left; padding: 20px 22px; border-radius: var(--r-lg); box-shadow: var(--ombra-1);
  border: 1px solid var(--surface-border, rgba(0,0,0,.06));
}
#grid-cards .card.visible { display: grid; }
#grid-cards .card::before { top: 0; bottom: 0; left: 0; right: auto; width: 5px; height: auto; }
#grid-cards .card:hover { transform: translateY(-2px); box-shadow: var(--ombra-2); }
#grid-cards .card .icon, #grid-cards .card > div:first-child:not(h3):not(p) {
  grid-row: span 2; font-size: 30px; width: 56px; height: 56px; margin: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-2, #f2f6f5); border-radius: var(--r-md);
}
#grid-cards .card h3 { margin: 0 0 2px; font-size: 16px; letter-spacing: .02em; }
#grid-cards .card p { margin: 0; font-size: 13px; }
@media (max-width: 600px) {
  body:has(#grid-cards) .header { margin-top: 64px; }
  .grid#grid-cards { grid-template-columns: 1fr 1fr !important; gap: 10px; }
  #grid-cards .card { grid-template-columns: 1fr; text-align: center; padding: 16px 10px; row-gap: 8px; }
  #grid-cards .card .icon, #grid-cards .card > div:first-child:not(h3):not(p) { grid-row: auto; margin: 0 auto; width: 48px; height: 48px; font-size: 26px; }
  #grid-cards .card h3 { font-size: 13px; }
  #grid-cards .card p { font-size: 11px; line-height: 1.3; }
}

/* ═══════════════ LOGIN (index.html) ═══════════════ */
body:has(#login-form) h1 { letter-spacing: -.02em; }
body:has(#login-form) input { border-radius: var(--r-md) !important; }
body:has(#login-form) #btn-login { border-radius: var(--r-md) !important; letter-spacing: .06em; }

/* ═══════════════ APP OPERATORI (pulizie / manutenzione) ═══════════════ */
/* header non più "fixed": non copre più i contatori sotto */
body:has(.ui-app-header) { padding-top: 0 !important; }
body:has(.ui-app-header) .header {
  position: sticky !important; top: 0; margin: 0 -20px 16px; border-radius: 0 0 var(--r-lg) var(--r-lg);
  padding: 14px 16px !important;
}
.header h1 { font-size: 20px !important; line-height: 1.25; margin: 6px 0 2px; }
.header p { opacity: .8; font-size: 12px !important; }
.header #lang-switcher { margin-bottom: 4px; }

.stats-grid { gap: 10px !important; }
.stat-card {
  border-top: 0 !important; border-radius: var(--r-md) !important; box-shadow: var(--ombra-1) !important;
  padding: 12px 8px !important;
}
.stat-card .stat-value, .stat-card .number, .stat-card .value { font-size: 26px !important; margin-bottom: 2px; }
.stat-card .stat-label, .stat-card .label { font-size: 10.5px !important; letter-spacing: .06em; }

.card { border-radius: var(--r-lg) !important; box-shadow: var(--ombra-1) !important; }
.ticket-card, .task-card {
  border-radius: var(--r-md) !important; box-shadow: var(--ombra-1); border: 1px solid rgba(0,0,0,.05);
  border-left-width: 5px !important; padding: 16px !important;
}
.ticket-card:hover { transform: none; box-shadow: var(--ombra-2); }
.ticket-card h3, .task-card h3 { font-size: 17px !important; }
.badge { padding: 4px 10px !important; font-size: 11px !important; letter-spacing: .04em; }

/* filtri: una riga scorrevole invece di andare a capo */
.filter-tabs, .tabs, .filters { display: flex !important; flex-wrap: nowrap !important; gap: 8px; overflow-x: auto; scrollbar-width: none; }
.filter-tabs > *, .tabs > *, .filters > * { flex: 0 0 auto; }
.tab { padding: 8px 16px !important; font-size: 14px !important; border-radius: 999px !important; min-height: 38px !important; }

/* pulsanti d'azione a tutta larghezza, altezza comoda per il pollice */
.ticket-card .btn-warning, .ticket-card .btn-success,
.task-card .btn-success, .task-card button[class*="btn"] { width: 100%; min-height: 48px; font-size: 15px !important; }

/* ---------- header app operatori (solo pagine con class="ui-app-header") ----------
   lingua + Home in alto, titolo sotto */
.ui-app-header { display: grid !important; grid-template-columns: 1fr auto; align-items: center; row-gap: 8px; }
.ui-app-header > #lang-switcher { grid-column: 1; grid-row: 1; margin: 0 !important; }
.ui-app-header > button {
  grid-column: 2; grid-row: 1; min-height: 36px !important; padding: 6px 14px !important;
  background: #fff !important; border: 0 !important; color: var(--primary, #0D5C63) !important;
  border-radius: 999px !important; font-size: 13px !important; font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; white-space: nowrap;
}
.ui-app-header > div:not(#lang-switcher) { grid-column: 1 / -1; grid-row: 2; }
.ui-app-header > div:not(#lang-switcher) > div:first-child,
.ui-app-header > h1 { font-family: var(--font-titoli); font-size: 20px !important; line-height: 1.25; }

/* filtri manutenzione */
.filter-bar { flex-wrap: nowrap !important; overflow-x: auto; gap: 8px !important; }
.filter-btn { padding: 7px 16px !important; font-size: 14px !important; border-width: 1.5px !important; white-space: nowrap; }
.filter-btn.active { box-shadow: none !important; }

/* rifiniture */
body:has(.ui-app-header) .header { margin: 8px 0 16px !important; border-radius: var(--r-lg) !important; top: 8px; }
.ticket-card h3 { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
#grid-cards .card .icon { white-space: nowrap; }
#card-controllo-uscita .icon { font-size: 20px !important; letter-spacing: -3px; }
.ui-app-header > h1, .ui-app-header > h2 { grid-column: 1 / -1; grid-row: 2; margin: 0 !important; font-family: var(--font-titoli); font-size: 20px !important; line-height: 1.25; }

/* Spiaggia: titolo su una riga, stesso carattere delle altre pagine */
.header-title { font-family: var(--font-titoli) !important; font-size: 17px !important; font-weight: 700 !important; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 600px) { .header-title { font-size: 14px !important; } }

/* Spiaggia e Noleggio da telefono: lingua e Home sulla prima riga, titolo sotto */
@media (max-width: 600px) {
  .ui-top-header {
    display: grid !important; grid-template-columns: 1fr auto; align-items: center;
    height: 96px !important; row-gap: 4px; padding: 6px 12px !important;
  }
  .ui-top-header > #lang-switcher { grid-column: 1; grid-row: 1; }
  .ui-top-header > div:last-child { grid-column: 2; grid-row: 1; }
  .ui-top-header > div:nth-child(2) {
    grid-column: 1 / -1; grid-row: 2; text-align: center;
    font-family: var(--font-titoli); font-size: 13px !important; line-height: 1.2;
  }
  .ui-top-header .logo-img { height: 36px; }
  body:has(.ui-top-header) { padding-top: 106px !important; }
  body:has(.ui-top-header) .top-nav { top: 96px !important; }
}

/* intestazione app con gruppo azioni (nome utente + Home) a destra */
.ui-app-header > div:not(#lang-switcher):has(> button) { grid-column: 2; grid-row: 1; display: flex; align-items: center; gap: 8px; }
.ui-app-header > div:not(#lang-switcher):has(> button) > button {
  min-height: 36px !important; padding: 6px 14px !important; border: 0 !important; border-radius: 999px !important;
  background: #fff !important; color: var(--primary, #0D5C63) !important; font-size: 13px !important; font-weight: 700 !important;
  box-shadow: 0 1px 4px rgba(0,0,0,.2) !important; white-space: nowrap;
}
@media (max-width: 600px) { .ui-app-header #tecnico-nome { display: none; } }

/* Barra lingue "flottante" (menu, login, pagina cliente, sincronizza):
   stessa pillola delle altre pagine, leggibile su sfondo chiaro e scuro */
#lang-switcher:not([data-mode="inline"]) {
  background: rgba(10, 45, 50, .55) !important; top: 16px !important; left: 16px !important;
}
#lang-switcher:not([data-mode="inline"]) [data-lang-btn] { color: #fff !important; }
#lang-switcher:not([data-mode="inline"]) [data-lang-btn][aria-pressed="true"] { color: var(--primary, #0D5C63) !important; }