/* assets/css/styles.css - Optimized Version */

/* =========================================================
   TOKENS / THEME
   ========================================================= */
:root {
  color-scheme: light;

  /* Core */
  --bg: #f6f7fb;
  --bg-grad-1: #eef2ff;
  --bg-grad-2: #f1f5f9;
  --panel: rgba(251, 251, 253, 0.92);
  --card: rgba(255, 255, 255, 0.88);
  --card-2: rgba(15, 23, 42, 0.03);
  --surface: #ffffff;
  --surface-2: #f4f6fb;
  --bg-secondary: rgba(26, 177, 89, 0.08);
  --text: #0f172a;
  --muted: #64748b;
  --border: rgba(15, 23, 42, 0.1);
  --hover: rgba(15, 23, 42, 0.04);
  --input-bg: rgba(255, 255, 255, 0.92);
  --input-border: rgba(15, 23, 42, 0.12);
  --overlay: rgba(15, 23, 42, 0.35);

  /* Accents */
  --primary: #1ab159;
  --primary-2: #148f48;
  --on-accent: #ffffff;
  --danger: #ef4444;
  --warn: #d97706;
  --success: #166534;
  --success-bg: #f0fff4;
  --error: #b91c1c;
  --error-bg: #ffebee;

  /* Effects */
  --radius: 16px;
  --shadow: 0 8px 24px rgba(15, 23, 42, 0.06);
  --shadow-sm: 0 2px 10px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 10px 30px rgba(15, 23, 42, 0.18);
  --transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease, transform 0.25s ease, opacity 0.25s ease;}

/* ---- Dark theme tokens ---- */
/* Manual override wins in both directions; otherwise follow the OS setting. */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    color-scheme: dark;
    --bg: #0b1120;
    --bg-grad-1: #131c31;
    --bg-grad-2: #0e1626;
    --panel: rgba(17, 24, 39, 0.92);
    --card: rgba(23, 31, 48, 0.82);
    --card-2: rgba(255, 255, 255, 0.04);
    --surface: #161e2e;
    --surface-2: #1c2638;
    --bg-secondary: rgba(34, 197, 94, 0.16);
    --text: #e5e9f2;
    --muted: #97a3b6;
    --border: rgba(148, 163, 184, 0.18);
    --hover: rgba(255, 255, 255, 0.06);
    --input-bg: rgba(255, 255, 255, 0.04);
    --input-border: rgba(148, 163, 184, 0.24);
    --overlay: rgba(2, 6, 23, 0.62);
    --primary: #22c55e;
    --primary-2: #1ab159;
    --danger: #f87171;
    --warn: #fbbf24;
    --success: #4ade80;
    --success-bg: rgba(74, 222, 128, 0.12);
    --error: #fca5a5;
    --error-bg: rgba(248, 113, 113, 0.12);
    --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
    --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
    --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1120;
  --bg-grad-1: #131c31;
  --bg-grad-2: #0e1626;
  --panel: rgba(17, 24, 39, 0.92);
  --card: rgba(23, 31, 48, 0.82);
  --card-2: rgba(255, 255, 255, 0.04);
  --surface: #161e2e;
  --surface-2: #1c2638;
  --bg-secondary: rgba(34, 197, 94, 0.16);
  --text: #e5e9f2;
  --muted: #97a3b6;
  --border: rgba(148, 163, 184, 0.18);
  --hover: rgba(255, 255, 255, 0.06);
  --input-bg: rgba(255, 255, 255, 0.04);
  --input-border: rgba(148, 163, 184, 0.24);
  --overlay: rgba(2, 6, 23, 0.62);
  --primary: #22c55e;
  --primary-2: #1ab159;
  --danger: #f87171;
  --warn: #fbbf24;
  --success: #4ade80;
  --success-bg: rgba(74, 222, 128, 0.12);
  --error: #fca5a5;
  --error-bg: rgba(248, 113, 113, 0.12);
  --shadow: 0 8px 24px rgba(0, 0, 0, 0.45);
  --shadow-sm: 0 2px 10px rgba(0, 0, 0, 0.45);
  --shadow-lg: 0 12px 34px rgba(0, 0, 0, 0.55);
}

/* =========================================================
   BASE / RESET
   ========================================================= */
* { 
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  color: var(--text);
  background:
    radial-gradient(1200px 700px at 12% 8%, var(--bg-grad-1) 0%, transparent 60%),
    radial-gradient(1000px 600px at 85% 18%, var(--bg-grad-2) 0%, transparent 55%),
    var(--bg);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-tap-highlight-color: transparent;
  display: none; /* Hide body by default to prevent FOUT */
}

h1, h2, h3, h4, h5, h6 { 
  margin: 0 0 16px;
  line-height: 1.3;
}

.muted { 
  color: var(--muted); 
}

.text-muted { 
  color: var(--muted); 
  font-style: italic; 
}

/* =========================================================
   UTILITY CLASSES
   ========================================================= */
.card {
  background: var(--card);
  border-radius: var(--radius);
  padding: 12px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  margin-bottom: 12px;
  transition: var(--transition);
}

.field {
  display: grid;
  gap: 6px;
  margin-bottom: 15px;
}

/* Emisión de deuda: resultados del buscador de grupo (assets/js/emision_deuda.js) */
.ed-resultados {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: -8px 0 12px;
}
.ed-resultado {
  padding: 6px 10px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--surface-2);
}
.ed-resultado:hover {
  background: var(--hover);
}

.field span,
.field label {
  font-size: 0.9rem;
  color: var(--muted);
  display: block;
  margin-bottom: 5px;
  font-weight: 500;
}

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

/* Form elements */
input[type="email"],
input[type="password"],
input[type="text"],
input[type="search"],
select,
textarea {
  width: 100%;
  padding: 10px;
  border-radius: 14px;
  border: 1px solid var(--input-border);
  font-size: 1rem;
  background: var(--input-bg);
  color: var(--text);
  transition: var(--transition);
}

input:focus,
select:focus,
textarea:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}

::placeholder { color: var(--muted); opacity: 0.8; }

/* Native <select> popup: options need a solid background/colour or they render
   near-invisible over the translucent control background in dark mode. */
select option,
select optgroup {
  background-color: var(--surface);
  color: var(--text);
}
select option:checked {
  background: color-mix(in srgb, var(--primary) 28%, var(--surface));
}

/* =========================================================
   BUTTONS
   ========================================================= */
button {
  display: inline-block;
  padding: 9px 12px;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--primary-2) 45%, transparent);
  background: linear-gradient(180deg, var(--primary) 0%, var(--primary-2) 100%);
  color: var(--on-accent);
  font-size: 1rem;
  cursor: pointer;
  box-shadow: 0 6px 14px color-mix(in srgb, var(--primary) 30%, transparent);
  transition: var(--transition);
  font-weight: 500;
  line-height: 1.5;
}

button:hover { 
  opacity: 0.96;
  transform: translateY(-1px);
}

button:active {
  transform: translateY(0);
}

button:focus {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Button variants */
.btn-secondary,
button.secondary {
  background: var(--card-2);
  border: 1px solid var(--border);
  color: var(--text);
  box-shadow: none;
}

.danger-btn {
  border: 1px solid color-mix(in srgb, var(--danger) 45%, transparent);
  color: var(--error);
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  box-shadow: none;
}

.edit-btn {
  background: var(--primary);
  border: 1px solid var(--primary);
  color: var(--on-accent);
}

.delete-btn {
  background: var(--danger);
  border: 1px solid var(--danger);
  color: var(--on-accent);
}

.edit-btn:hover {
  background: var(--primary-2);
}

.delete-btn:hover {
  filter: brightness(0.92);
}

/* =========================================================
   STATUS & FEEDBACK
   ========================================================= */
.error {
  color: var(--error);
  font-size: 0.95rem;
  padding: 10px;
  margin: 10px 0;
  background: var(--error-bg);
  border-radius: 8px;
  border-left: 4px solid var(--error);
  display: none; /* Add this - hide by default */
}

.success {
  color: var(--success);
  font-size: 0.95rem;
  padding: 10px;
  margin: 10px 0;
  background: var(--success-bg);
  border-radius: 8px;
  border-left: 4px solid var(--success);
  display: none; /* Add this - hide by default */
}

/* Prevent whitespace-only content from showing empty banners */
.error:empty,
.success:empty {
  display: none;
}

/* Show error/success when they have content */
.error:not(:empty),
.success:not(:empty) {
  display: block; /* Show when not empty */
  animation: fadeIn 0.3s ease; /* Optional: add fade in animation */
}

/* =========================================================
   LAYOUT & STRUCTURE
   ========================================================= */
/* Login Page */
/* body has `display:none` by default (FOUT guard) — this re-shows it. */
.page-login { display: block; margin: 0; }

.login-shell {
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-columns: 1fr;
}

/* Brand panel — desktop only */
.login-aside { display: none; }

/* Form panel */
.login-main {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  background: var(--bg);
}
.login-panel { width: 100%; max-width: 380px; }

.login-brand {
  display: flex;
  align-items: center;
  gap: 9px;
  font-weight: 800;
  font-size: 1.2rem;
  color: var(--text);
}
.login-brand-sm { margin-bottom: 26px; }
.login-logo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 10px;
  background: var(--primary);
  color: #fff;
  font-size: 1.05rem;
}

