/* ═══════════════════════════════════════════════
   Management BS5 — Styles for BS5 management area
   Loaded instead of bootstrap3/management.css when
   the parish uses site_layout "bs5"
   ═══════════════════════════════════════════════ */

/* Reset root font-size in case BS3 scaffolding.less leaks through */
html { font-size: 16px !important; }

/* ── BS3 → BS5 Compatibility Layer ──
   Maps Bootstrap 3 classes that don't exist in Bootstrap 5
   so existing management views continue to work.            */

.col-xs-1  { flex: 0 0 auto; width: 8.333333%; }
.col-xs-2  { flex: 0 0 auto; width: 16.666667%; }
.col-xs-3  { flex: 0 0 auto; width: 25%; }
.col-xs-4  { flex: 0 0 auto; width: 33.333333%; }
.col-xs-5  { flex: 0 0 auto; width: 41.666667%; }
.col-xs-6  { flex: 0 0 auto; width: 50%; }
.col-xs-7  { flex: 0 0 auto; width: 58.333333%; }
.col-xs-8  { flex: 0 0 auto; width: 66.666667%; }
.col-xs-9  { flex: 0 0 auto; width: 75%; }
.col-xs-10 { flex: 0 0 auto; width: 83.333333%; }
.col-xs-11 { flex: 0 0 auto; width: 91.666667%; }
.col-xs-12 { flex: 0 0 auto; width: 100%; }

.btn-xs {
  padding: 2px 8px;
  font-size: 13px;
  line-height: 1.5;
  border-radius: 4px;
}

.btn-mini {
  padding: 2px 8px;
  font-size: 13px;
}

.pull-right { float: right !important; }
.pull-left  { float: left !important; }

.label {
  display: inline-block;
  padding: .3em .6em;
  font-size: 85%;
  font-weight: 700;
  line-height: 1;
  text-align: center;
  white-space: nowrap;
  vertical-align: baseline;
  border-radius: .25rem;
  color: #fff;
}
.label-success { background-color: #198754; }
.label-danger  { background-color: #dc3545; }
.label-default { background-color: #6c757d; }
.label-warning { background-color: #ffc107; color: #212529; }
.label-info    { background-color: #0dcaf0; color: #212529; }
.label-primary { background-color: #0d6efd; }

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.icon-white { color: #fff; }
.icon-off::before { content: ""; }

.navbar-right { margin-left: auto !important; }
.navbar-fixed-top {
  position: fixed;
  top: 0;
  right: 0;
  left: 0;
  z-index: 1030;
}
.navbar-inverse {
  background-color: #212529 !important;
  border-color: #16181b;
}

.well {
  min-height: 20px;
  padding: 19px;
  margin-bottom: 20px;
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

.panel {
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
  margin-bottom: 20px;
}
.panel-body { padding: 15px; }
.panel-heading {
  padding: 10px 15px;
  border-bottom: 1px solid #dee2e6;
  border-radius: 5px 5px 0 0;
}

/* ── Base Layout ── */

body {
  margin-top: 56px;
  margin-bottom: 100px;
  background-color: #f8f9fa !important;
  --bs-body-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif !important;
  font-size: 16px;
  line-height: 1.5;
  color: #212529;
}

body.has-context-bar {
  margin-top: 94px;
}

.container-fluid {
  width: 98%;
}

hr.small {
  margin: 4px 0;
  border-width: 1px;
  border-color: #dee2e6;
  opacity: 0.4;
}

hr {
  margin: 12px 0;
  border-color: #dee2e6;
}

img {
  max-width: 100%;
}

/* ── Impersonation Banner ── */

/* The banner is fixed and sits above the navbars (z-index 10070), so the bars
   below it are offset by its height. Keep that height pinned at 38px — the
   number every `.impersonation-active` top and `has-impersonation-banner`
   body margin below is derived from — or the banner paints over the navbar. */
.impersonation-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 10070;
  background: #d97706;
  color: #fff;
  font-size: 14px;
  height: 38px;
  padding: 0 16px;
  display: flex;
  align-items: center;
  text-align: center;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}

.impersonation-banner > .container-fluid {
  min-width: 0;
}

/* Narrow viewports would otherwise wrap this to a second line and push the
   banner past 38px. Truncate the description instead — never the exit link. */
.impersonation-banner > .container-fluid > span {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.impersonation-banner .btn-outline-light {
  font-size: 12px;
  padding: 2px 10px;
  border-radius: 4px;
  flex: 0 0 auto;
  white-space: nowrap;
  /* The global .btn rule's 5px vertical margin would add 10px here. */
  margin-top: 0;
  margin-bottom: 0;
}

.impersonation-banner .btn-outline-light:hover {
  background: #fff;
  color: #d97706;
}

.management-navbar-primary.impersonation-active {
  top: 38px;
}

.management-navbar-context.impersonation-active {
  top: 84px;
}

/* ── Context bar: right-side "Visit Site" pill ── */
.management-navbar-context .context-visit-site {
  color: rgba(255, 255, 255, 0.6) !important;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 5px;
  padding: 4px 12px !important;
  font-size: 12px;
  font-weight: 500;
  margin: 3px 0;
  transition: all 0.15s ease;
}

.management-navbar-context .context-visit-site:hover {
  color: #fff !important;
  border-color: rgba(255, 255, 255, 0.35);
  background: rgba(255, 255, 255, 0.08);
}

body.has-impersonation-banner {
  margin-top: 94px !important;
}

body.has-impersonation-banner.has-context-bar {
  margin-top: 130px !important;
}

/* ── Primary Navbar ── */

.management-navbar-primary {
  background: #1e1b4b;
  padding: 0 16px;
  min-height: 46px;
  box-shadow: none;
  z-index: 10060 !important;
}

.management-navbar-primary.has-context {
  box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06);
}

.management-navbar-primary:not(.has-context) {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.management-navbar-primary .navbar-brand {
  color: #fff !important;
  font-size: 15px;
  padding: 6px 10px;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.management-navbar-primary .navbar-brand:hover {
  color: #c7d2fe !important;
}

.management-navbar-primary .navbar-brand img {
  width: 22px;
  height: auto;
}

.management-navbar-primary .nav-link {
  color: rgba(255, 255, 255, 0.85) !important;
  font-size: 14px;
  padding: 8px 12px !important;
  text-decoration: none;
  transition: color 0.15s;
}

.management-navbar-primary .nav-link:hover {
  color: #fff !important;
}

.management-navbar-primary .nav-link img {
  width: 16px;
  height: 16px;
  margin-right: 4px;
  vertical-align: middle;
}

.management-navbar-primary .navbar-toggler {
  border-color: rgba(255, 255, 255, 0.3);
  padding: 4px 8px;
}

.management-navbar-primary .navbar-toggler-icon {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.75%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* ── Context Navbar (second tier) ── */

.management-navbar-context {
  position: fixed;
  top: 46px;
  left: 0;
  right: 0;
  z-index: 10050 !important;
  background: linear-gradient(180deg, #252050 0%, #1a1740 100%);
  padding: 0 16px;
  min-height: 38px;
  box-shadow: 0 3px 12px rgba(0, 0, 0, 0.25);
  border-top: 1px solid rgba(255, 255, 255, 0.06);
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
}

.management-navbar-context > .container-fluid {
  flex-wrap: nowrap;
}

.management-navbar-context .navbar-nav {
  flex-wrap: nowrap;
}

.management-navbar-context .nav-link {
  color: rgba(255, 255, 255, 0.7) !important;
  font-size: 13px;
  font-weight: 500;
  padding: 8px 12px !important;
  text-decoration: none;
  transition: all 0.15s ease;
  white-space: nowrap;
  border-radius: 5px;
  margin: 3px 1px;
  letter-spacing: 0.01em;
}

.management-navbar-context .nav-link:hover {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.1);
}

.management-navbar-context .nav-link:active {
  background: rgba(255, 255, 255, 0.15);
}

.management-navbar-context .nav-link .bi {
  font-size: 13px;
  opacity: 0.7;
}

.management-navbar-context .nav-link:hover .bi {
  opacity: 1;
}

.management-navbar-context .nav-link.active {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.12);
}

.management-navbar-context .nav-link.active .bi {
  opacity: 1;
}

.context-divider {
  width: 1px;
  height: 20px;
  background: rgba(255, 255, 255, 0.12);
  margin: 0 8px;
  list-style: none;
}

/* ── Bootstrap 5 modal stacking fix ──
   The admin navbars use very high z-indexes (primary: 10060, context: 10050,
   impersonation banner: 10070) — a legacy holdover from Bootstrap 3 where
   .modal also sat at 10050. Bootstrap 5's default modal z-indexes are only
   1050 (backdrop) and 1055 (dialog), so without this override every BS5
   modal in the admin (QR code, password, slideshow-height help, etc.) gets
   covered by the navbar. Lift them above the impersonation banner. */
.modal-backdrop {
  z-index: 10080 !important;
}
.modal {
  z-index: 10085 !important;
}

/* Mobile navigation must cover every fixed management toolbar. Bootstrap's
   default offcanvas stack (1040/1045) sits below our legacy 9999+ chrome,
   leaving page actions bright and clickable through the backdrop. */
.offcanvas-backdrop {
  z-index: 10080 !important;
}

#globalnav.offcanvas {
  z-index: 10085 !important;
}

/* ── Toolbar & content offsets (central source of truth) ── */
.dfc-toolbar {
  top: 56px !important;
}

body.has-context-bar .dfc-toolbar {
  top: 84px !important;
}

.dfc-content,
.wiki-hub,
.wiki-editor {
  margin-top: 104px;
}

body.has-context-bar .dfc-content,
body.has-context-bar .wiki-hub,
body.has-context-bar .wiki-editor {
  margin-top: 132px !important;
}

body.has-context-bar .brief-content,
body.has-context-bar .board-content,
body.has-context-bar .help-content,
body.has-context-bar .preview-content,
body.has-context-bar .editor-layout,
body.has-context-bar .health-content,
body.has-context-bar .detail-content,
body.has-context-bar .markets-content {
  margin-top: 132px !important;
}

body.has-context-bar .board-content {
  height: calc(100vh - 132px);
}

body.has-context-bar .editor-layout {
  height: calc(100vh - 132px);
}

.nav-btn {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 5px;
  font-size: 13px;
  font-weight: 500;
  color: #fff !important;
  text-decoration: none !important;
  margin: 4px 2px;
  transition: opacity 0.15s;
}

.nav-btn:hover {
  opacity: 0.85;
  color: #fff !important;
}

.nav-btn-success { background: #198754; }
.nav-btn-primary { background: #0d6efd; }
.nav-btn-info    { background: #0891b2; }
.nav-btn-warning { background: #d97706; }
.nav-btn-danger  { background: #dc3545; }

.nav-btn img {
  width: 16px;
  height: 16px;
  margin-right: 3px;
  vertical-align: middle;
}

/* ── Buttons ── */

.btn {
  margin: 5px 5px 5px 0;
  border-radius: 6px;
}

a.btn { text-decoration: none; }
.btn a { color: inherit; text-decoration: none; }

/* ── Sections (legacy management cards) ── */

.section, fieldset {
  padding: 8px;
  margin-bottom: 12px;
  border: 1px solid #e2e8f0;
  background-color: #fff;
  border-radius: 8px;
}

.section h3, fieldset h3 {
  background-color: #334155;
  padding: 8px 14px;
  margin: -8px -8px 8px -8px;
  color: #fff;
  font-family: 'Roboto Slab', serif;
  font-size: 18px;
  border-radius: 7px 7px 0 0;
}

.section h3 small.white a, fieldset h3 small.white a {
  color: rgba(255, 255, 255, 0.8);
  font-size: 14px;
}

.section-short { min-height: auto; }

div.section div.btn.btn-info {
  margin: 5px !important;
}

.section table {
  max-width: 99.5% !important;
}

/* Parishes index: keep the table inside the viewport on narrow screens.
   The management layout column is a flex item (min-width: auto), so a wide
   table expands the document unless that chain can shrink and the table
   scrolls in its own wrapper. */
.row > .col-sm-12.parishes_controller.index {
  min-width: 0;
}

#Parishes {
  min-width: 0;
  max-width: 100%;
}

#Parishes .table-responsive {
  width: 100%;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* ── Page Title ── */

div.row div.col-xs-12 h3 {
  text-align: center;
  background-color: #334155;
  color: #fff;
  padding: 8px 14px;
  font-family: 'Roboto Slab', serif;
  font-size: 20px;
  border-radius: 6px;
}

/* ── Tables ── */

.table-bordered > thead > tr > th,
.table-bordered > tbody > tr > th,
.table-bordered > tfoot > tr > th,
.table-bordered > thead > tr > td,
.table-bordered > tbody > tr > td,
.table-bordered > tfoot > tr > td {
  background: white;
  border: 1px solid #e9ecef;
}

.table-striped tbody tr:nth-child(2n+1) td,
.table-striped tbody tr:nth-child(2n+1) th {
  background-color: #f8f9fa;
}

/* ── Alerts ── */

div.alert-success h4, div.alert-warning h4, div.alert-danger h4 {
  text-align: center;
}

div#errorExplanation.errorExplanation {
  color: #fff;
  background-color: #dc3545;
  padding: 12px;
  border-radius: 6px;
}

.has-warning .form-control {
  border-color: #dc3545;
}

.alert-error h4 {
  color: #fff;
  background-color: #dc3545;
  padding: 12px;
  text-align: center;
  border-radius: 6px;
}

/* ── Pagination ── */

div.pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  margin: 0;
}

div#Pagination div.pagination,
div.pagination {
  border: 1px solid #dee2e6;
  background: white;
  padding: 4px;
  border-radius: 6px;
}

.pagination > a,
.pagination > span,
.pagination > em {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  padding: 5px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  line-height: 1.2;
  font-style: normal;
}

.pagination > a {
  color: #4338ca;
  text-decoration: none;
}

.pagination > a:hover,
.pagination > a:focus {
  background: #f3f4f6;
  border-color: #dee2e6;
  color: #312e81;
}

.pagination > .current,
div#Pagination div.pagination span.current {
  background: #4338ca;
  color: white;
  border-color: #4338ca;
}

.pagination > .gap,
div#Pagination div.pagination span.gap {
  color: #6c757d;
  background: transparent;
  border-color: transparent;
}

.pagination > .disabled {
  color: #6c757d;
  background: #f8f9fa;
  border-color: #dee2e6;
  opacity: 0.65;
  pointer-events: none;
}

.pagination > .previous_page,
.pagination > .next_page {
  font-weight: 600;
}

span.disabled.prev_page {
  border-color: #dee2e6;
}

/* ── Forms ── */

div.form-group {
  margin-bottom: 8px;
}

div.form-group.moremargin {
  margin-bottom: 38px;
}

input#imageURLboxSmall {
  width: 100%;
}

.code_editor {
  width: 100%;
  height: 400px;
}

input#email, input#password {
  display: block;
  width: 100%;
  height: 38px;
  padding: 8px 14px;
  font-size: 16px;
  line-height: 1.5;
  color: #212529;
  background-color: #fff;
  border: 1px solid #dee2e6;
  border-radius: 6px;
}

select#directory_id,
select#dfcfile_page_layout,
select#dfcfile_page_layout option,
select#directory_id option {
  color: #212529 !important;
}

/* ── Images ── */

div.imagelist {
  width: 100%;
  height: 180px;
  overflow: hidden;
  background-color: #e9ecef;
  border-radius: 6px;
}

td.recent_images {
  max-width: 50px;
}

input#image_uploaded_data {
  border-radius: 6px;
  font-size: 16px;
  padding: 10px 16px;
  background-color: #0891b2;
  border: none;
  color: #fff;
}

/* ── Tabs (general) ── */

.nav > li > a {
  padding: 6px 8px;
  background-color: #f8f9fa;
  font-size: 14px;
  border-radius: 4px;
  color: #212529;
  text-decoration: none;
}

.nav > li > a:hover {
  background-color: #4338ca;
  color: white;
  text-decoration: none;
}

.nav > li > a.active {
  background-color: #334155;
  color: #fff;
}

.nav > li {
  margin: 0 2px;
}

ul#myTab.nav.nav-tabs li a {
  padding: 6px 10px;
  background-color: #475569;
  color: white;
  border-radius: 4px 4px 0 0;
  font-size: 14px;
}

ul#myTab.nav.nav-tabs li:hover a {
  background-color: #64748b;
}

ul#myTab.nav.nav-tabs li.active a {
  background-color: #1e1b4b;
  color: white;
}

ul#parishSettingsTabs.nav.nav-tabs .nav-link {
  padding: 6px 10px;
  background-color: #475569;
  color: white;
  border-radius: 4px 4px 0 0;
  border: none;
  font-size: 14px;
}

