/* ── Reset & root ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --byu: #002e5d;
  --byu-mid: #0a4d8c;
  --byu-light: #1a6bb5;
  --bg: #d8e8f4;
  --line: rgba(0,46,93,0.11);
  --muted: #5d7492;
  --text: #18293d;
  --shadow: 0 4px 24px rgba(0,46,93,0.09);
  --sidebar-w: 224px;
  --radius: 14px;
}

html, body { height: 100%; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 0.9rem;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

/* ── App shell ── */
.app { display: flex; min-height: 100vh; }

/* ── Sidebar ── */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  position: fixed;
  top: 0; left: 0;
  height: 100vh;
  overflow-y: auto;
  background: var(--byu);
  display: flex;
  flex-direction: column;
  z-index: 100;
  scrollbar-width: thin;
  scrollbar-color: rgba(255,255,255,0.15) transparent;
}

.sidebar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 16px 16px;
  border-bottom: 1px solid rgba(255,255,255,0.09);
  color: white;
  flex-shrink: 0;
}

.brand-icon { font-size: 1.4rem; }

.sidebar-brand strong { display: block; font-size: 0.95rem; font-weight: 700; }
.sidebar-brand small { font-size: 0.75rem; opacity: 0.55; }

.nav-list {
  list-style: none;
  padding: 10px 8px;
  flex: 1;
}

.nav-section-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.35);
  padding: 14px 8px 4px;
  list-style: none;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
  color: rgba(255,255,255,0.68);
  font-size: 0.875rem;
  transition: background 100ms, color 100ms;
  margin-bottom: 1px;
  user-select: none;
}

.nav-item:hover { background: rgba(255,255,255,0.09); color: white; }

.nav-item.active {
  background: rgba(255,255,255,0.16);
  color: white;
  font-weight: 600;
}

.nav-icon { font-size: 0.95rem; width: 20px; text-align: center; flex-shrink: 0; }

.sidebar-footer {
  padding: 14px 12px 20px;
  border-top: 1px solid rgba(255,255,255,0.09);
  display: flex;
  flex-direction: column;
  gap: 8px;
  flex-shrink: 0;
}

.btn-save {
  background: white;
  color: var(--byu);
  font-weight: 700;
  font-size: 0.85rem;
  padding: 9px 14px;
  border-radius: 9px;
  border: none;
  cursor: pointer;
  width: 100%;
  transition: opacity 100ms;
}
.btn-save:hover { opacity: 0.88; }

.save-status {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  text-align: center;
  min-height: 1em;
}

.sidebar-links {
  display: flex;
  gap: 12px;
  justify-content: center;
  margin-top: 2px;
}
.sidebar-links a {
  font-size: 0.73rem;
  color: rgba(255,255,255,0.4);
  text-decoration: none;
  transition: color 100ms;
}
.sidebar-links a:hover { color: rgba(255,255,255,0.75); }

/* ── Main content ── */
.content {
  margin-left: var(--sidebar-w);
  flex: 1;
  padding: 32px 36px 60px;
  min-height: 100vh;
}

/* ── Tab panes ── */
.tab-pane { display: none; }
.tab-pane.active { display: block; }

/* ── Page header ── */
.page-header { margin-bottom: 22px; }
.page-header h1 {
  font-size: 1.55rem;
  font-weight: 800;
  color: var(--byu);
  letter-spacing: -0.025em;
}
.page-header p { color: var(--muted); margin-top: 3px; font-size: 0.875rem; }

/* ── Cards ── */
.card {
  background: rgba(255,255,255,0.68);
  backdrop-filter: blur(20px) saturate(160%);
  -webkit-backdrop-filter: blur(20px) saturate(160%);
  border-radius: var(--radius);
  padding: 20px 22px;
  margin-bottom: 16px;
  border: 1px solid rgba(255,255,255,0.55);
  box-shadow: var(--shadow), inset 0 1px 0 rgba(255,255,255,0.7);
}

.card-title {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--byu);
  letter-spacing: -0.01em;
}

.card-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}

/* ── Grid layouts ── */
.grid { display: grid; gap: 16px; }
.grid.three { grid-template-columns: repeat(3, 1fr); }
.grid.two { grid-template-columns: repeat(2, 1fr); }

/* ── Input stack ── */
.input-stack { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }

