/* RCC Booking System — style.css v5.1 */

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

:root {
  --green:       #2C5F3F;
  --green-light: #3d7a54;
  --green-pale:  #eaf2ec;
  --gold:        #b8922a;
  --gold-light:  #f5e9cc;
  --cream:       #faf8f3;
  --cream-dark:  #f0ece1;
  --text:        #1a1a18;
  --text-mid:    #4a4a44;
  --text-muted:  #8a8a80;
  --border:      #d8d2c4;
  --danger:      #b03030;
  --danger-pale: #fdeaea;
  --radius:      10px;
  --radius-sm:   6px;
  --shadow:      0 2px 12px rgba(44,95,63,0.08);
  --fs-xs:   clamp(0.7rem,  1.8vw, 0.8rem);
  --fs-sm:   clamp(0.8rem,  2.2vw, 0.9rem);
  --fs-base: clamp(0.9rem,  2.5vw, 1rem);
  --fs-md:   clamp(1rem,    2.8vw, 1.125rem);
  --fs-lg:   clamp(1.1rem,  3.2vw, 1.35rem);
  --fs-xl:   clamp(1.4rem,  4vw,   1.8rem);
}

html, body { height:100%; background:var(--cream); color:var(--text); font-family:'Source Sans 3',sans-serif; font-size:var(--fs-base); line-height:1.55; }

/* ── SCREENS ── */
.screen { min-height:100vh; }
.screen.hidden { display:none !important; }
.screen.active { display:block; }

/* ── LOGIN ── */
.login-wrap { min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center; padding:2rem 1.25rem; background:var(--cream); }

/* Logo circle — CSS-only fallback; replace with <img> if you have a logo file */
.club-logo-circle {
  width: clamp(80px,22vw,120px);
  height: clamp(80px,22vw,120px);
  border-radius: 50%;
  border: 3px solid var(--gold);
  background: var(--green-pale);
  display: flex; align-items: center; justify-content: center;
  font-family: 'Playfair Display', serif;
  font-size: clamp(1.4rem,5vw,2rem);
  font-weight: 600;
  color: var(--green);
  box-shadow: 0 2px 10px rgba(44,95,63,0.15);
  margin-bottom: 0;
}
/* If you use an <img> tag instead, add this class to it: */
img.club-logo-circle { object-fit:cover; object-position:center top; }

