:root {
  /* Brand / dark surfaces (kept dark in both themes) */
  --ink: #1B2340;
  --ink-soft: #2A3358;

  /* Page & text */
  --paper: #FAF8F3;
  --text: #2B2E33;
  --heading: #1B2340;

  /* Accent */
  --amber: #D98E2B;
  --amber-dark: #B5721C;

  /* Layout */
  --sidebar-width: 240px;
  --sidebar-collapsed-width: 76px;

  /* Shadows */
  --card-shadow: 0 1px 3px rgba(27, 35, 64, 0.08);

  /* Surfaces */
  --surface: #ffffff;
  --surface-2: #f7f8fa;
  --subtle: #f8f9fb;
  --subtle-2: #f1f3f5;
  --row-hover: #fbfaf7;

  /* Borders */
  --border: #e5e7eb;
  --border-soft: #eef0f3;
  --border-faint: #f1f3f5;

  /* Text tones */
  --muted: #6b7280;
  --muted-2: #8a8f98;
  --muted-3: #9aa0a6;
  --muted-4: #a7adb8;

  /* Tinted soft backgrounds & accents */
  --amber-soft: #FFF7EA;
  --amber-rgb: 217, 142, 43;
  --green: #2F855A;
  --green-soft: #F0FBF4;
  --green-soft-2: #effaf2;
  --green-border: #BFE3CD;
  --teal: #0e8a7d;
  --teal-rgb: 14, 138, 125;
  --red: #B3403E;
  --red-soft: #FDF4F4;
  --red-border: #F3D4D6;
  --blue: #2b3a4a;
  --blue-soft: #EAF0F7;
  --blue-border: #94a3b8;
  --gray-soft: #E8EAEF;
  --neutral: #f3f4f6;
  --scroll-thumb: #d3d7df;
}

[data-theme="dark"] {
  --paper: #0e131f;
  --text: #E6E8EF;
  --heading: #E7E9F2;

  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);

  --surface: #161b28;
  --surface-2: #1c2231;
  --subtle: #1a2030;
  --subtle-2: #202738;
  --row-hover: #1c2230;

  --border: #2b3242;
  --border-soft: #262d3d;
  --border-faint: #232a38;

  --muted: #98a1b5;
  --muted-2: #8791a6;
  --muted-3: #6f798b;
  --muted-4: #687283;

  --amber-soft: #31291a;
  --amber-rgb: 217, 142, 43;
  --green: #5fb98a;
  --green-soft: #13291c;
  --green-soft-2: #142b1e;
  --green-border: #2c4b38;
  --teal: #25b9a6;
  --teal-rgb: 37, 185, 166;
  --red: #e07a83;
  --red-soft: #30171b;
  --red-border: #52333a;
  --blue: #a9b7c9;
  --blue-soft: #192435;
  --blue-border: #3b4b5f;
  --gray-soft: #2b3242;
  --neutral: #232a38;
  --scroll-thumb: #3a4354;
}

body {
  background: var(--paper);
  color: var(--text);
  font-family: "Public Sans", -apple-system, sans-serif;
  transition: background 0.2s ease, color 0.2s ease;
}

.brand-serif {
  font-family: "Lora", serif;
}

/* Unify the surfaces Bootstrap leaves to itself so cards, tables, and forms
   share the same background token and adapt cleanly to the active theme. */
.card,
.table-card,
.dropdown-menu,
.form-control,
.form-select,
.form-check-input {
  background-color: var(--surface);
}
.form-control,
.form-select {
  color: var(--text);
}
/* Keep Bootstrap table bodies on the same surface token as their wrapping card. */
.table {
  --bs-table-bg: var(--surface);
  --bs-table-striped-bg: var(--surface-2);
  --bs-table-hover-bg: var(--row-hover);
  background-color: var(--surface);
}

/* ---- Dashboard shell ---- */
.app-shell {
  min-height: 100vh;
}

.sidebar {
  width: var(--sidebar-width);
  height: 100vh;
  min-height: 100vh;
  background: var(--ink);
  flex-shrink: 0;
  overflow: hidden;
  position: sticky;
  top: 0;
  transition: width 0.25s ease;
}

.sidebar.collapsed {
  width: var(--sidebar-collapsed-width);
  /* Let the protruding expand toggle stick out beyond the right edge
     instead of being clipped by the sidebar's overflow. */
  overflow: visible;
}

/* Header (brand + toggle) */
.sidebar-header {
  position: relative;
  z-index: 1;
}

.sidebar-header .sidebar-brand {
  color: #fff;
  min-width: 0;
}

.sidebar.collapsed .sidebar-header .sidebar-brand-text {
  display: none;
}

