@import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600;700&family=Montserrat:wght@600;700;800;900&display=swap');

/* K&E Inflatables — styles
   Two visual modes:
   1. Customer-facing (.theme-fun)    → bright, playful, family-friendly
   2. Admin/Employee (.theme-app)     → clean, utilitarian, big-button mobile-first
*/

/* ---------------- Base ---------------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: 'Nunito', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
  color: #1A2B4A;
  background: #FFF9F0;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: #1E63C7; text-decoration: none; }
a:hover { text-decoration: underline; }

/* ---------------- THEME: FUN (customer site) ---------------- */
.theme-fun {
  --c-cyan: #1AC4F0;
  --c-purple: #7C5DDE;
  --c-magenta: #E2399D;
  --c-brand-gradient: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
  --c-yellow: #FFD23F;
  --c-blue: #1AC4F0;         /* alias for legacy refs */
  --c-coral: #E2399D;         /* alias: old coral now magenta brand */
  --c-pink: #E2399D;
  --c-navy: #1A2B4A;
  --c-cream: #FFF9F0;
  --c-mint: #95E1A3;
  font-family: 'Nunito', system-ui, sans-serif;
}
.theme-fun h1, .theme-fun h2, .theme-fun h3 {
  font-family: 'Fredoka', 'Nunito', system-ui, sans-serif;
  font-weight: 600;
  line-height: 1.1;
  letter-spacing: -0.01em;
}

