/* =========================================================

   Reset & base

========================================================= */

* { box-sizing: border-box; }



html, body { height: 100%; }



body {

  min-height: 100vh;

  margin: 0;

  padding: 0;

  font-family: system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Arial, sans-serif;

  color: #333;

  background: #f3f3f3;

}



a { color: #0066cc; text-decoration: none; }

a:hover { text-decoration: underline; }



/* Mobile moderno: viewport dinamico corretto */

@supports (height: 100dvh) {

  body { min-height: 100dvh; }

}



/* =========================================================

   Layout

========================================================= */

.container {

  max-width: 900px;

  margin: 20px auto;

  padding: 10px;

}



/* lascia spazio per la bottom bar */

main {

  padding-bottom: 96px;

  min-height: calc(100vh - 140px);

}



/* Mobile moderno: main con viewport dinamico */

@supports (height: 100dvh) {

  main { min-height: calc(100dvh - 140px); }

}



/* =========================================================

   Cards

========================================================= */

.card {

  background: #fff;

  padding: 20px;

  border-radius: 12px;

  margin-bottom: 20px;

  border: 1px solid #ddd;

}



.card form {

  max-width: 400px;

  margin: 0 auto;

}



/* =========================================================

   Buttons

========================================================= */

.btn {

  display: inline-block;

  padding: 8px 16px;

  border-radius: 10px;

  background: #e0e0e0;

  color: #333;

  border: 1px solid #ccc;

  cursor: pointer;

  margin-right: 6px;

}



.btn:hover { background: #d4d4d4; }



.btn.primary {

  background: #111827;

  color: #fff;

  border: 1px solid #111827;

}

.btn.primary:hover { filter: brightness(0.9); }



.btn.danger {

  background: #e53935;

  color: #fff;

  border: 1px solid #c62828;

}

.btn.danger:hover { background: #c62828; }



/* =========================================================

   Forms

========================================================= */

input[type="text"],

input[type="email"],

input[type="password"],

input[type="number"],

select,

textarea {

  width: 100%;

  padding: 10px;

  margin-top: 6px;

  margin-bottom: 14px;

  border-radius: 10px;

  border: 1px solid #ccc;

  font-size: 16px;

}



/* =========================================================

   Flash messages

========================================================= */

.flash_error {

  background: #ffe3e3;

  border: 1px solid #ff9c9c;

  padding: 10px;

  margin-bottom: 15px;

  border-radius: 10px;

}



.flash_info {

  background: #e8f3ff;

  border: 1px solid #9cc7ff;

  padding: 10px;

  margin-bottom: 15px;

  border-radius: 10px;

}



/* =========================================================

   Header / Footer

========================================================= */

header {

  background: #fff;

  padding: 15px;

  border-bottom: 1px solid #ddd;

}



header h1 {

  margin: 0;

  font-size: 24px;

}



header nav a {

  margin-right: 12px;

  font-weight: 600;

  color: #333;

}



footer {

  text-align: center;

  padding: 20px;

  color: #777;

  margin-top: 40px;

}



/* =========================================================

   Table

========================================================= */

table {

  width: 100%;

  border-collapse: collapse;

  margin-top: 15px;

}



table th, table td {

  border: 1px solid #ccc;

  padding: 8px;

}



table th { background: #f5f5f5; }



/* =========================================================

   Utility

========================================================= */

.mt-1 { margin-top: 5px; }

.mt-2 { margin-top: 10px; }

.mt-3 { margin-top: 15px; }

.text-center { text-align: center; }

.text-right  { text-align: right; }



/* =========================================================

   Badge (generico)

========================================================= */

.badge {

  display: inline-flex;

  align-items: center;

  justify-content: center;

  min-width: 18px;

  height: 18px;

  padding: 0 6px;

  border-radius: 999px;

  font-size: 12px;

  margin-left: 6px;

  background: #e74c3c;

  color: #fff;

}



/* =========================================================

   App-like header + settings menu

========================================================= */

.app-header {

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 12px;

}



.app-header .title {

  display: flex;

  align-items: center;

  gap: 12px;

}



.app-header h1 {

  font-size: 1.25rem;

  margin: 0;

}



.settings { position: relative; }



.settings-btn {

  width: 40px;

  height: 40px;

  border-radius: 12px;

  border: 1px solid #e5e7eb;

  background: #fff;

  cursor: pointer;

  font-size: 18px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

}



.settings-menu {

  position: absolute;

  right: 0;

  top: calc(100% + 8px);

  min-width: 220px;

  background: #fff;

  border-radius: 14px;

  border: 1px solid #e5e7eb;

  box-shadow: 0 10px 30px rgba(0,0,0,.15);

  padding: 12px;

  display: none;

  z-index: 10000;

}



.settings-menu.open { display: block; }



.settings-menu .user {

  font-size: .9rem;

  margin-bottom: 10px;

}



.settings-menu .user strong { display: block; }



.settings-menu hr {

  border: none;

  border-top: 1px solid #eee;

  margin: 10px 0;

}



.settings-menu a {

  display: block;

  padding: 8px 10px;

  border-radius: 10px;

  text-decoration: none;

  color: #111827;

}

.settings-menu a:hover { background: #f3f4f6; }



.settings-menu select {

  width: 100%;

  margin-top: 6px;

}



/* =========================================================

   Bottom app bar (4 tabs) — DEFINITIVA

========================================================= */

.appbar {

  position: fixed;

  left: 0;

  right: 0;

  bottom: 0;



  /* aspetto */

  background: rgba(255,255,255,0.92);

  backdrop-filter: blur(10px);

  -webkit-backdrop-filter: blur(10px);

  border-top: 1px solid #e5e7eb;



  /* sempre sopra */

  z-index: 99999;



  /* stabilità su Android */

  transform: translateZ(0);

  will-change: transform;

}



.appbar .inner {

  max-width: 980px;

  margin: 0 auto;

  display: grid;

  grid-template-columns: repeat(4, 1fr);

  gap: 6px;

  padding: 8px 10px;

  padding-bottom: calc(8px + env(safe-area-inset-bottom));

}



.appbar a {

  position: relative;

  display: flex;

  flex-direction: column;

  align-items: center;

  gap: 3px;

  padding: 8px 6px;

  border-radius: 14px;

  text-decoration: none;

  color: #111827;

  font-size: 11px;

  line-height: 1.1;

}



.appbar a .icon {

  width: 26px;

  height: 26px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  border-radius: 13px;

  border: 1px solid #e5e7eb;

  background: #fff;

}



.appbar a span {

  display: block;

  max-width: 100%;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.appbar a.active {

  background: #111827;

  color: #fff;

}



.appbar a.active .icon {

  border-color: #111827;

  background: #111827;

  color: #fff;

}



.appbar a.disabled {

  opacity: 0.45;

  pointer-events: none;

}



/* badge sulla bottom bar */

.appbar .badge {

  position: absolute;

  top: 6px;

  right: 18px;

  min-width: 18px;

  height: 18px;

  padding: 0 6px;

  border-radius: 999px;

  display: inline-flex;

  align-items: center;

  justify-content: center;

  font-size: 11px;

  font-weight: 700;

  background: #ef4444;

  color: #fff;

  border: 2px solid rgba(255,255,255,0.92);

}



/* =========================================================

   Responsive tweaks

========================================================= */

@media (max-width: 420px) {

  .container { margin: 10px auto; }

  header h1 { font-size: 20px; }

}



/* Android/mobile: evita bug con position:fixed (solo se usi background-attachment:fixed) */

@media (hover: none) and (pointer: coarse) {

  body { background-attachment: scroll !important; }

}



/* Fix select lingua (Android/PWA) */

.settings-menu label { color: #111827; }



.settings-menu select {

  color: #111827;

  background: #fff;

  border: 1px solid #ccc;

  min-height: 40px;

  line-height: 1.2;

  -webkit-text-fill-color: #111827; /* Android/WebKit: evita testo “invisibile” */

}



.settings-menu option {

  color: #111827;

  background: #fff;

}



.settings-menu select {

  border-radius: 12px;

  padding: 10px;

}



/* Layout switch */

/* =========================================================

   Responsive helpers (DESKTOP vs MOBILE)

========================================================= */

.only-desktop { display: block; }

.only-mobile  { display: none; }



@media (max-width: 768px) {

  .only-desktop { display: none; }

  .only-mobile  { display: block; }

}



/* =========================================================

   Reservations mobile UI (lista compatta + dettaglio)

========================================================= */

.resv-list { display: flex; flex-direction: column; gap: 10px; }



.resv-item {

  background: #fff;

  border: 1px solid #e5e7eb;

  border-radius: 14px;

  overflow: hidden;

}



.resv-head {

  display: flex;

  justify-content: space-between;

  gap: 12px;

  padding: 12px 14px;

  cursor: pointer;

}



.resv-col { min-width: 0; }



.resv-date { font-size: 12px; opacity: .75; }



.resv-title {

  font-weight: 700;

  color: #111827;

  white-space: nowrap;

  overflow: hidden;

  text-overflow: ellipsis;

}



.resv-status {

  font-size: 12px;

  font-weight: 700;

  padding: 2px 10px;

  border-radius: 999px;

  border: 1px solid #d1d5db;

  background: #fff;

  white-space: nowrap;

  align-self: flex-start;

}



.resv-actions {

  margin-top: 10px;

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

}



.resv-actions {

  margin-top: 10px;

  display: flex;

  gap: 8px;

  flex-wrap: wrap;

  justify-content: flex-end;

}



.btn[disabled] {

  opacity: .5;

  cursor: not-allowed;

  pointer-events: none;

}