/* Brand logo chip — shows the logo on a light rounded tile so it stays crisp
   against the dark navy sidebar / auth panel in both themes. */
.brand-logo-chip,
.auth-brand-logo-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 30px;
  height: 30px;
  border-radius: 9px;
  background: #fff;
  padding: 2px;
  box-shadow: 0 1px 3px rgba(15, 20, 40, 0.35);
}
.brand-logo {
  width: 100%;
  height: 100%;
  display: block;
}

.sidebar-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #C9CEDC;
  flex-shrink: 0;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.sidebar-toggle:hover {
  background: var(--ink-soft);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}

/* ---- Theme toggle ---- */
.theme-toggle {
  width: 30px;
  height: 30px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: rgba(255, 255, 255, 0.06);
  color: #C9CEDC;
  flex-shrink: 0;
  margin-right: 0.35rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  background: var(--ink-soft);
  color: #fff;
  border-color: rgba(255, 255, 255, 0.3);
}
.theme-toggle svg {
  display: none;
}
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="light"] .theme-toggle .icon-moon { display: block; }
.sidebar.collapsed .theme-toggle { display: none; }

/* Standalone toggle used on the auth pages (top-right, floating). */
.auth-theme-toggle {
  position: fixed;
  top: 1rem;
  right: 1rem;
  z-index: 1030;
  width: 40px;
  height: 40px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.auth-theme-toggle:hover {
  color: var(--amber-dark);
  border-color: rgba(var(--amber-rgb), 0.5);
}
.auth-theme-toggle svg { display: none; }
[data-theme="dark"] .auth-theme-toggle .icon-sun { display: block; }
[data-theme="light"] .auth-theme-toggle .icon-moon { display: block; }

.sidebar-toggle .icon-expand {
  display: none;
}

.sidebar.collapsed .sidebar-toggle .icon-collapse {
  display: none;
}

.sidebar.collapsed .sidebar-toggle .icon-expand {
  display: block;
}

/* Scrollable middle section: nav + quick actions scroll,
   while header & footer stay pinned. */
.sidebar-scroll {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -8px;
  padding-right: 8px;
}

.sidebar-scroll::-webkit-scrollbar {
  width: 6px;
}

.sidebar-scroll::-webkit-scrollbar-thumb {
  background: rgba(255, 255, 255, 0.22);
  border-radius: 3px;
}

.sidebar-scroll::-webkit-scrollbar-thumb:hover {
  background: rgba(255, 255, 255, 0.35);
}

.sidebar-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.sidebar .nav-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  color: #C9CEDC;
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-size: 0.95rem;
  position: relative;
  white-space: nowrap;
}

.nav-icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.sidebar .nav-link.active,
.sidebar .nav-link:hover {
  background: var(--ink-soft);
  color: #fff;
}

/* Collapsed state: show the logo + the icon rail (nav icons only), with the
   expand/collapse toggle protruding from the right edge. The toggle stays on
   the same row as the logo and simply sticks out beside it, so it never has
   to move above or below the logo. */
.sidebar.collapsed .nav-text,
.sidebar.collapsed .quick-actions,
.sidebar.collapsed .sidebar-user-text,
.sidebar.collapsed .logout-text,
.sidebar.collapsed hr {
  display: none !important;
}

.sidebar.collapsed .nav-link {
  justify-content: center;
  padding: 0.55rem;
  gap: 0;
}

.sidebar.collapsed .nav-link .badge {
  position: absolute;
  top: 4px;
  right: 4px;
  font-size: 0.5rem;
  line-height: 1;
  min-width: 14px;
  height: 14px;
  padding: 2px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Tooltips in the collapsed rail (progressively enhanced) */
.sidebar.collapsed .nav-link[data-label]::after {
  content: attr(data-label);
  position: absolute;
  left: calc(100% + 12px);
  top: 50%;
  transform: translateY(-50%);
  background: var(--ink-soft);
  color: #fff;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  font-size: 0.8rem;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 20;
}

.sidebar.collapsed .nav-link:hover::after {
  opacity: 1;
}

.sidebar.collapsed .sidebar-header {
  justify-content: center;
  /* Unstick the header as the containing block so the toggle positions
     against the whole sidebar and can protrude past its right edge. */
  position: static;
}

/* Protrude the toggle from the collapsed rail's right edge. It is anchored to
   the sidebar itself (not the narrow header, which only spans the content
   box) and vertically aligned with the logo row near the top. */
.sidebar.collapsed .sidebar-toggle {
  position: absolute;
  right: -15px;
  top: 14px;
  z-index: 12;
  background: var(--ink);
  border-color: rgba(255, 255, 255, 0.4);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
}
.sidebar.collapsed .sidebar-toggle:hover {
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.5);
}