/* ── Inputs / textareas / selects ── */
input:not([type=file]),
textarea,
select {
  width: 100%;
  padding: 8px 11px;
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: rgba(255,255,255,0.82);
  font-size: 0.875rem;
  color: var(--text);
  outline: none;
  font-family: inherit;
  transition: border-color 120ms, box-shadow 120ms;
}
input[type=file] { font-size: 0.82rem; color: var(--muted); }

input:not([type=file]):focus,
textarea:focus,
select:focus {
  border-color: var(--byu-light);
  box-shadow: 0 0 0 3px rgba(26,107,181,0.13);
}

textarea { resize: vertical; line-height: 1.5; }

.table-input {
  padding: 5px 8px;
  border-radius: 6px;
  font-size: 0.8rem;
  margin-top: 0;
}
input[type="date"].table-input {
  min-width: 130px;
}
.table-textarea {
  resize: vertical;
  min-height: 58px;
  line-height: 1.4;
  font-size: 0.8rem;
}
.sent-check { width: auto; margin: 0; cursor: pointer; accent-color: var(--byu); }

.field-label {
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--muted);
}
.field-label input,
.field-label textarea { margin-top: 0; }

/* ── Buttons ── */
.btn {
  padding: 7px 14px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  font-family: inherit;
  transition: background 100ms;
  white-space: nowrap;
}
.btn.primary { background: var(--byu); color: white; }
.btn.primary:hover { background: var(--byu-mid); }
.btn.secondary { background: rgba(0,46,93,0.09); color: var(--byu); }
.btn.secondary:hover { background: rgba(0,46,93,0.16); }
.btn.danger { background: transparent; color: #c0392b; padding: 3px 7px; font-size: 0.78rem; border-radius: 5px; }
.btn.danger:hover { background: rgba(192,57,43,0.08); }

/* ── Row actions ── */
.row-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* ── Tables ── */
.table-wrap { overflow-x: auto; margin-top: 4px; }

table { width: 100%; border-collapse: collapse; font-size: 0.81rem; }

th {
  text-align: left;
  padding: 6px 8px;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
}

td {
  padding: 4px 4px;
  vertical-align: middle;
  border-bottom: 1px solid rgba(0,46,93,0.05);
}
tr:last-child td { border-bottom: none; }

/* ── Pills / status chips ── */
.pill {
  display: inline-flex;
  align-items: center;
  padding: 2px 9px;
  border-radius: 99px;
  font-size: 0.74rem;
  font-weight: 600;
}
.pill-green  { background: rgba(39,174,96,0.12);  color: #1d7340; }
.pill-yellow { background: rgba(243,156,18,0.13); color: #8a6000; }
.pill-neutral{ background: rgba(0,46,93,0.09);    color: var(--byu); }
.pill-red    { background: rgba(192,57,43,0.10);  color: #922b21; }

/* ── Hints / muted text ── */
.hint { font-size: 0.8rem; color: var(--muted); }
code { font-size: 0.82em; background: rgba(0,46,93,0.07); padding: 1px 5px; border-radius: 4px; }

/* ── Snapshot (Weekly Focus) ── */
.snapshot-card { margin-bottom: 16px; }
.snapshot-card .card-title { margin-bottom: 14px; }

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

.snapshot-panel {
  background: rgba(255,255,255,0.54);
  border: 1px solid rgba(255,255,255,0.6);
  border-radius: 10px;
  padding: 14px;
}

.snapshot-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}
.snapshot-head h4 {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--byu);
}

.summary-list { display: flex; flex-direction: column; gap: 7px; }
.summary-list.empty-state { color: var(--muted); font-size: 0.8rem; font-style: italic; }
.summary-item {
  font-size: 0.8rem;
  line-height: 1.4;
  padding: 6px 8px;
  border-radius: 6px;
  background: rgba(255,255,255,0.55);
}
.mini-pill {
  font-size: 0.68rem;
  background: rgba(243,156,18,0.15);
  color: #7a5500;
  padding: 1px 6px;
  border-radius: 99px;
  margin-right: 5px;
  font-weight: 600;
}
.mini-meta { font-size: 0.74rem; color: var(--muted); }

/* ── Young Men ── */
.ym-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.ym-card { display: flex; flex-direction: column; gap: 8px; }
.ym-divider { height: 1px; background: var(--line); margin: 4px 0; }
.ym-advisor-list { display: flex; flex-direction: column; gap: 8px; }
.ym-advisor-row { display: flex; gap: 6px; align-items: center; }
.ym-advisor-row input { flex: 1; padding: 5px 8px; font-size: 0.82rem; }

/* ── Birthday ── */
.birthday-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.birthday-list.empty-state { color: var(--muted); font-size: 0.82rem; font-style: italic; }

.birthday-chip {
  background: rgba(255,255,255,0.7);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 12px;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0.82rem;
  transition: background 100ms;
  width: 100%;
}
.birthday-chip:hover { background: rgba(255,255,255,0.9); }
.birthday-chip span { font-weight: 600; color: var(--text); }
.birthday-chip small { color: var(--muted); font-size: 0.76rem; }

.inline-filter {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.8rem;
  color: var(--muted);
}
.inline-filter select { width: auto; padding: 3px 8px; font-size: 0.8rem; }

/* ── Import form ── */
.import-form { }
.import-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-bottom: 4px; }

/* ── Mobile bar ── */
.mobile-bar {
  display: none;
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--byu);
  color: white;
  align-items: center;
  padding: 0 14px;
  gap: 12px;
  z-index: 200;
  box-shadow: 0 2px 12px rgba(0,0,0,0.2);
}