.login-panel h1 { margin: 0 0 4px; font-size: 1.55rem; }
.login-sub { margin: 0 0 22px; font-size: 0.9rem; }

/* :not([hidden]) so the ID selector doesn't override the `hidden` attribute */
#login-form,
#step-church:not([hidden]) { display: flex; flex-direction: column; gap: 14px; }

.login-panel .field { gap: 5px; margin: 0; }
.login-panel .field span { font-size: 0.8rem; font-weight: 600; color: var(--muted); }
.login-panel .field input {
  padding: 11px 12px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card);
  font-size: 15px;
  width: 100%;
}
.login-panel .field input:focus {
  outline: none;
  border-color: var(--primary);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 22%, transparent);
}
.login-panel button[type="submit"] {
  width: 100%;
  padding: 12px;
  border-radius: 10px;
  font-size: 15px;
  font-weight: 600;
  margin-top: 2px;
}
.login-link {
  align-self: center;
  background: none;
  border: none;
  color: var(--primary);
  font-size: 13px;
  cursor: pointer;
  padding: 4px;
}
.login-link:hover { text-decoration: underline; }

.login-alert { font-size: 13px; border-radius: 8px; padding: 8px 10px; margin: 0; }
.login-alert:empty { display: none; }
.login-alert-err { color: #b91c1c; background: color-mix(in srgb, #ef4444 13%, transparent); }
.login-alert-ok { color: #047857; background: color-mix(in srgb, #10b981 13%, transparent); }

.church-list {
  list-style: none;
  padding: 0;
  margin: 4px 0 6px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.church-item {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 10px;
  text-align: left;
  padding: 13px 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: var(--card);
  /* Override the global button's white (var(--on-accent)) text — it's meant for
     the primary gradient background, not this plain card, and was invisible
     against it in light mode. */
  color: var(--text);
  box-shadow: none;
  cursor: pointer;
  transition: border-color 0.15s ease;
}
.church-item:hover { border-color: var(--primary); }
.church-item-name { flex: 1; font-weight: 600; font-size: 14px; }
.church-item-role {
  font-size: 11px;
  color: var(--muted);
  background: var(--surface-2);
  padding: 2px 9px;
  border-radius: 999px;
  text-transform: capitalize;
}
.church-item::after { content: "\203A"; color: var(--muted); font-size: 18px; line-height: 1; }

@media (min-width: 860px) {
  .login-shell { grid-template-columns: minmax(340px, 40%) 1fr; }
  .login-aside {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 48px;
    color: #fff;
    position: relative;
    overflow: hidden;
    background: linear-gradient(155deg,
      var(--primary),
      color-mix(in srgb, var(--primary) 55%, #0b1120));
  }
  .login-aside::after {
    content: "";
    position: absolute;
    width: 460px; height: 460px;
    border-radius: 50%;
    top: -160px; right: -160px;
    background: rgba(255, 255, 255, 0.08);
  }
  .login-aside-inner { position: relative; max-width: 320px; }
  .login-aside .login-brand { color: #fff; margin-bottom: 22px; }
  .login-aside .login-brand .brand__name { color: #fff; }
  .login-aside .login-brand .brand__tag { color: rgba(255, 255, 255, 0.88); }
  .login-aside-tag { font-size: 1.05rem; line-height: 1.55; opacity: 0.9; margin: 0; }
  .login-brand-sm { display: none; }
}

/* App Layout */
.app-layout {
  display: grid;
  grid-template-columns: 260px 1fr;
  min-height: calc(100vh - 52px);
}

/* Header */
.app-header {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  gap: 12px;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--panel);
  backdrop-filter: blur(10px);
}

.app-header-left,
.app-header-right {
  display: flex;
  align-items: center;
  gap: 10px;
}

.app-header-right {
  flex-wrap: wrap;
}

/* Brand wordmark — bold geometric sans, matching the Andrisani logo mark
   ("ANDRISANI" / "Servicios Sociales"). Inline (hairline divider) in the
   header; stacked (.brand--stack) in the sidebar. */
.brand {
  display: inline-flex;
  align-items: baseline;
  gap: 0.55rem;
  min-width: 0;
  color: var(--text);
  font-family: -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  line-height: 1.25;
  letter-spacing: 0;
}
.brand__name {
  font-style: normal;
  font-weight: 800;
  font-size: 1.5rem;
  letter-spacing: 0.01em;
  white-space: nowrap;
}
.brand__tag {
  font-style: normal;
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--muted);
  white-space: nowrap;
}
.brand__tag::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 1em;
  margin-right: 0.6rem;
  background: currentColor;
  opacity: 0.4;
  vertical-align: -0.1em;
}
.brand--stack {
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  color: var(--muted);
}
.brand--stack .brand__name { font-size: 1.4rem; color: var(--text); }
.brand--stack .brand__tag { font-size: 0.82rem; }
.brand--stack .brand__tag::before { display: none; }
.sidebar-brand { margin-top: 14px; }
@media (max-width: 900px) {
  .app-header .brand__tag { display: none; }
  .app-header .brand__name { font-size: 1.3rem; }
}

#sidebar-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 36px;
  padding: 8px 10px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--card-2);
  color: var(--text);
  transition: var(--transition);
}

#sidebar-toggle:hover {
  background: var(--hover);
}

/* Sidebar */
.app-sidebar {
  border-right: 1px solid var(--border);
  padding: 12px;
  background: var(--panel);
  display: flex;
  flex-direction: column;
  transition: var(--transition);
}

.app-main { 
  padding: 16px; 
}

.app-sidebar ul,
.sidebar-menu {
  list-style: none;
  padding: 10px;
  margin: 0;
  flex: 1;
}

.app-sidebar .sidebar-menu a {
  display: block;
  padding: 10px;
  border-radius: 10px;
  text-decoration: none;
  color: var(--text);
  border: 1px solid transparent;
  transition: var(--transition);
  margin-bottom: 4px;
}

.app-sidebar .sidebar-menu a:hover {
  background: color-mix(in srgb, var(--primary) 10%, transparent);
}

.app-sidebar .sidebar-menu a.active {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  font-weight: 700;
}

.sidebar-top,
.sidebar-bottom {
  padding: 12px;
  color: var(--muted);
}

.sidebar-top { 
  border-bottom: 1px solid var(--border); 
}

.sidebar-bottom { 
  border-top: 1px solid var(--border); 
  margin-top: auto; 
}

.sidebar-label span {
  display: block;
  font-size: 12px;
  margin-bottom: 6px;
}

.sidebar-label select {
  width: 100%;
  padding: 10px;
  border-radius: 12px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
}

/* Desktop collapse */
body.sidebar-collapsed .app-layout { 
  grid-template-columns: 76px 1fr; 
}

body.sidebar-collapsed .sidebar-top,
body.sidebar-collapsed .sidebar-bottom { 
  display: none; 
}

body.sidebar-collapsed .app-sidebar { 
  padding: 10px 8px; 
}

body.sidebar-collapsed .app-sidebar a { 
  text-align: center; 
  padding: 12px 8px; 
}

body.sidebar-collapsed .sidebar-menu a {
  font-size: 0;
  padding: 12px 10px;
}


/* Pills */
.pill {
  display: inline-flex;
  gap: 6px;
  align-items: center;
  padding: 8px 10px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  font-size: 0.85rem;
  margin-bottom: 10px;
}

.church-switcher {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.church-switcher select {
  padding: 6px 8px;
  border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--input-bg);
  color: var(--text);
}

/* =========================================================
   TABLES
   ========================================================= */
.table-wrap,
.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  margin-bottom: 12px;
}

