:root { --bg:#f7f8f9; --card:#ffffff; --fg:#0d3b2e; --muted:#6b7a74; --accent:#0d3b2e; --accent-2:#f2e6b8; }
*{ box-sizing: border-box; }
body{ margin:0; font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; background: var(--bg); color: var(--fg); }
.topbar{ display:flex; align-items:center; justify-content:space-between; padding:10px 16px;  border-bottom:1px solid #e7eeea; position:sticky; top:0; z-index:10;
  background: var(--accent);
  color: #fff;}
.logo{ height:42px; width:auto; }
nav a{ margin:0 8px; text-decoration:none; color: rgba(255,255,255,.95); padding:6px 10px; border-radius:8px; }
nav a.active{ background: var(--accent-2); color: var(--accent); }
main{ padding:16px; max-width: 1024px; margin: 0 auto; }
.card{ background:var(--card); border:1px solid #e4ece7; border-radius:16px; padding:16px; box-shadow: 0 2px 6px rgba(0,0,0,.04); }
.btn{ background:var(--accent); color:#fff; border:none; padding:10px 14px; border-radius:10px; cursor:pointer; }
.btn.secondary{ background: var(--accent-2); color:#1f1a00; }
.grid{ display:grid; gap:12px; }
.grid.two{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.three{ grid-template-columns: repeat(3, minmax(0,1fr)); }
label{ display:block; font-size:12px; color:var(--muted); margin-top:8px; }
input, select, textarea{ width:100%; padding:10px; border:1px solid #dbe7e0; border-radius:10px; }
.table{ width:100%; border-collapse: collapse; }
.table th, .table td{ padding:8px; border-bottom:1px solid #eef3f0; text-align:left; }
.kbd{ background:#f1f5f3; padding:2px 6px; border-radius:6px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.foot{ text-align:center; padding:24px; color: var(--muted); }
small.muted{ color: var(--muted); }
.badge{ display:inline-block; padding:2px 8px; border-radius:999px; font-size:12px; background: var(--accent-2); color: var(--accent); }

.badge.status-active {
  background: #2ecc71;   /* green */
  color: #fff;
}

.badge.status-pending,
.badge.status-pending_approval,
.badge.status-grace_period {
  background: #f1c40f;   /* amber */
  color: #000;
}

.badge.status-inactive {
  background: #e74c3c;   /* red */
  color: #fff;
}


/* Timetable grid styles */
#ttWrapper { overflow-x: auto; }
.grid-header, .grid-row { display: grid; grid-template-columns: 140px 1fr 1fr 1fr; min-width: 700px; }
.cell { padding: 8px 10px; border-bottom: 1px solid #eef3f0; display:flex; align-items:center; gap:8px; }
.cell.head { font-weight: 600; background: #f4faf7; border-bottom: 1px solid #e3efe8; }
.time-cell { position: sticky; left: 0; background: #fff; z-index: 1; border-right: 1px solid #eef3f0; }
.slot.past { opacity: .5; }
.cell .name { flex: 1 1 auto; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* Header bar for date + arrows */
.tt-controls { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; }
.tt-date { font-weight: 600; }
.tt-nav { display:flex; align-items:center; gap:8px; }

/* Mobile tweaks */
.grid-header, .grid-row { grid-template-columns: 80px 1fr 1fr 1fr; min-width: auto; }
  .topbar { flex-wrap: wrap; gap:8px; }

  .grid-header, .grid-row { grid-template-columns: 80px 1fr 1fr 1fr; min-width: auto; }
  .topbar { flex-wrap: wrap; gap:8px; }

  .grid-header, .grid-row { grid-template-columns: 80px 1fr 1fr 1fr; min-width: auto; }
  .topbar { flex-wrap: wrap; gap:8px; }

  .grid-header, .grid-row { grid-template-columns: 120px 200px 200px 200px; min-width: 720px; }
  .topbar { flex-wrap: wrap; gap:8px; }


.flash { animation: flash-bg 1.5s ease-out; }
@keyframes flash-bg {
  from { background-color: #dff3e7; }
  to { background-color: transparent; }
}

@media (max-width: 640px){
  .grid.two { grid-template-columns: 1fr; }
  .grid-header, .grid-row { grid-template-columns: 80px 1fr 1fr 1fr; min-width: auto; }
  .topbar { flex-wrap: wrap; gap:8px; }
}


/* Added styles for logo and text */
.logo-container {
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-container .logo {
  height: 56px;
}

.logo-text { font-size: 1.2rem; font-weight: bold; color: var(--accent-2); }


/* White background behind CHI logo in top bar */
.logo-container .logo {
  background: #fff;
  padding: 4px;
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(0,0,0,.08);
}


/* === Home hero image card === */
.card.hero-card {
  position: relative;
  min-height: 240px;
  background-image: url('/assets/3tables-1280.jpg'); /* fallback */
  background-image: image-set(
    url('/assets/3tables-1920.webp') type('image/webp') 2x,
    url('/assets/3tables-1280.webp') type('image/webp') 1x,
    url('/assets/3tables-1920.jpg') type('image/jpeg') 2x,
    url('/assets/3tables-1280.jpg') type('image/jpeg') 1x
  );
  background-size: cover;
  background-position: center;
  border: none;
  overflow: hidden;
}
.card.hero-card::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.35);
}
.card.hero-card .hero-content {
  position: relative;
  z-index: 1;
  color: #fff;
}
.card.hero-card h2,
.card.hero-card p,
.card.hero-card a { color: #fff; }
.card.hero-card .hero-text { max-width: 60ch; line-height: 1.4; }

/* Header logo tweaks */
.topbar .logo-container{ background: transparent; padding: 0; box-shadow: none; border: 0; }
.topbar .logo{ height: 64px; width: auto; }
.topbar .logo-text{ display: none !important; }

/* Mobile header: hide inline nav; show Booking + burger aligned to the right */
@media (max-width: 640px) {
  .topbar nav#nav { display: none !important; }
  .topbar .top-actions { margin-left: auto; display: flex; align-items: center; gap: 8px;  flex: 0 0 auto;}
  .topbar .book-btn { display: inline-flex; align-items: center; }
  .topbar .menu-btn { display: inline-flex; align-items:center; justify-content:center; width:44px; height:44px; font-size: 32px; padding:0; }
  .topbar { padding-top: 8px; padding-bottom: 8px; }
}
@media (min-width: 641px) {
  .topbar .top-actions { display: none; } /* desktop keeps inline nav */
}

/* Mobile menu overlay */
#mobileMenu[hidden] { display: none !important; }
#mobileMenu { position: fixed; inset: 0; background: rgba(0,0,0,0.4); z-index: 100; }
#mobileMenu .panel {
  position: absolute; right: 0; top: 0; bottom: 0;
  width: min(86vw, 320px);
  background: var(--card);
  border-left: 1px solid #e4ece7;
  box-shadow: -2px 0 12px rgba(0,0,0,.15);
  padding: 16px;
  display: flex; flex-direction: column; gap: 8px;
}
#mobileMenu a { display: block; padding: 10px 8px; border-radius: 10px; text-decoration: none; color: var(--fg); }
#mobileMenu a.active { background: var(--accent-2); color: var(--accent); }
#mobileMenu .sheet-head { display:flex; align-items:center; justify-content:space-between; margin-bottom: 8px; }
#mobileMenu .close-btn { width: 40px; height: 40px; border: none; background: transparent; font-size: 32px; cursor: pointer; }

/* Admin: cards full width on phones; members table scrollable + wide */
@media (max-width: 640px) {
  main .grid.two, main .grid.three { grid-template-columns: 1fr !important; }
}
@supports (selector(:has(p))) {
  .card:has(#members_tbody) { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .card:has(#members_tbody) .table { min-width: 900px; }
}


/* --- Header logo: remove white background box and fix size --- */
.topbar .logo{
  height: 64px;
  width: auto;
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* === Targeted mobile fixes === */

/* 1. Keep Booking and hamburger on one line, no wrapping */
@media (max-width: 640px) {
  .topbar { display:flex; align-items:center; gap:8px; flex-wrap: nowrap !important; }
  .topbar .logo-container { min-width:0; flex: 1 1 auto;}
  .topbar .top-actions { margin-left:auto; display:flex; align-items:center; gap:8px; }
}

/* 2. All Feedback card: horizontal scroll and wider table */
@supports (display: grid) {
  .card:has(#fb_admin_tbody) {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .card:has(#fb_admin_tbody) .table {
    min-width: 1100px;
    table-layout: auto;
  }
  .card:has(#fb_admin_tbody) td.message { white-space: normal; }
}

/* 3. Admin Members: toolbar buttons on one line with horizontal scroll */
@supports (display: grid) {
  .card:has(#members_tbody) > div {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: nowrap !important; }
  .card:has(#members_tbody) > div > * { flex: 0 0 auto; }
}