/* ===== RESET & BASE ===== */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --primary:#1b6b3a;
  --primary-light:#27ae60;
  --primary-dark:#145530;
  --accent:#f39c12;
  --accent-light:#f9e6c0;
  --danger:#e74c3c;
  --danger-light:#fdecea;
  --surface:#ffffff;
  --bg:#f0f2f5;
  --bg-alt:#e8ecf0;
  --text:#1a1a2e;
  --text-muted:#6b7280;
  --border:#dce1e8;
  --shadow-sm:0 1px 3px rgba(0,0,0,.06);
  --shadow:0 2px 8px rgba(0,0,0,.08);
  --shadow-lg:0 8px 30px rgba(0,0,0,.12);
  --radius:10px;
  --radius-lg:16px;
  --transition:all .2s ease;
}
html{overflow-x:hidden;width:100%}
body{
  font-family:'Segoe UI',system-ui,-apple-system,sans-serif;
  background:var(--bg);
  color:var(--text);
  line-height:1.6;
  min-height:100vh;
  overflow-x:hidden;
  width:100%;
}
a{color:var(--primary);text-decoration:none;font-weight:500}
a:hover{text-decoration:underline}

/* ===== LAYOUT ===== */
.page-wrapper{
  max-width:1400px;
  margin:0 auto;
  padding:0 20px 40px;
}