.users-table,
.crud-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}

.users-table th,
.users-table td,
.crud-table th,
.crud-table td {
  border-bottom: 1px solid var(--border);
  padding: 12px 8px;
  text-align: left;
  vertical-align: top;
}

.users-table th,
.crud-table th {
  color: var(--muted);
  font-weight: 600;
  white-space: nowrap;
}

.row-actions { 
  white-space: nowrap; 
}

.row-actions button { 
  margin-right: 8px; 
  margin-bottom: 4px;
}

/* Toolbar */
.members-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.members-search input { 
  width: min(520px, 100%); 
}

.members-actions { 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
}

.member-care-layout {
  display: grid;
  grid-template-columns: minmax(260px, 320px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
}

.member-care-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.profile-grid-tight {
  margin-top: 16px;
}

.member-care-sidebar {
  position: sticky;
  top: 72px;
}

.member-care-stack {
  display: grid;
  gap: 10px;
}

.member-list-item {
  width: 100%;
  text-align: left;
  border: 1px solid var(--border);
  background: var(--card);
  color: var(--text);
  box-shadow: none;
}

.member-list-item.active {
  border-color: color-mix(in srgb, var(--primary) 45%, transparent);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}

.member-list-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-wrap: wrap;
}

.member-care-pane h3,
.member-care-pane h2 {
  margin-bottom: 12px;
}

.member-profile-hero {
  display: grid;
  gap: 16px;
}

.member-profile-meta,
.member-composer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  align-items: center;
}

.member-profile-kpis {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}

.profile-mini-card {
  text-align: center;
  padding: 14px 10px;
}

.profile-mini-card strong {
  display: block;
  font-size: 1.35rem;
  margin-bottom: 4px;
}

.member-inline-list {
  margin: 8px 0 0;
  padding-left: 18px;
}

.member-inline-list li {
  margin-bottom: 6px;
}

.member-composer {
  display: grid;
  gap: 10px;
  margin-bottom: 14px;
}

.member-composer-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}

.timeline-list {
  display: grid;
  gap: 10px;
}

.timeline-item {
  padding: 14px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
}

.timeline-item p {
  margin: 8px 0;
}

.team-access-pill {
  margin-bottom: 0;
}

.status-pending {
  background: color-mix(in srgb, var(--warn) 16%, transparent);
  border-color: color-mix(in srgb, var(--warn) 32%, transparent);
}

.status-active,
.status-done,
.status-active_user {
  background: color-mix(in srgb, var(--success) 16%, transparent);
  border-color: color-mix(in srgb, var(--success) 30%, transparent);
}

.status-revoked,
.status-expired,
.status-cancelled,
.status-inactive {
  background: color-mix(in srgb, var(--danger) 14%, transparent);
  border-color: color-mix(in srgb, var(--danger) 28%, transparent);
}

.status-high,
.status-in_progress,
.status-invited {
  background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--primary) 28%, transparent);
}

/* =========================================================
   MODAL
   ========================================================= */
.modal { 
  position: fixed; 
  inset: 0; 
  z-index: 1000; 
}

.modal-backdrop {
  position: fixed;
  inset: 0;
  background: var(--overlay);
  backdrop-filter: blur(2px);
  z-index: 1000;
}

.modal-card {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 1001;
  width: min(500px, calc(100% - 24px));
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  background: var(--surface);
  border-radius: 18px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-lg);
  color: var(--text);
}

.modal-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: var(--surface-2);
  position: sticky;
  top: 0;
  z-index: 1;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
}

.modal-close:hover {
  background: var(--hover);
  color: var(--text);
}

.modal-body { 
  padding: 20px; 
}

.modal-footer {
  padding: 20px;
  border-top: 1px solid var(--border);
  display: flex;
  justify-content: flex-end;
  gap: 10px;
  position: sticky;
  bottom: 0;
  background: var(--surface);
}

/* =========================================================
   DASHBOARD
   ========================================================= */
.dash-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}
.dash-head h1 { margin: 0 0 2px; font-size: 1.4rem; }
.dash-head p { margin: 0; }
.dash-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.dash-actions button { padding: 7px 12px; font-size: 13px; }