.sidebar .btn-outline-light {
  border-color: rgba(255, 255, 255, 0.25);
  color: #C9CEDC;
  font-size: 0.85rem;
}

.sidebar .btn-outline-light:hover {
  background: var(--ink-soft);
  border-color: rgba(255, 255, 255, 0.25);
  color: #fff;
}

.sidebar-brand {
  color: #fff;
}

/* ---- Buttons ---- */
.btn-amber {
  background: var(--amber);
  border-color: var(--amber);
  color: #1B2340;
  font-weight: 600;
}

.btn-amber:hover {
  background: var(--amber-dark);
  border-color: var(--amber-dark);
  color: #fff;
}

/* ---- Cards ---- */
.card {
  border: none;
  border-radius: 12px;
  box-shadow: var(--card-shadow);
}

.stat-card .stat-value {
  font-family: "Lora", serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--heading);
}

.stat-card .stat-label {
  color: var(--muted);
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---- Auth split screen ---- */
.auth-split {
  min-height: 100vh;
}

.auth-brand-panel {
  background: var(--ink);
  color: #fff;
}

.auth-brand-panel .brand-serif {
  line-height: 1.35;
}

/* ---- Building groups (halls page) ---- */
.building-group {
  scroll-margin-top: 1rem;
}

.building-group-header {
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--border-soft);
}

.building-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--ink);
  color: #fff;
  flex-shrink: 0;
}

.building-icon-unassigned {
  background: var(--gray-soft);
  color: var(--muted);
}

/* ---- Hall cards ---- */
.hall-card {
  border-left: 4px solid var(--amber);
}

.hall-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  background: var(--amber-soft);
  color: var(--amber-dark);
  flex-shrink: 0;
}

.hall-stat {
  background: var(--subtle);
  border-radius: 10px;
  padding: 0.6rem 0.4rem;
}

.hall-stat-value {
  font-family: "Lora", serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.2;
}

.hall-stat-label {
  font-size: 0.72rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Muted "Enrol in a plan" action -- shown when the member already holds a
   plan, to signal a possible overlap/duplicate. Kept clickable on purpose:
   a member may legitimately hold more than one plan (e.g. day + monthly). */
.enroll-muted {
  opacity: 0.55;
}

.enroll-muted:hover,
.enroll-muted:focus {
  opacity: 0.9;
}

.hall-terms {
  border-top: 1px solid var(--border-soft);
}

.hall-terms-preview {
  white-space: pre-line;
}

/* ---- Plan cards (plans page) ---- */
.plan-card {
  border: 1px solid var(--border-soft);
  border-top: 3px solid var(--amber);
}

.plan-card .plan-name {
  color: var(--heading);
  font-weight: 600;
}

.plan-card .plan-name:hover {
  color: var(--amber-dark);
}

.plan-card .plan-price {
  font-family: "Lora", serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--heading);
  line-height: 1.1;
}

.plan-card .plan-details {
  margin-bottom: 0;
}

.plan-card .plan-details > div {
  border-bottom: 1px solid var(--border-faint);
}

.plan-card .plan-details > div:last-child {
  border-bottom: 0;
}

/* ---- Seat map ---- */
.seat-card {
  border-radius: 10px;
  padding: 0.7rem 0.5rem;
  text-align: center;
  border: 1.5px solid var(--border);
  background: var(--surface);
  height: 100%;
}

.seat-card .seat-number {
  font-family: "Lora", serif;
  font-weight: 600;
}

.seat-available {
  border-style: dashed;
  color: var(--muted-3);
}

.seat-pending {
  border-color: var(--amber);
  background: var(--amber-soft);
}

.seat-present {
  border-color: var(--green);
  background: var(--green-soft);
}

.seat-done {
  /* Checked-out (left) but still booked → clearly occupied, distinct from the
     dashed, muted .seat-available (truly empty). */
  border-color: var(--blue-border);
  background: var(--blue-soft);
  color: var(--blue);
}

.seat-dot {
  display: inline-block;
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
}

.seat-dot-done {
  background: var(--blue-border);
  vertical-align: 0.05rem;
}

.seat-until {
  font-size: 0.7rem;
  color: var(--muted-2);
  margin-top: 0.35rem;
}

/* ---- Price history (plan detail) ---- */
.price-history-scroll {
  max-height: 360px;
  overflow-y: auto;
  margin-right: -0.5rem;
  padding-right: 0.5rem;
}

@media (max-width: 992px) {
  .price-history-scroll {
    max-height: 480px;
  }
}