ul#parishSettingsTabs.nav.nav-tabs .nav-link:hover {
  background-color: #64748b;
  color: white;
}

ul#parishSettingsTabs.nav.nav-tabs .nav-link.active {
  background-color: #1e1b4b;
  color: white;
  border: none;
}

/* ── Dfcfile Edit Page ── */

.dfcfile-edit-header {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 18px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dfcfile-edit-header h5 {
  font-family: 'Roboto Slab', serif;
  color: #1e1b4b;
  font-size: 17px;
}

.dfcfile-edit-tabs {
  border-bottom: 2px solid #e2e8f0;
  gap: 2px;
  padding: 0;
}

.dfcfile-edit-tabs .nav-link {
  color: #64748b;
  font-size: 14px;
  font-weight: 500;
  padding: 10px 18px;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  border-radius: 0;
  background: none;
  transition: color 0.15s, border-color 0.15s;
  display: inline-flex;
  align-items: center;
}

.dfcfile-edit-tabs .nav-link:hover {
  color: #334155;
  border-bottom-color: #cbd5e1;
  background: none;
}

.dfcfile-edit-tabs .nav-link.active {
  color: #1e1b4b;
  border-bottom-color: #4338ca;
  background: none;
  font-weight: 600;
}

.dfcfile-edit-tabs .nav-link .bi {
  font-size: 15px;
}

/* ── Tabs + Quick Settings row ── */

.dfcfile-tabs-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

.dfcfile-quick-settings {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 6px 0;
  flex-shrink: 0;
}

.dfcfile-qs-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  background: #f1f5f9;
  color: #64748b;
  font-size: 14px;
  text-decoration: none;
  transition: background 0.15s, color 0.15s;
}
.dfcfile-qs-btn:hover {
  background: #e2e8f0;
  color: #334155;
}

.dfcfile-qs-btn.dfcfile-qs-btn-danger {
  background: #fee2e2 !important;
  color: #dc2626 !important;
  box-shadow: 0 0 0 1px #fca5a5 inset;
}
.dfcfile-qs-btn.dfcfile-qs-btn-danger:hover {
  background: #fecaca !important;
  color: #b91c1c !important;
}

.dfcfile-qs-divider {
  width: 1px;
  height: 20px;
  background: #e2e8f0;
  flex-shrink: 0;
}

.dfcfile-qs-toggle {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dfcfile-qs-label {
  font-size: 12px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  white-space: nowrap;
  line-height: 1;
}

.dfcfile-quick-settings .form-check.form-switch {
  min-height: auto !important;
  margin: 0 !important;
  padding-left: 2.5em !important;
}

.dfcfile-quick-settings .form-check-input {
  width: 34px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer;
}

.dfcfile-quick-settings .form-check-input:checked {
  background-color: #4338ca !important;
  border-color: #4338ca !important;
}

.dfcfile-quick-settings .form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.25) !important;
  border-color: #4338ca !important;
}

/* ── Sticky footer (page edit) ── */

.dfcfile-sticky-footer-spacer {
  height: 72px;
}

