/* Parish Officer Public Portal Styles */
:root {
  --par-primary: #1e5799;
  --par-accent:  #c0392b;
  --par-light:   #eaf2fb;
  --par-success: #27ae60;
  --par-warn:    #e67e22;
  --par-border:  #e0e4ea;
}

.par-public-wrap {
  max-width: 960px;
  margin: 0 auto;
  padding: 0 0 60px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Top bar */
.par-topbar {
  background: var(--par-primary);
  color: #fff;
  padding: 14px 20px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.par-topbar-left { display: flex; align-items: center; gap: 12px; }
.par-topbar-title { font-weight: 700; font-size: 1.05em; }
.par-topbar-sub { font-size: .82em; color: rgba(255,255,255,.75); margin-top: 2px; }
.par-logout-btn {
  background: rgba(255,255,255,.15);
  color: #fff;
  text-decoration: none;
  padding: 6px 14px;
  border-radius: 20px;
  font-size: .85em;
  white-space: nowrap;
  transition: background .2s;
}
.par-logout-btn:hover { background: rgba(255,255,255,.3); color: #fff; }

/* Nav */
.par-officer-nav {
  display: flex;
  gap: 0;
  background: #f5f7fa;
  border-bottom: 2px solid var(--par-border);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.par-officer-nav::-webkit-scrollbar { display: none; }
.par-nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 10px 16px;
  text-decoration: none;
  color: #555;
  font-size: .78em;
  white-space: nowrap;
  border-bottom: 3px solid transparent;
  transition: all .2s;
  min-width: 64px;
}
.par-nav-item:hover { color: var(--par-primary); background: #eaf2fb; }
.par-nav-item.active { color: var(--par-primary); border-bottom-color: var(--par-primary); background: #fff; }
.par-nav-icon { font-size: 1.4em; margin-bottom: 2px; }
.par-nav-label { font-weight: 600; }

/* Content */
.par-officer-content { padding: 16px; }
.par-section-title { color: var(--par-primary); font-size: 1.15em; margin: 0 0 14px; font-weight: 700; }

/* Cards */
.par-card {
  background: #fff;
  border: 1px solid var(--par-border);
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 14px;
}
.par-card h3 { margin: 0 0 12px; font-size: 1em; color: var(--par-primary); }

/* Stats */
.par-stat-grid { display: grid; grid-template-columns: repeat(2,1fr); gap: 10px; margin-bottom: 16px; }
.par-stat-box { background: #fff; border: 1px solid var(--par-border); border-radius: 10px; padding: 16px; text-align: center; }
.par-stat-num { font-size: 1.9em; font-weight: 800; color: var(--par-primary); }
.par-stat-lbl { font-size: .76em; color: #888; margin-top: 4px; }

/* Family rows */
.par-family-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid var(--par-border);
  border-radius: 8px;
  margin-bottom: 6px;
  text-decoration: none;
  color: inherit;
  transition: background .15s, border-color .15s;
}
.par-family-row:hover { background: var(--par-light); border-color: var(--par-primary); }
.par-family-row.active { background: var(--par-light); border-left: 3px solid var(--par-primary); }
.par-fam-order { background: #e8eaf0; color: #555; font-size: .72em; font-weight: 700; border-radius: 10px; padding: 1px 7px; flex-shrink: 0; }

/* Member rows */
.par-member-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 0;
  border-bottom: 1px solid #f0f0f0;
}
.par-member-row:last-child { border-bottom: none; }
.par-head-badge { display: inline-block; font-size: .7em; background: var(--par-primary); color: #fff; padding: 1px 6px; border-radius: 8px; margin-left: 6px; }

/* Celebration rows */
.par-celeb-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 9px 0;
  border-bottom: 1px solid #f0f0f0;
}
.par-celeb-row:last-child { border-bottom: none; }

/* Badges */
.par-badge { display: inline-block; padding: 3px 10px; border-radius: 12px; font-size: .78em; font-weight: 600; margin-left: 4px; }
.par-badge.birthday    { background: #fef9e7; color: #7d6608; }
.par-badge.anniversary { background: #fdedec; color: #922b21; }

/* Magazine rows */
.par-mag-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 7px 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: .9em;
}
.par-mag-row:last-child { border-bottom: none; }
.par-mag-row.expired { opacity: .6; }

/* Member checkbox grid — used for programme participant selection.
   Previously only defined in the admin CSS; the officer dashboard had
   no styling for this at all. Single column below ~480px so long names
   and the checkbox never get squeezed. */
.par-member-checkbox-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 8px; }
.par-member-checkbox {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 10px;
  border: 1px solid var(--par-border);
  border-radius: 6px;
  cursor: pointer;
  transition: background .15s;
}
.par-member-checkbox:hover { background: var(--par-light); }
.par-member-checkbox.selected { background: var(--par-light); border-color: var(--par-primary); }
.par-member-checkbox input { margin: 0; flex-shrink: 0; }

/* Inputs */
.par-input {
  display: block;
  width: 100%;
  padding: 9px 12px;
  border: 1.5px solid var(--par-border);
  border-radius: 7px;
  font-size: .95em;
  margin-bottom: 12px;
  box-sizing: border-box;
  transition: border .2s;
  background: #fff;
}
.par-input:focus { border-color: var(--par-primary); outline: none; }
.par-label { display: block; font-weight: 600; font-size: .85em; margin-bottom: 4px; color: #444; }

/* Buttons */
.par-btn-primary {
  background: var(--par-primary);
  color: #fff;
  border: none;
  padding: 10px 20px;
  border-radius: 7px;
  font-size: .95em;
  font-weight: 700;
  cursor: pointer;
  transition: background .2s;
}
.par-btn-primary:hover { background: #154360; }
.par-btn-sm {
  background: #f0f0f0;
  color: #333;
  border: none;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: .82em;
  font-weight: 600;
  cursor: pointer;
  transition: background .15s;
}
.par-btn-sm:hover { background: #ddd; }

/* Attendance step form */
.par-att-family-card { background: #fff; border: 1px solid var(--par-border); border-radius: 10px; padding: 14px; }
.par-att-member-row { display: flex; align-items: center; gap: 8px; padding: 8px 0; border-bottom: 1px solid #f0f0f0; flex-wrap: wrap; }
.par-att-member-row:last-child { border-bottom: none; }
.par-att-member-name { flex: 1; min-width: 120px; font-size: .9em; font-weight: 600; }
.par-att-status-sel { padding: 5px 8px; border-radius: 6px; border: 1px solid var(--par-border); font-size: .85em; }
.par-att-reason-inp { flex: 1; min-width: 120px; padding: 5px 8px; border-radius: 6px; border: 1px solid var(--par-border); font-size: .82em; }

/* Progress bar */
.par-progress-bar { height: 6px; background: #e0e0e0; border-radius: 4px; margin: 10px 0; }
.par-progress-fill { height: 6px; background: var(--par-primary); border-radius: 4px; transition: width .3s; }

/* Notice */
.par-public-notice { padding: 10px 16px; border-radius: 7px; margin-bottom: 12px; font-size: .9em; }
.par-public-notice.success { background: #d5f5e3; color: #1e6b3a; }
.par-public-notice.error   { background: #fde8e8; color: #922b21; }

@media (min-width: 600px) {
  .par-stat-grid { grid-template-columns: repeat(4,1fr); }
}

/* SPA modal styling */
.par-public-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: #fff;
  border-radius: 10px;
  padding: 24px;
  z-index: 9999;
  width: 90%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 10px 40px rgba(0,0,0,.2);
}
.par-public-modal h3 { color: var(--par-primary); }
.par-modal-actions { display: flex; gap: 8px; margin-top: 14px; }
.par-modal-actions .par-btn-sm { background: #f0f0f0; padding: 8px 14px; border-radius: 6px; border: none; cursor: pointer; }

/* Unit switcher (priest) */
#par-unit-switcher {
  max-width: 240px;
  color: #222;
  background: #fff;
  border: 1px solid rgba(255,255,255,.5);
  border-radius: 4px;
  padding: 3px 8px;
  font-size: .85em;
}
#par-unit-switcher option {
  color: #222;
  background: #fff;
}

/* Locked-state banner reused across views */
.par-locked-banner {
  background: #fff3cd; color: #856404;
  padding: 8px 12px; border-radius: 6px;
  font-size: .85em; margin-top: 10px;
}

/* Horizontal-scroll wrapper for wide data tables (collections
   statement, import preview). On phones these tables would otherwise
   squeeze every column into unreadable slivers — this lets the table
   keep its natural width and scroll sideways instead, which is far
   more usable on a touch screen than cramming columns. */
.par-scroll-x {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}
.par-scroll-x table { min-width: 480px; }

/* Two-column "list + detail" layout (families, programmes).
   260px fixed sidebar + flexible detail pane on wide screens;
   collapses to a single stacked column on phones so the sidebar
   never squeezes the detail pane into an unreadable sliver. */
.par-split-view {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: 16px;
}
.par-split-view.par-split-single {
  grid-template-columns: 1fr;
}

/* ════════════════════════════════════════════════════════════════
   MOBILE — everything below this line only applies on narrow
   screens (phones and small tablets in portrait). Desktop/tablet
   layout above is untouched.
══════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  .par-public-wrap { padding-bottom: 40px; }

  /* Top bar: let title/subtitle wrap under the icon instead of
     squeezing everything (incl. the priest's unit dropdown) into
     one unbreakable row that overflowed the screen. */
  .par-topbar {
    flex-wrap: wrap;
    padding: 12px 14px;
    row-gap: 8px;
  }
  .par-topbar-left { flex-wrap: wrap; }
  .par-topbar-sub { display: block; width: 100%; margin-top: 4px; }
  #par-unit-switcher { max-width: 100%; width: 100%; margin-top: 4px; }
  .par-logout-btn { flex-shrink: 0; }

  /* Nav: smaller touch targets so more tabs are visible before the
     user has to scroll sideways, and the scroll affordance is clearer. */
  .par-nav-item { padding: 8px 12px; min-width: 56px; font-size: .72em; }
  .par-nav-icon { font-size: 1.25em; }

  .par-officer-content { padding: 12px; }
  .par-section-title { font-size: 1.05em; }
  .par-card { padding: 13px; }

  /* Any list+detail split view stacks vertically on phones —
     this is what fixes the "260px sidebar crushing everything"
     problem on both the Families and Programmes tabs. */
  .par-split-view,
  .par-split-view.par-split-single {
    grid-template-columns: 1fr !important;
  }

  /* Stat boxes: 2 per row is already the base; just tighten padding. */
  .par-stat-box { padding: 12px 10px; }
  .par-stat-num { font-size: 1.6em; }

  /* Attendance step-form member rows: name/select/input were fighting
     for space in one row. Stack the status + reason fields under the
     name on narrow screens so nothing gets cut off or squashed. */
  .par-att-member-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .par-att-member-name { min-width: 0; width: 100%; }
  .par-att-status-sel { width: 100%; }
  .par-att-reason-inp { width: 100%; min-width: 0; }

  /* Family/member/celebration/magazine rows: allow the row to become
     two visual lines (label row, then action row) rather than clipping. */
  .par-family-row { flex-wrap: wrap; }
  .par-member-row > div:first-child,
  .par-celeb-row > div:first-child { width: 100%; }

  /* Member checkbox grid: one per row on very narrow screens so long
     names + relation text never get truncated. */
  .par-member-checkbox-grid { grid-template-columns: 1fr; }

  /* Two-column form field grids (date+name, ward+unit selectors)
     stack into one column so labels/inputs get full width instead
     of being squeezed to ~140px each. */
  .par-form-grid-2 { grid-template-columns: 1fr !important; }

  /* Any inline data table (participant lists, reports) needs to
     scroll horizontally instead of squeezing every column. */
  .par-scroll-x table { min-width: 420px; }

  /* Modals: use nearly the full width and cap height more tightly so
     the on-screen keyboard doesn't push buttons off-screen. */
  .par-public-modal { width: 94%; padding: 18px; max-height: 90vh; }

  /* Button groups (download/edit rows) already wrap via inline
     flex-wrap, but give them a touch more breathing room. */
  .par-btn-sm { padding: 6px 10px; font-size: .8em; }
}

@media (max-width: 400px) {
  /* Very small phones (e.g. older/small Android, iPhone SE) */
  .par-nav-item { min-width: 50px; padding: 7px 9px; }
  .par-nav-label { font-size: .95em; }
  .par-stat-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
}