/* ---- Professional invoice ---- */
.invoice-meta th {
  width: 40%;
  padding-right: 0.5rem;
}
.invoice-items thead th {
  border-bottom: 1px solid var(--border);
}
.invoice-items tbody td {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--border-faint);
}

/* ---- Member dashboard: attendance calendar ---- */
.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 6px;
}

.calendar-weekday {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  text-align: center;
  padding: 0.2rem 0;
}

.calendar-cell {
  position: relative;
  min-height: 58px;
  border-radius: 8px;
  border: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 0.35rem;
}

.calendar-cell.blank {
  border: none;
  background: transparent;
  min-height: 0;
}

.calendar-day {
  font-size: 0.85rem;
  font-weight: 600;
  line-height: 1.2;
}

.calendar-meta {
  font-size: 0.66rem;
  color: var(--muted);
  margin-top: 0.2rem;
  line-height: 1.25;
}

.calendar-cell.today {
  border-color: var(--amber);
  box-shadow: 0 0 0 2px rgba(var(--amber-rgb), 0.18);
}

.calendar-cell.present {
  background: var(--green-soft);
  border-color: var(--green-border);
}

.calendar-cell.present .calendar-day {
  color: var(--green);
}

.calendar-cell.checked {
  background: var(--amber-soft);
  border-color: rgba(var(--amber-rgb), 0.35);
}

.calendar-cell.checked .calendar-day {
  color: var(--amber-dark);
}

.calendar-cell.absent {
  background: var(--red-soft);
  border-color: var(--red-border);
}

.calendar-cell.absent .calendar-day {
  color: var(--red);
}

.calendar-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
}

.calendar-dot.present {
  background: var(--green);
}

.calendar-dot.checked {
  background: var(--amber);
}

.calendar-dot.absent {
  background: var(--red);
}

