/* ═══════════════════════════════════════════════════════════
   MTCF Members — app.css
   Dark gold theme, BEM-named, minimalist.
═══════════════════════════════════════════════════════════ */

:root {
  --gold:        #C9A84C;
  --gold-light:  #E8C97A;
  --gold-dim:    rgba(201,168,76,0.15);
  --gold-dim-2:  rgba(201,168,76,0.25);
  --deep:        #0D1117;
  --surface:     #161B22;
  --surface2:    #1E2530;
  --surface3:    #252D3A;
  --border:      rgba(201,168,76,0.2);
  --border-sub:  rgba(255,255,255,0.06);
  --text:        #E8E4DC;
  --text-dim:    #8A8F9A;
  --green:       #2ECC71;
  --red:         #E74C3C;
  --blue:        #3498DB;
  --purple:      #9B59B6;
  --orange:      #F39C12;
  --radius:      12px;
}

/* ═══════════════════════ LIGHT THEME ═══════════════════════ */
[data-theme="light"] {
  --gold:        #A07830;
  --gold-light:  #C49A40;
  --gold-dim:    rgba(160,120,48,0.12);
  --gold-dim-2:  rgba(160,120,48,0.22);
  --deep:        #F0F2F5;
  --surface:     #FFFFFF;
  --surface2:    #F5F6F8;
  --surface3:    #EAECEF;
  --border:      rgba(160,120,48,0.22);
  --border-sub:  rgba(0,0,0,0.08);
  --text:        #1A1D23;
  --text-dim:    #6B7280;
  --green:       #16A34A;
  --red:         #DC2626;
  --blue:        #2563EB;
  --purple:      #7C3AED;
  --orange:      #D97706;
}

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

/* Force the [hidden] attribute to win over `display: flex` / `display: block` */
[hidden] { display: none !important; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--deep);
  color: var(--text);
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  letter-spacing: -0.005em;
}

a { color: var(--gold); }

/* ═══════════════════════ LOGIN ═══════════════════════ */
.login-shell {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
}
.login-card {
  width: 100%;
  max-width: 380px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 36px 28px 28px;
}
.login-brand {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 6px;
}
.login-lede {
  font-size: 0.88rem;
  color: var(--text-dim);
  margin-bottom: 24px;
}
.login-field {
  margin-bottom: 14px;
}
.login-field label {
  display: block;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.login-field input {
  width: 100%;
  padding: 11px 12px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.92rem;
  outline: none;
  transition: border-color 0.18s;
}
.login-field input:focus { border-color: var(--gold); }
.login-error {
  background: rgba(231,76,60,0.12);
  border: 1px solid rgba(231,76,60,0.35);
  color: #FF7675;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  margin: 12px 0;
}
.login-submit {
  width: 100%;
  margin-top: 6px;
}

/* ═══════════════════════ BUTTONS ═══════════════════════ */
.btn {
  padding: 9px 16px;
  border-radius: 8px;
  border: 1px solid var(--border);
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.btn:hover { background: var(--gold-dim); border-color: var(--gold); color: var(--gold); }
.btn-primary {
  background: var(--gold);
  border-color: var(--gold);
  color: var(--deep);
  font-weight: 600;
}
.btn-primary:hover { background: var(--gold-light); border-color: var(--gold-light); color: var(--deep); }
.btn-danger {
  border-color: rgba(231,76,60,0.4);
  color: var(--red);
}
.btn-danger:hover { background: rgba(231,76,60,0.15); border-color: var(--red); color: var(--red); }
.btn-ghost {
  border-color: transparent;
  color: var(--text-dim);
}
.btn-ghost:hover { background: var(--surface2); color: var(--text); border-color: var(--border-sub); }
.btn--sm {
  padding: 6px 10px;
  font-size: 0.76rem;
}

/* ═══════════════════════ APP SHELL ═══════════════════════ */
.app {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* Top bar */
.topbar {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 24px;
  height: 60px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
}
.topbar__brand {
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gold);
  display: flex;
  align-items: center;
  flex-shrink: 0;
}
/* Logo wordmark — ~28px tall, theme-switched. Text shown only as fallback. */
.topbar__logo { height: 28px; width: auto; display: block; }
.topbar__brand-text { display: none; }
.topbar__brand--text .topbar__brand-text { display: inline; }   /* shown if a logo img fails */
/* Dark theme (default): show the white wordmark, hide the light one */
.topbar__logo--light { display: none; }
.topbar__logo--dark  { display: block; }
[data-theme="light"] .topbar__logo--dark  { display: none; }
[data-theme="light"] .topbar__logo--light { display: block; }
.topbar__nav {
  display: flex;
  gap: 4px;
  margin-left: 12px;
  flex: 1;
}
.topbar__tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--text-dim);
  padding: 8px 14px;
  border-radius: 8px;
  font: inherit;
  font-size: 0.85rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.18s;
  white-space: nowrap;
}
.topbar__tab:hover { color: var(--text); background: var(--surface2); }
.topbar__tab.is-active {
  background: var(--gold-dim);
  border-color: rgba(201,168,76,0.35);
  color: var(--gold);
}
.topbar__user {
  display: flex;
  align-items: center;
  gap: 12px;
}
/* Hamburger button — hidden on desktop, shown ≤820px via media query. */
.topbar__burger {
  display: none;
  align-items: center;
  justify-content: center;
  width: 38px; height: 34px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.15rem;
  line-height: 1;
  cursor: pointer;
}
.topbar__burger:hover { background: var(--surface2); }
.topbar.nav-open .topbar__burger { background: var(--gold-dim); border-color: rgba(201,168,76,0.35); color: var(--gold); }
.topbar__nav-overlay { display: none; }
.topbar__name { font-size: 0.85rem; }
.topbar__role {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: var(--gold-dim);
  color: var(--gold);
  padding: 3px 8px;
  border-radius: 999px;
  border: 1px solid rgba(201,168,76,0.35);
}
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: 1px solid var(--border-sub);
  background: var(--surface2);
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  flex-shrink: 0;
}
.theme-toggle:hover {
  background: var(--surface3);
  color: var(--text);
  border-color: var(--border);
}

/* Content */
.content {
  flex: 1;
  padding: 24px;
  max-width: 1280px;
  margin: 0 auto;
  width: 100%;
}

.tab { display: none; }
.tab.is-active { display: block; }

/* Page header */
.page-header {
  margin-bottom: 24px;
}
.page-header h1 {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -0.015em;
  margin-bottom: 4px;
}
.page-header p {
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* ═══════════════════════ STATS ROW ═══════════════════════ */
.stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 12px;
  margin-bottom: 20px;
}
.stat-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  text-align: center;
}
.stat-card__num {
  font-size: 1.7rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  margin-bottom: 4px;
}
.stat-card__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.stat-card__sub {
  margin-top: 3px;
  font-size: 0.7rem;
  color: var(--text-dim);
}

/* ═══════════════════════ CONTROLS ═══════════════════════ */
.controls {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}
.input {
  padding: 10px 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.18s;
}
.input:focus { border-color: var(--gold); }
.input::placeholder { color: var(--text-dim); }
#dir-search { flex: 1; min-width: 220px; }

/* ═══════════════════════ CARD / TABLE ═══════════════════════ */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.table-wrap { overflow-x: auto; }

.member-table, .settings-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.member-table thead, .settings-table thead {
  background: var(--surface2);
  border-bottom: 1px solid var(--border);
}
.member-table th, .settings-table th {
  text-align: left;
  padding: 14px 16px;
  color: var(--gold);
  font-weight: 600;
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  white-space: nowrap;
}
.member-table th.sortable {
  cursor: pointer;
  user-select: none;
}
.member-table th.sortable:hover { color: var(--text); }
.member-table th.is-sorted { color: var(--text); }
.sort-icon { font-style: normal; opacity: 0.7; }