.dfcfile-sticky-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  padding: 10px 20px 12px;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
}

.dfcfile-sticky-footer-settings {
  display: flex;
  flex: 1 1 auto;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.dfcfile-sticky-footer-settings .dfcfile-quick-settings {
  padding: 0;
}

.dfcfile-sticky-footer-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 0 0 auto;
  margin-left: auto;
}

@media (max-width: 767px) {
  .dfcfile-sticky-footer-spacer {
    height: 100px;
  }

  .dfcfile-sticky-footer-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-end;
  }
}

.dfcfile-tab-content.has-sticky-footer .dfcfile-page-edit-fields,
.dfcfile-tab-content.has-sticky-footer .dfcfile-inline-actions {
  display: none !important;
}

.dfcfile-qs-field {
  display: flex;
  align-items: center;
  gap: 6px;
}

/* Segmented control (e.g. Slideshow | Gallery) */
.dfcfile-segmented {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 3px;
  border: 1px solid #e2e8f0;
  border-radius: 999px;
  background: #f8fafc;
  position: relative;
}
.dfcfile-segmented input[type="radio"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}
.dfcfile-segmented label {
  margin: 0;
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 4px 12px;
  border-radius: 999px;
  line-height: 1;
  transition: background 0.15s, color 0.15s, box-shadow 0.15s;
  user-select: none;
  white-space: nowrap;
}
.dfcfile-segmented label:hover {
  color: #334155;
}
.dfcfile-segmented input[type="radio"]:checked + label {
  background: #ffffff;
  color: #4338ca;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.dfcfile-segmented input[type="radio"]:focus-visible + label {
  outline: 2px solid rgba(67, 56, 202, 0.35);
  outline-offset: 1px;
}

.dfcfile-qs-select {
  font-size: 12px;
  padding: 3px 26px 3px 8px;
  border-radius: 6px;
  border-color: #e2e8f0;
  max-width: 160px;
  height: 28px;
  line-height: 1;
  color: #334155;
  background-color: #f8fafc;
}
.dfcfile-qs-select:focus {
  border-color: #4338ca;
  box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.15);
}

/* Page-edit-fields bar (bottom) — toggle switch overrides */
.dfcfile-page-edit-fields .form-check.form-switch {
  min-height: auto !important;
  margin: 0 !important;
  padding-left: 2.5em !important;
}

.dfcfile-page-edit-fields .form-check-input {
  width: 34px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer;
}

.dfcfile-page-edit-fields .form-check-input:checked {
  background-color: #4338ca !important;
  border-color: #4338ca !important;
}

.dfcfile-page-edit-fields .form-check-input:focus {
  box-shadow: 0 0 0 2px rgba(67, 56, 202, 0.25) !important;
  border-color: #4338ca !important;
}

.dfcfile-tab-content {
  padding-top: 20px;
}

.dfcfile-editor-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dfcfile-loading-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  background: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity 0.3s ease;
}
.dfcfile-loading-overlay.fade-out {
  opacity: 0;
  pointer-events: none;
}
.dfcfile-loading-spinner {
  text-align: center;
  font-size: 0.85rem;
}

.dfcfile-asset-card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.dfcfile-asset-card .card-header {
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  padding: 10px 16px;
}

.dfcfile-asset-card .card-header h6 {
  color: #334155;
  font-size: 14px;
  font-weight: 600;
}

.dfcfile-asset-card .card-body {
  padding: 12px 16px;
  max-height: 360px;
  overflow-y: auto;
}

.dfcfile-asset-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.dfcfile-asset-row {
  padding: 6px 0;
  border-bottom: 1px solid #f1f5f9;
}

.dfcfile-asset-row:last-child {
  border-bottom: none;
}

.dfcfile-asset-thumb {
  width: 56px;
  min-width: 56px;
  max-width: 56px;
  height: 56px;
  min-height: 56px;
  max-height: 56px;
  border-radius: 8px;
  overflow: hidden;
  flex-shrink: 0;
  flex-grow: 0;
  border: 1px solid #e2e8f0;
  background: #f8fafc;
  display: block;
}

.dfcfile-asset-thumb img {
  width: 56px;
  height: 56px;
  max-width: 56px;
  max-height: 56px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
}

.dfcfile-asset-icon {
  width: 36px;
  height: 36px;
  border-radius: 6px;
  background: #f1f5f9;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: #64748b;
  font-size: 16px;
}

.dfcfile-asset-row .form-control-sm {
  font-size: 12px;
  font-family: 'SF Mono', Monaco, Consolas, 'Courier New', monospace;
  color: #475569;
  background: #f8fafc;
  cursor: text;
}

.dfcfile-asset-row .form-control-sm:focus {
  background: #fff;
  color: #1e1b4b;
}

/* Feeds accordion */

.dfcfile-feeds-accordion .accordion-item {
  border: 1px solid #e2e8f0;
  margin-bottom: 6px;
  border-radius: 8px !important;
  overflow: hidden;
}

.dfcfile-feeds-accordion .accordion-button {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
  padding: 12px 18px;
  background: #f8fafc;
}

.dfcfile-feeds-accordion .accordion-button:not(.collapsed) {
  background: #1e1b4b;
  color: #fff;
  box-shadow: none;
}

.dfcfile-feeds-accordion .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

.dfcfile-feeds-accordion .accordion-body {
  padding: 16px 18px;
}

.dfcfile-feeds-accordion .accordion-body .section {
  border: none;
  padding: 0;
  margin-bottom: 0;
  background: none;
}

.dfcfile-feeds-accordion .accordion-body .section h3 {
  display: none;
}

/* ── Misc ── */

div.row.black {
  background-color: #1e1b4b;
  color: white;
  margin: 0;
  border-radius: 6px;
}

h1.nomargin {
  margin: 0;
  font-size: 2em;
}

div#Headline h2 {
  margin: 0;
}

div.alert-success h4 {
  padding: 12px;
}

.navbar-brand {
  padding: 0;
}

div#edit.tab-pane.fade.active.in form div.col-md-8 {
  padding-top: 5px;
}

div.section h3 a.pull-right.btn.btn-inverse {
  margin-top: 0;
}

h3 a.btn.btn-info.pull-right {
  margin-top: 0;
}

h3 div.btn.btn-info.pull-right {
  margin-top: -5px;
}

div.section h3 {
  padding-right: 4px;
}

div.col-sm-6 div#People.section,
div.col-sm-6 div#Campaigns.section {
  min-height: 140px;
}

form#Search input#query.form-control {
  margin-top: -5px;
}

.well {
  margin-bottom: 0;
}

.section h3 {
  padding: 4px 4px 4px 14px;
}

body#tinymce {
  background-color: white !important;
  background: white !important;
}

/* ── Calendly ── */

.calendly-overlay {
  background-color: rgba(31, 31, 31, 0.9) !important;
}

.calendar-day.is-bookable {
  background-color: #4338ca !important;
  color: white !important;
}

/* ── Navbar Dropdowns ── */

.management-navbar-primary .dropdown-menu {
  border: 1px solid rgba(0, 0, 0, 0.08);
  border-radius: 8px;
  padding: 6px 0;
  min-width: 220px;
  margin-top: 8px;
}

.management-navbar-primary .dropdown-item {
  padding: 8px 16px;
  font-size: 14px;
  color: #334155;
  display: flex;
  align-items: center;
  transition: background-color 0.1s;
}

.management-navbar-primary .dropdown-item:hover {
  background-color: #f1f5f9;
  color: #1e1b4b;
}

.management-navbar-primary .dropdown-item.text-danger:hover {
  background-color: #fef2f2;
}

.management-navbar-primary .dropdown-item .bi {
  font-size: 15px;
  width: 18px;
  text-align: center;
}

.management-navbar-primary .dropdown-divider {
  margin: 4px 0;
  border-color: #e2e8f0;
}

.user-avatar-img {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  object-fit: cover;
  vertical-align: middle;
}

.user-dropdown-header {
  padding: 12px 16px;
  white-space: normal;
}

.user-avatar-dropdown {
  flex-shrink: 0;
}

.user-avatar-dropdown-img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid #e2e8f0;
}

.user-avatar-dropdown-placeholder {
  font-size: 36px;
  color: #94a3b8;
}

.user-info-dropdown {
  min-width: 0;
}

.user-info-dropdown .fw-semibold {
  font-size: 14px;
  color: #1e1b4b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-info-dropdown .text-muted {
  font-size: 12px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.user-dropdown-menu {
  min-width: 240px;
}

/* ── Parish Edit Page ── */

.tab-content .card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.tab-content .card-header {
  background: #334155;
  color: #fff;
  padding: 10px 16px;
  border-bottom: none;
}

.tab-content .card-header h5 {
  font-family: 'Roboto Slab', serif;
  font-size: 15px;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #fff;
}

.tab-content .card-header h5 .bi {
  opacity: 0.8;
}

.tab-content .card-body {
  padding: 20px;
}

.tab-content .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
}

.tab-content .form-text {
  font-size: 12px;
}

.tab-content .form-select,
.tab-content .form-control {
  border-radius: 6px;
  border-color: #d1d5db;
  font-size: 14px;
}

.tab-content .form-select:focus,
.tab-content .form-control:focus {
  border-color: #4338ca;
  box-shadow: 0 0 0 0.2rem rgba(67, 56, 202, 0.15);
}

/* ── Person Edit / Profile Page ── */

.person-edit-page .page-title {
  font-family: 'Roboto Slab', serif;
  font-size: 22px;
  color: #1e1b4b;
}

.person-edit-page .card {
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  overflow: hidden;
}

.person-edit-page .card-header {
  background: #334155;
  color: #fff;
  padding: 10px 16px;
  border-bottom: none;
}

.person-edit-page .card-title-icon {
  font-family: 'Roboto Slab', serif;
  font-size: 16px;
  font-weight: 500;
  margin: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  color: #fff;
}

.person-edit-page .card-title-icon .bi {
  opacity: 0.8;
}