/* ===== HEADER ===== */
.site-header{
  background:var(--primary-dark);
  color:#fff;
  padding:20px 24px;
  padding-top:calc(20px + env(safe-area-inset-top,0px));
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  box-shadow:0 4px 20px rgba(27,107,58,.25);
  position:sticky;top:0;z-index:10;
}
.site-header.admin-header{
  background:linear-gradient(135deg,#ff0000 0%,#c51c1c 50%,#330b0b 100%);
  box-shadow:0 4px 20px rgba(197,28,28,.25);
}
.site-header .logo{
  height:56px;width:auto;
  object-fit:contain;
  flex-shrink:0;
}
.site-header h1{
  font-size:clamp(1.1rem,2.5vw,1.6rem);
  font-weight:700;
  letter-spacing:-.3px;
  flex:1;
}
.header-actions{display:flex;gap:8px;align-items:center}
.header-actions a:not(.btn-logout){
  color:rgba(255,255,255,.85);
  font-size:.85rem;
  padding:6px 14px;
  border-radius:8px;
  background:rgba(255,255,255,.08);
  transition:var(--transition);
}
.header-actions a:not(.btn-logout):hover{
  background:rgba(255,255,255,.18);
  color:#fff;
  text-decoration:none;
}
.header-actions .btn-logout{
  background:#e74c3c;
  color:#fff;
  font-size:.85rem;
  font-weight:600;
  padding:6px 14px;
  border-radius:8px;
  transition:var(--transition);
  text-decoration:none;
}
.header-actions .btn-logout:hover{
  background:#c0392b;
  text-decoration:none;
}

/* ===== TOOLBAR ===== */
.toolbar{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 20px;
  margin-top:20px;
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  box-shadow:var(--shadow-sm);
}
.toolbar h2{
  font-size:1.05rem;
  font-weight:600;
  color:var(--text);
  margin:0;
  flex:1;
  min-width:200px;
}

/* ===== BUTTONS ===== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:6px;
  padding:8px 18px;
  font-size:.875rem;font-weight:600;
  border:none;border-radius:8px;
  cursor:pointer;
  transition:var(--transition);
  text-decoration:none;
  line-height:1.4;
  white-space:nowrap;
}
.btn:hover{text-decoration:none;transform:translateY(-1px)}
.btn:active{transform:translateY(0)}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-dark);color:#fff}
.btn-success{background:var(--primary-light);color:#fff}
.btn-success:hover{background:var(--primary);color:#fff}
.btn-danger{background:var(--danger);color:#fff}
.btn-danger:hover{background:#c0392b;color:#fff}
.btn-ghost{background:transparent;color:var(--text-muted);border:1px solid var(--border)}
.btn-ghost:hover{background:var(--bg);color:var(--text)}
.btn-icon{
  width:36px;height:36px;padding:0;
  border-radius:8px;
  font-size:1.1rem;
}
.btn-sm{padding:5px 12px;font-size:.8rem}
.btn-lg{padding:12px 24px;font-size:1rem}

/* ===== BOOKABLE CHIPS ===== */
.bookable-info{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:16px 20px;
  margin-top:12px;
  box-shadow:var(--shadow-sm);
}
.bookable-title{
  font-weight:600;font-size:.9rem;
  display:block;margin-bottom:10px;
  color:var(--text-muted);
}
.bookable-dates{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.bookable-actions{
  display:flex;gap:6px;
  margin-left:auto;
  flex-shrink:0;
}
.bookable-chip{
  background:var(--bg);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:999px;
  padding:6px 14px;
  font-size:.85rem;
  font-weight:500;
  transition:var(--transition);
  text-decoration:none;
  cursor:pointer;
}
.bookable-chip:hover{
  background:var(--primary-light);
  color:#fff;
  border-color:var(--primary-light);
}
.bookable-chip.selected{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  font-weight:700;
}

/* ===== CARDS ===== */
.card{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
}
.card-header{
  padding:16px 20px;
  border-bottom:1px solid var(--border);
  font-weight:700;
  font-size:1rem;
  display:flex;align-items:center;gap:10px;
}
.card-body{padding:20px}

/* ===== DAY BLOCKS ===== */
.multi-wrapper{margin-top:14px;display:flex;flex-direction:column;gap:14px}
.day-block{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
}
.day-block h3{
  background:var(--bg-alt);
  padding:10px 16px;
  font-size:.95rem;
  font-weight:700;
  color:var(--primary-dark);
  border-bottom:1px solid var(--border);
  border-radius:var(--radius-lg) var(--radius-lg) 0 0;
  margin:0;
  display:flex;
  align-items:center;
  gap:14px;
  flex-wrap:nowrap;
  min-height:44px;
}

/* ===== TABLE ===== */
.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:0 0 var(--radius-lg) var(--radius-lg)}
table{
  border-collapse:collapse;
  width:100%;
  min-width:600px;
  font-size:.875rem;
}
th,td{
  border:1px solid var(--border);
  padding:7px 8px;
  text-align:center;
  vertical-align:middle;
}
th{
  background:var(--primary-dark);
  color:#fff;
  font-weight:600;
  font-size:.8rem;
  text-transform:uppercase;
  letter-spacing:.5px;
  position:sticky;top:0;z-index:2;
  border-color:rgba(255,255,255,.15);
}
.time-col{
  position:sticky;left:0;z-index:1;
  background:var(--bg-alt);
  font-weight:600;
  font-size:.8rem;
  color:var(--text-muted);
  white-space:nowrap;
  min-width:90px;
  border-right:2px solid var(--border);
}
.available{
  background:#edf7ed;
  transition:var(--transition);
  cursor:pointer;
}
.available:hover{background:#d4edda}
.booked{
  background:var(--danger-light);
  font-weight:500;
  font-size:.8rem;
}
.slotLabel{
  cursor:pointer;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:4px;
  font-size:.8rem;
  color:var(--primary);
  font-weight:500;
}
.slotCheck,.delCheck{
  width:16px;height:16px;
  accent-color:var(--primary);
  cursor:pointer;
}

/* ===== SCHEDULE TABLE (admin) ===== */
.schedule-table{min-width:auto !important;font-size:.85rem}
.schedule-table th{
  background:var(--bg-alt);
  color:var(--text);
  border-color:var(--border);
  font-size:.75rem;
  padding:8px 12px;
}
.schedule-table td{padding:8px 12px}
.schedule-table select{
  width:auto;
  padding:6px 10px;
  font-size:.82rem;
}

/* ===== CLOSED DAY ===== */
.day-block.closed-day h3{
  background:var(--danger-light);
  color:var(--danger);
}
.day-block.closed-day .day-label::after{
  content:" — CHIUSO";
  font-weight:800;
}
td.closed{
  background:#f5f5f5;
  color:var(--text-muted);
  font-style:italic;
  font-size:.78rem;
  cursor:default;
}
td.past{
  opacity:.45;
  cursor:default;
}

/* ===== CLOSED DAYS LIST (admin) ===== */
.closed-days-list{
  display:flex;flex-wrap:wrap;gap:8px;
  padding:0;margin:12px 0 0;list-style:none;
}
.closed-days-list li{
  display:inline-flex;align-items:center;gap:6px;
  background:var(--danger-light);
  color:var(--danger);
  padding:6px 10px 6px 14px;
  border-radius:999px;
  font-size:.82rem;font-weight:600;
}
.closed-days-list .remove-closed{
  background:var(--danger);color:#fff;
  border:none;border-radius:50%;
  width:20px;height:20px;
  font-size:.7rem;
  cursor:pointer;display:inline-flex;
  align-items:center;justify-content:center;
  transition:var(--transition);
}
.closed-days-list .remove-closed:hover{background:#c0392b}

/* ===== FLOATING ACTION BUTTONS ===== */
.floating-actions{
  position:fixed;
  bottom:24px;
  right:24px;
  display:flex;
  flex-direction:column;
  gap:10px;
  z-index:100;
}
#openModal{
  display:none;
  padding:14px 28px;
  font-size:1rem;
  border-radius:999px;
  box-shadow:var(--shadow-lg);
}
#openModal.cta-visible{
  display:inline-flex;
  align-items:center;justify-content:center;gap:8px;
}
#openCancel{
  display:none;
  padding:10px 20px;
  border-radius:999px;
  box-shadow:var(--shadow);
}
#openCancel.cta-visible{
  display:inline-flex;
  align-items:center;justify-content:center;gap:8px;
}