/* ── Recent Services strip (Check-in tab) ─────────────────── */
.checkin-recent { margin-bottom: 12px; }
.checkin-recent__label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.checkin-recent__strip {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding-bottom: 4px;
  -webkit-overflow-scrolling: touch;
}
.checkin-recent__card {
  flex: 0 0 auto;
  min-width: 132px;
  padding: 8px 10px;
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  background: var(--surface3);
  cursor: pointer;
  transition: border-color 0.15s, transform 0.05s;
  text-align: left;
  font: inherit;
}
.checkin-recent__card:hover { border-color: var(--accent, #4f46e5); }
.checkin-recent__card:active { transform: scale(0.98); }
.checkin-recent__card.is-active {
  border-color: var(--accent, #4f46e5);
  background: var(--accent-soft, #eef2ff);
}
.checkin-recent__card.is-today {
  box-shadow: 0 0 0 2px var(--accent, #4f46e5) inset;
}
.checkin-recent__card-date {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text);
}
.checkin-recent__card-type {
  font-size: 0.68rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.checkin-recent__card-meta {
  font-size: 0.7rem;
  color: var(--text-dim);
  margin-top: 4px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.checkin-recent__card-pct {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 0.66rem;
  font-weight: 600;
  background: #e5e7eb;
  color: #374151;
}
.checkin-recent__card-pct--good { background: #d1fae5; color: #065f46; }
.checkin-recent__card-pct--mid  { background: #fef3c7; color: #92400e; }
.checkin-recent__card-pct--low  { background: #fee2e2; color: #991b1b; }

/* In-card mode tags ("Today" / "Reviewing") */
.checkin-recent__card-tag {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.checkin-recent__card-tag--live   { color: #047857; }
.checkin-recent__card-tag--review { color: #92400e; }

/* Selected card styling — overrides default border with semantic accent */
.checkin-recent__card.is-active.is-today {
  border-color: #10b981;
  background: rgba(16,185,129,0.08);
  box-shadow: 0 0 0 1px #10b981 inset;
}
.checkin-recent__card.is-active:not(.is-today) {
  border-color: #f59e0b;
  background: rgba(245,158,11,0.08);
  box-shadow: 0 0 0 1px #f59e0b inset;
}
.checkin-recent__card.is-today:not(.is-active) {
  border-color: rgba(16,185,129,0.4);
}

/* Create Check-in for Today button */
.checkin-recent__create-today {
  flex: 0 0 auto;
  padding: 0 20px;
  height: 72px;
  border-radius: 10px;
  background: var(--gold);
  border: none;
  color: #0D1117;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, transform 0.1s;
}
.checkin-recent__create-today:hover  { background: var(--gold-light); }
.checkin-recent__create-today:active { transform: scale(0.97); }

/* Trailing "Pick another date" tile in the strip */
.checkin-recent__pickdate {
  flex: 0 0 auto;
  min-width: 92px;
  padding: 8px 12px;
  border: 1px dashed var(--border, #e5e7eb);
  border-radius: 8px;
  background: transparent;
  color: var(--text-dim);
  font-size: 0.78rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  font: inherit;
  transition: border-color 0.15s, color 0.15s;
}
.checkin-recent__pickdate:hover { border-color: var(--accent, #4f46e5); color: var(--text); }
.checkin-recent__pickdate-icon { font-size: 18px; line-height: 1; }

/* Inline datepicker popover (shown when "Pick date" is clicked) */
.checkin-datepicker {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface2, #f9fafb);
  border: 1px solid var(--border-sub, #e5e7eb);
  border-radius: 8px;
}
.checkin-datepicker[hidden] { display: none; }

/* ── Filter row: search + clan on one line ─────────────────── */
.checkin-filter-row {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 10px;
  margin-bottom: 12px;
}
.checkin-filter-row[hidden] { display: none; }
/* Rooms review — editable date/time row */
.rooms-when-edit { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rooms-when-edit .input { flex: 0 1 auto; }
.rooms-when-edit__dash { color: var(--text-dim); }
@media (max-width: 640px) {
  .checkin-filter-row { grid-template-columns: 1fr; }
}

/* ── Mode banner: live (green) vs review (amber) ───────────── */
.checkin-event-banner {
  margin-bottom: 12px;
}
.checkin-event-banner__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  border: 1px solid var(--border-sub, #e5e7eb);
  border-radius: 8px;
  background: var(--surface3);
}
.checkin-event-banner--live   { border-color: rgba(16,185,129,0.35); background: rgba(16,185,129,0.04); }
.checkin-event-banner--review { border-color: rgba(245,158,11,0.4);  background: rgba(245,158,11,0.05); }

.checkin-event-banner__lead {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.checkin-event-banner__icon {
  font-size: 18px;
  color: var(--text-dim);
}
.checkin-event-banner--live .checkin-event-banner__icon  { color: #047857; }
.checkin-event-banner--review .checkin-event-banner__icon { color: #92400e; }

/* Green dot for live mode */
.checkin-event-banner__dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 0 3px rgba(16,185,129,0.2);
}

.checkin-event-banner__text { min-width: 0; }
.checkin-event-banner__title {
  font-size: 0.95rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checkin-event-banner__sub {
  font-size: 0.78rem;
  color: var(--text-dim);
  margin-top: 2px;
}

.checkin-event-banner__pill {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  padding: 2px 8px;
  border-radius: 10px;
}
.checkin-event-banner__pill--live   { background: #d1fae5; color: #065f46; }
.checkin-event-banner__pill--review { background: #fef3c7; color: #92400e; }

.checkin-event-banner__stats {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-shrink: 0;
  padding: 0 16px;
}
.checkin-banner-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.2;
}
.checkin-banner-stat__num {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text);
}
.checkin-banner-stat__label {
  font-size: 0.68rem;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.checkin-banner-stat--nf .checkin-banner-stat__num  { color: #38bdf8; }
.checkin-banner-stat--ret .checkin-banner-stat__num { color: #c084fc; }
.checkin-banner-stat--total .checkin-banner-stat__num { color: var(--gold); font-size: 1.5rem; }
.checkin-banner-stat--total { padding-right: 14px; margin-right: 4px; border-right: 1px solid var(--border-sub); }

@media (max-width: 900px) {
  /* Keep the stats visible on mobile — wrap them onto their own scrollable row
     under the title instead of hiding them. */
  .checkin-event-banner__inner { flex-wrap: wrap; }
  .checkin-event-banner__lead { flex: 1 1 auto; }
  .checkin-event-banner__actions { order: 2; }
  .checkin-event-banner__stats {
    order: 3;
    width: 100%;
    padding: 10px 0 0;
    margin-top: 4px;
    gap: 12px 22px;
    flex-wrap: wrap;
    justify-content: flex-start;
    border-top: 1px solid var(--border-sub);
  }
  .checkin-banner-stat { flex: 0 0 auto; align-items: flex-start; }
  /* Drop the vertical divider on the total so it wraps tidily with the rest. */
  .checkin-banner-stat--total {
    padding-right: 0;
    margin-right: 0;
    border-right: none;
  }
}

.checkin-event-banner__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
  margin-left: auto;
}
.checkin-add-person-btn {
  padding: 0 20px;
  height: 40px;
  font-size: 0.9rem;
  font-weight: 700;
}

/* Guest count widget in event banner */
.checkin-guest-count {
  display: flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 4px 10px;
}
.checkin-guest-count__label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.checkin-guest-count__input {
  width: 60px;
  text-align: center;
  padding: 3px 6px;
  font-weight: 600;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.checkin-guest-count__input.input--saved {
  border-color: #10b981;
  box-shadow: 0 0 0 2px rgba(16,185,129,0.2);
}
.checkin-guest-count__input.input--error {
  border-color: #ef4444;
  box-shadow: 0 0 0 2px rgba(239,68,68,0.2);
}
.checkin-guest-count--readonly .checkin-guest-count__val {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text);
}

/* ── Admin ⋮ menu ──────────────────────────────────────────── */
.checkin-menu {
  position: relative;
  display: inline-block;
}
.checkin-menu__trigger {
  padding: 6px 10px !important;
  line-height: 1;
  font-size: 1.05rem;
}
.checkin-menu__popover {
  position: absolute;
  right: 0;
  top: calc(100% + 6px);
  min-width: 220px;
  padding: 6px;
  background: var(--surface3);
  border: 1px solid var(--border, #e5e7eb);
  border-radius: 8px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.08);
  z-index: 100;
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.checkin-menu__popover[hidden] { display: none; }
.checkin-menu__item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 10px;
  background: transparent;
  border: none;
  border-radius: 6px;
  text-align: left;
  font: inherit;
  font-size: 0.85rem;
  color: var(--text);
  cursor: pointer;
}
.checkin-menu__item:hover { background: var(--surface2, #f3f4f6); }
.checkin-menu__icon {
  display: inline-flex;
  width: 18px;
  justify-content: center;
  color: var(--text-dim);
  font-size: 0.95rem;
}
.checkin-menu__item--danger { color: #dc2626; }
.checkin-menu__item--danger .checkin-menu__icon { color: #dc2626; }
.checkin-menu__item--danger:hover { background: rgba(220,38,38,0.08); }
.checkin-menu__divider {
  height: 1px;
  background: var(--border-sub, #e5e7eb);
  margin: 4px 0;
}

/* ── Delete Day modal — destructive emphasis ───────────────── */
.delete-day-modal { font-size: 0.9rem; }
.delete-day-modal__warning {
  display: flex;
  gap: 12px;
  padding: 14px;
  background: rgba(220,38,38,0.06);
  border: 1px solid rgba(220,38,38,0.25);
  border-radius: 8px;
}
.delete-day-modal__icon {
  font-size: 22px;
  color: #dc2626;
  flex-shrink: 0;
  line-height: 1;
}
.delete-day-modal__title {
  font-weight: 500;
  color: var(--text);
  margin-bottom: 8px;
}
.delete-day-modal__list {
  margin: 0 0 8px 18px;
  padding: 0;
  color: var(--text-dim);
  font-size: 0.82rem;
  line-height: 1.5;
}
.delete-day-modal__sub {
  font-size: 0.78rem;
  font-weight: 500;
  color: #991b1b;
}

/* ── Remark cell — input + edit-flag icon ──────────────────── */
.checkin-remark-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
}
.checkin-remark-wrap .checkin-remark-input { flex: 1; min-width: 0; }
.checkin-remark__edit-flag {
  display: inline-flex;
  align-items: center;
  color: #92400e;
  cursor: help;
  font-size: 0.95rem;
  line-height: 1;
}

/* ── Segmented P/L/A control — visually equal regardless of is-on ── */
/* Hardens the override group against width-expanding rules elsewhere. */
.att-btns--override {
  display: inline-flex;
  gap: 2px;
  padding: 3px;
  background: var(--surface2, #f3f4f6);
  border-radius: 7px;
}
.att-btns--override .att-btn,
.att-btns--override .att-btn.is-on {
  width: 32px !important;
  height: 30px !important;
  padding: 0 !important;
  flex: 0 0 32px !important;
  background: transparent;
  border: none;
}
.att-btns--override .att-btn.is-on {
  background: var(--surface3);
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.member-table td, .settings-table td {
  padding: 7px 16px;
  border-bottom: 1px solid var(--border-sub);
  vertical-align: middle;
}
.member-table tbody tr {
  cursor: pointer;
  transition: background 0.15s;
}
.member-table tbody tr:hover { background: var(--surface2); }
.member-table tbody tr.is-archived { opacity: 0.5; }

.member-table tbody tr:last-child td,
.settings-table tbody tr:last-child td { border-bottom: none; }

.member-cell {
  display: flex;
  align-items: center;
  gap: 10px;
}
.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--gold-dim);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
  border: 1px solid var(--border);
}
.avatar--leader {
  background: rgba(155,89,182,0.18);
  border-color: rgba(155,89,182,0.5);
  color: var(--purple);
}
.member-cell__name { font-weight: 600; font-size: 0.95rem; }

.row-actions {
  display: flex;
  gap: 6px;
  justify-content: flex-end;
}

/* ═══════════════════════ CHIPS ═══════════════════════ */
.chip {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.3px;
  border: 1px solid var(--border-sub);
  white-space: nowrap;
}
.chip--regular  { background: rgba(46,204,113,0.12); color: var(--green);  border-color: rgba(46,204,113,0.3); }
.chip--returnee { background: rgba(155,89,182,0.12); color: var(--purple); border-color: rgba(155,89,182,0.3); }
.chip--new      { background: rgba(52,152,219,0.12); color: var(--blue);   border-color: rgba(52,152,219,0.3); }
.chip--leader   { background: rgba(201,168,76,0.15); color: var(--gold);   border-color: rgba(201,168,76,0.4); }
/* Tiny inline pill beside a name (check-in roster) */
.chip--inline { padding: 1px 7px; font-size: 0.62rem; letter-spacing: 0.2px; vertical-align: middle; margin-left: 6px; }
.chip--archived { background: var(--surface3); color: var(--text-dim); }
.chip--clan     { font-size: 0.68rem; }

/* ═══════════════════════ EMPTY / PAGINATION ═══════════════════════ */
.empty {
  padding: 50px 24px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.9rem;
}
.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 10px;
  padding: 14px;
  border-top: 1px solid var(--border-sub);
  color: var(--text-dim);
  font-size: 0.82rem;
}
.pagination button {
  background: transparent;
  border: 1px solid var(--border-sub);
  color: var(--text-dim);
  padding: 5px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.pagination button:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}
.pagination button:disabled { opacity: 0.4; cursor: not-allowed; }

/* Inline table pagination — used inside cards (attendance, NF report, etc.) */
.tbl-pg {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  font-size: 0.8rem;
  color: var(--text-dim);
  border-top: 1px solid var(--border-sub);
}
.tbl-pg:empty { display: none; }
.tbl-pg__info { margin-right: auto; }
.tbl-pg__btn {
  background: transparent;
  border: 1px solid var(--border-sub);
  color: var(--text-dim);
  padding: 4px 10px;
  border-radius: 6px;
  font: inherit;
  font-size: 0.78rem;
  cursor: pointer;
}
.tbl-pg__btn:hover:not(:disabled) {
  border-color: var(--gold);
  color: var(--gold);
}
.tbl-pg__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* ═══════════════════════ MOBILE CARDS ═══════════════════════ */
.mobile-cards { display: none; padding: 12px; }
.m-card {
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 10px;
  cursor: pointer;
}
.m-card.is-archived { opacity: 0.5; }
.m-card__top {
  display: flex; align-items: center; gap: 12px; margin-bottom: 8px;
}
.m-card__info {
  font-size: 0.78rem;
  color: var(--text-dim);
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ═══════════════════════ CLAN GRID ═══════════════════════ */
.clan-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px;
}
.clan-card {
  --accent: var(--gold);
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 20px;
  position: relative;
  overflow: hidden;
}
.clan-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--accent);
}
.clan-card__head {
  display: flex; align-items: center; gap: 12px; margin-bottom: 14px;
}
.clan-card__avatar {
  width: 36px; height: 36px;
  border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  background: color-mix(in srgb, var(--accent) 15%, transparent);
  color: var(--accent);
  border: 1px solid color-mix(in srgb, var(--accent) 35%, transparent);
}
.clan-card__name { font-size: 1.05rem; font-weight: 700; color: var(--text); }
.clan-card__count { font-size: 0.78rem; color: var(--text-dim); }

.clan-card__heads-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-dim);
  margin-bottom: 8px;
  margin-top: 6px;
}
.clan-card__head-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 6px;
}
.clan-card__head-name { flex: 1; font-size: 0.86rem; font-weight: 500; }
.clan-card__head-meta { font-size: 0.72rem; color: var(--text-dim); }
.clan-card__add-btn {
  width: 100%;
  background: transparent;
  border: 1px dashed var(--border);
  color: var(--text-dim);
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  font: inherit;
  font-size: 0.8rem;
  margin-top: 4px;
}
.clan-card__add-btn:hover { border-color: var(--gold); color: var(--gold); }
.clan-card__past-toggle {
  margin-top: 12px;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.clan-card__past-list { display: none; margin-top: 8px; }
.clan-card__past-list.is-open { display: block; }
.clan-card__past-row {
  font-size: 0.78rem;
  color: var(--text-dim);
  padding: 6px 10px;
  border-top: 1px solid var(--border-sub);
  display: flex;
  gap: 10px;
}

/* ═══════════════════════ LEADERSHIP ═══════════════════════ */
.leadership-section { margin-bottom: 28px; }
.leadership-section__title {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 12px;
}
.leadership-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
}
/* Two (or more) titled sub-sections flowing next to each other (not stretched
   apart), wrapping when too narrow. */
.leadership-section--row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 16px;
  align-items: flex-start;
}
/* Don't grow — take natural width so the blocks sit close together. */
.leadership-subsection { flex: 0 1 auto; min-width: 220px; max-width: 340px; }
/* Inside a row, the card grid is a single natural-width column, not a
   space-filling auto-fill grid. */
.leadership-section--row .leadership-grid { display: block; }
.leader-card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex; align-items: center; gap: 12px;
  cursor: pointer;
  transition: border-color 0.18s;
}
.leader-card:hover { border-color: var(--gold); }
.leader-card__name { font-weight: 500; font-size: 0.92rem; }
.leader-card__meta { font-size: 0.76rem; color: var(--text-dim); margin-top: 2px; }

/* ═══════════════════════ DRAWER ═══════════════════════ */
.drawer-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.6);
  z-index: 200;
}
.drawer {
  position: fixed;
  top: 0; right: 0;
  width: 100%;
  max-width: 560px;
  height: 100vh;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 201;
  display: flex;
  flex-direction: column;
}
.drawer__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.drawer__title { font-size: 1rem; color: var(--gold); font-weight: 600; }
.drawer__body { flex: 1; overflow-y: auto; padding: 22px; }
.drawer__footer {
  padding: 16px 22px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: space-between; gap: 8px;
}

/* Profile sections */
.profile-top {
  display: flex; align-items: center; gap: 16px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-sub);
  margin-bottom: 18px;
}
.profile-top__avatar {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: var(--gold-dim);
  color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1.3rem;
  border: 2px solid var(--border);
}
.profile-top__avatar--leader {
  background: rgba(155,89,182,0.18);
  color: var(--purple);
  border-color: rgba(155,89,182,0.5);
}
.profile-top__name { font-size: 1.15rem; font-weight: 700; color: var(--text); }
.profile-top__sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 4px;
                    display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.profile-section {
  margin-bottom: 22px;
}
.profile-section__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gold);
  margin-bottom: 10px;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border-sub);
}
.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 18px;
}
.profile-field {
  display: flex; flex-direction: column; gap: 3px;
}
.profile-field--full { grid-column: 1 / -1; }
.profile-field__label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.profile-field__value { font-size: 0.88rem; color: var(--text); }
.profile-field__value--muted { color: var(--text-dim); font-style: italic; }

.profile-notes {
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 12px;
  font-size: 0.88rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

/* Family/relationship rows */
.rel-group { margin-bottom: 12px; }
.rel-group__title {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 6px;
}
.rel-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 10px;
  background: var(--surface2);
  border-radius: 8px;
  margin-bottom: 6px;
}
.rel-row__name { flex: 1; font-size: 0.88rem; }
.rel-row__meta { font-size: 0.72rem; color: var(--text-dim); }
.rel-row__main { flex: 1; display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.rel-row__since { font-size: 0.74rem; color: var(--text-dim); }
.rel-row__type { font-size: 0.8rem; color: var(--text-dim); white-space: nowrap; }

.skill-chip-list {
  display: flex; flex-wrap: wrap; gap: 6px;
}
.skill-chip {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 999px;
  padding: 5px 11px;
  font-size: 0.78rem;
}
.skill-chip__remove {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  cursor: pointer;
  font-size: 0.9rem;
  line-height: 1;
}
.skill-chip__remove:hover { color: var(--red); }

/* ═══════════════════════ MODAL ═══════════════════════ */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.7);
  z-index: 300;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
/* Small modal (confirmations, clan heads, relationships) sits above the member edit modal */
#small-modal { z-index: 400; }
.modal {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  width: 100%;
  max-width: 460px;
  max-height: 92vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal--wide { max-width: 720px; }
.modal__head {
  padding: 18px 22px;
  border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.modal__head h3 { color: var(--gold); font-size: 1.02rem; font-weight: 600; }
.modal__body { padding: 22px; overflow-y: auto; flex: 1; }
.modal__foot {
  padding: 14px 22px;
  border-top: 1px solid var(--border);
  display: flex; justify-content: flex-end; gap: 8px;
  flex-wrap: wrap; row-gap: 8px;
}
/* On phones let the footer buttons share the width and wrap tidily. */
@media (max-width: 480px) {
  .modal__foot { justify-content: stretch; }
  .modal__foot .btn { flex: 1 1 auto; }
}

/* Form tabs inside modal */
.form-tabs {
  display: flex; gap: 4px;
  border-bottom: 1px solid var(--border-sub);
  margin-bottom: 18px;
}
.form-tab {
  background: transparent;
  border: 0;
  color: var(--text-dim);
  padding: 8px 14px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 500;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
}
.form-tab:hover { color: var(--text); }
.form-tab.is-active { color: var(--gold); border-bottom-color: var(--gold); }
.form-section { display: none; }
.form-section.is-active { display: block; }

.form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.form-field { display: flex; flex-direction: column; gap: 6px; }
.pwd-wrap { position: relative; display: flex; align-items: center; }
.pwd-wrap input { flex: 1; padding-right: 36px; }
.pwd-eye { position: absolute; right: 8px; background: none; border: none; cursor: pointer; font-size: 1rem; line-height: 1; padding: 0; color: var(--text-muted); }
.form-field--full { grid-column: 1 / -1; }
.form-field label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  font-weight: 500;
}
.form-field input,
.form-field select,
.form-field textarea {
  padding: 9px 11px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  outline: none;
  transition: border-color 0.18s;
}
.form-field input:focus,
.form-field select:focus,
.form-field textarea:focus { border-color: var(--gold); }
.form-field textarea { resize: vertical; }

.form-hint { color: var(--text-dim); font-size: 0.82rem; line-height: 1.5; }
.form-error {
  background: rgba(231,76,60,0.12);
  border: 1px solid rgba(231,76,60,0.35);
  color: #FF7675;
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 0.84rem;
  margin-top: 10px;
}

/* Skill picker — inside add/edit modal */
.skill-picker {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  min-height: 60px;
}
.skill-picker__opt {
  font-size: 0.78rem;
  padding: 5px 10px;
  border-radius: 999px;
  background: var(--surface3);
  border: 1px solid var(--border-sub);
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.skill-picker__opt.is-on {
  background: var(--gold-dim);
  border-color: var(--gold);
  color: var(--gold);
}

/* Member picker (autocomplete) */
.member-picker { position: relative; }
.member-picker__results {
  position: absolute;
  top: 100%; left: 0; right: 0;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  max-height: 240px;
  overflow-y: auto;
  z-index: 10;
  margin-top: 4px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.35);
}
/* Inline variant: results sit in-flow (no absolute overlay) so they never
   get clipped by the modal body's overflow. */
.member-picker--inline .member-picker__results {
  position: static;
  margin-top: 6px;
  max-height: 200px;
  box-shadow: none;
}
.member-picker__opt {
  padding: 9px 12px;
  font-size: 0.85rem;
  cursor: pointer;
  border-bottom: 1px solid var(--border-sub);
}
.member-picker__opt:last-child { border-bottom: 0; }
.member-picker__opt:hover { background: var(--surface2); color: var(--gold); }
.member-picker__opt-meta { font-size: 0.72rem; color: var(--text-dim); }
.member-picker__opt.is-picked { color: var(--text-dim); cursor: default; }
.member-picker__opt.is-picked:hover { background: transparent; }
.member-picker__tick { color: var(--gold, #c9a84c); font-weight: 700; }

/* Selected-member chips (multi-add) */
.member-picker__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.member-picker__chips:empty { margin-top: 0; }
.member-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  font-size: 0.8rem;
  font-weight: 500;
  padding: 4px 6px 4px 11px;
  border-radius: 999px;
}
.member-chip__x {
  background: none;
  border: 0;
  color: var(--text-dim);
  font-size: 0.95rem;
  line-height: 1;
  cursor: pointer;
  padding: 0;
  width: 18px; height: 18px;
  border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
}
.member-chip__x:hover { color: var(--red, #e05252); background: rgba(224,82,82,0.12); }

/* ═══════════════════════ SETTINGS ═══════════════════════ */

/* Attendance settings rows */
.att-settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 16px 20px;
}
.att-settings-row__info { flex: 1; }
.att-settings-row__label {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--text);
  margin-bottom: 3px;
}
.att-settings-row__desc {
  font-size: 0.78rem;
  color: var(--text-dim);
  line-height: 1.4;
}
.att-settings-row__input {
  width: 100px;
  flex-shrink: 0;
  text-align: center;
  font-size: 1rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}

.settings-section { margin-bottom: 28px; }
.settings-section__head {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 12px;
}
.settings-section__head h2 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--text);
}
.settings-table .role-pill {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 3px 8px;
  border-radius: 999px;
}

/* ═══════════════════════ TOAST ═══════════════════════ */
.toast {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--surface2);
  border: 1px solid var(--border);
  color: var(--text);
  padding: 12px 20px;
  border-radius: 10px;
  font-size: 0.86rem;
  z-index: 400;
  box-shadow: 0 8px 24px rgba(0,0,0,0.4);
}
.toast.is-error { border-color: rgba(231,76,60,0.4); color: #FF7675; }

/* ═══════════════════════ BACKUP & RESTORE ═══════════════════════ */
.backup-restore-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.br-panel {
  background: var(--surface);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  padding: 20px;
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.br-panel--restore {
  border-color: rgba(231,76,60,0.2);
}
.br-panel__icon {
  font-size: 1.5rem;
  line-height: 1;
  color: var(--gold);
  padding-top: 2px;
  flex-shrink: 0;
}
.br-panel__icon--danger {
  color: var(--red);
}
.br-panel__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.br-panel__title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.br-panel__desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  line-height: 1.5;
}
.br-panel__desc strong {
  color: var(--text);
}

/* File drop zone */
.file-drop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px 14px;
  border: 1.5px dashed var(--border-sub);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  text-align: center;
}
.file-drop:hover,
.file-drop.is-over {
  border-color: var(--gold);
  background: var(--gold-dim);
}
.file-drop.has-file {
  border-color: rgba(46,204,113,0.4);
  background: rgba(46,204,113,0.06);
}
.file-drop input[type="file"] {
  display: none;
}
.file-drop__icon {
  font-size: 1.4rem;
  line-height: 1;
}
.file-drop__text {
  font-size: 0.78rem;
  color: var(--text-dim);
}
.file-drop.has-file .file-drop__text {
  color: var(--green);
  font-weight: 500;
}

/* ═══════════════════════ CHECK-IN TAB ═══════════════════════ */
.checkin-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.checkin-toolbar__left,
.checkin-toolbar__right {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
}
.checkin-event-banner {
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 10px 14px;
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.checkin-event-info {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  font-size: 0.86rem;
}
.checkin-bulk-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.checkin-table th,
.checkin-table td { vertical-align: middle; }

/* ── Check-in progress bar ── */
.checkin-progress-bar {
  height: 6px;
  background: var(--surface3);
  border-radius: 999px;
  overflow: hidden;
  margin-bottom: 6px;
}
.checkin-progress-bar__fill {
  height: 100%;
  background: var(--gold);
  border-radius: 999px;
  transition: width 0.3s ease;
}
.checkin-progress-bar__fill.is-complete { background: var(--green); }
.checkin-progress-label {
  font-size: 0.78rem;
  color: var(--text-dim);
}

/* ── P / L / A override button group ── */
.att-btns--override {
  display: inline-flex;
  gap: 3px;
}
.att-btns--override .att-btn {
  width: 30px;
  height: 30px;
  border-radius: 6px;
  font-size: 0.78rem;
  font-weight: 700;
}
/* Active states */
.att-btns--override .att-btn--p.is-on {
  background: rgba(46,204,113,0.18);
  color: #2ECC71;
  border-color: rgba(46,204,113,0.5);
}
.att-btns--override .att-btn--l.is-on {
  background: rgba(243,156,18,0.18);
  color: #F39C12;
  border-color: rgba(243,156,18,0.5);
}
.att-btns--override .att-btn--a.is-on {
  background: rgba(231,76,60,0.18);
  color: #E74C3C;
  border-color: rgba(231,76,60,0.5);
}
/* Hover hints */
.att-btns--override .att-btn--p:not(.is-on):hover { color: #2ECC71; border-color: rgba(46,204,113,0.3); }
.att-btns--override .att-btn--l:not(.is-on):hover { color: #F39C12; border-color: rgba(243,156,18,0.3); }
.att-btns--override .att-btn--a:not(.is-on):hover { color: #E74C3C; border-color: rgba(231,76,60,0.3); }

/* ── Check-in edit mode banner ── */
.checkin-edit-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  margin-bottom: 10px;
  background: rgba(52,152,219,0.1);
  border: 1px solid rgba(52,152,219,0.3);
  border-radius: 8px;
  color: #3498DB;
  font-size: 0.84rem;
  font-weight: 500;
}

/* ── Check-in non-Sunday warning ── */
.checkin-not-sunday {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: 6px;
  background: rgba(243,156,18,0.12);
  border: 1px solid rgba(243,156,18,0.35);
  color: #F39C12;
  font-size: 0.78rem;
  font-weight: 600;
  white-space: nowrap;
}

/* ── Check-in prominent search bar ── */
.checkin-search-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0 12px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  transition: border-color 0.18s;
  box-sizing: border-box;
}
.checkin-search-bar:focus-within {
  border-color: var(--gold);
}
.checkin-search-bar__icon {
  font-size: 1rem;
  color: var(--text-dim);
  flex-shrink: 0;
  user-select: none;
}
.checkin-search-bar__input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  padding: 10px 0;
  font-size: 0.88rem;
  color: var(--text);
  font-family: inherit;
  height: 100%;
}
.checkin-search-bar__input::placeholder {
  color: var(--text-dim);
  font-size: 0.88rem;
}

/* Ensure clan dropdown matches search-bar height exactly */
.checkin-filter-row .input,
.checkin-filter-row .checkin-search-bar {
  height: 42px;
}


/* ── Attendance event drill-down rows ── */
.att-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-sub);
  cursor: default;
}
.att-event-row:last-child { border-bottom: none; }
.att-event-row:hover { background: var(--surface2); }

/* ── Perfect attendance chip ── */
.att-perfect-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  font-size: 0.82rem;
  cursor: pointer;
}
.att-perfect-chip:hover { border-color: rgba(34,197,94,0.4); }

/* ── Member attendance month grouping ── */
.att-month-group {
  margin-bottom: 10px;
}
.att-month-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 4px;
}

/* Attendance P/L/A buttons */
.att-btns {
  display: inline-flex;
  gap: 4px;
}
.att-btn {
  width: 32px;
  height: 28px;
  border: 1px solid var(--border-sub);
  border-radius: 6px;
  background: var(--surface3);
  color: var(--text-dim);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s, color 0.12s, border-color 0.12s;
  line-height: 1;
}
.att-btn:hover { border-color: rgba(255,255,255,0.2); color: var(--text); }
.att-btn--p.is-on  { background: rgba(46,204,113,0.15); color: #2ECC71; border-color: rgba(46,204,113,0.4); }
.att-btn--l.is-on  { background: rgba(243,156,18,0.15); color: #F39C12; border-color: rgba(243,156,18,0.4); }
.att-btn--a.is-on  { background: rgba(231,76,60,0.15);  color: #E74C3C; border-color: rgba(231,76,60,0.4); }

/* Check-in button — unmarked state (neutral gray) */
.att-btn.att-btn--checkin {
  width: 110px;
  padding: 0 12px;
  height: 32px;
  background: var(--surface3);
  border: 1px solid var(--border-sub);
  color: var(--text-dim);
  font-size: 0.8rem;
  font-weight: 600;
  border-radius: 7px;
  letter-spacing: 0.01em;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
}
.att-btn.att-btn--checkin:hover {
  background: var(--surface3);
  border-color: rgba(255,255,255,0.18);
  color: var(--text);
}
.att-btn.att-btn--checkin:active { transform: scale(0.96); }

/* Check-in button — marked states (green = Present, orange = Late) */
/* Scoped to the single smart button — must NOT apply to the override group, */
/* otherwise the active L button balloons and pushes adjacent buttons out. */
.att-btns:not(.att-btns--override) .att-btn.att-btn--p.is-on,
.att-btns:not(.att-btns--override) .att-btn.att-btn--l.is-on {
  width: 110px;
  padding: 0 12px;
  height: 32px;
}

/* Override mode: lock all three buttons to a uniform size, regardless of is-on */
.att-btns--override .att-btn,
.att-btns--override .att-btn.is-on {
  width: 32px;
  height: 30px;
  padding: 0;
  flex: 0 0 32px;
}

/* Attendance read-only chips */
.att-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 24px;
  border-radius: 5px;
  font-size: 0.74rem;
  font-weight: 700;
  border: 1px solid transparent;
}
.att-chip--p { background: rgba(46,204,113,0.12); color: #2ECC71; border-color: rgba(46,204,113,0.3); }
.att-chip--l { background: rgba(243,156,18,0.12); color: #F39C12; border-color: rgba(243,156,18,0.3); }
.att-chip--a { background: rgba(231,76,60,0.12);  color: #E74C3C; border-color: rgba(231,76,60,0.3); }
.att-chip--u { background: var(--surface3); color: var(--text-dim); }

.input--sm {
  padding: 5px 8px;
  font-size: 0.82rem;
  border-radius: 5px;
  background: var(--surface3);
  border: 1px solid var(--border-sub);
  color: var(--text);
  outline: none;
}
.input--sm:focus { border-color: var(--gold); }

/* ═══════════════════════ ATTENDANCE ANALYTICS ═══════════════════════ */
.attendance-toolbar {
  margin-bottom: 16px;
}
.attendance-toolbar__controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}
.att-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
.att-card {
  padding: 16px;
}
.att-card__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -0.01em;
}
.att-card__sub {
  font-weight: 400;
  color: var(--text-dim);
  font-size: 0.8rem;
}

/* Clan attendance bars */
.att-clan-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}
.att-clan-row__label {
  display: flex;
  flex-direction: column;
  min-width: 90px;
  max-width: 90px;
}
.att-clan-row__name {
  font-size: 0.82rem;
  font-weight: 500;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.att-clan-row__meta {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.att-clan-row__bar-wrap {
  flex: 1;
  height: 10px;
  background: var(--surface3);
  border-radius: 5px;
  overflow: hidden;
}
.att-clan-row__bar {
  height: 100%;
  border-radius: 5px;
  min-width: 4px;
  transition: width 0.3s ease;
}
.att-clan-row__pct {
  font-size: 0.76rem;
  color: var(--text-dim);
  min-width: 34px;
  text-align: right;
}

/* Follow-up list */
/* Flex-style row — only for <div class="att-member-row"> in lists (absentee/follow-up). */
/* Table rows (<tr class="att-member-row">) MUST keep table-row display so cells align with thead. */
div.att-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--border-sub);
  cursor: pointer;
}
div.att-member-row:last-child { border-bottom: none; }
div.att-member-row:hover { background: rgba(255,255,255,0.02); border-radius: 6px; }
/* For table rows reusing the same class, just keep the hover affordance. */
tr.att-member-row { cursor: pointer; }
tr.att-member-row:hover { background: var(--surface2); }
.att-member-row__name {
  font-size: 0.84rem;
  font-weight: 500;
}

/* % badge */
.att-pct-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 44px;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 0.76rem;
  font-weight: 700;
}

/* Attendance history dots in member drawer */
.att-history {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 6px;
}
.att-dot {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 5px;
  font-size: 0.7rem;
  font-weight: 700;
  cursor: default;
  border: 1px solid transparent;
}
.att-dot--p { background: rgba(46,204,113,0.12); color: #2ECC71; border-color: rgba(46,204,113,0.25); }
.att-dot--l { background: rgba(243,156,18,0.12); color: #F39C12; border-color: rgba(243,156,18,0.25); }
.att-dot--a { background: rgba(231,76,60,0.12);  color: #E74C3C; border-color: rgba(231,76,60,0.25); }
.att-dot--u { background: var(--surface3); color: var(--text-dim); }

/* Legacy dashboard tab (attendance sub-dashboard) */
.tab--att-dashboard { display: none; }
.tab--att-dashboard.is-active { display: block; }

/* ═══════════════════════ DASHBOARD TAB ═══════════════════════ */
.tab--dashboard { display: none; }
.tab--dashboard.is-active { display: block; }

/* KPI strip */
.dash-kpi-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}
.dash-kpi {
  flex: 1 1 140px;
  min-width: 120px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 18px 20px 14px;
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.dash-kpi__num {
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--gold);
  line-height: 1;
  letter-spacing: -0.02em;
}
.dash-kpi__label {
  font-size: 0.76rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--text-dim);
  margin-top: 2px;
}
.dash-kpi__sub {
  font-size: 0.7rem;
  color: var(--text-dim);
  opacity: 0.7;
}

/* Chart grid */
.dash-chart-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.dash-chart-grid--half {
  grid-template-columns: 1fr 1fr;
}
.dash-chart-grid--full {
  grid-template-columns: 1fr;
}
.dash-chart-grid--thirds {
  grid-template-columns: 1fr 1fr 1fr;
}

/* Member Pipeline card */
.dash-pipeline-body {
  padding: 20px 20px 12px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  flex: 1;
}
.dash-pipeline {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-pipeline__stage {
  display: grid;
  grid-template-columns: 90px 1fr 36px;
  align-items: center;
  gap: 10px;
}
.dash-pipeline__label {
  font-size: 0.78rem;
  color: var(--text-dim);
  white-space: nowrap;
}
.dash-pipeline__track {
  height: 10px;
  background: var(--surface2);
  border-radius: 5px;
  overflow: hidden;
}
.dash-pipeline__bar {
  height: 100%;
  border-radius: 5px;
  transition: width 0.5s ease;
}
.dash-pipeline__bar--nf  { background: #3b82f6; }
.dash-pipeline__bar--ret { background: var(--gold, #C9A84C); }
.dash-pipeline__bar--reg { background: #10b981; }
.dash-pipeline__count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--text);
  text-align: right;
}
.dash-pipeline__arrow {
  text-align: center;
  color: var(--text-dim);
  font-size: 0.8rem;
  line-height: 1;
  margin: 2px 0 2px 100px;
}

/* Follow-up Radar card */
.dash-followup-body {
  flex: 1;
  overflow-y: auto;
}
.dash-followup-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.dash-followup__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 9px 16px;
  border-bottom: 1px solid var(--border-sub);
  gap: 8px;
}
.dash-followup__item:last-child { border-bottom: none; }
.dash-followup__item:hover { background: var(--surface2); }
.dash-followup__info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.dash-followup__name {
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-followup__clan {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.dash-followup__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  flex-shrink: 0;
}
.dash-followup__streak {
  font-size: 0.75rem;
  font-weight: 700;
  padding: 2px 7px;
  border-radius: 10px;
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.25);
}
.dash-followup__streak--mid {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border-color: rgba(239,68,68,0.25);
}
.dash-followup__streak--high {
  background: rgba(239,68,68,0.2);
  color: #ef4444;
  border-color: rgba(239,68,68,0.4);
}
.dash-followup__last {
  font-size: 0.68rem;
  color: var(--text-dim);
}
.dash-followup-empty {
  padding: 20px 16px;
  font-size: 0.84rem;
  color: var(--text-dim);
}

/* NF / Returnee / Guest series toggle pills */
.dash-nf-toggles {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.dash-nf-toggle {
  padding: 3px 12px;
  border-radius: 14px;
  border: 1px solid var(--border-sub);
  background: transparent;
  color: var(--text-dim);
  font: inherit;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.dash-nf-toggle.is-active {
  background: var(--surface2);
  color: var(--text);
  border-color: var(--gold);
}
.dash-nf-toggle:hover:not(.is-active) {
  border-color: var(--text-dim);
  color: var(--text);
}
.dash-chart-card {
  display: flex;
  flex-direction: column;
  min-height: 300px;
  padding: 0;
  overflow: hidden;
}
.dash-chart-card__head {
  padding: 16px 20px 10px;
  border-bottom: 1px solid var(--border-sub);
  flex-shrink: 0;
}
.dash-chart-card__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.dash-chart-card__title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.dash-chart-card__sub {
  font-size: 0.72rem;
  color: var(--text-dim);
  margin-top: 2px;
}
.dash-chart-card__body {
  flex: 1;
  padding: 16px 20px;
  position: relative;
  min-height: 230px;
}
.dash-chart-card__body--sm {
  min-height: 200px;
  max-height: 260px;
}
.dash-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 180px;
  font-size: 0.82rem;
  color: var(--text-dim);
  text-align: center;
  padding: 16px;
}
.dash-empty {
  padding: 40px;
  text-align: center;
  color: var(--text-dim);
  font-size: 0.88rem;
}

@media (max-width: 820px) {
  .dash-chart-grid,
  .dash-chart-grid--half {
    grid-template-columns: 1fr;
  }
  .dash-kpi { flex: 1 1 calc(50% - 6px); }
}

/* ═══════════════════════ RESPONSIVE ═══════════════════════ */
@media (max-width: 820px) {
  /* Hamburger nav: the tab list becomes a dropdown panel under the topbar. */
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar__burger { display: inline-flex; }
  .topbar__user  { margin-left: auto; gap: 8px; }
  .topbar__name  { display: none; }
  .topbar__nav {
    position: absolute;
    top: 100%; left: 0; right: 0;
    flex-direction: column;
    align-items: stretch;
    margin-left: 0;
    gap: 4px;
    padding: 8px;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    box-shadow: 0 10px 26px rgba(0,0,0,0.35);
    max-height: calc(100vh - 56px);
    overflow-y: auto;
    display: none;
    z-index: 60;
  }
  .topbar.nav-open .topbar__nav { display: flex; }
  .topbar__tab {
    width: 100%;
    text-align: left;
    padding: 12px 14px;
    font-size: 0.92rem;
  }
  .topbar.nav-open .topbar__nav-overlay {
    display: block;
    position: fixed; inset: 56px 0 0; z-index: 55;
    background: rgba(0,0,0,0.4);
  }
  .content { padding: 18px 14px; }
  .form-grid, .profile-grid { grid-template-columns: 1fr; }
  .drawer { max-width: 100%; }
  .member-table { display: none; }
  .mobile-cards { display: block; }
  /* Reports detail tables have no mobile-card fallback — keep them visible and
     let the wrapper scroll horizontally instead of hiding them. */
  .att-subtab-pane .member-table { display: table; }
  .att-subtab-pane .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .att-grid { grid-template-columns: 1fr; }
  .checkin-table { display: none; }
  .checkin-toolbar { flex-direction: column; align-items: flex-start; }
  .backup-restore-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .stat-row { grid-template-columns: repeat(2, 1fr); }
  .clan-grid { grid-template-columns: 1fr; }
}

/* ═══════════════════════════════════════════════
   ATTENDANCE TAB — consolidated view
   ═══════════════════════════════════════════════ */

/* Controls strip: date presets + clan + export */
.att-controls {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}
.att-controls__presets {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
  flex-wrap: wrap;
}
.att-preset {
  padding: 6px 12px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  transition: background 0.15s, color 0.15s;
}
.att-preset:hover { color: var(--text); }
.att-preset.is-active {
  background: var(--surface3);
  color: var(--text);
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.att-controls__right {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.att-controls__right .input { height: 36px; min-width: 160px; }

.att-custom-range {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  font-size: 0.82rem;
  color: var(--text-dim);
}
.att-custom-range[hidden] { display: none; }
.att-custom-range .input { height: 36px; }

/* Clickable stat row */
.stat-row--clickable .stat-card[data-stat-click] {
  cursor: pointer;
  transition: border-color 0.15s, transform 0.05s;
}
.stat-row--clickable .stat-card[data-stat-click]:hover {
  border-color: var(--gold, #c9a84c);
}
.stat-row--clickable .stat-card[data-stat-click]:active {
  transform: scale(0.99);
}
.stat-row--clickable .stat-card[data-stat-click].is-active {
  border-color: var(--gold);
  background: var(--gold-dim);
}

/* Archived mode banner */
.dir-archived-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(201,168,76,0.1);
  border: 1px solid rgba(201,168,76,0.4);
  border-radius: var(--radius);
  padding: 8px 14px;
  margin-bottom: 16px;
  font-size: 0.82rem;
  color: var(--gold);
}
.dir-archived-banner span { flex: 1; font-weight: 500; }
.dir-archived-banner button {
  background: none;
  border: 1px solid rgba(201,168,76,0.5);
  border-radius: 4px;
  color: var(--gold);
  font-size: 0.78rem;
  padding: 3px 10px;
  cursor: pointer;
}
.dir-archived-banner button:hover { background: rgba(201,168,76,0.15); }

/* Chart card */
.att-chart-card { margin-top: 16px; padding: 0; }
.att-chart-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px 8px;
}
.att-chart-card__title-row {
  display: inline-flex;
  align-items: center;
  gap: 10px;
}
.att-chart-card__title-row .input--sm {
  min-width: 140px;
  height: 30px;
  padding: 4px 10px;
  font-size: 0.8rem;
}
.att-chart-controls {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.att-chart-card__body {
  padding: 8px 16px 12px;
  position: relative;
  height: 260px;
}
.att-chart-card__footnote {
  padding: 4px 16px 12px;
  font-size: 0.74rem;
  color: var(--text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Segmented control (granularity) */
.att-segmented {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 7px;
  padding: 2px;
  gap: 2px;
}
.att-segmented__btn {
  padding: 5px 10px;
  background: transparent;
  border: none;
  border-radius: 5px;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
}
.att-segmented__btn:hover:not(:disabled) { color: var(--text); background: var(--gold-dim); }
.att-segmented__btn.is-active {
  background: var(--gold-dim-2);
  color: var(--gold);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--gold) inset;
}
.att-segmented__btn:disabled { opacity: 0.4; cursor: not-allowed; }

/* Legend checkboxes (P / L / A toggles + % toggle) */
.att-legend {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
}
.att-legend__item,
.att-legend__pct {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.att-legend__item input,
.att-legend__pct input { accent-color: currentColor; }
.att-legend__item--p { color: #10b981; }
.att-legend__item--l { color: #f59e0b; }
.att-legend__item--a { color: #ef4444; }
.att-legend__pct {
  color: var(--text-dim);
  padding-left: 12px;
  border-left: 1px solid var(--border-sub);
}

/* Info icon (ⓘ) */
.att-info {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  font-size: 0.74rem;
  color: var(--text-dim);
  cursor: help;
}

/* Sub-tabs (By Member / By Event) */
.att-detail__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border-sub);
  gap: 12px;
  flex-wrap: wrap;
}
/* ── Reports top-level sub-tabs (Attendance / New Friends / Ministry / Members) ── */
.rep-tabs {
  display: flex;
  gap: 6px;
  margin: 18px 0 18px;
  padding: 5px;
  background: var(--surface-2, rgba(127,127,127,0.1));
  border: 1px solid var(--border-sub);
  border-radius: 12px;
}
.rep-tabs__btn {
  flex: 1;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  color: var(--text-dim);
  padding: 11px 18px;
  font: inherit;
  font-size: 0.95rem;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.rep-tabs__btn:hover { color: var(--text); background: var(--surface, rgba(127,127,127,0.08)); }
.rep-tabs__btn.is-active {
  color: #1a1410;
  background: var(--gold, #c9a84c);
  border-color: var(--gold, #c9a84c);
  box-shadow: 0 1px 6px rgba(201,168,76,0.35);
}
.rep-tabs__btn.is-active:hover { background: var(--gold, #c9a84c); color: #1a1410; }
@media (max-width: 640px) {
  .rep-tabs { flex-wrap: wrap; }
  .rep-tabs__btn { flex: 1 1 40%; }
}
.rep-pane { display: none; }
.rep-pane.is-active { display: block; }

.att-subtabs {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.att-subtabs__btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
}
.att-subtabs__btn:hover { color: var(--text); }
.att-subtabs__btn.is-active {
  background: var(--surface3);
  color: var(--text);
  font-weight: 500;
  box-shadow: 0 0 0 1px rgba(0,0,0,0.06);
}
.att-detail__extra {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.att-subtab-pane[hidden] { display: none; }
.att-detail__filter {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.att-flag {
  display: inline-block;
  font-size: 0.72rem; font-weight: 600;
  padding: 2px 8px; border-radius: 999px; margin-right: 6px;
  border: 1px solid transparent; white-space: nowrap;
}
.att-flag--hot   { color: #E0578E; border-color: rgba(224,87,142,0.4); background: rgba(224,87,142,0.10); }
.att-flag--total { color: var(--green); border-color: rgba(46,204,113,0.4); background: rgba(46,204,113,0.10); }
.att-followup--flagged { background: rgba(201,168,76,0.06); }
.att-followup__name {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; color: var(--gold); font-weight: 600; text-align: left;
}
.att-followup__name:hover { text-decoration: underline; }
.att-detail__filter label {
  font-size: 0.8rem;
  color: var(--text-dim);
  white-space: nowrap;
}

/* Attendance member table — fixed layout so column widths are respected */
#att-table {
  table-layout: fixed;
}
#att-table td:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* ── Weekly × Clan matrix ─────────────────────────────────
   A wide table with sticky-left "Week" column. Scrolls horizontally on
   small viewports. Each cell shows attended/possible + a colored % badge. */
.att-matrix-card { padding: 0; }
.att-matrix-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  padding: 14px 16px 8px;
}
.att-matrix-card__controls {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.att-matrix__pct-toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 0.78rem;
  color: var(--text-dim);
  cursor: pointer;
  user-select: none;
}
.att-matrix-card__legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-left: 12px;
  border-left: 1px solid var(--border-sub);
}
.att-matrix-legend__pill {
  font-size: 0.7rem;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 10px;
}
.att-matrix-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-top: 1px solid var(--border-sub);
}
.att-matrix {
  width: 100%;
  border-collapse: collapse;
  min-width: 720px;
  font-size: 0.82rem;
}
.att-matrix__th,
.att-matrix__td {
  padding: 10px 12px;
  text-align: center;
  border-bottom: 1px solid var(--border-sub);
  vertical-align: middle;
  white-space: nowrap;
  min-width: 110px;
}
.att-matrix__th {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gold);
  font-weight: 600;
  background: var(--surface2);
  border-bottom-width: 2px;
  position: sticky;
  top: 0;
  z-index: 2;
}
.att-matrix__th.sortable {
  cursor: pointer;
  user-select: none;
}
.att-matrix__th.sortable:hover { color: var(--text); }
.att-matrix__th-sub {
  display: block;
  font-size: 0.62rem;
  font-weight: 400;
  letter-spacing: 0;
  color: var(--text-dim);
  text-transform: none;
  margin-top: 2px;
}
/* Sticky first column — "Week" */
.att-matrix__th--week,
.att-matrix__td--week {
  position: sticky;
  left: 0;
  text-align: left;
  background: var(--surface);
  z-index: 3;
  min-width: 130px;
}
.att-matrix__th--week { background: var(--surface2); z-index: 4; }
.att-matrix__td--week { border-right: 1px solid var(--border-sub); }
.att-matrix__week-label { font-weight: 500; color: var(--text); font-size: 0.88rem; }

/* "All clans" column — emphasized */
.att-matrix__th--all,
.att-matrix__td--all {
  background: var(--gold-dim);
  border-right: 1px solid var(--border-sub);
}
.att-matrix__th--all { color: var(--gold); }

/* Big attendance number, % badge optional below */
.att-matrix__cell-num {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.1;
}
.att-matrix__td .att-pct-badge { margin-top: 4px; }
.att-matrix__tag {
  display: block;
  margin-top: 3px;
  font-size: 0.62rem;
  font-weight: 500;
  color: var(--text-dim);
  white-space: nowrap;
}
.att-matrix__tag--guest {
  color: var(--accent, #9a7b29);
}
.att-event-guests {
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--accent, #9a7b29);
  margin-left: 10px;
}

/* Color tiers for the % badges */
.att-pct-badge--good {
  background: rgba(34,197,94,0.12);
  color: #22c55e;
  border: 1px solid rgba(34,197,94,0.3);
}
.att-pct-badge--mid {
  background: rgba(245,158,11,0.12);
  color: #f59e0b;
  border: 1px solid rgba(245,158,11,0.3);
}
.att-pct-badge--low {
  background: rgba(239,68,68,0.12);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
}
.att-pct-badge--none {
  background: var(--surface-2, rgba(127,127,127,0.1));
  color: var(--text-dim);
  border: 1px solid var(--border, rgba(127,127,127,0.25));
}
.min-col-att { white-space: nowrap; }

/* Row hover */
.att-matrix tbody tr:hover .att-matrix__td { background: var(--surface2); }
.att-matrix tbody tr:hover .att-matrix__td--all { background: rgba(201,168,76,0.2); }

@media (max-width: 640px) {
  .att-matrix { min-width: 600px; font-size: 0.78rem; }
  .att-matrix__th, .att-matrix__td { padding: 8px 10px; min-width: 90px; }
}

/* ── People-group share (single Sunday) ───────────────────── */
.att-pg-nav { display: flex; align-items: center; gap: 6px; }
.att-pg-nav__date { min-width: 150px; }
.att-pg-nav__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px;
  background: var(--surface2);
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  font-size: 0.72rem;
  cursor: pointer;
}
.att-pg-nav__arrow:hover:not(:disabled) { border-color: var(--gold); color: var(--gold); }
.att-pg-nav__arrow:disabled { opacity: 0.35; cursor: default; }
.att-pg-sub { font-size: 0.8rem; color: var(--text-dim); margin: 2px 0 12px; }

/* Ministry overview — 3-column row in Reports */
.att-min-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 1024px) { .att-min-row { grid-template-columns: 1fr; } }
.att-min-row--2x2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .att-min-row--2x2 { grid-template-columns: 1fr; } }
.att-min-card { display: flex; flex-direction: column; }

/* Per-clan participation donuts (Ministry report tile) */
.att-clan-donuts { display: flex; gap: 14px; justify-content: space-around; align-items: flex-start; flex-wrap: wrap; margin-top: 8px; min-height: 200px; }
.att-clan-donut { display: flex; flex-direction: column; align-items: center; flex: 1 1 0; min-width: 120px; }
.att-clan-donut__wrap { position: relative; width: 130px; height: 130px; }
.att-clan-donut__center { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 800; color: var(--text); pointer-events: none; }
.att-clan-donut__name { margin-top: 8px; font-size: 0.82rem; font-weight: 600; color: var(--text); text-align: center; }
.att-clan-donut__meta { font-size: 0.72rem; color: var(--text-dim); }
.att-min-chartwrap { position: relative; height: 260px; margin-top: 8px; }
.att-min-chartwrap--doughnut { display: flex; align-items: center; justify-content: center; }
.att-min-chartwrap--cov { height: 200px; flex-shrink: 0; width: 200px; }
.att-min-cov-layout { display: flex; align-items: center; gap: 20px; margin-top: 8px; }
.att-min-cov-center {
  position: absolute; top: 44%; left: 0; right: 0;
  transform: translateY(-50%);
  display: flex; flex-direction: column; align-items: center;
  pointer-events: none;
}
.att-min-cov-center__pct { font-size: 1.5rem; font-weight: 800; color: var(--text); line-height: 1; }
.att-min-cov-center__lbl { font-size: 0.68rem; color: var(--text-dim); margin-top: 4px; text-align: center; }
.att-min-cov-legend { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.att-cov-leg__row { display: grid; grid-template-columns: 10px 1fr auto auto; align-items: center; gap: 7px; font-size: 0.8rem; }
.att-cov-leg__swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; }
.att-cov-leg__name { color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-cov-leg__val { color: var(--text-dim); font-variant-numeric: tabular-nums; text-align: right; }
.att-cov-leg__pct { color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; min-width: 34px; text-align: right; }
.att-cov-leg__row--ns .att-cov-leg__name { color: var(--text-dim); }
.att-pg-wrap { overflow-x: auto; }
.att-pg-table { width: 100%; border-collapse: collapse; font-size: 0.86rem; }
.att-pg-table th, .att-pg-table td {
  padding: 9px 12px;
  border-bottom: 1px solid var(--border-sub);
  text-align: left;
}
.att-pg-table th {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  font-weight: 600;
}
.att-pg-table .u-right { text-align: right; }
.att-pg-table .u-mono { font-variant-numeric: tabular-nums; }
.att-pg-table tbody tr:hover td { background: var(--surface2); }
.att-pg-bar-col { width: 38%; }
.att-pg-bar {
  height: 8px;
  background: var(--surface2);
  border-radius: 4px;
  overflow: hidden;
}
.att-pg-bar__fill {
  height: 100%;
  background: var(--gold, #C9A84C);
  border-radius: 4px;
}
@media (max-width: 640px) { .att-pg-bar-col { display: none; } }

/* ── Shared pager (matrix + NF weekly) ────────────────────── */
.att-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  margin-top: 12px;
}
.att-pager__label { font-size: 0.82rem; color: var(--text-dim); }
.att-pager .btn[disabled] { opacity: 0.45; cursor: default; }

/* By Member table — fixed layout so colgroup widths win.
   Without this, thead vs tbody can pick different column widths and the
   headers visually drift away from the cells. */
.att-table-fixed { table-layout: fixed; }
.att-table-fixed td,
.att-table-fixed th {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.att-table-fixed td .member-cell { min-width: 0; }
.att-table-fixed td .member-cell__name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Event row in By Event sub-tab */
.att-event-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-sub);
}
.att-event-row:last-child { border-bottom: none; }
.att-event-row:hover { background: var(--surface2); }

@media (max-width: 640px) {
  .att-controls { flex-direction: column; align-items: stretch; }
  .att-controls__right { justify-content: space-between; }
  .att-chart-card__head { flex-direction: column; align-items: flex-start; }
  .att-legend { gap: 8px; }
  .att-legend__pct { padding-left: 0; border-left: none; }
}

/* ═══════════════════════════════════════════════════════════
   NF & RETURNEE WEEKLY REPORT
═══════════════════════════════════════════════════════════ */

/* Card head */
.att-nf-card__head {
  padding: 14px 16px 10px;
  border-bottom: 1px solid var(--border-sub);
}

/* Weekly table */
.att-nf-table-wrap {
  overflow-x: auto;
}
.att-nf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.att-nf-table th,
.att-nf-table td {
  padding: 9px 14px;
  border-bottom: 1px solid var(--border-sub);
  text-align: left;
}
.att-nf-table th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: var(--surface2);
}
.att-nf-table__count { text-align: center; }
.att-nf-table tbody tr:last-child td { border-bottom: none; }
.att-nf-table tbody tr:hover td { background: var(--surface2); }

/* Clickable count buttons */
.att-nf-count-btn {
  background: var(--accent-dim, rgba(201,168,76,0.15));
  color: var(--accent, #c9a84c);
  border: 1px solid rgba(201,168,76,0.3);
  border-radius: 14px;
  padding: 2px 12px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.att-nf-count-btn:hover {
  background: rgba(201,168,76,0.28);
}
.att-nf-zero {
  color: var(--text-dim);
  font-size: 0.85rem;
}
.att-nf-total {
  font-weight: 600;
  color: var(--text);
}

/* Endorsement flag section */
.att-nf-flag {
  border-top: 1px solid var(--border-sub);
  margin-top: 0;
}
.att-nf-flag__toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 12px 16px;
  background: none;
  border: none;
  cursor: pointer;
  font-size: 0.86rem;
  color: var(--text-dim);
  text-align: left;
  transition: color 0.15s;
}
.att-nf-flag__toggle:hover { color: var(--text); }
.att-nf-flag__chevron {
  margin-left: auto;
  font-size: 0.9rem;
  line-height: 1;
}
.att-nf-flag__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: rgba(239,68,68,0.15);
  color: #ef4444;
  border: 1px solid rgba(239,68,68,0.3);
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 700;
}
.att-nf-flag__body {
  padding: 0 16px 16px;
}
.att-nf-flag__desc {
  font-size: 0.82rem;
  color: var(--text-dim);
  margin: 0 0 12px;
}
.att-nf-flag-wrap {
  overflow-x: auto;
}

/* Flag table */
.att-nf-flag-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.86rem;
}
.att-nf-flag-table th,
.att-nf-flag-table td {
  padding: 8px 12px;
  border-bottom: 1px solid var(--border-sub);
  text-align: left;
}
.att-nf-flag-table th {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--text-dim);
  background: var(--surface2);
}
.att-nf-flag-table tbody tr:last-child td { border-bottom: none; }
.att-nf-flag-table tbody tr:hover td { background: var(--surface2); }

/* Names drawer */
.att-nf-drawer {
  position: fixed;
  top: 0;
  right: 0;
  width: 320px;
  max-width: 92vw;
  height: 100%;
  background: var(--surface);
  border-left: 1px solid var(--border);
  z-index: 500;
  display: flex;
  flex-direction: column;
  box-shadow: -4px 0 24px rgba(0,0,0,0.25);
  animation: slideInRight 0.2s ease;
}
.att-nf-drawer[hidden] { display: none; }
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to   { transform: translateX(0);    opacity: 1; }
}
.att-nf-drawer__inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
}
.att-nf-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border-sub);
  flex-shrink: 0;
}
.att-nf-drawer__title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.att-nf-drawer__close {
  background: none;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
  padding: 0 4px;
  transition: color 0.15s;
}
.att-nf-drawer__close:hover { color: var(--text); }
.att-nf-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
  overflow-y: auto;
  flex: 1;
}
.att-nf-drawer__item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-sub);
  gap: 8px;
}
.att-nf-drawer__item:last-child { border-bottom: none; }
.att-nf-drawer__name {
  font-size: 0.88rem;
  font-weight: 500;
  color: var(--text);
}
.att-nf-drawer__clan {
  font-size: 0.78rem;
  color: var(--text-dim);
  background: var(--surface2);
  border-radius: 10px;
  padding: 2px 8px;
  white-space: nowrap;
}
.att-nf-drawer__empty {
  padding: 20px 16px;
  font-size: 0.86rem;
  color: var(--text-dim);
}

/* Drawer overlay */
.att-nf-drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 499;
}
.att-nf-drawer-overlay[hidden] { display: none; }

/* Status badges for NF and Returnee in flag table */
.status-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 0.75rem;
  font-weight: 600;
}
.status--new-friend {
  background: rgba(59,130,246,0.12);
  color: #3b82f6;
  border: 1px solid rgba(59,130,246,0.25);
}
.status--returnee {
  background: rgba(16,185,129,0.12);
  color: #10b981;
  border: 1px solid rgba(16,185,129,0.25);
}

/* ═══════════════════════════════════════════════════════════
   CELEBRATIONS TAB
═══════════════════════════════════════════════════════════ */

.celebrations-toolbar {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
  flex-wrap: wrap;
}

/* Calendar month navigation */
.cel-month-nav {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-left: auto;
}
.cel-month-nav__btn {
  width: 32px; height: 32px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  color: var(--text);
  font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}
.cel-month-nav__btn:hover { background: var(--gold-dim); color: var(--gold); }
.cel-month-nav__label { min-width: 110px; text-align: center; font-weight: 600; }

/* Calendar grid (desktop) */
.cel-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, minmax(0, 1fr));
  gap: 6px;
  width: 100%;
  overflow: hidden;
}
.cel-cal-dow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-dim);
  padding-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.cel-cal-cell {
  min-height: 86px;
  min-width: 0;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  overflow: hidden;
}
.cel-cal-cell--empty { background: transparent; border: none; }
.cel-cal-cell--has { border-color: var(--gold); }
.cel-cal-cell--today { box-shadow: 0 0 0 2px var(--gold) inset; }
.cel-cal-cell__day { font-size: 0.78rem; color: var(--text-dim); font-weight: 600; }
.cel-cal-chip {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 0.74rem;
  line-height: 1.2;
  padding: 3px 5px;
  border-radius: 5px;
  cursor: pointer;
  border-left: 3px solid var(--border-sub);
  background: var(--surface3, rgba(255,255,255,0.03));
}
.cel-cal-chip--bday  { border-left-color: #F2820D; }
.cel-cal-chip--anniv { border-left-color: #E0578E; }
.cel-cal-chip:hover { background: var(--gold-dim); }
.cel-cal-chip__icon { flex: none; }
.cel-cal-chip__name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Calendar agenda (mobile) */
.cel-cal-agenda { display: none; }
.cel-cal-agenda__row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-sub);
}
.cel-cal-agenda__day {
  flex: none;
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  font-weight: 600;
}
.cel-cal-agenda__items { flex: 1; display: flex; flex-direction: column; gap: 5px; }
.cel-cal-agenda__items .cel-cal-chip__name { white-space: normal; }

@media (max-width: 640px) {
  .cel-cal-grid { display: none; }
  .cel-cal-agenda { display: block; }
  .cel-month-nav { margin-left: 0; }
}

/* Segmented control — reusable .seg-ctrl */
.seg-ctrl {
  display: inline-flex;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.seg-ctrl__btn {
  padding: 6px 14px;
  background: transparent;
  border: none;
  border-radius: 6px;
  font-size: 0.82rem;
  color: var(--text-dim);
  cursor: pointer;
  font: inherit;
  transition: background 0.15s, color 0.15s;
}
.seg-ctrl__btn:hover:not(.is-active) { background: var(--gold-dim); color: var(--text); }
.seg-ctrl__btn.is-active {
  background: var(--gold-dim-2);
  color: var(--gold);
  font-weight: 500;
  box-shadow: 0 0 0 1px var(--gold) inset;
}

/* Two-column grid */
.cel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  align-items: start;
}
@media (max-width: 700px) {
  .cel-grid { grid-template-columns: 1fr; }
}

/* Column */
.cel-col {
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: var(--radius);
  overflow: hidden;
}
.cel-col__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 16px 12px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border-sub);
  background: var(--surface3);
}
.cel-col__count {
  margin-left: auto;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--text-dim);
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 20px;
  padding: 1px 8px;
}
.cel-empty {
  color: var(--text-dim);
  font-size: 0.85rem;
  padding: 16px;
}

