/* =====================================================================
   MODERN MINIMALIST THEME  ·  Light + Neutral
   Overrides AdminLTE / Bootstrap for the Church CRM.
   Loaded last, so it wins the cascade. Single accent color.
   ===================================================================== */

:root {
  --bg:        #f5f6f8;   /* app background            */
  --surface:   #ffffff;   /* cards / panels            */
  --surface-2: #fafbfc;   /* subtle raised / table head*/
  --border:    #e6e8ec;   /* hairline borders          */
  --border-2:  #eef0f3;   /* lighter divider           */
  --text:      #1f2430;   /* primary text              */
  --text-mut:  #6b7280;   /* secondary text            */
  --text-soft: #9aa1ac;   /* tertiary / placeholders   */
  --accent:    #2f6fed;   /* single accent             */
  --accent-d:  #245ad1;   /* accent hover              */
  --accent-sf: #eaf1fe;   /* accent soft background    */
  --ok:        #2fa36b;
  --warn:      #d9822b;
  --danger:    #e0473c;
  --radius:    10px;
  --radius-sm: 8px;
  --shadow:    0 1px 2px rgba(16,24,40,.04), 0 1px 3px rgba(16,24,40,.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,.08);
  --font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
          "Helvetica Neue", Arial, sans-serif;
}

/* ---------- base ---------- */
body,
body.skin-blue,
.content-wrapper,
.wrapper {
  background: var(--bg) !important;
  color: var(--text);
  font-family: var(--font) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-size: 14px;
  line-height: 1.5;
}

h1,h2,h3,h4,h5,h6 { font-family: var(--font); color: var(--text); font-weight: 600; }
a { color: var(--accent); }
a:hover, a:focus { color: var(--accent-d); text-decoration: none; }
hr { border-top: 1px solid var(--border); }

/* ---------- header / top bar ---------- */
.skin-blue .main-header .navbar,
.main-header .navbar { background: var(--surface) !important; box-shadow: none; border-bottom: 1px solid var(--border); }
.skin-blue .main-header .logo,
.main-header .logo {
  background: var(--surface) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  font-weight: 700;
  letter-spacing: .2px;
  transition: none;
}
.skin-blue .main-header .logo:hover { background: var(--surface-2) !important; }
.skin-blue .main-header .logo b { color: var(--accent); }
.main-header .navbar .nav > li > a { color: var(--text-mut) !important; }
.main-header .navbar .nav > li > a:hover,
.main-header .navbar .nav > li > a:focus,
.main-header .navbar .nav .open > a { background: var(--surface-2) !important; color: var(--text) !important; }
.skin-blue .main-header .navbar .sidebar-toggle { color: var(--text-mut) !important; }
.skin-blue .main-header .navbar .sidebar-toggle:hover { background: var(--surface-2) !important; color: var(--text) !important; }
.navbar-nav > .user-menu .user-image { border: 1px solid var(--border); }

/* label chips in header */
.main-header .navbar .label { box-shadow: none; font-weight: 600; }

/* ---------- sidebar ---------- */
.skin-blue .main-sidebar,
.main-sidebar,
.skin-blue .wrapper { background: var(--surface) !important; }
.main-sidebar { border-right: 1px solid var(--border); }
.skin-blue .sidebar-menu > li.header {
  background: transparent !important;
  color: var(--text-soft) !important;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .8px;
  text-transform: uppercase;
  padding: 16px 18px 8px;
}
.skin-blue .sidebar-menu > li > a,
.sidebar-menu > li > a {
  color: var(--text-mut) !important;
  border-left: 3px solid transparent !important;
  font-weight: 500;
  padding: 11px 16px;
  border-radius: 0;
}
.skin-blue .sidebar-menu > li > a > .fa,
.sidebar-menu > li > a > .fa { color: var(--text-soft); width: 22px; }
.skin-blue .sidebar-menu > li:hover > a,
.skin-blue .sidebar-menu > li.active > a,
.skin-blue .sidebar-menu > li.menu-open > a {
  background: var(--accent-sf) !important;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
}
.skin-blue .sidebar-menu > li:hover > a > .fa,
.skin-blue .sidebar-menu > li.active > a > .fa { color: var(--accent); }
.skin-blue .treeview-menu { background: var(--surface-2) !important; }
.skin-blue .treeview-menu > li > a { color: var(--text-mut) !important; }
.skin-blue .treeview-menu > li.active > a,
.skin-blue .treeview-menu > li > a:hover { color: var(--accent) !important; }
.skin-blue .treeview-menu > li > a > .fa { color: var(--text-soft); font-size: 8px; }
.sidebar .user-panel { padding: 18px 10px 10px; }
.sidebar-menu .pull-right-container .fa-angle-left { color: var(--text-soft); }

/* ---------- content header ---------- */
.content-header { padding: 20px 22px 6px; }
.content-header > h1 { font-size: 20px; font-weight: 600; margin: 0; color: var(--text); }
.content-header > h1 > small { color: var(--text-soft); font-weight: 400; }
.content { padding: 8px 22px 22px; }

/* ---------- breadcrumbs ---------- */
.breadcrumb {
  background: transparent !important;
  padding: 0 0 12px 0 !important;
  margin: 0 0 4px 0 !important;
  font-size: 12.5px;
  border: 0;
  border-radius: 0;
}
.breadcrumb > li + li:before { content: "\203A"; color: var(--text-soft); }
.breadcrumb > .active { color: var(--text-mut); }

/* ---------- boxes / cards ---------- */
.box {
  background: var(--surface) !important;
  border: 1px solid var(--border) !important;
  border-top: 1px solid var(--border) !important;
  border-radius: var(--radius) !important;
  box-shadow: var(--shadow) !important;
}
.box.box-primary,.box.box-info,.box.box-success,.box.box-warning,.box.box-danger { border-top: 3px solid var(--accent) !important; }
.box.box-success { border-top-color: var(--ok) !important; }
.box.box-warning { border-top-color: var(--warn) !important; }
.box.box-danger  { border-top-color: var(--danger) !important; }
.box-header { color: var(--text); padding: 16px 18px; border-bottom: 1px solid var(--border-2); }
.box-header .box-title { font-size: 15px; font-weight: 600; }
.box-body { padding: 18px; }
.box-footer { background: var(--surface) !important; border-top: 1px solid var(--border-2); border-radius: 0 0 var(--radius) var(--radius); }

/* small stat / info boxes */
.small-box { border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; }
.small-box > .inner { padding: 18px; }
.info-box { border-radius: var(--radius); box-shadow: var(--shadow); background: var(--surface); }
.info-box-icon { border-radius: var(--radius) 0 0 var(--radius); }

/* ---------- buttons ---------- */
.btn {
  border-radius: var(--radius-sm) !important;
  font-weight: 500;
  border: 1px solid var(--border);
  box-shadow: none !important;
  padding: 7px 16px;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}
.btn-flat { border-radius: var(--radius-sm) !important; }
.btn-default { background: var(--surface); color: var(--text); border-color: var(--border); }
.btn-default:hover, .btn-default:focus { background: var(--surface-2); color: var(--text); border-color: var(--text-soft); }
.btn-primary { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; }
.btn-primary:hover, .btn-primary:focus { background: var(--accent-d) !important; border-color: var(--accent-d) !important; }
.btn-success { background: var(--ok) !important; border-color: var(--ok) !important; }
.btn-warning { background: var(--warn) !important; border-color: var(--warn) !important; color:#fff !important; }
.btn-danger  { background: var(--danger) !important; border-color: var(--danger) !important; }
.btn-info    { background: var(--accent) !important; border-color: var(--accent) !important; }
.btn-link    { color: var(--accent); border-color: transparent; }
.btn-xs { padding: 3px 9px; }
.btn-sm { padding: 5px 12px; }

/* ---------- forms ---------- */
.form-control,
input[type="text"], input[type="password"], input[type="email"],
input[type="number"], input[type="date"], textarea, select {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  box-shadow: none !important;
  color: var(--text);
  background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.form-control:focus,
input:focus, textarea:focus, select:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-sf) !important;
  outline: none;
}
.form-control::placeholder { color: var(--text-soft); }
label { color: var(--text); font-weight: 500; }
.control-label, .form-group > label { font-weight: 500; }
.help-block { color: var(--text-soft); font-size: 12.5px; }
.has-error .form-control { border-color: var(--danger) !important; }
.has-error .help-block, .errorMessage { color: var(--danger); }
.form-group { margin-bottom: 16px; }

/* select2 to match inputs */
.select2-container .select2-choice,
.select2-container-multi .select2-choices,
.select2-selection {
  border: 1px solid var(--border) !important;
  border-radius: var(--radius-sm) !important;
  background: var(--surface) !important;
  box-shadow: none !important;
}

/* ---------- tables / CGridView / CListView / DataTables ---------- */
.table, table.items, .grid-view table.items, .detail-view {
  background: var(--surface);
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
}
.table > thead > tr > th,
.grid-view table.items thead th,
table.items thead th {
  background: var(--surface-2) !important;
  color: var(--text-mut) !important;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .4px;
  border-bottom: 1px solid var(--border) !important;
  border-top: 0 !important;
  padding: 11px 14px;
}
.table > tbody > tr > td,
.grid-view table.items tbody td,
table.items tbody td {
  border-top: 0 !important;
  border-bottom: 1px solid var(--border-2) !important;
  padding: 11px 14px;
  color: var(--text);
  vertical-align: middle;
}
.grid-view table.items tbody tr:hover td,
.table-hover > tbody > tr:hover,
table.items tbody tr:hover { background: var(--accent-sf) !important; }
.grid-view table.items thead th a { color: var(--text-mut) !important; }
.grid-view .summary { color: var(--text-soft); font-size: 12.5px; margin-bottom: 10px; }
.detail-view th { background: var(--surface-2); color: var(--text-mut); font-weight: 600; width: 30%; }
.detail-view th, .detail-view td { border: 1px solid var(--border-2) !important; padding: 10px 14px; }

/* filter row inputs in grid */
.grid-view .filters input, .grid-view .filters select { border-radius: var(--radius-sm) !important; }