/* Green intensity shading for attended days (deeper = more study time). */
.calendar-cell.shade-1 { background: #E7F6EC; border-color: #BFE3CD; }
.calendar-cell.shade-2 { background: #B9E4C9; border-color: #93D1AC; }
.calendar-cell.shade-3 { background: #7CCD9C; border-color: #5FBD86; }
.calendar-cell.shade-4 { background: #43AB6E; border-color: #36975D; }
.calendar-cell.shade-5 { background: #1F7A4B; border-color: #17663C; }

.calendar-cell.shade-3,
.calendar-cell.shade-4,
.calendar-cell.shade-5 { color: #fff; }
.calendar-cell.shade-3 .calendar-day,
.calendar-cell.shade-4 .calendar-day,
.calendar-cell.shade-5 .calendar-day,
.calendar-cell.shade-3 .calendar-meta,
.calendar-cell.shade-4 .calendar-meta,
.calendar-cell.shade-5 .calendar-meta { color: #fff; }
.calendar-cell.shade-3 .calendar-dot.checked,
.calendar-cell.shade-4 .calendar-dot.checked,
.calendar-cell.shade-5 .calendar-dot.checked {
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.35);
}

/* ---- Member dashboard: compact attendance heatmap (3m/6m/1y) ---- */
.heat-months {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem 1.25rem;
}

.heat-month {
  flex: 1 1 132px;
  min-width: 104px;
  max-width: 210px;
}

.heat-month-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.3rem;
}

.heat-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px;
}

.heat-hd {
  font-size: 0.55rem;
  color: var(--muted-3);
  text-align: center;
  line-height: 1.15;
}

.heat-cell {
  aspect-ratio: 1 / 1;
  border-radius: 3px;
  background: var(--neutral);
}

.heat-cell.blank { background: transparent; }
.heat-cell.empty { background: var(--neutral); }
.heat-cell.absent { background: var(--red); }
.heat-cell.today { outline: 2px solid var(--amber); outline-offset: -1px; }

.heat-cell.shade-1 { background: #e7f6ec; }
.heat-cell.shade-2 { background: #b9e4c9; }
.heat-cell.shade-3 { background: #7ccd9c; }
.heat-cell.shade-4 { background: #43ab6e; }
.heat-cell.shade-5 { background: #1f7a4b; }

/* Legend swatches reuse the same intensity palette. */
.legend-swatch {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 3px;
  vertical-align: middle;
}
.legend-swatch.shade-1 { background: #e7f6ec; }
.legend-swatch.shade-2 { background: #b9e4c9; }
.legend-swatch.shade-3 { background: #7ccd9c; }
.legend-swatch.shade-4 { background: #43ab6e; }
.legend-swatch.shade-5 { background: #1f7a4b; }
.legend-swatch.absent { background: #e5484d; }

/* Member dashboard: scrollable terms block */
.terms-scroll::-webkit-scrollbar {
  width: 6px;
}

.terms-scroll::-webkit-scrollbar-thumb {
  background: var(--scroll-thumb);
  border-radius: 3px;
}

/* ---- Invoice / receipt sheet (a clean A5-proportioned "paper" document) ---- */
.invoice-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.5rem;
}
.invoice-sheet {
  width: 148mm;               /* A5 width -- two of these nestle onto one A4 sheet */
  max-width: 100%;
  background: #fff;
  color: #111827;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(15, 20, 40, 0.08);
  padding: 8mm 9mm;
  font-size: 12px;
  line-height: 1.45;
}
.invoice-hdr {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding-bottom: 14px;
  border-bottom: 2px solid #1e293b;
  margin-bottom: 15px;
}
.invoice-from { display: flex; align-items: flex-start; gap: 12px; }
.invoice-org-logo { max-height: 58px; max-width: 90px; object-fit: contain; }
.org-logo-preview { max-height: 72px; max-width: 160px; object-fit: contain; border: 1px solid var(--bs-border-color); border-radius: 6px; padding: 6px; background: #fff; }
.invoice-org-mark {
  width: 46px; height: 46px; border-radius: 10px;
  background: #1e293b; color: #f59e0b;
  display: inline-flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 22px;
}
.invoice-org-name { font-weight: 700; font-size: 16px; letter-spacing: 0.2px; }
.invoice-org-details { color: #6b7280; font-size: 11.5px; margin-top: 2px; }
.invoice-hdr-right { text-align: right; }
.invoice-doc-title { font-size: 20px; font-weight: 800; letter-spacing: 0.18em; color: #1e293b; }
.invoice-no { font-size: 13px; font-weight: 600; color: #4b5563; margin-top: 2px; }
.invoice-status { margin-top: 6px; }
.invoice-badge {
  display: inline-block; padding: 2px 10px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
}
.invoice-badge-paid { background: #dcfce7; color: #15803d; }
.invoice-badge-overdue { background: #fee2e2; color: #b91c1c; }
.invoice-badge-due { background: #fef3c7; color: #b45309; }
.invoice-badge-cancelled { background: #f3f4f6; color: #6b7280; }

.invoice-bill { display: flex; justify-content: space-between; gap: 16px; margin-bottom: 15px; }
.invoice-billto { flex: 1; max-width: 45%; }
.invoice-label {
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em;
  color: #6b7280; font-weight: 600; margin-bottom: 4px;
}
.invoice-billto-name { font-weight: 700; font-size: 14px; }
.invoice-billto-line { color: #6b7280; font-size: 11.5px; }
.invoice-meta { margin-left: auto; }
.invoice-meta td { padding: 2.5px 0 2.5px 18px; }
.invoice-meta td:first-child {
  color: #9ca3af; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em;
}
.invoice-meta td:last-child { font-weight: 600; font-size: 12px; }

.invoice-items { width: 100%; border-collapse: collapse; }
.invoice-items thead th {
  background: #1e293b; color: #fff; text-align: left;
  font-size: 11px; text-transform: uppercase; letter-spacing: 0.06em;
  padding: 7px 8px;
}
.invoice-items thead th.right, .invoice-items td.right { text-align: right; }
.invoice-items thead th.c-idx, .invoice-items td.c-idx { width: 30px; text-align: center; }
.invoice-items td { padding: 8px; border-bottom: 1px solid #eef0f3; font-size: 12.5px; vertical-align: top; }
.invoice-items td.right { font-weight: 600; white-space: nowrap; vertical-align: top; }
.invoice-items .sub { color: #6b7280; font-size: 11px; font-weight: 400; margin-top: 1px; }
.muted { color: #6b7280; }

.invoice-totals { display: flex; justify-content: flex-end; margin-top: 6px; }
.invoice-totals table.totals { width: 220px; border-collapse: collapse; }
.invoice-totals td { padding: 4px 8px; border-bottom: 1px solid #f3f4f6; }
.invoice-totals td:first-child { color: #6b7280; }
.invoice-totals td:last-child { text-align: right; font-weight: 600; }
.invoice-totals tr.total td {
  border-top: 2px solid #1e293b; border-bottom: none;
  font-size: 15px; font-weight: 800; color: #111827;
}
.invoice-totals tr.total td:first-child { color: #111827; }
.invoice-totals tr.balance td {
  border-top: 2px solid #1e293b; background: #f8fafc;
  font-size: 14px; font-weight: 800;
}
.invoice-totals tr.balance td:first-child { color: #111827; }

.invoice-footer {
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid #e5e7eb; margin-top: 18px; padding-top: 10px;
}
.invoice-thanks { color: #6b7280; font-size: 11.5px; }
.invoice-seatplot {
  display: inline-flex; align-items: center; gap: 5px;
  color: #6b7280; font-size: 11px;
}
.invoice-seatplot .seatplot-logo { width: 16px; height: 16px; border-radius: 4px; }
.invoice-seatplot strong { color: #475569; font-weight: 600; }


/* ---- Print (invoice/receipt) ---- */
@media print {
  .no-print {
    display: none !important;
  }
  .sidebar {
    display: none !important;
  }
  main {
    padding: 0 !important;
  }
  /* The invoice is its own paper sheet -- drop the wrapping card chrome. */
  .card {
    box-shadow: none !important;
  }
  .invoice-wrap {
    display: block;
    margin: 0;
  }
  .invoice-sheet {
    width: 100%;
    max-width: 100%;
    border: none;
    border-radius: 0;
    box-shadow: none;
    padding: 7mm 8mm;
  }
  .invoice-sheet,
  .invoice-sheet * {
    box-shadow: none !important;
  }
  /* Compact the sheet so it fits comfortably inside A5. */
  .invoice-items td {
    padding: 6px 8px;
  }
  .invoice-meta td {
    padding: 2px 0 2px 16px;
  }
  .invoice-totals tr.balance td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
  .invoice-items thead th {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }
}

/* ---- Responsive / mobile off-canvas sidebar ---- */
main {
  min-width: 0; /* allow flex children to shrink instead of overflowing */
}

@media (max-width: 991.98px) {
  .app-shell {
    display: block;
  }

  .sidebar {
    position: fixed;
    top: 0;
    left: 0;
    height: 100vh;
    width: var(--sidebar-width) !important;
    z-index: 1050;
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    box-shadow: 0 0 50px rgba(0, 0, 0, 0.5);
  }

  .sidebar.open {
    transform: translateX(0);
  }

  /* The mobile drawer always shows full expanded content */
  .sidebar .sidebar-brand-text,
  .sidebar .nav-text,
  .sidebar .quick-actions,
  .sidebar .sidebar-user-text,
  .sidebar .logout-text,
  .sidebar hr {
    display: initial;
  }
  .sidebar .nav-link {
    justify-content: flex-start;
    gap: 0.7rem;
    padding: 0.55rem 0.9rem;
  }
  .sidebar .nav-link .badge {
    position: static;
    min-width: auto;
    height: auto;
    padding: 0 0.5rem;
    font-size: 0.75rem;
  }
  .sidebar .sidebar-toggle .icon-collapse {
    display: block;
  }
  .sidebar .sidebar-toggle .icon-expand {
    display: none;
  }

  .sidebar-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 20, 40, 0.55);
    z-index: 1040;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.25s ease, visibility 0.25s ease;
  }

  .sidebar-backdrop.show {
    opacity: 1;
    visibility: visible;
  }
}

/* ---- Reduce excessive side spacing on small phones ----
   The main content area uses Bootstrap's p-4 utility (24px each side),
   which wastes too much width on narrow screens. Tighter horizontal
   padding gives cards/tables more room on phones. */
@media (max-width: 575.98px) {
  main {
    padding-top: 1.25rem !important;
    padding-right: 1rem !important;
    padding-bottom: 1.25rem !important;
    padding-left: 1rem !important;
  }
}

/* ---- My attendance: grouped multi-session list ---- */
.attendance-list th {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--muted);
  border-bottom-width: 1px;
}
.attendance-list tbody tr {
  border-bottom: 1px solid var(--border-faint);
}
.attendance-list tbody tr:last-child {
  border-bottom: none;
}
.attendance-day-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  font-family: "Lora", serif;
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--amber-dark, #9a5d0c);
  background: linear-gradient(180deg, rgba(217, 142, 43, 0.16), rgba(217, 142, 43, 0.06));
  border: 1px solid rgba(217, 142, 43, 0.22);
  flex-shrink: 0;
}
.attendance-chip {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
  background: var(--green-soft-2);
  border: 1px solid var(--green-border);
  border-radius: 999px;
  white-space: nowrap;
}
.attendance-chip-present {
  color: var(--teal);
  background: rgba(var(--teal-rgb), 0.1);
  border-color: rgba(var(--teal-rgb), 0.25);
}

/* =====================================================================
   Data tables — shared professional table system
   Used by the Members list and the (member) membership history table.
   ===================================================================== */

/* A card that wraps a table, with an optional header row. */
.table-card {
  overflow: hidden;
}
.table-card-header {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.9rem 1.25rem;
  border-bottom: 1px solid var(--border-faint);
  background: var(--surface);
}
.table-card-header .table-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  margin: 0;
}
.table-card-header .table-count {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--heading);
}

/* Refined table chrome */
.table thead th {
  font-family: "Public Sans", -apple-system, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  background: var(--surface-2);
  border-bottom: 1px solid var(--border-soft);
  padding: 0.7rem 1rem;
  white-space: nowrap;
  vertical-align: middle;
}
.table tbody td {
  padding: 0.85rem 1rem;
  vertical-align: middle;
  border-bottom: 1px solid var(--border-faint);
}
.table tbody tr:last-child td {
  border-bottom: 0;
}
.table tbody tr {
  transition: background 0.12s ease;
}
.table tbody tr:hover {
  background: var(--row-hover);
}

/* Primary name link */
.table .name-link {
  color: var(--heading);
  font-weight: 600;
}
.table .name-link:hover {
  color: var(--amber-dark);
}
.table .cell-sub {
  font-size: 0.78rem;
  color: var(--muted-2);
  margin-top: 0.1rem;
  line-height: 1.35;
}

/* Soft-amber circular avatar with initials */
.avatar-sm {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--amber-soft);
  color: var(--amber-dark);
  border: 1px solid rgba(var(--amber-rgb), 0.22);
  font-family: "Lora", serif;
  font-weight: 600;
  font-size: 0.92rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Status pill — dot + label */
.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 600;
  line-height: 1;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  white-space: nowrap;
}
.status-pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex-shrink: 0;
}
.status-pill-active   { color: var(--green); background: var(--green-soft-2); }
.status-pill-expiring { color: var(--amber-dark); background: var(--amber-soft); }
.status-pill-pending  { color: var(--amber-dark); background: var(--amber-soft); }
.status-pill-inactive { color: var(--muted); background: var(--subtle-2); }
.status-pill-cancelled{ color: var(--red); background: var(--red-soft); }
.status-pill-none     { color: var(--muted-4); background: var(--subtle-2); }

/* Icon-only action buttons */
.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  color: var(--muted);
  border: 1px solid var(--border);
  background: var(--surface);
  transition: color 0.12s ease, background 0.12s ease, border-color 0.12s ease;
}
.btn-icon:hover {
  color: var(--amber-dark);
  border-color: rgba(var(--amber-rgb), 0.5);
  background: var(--amber-soft);
}
.btn-icon-danger:hover {
  color: var(--red);
  border-color: var(--red-border);
  background: var(--red-soft);
}

/* Leading glyph inside a dropdown item (e.g. the auto-renew ✓) */
.dropdown-item-addon {
  display: inline-grid;
  place-items: center;
  width: 18px;
  margin-right: 0.5rem;
  color: var(--amber-dark);
  font-weight: 700;
}
/* Dropdown items backed by a <form>/<button> keep link styling */
.dropdown-menu .dropdown-item { cursor: pointer; }
.dropdown-menu form { margin: 0; }
.dropdown-menu .dropdown-header { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; }

/* Search box for table toolbars */
.search-box {
  position: relative;
  display: flex;
  align-items: center;
}
.search-box .search-icon {
  position: absolute;
  left: 0.65rem;
  color: var(--muted-4);
  pointer-events: none;
  display: flex;
}
.search-input {
  padding: 0.42rem 2rem 0.42rem 2.15rem;
  font-size: 0.85rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--surface);
  width: 240px;
  max-width: 100%;
  transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.search-input::placeholder {
  color: var(--muted-4);
}
.search-input:focus {
  outline: none;
  border-color: rgba(var(--amber-rgb), 0.6);
  box-shadow: 0 0 0 3px rgba(var(--amber-rgb), 0.12);
}
/* In-table search clear button (absolute within .search-box) */
.search-clear {
  position: absolute;
  right: 0.5rem;
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 999px;
  color: var(--muted-4);
  background: transparent;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
}
.search-clear:hover {
  color: var(--amber-dark);
  background: var(--subtle-2);
}

/* Mini progress bar (e.g. days remaining on a membership) */
.mini-progress {
  height: 5px;
  border-radius: 999px;
  background: var(--subtle-2);
  overflow: hidden;
  margin-top: 0.4rem;
}
.mini-progress > div {
  height: 100%;
  border-radius: 999px;
  background: var(--amber);
}
.mini-progress > div.is-warning { background: #f0a32a; }
.mini-progress > div.is-danger  { background: #e5484d; }

/* Small meta chips (e.g. shift on a plan) */
.meta-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  color: var(--muted);
  background: var(--subtle-2);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .search-input { width: 180px; }
}

/* Segmented status filter pills (e.g. the memberships list) */
.filter-pills {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.filter-pills .btn {
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.32rem 0.85rem;
  border: 1px solid var(--border);
  color: var(--muted);
  background: var(--surface);
}
.filter-pills .btn:hover {
  border-color: rgba(var(--amber-rgb), 0.5);
  color: var(--amber-dark);
}
.filter-pills .btn.btn-active {
  background: var(--amber);
  border-color: var(--amber);
  color: #1B2340;
}

/* Checkbox category chips (member "what is this about?" picker) */
.chip-check {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin: 0;
  padding: 0.38rem 0.8rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease, color 0.12s ease;
  user-select: none;
}
.chip-check input {
  accent-color: var(--amber);
  margin: 0;
  flex-shrink: 0;
}
.chip-check:hover {
  border-color: rgba(var(--amber-rgb), 0.5);
  color: var(--amber-dark);
}
.chip-check:has(input:checked) {
  background: var(--amber-soft);
  border-color: rgba(var(--amber-rgb), 0.55);
  color: var(--amber-dark);
  font-weight: 600;
}

/* Star rating picker (member review form) */
.star-rate {
  display: inline-flex;
  flex-direction: row;
  direction: rtl; /* reverse so filling works with sibling selectors */
  gap: 0.1rem;
}
.star-rate .star-input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
  pointer-events: none;
}
.star-rate .star {
  display: inline-block;
  font-size: 1.85rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted-3);
  transition: color 0.15s ease, transform 0.1s ease;
  -webkit-user-select: none;
  user-select: none;
}
.star-rate .star:hover,
.star-rate .star:hover ~ .star,
.star-rate .star-input:checked ~ .star {
  color: var(--amber);
}
.star-rate .star:active {
  transform: scale(0.88);
}
.star-rate .star-input:focus-visible + .star {
  outline: 2px solid var(--amber);
  outline-offset: 3px;
  border-radius: 4px;
}

/* =====================================================================
   Dark-mode overrides for Bootstrap light utilities
   ===================================================================== */
[data-theme="dark"] .bg-light,
[data-theme="dark"] .text-bg-light {
  background-color: var(--surface) !important;
}
[data-theme="dark"] .text-bg-light {
  color: var(--text) !important;
}

/* =====================================================================
   Member profile hero (owner/staff member detail page)
   ===================================================================== */
.member-profile-cover {
  height: 84px;
  background: linear-gradient(120deg, var(--ink) 0%, #2f3b68 55%, var(--amber) 135%);
}

.member-profile-avatar-col {
  margin-top: -46px;
}

.member-profile-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  object-fit: cover;
  border: 4px solid var(--surface);
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.18);
  background: var(--surface);
  flex-shrink: 0;
}

.member-profile-avatar-initials {
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: "Lora", serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--heading);
}

.member-hero-stat {
  font-family: "Lora", serif;
  font-size: 1.5rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--heading);
}

.member-hero-stat-label {
  margin-top: 0.2rem;
  color: var(--muted);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* ---- Profile information card ---- */
.section-icon {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: var(--amber-soft);
  color: var(--amber-dark);
  flex-shrink: 0;
}

.profile-section-title {
  margin-top: 1.75rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border-soft);
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
}

.profile-section-title:first-of-type {
  margin-top: 0;
}

.profile-field-label {
  margin-bottom: 0.3rem;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}

.profile-field-value {
  color: var(--text);
}

/* ---- Compact profile field grid ---- */
.profile-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.5rem 2.25rem;
}

.profile-grid--2 {
  grid-template-columns: repeat(1, minmax(0, 1fr));
}

.profile-grid--1 {
  grid-template-columns: minmax(0, 1fr);
}

.profile-field-wide {
  grid-column: 1 / -1;
}

@media (min-width: 577px) and (max-width: 991px) {
  .profile-grid:not(.profile-grid--2):not(.profile-grid--1) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 576px) {
  .profile-grid:not(.profile-grid--2):not(.profile-grid--1),
  .profile-grid--2 {
    grid-template-columns: minmax(0, 1fr);
  }
}

.profile-field-value {
  line-height: 1.45;
  word-break: break-word;
}

.profile-field-value a {
  color: var(--bs-link-color);
  font-weight: 500;
  text-decoration: none;
}

.profile-field-value a:hover {
  color: var(--bs-link-hover-color);
  text-decoration: underline;
}


/* ---- Disabled / in-flight submit buttons (app.js submit guard) ---- */
.btn.btn-disabled {
  opacity: 0.7;
  cursor: not-allowed;
  position: relative;
}