/* ===== MODALS ===== */
.modal{
  position:fixed;
  top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,.5);
  backdrop-filter:blur(4px);
  display:flex;
  align-items:center;justify-content:center;
  z-index:1000;
  padding:20px;
}
.modal form,.modal .error-box{
  background:var(--surface);
  padding:28px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  width:100%;max-width:420px;
  display:flex;flex-direction:column;gap:14px;
}
.modal .cancel-log-box{
  background:rgba(255,255,255,.97);
  padding:36px 40px;
  border-radius:20px;
  box-shadow:0 20px 60px rgba(0,0,0,.25), 0 0 0 1px rgba(0,0,0,.05);
  width:95%;max-width:900px;
  max-height:85vh;
  overflow-y:auto;
}
.cancel-log-box h2{
  font-size:1.3rem;
  font-weight:700;
  color:var(--text);
  padding-bottom:14px;
  border-bottom:2px solid var(--border);
}
.cancel-log-box .date-nav{
  background:var(--bg);
  padding:12px 16px;
  border-radius:var(--radius);
  border:1px solid var(--border);
}
.cancel-log-box table{
  margin-top:8px;
}
.cancel-log-box table tr:hover td{
  background:var(--bg);
}
.modal form span,.modal .error-box p{
  font-weight:700;
  font-size:1.1rem;
  text-align:center;
  color:var(--text);
}
.modal .btn-row{display:flex;gap:10px;margin-top:4px}
.modal .btn-row .btn{flex:1}
.error-box{text-align:center}
.error-box p{color:var(--danger) !important}

/* ===== FORMS ===== */
form{
  background:var(--surface);
  border:1px solid var(--border);
  padding:20px;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  margin-top:16px;
}
form.inline-form{
  display:inline-flex;
  align-items:center;
  gap:6px;
  background:none;
  padding:0;
  box-shadow:none;
  margin:0;
  border:none;
}
label{
  font-size:.85rem;
  font-weight:600;
  color:var(--text-muted);
}
input[type="text"],
input[type="password"],
input[type="number"],
input[type="date"],
select{
  width:100%;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:8px;
  font-size:.9rem;
  background:var(--bg);
  color:var(--text);
  transition:var(--transition);
  outline:none;
}
input:focus,select:focus{
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(27,107,58,.1);
}
form.inline-form input[type="number"]{width:60px;padding:6px 8px;font-size:.8rem}
form.inline-form input[type="password"]{width:120px;padding:6px 8px;font-size:.8rem}