.mobile-title {
  flex: 1;
  font-size: 0.95rem;
  font-weight: 700;
  color: white;
}

.btn-save-mobile {
  background: rgba(255,255,255,0.18);
  color: white;
  border: none;
  padding: 6px 14px;
  border-radius: 7px;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* Hamburger */
.hamburger {
  background: transparent;
  border: none;
  padding: 6px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  flex-shrink: 0;
}
.hamburger span {
  display: block;
  width: 20px;
  height: 2px;
  background: white;
  border-radius: 1px;
  transition: transform 200ms, opacity 200ms;
}

/* Sidebar overlay */
.sidebar-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 90;
}
.sidebar-overlay.visible { display: block; }

/* ── Young Men Calendar ── */
.cal-nav {
  display: flex;
  align-items: center;
  gap: 10px;
}
.cal-month-label {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--byu);
  min-width: 140px;
  text-align: center;
}
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 3px 0;
  margin-top: 12px;
}
.cal-dow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--muted);
  text-align: center;
  padding: 4px 0 6px;
}
.cal-cell {
  min-height: 64px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.82rem;
  font-weight: 500;
  color: var(--text);
  position: relative;
  transition: background 100ms, border-color 100ms;
  border: 1px solid var(--line);
  background: rgba(255,255,255,0.5);
  overflow: hidden;
  padding: 4px 5px 4px;
  gap: 2px;
}
.cal-cell:hover { background: rgba(0,46,93,0.08); }
.cal-cell.cal-today {
  background: rgba(0,46,93,0.1);
  font-weight: 700;
  color: var(--byu);
}
.cal-cell.cal-selected {
  background: var(--byu);
  color: white;
  font-weight: 700;
}
.cal-cell.cal-empty { cursor: default; border-color: transparent; background: transparent; }
.cal-day-num {
  display: block;
  font-size: 0.82rem;
  font-weight: inherit;
  line-height: 1.3;
  flex-shrink: 0;
}
/* Event bars */
.cal-ev-bar {
  display: flex;
  align-items: center;
  height: 16px;
  min-width: 0;
  overflow: hidden;
  flex-shrink: 0;
}
.cal-ev-label {
  font-size: 10px;
  font-weight: 600;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 0 5px;
  line-height: 16px;
}
.cal-ev-more {
  font-size: 10px;
  color: var(--muted);
  font-weight: 600;
  padding: 0 2px;
  line-height: 1.4;
}
.cal-cell.cal-selected .cal-ev-label { color: rgba(255,255,255,0.95); }
.cal-cell.cal-selected .cal-ev-more  { color: rgba(255,255,255,0.7); }

/* ── Calendar day modal ── */
.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.35);
  z-index: 300;
  align-items: center;
  justify-content: center;
  padding: 20px;
}
.modal-overlay.open { display: flex; }

.modal {
  background: white;
  border-radius: 16px;
  width: 100%;
  max-width: 480px;
  box-shadow: 0 20px 60px rgba(0,0,0,0.2);
  overflow: hidden;
}