.dash-kpis {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin-bottom: 18px;
}
.dash-kpi {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 12px 14px;
  container-type: inline-size;
}
.dash-kpi-ico { font-size: 1.1rem; line-height: 1; }
.dash-kpi-val {
  /* Shrinks with the card's own width (not the viewport) so a long value like
     "ARS 154,000.00" scales down to fit instead of wrapping mid-number, which
     reads as broken digits. Never wraps; an extreme outlier ellipsizes instead. */
  font-size: clamp(0.95rem, 12cqi, 1.6rem);
  font-weight: 800;
  line-height: 1.15;
  margin-top: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-kpi-lbl { font-size: 12px; color: var(--muted); }
.dash-kpi-sub { font-size: 11px; color: var(--muted); margin-top: 2px; min-height: 13px; }
.dash-kpi-warn { border-color: color-mix(in srgb, #f59e0b 55%, var(--border)); }
.dash-kpi-warn .dash-kpi-val { color: #f59e0b; }

/* CSS multi-column, not a 2-column grid with cards pre-assigned to a side —
   see the comment above the card list in assets/js/dashboard.js for why: a
   fixed left/right split leaves a visible gap whenever one side ends up with
   fewer/shorter cards than the other (different roles see different cards,
   and a card can remove itself when it has no data), where multi-column
   instead balances actual rendered height across columns and re-balances
   live on any later change. `columns: 2 340px` picks up to 2 columns but
   never narrower than 340px each, so it collapses to a single column on its
   own below ~700px total width — no separate breakpoint needed for that. */
.dash-main { columns: 2 340px; column-gap: 16px; }

.dash-card {
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--card);
  padding: 14px 16px;
  margin-bottom: 16px;
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}
.dash-card h3 { margin: 0 0 10px; font-size: 0.95rem; }
.dash-card-body { min-width: 0; }
.dash-empty { color: var(--muted); font-size: 13px; padding: 14px 2px; }

.dash-chart { position: relative; height: 200px; width: 100%; }
.dash-charts-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
@media (max-width: 520px) { .dash-charts-2 { grid-template-columns: 1fr; } }

/* lists (rotas, birthdays) */
.dash-list { list-style: none; margin: 0; padding: 0; }
.dash-list li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border);
}
.dash-list li:last-child { border-bottom: none; }
.dash-list li[data-view] { cursor: pointer; }
.dash-list-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-list-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-list-meta { font-size: 11px; color: var(--muted); }
.dash-avatar {
  width: 28px; height: 28px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 10px; font-weight: 700; color: var(--primary);
  background: color-mix(in srgb, var(--primary) 15%, transparent);
}
.dash-pill { font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.dash-pill-warn { color: #f59e0b; background: color-mix(in srgb, #f59e0b 15%, transparent); }

/* agenda */
.dash-agenda { list-style: none; margin: 0; padding: 0; }
.dash-agenda li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--border); cursor: pointer;
}
.dash-agenda li:last-child { border-bottom: none; }
.dash-datechip {
  flex: none; font-size: 11px; font-weight: 700; color: var(--text);
  background: var(--surface-2); border-radius: 8px; padding: 4px 8px;
  min-width: 78px; text-align: center;
}
.dash-agenda-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.dash-agenda-title { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash-agenda-meta { font-size: 11px; color: var(--muted); }

/* visitor funnel */
.dash-funnel { display: flex; flex-direction: column; gap: 6px; }
.dash-funnel-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.dash-funnel-lbl { flex: 0 0 84px; font-size: 12px; color: var(--muted); }
.dash-funnel-bar { flex: 1; height: 10px; background: var(--surface-2); border-radius: 999px; overflow: hidden; }
.dash-funnel-bar > span { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.dash-funnel-n { flex: 0 0 28px; text-align: right; font-size: 12px; font-weight: 600; }
.dash-funnel-foot { margin: 10px 0 0; font-size: 12px; }

/* Finance dashboard (assets/js/finance_dashboard.js + core/components.js) predates
   the rebuild above and still emits these class names — kept so it isn't broken. */
.dash-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.dashboard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
}
.dash-card-wide { grid-column: span 2; }
@media (max-width: 900px) { .dash-kpi-row { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 700px) {
  .dashboard-grid { grid-template-columns: 1fr; }
  .dash-card-wide { grid-column: span 1; }
}

/* =========================================================
   PERMISSIONS
   ========================================================= */
.perm-table-wrap { 
  overflow-x: auto; 
}

.perm-table { 
  width: 100%; 
  border-collapse: collapse; 
}

.perm-table th, 
.perm-table td {
  padding: 12px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: top;
}

.perm-sub { 
  font-size: 0.8rem; 
  opacity: 0.7; 
  margin-top: 4px; 
}

.perm-group { 
  display: flex; 
  gap: 10px; 
  flex-wrap: wrap; 
}

.perm-check { 
  display: inline-flex; 
  align-items: center; 
  gap: 4px; 
  font-size: 0.9rem; 
}

.perm-actions { 
  display: flex; 
  gap: 8px; 
  flex-wrap: wrap; 
  margin-top: 8px; 
}

/* =========================================================
   COLUMN TOGGLE
   ========================================================= */
.column-toggle-container {
  position: relative;
  display: inline-block;
}

.column-toggle-btn {
  background: var(--card-2);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 14px;
  cursor: pointer;
  color: var(--muted);
  transition: var(--transition);
}

.column-toggle-btn:hover {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: var(--primary);
  color: var(--primary);
}

.column-selector {
  position: fixed;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 15px;
  z-index: 1050;
  box-shadow: var(--shadow-lg);
  max-height: 400px;
  overflow-y: auto;
  min-width: 200px;
  color: var(--text);
}

.column-selector label {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 0;
  cursor: pointer;
  font-size: 14px;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}

.column-selector label:hover {
  background: var(--hover);
}

.column-selector label:last-child { 
  border-bottom: none; 
}

.column-selector input[type="checkbox"] {
  width: 16px;
  height: 16px;
  cursor: pointer;
}

.column-selector button {
  font-size: 12px;
  padding: 6px 12px;
  margin-right: 8px;
  background: var(--primary);
  color: var(--on-accent);
  border: none;
  border-radius: 6px;
  cursor: pointer;
}

.column-selector button:hover { 
  opacity: 0.9; 
}

/* =========================================================
   BUILDER STYLES
   ========================================================= */
.builder-container {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 24px;
  height: calc(100vh - 120px);
}

/* Builder-only sidebar to avoid colliding with app layout */
.builder-container .sidebar {
  background: linear-gradient(180deg, #2d3748 0%, #1a202c 100%);
  color: white;
  padding: 24px;
  border-radius: 12px;
  overflow-y: auto;
}

.main-content {
  background: var(--surface);
  color: var(--text);
  border-radius: 12px;
  box-shadow: var(--shadow-sm);
  padding: 32px;
  overflow-y: auto;
}

.collection-item {
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
  cursor: pointer;
  transition: var(--transition);
}

.collection-item:hover {
  background: rgba(255, 255, 255, 0.15);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.collection-item.active {
  background: #4299e1;
  border-color: #4299e1;
}

/* =========================================================
   ANIMATIONS
   ========================================================= */
@keyframes slideIn {
  from { 
    transform: translateX(100%); 
    opacity: 0; 
  }
  to { 
    transform: translateX(0); 
    opacity: 1; 
  }
}

@keyframes slideOut {
  from { 
    transform: translateX(0); 
    opacity: 1; 
  }
  to { 
    transform: translateX(100%); 
    opacity: 0; 
  }
}

@keyframes fadeIn {
  from { 
    opacity: 0; 
  }
  to { 
    opacity: 1; 
  }
}

@keyframes loading {
  0% { 
    background-position: 200% 0; 
  }
  100% { 
    background-position: -200% 0; 
  }
}

/* =========================================================
   RESPONSIVE DESIGN
   ========================================================= */

/* MOBILE: Up to 900px */
@media (max-width: 900px) {
  /* Layout */
  .app-layout { 
    grid-template-columns: 1fr; 
  }

  .app-sidebar {
    position: fixed;
    top: 52px;
    left: 0;
    bottom: 0;
    width: min(280px, 86vw);
    transform: translateX(-100%);
    transition: transform 0.3s ease;
    z-index: 60;
    box-shadow: var(--shadow-lg);
  }

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

  .drawer-backdrop {
    position: fixed;
    inset: 52px 0 0 0;
    background: var(--overlay);
    z-index: 55;
  }

  /* Tables to Cards */
  .table-wrap,
  .table-container {
    overflow-x: visible;
  }

  .users-table,
  .crud-table {
    display: block;
    width: 100%;
  }

  .users-table thead,
  .crud-table thead {
    display: none;
  }

  .users-table tbody,
  .crud-table tbody,
  .users-table tr,
  .crud-table tr,
  .users-table td,
  .crud-table td {
    display: block;
    width: 100%;
    box-sizing: border-box;
  }

  .users-table tr,
  .crud-table tr {
    border: 1px solid var(--border);
    border-radius: 14px;
    padding: 16px;
    margin-bottom: 12px;
    background: var(--card);
    box-shadow: var(--shadow-sm);
    transition: var(--transition);
  }

  .users-table td,
  .crud-table td {
    border: none !important;
    padding: 12px 0 !important;
    text-align: left !important;
  }

  /* Columns flagged hideOnMobile in the module config: kept on desktop,
     dropped from the stacked mobile card. */
  .users-table td.col-collapse,
  .crud-table td.col-collapse {
    display: none !important;
  }

  /* Data labels for mobile cards */
  .users-table td[data-label]::before,
  .crud-table td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 12px;
    font-weight: 600;
    color: var(--muted);
    margin-bottom: 6px;
    opacity: 0.8;
  }

  /* Actions column */
  .users-table td.row-actions,
  .crud-table td.row-actions {
    padding-top: 16px !important;
    border-top: 1px solid var(--border) !important;
    margin-top: 12px;
    white-space: normal;
  }

  .users-table td.row-actions::before,
  .crud-table td.row-actions::before {
    content: attr(data-label);
    font-size: 13px !important;
    margin-bottom: 12px !important;
    display: block;
  }

  .users-table td.row-actions button,
  .crud-table td.row-actions button {
    margin: 0 8px 8px 0 !important;
    padding: 10px 16px !important;
    font-size: 14px !important;
    min-width: 100px;
    display: inline-block;
  }

  /* Toolbar adjustments */
  .members-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
  }

  .members-search,
  .members-actions {
    width: 100%;
  }

  .members-search input {
    width: 100% !important;
  }

  /* Hide column toggle on mobile */
  .column-toggle-container,
  .column-toggle-btn {
    display: none !important;
  }

  /* Modal adjustments */
  .modal-card {
    width: calc(100% - 20px);
    max-width: none;
    max-height: 85vh;
  }

  .modal-body { 
    padding: 15px; 
  }

  .modal-footer {
    flex-direction: column;
    gap: 10px;
  }

  .modal-footer button { 
    width: 100%; 
  }

  /* Builder responsiveness */
  .builder-container { 
    grid-template-columns: 1fr; 
    height: auto;
  }
  
  .builder-container .sidebar { 
    max-height: 400px; 
  }
  
  .main-content { 
    padding: 20px; 
  }
  
  .form-grid { 
    grid-template-columns: 1fr; 
  }
  
  .tab-buttons { 
    flex-wrap: wrap; 
  }
  
  .tab-button { 
    flex: none; 
    min-width: 120px; 
  }

  .member-care-layout,
  .member-care-grid,
  .member-profile-kpis,
  .member-composer-grid {
    grid-template-columns: 1fr;
  }

  .member-care-sidebar {
    position: static;
  }

  /* Tighter rhythm on small screens */
  .app-main h1 {
    font-size: 1.4rem;
    margin-bottom: 10px;
  }

  .card {
    padding: 10px;
    margin-bottom: 10px;
  }

  .users-table tr,
  .crud-table tr {
    padding: 12px;
    margin-bottom: 10px;
  }

  .users-table td,
  .crud-table td {
    padding: 8px 0 !important;
  }

  .users-table td[data-label]::before,
  .crud-table td[data-label]::before {
    margin-bottom: 3px;
  }
}

/* DESKTOP: 901px and above */
@media (min-width: 901px) {
  .users-table tbody tr,
  .crud-table tbody tr {
    transition: background-color 0.2s ease;
  }
  
  .users-table tbody tr:hover,
  .crud-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary) 7%, transparent);
  }

  .users-table tbody tr:hover td,
  .crud-table tbody tr:hover td {
    border-color: color-mix(in srgb, var(--primary) 20%, transparent);
  }
}