.theme-fun .hero {
  position: relative;
  background:
    radial-gradient(circle at 20% 20%, rgba(255,210,63,0.4), transparent 50%),
    radial-gradient(circle at 80% 30%, rgba(78,205,196,0.35), transparent 55%),
    radial-gradient(circle at 50% 80%, rgba(226,57,157,0.3), transparent 50%),
    linear-gradient(180deg, #FFE9A0 0%, #FFF9F0 100%);
  padding: 80px 24px 120px;
  text-align: center;
  overflow: hidden;
}
.theme-fun .hero::after {
  content: '';
  position: absolute;
  bottom: -1px; left: 0; right: 0; height: 60px;
  background: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'><path d='M0 40 Q150 0 300 30 T600 30 T900 30 T1200 30 V60 H0 Z' fill='%23FFF9F0'/></svg>") no-repeat center/100% 100%;
}
.theme-fun .hero h1 {
  font-size: clamp(2.4rem, 6vw, 4.2rem);
  margin: 0 0 16px;
}
.theme-fun .hero p {
  font-size: clamp(1.1rem, 2.5vw, 1.4rem);
  max-width: 640px;
  margin: 0 auto 36px;
  color: #3a4d6f;
}
.theme-fun nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 18px 24px;
  background: rgba(255,255,255,0.7);
  backdrop-filter: blur(8px);
  position: sticky; top: 0; z-index: 50;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.theme-fun nav .brand {
  font-family: 'Fredoka', sans-serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--c-navy);
  display: flex; align-items: center; gap: 10px;
}
.theme-fun nav .brand .logo-dot {
  width: 36px; height: 36px;
  background: linear-gradient(135deg, var(--c-coral), var(--c-yellow));
  border-radius: 50%;
  display: inline-block;
  box-shadow: 0 4px 12px rgba(226,57,157,0.4);
}
.theme-fun nav .nav-links { display: flex; gap: 8px; align-items: center; }
.theme-fun nav .nav-links a { padding: 8px 14px; border-radius: 999px; font-weight: 700; color: var(--c-navy); }
.theme-fun nav .nav-links a:hover { background: rgba(0,0,0,0.05); text-decoration: none; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 14px 28px;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: 700;
  border: none;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  transition: transform .15s ease, box-shadow .15s ease, background .15s ease;
}
.btn:active { transform: scale(0.97); }
.btn-primary {
  background: var(--c-coral, #E2399D);
  color: white;
  box-shadow: 0 6px 18px rgba(226,57,157,0.4);
}
.btn-primary:hover { background: #ff5c5c; box-shadow: 0 8px 22px rgba(226,57,157,0.5); text-decoration: none; }
.btn-secondary {
  background: white;
  color: var(--c-navy, #1A2B4A);
  border: 2px solid var(--c-navy, #1A2B4A);
}
.btn-secondary:hover { background: var(--c-navy); color: white; text-decoration: none; }
.btn-yellow {
  background: var(--c-yellow, #FFD23F);
  color: var(--c-navy, #1A2B4A);
  box-shadow: 0 6px 18px rgba(255,210,63,0.5);
}
.btn-blue { background: var(--c-blue, #4ECDC4); color: white; }
.btn-ghost { background: transparent; color: inherit; }
.btn-block { width: 100%; }
.btn-lg { font-size: 1.2rem; padding: 18px 36px; }
.btn-xl { font-size: 1.4rem; padding: 22px 42px; }

/* Containers */
.container { max-width: 1100px; margin: 0 auto; padding: 0 24px; }
.section { padding: 80px 0; }
.section h2 { font-size: clamp(1.8rem, 4vw, 2.8rem); text-align: center; margin: 0 0 12px; }
.section .lead { text-align: center; max-width: 640px; margin: 0 auto 48px; color: #3a4d6f; font-size: 1.1rem; }

/* Inflatables grid */
.inflatables-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.inflatable-card {
  background: white;
  border-radius: 24px;
  padding: 24px;
  box-shadow: 0 8px 24px rgba(26,43,74,0.08);
  border: 3px solid transparent;
  transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.inflatable-card:hover {
  transform: translateY(-4px);
  border-color: var(--c-yellow);
  box-shadow: 0 12px 32px rgba(26,43,74,0.12);
}
.inflatable-card .img-wrap {
  background: linear-gradient(135deg, #FFE9A0, #FFC4C4);
  border-radius: 16px;
  aspect-ratio: 4/3;
  display: flex; align-items: center; justify-content: center;
  font-size: 4rem;
  margin-bottom: 18px;
}
.inflatable-card h3 { margin: 0 0 8px; font-size: 1.4rem; }
.inflatable-card .desc { color: #4a5d80; min-height: 60px; }
.inflatable-card .meta {
  display: flex; justify-content: space-between; align-items: center;
  margin-top: 16px; padding-top: 16px; border-top: 1px dashed #e0e6f0;
}
.inflatable-card .price { font-weight: 800; font-size: 1.3rem; color: var(--c-navy); }
.inflatable-card .tags { display: flex; gap: 6px; }
.tag {
  font-size: .75rem; font-weight: 700; padding: 4px 10px; border-radius: 999px;
  background: #eef2f9; color: #4a5d80;
}
.tag.water { background: #d8f3f0; color: #0d8a82; }
.tag.dry { background: #fff3cf; color: #8a6f0a; }

/* How it works */
.steps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 24px;
}
.step {
  background: white;
  border-radius: 20px;
  padding: 28px;
  text-align: center;
  position: relative;
}
.step .num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 48px; height: 48px;
  background: linear-gradient(135deg, var(--c-yellow), var(--c-coral));
  color: white;
  border-radius: 50%;
  font-weight: 800;
  font-size: 1.3rem;
  margin-bottom: 16px;
  box-shadow: 0 4px 12px rgba(226,57,157,0.3);
}
.step h3 { margin: 0 0 8px; font-size: 1.2rem; }
.step p { margin: 0; color: #4a5d80; }

/* Rules */
.rules-card {
  background: linear-gradient(135deg, #fff9f0 0%, #fff 100%);
  border: 3px solid var(--c-yellow);
  border-radius: 24px;
  padding: 32px;
  max-width: 720px;
  margin: 0 auto;
}
.rules-card h3 { margin-top: 0; font-size: 1.4rem; }
.rules-list { list-style: none; padding: 0; margin: 0; }
.rules-list li {
  padding: 10px 0 10px 36px;
  position: relative;
  border-bottom: 1px dashed #f0e3c4;
}
.rules-list li:last-child { border-bottom: none; }
.rules-list li::before {
  content: '✓';
  position: absolute;
  left: 0; top: 10px;
  background: var(--c-mint);
  color: white;
  width: 24px; height: 24px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800;
  font-size: .85rem;
}
.rules-list li.no::before { content: '✕'; background: var(--c-coral); }

/* FAQ */
.faq-item {
  background: white;
  border-radius: 16px;
  margin-bottom: 12px;
  overflow: hidden;
  border: 2px solid #eef2f9;
}
.faq-item summary {
  padding: 18px 24px;
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  display: flex; justify-content: space-between; align-items: center;
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: '+'; font-size: 1.5rem; font-weight: 400; color: var(--c-coral);
}
.faq-item[open] summary::after { content: '−'; }
.faq-item .faq-body { padding: 0 24px 20px; color: #4a5d80; }

/* Footer */
.footer {
  background: var(--c-navy);
  color: #cfd8e9;
  padding: 48px 24px;
  text-align: center;
}
.footer .brand { color: white; font-family: 'Fredoka', sans-serif; font-size: 1.5rem; margin-bottom: 12px; }
.footer a { color: var(--c-yellow); }

/* Booking form (customer) */
.form-card {
  background: white;
  border-radius: 24px;
  padding: 36px;
  box-shadow: 0 12px 36px rgba(26,43,74,0.08);
  max-width: 720px;
  margin: 40px auto;
}
.form-row { margin-bottom: 18px; }
.form-row label {
  display: block;
  font-weight: 700;
  margin-bottom: 6px;
  font-size: .95rem;
  color: var(--c-navy);
}
.form-row .hint { display: block; font-weight: 400; font-size: .85rem; color: #6c7a93; margin-top: 4px; }
.form-row input[type=text],
.form-row input[type=tel],
.form-row input[type=email],
.form-row input[type=date],
.form-row input[type=time],
.form-row input[type=number],
.form-row input[type=password],
.form-row select,
.form-row textarea {
  width: 100%;
  padding: 14px 16px;
  font-size: 1rem;
  font-family: inherit;
  border: 2px solid #e0e6f0;
  border-radius: 12px;
  background: #fafbfd;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.form-row input:focus,
.form-row select:focus,
.form-row textarea:focus {
  outline: none;
  border-color: var(--c-coral, var(--app-primary, #1E63C7));
  box-shadow: 0 0 0 4px rgba(226,57,157,0.15);
  background: white;
}
.form-row textarea { min-height: 100px; resize: vertical; }
.form-row.checkbox {
  display: flex; align-items: flex-start; gap: 12px;
  background: #fff9e6;
  padding: 16px;
  border-radius: 12px;
  border: 2px dashed var(--c-yellow);
}
.form-row.checkbox input { margin-top: 4px; flex-shrink: 0; width: 20px; height: 20px; }
.form-row.checkbox label { margin: 0; }
.form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .form-grid-2 { grid-template-columns: 1fr; } }

.alert {
  padding: 14px 18px;
  border-radius: 12px;
  margin-bottom: 16px;
}
.alert-error { background: #ffe6e6; color: #a40000; border: 1px solid #ffb3b3; }
.alert-success { background: #e7f7ec; color: #0a6b2a; border: 1px solid #b6e3c4; }

/* ---------------- THEME: APP (admin/employee) ---------------- */
.theme-app {
  --app-primary: #1E63C7;
  --app-bg: #F4F6FA;
  --app-card: #FFFFFF;
  --app-text: #1E2A4A;
  --app-muted: #6c7a93;
  --app-border: #e3e8f0;
  background: var(--app-bg);
  color: var(--app-text);
  min-height: 100vh;
  font-family: 'Nunito', system-ui, sans-serif;
}
.theme-app .topbar {
  background: var(--app-text);
  color: white;
  padding: 14px 20px;
  display: flex; justify-content: space-between; align-items: center;
  position: sticky; top: 0; z-index: 50;
}
.theme-app .topbar .brand { font-weight: 800; font-size: 1.1rem; display: flex; align-items: center; gap: 10px; }
.theme-app .topbar .brand .logo-dot {
  width: 28px; height: 28px;
  background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
  border-radius: 50%;
}
.theme-app .topbar a, .theme-app .topbar button {
  color: white; background: transparent; border: none; cursor: pointer; font-weight: 700;
}
.theme-app .topbar a:hover { text-decoration: underline; }

.theme-app .app-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 24px 20px 80px;
}
.theme-app h1 { font-size: 1.6rem; margin: 0 0 4px; }
.theme-app h2 { font-size: 1.2rem; margin: 0 0 14px; }
.theme-app .muted { color: var(--app-muted); }

.card {
  background: var(--app-card);
  border-radius: 14px;
  padding: 22px;
  border: 1px solid var(--app-border);
  margin-bottom: 18px;
}

/* Bookings list */
.booking-row {
  display: grid;
  grid-template-columns: 110px 1fr 1fr 120px 110px;
  gap: 14px;
  padding: 14px;
  border-bottom: 1px solid var(--app-border);
  align-items: center;
  cursor: pointer;
  transition: background .1s ease;
}
.booking-row:hover { background: #f8fafd; }
.booking-row:last-child { border-bottom: none; }
.booking-row .date-cell { font-weight: 800; color: var(--app-primary); }
.booking-row .when { font-size: .85rem; color: var(--app-muted); margin-top: 2px; }
@media (max-width: 720px) {
  .booking-row { grid-template-columns: 1fr 1fr; gap: 8px; }
  .booking-row > div:nth-child(n+3) { grid-column: span 2; }
}

.status-pill {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 999px;
  font-size: .8rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .03em;
}
.s-new_request { background: #fff3cf; color: #8a6f0a; }
.s-confirmed { background: #d4edda; color: #1c5a2a; }
.s-needs_follow_up { background: #ffe1d6; color: #8a3a0d; }
.s-scheduled { background: #d6e7ff; color: #0a3d8a; }
.s-delivered { background: #cef7e3; color: #0a6b2a; }
.s-picked_up { background: #e0e0e0; color: #444; }
.s-cancelled { background: #ffd6d6; color: #8a0d0d; }

.toolbar {
  display: flex; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px;
}
.toolbar select, .toolbar input {
  padding: 10px 12px;
  border: 1px solid var(--app-border);
  border-radius: 10px;
  font-family: inherit;
  background: white;
}
.btn-app {
  background: var(--app-primary);
  color: white;
  border: none;
  padding: 12px 22px;
  border-radius: 10px;
  font-weight: 800;
  font-family: inherit;
  cursor: pointer;
  font-size: 1rem;
  transition: background .15s ease;
}
.btn-app:hover { background: #144f9e; }
.btn-app.secondary { background: white; color: var(--app-text); border: 1px solid var(--app-border); }
.btn-app.secondary:hover { background: #f4f6fa; }
.btn-app.danger { background: #c0392b; }
.btn-app.danger:hover { background: #a02f23; }
.btn-app.success { background: #27ae60; }
.btn-app.success:hover { background: #1e8e4d; }

/* Modal */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 40px 16px;
  z-index: 100;
  overflow-y: auto;
}
.modal {
  background: white;
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  padding: 28px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.modal h2 { margin-top: 0; }
.modal .close-btn {
  background: none; border: none; font-size: 1.4rem; cursor: pointer;
  float: right; color: var(--app-muted);
}

/* Employee big-button mobile */
.theme-app.employee-mode .app-container { max-width: 640px; }
.theme-app.employee-mode .job-card {
  background: white;
  border: 2px solid var(--app-border);
  border-radius: 16px;
  padding: 22px;
  margin-bottom: 16px;
}
.theme-app.employee-mode .job-card.has-problem { border-color: #c0392b; }
.theme-app.employee-mode .job-card h3 { margin: 0 0 6px; font-size: 1.3rem; }
.theme-app.employee-mode .job-card .info { color: var(--app-muted); margin: 6px 0; }
.theme-app.employee-mode .job-card .actions {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  margin-top: 16px;
}
.theme-app.employee-mode .job-card .actions button {
  padding: 18px 12px;
  font-size: 1rem;
  font-weight: 800;
  border: none;
  border-radius: 12px;
  cursor: pointer;
  font-family: inherit;
}
.btn-onway { background: #2980b9; color: white; }
.btn-done { background: #27ae60; color: white; }
.btn-pickup { background: #8e44ad; color: white; }
.btn-problem { background: #c0392b; color: white; }

/* Login pages */
.login-shell {
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: linear-gradient(135deg, #1A2B4A 0%, #2E4A7A 100%);
}
.login-card {
  background: white;
  padding: 36px;
  border-radius: 20px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.25);
}
.login-card h1 { margin-top: 0; }
.login-card .logo-dot {
  width: 60px; height: 60px;
  background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
  border-radius: 50%;
  margin: 0 auto 20px;
  box-shadow: 0 8px 24px rgba(226,57,157,0.4);
}
/* Real K&E logo on the admin + crew login cards (replaces the old gradient dot)
   so the sign-in screen looks official/branded. */
.login-card .login-logo {
  display: block;
  width: 72%;
  max-width: 220px;
  height: auto;
  margin: 0 auto 18px;
}

/* Utility */
.hidden { display: none !important; }
.text-center { text-align: center; }
.mt-2 { margin-top: 16px; }
.mb-2 { margin-bottom: 16px; }
.spacer { height: 24px; }
.row { display: flex; gap: 10px; flex-wrap: wrap; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

/* ============================================================
   v2 additions
   ============================================================ */

/* Navbar (homepage + booking pages) */
.navbar { background: white; box-shadow: 0 2px 10px rgba(0,0,0,.05); position: sticky; top: 0; z-index: 100; }
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.brand-logo { font-family: 'Fredoka', sans-serif; font-weight: 700; font-size: 22px; color: #1A2B4A; text-decoration: none; display: flex; align-items: center; gap: 8px; }
.brand-logo .logo-dot { display: inline-block; width: 22px; height: 22px; border-radius: 50%; background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%); box-shadow: 0 4px 12px rgba(226,57,157,.35); }
.navbar nav { display: flex; gap: 18px; align-items: center; }
.navbar nav a { color: #1A2B4A; text-decoration: none; font-weight: 600; font-size: 15px; }
.navbar nav a.cta-link { background: #E2399D; color: white; padding: 8px 16px; border-radius: 999px; }
.navbar nav a.cta-link:hover { background: #ee2e2e; }

/* Mobile-friendly navbar — collapse non-essential links */
@media (max-width: 720px) {
  .navbar nav { gap: 10px; }
  .navbar nav a { font-size: 14px; }
  .navbar nav a:not(.cta-link) { display: none; }
  .navbar nav a.cta-link { padding: 6px 12px; font-size: 14px; }
  .brand-logo { font-size: 18px; }
  .brand-logo .logo-dot { width: 18px; height: 18px; }
}

.hero-compact { padding: 40px 0 30px; }
.hero-buttons { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; margin-top: 18px; }
.hero-badges { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin-top: 22px; color: rgba(255,255,255,.95); font-weight: 600; }
.hero-badges span { background: rgba(255,255,255,.15); padding: 6px 12px; border-radius: 999px; backdrop-filter: blur(4px); font-size: 14px; }

.section-alt { background: #f7f5f0; }
.lede { color: #555; font-size: 18px; margin-bottom: 24px; }
.narrow { max-width: 760px; margin: 0 auto; }

/* Service area cards */
.service-area-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.service-area-card {
  padding: 22px 24px;
  border-radius: 14px;
  text-align: left;
}
.service-area-card h3 { margin: 0 0 8px; }
.service-area-card.primary {
  background: linear-gradient(135deg, #95E1A3 0%, #4ECDC4 100%);
  color: #0a3128;
}
.service-area-card.primary h3, .service-area-card.primary p { color: #0a3128; }
.service-area-card.primary .muted { color: rgba(10,49,40,.7); }
.service-area-card.secondary {
  background: #fff5dc;
  border: 1px solid #f1d99a;
  color: #6b4a14;
}

/* Trust signals strip — sits between hero and About */
.trust-strip {
  background: #fff;
  border-top: 1px solid rgba(0,0,0,.06);
  border-bottom: 1px solid rgba(0,0,0,.06);
  padding: 24px 0;
}
.trust-strip-inner {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 18px;
  align-items: center;
}
.trust-item {
  display: flex;
  align-items: center;
  gap: 12px;
  font-size: 14px;
  color: #1A2B4A;
}
.trust-item small { color: #777; font-weight: 400; font-size: 12px; }
.trust-icon {
  font-size: 28px;
  flex-shrink: 0;
  width: 44px; height: 44px;
  display: inline-flex;
  align-items: center; justify-content: center;
  background: linear-gradient(135deg, #FFF1E0, #FFE9A0);
  border-radius: 50%;
}

/* Delivery-area checker */
.delivery-check-section { padding: 50px 0 30px; }
.delivery-check {
  display: flex; gap: 8px;
  max-width: 520px; margin: 0 auto;
}
.delivery-check input {
  flex: 1;
  padding: 14px 16px;
  border: 2px solid rgba(0,0,0,.1);
  border-radius: 999px;
  font-size: 16px;
  outline: none;
  transition: border-color .15s ease;
}
.delivery-check input:focus { border-color: #4ECDC4; }
.delivery-check .btn { padding: 14px 24px; }
.delivery-result {
  margin-top: 16px;
  padding: 14px 18px;
  border-radius: 12px;
  font-size: 14px;
  min-height: 0;
}
.delivery-result.is-ok   { background: #e7f7ee; color: #1e5e34; border: 1px solid #b6e2c5; }
.delivery-result.is-warn { background: #fff5dc; color: #6b4a14; border: 1px solid #f1d99a; }
.delivery-result.is-err  { background: #fde8e8; color: #7a2222; border: 1px solid #f1b6b6; }
.delivery-result a { color: inherit; text-decoration: underline; }

/* Sticky mobile call bar — bottom of viewport on small screens */
.sticky-mobile-bar {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  display: none;
  gap: 6px;
  padding: 8px;
  background: rgba(255,255,255,.96);
  backdrop-filter: blur(8px);
  border-top: 1px solid rgba(0,0,0,.08);
  z-index: 100;
  box-shadow: 0 -4px 18px rgba(0,0,0,.08);
}
.sticky-mobile-btn {
  flex: 1;
  padding: 14px;
  border-radius: 12px;
  text-align: center;
  text-decoration: none;
  font-weight: 700;
  font-size: 15px;
}
.sticky-mobile-call { background: #1A2B4A; color: white; }
.sticky-mobile-book { background: #E2399D; color: white; }
@media (max-width: 720px) {
  .sticky-mobile-bar { display: flex; }
  body { padding-bottom: 72px; } /* avoid bar covering footer */
}

/* Hero "Transform Your Party Today" eyebrow */
.hero-eyebrow {
  display: inline-block;
  margin: 0 0 14px;
  padding: 6px 14px;
  background: rgba(255,255,255,.18);
  color: white;
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  border-radius: 999px;
  backdrop-filter: blur(4px);
}

/* About section */
.about-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 16px;
  margin-top: 28px;
}
.about-card {
  background: white;
  padding: 20px 22px;
  border-radius: 14px;
  box-shadow: 0 4px 12px rgba(0,0,0,.06);
}
.about-card h3 { margin: 0 0 8px; color: #1A2B4A; }
.about-card p { margin: 0; color: #555; line-height: 1.55; }

.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; }
.step { background: white; padding: 20px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.06); }
.step-num { display: inline-block; width: 32px; height: 32px; line-height: 32px; text-align: center; background: #E2399D; color: white; border-radius: 50%; font-weight: 800; margin-bottom: 10px; }
.step h4 { margin: 6px 0; }

.rules-card { background: white; padding: 22px 24px; border-radius: 14px; box-shadow: 0 4px 12px rgba(0,0,0,.05); margin-bottom: 16px; }
.rules-card h3 { margin: 0 0 8px; color: #1A2B4A; }
.rules-card ul { margin: 8px 0 0; padding-left: 20px; }
.rules-card.weather { border-left: 5px solid #38B6FF; }

.cta-final { background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%); padding: 50px 0; text-align: center; color: white; }
.cta-final h2 { color: white; margin: 0 0 18px; }
.btn-large { padding: 14px 28px; font-size: 17px; }

.faq-item { padding: 14px 0; border-bottom: 1px solid #eee; }
.faq-q { font-weight: 700; margin: 0 0 4px; }
.faq-a { margin: 0; color: #555; }

footer { background: #1A2B4A; color: rgba(255,255,255,.85); padding: 30px 0; text-align: center; margin-top: 60px; }
footer p { margin: 4px 0; }
.footer-fine { font-size: 13px; color: rgba(255,255,255,.6); margin-top: 12px; }

/* Forms (booking + waiver) */
.form-wrap { max-width: 700px; margin: -40px auto 60px; padding: 0 16px; position: relative; z-index: 2; }
.form-card { background: white; padding: 28px 30px; border-radius: 16px; box-shadow: 0 16px 40px rgba(0,0,0,.08); }
.form-card h2 { margin-top: 0; color: #1A2B4A; }
.form-card h3 { margin-top: 24px; color: #1A2B4A; font-size: 18px; }
.form-card .row { display: grid; grid-template-columns: 1fr; gap: 14px; margin-bottom: 14px; }
.form-card .row.two { grid-template-columns: 1fr 1fr; }
.form-card label { display: block; font-weight: 600; font-size: 14px; color: #444; margin-bottom: 4px; }
.form-card input, .form-card select, .form-card textarea { width: 100%; padding: 10px 12px; border: 1.5px solid #ddd; border-radius: 8px; font-size: 15px; box-sizing: border-box; font-family: inherit; }
.form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: #E2399D; outline: none; }
.btn-block { width: 100%; }
.checkbox-row { display: flex; gap: 10px; align-items: flex-start; margin: 10px 0; }
.checkbox-row > input[type="checkbox"] { flex: 0 0 auto; }
.checkbox-row > label { flex: 1 1 auto; }
.checkbox-row input { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; }
.checkbox-row label { font-weight: 400; font-size: 14px; line-height: 1.45; }

/* ===== SETUP / PICKUP TIME BLOCKS (booking form) ===== */
.time-window-block {
  background: #f7f5f0;
  border: 2px solid #ece8e0;
  border-radius: 12px;
  padding: 14px 16px;
}
/* Setup is the time that matters most — make it stand out. */
.time-window-block.time-window-primary {
  background: linear-gradient(135deg, rgba(26,196,240,0.06) 0%, rgba(124,93,222,0.09) 100%);
  border: 2px solid #7C5DDE;
  box-shadow: 0 4px 16px rgba(124, 93, 222, 0.14);
}
.time-window-block .time-window-label,
.form-card .time-window-block .time-window-label {
  display: block;
  font-size: 15px;
  color: #444;
  margin-bottom: 6px;
}
.time-window-block.time-window-primary .time-window-label strong {
  font-size: 17px;
  color: #1A2B4A;
}
.time-window-display {
  font-weight: 800;
  color: #1A2B4A;
  font-size: 20px;
  line-height: 1.2;
}
.time-window-primary .time-window-display {
  font-size: 34px;
  color: #5b3fc4;
  letter-spacing: -0.01em;
}
/* "Need a specific drop-off time?" — call it out in red, larger. */
.checkbox-row label .time-specific-cue {
  color: #d32f2f;
  font-size: 16px;
  font-weight: 700;
}
/* The actual time picker, when "specific time" is on — big and obvious. */
.form-card input.time-input-big,
.form-card select.time-input-big {
  font-size: 22px;
  font-weight: 800;
  padding: 12px 14px;
  border-width: 2px;
  border-radius: 10px;
  color: #1A2B4A;
  max-width: 220px;
}
.time-window-primary input.time-input-big,
.time-window-primary select.time-input-big {
  border-color: #7C5DDE;
}
@media (max-width: 600px) {
  .time-window-primary .time-window-display { font-size: 28px; }
  .form-card input.time-input-big,
  .form-card select.time-input-big { font-size: 24px; max-width: 100%; }
}

.form-error { background: #fee; color: #900; padding: 10px 14px; border-radius: 8px; margin-top: 12px; }
.small { font-size: 13px; }
.muted { color: #666; }
.center { text-align: center; }
.narrow { max-width: 700px; margin: 0 auto; }

.legal-box { background: #f7f5f0; padding: 16px 18px; border-radius: 10px; font-size: 14px; line-height: 1.55; max-height: 280px; overflow-y: auto; border: 1px solid #eee; }
.legal-box p { margin: 0 0 10px; }

/* Customer portal */
.booking-summary { background: #f7f5f0; padding: 14px 16px; border-radius: 10px; margin: 16px 0; font-size: 15px; }
.booking-summary > div { padding: 3px 0; }
.badge-blue { display: inline-block; background: #E8F4FF; color: #1A2B4A; padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 700; }
.status-pill { display: inline-block; background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%); color: white; padding: 6px 14px; border-radius: 999px; font-weight: 700; font-size: 13px; text-transform: uppercase; }
.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 16px 0; }
.info-grid > div { background: #f7f5f0; padding: 10px 12px; border-radius: 8px; }
.info-grid .label { display: block; font-size: 12px; color: #888; text-transform: uppercase; }
.info-grid .value { font-weight: 700; }
.ack-box { background: #E8FFE8; border: 1px solid #7fce7f; color: #14532d; padding: 12px; border-radius: 8px; margin: 14px 0; font-weight: 600; line-height: 1.5; }
.ack-box strong { color: #0b3d20; }
.action-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.btn-secondary.danger { background: #fff5f5; color: #dc2626; border: 2px solid #f3a8a8; }
.btn-secondary.danger:hover { background: #fee2e2; color: #b91c1c; border-color: #ef4444; }
.steps-list { line-height: 1.7; }

.payment-options { display: grid; gap: 12px; margin: 18px 0; }
.pay-btn { background: white; border: 2px solid #ddd; padding: 16px; border-radius: 12px; text-align: left; cursor: pointer; font-family: inherit; width: 100%; transition: .15s; }
.pay-btn:hover { border-color: #E2399D; transform: translateY(-1px); }
.pay-btn.disabled { opacity: .55; cursor: not-allowed; }
.pay-title { font-weight: 700; font-size: 16px; }
.pay-sub { font-size: 13px; color: #666; margin-top: 2px; }

/* Card grid (homepage) */
.grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 22px; }
.card {
  background: white;
  padding: 18px;
  border-radius: 16px;
  box-shadow: 0 6px 18px rgba(0,0,0,.06);
  display: flex;
  flex-direction: column;
  transition: transform .2s ease, box-shadow .2s ease;
}
.card:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,.12);
}
.card-img { aspect-ratio: 4/3; background: #f0f0f0; border-radius: 12px; overflow: hidden; margin-bottom: 12px; display: flex; align-items: center; justify-content: center; }
.card-img img { width: 100%; height: 100%; object-fit: cover; }
.card-img-placeholder {
  background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
  font-size: 72px;
  line-height: 1;
}
.card h3 { margin: 4px 0 6px; color: #1A2B4A; font-size: 1.2rem; }
.card-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin: 6px 0 10px; }
.card-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 6px; }
.card-meta { list-style: none; padding: 0; margin: 10px 0; font-size: 13px; color: #666; }
.card-meta li { padding: 2px 0; }
.price { font-size: 26px; font-weight: 800; color: #1A2B4A; margin: 10px 0 14px; }
.price .muted.small { font-size: 14px; font-weight: 400; }

/* ============================================================
   Admin SPA
   ============================================================ */
.theme-app { background: #f4f5f7; }
.app-header { background: linear-gradient(180deg, #0a1426 0%, #1A2B4A 100%); color: white; padding: 14px 0; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.app-header-inner { max-width: 1200px; margin: 0 auto; padding: 0 18px; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.app-brand { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 18px; display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.app-brand-dot { width: 22px; height: 22px; background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%); border-radius: 50%; box-shadow: 0 2px 8px rgba(226,57,157,.4); display: inline-block; }
.app-brand-divider { color: rgba(255,255,255,.45); font-weight: 400; }
.app-brand-sub { color: rgba(255,255,255,.7); font-weight: 600; font-size: 15px; }

/* Unified portal footer */
.portal-footer { background: #0a1426; color: rgba(255,255,255,.7); padding: 22px 0; text-align: center; margin-top: 60px; font-size: 13px; }
.portal-footer .portal-footer-inner { max-width: 1200px; margin: 0 auto; padding: 0 18px; display: flex; flex-direction: column; gap: 4px; align-items: center; }
.portal-footer a { color: rgba(255,255,255,.85); }
.portal-footer .portal-footer-fine { color: rgba(255,255,255,.45); font-size: 12px; margin-top: 6px; }

/* Login-card "Transform Your Party Today" eyebrow */
.login-eyebrow {
  display: inline-block;
  margin: 0 auto 14px;
  padding: 5px 12px;
  background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
  color: white;
  font-weight: 700;
  font-size: 11px;
  letter-spacing: 1.4px;
  text-transform: uppercase;
  border-radius: 999px;
  box-shadow: 0 4px 12px rgba(226,57,157,.35);
}
.login-eyebrow-row { text-align: center; }
.tabs { display: flex; gap: 4px; flex-wrap: wrap; row-gap: 6px; justify-content: flex-end; }
.tab { background: transparent; color: rgba(255,255,255,.7); border: 0; padding: 8px 14px; border-radius: 8px; cursor: pointer; font-weight: 600; font-size: 14px; white-space: nowrap; flex-shrink: 0; }

/* Hamburger button + backdrop — hidden by default; the mobile media query at
   the bottom of this file enables them at ≤768px. */
.nav-toggle { display: none; background: transparent; color: white; border: 0; padding: 8px 12px; font-size: 22px; line-height: 1; cursor: pointer; border-radius: 6px; }
.nav-toggle:hover { background: rgba(255,255,255,.1); }
.nav-backdrop { display: none; }
.tab.active { background: rgba(255,255,255,.15); color: white; }
.tab:hover { background: rgba(255,255,255,.1); }
.btn-link { background: transparent; color: rgba(255,255,255,.85); border: 0; cursor: pointer; font-weight: 600; }

.app-main { max-width: 1200px; margin: 20px auto; padding: 0 18px; }
.tab-panel { display: none; }
.tab-panel.active { display: block; }

/* ============================================================
   Admin SPA — LEFT SIDEBAR NAV (tablet & desktop, ≥769px)
   Converts the top header into a fixed 240px left sidebar.
   Below 769px the existing mobile top-bar layout takes over.
   ============================================================ */
@media (min-width: 769px) {
  /* Sidebar offset is for the admin SPA only. The employee/crew portal also
     carries .theme-app but has no left sidebar, so exclude it (otherwise the
     240px gutter shows as empty space on the left). */
  .theme-app:not(.theme-mobile) { padding-left: 240px; }
  .nav-toggle { display: none !important; }
  .nav-backdrop { display: none !important; }

  .app-header {
    position: fixed;
    top: 0;
    left: 0;
    width: 240px;
    height: 100vh;
    padding: 22px 0 18px;
    box-shadow: 2px 0 12px rgba(0,0,0,.18);
    z-index: 100;
  }
  .app-header-inner {
    max-width: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 0;
    height: 100%;
    flex-wrap: nowrap;
  }
  .app-brand {
    padding: 0 20px 18px;
    border-bottom: 1px solid rgba(255,255,255,.08);
    font-size: 17px;
    flex-shrink: 0;
  }
  .app-brand-logo { max-height: 28px; }
  .app-brand-sub {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.55);
  }
  .app-brand-divider { display: none; }

  .tabs {
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    padding: 14px 10px;
    flex: 1 1 auto;
    overflow-y: auto;
    flex-wrap: nowrap;
  }
  .tab-section-label {
    padding: 14px 14px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }
  .tab-section-label:first-child { padding-top: 4px; }
  .tab {
    width: 100%;
    text-align: left;
    padding: 10px 14px;
    border-radius: 8px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
    position: relative;
    transition: background .15s ease, color .15s ease;
  }
  .tab:hover { background: rgba(255,255,255,.07); color: rgba(255,255,255,.95); }
  .tab.active {
    background: rgba(255,255,255,.1);
    color: #ffffff;
    padding-left: 18px;
  }
  .tab.active::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
    box-shadow: 0 0 8px rgba(226,57,157,.45);
  }

  .app-header-inner #btn-logout {
    margin-top: auto;
    padding: 14px 22px;
    border-top: 1px solid rgba(255,255,255,.08);
    text-align: left;
    font-size: 13px;
    color: rgba(255,255,255,.7);
    flex-shrink: 0;
  }
  .app-header-inner #btn-logout:hover { color: #ffffff; }

  .app-main {
    max-width: 1240px;
    margin: 24px auto;
    padding: 0 32px;
  }
}
.panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; flex-wrap: wrap; gap: 10px; }
.panel-head h2 { margin: 0; color: #1A2B4A; }
.filters { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.filters select, .filters input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 7px; font-size: 14px; background: white; }
.check-label { display: flex; gap: 6px; align-items: center; font-size: 14px; }

.btn-sm { padding: 7px 14px; font-size: 13px; }
.table-wrap { background: white; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { background: #fafafa; padding: 12px 14px; text-align: left; font-size: 12px; text-transform: uppercase; color: #666; font-weight: 700; border-bottom: 1px solid #eee; }
.data-table td { padding: 12px 14px; border-bottom: 1px solid #f0f0f0; font-size: 14px; vertical-align: middle; }
.data-table tr:hover { background: #fafafa; }
.data-table.compact th, .data-table.compact td { padding: 8px 10px; }

.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; background: #eee; color: #333; }
.pill-new_request { background: #FFF3CD; color: #856404; }
.pill-confirmed { background: #D4EDDA; color: #155724; }
.pill-needs_follow_up { background: #FFE0B2; color: #BF360C; }
.pill-scheduled { background: #E1BEE7; color: #4A148C; }
.pill-delivered { background: #B3E5FC; color: #01579B; }
.pill-picked_up { background: #C8E6C9; color: #1B5E20; }
.pill-cancelled { background: #FFCDD2; color: #B71C1C; }
.pill-pending_deposit { background: #FFE0B2; color: #8a5a00; }
.pill-abandoned { background: #E0E0E0; color: #5a3a00; }
.pill-readiness { background: #ECEFF1; color: #37474F; }

.readiness-badge { display: inline-block; padding: 3px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; margin: 2px 4px 2px 0; }
.readiness-badge.ok { background: #D4EDDA; color: #155724; }
.readiness-badge.no { background: #FFEBEE; color: #B71C1C; }
.badges-row { display: flex; flex-wrap: wrap; gap: 4px; margin: 10px 0 16px; }

.modal { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: flex; align-items: center; justify-content: center; padding: 20px; z-index: 1000; }
.modal.hidden { display: none; }
/* The admin/employee modal overlay must fill the ENTIRE viewport so clicking
   anywhere in the dark area closes the window (desktop + mobile). An older
   `.modal { max-width:640px; border-radius:16px }` rule earlier in this file
   was leaking onto the overlay and shrinking the clickable backdrop to a narrow
   strip on the left — this higher-specificity rule neutralizes that. */
.theme-app .modal { width: 100%; max-width: none; height: 100%; border-radius: 0; background: rgba(0,0,0,.55); padding: 20px; box-sizing: border-box; }
.modal-card { background: white; padding: 24px 28px; border-radius: 14px; width: 100%; max-width: 540px; max-height: 90vh; overflow-y: auto; box-shadow: 0 24px 60px rgba(0,0,0,.3); }
.modal-card.wide { max-width: 900px; }
.modal-card label { display: block; margin: 10px 0 6px; font-weight: 600; font-size: 13px; color: #444; }
.modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea { width: 100%; padding: 9px 12px; border: 1px solid #ddd; border-radius: 7px; font-size: 14px; box-sizing: border-box; font-family: inherit; }
.modal-card input[type="checkbox"], .modal-card input[type="radio"] { width: 18px; height: 18px; }
.modal-actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 18px; }
.modal-card .row { display: grid; grid-template-columns: 1fr; gap: 10px; }
.modal-card .row.two { grid-template-columns: 1fr 1fr; }

/* Booking detail */
.bd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 14px 0; }
.bd-section { background: #fafafa; padding: 14px 16px; border-radius: 10px; margin-bottom: 14px; }
.bd-section h3 { margin: 0 0 10px; font-size: 15px; color: #1A2B4A; }
.bd-section h4 { margin: 14px 0 6px; font-size: 13px; }

/* Booking-detail summary card (always-visible top block) */
.bd-summary { background: #fff; border: 1px solid #e7e9ee; border-radius: 12px; padding: 16px 18px; margin-bottom: 8px; }
.bd-summary h2 { margin: 0 0 4px; font-size: 20px; }
.bd-contact-line { margin: 2px 0; font-size: 14px; color: #333; }
.bd-contact-line a { color: #1A2B4A; text-decoration: none; }
.bd-contact-line a:hover { text-decoration: underline; }

/* Collapsible booking-detail sections — each gray card becomes a
   click-to-expand panel so a fresh booking opens clean instead of as a
   tall wall of stacked sections. The whole summary bar is the toggle. */
details.bd-section { padding: 0; overflow: hidden; }
details.bd-section > summary {
  list-style: none;
  cursor: pointer;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  user-select: none;
}
details.bd-section > summary::-webkit-details-marker { display: none; }
details.bd-section > summary h3 { margin: 0; display: inline; }
details.bd-section > summary::after {
  content: '⌄';
  margin-left: auto;
  color: #9aa0ab;
  font-size: 18px;
  line-height: 1;
  transform: translateY(-3px);
  transition: transform .15s ease;
}
details.bd-section[open] > summary::after { transform: translateY(1px) rotate(180deg); }
details.bd-section > summary:hover h3 { color: #7C5DDE; }
details.bd-section > .bd-section-body { padding: 0 16px 16px; }
.activity-list { max-height: 240px; overflow-y: auto; }
.activity-row { padding: 8px 0; border-bottom: 1px solid #eee; font-size: 13px; }
.photo-group-head { font-size: 13px; text-transform: uppercase; color: #888; margin-top: 12px; }
.photo-gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 8px; margin: 6px 0; }
.photo-gallery img { width: 100%; height: 110px; object-fit: cover; border-radius: 8px; cursor: pointer; }
.checklist-view { list-style: none; padding: 0; margin: 0; }
.checklist-view li { padding: 5px 0; border-bottom: 1px solid #eee; font-size: 14px; }
.checklist-edit-list { list-style: none; padding: 0; margin: 0; }
.checklist-edit-list li { display: flex; gap: 8px; padding: 6px 0; align-items: center; }
.checklist-edit-list input[type="text"] { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; }
.add-item { display: flex; gap: 8px; margin-top: 12px; }
.add-item input { flex: 1; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; }

/* Reports */
.reports-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; }
.stat-card { background: white; padding: 18px 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.stat-card.alert { border-left: 4px solid #E2399D; }
.stat-label { font-size: 12px; color: #888; text-transform: uppercase; font-weight: 700; }
.stat-value { font-size: 26px; font-weight: 800; color: #1A2B4A; margin-top: 4px; }

/* ============================================================
   Employee mobile
   ============================================================ */
.theme-mobile { background: #f4f5f7; }
.emp-header { background: linear-gradient(180deg, #0a1426 0%, #1A2B4A 100%); color: white; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; box-shadow: 0 2px 8px rgba(0,0,0,.15); }
.emp-brand { font-family: 'Inter', sans-serif; font-weight: 800; font-size: 17px; display: inline-flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }

/* Employee tab buttons (Jobs / Expenses) */
.emp-tabs { display: flex; gap: 6px; padding: 10px 12px 0; background: #f4f5f7; position: sticky; top: 0; z-index: 20; }
.emp-tab-btn {
  flex: 1;
  padding: 10px 14px;
  background: white;
  color: #1A2B4A;
  border: 1px solid rgba(0,0,0,.1);
  border-radius: 999px;
  font-weight: 700;
  font-size: 14px;
  cursor: pointer;
}
.emp-tab-btn.active {
  background: #1A2B4A;
  color: white;
  border-color: #1A2B4A;
  box-shadow: 0 4px 12px rgba(26,43,74,.25);
}
.emp-filter { padding: 12px 16px; background: white; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; border-bottom: 1px solid #eee; }
.emp-filter input { padding: 8px 12px; border: 1px solid #ddd; border-radius: 7px; }

#jobs-list { padding: 14px; max-width: 700px; margin: 0 auto; }
.job-card { background: white; padding: 16px; border-radius: 12px; box-shadow: 0 2px 10px rgba(0,0,0,.05); margin-bottom: 14px; }
.job-card-top { display: flex; gap: 12px; justify-content: space-between; }
.job-card-main { display: flex; gap: 12px; flex: 1; min-width: 0; }
.job-card-info { flex: 1; min-width: 0; }
.job-customer { font-size: 18px; font-weight: 800; color: #1A2B4A; line-height: 1.2; }
.job-date { font-size: 13px; font-weight: 700; color: #4a5a78; margin-top: 1px; }
.job-address, .job-meta { margin-top: 2px; }

/* Collapsible job card — a tappable summary header tucks the controls away,
   like the admin booking rows. Tap the header (or Enter/Space) to open/close. */
.job-card-head { display: flex; gap: 12px; align-items: center; cursor: pointer; user-select: none; }
.job-card-head:focus-visible { outline: 2px solid #0098FF; outline-offset: 2px; border-radius: 8px; }
.job-card-headmeta { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; flex-shrink: 0; }
.job-status-pill { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.job-status-pill-pending { background: #eef1f7; color: #5a6b8c; }
.job-status-pill-on_my_way { background: #e7f0ff; color: #1a5fd0; }
.job-status-pill-arrived { background: #fff4e1; color: #a25b00; }
.job-status-pill-setup_complete { background: #e6f7ec; color: #0a7a0a; }
.job-status-pill-picked_up { background: #eef1f7; color: #3a4663; }
.job-collect-chip { font-size: 11px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; background: #fdeaea; color: #b02a2a; border: 1px solid #f3b7b7; }
.job-card-chevron { font-size: 14px; color: #9aa6c0; line-height: 1; }
.job-card-body { margin-top: 12px; }
.job-card.expanded { box-shadow: 0 6px 20px rgba(0,152,255,.14); }

/* Status badges — one compact row under the card identity */
.job-badges { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 10px; }

/* Attention hints — grouped chips (arrival window, drop-off, stakes) */
.job-hints { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.job-hint { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 9px; border-radius: 999px; line-height: 1.3; }
.job-hint-time { background: #fff4e1; color: #8a6300; border: 1px solid #fac775; }
.job-hint-dropoff { background: #fdeaea; color: #b02a2a; border: 1px solid #f3b7b7; }
.job-hint-stake { background: #f1ecff; color: #6a47d0; border: 1px solid #cfc0f5; }

/* Customer-requested specific time — big, can't-miss banner. This is a hard
   ask (setup/pickup by a certain time), so it gets prominence over the chips. */
.job-time-required {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 12px 14px;
  border-radius: 10px;
  background: linear-gradient(135deg, #fff0f5 0%, #ffe1ec 100%);
  border: 2px solid #f06292;
}
.job-time-required-icon { font-size: 30px; line-height: 1; flex-shrink: 0; }
.job-time-required-text { min-width: 0; }
.job-time-required-label {
  font-size: 11px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #ad1457;
}
.job-time-required-value {
  font-size: 22px;
  font-weight: 800;
  color: #1A2B4A;
  line-height: 1.15;
  margin-top: 2px;
}
@media (max-width: 600px) {
  .job-time-required-value { font-size: 19px; }
  .job-time-required-icon { font-size: 26px; }
}

.job-actions { display: flex; gap: 8px; margin: 12px 0 0; flex-wrap: wrap; }
.job-actions .btn { flex: 1; min-width: 120px; }
.job-status-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.job-status-grid .btn { padding: 12px; font-size: 14px; }
/* Crew job-status tracker buttons. A step not yet done stays pink (.btn-primary,
   the coral brand colour). The moment the crew taps it, it turns this clean
   bright green to confirm it's done. Every completed step uses the same green so
   the progress reads at a glance; tapping a green step undoes it. */
.btn-status-done {
  background: #16a34a; border: 2px solid #16a34a; color: #fff;
  box-shadow: 0 4px 14px rgba(22,163,74,0.30); cursor: pointer;
}
.btn-status-done:hover { background: #15803d; border-color: #15803d; }
.job-status-hint { margin-top: 8px; font-size: 12.5px; color: #5b6b7b; text-align: center; }
.job-expand-btn { background: transparent; border: 0; color: #1A2B4A; padding: 12px 0 4px; font-weight: 600; cursor: pointer; width: 100%; text-align: left; }
.job-expand-body { margin-top: 8px; padding-top: 12px; border-top: 1px solid #eee; }
.job-notes { background: #FFF9E6; padding: 10px 12px; border-radius: 8px; margin: 8px 0; font-size: 14px; }
.job-notes p { margin: 4px 0; }

/* Crew portal — consistent section headings + spacing across cards & modals */
.job-expand-body h4 { margin: 16px 0 6px; font-size: 14px; color: #1A2B4A; }
.job-expand-body h4:first-child { margin-top: 4px; }
.modal-card h4 { margin: 14px 0 6px; font-size: 14px; color: #1A2B4A; }
.emp-filter label { font-weight: 600; font-size: 13px; color: #444; display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.emp-filter .btn { min-height: 40px; }
/* Active job-list filter (Today / This week / This month / All upcoming). */
.emp-filter .btn[data-jobfilter].active { background: rgba(0,152,255,.18); border-color: #0098FF; color: #fff; font-weight: 700; }
main#blockout-list, main#mileage-list, main#expense-list, main#pay-summary { padding: 14px; max-width: 700px; margin: 0 auto; }

.photo-buttons { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 10px; }

/* Shared photo picker (job photos, damage report, expense receipt) */
.photo-capture-actions { display: flex; gap: 8px; margin: 6px 0; }
.photo-capture-actions .btn { flex: 1; }
.photo-preview-strip { display: flex; gap: 8px; flex-wrap: wrap; margin: 6px 0; }
.photo-preview-count { margin: 0 0 6px; }
.photo-thumb { position: relative; width: 64px; height: 64px; }
.photo-thumb img { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; border: 1px solid #ddd; }
.photo-thumb-remove {
  position: absolute; top: -6px; right: -6px;
  width: 20px; height: 20px; border-radius: 50%;
  background: #1A2B4A; color: #fff; border: 0; cursor: pointer;
  font-size: 12px; line-height: 1; padding: 0;
  display: flex; align-items: center; justify-content: center;
}
.checklist-mobile { list-style: none; padding: 0; }
.checklist-mobile li { padding: 8px 0; border-bottom: 1px solid #eee; }
.checklist-mobile label { display: flex; gap: 12px; align-items: flex-start; cursor: pointer; }
.checklist-mobile input[type="checkbox"] { width: 22px; height: 22px; flex-shrink: 0; margin-top: 2px; }

/* v3 additions */
.settings-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 720px) { .settings-grid { grid-template-columns: 1fr; } }
.settings-section { background: white; padding: 16px 18px; border-radius: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.05); }
.settings-section h3 { margin: 0 0 8px; font-size: 15px; color: #1A2B4A; }
.settings-section label { display: block; margin: 8px 0 4px; font-weight: 600; font-size: 13px; }
.settings-section input, .settings-section textarea { width: 100%; padding: 8px 10px; border: 1px solid #ddd; border-radius: 6px; font-size: 14px; box-sizing: border-box; font-family: inherit; }
.ack { padding: 3px 0; font-size: 13px; }
.ack.yes { color: #1B5E20; }
.ack.no { color: #B71C1C; }

/* Employee route banner */
.route-banner { background: linear-gradient(135deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%); color: white; padding: 14px 16px; border-radius: 12px; margin-bottom: 14px; display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.route-banner-title { font-weight: 700; font-size: 16px; }
.route-banner-sub { font-size: 13px; opacity: .92; }
.route-banner .btn { background: white; color: #1A2B4A; }

/* Calendar */
.cal-header-row { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-header-row > div { padding: 6px 8px; font-size: 12px; font-weight: 700; color: #666; text-transform: uppercase; text-align: center; }
.cal-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 4px; }
.cal-cell { background: white; border-radius: 8px; padding: 6px; min-height: 90px; border: 1px solid #eee; cursor: pointer; transition: border-color .15s; }
.cal-cell:hover { border-color: #E2399D; }
.cal-cell.empty { background: transparent; border: 0; cursor: default; }
.cal-cell.empty:hover { border: 0; }
.cal-cell.today { border-color: #E2399D; border-width: 2px; padding: 5px; }
.cal-cell.blocked { background: #FFEBEE; }
.cal-cell.has-bookings { background: #F0F8FF; }
.cal-day-num { font-weight: 700; font-size: 13px; color: #1A2B4A; margin-bottom: 4px; }
.cal-evt { display: block; font-size: 11px; padding: 2px 6px; margin: 2px 0; border-radius: 4px; cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-evt:hover { opacity: 0.85; }
.cal-evt-more { font-size: 10px; color: #888; padding: 0 6px; }
.cal-blocked { font-size: 10px; color: #B71C1C; padding: 2px 4px; background: white; border-radius: 4px; margin: 2px 0; display: flex; justify-content: space-between; align-items: center; }
.cal-unblock { background: transparent; border: 0; color: #B71C1C; cursor: pointer; font-weight: 700; padding: 0 4px; font-size: 14px; }
.card-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; margin: 6px 0; }
.card-thumbs img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 4px; }

/* Delivery banner on booking form */
.delivery-banner { margin-top: 6px; padding: 8px 12px; border-radius: 8px; font-size: 13px; line-height: 1.4; }
.delivery-banner.ok { background: #E8FFE8; border: 1px solid #BDE8BD; color: #1B5E20; }
.delivery-banner.warn { background: #FFF4E1; border: 1px solid #FAC775; color: #5C3A02; }
.delivery-banner.muted { background: #f7f5f0; border: 1px solid #eee; color: #666; }

/* Address autocomplete dropdown (booking form) */
#address-field { position: relative; }
.address-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 30;
  margin-top: 4px; background: #fff; border: 1px solid #d8dbe0;
  border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  max-height: 280px; overflow-y: auto;
}
.address-suggest-item {
  padding: 12px 12px; cursor: pointer; border-bottom: 1px solid #f0f0f0;
  display: flex; flex-direction: column; gap: 2px;
  /* Snappier taps on mobile: skip the 300ms click delay and the grey flash. */
  touch-action: manipulation; -webkit-tap-highlight-color: rgba(0,0,0,.06);
}
.address-suggest-item:active { background: #ffe9eb; }
.address-suggest-item:last-child { border-bottom: none; }
.address-suggest-item:hover,
.address-suggest-item.active { background: #fff3f4; }
.address-suggest-item .as-main { font-size: 14px; font-weight: 700; color: #1c1c1c; }
.address-suggest-item .as-sub { font-size: 12px; color: #777; }

/* Employee portal tabs (mobile) */
.emp-tabs { display: flex; gap: 0; background: #fff; border-bottom: 1px solid #e3e6eb; position: sticky; top: 0; z-index: 5; }
.emp-tab-btn { flex: 1; padding: 14px 8px; background: transparent; border: none; border-bottom: 3px solid transparent; font-size: 14px; font-weight: 600; color: #666; cursor: pointer; }
.emp-tab-btn.active { color: #d23; border-bottom-color: #d23; background: #fff8f8; }

/* Status pills */
.pill { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.4; }
.pill.ok { background: #e8ffe8; color: #1b5e20; border: 1px solid #bde8bd; }
.pill.warn { background: #fff4e1; color: #5c3a02; border: 1px solid #fac775; }
.pill.bad { background: #ffe6e6; color: #8a1a1a; border: 1px solid #f5b5b5; }

.hidden { display: none !important; }

/* Pre-trip equipment checklist card */
.pre-trip-card { background: #fff8ea; border: 1px solid #f5d97b; border-radius: 10px; padding: 12px 14px; margin: 12px 0; }
.pre-trip-card h4 { color: #8a6300; }
.pre-trip-card .checklist-mobile { margin: 4px 0; }

/* Info banner — for safety/legal heads-up sections */
.info-banner { background: #fff8ea; border: 1px solid #f5d97b; border-radius: 8px; padding: 12px 14px; font-size: 14px; line-height: 1.5; }
.info-banner p { margin: 0; }
.info-banner a { color: #5a4400; text-decoration: underline; }

/* ===== POLISH PASS — May 23, 2026 ===== */

/* My Pay tab cards */
.pay-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 12px;
  margin: 16px 0 8px;
}
.pay-stat-card {
  background: #fff;
  border: 1px solid #e3e6eb;
  border-radius: 14px;
  padding: 18px 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.04);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.pay-stat-card:hover { transform: translateY(-1px); box-shadow: 0 4px 14px rgba(0,0,0,.07); }
.pay-stat-card.pay-stat-ok { border-color: #bde8bd; background: #f4fff4; }
.pay-stat-card.pay-stat-warn { border-color: #f5d97b; background: #fffaec; }
.pay-stat-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; color: #666; font-weight: 700; }
.pay-stat-value { font-size: 28px; font-weight: 800; color: #1a1a1a; margin: 4px 0 2px; line-height: 1.1; }
.pay-stat-sub { font-size: 12px; color: #777; }

.pay-list { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.pay-item {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  background: #fff; border: 1px solid #e3e6eb; border-radius: 10px; padding: 12px 14px;
  transition: border-color 0.15s ease;
}
.pay-item:hover { border-color: #c3c6cb; }
.pay-item-title { font-weight: 600; font-size: 15px; }

/* Polish: smoother button + pill transitions */
.btn { transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; }
.pill { transition: background 0.15s ease; }

/* Polish: bigger touch targets on mobile */
@media (max-width: 600px) {
  .btn-sm { padding: 10px 14px; font-size: 14px; }
  .btn-link { padding: 8px 4px; display: inline-block; }
  .emp-tab-btn { padding: 16px 8px; font-size: 15px; }
  .pay-stat-value { font-size: 24px; }
  .pay-stats { grid-template-columns: 1fr; }
}

/* Polish: cleaner job card hover */
.job-card { transition: box-shadow 0.15s ease, transform 0.1s ease; }
.job-card:hover { box-shadow: 0 4px 18px rgba(0,0,0,.08); }

/* Polish: cleaner modals */
.modal-card {
  animation: modalIn 0.18s ease-out;
  box-shadow: 0 12px 48px rgba(0,0,0,.25);
}
@keyframes modalIn {
  from { opacity: 0; transform: translateY(8px) scale(0.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* Polish: pill spacing when stacked */
.pill + .pill { margin-left: 4px; }

/* Polish: focus states for accessibility */
.btn:focus-visible,
.btn-link:focus-visible,
.emp-tab-btn:focus-visible,
.tab:focus-visible {
  outline: 2px solid #4ECDC4;
  outline-offset: 2px;
}

/* Polish: prettier scrollbar (webkit) */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #cdd2d8; border-radius: 6px; }
::-webkit-scrollbar-thumb:hover { background: #b0b6be; }

/* Polish: empty state styling */
.empty-state {
  text-align: center; padding: 40px 20px; color: #888;
  background: #fafbfc; border: 2px dashed #e3e6eb; border-radius: 12px;
}
.empty-state-icon { font-size: 36px; margin-bottom: 8px; opacity: 0.6; }

/* Polish: status banners */
.status-banner {
  padding: 12px 16px; border-radius: 10px; font-size: 14px; line-height: 1.5;
  display: flex; align-items: center; gap: 10px;
}
.status-banner-warn { background: #fff8ea; border: 1px solid #f5d97b; color: #5a4400; }
.status-banner-ok { background: #f0fff0; border: 1px solid #bde8bd; color: #1b5e20; }
.status-banner-error { background: #ffeaea; border: 1px solid #f5b5b5; color: #8a1a1a; }

/* ===== INFLATABLE CARD PICKER ===== */
.inflatable-picker {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin: 8px 0 20px;
}

.inflatable-picker-loading {
  grid-column: 1 / -1;
  padding: 32px;
  text-align: center;
  color: #888;
  background: #fafbfc;
  border: 2px dashed #e3e6eb;
  border-radius: 14px;
}

.inflatable-card {
  /* Reset button defaults */
  appearance: none;
  border: 2px solid #e3e6eb;
  background: white;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  position: relative;
}

.inflatable-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
  border-color: #c3c6cb;
}

.inflatable-card:focus-visible {
  outline: none;
  border-color: #0098FF;
  box-shadow: 0 0 0 4px rgba(0, 152, 255, 0.3);
}

/* Selected state — K&E brand: a bold blue frame (solid blue ring hugging the
   border, so it reads thick without shifting the grid) + a blue lift glow.
   Paired with the red/white checkmark badge below for an unmistakable "picked". */
.inflatable-card.selected {
  border-color: #0098FF;
  box-shadow: 0 0 0 3px #0098FF, 0 14px 30px rgba(0, 152, 255, 0.30);
  transform: translateY(-3px);
}

.inflatable-card.selected:hover {
  transform: translateY(-5px);
  box-shadow: 0 0 0 3px #0098FF, 0 18px 40px rgba(0, 152, 255, 0.38);
}

/* Media area */
.inflatable-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: linear-gradient(135deg, #E6F8FE 0%, #F0E6FB 50%, #FCEAF4 100%);
  overflow: hidden;
}

.inflatable-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.inflatable-card:hover .inflatable-card-media img {
  transform: scale(1.04);
}

.inflatable-card-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 56px;
  color: #E2399D;
  background: linear-gradient(135deg, #E6F8FE 0%, #F0E6FB 50%, #FCEAF4 100%);
}

.inflatable-card-placeholder span {
  font-size: 14px;
  margin-top: 6px;
  color: #b3504c;
  font-weight: 600;
  text-align: center;
  padding: 0 12px;
}

/* Selected checkmark — larger badge with a white ring so it pops on any photo.
   Red→hot-pink K&E gradient fill + white check when selected. */
.inflatable-card-check {
  position: absolute;
  top: 12px;
  right: 12px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: white;
  color: #FF1E4E;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  font-size: 24px;
  line-height: 1;
  border: 3px solid #fff;
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.22);
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
}

.inflatable-card.selected .inflatable-card-check {
  opacity: 1;
  transform: scale(1);
  background: linear-gradient(135deg, #FF2D55 0%, #FF0A7A 100%);
  color: #fff;
}

/* Body area */
.inflatable-card-body {
  padding: 16px 18px 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.inflatable-card-name {
  font-size: 18px;
  font-weight: 700;
  color: #1a1a1a;
  line-height: 1.25;
}

.inflatable-card-price {
  font-size: 22px;
  font-weight: 800;
  color: #E2399D;
  line-height: 1;
  margin-top: 4px;
}

.inflatable-card-price-sub {
  font-size: 13px;
  font-weight: 500;
  color: #888;
}

.inflatable-card-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}

.inf-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  background: #f4f5f7;
  color: #555;
}

.inf-badge-water {
  background: #E0F4FB;
  color: #006a8c;
}

.inf-badge-dry {
  background: #FFF4E0;
  color: #8a5a00;
}

/* Mobile tweaks */
@media (max-width: 600px) {
  .inflatable-picker {
    grid-template-columns: 1fr;
    gap: 14px;
  }
  .inflatable-card-name { font-size: 17px; }
  .inflatable-card-price { font-size: 20px; }
}

/* ===== ADMIN MOBILE FIX ===== May 23, 2026 */

/* Horizontal scroll for wide tables on mobile only */

@media (max-width: 768px) {
  /* Tab panels scroll horizontally when content is wider than screen */
  .tab-panel.active {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Page padding tighter on mobile */
  .admin-shell, .container, main { padding-left: 12px; padding-right: 12px; }

  /* Panel head stacks: heading on top, filters wrap below */
  .panel-head {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }
  .panel-head h2 { font-size: 20px; }

  /* Filters: full-width selects, wrap nicely */
  .filters {
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .filters label {
    display: flex;
    flex-direction: column;
    font-size: 12px;
    font-weight: 600;
    color: #666;
    gap: 4px;
  }
  .filters select,
  .filters input {
    width: 100%;
    padding: 12px 14px;
    font-size: 16px; /* prevents iOS zoom-on-focus */
  }
  .filters .btn-sm {
    padding: 12px 16px;
    font-size: 15px;
    width: 100%;
  }

  /* Tabs: horizontal scroll if too many */
  .tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap;
    padding-bottom: 4px;
    margin: 0 -12px;
    padding-left: 12px;
    padding-right: 12px;
  }
  .tabs::-webkit-scrollbar { height: 4px; }
  /* Section labels are sidebar-only — hide in the horizontal mobile tab bar */
  .tab-section-label { display: none; }
  .tab {
    flex-shrink: 0;
    padding: 10px 14px;
    font-size: 14px;
  }

  /* Tables: wrap in scrollable container via parent overflow */
  .data-table {
    font-size: 13px;
  }
  .data-table th,
  .data-table td {
    padding: 8px 10px;
    white-space: nowrap;
  }
  .data-table th:first-child,
  .data-table td:first-child {
    position: sticky;
    left: 0;
    background: inherit;
    z-index: 1;
  }
  .data-table tbody tr { background: white; }
  .data-table tbody tr:hover { background: #fafafa; }
  .data-table .btn-sm {
    padding: 6px 12px;
    font-size: 13px;
  }

  /* Modal: full width with breathing room */
  .modal { padding: 0; align-items: flex-end; }
  .modal-card {
    max-width: 100% !important;
    width: 100% !important;
    max-height: 92vh;
    margin: 0;
    border-radius: 18px 18px 0 0;
    padding: 20px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .modal-card h2 { font-size: 22px; }
  .modal-card h3 { font-size: 18px; }
  .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
  }
  .modal-actions .btn {
    width: 100%;
    padding: 14px;
    font-size: 16px;
  }

  /* Form rows: stack to single column on mobile */
  .row.two,
  .row.three,
  .form-grid-2 {
    grid-template-columns: 1fr !important;
    display: grid;
  }
  .row {
    flex-direction: column;
    gap: 8px;
  }

  /* Inputs: prevent iOS zoom on focus by setting font-size to 16px */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="password"],
  select,
  textarea {
    font-size: 16px;
  }

  /* Headings tighter */
  h1 { font-size: 24px; }
  h2 { font-size: 20px; }
  h3 { font-size: 17px; }

  /* Buttons: minimum touch target 44px */
  .btn { min-height: 44px; }
  .btn-link { padding: 10px 4px; min-height: 36px; }
}

/* Even tighter for very small phones */
@media (max-width: 380px) {
  .panel-head h2 { font-size: 18px; }
  .data-table { font-size: 12px; }
  .data-table th, .data-table td { padding: 6px 8px; }
}

/* ===== BRAND LOGO ===== */
.app-brand-logo,
.brand-logo img {
  height: 36px;
  width: auto;
  vertical-align: middle;
  display: inline-block;
}
.brand-logo {
  display: inline-flex !important;
  align-items: center;
  text-decoration: none !important;
  gap: 0 !important;
}
.app-brand-logo {
  margin-right: 4px;
}

/* Hide the old text-based brand bits since the image already contains "K&E Inflatables" */
.app-brand-dot,
.brand-logo .logo-dot {
  display: none !important;
}

/* Hero gradient bar — for headers + accents */
.brand-gradient-bar {
  height: 4px;
  background: linear-gradient(90deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
  width: 100%;
}

@media (max-width: 600px) {
  .app-brand-logo,
  .brand-logo img {
    height: 30px;
  }
}

/* ===== ADD-ON PICKER ===== */
.addons-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 8px 0 14px;
}

.addons-section { display: flex; flex-direction: column; gap: 8px; }
.addons-section-label {
  font-size: 14px;
  font-weight: 700;
  color: #1A2B4A;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.addons-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 10px;
}

/* Compact tile: a picture on top, then name/price + a short description.
   Tapping the card expands the full description ("loads out"). */
.addon-card {
  background: white;
  border: 2px solid #e3e6eb;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.1s ease;
}
.addon-card:active { transform: scale(0.99); }
.addon-card.addon-selected {
  border-color: #7C5DDE;
  box-shadow: 0 4px 14px rgba(124, 93, 222, 0.12);
}

.addon-thumb {
  width: 100%;
  height: 104px;
  object-fit: cover;
  display: block;
  background: #f3f4f7;
}
.addon-card.addon-noimg .addon-thumb { display: none; }

.addon-body {
  padding: 9px 11px 11px;
  display: flex;
  flex-direction: column;
  gap: 5px;
  min-width: 0;
}
.addon-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}
.addon-name { font-weight: 700; font-size: 14px; color: #1A2B4A; line-height: 1.2; min-width: 0; }
.addon-price { font-weight: 800; color: #7C5DDE; font-size: 14px; white-space: nowrap; flex-shrink: 0; }

/* Short blurb by default — clamped to 2 lines; unclamps when the card is open. */
.addon-desc {
  font-size: 12px;
  color: #666;
  line-height: 1.35;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.addon-card.expanded .addon-desc {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.addon-more-cue { font-size: 11px; font-weight: 700; color: #7C5DDE; }
.addon-card.expanded .addon-more-cue { display: none; }

.addon-stepper {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin-top: 4px;
}
.addon-step-btn {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 2px solid #7C5DDE;
  background: white;
  color: #7C5DDE;
  font-size: 20px;
  font-weight: 800;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
}
.addon-step-btn:hover:not(:disabled) {
  background: #7C5DDE;
  color: white;
}
.addon-step-btn:disabled {
  border-color: #ddd;
  color: #ccc;
  cursor: not-allowed;
}
.addon-step-btn:active:not(:disabled) {
  transform: scale(0.92);
}

.addon-qty {
  font-weight: 800;
  font-size: 18px;
  color: #1A2B4A;
  min-width: 24px;
  text-align: center;
}

.addons-total {
  background: #fafbfc;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  font-size: 14px;
}
.addon-total-header {
  font-weight: 700;
  color: #666;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.addon-total-line {
  display: flex;
  justify-content: space-between;
  padding: 2px 0;
}
.addon-total-grand {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ddd;
  font-weight: 800;
  font-size: 15px;
  color: #1A2B4A;
}

@media (max-width: 600px) {
  /* Two compact tiles per row on phones (was one big full-width row each). */
  .addons-cards { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .addon-thumb { height: 92px; }
}

/* ===== PRICE SUMMARY (booking form estimate) ===== */
.price-summary {
  background: #fafbfc;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
  padding: 16px 18px;
  margin-bottom: 14px;
  font-size: 14px;
}
.price-summary-title {
  font-weight: 700;
  color: #666;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 10px;
}
.price-summary-empty { padding: 2px 0; }
.ps-line {
  display: flex;
  justify-content: space-between;
  padding: 3px 0;
}
.ps-line-muted span:last-child { color: #999; font-style: italic; }
.ps-total {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px dashed #ddd;
  font-weight: 800;
  font-size: 16px;
  color: #1A2B4A;
}
.ps-deposit {
  margin-top: 8px;
  font-weight: 800;
  color: #1B5E20;
}
.ps-balance { color: #666; }
.price-summary-note {
  margin-top: 10px;
  padding-top: 10px;
  border-top: 1px solid #eee;
  line-height: 1.4;
}

/* ===== YARD PHOTO PICKER (booking form) ===== */
.photo-actions {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.photo-actions .btn { flex: 1 1 auto; }
.yard-photo-preview { margin-top: 12px; }
.yard-photo-thumb {
  position: relative;
  display: inline-block;
}
.yard-photo-thumb img {
  width: 140px;
  height: 140px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid #ddd;
  display: block;
}
.yard-photo-remove {
  position: absolute;
  top: -8px;
  right: -8px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #1A2B4A;
  color: #fff;
  border: 0;
  cursor: pointer;
  font-size: 13px;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
@media (max-width: 600px) {
  .photo-actions .btn { flex: 1 1 100%; }
}

/* ===== SIGNATURE PAD ===== */
.signature-block { margin-top: 18px; }
.signature-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
}
.sig-tab {
  flex: 1;
  background: white;
  border: 2px solid #e3e6eb;
  border-radius: 10px;
  padding: 10px 14px;
  font-weight: 600;
  font-size: 14px;
  cursor: pointer;
  color: #555;
  transition: all 0.15s ease;
}
.sig-tab.active {
  border-color: #7C5DDE;
  background: linear-gradient(135deg, rgba(124, 93, 222, 0.06), rgba(226, 57, 157, 0.06));
  color: #7C5DDE;
}
.sig-pane { display: none; }
.sig-pane.active { display: block; }

.sig-canvas-wrap {
  border: 2px dashed #c5cad2;
  border-radius: 10px;
  background:
    linear-gradient(white, white) padding-box,
    repeating-linear-gradient(45deg, #f8f8f8 0 8px, transparent 8px 16px) padding-box;
  margin-bottom: 8px;
  overflow: hidden;
  position: relative;
}
#sig-canvas {
  display: block;
  width: 100%;
  height: 180px;
  touch-action: none;
  background: transparent;
}

.sig-typed-preview {
  margin-top: 12px;
  min-height: 80px;
  padding: 14px;
  /* Theme-aware: the customer portal is dark navy, so a navy ink colour made the
     typed signature nearly invisible. Use the theme text colour (light on dark,
     navy on light) over a subtle surface so the preview is always legible. */
  border: 2px dashed var(--ke-line, #c5cad2);
  border-radius: 10px;
  text-align: center;
  font-family: 'Brush Script MT', 'Lucida Handwriting', cursive;
  font-style: italic;
  font-size: 38px;
  color: var(--ke-text, #1A2B4A);
  background: var(--ke-surface, rgba(0,0,0,.02));
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* ===== Add-on admin pills ===== */
.pill-active { background: #D4EDDA; color: #155724; }
.pill-inactive { background: #f0f0f0; color: #888; }

/* ===== WAVE 1: CHAT, REPORTS, BADGE ===== */

/* Chat thread */
.chat-thread {
  background: #fafbfc;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
  padding: 12px;
  max-height: 360px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 10px;
}
.chat-bubble {
  padding: 10px 12px;
  border-radius: 14px;
  max-width: 80%;
}
.chat-bubble.chat-customer {
  background: #f0e7fb;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.chat-bubble.chat-admin {
  background: linear-gradient(135deg, #1AC4F0, #7C5DDE 60%, #E2399D);
  color: white;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.chat-bubble .chat-sender {
  font-size: 11px;
  font-weight: 700;
  opacity: 0.7;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
}
.chat-bubble .chat-body { font-size: 14px; line-height: 1.4; }
.chat-bubble .chat-time {
  font-size: 11px;
  opacity: 0.6;
  margin-top: 4px;
}
.chat-composer {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  max-width: 100%;
}
.chat-composer textarea {
  flex: 1 1 auto;
  /* Critical: a flex item defaults to min-width:auto and won't shrink below its
     intrinsic (cols-based) width — that pushed the Send button off-screen on
     phones. min-width:0 lets it shrink so the row never overflows. */
  min-width: 0;
  max-width: 100%;
  box-sizing: border-box;
  min-height: 80px;
  font-size: 16px; /* 16px also stops iOS from zooming in on focus */
  line-height: 1.4;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid #c7ccd6;
  resize: vertical;
  font-family: inherit;
  /* Explicit colours so it's readable on the dark portal theme (was inheriting a
     light text colour with no background — the text was invisible as you typed). */
  background: #ffffff;
  color: #14213d;
}
.chat-composer textarea::placeholder { color: #8a93a3; }
.chat-composer .btn { flex-shrink: 0; align-self: stretch; }

/* Inbox items */
.msg-inbox-item {
  background: white;
  border: 1px solid #e3e6eb;
  border-radius: 12px;
  padding: 14px 16px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.msg-inbox-item:hover {
  border-color: #7C5DDE;
  box-shadow: 0 4px 14px rgba(124, 93, 222, 0.12);
}

/* Unread badge in tab */
.unread-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: #E2399D;
  color: white;
  font-size: 11px;
  font-weight: 800;
  margin-left: 4px;
}

/* Report cards */
.reports-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 14px;
}
.report-card {
  background: white;
  border: 2px solid #e3e6eb;
  border-radius: 14px;
  padding: 16px 18px;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.report-card[data-metric]:hover {
  transform: translateY(-3px);
  border-color: #7C5DDE;
  box-shadow: 0 6px 18px rgba(124, 93, 222, 0.14);
}
.report-card .report-label {
  font-size: 13px;
  font-weight: 600;
  color: #666;
  margin-bottom: 6px;
}
.report-card .report-value {
  font-size: 28px;
  font-weight: 800;
  color: #1A2B4A;
  line-height: 1.1;
}
.report-card .report-sub {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}
.report-card.report-profit { background: linear-gradient(135deg, #E6F8FE, #F0E6FB, #FCEAF4); }
.report-card.report-loss { background: #FFEBEE; border-color: #f5c6cb; }
.report-card.report-loss .report-value { color: #c62828; }

@media (max-width: 600px) {
  .chat-bubble { max-width: 90%; }
  .chat-thread { max-height: 280px; }
  .report-card .report-value { font-size: 22px; }
}

/* ===== WAVE 2: PIZZA TRACKER ===== */
.tracker-strip {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin: 16px 0 24px;
  padding: 18px 14px;
  background: linear-gradient(135deg, #E6F8FE 0%, #F0E6FB 50%, #FCEAF4 100%);
  border-radius: 14px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.tracker-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  flex: 1;
  min-width: 80px;
  position: relative;
}
.tracker-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 2px solid #ddd;
  color: #aaa;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 8px;
  transition: all 0.3s ease;
}
.tracker-label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  line-height: 1.2;
}
.tracker-desc {
  font-size: 11px;
  color: #1A2B4A;
  margin-top: 4px;
  font-weight: 600;
}
.tracker-done .tracker-icon {
  background: linear-gradient(135deg, #1AC4F0, #7C5DDE);
  border-color: #7C5DDE;
  color: white;
}
.tracker-done .tracker-label { color: #555; }
.tracker-active .tracker-icon {
  background: linear-gradient(135deg, #7C5DDE, #E2399D);
  border-color: #E2399D;
  color: white;
  transform: scale(1.15);
  box-shadow: 0 4px 14px rgba(226, 57, 157, 0.35);
  animation: tracker-pulse 1.8s ease-in-out infinite;
}
.tracker-active .tracker-label {
  color: #1A2B4A;
  font-weight: 800;
}
@keyframes tracker-pulse {
  0%, 100% { box-shadow: 0 4px 14px rgba(226, 57, 157, 0.35); }
  50% { box-shadow: 0 4px 20px rgba(226, 57, 157, 0.6), 0 0 0 6px rgba(226, 57, 157, 0.1); }
}
.tracker-line {
  flex: 0 0 30px;
  height: 3px;
  background: #ddd;
  margin-top: 21px;
  border-radius: 999px;
}
.tracker-line-done {
  background: linear-gradient(90deg, #1AC4F0, #7C5DDE);
}

@media (max-width: 600px) {
  .tracker-strip { padding: 14px 8px; }
  .tracker-step { min-width: 64px; }
  .tracker-icon { width: 36px; height: 36px; font-size: 16px; }
  .tracker-label { font-size: 10px; }
  .tracker-line { flex: 0 0 12px; margin-top: 17px; }
}

/* Danger zone for delete booking */
.bd-danger-zone {
  background: #fff5f5;
  border: 1px solid #ffd6d6;
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 16px;
}
.bd-danger-zone h3 { color: #c0392b; margin: 0 0 6px; }
.btn-danger {
  background: #c0392b;
  color: white;
  border: 0;
}
.btn-danger:hover:not(:disabled) {
  background: #a93224;
}
.btn-danger:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ===== Employee payment banner ===== */
.pay-banner {
  padding: 12px 14px;
  border-radius: 10px;
  margin: 10px 0;
  font-size: 14px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.pay-banner-paid {
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
  font-weight: 600;
}
.pay-banner-partial {
  background: #fff8e1;
  border: 1px solid #ffd54f;
  color: #5d4037;
}
.pay-banner-partial strong,
.pay-banner-unpaid strong {
  color: #1A2B4A;
  font-size: 16px;
}
.pay-banner-unpaid {
  background: linear-gradient(135deg, #fff5f5 0%, #fee 100%);
  border: 1px solid #ffcdd2;
  color: #c62828;
}
.pay-banner button { align-self: flex-start; margin-top: 4px; }

@media (max-width: 600px) {
  .pay-banner { font-size: 13px; }
}

/* Customer sign-off — a clear "hand the phone to the customer" action right
   on the job card. Single distinct button (amber), not a color-coded set. */
.job-signoff-btn {
  margin: 10px 0;
  background: #D97706;
  color: #fff;
  font-weight: 700;
}
.job-signoff-btn:hover { background: #B45309; }
.job-signoff-done {
  margin: 10px 0;
  padding: 10px 14px;
  border-radius: 10px;
  background: #e8f5e9;
  border: 1px solid #a5d6a7;
  color: #1b5e20;
  font-weight: 600;
  font-size: 14px;
  text-align: center;
}

/* =====================================================
   MOBILE POLISH PASS — header, tabs, modals, job cards
   ===================================================== */

/* --- HEADER LAYOUT FIX (Bug #8) --- */
@media (max-width: 768px) {
  .app-header { padding: 10px 0 0; }
  .app-header-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 0 12px;
  }
  /* Brand row: logo + role + logout */
  .app-brand {
    width: 100%;
    justify-content: space-between;
    font-size: 15px;
    padding-bottom: 10px;
  }
  .app-brand-logo { max-height: 32px !important; }
  .app-brand-divider { display: none; }
  .app-brand-sub { font-size: 13px; opacity: 0.85; }
  /* Logout button: position in the brand row, top-right */
  .app-header-inner #btn-logout {
    position: absolute;
    top: 14px;
    right: 14px;
    color: rgba(255,255,255,.75);
    font-size: 13px;
  }
  /* Tabs row: full width below brand, scrolls horizontally */
  .tabs {
    width: 100%;
    margin: 0;
    padding: 4px 0;
    border-top: 1px solid rgba(255,255,255,0.1);
  }
  .tab {
    min-height: 44px; /* touch target */
    padding: 10px 12px;
    font-size: 13px;
    white-space: nowrap;
  }
  .tab.active {
    background: rgba(255,255,255,0.12);
  }
}

/* --- VERY SMALL SCREENS (iPhone SE, etc.) --- */
@media (max-width: 380px) {
  .app-brand { font-size: 14px; }
  .app-brand-logo { max-height: 28px !important; }
  .tab { font-size: 12px; padding: 8px 10px; }
}

/* --- MODAL POLISH (Bug #6 partial) --- */
.modal {
  /* Make sure backdrop click works by ensuring .modal fills viewport */
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.modal.hidden { display: none; }
.modal-card {
  background: white;
  border-radius: 16px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  padding: 22px 24px;
  box-shadow: 0 24px 64px rgba(0,0,0,0.3);
}

@media (max-width: 600px) {
  .modal { padding: 0; align-items: flex-end; }
  .modal-card {
    border-radius: 18px 18px 0 0;
    max-height: 92vh;
    width: 100%;
    padding: 20px 18px 32px;
    /* Slide-up animation */
    animation: modal-slide-up 0.18s ease-out;
  }
  @keyframes modal-slide-up {
    from { transform: translateY(20px); opacity: 0.5; }
    to { transform: translateY(0); opacity: 1; }
  }
  /* Larger touch targets in modal */
  .modal-card .btn { min-height: 44px; padding: 12px 18px; }
  .modal-card label { font-size: 14px; }
  .modal-card input,
  .modal-card select,
  .modal-card textarea {
    font-size: 16px; /* prevents iOS zoom on focus */
    padding: 12px 14px;
    min-height: 44px;
  }
  .modal-actions {
    flex-direction: column-reverse;
    gap: 8px;
    margin-top: 18px;
  }
  .modal-actions .btn { width: 100%; }
}

/* --- JOB CARDS (employee portal) --- */
@media (max-width: 600px) {
  .job-card {
    padding: 14px 12px !important;
    margin: 0 -2px 12px !important;
  }
  .job-card-top {
    flex-direction: column;
    gap: 10px;
  }
  .job-badges {
    flex-wrap: wrap;
    gap: 4px;
  }
  .job-badges .readiness-badge {
    font-size: 11px;
    padding: 3px 6px;
  }
  .job-status-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
  }
  .job-status-grid .btn {
    min-height: 48px;
    font-size: 14px;
    padding: 12px 8px;
  }
  /* Problem button spans full width */
  .job-status-grid .btn.danger { grid-column: 1 / -1; }
  .job-expand-btn {
    width: 100%;
    text-align: left;
    padding: 10px 4px;
    font-size: 14px;
    min-height: 44px;
  }
}

/* --- ADMIN BOOKING DETAIL MODAL --- */
@media (max-width: 600px) {
  .bd-section {
    padding: 14px 0;
    border-bottom: 1px solid #eee;
  }
  .bd-section h3 { font-size: 15px; margin: 0 0 8px; }
  .bd-section .row.two { grid-template-columns: 1fr; gap: 10px; }
  .bd-section input,
  .bd-section select { width: 100%; }
}

/* --- BUTTONS GLOBAL MOBILE TUNE --- */
@media (max-width: 600px) {
  .btn { min-height: 44px; }
  .btn-sm { min-height: 38px; padding: 8px 14px; font-size: 13px; }
  .btn-block { width: 100%; }
}

/* --- FORMS (book.html, etc.) --- */
@media (max-width: 600px) {
  .form-card { padding: 18px 14px; margin: 12px 8px; }
  .form-card h2 { font-size: 20px; }
  .form-card h3 { font-size: 16px; }
  .row.two,
  .row.three { grid-template-columns: 1fr; gap: 10px; }
  input, select, textarea {
    font-size: 16px; /* iOS zoom prevention */
    padding: 12px 14px;
  }
  .checkbox-row {
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
  }
  .checkbox-row input[type="checkbox"] {
    min-width: 20px;
    min-height: 20px;
    margin-top: 4px;
  }
  .checkbox-row label { font-size: 14px; line-height: 1.4; }
}

/* --- DATA TABLES SCROLL ON MOBILE --- */
@media (max-width: 600px) {
  .data-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 -8px;
    padding: 0 8px;
  }
}

/* --- TRACKER STRIP COMPACT MOBILE --- */
@media (max-width: 600px) {
  .tracker-strip {
    padding: 14px 8px;
    gap: 0;
  }
  .tracker-step {
    min-width: 56px;
    font-size: 10px;
  }
  .tracker-icon {
    width: 32px;
    height: 32px;
    font-size: 14px;
  }
  .tracker-label { font-size: 9px; }
  .tracker-desc { display: none; }
  .tracker-line { flex: 0 0 8px; margin-top: 16px; }
}

/* --- REPORT CARDS GRID ON MOBILE --- */
@media (max-width: 600px) {
  .reports-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px;
  }
  .report-card { padding: 12px 14px; }
  .report-card .report-value { font-size: 20px; }
  .report-card .report-label { font-size: 11px; }
  .report-card .report-sub { font-size: 10px; }
}

/* --- CHAT MOBILE --- */
@media (max-width: 600px) {
  .chat-thread {
    max-height: 260px;
    padding: 10px;
  }
  .chat-bubble {
    max-width: 92%;
    padding: 8px 10px;
    font-size: 14px;
  }
  /* Stack the composer on phones: full-width input with the Send button below it,
     so nothing overflows the edge and the button is easy to tap. */
  .chat-composer { flex-direction: column; align-items: stretch; }
  .chat-composer textarea { font-size: 16px; min-height: 72px; width: 100%; }
  .chat-composer .btn { width: 100%; align-self: stretch; padding-top: 12px; padding-bottom: 12px; }
}

/* ===== HOME PAGE LOGO PLACEMENTS ===== */

/* Navbar logo (replaces the dot+text combo on home page) */
.brand-logo-link {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
}
.nav-logo-img {
  height: 44px;
  width: auto;
  display: block;
  transition: transform .15s ease;
}
.nav-logo-img:hover { transform: scale(1.04); }

/* Hero logo — centered, big, lots of breathing room */
.hero-logo {
  display: block;
  margin: 0 auto 18px;
  max-width: 220px;
  height: auto;
  filter: drop-shadow(0 6px 18px rgba(124,93,222,0.18));
  animation: hero-logo-float 4s ease-in-out infinite;
}
@keyframes hero-logo-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-6px); }
}

/* Footer logo */
.footer-logo {
  display: block;
  margin: 0 auto 14px;
  max-width: 110px;
  height: auto;
  opacity: 0.92;
}

@media (max-width: 600px) {
  .nav-logo-img { height: 36px; }
  .hero-logo { max-width: 160px; margin-bottom: 12px; }
  .footer-logo { max-width: 90px; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-logo { animation: none; }
}

/* Rules grid — cleaner 2-up layout on the home page */
.rules-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
  margin-top: 18px;
}
.rules-grid .rules-card { margin: 0; }
@media (max-width: 768px) {
  .rules-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ============================================================
   DASHBOARD TAB
   ============================================================ */

.dashboard-grid {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* Hero stat cards */
.dashboard-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
@media (max-width: 900px) { .dashboard-stats { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .dashboard-stats { grid-template-columns: 1fr; } }

.dash-stat-card {
  background: white;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  border: 1px solid #eee;
  position: relative;
  overflow: hidden;
  cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease;
}
.dash-stat-card:hover { transform: translateY(-2px); box-shadow: 0 6px 16px rgba(0,0,0,0.08); }
.dash-stat-card:focus-visible { outline: 2px solid #7C5DDE; outline-offset: 2px; }
.dash-stat-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #1AC4F0, #7C5DDE, #E2399D);
}
.dash-stat-card.stat-revenue::before { background: linear-gradient(90deg, #00c853, #64dd17); }
.dash-stat-card.stat-bookings::before { background: linear-gradient(90deg, #1AC4F0, #7C5DDE); }
.dash-stat-card.stat-outstanding::before { background: linear-gradient(90deg, #ff9800, #ff5722); }
.dash-stat-card.stat-month::before { background: linear-gradient(90deg, #7C5DDE, #E2399D); }

.dash-stat-label {
  font-size: 12px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
  margin-bottom: 6px;
}
.dash-stat-value {
  font-family: 'Fredoka', sans-serif;
  font-size: 28px;
  font-weight: 800;
  color: #1A2B4A;
  line-height: 1.1;
}
.dash-stat-sub {
  font-size: 12px;
  color: #888;
  margin-top: 4px;
}

/* Quick actions */
.dash-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.dash-action-btn {
  background: white;
  border: 1px solid #ddd;
  padding: 12px 18px;
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
  font-size: 14px;
  color: #1A2B4A;
  transition: all .15s ease;
  min-height: 44px;
}
.dash-action-btn:hover {
  border-color: #7C5DDE;
  background: linear-gradient(135deg, #E6F8FE, #F0E6FB, #FCEAF4);
  transform: translateY(-1px);
}

/* Main two-column area */
.dash-main {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
@media (max-width: 900px) { .dash-main { grid-template-columns: 1fr; } }

.dash-col { display: flex; flex-direction: column; gap: 14px; }

.dash-card {
  background: white;
  border-radius: 14px;
  padding: 16px 18px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.04);
  border: 1px solid #eee;
}
.dash-card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f0f0f0;
}
.dash-card-head h3 {
  margin: 0;
  font-size: 16px;
  color: #1A2B4A;
}
.dash-card-meta {
  font-size: 13px;
  color: #888;
  font-weight: 600;
}
.dash-empty {
  padding: 24px 12px;
  text-align: center;
  color: #999;
  font-size: 14px;
  font-style: italic;
}

/* Today/tomorrow job cards */
.dash-jobs-list { display: flex; flex-direction: column; gap: 10px; }

.dash-job {
  display: grid;
  grid-template-columns: 90px 1fr auto;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fafbfc;
  border: 1px solid #eee;
  align-items: center;
  cursor: pointer;
  transition: all .12s ease;
}
.dash-job:hover { border-color: #7C5DDE; background: #f5f3ff; }
.dash-job-time {
  font-weight: 700;
  color: #1A2B4A;
  font-size: 13px;
}
.dash-job-customer { font-weight: 700; color: #1A2B4A; font-size: 14px; }
.dash-job-sub { font-size: 12px; color: #666; margin-top: 2px; }
.dash-job-sub.small { font-size: 11px; color: #999; }
.dash-job-status {
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  border-radius: 6px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.dash-job-status.status-new { background: #fff8e1; color: #6d4c00; }
.dash-job-status.status-ready { background: #e3f2fd; color: #1565c0; }
.dash-job-status.status-in-progress { background: #fff3e0; color: #e65100; }
.dash-job-status.status-done { background: #e8f5e9; color: #1b5e20; }

@media (max-width: 600px) {
  .dash-job {
    grid-template-columns: 1fr;
    gap: 4px;
  }
  .dash-job-status { justify-self: start; margin-top: 4px; }
}

/* Alerts list */
.dash-alerts-list { display: flex; flex-direction: column; gap: 8px; }
.dash-alert {
  display: flex;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: #fff8e6;
  border-left: 3px solid #ff9800;
  cursor: pointer;
  align-items: flex-start;
  transition: background .12s ease;
}
.dash-alert:hover { background: #fff3d6; }
.dash-alert-icon { font-size: 18px; line-height: 1; }
.dash-alert-title { font-weight: 700; color: #1A2B4A; font-size: 14px; }
.dash-alert-sub { font-size: 12px; color: #666; margin-top: 2px; }

/* Recent activity */
.dash-activity-list { display: flex; flex-direction: column; gap: 6px; }
.dash-activity {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.dash-activity:hover { background: #f5f3ff; }
.dash-activity-customer { font-weight: 600; color: #1A2B4A; font-size: 14px; }
.dash-activity-sub { font-size: 12px; color: #666; }

/* ============================================================
   QUICK FILTER PILLS
   ============================================================ */
.quick-filters {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin: 0 0 14px;
  padding: 4px 0;
}
.quick-filter {
  background: white;
  border: 1px solid #ddd;
  border-radius: 20px;
  padding: 6px 14px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: #666;
  transition: all .12s ease;
  min-height: 36px;
}
.quick-filter:hover { border-color: #7C5DDE; color: #1A2B4A; }
.quick-filter.active {
  background: linear-gradient(135deg, #1AC4F0, #7C5DDE);
  border-color: transparent;
  color: white;
}

/* ============================================================
   CUSTOMERS TAB
   ============================================================ */

.customers-stats {
  margin: 0 0 14px;
  color: #666;
  font-size: 14px;
}
.customers-stats strong { color: #1A2B4A; }

.customers-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 12px;
}
.customer-card {
  background: white;
  border: 1px solid #eee;
  border-radius: 12px;
  padding: 14px 16px;
  cursor: pointer;
  transition: all .12s ease;
}
.customer-card:hover { border-color: #7C5DDE; box-shadow: 0 4px 12px rgba(124, 93, 222, 0.1); transform: translateY(-1px); }

.customer-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.customer-name {
  font-weight: 700;
  font-size: 15px;
  color: #1A2B4A;
}
.vip-badge {
  font-size: 10px;
  background: linear-gradient(135deg, #FFD700, #FFA500);
  color: white;
  padding: 2px 6px;
  border-radius: 4px;
  margin-left: 4px;
  font-weight: 700;
}
.customer-lifetime {
  font-family: 'Fredoka', sans-serif;
  font-weight: 800;
  color: #00c853;
  font-size: 16px;
}
.customer-meta {
  font-size: 12px;
  color: #666;
  line-height: 1.6;
}
.customer-meta a { color: #7C5DDE; text-decoration: none; }
.customer-meta a:hover { text-decoration: underline; }
.customer-stats {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid #f0f0f0;
  font-size: 12px;
  color: #666;
}
.customer-stats strong { color: #1A2B4A; }

/* Customer history modal */
.customer-history { display: flex; flex-direction: column; gap: 8px; max-height: 400px; overflow-y: auto; }
.customer-history-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 12px;
  background: #fafbfc;
  border-radius: 8px;
  cursor: pointer;
  transition: background .12s ease;
}
.customer-history-row:hover { background: #f5f3ff; }
.hist-date { font-weight: 700; color: #1A2B4A; font-size: 13px; }
.hist-sub { font-size: 12px; color: #666; margin-top: 2px; }
.hist-money { text-align: right; }
.hist-money strong { color: #1A2B4A; font-size: 14px; }

/* ============================================================
   PHOTO PICKER (inflatable form)
   ============================================================ */
.photo-picker {
  border: 2px dashed #ddd;
  border-radius: 10px;
  padding: 14px;
  background: #fafbfc;
  margin-bottom: 14px;
}
.photo-picker-preview {
  margin-bottom: 10px;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  min-height: 160px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-picker-preview img {
  width: 100%;
  max-height: 260px;
  object-fit: contain;
  display: block;
}
.photo-picker-empty {
  color: #aaa;
  font-style: italic;
  padding: 30px;
  text-align: center;
}
.photo-picker-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.photo-picker-status {
  font-size: 13px;
  font-weight: 600;
  margin-left: 4px;
}

/* Gallery for extra photos */
.photo-picker-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 8px;
  margin-bottom: 10px;
  min-height: 50px;
}
.photo-thumb {
  position: relative;
  aspect-ratio: 1;
  border-radius: 8px;
  overflow: hidden;
  background: white;
  border: 1px solid #eee;
}
.photo-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.photo-thumb-remove {
  position: absolute;
  top: 4px;
  right: 4px;
  background: rgba(0,0,0,0.65);
  color: white;
  border: none;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  font-size: 16px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.photo-thumb-remove:hover { background: rgba(204, 51, 51, 0.9); }

/* ============================================================
   CUSTOMER EDIT BLOCK
   ============================================================ */
.customer-edit-block {
  background: #fafbfc;
  border: 1px solid #eee;
  border-radius: 10px;
  padding: 12px 14px;
  margin-top: 12px;
}
.customer-edit-block summary {
  cursor: pointer;
  padding: 4px 0;
  color: #1A2B4A;
}
.customer-edit-block summary::marker { color: #7C5DDE; }

/* ============================================================
   DANGER ZONE
   ============================================================ */
.danger-zone {
  background: #fef5f5;
  border: 1px solid #fce4e4;
  border-radius: 10px;
  padding: 14px 16px;
}
.danger-zone h3 { margin-top: 0; }

.btn-danger {
  background: linear-gradient(135deg, #e74c3c, #c0392b);
  color: white;
  border: none;
}
.btn-danger:hover { background: linear-gradient(135deg, #c0392b, #a93226); }
.btn-danger:disabled {
  background: #ddd;
  color: #999;
  cursor: not-allowed;
}

/* =====================================================
   MOBILE NAV — HAMBURGER + SLIDE-IN DRAWER (≤768px)
   Placed last so it wins the cascade over the older
   horizontal-scroll mobile tab rules earlier in the file.
   ===================================================== */
@media (max-width: 768px) {
  /* Body: no sidebar offset on mobile */
  .theme-app { padding-left: 0; }

  /* Header becomes a slim sticky top bar */
  .app-header {
    position: sticky;
    top: 0;
    left: auto;
    width: 100%;
    height: auto;
    padding: 0;
    box-shadow: 0 2px 8px rgba(0,0,0,.15);
    z-index: 100;
  }
  .app-header-inner {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 10px 14px;
    height: auto;
    max-width: none;
    margin: 0;
    flex-wrap: nowrap;
    row-gap: 0;
    overflow: visible;
  }

  /* Hamburger visible */
  .nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
  }

  /* Brand: visible in top bar, sits next to hamburger */
  .app-brand {
    width: auto;
    padding: 0;
    border-bottom: none;
    justify-content: flex-start;
    font-size: 15px;
    flex: 1 1 auto;
    min-width: 0;
  }
  .app-brand-logo { max-height: 30px !important; }
  .app-brand-divider { display: none; }
  .app-brand-sub {
    font-size: 13px;
    opacity: 0.85;
    color: rgba(255,255,255,.85);
    letter-spacing: normal;
    text-transform: none;
    font-weight: 600;
  }

  /* Logout: a small text button at the right of the top bar */
  .app-header-inner #btn-logout {
    position: static;
    margin-left: auto;
    padding: 6px 10px;
    font-size: 13px;
    color: rgba(255,255,255,.75);
    flex-shrink: 0;
    border-top: none;
    text-align: right;
  }

  /* Tabs become a slide-in left drawer that sits BELOW the top bar
     so the hamburger remains clickable to toggle the drawer closed. */
  .tabs {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    height: calc(100vh - 56px);
    margin: 0;
    padding: 14px 10px 20px;
    background: linear-gradient(180deg, #0a1426 0%, #1A2B4A 100%);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    justify-content: flex-start;
    gap: 2px;
    overflow-y: auto;
    overflow-x: hidden;
    border-top: none;
    box-shadow: 4px 0 16px rgba(0,0,0,.4);
    flex-wrap: nowrap;
  }
  body.nav-open .tabs { transform: translateX(0); }

  /* Backdrop fades in while drawer is open; starts below top bar so
     top-bar controls (hamburger to toggle, logout) stay interactive. */
  .nav-backdrop {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.nav-open .nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  /* Prevent body scroll behind open drawer */
  body.nav-open { overflow: hidden; }

  /* Drawer tab buttons: full-width, left-aligned, big touch targets */
  .tab {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    white-space: nowrap;
    min-height: 44px;
    flex-shrink: 0;
    position: relative;
  }
  .tab.active {
    background: rgba(255,255,255,.12);
    padding-left: 18px;
    color: #ffffff;
  }
  .tab.active::before {
    content: '';
    position: absolute;
    left: 4px;
    top: 8px;
    bottom: 8px;
    width: 3px;
    border-radius: 3px;
    background: linear-gradient(180deg, #1AC4F0 0%, #7C5DDE 50%, #E2399D 100%);
    box-shadow: 0 0 8px rgba(226,57,157,.45);
  }

  /* Section labels: visible inside the drawer (overrides the earlier hide rule) */
  .tab-section-label {
    display: block;
    padding: 14px 14px 6px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 1.4px;
    text-transform: uppercase;
    color: rgba(255,255,255,.4);
  }
  .tab-section-label:first-child { padding-top: 4px; }

  /* Main content uses full width (no sidebar offset) */
  .app-main {
    max-width: 100%;
    margin: 16px 0;
    padding: 0 14px;
  }
}

/* Very small screens — keep brand readable but don't shrink drawer tabs */
@media (max-width: 380px) {
  .app-brand { font-size: 14px; }
  .app-brand-logo { max-height: 26px !important; }
  .nav-toggle { min-width: 36px; min-height: 36px; font-size: 20px; }
}

/* =====================================================
   SKELETON LOADERS — shimmering placeholders shown
   while inflatables / add-ons are fetched.
   ===================================================== */
.skeleton {
  background: linear-gradient(90deg, #ececec 0%, #f6f6f6 50%, #ececec 100%);
  background-size: 200% 100%;
  animation: skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
  display: block;
}
@keyframes skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; background: #ececec; }
}

.skeleton-card {
  background: white;
  border-radius: 14px;
  padding: 16px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  pointer-events: none;
}
.skeleton-img {
  aspect-ratio: 4 / 3;
  width: 100%;
  margin-bottom: 14px;
  border-radius: 10px;
}
.skeleton-line { height: 14px; margin-bottom: 10px; }
.skeleton-line-title { height: 22px; width: 65%; margin-bottom: 12px; border-radius: 8px; }
.skeleton-line-short { width: 40%; }
.skeleton-btn { height: 44px; margin-top: 16px; border-radius: 999px; }

.skeleton-picker-card {
  background: white;
  border-radius: 14px;
  padding: 12px;
  box-shadow: 0 2px 10px rgba(0,0,0,.05);
  pointer-events: none;
}
.skeleton-picker-card .skeleton-img { aspect-ratio: 5 / 3; margin-bottom: 10px; border-radius: 8px; }
.skeleton-picker-card .skeleton-line-title { height: 18px; margin-bottom: 8px; }

.skeleton-addon-row {
  background: white;
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.05);
  margin-bottom: 10px;
  pointer-events: none;
}

/* Visually hidden, still announced by screen readers */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================
   EMPTY / ERROR STATES — used when there's nothing to
   show or the fetch failed. Big icon + clear message +
   actionable next step.
   ===================================================== */
.empty-state {
  text-align: center;
  padding: 36px 24px;
  border-radius: 14px;
  background: white;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
  grid-column: 1 / -1;
}
.empty-state h3 {
  margin: 4px 0 8px;
  color: #1A2B4A;
  font-size: 19px;
}
.empty-state p {
  margin: 0 auto 16px;
  max-width: 420px;
  line-height: 1.5;
}
.empty-state-icon {
  font-size: 38px;
  line-height: 1;
  margin-bottom: 10px;
}
.empty-state-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
.empty-state.error-state {
  border: 1px solid #ffd6d6;
  background: #fff8f8;
}
.empty-state.error-state h3 { color: #c0392b; }
.empty-state-inline {
  padding: 20px 16px;
  box-shadow: none;
  background: transparent;
}
.empty-state-inline .empty-state-icon { font-size: 28px; }

/* =====================================================
   INFLATABLE CARD — compact, uniform height, clickable.
   Photos and full description live in the quick-view
   modal (.quickview), not on the card itself.
   ===================================================== */
.inflatable-card {
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease;
}
.inflatable-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(0,0,0,.10);
}
.inflatable-card:focus-visible {
  outline: 3px solid #7C5DDE;
  outline-offset: 2px;
}
.inflatable-card .card-img { position: relative; overflow: hidden; }
.card-photo-count {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(10,20,38,.78);
  color: white;
  font-size: 12px;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  letter-spacing: .02em;
  pointer-events: none;
}
.inflatable-card h3 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.4em;
}
.inflatable-card .price { margin-top: auto; }
.inflatable-card .btn[data-no-quickview] { margin-top: 6px; }

/* =====================================================
   QUICK-VIEW MODAL — photo carousel + full description.
   Opens on card click. Closes on backdrop / X / Escape.
   ===================================================== */
.quickview {
  position: fixed;
  inset: 0;
  z-index: 300;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity .2s ease;
}
.quickview[aria-hidden="false"] {
  opacity: 1;
  pointer-events: auto;
}
.quickview-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(10,20,38,.65);
  backdrop-filter: blur(2px);
}
.quickview-panel {
  position: relative;
  z-index: 1;
  background: white;
  border-radius: 16px;
  max-width: 720px;
  width: 100%;
  max-height: 92vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(0,0,0,.35);
  transform: translateY(8px) scale(.99);
  transition: transform .2s ease;
}
.quickview[aria-hidden="false"] .quickview-panel { transform: none; }

.quickview-close {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 3;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: rgba(7,10,24,.72);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.22);
  cursor: pointer;
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
}
.quickview-close:hover { background: rgba(0,152,255,.35); }

.quickview-photos {
  position: relative;
  background: #1A2B4A;
  aspect-ratio: 16 / 10;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.quickview-photo {
  max-width: 100%;
  max-height: 100%;
  display: block;
  object-fit: contain;
}
.quickview-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 44px;
  height: 44px;
  border-radius: 999px;
  background: rgba(7,10,24,.72);
  color: #ffffff;
  border: 1px solid rgba(255,255,255,.22);
  cursor: pointer;
  font-size: 26px;
  line-height: 1;
  font-weight: 700;
  display: none;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0,0,0,.35);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  z-index: 2;
}
.quickview.has-multiple .quickview-arrow { display: flex; }
.quickview-arrow:hover { background: rgba(0,152,255,.35); }
.quickview-arrow-prev { left: 12px; }
.quickview-arrow-next { right: 12px; }

.quickview-dots {
  position: absolute;
  bottom: 12px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: center;
  gap: 6px;
  z-index: 2;
}
.quickview-dot {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(255,255,255,.55);
  border: 0;
  cursor: pointer;
  padding: 0;
  transition: background .15s ease, transform .15s ease;
}
.quickview-dot:hover { background: rgba(255,255,255,.85); }
.quickview-dot.active {
  background: white;
  transform: scale(1.25);
}

.quickview-info {
  padding: 22px 24px 24px;
  overflow-y: auto;
}
.quickview-name {
  margin: 0 0 8px;
  font-size: 24px;
  color: #1A2B4A;
}
.quickview-desc {
  margin: 0 0 14px;
  line-height: 1.55;
  color: #333;
}
.quickview-meta {
  list-style: none;
  padding: 0;
  margin: 0 0 18px;
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.quickview-meta li {
  background: #f4f5f7;
  padding: 6px 12px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  color: #1A2B4A;
}
.quickview-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding-top: 14px;
  border-top: 1px solid #eee;
}
.quickview-price {
  font-size: 26px;
  font-weight: 800;
  color: #E2399D;
}
.quickview-price .muted { color: #999; font-weight: 500; }

/* Prevent the body behind the open modal from scrolling */
body.quickview-open { overflow: hidden; }

/* Mobile: full-screen modal, larger touch arrows */
@media (max-width: 600px) {
  .quickview { padding: 0; }
  .quickview-panel {
    max-height: 100vh;
    height: 100vh;
    border-radius: 0;
  }
  .quickview-photos { aspect-ratio: 4 / 3; }
  .quickview-info { padding: 18px 18px 20px; }
  .quickview-name { font-size: 20px; }
  .quickview-bottom { flex-direction: column; align-items: stretch; }
  .quickview-bottom .btn { width: 100%; }
}

/* =====================================================
   GENERIC DRAG-TO-REORDER ROWS
   Used by the Bookings and Inflatables admin tables. Any table with
   .drag-col header + .drag-handle cell + .reorderable-row rows works.
   ===================================================== */
.data-table th.drag-col,
.data-table td.drag-handle {
  width: 28px;
  padding-left: 8px;
  padding-right: 4px;
  text-align: center;
}
.data-table td.drag-handle {
  cursor: grab;
  user-select: none;
  color: #c0c4cc;
  font-weight: 700;
  letter-spacing: -1px;
  font-size: 14px;
  vertical-align: middle;
}
.data-table td.drag-handle:hover { color: #7C5DDE; }
.data-table tr.reorderable-row.dragging {
  opacity: 0.4;
  cursor: grabbing;
}
.data-table tr.reorderable-row.dragging td.drag-handle { cursor: grabbing; }
.data-table tr.drop-target {
  outline: 2px solid #7C5DDE;
  outline-offset: -2px;
}

/* =====================================================
   EMPLOYEE PORTAL — MOBILE HAMBURGER + SLIDE-IN DRAWER
   Mirrors the admin pattern but scoped to .emp-tabs.
   Hidden at >768px; drawer activates at ≤768px.
   ===================================================== */
.emp-nav-toggle { display: none; }
.emp-nav-backdrop { display: none; }
.emp-header-brand { display: flex; flex-direction: column; gap: 2px; }

@media (max-width: 768px) {
  /* Top bar gets a left-aligned hamburger + brand */
  .emp-header {
    padding: 10px 14px;
    gap: 10px;
    position: sticky;
    top: 0;
    z-index: 100;
  }
  .emp-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    color: white;
    border: 0;
    padding: 8px 10px;
    font-size: 22px;
    line-height: 1;
    cursor: pointer;
    border-radius: 6px;
    min-width: 40px;
    min-height: 40px;
    flex-shrink: 0;
  }
  .emp-nav-toggle:hover { background: rgba(255,255,255,.1); }
  .emp-header-brand { flex: 1 1 auto; min-width: 0; }

  /* Tabs become a slide-in drawer below the top bar */
  .emp-tabs {
    position: fixed;
    top: 56px;
    left: 0;
    bottom: 0;
    width: 280px;
    max-width: 85vw;
    height: calc(100vh - 56px);
    padding: 14px 10px 20px;
    background: linear-gradient(180deg, #0a1426 0%, #1A2B4A 100%);
    border-bottom: none;
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 200;
    overflow-y: auto;
    box-shadow: 4px 0 16px rgba(0,0,0,.4);
  }
  body.emp-nav-open .emp-tabs { transform: translateX(0); }

  .emp-tab-btn {
    flex: 0 0 auto;
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    border-radius: 8px;
    font-size: 15px;
    font-weight: 600;
    color: rgba(255,255,255,.75);
    background: transparent;
    border: 0;
    min-height: 44px;
    border-bottom: 0;
  }
  .emp-tab-btn:hover { background: rgba(255,255,255,.07); color: #fff; }
  .emp-tab-btn.active {
    background: rgba(255,255,255,.12);
    color: #fff;
    border-bottom: 0;
  }

  /* Backdrop fades in while the drawer is open; sits under the top bar */
  .emp-nav-backdrop {
    display: block;
    position: fixed;
    top: 56px;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0,0,0,.5);
    z-index: 150;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }
  body.emp-nav-open .emp-nav-backdrop {
    opacity: 1;
    pointer-events: auto;
  }
  body.emp-nav-open { overflow: hidden; }
}

/* Delivery-fee tier editor */
.tier-table { width: 100%; margin-top: 6px; }
.tier-table input { padding: 6px 8px; font-size: 14px; }
.tier-table .tier-remove { padding: 4px 10px; font-size: 16px; line-height: 1; }
@media (max-width: 600px) {
  .tier-table th { font-size: 11px; padding: 4px; }
  .tier-table td { padding: 4px; }
  .tier-table input { font-size: 13px; }
}

/* Booking-detail action row — prominent Approve / Follow-up / Cancel */
.bd-actions-row {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 8px;
}
.bd-actions-row .btn-large { padding: 12px 22px; font-size: 16px; }
.bd-actions-row .bd-action-danger {
  background: white;
  color: #c0392b;
  border: 1px solid #e6a9a3;
}
.bd-actions-row .bd-action-danger:hover:not(:disabled) {
  background: #fff5f5;
  border-color: #c0392b;
}
@media (max-width: 600px) {
  .bd-actions-row { flex-direction: column; }
  .bd-actions-row .btn { width: 100%; }
}

/* ============================================================
   Mobile UX polish — friendlier customer booking/portal + crew/
   admin modals on phones. Appended last so these win by source
   order. Goals: no iOS focus-zoom, roomier spacing, bigger tap
   targets, and stacked side-by-side fields on small screens.
   ============================================================ */

/* 16px form fields stop iOS Safari from zooming in on focus (it auto-zooms
   any input under 16px). Applies at all widths — 16px is fine on desktop too. */
.form-card input, .form-card select, .form-card textarea,
.modal-card input:not([type="checkbox"]):not([type="radio"]), .modal-card select, .modal-card textarea {
  font-size: 16px;
}

/* A little more air around labels and between fields everywhere. */
.form-card label { margin-bottom: 6px; }
.form-card .row { gap: 16px; margin-bottom: 18px; }
.form-card input, .form-card select, .form-card textarea { padding: 12px 14px; }

@media (max-width: 600px) {
  /* Stack side-by-side fields so nothing gets squeezed on a phone. */
  .form-card .row.two { grid-template-columns: 1fr; }
  /* Comfortable, not-too-wide card padding on small screens. */
  .form-card { padding: 22px 18px; }
  /* Clearer separation between sub-sections of the form. */
  .form-card h2 { font-size: 22px; line-height: 1.25; }
  .form-card h3 { margin-top: 28px; }
  /* Full-width primary actions are the easiest thing to tap. */
  .form-card .btn-primary, .form-card button[type="submit"] { width: 100%; }
  /* Roomier consent / checkbox rows so they're easy to read + tap. */
  .checkbox-row { margin: 16px 0; gap: 12px; }
  .checkbox-row input { width: 24px; height: 24px; }
}

/* ============================================================
   K&E brand kit (2026) — bright, high-energy, neon-on-navy.
   Scoped to .theme-fun (customer-facing pages). Admin/employee
   (.theme-app) stays on the clean utilitarian styles. Appended
   last so these overrides win by source order.
   ============================================================ */
:root {
  --ke-blue: #0098FF;
  --ke-deep-blue: #0B5BFF;
  --ke-cyan: #18D6FF;
  --ke-purple: #7B45F5;
  --ke-magenta: #FF0A7A;
  --ke-hot-pink: #FF2AA1;
  --ke-navy: #050814;
  --ke-yellow: #FFD600;
  --ke-water: #00B6FF;
  --ke-gradient: linear-gradient(90deg, #0098FF 0%, #7B45F5 50%, #FF0A7A 100%);
}

/* Display headings + clean Inter body. */
.theme-fun { font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.theme-fun h1, .theme-fun h2, .theme-fun h3, .theme-fun h4 {
  font-family: 'Montserrat', 'Fredoka', system-ui, sans-serif;
  font-weight: 800;
  letter-spacing: -0.02em;
}

/* Dark navy + neon-gradient hero. */
.theme-fun .hero {
  background:
    radial-gradient(circle at top right, rgba(255,10,122,.30), transparent 42%),
    radial-gradient(circle at bottom left, rgba(0,152,255,.30), transparent 45%),
    radial-gradient(circle at 50% -10%, rgba(123,69,245,.28), transparent 55%),
    var(--ke-navy);
  color: #fff;
}
.theme-fun .hero h1 { color: #fff; }
.theme-fun .hero p, .theme-fun .hero .hero-sub { color: rgba(255,255,255,.82); }
.theme-fun .hero .hero-eyebrow {
  text-transform: uppercase; letter-spacing: .14em; font-weight: 800; font-size: .82rem;
  background: var(--ke-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}
/* The old cream wave assumed a light hero — drop it on the dark hero. */
.theme-fun .hero::after, .theme-fun .hero-wave { display: none; }

/* Hero badges → glassy neon chips. */
.theme-fun .hero-badges span {
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.20);
  color: #fff;
}

/* Primary CTA → gradient pill (customer pages only; admin keeps its button). */
.theme-fun .btn-primary {
  background: var(--ke-gradient);
  color: #fff;
  box-shadow: 0 8px 26px rgba(123,69,245,.35);
  text-transform: uppercase; letter-spacing: .02em;
}
.theme-fun .btn-primary:hover { filter: brightness(1.07); box-shadow: 0 10px 30px rgba(255,10,122,.42); background: var(--ke-gradient); }

/* Accents pick up the new blues/purples. */
.theme-fun a { color: var(--ke-deep-blue); }
.theme-fun .step-num { background: var(--ke-gradient); }

/* Rounded cards with a soft neon glow. */
.theme-fun .card, .theme-fun .about-card, .theme-fun .rules-card,
.theme-fun .service-area-card, .theme-fun .faq-item {
  border-radius: 18px;
  box-shadow: 0 10px 30px rgba(0,152,255,.10);
}
.theme-fun .card:hover { box-shadow: 0 16px 40px rgba(123,69,245,.22); }

/* Final CTA band + sticky mobile book button → on-brand gradient. */
.theme-fun .cta-final { background: var(--ke-gradient); }
.theme-fun .sticky-mobile-book { background: var(--ke-gradient); color: #fff; }

/* ---- Polished site header (customer-facing) ---- */
.theme-fun .navbar { background: rgba(255,255,255,.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-bottom: 1px solid rgba(5,8,20,.07); box-shadow: 0 1px 0 rgba(5,8,20,.04); }
.theme-fun .nav-inner { padding: 10px 0; gap: 14px; position: relative; }

/* Brand lockup: crisp icon + gradient wordmark (legible at any size). */
.brand-lockup { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.brand-lockup .brand-mark { height: 40px; width: auto; display: block; }
.brand-lockup .brand-word {
  font-family: 'Montserrat', sans-serif; font-weight: 900; font-size: 1.25rem; line-height: 1;
  letter-spacing: -.01em; white-space: nowrap;
  background: var(--ke-gradient); -webkit-background-clip: text; background-clip: text;
  color: transparent; -webkit-text-fill-color: transparent;
}

/* Nav links — clear hover states + gradient CTA. */
.theme-fun .navbar nav { gap: 6px; }
.theme-fun .navbar nav a { color: #0B1B3A; font-weight: 700; font-size: .98rem; padding: 9px 14px; border-radius: 999px; transition: background .15s ease, color .15s ease; }
.theme-fun .navbar nav a:hover { background: rgba(0,152,255,.10); color: var(--ke-deep-blue); text-decoration: none; }
.theme-fun .navbar nav a.cta-link { background: var(--ke-gradient); color: #fff; padding: 10px 20px; box-shadow: 0 6px 16px rgba(123,69,245,.30); }
.theme-fun .navbar nav a.cta-link:hover { filter: brightness(1.07); color: #fff; background: var(--ke-gradient); }

/* Inner customer pages show just the crisp icon as the home button. */
.brand-logo img { height: 40px; width: auto; }

/* Hamburger toggle (mobile only). */
.nav-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: 0; padding: 10px; cursor: pointer; }
.nav-toggle span { width: 26px; height: 3px; border-radius: 3px; background: #0B1B3A; transition: transform .2s ease, opacity .2s ease; }
.navbar.nav-open .nav-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.navbar.nav-open .nav-toggle span:nth-child(2) { opacity: 0; }
.navbar.nav-open .nav-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

@media (max-width: 720px) {
  .nav-toggle { display: inline-flex; }
  .theme-fun .navbar nav {
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    background: #fff; border-bottom: 1px solid rgba(5,8,20,.08);
    padding: 10px 16px 16px; box-shadow: 0 14px 26px rgba(5,8,20,.14);
    display: none;
  }
  .theme-fun .navbar.nav-open nav { display: flex; }
  .theme-fun .navbar nav a { display: block; font-size: 1.05rem; padding: 13px 14px; }
  .theme-fun .navbar nav a.cta-link { text-align: center; margin-top: 6px; }
  .brand-lockup .brand-word { font-size: 1.08rem; }
  .brand-lockup .brand-mark { height: 34px; }
}

/* =====================================================================
   FULL DARK MODE + NEON — applied to ALL three audiences (customer
   .theme-fun + admin/employee .theme-app). Appended last so it wins by
   source order; uses !important on surface bg/color/border to retrofit
   dark mode over the original light component styles.
   ===================================================================== */
:root {
  --ke-bg: #050814;
  --ke-surface: #0d1430;
  --ke-surface-2: #131c3d;
  --ke-line: rgba(255,255,255,.10);
  --ke-line-strong: rgba(255,255,255,.18);
  --ke-text: #e7ebf7;
  --ke-dim: #a7b0cf;
}

/* ---- Page canvas ---- */
html, body { background-color: var(--ke-bg); color: var(--ke-text); }
body {
  background:
    radial-gradient(circle at 12% -8%, rgba(0,152,255,.10), transparent 38%),
    radial-gradient(circle at 92% -2%, rgba(255,10,122,.08), transparent 38%),
    var(--ke-bg);
  background-attachment: fixed;
}
.theme-fun, .theme-app { color: var(--ke-text); }

/* ---- Headings, text, links ---- */
.theme-fun h1,.theme-fun h2,.theme-fun h3,.theme-fun h4,.theme-fun h5,
.theme-app h1,.theme-app h2,.theme-app h3,.theme-app h4,.theme-app h5 { color: #ffffff; }
.theme-fun p, .theme-app p, .lede, .faq-a, .faq-q, label, .form-card label, .modal-card label { color: var(--ke-text); }
.muted, .small, .muted.small, .footer-fine { color: var(--ke-dim) !important; }
a { color: #4fc3ff; }
a:hover { color: #8fd9ff; }

/* ---- Generic surfaces → dark glass panels ---- */
.card, .form-card, .modal-card, .about-card, .rules-card, .faq-item,
.service-area-card, .stat-card, .job-card, .settings-section, .table-wrap,
.bd-summary, .bd-section, .pre-trip-card, .info-banner, .quickview-panel,
.step, .dash-stat-card, .pay-stat-card, .pay-item, .dash-action-btn,
.dash-col, .trust-item {
  background: var(--ke-surface) !important;
  color: var(--ke-text);
  border: 1px solid var(--ke-line) !important;
  box-shadow: 0 8px 28px rgba(0,0,0,.45) !important;
}
.section, .section-alt { background: transparent !important; }
.trust-strip { background: var(--ke-surface) !important; border-top: 1px solid var(--ke-line); border-bottom: 1px solid var(--ke-line); }

/* ---- Admin / employee shell ---- */
.app-header, .emp-header { background: rgba(5,8,20,.92) !important; border-bottom: 1px solid var(--ke-line) !important; }
.app-main, .tab-panel, .tabs, .emp-tabs { background: transparent !important; }
/* ^ that transparent override is for the DESKTOP tab bar (it sits on the header
   gradient). On mobile, .tabs becomes a fixed slide-out DRAWER — transparent there
   means the page shows straight through it (unreadable). This override lands AFTER
   the drawer rule, so re-assert a solid drawer background at the mobile breakpoint. */
@media (max-width: 768px) {
  body.nav-open .tabs,
  .tabs { background: linear-gradient(180deg, #0a1426 0%, #1A2B4A 100%) !important; }
}
.panel-head, .tab.active, .emp-tab-btn.active, .app-brand, .emp-brand { color: #fff; }
.filters, .toolbar { background: var(--ke-surface) !important; border: 1px solid var(--ke-line) !important; }

/* ---- Form fields ---- */
input, select, textarea {
  background: #0a1130 !important; color: var(--ke-text) !important;
  border: 1px solid var(--ke-line-strong) !important;
}
input::placeholder, textarea::placeholder { color: #7c87a8; }
input:focus, select:focus, textarea:focus { border-color: #0098FF !important; }

/* ---- Tables ---- */
table, .data-table { color: var(--ke-text); background: transparent; }
.data-table th { background: #0a1130 !important; color: #cdd5f0 !important; border-color: var(--ke-line) !important; }
.data-table td { border-color: var(--ke-line) !important; }
.data-table tbody tr { background: transparent !important; }
.data-table tbody tr:hover { background: rgba(255,255,255,.05) !important; }

/* ---- Buttons (primary stays the brand gradient) ---- */
.btn-secondary { background: transparent !important; color: var(--ke-text) !important; border: 1.5px solid var(--ke-line-strong) !important; }
.btn-secondary:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }

/* ---- Modals ---- */
.modal, .modal-overlay { background: rgba(3,5,14,.72) !important; }
.modal-card { background: var(--ke-surface-2) !important; color: var(--ke-text); }

/* ---- Footer ---- */
footer { background: #04060f !important; color: var(--ke-dim); border-top: 1px solid var(--ke-line); }

/* ---- Status banners / results → translucent neon tints ---- */
.status-banner-ok, .pay-banner-paid, .delivery-result.is-ok { background: rgba(34,197,94,.14) !important; color: #b9f6ca !important; border: 1px solid rgba(34,197,94,.35) !important; }
.status-banner-warn, .pay-banner-partial, .delivery-result.is-warn { background: rgba(255,193,7,.14) !important; color: #ffe6a0 !important; border: 1px solid rgba(255,193,7,.35) !important; }
.status-banner-error, .pay-banner-unpaid, .delivery-result.is-err { background: rgba(255,80,80,.14) !important; color: #ffc1c1 !important; border: 1px solid rgba(255,80,80,.4) !important; }
/* The "Collect $X" amount (<strong>) was dark navy (#1A2B4A) from the light-theme
   rule — invisible on the dark amber/red banner. White makes the key number pop. */
.pay-banner-partial strong, .pay-banner-unpaid strong { color: #ffffff !important; }

/* ---- Loading skeletons ---- */
.skeleton { background: linear-gradient(90deg, #11183a, #1a2350, #11183a) !important; }

/* ---- Dark-theme polish: brighter prices + comfier box padding ---- */
/* Prices were inheriting the dark navy text colour — make them pop on dark. */
.price, .inflatable-card .price, #quickview-price,
.quickview-price, .booking-total, .total-amount { color: #ffffff !important; }
.price .muted, #quickview-price .muted, .quickview-price .muted { color: var(--ke-dim) !important; -webkit-text-fill-color: var(--ke-dim) !important; }
.addon-price { color: #6fd0ff !important; }

/* The dark glass panels have crisp edges now, so give the wording more breathing
   room from the box edges (it was reading as cramped). */
.about-card, .rules-card, .service-area-card, .step, .pre-trip-card,
.info-banner, .bd-summary, .stat-card, .dash-stat-card { padding: 24px 24px; }
.faq-item { padding: 16px 6px; }
.card { padding: 24px; }
.inflatable-card .card-body, .card-body { padding: 18px 20px 22px; }

@media (max-width: 600px) {
  .about-card, .rules-card, .service-area-card, .step, .card, .form-card,
  .modal-card, .pre-trip-card, .info-banner { padding: 20px 18px !important; }
  .blog-card-body { padding: 18px 18px 22px; }
  .hero { padding-left: 20px; padding-right: 20px; }
  /* A bit more gap between the section content and the screen edge. */
  .container { padding: 0 20px; }
}

/* ---- Customer header → dark (was white from the header-polish layer) ---- */
.navbar, .theme-fun .navbar { background: rgba(7,10,24,.92) !important; border-bottom: 1px solid var(--ke-line) !important; box-shadow: 0 1px 0 rgba(255,255,255,.04) !important; }
.navbar nav a, .theme-fun .navbar nav a { color: #e7ebf7; }
.theme-fun .navbar nav a:hover { background: rgba(255,255,255,.08); color: #fff; }
.nav-toggle span { background: #e7ebf7; }
@media (max-width: 720px) {
  .theme-fun .navbar nav { background: var(--ke-surface) !important; border-bottom-color: var(--ke-line) !important; box-shadow: 0 14px 26px rgba(0,0,0,.5) !important; }
}
/* Neutralize the legacy translucent-white inner <nav> on desktop (light-grey bar). */
@media (min-width: 721px) {
  .theme-fun .navbar nav { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; padding: 0 !important; border: 0 !important; box-shadow: none !important; position: static !important; }
}

/* ---- Blog (public, dark) ---- */
.blog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 22px; }
.blog-card { display: block; background: var(--ke-surface); border: 1px solid var(--ke-line); border-radius: 18px; overflow: hidden; text-decoration: none; color: var(--ke-text); transition: transform .15s ease, box-shadow .15s ease, border-color .15s; box-shadow: 0 8px 28px rgba(0,0,0,.4); }
.blog-card:hover { transform: translateY(-3px); border-color: rgba(0,152,255,.5); box-shadow: 0 16px 40px rgba(123,69,245,.25); text-decoration: none; }
.blog-card-img { height: 170px; background-size: cover; background-position: center; background-color: #0a1130; display: flex; align-items: center; justify-content: center; font-size: 48px; }
.blog-card-img-fallback { background: linear-gradient(135deg, rgba(0,152,255,.18), rgba(255,10,122,.18)); }
.blog-card-body { padding: 16px 18px 20px; }
.blog-card-body h2 { font-size: 1.15rem; margin: 0 0 8px; color: #fff; }
.blog-card-body p { color: var(--ke-dim); font-size: .95rem; margin: 0 0 10px; }
.blog-card-date { color: var(--ke-dim); font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; }
.blog-article { max-width: 760px; }
.blog-article-date { color: var(--ke-dim); font-size: .85rem; }
.blog-article h1 { font-size: clamp(1.8rem, 4vw, 2.6rem); }
.blog-article-cover { width: 100%; border-radius: 16px; margin: 16px 0 24px; max-height: 420px; object-fit: cover; }
.blog-article-body { font-size: 1.06rem; line-height: 1.7; color: #dfe4f2; }
.blog-article-body h2 { font-size: 1.4rem; margin: 28px 0 10px; color: #fff; }
.blog-article-body h3 { font-size: 1.15rem; margin: 22px 0 8px; color: #fff; }
.blog-article-body p { margin: 0 0 16px; }
.blog-article-body ul, .blog-article-body ol { margin: 0 0 16px; padding-left: 22px; }
.blog-article-body li { margin: 6px 0; }
.blog-article-body a { color: #4fc3ff; }
.blog-article-cta { margin-top: 36px; padding: 24px; border-radius: 16px; text-align: center; background: rgba(255,255,255,.04); border: 1px solid var(--ke-line); }
.blog-article-cta h3 { margin: 0 0 14px; }

/* ---- Portal + brand polish (sticky bar, neon trust strip, images, portal hero) ---- */

/* Sticky mobile bar was light grey — make it dark glass with on-brand buttons. */
.sticky-mobile-bar { background: rgba(7,10,24,.94) !important; border-top: 1px solid var(--ke-line) !important; box-shadow: 0 -6px 22px rgba(0,0,0,.55) !important; }
.sticky-mobile-call { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid var(--ke-line-strong) !important; }
.sticky-mobile-book { background: var(--ke-gradient) !important; color: #fff !important; box-shadow: 0 4px 16px rgba(255,10,122,.35) !important; }

/* Trust strip → neon brand. Gradient icon coins + bright labels. */
.trust-strip { background: rgba(255,255,255,.03) !important; border-color: var(--ke-line) !important; }
.trust-item { color: var(--ke-text) !important; }
.trust-item strong { color: #fff; }
.trust-item small { color: var(--ke-dim) !important; }
.trust-icon { background: var(--ke-gradient) !important; color: #fff !important; box-shadow: 0 0 20px rgba(123,69,245,.5) !important; }

/* Tasteful image polish across the site: rounded + soft depth/glow. */
.card img, .inflatable-card img, .blog-card-img, .quickview-photo,
.booking-summary img, .party-img, .party-img img { border-radius: 14px; }
.card img, .inflatable-card img { box-shadow: 0 8px 22px rgba(0,0,0,.4); }
.card:hover img, .inflatable-card:hover img { box-shadow: 0 10px 30px rgba(0,152,255,.28); }
.hero-logo { filter: drop-shadow(0 10px 34px rgba(0,152,255,.4)); }
.party-img { border: 1px solid var(--ke-line); background: #0a1130 !important; }

/* Customer/booking portal hero matches the homepage hero richness. */
.hero-compact { padding: 54px 24px 66px !important; }
.hero-compact .hero-eyebrow { margin-bottom: 8px; }
@media (max-width: 600px) { .hero-compact { padding: 40px 20px 48px !important; } }

/* ---- Logo wordmark fix ---- */
/* The header wordmark used gradient-clipped text (text-fill-color: transparent),
   which renders INVISIBLE on some browsers — so the logo looked "broken" (just the
   icon). Make the wordmark solid white (crisp on the dark header); the gradient
   ICON still carries the brand colour. Same hardening for the hero eyebrow. */
.brand-lockup .brand-word {
  background: none !important;
  -webkit-text-fill-color: #ffffff !important;
  color: #ffffff !important;
}
.theme-fun .hero .hero-eyebrow {
  background: none !important;
  -webkit-text-fill-color: #18D6FF !important;
  color: #18D6FF !important;
}
.brand-lockup .brand-mark { height: 42px; }
@media (max-width: 720px) { .brand-lockup .brand-mark { height: 36px; } }

/* ---- Service-area cards: drop the bright green/cream for the dark theme ---- */
.service-area-card.primary {
  background: var(--ke-surface) !important;
  border: 1px solid rgba(24,214,255,.35) !important;
  box-shadow: 0 0 26px rgba(0,182,255,.18) !important;
  color: var(--ke-text) !important;
}
.service-area-card.secondary {
  background: var(--ke-surface) !important;
  border: 1px solid var(--ke-line) !important;
  color: var(--ke-text) !important;
}
.service-area-card.primary h3, .service-area-card.primary p,
.service-area-card.secondary h3, .service-area-card.secondary p { color: #ffffff !important; }
.service-area-card.primary .muted, .service-area-card.secondary .muted { color: var(--ke-dim) !important; }

/* =====================================================================
   NO-WHITE SWEEP + UNIFIED BUTTONS — final pass so NO surface stays light
   in ANY portal (customer .theme-fun, admin/employee .theme-app), desktop
   or mobile, and every button matches the brand. Appended last; !important
   retrofits over the original light component styles.
   ===================================================================== */

/* ---- Remaining light SURFACES → dark glass ---- */
.login-card, .legal-box, .booking-summary, .info-grid, .info-grid > div,
.payment-options, .reports-grid, .emp-filter, #jobs-list, .job-hint,
.route-banner-sub, .cal-week, .cal-cell, .cal-evt-more, .addon-card,
.inflatable-card, .pay-item, .quickview-panel, .bd-grid, .bd-contact,
.action-grid, .dash-card, .dash-col, .summary-card, .receipt-card,
.expense-card, .photo-card, .note-card, .timeline-item, .activity-item {
  background: var(--ke-surface) !important;
  color: var(--ke-text);
  border-color: var(--ke-line) !important;
}
/* Grids that are pure layout (no visible box) shouldn't draw a panel. */
.info-grid, .reports-grid, .action-grid, .bd-grid, .party-details {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.info-grid > div, .party-detail { background: var(--ke-surface) !important; border: 1px solid var(--ke-line) !important; }

/* Text inside those surfaces was dark-on-light → make it readable on dark. */
.login-card *, .legal-box, .legal-box *, .booking-summary, .booking-summary *,
.info-grid > div *, .payment-options *, .pay-item, .pay-item *,
.addon-card, .addon-card *, .job-hint, .job-hint * {
  color: var(--ke-text);
}
.login-card .muted, .booking-summary .muted, .pay-item .muted,
.addon-card .muted, .legal-box .muted { color: var(--ke-dim) !important; }

/* Empty-state / dropzone boxes (were #fafbfc dashed) */
.empty-state, .dropzone, .upload-zone, [class*="dropzone"] {
  background: var(--ke-surface-2) !important; border-color: var(--ke-line-strong) !important;
  color: var(--ke-dim) !important;
}

/* ---- Calendar ---- */
.cal-week { background: transparent !important; border: 0 !important; }
.cal-cell { background: var(--ke-surface-2) !important; border: 1px solid var(--ke-line) !important; color: var(--ke-text); }
.cal-cell.cal-other { background: rgba(255,255,255,.02) !important; color: var(--ke-dim); }
.cal-blocked { background: rgba(255,80,80,.16) !important; color: #ffc1c1 !important; }
.cal-evt-more { background: rgba(255,255,255,.08) !important; color: var(--ke-text) !important; }

/* ---- Calendar: friendlier, clearer day states on the dark admin theme ---- */
.theme-app .cal-header-row > div { color: var(--ke-dim); font-size: 12px; }
.theme-app .cal-cell { min-height: 104px; padding: 7px; transition: border-color .15s, transform .08s; }
.theme-app .cal-cell:not(.empty):hover { border-color: #ff5ca8 !important; transform: translateY(-1px); }
.theme-app .cal-cell.empty { background: transparent !important; border: 0 !important; }
.theme-app .cal-weekend:not(.empty) { background: rgba(255,255,255,.03) !important; }
/* Days with bookings: subtle cyan wash + accent so they pop at a glance. */
.theme-app .cal-cell.has-bookings { background: rgba(26,196,240,.12) !important; border-color: rgba(26,196,240,.40) !important; }
/* Today: pink ring + tint, and the date number becomes a filled circle. */
.theme-app .cal-cell.today { border-color: #ff5ca8 !important; border-width: 2px !important; background: rgba(226,57,157,.14) !important; }
.theme-app .cal-cell.today .cal-day-num { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; height: 24px; padding: 0 6px; border-radius: 999px; background: #E2399D; color: #fff; }
.theme-app .cal-cell.blocked { background: rgba(255,80,80,.14) !important; border-color: rgba(255,80,80,.40) !important; }
.theme-app .cal-day-num { color: var(--ke-text); font-size: 14px; }
.theme-app .cal-evt { font-size: 12px; padding: 3px 7px; margin: 3px 0; font-weight: 600; border-radius: 6px; }
.theme-app .cal-evt-more { font-size: 11px; padding: 2px 7px; border-radius: 6px; display: inline-block; margin-top: 2px; }

/* ---- Address autocomplete dropdown ---- */
.address-suggest { background: var(--ke-surface-2) !important; border: 1px solid var(--ke-line-strong) !important; box-shadow: 0 14px 30px rgba(0,0,0,.55) !important; }
.address-suggest-item { color: var(--ke-text) !important; border-color: var(--ke-line) !important; }
.address-suggest-item:hover, .address-suggest-item.active { background: rgba(0,152,255,.16) !important; color: #fff !important; }

/* ---- Pills / tags / badges → translucent (never white) ---- */
.tag, .pill, .status-pill, .badge,
.s-new_request, .pill-new_request {
  background: rgba(255,255,255,.08) !important; color: var(--ke-text) !important;
  border: 1px solid var(--ke-line) !important;
}
.tag.water, .inf-badge-wet { background: rgba(0,152,255,.18) !important; color: #9bd7ff !important; border-color: rgba(0,152,255,.4) !important; }
.tag.dry, .inf-badge-dry { background: rgba(255,193,7,.16) !important; color: #ffe6a0 !important; border-color: rgba(255,193,7,.35) !important; }
.pill.ok, .pill-confirmed, .s-confirmed { background: rgba(34,197,94,.16) !important; color: #b9f6ca !important; border-color: rgba(34,197,94,.35) !important; }
.pill.warn { background: rgba(255,193,7,.16) !important; color: #ffe6a0 !important; border-color: rgba(255,193,7,.35) !important; }
/* Unpaid-lead statuses stand out (amber = mid-checkout, grey = abandoned/freed). */
.pill-pending_deposit { background: rgba(255,193,7,.18) !important; color: #ffe6a0 !important; border-color: rgba(255,193,7,.4) !important; }
.pill-abandoned { background: rgba(255,255,255,.10) !important; color: #cdd3e6 !important; border-color: rgba(255,255,255,.22) !important; }

/* ---- Pay-stat-card colour variants (kept their light tints) ---- */
.pay-stat-card.pay-stat-ok { background: rgba(34,197,94,.14) !important; color: #b9f6ca !important; border: 1px solid rgba(34,197,94,.35) !important; }
.pay-stat-card.pay-stat-warn { background: rgba(255,193,7,.14) !important; color: #ffe6a0 !important; border: 1px solid rgba(255,193,7,.35) !important; }

/* ---- Delivery banner variants ---- */
.delivery-banner.warn { background: rgba(255,193,7,.14) !important; color: #ffe6a0 !important; border: 1px solid rgba(255,193,7,.35) !important; }
.delivery-banner.muted { background: var(--ke-surface) !important; color: var(--ke-dim) !important; border: 1px solid var(--ke-line) !important; }

/* The consent / checkbox row was a cream (#fff9e6) callout. */
.form-row.checkbox { background: rgba(0,152,255,.08) !important; border: 1px solid var(--ke-line) !important; color: var(--ke-text); }

/* Inflatable-card checkbox circle (the idle, invisible-until-selected dot). */
.inflatable-card-check { background: rgba(255,255,255,.06) !important; border-color: var(--ke-line-strong) !important; }
/* When the card IS selected, show the bold red→pink K&E badge with a white ring
   + white check so the pick is unmistakable. Overrides the idle dot above. */
.inflatable-card.selected .inflatable-card-check {
  background: linear-gradient(135deg, #FF2D55 0%, #FF0A7A 100%) !important;
  border-color: #fff !important;
  color: #fff !important;
}
/* Keep the selected frame solid brand blue even over the dark-theme card border. */
.inflatable-card.selected { border-color: #0098FF !important; }

/* =====================================================================
   UNIFIED BUTTONS — same brand language in every portal + invitations
   ===================================================================== */
/* Primary action = brand gradient, everywhere (was pink in .theme-app). */
.btn-primary, .btn-app, .pay-btn, .btn-yellow, button.primary,
.rsvp-btn.selected.yes {
  background: var(--ke-gradient) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(123,69,245,.32) !important;
}
.btn-primary:hover, .btn-app:hover, .pay-btn:hover, .btn-yellow:hover { filter: brightness(1.08); color: #fff !important; }

/* Secondary / outline = transparent on a hairline (covers app + danger too). */
.btn-secondary, .btn-app.secondary, .btn-app.ghost, .btn-sm.secondary,
button.secondary {
  background: rgba(255,255,255,.06) !important; color: var(--ke-text) !important;
  border: 1px solid var(--ke-line-strong) !important; box-shadow: none !important;
}
.btn-secondary:hover, .btn-app.secondary:hover, .btn-app.ghost:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* Danger keeps a red identity but on a dark base (not white). */
.btn-app.danger, .btn-secondary.danger, .btn-danger {
  background: rgba(255,80,80,.16) !important; color: #ffc1c1 !important;
  border: 1px solid rgba(255,80,80,.4) !important;
}

/* Small / table buttons that defaulted to white */
.btn-sm { background: rgba(255,255,255,.06) !important; color: var(--ke-text) !important; border: 1px solid var(--ke-line-strong) !important; }
.btn-sm:hover { background: rgba(255,255,255,.12) !important; color: #fff !important; }

/* Dashboard quick-action tiles: dark with a neon hover. */
.dash-action-btn { background: var(--ke-surface) !important; color: var(--ke-text) !important; border: 1px solid var(--ke-line) !important; }
.dash-action-btn:hover { background: rgba(0,152,255,.14) !important; border-color: rgba(0,152,255,.5) !important; }

/* Tabs: dim by default, neon highlight when active (admin + crew). */
.tab, .emp-tab-btn { color: var(--ke-dim) !important; background: transparent !important; }
.tab:hover, .emp-tab-btn:hover { background: rgba(255,255,255,.06) !important; color: #fff !important; }
.tab.active, .emp-tab-btn.active { background: rgba(0,152,255,.16) !important; color: #fff !important; border-color: rgba(0,152,255,.45) !important; }

/* Login pages (admin + employee) — make the whole screen on-brand. */
.login-shell {
  background:
    radial-gradient(circle at 15% -10%, rgba(0,152,255,.16), transparent 42%),
    radial-gradient(circle at 88% 0%, rgba(255,10,122,.12), transparent 42%),
    var(--ke-bg) !important;
}
.login-card { box-shadow: 0 18px 50px rgba(0,0,0,.55) !important; }
.login-card h1, .login-card h2 { color: #fff !important; }
.login-card .muted, .login-card code { color: var(--ke-dim) !important; }
.login-card code { background: rgba(255,255,255,.08) !important; padding: 1px 6px; border-radius: 6px; }

/* Alert boxes were light red/green — translucent neon tints on dark. */
.alert-error, .form-error { background: rgba(255,80,80,.16) !important; color: #ffc1c1 !important; border: 1px solid rgba(255,80,80,.4) !important; }
.alert-success, .form-success { background: rgba(34,197,94,.16) !important; color: #b9f6ca !important; border: 1px solid rgba(34,197,94,.35) !important; }

/* ---- Inline-style safety net ----
   A lot of portal markup is built in JS with inline light backgrounds
   (#fff8ea warnings, #fafbfc summaries, #f0f7ff info boxes, etc.). Class-based
   rules can't reach those, so match the inline hex and flip it to dark glass.
   We keep any coloured border (the warning/info accent) and only recolour the
   fill + text. QR-code and signature backings use the literal word "white"
   (not a hex), so they're deliberately NOT matched and stay scannable/visible.
   Scoped to the portals so print-only docs (receipt, proof-packet) stay light. */
.theme-app [style*="background:#f"], .theme-fun [style*="background:#f"],
.theme-app [style*="background: #f"], .theme-fun [style*="background: #f"] {
  background: rgba(255,255,255,.05) !important;
  color: var(--ke-text) !important;
}
.theme-app [style*="background:#f"] .muted, .theme-fun [style*="background:#f"] .muted,
.theme-app [style*="background:#f"] small, .theme-fun [style*="background:#f"] small {
  color: var(--ke-dim) !important;
}

/* Inline DARK TEXT colours (set in JS) would vanish on the dark theme — remap
   each family to a readable on-dark equivalent. Scoped to the portals. */
.theme-app [style*="color:#1A2B4A"], .theme-fun [style*="color:#1A2B4A"],
.theme-app [style*="color:#1a2b4a"], .theme-fun [style*="color:#1a2b4a"] { color: #ffffff !important; }
.theme-app [style*="color:#666"], .theme-fun [style*="color:#666"],
.theme-app [style*="color: #666"], .theme-fun [style*="color: #666"],
.theme-app [style*="color:#555"], .theme-fun [style*="color:#555"],
.theme-app [style*="color:#888"], .theme-fun [style*="color:#888"] { color: var(--ke-dim) !important; }
.theme-app [style*="color:#b00020"], .theme-fun [style*="color:#b00020"],
.theme-app [style*="color:#c62828"], .theme-fun [style*="color:#c62828"],
.theme-app [style*="color:#8a1a1a"], .theme-fun [style*="color:#8a1a1a"],
.theme-app [style*="color:#c0392b"], .theme-fun [style*="color:#c0392b"] { color: #ffc1c1 !important; }
.theme-app [style*="color:#1b5e20"], .theme-fun [style*="color:#1b5e20"],
.theme-app [style*="color:#2a8a3e"], .theme-fun [style*="color:#2a8a3e"],
.theme-app [style*="color:#0a7a0a"], .theme-fun [style*="color:#0a7a0a"] { color: #b9f6ca !important; }
.theme-app [style*="color:#a25b00"], .theme-fun [style*="color:#a25b00"],
.theme-app [style*="color:#c47f00"], .theme-fun [style*="color:#c47f00"],
.theme-app [style*="color:#8a5a00"], .theme-fun [style*="color:#8a5a00"],
.theme-app [style*="color: #8a5a00"], .theme-fun [style*="color: #8a5a00"],
.theme-app [style*="color:#8a6300"], .theme-fun [style*="color:#8a6300"],
.theme-app [style*="color:#5C4500"], .theme-fun [style*="color:#5C4500"] { color: #ffe6a0 !important; }
/* More inline dark accents set in JS that the remap table missed (audit round 1):
   medium red #c33 (danger links / "owing"), medium blue #06c, greens #0a7 / #1f7a44. */
.theme-app [style*="color:#c33"], .theme-fun [style*="color:#c33"],
.theme-app [style*="color: #c33"], .theme-fun [style*="color: #c33"] { color: #ffc1c1 !important; }
.theme-app [style*="color:#06c"], .theme-fun [style*="color:#06c"],
.theme-app [style*="color: #06c"], .theme-fun [style*="color: #06c"] { color: #9bd7ff !important; }
.theme-app [style*="color:#0a7"], .theme-fun [style*="color:#0a7"],
.theme-app [style*="color:#1f7a44"], .theme-fun [style*="color:#1f7a44"] { color: #b9f6ca !important; }

/* Stray light cards in the admin Customers-tab detail modal that no dark-surface
   sweep reached — their labels/sub-text (globally forced light for the dark theme)
   were sitting on a near-white card = invisible. Darken the cards + lift their own
   dark-coloured text so everything reads. */
.customer-edit-block { background: var(--ke-surface) !important; border-color: var(--ke-line) !important; }
.customer-edit-block label, .customer-edit-block summary { color: var(--ke-text) !important; }
.danger-zone { background: rgba(255,80,80,.10) !important; border-color: rgba(255,80,80,.35) !important; }
.customer-history-row { background: var(--ke-surface) !important; border: 1px solid var(--ke-line) !important; }
.customer-history-row .hist-date, .customer-history-row .hist-money strong { color: var(--ke-text) !important; }
.customer-history-row .hist-sub, .customer-history-row .muted { color: var(--ke-dim) !important; }

/* =====================================================================
   HEADER LOGO FIX — a stale ".brand-logo { gap:0 !important }" (from when
   the logo was a single baked-in image) was jamming the wordmark against
   the icon, and Montserrat wasn't loaded so the wordmark fell back to a
   generic font. Fonts are now loaded site-wide; here we restore the gap
   and lock the mark size so the lockup reads cleanly in every header.
   ===================================================================== */
.brand-logo.brand-lockup { gap: 11px !important; align-items: center !important; }
.navbar .brand-lockup .brand-mark,
.app-header .brand-lockup .brand-mark,
.emp-header .brand-lockup .brand-mark { height: 40px !important; width: auto !important; }
@media (max-width: 720px) {
  .navbar .brand-lockup .brand-mark,
  .app-header .brand-lockup .brand-mark,
  .emp-header .brand-lockup .brand-mark { height: 34px !important; }
}
/* The wordmark renders in the brand font now; keep it crisp white on dark. */
.brand-lockup .brand-word {
  font-family: 'Montserrat', 'Inter', system-ui, sans-serif !important;
  font-weight: 800 !important; letter-spacing: -.01em !important;
}

/* =====================================================================
   TRUST STRIP — make the four badges identical: one even row of rounded,
   equal-height cards (was an auto-fit grid that gave 3 columns + a wrapped
   4th, with each card sized to its own text).
   ===================================================================== */
.trust-strip-inner {
  grid-template-columns: repeat(4, 1fr) !important;
  align-items: stretch !important;
  gap: 14px !important;
}
.trust-item {
  align-items: center;
  gap: 12px;
  padding: 16px 18px !important;
  border-radius: 16px !important;
  min-height: 84px;
  box-sizing: border-box;
}
.trust-icon {
  width: 46px !important; height: 46px !important; font-size: 24px !important;
  border-radius: 14px !important;   /* rounded square reads as a set, not loose circles */
}
@media (max-width: 900px) { .trust-strip-inner { grid-template-columns: repeat(2, 1fr) !important; } }
@media (max-width: 520px) { .trust-strip-inner { grid-template-columns: 1fr !important; } }

/* ---- Blog editor: cover-photo picker (upload / inflatable / URL) ---- */
.blog-cover-row { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; }
.blog-cover-fields { flex: 1; min-width: 220px; }
.blog-cover-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.blog-cover-preview {
  width: 132px; height: 88px; flex-shrink: 0; border-radius: 12px;
  background: #0a1130 center/cover no-repeat; border: 1px solid var(--ke-line);
  display: none;
}
.blog-cover-preview.has-img { display: block; }

/* =====================================================================
   PORTAL DARK AUDIT FIX (admin + employee + customer)
   The admin/employee shell was STILL light because ".theme-app {
   background: var(--app-bg) }" is a 0,1,0 selector that beats the dark
   <body> rule — and the legacy --app-* tokens were grey/white. Re-point
   those tokens at the dark palette, kill the green buttons, tint every
   status badge, and broaden the inline-style net to ALL hex backgrounds
   (the earlier net only caught #f…, so it missed #e8ffe8 greens, #eef
   greys, etc.). Appended last so it wins by source order.
   ===================================================================== */

/* 1) Re-point the legacy admin/employee theme tokens to the dark palette. */
.theme-app {
  --app-bg: #050814 !important;
  --app-card: #0d1430 !important;
  --app-text: #e7ebf7 !important;
  --app-muted: #a7b0cf !important;
  --app-border: rgba(255,255,255,.12) !important;
  --app-primary: #0098FF !important;
}
/* Force the shell itself dark (same neon glow as the public site), overriding
   the original ".theme-app { background: var(--app-bg) }". */
.theme-app {
  background:
    radial-gradient(circle at 12% -8%, rgba(0,152,255,.10), transparent 38%),
    radial-gradient(circle at 92% -2%, rgba(255,10,122,.08), transparent 38%),
    var(--ke-bg) !important;
  background-attachment: fixed !important;
  color: var(--ke-text) !important;
}
/* The legacy topbar used --app-text (a dark colour) as its BACKGROUND — pin it. */
.theme-app .topbar { background: rgba(5,8,20,.92) !important; color: #fff !important; border-bottom: 1px solid var(--ke-line) !important; }
.theme-app .app-container, .theme-app .app-main, .theme-app .app-shell, .theme-app main { background: transparent !important; }

/* 2) Green / off-brand buttons → brand gradient. */
.btn-app.success, .btn-done, .btn-green, .btn-success, button.success {
  background: var(--ke-gradient) !important; color: #fff !important; border: none !important;
}
.btn-app.success:hover, .btn-done:hover, .btn-green:hover, .btn-success:hover { filter: brightness(1.08); color: #fff !important; }

/* 3) Status badges + dashboard job-status → translucent neon tints (never light). */
.s-confirmed, .s-delivered, .dash-job-status.status-done, .job-signoff-done {
  background: rgba(34,197,94,.16) !important; color: #b9f6ca !important; border: 1px solid rgba(34,197,94,.32) !important;
}
.s-scheduled, .dash-job-status.status-ready, .badge-blue {
  background: rgba(0,152,255,.16) !important; color: #9bd7ff !important; border: 1px solid rgba(0,152,255,.32) !important;
}
.s-new_request, .dash-job-status.status-new {
  background: rgba(255,193,7,.16) !important; color: #ffe6a0 !important; border: 1px solid rgba(255,193,7,.30) !important;
}
.s-needs_follow_up, .dash-job-status.status-in-progress {
  background: rgba(255,140,0,.18) !important; color: #ffd0a0 !important; border: 1px solid rgba(255,140,0,.32) !important;
}
.s-cancelled {
  background: rgba(255,80,80,.16) !important; color: #ffc1c1 !important; border: 1px solid rgba(255,80,80,.32) !important;
}
.s-picked_up {
  background: rgba(255,255,255,.08) !important; color: var(--ke-dim) !important; border: 1px solid var(--ke-line) !important;
}

/* 4) Broaden the inline-style net to ANY hex background inside a portal
   (QR/signature backings use the word "white", not a hex, so they stay). */
.theme-app [style*="background:#"], .theme-fun [style*="background:#"],
.theme-app [style*="background: #"], .theme-fun [style*="background: #"] {
  background: rgba(255,255,255,.05) !important; color: var(--ke-text) !important;
}
/* …but keep a green/red hint for the requested-time approve/decline boxes. */
.theme-fun [style*="background:#e8ffe8"], .theme-app [style*="background:#e8ffe8"],
.theme-fun [style*="background:#e8f5e9"], .theme-app [style*="background:#e8f5e9"] {
  background: rgba(34,197,94,.16) !important; color: #b9f6ca !important;
}
.theme-fun [style*="background:#ffecec"], .theme-app [style*="background:#ffecec"],
.theme-fun [style*="background:#ffe6e6"], .theme-app [style*="background:#ffe6e6"] {
  background: rgba(255,80,80,.16) !important; color: #ffc1c1 !important;
}

/* 4b) Any .ack-box with an INLINE hex background gets flipped to dark glass by
   the net above, but .ack-box strong { color:#0b3d20 } leaves its emphasis text
   dark-green = unreadable on the dark surface. Force a light <strong> on exactly
   those flipped boxes. The light-surface .ack-box (no inline bg, e.g. the green
   "Invitation ready" banner) isn't matched, so it keeps its dark-on-light text. */
.theme-fun .ack-box[style*="background:#"] strong, .theme-app .ack-box[style*="background:#"] strong,
.theme-fun .ack-box[style*="background: #"] strong, .theme-app .ack-box[style*="background: #"] strong { color: #fff !important; }

/* 5) Scrollbars + stray greys. */
::-webkit-scrollbar-thumb { background: rgba(255,255,255,.18) !important; }
::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,.30) !important; }

/* =====================================================================
   READABILITY FIX — light boxes whose text now inherits the theme's light
   colour become "light text on a light box" (unreadable grey). The booking
   form's live estimate (#price-summary) + add-ons subtotal are the cited
   case. Darken the box AND set every line of text to a readable on-dark
   colour so the total is crisp.
   ===================================================================== */
.price-summary, .addons-total {
  background: var(--ke-surface) !important;
  border: 1px solid var(--ke-line) !important;
  color: var(--ke-text) !important;
}
.price-summary .ps-line, .addon-total-line { color: var(--ke-text) !important; }
.price-summary-title, .addon-total-header { color: var(--ke-dim) !important; }
.ps-total, .addon-total-grand {
  color: #ffffff !important;
  border-top-color: var(--ke-line-strong) !important;
}
.ps-deposit { color: #b9f6ca !important; }            /* deposit line = green, readable on dark */
.ps-balance, .ps-line-muted span:last-child { color: var(--ke-dim) !important; }
.price-summary-note { border-top-color: var(--ke-line) !important; color: var(--ke-dim) !important; }

/* Safety: inside ANY dark glass surface, plain text + bold inherit the light
   body colour (catches stray dark <strong>/<span> that had no explicit colour). */
.theme-fun .card, .theme-fun .form-card, .theme-app .card,
.price-summary, .addons-total, .booking-summary, .legal-box, .info-grid > div {
  color: var(--ke-text);
}

/* Dark-on-dark TEXT fixes found by a contrast scan of the booking form
   (these had explicit dark colours from the old light theme). */
.inflatable-card-name { color: #ffffff !important; }
.addons-section-label { color: var(--ke-dim) !important; }

/* Time-window blocks: dark cream box + dark text → dark glass + readable text. */
.time-window-block { background: var(--ke-surface) !important; border-color: var(--ke-line-strong) !important; }
.time-window-block.time-window-primary {
  background: linear-gradient(135deg, rgba(0,152,255,.12) 0%, rgba(123,69,245,.16) 100%) !important;
  border-color: rgba(123,69,245,.55) !important;
}
.time-window-block .time-window-label,
.form-card .time-window-block .time-window-label { color: var(--ke-dim) !important; }
.time-window-block.time-window-primary .time-window-label strong { color: #ffffff !important; }
.time-window-display { color: #ffffff !important; }
.time-window-primary .time-window-display { color: #b9a3ff !important; }

/* Quantity steppers were white circles with purple glyphs → dark glass. */
.addon-step-btn { background: rgba(255,255,255,.06) !important; color: #b9a3ff !important; border-color: rgba(123,69,245,.6) !important; }
.addon-step-btn:hover:not(:disabled) { background: var(--ke-gradient) !important; color: #fff !important; }
.addon-step-btn:disabled { background: transparent !important; border-color: var(--ke-line) !important; color: #5a6488 !important; }

/* Content links stay bright cyan (not the dim brand purple/navy). Buttons,
   the CTA pill and the brand lockup keep their own styling; the navbar's own
   (more-specific) rule keeps nav links white. */
.theme-fun a:not([class*="btn"]):not(.cta-link):not(.brand-logo):not(.brand-lockup),
.theme-app a:not([class*="btn"]):not(.cta-link):not(.brand-logo):not(.brand-lockup) {
  color: #6fd0ff !important;
}

/* =====================================================================
   ADDRESS AUTOCOMPLETE + DELIVERY BANNER — the suggestion text was
   near-black (#1c1c1c) / grey (#777) on the dark dropdown, so a typed
   street address read as unreadable grey. Make it white / dim.
   ===================================================================== */
.address-suggest-item .as-main { color: #ffffff !important; }
.address-suggest-item .as-sub { color: var(--ke-dim) !important; }
.delivery-banner.ok { background: rgba(34,197,94,.16) !important; color: #b9f6ca !important; border-color: rgba(34,197,94,.35) !important; }

/* Uploaded custom logo: keep the header mark crisp at the lockup size. */
.brand-lockup .brand-mark, .navbar .brand-logo img { object-fit: contain; }
/* When a custom logo is uploaded, it's the WHOLE logo — drop the text wordmark
   and let the image run a little taller/wider so it reads well. */
.brand-lockup.has-custom-logo .brand-word { display: none !important; }
.brand-lockup.has-custom-logo .brand-mark { height: 48px !important; max-width: 220px; }
@media (max-width: 720px) { .brand-lockup.has-custom-logo .brand-mark { height: 40px !important; max-width: 170px; } }

/* =====================================================================
   UNIFIED BUTTON SYSTEM (customer + admin + crew)
   Three states, brand-consistent everywhere:
     • PRIMARY / advance  → brand gradient (the logo's blue→purple→pink)
     • DANGER  / problem  → red
     • BUSY (action running, i.e. the button is disabled mid-request) → slate
   Plus the existing outline secondary. Appended last so it wins.
   ===================================================================== */

/* PRIMARY — every positive/advance button → the brand gradient. */
.btn-primary, .btn-app, .btn-app.primary, .btn-app.success,
.btn-onway, .btn-done, .btn-pickup, .btn-blue, .btn-status-done,
.job-signoff-btn, .btn-yellow, button.primary, .pay-btn.selected {
  background: var(--ke-gradient) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(123,69,245,.30) !important;
}
.btn-primary:hover, .btn-app:hover, .btn-onway:hover, .btn-done:hover,
.btn-pickup:hover, .btn-blue:hover, .btn-status-done:hover, .job-signoff-btn:hover,
.btn-yellow:hover { filter: brightness(1.08) !important; color: #fff !important; }

/* DANGER — problem / cancel / delete / remove → red. */
.btn-problem, .btn-app.danger, .btn-danger, .btn-secondary.danger,
.btn-delete, button.danger {
  background: linear-gradient(135deg, #FF3B6B 0%, #D11149 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(209,17,73,.30) !important;
}
.btn-problem:hover, .btn-app.danger:hover, .btn-danger:hover,
.btn-secondary.danger:hover { filter: brightness(1.08) !important; color: #fff !important; }

/* BUSY — while an action is running, handlers set the button disabled
   ("Saving…"/"Sending…"). Show a distinct muted slate + progress cursor so
   it's obvious work is happening. (Excludes the faint quantity steppers.) */
.btn:disabled, .btn[disabled], .btn-app:disabled, .btn-app[disabled],
.pay-btn:disabled, .job-signoff-btn:disabled {
  background: linear-gradient(135deg, #4a5578 0%, #2f3a5c 100%) !important;
  color: #cdd6f5 !important;
  border-color: transparent !important;
  box-shadow: none !important;
  filter: none !important;
  opacity: 1 !important;
  cursor: not-allowed !important;
}
/* A button actively running a request (handlers add aria-busy or .is-busy) shows
   the progress cursor; the slate colour above already signals "working". */
.btn[aria-busy="true"], .btn.is-busy, .btn-app[aria-busy="true"], .btn-app.is-busy { cursor: progress !important; }

/* =====================================================================
   DENSITY — compress the bookings + cards so they're not huge, and let
   tables/modals fit the screen (no more scrolling right to reach actions).
   ===================================================================== */

/* Crew job cards: tighter padding + gaps. */
.job-card { padding: 12px 14px !important; margin-bottom: 10px !important; }
.job-card-top { gap: 10px !important; }

/* Admin booking rows: denser, and cells truncate instead of forcing width. */
.booking-row { padding: 9px 12px !important; gap: 10px !important; }
.booking-row > * { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* Data tables: tighter cells. */
.data-table th { padding: 8px 10px !important; }
.data-table td { padding: 8px 10px !important; font-size: 13px !important; }
.data-table.compact th, .data-table.compact td { padding: 6px 9px !important; }

/* Stat / dashboard / section cards: trim the generous padding. */
.dash-stat-card, .stat-card, .pay-stat-card, .dash-card { padding: 14px 16px !important; }
.settings-section { padding: 16px 18px !important; }
.bd-section { padding: 12px 14px !important; }

/* Tables never push the page sideways — they scroll inside their own box. */
.table-wrap, .table-scroll { overflow-x: auto !important; -webkit-overflow-scrolling: touch; }
/* Stop the PAGE itself from scrolling sideways (the "have to scroll right"
   complaint) without clipping tables — those scroll within .table-wrap. */
body { overflow-x: hidden; }

/* Modals fit the viewport so the close/action controls are always reachable
   (a 900px "wide" modal was overflowing to the right on narrower admin views). */
.modal-card { max-width: min(560px, 94vw) !important; }
.modal-card.wide { max-width: min(900px, 96vw) !important; }
.modal, .modal-overlay { overflow-y: auto; }
.modal-card .data-table { display: block; overflow-x: auto; }

/* =====================================================================
   STICKY HEADER — must stay fully readable while scrolling. The translucent
   version (rgba .92 + blur) let the bright hero bleed through so it looked
   "clear". Make the bar fully opaque with a clear edge + shadow.
   ===================================================================== */
.navbar, .theme-fun .navbar {
  background: #080b1c !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border-bottom: 1px solid var(--ke-line-strong) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.55) !important;
}

/* =====================================================================
   MODALS ("windows") — match the brand kit in every portal: dark glass with
   a neon gradient accent bar across the top.
   ===================================================================== */
.modal-card {
  position: relative;
  border: 1px solid var(--ke-line-strong) !important;
  overflow: hidden auto;
}
.modal-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--ke-gradient);
  border-radius: 14px 14px 0 0;
  pointer-events: none;
}

/* =====================================================================
   CREW "customer requested a specific time" banner — was a light-pink
   gradient box with dark navy text (unreadable on the dark theme). Keep
   the magenta attention identity, but on dark glass with readable text.
   ===================================================================== */
.job-time-required {
  background: rgba(255,10,122,.12) !important;
  border: 1px solid rgba(255,10,122,.45) !important;
}
.job-time-required-label { color: #ff8ac0 !important; }
.job-time-required-value { color: #ffffff !important; }

/* Crew "Safety rules" / notes callout — was a cream box (#FFF9E6) whose text
   inherited the theme's light colour (unreadable). Dark amber "note" tint with
   readable text. */
.job-notes {
  background: rgba(255,193,7,.12) !important;
  border: 1px solid rgba(255,193,7,.30) !important;
  color: var(--ke-text) !important;
}
.job-notes strong { color: #ffe6a0 !important; }
.job-notes p { color: var(--ke-text) !important; }

/* =====================================================================
   ADMIN + CREW HEADERS — were translucent (rgba .92) so they looked
   transparent while scrolling. Make them fully opaque like the public nav.
   ===================================================================== */
.app-header, .emp-header {
  background: #080b1c !important;
  border-bottom: 1px solid var(--ke-line-strong) !important;
  box-shadow: 0 6px 20px rgba(0,0,0,.55) !important;
}
/* The crew tab bar is sticky — give it a solid bg so content doesn't show through. */
.emp-tabs { background: #080b1c !important; border-bottom: 1px solid var(--ke-line) !important; }

/* =====================================================================
   DARK-BLUE TEXT → readable light. Tons of text used #1A2B4A (dark navy),
   which is barely visible on the dark theme — the dashboard stat values,
   the recent-activity / job customer names, etc. Make them white; their
   grey sub-lines become a readable dim.
   ===================================================================== */
.stat-value, .dash-stat-value, .pay-stat-value,
.dash-job-customer, .dash-activity-customer, .job-customer,
.bd-summary-value, .panel-head h2 { color: #ffffff !important; }
.dash-stat-label, .dash-stat-sub, .dash-job-sub, .dash-activity-sub { color: var(--ke-dim) !important; }
/* The "Today's/Tomorrow's jobs" cards + recent-activity rows had their text turned
   light for the dark theme, but these specific cards kept a light (#fafbfc) card
   background and a light hover — so the customer name (now white) was white-on-white.
   Darken the card + hover, and lift the dark-navy time text to readable. */
.dash-job { background: var(--ke-surface) !important; border-color: var(--ke-line) !important; }
.dash-job:hover, .dash-activity:hover { background: rgba(124,93,222,.15) !important; border-color: #7C5DDE !important; }
.dash-job-time { color: var(--ke-text) !important; }
/* Contact links in the booking detail used dark navy → bright cyan. */
.bd-contact-line a { color: #6fd0ff !important; }

/* =====================================================================
   CREW "Problem" button — a brand-red action that matches the status
   buttons. It was a lonely half-width cell in the last grid row on desktop;
   span it full width on every size so it reads as one intentional button.
   ===================================================================== */
.job-status-grid .btn.danger, .job-status-grid .btn-problem { grid-column: 1 / -1; }
.job-status-grid .btn.danger, .job-status-grid .btn-problem {
  background: linear-gradient(135deg, #FF3B6B 0%, #D11149 100%) !important;
  color: #fff !important;
  border: none !important;
  box-shadow: 0 6px 18px rgba(209,17,73,.30) !important;
}

/* =====================================================================
   CREW "My Pay" stat cards — drop the green/amber tints so all three
   match the standard dark card (the user wants them uniform).
   ===================================================================== */
.pay-stat-card.pay-stat-ok, .pay-stat-card.pay-stat-warn {
  background: var(--ke-surface) !important;
  border: 1px solid var(--ke-line) !important;
  color: var(--ke-text) !important;
}

/* =====================================================================
   BUTTON SHAPE — every button gets the rounded "pill" shape of the
   homepage CTA (admin/crew .btn-app etc. were rounded rectangles).
   ===================================================================== */
.btn, .btn-app, .btn-app.secondary, .btn-app.danger, .btn-app.success,
.btn-sm, .btn-yellow, .btn-danger, .btn-problem, .btn-status-done,
.btn-onway, .btn-done, .btn-pickup, .btn-blue, .job-signoff-btn,
.dash-action-btn, button.primary, button.secondary {
  border-radius: 999px !important;
}

/* =====================================================================
   CALENDAR — full dark/neon theme. Cells were white/light (blocked = light
   red, has-bookings = light blue) with dark navy day numbers (invisible).
   ===================================================================== */
.cal-header-row > div { color: var(--ke-dim) !important; }
.cal-day-num { color: #ffffff !important; }
.cal-cell { background: var(--ke-surface-2) !important; border: 1px solid var(--ke-line) !important; }
.cal-cell:hover { border-color: rgba(0,152,255,.55) !important; }
.cal-cell.today { border-color: #18D6FF !important; border-width: 2px !important; }
.cal-cell.blocked { background: rgba(255,80,80,.16) !important; border-color: rgba(255,80,80,.35) !important; }
.cal-cell.has-bookings { background: rgba(0,152,255,.12) !important; border-color: rgba(0,152,255,.30) !important; }
.cal-cell.empty { background: transparent !important; border: 0 !important; }
.cal-evt-more { color: var(--ke-dim) !important; }
.cal-unblock { color: #ffc1c1 !important; }

/* ---- Mobile calendar ----
   The 7-column month grid squeezes text event pills ("10:00 Brendan") into ~45px
   cells where the text is clipped and the cells are awkwardly tall. On phones,
   shrink the cells and render each booking as a thin coloured bar (its status
   colour, text hidden) so the grid fits and shows booking density at a glance —
   tap a day to open its bookings (handled by the existing cell click). */
@media (max-width: 768px) {
  .cal-header-row { gap: 2px; }
  .cal-header-row > div { font-size: 9px !important; padding: 2px 0 !important; }
  .cal-week { gap: 2px !important; margin-bottom: 2px !important; }
  .cal-cell, .theme-app .cal-cell { min-height: 48px !important; padding: 3px 3px 4px !important; }
  .cal-day-num, .theme-app .cal-day-num { font-size: 11px !important; margin-bottom: 2px !important; }
  .theme-app .cal-cell.today .cal-day-num { min-width: 18px; height: 18px; font-size: 10px; }
  .cal-evt, .theme-app .cal-evt {
    font-size: 0 !important; line-height: 0 !important; height: 5px !important;
    padding: 0 !important; margin: 2px 0 !important; border-radius: 2px !important; overflow: hidden !important;
  }
  .cal-evt-more, .theme-app .cal-evt-more { font-size: 9px !important; padding: 0 2px !important; margin-top: 1px !important; }
  .cal-blocked { font-size: 9px !important; padding: 1px 3px !important; }
}

/* =====================================================================
   AUDIT FIXES — light boxes the safety-nets can't reach (inline pastel
   gradients + unique classes). Critical + High items from the big audit.
   ===================================================================== */

/* Pastel-gradient inline boxes (RSVP summary, "no image" placeholder tiles).
   The bg-net only catches inline HEX backgrounds, not linear-gradient(), so
   match the gradient's signature colour. → dark glass + readable text. */
.theme-fun [style*="#E6F8FE"], .theme-app [style*="#E6F8FE"],
.theme-fun [style*="#F0E6FB"], .theme-app [style*="#F0E6FB"] {
  background: var(--ke-surface) !important;
  color: var(--ke-text) !important;
  border-color: var(--ke-line) !important;
}

/* Share page: the whole content card was solid white (inline <style>). */
.share-card { background: var(--ke-surface) !important; border: 1px solid var(--ke-line) !important; color: var(--ke-text) !important; box-shadow: 0 18px 50px rgba(0,0,0,.5) !important; }

/* Admin dashboard "needs attention" alert card — cream → dark amber note. */
.dash-alert { background: rgba(255,193,7,.12) !important; border-left-color: #ffb300 !important; border-color: rgba(255,193,7,.3) !important; }
.dash-alert-title { color: #ffffff !important; }
.dash-alert-sub, .dash-alert .muted { color: var(--ke-dim) !important; }

/* Homepage quick-view spec chips (dimensions/gate/blower) — light → dark glass. */
.quickview-meta li { background: rgba(255,255,255,.08) !important; color: var(--ke-text) !important; }

/* Chat thread (customer portal + admin): the thread card itself was still the
   original light #fafbfc, so the incoming bubble's light text sat on a near-white
   surface = unreadable. Bring the whole thread onto the dark theme. */
.chat-thread { background: var(--ke-surface) !important; border-color: var(--ke-line) !important; }
.chat-bubble.chat-customer { background: rgba(255,255,255,.08) !important; color: var(--ke-text) !important; }
.chat-bubble.chat-customer .chat-sender, .chat-bubble.chat-customer .chat-body { color: var(--ke-text) !important; }
.chat-bubble.chat-customer .chat-time { color: var(--ke-dim) !important; }

/* Customer-messages inbox cards (admin "Messages" tab) were a hardcoded WHITE card,
   so on the dark admin theme the customer's name + message + timestamp were white
   text on a white card = invisible. Bring the card onto the dark theme so incoming
   customer messages are readable. */
.msg-inbox-item { background: var(--ke-surface) !important; border-color: var(--ke-line) !important; color: var(--ke-text) !important; }
.msg-inbox-item .muted { color: var(--ke-dim) !important; }
.msg-inbox-item:hover { border-color: #7C5DDE !important; }

/* Homepage "Free local delivery" card text was dark green on the dark card. */
.service-area-card.primary h3, .service-area-card.primary p,
.service-area-card.primary .service-area-title { color: #ffffff !important; }

/* Customer portal pizza-tracker strip — pastel gradient + white icons → dark. */
.tracker-strip { background: var(--ke-surface) !important; border: 1px solid var(--ke-line) !important; }
.tracker-icon { background: rgba(255,255,255,.08) !important; color: #fff !important; }
.tracker-step.done .tracker-icon { background: var(--ke-gradient) !important; }
.tracker-label { color: var(--ke-dim) !important; }
.tracker-step.done .tracker-label { color: var(--ke-text) !important; }

/* =====================================================================
   BUTTON SWEEP — bring the last stragglers onto the brand kit.
   ===================================================================== */

/* Payment-method selector cards were solid white. */
.pay-btn { background: var(--ke-surface) !important; border: 1.5px solid var(--ke-line-strong) !important; color: var(--ke-text) !important; }
.pay-btn:hover { border-color: rgba(0,152,255,.6) !important; }
.pay-btn.selected, .pay-btn.active { background: rgba(0,152,255,.14) !important; border-color: rgba(0,152,255,.6) !important; color: #fff !important; }
.pay-btn small, .pay-btn .muted, .pay-btn .pay-sub { color: var(--ke-dim) !important; }

/* Text / link buttons → brand cyan (were white-ish / dark). */
.btn-link, .link-btn { color: #6fd0ff !important; background: transparent !important; border: 0 !important; }
.btn-link:hover, .link-btn:hover { color: #a9e4ff !important; }

/* Signature draw/type tabs (waiver) were white. */
.sig-tab { background: rgba(255,255,255,.06) !important; border: 1px solid var(--ke-line-strong) !important; color: var(--ke-dim) !important; }
.sig-tab.active { background: rgba(0,152,255,.16) !important; border-color: rgba(0,152,255,.5) !important; color: #fff !important; }

/* Booking-detail action row danger button → brand red. */
.bd-actions-row .bd-action-danger, .bd-action-danger {
  background: linear-gradient(135deg, #FF3B6B 0%, #D11149 100%) !important; color: #fff !important; border: none !important;
}

/* Sign-off button: keep the gradient on hover (was amber #B45309). */
.job-signoff-btn:hover { background: var(--ke-gradient) !important; filter: brightness(1.08); color: #fff !important; }

/* Secondary buttons: a clearly on-brand dark pill with a cyan edge — not a faint
   grey ghost. (These are by far the most common button across the portals.) */
.btn-secondary, .btn-app.secondary, .btn-app.ghost {
  background: rgba(0,152,255,.08) !important;
  border: 1.5px solid rgba(0,152,255,.40) !important;
  color: #d4e9ff !important;
}
.btn-secondary:hover, .btn-app.secondary:hover, .btn-app.ghost:hover {
  background: rgba(0,152,255,.18) !important; border-color: rgba(0,152,255,.65) !important; color: #fff !important;
}
/* …but a secondary that's ALSO .danger stays red (cancel/remove). */
.btn-secondary.danger {
  background: linear-gradient(135deg, #FF3B6B 0%, #D11149 100%) !important;
  border: none !important; color: #fff !important;
}

/* =====================================================================
   CONTRAST REMAPS — remaining dark/low-contrast text on dark surfaces.
   ===================================================================== */
/* Inline status text in the admin booking list/detail used dark hexes the
   earlier remap didn't cover. */
.theme-app [style*="color:#070"], .theme-fun [style*="color:#070"] { color: #b9f6ca !important; }   /* dark green → light green */
.theme-app [style*="color:#338"], .theme-fun [style*="color:#338"] { color: #9bd7ff !important; }   /* dark blue → light blue */
.theme-app [style*="color:#a60"], .theme-fun [style*="color:#a60"] { color: #ffe6a0 !important; }   /* dark amber → light amber */
.theme-app [style*="color:#444"], .theme-fun [style*="color:#444"],
.theme-app [style*="color:#777"], .theme-fun [style*="color:#777"],
.theme-app [style*="color:#999"], .theme-fun [style*="color:#999"] { color: var(--ke-dim) !important; }
/* Crew "My Pay" card labels + booking-detail contact / job-expand text. */
.pay-stat-label, .pay-stat-sub { color: var(--ke-dim) !important; }
.bd-contact-line, .bd-contact-line strong { color: var(--ke-text) !important; }
.job-expand-btn { color: var(--ke-text) !important; }

/* Customer booking flow: phone spacing/touch polish. Keep this as the final
   layer so older mobile rules above cannot re-cramp the form. */
@media (max-width: 600px) {
  .form-wrap {
    margin: -28px auto 42px !important;
    padding: 0 12px !important;
  }
  .form-card {
    padding: 20px 16px !important;
    border-radius: 12px !important;
  }
  .form-card h2 {
    margin: 30px 0 12px !important;
    font-size: 21px !important;
    line-height: 1.25 !important;
  }
  .form-card h2:first-child { margin-top: 0 !important; }
  .form-card .row,
  .form-card .row.two,
  .form-card .time-windows {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    margin-bottom: 18px !important;
  }
  .form-card input,
  .form-card select,
  .form-card textarea {
    min-height: 46px !important;
    font-size: 16px !important;
  }
  .checkbox-row,
  .info-banner label {
    gap: 12px !important;
    align-items: flex-start !important;
  }
  .checkbox-row input[type="checkbox"],
  .info-banner input[type="checkbox"] {
    width: 24px !important;
    height: 24px !important;
    min-width: 24px !important;
  }
  .photo-actions {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .photo-actions .btn {
    width: 100% !important;
    min-height: 46px !important;
  }
  .time-window-block {
    padding: 16px !important;
  }
  .time-window-display {
    font-size: 22px !important;
    line-height: 1.2 !important;
  }
  .addons-cards,
  .addons-grid {
    grid-template-columns: 1fr !important;
  }
}

/* =====================================================================
   BOOKINGS / JOBS UI POLISH
   Clickable booking rows, mobile card reflow, solid dropdown popups, and a
   touch more compact employee job cards. Frontend-only; no markup removed.
   ===================================================================== */

/* --- Admin bookings: the whole row opens the booking (no sideways scroll to
   reach the Open button). The button stays as the explicit, labelled control. --- */
#bookings-table tr.bk-row { cursor: pointer; }
#bookings-table tr.bk-row:hover { background: rgba(0,152,255,.10) !important; }
#bookings-table tr.bk-row:focus-visible { outline: 2px solid #0098FF; outline-offset: -2px; }

/* --- Solid, branded dropdown popups. The <select> box was dark, but its
   <option> list had no background and rendered see-through over the page.
   Give the popup a solid navy background with light text + a blue selected
   state. (Mobile uses the OS picker, which is already solid.) --- */
select option,
select optgroup {
  background-color: #0d1430 !important;
  color: #e7ebf7 !important;
}
select option:checked,
select option:hover,
select option:focus {
  background: #0098FF !important;
  color: #ffffff !important;
}

/* --- Admin bookings: reflow the wide 9-column table into stacked cards on
   phones, so there's no horizontal scrolling and the Open button is in-card. --- */
@media (max-width: 768px) {
  /* Only the bookings table drops its scroll container — other admin tables keep theirs. */
  section[data-panel="bookings"] .table-wrap {
    overflow-x: visible !important;
    background: transparent;
    box-shadow: none;
  }
  #bookings-table thead { display: none; }
  #bookings-table,
  #bookings-table tbody { display: block; width: 100%; }
  #bookings-table tr.bk-row {
    display: block;
    background: var(--ke-surface) !important;
    border: 1px solid var(--ke-line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  #bookings-table tr.bk-row:hover { background: var(--ke-surface) !important; }
  #bookings-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    width: auto;
    padding: 5px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: right;
  }
  #bookings-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ke-dim);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
    text-align: left;
    flex: 0 0 auto;
  }
  /* Reorder handle is a desktop-only affordance. */
  #bookings-table td.drag-handle { display: none; }
  /* Full-width Open button anchored at the bottom of each card. */
  #bookings-table td.booking-open-cell {
    display: block;
    padding-top: 10px !important;
  }
  #bookings-table td.booking-open-cell::before { content: none; }
  #bookings-table td.booking-open-cell .btn { width: 100%; }
}

/* --- Legacy Bookings table: let the action controls wrap instead of forcing a
   very wide, side-scrolling row on desktop. --- */
#legacy-table td.legacy-actions-cell { white-space: normal; min-width: 220px; }
#legacy-table td.legacy-actions-cell .btn,
#legacy-table td.legacy-actions-cell .btn-link,
#legacy-table td.legacy-actions-cell select { margin: 2px 4px 2px 0; vertical-align: middle; }

/* --- Legacy Bookings table: same mobile card reflow as the bookings table, so
   each row becomes a tidy stacked card and the phone never needs to scroll
   side-to-side to reach a column. --- */
@media (max-width: 768px) {
  section[data-panel="legacy_migration"] .table-wrap {
    overflow-x: visible !important;
    background: transparent;
    box-shadow: none;
  }
  #legacy-table thead { display: none; }
  #legacy-table,
  #legacy-table tbody { display: block; width: 100%; }
  #legacy-table tr {
    display: block;
    background: var(--ke-surface) !important;
    border: 1px solid var(--ke-line);
    border-radius: 14px;
    padding: 12px 14px;
    margin-bottom: 12px;
  }
  #legacy-table td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    width: auto;
    padding: 5px 0 !important;
    border: 0 !important;
    white-space: normal !important;
    text-align: right;
  }
  #legacy-table td::before {
    content: attr(data-label);
    font-weight: 700;
    color: var(--ke-dim);
    text-transform: uppercase;
    font-size: 11px;
    letter-spacing: .03em;
    text-align: left;
    flex: 0 0 auto;
  }
  /* Batch-select checkbox is a desktop power feature — hide it on the phone cards. */
  #legacy-table td.legacy-pick-cell { display: none; }
  /* Actions stack full-width at the bottom of each card and wrap to fit. */
  #legacy-table td.legacy-actions-cell {
    display: block;
    text-align: left;
    padding-top: 10px !important;
    min-width: 0;
  }
  #legacy-table td.legacy-actions-cell::before { content: none; }
  #legacy-table td.legacy-actions-cell .btn,
  #legacy-table td.legacy-actions-cell select { margin: 3px 6px 3px 0; }
}

/* =====================================================================
   COMPACT CREW JOB CARDS — tighter, scannable, matches admin density.
   Scoped to #jobs-list so other .job-card uses (dashboard) are untouched.
   Tap targets stay ≥44px via the existing .btn min-height on mobile.
   ===================================================================== */
#jobs-list .job-card { padding: 11px 13px !important; margin-bottom: 9px !important; }
#jobs-list .job-card-head { gap: 10px !important; }
#jobs-list .job-card-body { margin-top: 10px; }
#jobs-list .job-customer { font-size: 16px; line-height: 1.15; }
#jobs-list .job-date { font-size: 13px; margin-top: 1px; }
#jobs-list .job-address, #jobs-list .job-meta { margin-top: 1px; font-size: 12px; line-height: 1.3; }
#jobs-list .job-badges { margin-top: 7px; gap: 5px; }
#jobs-list .job-hints { margin-top: 6px; gap: 5px; }
#jobs-list .job-hint { font-size: 11px; padding: 3px 8px; }
#jobs-list .job-pay-line { margin: 6px 0 !important; padding: 6px 9px !important; font-size: 13px; }
#jobs-list .pay-banner { padding: 9px 11px !important; margin: 8px 0 !important; gap: 4px; }
#jobs-list .job-status-grid { gap: 6px !important; margin-top: 8px !important; }
#jobs-list .job-status-grid .btn { padding: 10px !important; font-size: 13px !important; }