.modal-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 16px 20px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,46,93,0.04);
}
.modal-head strong { font-size: 0.95rem; color: var(--byu); }

.modal-close {
  background: transparent;
  border: none;
  font-size: 1rem;
  cursor: pointer;
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 5px;
  font-family: inherit;
}
.modal-close:hover { background: rgba(0,0,0,0.06); }

.modal-body {
  padding: 18px 20px 20px;
  max-height: 70vh;
  overflow-y: auto;
}

.ym-event-list { display: flex; flex-direction: column; gap: 10px; }
.ym-event-row {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  background: rgba(0,46,93,0.03);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 10px 12px;
}
.ym-event-fields { flex: 1; display: flex; flex-direction: column; gap: 6px; }
.ym-ev-title { font-weight: 600; }

/* ── Vertical card list (Callings) ── */
.vert-list { display: flex; flex-direction: column; gap: 10px; margin-top: 4px; }

.vert-card {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  background: rgba(255,255,255,0.55);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px 14px;
}

.vert-card-fields {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 8px 14px;
}

.vert-field {
  display: flex;
  flex-direction: column;
  gap: 3px;
  font-size: 0;
}
.vert-field span {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.vert-field input { margin-top: 0; font-size: 0.85rem; }

.vert-delete { flex-shrink: 0; margin-top: 2px; }

/* ── Responsive ── */
@media (max-width: 900px) {
  .snapshot-grid { grid-template-columns: 1fr; }
  .ym-grid { grid-template-columns: 1fr; }
  .grid.three { grid-template-columns: 1fr; }
  .import-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .mobile-bar { display: flex; }

  .sidebar {
    transform: translateX(-100%);
    transition: transform 220ms ease;
    box-shadow: none;
  }
  .sidebar.open {
    transform: translateX(0);
    box-shadow: 4px 0 40px rgba(0,0,0,0.3);
  }

  .content {
    margin-left: 0;
    padding: 18px 16px 40px;
    padding-top: 70px;
  }

  .grid.two { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
  .page-header h1 { font-size: 1.3rem; }
}

/* ── Interview / Agenda cards ── */
.interview-form {
  padding: 14px 16px;
  border-bottom: 1px solid var(--line);
  background: rgba(0,46,93,0.03);
}
.interview-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
  margin-bottom: 10px;
}
.interview-form input, .interview-form select, .interview-form textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  background: #fff;
  color: var(--text);
}
.interview-form textarea { resize: vertical; }

.interview-card {
  border-bottom: 1px solid var(--line);
}
.interview-card:last-child { border-bottom: none; }
.interview-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  cursor: pointer;
  user-select: none;
  gap: 12px;
}
.interview-card-head:hover { background: rgba(0,46,93,0.03); }
.interview-card-head strong { display: block; font-size: 0.9rem; }
.interview-card-head small { color: var(--muted); font-size: 0.78rem; }
.iv-chevron { color: var(--muted); font-size: 0.75rem; }

.interview-card-body {
  padding: 12px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  background: rgba(0,46,93,0.02);
}
.interview-card-body select,
.interview-card-body input[type="date"] {
  padding: 6px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  background: #fff;
  color: var(--text);
  width: 100%;
}
.interview-card-body textarea {
  width: 100%;
  padding: 7px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.85rem;
  background: #fff;
  color: var(--text);
  resize: vertical;
}

.agenda-item-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 6px;
}
.agenda-item-row input[type="checkbox"] {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  cursor: pointer;
}