/* Tablet: 600px to 900px */
@media (min-width: 600px) and (max-width: 900px) {
  .members-toolbar {
    flex-direction: row;
    align-items: center;
  }
}

/* Print styles */
@media print {
  .app-header,
  .app-sidebar,
  .members-toolbar,
  .row-actions,
  .column-toggle-container {
    display: none !important;
  }
  
  .app-main {
    padding: 0 !important;
  }
  
  .app-layout {
    grid-template-columns: 1fr !important;
  }
  
  .users-table,
  .crud-table {
    border-collapse: collapse !important;
  }
  
  .users-table th,
  .users-table td,
  .crud-table th,
  .crud-table td {
    border: 1px solid #000 !important;
    padding: 8px !important;
  }
  
  .users-table tr,
  .crud-table tr {
    page-break-inside: avoid;
  }

  /* Generic "hide this in print" utility, and the giving statement layout. */
  .no-print { display: none !important; }
  .give-statement {
    box-shadow: none !important;
    border: none !important;
    padding: 0 !important;
  }

  /* Kids Check-in tag: unlike the giving statement (which is the whole visible
     view when printed), this shares the screen with an active search box and
     list, so printing needs to hide everything else rather than just the app
     chrome. Only kicks in while a tag panel actually exists on the page. */
  body:has(.checkin-tag-print) * { visibility: hidden !important; }
  .checkin-tag-print, .checkin-tag-print * { visibility: visible !important; }
  .checkin-tag-print { position: absolute; top: 0; left: 0; width: 100%; }
}

/* =========================================================
   ACCESSIBILITY & ENHANCEMENTS
   ========================================================= */
/* Skeleton loading */
.skeleton {
  background: linear-gradient(90deg, var(--card-2) 25%, var(--hover) 50%, var(--card-2) 75%);
  background-size: 200% 100%;
  animation: loading 1.5s infinite;
  border-radius: 4px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  html {
    scroll-behavior: auto;
  }
}

/* High contrast mode */
@media (prefers-contrast: high) {
  :root {
    --border: color-mix(in srgb, var(--text) 45%, transparent);
    --input-border: color-mix(in srgb, var(--text) 55%, transparent);
  }
  
  button,
  input,
  select,
  textarea {
    border-width: 2px;
  }
}




@media (max-width: 900px) {
  button,
  input,
  select,
  textarea {
    min-height: 44px;
  }
}



/* Collapse: keep icons, hide text, don’t replace with dots */
body.sidebar-collapsed .sidebar-menu a {
  font-size: 0;            /* hides text nodes */
  padding: 12px 10px;
}

body.sidebar-collapsed .sidebar-menu a * {
  font-size: initial;      /* if you ever wrap icon in an element */
}

body.sidebar-collapsed .sidebar-menu a::before {
  content: attr(data-icon);
  font-size: 18px;
  display: block;
  text-align: center;
}


/* Use content-visibility for big main sections 
If some modules render huge tables, this can help:  */
.app-main section {
  content-visibility: auto;
  contain-intrinsic-size: 800px;
}



/* Desktop collapse: hide labels/dividers, keep icons */
body.sidebar-collapsed .sidebar-menu .muted,
body.sidebar-collapsed .sidebar-menu hr,
body.sidebar-collapsed .sidebar-menu [data-nav="cat"],
body.sidebar-collapsed .sidebar-menu [data-nav="divider"] {
  display: none !important;
}

body.sidebar-collapsed .app-layout {
  grid-template-columns: 76px 1fr;
}

body.sidebar-collapsed .app-sidebar {
  padding: 10px 8px;
}

body.sidebar-collapsed .sidebar-menu a {
  padding: 12px 8px;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
}

/* Keep just the icon visible (emoji at start of link text) */
body.sidebar-collapsed .sidebar-menu a .nav-text {
  display: none;
}


.nav-icon { display:inline-block; width: 24px; }








/* Header: make right area responsive + prevent overflow */
.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.app-header-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0; /* allow truncation */
}

.app-header-right {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  min-width: 0;
}

/* Church selector in header */
.header-church-area {
  min-width: 0;
}

.header-church-label {
  display: grid;
  gap: 6px;
  min-width: 0;
}

.header-church-label span {
  font-size: 12px;
  color: var(--muted);
}

.header-church-label select {
  width: min(360px, 42vw);  /* desktop */
  max-width: 100%;
  padding: 10px 12px;
  border-radius: 12px;
}

/* Role pill should not force wrap issues */
.header-role {
  white-space: nowrap;
}

/* MOBILE: stack controls nicely */
@media (max-width: 900px) {
  .app-header {
    align-items: flex-start;
  }

  .app-header-right {
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 8px;
  }

  .header-church-label select {
    width: min(70vw, 340px); /* mobile: wider */
  }
}



@media (max-width: 900px) {
  .header-church-label { gap: 4px; }
  .header-church-label span { line-height: 1; }
}


@media (min-width: 901px) {
  .header-church-label {
    display: flex;
    align-items: center;
    gap: 8px;
  }
  .header-church-label span {
    margin: 0;
  }
}







@media (max-width: 900px) {
  /* 1) Hide role pill on mobile */
  #header-role-pill,
  .header-role {
    display: none !important;
  }

  /* 2) Header becomes a 2-row grid */
  .app-header {
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-rows: auto auto;
    grid-template-areas:
      "toggle brand logout"
      "church church church";
    align-items: center;
    gap: 10px;
  }

  /* Left area: only toggle + brand */
  .app-header-left {
    grid-area: toggle / toggle / toggle / brand; /* harmless if not supported */
    display: contents; /* let children place in grid */
  }

  /* Place hamburger + brand explicitly */
  #sidebar-toggle {
    grid-area: toggle;
    justify-self: start;
  }

  /* Scoped to the header — this is a grid-placement + truncation rule for the
     mobile app-header layout. Unscoped `.brand` here also caught the login
     page's and the sidebar footer's brand mark, clipping their text. */
  .app-header .brand {
    grid-area: brand;
    justify-self: start;
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Right: logout sits top-right */
  .app-header-right {
    display: contents; /* let children place in grid */
  }

  #logout-btn {
    grid-area: logout;
    justify-self: end;
  }

  /* Church selector becomes full-width on second row */
  #header-church-area,
  .header-church-area {
    grid-area: church;
    width: 100%;
  }

  .header-church-label {
    display: grid;
    gap: 6px;
    width: 100%;
  }

  .header-church-label select {
    width: 100%;
    max-width: 100%;
  }
}






.app-sidebar {
  display: flex;
  flex-direction: column;
  min-height: 100%;
}

.sidebar-scroll {
  flex: 1;
  overflow: auto;
  padding: 10px;
}

.sidebar-footer {
  padding: 12px;
  border-top: 1px solid var(--border);
}

.sidebar-logout {
  width: 100%;
}





@media (max-width: 900px) {
  .app-layout {
    grid-template-columns: 1fr;
  }

  .app-sidebar {
    position: fixed;
    top: 52px;      /* same as your header height */
    left: 0;
    bottom: 0;
    width: min(320px, 88vw);
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 60;
    box-shadow: var(--shadow-lg);
    background: var(--panel);
  }

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

  .drawer-backdrop {
    position: fixed;
    inset: 52px 0 0 0;
    background: var(--overlay);
    z-index: 55;
  }
}



@media (max-width: 900px) {
  #header-role-pill { display: none !important; }

  .app-header-right {
    display: flex;
    align-items: center;
    gap: 10px;
  }

  /* Church selector: optional + compact */
  .header-church-label span { display: none; }

  .header-church-label select {
    width: min(62vw, 280px);
    padding: 8px 10px;
    border-radius: 12px;
  }
}