/* pagination / pager */
.pagination > li > a, .pagination > li > span,
.yiiPager li a {
  border: 1px solid var(--border);
  color: var(--text-mut);
  border-radius: var(--radius-sm) !important;
  margin: 0 3px;
  padding: 6px 11px;
  background: var(--surface);
}
.pagination > .active > a, .pagination > .active > span,
.yiiPager .selected a { background: var(--accent) !important; border-color: var(--accent) !important; color:#fff !important; }
.pagination > li > a:hover { background: var(--accent-sf); color: var(--accent); }
.yiiPager { padding: 0; margin-top: 12px; }

/* ---------- alerts / flashes ---------- */
.alert { border-radius: var(--radius-sm); border: 1px solid var(--border); box-shadow: none; }
.alert-success { background: #eaf7f0; border-color: #cdeede; color: #1c7a4f; }
.alert-danger, .alert-error { background: #fdeeed; border-color: #f7d3d0; color: #b3352c; }
.alert-info { background: var(--accent-sf); border-color: #cfe0fd; color: var(--accent-d); }
.alert-warning { background: #fdf4e7; border-color: #f6e2c1; color: #a86a1c; }

/* ---------- tabs / nav-pills ---------- */
.nav-tabs { border-bottom: 1px solid var(--border); }
.nav-tabs > li > a { border: 0; color: var(--text-mut); border-radius: 0; }
.nav-tabs > li.active > a,
.nav-tabs > li.active > a:hover,
.nav-tabs > li.active > a:focus {
  border: 0;
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  background: transparent;
}
.nav-tabs-custom { box-shadow: var(--shadow); border-radius: var(--radius); }
.nav-pills > li.active > a { background: var(--accent); }

/* ---------- modal ---------- */
.modal-content { border: 0; border-radius: var(--radius); box-shadow: var(--shadow-md); }
.modal-header { border-bottom: 1px solid var(--border-2); }
.modal-footer { border-top: 1px solid var(--border-2); }

/* ---------- login page ---------- */
/* custom.css paints the church photo on <html> at 55% top-left, which reads
   as a broken crop. Re-paint it on the body as a full-bleed cover with a
   dark scrim so the card stays legible over any part of the picture. */
body.login-page, body.hold-transition.login-page {
  background:
    linear-gradient(180deg, rgba(11,17,30,.72), rgba(11,17,30,.82)),
    url("images/app/church.jpg") center / cover no-repeat,
    #223047 !important;
  min-height: 100vh;
  display: flex; align-items: center; justify-content: center;
  padding: 28px 16px;
}
.login-box, .register-box {
  width: 100%; max-width: 400px; margin: 0 !important; float: none;
}
.login-box-body, .register-box-body {
  position: relative;
  background: var(--surface);
  border: 0; border-radius: 18px;
  box-shadow: 0 26px 64px rgba(6,11,22,.45);
  padding: 30px 28px 28px;
  animation: dashRise .5s cubic-bezier(.2,.7,.2,1) both;
}

.login-mark {
  display: block; width: 104px; height: auto;
  margin: 0 auto 14px;
}
.login-logo, .register-logo {
  margin: 0 0 22px; text-align: center; line-height: 1.35;
}
.login-logo b {
  display: block; font-size: 17px; font-weight: 700;
  color: var(--text); letter-spacing: -.1px;
}
.login-logo span {
  display: block; margin-top: 3px;
  font-size: 12.5px; font-weight: 600; color: var(--text-soft);
  text-transform: uppercase; letter-spacing: 1.2px;
}

.login-page .form-group { margin-bottom: 16px; }
.login-page label {
  display: block; margin-bottom: 7px;
  font-size: 13px; font-weight: 600; color: var(--text);
}
.login-page label .required { color: var(--danger); }

/* the icon is centred on the field, not on the whole form-group */
.login-field { position: relative; }
.login-field .form-control {
  width: 100%; height: auto; padding: 12px 42px 12px 14px;
  font-size: 14px; border-radius: var(--radius-sm) !important;
}
.login-field .login-ico {
  position: absolute; top: 50%; right: 14px; transform: translateY(-50%);
  color: var(--text-soft); font-size: 15px; pointer-events: none;
}
.login-field .form-control:focus + .login-ico { color: var(--accent); }
/* AdminLTE's own feedback icon is replaced by .login-ico */
.login-page .form-control-feedback { display: none !important; }

.login-page .errorMessage, .login-page .errorSummary {
  margin-top: 6px; font-size: 12.5px; color: var(--danger);
}

.login-actions { display: flex; gap: 10px; margin-top: 22px; }
.login-actions .btn {
  flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 12px 14px; font-size: 14px; font-weight: 600;
  border-radius: var(--radius-sm) !important;
}
.login-actions .btn .fa { font-size: 14px; }

/* QR scanner modal */
.login-page .modal-content { border-radius: 16px; overflow: hidden; }
.login-page .modal-body video { width: 100%; border-radius: 10px; background: #0d1117; }

@media (max-width: 480px) {
  body.login-page { padding: 18px 14px; align-items: flex-start; padding-top: 8vh; }
  .login-box-body, .register-box-body { padding: 24px 20px; border-radius: 16px; }
  .login-mark { width: 88px; }
  .login-logo b { font-size: 15.5px; }
  .login-logo span { font-size: 11.5px; }
  .login-actions { flex-direction: column; }
}

/* ---------- misc cleanup ---------- */
.content-wrapper, .right-side { min-height: 100%; }
.main-footer { background: var(--surface); border-top: 1px solid var(--border); color: var(--text-soft); }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d7dae0; border-radius: 8px; border: 2px solid var(--bg); }
::-webkit-scrollbar-thumb:hover { background: #c2c7d0; }
.text-muted, small.text-muted { color: var(--text-soft) !important; }

/* =====================================================================
   HEADERLESS LAYOUT  ·  full-height sidebar + bottom user block
   ===================================================================== */
.main-header { display: none !important; }
.content-wrapper, .main-footer { margin-top: 0 !important; }

.skin-blue .main-sidebar, .main-sidebar {
  position: fixed !important;
  top: 0; bottom: 0; left: 0;
  height: 100vh;
  width: 230px;
  padding-top: 0 !important;
  border-right: 1px solid var(--border);
  background: var(--surface) !important;
  z-index: 1030;
}
.main-sidebar .sidebar {
  height: 100%;
  overflow-y: auto;
  overflow-x: hidden;
  padding-bottom: 74px;   /* room for the pinned user block */
}

.sidebar-brand {
  display: flex; align-items: center; justify-content: center;
  padding: 20px 16px 16px;
  border-bottom: 1px solid var(--border-2);
}
.sidebar-brand img { max-width: 170px; height: auto; display: block; }

/* pinned bottom user block */
.sidebar-user {
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 66px;
  display: flex; align-items: center; gap: 11px;
  padding: 0 14px;
  background: var(--surface);
  border-top: 1px solid var(--border);
  border-right: 1px solid var(--border);
}
.su-avatar {
  flex: 0 0 40px; width: 40px; height: 40px; border-radius: 50%;
  background: var(--accent); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 17px; letter-spacing: .3px;
}
.su-name {
  flex: 1 1 auto; min-width: 0;
  font-size: 14px; font-weight: 600; color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.su-logout {
  flex: 0 0 auto; width: 36px; height: 36px; border-radius: 9px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-mut); font-size: 17px;
  transition: background .12s ease, color .12s ease;
}
.su-logout:hover { background: #fdeeed; color: var(--danger); }

/* active menu emphasis (works with .active added in sidebar.php) */
.skin-blue .sidebar-menu > li.active > a {
  background: var(--accent-sf) !important;
  color: var(--accent) !important;
  border-left-color: var(--accent) !important;
  font-weight: 600;
}
.skin-blue .sidebar-menu > li.active > a > .fa { color: var(--accent) !important; }

/* floating mobile toggle + overlay (hidden on desktop) */
.floating-nav-toggle {
  display: none;
  position: fixed; top: 12px; left: 12px; z-index: 1300;
  width: 44px; height: 44px; border-radius: 11px;
  align-items: center; justify-content: center;
  background: var(--surface); border: 1px solid var(--border);
  box-shadow: var(--shadow-md); color: var(--text); font-size: 18px;
}
.floating-nav-toggle:hover, .floating-nav-toggle:focus { color: var(--accent); }
.sidebar-overlay { display: none; }

@media (max-width: 768px) {
  .content-wrapper, .main-footer { margin-left: 0 !important; }
  .content-wrapper { padding-top: 56px; }   /* reserve space for floating toggle */
  .skin-blue .main-sidebar, .main-sidebar {
    transform: translateX(-100%);
    transition: transform .28s ease;
    box-shadow: 0 0 40px rgba(16,24,40,.18);
    /* must sit ABOVE .sidebar-overlay (1150), otherwise the dim layer covers
       the menu and swallows every tap */
    z-index: 1200;
  }
  body.sb-open .main-sidebar { transform: none; }
  .floating-nav-toggle { display: flex; }
  .sidebar-overlay {
    display: block; position: fixed; inset: 0;
    background: rgba(16,24,40,.42);
    opacity: 0; visibility: hidden; transition: opacity .28s ease, visibility .28s ease;
    z-index: 1150;
  }
  body.sb-open .sidebar-overlay { opacity: 1; visibility: visible; }
  .content-header { padding-left: 66px; }   /* clear the floating button */
  .sidebar-collapse-btn { display: none; }
}

/* =====================================================================
   SIDEBAR: compact fit, nice scrollbar, collapse (mini) mode
   ===================================================================== */
.skin-blue .main-sidebar, .main-sidebar { transition: width .22s ease, transform .28s ease; }
.content-wrapper, .main-footer { transition: margin-left .22s ease; }

.sidebar-brand { padding: 18px 12px 16px; }
.sidebar-brand img { max-width: 155px; }

/* tighter rows so the whole menu fits without scrolling */
.skin-blue .sidebar-menu > li > a, .sidebar-menu > li > a { padding: 9px 16px; }
.skin-blue .sidebar-menu > li.header { padding: 12px 16px 6px; }
.skin-blue .treeview-menu > li > a { padding: 7px 16px 7px 46px; }

/* subtle thin scrollbar only when it must scroll */
.main-sidebar .sidebar { scrollbar-width: thin; scrollbar-color: #d3d7de transparent; }
.main-sidebar .sidebar::-webkit-scrollbar { width: 6px; }
.main-sidebar .sidebar::-webkit-scrollbar-track { background: transparent; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb { background: #d3d7de; border-radius: 6px; border: 0; }
.main-sidebar .sidebar::-webkit-scrollbar-thumb:hover { background: #bcc2cc; }

/* collapse / expand arrow tab on the sidebar edge */
.sidebar-collapse-btn {
  position: absolute; top: 74px; right: -13px; z-index: 1045;
  width: 26px; height: 26px; padding: 0; border-radius: 50%;
  background: #fff; border: 1px solid var(--border); color: var(--text-mut);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  box-shadow: var(--shadow); font-size: 14px;
}
.sidebar-collapse-btn:hover { color: var(--accent); border-color: var(--accent); }
.sidebar-collapse-btn i { transition: transform .2s ease; }

/* the collapse tab is desktop-only — hide it on mobile (declared after the
   base rule so it actually wins the cascade) */
@media (max-width: 768px) {
  .sidebar-collapse-btn { display: none !important; }
}

@media (min-width: 769px) {
  body.sb-collapsed .main-sidebar { width: 68px; }
  body.sb-collapsed .content-wrapper, body.sb-collapsed .main-footer { margin-left: 68px !important; }
  body.sb-collapsed .sidebar-brand img { max-width: 48px; }
  body.sb-collapsed .sidebar-menu > li.header { display: none; }
  body.sb-collapsed .sidebar-menu > li > a > span,
  body.sb-collapsed .sidebar-menu > li > a > .pull-right-container { display: none; }
  body.sb-collapsed .sidebar-menu > li > a { text-align: center; padding: 11px 0; border-left-width: 3px; }
  body.sb-collapsed .sidebar-menu > li > a > .fa { width: auto; margin: 0; font-size: 18px; }
  body.sb-collapsed .sidebar-collapse-btn i { transform: rotate(180deg); }
  body.sb-collapsed .sidebar-user { padding: 0; justify-content: center; }
  body.sb-collapsed .sidebar-user .su-name, body.sb-collapsed .sidebar-user .su-logout { display: none; }
  /* flyout submenu on hover while collapsed */
  body.sb-collapsed .sidebar-menu > li.treeview { position: relative; }
  body.sb-collapsed .sidebar-menu .treeview-menu { display: none !important; }
  body.sb-collapsed .sidebar-menu > li.treeview:hover > .treeview-menu {
    display: block !important; position: absolute; left: 68px; top: 0; min-width: 200px;
    background: #fff; border: 1px solid var(--border); border-radius: 0 10px 10px 0;
    box-shadow: var(--shadow-md); padding: 6px 0;
  }
  body.sb-collapsed .sidebar-menu > li.treeview:hover > .treeview-menu > li > a { padding-left: 18px; }
}

/* =====================================================================
   THEME SELECT — custom dropdown that matches the theme
   ===================================================================== */
.theme-select { position: relative; display: inline-block; min-width: 190px; }
.theme-select .ts-native { display: none !important; }
.theme-select .ts-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: #fff; border: 1px solid var(--border); border-radius: var(--radius-sm);
  padding: 8px 12px; font-size: 14px; color: var(--text); cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.theme-select .ts-toggle:hover { border-color: var(--text-soft); }
.theme-select.open .ts-toggle { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); }
.theme-select .ts-toggle .fa { color: var(--text-soft); transition: transform .15s ease; }
.theme-select.open .ts-toggle .fa { transform: rotate(180deg); }
.theme-select .ts-menu {
  position: absolute; top: calc(100% + 6px); right: 0; left: 0; z-index: 1200;
  background: #fff; border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 6px; max-height: 288px; overflow-y: auto; display: none;
}
.theme-select.open .ts-menu { display: block; animation: tsIn .14s ease; }
@keyframes tsIn { from { opacity: 0; transform: translateY(-4px);} to { opacity: 1; transform: none; } }
.theme-select .ts-opt {
  padding: 8px 11px; border-radius: 7px; font-size: 13.5px; color: var(--text);
  cursor: pointer; white-space: nowrap;
}
.theme-select .ts-opt:hover { background: var(--surface-2); }
.theme-select .ts-opt.sel { background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.theme-select .ts-menu::-webkit-scrollbar { width: 8px; }
.theme-select .ts-menu::-webkit-scrollbar-track { background: transparent; }
.theme-select .ts-menu::-webkit-scrollbar-thumb { background: #d3d7de; border-radius: 8px; }

/* =====================================================================
   LIST PAGES  ·  dashboard-style header + data panel + mobile cards
   Used by Church Registration List / Church Subscription List and any
   other CGridView page that opts in with .page-head / .data-panel.
   ===================================================================== */

/* the layout wraps every page in .box — on list pages we want a flat
   canvas and let .data-panel be the only card, exactly like the dashboard */
.content-wrapper .content .box:has(.data-panel),
.content-wrapper .content .box:has(.page-head) {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
.content-wrapper .content .box:has(.data-panel) > .box-body,
.content-wrapper .content .box:has(.page-head) > .box-body { padding: 0 !important; }
/* fallback for browsers without :has() — opt in via body class */
body.list-page .content-wrapper .content .box { background: transparent !important; border: 0 !important; box-shadow: none !important; }
body.list-page .content-wrapper .content .box > .box-body { padding: 0 !important; }

/* the legacy views wrap everything in bootstrap columns; on the rebuilt
   pages those float and pad against the new full-width layout */
body.list-page .box-body > .col-md-12,
body.list-page .box-body > .row > .col-md-12,
body.form-page .box-body > .col-md-12,
body.form-page .box-body > .col-md-10,
body.form-page .box-body > .row > .col-md-12 {
  width: 100% !important; float: none !important; padding: 0 !important;
}
/* the user form wraps itself in col-md-10 and trails a col-md-4 spacer;
   app-ui.js tags them so this works without :has() */
body.form-page .content .fp-formwrap {
  width: 100% !important; float: none !important; padding: 0 !important;
}
body.list-page .box-body > .row, body.form-page .box-body > .row { margin: 0; }

/* list pages hide the duplicated AdminLTE section header and the breadcrumb
   trail — the .page-head H1 already says where you are */
body.list-page .content-wrapper > .content-header { display: none; }
body.list-page .content-wrapper .content .box > .breadcrumb { display: none !important; }

/* shared entrance animations (also used by the dashboard) */
@keyframes dashRise { from { opacity:0; transform:translateY(16px); } to { opacity:1; transform:none; } }
@keyframes dashFade { from { opacity:0; } to { opacity:1; } }

/* ---------- page head ---------- */
.page-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin: 2px 0 20px;
  animation: dashFade .5s ease both;
}
.page-head .ph-text h1 { font-size: 24px; font-weight: 700; margin: 0; letter-spacing: -.2px; color: var(--text); }
.page-head .ph-text p { margin: 4px 0 0; color: var(--text-mut); font-size: 14px; }
.page-head .ph-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.page-head .ph-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--accent); color: #fff !important; border: 1px solid var(--accent);
  border-radius: var(--radius-sm); padding: 10px 18px;
  font-size: 14px; font-weight: 600; text-decoration: none;
  box-shadow: 0 1px 3px rgba(16,24,40,.10);
  transition: background .15s ease, border-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.page-head .ph-btn:hover { background: var(--accent-d); border-color: var(--accent-d); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(47,111,237,.24); }
.page-head .ph-btn.is-ok { background: var(--ok); border-color: var(--ok); }
.page-head .ph-btn.is-ok:hover { background: #24855a; border-color: #24855a; box-shadow: 0 8px 18px rgba(47,163,107,.24); }
.page-head .ph-btn.is-danger { background: var(--danger); border-color: var(--danger); }
.page-head .ph-btn.is-danger:hover { background: #c53a30; border-color: #c53a30; box-shadow: 0 8px 18px rgba(224,71,60,.24); }

/* section rule, same as the dashboard */
.page-section { display: flex; align-items: center; gap: 10px; margin: 6px 0 14px; }
.page-section h2 { font-size: 16px; font-weight: 600; margin: 0; }
.page-section .line { flex: 1; height: 1px; background: var(--border); }
.page-section .pill { font-size: 12px; color: var(--accent); background: var(--accent-sf); border-radius: 20px; padding: 3px 11px; font-weight: 600; }

/* ---------- data panel (the card the grid sits in) ---------- */
.data-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.05);
  overflow: hidden; animation: dashRise .55s cubic-bezier(.2,.7,.2,1) both;
}
.data-panel .dp-body { padding: 0; }
.data-panel .grid-view { border: 0; background: transparent; padding: 0; margin: 0; }
.data-panel .grid-view table.items { margin: 0; border: 0; }
.data-panel .grid-view table.items tbody tr:last-child td { border-bottom: 0 !important; }

/* Safety net: an IndexColumn (#) or a button column left without an explicit
   width would otherwise claim a share of the leftover space under
   table-layout:fixed and end up enormous. */
.data-panel .grid-view table.items th:not([style*="width"]).col-index,
.data-panel .grid-view table.items td.col-index { width: 60px; text-align: center; }
.data-panel .grid-view table.items td.button-column,
.data-panel .grid-view table.items th.button-column { text-align: center; white-space: nowrap; }

/* grid chrome */
.grid-view { background: transparent; }
.grid-view table.items thead th { white-space: nowrap; }
.grid-view .filters td { background: var(--surface-2); padding: 8px 10px !important; border-bottom: 1px solid var(--border) !important; }
.grid-view .filters input, .grid-view .filters select {
  width: 100%; font-size: 13px; padding: 6px 9px;
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important; background: #fff;
}
.grid-view .summary { color: var(--text-soft); font-size: 12.5px; margin: 0; padding: 12px 18px 0; text-align: left; }
.grid-view .pager, .grid-view .yiiPager {
  padding: 14px 18px; margin: 0;
  display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px;
  list-style: none;
}
.grid-view .yiiPager li { display: inline-flex; float: none; margin: 0; }
.grid-view .yiiPager li a, .grid-view .yiiPager li span {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; height: 36px; padding: 0 10px; margin: 0;
  border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text-mut); font-size: 13.5px; line-height: 1;
}
.grid-view .yiiPager li a:hover { background: var(--accent-sf); color: var(--accent); border-color: #cfe0fd; }
.grid-view .yiiPager li.selected a { background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important; font-weight: 600; }
.grid-view .yiiPager li.hidden a, .grid-view .yiiPager li.hidden span { opacity: .4; pointer-events: none; }
.grid-view .empty { padding: 34px 18px; text-align: center; color: var(--text-soft); }

/* a phone must never scroll sideways because of a stray fixed width */
@media (max-width: 768px) {
  body.form-page .content form input,
  body.form-page .content form select,
  body.form-page .content form textarea,
  body.form-page .content form .form-control,
  body.form-page .content form .app-select,
  body.form-page .content form .select2-container {
    max-width: 100% !important; width: 100% !important;
  }
  body.form-page .box-body, body.form-page .content > section { min-height: 0 !important; }
}

/* legacy scroll wrappers must not reintroduce the sideways scrollbar */
.table-responsive, .grid-view.table-scroll, .table-scroll { overflow: visible !important; width: auto !important; }
/* NB: no overflow on .content — anything other than visible turns it into a
   clipping context and cuts off dropdown menus and hover panels. Sideways
   scrolling is prevented by the fixed table layout and the width caps. */

/* no sideways scrolling — the grid always fits its panel and wraps instead.
   Column widths come from each column's headerHtmlOptions percentage. */
.data-panel .dp-scroll { overflow-x: visible; width: 100%; }
.data-panel .grid-view table.items { table-layout: fixed; width: 100%; max-width: 100%; }
.data-panel .grid-view table.items th,
.data-panel .grid-view table.items td { overflow-wrap: break-word; word-break: break-word; }
.data-panel .grid-view table.items thead th { white-space: normal; }

/* narrower padding + type so six or eight columns sit comfortably */
.data-panel .grid-view table.items thead th { padding: 10px 12px; font-size: 11.5px; }
.data-panel .grid-view table.items tbody td { padding: 10px 12px; font-size: 13.5px; }

/* action icons shouldn't force the column wide */
.data-panel .grid-view table.items td .btn { padding: 5px 9px; }
.data-panel .grid-view table.items td a .fa { margin: 0 6px 0 0 !important; font-size: 16px !important; }

/* on a small laptop the least-critical columns bow out before scrolling does */
@media (max-width: 1180px) {
  .data-panel .grid-view table.items thead th { font-size: 11px; letter-spacing: .2px; }
  .data-panel .grid-view table.items tbody td { font-size: 13px; padding: 9px 10px; }
}

/* cells synthesized by grid-mobile.js exist only in card mode */
@media (min-width: 769px) {
  .grid-view table.items td.gm-synth,
  .grid-view table.items td.gm-more { display: none !important; }
}


/* =====================================================================
   MOBILE  ·  every grid row becomes a card
   ===================================================================== */
@media (max-width: 768px) {
  .page-head { margin-bottom: 16px; }
  .page-head .ph-text h1 { font-size: 20px; }
  .page-head .ph-actions { width: 100%; }
  .page-head .ph-btn { flex: 1; justify-content: center; }

  .data-panel { border-radius: 14px; background: transparent; border: 0; box-shadow: none; overflow: visible; }
  .data-panel .dp-scroll { overflow-x: visible; }
  .data-panel .grid-view table.items { table-layout: auto; }

  /* strip table semantics -> stacked cards */
  .grid-view table.items,
  .grid-view table.items tbody,
  .grid-view table.items tr,
  .grid-view table.items td { display: block; width: 100% !important; }
  .grid-view table.items thead { display: none; }

  .grid-view table.items tbody tr {
    display: flex !important; flex-wrap: wrap; align-items: center;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 14px; padding: 4px 2px; margin-bottom: 10px;
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
  }
  /* field rows span the card; the footer bits sit side by side */
  .grid-view table.items tbody td { flex: 1 1 100%; }
  .grid-view table.items tbody td.gm-more,
  .grid-view table.items tbody td.dp-actions { flex: 0 0 auto; }
  .grid-view table.items tbody tr:hover td,
  .grid-view table.items tbody tr:hover { background: var(--surface) !important; }

  .grid-view table.items tbody td {
    display: flex !important; align-items: flex-start; justify-content: space-between; gap: 14px;
    text-align: right !important; width: auto !important;
    padding: 7px 12px !important;
    border: 0 !important; border-bottom: 1px solid var(--border-2) !important;
    font-size: 13.5px; word-break: break-word;
  }
  .grid-view table.items tbody td:last-child { border-bottom: 0 !important; }
  .grid-view table.items tbody td:before {
    content: attr(data-label);
    flex: 0 0 40%; text-align: left;
    color: var(--text-mut); font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
    padding-top: 2px;
  }
  /* repeated value from a merged (rowspan) cell */
  .grid-view table.items tbody td.gm-synth { color: var(--text-mut); }

  /* rows with no label (e.g. the row index) collapse the label column */
  .grid-view table.items tbody td[data-label=""]:before,
  .grid-view table.items tbody td:not([data-label]):before { display: none; }

  /* --- compact card: secondary fields hide behind "More details" --- */
  .grid-view table.items tbody td.gm-extra { display: none !important; }
  .grid-view table.items tbody tr.gm-open td.gm-extra { display: flex !important; }
  .grid-view table.items tbody tr.gm-open td.gm-blank { display: none !important; }

  .grid-view table.items tbody td.gm-more {
    display: flex !important; align-items: center;
    padding: 6px 12px !important; border-bottom: 0 !important;
  }
  .grid-view table.items tbody td.gm-more:before { display: none; }
  .gm-more-btn {
    background: none; border: 0; padding: 0;
    color: var(--accent); font-size: 13px; font-weight: 600; cursor: pointer;
  }
  .gm-more-btn .fa { margin-left: 5px; }

  /* first labelled cell reads as the card title */
  .grid-view table.items tbody td.is-card-title {
    background: var(--surface-2); border-radius: 10px; margin: 2px 3px 4px;
    font-weight: 600; font-size: 14.5px; padding: 9px 12px !important;
  }

  /* the row number is noise on a phone card */
  .grid-view table.items tbody td[data-label="#"] { display: none !important; }

  /* --- action footer ---
     The action cells land together on the card's last line. Turn the raw
     icon links into evenly sized tap targets and neutralise the inline
     margins the views set on them (style="margin:15px"). */
  .grid-view table.items tbody td.dp-actions {
    width: auto !important; margin-left: auto;
    align-items: center; justify-content: flex-end; gap: 8px;
    border-bottom: 0 !important;
    padding: 10px !important;
  }
  .grid-view table.items tbody td.dp-actions:before { display: none; }

  .grid-view table.items tbody td.dp-actions > a,
  .grid-view table.items tbody td.dp-actions > button,
  .grid-view table.items tbody td.dp-actions > .btn {
    display: inline-flex !important; align-items: center; justify-content: center;
    width: 40px; height: 40px; padding: 0 !important; margin: 0 !important;
    border: 1px solid var(--border); border-radius: 10px;
    background: var(--surface); line-height: 1; vertical-align: middle;
  }
  .grid-view table.items tbody td.dp-actions > a:active,
  .grid-view table.items tbody td.dp-actions > button:active { background: var(--surface-2); }

  /* icons come through as <i> or as CButtonColumn's <img> */
  .grid-view table.items tbody td.dp-actions .fa {
    margin: 0 !important; font-size: 17px !important; line-height: 1;
  }
  .grid-view table.items tbody td.dp-actions img {
    width: 17px; height: 17px; margin: 0 !important; display: block;
  }
  /* coloured buttons keep their fill */
  .grid-view table.items tbody td.dp-actions > .btn-danger {
    background: var(--danger); border-color: var(--danger); color: #fff;
  }

  /* the last field row above the footer keeps its divider, the footer doesn't */
  .grid-view table.items tbody td.gm-more { border-bottom: 0 !important; }

  /* filter row -> always-visible card (there is no toggle) */
  .grid-view table.items tbody tr.filters {
    display: block; background: var(--surface); border: 1px solid var(--border);
  }
  .grid-view table.items tbody tr.filters td { background: transparent !important; }
  .grid-view table.items tbody tr.filters td:before { align-self: center; padding-top: 0; }
  .grid-view table.items tbody tr.filters td input,
  .grid-view table.items tbody tr.filters td select { flex: 1 1 auto; min-width: 0; }
  /* filter cells with nothing to filter add noise on a phone */
  .grid-view table.items tbody tr.filters td:empty,
  .grid-view table.items tbody tr.filters td.gm-nofilter { display: none !important; }

  .grid-view .summary { padding: 0 2px 10px; text-align: center; }

  /* pager: a single tidy centred band that wraps cleanly */
  .grid-view .pager, .grid-view .yiiPager {
    justify-content: center; gap: 5px;
    padding: 12px 10px; margin-top: 4px;
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  }
  .grid-view .yiiPager li a, .grid-view .yiiPager li span {
    min-width: 34px; height: 34px; padding: 0 8px; font-size: 13px;
  }
}

@media (max-width: 420px) {
  .grid-view table.items tbody td { flex-direction: column; align-items: flex-start; text-align: left !important; gap: 3px; }
  .grid-view table.items tbody td:before { flex: none; }
}

@media (prefers-reduced-motion: reduce) {
  .page-head, .data-panel { animation: none !important; }
}

/* =====================================================================
   FORM PAGES  ·  create / update screens
   app-ui.js adds body.form-page; the legacy views use col-md-5 / col-md-2
   spacer columns, which we replace with a real responsive grid.
   ===================================================================== */
body.form-page .content-wrapper .content .box {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.form-page .content-wrapper .content .box > .box-body { padding: 0 !important; }
body.form-page .content-wrapper > .content-header { display: none; }
body.form-page .content-wrapper .content .box > .breadcrumb { display: none !important; }

/* the form sits in one card, like .data-panel */
body.form-page .content form {
  max-width: 1100px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; box-shadow: 0 1px 3px rgba(16,24,40,.05);
  padding: 24px; margin: 0;
  animation: dashRise .55s cubic-bezier(.2,.7,.2,1) both;
}

/* Neutralise the bootstrap column scaffolding inside forms.
   The registration form wraps every field in one floated .col-md-7, which
   collapsed the card to a thin bar and let the fields spill out below it —
   so clear the floats and let the wrapper fill the card. */
body.form-page .content form:after { content: ""; display: table; clear: both; }
body.form-page .content form > .row,
body.form-page .content form > [class*="col-md-"],
body.form-page .content form > [class*="col-sm-"] {
  float: none !important; width: 100% !important; margin: 0; padding: 0;
}

/* A column holding a stack of fields becomes two readable columns.
   .fp-grid / .fp-wide are set by app-ui.js. */
body.form-page .content form .fp-grid {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 28px;            /* real row gap, not just the item margin */
}
body.form-page .content form .fp-grid > .form-group { min-width: 0; margin-bottom: 0; }

/* Bootstrap's .form-horizontal .form-group sets margin-left/right:-15px, which
   makes every field 30px wider than its column — that was the overflow and the
   cramped look, worst on a phone. */
body.form-page .content form .form-group,
body.form-page .content form.form-horizontal .form-group {
  margin-left: 0 !important; margin-right: 0 !important;
}
body.form-page .content form .fp-grid > .form-group.fp-wide { grid-column: 1 / -1; }
/* JS toggles these section groups with inline display:block — keep them in flow */
body.form-page .content form .fp-grid > .form-group[style*="display: block"],
body.form-page .content form .fp-grid > .form-group[style*="display:block"] { display: block !important; }

/* .fp-row is set by app-ui.js on rows that really hold fields, so plugin
   widgets that also use .row keep their own column layout */
body.form-page .content form .fp-row {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 32px; margin: 0;
}
body.form-page .content form .fp-row > .form-group,
body.form-page .content form .fp-row > [class*="col-"] > .form-group { margin-bottom: 0; min-width: 0; }
body.form-page .content form .fp-row > .form-group.fp-wide { grid-column: 1 / -1; }
body.form-page .content form .fp-row > [class*="col-md-"],
body.form-page .content form .fp-row > [class*="col-sm-"] {
  width: 100% !important; float: none !important; padding: 0 !important;
}
/* Spacer columns and clearfix divs fake gutters in the legacy markup. As grid
   items they take real cells and push the fields out of alignment — app-ui.js
   tags them .fp-spacer. (:empty alone misses them: they contain &nbsp;.) */
body.form-page .content .fp-spacer,
body.form-page .content form .fp-spacer,
body.form-page .content form .clearfix,
body.form-page .content form .fp-row > .col-md-2:empty,
body.form-page .content form .fp-row > .col-md-1:empty { display: none !important; }

/* full-width fields opt out of the two-column grid */
body.form-page .content form .fp-row > .col-md-12,
body.form-page .content form .fp-row > .col-md-10 { grid-column: 1 / -1; }

body.form-page .content form .form-group { margin-bottom: 18px; }
body.form-page .content form label {
  display: block; font-size: 13px; font-weight: 600; color: var(--text); margin-bottom: 7px;
}
body.form-page .content form label .required { color: var(--danger); }
body.form-page .content form .form-control,
body.form-page .content form input[type="text"],
body.form-page .content form input[type="password"],
body.form-page .content form input[type="email"],
body.form-page .content form input[type="number"],
body.form-page .content form input[type="date"],
body.form-page .content form select,
body.form-page .content form textarea {
  width: 100%; padding: 9px 12px; font-size: 14px; height: auto;
}

/* section titles inside long forms */
body.form-page .content form legend,
body.form-page .content form h3,
body.form-page .content form h4 {
  font-size: 14px; font-weight: 600; color: var(--text);
  border: 0; border-bottom: 1px solid var(--border-2);
  padding: 0 0 8px; margin: 26px 0 16px; grid-column: 1 / -1;
}

/* the submit row */
body.form-page .content form .form-actions,
body.form-page .content form .buttons {
  display: flex; gap: 10px; flex-wrap: wrap;
  padding-top: 20px; margin-top: 6px; border-top: 1px solid var(--border-2);
}
body.form-page .content form .btn { padding: 9px 22px; font-weight: 600; }

body.form-page .content .errorSummary {
  background: #fdeeed; border: 1px solid #f7d3d0; color: #b3352c;
  border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 18px;
}
body.form-page .content .errorSummary p { font-weight: 600; margin: 0 0 6px; }
body.form-page .content .errorSummary ul { margin: 0; padding-left: 18px; }

@media (max-width: 768px) {
  body.form-page .content { padding: 8px 14px 22px; }
  body.form-page .content form {
    padding: 16px 14px; border-radius: 14px; max-width: none; width: 100%;
  }
  body.form-page .content form .fp-row,
  body.form-page .content form .fp-grid { grid-template-columns: 1fr; gap: 16px; }
  body.form-page .content form .fp-grid > .form-group,
  body.form-page .content form .fp-row > .form-group,
  body.form-page .content form .fp-row > [class*="col-"] > .form-group { margin-bottom: 0; }
  body.form-page .content form .btn { flex: 1; text-align: center; }
}

/* =====================================================================
   REPORT PAGES  ·  filter bar, KPI cards, results table
   (the view no longer carries its own <style> block)
   ===================================================================== */
.spr-filter {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 18px; margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  animation: dashFade .5s ease both;
}
.spr-fields {
  display: grid; gap: 14px;
  grid-template-columns: repeat(4, minmax(0, 1fr)) auto;
  align-items: end;
}
.spr-filter .form-group { margin: 0; }
.spr-filter label {
  display: block; margin-bottom: 6px;
  font-size: 12px; font-weight: 600; color: var(--text-mut);
  text-transform: uppercase; letter-spacing: .3px;
}
.spr-filter .form-control { width: 100%; height: auto; padding: 9px 12px; font-size: 14px; }
.spr-actions { display: flex; gap: 10px; align-items: center; }
.spr-actions .btn { padding: 9px 18px; font-weight: 600; white-space: nowrap; }

/* KPI cards — same language as the dashboard tiles */
.spr-cards {
  display: grid; gap: 14px; margin-bottom: 20px;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.spr-card {
  position: relative; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; padding: 16px 18px;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  animation: dashRise .55s cubic-bezier(.2,.7,.2,1) both;
  transition: transform .18s ease, box-shadow .18s ease;
}
.spr-card:hover { transform: translateY(-3px); box-shadow: 0 10px 24px rgba(16,24,40,.10); }
.spr-card .lbl {
  font-size: 12px; font-weight: 600; color: var(--text-mut);
  text-transform: uppercase; letter-spacing: .3px;
}
.spr-card .val { margin-top: 8px; font-size: 24px; font-weight: 700; color: var(--text); line-height: 1.1; }
.spr-card:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; }
.spr-card.total:before { background: var(--accent); }
.spr-card.cash:before  { background: var(--ok); }
.spr-card.gpay:before  { background: var(--warn); }
.spr-card.recs:before  { background: var(--text-soft); }

.spr-count { color: var(--text-soft); font-size: 12.5px; font-weight: 600; }

/* results table */
.spr-table { width: 100%; table-layout: fixed; border-collapse: separate; border-spacing: 0; }
.spr-table th, .spr-table td { overflow-wrap: break-word; word-break: break-word; }
.spr-table thead th {
  background: var(--surface-2); color: var(--text-mut);
  font-size: 11.5px; font-weight: 600; text-transform: uppercase; letter-spacing: .4px;
  padding: 11px 14px; text-align: left;
  border-bottom: 1px solid var(--border) !important;
}
.spr-table tbody td {
  padding: 11px 14px; color: var(--text); vertical-align: middle;
  border-bottom: 1px solid var(--border-2);
}
.spr-table tbody tr:last-child td { border-bottom: 0; }
.spr-table tbody tr:hover td { background: var(--accent-sf); }
.spr-table td.amt, .spr-table th.amt { text-align: right; font-variant-numeric: tabular-nums; }
.spr-table .col-idx { width: 52px; color: var(--text-soft); }
.spr-empty { padding: 34px 18px; text-align: center; color: var(--text-soft); }

@media (max-width: 1100px) {
  .spr-fields { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .spr-actions { grid-column: 1 / -1; }
}

@media (max-width: 768px) {
  .spr-filter { padding: 14px; border-radius: 14px; }
  .spr-fields { grid-template-columns: 1fr; gap: 12px; }
  .spr-actions .btn { flex: 1; text-align: center; }
  .spr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .spr-card { padding: 14px; border-radius: 12px; }
  .spr-card .val { font-size: 19px; }

  /* the results table becomes cards, labelled by app-ui.js */
  .spr-table { table-layout: auto; }
  .spr-table, .spr-table tbody, .spr-table tr, .spr-table td { display: block; width: 100%; }
  .spr-table thead { display: none; }
  .spr-table tbody tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
    margin-bottom: 10px; padding: 4px 2px;
    box-shadow: 0 1px 3px rgba(16,24,40,.05);
  }
  .spr-table tbody tr:hover td { background: none; }
  .spr-table tbody td {
    display: flex !important; justify-content: space-between; align-items: flex-start; gap: 14px;
    text-align: right !important; padding: 8px 12px !important;
    border-bottom: 1px solid var(--border-2) !important; font-size: 13.5px;
  }
  .spr-table tbody td:last-child { border-bottom: 0 !important; }
  .spr-table tbody td:before {
    content: attr(data-label); flex: 0 0 42%; text-align: left;
    color: var(--text-mut); font-size: 11.5px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px;
  }
  /* the row number adds nothing on a phone */
  .spr-table tbody td.col-idx { display: none !important; }
  .spr-table tbody td.amt { font-weight: 700; }
  .spr-empty { display: block !important; }
  .spr-empty:before { display: none !important; }
}

@media (max-width: 420px) {
  .spr-cards { grid-template-columns: 1fr; }
}

/* =====================================================================
   jQUERY MOBILE CONTAINMENT
   The Add Subscription screen loads jQuery Mobile for the month picker.
   jqm-mmp.js now enhances only its own container, but jQM's stylesheet is
   still on the page — so pin the app chrome and form controls back to the
   theme in case any .ui-* class leaks onto them.
   ===================================================================== */
/* NB: this rule is desktop-only. It used to apply at every width, and because
   it is more specific than the plain .sidebar-collapse-btn hide rule it kept
   the arrow visible (poking out at x=0) once the sidebar slid off-screen. */
@media (min-width: 769px) {
.main-sidebar .sidebar-collapse-btn,
.main-sidebar .sidebar-collapse-btn.ui-btn {
  position: absolute !important; top: 74px !important; right: -13px !important;
  width: 26px !important; height: 26px !important; min-width: 0 !important;
  padding: 0 !important; margin: 0 !important;
  display: flex !important; align-items: center; justify-content: center;
  background: #fff !important; color: var(--text-mut) !important;
  border: 1px solid var(--border) !important; border-radius: 50% !important;
  font-size: 14px !important; text-shadow: none !important; box-shadow: var(--shadow) !important;
}
}
/* belt and braces: nothing brings it back on a phone */
@media (max-width: 768px) {
  .sidebar-collapse-btn,
  .main-sidebar .sidebar-collapse-btn,
  .main-sidebar .sidebar-collapse-btn.ui-btn { display: none !important; }
}
.main-sidebar .ui-btn, .sidebar-user .ui-btn, .page-head .ui-btn {
  text-shadow: none !important; box-shadow: none !important;
}

/* the picker's own controls keep jQM styling; everything else does not */
body .content .ui-btn:not(#mmp .ui-btn):not(#mmp-header .ui-btn) { text-shadow: none; }

body.form-page .content form .ui-input-text,
body.form-page .content form .ui-select {
  border: 0 !important; background: transparent !important;
  box-shadow: none !important; margin: 0 !important;
}
body.form-page .content form .ui-input-text input,
body.form-page .content form select {
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  background: var(--surface) !important; color: var(--text) !important;
  font-weight: 400 !important; text-shadow: none !important;
}

/* ---------- month picker ----------
   jQuery Mobile turns each [data-role=controlgroup] into
     fieldset.ui-controlgroup > div.ui-controlgroup-controls > .mmp-month
   and that inner wrapper is inline-block, so it shrinks to its text no matter
   what width the outer fieldset has. Every level has to be told to stretch —
   and the rules are written to work whether or not jQM added the wrapper. */
#mmp { width: 100%; margin: 4px 0 18px; text-align: left !important; }
#mmp, #mmp * { box-sizing: border-box; }

/* every container level goes full width */
#mmp #mmp-header,
#mmp fieldset,
#mmp .ui-controlgroup {
  display: flex !important;
  width: 100% !important; max-width: none !important;
  float: none !important;
  margin: 0 0 8px !important; padding: 0 !important; border: 0 !important;
}
#mmp .ui-controlgroup-controls {
  display: flex !important;
  flex: 1 1 100% !important; width: 100% !important;
  gap: 8px; margin: 0 !important; padding: 0 !important;
}
/* no wrapper (unenhanced): space the items directly */
#mmp fieldset > .mmp-month + .mmp-month,
#mmp #mmp-header > .ui-btn + .ui-btn { margin-left: 8px !important; }

/* the twelve month cells share the row evenly */
#mmp .mmp-month {
  flex: 1 1 0 !important;
  width: auto !important; min-width: 0 !important; max-width: none !important;
  float: none !important; margin: 0 !important; padding: 0 !important;
  border: 0 !important; background: none !important; box-shadow: none !important;
}
#mmp .mmp-month label {
  display: flex !important; align-items: center; justify-content: center;
  width: 100% !important; margin: 0 !important; padding: 14px 6px !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  background: var(--surface) !important; color: var(--text) !important;
  font-size: 14px; font-weight: 600; cursor: pointer;
  text-shadow: none !important; box-shadow: none !important;
}
#mmp .mmp-month label:hover { border-color: var(--accent) !important; color: var(--accent) !important; }

/* the real checkbox is visually replaced by its label */
#mmp .mmp-month input[type="checkbox"] {
  position: absolute !important; opacity: 0 !important; width: 1px; height: 1px; margin: 0;
}
#mmp .mmp-month input[type="checkbox"]:checked + label,
#mmp .mmp-month label.ui-checkbox-on {
  background: var(--accent) !important; border-color: var(--accent) !important; color: #fff !important;
}
#mmp .mmp-month label .ui-icon { display: none !important; }

/* year navigation: arrows hug the ends, the year fills the middle */
#mmp-header .ui-btn, #mmp-header button {
  float: none !important; margin: 0 !important;
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  background: var(--surface-2) !important; color: var(--text) !important;
  text-shadow: none !important; box-shadow: none !important;
}
#mmp-header #yearLabel {
  flex: 1 1 auto !important; width: auto !important;
  font-weight: 700; font-size: 15px; padding: 12px 10px !important; text-align: center;
}
#mmp-header #btnPreviousYear,
#mmp-header #btnNextYear { flex: 0 0 52px !important; width: 52px !important; }

@media (max-width: 768px) {
  #mmp .ui-controlgroup-controls { gap: 6px; }
  #mmp .mmp-month label { padding: 13px 4px !important; font-size: 13px; }
  #mmp-header #btnPreviousYear, #mmp-header #btnNextYear { flex: 0 0 44px !important; width: 44px !important; }
}

/* ---------- submit lock ---------- */
.btn.is-busy, .btn[disabled], .btn:disabled {
  opacity: .65; cursor: not-allowed; pointer-events: none;
}

/* ---------- Add Subscription: the member card fetched by registration no ---- */
#subscription_church { text-align: left !important; }
#subscription_church video { width: 100%; max-width: 320px; border-radius: 12px; background: #0d1117; }
#subscription_church .detail-view {
  width: 100%; border: 1px solid var(--border); border-radius: 14px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.05); background: var(--surface);
}
#subscription_church .detail-view th,
#subscription_church .detail-view td { border: 0 !important; border-bottom: 1px solid var(--border-2) !important; }
#subscription_church .detail-view tr:last-child th,
#subscription_church .detail-view tr:last-child td { border-bottom: 0 !important; }
#subscription_church .detail-view th { width: 42%; font-size: 12.5px; }
#subscription_church .detail-view td { font-size: 13.5px; }
#subscription_church .null { color: var(--text-soft); font-style: normal; }

@media (max-width: 991px) {
  #subscription_church { margin-top: 18px; float: none !important; }
}

/* lookup feedback in the member panel */
.reg-lookup-msg {
  padding: 16px 18px; border: 1px dashed var(--border); border-radius: 14px;
  color: var(--text-mut); font-size: 13.5px; background: var(--surface-2);
}
.reg-lookup-msg.is-error {
  border-style: solid; border-color: #f7d3d0; background: #fdeeed; color: #b3352c;
}

/* ---------- payment mode toggle (Add / Edit Subscription) ---------- */
.paymode-toggle { display: flex; gap: 12px; flex-wrap: wrap; }
.paymode-toggle .pm-opt {
  flex: 1 1 0; min-width: 120px;
  padding: 13px 18px; border: 1px solid var(--border); border-radius: var(--radius-sm);
  background: var(--surface-2); color: var(--text);
  font-size: 15px; font-weight: 600; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.paymode-toggle .pm-opt:hover { border-color: var(--accent); color: var(--accent); }
.paymode-toggle .pm-opt.is-on {
  background: var(--ok); border-color: var(--ok); color: #fff;
}
.paymode-toggle .pm-opt.is-on:hover { background: #24855a; border-color: #24855a; color: #fff; }

@media (max-width: 480px) {
  .paymode-toggle .pm-opt { flex: 1 1 100%; }
}

/* =====================================================================
   SUBSCRIPTION LIST  ·  compact Year/Month cell + payment chip
   ===================================================================== */

/* A row can cover three years of months. Show a range summary and reveal
   the full list in a panel on hover, so the column stays narrow. */
.ym-col { position: relative; }
.ym-cell { position: relative; display: block; }
.ym-cell .ym-short {
  display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: help; font-variant-numeric: tabular-nums;
}
.ym-cell .ym-count {
  display: inline-block; margin-left: 6px; padding: 1px 7px;
  background: var(--accent-sf); color: var(--accent);
  border-radius: 20px; font-size: 11px; font-weight: 700; vertical-align: 1px;
}
.ym-cell .ym-full {
  display: none; position: absolute; z-index: 60; left: 0; top: calc(100% + 6px);
  width: max-content; min-width: 240px; max-width: 380px;
  white-space: normal; word-break: break-word; line-height: 1.8;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow-md); padding: 10px 12px; font-size: 12.5px;
}
.ym-cell .ym-full em {
  display: block; margin-bottom: 6px; padding-bottom: 6px;
  border-bottom: 1px solid var(--border-2);
  color: var(--text-mut); font-style: normal; font-weight: 600;
  font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px;
}
.ym-cell:hover .ym-full { display: block; }
/* the last rows would clip their panel below the table */
.grid-view table.items tbody tr:nth-last-child(-n+2) .ym-cell .ym-full {
  top: auto; bottom: calc(100% + 6px);
}

/* payment mode chip */
.pay-chip {
  display: inline-block; padding: 3px 11px; border-radius: 20px;
  font-size: 12px; font-weight: 600; white-space: nowrap;
}
.pay-chip.is-cash { background: #eaf7f0; color: #1c7a4f; border: 1px solid #cdeede; }
.pay-chip.is-gpay { background: #fdf4e7; color: #a86a1c; border: 1px solid #f6e2c1; }

@media (max-width: 768px) {
  /* in card mode the value has room, so show the months inline */
  .ym-cell { min-width: 0; }
  .ym-cell .ym-short { white-space: normal; }
  .grid-view table.items tbody td.ym-col { align-items: flex-start; }
  .grid-view table.items tbody td.ym-col .ym-cell { flex: 1 1 auto; min-width: 0; text-align: right; }
  .ym-cell .ym-full {
    position: static; display: block;
    /* the desktop rule sets width:max-content for the hover panel — on a card
       that forces one long unbreakable line, so the months ran off the edge */
    width: auto; min-width: 0; max-width: none;
    white-space: normal; word-break: break-word; line-height: 1.7;
    border: 0; box-shadow: none; padding: 6px 0 0; background: none;
  }
  .ym-cell .ym-short { display: none; }
  .ym-cell .ym-full em { display: none; }
}

/* QR code placeholder when the GD extension is unavailable */
.qr-missing {
  padding: 18px 14px; text-align: center;
  border: 1px dashed var(--border); border-radius: 12px;
  background: var(--surface-2); color: var(--text-mut);
  font-size: 12.5px; line-height: 1.6;
}

/* =====================================================================
   BACK BUTTON  ·  sits at the head of every screen except the dashboard
   ===================================================================== */
.page-head { position: relative; }
.page-head .ph-back {
  order: -1; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 6px;
  margin: 0 14px 0 0; padding: 8px 14px 8px 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; color: var(--text-mut);
  font-size: 13.5px; font-weight: 600; cursor: pointer;
  box-shadow: 0 1px 2px rgba(16,24,40,.04);
  transition: color .15s ease, border-color .15s ease, transform .15s ease;
}
.page-head .ph-back:hover {
  color: var(--accent); border-color: var(--accent); transform: translateX(-2px);
}
.page-head .ph-back .fa { font-size: 15px; }
.page-head { align-items: center; }
.page-head .ph-text { flex: 1 1 auto; min-width: 0; }

@media (max-width: 768px) {
  /* title on the left, Back pinned top-right */
  .page-head {
    flex-wrap: wrap; gap: 0 10px; margin-bottom: 14px;
    align-items: flex-start;
  }
  .page-head .ph-text { flex: 1 1 auto; order: 1; min-width: 0; }
  .page-head .ph-back {
    order: 2; flex: 0 0 auto; margin: 0 0 0 auto;
    padding: 7px 13px 7px 9px; font-size: 13px;
  }
  .page-head .ph-actions { order: 3; flex: 1 1 100%; margin-top: 12px; }
  .page-head .ph-text h1 { font-size: 19px; }
  .page-head .ph-text p { font-size: 13px; }
}

/* =====================================================================
   IN-APP DIALOG  ·  replaces window.confirm()
   ===================================================================== */
.app-modal {
  position: fixed; inset: 0; z-index: 2000;
  display: none; align-items: center; justify-content: center; padding: 20px;
}
.app-modal.open { display: flex; }
.app-modal-backdrop {
  position: absolute; inset: 0;
  background: rgba(11,17,30,.55);
  animation: dashFade .16s ease both;
}
.app-modal-card {
  position: relative; width: 100%; max-width: 400px;
  background: var(--surface); border-radius: 18px;
  box-shadow: 0 26px 64px rgba(6,11,22,.4);
  padding: 26px 24px 20px; text-align: center;
  animation: dashRise .2s cubic-bezier(.2,.7,.2,1) both;
}
.app-modal .am-icon {
  width: 54px; height: 54px; margin: 0 auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%; background: #fdeeed; color: var(--danger); font-size: 22px;
}
.app-modal .am-title { margin: 0 0 8px; font-size: 17px; font-weight: 700; color: var(--text); }
.app-modal .am-text { margin: 0 0 22px; font-size: 14px; color: var(--text-mut); line-height: 1.55; }
.app-modal .am-actions { display: flex; gap: 10px; }
.app-modal .am-actions .btn {
  flex: 1 1 0; padding: 11px 16px; font-size: 14px; font-weight: 600;
  border-radius: var(--radius-sm) !important;
}
.app-modal .am-cancel { background: var(--surface); border: 1px solid var(--border); color: var(--text); }
.app-modal .am-cancel:hover { background: var(--surface-2); }
.app-modal .am-ok { background: var(--accent); border: 1px solid var(--accent); color: #fff; }
.app-modal .am-ok.is-danger { background: var(--danger); border-color: var(--danger); }
.app-modal .am-ok.is-danger:hover { background: #c53a30; border-color: #c53a30; }

@media (max-width: 480px) {
  .app-modal-card { padding: 22px 18px 16px; border-radius: 16px; }
  .app-modal .am-actions { flex-direction: column-reverse; }
}

/* =====================================================================
   THEMED DROPDOWN  ·  the native <select> stays, hidden, as the value source
   ===================================================================== */
.app-select { position: relative; display: block; width: 100%; }
.app-select .as-native {
  position: absolute !important; opacity: 0 !important;
  width: 100% !important; height: 100% !important;
  left: 0; top: 0; pointer-events: none; z-index: -1;
}
.app-select .as-toggle {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 10px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 9px 12px;
  font-size: 14px; color: var(--text); text-align: left; cursor: pointer;
  transition: border-color .12s ease, box-shadow .12s ease;
}
.app-select .as-toggle:hover { border-color: var(--text-soft); }
.app-select.open .as-toggle { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-sf); }
.app-select .as-toggle.is-placeholder .as-label { color: var(--text-soft); }
.app-select .as-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.app-select .as-toggle .fa { color: var(--text-soft); flex: 0 0 auto; transition: transform .15s ease; }
.app-select.open .as-toggle .fa { transform: rotate(180deg); }

/* While open the menu is moved to <body> and positioned fixed, so it must be
   styled on its own — it is no longer a descendant of .app-select. */
.as-menu {
  position: absolute; z-index: 2100; left: 0; right: 0; top: calc(100% + 6px);
  display: none; max-height: 280px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow-md); padding: 6px;
}
.as-menu.open { display: block; animation: tsIn .14s ease; }
.as-opt {
  padding: 9px 11px; border-radius: 8px; font-size: 13.5px; color: var(--text);
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.as-opt:hover { background: var(--surface-2); }
.as-opt.sel { background: var(--accent-sf); color: var(--accent); font-weight: 600; }
.as-opt.is-placeholder { color: var(--text-soft); }
.as-menu::-webkit-scrollbar { width: 8px; }
.as-menu::-webkit-scrollbar-thumb { background: #d3d7de; border-radius: 8px; }

/* grid filter row: menus must escape the cell */
.grid-view table.items .filters td { overflow: visible; }
.grid-view table.items .filters .as-toggle { padding: 6px 10px; font-size: 13px; }

@media (max-width: 768px) {
  /* a phone gets bigger targets and a menu that can use the full width */
  .app-select .as-toggle { padding: 11px 13px; font-size: 14px; }
  .as-opt { padding: 12px 12px; font-size: 14px; }
  .as-menu { max-height: 60vh; }
}

/* =====================================================================
   VIEW (record) PAGES
   ===================================================================== */
body.view-page .content-wrapper .content .box {
  background: transparent !important; border: 0 !important; box-shadow: none !important;
}
body.view-page .content-wrapper .content .box > .box-body { padding: 0 !important; }
body.view-page .content-wrapper > .content-header { display: none; }
body.view-page .content-wrapper .content .box > .breadcrumb { display: none !important; }
/* Bootstrap already lays these out (col-md-10 + col-md-2 side by side,
   stacked on mobile). Overriding their width/float and then re-gridding the
   parent made the record table and the QR column collide — leave them be and
   just clear the floats, since there is no .row wrapper here. */
body.view-page .box-body:after { content: ""; display: table; clear: both; }
body.view-page .box-body > [class*="col-md-"] { padding-left: 0; padding-right: 0; }
body.view-page .box-body > .col-md-2 { padding-left: 22px; }

body.view-page .detail-view {
  width: 100%; background: var(--surface);
  border: 1px solid var(--border); border-radius: 16px; overflow: hidden;
  box-shadow: 0 1px 3px rgba(16,24,40,.05);
  animation: dashRise .55s cubic-bezier(.2,.7,.2,1) both;
}
body.view-page .detail-view th,
body.view-page .detail-view td {
  border: 0 !important; border-bottom: 1px solid var(--border-2) !important;
  padding: 11px 16px !important; vertical-align: top;
}
body.view-page .detail-view tr:last-child th,
body.view-page .detail-view tr:last-child td { border-bottom: 0 !important; }
body.view-page .detail-view th {
  width: 34%; background: var(--surface-2); color: var(--text-mut);
  font-size: 12.5px; font-weight: 600; text-align: right;
}
body.view-page .detail-view td { font-size: 13.5px; color: var(--text); }
body.view-page .detail-view .null { color: var(--text-soft); font-style: normal; }

/* the QR / ID-card column beside the record */
body.view-page .box-body > .col-md-2 { text-align: center; }
body.view-page .box-body > .col-md-2 h3 {
  font-size: 12.5px; font-weight: 600; color: var(--text-mut);
  text-transform: uppercase; letter-spacing: .5px;
  margin: 0 0 12px; line-height: 1.4;
}
body.view-page .box-body > .col-md-2 img {
  display: block; max-width: 100%; height: auto; margin: 0 auto;
  border: 1px solid var(--border); border-radius: 12px; background: #fff; padding: 8px;
}
/* the view splits its two QR blocks with <br><hr><br> — tidy that up */
body.view-page .box-body > .col-md-2 br { display: none; }
body.view-page .box-body > .col-md-2 hr {
  margin: 22px 0; border-top: 1px solid var(--border-2);
}

@media (max-width: 991px) {
  body.view-page .box-body > .col-md-2 { padding-left: 0; margin-top: 22px; }
}

@media (max-width: 768px) {
  /* A two-column detail table squeezes both sides on a phone: the labels wrap
     onto three lines and the values get a sliver. Stack them instead — label
     above value, each row full width. */
  body.view-page .content { padding: 8px 14px 22px; }
  body.view-page .detail-view,
  body.view-page .detail-view tbody,
  body.view-page .detail-view tr,
  body.view-page .detail-view th,
  body.view-page .detail-view td { display: block; width: 100% !important; }

  body.view-page .detail-view { border-radius: 14px; }
  body.view-page .detail-view tr {
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-2);
  }
  body.view-page .detail-view tr:last-child { border-bottom: 0; }
  body.view-page .detail-view th {
    background: none !important; text-align: left !important;
    padding: 0 0 3px !important; border: 0 !important;
    font-size: 11.5px; font-weight: 600; letter-spacing: .4px;
    text-transform: uppercase; color: var(--text-mut);
  }
  body.view-page .detail-view td {
    padding: 0 !important; border: 0 !important;
    font-size: 14.5px; color: var(--text); word-break: break-word;
  }
  /* an empty value would collapse the row to just its label */
  body.view-page .detail-view td:empty:before { content: "\2014"; color: var(--text-soft); }

  body.view-page .box-body > .col-md-2 { margin-top: 18px; }
  body.view-page .box-body > .col-md-2 img { max-width: 220px; }
}

/* =====================================================================
   FORM FIELD DETAILS  ·  radios, checkboxes, select2, textareas
   ===================================================================== */

/* Grid rows stretch to their tallest cell. Aligning to the start stops one
   tall field (a radio list) from leaving a hole beside a short one. */
body.form-page .content form .fp-grid,
body.form-page .content form .fp-row { align-items: start; }

/* Yii's radioButtonList renders  <input><label>Yes</label>  pairs, and the
   generic "labels are block" rule stacked every option vertically. Option
   labels sit inline beside their control; only the field label is a block. */
body.form-page .content form .form-group input[type="radio"] + label,
body.form-page .content form .form-group input[type="checkbox"] + label,
body.form-page .content form .form-group [class^="iradio"] + label,
body.form-page .content form .form-group [class^="icheckbox"] + label,
body.form-page .content form .form-group [class*=" iradio"] + label,
body.form-page .content form .form-group [class*=" icheckbox"] + label {
  display: inline-block !important;
  margin: 0 22px 0 8px !important;
  font-weight: 500; font-size: 14px; color: var(--text);
  vertical-align: middle; cursor: pointer;
}
body.form-page .content form .form-group input[type="radio"],
body.form-page .content form .form-group input[type="checkbox"] {
  width: auto !important; margin: 0; vertical-align: middle;
}
body.form-page .content form .form-group [class^="iradio"],
body.form-page .content form .form-group [class^="icheckbox"],
body.form-page .content form .form-group [class*=" iradio"],
body.form-page .content form .form-group [class*=" icheckbox"] {
  vertical-align: middle; margin: 0 !important; flex: 0 0 auto;
}
/* the <br/> after the field label doubles the gap once options are inline */
body.form-page .content form .form-group > label + br { display: none; }
/* give the option row some air under the field label */
body.form-page .content form .form-group > label ~ [class^="iradio"],
body.form-page .content form .form-group > label ~ [class^="icheckbox"],
body.form-page .content form .form-group > label ~ input[type="radio"],
body.form-page .content form .form-group > label ~ input[type="checkbox"] { margin-top: 4px !important; }

/* textareas: rows="6" makes a wall — keep them compact but resizable */
body.form-page .content form textarea.form-control {
  min-height: 92px; height: auto; resize: vertical; line-height: 1.5;
}

/* select2 (both v3 and v4 markup) matched to the theme inputs */
body.form-page .content form .select2-container { width: 100% !important; }
body.form-page .content form .select2-container .select2-selection,
body.form-page .content form .select2-container .select2-choices,
body.form-page .content form .select2-container .select2-choice {
  min-height: 42px; padding: 4px 8px;
  border: 1px solid var(--border) !important; border-radius: var(--radius-sm) !important;
  background: var(--surface) !important; box-shadow: none !important;
}
body.form-page .content form .select2-container .select2-selection__rendered,
body.form-page .content form .select2-container .select2-choices {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 0 !important;
}
body.form-page .content form .select2-selection__choice,
body.form-page .content form .select2-search-choice {
  margin: 0 !important; padding: 4px 10px !important;
  border: 0 !important; border-radius: 20px !important;
  background: var(--accent) !important; color: #fff !important;
  font-size: 12.5px; font-weight: 600; line-height: 1.4;
}
body.form-page .content form .select2-selection__choice__remove,
body.form-page .content form .select2-search-choice-close {
  color: rgba(255,255,255,.8) !important; margin-right: 5px !important;
}
body.form-page .content form .select2-container--focus .select2-selection,
body.form-page .content form .select2-container-active .select2-choices {
  border-color: var(--accent) !important; box-shadow: 0 0 0 3px var(--accent-sf) !important;
}
body.form-page .content form .select2-container .select2-selection__placeholder {
  color: var(--text-soft);
}

@media (max-width: 768px) {
  body.form-page .content form .form-group input[type="radio"] + label,
  body.form-page .content form .form-group [class^="iradio"] + label { margin-right: 16px !important; }
}

/* =====================================================================
   PWA  ·  install prompt (full-screen modal)
   ===================================================================== */
.pwa-modal {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(16, 24, 40, .55);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  animation: pwaFade .2s ease both;
}
.pwa-modal-card {
  position: relative;
  width: 100%; max-width: 380px;
  box-sizing: border-box;
  padding: 30px 26px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 20px;
  box-shadow: 0 24px 70px rgba(16, 24, 40, .35);
  text-align: center;
  animation: pwaRise .28s cubic-bezier(.2, .7, .2, 1) both;
}
.pwa-modal-x {
  position: absolute; top: 12px; right: 14px;
  width: 32px; height: 32px; padding: 0;
  border: 0; background: none; color: var(--text-soft);
  font-size: 24px; line-height: 1; cursor: pointer; border-radius: 8px;
}
.pwa-modal-x:hover { background: var(--surface-2); color: var(--text); }
.pwa-modal-icon {
  width: 76px; height: 76px; border-radius: 18px;
  margin: 4px auto 14px; display: block;
  box-shadow: 0 6px 18px rgba(16, 24, 40, .18);
}
.pwa-modal-title { margin: 0 0 8px; font-size: 20px; font-weight: 700; color: var(--text); }
.pwa-modal-sub { margin: 0 0 18px; font-size: 14px; line-height: 1.5; color: var(--text-mut); }
.pwa-modal-go {
  display: block; width: 100%; padding: 13px 16px;
  border: 0; border-radius: 12px;
  background: var(--accent); color: #fff;
  font-size: 15px; font-weight: 600; cursor: pointer;
}
.pwa-modal-go:hover { background: var(--accent-d); }
.pwa-modal-later {
  display: block; width: 100%; margin-top: 8px; padding: 11px 16px;
  border: 0; border-radius: 12px; background: none;
  color: var(--text-soft); font-size: 14px; font-weight: 500; cursor: pointer;
}
.pwa-modal-later:hover { color: var(--text); }
.pwa-modal-ios {
  text-align: left; margin: 0 0 16px; padding: 14px 16px;
  background: var(--surface-2); border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
.pwa-modal-ios p { margin: 0 0 8px; font-weight: 600; }
.pwa-modal-ios ol { margin: 0; padding-left: 18px; }
.pwa-modal-ios li { margin: 4px 0; }
.pwa-ios-share {
  display: inline-block; padding: 0 5px; border-radius: 5px;
  background: var(--accent); color: #fff; font-weight: 700;
}
.pwa-modal-hint {
  margin: 0 0 16px; padding: 12px 14px;
  background: var(--surface-2); border-radius: 12px;
  font-size: 13.5px; line-height: 1.5; color: var(--text);
}
/* lock background scroll while the modal is open */
body.pwa-modal-open { overflow: hidden; }

@keyframes pwaFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes pwaRise {
  from { opacity: 0; transform: translateY(16px) scale(.98); }
  to   { opacity: 1; transform: none; }
}

/* standalone (installed) mode: no browser chrome, so reclaim the space */
@media (display-mode: standalone) {
  .pwa-modal { display: none !important; }
  body { padding-top: env(safe-area-inset-top); }
  .main-sidebar { padding-top: env(safe-area-inset-top); }
}

/* link between the member and admin sign-in pages */
.login-alt {
  margin: 18px 0 0; padding-top: 16px;
  border-top: 1px solid var(--border-2);
  text-align: center; font-size: 13px; color: var(--text-mut);
}
.login-alt a { font-weight: 600; color: var(--accent); }
.login-alt a:hover { text-decoration: underline; }

/* =====================================================================
   MEMBER AREA  ·  locked (admin-only) fields
   ===================================================================== */
.locked-note {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 12px 16px; margin: 0 0 16px;
  background: var(--accent-sf); border: 1px solid #cfe0fd;
  border-radius: var(--radius-sm);
  color: var(--accent-d); font-size: 13px; line-height: 1.5;
}
.locked-note .fa { margin-top: 2px; }

.profile-note {
  display: flex; align-items: flex-start; gap: 10px;
  margin: 16px 0 0; padding: 12px 16px;
  background: var(--surface-2); border: 1px dashed var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-mut); font-size: 12.5px; line-height: 1.55;
}
.profile-note .fa { margin-top: 2px; color: var(--text-soft); }

body.form-page .content form select:disabled,
body.form-page .content form .is-locked,
body.form-page .content form select.is-locked {
  background: var(--surface-2) !important;
  color: var(--text-mut) !important;
  cursor: not-allowed;
}
.locked-tag {
  display: inline-flex; align-items: center; gap: 5px; margin-top: 6px;
  font-size: 11.5px; font-weight: 600; color: var(--text-soft);
}
.locked-tag .fa { font-size: 11px; }

/* ============================================================
   FAMILY MEMBERS
   Repeating rows on the registration form, and the read-only
   table on the View / Profile pages.
   ============================================================ */

.fm-section {
  grid-column: 1 / -1;              /* span the whole form grid */
  margin: 22px 0 6px;
  padding: 18px 18px 14px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(16, 34, 62, .05);
}

.fm-head h3 {
  margin: 0 0 3px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2d3d;
}

.fm-head p {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: #8a94a6;
}

.fm-row {
  display: grid;
  grid-template-columns: 1.8fr 1.2fr .6fr 1.1fr .9fr 38px;
  gap: 12px;
  align-items: end;
  padding: 10px 0;
  border-top: 1px dashed #eef1f6;
}

.fm-row:first-child { border-top: 0; padding-top: 0; }

.fm-field label {
  display: block;
  margin: 0 0 4px;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #8a94a6;
}

.fm-field .form-control {
  width: 100%;
  height: 38px;
  padding: 6px 10px;
  font-size: 13.5px;
  border: 1px solid #dfe5ee;
  border-radius: 8px;
  background: #fbfcfe;
  box-shadow: none;
}

.fm-field .form-control:focus {
  border-color: #4a7cf7;
  background: #fff;
  box-shadow: 0 0 0 3px rgba(74, 124, 247, .12);
  outline: none;
}

.fm-remove,
.fm-add {
  border: 1px solid transparent;
  border-radius: 8px;
  cursor: pointer;
  transition: background .15s, color .15s, border-color .15s;
}

.fm-remove {
  height: 38px;
  width: 38px;
  color: #c0392b;
  background: #fdf0ee;
  border-color: #f6d9d4;
}

.fm-remove:hover { background: #c0392b; color: #fff; border-color: #c0392b; }

.fm-add {
  margin-top: 14px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 600;
  color: #2e6be6;
  background: #eef4ff;
  border-color: #d7e4ff;
}

.fm-add:hover { background: #2e6be6; color: #fff; border-color: #2e6be6; }
.fm-add .fa { margin-right: 6px; }

/* --- read-only table (View / Profile) --- */

.fm-view {
  margin: 20px 0 4px;
  padding: 16px 18px 6px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
}

.fm-view h3 {
  margin: 0 0 12px;
  font-size: 15px;
  font-weight: 700;
  color: #1f2d3d;
}

.fm-view h3 .fa { margin-right: 7px; color: #2e6be6; }

.fm-count {
  display: inline-block;
  margin-left: 8px;
  padding: 1px 8px;
  font-size: 11.5px;
  font-weight: 700;
  color: #2e6be6;
  background: #eef4ff;
  border-radius: 20px;
}

.fm-view-table {
  width: 100%;
  table-layout: fixed;             /* no horizontal scrolling */
  border-collapse: collapse;
}

.fm-view-table th,
.fm-view-table td {
  padding: 9px 10px;
  font-size: 13.5px;
  text-align: left;
  border-bottom: 1px solid #f0f3f8;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fm-view-table th {
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #8a94a6;
  background: #fafbfd;
}

.fm-view-table tbody tr:last-child td { border-bottom: 0; }
.fm-view-table tbody tr:hover td { background: #fafbfd; }

/* --- mobile --- */

@media (max-width: 768px) {
  .fm-section { padding: 14px 13px 12px; }

  /* rows become stacked cards; the remove button sits on its own line */
  .fm-row {
    grid-template-columns: 1fr 1fr;
    gap: 10px;
    padding: 12px;
    margin-bottom: 10px;
    background: #fafbfd;
    border: 1px solid #eef1f6;
    border-radius: 10px;
  }

  .fm-row:first-child { padding-top: 12px; }
  .fm-row .fm-name { grid-column: 1 / -1; }
  .fm-row .fm-remove { grid-column: 1 / -1; width: 100%; }
  .fm-add { width: 100%; }

  /* the read-only table turns into one card per person */
  .fm-view-table thead { display: none; }
  .fm-view-table,
  .fm-view-table tbody,
  .fm-view-table tr,
  .fm-view-table td { display: block; width: 100%; }

  .fm-view-table tr {
    margin-bottom: 10px;
    padding: 4px 0;
    background: #fafbfd;
    border: 1px solid #eef1f6;
    border-radius: 10px;
  }

  .fm-view-table td {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    border-bottom: 0;
    white-space: normal;
  }

  .fm-view-table td:before {
    content: attr(data-label);
    flex: 0 0 auto;
    font-size: 11.5px;
    font-weight: 600;
    text-transform: uppercase;
    color: #8a94a6;
  }
}

/* Family Members page (member area) */

.fm-related-head { margin: 26px 0 10px; }

.fm-related-head h2 {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f2d3d;
}

.fm-related-sub {
  margin: 4px 0 0;
  font-size: 12.5px;
  color: var(--text-soft, #9aa1ac);
}

/* Family head card, above the members table */
.fm-head-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--surface, #fff);
  border: 1px solid var(--border, #e6e8ec);
  border-radius: var(--radius, 10px);
  padding: 16px 18px;
  margin-bottom: 18px;
  box-shadow: var(--shadow, 0 1px 3px rgba(16,24,40,.05));
}

.fm-head-avatar {
  flex: 0 0 48px;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--accent-sf, #eaf1fe);
  color: var(--accent, #2f6fed);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

.fm-head-name {
  font-size: 16px;
  font-weight: 700;
  color: var(--text, #1f2430);
  margin-bottom: 6px;
}

@media (max-width: 767px) {
  .fm-head-card { padding: 14px; }
}

/* "Relationship to Family Head" section on Update Profile — a fixed list of
   already-registered relatives (see _familyrelationships.php), simpler than
   the repeating add/remove rows above it so it does not reuse .fm-row's grid. */
.fm-row-static {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px;
  padding: 10px 0;
  border-top: 1px dashed #eef1f6;
}

.fm-row-static:first-child { border-top: 0; padding-top: 0; }

.fm-row-static .fm-name { flex: 1 1 220px; }

.fm-row-static .fm-rel { flex: 0 1 200px; min-width: 160px; }

.fm-static-value {
  height: 38px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13.5px;
  color: #1f2d3d;
}

.fm-static-tag {
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .03em;
  color: #4a7cf7;
  background: #eef3ff;
  border-radius: 20px;
  padding: 2px 8px;
  white-space: nowrap;
}

.fm-rel-blank { color: var(--text-soft, #9aa1ac); font-style: italic; }

@media (max-width: 640px) {
  .fm-row-static { flex-direction: column; align-items: stretch; gap: 8px; }
  .fm-row-static .fm-rel { flex: 1 1 auto; }
}

.fm-empty {
  margin: 0;
  padding: 26px 18px;
  text-align: center;
  font-size: 13.5px;
  color: #8a94a6;
}

.fm-empty a { font-weight: 600; color: #2e6be6; }

/* ============================================================
   ANNOUNCEMENTS
   ============================================================ */

.menu-badge {
  display: inline-block;
  min-width: 19px;
  margin-left: 8px;
  padding: 1px 6px;
  font-size: 11px;
  font-weight: 700;
  line-height: 17px;
  text-align: center;
  color: #fff;
  background: #e03131;
  border-radius: 20px;
}

.menu-badge[hidden] { display: none; }

/* admin grid thumbnails */

.an-thumb {
  width: 54px;
  height: 40px;
  object-fit: cover;
  border-radius: 7px;
  border: 1px solid #e6ebf2;
}

.an-noimg {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 54px;
  height: 40px;
  color: #b6bfcc;
  background: #f5f7fa;
  border: 1px solid #e6ebf2;
  border-radius: 7px;
}

.an-current {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
  padding: 10px;
  background: #fafbfd;
  border: 1px solid #eef1f6;
  border-radius: 10px;
}

.an-current img {
  width: 74px;
  height: 54px;
  object-fit: cover;
  border-radius: 7px;
}

.an-current span { font-size: 12.5px; color: #8a94a6; }

/* member list */

.an-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 16px;
}

.an-card {
  overflow: hidden;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 14px;
  box-shadow: 0 1px 3px rgba(16, 34, 62, .05);
  transition: transform .18s ease, box-shadow .18s ease;
}

.an-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(16, 24, 40, .10);
}

.an-card-img {
  display: block;
  width: 100%;
  max-height: 220px;
  object-fit: cover;
  background: #f5f7fa;
}

.an-card-body { padding: 16px 18px 18px; }

.an-card-body h2 {
  margin: 0 0 6px;
  font-size: 16px;
  font-weight: 700;
  color: #1f2d3d;
}

.an-date {
  margin-bottom: 10px;
  font-size: 12px;
  color: #8a94a6;
}

.an-date .fa { margin-right: 5px; }

.an-card-body p {
  margin: 0;
  font-size: 13.5px;
  line-height: 1.62;
  color: #4a5568;
  white-space: pre-line;
}

@media (max-width: 768px) {
  .an-list { grid-template-columns: 1fr; gap: 13px; }
  .an-card-img { max-height: 190px; }
  .an-card-body { padding: 14px 15px 16px; }
}

/* Grid action icons — replaces Yii's default 16px GIFs */

.act-col { white-space: nowrap; text-align: center; }

.act-ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  margin: 0 2px;
  font-size: 13px;
  border-radius: 8px;
  border: 1px solid transparent;
  text-decoration: none !important;
  transition: background .15s, color .15s, border-color .15s;
}

.act-ico.is-edit { color: #2e6be6; background: #eef4ff; border-color: #d7e4ff; }
.act-ico.is-edit:hover { color: #fff; background: #2e6be6; border-color: #2e6be6; }

.act-ico.is-del { color: #c0392b; background: #fdf0ee; border-color: #f6d9d4; }
.act-ico.is-del:hover { color: #fff; background: #c0392b; border-color: #c0392b; }

.act-ico .fa { line-height: 1; }

@media (max-width: 768px) {
  .act-ico { width: 34px; height: 34px; font-size: 14px; }
}

/* Report filter bar */

.rpt-filter {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e6ebf2;
  border-radius: 12px;
}

.rpt-filter label {
  margin: 0;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .02em;
  text-transform: uppercase;
  color: #8a94a6;
}

.rpt-filter .form-control,
.rpt-filter .app-select {
  width: 260px;
  max-width: 100%;
  margin: 0;
}

.rpt-go {
  height: 38px;
  padding: 0 16px;
  font-size: 13px;
  font-weight: 600;
  color: #fff;
  background: #2e6be6;
  border: 1px solid #2e6be6;
  border-radius: 8px;
  cursor: pointer;
}

.rpt-go:hover { background: #2559c4; border-color: #2559c4; }
.rpt-go .fa { margin-right: 6px; }

.rpt-clear {
  font-size: 13px;
  font-weight: 600;
  color: #8a94a6;
  text-decoration: none;
}

.rpt-clear:hover { color: #c0392b; }

@media (max-width: 768px) {
  .rpt-filter { gap: 8px; }
  .rpt-filter .form-control,
  .rpt-filter .app-select { width: 100%; }
  .rpt-go { width: 100%; }
}

/* Anbiyam totals panel on the subscription report */

.spr-byanb { margin-bottom: 18px; }
.spr-byanb .spr-table tbody tr:hover td { background: #fafbfd; }

@media (max-width: 768px) {
  /* the period controls each take a full row so the labels stay readable */
  .spr-filter .spr-fields .form-group { width: 100%; }
}

/* Push subscription status panel (Announcements admin) */

.push-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  margin: 0 0 16px;
  padding: 13px 16px;
  background: #eef4ff;
  border: 1px solid #d7e4ff;
  border-radius: 12px;
}

.push-status .ps-left {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  font-size: 13.5px;
  color: #1f2d3d;
}

.push-status .ps-left > .fa {
  margin-top: 2px;
  font-size: 17px;
  color: #2e6be6;
}

.push-status strong { font-weight: 700; }

.push-status .ps-hint {
  display: block;
  margin-top: 2px;
  font-size: 12.5px;
  color: #6b7280;
}

/* The WhatsApp panel is the same shape in WhatsApp's own green, so the two
   channels read as siblings rather than as one notice and one oddity. */
.push-status.is-wa {
  background: #eefaf1;
  border-color: #cdeed8;
}

.push-status.is-wa .ps-left > .fa { color: #1da851; }

.wa-test {
  display: flex;
  gap: 8px;
  align-items: center;
  margin: 0;
}

.wa-test input[type="tel"] {
  width: 150px;
  height: 36px;
  padding: 0 11px;
  font-size: 13.5px;
  color: #1f2d3d;
  background: #fff;
  border: 1px solid #cdeed8;
  border-radius: 8px;
}

.wa-test input[type="tel"]:focus {
  outline: none;
  border-color: #1da851;
  box-shadow: 0 0 0 3px rgba(29, 168, 81, .15);
}

@media (max-width: 768px) {
  .push-status { flex-direction: column; align-items: stretch; }
  .push-status .ph-btn { width: 100%; justify-content: center; }
  .wa-test { flex-direction: column; align-items: stretch; }
  .wa-test input[type="tel"] { width: 100%; }
}

/* A form that is being submitted: the button reads as busy and refuses
   further clicks, which is what stops duplicate records. */

.is-busy {
  opacity: .65;
  cursor: progress !important;
  pointer-events: none;
}

.is-busy .fa-spinner { margin-right: 6px; }

/* OTP login */

.login-msg {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin: 0 0 16px;
  padding: 11px 13px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 10px;
}

.login-msg .fa { margin-top: 2px; }
.login-msg.is-error { color: #922b21; background: #fdf0ee; border: 1px solid #f6d9d4; }
.login-msg.is-ok    { color: #1e6b4f; background: #eaf7f1; border: 1px solid #cbe9dc; }

.login-hint {
  margin: 8px 0 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: #8a94a6;
}

.otp-input {
  font-size: 22px !important;
  font-weight: 600;
  letter-spacing: .5em;
  text-align: center;
  padding-right: 12px !important;
}

.login-secondary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid #eef1f6;
}

.login-link {
  padding: 0;
  font-size: 12.5px;
  font-weight: 600;
  color: #2e6be6;
  background: none;
  border: 0;
  cursor: pointer;
}

.login-link:hover { text-decoration: underline; }
.login-link[disabled] { color: #b6bfcc; cursor: default; text-decoration: none; }

.btn-block { width: 100%; }

/* ============================================================
   Member profile (customer/profile)

   The overview a member sees of their own record. Built as its own set of
   components rather than a themed CDetailView: the page is mostly read on a
   phone, where a two-column definition table collapses badly.
   ============================================================ */

/* --- banner ------------------------------------------------------------- */

.mp-hero {
  position: relative;
  overflow: hidden;
  margin: 0 0 18px;
  padding: 24px 22px;
  border-radius: 18px;
  color: #fff;
  background: linear-gradient(135deg, var(--crest-from, #1d4ed8), var(--crest-to, #1e3a8a));
  box-shadow: 0 10px 26px -12px rgba(15, 23, 42, .55);
}

/* The anbiyam picture moved into the avatar circle. A saint's portrait
   stretched across the whole banner read as wallpaper and fought with the
   member's name; as a badge it says the same thing without competing. */

.mp-hero::after {
  /* A soft light in the top-right corner, so a flat gradient does not read
     as a solid block of colour. */
  content: "";
  position: absolute;
  top: -70px;
  right: -50px;
  width: 240px;
  height: 240px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .13);
  pointer-events: none;
}

.mp-hero-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 18px;
}

.mp-avatar {
  flex: 0 0 auto;
  width: 82px;
  height: 82px;
  border-radius: 50%;
  overflow: hidden;
  background: rgba(255, 255, 255, .18);
  border: 3px solid rgba(255, 255, 255, .55);
  box-shadow: 0 6px 18px -6px rgba(0, 0, 0, .5);
  display: flex;
  align-items: center;
  justify-content: center;
}

.mp-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Anbiyam artwork is a portrait crop; centring on the upper third keeps a
     face in frame rather than a chin. */
  object-position: center 30%;
}

.mp-avatar-mono {
  font-size: 30px;
  font-weight: 700;
  letter-spacing: 1px;
  color: #fff;
}

.mp-hero-text { min-width: 0; }

.mp-hero-text h1 {
  margin: 0 0 9px;
  font-size: 25px;
  font-weight: 700;
  line-height: 1.2;
  color: #fff;
  /* Long names must wrap rather than push the chips off the card. */
  overflow-wrap: anywhere;
}

.mp-chips { display: flex; flex-wrap: wrap; gap: 7px; }

.mp-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 11px;
  font-size: 12.5px;
  font-weight: 600;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 1px solid rgba(255, 255, 255, .3);
  border-radius: 999px;
  backdrop-filter: blur(2px);
}

/* The registration number is the one a member is asked for, so it reads as
   the primary chip. */
.mp-chip.is-solid {
  background: #fff;
  border-color: #fff;
  color: #1f2937;
  letter-spacing: .4px;
}

/* --- statistics --------------------------------------------------------- */

.mp-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
  margin: 0 0 18px;
}

.mp-stat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
}

.mp-stat > div:last-child { min-width: 0; }

.mp-stat strong {
  display: block;
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  color: #111827;
}

.mp-stat span {
  display: block;
  margin-top: 2px;
  font-size: 12px;
  color: #6b7280;
}

.mp-stat-icon {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 17px;
}

.mp-stat-icon.is-green  { background: #e7f7ee; color: #12855a; }
.mp-stat-icon.is-blue   { background: #e8f0fe; color: #2563eb; }
.mp-stat-icon.is-violet { background: #f1e9fe; color: #7c3aed; }
.mp-stat-icon.is-amber  { background: #fdf1dd; color: #b45309; }

/* --- subscription cover ------------------------------------------------- */

.mp-cover {
  margin: 0 0 18px;
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
}

.mp-cover-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
}

.mp-cover-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
}

.mp-cover-head h3 .fa { margin-right: 7px; color: #2563eb; }

.mp-cover-count {
  font-size: 12.5px;
  font-weight: 600;
  color: #4b5563;
  background: #f3f4f6;
  border-radius: 999px;
  padding: 3px 11px;
}

.mp-bar {
  height: 9px;
  border-radius: 999px;
  background: #eef0f4;
  overflow: hidden;
}

.mp-bar > span {
  display: block;
  height: 100%;
  border-radius: 999px;
  background: linear-gradient(90deg, #34d399, #059669);
  transition: width .5s ease;
}

.mp-cover-note {
  margin: 10px 0 0;
  font-size: 12.5px;
  color: #6b7280;
}

/* --- detail cards ------------------------------------------------------- */

.mp-cards {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
  margin: 0 0 18px;
}

.mp-card {
  padding: 16px 18px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
}

.mp-card h3 {
  margin: 0 0 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid #eef0f4;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #6b7280;
}

.mp-card h3 .fa { margin-right: 8px; color: #9aa3af; }

.mp-card dl { margin: 0; }

.mp-card dl > div {
  display: flex;
  gap: 14px;
  padding: 7px 0;
  border-bottom: 1px dashed #f1f2f5;
}

.mp-card dl > div:last-child { border-bottom: 0; padding-bottom: 0; }

.mp-card dt {
  flex: 0 0 42%;
  margin: 0;
  font-size: 13px;
  font-weight: 500;
  color: #6b7280;
}

.mp-card dd {
  flex: 1 1 auto;
  margin: 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #1f2937;
  overflow-wrap: anywhere;
}

/* --- narrower screens --------------------------------------------------- */

@media (max-width: 900px) {
  .mp-stats { grid-template-columns: repeat(2, 1fr); }
  .mp-cards { grid-template-columns: 1fr; }
}

@media (max-width: 560px) {
  .mp-hero { padding: 20px 17px; border-radius: 15px; }
  .mp-hero-inner { flex-direction: column; align-items: flex-start; gap: 14px; }
  .mp-avatar { width: 68px; height: 68px; }
  .mp-avatar-mono { font-size: 25px; }
  .mp-hero-text h1 { font-size: 21px; }

  .mp-stat { padding: 12px 13px; gap: 10px; }
  .mp-stat strong { font-size: 18px; }
  .mp-stat-icon { width: 34px; height: 34px; font-size: 15px; }

  /* Label above value: side by side, a long address gets three words a line. */
  .mp-card dl > div { flex-direction: column; gap: 2px; }
  .mp-card dt { flex: none; font-size: 12px; }
}

/* ============================================================
   WhatsApp template check (announcement/whatsapptemplates)

   One card per message the parish sends, showing whether Meta will actually
   deliver it. Colour carries the verdict, because the whole point of the page
   is to make one bad row impossible to miss.
   ============================================================ */

.wt-list { display: grid; gap: 12px; margin: 0 0 18px; }

.wt-card {
  padding: 15px 17px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-left: 4px solid #cbd2dc;
  border-radius: 12px;
}

.wt-card.is-ok   { border-left-color: #1da851; }
.wt-card.is-warn { border-left-color: #d97706; }
.wt-card.is-bad  { border-left-color: #dc2626; }

.wt-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.wt-role {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .7px;
  color: #9aa3af;
}

.wt-head code,
.wt-table code {
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  background: #f3f4f6;
  border-radius: 6px;
  padding: 1px 7px;
}

.wt-pill {
  font-size: 12px;
  font-weight: 700;
  padding: 3px 11px;
  border-radius: 999px;
  white-space: nowrap;
}

.wt-pill.is-ok   { background: #e7f7ee; color: #0f6e42; }
.wt-pill.is-warn { background: #fdf1dd; color: #92500a; }
.wt-pill.is-bad  { background: #fdeaea; color: #b91c1c; }

.wt-facts {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  margin-top: 11px;
  font-size: 13px;
  color: #4b5563;
}

.wt-facts b {
  font-weight: 600;
  color: #9aa3af;
  margin-right: 4px;
}

.wt-facts .wt-warn { color: #b45309; }
.wt-facts .wt-warn code { font-size: 12.5px; padding: 0 5px; }

.wt-advice {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.55;
  color: #6b7280;
}

.wt-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }

.wt-table th {
  padding: 10px 12px;
  text-align: left;
  font-size: 11.5px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .6px;
  color: #6b7280;
  border-bottom: 1px solid #e6e9ef;
}

.wt-table td {
  padding: 10px 12px;
  color: #374151;
  border-bottom: 1px solid #f1f2f5;
}

.wt-table tr:last-child td { border-bottom: 0; }

@media (max-width: 620px) {
  .wt-table thead { display: none; }
  .wt-table tr {
    display: block;
    padding: 10px 0;
    border-bottom: 1px solid #eef0f4;
  }
  .wt-table td { display: flex; justify-content: space-between; gap: 14px; border: 0; padding: 4px 12px; }
  .wt-table td::before {
    content: attr(data-label);
    font-size: 12px;
    font-weight: 600;
    color: #9aa3af;
  }
}

/* ============================================================
   WhatsApp log viewer (announcement/whatsapplog)
   ============================================================ */

.wl-note {
  margin: 0;
  padding: 22px;
  font-size: 13.5px;
  color: #6b7280;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  text-align: center;
}

.wl-file {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 8px;
  font-size: 12.5px;
  color: #9aa3af;
}

.wl-file code {
  font-size: 12.5px;
  color: #6b7280;
  background: transparent;
  padding: 0;
}

.wl-log {
  padding: 6px 0;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  overflow: hidden;
}

.wl-line {
  padding: 7px 16px;
  font-family: Menlo, Consolas, "Courier New", monospace;
  font-size: 12px;
  line-height: 1.6;
  color: #374151;
  border-left: 3px solid transparent;
  /* Log lines are long and must not force the page sideways. */
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.wl-line.is-ok  { border-left-color: #1da851; background: #f7fdf9; }
.wl-line.is-bad { border-left-color: #dc2626; background: #fdf7f7; }

/* Yii's stack trace under each entry: kept, because it says which code path
   produced the line, but visibly secondary. */
.wl-line.is-trace {
  padding: 2px 16px 2px 30px;
  font-size: 11px;
  color: #b6bcc6;
}

/* ============================================================
   Member area — the compact banner shared by every page

   The full banner on the profile carries a photo and three chips; the list
   pages want the same identity in a third of the height, so the same
   component takes an is-compact variant rather than a second one existing.
   ============================================================ */

.mp-hero.is-compact { padding: 17px 20px; margin-bottom: 16px; }

.mp-hero.is-compact .mp-hero-inner { align-items: center; gap: 14px; }

.mp-hero-icon {
  flex: 0 0 auto;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  color: #fff;
  background: rgba(255, 255, 255, .18);
  border: 2px solid rgba(255, 255, 255, .55);
}

.mp-hero-icon.has-img { background: rgba(255, 255, 255, .28); }

.mp-hero-icon img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.mp-hero.is-compact .mp-hero-text h1 { font-size: 21px; margin-bottom: 4px; }

.mp-hero-text p {
  margin: 0 0 9px;
  font-size: 13px;
  color: rgba(255, 255, 255, .82);
}

.mp-hero.is-compact .mp-chips { margin-top: 0; }

/* The member pages carried their own summary tiles before the profile
   existed. Bring them onto the profile's card so the two do not sit on the
   same screen looking like different products. */
.member-page .spr-cards {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 12px;
  margin: 0 0 18px;
}

.member-page .spr-card {
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
}

.member-page .spr-card:hover {
  transform: none;
  box-shadow: 0 6px 18px -8px rgba(16, 24, 40, .18);
}

.member-page .spr-card .lbl {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: .3px;
  text-transform: none;
  color: #6b7280;
}

.member-page .spr-card .val {
  margin-top: 3px;
  font-size: 22px;
  font-weight: 700;
  color: #111827;
}

/* The coloured edge becomes a full-height bar rather than a hairline, which
   is what makes it read at a glance on a phone. */
.member-page .spr-card:before { width: 4px; }

/* Announcement cards, matched to the same surface treatment. */
.member-page .an-card {
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  box-shadow: 0 1px 2px rgba(16, 24, 40, .04);
  overflow: hidden;
}

.member-page .an-card:hover {
  box-shadow: 0 8px 22px -10px rgba(16, 24, 40, .22);
}

.member-page .data-panel {
  border-radius: 14px;
  overflow: hidden;
}

@media (max-width: 560px) {
  .mp-hero.is-compact { padding: 15px 16px; }
  .mp-hero.is-compact .mp-hero-inner { flex-direction: row; align-items: center; }
  .mp-hero-icon { width: 40px; height: 40px; font-size: 17px; border-radius: 11px; }
  .mp-hero.is-compact .mp-hero-text h1 { font-size: 18px; }
  .member-page .spr-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .member-page .spr-card .val { font-size: 19px; }
}

/* ============================================================
   Registration lookup card (Add Subscription)

   Sits directly under the Registration No field. Its whole job is to let the
   person entering a payment confirm, without reading, that they have the
   right family.
   ============================================================ */

.reg-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: #9aa3af;
}

.reg-card-slot:empty { display: none; }
.reg-card-slot { margin-top: 10px; }

.reg-card {
  border: 1px solid #cdeed8;
  border-radius: 12px;
  background: #f6fdf8;
  overflow: hidden;
}

.reg-card-top {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border-bottom: 1px solid #dcf0e4;
}

.reg-card-avatar {
  flex: 0 0 auto;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  overflow: hidden;
  background: #dcf0e4;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  font-weight: 700;
  color: #0f6e42;
}

.reg-card-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}

.reg-card-id { flex: 1 1 auto; min-width: 0; }

.reg-card-id strong {
  display: block;
  font-size: 14.5px;
  font-weight: 700;
  color: #14361f;
  overflow-wrap: anywhere;
}

.reg-card-id span {
  display: block;
  margin-top: 1px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: .4px;
  color: #4b8f66;
}

.reg-card-ok {
  flex: 0 0 auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #1da851;
  color: #fff;
  font-size: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.reg-card-facts {
  margin: 0;
  padding: 9px 13px 11px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 7px 16px;
}

.reg-card-facts > div { min-width: 0; }

.reg-card-facts dt {
  margin: 0;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: #7fae94;
}

.reg-card-facts dd {
  margin: 1px 0 0;
  font-size: 13.5px;
  font-weight: 600;
  color: #1f3b2a;
  overflow-wrap: anywhere;
}

/* ============================================================
   Patrist picker (Reports -> Subscriptions -> Send to Patrists)
   ============================================================ */

.pt-pick {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 14px;
  overflow: hidden;
}

.pt-pick-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 14px 17px;
  border-bottom: 1px solid #eef0f4;
}

.pt-pick-head h3 {
  margin: 0;
  font-size: 14.5px;
  font-weight: 700;
  color: #111827;
}

.pt-pick-head h3 .fa { margin-right: 8px; color: #1da851; }

.pt-all {
  margin: 0;
  font-size: 13px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 7px;
}

.pt-list { padding: 4px 0; }

.pt-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0;
  padding: 10px 17px;
  font-weight: 400;
  cursor: pointer;
  border-bottom: 1px solid #f4f5f8;
}

.pt-row:last-child { border-bottom: 0; }
.pt-row:hover { background: #f9fbfd; }

.pt-row input[type="checkbox"] { margin: 0; flex: 0 0 auto; }

.pt-name {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 14px;
  font-weight: 600;
  color: #1f2937;
  overflow-wrap: anywhere;
}

.pt-mob {
  flex: 0 0 auto;
  font-size: 13px;
  color: #6b7280;
}

/* A patrist with no usable number cannot be sent to, so the row says so
   rather than offering a tick box that would fail. */
.pt-row.is-off { cursor: default; background: #fcfcfd; }
.pt-row.is-off:hover { background: #fcfcfd; }
.pt-row.is-off .pt-name { color: #9aa3af; }
.pt-row.is-off .pt-mob em { color: #b45309; font-style: normal; font-size: 12.5px; }

.pt-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
  flex-wrap: wrap;
  padding: 14px 17px;
  border-top: 1px solid #eef0f4;
  background: #fbfcfe;
}

.pt-note { margin: 0; font-size: 12.5px; color: #6b7280; }

@media (max-width: 560px) {
  .pt-row { flex-wrap: wrap; }
  .pt-mob { width: 100%; padding-left: 28px; }
  .pt-foot { flex-direction: column; align-items: stretch; }
  .pt-foot .ph-btn { width: 100%; justify-content: center; }
}

/* Delivery outcomes, on the WhatsApp settings page. Same card language as the
   template check above it, so the two read as one page. */
.wt-delivery {
  background: #fff;
  border: 1px solid #e6e9ef;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 18px;
}

.wt-delivery .wt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.wt-delivery .wt-table { border: 0; }
.wt-delivery .wt-advice { font-size: 12.5px; }

.wt-pill.is-wait { background: #eef1f5; color: #4b5563; }