.pill-blue { background: #dbeafe; color: #1d4ed8; }
.pill-red  { background: #fee2e2; color: #b91c1c; }

/* ── Role-based nav + tab visibility ── */

/* bishopric: full access, only hide admin tab */
.role-bishopric #tab-admin,
.role-bishopric .nav-item[data-tab="admin"],
.role-bishopric #nav-admin-label { display: none !important; }

/* YM: wardcalendar + youth + agendas + braindump + kanban + tasks + faithjournal + settings + feedback */
.role-ym .tab-pane:not(#tab-wardcalendar):not(#tab-youth):not(#tab-agendas):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) { display: none !important; }
.role-ym .nav-item:not([data-tab="wardcalendar"]):not([data-tab="youth"]):not([data-tab="agendas"]):not([data-tab="braindump"]):not([data-tab="kanban"]):not([data-tab="tasks"]):not([data-tab="faithjournal"]):not([data-tab="settings"]):not([data-tab="feedback"]) { display: none !important; }

/* YW: wardcalendar + youth + agendas + braindump + kanban + tasks + faithjournal + settings + feedback */
.role-yw .tab-pane:not(#tab-wardcalendar):not(#tab-youth):not(#tab-agendas):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) { display: none !important; }
.role-yw .nav-item:not([data-tab="wardcalendar"]):not([data-tab="youth"]):not([data-tab="agendas"]):not([data-tab="braindump"]):not([data-tab="kanban"]):not([data-tab="tasks"]):not([data-tab="faithjournal"]):not([data-tab="settings"]):not([data-tab="feedback"]) { display: none !important; }

/* User: home + braindump + kanban + settings + feedback */
.role-user .tab-pane:not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-settings):not(#tab-feedback) { display: none !important; }
.role-user .nav-item:not([data-tab="home"]):not([data-tab="braindump"]):not([data-tab="kanban"]):not([data-tab="settings"]):not([data-tab="feedback"]) { display: none !important; }

/* ── Role-based section access ── */
/* bishopric: full access, no restrictions */

/* YM leader: youth + agendas + wardcalendar + home + braindump + kanban + tasks + faithjournal + settings are editable */
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar):not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) .table-input,
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar):not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) input[type="text"],
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar):not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) textarea:not([id^="fb-"]) {
  pointer-events: none;
  background: #f5f7fa;
  color: #6b7280;
}
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar) [data-add-row],
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar) [data-delete-row],
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas) .ag-add-item,
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas) .ag-item-delete,
.role-ym .tab-pane:not(#tab-youth):not(#tab-agendas) .ag-delete { display: none; }

/* YW leader: youth + agendas + wardcalendar + home + braindump + kanban + tasks + faithjournal + settings are editable */
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar):not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) .table-input,
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar):not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) input[type="text"],
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar):not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-tasks):not(#tab-faithjournal):not(#tab-settings):not(#tab-feedback) textarea:not([id^="fb-"]) {
  pointer-events: none;
  background: #f5f7fa;
  color: #6b7280;
}
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar) [data-add-row],
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas):not(#tab-wardcalendar) [data-delete-row],
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas) .ag-add-item,
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas) .ag-item-delete,
.role-yw .tab-pane:not(#tab-youth):not(#tab-agendas) .ag-delete { display: none; }

/* User: home + braindump + kanban + settings are editable */
.role-user .tab-pane:not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-settings) .table-input,
.role-user .tab-pane:not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-settings) input[type="text"],
.role-user .tab-pane:not(#tab-home):not(#tab-braindump):not(#tab-kanban):not(#tab-settings) textarea:not([id^="fb-"]) {
  pointer-events: none;
  background: #f5f7fa;
  color: #6b7280;
}
.role-user [data-add-row]:not([data-add-row="lessActive"]),
.role-user [data-delete-row]:not([data-delete-row="lessActive"]),
.role-user .ag-add-item,
.role-user .ag-item-delete,
.role-user .ag-delete { display: none; }