/* ================================
   DESKTOP: Collapsed sidebar
   ================================ */
body.sidebar-collapsed .app-layout {
  grid-template-columns: 76px 1fr;
}

/* Hide EVERYTHING below the menu when collapsed */
body.sidebar-collapsed .sidebar-footer,
body.sidebar-collapsed .sidebar-bottom,
body.sidebar-collapsed .sidebar-meta,
body.sidebar-collapsed .sidebar-logout {
  display: none !important;
}

/* Hide category headers + dividers when collapsed */
body.sidebar-collapsed .sidebar-menu [data-nav="cat"],
body.sidebar-collapsed .sidebar-menu [data-nav="divider"],
body.sidebar-collapsed .sidebar-menu hr,
body.sidebar-collapsed .sidebar-menu .muted {
  display: none !important;
}

/* Make menu links icons-only */
body.sidebar-collapsed .app-sidebar {
  padding: 10px 8px;
}

body.sidebar-collapsed .sidebar-scroll {
  padding: 6px 0;
}

body.sidebar-collapsed .sidebar-menu a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 8px;
  text-align: center;
}

/* If you render <span class="nav-text">, hide it */
body.sidebar-collapsed .sidebar-menu a .nav-text {
  display: none !important;
}

/* If you render <span class="nav-icon">, keep it visible */
body.sidebar-collapsed .sidebar-menu a .nav-icon {
  display: inline-block !important;
  width: auto;
}



.searchable-select-wrapper {
  position: relative;
}

.select-search-input {
  width: 100%;
  padding: 8px 12px;
  margin-bottom: 5px;
  border: 1px solid var(--input-border);
  background: var(--input-bg);
  color: var(--text);
  border-radius: 4px;
  box-sizing: border-box;
}

.custom-select-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  max-height: 200px;
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 4px;
  z-index: 1000;
  box-shadow: var(--shadow-lg);
}

.select-option:hover {
  background-color: var(--hover);
}

.select-option.selected {
  background-color: color-mix(in srgb, var(--primary) 16%, transparent);
}

/* Calendar controls and details share the desktop/mobile layout. */
.calendar-controls { display: flex; flex-direction: column; gap: 4px; }
.calendar-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.calendar-group:first-child { border-top: none; padding-top: 0; }
.calendar-group-label {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.calendar-controls .calendar-filters,
.calendar-controls .calendar-settings-row,
.calendar-controls .calendar-management {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: end;
}
.calendar-controls .calendar-settings-row label { display: grid; gap: 6px; min-width: 180px; }
.calendar-controls .calendar-settings [hidden],
.calendar-details[hidden] { display: none; }
.calendar-controls select, .calendar-controls input[list] { max-width: 100%; min-height: 38px; }
.calendar-controls .calendar-group > select { max-width: 320px; }
.calendar-controls .calendar-settings p { margin: 0; }
.calendar-frame { min-width: 0; overflow: hidden; }
.calendar-details { scroll-margin-top: 80px; overflow-wrap: anywhere; }
.calendar-details button { margin: 6px 8px 0 0; }
.calendar-notes, section[data-view="calendar"] [id$="-warnings"] { white-space: pre-wrap; }

/* Collapsible "More options" (timezone / add / manage). Open on desktop, folded
   on phones via JS so the agenda is not buried under settings. */
.calendar-more { border-top: 1px solid var(--border); }
.calendar-more-summary {
  cursor: pointer;
  list-style: none;
  padding: 12px 0;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.calendar-more-summary::-webkit-details-marker { display: none; }
.calendar-more-summary::before {
  content: "\25B8";
  font-size: 10px;
  transition: transform 0.15s ease;
}
.calendar-more[open] .calendar-more-summary::before { transform: rotate(90deg); }
.calendar-more-body { display: flex; flex-direction: column; gap: 4px; }
.calendar-more-body .calendar-group:first-child { border-top: none; padding-top: 0; }

@media (max-width: 900px) {
  .calendar-controls .calendar-settings-row { align-items: stretch; }
  .calendar-controls .calendar-settings-row label { min-width: 0; width: 100%; }
  .calendar-controls .calendar-group > select { max-width: none; }
  .calendar-controls .calendar-management { gap: 8px; }
  .calendar-controls .calendar-management button { flex: 1 1 45%; }
  .calendar-group { padding: 10px 0; gap: 6px; }
  .calendar-more-summary { padding: 10px 0; }
  .calendar-frame { padding: 8px; }
  .calendar-frame .fc-header-toolbar { flex-wrap: wrap; gap: 10px; }
  .calendar-frame .fc-toolbar-title { font-size: 1.2rem; }
  .calendar-frame .fc-list-event-title { overflow-wrap: anywhere; }
}

.calendar-controls .calendar-filters label { display: inline-flex; gap: 6px; align-items: center; }

/* Rota focus: colour-code understaffed and clashing duties in every view. */
.calendar-rota-summary:empty, .calendar-rota-legend:empty { display: none; }
.calendar-rota-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 4px; }
.rota-legend { display: inline-flex; align-items: center; gap: 6px; }
.rota-legend::before { content: ""; width: 12px; height: 12px; border-radius: 3px; border-left: 4px solid currentColor; }
.rota-legend.rota-understaffed { color: var(--warn); }
.rota-legend.rota-conflict { color: var(--danger); }

.fc-event.rota-understaffed, .fc .fc-list-event.rota-understaffed td { border-left: 4px solid var(--warn); }
.fc-event.rota-conflict, .fc .fc-list-event.rota-conflict td { border-left: 4px solid var(--danger); }
.fc-daygrid-event.rota-understaffed, .fc-timegrid-event.rota-understaffed { background: color-mix(in srgb, var(--warn) 20%, transparent); }
.fc-daygrid-event.rota-conflict, .fc-timegrid-event.rota-conflict { background: color-mix(in srgb, var(--danger) 22%, transparent); }

.calendar-conflict { border-left: 4px solid var(--danger); padding-left: 10px; margin: 8px 0; }
.calendar-conflict p { margin: 4px 0; }
.calendar-roles { border-left: 4px solid var(--warn); padding-left: 10px; margin: 8px 0; }
.calendar-roles p { margin: 4px 0; }

/* Visitors module */
.vis-funnel { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.vis-stat { flex: 1 1 130px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.vis-stat .n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.vis-stat .l { font-size: 12px; color: var(--muted); display: flex; align-items: center; gap: 6px; margin-top: 2px; }
.vis-dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted); flex: none; }
.vis-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 12px; border: 1px solid var(--border); white-space: nowrap; }
.vis-detail-grid { display: grid; grid-template-columns: minmax(220px, 300px) 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .vis-detail-grid { grid-template-columns: 1fr; } }
.vis-timeline { list-style: none; padding: 0; margin: 8px 0 0; }
.vis-timeline li { border-left: 2px solid var(--border); padding: 6px 0 10px 14px; margin-left: 4px; }
.vis-timeline .t { font-size: 12px; color: var(--muted); }
.vis-form-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 16px; }
.vis-form-grid .wide { grid-column: 1 / -1; }
@media (max-width: 720px) { .vis-form-grid { grid-template-columns: 1fr; } }