/* Date group within a column */
.cel-group {
  border-bottom: 1px solid var(--border-sub);
}
.cel-group:last-child { border-bottom: none; }
.cel-group__label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px 4px;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.cel-group--today .cel-group__label { color: var(--gold-light); }
.cel-today-badge {
  font-size: 0.65rem;
  font-weight: 600;
  background: var(--gold-dim-2);
  color: var(--gold);
  border: 1px solid var(--gold);
  border-radius: 4px;
  padding: 1px 5px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* Individual item — compact single line */
.cel-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.1s;
}
.cel-item:hover { background: var(--surface3); }
.cel-item__name {
  flex: 1;
  font-size: 0.87rem;
  font-weight: 500;
  color: var(--text);
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cel-item__right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 1px;
  flex-shrink: 0;
}
.cel-item__clan {
  font-size: 0.72rem;
  color: var(--text-dim);
}
.cel-item__contact {
  font-size: 0.72rem;
  color: var(--text-dim);
}

/* Small avatar override */
.avatar--sm {
  width: 30px;
  height: 30px;
  min-width: 30px;
  font-size: 0.72rem;
}

/* ── Ministry tab ── */
.chip--ministry { font-size: 0.72rem; font-weight: 600; }

/* Toolbar: view switch + empties toggle */
.min-toolbar { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.min-serving-stat {
  margin-left: auto;
  font-size: 0.82rem;
  color: var(--text-dim);
  background: var(--surface-2, rgba(127,127,127,0.1));
  border: 1px solid var(--border, rgba(127,127,127,0.25));
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}
.min-serving-stat strong { color: var(--text); font-weight: 700; }
.min-empties-toggle { display: inline-flex; align-items: center; gap: 6px; font-size: 0.84rem; color: var(--text-dim); cursor: pointer; }
.min-empties-toggle input[type="checkbox"] { accent-color: var(--gold, #c9a84c); width: 15px; height: 15px; cursor: pointer; }

/* Ministry member-row actions (themed remove button) */
.ministry-row__actions { align-items: center; gap: 6px; margin-left: 6px; }
.min-roster-grid.is-removing .ministry-row__actions { display: inline-flex; }
.min-rowbtn {
  background: var(--surface-2, rgba(127,127,127,0.1)); border: 1px solid var(--border, rgba(127,127,127,0.3));
  color: var(--text-dim); font: inherit; font-size: 0.72rem; font-weight: 600;
  padding: 2px 9px; border-radius: 999px; cursor: pointer; line-height: 1.3;
}
.min-rowbtn:hover { color: var(--text); border-color: var(--gold, #c9a84c); }
.min-rowbtn--x {
  width: 24px; height: 24px; padding: 0; border-radius: 50%; font-size: 0.95rem; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
}
.min-rowbtn--x:hover { color: var(--red, #e05252); border-color: var(--red, #e05252); background: rgba(224,82,82,0.1); }

/* Ministry leader line + inline picker */
.min-leadline { font-size: 0.8rem; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.min-leadline__lbl { color: var(--text-dim); }
.min-leadbtn { background: none; border: 1px solid var(--border, rgba(127,127,127,0.3)); color: var(--gold, #c9a84c);
  font: inherit; font-size: 0.72rem; font-weight: 600; padding: 1px 9px; border-radius: 999px; cursor: pointer; }
.min-leadbtn:hover { background: rgba(201,168,76,0.12); }
.min-leadsel { width: auto; min-width: 150px; }

/* Member-modal ministry dropdown rows */
.mf-min-rows { display: flex; flex-direction: column; gap: 8px; }
.mf-min-row { display: flex; align-items: center; gap: 8px; }
.mf-min-row .mf-min-sel { flex: 1; }
.mf-min-del { flex: none; padding: 4px 10px; }

/* Compact card grid (Grid view) */
.ministry-cardgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 900px) { .ministry-cardgrid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .ministry-cardgrid { grid-template-columns: 1fr; } }
.min-card { padding: 14px; }
.min-card__top {
  display: flex; align-items: center; gap: 8px; cursor: pointer;
  width: 100%; background: none; border: 0; font: inherit; color: inherit;
  text-align: left; padding: 4px; margin: -4px -4px 0; border-radius: 8px;
  transition: background .12s ease;
}
.min-card__top:hover { background: var(--surface-2, rgba(127,127,127,0.08)); }
.min-card__top:hover .min-card__caret { color: var(--gold, #c9a84c); }
.min-card__count { font-size: 0.9rem; font-weight: 700; color: var(--text); background: var(--surface-2, rgba(127,127,127,0.12)); border-radius: 999px; min-width: 24px; text-align: center; padding: 1px 8px; margin-left: auto; }
.min-card__caret {
  font-size: 0.85rem; color: var(--text-dim); flex: none;
  transition: transform .15s ease, color .15s ease;
}
.min-card.is-open .min-card__caret { transform: rotate(90deg); color: var(--gold, #c9a84c); }
.min-card__head-line { font-size: 0.76rem; color: var(--text); margin: 8px 0 10px; }
.min-card__none { font-size: 0.78rem; color: var(--text-dim); font-style: italic; }
.min-card__rows { display: flex; flex-direction: column; gap: 2px; margin-top: 10px; border-top: 1px solid var(--border-sub, rgba(127,127,127,0.15)); padding-top: 8px; }

/* Avatar stack */
.ministry-stack { display: flex; align-items: center; }
.avatar--xs { width: 26px; height: 26px; font-size: 0.66rem; flex: none; }
.avatar--stack { margin-left: -7px; border: 2px solid var(--surface, #fff); }
.avatar--stack:first-child { margin-left: 0; }
.avatar--more { margin-left: -7px; border: 2px solid var(--surface, #fff); background: var(--surface-2, #ccc); color: var(--text-dim); }

/* Table view */
.min-table { width: 100%; }
.min-table .min-trow { cursor: pointer; }
.min-table .min-trow:hover td { background: var(--surface-2, rgba(127,127,127,0.06)); }
.min-table .min-col-name { display: flex; align-items: center; gap: 8px; }
.min-trow__caret {
  font-size: 0.8rem; color: var(--text-dim); flex: none;
  transition: transform .15s ease, color .15s ease;
}
.min-table .min-trow:hover .min-trow__caret { color: var(--gold, #c9a84c); }
.min-table .min-trow.is-open .min-trow__caret { transform: rotate(90deg); color: var(--gold, #c9a84c); }
.min-table .min-trow-detail td { padding: 0 10px 10px; }

.ministry-card { padding: 16px; }
.ministry-card--not { border-style: dashed; }
.ministry-card__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 6px;
}
.ministry-card__count { font-size: 0.78rem; color: var(--text-dim); white-space: nowrap; }

/* Collapsible "Not serving yet" header */
.ministry-card__head--toggle {
  width: 100%;
  background: none;
  border: 0;
  font: inherit;
  cursor: pointer;
  color: var(--text);
  text-align: left;
  padding: 0;
  margin-bottom: 0;
}
.ministry-card--not.is-open .ministry-card__head--toggle { margin-bottom: 6px; }
.ministry-card__head--toggle:hover .chip { border-color: var(--gold, #c9a84c); }
.ministry-card__head--toggle .ministry-card__count { margin-left: auto; }
.ministry-card__caret {
  font-size: 0.8rem;
  color: var(--text-dim);
  transition: color .15s ease;
}
.ministry-card__head--toggle:hover .ministry-card__caret { color: var(--text); }
.ministry-card__leaders { font-size: 0.82rem; color: var(--text); margin-bottom: 10px; }
.ministry-card__lbl { color: var(--text-dim); }
.ministry-card__rows { display: flex; flex-direction: column; gap: 2px; }

.ministry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 8px;
  border-radius: 8px;
  cursor: pointer;
}
.ministry-row:hover { background: var(--surface-2, rgba(127,127,127,0.08)); }
.ministry-row__name { font-size: 0.88rem; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ministry-row__chips { display: flex; align-items: center; gap: 6px; white-space: nowrap; }
.ministry-row__warn { color: #d08a00; margin-left: 6px; }
.ministry-row__att { margin-left: 8px; flex: none; }
.ministry-row__att .att-pct-badge { min-width: 40px; font-size: 0.72rem; padding: 1px 7px; }

/* Per-row × is hidden until the roster is in remove-mode. */
.ministry-row__actions { display: none; }
.min-roster-grid.is-removing .ministry-row__actions { display: inline-flex; }
.min-roster-grid.is-removing .ministry-row { background: rgba(224,82,82,0.06); }
.min-remove-toggle.is-active { color: var(--red, #e05252); }

.ministry-warn {
  background: rgba(208,138,0,0.12);
  border: 1px solid rgba(208,138,0,0.4);
  color: #b87900;
  border-radius: var(--radius);
  padding: 10px 14px;
  font-size: 0.86rem;
  margin-bottom: 16px;
}

/* ── Ministry assignment (member modal) ── */
.ministry-assign { display: flex; flex-direction: column; gap: 4px; }
.ministry-assign__row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
}
.ministry-assign__row:hover { background: var(--surface-2, rgba(127,127,127,0.08)); }
.ministry-assign__check { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.ministry-assign__lead { display: flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--text-dim); cursor: pointer; white-space: nowrap; }
.ministry-assign__warn {
  margin-top: 10px;
  color: #b87900;
  font-size: 0.84rem;
  font-weight: 600;
}

/* ── Ministry catalog (Settings) ── */
.ministry-cat-list { display: flex; flex-direction: column; }
.ministry-cat-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.ministry-cat-row:last-child { border-bottom: none; }
.ministry-cat-row__count { font-size: 0.78rem; color: var(--text-dim); }
.ministry-cat-row__actions { margin-left: auto; display: flex; gap: 6px; }

/* ═══════════════════════ ACTIVITIES ═══════════════════════ */
.act-iso-note {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: color-mix(in srgb, var(--blue) 8%, transparent);
  border: 1px solid color-mix(in srgb, var(--blue) 30%, transparent);
  border-radius: 10px;
  padding: 12px 15px;
  margin-bottom: 18px;
  font-size: 0.84rem;
}
.act-iso-note__icon { flex: none; }
.act-iso-note strong { color: var(--blue); }

.act-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  flex-wrap: wrap;
}
.act-toolbar__search { flex: 1; min-width: 180px; }

.act-title { font-weight: 600; }
.act-title--link { color: var(--gold); cursor: pointer; }
.act-title--link:hover { text-decoration: underline; }
.act-title--link:focus { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }
.act-date-cell { color: var(--text-dim); font-size: 0.85rem; }
.act-att-count { font-weight: 700; color: var(--gold-light); }
.act-cat-tag { display: inline-block; }

.act-src-pill {
  font-size: 0.66rem;
  color: var(--text-dim);
  border: 1px solid var(--border-sub);
  border-radius: 6px;
  padding: 1px 6px;
  margin-left: 4px;
  vertical-align: middle;
}

.act-row-actions { display: inline-flex; gap: 6px; justify-content: flex-end; }
.act-m-card .act-row-actions { margin-top: 10px; display: flex; }

/* Manage toggle + collapsible 2-column grid */
.act-manage-toggle { margin-top: 18px; }
.act-manage-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 14px;
  align-items: start;
}
.act-manage-grid .act-qc-card,
.act-manage-grid .act-catmgr { margin-top: 0; }
@media (max-width: 860px) {
  .act-manage-grid { grid-template-columns: 1fr; }
}

/* Quick check-in card */
.act-qc-card { margin-top: 18px; padding: 18px 20px; }
.act-qc-card__head h3 { margin: 0 0 4px; font-size: 0.98rem; }
.act-qc-card__head p { margin: 0 0 13px; font-size: 0.82rem; color: var(--text-dim); }
.act-qc-card__row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act-qc-card__url {
  flex: 1;
  min-width: 240px;
  font-family: ui-monospace, Menlo, monospace;
  font-size: 0.8rem;
  color: var(--gold-light);
}

/* Category manager */
.act-catmgr { margin-top: 18px; padding: 18px 20px; }
.act-catmgr__head h3 { margin: 0 0 4px; font-size: 0.98rem; }
.act-catmgr__head p { margin: 0 0 14px; font-size: 0.82rem; color: var(--text-dim); }
.act-catmgr__list { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.act-catmgr__row {
  display: flex;
  gap: 10px;
  align-items: center;
  padding: 8px 10px;
  background: var(--surface2);
  border: 1px solid var(--border-sub);
  border-radius: 9px;
  flex-wrap: wrap;
}
.act-catmgr__swatch { width: 16px; height: 16px; border-radius: 4px; flex: none; }
.act-catmgr__name { flex: 1; min-width: 140px; }
.act-catmgr__count { font-size: 0.74rem; color: var(--text-dim); white-space: nowrap; }
.act-catmgr__add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.act-catmgr__add .input--sm { flex: 1; min-width: 160px; }

.act-cat-color {
  width: 38px;
  height: 34px;
  padding: 2px;
  border: 1px solid var(--border-sub);
  border-radius: 8px;
  background: var(--surface2);
  cursor: pointer;
  flex: none;
}

.act-mark__sub { font-size: 0.8rem; color: var(--text-dim); margin-top: 3px; }

/* KPI tile showing text (category name) instead of a number — scale down + wrap */
.dash-kpi__num--text {
  font-size: 1.15rem;
  line-height: 1.2;
  letter-spacing: 0;
}

/* ═══════════════════════ ROOMS ═══════════════════════ */
.rooms-seg { display: inline-flex; background: var(--surface2); border: 1px solid var(--border-sub); border-radius: 10px; padding: 3px; gap: 3px; }
.rooms-seg__btn { border: 0; background: none; color: var(--text-dim); font: inherit; font-size: 0.82rem; font-weight: 600; padding: 7px 14px; border-radius: 7px; cursor: pointer; }
.rooms-seg__btn.is-active { background: var(--gold-dim); color: var(--gold); }

/* Calendar views: explicit show/hide so they don't depend on attribute quirks */
.rooms-view { display: block; }
.rooms-view[hidden] { display: none; }

/* Calendar bar + room colour key */
.rooms-calbar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.rooms-calbar__spacer { flex: 1; }
#rooms-cal-room {
  appearance: none;
  -webkit-appearance: none;
  background: var(--surface2) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%239A9AA4'/%3E%3C/svg%3E") no-repeat right 10px center;
  border: 1px solid var(--border-sub);
  border-radius: 10px;
  padding: 7px 30px 7px 12px;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-dim);
  cursor: pointer;
  outline: none;
  height: 34px;
  line-height: 1;
}
#rooms-cal-room:focus { border-color: var(--gold); color: var(--text); }
.rooms-cal-label { font-weight: 600; color: var(--text); min-width: 150px; text-align: center; }
.rooms-roomkey { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 14px; font-size: 0.74rem; color: var(--text-dim); }
.rooms-roomkey__item { display: inline-flex; align-items: center; gap: 6px; }
.rooms-roomkey__item i { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }

.rooms-legend { display: flex; gap: 16px; margin-top: 12px; font-size: 0.76rem; color: var(--text-dim); flex-wrap: wrap; align-items: center; }
.rooms-legend span { display: inline-flex; align-items: center; gap: 6px; }
.rooms-swatch { width: 14px; height: 14px; border-radius: 4px; display: inline-block; }
.rooms-swatch--booked { background: var(--gold-dim-2); border: 1px solid var(--gold); }
.rooms-swatch--pending { background-image: repeating-linear-gradient(45deg, var(--surface3), var(--surface3) 4px, transparent 4px, transparent 8px); border: 1px solid var(--border-sub); }

/* Shared booking event pill (week view) */
.rooms-evt { display: flex; flex-direction: column; gap: 1px; border-radius: 7px; padding: 5px 8px; margin-bottom: 5px; cursor: pointer; transition: filter 0.12s; }
.rooms-evt:hover { filter: brightness(1.15); }
.rooms-evt--pend { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 5px, transparent 5px, transparent 10px); }
.rooms-evt--block { cursor: default; opacity: 0.92; background-image: repeating-linear-gradient(45deg, rgba(0,0,0,0.18), rgba(0,0,0,0.18) 5px, transparent 5px, transparent 10px); }
.rooms-month-chip--block { cursor: default; font-style: italic; }

/* Recurring reservation panel (admin New Reservation modal) */
.rooms-recur { margin-top: 12px; padding: 14px; border: 1px dashed var(--border); border-radius: 10px; background: var(--surface2); }
.rooms-recur__unit { font-size: 0.78rem; color: var(--text-dim); margin-left: 8px; }
.rooms-recur-result { margin-top: 12px; background: rgba(46,204,113,0.12); border: 1px solid rgba(46,204,113,0.4); color: #7fe0a8; border-radius: 9px; padding: 11px 14px; font-size: 0.84rem; }
.rooms-evt__top { font-weight: 700; font-size: 0.68rem; line-height: 1.15; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rooms-evt__time { font-size: 0.66rem; opacity: 0.95; }
.rooms-evt__by { font-size: 0.64rem; opacity: 0.8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* Week grid (Sunday-first) */
.rooms-week-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; }
.rooms-wk-day { background: var(--surface); border: 1px solid var(--border-sub); border-radius: 10px; padding: 10px; min-height: 120px; }
.rooms-wk-day.is-today { border-color: var(--gold); }
.rooms-wk-date { font-size: 0.74rem; color: var(--text-dim); margin-bottom: 8px; }
.rooms-wk-date b { display: block; color: var(--text); font-size: 1.05rem; }

/* Month grid */
.rooms-month-dow { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-bottom: 6px; }
.rooms-month-dowcell { text-align: center; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-dim); font-weight: 600; }
.rooms-month-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; }
.rooms-month-cell { background: var(--surface); border: 1px solid var(--border-sub); border-radius: 8px; padding: 6px; min-height: 96px; display: flex; flex-direction: column; gap: 3px; }
.rooms-month-cell.is-outside { opacity: 0.4; }
.rooms-month-cell.is-today { border-color: var(--gold); }
.rooms-month-daynum { font-size: 0.78rem; font-weight: 600; color: var(--text-dim); }
.rooms-month-cell.is-today .rooms-month-daynum { color: var(--gold); }
.rooms-month-chip { font-size: 0.64rem; border-radius: 5px; padding: 2px 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; cursor: pointer; color: var(--text); }
.rooms-month-chip--pend { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,0.05), rgba(255,255,255,0.05) 4px, transparent 4px, transparent 8px); }
.rooms-month-more { font-size: 0.62rem; color: var(--text-dim); padding-left: 2px; }

/* Requests */
.rooms-reqfilter { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.rooms-status { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; }
.rooms-status--pending { background: rgba(243,156,18,0.16); color: var(--orange); }
.rooms-status--approved { background: rgba(46,204,113,0.16); color: var(--green); }
.rooms-status--declined { background: rgba(231,76,60,0.16); color: var(--red); }
.rooms-flag { font-size: 0.66rem; color: var(--orange); border: 1px solid rgba(243,156,18,0.4); border-radius: 6px; padding: 1px 6px; margin-left: 6px; }

/* Manage grid */
.rooms-manage-toggle { margin-top: 22px; }
.rooms-manage-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; align-items: start; }
.rooms-manage-grid #rooms-link-card { grid-column: 1 / -1; }
@media (max-width: 860px) { .rooms-manage-grid { grid-template-columns: 1fr; } }
.card-pad { padding: 18px 20px; }
.rooms-card-title { margin: 0 0 4px; font-size: 0.98rem; }
.rooms-field-label { display: block; font-size: 0.74rem; color: var(--text-dim); font-weight: 600; margin: 14px 0 6px; }
.rooms-terms-edit { width: 100%; background: var(--surface2); border: 1px solid var(--border-sub); border-radius: 10px; color: var(--text); font: inherit; font-size: 0.84rem; line-height: 1.55; padding: 12px 14px; resize: vertical; }
.rooms-terms-edit:focus { outline: none; border-color: var(--gold); }
.rooms-check { display: flex; gap: 9px; align-items: center; margin-top: 12px; font-size: 0.84rem; cursor: pointer; }
.rooms-check input { width: 17px; height: 17px; accent-color: var(--gold); }
.rooms-inline-msg { margin-top: 12px; background: rgba(231,76,60,0.12); border: 1px solid rgba(231,76,60,0.4); color: #f3b0a8; border-radius: 9px; padding: 10px 13px; font-size: 0.83rem; }

.rooms-link-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.rooms-link-url { flex: 1; min-width: 240px; font-family: ui-monospace, Menlo, monospace; font-size: 0.78rem; color: var(--gold-light); }

/* QR */
.rooms-qr-wrap { display: flex; gap: 18px; align-items: center; margin-top: 16px; flex-wrap: wrap; }
.rooms-qr-frame { position: relative; width: 180px; height: 180px; background: #fff; border-radius: 12px; padding: 10px; flex: none; }
.rooms-qr-box { width: 100%; height: 100%; }
.rooms-qr-box canvas, .rooms-qr-box img { width: 100% !important; height: 100% !important; display: block; }
.rooms-qr-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%); background: #fff; border-radius: 8px; padding: 5px 9px; text-align: center; line-height: 1; box-shadow: 0 0 0 4px #fff; }
.rooms-qr-center span { display: block; font-weight: 800; font-size: 0.82rem; color: #0D1117; }
.rooms-qr-center small { display: block; font-weight: 600; font-size: 0.6rem; color: #A07830; margin-top: 1px; }