.person-edit-page .card-body {
  padding: 20px;
}

.profile-card {
  border-top: 4px solid #4338ca !important;
}

.profile-header {
  position: relative;
}

.profile-avatar {
  position: relative;
  display: inline-block;
}

.profile-avatar-upload {
  position: relative;
  width: 130px;
  height: 130px;
  flex-shrink: 0;
  cursor: pointer;
  overflow: hidden;
  border-radius: 12px;
  border: 3px solid #e2e8f0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  background-color: #f8f9fa;
}

.profile-avatar-upload .profile-avatar-img {
  display: block;
  width: 100% !important;
  height: 100% !important;
  max-width: 130px !important;
  max-height: 130px !important;
  object-fit: cover;
  border-radius: 0;
  border: none;
  box-shadow: none;
}

.profile-avatar-overlay {
  position: absolute;
  inset: 0;
  border-radius: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}

.profile-avatar-overlay-icon {
  font-size: 22px;
  color: #fff;
}

.profile-avatar-overlay-text {
  font-size: 11px;
  color: #fff;
  margin-top: 2px;
  font-weight: 500;
  white-space: nowrap;
}

.profile-avatar-upload:hover .profile-avatar-overlay,
.profile-avatar-upload.dragover .profile-avatar-overlay {
  opacity: 1;
}

.profile-avatar-upload:hover .profile-avatar-img,
.profile-avatar-upload.dragover .profile-avatar-img {
  filter: brightness(0.7);
}

.profile-avatar-upload.dragover {
  outline: 3px dashed #4338ca;
  outline-offset: 4px;
}

.profile-avatar-overlay.uploading {
  opacity: 1;
  background: rgba(67, 56, 202, 0.4);
}

.profile-upload-progress {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
}

.profile-name {
  font-family: 'Roboto Slab', serif;
  font-size: 26px;
  font-weight: 600;
  color: #1e1b4b;
  margin: 0;
  line-height: 1.3;
}

.profile-honorific {
  font-weight: 400;
  color: #64748b;
}

.profile-nickname {
  font-weight: 400;
  font-style: italic;
  color: #64748b;
  font-size: 20px;
}

.profile-meta {
  margin-top: 4px;
}

.profile-meta-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: #64748b;
  font-size: 14px;
  margin-right: 16px;
}

.profile-meta-item .bi {
  font-size: 13px;
}

.profile-status-badge {
  font-size: 12px;
  padding: 3px 10px;
  vertical-align: middle;
  font-weight: 500;
}

.profile-deactivate a {
  font-size: 13px;
  text-decoration: none;
  transition: color 0.15s;
}

.profile-deactivate a:hover {
  color: #dc3545 !important;
}

.sub-record-card {
  border-color: #e2e8f0 !important;
  border-radius: 8px !important;
  transition: box-shadow 0.15s;
}

.sub-record-card:hover {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.sub-record-card .card-body {
  padding: 16px;
}

.sub-record-card .border-top {
  border-color: #f1f5f9 !important;
}

.sub-record-card .btn-sm {
  font-size: 13px;
  padding: 4px 10px;
}

.sub-record-card .btn-outline-secondary {
  color: #6c757d;
  background-color: transparent;
  border-color: #6c757d;
}
.sub-record-card .btn-outline-secondary:hover {
  color: #fff;
  background-color: #6c757d;
  border-color: #6c757d;
}
.sub-record-card .btn-outline-danger {
  color: #dc3545;
  background-color: transparent;
  border-color: #dc3545;
}
.sub-record-card .btn-outline-danger:hover {
  color: #fff;
  background-color: #dc3545;
  border-color: #dc3545;
}

.family-member-row:not(:last-child) {
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}

.bio-textarea {
  min-height: 120px;
  resize: vertical;
}

.person-edit-page .form-label {
  font-size: 13px;
  font-weight: 600;
  color: #475569;
  margin-bottom: 4px;
}

.person-edit-page .form-select,
.person-edit-page .form-control {
  border-radius: 6px;
  border-color: #d1d5db;
  font-size: 14px;
}

.person-edit-page .form-select:focus,
.person-edit-page .form-control:focus {
  border-color: #4338ca;
  box-shadow: 0 0 0 0.2rem rgba(67, 56, 202, 0.15);
}

.person-edit-page .form-check-label {
  font-size: 13px;
  color: #475569;
}

/* ── Offcanvas menu (all screen sizes — rendered outside navbar) ── */

#globalnav.offcanvas {
  background: #1e1b4b;
  max-width: 300px;
}

#globalnav .offcanvas-header {
  border-bottom: 1px solid rgba(255,255,255,0.12);
  padding: 16px 20px;
}

#globalnav .offcanvas-header .offcanvas-title {
  font-family: 'Roboto Slab', serif;
  font-size: 17px;
  font-weight: 600;
  color: #fff;
}

#globalnav .offcanvas-body {
  padding: 12px 16px 24px;
}

#globalnav .offcanvas-body .navbar-nav {
  gap: 2px;
}

.offcanvas-section-label {
  color: rgba(255,255,255,0.45);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  padding: 16px 12px 6px;
  margin: 0;
}

#globalnav .offcanvas-body .nav-link {
  color: rgba(255,255,255,0.85) !important;
  padding: 10px 12px !important;
  border-radius: 6px;
  font-size: 15px !important;
  transition: background-color 0.15s;
}

#globalnav .offcanvas-body .nav-link:hover,
#globalnav .offcanvas-body .nav-link:focus {
  background: rgba(255,255,255,0.08);
  color: #fff !important;
}

#globalnav .offcanvas-body .nav-link.text-danger {
  color: #fca5a5 !important;
}

#globalnav .offcanvas-body .nav-link.text-danger:hover {
  background: rgba(239,68,68,0.15);
  color: #fecaca !important;
}

/* ── Management Navbar: Desktop (lg+) ── */

@media (min-width: 992px) {
  .management-navbar-primary > .container-fluid {
    flex-wrap: nowrap;
  }
}

/* ── Management Navbar: Mobile (< lg) ── */

@media (max-width: 991.98px) {
  .management-navbar-primary > .container-fluid {
    flex-wrap: nowrap;
  }

  .management-navbar-primary .navbar-brand + .navbar-brand {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 0 1 auto;
  }

  .management-navbar-primary .navbar-toggler {
    flex-shrink: 0;
    margin-left: auto;
  }

  /* The context bar is .d-none.d-lg-block, but the nav JS adds
     .has-context-bar regardless because the element is in the DOM. Below lg
     it isn't painted, so the 94px allowance leaves a dead band under the
     navbar. Fall back to the navbar's own height. The impersonation banner
     does render here, so it keeps its 38px. */
  body.has-context-bar {
    margin-top: 56px !important;
  }

  body.has-impersonation-banner.has-context-bar {
    margin-top: 94px !important;
  }
}

/* ── Responsive: Mobile ── */

@media (max-width: 767px) {
  body {
    margin-bottom: 60px;
    margin-top: 44px;
  }

  /* Same reclaim as the lg breakpoint above, against the shorter 40px
     navbar this breakpoint sets. */
  body.has-context-bar {
    margin-top: 44px !important;
  }

  body.has-impersonation-banner,
  body.has-impersonation-banner.has-context-bar {
    margin-top: 82px !important;
  }

  .management-navbar-primary {
    min-height: 40px;
    padding: 0 10px;
  }

  ul#myTab.nav.nav-tabs li a {
    font-size: 11px;
    padding: 4px;
  }

  #myTab {
    margin-left: 10px;
  }

  .dfcfile-edit-tabs .nav-link {
    font-size: 12px;
    padding: 8px 10px;
  }

  .dfcfile-edit-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 10px;
  }

  .dfcfile-edit-header .d-flex:last-child {
    flex-wrap: wrap;
  }

  .dfcfile-tabs-row {
    flex-direction: column;
    align-items: stretch;
  }

  .dfcfile-quick-settings {
    flex-wrap: wrap;
    gap: 10px;
    padding: 10px 0 4px;
    border-top: 1px solid #e2e8f0;
    margin-top: 4px;
  }

  .dfcfile-qs-select {
    max-width: 130px;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  body {
    margin-bottom: 120px;
    margin-top: 80px;
  }

  ul#myTab.nav.nav-tabs li a {
    font-size: 11px;
    padding: 4px;
  }

  #myTab {
    margin-left: 16px;
  }

  div.form-group.moremargin {
    margin-bottom: 80px;
  }

  .dfcfile-edit-tabs .nav-link {
    font-size: 13px;
    padding: 8px 14px;
  }
}

@media (min-width: 992px) and (max-width: 1199px) {
  body {
    margin-bottom: 120px;
    margin-top: 70px;
  }

  #myTab {
    margin-left: 15px;
  }

  div.form-group.moremargin {
    margin-bottom: 80px;
  }
}

@media (min-width: 1200px) {
  body {
    margin-bottom: 100px;
    margin-top: 64px;
  }

  #myTab {
    margin-left: 15px;
  }

  div.form-group.moremargin {
    margin-bottom: 70px;
  }
}

/* ═══════════════════════════════════════════════════════
   AI Editor Tab — Chat + Preview Split Panel
   ═══════════════════════════════════════════════════════ */

.dfc-ai-editor {
  display: flex;
  height: 600px;
  border: 1px solid #2d2d44;
  border-radius: 8px;
  overflow: hidden;
  background: #1a1a2e;
}

.dfc-ai-chat {
  width: 360px;
  min-width: 300px;
  display: flex;
  flex-direction: column;
  background: #1a1a2e;
  border-right: 1px solid #2d2d44;
}

.dfc-ai-chat-header {
  padding: 12px 16px;
  border-bottom: 1px solid #2d2d44;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  flex-shrink: 0;
}

.dfc-ai-chat-header h6 {
  margin: 0;
  color: #e2e8f0;
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
}