/* Small groups / cells */
.grp-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.grp-head h1 { margin: 0 0 2px; }
.grp-head p { margin: 0; }
.grp-detail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; }
.grp-detail-head h1 { margin: 0; }
.grp-stats { display: flex; flex-wrap: wrap; gap: 10px; margin: 4px 0 16px; }
.grp-stat { flex: 1 1 130px; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.grp-stat .n { font-size: 1.5rem; font-weight: 700; line-height: 1.1; }
.grp-stat .l { font-size: 12px; color: var(--muted); margin-top: 2px; }
.grp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.grp-card { border: 1px solid var(--border); border-radius: 14px; padding: 14px; background: var(--card); cursor: pointer; transition: border-color 0.15s ease; }
.grp-card:hover { border-color: var(--primary); }
.grp-card-top { display: flex; justify-content: space-between; align-items: center; }
.grp-count { font-size: 12px; color: var(--muted); }
.grp-card-name { font-weight: 600; margin: 8px 0 2px; }
.grp-card-sched { font-size: 13px; }
.grp-card-lead { display: flex; align-items: center; gap: 6px; margin-top: 10px; font-size: 13px; }
.grp-avatar { width: 24px; height: 24px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; color: var(--primary); background: color-mix(in srgb, var(--primary) 15%, transparent); }
.grp-side p { margin: 0 0 8px; }
.grp-side p:last-child { margin-bottom: 0; }
.grp-side strong { color: var(--text); }
.grp-inline-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; }
.grp-inline-form select { flex: 1 1 140px; }
.grp-mtg-form { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 4px; align-items: end; }
.grp-mtg-form label { display: grid; gap: 4px; font-size: 12px; color: var(--muted); flex: 1 1 90px; }
.grp-mtg-form label:nth-child(5) { flex: 2 1 160px; }
.grp-combo { position: relative; }
.grp-combo-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 2px); z-index: 30;
  background: var(--card); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-lg); max-height: 240px; overflow-y: auto; padding: 4px;
}
.grp-combo-results button {
  display: block; width: 100%; text-align: left; background: none; border: none;
  padding: 7px 8px; border-radius: 6px; cursor: pointer; color: var(--text); font-size: 13px;
}
.grp-combo-results button:hover { background: var(--surface-2); }

/* Searchable relation field (generic form): "rel-search" reuses .grp-combo's
   dropdown positioning; this adds the selected-value chips underneath it. */
.rel-search-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.rel-chip {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 6px 3px 10px;
  border-radius: 999px; font-size: 12px; background: var(--surface-2); border: 1px solid var(--border);
}
.rel-chip-x { background: none; border: none; cursor: pointer; color: var(--muted); font-size: 14px; line-height: 1; padding: 2px; }
.rel-chip-x:hover { color: var(--danger, #ef4444); }

.grp-list { list-style: none; padding: 0; margin: 8px 0 0; }
.grp-list li { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 7px 0; border-bottom: 1px solid var(--border); }
.grp-list li:last-child { border-bottom: none; }
.link-btn { background: none; border: none; color: var(--primary); cursor: pointer; padding: 2px 4px; font-size: 12px; }
.link-btn:hover { text-decoration: underline; }

/* Attendance */
.att-type-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; margin: 14px 0 18px; }
.att-type-card { border: 1px solid var(--border); border-radius: 14px; padding: 18px 14px; background: var(--card); cursor: pointer; text-align: center; transition: border-color 0.15s ease; }
.att-type-card:hover { border-color: var(--primary); }
.att-type-card.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 8%, transparent); }
.att-type-card .ico { font-size: 1.6rem; line-height: 1; }
.att-type-card .lbl { font-weight: 600; margin-top: 6px; }
.att-session-list { list-style: none; padding: 0; margin: 0; }
.att-session-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--border); cursor: pointer; border-radius: 8px; }
.att-session-list li:last-child { border-bottom: none; }
.att-session-list li:hover { background: var(--surface-2); }
.att-session-main { display: flex; flex-direction: column; min-width: 0; }
.att-session-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.att-session-meta { font-size: 12px; color: var(--muted); }
.att-session-counts { font-size: 13px; font-weight: 700; white-space: nowrap; flex: none; }
.att-roster { list-style: none; padding: 0; margin: 10px 0 0; }
.att-roster li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.att-roster li:last-child { border-bottom: none; }
.att-roster-name { font-weight: 500; flex: 1 1 140px; min-width: 0; }
.att-status-group { display: flex; gap: 4px; flex: none; }
.att-status-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 8px; padding: 4px 9px; font-size: 12px; cursor: pointer; white-space: nowrap;
}
.att-status-btn.is-on { color: #fff; border-color: transparent; }
.att-status-btn[data-status="present"].is-on { background: #10b981; }
.att-status-btn[data-status="absent"].is-on { background: #ef4444; }
.att-status-btn[data-status="late"].is-on { background: #f59e0b; }
.att-status-btn[data-status="excused"].is-on { background: #6366f1; }

/* Kids Check-in */
.kc-topbar { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: end; margin-bottom: 14px; }
.kc-topbar .field { flex: 1 1 200px; min-width: 0; }
.kc-tabs { display: flex; gap: 8px; margin: 4px 0 16px; }
.kc-tab-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 10px; padding: 8px 16px; font-weight: 600; cursor: pointer;
}
.kc-tab-btn.is-on { border-color: var(--primary); background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); }
.kc-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 10px; background: var(--card); }
.kc-card-name { font-weight: 700; }
.kc-card-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.kc-child-row { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 6px 0; border-top: 1px solid var(--border); margin-top: 8px; }
.kc-child-row:first-of-type { border-top: none; margin-top: 6px; padding-top: 0; }
.kc-list { list-style: none; padding: 0; margin: 8px 0 0; }
.kc-list li { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); flex-wrap: wrap; }
.kc-list li:last-child { border-bottom: none; }
.kc-list-main { display: flex; flex-direction: column; }
.kc-list-name { font-weight: 600; }
.kc-list-meta { font-size: 12px; color: var(--muted); }
.kc-code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-weight: 700; letter-spacing: 1px; }
.kc-tag-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 80;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.kc-tag-panel { background: var(--card); border-radius: 16px; padding: 20px; max-width: 520px; width: 100%; }
.kc-tag-pair { display: flex; flex-wrap: wrap; gap: 14px; margin: 14px 0; }
.kc-tag { flex: 1 1 200px; border: 2px dashed var(--border); border-radius: 12px; padding: 16px; text-align: center; }
.kc-tag-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--muted); }
.kc-tag-name { font-weight: 700; font-size: 1.05rem; margin: 4px 0; }
.kc-tag-code { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 2rem; font-weight: 800; letter-spacing: 3px; }
.kc-tag-meta { font-size: 11px; color: var(--muted); margin-top: 4px; }

/* Bulk Email composer */
.be-var-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 10px; }
.be-var-toolbar button { padding: 3px 9px; font-size: 12px; }
.be-toolbar { display: flex; flex-wrap: wrap; gap: 4px; margin: 6px 0; }
.be-toolbar button {
  padding: 4px 9px; font-size: 13px; line-height: 1.2; border-radius: 6px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  box-shadow: none; font-weight: 500;
}
.be-toolbar button:hover { background: var(--hover); opacity: 1; transform: none; }
.be-toolbar button.is-active { background: var(--primary); color: var(--on-accent); border-color: var(--primary); }
.be-toolbar .be-toolbar-sep { width: 1px; align-self: stretch; background: var(--border); margin: 0 2px; }
.be-editor {
  min-height: 200px;
  max-height: 420px;
  overflow-y: auto;
  border: 1px solid var(--input-border);
  border-radius: var(--radius);
  padding: 10px 12px;
  background: var(--input-bg);
  color: var(--text);
  line-height: 1.5;
}
.be-editor:focus { outline: 2px solid var(--primary); outline-offset: 1px; }
.be-editor:empty:before { content: attr(data-placeholder); color: var(--muted); }
.be-editor img { max-width: 100%; height: auto; }
.be-editor p { margin: 0 0 10px; }
.be-editor-src { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 13px; white-space: pre; }
#be-preview-body img { max-width: 100%; height: auto; }
#be-preview-body p { margin: 0 0 10px; }

.be-mode-toggle { display: inline-flex; gap: 2px; margin: 4px 0 2px; border: 1px solid var(--border); border-radius: 8px; padding: 2px; }
.be-mode-toggle button {
  padding: 3px 10px; font-size: 12px; border: none; border-radius: 6px; cursor: pointer;
  background: transparent; color: var(--muted); box-shadow: none; font-weight: 500;
}
.be-mode-toggle button:hover { background: var(--hover); opacity: 1; transform: none; }
.be-mode-toggle button.is-active { background: var(--primary); color: var(--on-accent); }