/* ===== ADMIN SECTION ===== */
.admin-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  gap:20px;
  margin-top:20px;
}
.admin-section{
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-sm);
}
.admin-section h2{
  background:var(--bg-alt);
  padding:14px 20px;
  font-size:.95rem;
  font-weight:700;
  margin:0;
  border-bottom:1px solid var(--border);
  color:var(--primary-dark);
}
.admin-section h3{
  padding:14px 20px 0;
  font-size:.9rem;
  font-weight:700;
  color:var(--text);
}
.admin-section .content{padding:16px 20px}
.admin-section table{min-width:auto;font-size:.82rem}
.admin-section th{
  background:var(--bg-alt);
  color:var(--text);
  border-color:var(--border);
  font-size:.75rem;
}
.admin-section td{padding:8px 6px}
.admin-section form{border:none;box-shadow:none;padding:16px 20px;margin:0}
.admin-section ul{
  list-style:none;padding:16px 20px;margin:0;
  display:flex;flex-direction:column;gap:8px;
}
.admin-section li{
  display:flex;align-items:center;justify-content:space-between;
  padding:10px 14px;
  background:var(--bg);
  border-radius:8px;
  font-size:.9rem;
}

/* ===== PENDING BADGE ===== */
/* ===== USER FILTERS ===== */
.user-filters{
  position:sticky;
  top:0;
  z-index:5;
  background:var(--surface);
  padding:12px 20px;
  border-bottom:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:8px;
}
.user-filters input[type="text"]{
  width:100%;
  padding:10px 14px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:.9rem;
  background:var(--bg);
}
.user-filters input[type="text"]:focus{
  outline:none;
  border-color:var(--primary);
  box-shadow:0 0 0 3px rgba(27,107,58,.15);
}
.filter-row{
  display:flex;
  gap:8px;
  align-items:center;
  flex-wrap:wrap;
}
.filter-row select{
  padding:6px 10px;
  border:1px solid var(--border);
  border-radius:var(--radius);
  font-size:.82rem;
  background:var(--bg);
  flex:1;
  min-width:120px;
}
.badge{
  display:inline-flex;align-items:center;justify-content:center;
  padding:2px 10px;
  border-radius:999px;
  font-size:.75rem;font-weight:700;
}
.badge-warning{background:var(--accent-light);color:#92600a}
.badge-success{background:#d4edda;color:#155724}

/* ===== DATE NAV ===== */
.date-nav{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
  border:none;
  box-shadow:none;
  padding:0;
  margin:0;
  background:none;
}
.date-nav input[type="date"]{width:auto;padding:8px 12px}
.date-nav select{width:auto;padding:8px 12px}
.date-nav input[type="number"]{width:70px;padding:8px 12px}
.date-nav label{margin:0;white-space:nowrap}

/* ===== STATS ===== */
.stats-grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
  gap:16px;
  margin:16px 0;
}
.stat-box{
  background:linear-gradient(135deg,var(--primary),var(--primary-light));
  color:#fff;
  padding:20px 24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  text-align:center;
}
.stat-box .stat-number{font-size:2rem;font-weight:800;line-height:1.2}
.stat-box .stat-label{font-size:.9rem;font-weight:600;opacity:.95;margin-top:4px}
.stat-box .stat-sub{font-size:.75rem;opacity:.7;margin-top:2px}
.stat-box .stat-up{color:#a8ffc8}
.stat-box .stat-down{color:#ffb3b3}

/* ===== FOOTER LINKS ===== */
.page-footer{
  margin-top:24px;
  padding:16px 0;
  border-top:1px solid var(--border);
  display:flex;
  gap:16px;
  flex-wrap:wrap;
  font-size:.9rem;
}
.page-footer a{
  padding:6px 14px;
  border-radius:8px;
  background:var(--bg);
  border:1px solid var(--border);
  transition:var(--transition);
}
.page-footer a:hover{
  background:var(--primary);
  color:#fff;
  border-color:var(--primary);
  text-decoration:none;
}

/* ===== AUTH PAGE (login/register) ===== */
.auth-container{
  min-height:100vh;
  display:flex;align-items:center;justify-content:center;
  padding:20px;
  background:url('images/bg-login.jpg') center/cover no-repeat fixed;
}
.auth-container.auth-admin{
  background:linear-gradient(135deg,#d5d5d5 0%,#2d2d2d 100%) !important;
}
.auth-card{
  background:var(--surface);
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-lg);
  padding:40px;
  width:100%;max-width:400px;
  text-align:center;
}
.auth-logo{
  height:80px;width:auto;
  object-fit:contain;
  display:block;
  margin:0 auto 16px;
}
.auth-card h1{
  font-size:1.5rem;
  color:var(--primary-dark);
  margin-bottom:8px;
}
.auth-card .subtitle{
  color:var(--text-muted);
  font-size:.9rem;
  margin-bottom:24px;
}
.auth-card form{
  border:none;box-shadow:none;padding:0;margin:0;
  display:flex;flex-direction:column;gap:14px;
  text-align:left;
}
.auth-card .error-msg{
  color:var(--danger);
  font-size:.85rem;
  font-weight:600;
  text-align:center;
  padding:10px;
  background:var(--danger-light);
  border-radius:8px;
}
.auth-card .msg-success{
  color:var(--primary);
  font-size:.85rem;
  font-weight:600;
  text-align:center;
  padding:10px;
  background:#d4edda;
  border-radius:8px;
}

/* ===== SLOT SUMMARY (booking modal) ===== */
.slot-summary{
  max-height:160px;
  overflow-y:auto;
  display:flex;flex-direction:column;gap:6px;
}
.slot-summary-item{
  display:flex;align-items:center;justify-content:space-between;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:8px;
  padding:8px 12px;
  font-size:.82rem;
}
.slot-summary-left{color:var(--text);font-weight:400}
.slot-summary-left strong{font-weight:700;color:var(--primary-dark)}
.slot-summary-court{color:var(--text-muted);font-weight:400}

/* ===== TOGGLE SWITCH ===== */
.toggle-switch{
  position:relative;
  display:inline-block;
  width:48px;height:26px;
  cursor:pointer;
}
.toggle-switch input{opacity:0;width:0;height:0}
.toggle-slider{
  position:absolute;top:0;left:0;right:0;bottom:0;
  background:var(--border);
  border-radius:26px;
  transition:var(--transition);
}
.toggle-slider::before{
  content:"";
  position:absolute;
  height:20px;width:20px;
  left:3px;bottom:3px;
  background:#fff;
  border-radius:50%;
  transition:var(--transition);
  box-shadow:0 1px 3px rgba(0,0,0,.2);
}
.toggle-switch input:checked + .toggle-slider{
  background:var(--primary);
}
.toggle-switch input:checked + .toggle-slider::before{
  transform:translateX(22px);
}

/* ===== SPONSOR CAROUSEL ===== */
.sponsor-carousel{
  overflow:hidden;
  padding:16px 0;
}
.sponsor-track{
  display:flex;
  gap:40px;
  width:max-content;
  animation:sponsorScroll 20s linear infinite;
}
.sponsor-item{
  flex-shrink:0;
  display:flex;
  align-items:center;
  justify-content:center;
}
.sponsor-item img{
  height:60px;
  width:auto;
  object-fit:contain;
}
@keyframes sponsorScroll{
  0%{transform:translateX(0)}
  100%{transform:translateX(-50%)}
}

/* ===== WEATHER CAROUSEL ===== */
.weather-carousel{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  padding:10px 0 14px;
}
.weather-carousel-track{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.wc-card{
  flex-shrink:0;
  min-width:200px;
  flex:1;
  background:var(--surface);
  border:1px solid var(--border);
  border-radius:var(--radius-lg);
  padding:8px 14px;
  display:flex;
  flex-direction:row;
  align-items:center;
  gap:10px;
  box-shadow:var(--shadow-sm);
  transition:transform .2s, box-shadow .2s;
}
.wc-card:hover{
  transform:translateY(-2px);
  box-shadow:var(--shadow);
}
.wc-card .weather-anim{
  width:36px;height:36px;
  font-size:22px;
  flex-shrink:0;
}
.wc-info{
  display:flex;
  flex-direction:column;
  gap:1px;
  min-width:0;
}
.wc-day{
  font-size:.78rem;
  font-weight:700;
  color:var(--primary-dark);
  text-transform:capitalize;
}
.wc-date{
  font-size:.65rem;
  color:var(--text-muted);
}
.wc-label{
  font-size:.65rem;
  font-weight:600;
  color:var(--text);
  line-height:1.2;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.wc-right{
  margin-left:auto;
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.wc-temps{
  display:flex;
  gap:6px;
  font-size:.82rem;
  font-weight:700;
}
.wc-max{color:#e65100}
.wc-min{color:#1565c0}
.wc-extra{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:1px;
  font-size:.62rem;
  color:var(--text-muted);
}
/* ===== WEATHER WIDGET ===== */
.day-label{flex-shrink:0}
.weather-widget{
  display:flex;
  align-items:center;
  gap:10px;
  margin-left:auto;
  font-size:.82rem;
  font-weight:500;
  color:var(--text);
  background:transparent;
  border-radius:12px;
  padding:6px 14px 6px 8px;
  min-height:40px;
  transition:opacity .4s ease, transform .4s ease;
}
.weather-widget:empty{display:none}
.weather-widget.weather-loaded{
  animation:weatherFadeIn .5s ease forwards;
}
@keyframes weatherFadeIn{
  from{opacity:0;transform:translateY(-4px)}
  to{opacity:1;transform:translateY(0)}
}

/* Weather animated icon */
.weather-anim{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:36px;height:36px;
  flex-shrink:0;
  position:relative;
  border-radius:50%;
  font-size:22px;
  line-height:1;
}

/* ---- Sun (Sereno) ---- */
.weather-sunny{
  background:radial-gradient(circle, #fff4b0 0%, #ffe066 40%, #ffb300 100%);
  box-shadow:0 0 12px rgba(255,179,0,.5), 0 0 24px rgba(255,230,100,.3);
  animation:sunPulse 2.5s ease-in-out infinite;
}
.weather-sunny::before{
  content:"☀️";
  font-size:22px;
  animation:sunSpin 10s linear infinite;
}
@keyframes sunPulse{
  0%,100%{transform:scale(1);box-shadow:0 0 12px rgba(255,179,0,.5)}
  50%{transform:scale(1.08);box-shadow:0 0 22px rgba(255,200,0,.7)}
}
@keyframes sunSpin{
  from{transform:rotate(0deg)}
  to{transform:rotate(360deg)}
}

/* ---- Partly Cloudy ---- */
.weather-partly-cloudy{
  background:linear-gradient(135deg, #ffe082 0%, #90caf9 60%, #e0e0e0 100%);
  box-shadow:0 0 8px rgba(144,202,249,.3);
}
.weather-partly-cloudy::before{
  content:"⛅";
  font-size:20px;
  animation:cloudDrift 4s ease-in-out infinite;
}
.weather-partly-cloudy::after{content:none}

/* ---- Cloudy ---- */
.weather-cloudy{
  background:linear-gradient(180deg, #cfd8dc 0%, #90a4ae 100%);
  box-shadow:0 2px 8px rgba(0,0,0,.1);
  animation:cloudBreath 4s ease-in-out infinite;
}
.weather-cloudy::before{
  content:"☁️";
  font-size:20px;
  animation:cloudDrift 5s ease-in-out infinite;
}
.weather-cloudy::after{content:none}
@keyframes cloudBreath{
  0%,100%{transform:scale(1)}
  50%{transform:scale(1.05)}
}
@keyframes cloudDrift{
  0%,100%{transform:translateX(0)}
  50%{transform:translateX(3px)}
}

/* ---- Foggy ---- */
.weather-foggy{
  background:linear-gradient(180deg, #d6e0e5 0%, #aebfc8 100%);
}
.weather-foggy::before{
  content:"";
  position:absolute;
  left:5px;right:5px;top:9px;
  height:4px;
  background:rgba(255,255,255,.92);
  border-radius:4px;
  box-shadow:0 8px 0 rgba(255,255,255,.78), 0 16px 0 rgba(255,255,255,.55);
  animation:fogSlide 2.8s ease-in-out infinite;
}
.weather-foggy::after{
  content:"";
  position:absolute;
  left:10px;right:10px;top:5px;
  height:3px;
  background:rgba(255,255,255,.55);
  border-radius:3px;
  animation:fogSlide 2.8s ease-in-out infinite .9s;
}
@keyframes fogSlide{
  0%,100%{transform:translateX(-5px);opacity:.7}
  50%{transform:translateX(5px);opacity:1}
}

/* ---- Drizzle ---- */
.weather-drizzle{
  background:linear-gradient(180deg, #b0bec5 0%, #80cbc4 100%);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(128,203,196,.3);
}
.weather-drizzle::before{
  content:"🌦️";
  font-size:20px;
}
.weather-drizzle::after{
  content:"";
  position:absolute;
  bottom:2px;left:25%;right:25%;
  height:3px;
  background:linear-gradient(90deg, transparent, rgba(100,181,246,.7), transparent);
  border-radius:3px;
  animation:drizzleFall 1.5s linear infinite;
}
@keyframes drizzleFall{
  0%{transform:translateY(-10px);opacity:0}
  40%{opacity:1}
  100%{transform:translateY(6px);opacity:0}
}

/* ---- Rainy ---- */
.weather-rainy{
  background:linear-gradient(180deg, #5c6bc0 0%, #3949ab 100%);
  overflow:hidden;
  box-shadow:0 2px 10px rgba(57,73,171,.35);
}
.weather-rainy::before{
  content:"🌧️";
  font-size:20px;
  position:relative;
  z-index:1;
}
.weather-rainy::after{
  content:"";
  position:absolute;
  top:0;left:0;right:0;bottom:0;
  background:
    linear-gradient(180deg, transparent 30%, rgba(100,181,246,.4) 50%, transparent 70%),
    linear-gradient(180deg, transparent 50%, rgba(100,181,246,.3) 70%, transparent 90%);
  background-size:6px 16px, 8px 16px;
  background-position:8px 0, 20px 6px;
  animation:rainSheet .8s linear infinite;
}
@keyframes rainSheet{
  from{background-position-y:0, 6px}
  to{background-position-y:16px, 22px}
}

/* ---- Snowy ---- */
.weather-snowy{
  background:linear-gradient(180deg, #e3f2fd 0%, #bbdefb 100%);
  overflow:hidden;
  box-shadow:0 2px 8px rgba(187,222,251,.4);
}
.weather-snowy::before{
  content:"🌨️";
  font-size:20px;
  position:relative;
  z-index:1;
  animation:snowBob 2s ease-in-out infinite;
}
.weather-snowy::after{
  content:"❄";
  position:absolute;
  font-size:9px;
  bottom:3px;right:6px;
  color:#90caf9;
  animation:snowFall 2s ease-in-out infinite .5s;
}
@keyframes snowBob{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}
@keyframes snowFall{
  0%{transform:translateY(-8px) rotate(0deg);opacity:0}
  20%{opacity:1}
  100%{transform:translateY(10px) rotate(180deg);opacity:0}
}

/* ---- Stormy ---- */
.weather-stormy{
  background:linear-gradient(180deg, #37474f 0%, #263238 100%);
  overflow:hidden;
  animation:stormFlash 3s ease-in-out infinite;
}
.weather-stormy::before{
  content:"⛈️";
  font-size:20px;
  position:relative;
  z-index:1;
  animation:stormShake .3s ease-in-out infinite;
}
.weather-stormy::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  box-shadow:inset 0 0 12px rgba(255,235,59,.15);
}
@keyframes stormFlash{
  0%,88%,92%,96%,100%{box-shadow:0 0 8px rgba(38,50,56,.4)}
  90%{box-shadow:0 0 24px rgba(255,235,59,.7), inset 0 0 10px rgba(255,235,59,.2)}
  94%{box-shadow:0 0 18px rgba(255,235,59,.5)}
}
@keyframes stormShake{
  0%,100%{transform:translateX(0)}
  25%{transform:translateX(-1px)}
  75%{transform:translateX(1px)}
}

/* Weather detail text */
.weather-details{
  display:flex;
  align-items:center;
  gap:10px;
  font-size:.8rem;
  line-height:1.3;
}
.weather-temp{
  display:flex;
  align-items:baseline;
  gap:4px;
  font-weight:700;
}
.temp-max{
  color:#d84315;
  font-size:.9rem;
}
.temp-min{
  color:#1565c0;
  font-size:.8rem;
}
.weather-extra{
  display:flex;
  align-items:center;
  gap:8px;
  color:var(--text-muted);
  font-size:.77rem;
  font-weight:500;
}
.weather-wind,
.weather-precip{
  display:inline-flex;
  align-items:center;
  gap:3px;
  white-space:nowrap;
}
.weather-icon{
  flex-shrink:0;
  vertical-align:middle;
}

/* ===== RESPONSIVE ===== */
@media(max-width:768px){
  .site-header{padding:14px 16px;padding-top:calc(14px + env(safe-area-inset-top,0px));gap:12px}
  .site-header .logo{height:42px;width:auto}
  .toolbar{padding:12px 14px}
  .admin-grid{grid-template-columns:1fr}
  table{font-size:.78rem}
  th,td{padding:7px 5px}
  .floating-actions{bottom:16px;right:16px}
  #openModal{padding:12px 20px;font-size:.9rem}
  .page-wrapper{padding:0 12px 30px}
  .modal form,.modal .error-box{padding:20px}
  .modal .cancel-log-box{padding:20px 16px;width:100%;max-width:100%;border-radius:14px}
  .day-block h3{flex-direction:column;align-items:flex-start;min-height:auto;padding:8px 12px;gap:4px}
  .day-label{width:100%}
  .weather-widget{gap:6px;font-size:.72rem;margin-left:0;padding:4px 10px 4px 6px;width:100%;flex-wrap:nowrap;justify-content:flex-start}
  .weather-anim{width:24px;height:24px;flex-shrink:0}
  .weather-extra{gap:5px;flex-wrap:nowrap}
}
@media(max-width:480px){
  .site-header h1{font-size:1rem}
  .header-actions a{font-size:.75rem;padding:5px 10px}
  .bookable-chip{font-size:.78rem;padding:5px 10px}
  .weather-widget{font-size:.68rem;padding:3px 8px 3px 5px;gap:5px}
  .weather-anim{width:20px;height:20px}
  .weather-details{gap:5px}
  .weather-temp{gap:2px}
  .temp-max{font-size:.78rem}
  .temp-min{font-size:.68rem}
}

/* ===== iOS Install Banner ===== */
body.has-ios-banner{padding-bottom:140px}
body.has-ios-banner .floating-actions{bottom:150px}
#iosInstallBanner{
  position:fixed;bottom:0;left:0;right:0;z-index:9998;
  background:var(--surface);
  border-top:1px solid var(--border);
  box-shadow:0 -6px 30px rgba(0,0,0,.15);
  border-radius:16px 16px 0 0;
  padding:14px 16px 16px;
  animation:iosBannerSlideUp .45s cubic-bezier(.22,1,.36,1);
  font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;
}
#iosInstallBanner.ios-install-hide{
  animation:iosBannerSlideDown .35s ease forwards;
}
.ios-install-content{
  display:flex;align-items:center;gap:12px;
}
.ios-install-icon{
  width:48px;height:48px;border-radius:12px;flex-shrink:0;
  box-shadow:0 2px 8px rgba(0,0,0,.1);
}
.ios-install-text{
  display:flex;flex-direction:column;gap:1px;flex:1;min-width:0;
}
.ios-install-text strong{
  font-size:.92rem;color:var(--text);font-weight:600;
}
.ios-install-text span{
  font-size:.76rem;color:var(--text-muted);line-height:1.3;
}
#iosInstallClose{
  background:var(--bg-alt);border:none;font-size:1.1rem;color:var(--text-muted);
  cursor:pointer;padding:0;line-height:1;flex-shrink:0;
  width:28px;height:28px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
}
.ios-install-hint{
  margin-top:10px;text-align:center;
  font-size:.8rem;color:var(--text-muted);line-height:1.5;
  background:var(--bg-alt);border-radius:10px;padding:10px 14px;
  display:flex;align-items:center;justify-content:center;gap:4px;flex-wrap:wrap;
}
.ios-install-hint strong{color:var(--text)}
.ios-share-icon{
  display:inline-flex;align-items:center;justify-content:center;
  background:var(--primary);color:#fff;
  width:22px;height:22px;border-radius:6px;vertical-align:middle;
}
@keyframes iosBannerSlideUp{
  from{transform:translateY(100%)}
  to{transform:translateY(0)}
}
@keyframes iosBannerSlideDown{
  from{transform:translateY(0)}
  to{transform:translateY(100%)}
}
@supports(padding-bottom:env(safe-area-inset-bottom)){
  #iosInstallBanner{padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  body.has-ios-banner{padding-bottom:calc(140px + env(safe-area-inset-bottom))}
}