.login-emblem { margin-bottom:1rem; }
.login-title { font-family:'Playfair Display',serif; font-size:var(--fs-xl); font-weight:600; color:var(--green); letter-spacing:0.01em; margin-bottom:2px; }
.login-sub { font-size:var(--fs-sm); color:var(--text-muted); letter-spacing:0.06em; text-transform:uppercase; margin-bottom:1.25rem; }
.login-message { background:var(--gold-light); border:1px solid #d4b87a; border-radius:var(--radius-sm); padding:10px 14px; font-size:var(--fs-sm); color:#7a5c10; text-align:center; margin-bottom:1rem; max-width:360px; width:100%; }
.login-card { width:100%; max-width:360px; background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1.5rem; box-shadow:var(--shadow); margin-bottom:1rem; }
.login-hint { font-size:var(--fs-xs); color:var(--text-muted); text-align:center; max-width:300px; }

/* ── FORM ELEMENTS ── */
.form-group { margin-bottom:1rem; }
.form-group label, label { display:block; font-size:var(--fs-xs); font-weight:600; letter-spacing:0.07em; text-transform:uppercase; color:var(--text-mid); margin-bottom:5px; }
select, input[type="text"], input[type="password"], input[type="date"], input[type="time"], textarea { width:100%; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); font-family:'Source Sans 3',sans-serif; font-size:var(--fs-base); background:var(--cream); color:var(--text); transition:border-color 0.15s; -webkit-appearance:none; appearance:none; }
select { background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%238a8a80'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 12px center; padding-right:32px; }
input:focus, select:focus, textarea:focus { outline:none; border-color:var(--green); }
textarea { resize:vertical; min-height:70px; }
.error-msg { color:var(--danger); font-size:var(--fs-sm); background:var(--danger-pale); padding:8px 10px; border-radius:var(--radius-sm); margin-bottom:10px; }
.hidden { display:none !important; }

/* ── BUTTONS ── */
.btn-primary { width:100%; padding:11px; background:var(--green); color:#fff; border:none; border-radius:var(--radius-sm); font-family:'Source Sans 3',sans-serif; font-size:var(--fs-base); font-weight:600; cursor:pointer; letter-spacing:0.03em; transition:background 0.15s; }
.btn-primary:hover { background:var(--green-light); }
.btn-primary.btn-sm { width:auto; padding:8px 16px; }
.btn-danger { padding:8px 14px; background:var(--danger-pale); color:var(--danger); border:1px solid #e8b0b0; border-radius:var(--radius-sm); font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:background 0.15s; }
.btn-danger:hover { background:#f8d0d0; }
.btn-danger.btn-sm { padding:8px 14px; }
.btn-ghost { background:none; border:1px solid var(--border); border-radius:var(--radius-sm); padding:7px 12px; font-size:var(--fs-sm); color:var(--text-mid); cursor:pointer; }
.btn-ghost:hover { background:var(--cream-dark); }

/* ── TOPBAR ── */
.topbar { display:flex; align-items:center; justify-content:space-between; background:var(--green); color:#fff; padding:0 1rem; height:54px; position:sticky; top:0; z-index:100; }
.topbar-club { font-family:'Playfair Display',serif; font-size:var(--fs-lg); font-weight:600; letter-spacing:0.08em; color:var(--gold-light); }
.topbar-center { font-size:var(--fs-base); font-weight:500; }
.topbar-right { display:flex; align-items:center; gap:8px; }
#topbar-user { font-size:var(--fs-sm); opacity:0.85; }
.topbar-btn { color:rgba(255,255,255,0.75); border-color:rgba(255,255,255,0.25); font-size:var(--fs-md); padding:5px 10px; }
.topbar-btn:hover { background:rgba(255,255,255,0.1); }

/* ── NOTICE BANNER ── */
.notice-banner { background:var(--gold-light); border-bottom:1px solid #d4b87a; padding:10px 1rem; font-size:var(--fs-sm); color:#7a5c10; text-align:center; }

/* ── TABS ── */
.tab-nav { display:flex; border-bottom:2px solid var(--border); background:#fff; }
.tab-btn { flex:1; padding:12px; background:none; border:none; font-family:'Source Sans 3',sans-serif; font-size:var(--fs-sm); font-weight:500; color:var(--text-muted); cursor:pointer; border-bottom:2px solid transparent; margin-bottom:-2px; transition:color 0.15s; }
.tab-btn.active { color:var(--green); border-bottom-color:var(--green); }
.tab-content { display:none; }
.tab-content.active { display:block; }

/* ── WEEK NAV ── */
.week-nav { display:flex; align-items:center; justify-content:space-between; padding:10px 1rem; background:#fff; border-bottom:1px solid var(--border); }
.week-nav-bottom { margin:8px 0 4px; border-bottom:none; border-top:1px solid var(--border); background:transparent; padding-top:12px; }
.week-label { font-family:'Playfair Display',serif; font-size:var(--fs-md); color:var(--green); font-weight:500; }

/* Prominent arrows — used for both week-nav and per-day */
.week-arrow {
  background: var(--green-pale);
  border: 2px solid var(--green);
  border-radius: var(--radius-sm);
  width: 42px; height: 42px;
  font-size: var(--fs-xl);
  color: var(--green);
  font-weight: 700;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background 0.15s, color 0.15s;
  flex-shrink: 0;
}
.week-arrow:hover { background:var(--green); color:#fff; }
.day-arrow { width:34px; height:34px; font-size:var(--fs-lg); }

/* ── DAY CARDS ── */
#calendar-days { padding:0.75rem; display:flex; flex-direction:column; gap:10px; }
.day-card { background:#fff; border:1px solid var(--border); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); }
.day-card.is-today { border-color:var(--green); border-width:2px; }
.day-card.is-blocked { background:#f8f5f0; opacity:0.8; }

.day-header { display:flex; align-items:center; justify-content:space-between; padding:8px 10px 8px 8px; border-bottom:1px solid var(--cream-dark); gap:8px; }
.day-name { font-family:'Playfair Display',serif; font-size:var(--fs-lg); color:var(--green); font-weight:600; }
.day-name-date { font-family:'Playfair Display',serif; font-size:var(--fs-md); color:var(--green); font-weight:400; opacity:0.8; }
.today-badge { font-size:var(--fs-xs); font-weight:600; background:var(--green); color:#fff; border-radius:20px; padding:2px 10px; letter-spacing:0.04em; white-space:nowrap; }
.blocked-badge { font-size:var(--fs-xs); font-weight:600; background:var(--danger-pale); color:var(--danger); border-radius:20px; padding:2px 10px; white-space:nowrap; }

.day-body { padding:10px 14px; }
.blocked-reason { font-size:var(--fs-sm); color:var(--danger); font-style:italic; }

/* ── AVAILABLE SUMMARY ── */
.avail-summary { font-size:var(--fs-sm); color:var(--green); font-weight:500; margin-top:8px; padding:6px 10px; background:var(--green-pale); border-radius:var(--radius-sm); border:1px solid #b0cfba; }

/* ── CLUB MEET BLOCK ── */
.club-meet-block { background:var(--green-pale); border:1px solid #b0cfba; border-radius:var(--radius-sm); padding:10px 12px; margin-bottom:8px; }
.club-meet-header { font-size:var(--fs-sm); font-weight:600; color:var(--green); margin-bottom:6px; letter-spacing:0.02em; }
.club-meet-entries { margin-bottom:8px; }
.cm-entry { display:flex; align-items:flex-start; gap:6px; padding:5px 0; border-bottom:1px dotted #b0cfba; font-size:var(--fs-sm); }
.cm-entry:last-child { border-bottom:none; }
.cm-entry-text { flex:1; line-height:1.4; color:var(--text-mid); }
.cm-entry-btn { background:none; border:none; cursor:pointer; font-size:var(--fs-base); color:var(--text-muted); padding:0 3px; line-height:1; flex-shrink:0; }
.cm-entry-btn:hover { color:var(--green); }
.cm-entry-btn-del:hover { color:var(--danger); }

/* ── SLOT ROWS ── */
.slot-row { display:flex; align-items:flex-start; gap:8px; padding:5px 0; border-bottom:1px dotted var(--cream-dark); font-size:var(--fs-sm); }
.slot-row:last-of-type { border-bottom:none; }
.slot-time-label { font-size:var(--fs-xs); color:var(--text-muted); white-space:nowrap; min-width:110px; padding-top:2px; font-weight:500; }
.slot-bookings { flex:1; display:flex; flex-direction:column; gap:3px; }
.slot-booking-entry { display:flex; align-items:center; gap:6px; }
.booking-avatar { width:28px; height:28px; border-radius:50%; background:var(--green-pale); color:var(--green); font-size:var(--fs-xs); font-weight:600; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.booking-avatar.sm { width:22px; height:22px; font-size:0.65rem; }
.slot-booking-info { font-size:var(--fs-sm); flex:1; color:var(--text); }
.booking-remove { background:none; border:none; cursor:pointer; color:var(--text-muted); font-size:var(--fs-md); padding:0 2px; line-height:1; }
.booking-remove:hover { color:var(--danger); }

/* ── BLOCKED SLOT ROWS ── */
.slot-row-blocked { background:var(--danger-pale); border-radius:var(--radius-sm); margin-bottom:2px; padding:5px 8px; border-bottom:none; }
.slot-blocked-label { font-size:var(--fs-xs); color:var(--danger); font-style:italic; padding-top:2px; }

/* ── BOOKING BUTTONS ── */
.book-btn { display:inline-block; padding:7px 16px; background:var(--green-pale); color:var(--green); border:1px solid #b0cfba; border-radius:var(--radius-sm); font-size:var(--fs-sm); font-weight:600; cursor:pointer; transition:background 0.15s; }
.book-btn:hover { background:#d4e8da; }
.book-btn-cancel { background:var(--danger-pale); color:var(--danger); border-color:#e8b0b0; }
.book-btn-cancel:hover { background:#f8d0d0; }

/* ── CANCEL BOOKING MODAL ── */
.cancel-item { display:flex; align-items:center; justify-content:space-between; padding:10px 12px; background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-sm); gap:10px; }
.cancel-item-info { display:flex; flex-direction:column; gap:2px; flex:1; }
.cancel-item-name { font-size:var(--fs-sm); font-weight:600; color:var(--green); }
.cancel-item-time { font-size:var(--fs-sm); color:var(--text); }
.cancel-item-lawn { font-size:var(--fs-xs); color:var(--text-muted); }

/* ── MODAL ── */
.modal-overlay { position:fixed; inset:0; z-index:200; background:rgba(26,26,24,0.55); display:flex; align-items:center; justify-content:center; padding:1rem; overflow-y:auto; }
.modal-box { background:#fff; border-radius:var(--radius); padding:1.5rem; width:100%; max-width:400px; box-shadow:0 8px 32px rgba(0,0,0,0.18); }
.modal-box h2 { font-family:'Playfair Display',serif; font-size:var(--fs-lg); color:var(--green); margin-bottom:2px; }
.modal-sub { font-size:var(--fs-sm); color:var(--text-muted); margin-bottom:0.75rem; }
.time-entry-row { display:flex; gap:10px; margin-bottom:8px; }
.slots-preview { font-size:var(--fs-sm); color:var(--green); font-weight:500; min-height:1.4em; margin-bottom:8px; }

/* ── ADMIN ── */
.admin-sections { padding:0.75rem; display:flex; flex-direction:column; gap:12px; }
.admin-section { background:#fff; border:1px solid var(--border); border-radius:var(--radius); padding:1rem 1.1rem; }
.admin-section h3 { font-family:'Playfair Display',serif; font-size:var(--fs-md); color:var(--green); margin-bottom:0.75rem; }
.admin-section h4 { font-size:var(--fs-sm); font-weight:600; color:var(--text-mid); margin:0.9rem 0 0.5rem; }
.inline-form { display:flex; flex-wrap:wrap; gap:6px; align-items:flex-end; }
.inline-form.stacked { flex-direction:column; align-items:stretch; }
.admin-list { display:flex; flex-direction:column; gap:6px; }
.admin-list-item { display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:6px; padding:8px 10px; background:var(--cream); border:1px solid var(--border); border-radius:var(--radius-sm); font-size:var(--fs-sm); }
.admin-list-item .item-label { flex:1; font-size:var(--fs-sm); }
.admin-list-item .item-meta { color:var(--text-muted); font-size:var(--fs-xs); }
.admin-tag { font-size:var(--fs-xs); font-weight:600; background:var(--gold-light); color:var(--gold); border-radius:20px; padding:1px 8px; margin-left:6px; }
.admin-current-notice { margin-top:8px; font-size:var(--fs-sm); color:var(--text-muted); }
.add-member-form { margin-top:1rem; border-top:1px solid var(--border); padding-top:1rem; }
.checkbox-label { display:flex; align-items:center; gap:6px; font-size:var(--fs-sm); cursor:pointer; text-transform:none; letter-spacing:0; }
.checkbox-label input { width:auto; }

/* ── TOAST ── */
.toast { position:fixed; bottom:1.5rem; left:50%; transform:translateX(-50%); background:var(--green); color:#fff; padding:11px 22px; border-radius:20px; font-size:var(--fs-sm); font-weight:500; z-index:300; box-shadow:0 4px 16px rgba(0,0,0,0.18); white-space:pre-wrap; text-align:center; max-width:90vw; }

/* ── RESPONSIVE ── */
@media (max-width:380px) {
  .slot-time-label { min-width:90px; }
  .time-entry-row { flex-direction:column; }
  .topbar-club { font-size:var(--fs-base); }
  .day-arrow { width:28px; height:28px; }
}