/* Blocks mode — see core/EmailBlockEditor.js */
.eb-canvas {
  min-height: 200px; max-height: 480px; overflow-y: auto;
  border: 1px solid var(--input-border); border-radius: var(--radius);
  padding: 10px; background: var(--input-bg); display: flex; flex-direction: column; gap: 10px;
}
.eb-empty { text-align: center; padding: 24px 0; margin: 0; }
.eb-block {
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.eb-block.eb-dragging { opacity: 0.4; }
.eb-block.eb-drag-over-top { box-shadow: inset 0 3px 0 0 var(--primary); }
.eb-block.eb-drag-over-bottom { box-shadow: inset 0 -3px 0 0 var(--primary); }
.eb-block-toolbar {
  display: flex; align-items: center; gap: 8px; padding: 5px 8px;
  border-bottom: 1px solid var(--border); font-size: 12px; color: var(--muted);
}
.eb-drag-handle { cursor: grab; font-size: 14px; }
.eb-drag-handle:active { cursor: grabbing; }
.eb-block-type { flex: 1; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; font-size: 10px; }
.eb-block-actions { display: flex; gap: 2px; }
.eb-block-actions button {
  padding: 2px 6px; font-size: 12px; border: none; background: transparent; color: var(--muted);
  box-shadow: none; cursor: pointer; border-radius: 4px;
}
.eb-block-actions button:hover { background: var(--hover); color: var(--text); opacity: 1; transform: none; }
.eb-block-body { padding: 10px; }
.eb-row { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.eb-row:last-child { margin-bottom: 0; }
.eb-row input[type="text"], .eb-row select { flex: 1; width: auto; }
.eb-field { font-size: 0.95rem; }
.eb-paragraph-editor {
  min-height: 40px; border: 1px solid transparent; border-radius: 8px; padding: 4px 6px;
  color: var(--text);
}
.eb-paragraph-editor:focus { outline: none; border-color: var(--input-border); }
.eb-paragraph-editor:empty:before { content: attr(data-placeholder); color: var(--muted); }
.eb-image-editor img { max-width: 100%; max-height: 160px; display: block; margin-bottom: 6px; border-radius: 6px; }
.eb-list-item { flex: 1; }
.eb-add-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin-top: 8px; }
.eb-add-toolbar button {
  padding: 4px 10px; font-size: 12px; border-radius: 6px; cursor: pointer;
  border: 1px dashed var(--border); background: transparent; color: var(--text); box-shadow: none;
}
.eb-add-toolbar button:hover { background: var(--hover); opacity: 1; transform: none; border-style: solid; }

/* Columns block — editor-side preview only; the actual sent markup uses the
   fluid-hybrid inline-block technique (core/EmailBlockEditor.js), not flex. */
.eb-columns-preview { display: flex; flex-wrap: wrap; gap: 8px; }
.eb-col-cell { flex: 1 1 160px; min-width: 140px; border: 1px dashed var(--border); border-radius: 8px; padding: 8px; }
.eb-col-type { width: 100%; margin-bottom: 8px; font-size: 12px; }
.eb-col-cell-body img { max-width: 100%; max-height: 120px; display: block; margin-bottom: 6px; border-radius: 6px; }

/* Composer split: editor on one side, live rendered Preview on the other.
   Stacks below a breakpoint wide enough that side-by-side stops being useful
   — deliberately generous, since this composer needs to work on a phone. */
.be-split { display: flex; gap: 20px; align-items: flex-start; }
/* The editor gets whatever's left after the preview's own width, with a
   floor wide enough for a 2–3 column Columns block to actually show side by
   side instead of wrapping — the original complaint that prompted this. */
.be-edit-col { flex: 1 1 420px; min-width: 360px; }
/* The preview column's width is pinned close to the real email's own 600px
   shell (wrapEmailShell) rather than some fraction of whatever's left —
   otherwise the preview renders the email *smaller than it really is*,
   which is misleading on a desktop that has the room to show it at size.
   flex-shrink (not 0) lets it give way gracefully on a narrower desktop
   window rather than force an overflow before the mobile breakpoint stacks
   it below the editor instead. */
.be-preview-col { flex: 0 1 640px; min-width: 340px; position: sticky; top: 12px; }
.be-live-preview {
  margin-top: 6px; max-height: 70vh; overflow-y: auto;
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface-2); padding: 8px;
}
@media (max-width: 900px) {
  .be-split { flex-direction: column; }
  .be-preview-col { position: static; width: 100%; max-width: 100%; }
}

/* Tags — managed chips */
.tag-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 1px 9px;
  border-radius: 999px;
  font-size: 12px;
  line-height: 1.7;
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--text);
  white-space: nowrap;
}
.tag-picker { display: flex; flex-wrap: wrap; gap: 6px; }
button.tag-chip.tag-pick { cursor: pointer; opacity: 0.6; }
button.tag-chip.tag-pick.is-on {
  opacity: 1;
  font-weight: 600;
  border-color: var(--primary);
  background: color-mix(in srgb, var(--primary) 12%, transparent);
}
.table-filter select { min-height: 32px; }

/* Config-driven list toolbar (GenericModuleRenderer): New + search, then filters.
   Desktop keeps them on one row; mobile stacks filters below the search box. */
.table-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.table-toolbar-primary { display: flex; gap: 10px; align-items: center; flex: 1 1 auto; min-width: 0; }
.table-toolbar-primary .search-input { flex: 1 1 220px; min-width: 0; }
.table-toolbar-filters { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.table-filter {
  display: inline-flex; align-items: center; gap: 6px; color: var(--muted);
  padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px;
  background: var(--surface); cursor: pointer;
}
.table-filter:has(input:checked) { color: var(--text); border-color: var(--primary); background: color-mix(in srgb, var(--primary) 10%, transparent); }
@media (max-width: 900px) {
  .table-toolbar { flex-direction: column; align-items: stretch; }
  .table-toolbar-filters { width: 100%; }
}
.modal .form-section-title { margin: 18px 0 10px; padding-top: 12px; border-top: 1px solid var(--border); }
.modal .form-field-help { margin-top: 5px; font-size: 0.85rem; }
.church-logo-widget { margin-top: 8px; }
.church-logo-preview { margin-bottom: 8px; }
.church-logo-preview img { max-height: 64px; max-width: 220px; display: block; border-radius: 6px; }
.church-logo-preview p { margin: 0; }

/* =========================================================
   THEME COMPAT (dark mode + late fixes)
   ========================================================= */

/* Theme toggle control (sidebar footer) */
.theme-toggle {
  display: flex;
  gap: 2px;
  padding: 3px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--card-2);
  margin: 0 0 10px;
}
.theme-toggle button {
  all: unset;
  cursor: pointer;
  padding: 8px 14px;
  min-height: 38px;
  box-sizing: border-box;
  border-radius: 999px;
  font-size: 0.95rem;
  line-height: 1;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 1;
  transition: var(--transition);
}
.theme-toggle button[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-accent);
}

/* FullCalendar (CDN light CSS) — drive its tokens from ours so it tracks the theme */
.fc {
  --fc-border-color: var(--border);
  --fc-page-bg-color: transparent;
  --fc-neutral-bg-color: var(--card-2);
  --fc-list-event-hover-bg-color: var(--hover);
  --fc-today-bg-color: color-mix(in srgb, var(--primary) 12%, transparent);
  --fc-highlight-color: color-mix(in srgb, var(--primary) 16%, transparent);
  --fc-now-indicator-color: var(--danger);
  color: var(--text);
}
.fc .fc-list-empty { background: var(--card-2); color: var(--muted); }
.fc .fc-list-day-cushion { background: var(--card-2); }
.fc-theme-standard .fc-list,
.fc-theme-standard td,
.fc-theme-standard th { border-color: var(--border); }
.fc .fc-button-primary {
  background: var(--card-2);
  border-color: var(--border);
  color: var(--text);
}
.fc .fc-button-primary:not(:disabled).fc-button-active,
.fc .fc-button-primary:not(:disabled):active,
.fc .fc-button-primary:hover {
  background: var(--primary);
  border-color: var(--primary);
  color: var(--on-accent);
}
.fc .fc-button-primary:disabled { opacity: 0.5; }

/* Choices.js (external CSS, index.html) minimal dark alignment */
.choices__inner,
.choices__list--dropdown,
.choices__list[role="listbox"] {
  background: var(--input-bg);
  color: var(--text);
  border-color: var(--input-border);
}
.choices__list--dropdown .choices__item--selectable.is-highlighted {
  background: var(--hover);
}

/* Mobile: never let a stray wide child scroll the page sideways */
@media (max-width: 900px) {
  .app-main { overflow-x: hidden; }
  .card { padding: 14px; }
}