.dfc-ai-chat-header h6 i { color: #a78bfa; }

.dfc-ai-tone-select {
  background: #2d2d44;
  border: 1px solid #3d3d5c;
  color: #94a3b8;
  border-radius: 6px;
  padding: 4px 8px;
  font-size: 11px;
  cursor: pointer;
  flex-shrink: 0;
}

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

.dfc-ai-msg {
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 13px;
  line-height: 1.5;
  max-width: 90%;
  word-wrap: break-word;
}

.dfc-ai-msg-system {
  background: #2d2d44;
  color: #94a3b8;
  align-self: center;
  text-align: center;
  font-size: 12px;
  border-radius: 8px;
  max-width: 100%;
}

.dfc-ai-msg-user {
  background: #3b82f6;
  color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.dfc-ai-msg-ai {
  background: #2d2d44;
  color: #e2e8f0;
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.dfc-ai-msg-status {
  background: transparent;
  color: #64748b;
  font-size: 11px;
  align-self: flex-start;
  padding: 4px 0;
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: 100%;
}

.dfc-ai-msg-status.step-active { color: #a78bfa; }
.dfc-ai-msg-status.step-complete { color: #4ade80; }

.dfc-ai-status-icon {
  width: 16px;
  height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dfc-ai-typing {
  display: none;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  align-self: flex-start;
}

.dfc-ai-typing.active { display: flex; }

.dfc-ai-typing-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #64748b;
  animation: dfc-ai-bounce 1.4s infinite ease-in-out;
}

.dfc-ai-typing-dot:nth-child(2) { animation-delay: 0.16s; }
.dfc-ai-typing-dot:nth-child(3) { animation-delay: 0.32s; }

@keyframes dfc-ai-bounce {
  0%, 80%, 100% { transform: scale(0); }
  40% { transform: scale(1); }
}

.dfc-ai-input-wrap {
  padding: 10px 12px;
  border-top: 1px solid #2d2d44;
  background: #12121f;
  flex-shrink: 0;
}

.dfc-ai-input-row {
  display: flex;
  gap: 8px;
}

.dfc-ai-textarea {
  flex: 1;
  background: #2d2d44;
  border: 1px solid #3d3d5c;
  color: #e2e8f0;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 13px;
  resize: none;
  min-height: 40px;
  max-height: 100px;
  font-family: inherit;
  line-height: 1.4;
}

.dfc-ai-textarea::placeholder { color: #64748b; }
.dfc-ai-textarea:focus { outline: none; border-color: #3b82f6; }

.dfc-ai-send {
  background: #3b82f6;
  border: none;
  color: #fff;
  border-radius: 8px;
  width: 40px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  flex-shrink: 0;
}

.dfc-ai-send:hover { background: #2563eb; }
.dfc-ai-send:disabled { opacity: 0.5; cursor: not-allowed; }

.dfc-ai-hint {
  font-size: 10px;
  color: #4a5568;
  margin-top: 4px;
}

.dfc-ai-preview {
  flex: 1;
  background: #fff;
  overflow: hidden;
  position: relative;
  display: flex;
  flex-direction: column;
}

.dfc-ai-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
  gap: 8px;
  flex-shrink: 0;
}

.dfc-ai-toolbar-group {
  display: flex;
  align-items: center;
  gap: 6px;
}

.dfc-ai-toolbar .btn { font-size: 12px; }

.dfc-ai-preview-iframe {
  width: 100%;
  flex: 1;
  border: none;
}

#aiPreviewPanel .mce-tinymce {
  border: none !important;
  box-shadow: none !important;
}

#aiPreviewPanel .mce-edit-area {
  border-top: 1px solid #e2e8f0 !important;
}

#aiPreviewPanel iframe {
  min-height: 400px;
}

.dfc-ai-preview-empty {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
  color: #94a3b8;
}

.dfc-ai-preview-empty i { font-size: 48px; display: block; margin-bottom: 12px; color: #cbd5e1; }

.dfc-ai-streaming-bar {
  height: 3px;
  background: #e2e8f0;
  overflow: hidden;
  flex-shrink: 0;
}

.dfc-ai-streaming-bar.hidden { display: none; }

.dfc-ai-streaming-bar .bar {
  height: 100%;
  width: 30%;
  background: linear-gradient(90deg, #3b82f6, #a78bfa);
  animation: dfc-ai-stream 1.2s ease-in-out infinite;
}

@keyframes dfc-ai-stream {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(400%); }
}

.dfc-ai-banner {
  padding: 6px 12px;
  font-size: 12px;
  text-align: center;
  background: #fefce8;
  border-bottom: 1px solid #fde68a;
  color: #92400e;
  flex-shrink: 0;
}

.dfc-ai-banner.hidden { display: none; }

@media (max-width: 768px) {
  .dfc-ai-editor {
    flex-direction: column;
    height: auto;
  }
  .dfc-ai-chat {
    width: 100%;
    min-width: auto;
    border-right: none;
    border-bottom: 1px solid #2d2d44;
    max-height: 400px;
  }
  .dfc-ai-preview {
    min-height: 400px;
  }
}

/* ── Management login landing (dashboard show) ───────────────────── */
.mgmt-landing .mgmt-welcome {
  padding: 1.25rem 1.35rem;
  border-radius: 12px;
  background:
    linear-gradient(135deg, rgba(15, 23, 42, 0.03), rgba(13, 110, 253, 0.06)),
    #fff;
  border: 1px solid #e8edf3;
}
.mgmt-landing .mgmt-eyebrow {
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #64748b;
  font-weight: 600;
}
.mgmt-landing .mgmt-welcome-title {
  font-weight: 650;
  color: #0f172a;
  letter-spacing: -0.01em;
}
.mgmt-landing .mgmt-section-title {
  font-weight: 650;
  color: #0f172a;
}
.mgmt-landing .mgmt-overview {
  padding: 0.35rem;
  border-radius: 12px;
  background: #f8fafc;
  border: 1px solid #e8edf3;
}
.mgmt-landing .mgmt-stat {
  text-align: center;
  padding: 0.85rem 0.5rem;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eef2f7;
  height: 100%;
}
.mgmt-landing .mgmt-stat-value {
  font-size: 1.55rem;
  font-weight: 700;
  color: #0f172a;
  line-height: 1.1;
}
.mgmt-landing .mgmt-stat-label {
  font-size: 0.75rem;
  color: #64748b;
  margin-top: 0.2rem;
}
.mgmt-landing .mgmt-start-card {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  height: 100%;
  padding: 1rem 1.05rem;
  border-radius: 12px;
  border: 1px solid #e5eaf1;
  background: #fff;
  text-decoration: none !important;
  color: inherit;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.mgmt-landing .mgmt-start-card:hover {
  border-color: #93c5fd;
  box-shadow: 0 8px 20px rgba(15, 23, 42, 0.06);
  transform: translateY(-1px);
}
.mgmt-landing .mgmt-start-card-featured {
  border-color: #c7d2fe;
  background: linear-gradient(180deg, #eef2ff 0%, #fff 70%);
}
.mgmt-landing .mgmt-start-icon {
  flex: 0 0 2.4rem;
  width: 2.4rem;
  height: 2.4rem;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: #fff;
}
.mgmt-landing .mgmt-start-icon-assistant { background: #0d6efd; }
.mgmt-landing .mgmt-start-icon-pages { background: #0f766e; }
.mgmt-landing .mgmt-start-icon-news { background: #c2410c; }
.mgmt-landing .mgmt-start-icon-events { background: #b45309; }
.mgmt-landing .mgmt-start-icon-nav { background: #475569; }
.mgmt-landing .mgmt-start-icon-design { background: #7c3aed; }
.mgmt-landing .mgmt-start-icon-goals { background: #be185d; }
.mgmt-landing .mgmt-start-icon-brief { background: #4338ca; }
.mgmt-landing .mgmt-start-icon-tutorials { background: #b91c1c; }
.mgmt-landing .mgmt-start-body {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  min-width: 0;
}
.mgmt-landing .mgmt-start-body strong {
  color: #0f172a;
  font-size: 0.98rem;
}
.mgmt-landing .mgmt-start-body span {
  color: #64748b;
  font-size: 0.82rem;
  line-height: 1.35;
}
.mgmt-landing .mgmt-side-card {
  border-radius: 12px;
  border-color: #e8edf3;
}
@media (max-width: 576px) {
  .mgmt-landing .mgmt-welcome {
    padding: 1rem;
  }
  .mgmt-landing .mgmt-stat-value {
    font-size: 1.3rem;
  }
}

.input-group > .btn {
  margin: 0;
}

.input-group-sm > .form-control,
.input-group-sm > .btn {
  min-height: 31px;
  height: 31px;
  box-sizing: border-box;
}

.input-group-sm > .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* ── Styles extracted from inline :css blocks ──────────────────────── */

/* Publications index (.pub-index) — from publications/index.html.haml */
.pub-index { max-width: 980px; margin: 0 auto; }
.pub-index .pub-toolbar { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; }
.pub-index .pub-toolbar h1 { font-size: 1.5rem; font-weight: 700; margin: 0; }
.pub-index .pub-count { color: #94a3b8; font-size: .85rem; font-weight: 500; }
.pub-index .pub-search { max-width: 320px; }
.pub-index .pub-card {
  border: 1px solid #e5e7eb; border-radius: 12px; background: #fff;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  padding: 1rem 1.15rem; margin-bottom: .85rem;
  transition: box-shadow .15s ease, border-color .15s ease;
}
.pub-index .pub-card:hover { box-shadow: 0 4px 14px rgba(15,23,42,.08); border-color: #d6dae1; }
.pub-index .pub-card-top { display: flex; align-items: center; gap: .9rem; }
.pub-index .pub-icon {
  width: 42px; height: 42px; border-radius: 10px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: #eef2ff; color: #4f46e5; font-size: 1.15rem;
}
.pub-index .pub-icon.is-podcast { background: #f5e8ff; color: #9333ea; }
.pub-index .pub-info { flex: 1; min-width: 0; }
.pub-index .pub-name { font-size: 1.02rem; font-weight: 600; color: #1e293b; text-decoration: none; }
.pub-index .pub-name:hover { color: #4f46e5; }
.pub-index .pub-meta { font-size: .8rem; color: #94a3b8; margin-top: 2px; display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.pub-index .pub-badge { font-size: .68rem; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; padding: .12rem .45rem; border-radius: 4px; }
.pub-index .pub-badge.is-news { background: #eef2ff; color: #4f46e5; }
.pub-index .pub-badge.is-podcast { background: #f5e8ff; color: #9333ea; }
.pub-index .pub-actions { display: flex; flex-wrap: wrap; gap: .4rem; flex-shrink: 0; }
.pub-index .pub-url { display: flex; gap: .4rem; margin-top: .85rem; }
.pub-index .pub-url input { font-size: .82rem; background: #f8fafc; color: #475569; }
.pub-index .pub-empty { text-align: center; padding: 3.5rem 1rem; color: #94a3b8; border: 1px dashed #d6dae1; border-radius: 12px; background: #fff; }
.pub-index .pub-empty .bi { font-size: 2.25rem; opacity: .5; }

@media (max-width: 575px) {
  .pub-index .pub-card-top { flex-wrap: wrap; }
  .pub-index .pub-actions { width: 100%; }
  .pub-index .pub-toolbar h1 { font-size: 1.15rem; }
}

/* Tutorials index — from tutorials/index.html.haml */
.tutorial-card { transition: box-shadow .15s ease, transform .15s ease; height: 100%; }
.tutorial-card:hover { box-shadow: 0 .5rem 1rem rgba(0,0,0,.12); transform: translateY(-2px); }
.tutorial-card .card-title { font-size: 1.05rem; }
.tutorial-card .card-text { font-size: .9rem; }
.tutorial-category-header { font-size: .85rem; letter-spacing: .05em; text-transform: uppercase; }
.tutorial-search-input { max-width: 420px; }

/* Images show — from images/show.html.haml */
.image-wrap { max-height: 100px; overflow: hidden; max-width: 800px; }
.image-wrap:hover { max-height: 1200px; height: auto; overflow: hidden; max-width: 800px; }
.image-wrap img { width: 100%; }

/* Images edit list — from images/index/_image_edit_file.haml */
#Images .odd { background: #eee; padding: 5px; margin: 5px; }
#Images .even { background: #f4e5e8; padding: 5px; margin: 5px; }

/* System cards — shared across system_giving, system/show, system/sessions, etc. */
.system-card { transition: box-shadow .15s, transform .15s; border-radius: .5rem; }
.system-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }
a .system-card:hover { transform: translateY(-2px); }
a:has(> .system-card) { color: inherit; }

/* System dashboard KPIs — from system/show.html.haml */
.kpi-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bs-secondary-color); margin-bottom: .25rem; }
.kpi-value { font-size: 1.85rem; font-weight: 700; line-height: 1.1; }
.kpi-foot { font-size: 0.72rem; color: var(--bs-secondary-color); }
.section-card .section-arrow { color: var(--bs-secondary-color); transition: transform .15s; }
a:hover .section-card .section-arrow { transform: translateX(3px); color: var(--bs-primary); }
.section-stat { font-size: 1.5rem; font-weight: 600; line-height: 1; }
.section-stat-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--bs-secondary-color); margin-top: .25rem; }
.triage-row { transition: background .15s; }
.triage-row:hover { background: var(--bs-tertiary-bg); }
.triage-dot { font-size: 0.6rem; vertical-align: middle; }
.all-clear { padding: 2rem 1rem; text-align: center; color: var(--bs-secondary-color); }

/* Sortable table headers — shared across system list pages */
th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
th.sortable:hover { color: var(--bs-primary); }
th.sortable .bi { font-size: 0.65rem; vertical-align: middle; opacity: 0.4; }
th.sortable.asc .bi-sort-up, th.sortable.desc .bi-sort-down { opacity: 1; }

/* Bulk action bar — from system/subscribers, system/comments */
.bulk-bar { display: none; }
.bulk-bar.active { display: flex; }

/* System API calls — auto-disabled collapsible groups */
.auto-disabled-card-header[data-bs-toggle="collapse"] { cursor: pointer; }
.auto-disabled-card-header .collapse-chevron { transition: transform .15s; }
.auto-disabled-card-header[aria-expanded="true"] .collapse-chevron { transform: rotate(90deg); }
.auto-disabled-group-expand .group-chevron { transition: transform .15s; font-size: 0.75rem; }
.auto-disabled-group-expand[aria-expanded="true"] .group-chevron { transform: rotate(90deg); }
tr.auto-disabled-group-detail td { border-top: none; padding-top: 0; }
tr.auto-disabled-group-detail .table { margin-bottom: 0; background: var(--bs-tertiary-bg); }

/* Comments tab badges — from system/comments.html.haml */
.comment-tabs .nav-link { position: relative; }
.comment-tabs .nav-link .badge { font-size: 0.65rem; vertical-align: top; }
.badge-akismet { font-size: 0.6rem; }
.blocked-sender { background-color: rgba(var(--bs-danger-rgb), 0.04); }

/* Daily brief pipeline — from system/daily_brief.html.haml */
.db-card { transition: box-shadow .15s; }
.db-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }
.handler-hint { font-family: var(--bs-font-monospace); font-size: 0.75rem; color: var(--bs-secondary-color); }
.truncate-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pipeline-arrow { color: var(--bs-secondary-color); font-size: 0.9rem; }
.priority-pill { font-size: 0.7rem; padding: .15rem .4rem; }

/* Activity detail — from admin_activity/show.html.haml */
.activity-card { transition: box-shadow .15s; }

/* Analytics admin chart — from analytics/admin.html.haml */
.activity-chart rect:hover { fill-opacity: .75; cursor: crosshair; }

/* Feed publication selects — from dfcfiles/edit/_feed1-6.html.haml */
select[id^="dfcfile_dfcfile_publication_feed_id"] { font-size: .8em; }

/* Events index: companion row carries columns that don't fit on a phone */
.mgmt-event-when-row { display: none; }

/* People list: stacked tel:/mailto: contact links */
.mgmt-contact-line + .mgmt-contact-line { margin-top: 2px; }

/* All People / directory headshots — rounded square, cap 160px, scale down */
.mgmt-person-thumb-wrap {
  width: clamp(56px, 20vw, 160px);
  height: clamp(56px, 20vw, 160px);
  max-width: 160px;
  max-height: 160px;
  border-radius: 12px;
  overflow: hidden;
  flex-shrink: 0;
}
img.mgmt-person-thumb,
.mgmt-person-thumb {
  width: 100%;
  height: 100%;
  max-width: 160px;
  max-height: 160px;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  object-position: center;
  border-radius: 12px;
  display: block;
}
.mgmt-person-thumb-fallback {
  background: rgba(13, 110, 253, 0.1);
  color: var(--bs-primary);
  font-weight: 600;
  font-size: clamp(0.85rem, 3vw, 1.5rem);
  display: flex;
  align-items: center;
  justify-content: center;
}
/* List-row headshot: same rounded-square treatment at a fixed small size */
.mgmt-person-thumb-wrap.is-sm {
  width: 44px;
  height: 44px;
  min-width: 44px;
  max-width: 44px;
  max-height: 44px;
  border-radius: 10px;
}
.mgmt-person-thumb-wrap.is-sm .mgmt-person-thumb {
  border-radius: 10px;
}
.mgmt-person-thumb-wrap.is-sm .mgmt-person-thumb-fallback {
  font-size: 0.85rem;
  letter-spacing: 0.02em;
}
.mgmt-contact-line a { color: #4338ca; }
.mgmt-contact-line a:hover { text-decoration: underline !important; }

/* ── Parish people list (parishes/people/index) ──
   Widths are declared here rather than inline so each breakpoint can hand
   space to the columns that remain. Base = widest layout; the breakpoint
   blocks below take columns away as the viewport narrows. */
/* Fixed layout: the header cells' widths are the column widths, and the
   Name column (no width) takes whatever is left. Auto layout would let a
   long nowrap email in the name cell push the pickers below their widths. */
.mgmt-people-table {
  table-layout: fixed;
  width: 100%;
}
.mgmt-people-table > thead > tr > th {
  white-space: nowrap;
}
.mgmt-people-table .mgmt-col-contact    { width: 260px; }
.mgmt-people-table .mgmt-col-contact .mgmt-contact-line { overflow-wrap: anywhere; }
.mgmt-people-table .mgmt-col-updated    { width: 100px; }
.mgmt-people-table .mgmt-col-subscriber { width: 130px; }
.mgmt-people-table .mgmt-col-visibility { width: 165px; }
.mgmt-people-table .mgmt-col-role       { width: 185px; }
.mgmt-people-table .mgmt-col-membership { width: 230px; }

/* Pickers fill their cell so no option label ("Customer Admin",
   "Members & Staff") gets clipped at the chevron. */
.mgmt-people-table .mgmt-col-visibility .form-select,
.mgmt-people-table .mgmt-col-role .form-select {
  width: 100%;
  min-width: 0;
}

.mgmt-person-identity {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.mgmt-person-identity-text {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  line-height: 1.3;
}
.mgmt-person-name {
  display: inline-block;
  overflow-wrap: anywhere;
}
/* Compact contact links live under the name only once the Contact column
   is gone (see the 1199px block). A long address is clipped with an
   ellipsis rather than wrapped mid-word; the full value is in the title. */
.mgmt-contact-compact {
  display: none;
  margin-top: 3px;
}
.mgmt-contact-compact .mgmt-contact-line {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 22px;
}
.mgmt-contact-compact .mgmt-contact-line + .mgmt-contact-line {
  margin-top: 0;
}
.mgmt-people-table .mgmt-col-membership .badge {
  white-space: normal;
  text-align: left;
}

/* Second copies of the pickers, under the name: hidden until a breakpoint
   drops the matching column. (A colspan companion row would create phantom
   columns under table-layout: fixed, so these live inside the name cell.) */
.mgmt-person-extra-controls {
  display: none;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 14px;
  margin-top: 8px;
  padding-left: 54px; /* thumb 44px + gap 10px: line up with the name */
}
.mgmt-extra-subscriber,
.mgmt-extra-role,
.mgmt-extra-visibility {
  display: none;
}
.mgmt-extra-role .form-select,
.mgmt-extra-visibility .form-select {
  width: auto;
  max-width: 12em;
}

/* Updated leaves first: it's the least actionable column. */
@media (max-width: 1399.98px) {
  .mgmt-people-table .mgmt-col-updated { display: none; }
}

/* Contact folds under the name below the desktop width. */
@media (max-width: 1199.98px) {
  .mgmt-people-table .mgmt-col-contact { display: none; }
  .mgmt-contact-compact { display: block; }
  .mgmt-people-table .mgmt-col-subscriber { width: 120px; }
  .mgmt-people-table .mgmt-col-visibility { width: 150px; }
  .mgmt-people-table .mgmt-col-role       { width: 180px; }
  .mgmt-people-table .mgmt-col-membership { width: 200px; }
}

/* Tablet: the Visibility picker moves under the name. */
@media (max-width: 991.98px) {
  .mgmt-people-table .mgmt-col-visibility { display: none; }
  .mgmt-person-extra-controls { display: flex; }
  .mgmt-extra-visibility { display: block; }
  .mgmt-people-table .mgmt-col-subscriber { width: 120px; }
  .mgmt-people-table .mgmt-col-role { width: 175px; }
  .mgmt-people-table .mgmt-col-membership { width: 190px; }
}

/* Hub card titles that double as a link to their full index view */
.hub-card-title-link { color: inherit; text-decoration: none; }
.hub-card-title-link:hover { color: #4338ca; text-decoration: underline; }

/* Filter selects — replaces inline style="min-width: 160px" */
.mgmt-filter-select { min-width: 160px; }

/* All Site Roles: inline role change for Super Admin / Customer Admin */
.site-role-change-form .site-role-change-select { min-width: 9.5rem; }

/* Spotlights index — from spotlights/index.html.haml */
.spotlight-row { transition: background-color .15s; }
.spotlight-row:hover { background-color: #f8f9fa; }
.spotlight-row .pillar-swatch {
  display: inline-block; width: 10px; height: 10px;
  border-radius: 50%; vertical-align: middle; margin-right: 6px;
}
.spotlight-row .icon-cell { font-size: 1.5rem; line-height: 1; }
.spotlight-row .position-cell { width: 70px; }
.pillar-header td { background-color: #f1f3f5; font-weight: 600; }
.body-preview { color: #6c757d; font-size: 0.85rem; }

/* Sent emails index — from sent_emails/index.html.haml */
.email-card { transition: box-shadow .15s; }
.email-card:hover { box-shadow: 0 .25rem .75rem rgba(0,0,0,.12); }
.metric-value { font-size: 2rem; font-weight: 700; line-height: 1.1; }
.metric-label { font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; }
table.emails-table td { vertical-align: middle; }
table.emails-table a.row-link { text-decoration: none; color: inherit; }
table.emails-table tbody tr:hover { background: rgba(13,110,253,.04); }

/* Support tickets index — from support_tickets/index.html.haml */
.ticket-table th { font-size: 0.95rem; padding: 0.75rem 1rem; white-space: nowrap; }
.ticket-table td { font-size: 0.95rem; padding: 0.75rem 1rem; vertical-align: middle; }
.ticket-table .ticket-subject { font-size: 1rem; }
.ticket-actions .btn { font-size: 0.85rem; }

/* News status pills — from news/index/_news.haml */
.news-status-cell { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; min-width: 110px; }
.news-status-pill { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 600; line-height: 1.3; white-space: nowrap; border: 1px solid transparent; }
.news-status-pill .bi { font-size: 12px; }
.news-status-pill.is-sent      { background: #ecfdf5; color: #047857; border-color: #a7f3d0; }
.news-status-pill.is-scheduled { background: #eef2ff; color: #3730a3; border-color: #c7d2fe; }
.news-status-pill.is-testing   { background: #fff7ed; color: #c2410c; border-color: #fed7aa; }
.news-status-pill.is-no-email  { background: #f1f5f9; color: #475569; border-color: #cbd5e1; }
.news-status-pill.is-ready     { background: #fef9c3; color: #854d0e; border-color: #fde68a; }
.news-status-meta { font-size: 10.5px; color: #6b7280; line-height: 1.2; max-width: 140px; word-break: break-word; }
.news-status-link { font-size: 11px; color: #2563eb; text-decoration: none; }
.news-status-link:hover { text-decoration: underline; }

/* ── Management Index Sticky Footer (all widths) ──
   Every management index page carries its search, filters, and action
   buttons in one fixed bottom bar. It is the *only* chrome on those pages:
   the header row above keeps just the title and record count.

   Layout: the filter group and the search/action group are flex siblings
   that share a single row when they fit and wrap to two when they don't.
   Explanatory notes (access legends, security reminders) sit in their own
   full-width row above both. On phones the whole thing switches to stacked
   rows with a horizontally scrolling chip strip. */

.mgmt-index-footer {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1040;
  background: #fff;
  border-top: 1px solid #e2e8f0;
  box-shadow: 0 -2px 12px rgba(15, 23, 42, 0.08);
  padding: 8px 0;
  padding-bottom: calc(8px + env(safe-area-inset-bottom, 0px));
}

/* Width matches .container-fluid so footer controls line up with the table
   above them instead of floating against the viewport edge. */
.mgmt-index-footer-inner {
  width: 98%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  /* Column gap is wide because it is the only thing marking the boundary
     between the filter chips and the search cluster; at 16px it read as
     barely more than the 6px spacing between the chips themselves. */
  gap: 8px 32px;
}

.mgmt-index-footer-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  flex: 1 1 auto;
  min-width: 0;
}

.mgmt-index-footer-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px;
  flex: 1 1 320px;
  min-width: 0;
}

/* The global `.btn { margin: 3px 3px 3px 0 }` would stagger the bar. */
.mgmt-index-footer .btn {
  margin: 0;
  white-space: nowrap;
  flex-shrink: 0;
}

/* One radius language for the bar: every standalone button is a pill. The
   child combinators keep this off buttons inside an .input-group, whose
   squared inner corners are what fuse them to the field beside them. */
.mgmt-index-footer-filters > .btn,
.mgmt-index-footer-filters > a.btn,
.mgmt-index-footer-filters > form > .btn,
.mgmt-index-footer-filters > .dropdown > .btn,
.mgmt-index-footer-row > .btn,
.mgmt-index-footer-row > a.btn,
.mgmt-index-footer-row > form > .btn,
.mgmt-index-footer-row > .dropdown > .btn {
  border-radius: 999px;
}

/* Bootstrap wraps a dropdown toggle in its own div, which would otherwise
   sit in the flex row as a full-height block and shrink under pressure. */
.mgmt-index-footer .dropdown {
  flex-shrink: 0;
}

/* Multi-field filter forms (Admin Activity's events feed has seven inputs,
   a checkbox and two buttons) must be able to wrap inside the bar, or the
   form becomes one unbreakable item wider than the viewport. */
.mgmt-index-footer-filters > form {
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  min-width: 0;
}

.mgmt-index-footer-filters .form-select,
.mgmt-index-footer-filters .form-select-sm {
  width: auto;
  min-width: 0 !important;
  flex-shrink: 0;
}

/* A bare .form-control is width:100%, which would let a single filter box
   swallow the bar. Size them to their content with a sane ceiling. */
.mgmt-index-footer-filters .form-control {
  width: auto;
  min-width: 0 !important;
  max-width: 180px;
  flex: 0 1 auto;
}

.mgmt-index-footer-filters .input-group {
  width: auto;
  max-width: 260px;
  flex: 0 1 auto;
}

.mgmt-index-footer-filters .input-group .form-control {
  max-width: none;
}

.mgmt-index-footer-filters .form-check {
  margin: 0;
  flex-shrink: 0;
  white-space: nowrap;
}

/* An expanding overflow list (the image tag filter's "Show all N tags")
   takes its own line rather than trailing inline after the chips. */
.mgmt-index-footer-filters > .collapse {
  flex: 1 1 100%;
}

/* Views mark the search form `flex-grow-1` (it needed to fill the phone
   row). Left to grow here it would stretch the full half-bar and strand
   the buttons far to its right, so pin it to its content instead and let
   the whole cluster sit against the right edge. !important because
   Bootstrap's .flex-grow-1 utility is itself !important. */
.mgmt-index-footer-row > form {
  flex: 0 0 auto !important;
  min-width: 160px;
}

.mgmt-index-footer-row .input-group {
  display: flex;
  flex-wrap: nowrap;
  flex: 0 0 auto;
  width: 200px;
  max-width: 100%;
  min-width: 160px;
}

.mgmt-index-footer-row .input-group .form-control {
  min-width: 0 !important;
  flex: 1 1 auto;
}

/* Full-width note row for legends and reminders, above the controls. */
.mgmt-index-footer-note {
  flex: 1 1 100%;
  order: -1;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 14px;
  font-size: 12px;
  line-height: 1.35;
  color: #6b7280;
}

.mgmt-index-footer-note .badge {
  font-weight: 600;
}

/* Height is set precisely by index_footer_js from the measured bar; these
   are the pre-JS fallbacks so content is never trapped under the footer. */
.mgmt-index-footer-spacer {
  height: 64px;
}

.mgmt-index-footer-spacer.is-tall {
  height: 104px;
}

@media (max-width: 767px) {
  .mgmt-index-footer {
    padding: 6px 0;
    padding-bottom: calc(6px + env(safe-area-inset-bottom, 0px));
  }

  .mgmt-index-footer-inner {
    width: auto;
    margin: 0;
    padding: 0 10px;
    flex-direction: column;
    align-items: stretch;
    gap: 5px;
    /* Must clear the base rule's wrap: a column-wrap flex container sizes
       its lines to the items' max-content width instead of its own, which
       overflows the bar and defeats the chip strip's overflow-x scroll. */
    flex-wrap: nowrap;
  }

  /* One horizontally scrolling strip, so any number of chips stays
     reachable without ever wrapping into another line. */
  .mgmt-index-footer-filters {
    flex-wrap: nowrap;
    overflow-x: auto;
    white-space: nowrap;
    scrollbar-width: none;
    -ms-overflow-style: none;
    gap: 4px;
  }

  .mgmt-index-footer-filters::-webkit-scrollbar {
    display: none;
  }

  /* The scrollbar is hidden, so fade the trailing edge instead — otherwise
     there is nothing to suggest more controls lie off to the right. Classes
     come from index_footer_js; masking is paint-only and cannot disturb the
     layout the same script measures. */
  .mgmt-index-footer-filters.is-scrollable {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
    mask-image: linear-gradient(to right, #000 calc(100% - 28px), transparent 100%);
  }

  .mgmt-index-footer-filters.is-scrolled-end {
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mgmt-index-footer-filters > .btn,
  .mgmt-index-footer-filters > a.btn,
  .mgmt-index-footer-filters > form > .btn,
  .mgmt-index-footer-filters > .dropdown > .btn {
    height: 26px;
    padding: 1px 10px;
    font-size: 12px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .mgmt-index-footer-filters .form-select-sm {
    height: 26px;
    font-size: 12px;
    padding: 1px 22px 1px 8px;
    background-position: right 6px center;
    border-radius: 999px;
  }

  /* Match the chips. Scoped past .input-group children, whose radii are
     Bootstrap's to manage — pilling those would split the joined corners. */
  .mgmt-index-footer-filters > .form-control,
  .mgmt-index-footer-filters > form > .form-control {
    height: 26px;
    /* .form-control-sm carries min-height: calc(1.5em + .5rem + 2px), which
       outranks height and would hold these two pixels above the chips. */
    min-height: 26px;
    font-size: 12px;
    padding: 1px 10px;
    border-radius: 999px;
  }

  /* Otherwise the checkbox caption stays at body size and shouts over the
     12px controls around it. Laid out as a flex row rather than Bootstrap's
     em-based float so shrinking the type cannot shrink the box you tap:
     the glyph is pinned in pixels and the row keeps a chip's height. */
  .mgmt-index-footer-filters .form-check {
    display: flex;
    align-items: center;
    gap: 6px;
    padding-left: 0;
    min-height: 26px;
  }

  .mgmt-index-footer-filters .form-check .form-check-input {
    float: none;
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
  }

  .mgmt-index-footer-filters .form-check,
  .mgmt-index-footer-filters .form-check-label {
    font-size: 12px;
    line-height: 1.2;
  }

  .mgmt-index-footer-row {
    justify-content: flex-start;
    flex: 0 0 auto;
  }

  /* On a phone the field should span the row, with the buttons after it. */
  .mgmt-index-footer-row > form {
    flex: 1 1 auto !important;
  }

  .mgmt-index-footer-row .input-group {
    flex: 1 1 auto;
    width: auto;
    max-width: none;
  }

  .mgmt-index-footer-row .input-group .form-control,
  .mgmt-index-footer-row .input-group .btn,
  .mgmt-index-footer-row > .btn,
  .mgmt-index-footer-row > a.btn,
  .mgmt-index-footer-row > .dropdown > .btn {
    height: 28px;
    /* .form-control-sm's min-height outranks height and was leaving the
       search field 3px taller than the button beside it. */
    min-height: 28px;
    padding: 2px 8px;
    font-size: 13px;
  }

  .mgmt-index-footer-row > .btn,
  .mgmt-index-footer-row > a.btn,
  .mgmt-index-footer-row > .dropdown > .btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Explanatory chrome earns its space on a desktop bar but not a phone's:
     access legends and the document security reminder are desktop-only. */
  .mgmt-index-footer-note {
    display: none !important;
  }

  /* General utility: collapses a button to its icon on phones. Wrap the
     caption in this span and put the same text in the button's title, so
     the label survives for tooltips and screen readers. Used by the footer
     bar and by row action buttons in index tables. */
  .mgmt-btn-label {
    display: none;
  }

  /* ── Mobile: compact page headers ── */

  .container-fluid {
    padding-left: 10px;
    padding-right: 10px;
  }

  .d-flex.justify-content-between.mb-3.mt-3 {
    margin-top: 0.15rem !important;
    margin-bottom: 0.5rem !important;
  }

  .d-flex.justify-content-between.mb-3.mt-3 h4 {
    font-size: 1.15rem;
  }

  .d-flex.justify-content-between.mb-3.mt-3 .badge {
    font-size: 0.7rem;
    padding: 0.2em 0.5em;
  }

  .d-flex.gap-2.mb-3 {
    gap: 4px !important;
    margin-bottom: 0.5rem !important;
  }

  .d-flex.gap-2.mb-3 > .btn,
  .d-flex.gap-2.mb-3 > a.btn,
  .d-flex.gap-2.mb-3.align-items-center > .btn,
  .d-flex.gap-2.mb-3.align-items-center > a.btn {
    font-size: 12px;
    padding: 3px 8px;
    margin: 2px 0;
  }

  .btn {
    margin: 3px 3px 3px 0;
  }

  /* Tighter table cells */
  .table > thead > tr > th,
  .table > tbody > tr > td {
    padding: 6px 6px;
    font-size: 13px;
  }

  /* Alerts */
  .alert.mb-3 {
    margin-bottom: 0.5rem !important;
    padding: 6px 10px;
    font-size: 13px;
  }

  /* Upload section */
  .card.mb-4#upload-section {
    margin-bottom: 0.75rem !important;
  }

  .card.mb-4#upload-section .card-body {
    padding: 8px;
  }

  .upload-drop-zone .py-4 {
    padding-top: 0.75rem !important;
    padding-bottom: 0.75rem !important;
  }

  /* Filter dropdowns that remain in the page body (not the footer row) */
  .form-select-sm {
    font-size: 12px;
    padding: 2px 28px 2px 6px;
    min-width: 0 !important;
    height: 28px;
  }

  /* Compact input-group-text (search icon prefix) */
  .mgmt-index-footer-row .input-group .input-group-text {
    height: 28px;
    padding: 2px 6px;
    font-size: 13px;
  }

  /* Tag filter card */
  .card.mb-3 .card-body.py-2 {
    padding: 6px 8px !important;
  }

  /* Hide export buttons on mobile — desktop is better for exports */
  .mgmt-export-btn {
    display: none !important;
  }

  /* ── Events list on mobile ──
     Location goes away, Repeats collapses to its icon, and both timestamps
     move out of their columns into a full-width row beneath the title,
     where "start → end" fits on a single line instead of wrapping. */
  .mgmt-col-location,
  .mgmt-col-when,
  .mgmt-col-end {
    display: none !important;
  }

  .mgmt-event-when-row {
    display: table-row;
  }

  /* Outspecify the generic ".table > tbody > tr > td" padding/font rules
     above so the pair sits tight and reads as a single record. */
  .table > tbody > tr.mgmt-event-row > td {
    border-bottom-width: 0;
    padding-bottom: 2px;
  }

  .table > tbody > tr.mgmt-event-when-row > td {
    padding-top: 0;
    padding-bottom: 8px;
    font-size: 12px;
    white-space: nowrap;
  }

  /* !important because the desktop widths are inline style attributes on
     the header cells, which otherwise outrank anything declared here. */
  .table > tbody > tr > td.mgmt-col-action,
  .table > thead > tr > th.mgmt-col-action {
    width: 36px !important;
    padding-left: 2px;
    padding-right: 2px;
  }

  /* The header captions ("Notify", "View", "QR Code") would each wrap to
     three lines in a 36px column and widen it again. Collapse them but
     leave the text in place for screen readers. */
  .table > thead > tr > th.mgmt-col-action {
    font-size: 0;
  }

  .mgmt-col-action .btn {
    margin: 0;
    padding: 2px 6px;
  }

  .mgmt-repeat-label {
    display: none;
  }

  .mgmt-col-repeats {
    text-align: center;
    width: 40px !important;
  }

  .mgmt-col-repeats .badge {
    padding: 4px 6px;
    font-size: 12px;
  }

  /* ── People list on a phone ──
     Two columns stay: the person (headshot, name, contact links, and the
     subscriber/role/visibility controls stacked beneath) and membership. */
  .mgmt-people-table .mgmt-col-subscriber,
  .mgmt-people-table .mgmt-col-role {
    display: none;
  }

  .mgmt-extra-subscriber,
  .mgmt-extra-role {
    display: block;
  }

  /* No room for the 54px indent on a phone: controls span the whole cell. */
  .mgmt-person-extra-controls {
    gap: 6px 10px;
    padding-left: 0;
  }

  .mgmt-person-extra-controls .form-check-label {
    font-size: 12px;
  }

  .mgmt-extra-role .form-select,
  .mgmt-extra-visibility .form-select {
    max-width: 10.5em;
  }

  /* Fixed layout: membership gets a fixed share, the person column the rest. */
  .mgmt-people-table .mgmt-col-membership {
    width: 35%;
  }

  .mgmt-people-table > tbody > tr > td {
    padding-left: 8px;
    padding-right: 8px;
  }

  .mgmt-person-thumb-wrap.is-sm {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }

  .mgmt-person-identity {
    gap: 8px;
    align-items: flex-start;
  }

  /* Taller tap targets for tel:/mailto: on a phone, and let an address
     wrap rather than ellipsize — at this width the ellipsis would hide the
     domain, and fixed layout means wrapping can't disturb the columns. */
  .mgmt-contact-compact .mgmt-contact-line {
    line-height: 1.4;
    padding: 4px 0;
    white-space: normal;
    overflow-wrap: anywhere;
  }
}