/* Role pill colors */
.role-pill.bishopric { background: #dbeafe; color: #1d4ed8; }
.role-pill.ym        { background: #dcfce7; color: #15803d; }
.role-pill.yw        { background: #fce7f3; color: #9d174d; }
.role-pill.user      { background: #f3f4f6; color: #6b7280; }

/* ── AI Chat ── */
.ai-chat-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--byu-mid);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 16px rgba(0,0,0,0.2);
  z-index: 1000;
  transition: background 0.15s, transform 0.15s;
}
.ai-chat-toggle:hover { background: var(--byu); transform: scale(1.06); }

.ai-chat-panel {
  position: fixed;
  bottom: 88px;
  right: 24px;
  width: 360px;
  max-width: calc(100vw - 48px);
  height: 480px;
  max-height: calc(100vh - 120px);
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(0,46,93,0.18);
  border: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  z-index: 1000;
  overflow: hidden;
}

.ai-chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 16px;
  background: var(--byu-mid);
  color: #fff;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
}
.ai-chat-close {
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  opacity: 0.8;
  padding: 0;
}
.ai-chat-close:hover { opacity: 1; }

.ai-chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ai-msg {
  max-width: 88%;
  padding: 8px 12px;
  border-radius: 12px;
  font-size: 13px;
  line-height: 1.5;
  white-space: pre-wrap;
  word-break: break-word;
}
.ai-msg.user {
  background: var(--byu-mid);
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.ai-msg.assistant {
  background: #f3f4f6;
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}
.ai-msg.thinking {
  background: #f3f4f6;
  color: #6b7280;
  align-self: flex-start;
  font-style: italic;
}

.ai-chat-input-row {
  display: flex;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid #e5e7eb;
  flex-shrink: 0;
}
.ai-chat-input {
  flex: 1;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 8px 10px;
  font-size: 13px;
  resize: none;
  outline: none;
  font-family: inherit;
  line-height: 1.4;
}
.ai-chat-input:focus { border-color: var(--byu-light); }
.ai-chat-send {
  background: var(--byu-mid);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0 14px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  align-self: flex-end;
  height: 36px;
  flex-shrink: 0;
}
.ai-chat-send:hover { background: var(--byu); }
.ai-chat-send:disabled { opacity: 0.5; cursor: not-allowed; }

/* Brain-dump badge for routed Tasks (they live in the tasks table) */
.bd-badge-task { background:#ecfdf5; color:#047857; border:1px solid #a7f3d0; }


/* ── Larger text (accessibility, roadmap S4) ─────────────────────────────────
   The interface uses a lot of 10-12px type set in inline styles, which no
   stylesheet rule can target by size. Scaling the content area handles all of
   it proportionally in one rule, including inline styles, without having to
   rewrite 150+ declarations and risk the layout.

   The fixed sidebar is deliberately excluded — scaling a position:fixed
   element detaches it from the viewport it is pinned to. The scaled element is
   <main class="content">.

   Off unless the ward turns it on, so nobody's interface changes uninvited. */
body.text-larger .content { zoom: 1.12; }
body.text-largest .content { zoom: 1.25; }

/* Keep dialogs readable too — they are portalled outside .main-content. */
body.text-larger #ckanban-modal,
body.text-larger #kanban-modal,
body.text-larger #sched-tmpl-overlay { zoom: 1.12; }
body.text-largest #ckanban-modal,
body.text-largest #kanban-modal,
body.text-largest #sched-tmpl-overlay { zoom: 1.25; }

/* Operator-only surfaces (roadmap T2.12). Signup links, the change log, the
   infrastructure panel and the role-changing SQL belong to whoever runs the
   software, not to every bishop who owns a ward.

   HIDDEN BY DEFAULT and revealed only once the server has confirmed the
   viewer, so a new bishop never sees them flash up while the page loads. The
   wrong way round — visible until JavaScript hides them — would show the
   infrastructure panel to every ward for a moment on every load.

   All four are plain block elements, so `block` restores them exactly. The
   server enforces this independently; these rules only stop the shells being
   drawn. */
.operator-only { display: none !important; }
body.is-app-owner .operator-only { display: block !important; }

/* Role explanations in the admin panel. Five roles, each a coloured dot beside
   a sentence, matching the pill colours used in the user list. */
.role-explain {
  display: flex;
  gap: 8px;
  align-items: flex-start;
  margin-top: 8px;
  font-size: 13px;
  color: var(--muted);
  line-height: 1.5;
}
.role-explain strong { color: var(--text); }
.role-dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  flex: 0 0 9px;
  margin-top: 6px;
}

/* System Admin (roadmap T2.13) — looks after the software, not the ward.
   Sees the Admin panel and their own settings, and nothing else: the ward tabs
   would render mostly empty anyway, because lib/read-scope.ts withholds the
   confidential sections from this role exactly as it does from youth leaders. */
.role-sysadmin .tab-pane:not(#tab-admin):not(#tab-settings):not(#tab-feedback) { display: none !important; }
.role-sysadmin .nav-item:not([data-tab="admin"]):not([data-tab="settings"]):not([data-tab="feedback"]) { display: none !important; }

/* Inside the Admin panel, these belong to the bishop personally: the ward
   download is the entire confidential record in one file, the handoff decides
   what a successor inherits, and the example data replaces the ward wholesale. */
.role-sysadmin .bishop-only { display: none !important; }