/* ===========================================================================
 * system-refinements.css
 * Loaded AFTER css/i18n.css so these targeted fixes win the cascade.
 * Addresses: table scrolling / sticky headers / clipped action buttons,
 * sticky modal header + footer, modal restyle, header top-spacing, and
 * responsiveness. Kept in one isolated file so it is easy to review/revert.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 1) TABLES — header stays fixed, only the rows scroll, and no action button
 *    is hidden behind the scrollbar. Applies to every record table (members,
 *    membership ledger, and the transaction/safe tables already handled).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-table-shell--members,
body.system-screen-body .system-table-shell--transactions,
body.system-screen-body .system-membership-ledger-shell {
  display: flex !important;
  flex-direction: column !important;
  min-height: 0 !important;
  height: clamp(28rem, 64vh, 42rem) !important;
  overflow: hidden !important;
}

/* Narrow record tables (members + transaction/safe pages) AND the membership
 * ledger: scroll ONLY the rows so the scrollbar begins directly under the
 * header border and ends above the footer border (header row spans the full
 * width, no gap on the right beside the print button). */
body.system-screen-body .system-table-shell--members > .overflow-x-auto,
body.system-screen-body .system-table-shell--transactions > .overflow-x-auto,
body.system-screen-body .system-membership-ledger-shell > .overflow-x-auto {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  max-height: none !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
}
body.system-screen-body .system-data-table--members,
body.system-screen-body .system-data-table--transactions,
body.system-screen-body .system-data-table--membership-ledger {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
}
body.system-screen-body .system-data-table--members > thead,
body.system-screen-body .system-data-table--transactions > thead,
body.system-screen-body .system-data-table--membership-ledger > thead {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  flex: 0 0 auto !important;
}
body.system-screen-body .system-data-table--members > tbody,
body.system-screen-body .system-data-table--transactions > tbody,
body.system-screen-body .system-data-table--membership-ledger > tbody {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  /* Stop scroll-chaining: once the rows reach their end, further scrolling must
   * NOT bubble up and nudge the whole table/page. */
  overscroll-behavior: contain !important;
}
body.system-screen-body .system-data-table--members > tbody > tr,
body.system-screen-body .system-data-table--transactions > tbody > tr,
body.system-screen-body .system-data-table--membership-ledger > tbody > tr {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
}
/* Thin scrollbar keeps header/row column alignment nearly perfect. */
body.system-screen-body .system-data-table--members > tbody::-webkit-scrollbar,
body.system-screen-body .system-data-table--transactions > tbody::-webkit-scrollbar,
body.system-screen-body .system-data-table--membership-ledger > tbody::-webkit-scrollbar {
  width: 7px;
}
body.system-screen-body .system-data-table--members > tbody::-webkit-scrollbar-thumb,
body.system-screen-body .system-data-table--transactions > tbody::-webkit-scrollbar-thumb,
body.system-screen-body .system-data-table--membership-ledger > tbody::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.55);
  border-radius: 999px;
}

/* Keep the header row pinned while rows scroll underneath it. */
body.system-screen-body .system-data-table--members thead th,
body.system-screen-body .system-data-table--membership-ledger thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  background: #f7fbff !important;
  box-shadow: inset 0 -1px 0 rgba(226, 232, 240, 0.95) !important;
}

/* Consistent avatar size across ALL transaction rows (seed rows use a 48px
 * avatar but JS-seeded sample rows use a 40px "compact" one, which made the
 * last row shorter). Force one size so every row height matches. */
body.system-screen-body .system-data-table--transactions .system-row-avatar,
body.system-screen-body .system-row-avatar-cell--transaction .system-row-avatar {
  width: 48px !important;
  height: 48px !important;
  min-width: 48px !important;
  flex: 0 0 48px !important;
}

/* Never clip the action buttons; give them breathing room from the edge. */
body.system-screen-body .system-member-actions-cell,
body.system-screen-body .system-transaction-actions-cell,
body.system-screen-body .system-membership-ledger-table__action-head {
  overflow: visible !important;
  white-space: nowrap !important;
}

body.system-screen-body .system-member-actions-cell {
  padding-inline-end: 0.85rem !important;
}

/* Slim, unobtrusive scrollbars that clearly begin under the header. */
body.system-screen-body .system-table-shell--members > .overflow-x-auto::-webkit-scrollbar,
body.system-screen-body .system-membership-ledger-shell > .overflow-x-auto::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
body.system-screen-body .system-table-shell--members > .overflow-x-auto::-webkit-scrollbar-thumb,
body.system-screen-body .system-membership-ledger-shell > .overflow-x-auto::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.6);
  border-radius: 999px;
}

/* ---------------------------------------------------------------------------
 * 2) MODALS — header + footer stay put while only the body scrolls, plus a
 *    brighter, cleaner look closer to the requested design.
 * ------------------------------------------------------------------------ */

/* Solid, bright dialog (drop the translucency/blur) with a clear backdrop. */
body.system-screen-body .system-form-panel {
  background: rgba(15, 23, 42, 0.28) !important;
  backdrop-filter: blur(2px) saturate(102%) !important;
  -webkit-backdrop-filter: blur(2px) saturate(102%) !important;
}

body.system-screen-body .system-form-panel .system-form-dialog {
  background: #ffffff !important;
  border: 1px solid rgba(226, 232, 240, 0.9) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  box-shadow: 0 30px 80px rgba(15, 23, 42, 0.22) !important;
}

/* Sticky header: the toolbar row (kicker + title + close). */
body.system-screen-body .system-form-panel .system-form-dialog > .system-toolbar {
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
  padding-bottom: 1rem !important;
  margin-bottom: 0 !important;
}

/* Sticky footer: the row that holds Save / Cancel / Search / Close / Delete.
 * Targets the actual actions row by class only — NOT "last col-span-2 child"
 * (that wrongly made the Note field sticky once footers were moved out). */
body.system-screen-body .system-form-panel .system-transaction-modal-actions,
body.system-screen-body .system-form-panel .system-transaction-modal-actions--view {
  position: sticky !important;
  bottom: 0 !important;
  z-index: 6 !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  padding-top: 1rem !important;
  padding-bottom: 0.5rem !important;
  margin-top: 0.75rem !important;
}

/* Cleaner form controls closer to the requested style (soft filled inputs). */
body.system-screen-body .system-form-panel .system-form-field input,
body.system-screen-body .system-form-panel .system-form-field select,
body.system-screen-body .system-form-panel .system-form-field textarea {
  background-color: #f8fafc !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 0.85rem !important;
  min-height: 3rem !important;
}
body.system-screen-body .system-form-panel .system-form-field input:focus,
body.system-screen-body .system-form-panel .system-form-field select:focus,
body.system-screen-body .system-form-panel .system-form-field textarea:focus {
  background-color: #ffffff !important;
  border-color: #b02f00 !important;
  box-shadow: 0 0 0 3px rgba(176, 47, 0, 0.12) !important;
  outline: none !important;
}

body.system-screen-body .system-dialog-kicker {
  color: #b02f00 !important;
  font-weight: 700 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.14em !important;
  font-size: 0.72rem !important;
}

/* ---------------------------------------------------------------------------
 * 3) HEADER TOP-SPACE — tighten the gap above the page header to match the
 *    slimmer system top bar.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-screen-main {
  --system-shell-top-space: clamp(4rem, 4.2vw, 4.55rem) !important;
}

/* ---------------------------------------------------------------------------
 * 4) RESPONSIVENESS — safeguards so content stays usable on narrow screens.
 * ------------------------------------------------------------------------ */
@media (max-width: 900px) {
  /* Let any record table scroll horizontally instead of clipping columns. */
  body.system-screen-body .system-table-shell > .overflow-x-auto {
    overflow-x: auto !important;
  }
  body.system-screen-body .system-data-table:not(.system-data-table--members):not(.system-data-table--transactions):not(.system-data-table--membership):not(.system-data-table--membership-ledger):not(.system-data-table--coach-report):not(.system-data-table--safe-report):not(.system-membership-report-table):not(.system-subhistory-table):not(.system-subtable) {
    min-width: 44rem;
  }
  /* Modals take nearly the full width and never exceed the viewport height. */
  body.system-screen-body .system-form-panel .system-form-dialog,
  body.system-screen-body .system-form-panel--transaction .system-form-dialog--transaction {
    width: calc(100vw - 1.25rem) !important;
    max-height: calc(100vh - 1.5rem) !important;
    max-height: calc(100dvh - 1.5rem) !important;
  }
  /* Stack two-column form grids. */
  body.system-screen-body .system-form-grid--two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* Collapse the dashboard's side-by-side report grids (Safe table + donut,
 * revenue breakdowns, etc.) into a single column on tablets / phones so the
 * numbers and charts stay legible instead of squeezing. */
@media (max-width: 1024px) {
  body.system-screen-body .system-report-grid--two {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Let the revenue / expense date-range controls wrap onto two rows rather
   * than overflowing their card. */
  body.system-screen-body .system-report-daterange {
    flex-wrap: wrap !important;
    row-gap: 0.5rem !important;
  }
  body.system-screen-body .system-report-daterange__field {
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }
}

/* Member Report modal: keep its summary + table readable and scrollable. */
body.system-screen-body [data-system-modal="member-report"] .system-form-dialog,
body.system-screen-body [data-system-modal="coach-report"] .system-form-dialog,
body.system-screen-body [data-system-modal="safe-report"] .system-form-dialog {
  max-height: min(90vh, 52rem) !important;
  overflow: auto !important;
}
@media (max-width: 820px) {
  body.system-screen-body [data-system-modal="member-report"] table,
  body.system-screen-body [data-system-modal="coach-report"] table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
  }
}

/* ---------------------------------------------------------------------------
 * 5) MEMBER ROW ACTIONS — make every button (including Delete) fit and show.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-row-actions--member {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.35rem !important;
  justify-content: flex-end !important;
}
body.system-screen-body .system-row-actions--member .system-table-button--icon {
  width: 2.15rem !important;
  min-width: 2.15rem !important;
  height: 2.15rem !important;
  flex: 0 0 auto !important;
}
body.system-screen-body .system-row-actions--member .system-table-button--solid {
  padding: 0.5rem 1rem !important;
  font-size: 0.82rem !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: max-content !important;
  flex: 0 0 auto !important;
}
body.system-screen-body .system-member-actions-cell {
  overflow: visible !important;
  white-space: nowrap !important;
  padding-inline-end: 0.6rem !important;
}
/* Give the actions column enough room so the button text and every icon show. */
body.system-screen-body .system-data-table--members th:last-child,
body.system-screen-body .system-data-table--members td:last-child {
  width: 24.5rem !important;
  min-width: 24.5rem !important;
}

/* Only the table body should show a scrollbar. Hide every other (orange)
 * scrollbar on the member/transaction pages so there are not two bars. */
body.system-screen-body .system-panel-scroll,
body.system-screen-body .system-table-shell--members > .overflow-x-auto,
body.system-screen-body .system-table-shell--transactions > .overflow-x-auto,
body.system-screen-body .system-screen-layout {
  scrollbar-width: none !important;
}
body.system-screen-body .system-panel-scroll::-webkit-scrollbar,
body.system-screen-body .system-table-shell--members > .overflow-x-auto::-webkit-scrollbar,
body.system-screen-body .system-table-shell--transactions > .overflow-x-auto::-webkit-scrollbar,
body.system-screen-body .system-screen-layout::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none !important;
}

/* ---------------------------------------------------------------------------
 * 6) DARK MODE — restore readable contrast on the content that was still dark
 *    on dark (member names, modal fields, header cards, footers).
 * ------------------------------------------------------------------------ */
html.dark .system-member-name-cell__text,
html.dark .system-data-table td [data-field],
html.dark .system-data-table td .system-row-meta,
html.dark .system-transaction-field-value {
  color: #eaf1f9 !important;
}
html.dark .system-member-header-shell,
html.dark .system-transaction-header-shell {
  background: #263747 !important;
}
html.dark .system-page-header h2,
html.dark .system-toolbar h3,
html.dark .system-transaction-modal-title h3,
html.dark .system-member-dialog h3 {
  color: #f8fafc !important;
}
html.dark .system-table-shell__footer {
  background: #1f2c39 !important;
  color: #e2e8f0 !important;
  border-top-color: rgba(148, 163, 184, 0.2) !important;
}
/* =====================================================================
 * DARK MODE for ALL member / form modals (Add / Edit / View / Search /
 * Membership / finance / delete / Merge / Ledger / Report).
 * A single coherent dark theme: dark surface + light, readable text.
 * No :not() exclusions — every one of these dialogs is themed dark so the
 * modal never looks like a stray white card on the dark app.
 * ===================================================================== */

/* Dialog surface */
html.dark body.system-screen-body .system-form-dialog,
html.dark body.system-screen-body .system-member-dialog {
  background: #1f2b38 !important;
  color: #e6edf5 !important;
  border-color: rgba(148, 163, 184, 0.22) !important;
}
/* Header (toolbar / banner) + footer (action rows) surfaces */
html.dark body.system-screen-body .system-form-dialog > .system-toolbar,
html.dark body.system-screen-body .system-form-dialog .system-member-dialog__banner,
html.dark body.system-screen-body .system-form-dialog .system-transaction-modal-actions,
html.dark body.system-screen-body .system-form-dialog form > .md\:col-span-2:last-child,
html.dark body.system-screen-body .system-form-dialog .system-member-view-footer,
html.dark body.system-screen-body .system-form-dialog .system-member-delete-copy,
html.dark body.system-screen-body .system-member-dialog > .system-toolbar,
html.dark body.system-screen-body .system-member-dialog .system-member-dialog__banner {
  background: #24313f !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
/* Titles / body text */
html.dark body.system-screen-body .system-form-dialog h2,
html.dark body.system-screen-body .system-form-dialog h3,
html.dark body.system-screen-body .system-form-dialog h4,
html.dark body.system-screen-body .system-form-dialog h5,
html.dark body.system-screen-body .system-form-dialog p,
html.dark body.system-screen-body .system-form-dialog .system-transaction-modal-title h3,
html.dark body.system-screen-body .system-form-dialog .system-transaction-field-value,
html.dark body.system-screen-body .system-member-dialog h2,
html.dark body.system-screen-body .system-member-dialog h3,
html.dark body.system-screen-body .system-member-dialog h4,
html.dark body.system-screen-body .system-member-dialog p {
  color: #f1f5f9 !important;
}
/* Modal title in the sticky header — needs a strong selector to beat the base
 * sticky-header / .font-headline colour. */
html.dark body.system-screen-body .system-form-panel .system-form-dialog > .system-toolbar h2,
html.dark body.system-screen-body .system-form-panel .system-form-dialog > .system-toolbar h3,
html.dark body.system-screen-body .system-form-panel .system-form-dialog > .system-toolbar h3.font-headline,
html.dark body.system-screen-body .system-form-dialog .system-toolbar h2,
html.dark body.system-screen-body .system-form-dialog .system-toolbar h3,
html.dark body.system-screen-body .system-member-dialog .system-toolbar h2,
html.dark body.system-screen-body .system-member-dialog .system-toolbar h3 {
  color: #f8fafc !important;
}
html.dark body.system-screen-body .system-form-dialog label,
html.dark body.system-screen-body .system-form-dialog .system-form-field label,
html.dark body.system-screen-body .system-member-dialog label {
  color: #cbd5e1 !important;
}
html.dark body.system-screen-body .system-form-dialog .system-row-meta,
html.dark body.system-screen-body .system-form-dialog small,
html.dark body.system-screen-body .system-member-dialog small {
  color: #94a3b8 !important;
}
/* Inputs / selects / readonly value chips */
html.dark body.system-screen-body .system-form-dialog input:not([type="checkbox"]):not([type="radio"]),
html.dark body.system-screen-body .system-form-dialog select,
html.dark body.system-screen-body .system-form-dialog textarea,
html.dark body.system-screen-body .system-member-dialog input:not([type="checkbox"]):not([type="radio"]),
html.dark body.system-screen-body .system-member-dialog select,
html.dark body.system-screen-body .system-member-dialog textarea {
  background: #141d27 !important;
  color: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}
html.dark body.system-screen-body .system-form-dialog input::placeholder,
html.dark body.system-screen-body .system-form-dialog textarea::placeholder,
html.dark body.system-screen-body .system-member-dialog input::placeholder,
html.dark body.system-screen-body .system-member-dialog textarea::placeholder {
  color: #64748b !important;
  opacity: 1 !important;
}
html.dark body.system-screen-body .system-form-dialog input[type="date"]::-webkit-calendar-picker-indicator,
html.dark body.system-screen-body .system-member-dialog input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1) brightness(1.6) !important;
}
html.dark body.system-screen-body .system-form-dialog .system-transaction-field-value {
  background: #141d27 !important;
  border-color: rgba(148, 163, 184, 0.28) !important;
}
/* Tables inside view / ledger modals */
html.dark body.system-screen-body .system-form-dialog table th,
html.dark body.system-screen-body .system-member-dialog table th {
  background: #141d27 !important;
  color: #cbd5e1 !important;
}
html.dark body.system-screen-body .system-form-dialog table td,
html.dark body.system-screen-body .system-member-dialog table td {
  color: #e2e8f0 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
/* Secondary / ghost buttons legible on the dark surface. Force a dark/transparent
 * background — several view-modal footers left these WHITE, so the light label
 * was invisible (white-on-white). */
html.dark body.system-screen-body .system-form-dialog .system-ghost-button,
html.dark body.system-screen-body .system-member-dialog .system-ghost-button,
html.dark body.system-screen-body .system-form-dialog .system-transaction-modal-actions .system-ghost-button,
html.dark body.system-screen-body .system-form-dialog .system-transaction-modal-actions--view .system-ghost-button,
html.dark body.system-screen-body .system-form-dialog .system-member-view-footer .system-ghost-button {
  background: transparent !important;
  color: #e6edf5 !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
}
html.dark body.system-screen-body .system-form-dialog .system-member-modal-button:not(.system-member-modal-button--danger),
html.dark body.system-screen-body .system-member-dialog .system-member-modal-button:not(.system-member-modal-button--danger) {
  background: #2b3a49 !important;
  color: #e6edf5 !important;
}

/* Orange eyebrow accent stays on dark modal headers. */
html.dark body.system-screen-body .system-form-dialog .system-dialog-kicker,
html.dark body.system-screen-body .system-form-dialog .text-primary,
html.dark body.system-screen-body .system-member-dialog .system-dialog-kicker {
  color: #ff7a2f !important;
}

/* Report donut / stat totals stay light on the dark cards. */
html.dark .system-report-donut strong,
html.dark .system-report-donut small,
html.dark [data-report-total],
html.dark [data-safe-total],
html.dark [data-expense-total],
html.dark .system-member-dialog--report [data-member-report-total],
html.dark .system-member-dialog--report .system-report-donut strong,
html.dark .system-member-dialog--report .system-report-donut small {
  color: #eaf1f9 !important;
}

/* --- Member Ledger: keep the coloured cash-in / cash-out row tints, but
 *     darkened so light text stays readable, plus a dark totals card. --- */
html.dark body.system-screen-body .system-member-ledger-card,
html.dark body.system-screen-body .system-member-ledger-shell {
  background: #1f2b38 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
html.dark body.system-screen-body .system-member-ledger-table__row--positive {
  background: rgba(34, 197, 94, 0.16) !important;
}
html.dark body.system-screen-body .system-member-ledger-table__row--negative {
  background: rgba(239, 68, 68, 0.16) !important;
}
html.dark body.system-screen-body .system-member-ledger-table__row td,
html.dark body.system-screen-body .system-member-ledger-table thead th {
  color: #e6edf5 !important;
  border-color: rgba(148, 163, 184, 0.16) !important;
}
html.dark body.system-screen-body .system-member-ledger-table thead th {
  background: #141d27 !important;
}
html.dark body.system-screen-body .system-member-ledger-summary {
  background: #141d27 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
html.dark body.system-screen-body .system-member-ledger-summary strong,
html.dark body.system-screen-body .system-member-ledger-summary span {
  color: #f8fafc !important;
}

/* Member table names remained invisible (an id-scoped rule set dark text). */
html.dark #member-table-shell .system-member-name-cell__text {
  color: #f1f5f9 !important;
}

/* --- Remaining white surfaces inside dark modals --- */
/* Finance/delete/merge action footers (Delete Member, Merge, finance dialogs) */
html.dark body.system-screen-body .system-member-finance-actions,
html.dark body.system-screen-body .system-member-delete-actions {
  background: #24313f !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
/* Merge dialog body + panels */
html.dark body.system-screen-body .system-member-merge-form,
html.dark body.system-screen-body .system-member-merge-panel {
  background: #1f2b38 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
/* Add Membership "Add Access Type" card + freeze section, and any table shell
 * embedded inside an editor/dialog (e.g. Add Payment recent-payments table). */
html.dark body.system-screen-body .system-membership-detail-section,
html.dark body.system-screen-body .system-membership-detail-form,
html.dark body.system-screen-body .system-membership-detail-form--view,
html.dark body.system-screen-body .system-course-form,
html.dark body.system-screen-body .system-course-form--view,
html.dark body.system-screen-body [data-editor-panel] .system-table-shell,
html.dark body.system-screen-body .system-form-dialog .system-table-shell {
  background: #1f2b38 !important;
  border-color: rgba(148, 163, 184, 0.2) !important;
}
/* Sub-tables (access types, history) inside membership view/edit modals —
 * darken every cell so no white strips remain. */
html.dark body.system-screen-body .system-member-dialog--membership td,
html.dark body.system-screen-body .system-member-dialog--membership th,
html.dark body.system-screen-body .system-membership-detail-section td,
html.dark body.system-screen-body .system-membership-detail-section th,
html.dark body.system-screen-body .system-membership-detail-form td,
html.dark body.system-screen-body .system-membership-detail-form th {
  background: transparent !important;
  color: #cbd5e1 !important;
}
html.dark body.system-screen-body .system-membership-detail-section h3,
html.dark body.system-screen-body .system-membership-detail-section h4,
html.dark body.system-screen-body .system-membership-detail-section label,
html.dark body.system-screen-body .system-membership-detail-section td,
html.dark body.system-screen-body .system-membership-detail-section th,
html.dark body.system-screen-body [data-editor-panel] .system-table-shell td,
html.dark body.system-screen-body [data-editor-panel] .system-table-shell th {
  color: #e6edf5 !important;
}
html.dark body.system-screen-body .system-membership-detail-section thead th,
html.dark body.system-screen-body [data-editor-panel] .system-table-shell thead th {
  background: #141d27 !important;
  color: #cbd5e1 !important;
}

/* --- Members list page: the table shell was left WHITE in dark mode (an
 *     id-scoped base rule), unlike the other pages. Make it dark. (Image 6) */
html.dark body.system-screen-body #member-table-shell,
html.dark body.system-screen-body #member-table-shell .system-table-shell__inner {
  background: #223242 !important;
  border-color: rgba(71, 85, 105, 0.52) !important;
}
/* On hover, the row highlights light — so its text must be DARK to stay
 * readable (matches the selected-row treatment). (Image 7) */
html.dark body.system-screen-body #member-table-shell .system-data-table--members tbody tr:hover {
  background: #ffe1d3 !important;
  box-shadow: inset 3px 0 0 #ff6128 !important;
}
html.dark body.system-screen-body #member-table-shell .system-data-table--members tbody tr:hover td,
html.dark body.system-screen-body #member-table-shell .system-data-table--members tbody tr:hover strong,
html.dark body.system-screen-body #member-table-shell .system-data-table--members tbody tr:hover [data-field],
html.dark body.system-screen-body #member-table-shell .system-data-table--members tbody tr:hover .system-member-name-cell__text {
  color: #1f2937 !important;
}
html.dark body.system-screen-body #member-table-shell .system-data-table--members tbody tr:hover .system-row-meta {
  color: #475569 !important;
}

/* ---------------------------------------------------------------------------
 * MEMBERSHIP LEDGER — scroll only the rows so the scrollbar starts under the
 * header (image 2). Columns share the width via fixed layout.
 * ------------------------------------------------------------------------ */
/* Scroll ONLY the rows so the scrollbar begins under the header (the header
 * stays fixed). A single scrollbar (the tbody's) — the wrapper does not scroll.
 * Columns stay aligned because the header reserves the same scrollbar gutter
 * (--system-scrollbar-width, measured in JS) that the scrolling body consumes. */
body.system-screen-body .system-membership-ledger-shell > .overflow-x-auto,
body.system-screen-body #membership-ledger-shell > .overflow-x-auto {
  display: flex !important;
  flex-direction: column !important;
  overflow-x: hidden !important;
  overflow-y: hidden !important;
  /* This wrapper never scrolls (the tbody does), so it must NOT reserve a
   * scrollbar gutter — otherwise an empty strip appears between the table's
   * scrollbar and the card's right border. */
  scrollbar-gutter: auto !important;
}
body.system-screen-body .system-data-table--membership-ledger {
  display: flex !important;
  flex-direction: column !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.system-screen-body .system-data-table--membership-ledger > thead {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
  flex: 0 0 auto !important;
  box-sizing: border-box !important;
  /* No reserved gutter: the scrollbar only appears on overflow, so we must not
   * pad the header (that left an empty strip when there was nothing to scroll). */
  padding-right: 0 !important;
}
body.system-screen-body .system-data-table--membership-ledger > tbody {
  display: block !important;
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
  overscroll-behavior: contain !important;
  scrollbar-gutter: auto !important;
}
body.system-screen-body .system-data-table--membership-ledger > tbody > tr {
  display: table !important;
  width: 100% !important;
  table-layout: fixed !important;
}

/* ---------------------------------------------------------------------------
 * 10) MEMBER ACTION BUTTONS — rounded-square style (image 2).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-row-actions--member .system-table-button--icon {
  border-radius: 0.85rem !important;
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  color: #0f172a !important;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.06) !important;
}
body.system-screen-body .system-row-actions--member .system-table-button--icon:hover {
  background: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.9) !important;
}
body.system-screen-body .system-row-actions--member .system-table-button--solid {
  border-radius: 0.95rem !important;
  background: linear-gradient(135deg, #ff7a2f 0%, #f0560a 100%) !important;
  color: #ffffff !important;
  font-weight: 700 !important;
  box-shadow: 0 8px 18px rgba(240, 86, 10, 0.28) !important;
}

/* ---------------------------------------------------------------------------
 * 11) SIDEBAR USER + LOGOUT card (image 1): glassy pill, round avatar,
 *     rounded-square logout button with a subtle blue glow.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-user-card {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  padding: 0.65rem 0.7rem !important;
  border-radius: 1.25rem !important;
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.12) !important;
  backdrop-filter: blur(6px) saturate(110%) !important;
  -webkit-backdrop-filter: blur(6px) saturate(110%) !important;
}
body.system-screen-body .system-user-card .system-user-summary {
  gap: 0.7rem !important;
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.system-screen-body .system-user-card .system-user-copy p {
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}
body.system-screen-body .system-sidebar-logout {
  width: 3rem !important;
  height: 3rem !important;
  min-height: 0 !important;
  padding: 0 !important;
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 0.95rem !important;
  border: 1px solid rgba(129, 156, 255, 0.45) !important;
  background: rgba(129, 156, 255, 0.1) !important;
  color: #d7e0ff !important;
  box-shadow: inset 0 0 0 1px rgba(129, 156, 255, 0.12), 0 6px 16px rgba(28, 46, 110, 0.28) !important;
  transition: background 0.18s ease, border-color 0.18s ease !important;
}
body.system-screen-body .system-sidebar-logout:hover {
  background: rgba(129, 156, 255, 0.2) !important;
  border-color: rgba(129, 156, 255, 0.7) !important;
}
body.system-screen-body .system-sidebar-logout span {
  margin: 0 !important;
}

/* ---------------------------------------------------------------------------
 * 12) DARK MODE — Member dialogs (Add / Edit / View / Search) readability.
 *     Their labels are hard-coded black and their hero/profile strips are
 *     white; override both so text is visible on the dark surface.
 * ------------------------------------------------------------------------ */
html.dark body.system-screen-body .system-member-modal-grid .system-form-field label,
html.dark body.system-screen-body .system-member-finance-grid .system-form-field label,
html.dark body.system-screen-body .system-member-search-form .system-form-field label {
  color: #cbd5e1 !important;
}
/* White hero / profile strips become part of the dark dialog */
html.dark .system-member-dialog--view .system-member-view-hero,
html.dark .system-member-dialog .system-member-modal-profile,
html.dark .system-member-dialog .system-member-view-section {
  background: transparent !important;
}
html.dark .system-member-dialog--view .system-member-view-hero__title h4,
html.dark .system-member-dialog--view .system-member-view-hero p,
html.dark .system-member-dialog--view .system-member-view-hero__title .system-member-copy-button,
html.dark .system-member-dialog .system-member-view-section h5 {
  color: #eaf1f9 !important;
}
/* Search / Close / Reset / Save (ghost) buttons stay visible in dark modals */
html.dark .system-form-dialog:not(.system-member-dialog--report):not(.system-member-dialog--merge):not(.system-member-dialog--ledger):not(.system-member-dialog--merge):not(.system-member-dialog--ledger) .system-transaction-modal-actions .system-ghost-button {
  background: transparent !important;
  color: #eaf1f9 !important;
  border: 1px solid rgba(148, 163, 184, 0.4) !important;
}

/* Membership ledger footer in dark mode. */
html.dark .system-membership-ledger-footer {
  background: #1f2c39 !important;
  color: #e2e8f0 !important;
  border-top-color: rgba(148, 163, 184, 0.2) !important;
}
html.dark .system-membership-ledger-footer p {
  color: #e2e8f0 !important;
}

/* Dashboard donut chart labels (Payroll / Snacks / Rent, ring text) were dark
 * on dark. */
html.dark .system-expense-module__label,
html.dark .system-expense-module__ring span,
html.dark .system-safe-module__label,
html.dark .system-safe-module__ring span {
  color: #cbd5e1 !important;
}

/* ---------------------------------------------------------------------------
 * 7) PAGE HEADERS — give the transaction/safe headers the same clean look as
 *    the Member header (orange circular buttons + rounded search pill).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-page-header--transactions .system-toolbar-actions .system-quick-button.system-icon-button {
  width: 3.35rem !important;
  height: 3.35rem !important;
  border-radius: 999px !important;
  background: linear-gradient(135deg, #ff7a2f 0%, #f0560a 100%) !important;
  color: #ffffff !important;
  box-shadow: 0 12px 24px rgba(240, 86, 10, 0.28) !important;
}
body.system-screen-body .system-page-header--transactions .system-toolbar-actions .system-quick-button.system-icon-button .material-symbols-outlined {
  font-size: 1.6rem !important;
}
body.system-screen-body .system-page-header--transactions .system-toolbar-search {
  flex: 1 1 auto !important;
}
body.system-screen-body .system-page-header--transactions .system-toolbar-search input {
  width: 100% !important;
  min-height: 3.35rem !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  padding-inline: 1.15rem !important;
}

/* ---------------------------------------------------------------------------
 * 8) DELETE CONFIRMATIONS — match the styled Member delete dialog everywhere.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-form-panel .system-form-dialog:has(.system-transaction-delete-copy),
body.system-screen-body .system-form-panel .system-transaction-delete-copy {
  text-align: center !important;
}
body.system-screen-body .system-transaction-delete-copy {
  padding: 1.6rem 1.75rem 0.5rem !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  color: #0f172a !important;
}
body.system-screen-body .system-form-panel [data-system-modal$="-delete"] .system-transaction-modal-actions,
body.system-screen-body .system-transaction-modal-actions {
  justify-content: center !important;
  gap: 0.9rem !important;
}
/* Danger (Delete) button — soft red pill like the Member dialog. */
body.system-screen-body [data-safe-import-delete-confirm],
body.system-screen-body [data-safe-export-delete-confirm],
body.system-screen-body [data-safe-transfer-delete-confirm],
body.system-screen-body [data-income-delete-confirm],
body.system-screen-body [data-sale-delete-confirm] {
  color: #dc2626 !important;
  background: #fff1f0 !important;
  border: 1px solid rgba(220, 38, 38, 0.35) !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  padding: 0.6rem 1.6rem !important;
}
html.dark .system-transaction-delete-copy {
  color: #f1f5f9 !important;
}

/* ---------------------------------------------------------------------------
 * 9) MEMBERSHIP REPORT modal (opened from the summary/chart button).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-membership-report-dialog {
  width: min(72rem, calc(100vw - 1.5rem)) !important;
  max-height: min(90vh, 52rem) !important;
  overflow: auto !important;
}
.system-membership-report-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 1rem;
}
@media (max-width: 820px) {
  .system-membership-report-grid { grid-template-columns: minmax(0, 1fr); }
}
.system-membership-report-card {
  border: 1px solid rgba(226, 232, 240, 0.9);
  border-radius: 1.4rem;
  background: #ffffff;
  padding: 1.25rem;
}
.system-membership-report-card__title {
  text-align: center;
  font-weight: 800;
  font-size: 1.15rem;
  color: #0f172a;
  margin-bottom: 1rem;
}
.system-membership-report-donut {
  width: 11rem;
  height: 11rem;
  margin: 0 auto 1.25rem;
  border-radius: 999px;
  border: 0.7rem solid #f2921f;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.15rem;
}
.system-membership-report-donut span { color: #475569; font-size: 1rem; }
.system-membership-report-donut strong { font-size: 2.1rem; font-weight: 800; color: #0f172a; }
.system-membership-report-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; }
.system-membership-report-table th {
  background: #eef2f6;
  color: #334155;
  font-weight: 700;
  text-align: left;
  padding: 0.65rem 0.8rem;
}
.system-membership-report-table td {
  padding: 0.6rem 0.8rem;
  border-bottom: 1px solid #eef2f6;
  color: #334155;
}
html.dark .system-membership-report-card { background: #22303f; border-color: rgba(148,163,184,0.28); }
html.dark .system-membership-report-card__title,
html.dark .system-membership-report-donut strong { color: #f1f5f9; }
html.dark .system-membership-report-table th { background: #1b2733; color: #cbd5e1; }
html.dark .system-membership-report-table td { color: #e2e8f0; border-bottom-color: rgba(148,163,184,0.18); }

/* ---------------------------------------------------------------------------
 * 13) MEMBER TABLE — keep the action cluster inside its column (no overlap
 *     onto the Note), and fit the shell height to content so scrolling past
 *     the last row shows no blank gap.
 * ------------------------------------------------------------------------ */
/* Fill the available panel height so the footer stays stacked at the bottom,
 * and contain over-scroll so dragging past the last row shows no blank. */
body.system-screen-body .system-table-shell--members {
  flex: 1 1 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
}
body.system-screen-body .system-data-table--members > tbody {
  overscroll-behavior: contain !important;
}
body.system-screen-body .system-member-actions-cell {
  overflow: hidden !important;
}
body.system-screen-body .system-row-actions--member {
  gap: 0.3rem !important;
}
body.system-screen-body .system-row-actions--member .system-table-button--icon {
  width: 2.05rem !important;
  min-width: 2.05rem !important;
  height: 2.05rem !important;
}
body.system-screen-body .system-row-actions--member 
/* ---------------------------------------------------------------------------
 * 14) SIDEBAR BRAND — make the "Sport Center" card smaller to free menu space.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-sidebar-brand {
  padding: 0.5rem 0.65rem !important;
  gap: 0.6rem !important;
}
body.system-screen-body .system-sidebar-brand__mark {
  width: 2.2rem !important;
  height: 2.2rem !important;
  font-size: 0.9rem !important;
  border-radius: 0.7rem !important;
}
body.system-screen-body .system-sidebar-brand__copy strong {
  font-size: 0.95rem !important;
  line-height: 1.15 !important;
}

/* ---------------------------------------------------------------------------
 * 15) SCROLLBARS — light and minimal everywhere, a touch more visible on hover.
 * ------------------------------------------------------------------------ */
* {
  scrollbar-width: thin;
  scrollbar-color: rgba(148, 163, 184, 0.35) transparent;
}
*::-webkit-scrollbar {
  width: 9px;
  height: 9px;
}
*::-webkit-scrollbar-track {
  background: transparent;
}
*::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.3);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
}
*::-webkit-scrollbar-thumb:hover {
  background: rgba(100, 116, 139, 0.6);
  border-width: 3px;
  background-clip: padding-box;
}

/* ---------------------------------------------------------------------------
 * 16) COURSE exercise sub-table action buttons (edit / delete).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-subtable-actions {
  display: flex;
  gap: 0.35rem;
  justify-content: flex-end;
  white-space: nowrap;
}
body.system-screen-body .system-subtable-actions .system-table-button--icon {
  width: 2rem !important;
  min-width: 2rem !important;
  height: 2rem !important;
  border-radius: 0.6rem !important;
}

/* ---------------------------------------------------------------------------
 * 17) MEMBER TABLE — revert to a normal table (panel scrolls) so the
 *     Add Membership button and the + options menu are never clipped by an
 *     overflow scroll box. Supersedes the earlier row-scroll rules for members.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-table-shell--members {
  display: block !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  flex: 0 0 auto !important;
}
body.system-screen-body .system-table-shell--members > .overflow-x-auto {
  display: block !important;
  overflow: visible !important;
  flex: none !important;
}
body.system-screen-body .system-data-table--members {
  display: table !important;
  table-layout: auto !important;
  width: 100% !important;
  min-width: 0 !important;
}
body.system-screen-body .system-data-table--members > thead {
  display: table-header-group !important;
}
body.system-screen-body .system-data-table--members > tbody {
  display: table-row-group !important;
  overflow: visible !important;
}
body.system-screen-body .system-data-table--members > tbody > tr {
  display: table-row !important;
}
/* But a row filtered out by search (inline display:none) must stay hidden —
 * these higher-specificity rules beat any table-row/table !important above,
 * across every system table (members, transactions, ledger, etc.). */
body.system-screen-body .system-data-table--members > tbody > tr[style*="display: none"],
body.system-screen-body .system-data-table--members > tbody > tr[style*="display:none"],
body.system-screen-body .system-data-table--transactions > tbody > tr[style*="display: none"],
body.system-screen-body .system-data-table--transactions > tbody > tr[style*="display:none"],
body.system-screen-body .system-data-table--membership-ledger > tbody > tr[style*="display: none"],
body.system-screen-body .system-data-table--membership-ledger > tbody > tr[style*="display:none"],
body.system-screen-body table.system-data-table tbody tr[style*="display: none"],
body.system-screen-body table.system-data-table tbody tr[style*="display:none"] {
  display: none !important;
}
body.system-screen-body .system-member-actions-cell {
  overflow: visible !important;
  white-space: nowrap !important;
}
body.system-screen-body .system-data-table--members th:last-child,
body.system-screen-body .system-data-table--members td:last-child {
  width: 1% !important;
  min-width: 0 !important;
  white-space: nowrap !important;
}
/* Keep the header visible while the panel scrolls. */
body.system-screen-body .system-data-table--members thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  background: #f7fbff !important;
}
/* The + options menu must float above everything, not be clipped. */
body.system-screen-body .system-member-plus-wrap {
  position: relative !important;
}
body.system-screen-body .system-member-plus-menu {
  z-index: 60 !important;
}

/* ---------------------------------------------------------------------------
 * 18) DASHBOARD date-range control (Revenue + Expenses cards) and the
 *     on-accent (orange Revenue card) toggle/print styling.
 * ------------------------------------------------------------------------ */
.system-report-daterange {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.system-report-daterange--center { justify-content: center; }
.system-report-daterange__field {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 0.7rem;
  background: #ffffff;
  color: #334155;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.system-report-daterange__field .material-symbols-outlined { font-size: 1.1rem; color: #94a3b8; }
.system-report-daterange__nav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 999px;
  border: 1px solid rgba(203, 213, 225, 0.9);
  background: #ffffff;
  color: #64748b;
  cursor: pointer;
}
.system-report-daterange__nav:hover,
.system-report-daterange__field:hover { border-color: #f0560a; color: #f0560a; }

/* On the orange Revenue card, controls use translucent white styling. */
.system-report-daterange--onaccent .system-report-daterange__field,
.system-report-daterange--onaccent .system-report-daterange__nav {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.4);
  color: #ffffff;
}
.system-report-daterange--onaccent .system-report-daterange__field .material-symbols-outlined { color: rgba(255,255,255,0.85); }
.system-report-daterange--onaccent .system-report-daterange__field:hover,
.system-report-daterange--onaccent .system-report-daterange__nav:hover {
  background: rgba(255, 255, 255, 0.28);
  border-color: rgba(255, 255, 255, 0.7);
  color: #ffffff;
}
.system-report-toggle--onaccent {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 999px;
  padding: 0.25rem;
  display: inline-flex;
  gap: 0.15rem;
}
.system-report-toggle--onaccent .system-report-toggle__button {
  color: rgba(255, 255, 255, 0.85);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  background: transparent;
  border: 0;
  cursor: pointer;
}
.system-report-toggle--onaccent .system-report-toggle__button.is-active {
  background: #ffffff;
  color: #b02f00;
}
.system-report-icon-button--onaccent {
  background: rgba(255, 255, 255, 0.16) !important;
  color: #ffffff !important;
  border: 1px solid rgba(255, 255, 255, 0.4) !important;
}

/* ---------------------------------------------------------------------------
 * 19) MEMBERSHIP editor access-type sub-table — inline controls (access type,
 *     status and device/scanner dropdowns, editable dates, remove button).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-membership-subtable .system-subtable-control {
  width: 100%;
  min-width: 6.5rem;
  box-sizing: border-box;
  padding: 0.4rem 0.55rem;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 0.55rem;
  background: #ffffff;
  color: #1f2937;
  font-size: 0.82rem;
  font-weight: 500;
}
body.system-screen-body .system-membership-subtable .system-subtable-control:focus {
  outline: none;
  border-color: #f0560a;
  box-shadow: 0 0 0 3px rgba(240, 86, 10, 0.16);
}
body.system-screen-body .system-membership-subtable td {
  vertical-align: middle;
}
/* Dark-mode theming for the inline controls. */
body.system-screen-body.dark .system-membership-subtable .system-subtable-control,
body.system-screen-body .dark .system-membership-subtable .system-subtable-control {
  background: #0f172a;
  border-color: rgba(148, 163, 184, 0.35);
  color: #e2e8f0;
}

/* ---------------------------------------------------------------------------
 * 20) MODAL HEIGHT — cap the add / edit / search dialogs to a comfortable,
 *     viewport-relative height (centered, with margin) so they never run off
 *     the screen; the form body scrolls internally. Responsive on phones.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-form-dialog--managed {
  margin: auto !important;
}
/* Account for the top nav offset so the modal never touches the viewport
 * bottom — leaves a clear gap above and below. Higher specificity so it wins
 * over the many competing max-height rules in the bundled stylesheet. */
body.system-screen-body [data-editor-panel] > .system-form-dialog--managed,
body.system-screen-body [data-system-modal] > .system-form-dialog--managed {
  /* The fixed branch was 42rem (672px). On a tall window that won over the
   * viewport branch, so an 880px-high screen still got a 672px dialog with
   * only ~500px of scrollable form — which is why the Add Freeze section on
   * Edit Membership sat far below the fold and read as missing. 54rem uses
   * the space that's actually there; the `100dvh - 9rem` branch still keeps
   * the clear gap above and below on shorter screens. */
  max-height: min(54rem, calc(100vh - 9rem)) !important;
  max-height: min(54rem, calc(100dvh - 9rem)) !important;
}
@media (max-width: 640px) {
  body.system-screen-body .system-form-dialog--managed {
    max-height: 94vh !important;
    max-height: 94dvh !important;
    width: calc(100% - 0.8rem) !important;
  }
}

/* Expense-row invoice view icon → clickable button. */
body.system-screen-body .system-expense-view-btn {
  border: 0;
  background: transparent;
  cursor: pointer;
  color: inherit;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 4px;
  border-radius: 8px;
  transition: background 0.15s ease, color 0.15s ease;
}
body.system-screen-body .system-expense-view-btn:hover {
  background: rgba(240, 86, 10, 0.12);
  color: #f0560a;
}

/* Access-type menu (Face / Card / FingerPrint) for Add Access Type. */
body.system-screen-body .system-access-type-menu {
  position: absolute;
  bottom: calc(100% + 0.4rem);
  left: 0;
  z-index: 30;
  display: flex;
  flex-direction: column;
  min-width: 12rem;
  padding: 0.4rem;
  background: #ffffff;
  border: 1px solid rgba(203, 213, 225, 0.9);
  border-radius: 0.9rem;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, 0.4);
}
body.system-screen-body .system-access-type-menu__item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.7rem;
  border: 0;
  background: transparent;
  border-radius: 0.6rem;
  cursor: pointer;
  font-size: 0.9rem;
  font-weight: 600;
  color: #1f2937;
  text-align: left;
}
body.system-screen-body .system-access-type-menu__item:hover {
  background: rgba(240, 86, 10, 0.12);
  color: #f0560a;
}
html.dark body.system-screen-body .system-access-type-menu {
  background: #10202e;
  border-color: rgba(148, 163, 184, 0.35);
}
html.dark body.system-screen-body .system-access-type-menu__item {
  color: #e2e8f0;
}

/* Generic delete-confirmation dialog. */
body.system-screen-body .system-delete-dialog {
  text-align: center;
  max-width: 26rem;
  /* Breathing room around the icon / title / text / actions (Image 6). */
  padding: 1.9rem 1.9rem 1.6rem !important;
  box-sizing: border-box !important;
}
body.system-screen-body .system-delete-dialog__icon {
  width: 3.4rem;
  height: 3.4rem;
  margin: 0 auto 0.9rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  background: rgba(239, 68, 68, 0.14);
  color: #dc2626;
}
body.system-screen-body .system-delete-dialog__icon .material-symbols-outlined { font-size: 1.8rem; }
body.system-screen-body .system-delete-dialog__title {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0 0 0.4rem;
}
body.system-screen-body .system-delete-dialog__text {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
}
body.system-screen-body .system-delete-dialog__actions {
  display: flex;
  justify-content: center;
  gap: 0.6rem;
  margin-top: 1.3rem;
}
body.system-screen-body .system-delete-dialog__confirm,
body.system-screen-body .system-delete-dialog__cancel {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-weight: 700;
  cursor: pointer;
  border: 1px solid transparent;
}
body.system-screen-body .system-delete-dialog__confirm {
  background: #dc2626;
  color: #ffffff;
}
body.system-screen-body .system-delete-dialog__confirm:hover { background: #b91c1c; }
body.system-screen-body .system-delete-dialog__cancel {
  background: #ffffff;
  border-color: rgba(203, 213, 225, 0.9);
  color: #334155;
}
html.dark body.system-screen-body .system-delete-dialog__title { color: #f1f5f9; }
html.dark body.system-screen-body .system-delete-dialog__cancel { background: #1f2c39; color: #e2e8f0; border-color: rgba(148,163,184,0.35); }

/* Sticky header on the finance/transaction tables so the column titles stay
 * visible while the rows scroll. */
body.system-screen-body .system-data-table--transactions > thead th {
  position: sticky !important;
  top: 0 !important;
  z-index: 6 !important;
  background: #eef4fb !important;
}
html.dark body.system-screen-body .system-data-table--transactions > thead th {
  background: #16232f !important;
}

/* Amount / discount / duration split fields: keep the unit/currency select
 * wide enough to show its value ($, IQD, %, Amount, Day/Month) beside the
 * chevron. */
body.system-screen-body .system-member-amount-row,
body.system-screen-body .system-membership-split-field {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.45rem !important;
}
body.system-screen-body .system-member-amount-row > input,
body.system-screen-body .system-membership-split-field > input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
}
body.system-screen-body .system-member-amount-row > select,
body.system-screen-body .system-membership-split-field > select {
  flex: 0 0 auto !important;
  width: 5.4rem !important;
  text-align: left !important;
  padding: 0 1.7rem 0 0.7rem !important;
}

/* Transaction amount field: input + currency select laid out cleanly. */
/* Two SEPARATE boxes (not merged): amount input and currency select are distinct
 * rounded fields with a small gap between them — no wrapper border and no joining
 * divider (Image 1). */
body.system-screen-body .system-transaction-amount-field {
  display: flex !important;
  align-items: stretch !important;
  gap: 0.5rem !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  overflow: visible !important;
}
body.system-screen-body .system-form-field .system-transaction-amount-field[data-currency-field] > input,
body.system-screen-body .system-transaction-amount-field > input {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 0.7rem !important;
  background: #f8fafc !important;
}
body.system-screen-body .system-form-field .system-transaction-amount-field[data-currency-field] > select,
body.system-screen-body .system-transaction-amount-field > select {
  flex: 0 0 auto !important;
  width: 5rem !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  padding: 0 1.7rem 0 0.7rem !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  border-radius: 0.7rem !important;
  background-color: #f8fafc !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.55rem center !important;
  background-size: 0.95rem !important;
}

/* ---------------------------------------------------------------------------
 * 21) DROPDOWN / SUGGESTION BOXES — show a chevron on every select and every
 *     datalist (suggestion) input so they read as dropdowns.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-form-panel select,
body.system-screen-body .system-form-field select,
body.system-screen-body .system-membership-split-field select,
body.system-screen-body .system-member-finance-grid select,
body.system-screen-body .system-member-modal-grid select,
body.system-screen-body .system-member-modal-grid input[list],
body.system-screen-body .system-form-panel .system-member-modal-grid select,
body.system-screen-body select.system-subtable-control,
body.system-screen-body input[list] {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.8rem center !important;
  background-size: 1rem !important;
  padding-right: 2.4rem !important;
}
/* RTL: place the chevron on the left. */
body.system-screen-body[dir="rtl"] .system-form-panel select,
body.system-screen-body[dir="rtl"] .system-form-field select,
body.system-screen-body[dir="rtl"] select.system-subtable-control,
body.system-screen-body[dir="rtl"] input[list],
html[dir="rtl"] body.system-screen-body select,
html[dir="rtl"] body.system-screen-body input[list] {
  background-position: left 0.8rem center !important;
  padding-right: 0.9rem !important;
  padding-left: 2.4rem !important;
}
/* Higher-specificity chevron for grids whose fields carry a `background`
 * shorthand rule (member/finance/modal grids) that would otherwise wipe it. */
body.system-screen-body .system-member-modal-grid .system-form-field select,
body.system-screen-body .system-member-finance-grid .system-form-field select,
body.system-screen-body .system-member-modal-grid .system-form-field input[list],
body.system-screen-body .system-member-finance-grid .system-form-field input[list],
body.system-screen-body .system-membership-split-field select,
body.system-screen-body .system-member-amount-row select {
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.7rem center !important;
  background-size: 1rem !important;
  padding-right: 2.2rem !important;
}
/* Dark mode: lighter chevron. */
html.dark body.system-screen-body select,
html.dark body.system-screen-body input[list] {
  background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
}

/* ---------------------------------------------------------------------------
 * 22) EXPENSE INVOICE MODAL — invoice-style header, status badge, big amount.
 * ------------------------------------------------------------------------ */
body.system-screen-body [data-system-modal="expense-invoice"] .system-invoice-dialog {
  padding: 1.5rem 1.6rem !important;
}
body.system-screen-body .system-invoice-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9);
}
body.system-screen-body .system-invoice-head__eyebrow {
  display: block;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #f0560a;
}
body.system-screen-body .system-invoice-head__id h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: #0f172a;
  margin: 0.15rem 0;
}
body.system-screen-body .system-invoice-head__date {
  font-size: 0.82rem;
  color: #64748b;
}
body.system-screen-body .system-invoice-status {
  align-self: center;
  padding: 0.35rem 0.9rem;
  border-radius: 999px;
  background: rgba(16, 185, 129, 0.14);
  color: #059669;
  font-weight: 700;
  font-size: 0.8rem;
}
body.system-screen-body .system-invoice-amount {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 1.1rem 0 0.4rem;
  padding: 0.9rem 1.1rem;
  border-radius: 1rem;
  background: linear-gradient(135deg, #fff4ec, #ffe9dc);
}
body.system-screen-body .system-invoice-amount span {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b45309;
}
body.system-screen-body .system-invoice-amount strong {
  font-size: 1.9rem;
  font-weight: 800;
  color: #0f172a;
}
body.system-screen-body .system-invoice-grid { margin-top: 1rem; }
/* Dark mode. */
html.dark body.system-screen-body .system-invoice-head__id h3,
html.dark body.system-screen-body .system-invoice-amount strong { color: #f1f5f9; }
html.dark body.system-screen-body .system-invoice-amount {
  background: linear-gradient(135deg, rgba(240,86,10,0.18), rgba(240,86,10,0.08));
}
html.dark body.system-screen-body .system-invoice-head { border-color: rgba(148,163,184,0.25); }

/* ---------------------------------------------------------------------------
 * 23) MODAL FOOTER OUTSIDE THE SCROLL — the actions row is moved out of the
 *     scrolling form (JS), so the scrollbar ends at the footer border instead
 *     of running to the very bottom.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-form-dialog--managed {
  display: flex !important;
  flex-direction: column !important;
}
body.system-screen-body .system-form-dialog--managed > .system-form-body {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  /* Keep the fields off the modal edges (Image 7). */
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
  padding-bottom: 1.1rem !important;
}
body.system-screen-body .system-form-dialog--managed > .system-form-actions {
  flex: 0 0 auto !important;
  margin-top: 0 !important;
  padding-top: 1rem !important;
  /* Space beneath the footer buttons so they don't hug the modal edge (Image 6). */
  padding-bottom: 1.15rem !important;
  padding-left: 1.6rem !important;
  padding-right: 1.6rem !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}
html.dark body.system-screen-body .system-form-dialog--managed > .system-form-actions {
  border-top-color: rgba(148, 163, 184, 0.25) !important;
}

/* ---------------------------------------------------------------------------
 * 24) REPORT TABLE COLUMN SPACING — keep adjacent columns (e.g. Start Date and
 *     Expiration) from touching so the dates don't read as one number.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-report-table__head,
body.system-screen-body .system-report-table__body > div,
body.system-screen-body .system-report-members__head,
body.system-screen-body .system-report-members__body > div {
  gap: 0.75rem !important;
}
body.system-screen-body .system-report-table__head > span,
body.system-screen-body .system-report-table__body > div > span {
  min-width: 0 !important;
  padding-right: 0.35rem !important;
  overflow-wrap: break-word !important;
}

/* ---------------------------------------------------------------------------
 * 25) VIEW MEMBER (and other read-only view modals) — cap height and scroll.
 *     These have no <form>, so they don't get the managed scroll treatment.
 * ------------------------------------------------------------------------ */
body.system-screen-body [data-system-modal="member-view"] .system-form-dialog,
body.system-screen-body [data-system-modal="membership-record-view"] .system-form-dialog,
body.system-screen-body [data-system-modal="record-view"] .system-form-dialog,
body.system-screen-body [data-system-modal="member-ledger"] .system-form-dialog,
body.system-screen-body [data-system-modal="course-view"] .system-form-dialog,
body.system-screen-body [data-system-modal="expense-view"] .system-form-dialog,
body.system-screen-body [data-system-modal="income-view"] .system-form-dialog,
body.system-screen-body [data-system-modal="sale-view"] .system-form-dialog,
body.system-screen-body [data-system-modal="coach-view"] .system-form-dialog,
body.system-screen-body .system-member-dialog--view {
  max-height: min(90vh, 46rem) !important;
  max-height: min(90dvh, 46rem) !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  display: flex !important;
  flex-direction: column !important;
}
/* The wrapped middle region is the only scroll container, so the scrollbar
 * sits between the fixed header and footer. */
body.system-screen-body .system-view-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
}
/* The inner detail form must NOT scroll on its own (that produced a second,
 * duplicate scrollbar inside the view-scroll region). */
body.system-screen-body .system-view-scroll .system-membership-detail-form,
body.system-screen-body .system-view-scroll .system-membership-detail-form--view,
body.system-screen-body .system-view-scroll .system-course-form,
body.system-screen-body .system-view-scroll .system-course-form--view,
body.system-screen-body .system-view-scroll .system-transaction-modal-form,
body.system-screen-body .system-view-scroll .system-transaction-modal-form--readonly {
  overflow: visible !important;
  max-height: none !important;
  height: auto !important;
}
/* Fixed footer of the view modal — centered buttons with horizontal padding so
 * they never hug (and get clipped by) the modal's rounded corners. */
body.system-screen-body .system-member-view-footer {
  flex: 0 0 auto !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.6rem !important;
  background: #ffffff !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
  padding: 1rem 1.5rem 1.1rem !important;
  margin: 0 !important;
}
html.dark body.system-screen-body .system-member-view-footer {
  background: #10202e !important;
  border-top-color: rgba(148, 163, 184, 0.25) !important;
}
/* Keep the view-modal header fixed while the body scrolls. */
body.system-screen-body [data-system-modal="member-view"] .system-form-dialog > .system-member-dialog__banner,
body.system-screen-body [data-system-modal="member-view"] .system-form-dialog > .system-toolbar,
body.system-screen-body [data-system-modal="membership-record-view"] .system-form-dialog > .system-toolbar,
body.system-screen-body [data-system-modal="membership-record-view"] .system-form-dialog > .system-member-dialog__banner,
body.system-screen-body [data-system-modal="record-view"] .system-form-dialog > .system-toolbar,
body.system-screen-body [data-system-modal="member-ledger"] .system-form-dialog > .system-toolbar,
body.system-screen-body [data-system-modal="member-ledger"] .system-form-dialog > .system-member-dialog__banner,
body.system-screen-body [data-system-modal="course-view"] .system-form-dialog > .system-member-dialog__banner,
body.system-screen-body [data-system-modal="expense-view"] .system-form-dialog > .system-toolbar,
body.system-screen-body [data-system-modal="income-view"] .system-form-dialog > .system-toolbar,
body.system-screen-body [data-system-modal="sale-view"] .system-form-dialog > .system-toolbar,
body.system-screen-body [data-system-modal="coach-view"] .system-form-dialog > .system-toolbar,
body.system-screen-body .system-member-dialog--view > .system-member-dialog__banner {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  flex: 0 0 auto !important;
  background: #ffffff !important;
  padding-top: 1.2rem !important;
  box-shadow: 0 1px 0 rgba(226, 232, 240, 0.9) !important;
}
html.dark body.system-screen-body [data-system-modal="member-view"] .system-form-dialog > .system-member-dialog__banner,
html.dark body.system-screen-body [data-system-modal="member-ledger"] .system-form-dialog > .system-toolbar,
html.dark body.system-screen-body [data-system-modal="member-ledger"] .system-form-dialog > .system-member-dialog__banner,
html.dark body.system-screen-body .system-member-dialog--view > .system-member-dialog__banner {
  background: #10202e !important;
  box-shadow: 0 1px 0 rgba(148, 163, 184, 0.25) !important;
}

/* ---------------------------------------------------------------------------
 * 26) MODAL RESPONSIVENESS — collapse two-column modal grids to one column and
 *     let modals use the full width on tablets / phones.
 * ------------------------------------------------------------------------ */
@media (max-width: 768px) {
  body.system-screen-body .system-member-finance-grid,
  body.system-screen-body .system-member-modal-grid,
  body.system-screen-body .system-member-search-grid,
  body.system-screen-body .system-membership-detail-form .system-member-finance-grid,
  body.system-screen-body .system-form-grid--two,
  body.system-screen-body [data-member-search-form] .system-form-grid,
  body.system-screen-body [data-system-modal="member-report"] .system-member-report-grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.system-screen-body .system-form-dialog {
    width: calc(100vw - 1rem) !important;
    max-width: calc(100vw - 1rem) !important;
  }
  /* Report top-member layout stacks: donut above the legend. */
  body.system-screen-body [data-system-modal="member-report"] .system-member-report-top {
    flex-direction: column !important;
    align-items: stretch !important;
  }
}

/* ---------------------------------------------------------------------------
 * 26) MEMBERSHIP PAGE HEADER — vertically centre the "Membership" title with
 *     the search bar, and keep the table's top-right print button clear of the
 *     vertical scrollbar so it isn't clipped (Image 4).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-membership-ledger-header__row {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 1rem !important;
}
/* Search bar hugs the right and is sized like the other pages (it was stretching
 * to ~615px and sitting mid-header). */
body.system-screen-body .system-membership-ledger-searchbar {
  flex: 0 0 auto !important;
  width: auto !important;
  /* Logical, so it pushes to the END edge in both directions. A physical
     `margin-left: auto` pushed the search bar back TOWARD the title under
     dir="rtl", leaving a gap on the left instead of sitting there. */
  margin-inline-start: auto !important;
  margin-left: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-end !important;
  gap: 0.6rem !important;
}
body.system-screen-body .system-membership-ledger-searchbar .system-member-toolbar__search {
  flex: 0 1 auto !important;
  width: 18rem !important;
  max-width: 100% !important;
}
/* Zero the heading's intrinsic margins so it sits on the true vertical centre
 * line of the header row rather than being nudged up by leading. */
body.system-screen-body .system-membership-ledger-header__row .system-page-header-copy {
  display: flex !important;
  align-items: center !important;
  margin: 0 !important;
}
body.system-screen-body .system-membership-ledger-header__row .system-page-header-copy h2 {
  margin: 0 !important;
  line-height: 1.1 !important;
}
/* Print action cell simply right-aligns; the row scrollbar now sits inside the
 * body so the header no longer reserves a gutter beside this button. */
body.system-screen-body .system-membership-ledger-table__action-head {
  text-align: right !important;
  padding-right: 0.75rem !important;
}
body.system-screen-body .system-membership-ledger-table__print {
  margin-left: auto !important;
}
/* Proportional column widths for the ledger (table-layout:fixed would otherwise
 * make all 13 columns equal). Applied to header + body so they stay aligned. */
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(1),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(1) { width: 3.5% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(2),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(2) { width: 11% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(3),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(3) { width: 8% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(4),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(4) { width: 6.5% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(5),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(5) { width: 6% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(6),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(6) { width: 6.5% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(7),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(7) { width: 6% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(8),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(8) { width: 8% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(9),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(9) { width: 8% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(10),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(10) { width: 8% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(11),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(11) { width: 8% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(12),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(12) { width: 7% !important; }
body.system-screen-body .system-data-table--membership-ledger > thead > tr > th:nth-child(13),
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(13) { width: 11% !important; }
/* Ensure the three row-action icons are never clipped, and keep them flush to
 * the right of the column (just left of the scrollbar) so there is no empty gap
 * between the buttons and the scrollbar. */
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(13) {
  overflow: visible !important;
  white-space: nowrap !important;
  text-align: right !important;
  padding-right: 0.4rem !important;
}
body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:nth-child(13) .system-row-actions {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-end !important;
  gap: 0.3rem !important;
}

/* ---------------------------------------------------------------------------
 * 27) MEMBERSHIP FREEZE SECTION — only shown when EDITING a membership, never
 *     in the Add flow (Images 8 & 9).
 * ------------------------------------------------------------------------ */
body.system-screen-body [data-editor-form="membership"] .system-membership-freeze-section {
  display: none !important;
}
body.system-screen-body [data-editor-form="membership"][data-editor-mode="edit"] .system-membership-freeze-section {
  display: block !important;
}

/* Course print menu must escape the table's overflow clip so both options
 * (Normal Print + Export To Excel) are fully visible. Positioned via JS. */
body.system-screen-body .system-course-print-menu:not([hidden]) {
  position: fixed !important;
  inset-inline-end: auto !important;
}

/* ---------------------------------------------------------------------------
 * 29) UNIFIED TABLE PRINT BUTTON — every table header's print button uses the
 *     same clean circular white design across all pages.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-membership-ledger-table__print,
body.system-screen-body thead .system-table-button[data-print-target],
body.system-screen-body thead .system-table-button[data-print-menu-trigger],
body.system-screen-body .system-transaction-table__action-head .system-table-button,
body.system-screen-body .system-membership-ledger-table__action-head .system-table-button {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.6rem !important;
  height: 2.6rem !important;
  padding: 0 !important;
  border-radius: 999px !important;
  background: #ffffff !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.08) !important;
  color: #334155 !important;
  cursor: pointer !important;
  transition: background 0.15s ease, box-shadow 0.15s ease !important;
}
body.system-screen-body .system-membership-ledger-table__print:hover,
body.system-screen-body thead .system-table-button[data-print-target]:hover,
body.system-screen-body thead .system-table-button[data-print-menu-trigger]:hover,
body.system-screen-body .system-transaction-table__action-head .system-table-button:hover,
body.system-screen-body .system-membership-ledger-table__action-head .system-table-button:hover {
  background: #f8fafc !important;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.12) !important;
}
body.system-screen-body .system-membership-ledger-table__print .material-symbols-outlined,
body.system-screen-body thead .system-table-button[data-print-target] .material-symbols-outlined,
body.system-screen-body thead .system-table-button[data-print-menu-trigger] .material-symbols-outlined,
body.system-screen-body .system-transaction-table__action-head .system-table-button .material-symbols-outlined,
body.system-screen-body .system-membership-ledger-table__action-head .system-table-button .material-symbols-outlined {
  font-size: 1.35rem !important;
}
html.dark body.system-screen-body .system-membership-ledger-table__print,
html.dark body.system-screen-body thead .system-table-button[data-print-target],
html.dark body.system-screen-body thead .system-table-button[data-print-menu-trigger],
html.dark body.system-screen-body .system-transaction-table__action-head .system-table-button,
html.dark body.system-screen-body .system-membership-ledger-table__action-head .system-table-button {
  background: #16232f !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
  color: #e2e8f0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35) !important;
}

/* ---------------------------------------------------------------------------
 * 28) MEMBERSHIP REPORT — per-card header with print button, period tabs and a
 *     from/to date range (Image 10).
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-membership-report-card__head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  margin-bottom: 0.85rem !important;
}
body.system-screen-body .system-membership-report-card__print {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2.4rem !important;
  height: 2.4rem !important;
  border-radius: 999px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  background: #ffffff !important;
  color: #ea6a1e !important;
  cursor: pointer !important;
  flex: 0 0 auto !important;
}
body.system-screen-body .system-membership-report-card__print:hover {
  background: #fff3ea !important;
}
html.dark body.system-screen-body .system-membership-report-card__print {
  background: #16232f !important;
  border-color: rgba(148, 163, 184, 0.35) !important;
}
body.system-screen-body .system-membership-report-range {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  margin: 0.75rem 0 !important;
}
body.system-screen-body .system-membership-report-range > input {
  flex: 1 1 0 !important;
  min-width: 0 !important;
}
/* Keep the tall report dialog inside the viewport and let the cards scroll. */
body.system-screen-body [data-system-modal="membership-report"] .system-membership-report-dialog {
  max-height: min(90vh, 52rem) !important;
  max-height: min(90dvh, 52rem) !important;
  overflow-y: auto !important;
}

/* ---------------------------------------------------------------------------
 * 30) INCOME TABLE — proportional column widths so the 12 columns aren't equal
 *     (which cramped/wrapped the headers). Header labels don't wrap.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-data-table--income > thead > tr > th {
  white-space: normal !important;
  vertical-align: middle !important;
}
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(1),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(1) { width: 9% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(2),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(2) { width: 9% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(3),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(3) { width: 7% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(4),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(4) { width: 8% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(5),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(5) { width: 9% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(6),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(6) { width: 7% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(7),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(7) { width: 10% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(8),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(8) { width: 9% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(9),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(9) { width: 8% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(10),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(10) { width: 8% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(11),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(11) { width: 8% !important; }
body.system-screen-body .system-data-table--income > thead > tr > th:nth-child(12),
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(12) { width: 8% !important; }
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(12) {
  overflow: visible !important;
  white-space: nowrap !important;
  text-align: right !important;
  padding-right: 0.4rem !important;
}
body.system-screen-body .system-data-table--income > tbody > tr > td:nth-child(12) .system-row-actions {
  display: flex !important;
  width: 100% !important;
  justify-content: flex-end !important;
  gap: 0.3rem !important;
}

/* ---------------------------------------------------------------------------
 * 31) APP FRAME — round the outer layout to match the Masulka system radius.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-screen-layout {
  border-radius: 2rem !important;
  overflow: hidden !important;
}

/* ---------------------------------------------------------------------------
 * 32) COACH / SAFE REPORT MODALS — fixed header, scrollable body, tidy totals
 *     and print button placement.
 * ------------------------------------------------------------------------ */
body.system-screen-body [data-system-modal="coach-report"] .system-form-dialog,
body.system-screen-body [data-system-modal="safe-report"] .system-form-dialog {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(92vh, 54rem) !important;
  max-height: min(92dvh, 54rem) !important;
  overflow: hidden !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}
body.system-screen-body [data-system-modal="coach-report"] .system-form-dialog > .system-member-dialog__banner,
body.system-screen-body [data-system-modal="safe-report"] .system-form-dialog > .system-member-dialog__banner {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  flex: 0 0 auto !important;
  background: #ffffff !important;
}
body.system-screen-body [data-system-modal="coach-report"] .system-coach-report-shell,
body.system-screen-body [data-system-modal="safe-report"] .system-safe-report-shell {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow-y: auto !important;
  padding-bottom: 1.25rem !important;
}
/* Give the coach report summary totals breathing room and spread them out. */
body.system-screen-body .system-coach-report-summary {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: space-between !important;
  gap: 1rem 2rem !important;
  padding: 1.1rem 0.4rem 0.4rem !important;
  margin-top: 0.5rem !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}
/* Coach report print button — keep it inside the modal, bottom-right. */
body.system-screen-body .system-coach-report-print-wrap {
  position: absolute !important;
  right: 1.5rem !important;
  bottom: 1.25rem !important;
  z-index: 5 !important;
}
body.system-screen-body [data-system-modal="coach-report"] .system-form-dialog {
  position: relative !important;
}

/* ---------------------------------------------------------------------------
 * 33) SUBSCRIPTION PLANS / HISTORY / FIB PAYMENT modals.
 * ------------------------------------------------------------------------ */
body.system-screen-body .system-sub-plans-dialog,
body.system-screen-body .system-subhistory-dialog,
body.system-screen-body .system-fib-dialog {
  display: flex !important;
  flex-direction: column !important;
  max-height: min(92vh, 50rem) !important;
  max-height: min(92dvh, 50rem) !important;
  overflow: hidden !important;
  padding: 0 !important;
  width: min(60rem, calc(100vw - 2rem)) !important;
  background: #ffffff !important;
  border-radius: 1.75rem !important;
}
/* White body area under the sticky white header. */
body.system-screen-body .system-sub-plans-grid,
body.system-screen-body .system-subhistory-scroll,
body.system-screen-body .system-fib-body {
  background: #ffffff !important;
}
/* Subscription modal titles — light mode dark text, dark mode light text. */
body.system-screen-body .system-sub-plans-head h3,
body.system-screen-body .system-subhistory-head h3,
body.system-screen-body .system-fib-head h3 {
  color: #0f172a !important;
}
html.dark body.system-screen-body .system-sub-plans-head h3,
html.dark body.system-screen-body .system-subhistory-head h3,
html.dark body.system-screen-body .system-fib-head h3 {
  color: #f8fafc !important;
}
/* Subscription history table — light mode. */
body.system-screen-body .system-subhistory-table,
body.system-screen-body .system-subhistory-table thead th,
body.system-screen-body .system-subhistory-table tbody td {
  background: #ffffff !important;
  color: #0f172a !important;
  border-color: rgba(226, 232, 240, 0.9) !important;
}
body.system-screen-body .system-subhistory-table thead th { background: #f1f5f9 !important; }
/* Subscription history table — dark mode. */
html.dark body.system-screen-body .system-subhistory-table,
html.dark body.system-screen-body .system-subhistory-table tbody td {
  background: transparent !important;
  color: #e6edf5 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
html.dark body.system-screen-body .system-subhistory-table thead th {
  background: #141d27 !important;
  color: #cbd5e1 !important;
}
/* Subscription shells — light mode stays white. */
body.system-screen-body .system-fib-dialog .system-utility-actions,
body.system-screen-body .system-subhistory-dialog .system-utility-actions {
  background: #ffffff !important;
}
/* Subscription shells — dark mode dark surfaces. */
html.dark body.system-screen-body .system-sub-plans-dialog,
html.dark body.system-screen-body .system-subhistory-dialog,
html.dark body.system-screen-body .system-fib-dialog,
html.dark body.system-screen-body .system-sub-plans-grid,
html.dark body.system-screen-body .system-subhistory-scroll,
html.dark body.system-screen-body .system-fib-body {
  background: #1f2b38 !important;
}
html.dark body.system-screen-body .system-sub-plans-head,
html.dark body.system-screen-body .system-subhistory-head,
html.dark body.system-screen-body .system-fib-head,
html.dark body.system-screen-body .system-fib-dialog .system-utility-actions,
html.dark body.system-screen-body .system-subhistory-dialog .system-utility-actions {
  background: #24313f !important;
}
html.dark body.system-screen-body .system-fib-total { color: #ff9e6b !important; }
html.dark body.system-screen-body .system-fib-total strong { color: #f8fafc !important; }

/* ---------------------------------------------------------------------------
 * 34) DARK-MODE MODAL TEXT — light, readable text on the dark modal surface
 *     (member ledger/view, add/search member, add membership, merge, and the
 *     finance add footers). Titles/headings brightest; body a touch softer.
 * ------------------------------------------------------------------------ */
html.dark body.system-screen-body .system-form-dialog td,
html.dark body.system-screen-body .system-form-dialog th,
html.dark body.system-screen-body .system-form-dialog .system-transaction-field-value,
html.dark body.system-screen-body .system-form-dialog .system-form-field > label,
html.dark body.system-screen-body .system-form-dialog .system-member-view-section,
html.dark body.system-screen-body .system-form-dialog .system-member-view-hero,
html.dark body.system-screen-body .system-form-dialog .system-member-ledger-summary {
  color: #e2e8f0 !important;
}
html.dark body.system-screen-body .system-form-dialog h3,
html.dark body.system-screen-body .system-form-dialog h4,
html.dark body.system-screen-body .system-form-dialog h5 {
  color: #f8fafc !important;
}
html.dark body.system-screen-body .system-form-dialog .system-row-meta,
html.dark body.system-screen-body .system-form-dialog small {
  color: #94a3b8 !important;
}

/* ---------------------------------------------------------------------------
 * 34b) DARK MODE bodies for the ADD/EDIT + SEARCH form modals. The body, the
 *      search forms and the action row all take the dark dialog surface, with
 *      light labels/text and dark inputs. (Was previously forced white — now
 *      unified with the coherent dark theme.)
 * ------------------------------------------------------------------------ */
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog > form,
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog > .system-form-body,
html.dark body.system-screen-body .system-form-panel [data-member-search-form],
html.dark body.system-screen-body .system-form-panel [data-membership-search-form],
html.dark body.system-screen-body .system-form-panel [data-income-search-form],
html.dark body.system-screen-body .system-form-panel [data-expense-search-form],
html.dark body.system-screen-body .system-form-panel [data-sale-search-form],
html.dark body.system-screen-body .system-form-panel [data-course-search-form],
html.dark body.system-screen-body .system-form-panel [data-coach-search-form] {
  background: #1f2b38 !important;
}
html.dark body.system-screen-body .system-form-dialog > .system-form-actions {
  background: #24313f !important;
}
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog .system-form-field > label,
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog .system-form-field label,
html.dark body.system-screen-body .system-form-panel form.system-transaction-modal-form .system-form-field > label,
html.dark body.system-screen-body .system-form-panel form.system-member-search-form .system-form-field > label {
  color: #cbd5e1 !important;
}
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog .system-form-field input:not([type="checkbox"]):not([type="radio"]),
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog .system-form-field select,
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog .system-form-field textarea,
html.dark body.system-screen-body .system-form-panel form.system-transaction-modal-form input:not([type="checkbox"]):not([type="radio"]),
html.dark body.system-screen-body .system-form-panel form.system-transaction-modal-form select,
html.dark body.system-screen-body .system-form-panel form.system-member-search-form input:not([type="checkbox"]):not([type="radio"]),
html.dark body.system-screen-body .system-form-panel form.system-member-search-form select {
  background-color: #141d27 !important;
  color: #f1f5f9 !important;
  border-color: rgba(148, 163, 184, 0.3) !important;
}
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog input::placeholder,
html.dark body.system-screen-body [data-editor-panel] .system-form-dialog textarea::placeholder,
html.dark body.system-screen-body .system-form-panel form.system-transaction-modal-form input::placeholder,
html.dark body.system-screen-body .system-form-panel form.system-member-search-form input::placeholder {
  color: #64748b !important;
}
/* Labels light on the dark body. Uses the same :not() chain as the base
 * dark rule (plus more classes) so it outranks it and wins the cascade. */
html.dark body.system-screen-body .system-form-dialog:not(.system-member-dialog--report):not(.system-member-dialog--merge):not(.system-member-dialog--ledger):not(.system-member-dialog--merge):not(.system-member-dialog--ledger) .system-member-modal-grid .system-form-field label,
html.dark body.system-screen-body .system-form-dialog:not(.system-member-dialog--report):not(.system-member-dialog--merge):not(.system-member-dialog--ledger):not(.system-member-dialog--merge):not(.system-member-dialog--ledger) .system-member-finance-grid .system-form-field label,
html.dark body.system-screen-body .system-form-dialog:not(.system-member-dialog--report):not(.system-member-dialog--merge):not(.system-member-dialog--ledger):not(.system-member-dialog--merge):not(.system-member-dialog--ledger) .system-member-search-form .system-form-field label,
html.dark body.system-screen-body .system-form-dialog:not(.system-member-dialog--report):not(.system-member-dialog--merge):not(.system-member-dialog--ledger):not(.system-member-dialog--merge):not(.system-member-dialog--ledger) .system-membership-detail-form .system-form-field label,
html.dark body.system-screen-body .system-form-dialog:not(.system-member-dialog--report):not(.system-member-dialog--merge):not(.system-member-dialog--ledger):not(.system-member-dialog--merge):not(.system-member-dialog--ledger) .system-transaction-modal-form .system-form-field label,
html.dark body.system-screen-body .system-form-dialog:not(.system-member-dialog--report):not(.system-member-dialog--merge):not(.system-member-dialog--ledger):not(.system-member-dialog--merge):not(.system-member-dialog--ledger) .system-course-form .system-form-field label {
  color: #cbd5e1 !important;
}
/* Dark inputs within those specific grids (outrank base rules). */
html.dark body.system-screen-body .system-form-dialog .system-member-modal-grid .system-form-field input,
html.dark body.system-screen-body .system-form-dialog .system-member-modal-grid .system-form-field select,
html.dark body.system-screen-body .system-form-dialog .system-member-finance-grid .system-form-field input,
html.dark body.system-screen-body .system-form-dialog .system-member-finance-grid .system-form-field select,
html.dark body.system-screen-body .system-form-dialog .system-membership-detail-form .system-form-field input,
html.dark body.system-screen-body .system-form-dialog .system-membership-detail-form .system-form-field select {
  background-color: #141d27 !important;
  color: #f1f5f9 !important;
}
body.system-screen-body .system-sub-plans-head,
body.system-screen-body .system-subhistory-head,
body.system-screen-body .system-fib-head {
  position: sticky !important;
  top: 0 !important;
  z-index: 8 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 1rem !important;
  padding: 1.4rem 1.6rem !important;
  background: #ffffff !important;
  border-bottom: 1px solid rgba(226, 232, 240, 0.9) !important;
}
body.system-screen-body .system-sub-plans-head h3,
body.system-screen-body .system-subhistory-head h3,
body.system-screen-body .system-fib-head h3 {
  flex: 1 1 auto !important;
  text-align: center !important;
  font-size: 1.4rem !important;
  font-weight: 800 !important;
  color: #0f172a !important;
}
body.system-screen-body .system-sub-history-btn {
  position: absolute !important;
  /* History sits on the START edge, Close on the END edge; logical insets so
     the pair swaps correctly under dir="rtl". */
  inset-inline-start: 1.4rem !important;
  width: 2.6rem !important;
  height: 2.6rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
}
body.system-screen-body .system-subhistory-head [data-system-utility-close],
body.system-screen-body .system-sub-plans-head [data-system-utility-close] {
  position: absolute !important;
  inset-inline-end: 1.4rem !important;
}
/* Plan cards */
body.system-screen-body .system-sub-plans-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 1.5rem !important;
  padding: 2rem !important;
  overflow-y: auto !important;
}
body.system-screen-body .system-sub-plan {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 0.9rem !important;
  padding: 1.5rem 1.2rem !important;
  border: 0 !important;
  border-radius: 1.5rem !important;
  color: #ffffff !important;
  cursor: pointer !important;
  min-height: 20rem !important;
  justify-content: flex-start !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease !important;
}
body.system-screen-body .system-sub-plan:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 16px 32px rgba(15, 23, 42, 0.18) !important;
}
body.system-screen-body .system-sub-plan--month { background: #f96a6a !important; }
body.system-screen-body .system-sub-plan--year { background: #8ac640 !important; }
body.system-screen-body .system-sub-plan--half { background: #f5c53b !important; }
/* Title box: darker translucent shade of the card, white bold text. */
body.system-screen-body .system-sub-plan__title {
  width: 100% !important;
  padding: 1.4rem 0.5rem !important;
  border-radius: 1.1rem !important;
  background: rgba(0, 0, 0, 0.08) !important;
  color: #ffffff !important;
  font-size: 1.7rem !important;
  font-weight: 800 !important;
  text-align: center !important;
}
body.system-screen-body .system-sub-plan__desc {
  font-weight: 700 !important;
  font-size: 0.95rem !important;
  margin-top: 0.4rem !important;
}
body.system-screen-body .system-sub-plan__price {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
}
body.system-screen-body .system-sub-plan__price b { font-weight: 700 !important; opacity: 0.85 !important; }
body.system-screen-body .system-sub-plan__rate {
  font-size: 0.8rem !important;
  opacity: 0.85 !important;
  margin-top: -0.4rem !important;
}
body.system-screen-body .system-sub-plan__total {
  margin-top: auto !important;
  font-size: 1.9rem !important;
  font-weight: 800 !important;
  letter-spacing: 0.01em !important;
}
/* Subscription history table */
body.system-screen-body .system-subhistory-scroll {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
  padding: 0 0.5rem 1rem !important;
}
body.system-screen-body .system-subhistory-table th,
body.system-screen-body .system-subhistory-table td {
  padding: 0.9rem 1rem !important;
  text-align: center !important;
  white-space: nowrap !important;
}
body.system-screen-body .system-subhistory-table td .system-row-meta {
  display: block !important;
  color: #94a3b8 !important;
  font-size: 0.8rem !important;
}
body.system-screen-body .system-sub-active {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 2rem !important;
  height: 2rem !important;
  border-radius: 999px !important;
  background: rgba(34, 197, 94, 0.18) !important;
  color: #16a34a !important;
}
body.system-screen-body .system-sub-history-print {
  width: 2.4rem !important;
  height: 2.4rem !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border-radius: 999px !important;
  border: 1px solid rgba(203, 213, 225, 0.9) !important;
  background: #ffffff !important;
  color: #334155 !important;
  cursor: pointer !important;
}
/* FIB payment */
body.system-screen-body .system-fib-dialog { width: min(30rem, calc(100vw - 2rem)) !important; }
body.system-screen-body .system-fib-body {
  flex: 1 1 auto !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 1.2rem !important;
  padding: 1.8rem 1.6rem !important;
}
body.system-screen-body .system-fib-total {
  color: #ea6a1e !important;
  font-size: 1.2rem !important;
  font-weight: 800 !important;
}
body.system-screen-body .system-fib-total strong { color: #0f172a !important; margin-left: 0.4rem !important; }
body.system-screen-body .system-fib-qr {
  border-radius: 1rem !important;
  overflow: hidden !important;
}
body.system-screen-body .system-fib-dots { display: flex !important; gap: 0.5rem !important; }
body.system-screen-body .system-fib-dots span {
  width: 0.55rem !important;
  height: 0.55rem !important;
  border-radius: 999px !important;
  background: #2563eb !important;
  animation: systemFibDot 1s infinite ease-in-out !important;
}
body.system-screen-body .system-fib-dots span:nth-child(2) { animation-delay: 0.15s !important; }
body.system-screen-body .system-fib-dots span:nth-child(3) { animation-delay: 0.3s !important; }
@keyframes systemFibDot { 0%,100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 1; transform: translateY(-4px); } }
body.system-screen-body .system-fib-dialog .system-utility-actions,
body.system-screen-body .system-subhistory-dialog .system-utility-actions {
  flex: 0 0 auto !important;
  display: flex !important;
  justify-content: center !important;
  padding: 1rem 1.5rem 1.3rem !important;
  border-top: 1px solid rgba(226, 232, 240, 0.9) !important;
}
@media (max-width: 640px) {
  body.system-screen-body .system-sub-plans-grid { grid-template-columns: 1fr !important; }
}

/* (Removed) The former "fully-light modals in dark mode" block conflicted with
 * the coherent dark-modal theme above; the dark theme is now the single source
 * of truth for these dialogs. */

/* =====================================================================
 * MARKETING PAGES (security.html etc.) — DARK MODE
 * The "Intelligent Anti-Passback" showcase card used a white gradient
 * (from-white) that stayed white in dark mode, so its light heading and
 * description text became invisible. Give the card a dark surface with
 * light, readable text (the inner Real-time Log panel is already dark).
 * ===================================================================== */
html.dark .bg-gradient-to-br.from-white.to-surface-container-high {
  background-image: none !important;
  background-color: #1f2b38 !important;
  border-color: rgba(148, 163, 184, 0.18) !important;
}
html.dark .bg-gradient-to-br.from-white.to-surface-container-high h3 {
  color: #f8fafc !important;
}
html.dark .bg-gradient-to-br.from-white.to-surface-container-high p.text-on-surface-variant {
  color: #cbd5e1 !important;
}

/* ============================================================
 * MOBILE RESPONSIVENESS — Masulka System pages
 * ============================================================ */
@media (max-width: 1024px) {
  /* The page shell runs an entrance animation that applies a transform. A
   * transform makes the shell the containing block for every position:fixed
   * child, so the nav drawer and modals were trapped inside the (tall) shell
   * instead of the viewport. Killing the animation/transform on mobile frees
   * them to be truly viewport-fixed. */
  html body.system-screen-body .system-page-shell {
    animation: none !important;
    transform: none !important;
  }
  /* Hamburger stays pinned to the viewport (below the fixed top nav) and
   * sits above the nav/content so it is always tappable. */
  html body.system-screen-body .system-sidebar-toggle {
    position: fixed !important;
    top: 4.55rem !important;
    left: 1rem !important;
    z-index: 62 !important;
    display: inline-flex !important;
  }
  html[dir="rtl"] body.system-screen-body .system-sidebar-toggle {
    left: auto !important;
    right: 1rem !important;
  }
  /* Nav drawer is anchored to the viewport, fills it top-to-bottom, and scrolls
   * internally so every item (including Subscription + Logout) is reachable. */
  html body.system-screen-body .system-page-shell.is-sidebar-open .system-sidebar,
  html body.system-screen-body .system-sidebar {
    position: fixed !important;
    top: 0.6rem !important;
    bottom: 0.6rem !important;
    left: 0.6rem !important;
    inset-inline-end: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    z-index: 70 !important;
  }
  body.system-screen-body .system-sidebar-backdrop { position: fixed !important; z-index: 65 !important; }

  /* Modals open centered in the viewport, wherever the user is scrolled —
   * not in the middle of the (tall) document. Relies on the transform kill
   * above so fixed positioning reaches the viewport. */
  html body.system-screen-body .system-form-panel {
    position: fixed !important;
    inset: 0 !important;
    z-index: 80 !important;
  }
}
@media (max-width: 1024px) {
  /* Main list tables: keep columns intact and let the card scroll sideways
   * instead of crushing / cutting off the action buttons (image 4). */
  body.system-screen-body .system-table-shell .overflow-x-auto,
  body.system-screen-body .system-panel-scroll .overflow-x-auto {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Tables that are NOT converted into cards keep a wide min-width and scroll
   * horizontally. The report-modal tables are card-ified on mobile, so they
   * must be excluded — otherwise this rule (whose chained :not() selectors
   * give it very high specificity) forced them to 44rem/704px and the figures
   * were cut off inside the ~344px dialog. */
  body.system-screen-body .system-data-table:not(.system-data-table--membership-ledger):not(.system-subtable):not(.system-data-table--members):not(.system-data-table--transactions):not(.system-data-table--membership):not(.system-data-table--coach-report):not(.system-data-table--safe-report):not(.system-membership-report-table):not(.system-subhistory-table) {
    min-width: 44rem !important;
    table-layout: auto !important;
    width: max-content !important;
  }
  body.system-screen-body .system-member-actions-cell,
  body.system-screen-body .system-row-actions,
  body.system-screen-body .system-transaction-table__action-head { white-space: nowrap !important; }
  /* Page header actions wrap neatly on narrow screens. */
  body.system-screen-body .system-page-header .system-toolbar-actions { flex-wrap: wrap !important; gap: 0.5rem !important; }
}

/* ============================================================
 * MOBILE — stacked-card layout for the system list tables.
 * Each row becomes a card: avatar/name header, label:value rows
 * (labels come from data-label, set from the translated headers),
 * and the action buttons wrap in a footer row.
 * ============================================================ */
@media (max-width: 1024px) {
  body.system-screen-body .system-data-table--members,
  body.system-screen-body .system-data-table--transactions,
  body.system-screen-body .system-data-table--membership {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  body.system-screen-body .system-data-table--members > thead,
  body.system-screen-body .system-data-table--transactions > thead,
  body.system-screen-body .system-data-table--membership > thead { display: none !important; }
  body.system-screen-body .system-data-table--members > tbody,
  body.system-screen-body .system-data-table--transactions > tbody,
  body.system-screen-body .system-data-table--membership > tbody { display: block !important; }
  body.system-screen-body .system-data-table--members > tbody > tr,
  body.system-screen-body .system-data-table--transactions > tbody > tr,
  body.system-screen-body .system-data-table--membership > tbody > tr {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1rem !important;
    padding: 0.85rem 0.95rem !important;
    margin-bottom: 0.85rem !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }
  body.system-screen-body .system-data-table--members > tbody > tr > td,
  body.system-screen-body .system-data-table--transactions > tbody > tr > td,
  body.system-screen-body .system-data-table--membership > tbody > tr > td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: auto !important;
    max-width: none !important;
    padding: 0.4rem 0 !important;
    border: 0 !important;
    text-align: start;
    min-height: 0 !important;
    white-space: normal !important;
  }
  body.system-screen-body .system-data-table--members > tbody > tr > td[data-label]::before,
  body.system-screen-body .system-data-table--transactions > tbody > tr > td[data-label]::before,
  body.system-screen-body .system-data-table--membership > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    font-weight: 700;
    color: #64748b;
    font-size: 0.8rem;
    text-align: start;
    flex: 0 0 auto;
    white-space: nowrap;
  }
  /* Avatar / name cell = the card header. */
  body.system-screen-body .system-data-table--members > tbody > tr > td.system-row-avatar-cell,
  body.system-screen-body .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell,
  body.system-screen-body .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell--transaction {
    justify-content: flex-start !important;
    padding-bottom: 0.7rem !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  /* Action buttons cell = the card footer (buttons wrap). */
  body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell,
  body.system-screen-body .system-data-table--transactions > tbody > tr > td:last-child,
  body.system-screen-body .system-data-table--membership > tbody > tr > td:last-child {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding-top: 0.7rem !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid #f1f5f9 !important;
  }
  /* No horizontal scroll needed for the card lists. */
  body.system-screen-body #member-table-shell > .overflow-x-auto,
  body.system-screen-body .system-table-shell > .overflow-x-auto { overflow-x: hidden !important; }
}

/* Beat the older 860px rule that hid the middle columns: re-show every cell
 * (with the .system-table-shell qualifier for higher specificity). */
@media (max-width: 1024px) {
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td,
  body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td {
    display: flex !important;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    text-align: start;
    padding: 0.4rem 0 !important;
    border: 0 !important;
  }
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td.system-row-avatar-cell,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell--transaction {
    justify-content: flex-start !important;
    padding-bottom: 0.7rem !important;
    margin-bottom: 0.4rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td.system-member-actions-cell,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td:last-child,
  body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td:last-child {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding-top: 0.7rem !important;
    margin-top: 0.4rem !important;
    border-top: 1px solid #f1f5f9 !important;
  }
}

/* Value cells: block with floated label so long values don't wrap per-character. */
@media (max-width: 1024px) {
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td[data-label],
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td[data-label],
  body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td[data-label] {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    text-align: start;
    padding: 0.4rem 0 !important;
    white-space: normal !important;
    overflow: visible !important;
  }
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td[data-label]::before,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td[data-label]::before,
  body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #64748b;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
  }
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td[data-label] *,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td[data-label] *,
  body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td[data-label] * {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
}

/* ============================================================
 * MOBILE — stacked cards for the Membership page list table
 * (13-col --membership-ledger). Scoped to .system-table-shell
 * so the View-Member modal ledger keeps its normal table.
 * ============================================================ */
@media (max-width: 1024px) {
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger {
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    table-layout: auto !important;
  }
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > thead { display: none !important; }
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody { display: block !important; }
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr {
    display: block !important;
    width: 100% !important;
    background: #ffffff !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1rem !important;
    padding: 0.85rem 0.95rem !important;
    margin-bottom: 0.85rem !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
  }
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td[data-label] {
    display: block !important;
    width: auto !important;
    max-width: none !important;
    text-align: left;
    padding: 0.4rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    overflow: visible !important;
    min-height: 0 !important;
  }
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #64748b;
    font-size: 0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.15rem;
  }
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td[data-label] * {
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
  }
  /* Profile avatar = card header */
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td.system-row-avatar-cell {
    display: flex !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.75rem;
    padding: 0 0 0.7rem 0 !important;
    margin-bottom: 0.5rem !important;
    border-bottom: 1px solid #f1f5f9 !important;
  }
  /* Action icons (last cell) = card footer */
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td:last-child {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center;
    justify-content: flex-start !important;
    gap: 0.5rem !important;
    padding-top: 0.7rem !important;
    margin-top: 0.5rem !important;
    border-top: 1px solid #f1f5f9 !important;
  }
}

/* ============================================================
 * MOBILE — dark-mode variant for the stacked list cards.
 * ============================================================ */
@media (max-width: 1024px) {
  html.dark body.system-screen-body .system-data-table--members > tbody > tr,
  html.dark body.system-screen-body .system-data-table--transactions > tbody > tr,
  html.dark body.system-screen-body .system-data-table--membership > tbody > tr,
  html.dark body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr {
    background: #1f2b38 !important;
    border: 1px solid rgba(148, 163, 184, 0.18) !important;
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.35) !important;
  }
  html.dark body.system-screen-body .system-data-table--members > tbody > tr > td,
  html.dark body.system-screen-body .system-data-table--transactions > tbody > tr > td,
  html.dark body.system-screen-body .system-data-table--membership > tbody > tr > td,
  html.dark body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td {
    color: #e2e8f0 !important;
  }
  html.dark body.system-screen-body .system-data-table--members > tbody > tr > td[data-label]::before,
  html.dark body.system-screen-body .system-data-table--transactions > tbody > tr > td[data-label]::before,
  html.dark body.system-screen-body .system-data-table--membership > tbody > tr > td[data-label]::before,
  html.dark body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td[data-label]::before {
    color: #94a3b8 !important;
  }
  html.dark body.system-screen-body .system-data-table--members > tbody > tr > td.system-row-avatar-cell,
  html.dark body.system-screen-body .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell,
  html.dark body.system-screen-body .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell--transaction,
  html.dark body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td.system-row-avatar-cell {
    border-bottom-color: rgba(148, 163, 184, 0.16) !important;
  }
  html.dark body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell,
  html.dark body.system-screen-body .system-data-table--transactions > tbody > tr > td:last-child,
  html.dark body.system-screen-body .system-data-table--membership > tbody > tr > td:last-child,
  html.dark body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td:last-child {
    border-top-color: rgba(148, 163, 184, 0.16) !important;
  }
}

/* ============================================================
 * MOBILE — RTL drawer sits on the right edge.
 * ============================================================ */
@media (max-width: 1024px) {
  html[dir="rtl"] body.system-screen-body .system-page-shell.is-sidebar-open .system-sidebar,
  html[dir="rtl"] body.system-screen-body .system-sidebar {
    /* Logical resets MUST come before the physical value: in RTL
     * `inset-inline-start` maps to `right`, so declaring it after
     * `right: 0.6rem` silently reset the drawer back to `auto` and it
     * ended up flush against the viewport edge. */
    inset-inline-start: auto !important;
    inset-inline-end: auto !important;
    left: auto !important;
    right: 0.6rem !important;
  }
}

/* ============================================================
 * MOBILE — compact toolbar on transaction-style pages (Course,
 * Expense, Income, Sale, Coach, Safe...). Keep the add button,
 * search field and search button on ONE row like the Members
 * page instead of three full-width stacked bars.
 * ============================================================ */
@media (max-width: 1024px) {
  body.system-screen-body .system-page-header--transactions .system-page-header-tools {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.55rem !important;
  }
  body.system-screen-body .system-page-header--transactions .system-toolbar-actions {
    flex: 0 0 auto !important;
    width: auto !important;
    margin: 0 !important;
  }
  body.system-screen-body .system-page-header--transactions .system-toolbar-actions > * {
    flex: 0 0 auto !important;
    flex-basis: auto !important;
    width: auto !important;
  }
  body.system-screen-body .system-page-header--transactions .system-toolbar-search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  body.system-screen-body .system-page-header--transactions .system-quick-button.system-icon-button {
    width: 3rem !important;
    height: 3rem !important;
    flex: 0 0 auto !important;
  }
}

/* ============================================================
 * MOBILE — compact card info as a two-column grid so each card
 * is shorter (label:value pairs sit two-per-row). Avatar header
 * and the action-button footer span the full width.
 * ============================================================ */
@media (max-width: 1024px) {
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr,
  body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr,
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0.9rem !important;
    row-gap: 0.2rem !important;
    align-items: start !important;
  }
  /* Avatar / name header spans both columns. */
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td.system-row-avatar-cell,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td.system-row-avatar-cell--transaction,
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td.system-row-avatar-cell {
    grid-column: 1 / -1 !important;
  }
  /* Action footer spans both columns. */
  body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td.system-member-actions-cell,
  body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td:last-child,
  body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td:last-child,
  body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td:last-child {
    grid-column: 1 / -1 !important;
  }
  /* Long free-text fields (Note) span both columns for readability. */
  body.system-screen-body .system-table-shell > * .system-data-table > tbody > tr > td[data-label="Note"] {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
 * MOBILE — modal footer buttons are compact (smaller text/pad)
 * and lay out in a row instead of tall full-width stacked bars.
 * ============================================================ */
@media (max-width: 1024px) {
  body.system-screen-body .system-form-panel .system-transaction-modal-actions,
  body.system-screen-body .system-form-panel .system-transaction-modal-actions--view,
  body.system-screen-body .system-form-panel .system-member-modal-actions,
  body.system-screen-body .system-form-panel .system-member-editor-actions,
  body.system-screen-body .system-form-panel .system-form-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }
  body.system-screen-body .system-form-panel .system-transaction-modal-actions > button,
  body.system-screen-body .system-form-panel .system-transaction-modal-actions--view > button,
  body.system-screen-body .system-form-panel .system-member-modal-actions > button,
  body.system-screen-body .system-form-panel .system-member-editor-actions > button,
  body.system-screen-body .system-form-panel .system-form-actions > button {
    flex: 1 1 45% !important;
    min-width: 0 !important;
    padding: 0.6rem 0.7rem !important;
    font-size: 0.82rem !important;
    min-height: 0 !important;
    gap: 0.35rem !important;
  }
  /* Any full-width / close button drops to its own row. */
  body.system-screen-body .system-form-panel .system-member-modal-actions > button.system-member-modal-button--ghost,
  body.system-screen-body .system-form-panel .system-form-actions > button[data-editor-close],
  body.system-screen-body .system-form-panel .system-form-actions > button.system-member-modal-button--ghost {
    flex: 1 1 100% !important;
  }
  body.system-screen-body .system-form-panel .system-transaction-modal-actions > button .material-symbols-outlined,
  body.system-screen-body .system-form-panel .system-member-modal-actions > button .material-symbols-outlined,
  body.system-screen-body .system-form-panel .system-member-editor-actions > button .material-symbols-outlined {
    font-size: 1.05rem !important;
  }
}

/* ============================================================
 * MOBILE — clear the fixed top nav so the system container's
 * rounded top corners are fully visible (not tight/cut against
 * the nav's flat bottom edge).
 * ============================================================ */
@media (max-width: 1024px) {
  body.system-screen-body .system-screen-main {
    padding-top: 4.9rem !important;
  }
  body.system-screen-body .system-screen-layout {
    outline: none !important;
  }
  body.system-screen-body .system-page-shell {
    outline: none !important;
  }
}

/* ============================================================
 * MOBILE — app-shell layout: the page itself does NOT scroll;
 * the card list scrolls inside each table and the totals footer
 * stays pinned to the bottom of the screen. Also: 25px layout
 * radius, kill horizontal overflow, keep the drawer toggle.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body {
    overflow: hidden !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    min-height: 100dvh !important;
  }
  /* Full-bleed on mobile: no outer frame, use the whole screen width. */
  html body.system-screen-body .system-screen-main {
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 3.75rem 0 0 !important;
  }
  html body.system-screen-body .system-screen-layout {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    border-radius: 0 !important;
    border: none !important;
    outline: none !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body.system-screen-body .system-page-shell {
    flex: 1 1 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    max-width: 100% !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  html body.system-screen-body .system-panel-scroll {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
    padding: 0.55rem !important;
  }
  /* List pages: the table scrolls internally; panel stays fixed. */
  html body.system-screen-body .system-panel-scroll:has(.system-table-shell) {
    overflow: hidden !important;
  }
  /* Non-list pages (e.g. Dashboard): the panel itself scrolls vertically. */
  html body.system-screen-body .system-panel-scroll:not(:has(.system-table-shell)) {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Everything above the list keeps its natural height; the list
   * shell fills the remaining space. */
  html body.system-screen-body .system-panel-scroll > *:not(.system-table-shell) {
    flex: 0 0 auto !important;
  }
  html body.system-screen-body .system-panel-scroll > .system-table-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
  }
  /* List shell = column: the scroll area grows, footer is pinned. */
  html body.system-screen-body .system-table-shell--members,
  html body.system-screen-body .system-table-shell--transactions,
  html body.system-screen-body .system-membership-ledger-shell {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  /* The scroll area (holds the cards) is the ONLY thing that scrolls. */
  html body.system-screen-body .system-table-shell--members > .overflow-x-auto,
  html body.system-screen-body .system-table-shell--transactions > .overflow-x-auto,
  html body.system-screen-body .system-membership-ledger-shell > .overflow-x-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    display: block !important;
  }
  html body.system-screen-body .system-data-table--members > tbody,
  html body.system-screen-body .system-data-table--transactions > tbody,
  html body.system-screen-body .system-data-table--membership-ledger > tbody {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    display: block !important;
  }
  /* Totals footer pinned at the bottom of the shell (= screen bottom). */
  html body.system-screen-body .system-table-shell__footer {
    flex: 0 0 auto !important;
    position: static !important;
  }
  /* Contain widths so cards never run off the right edge. */
  html body.system-screen-body .system-table-shell .system-data-table {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    display: block !important;
  }
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  /* Drawer toggle sits INSIDE the top of the first (title) card, with a
   * little breathing room below the fixed top nav. */
  html body.system-screen-body .system-sidebar-toggle {
    position: fixed !important;
    top: 5rem !important;
    left: 1.15rem !important;
    z-index: 62 !important;
    display: inline-flex !important;
    width: 2.7rem !important;
    height: 2.7rem !important;
  }
  html[dir="rtl"] body.system-screen-body .system-sidebar-toggle {
    left: auto !important;
    right: 1.15rem !important;
  }
  /* First (title) card: the title sits next to the menu button (top-left),
   * so its first line is padded on the left to clear the button. */
  html body.system-screen-body .system-panel-scroll > section:first-child {
    padding-top: 0.85rem !important;
    position: relative !important;
  }
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy,
  html body.system-screen-body .system-panel-scroll > section:first-child .system-membership-ledger-header__row > .system-page-header-copy {
    text-align: center !important;
    padding-left: 0 !important;
    min-height: 2.7rem !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
  }

  /* Utility modals (Account Info / Subscription Plans / History)
   * scroll internally instead of clipping their content. */
  html body.system-screen-body .system-form-panel .system-account-dialog,
  html body.system-screen-body .system-form-panel .system-subhistory-dialog,
  html body.system-screen-body .system-form-panel .system-sub-plans-dialog {
    max-height: 88vh !important;
    max-height: 88dvh !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
 * MOBILE — Subscription History table → cards.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-subhistory-scroll { overflow: visible !important; }
  html body.system-screen-body .system-subhistory-table,
  html body.system-screen-body .system-subhistory-table > tbody,
  html body.system-screen-body .system-subhistory-table > tbody > tr { display: block !important; width: 100% !important; }
  html body.system-screen-body .system-subhistory-table > thead { display: none !important; }
  html body.system-screen-body .system-subhistory-table > tbody > tr {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1rem !important;
    padding: 0.85rem 0.95rem !important;
    margin-bottom: 0.8rem !important;
    box-shadow: 0 6px 16px rgba(15, 23, 42, 0.05) !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0.9rem !important;
    row-gap: 0.2rem !important;
  }
  html body.system-screen-body .system-subhistory-table > tbody > tr > td[data-label] {
    display: block !important;
    text-align: left !important;
    padding: 0.35rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
  }
  html body.system-screen-body .system-subhistory-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #64748b;
    font-size: 0.68rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
  }
  html body.system-screen-body .system-subhistory-table > tbody > tr > td[data-label] .system-row-meta { display: inline !important; }
}

/* ============================================================
 * MOBILE — allow the marketing slide-in menu on system pages
 * too (coexists with the system drawer). Also make grid value
 * cells shrink/wrap so nothing runs past the card border.
 * ============================================================ */
@media (max-width: 1024px) {
  body.system-screen-body .site-mobile-menu {
    display: block !important;
    visibility: visible !important;
  }
  body.system-screen-body .site-mobile-menu-button {
    display: inline-flex !important;
  }
  body.system-screen-body .site-mobile-menu-backdrop {
    display: block !important;
  }
  body.system-screen-body .site-mobile-menu .site-mobile-menu-panel {
    display: flex !important;
  }
  /* Reveal the sliding panel when the menu is open (the system-page
   * suppression rule otherwise keeps it visibility:hidden). */
  body.system-screen-body .site-mobile-menu.is-open .site-mobile-menu-panel {
    visibility: visible !important;
    transform: translateX(0) !important;
  }
  body.system-screen-body .site-mobile-menu.is-open .site-mobile-menu-backdrop {
    visibility: visible !important;
  }
  /* Grid value cells never overflow the card. */
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td[data-label] {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
    word-break: break-word !important;
  }
}

/* ============================================================
 * Scroll-to-top button (mobile system pages). Shown only after
 * the page is scrolled down (.is-visible toggled in JS).
 * ============================================================ */
.system-scroll-top {
  position: fixed;
  right: 1rem;
  bottom: 1.1rem;
  z-index: 61;
  display: none;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  border: none;
  background: linear-gradient(135deg, #ff7a2f 0%, #f0560a 100%);
  color: #ffffff;
  box-shadow: 0 14px 30px rgba(240, 86, 10, 0.34);
  cursor: pointer;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.22s ease, transform 0.22s ease;
}
.system-scroll-top .material-symbols-outlined { font-size: 1.6rem; }
.system-scroll-top.is-visible { opacity: 1; transform: translateY(0); }
html[dir="rtl"] .system-scroll-top { right: auto; left: 1rem; }
@media (max-width: 1024px) {
  body.system-screen-body .system-scroll-top.is-visible { display: inline-flex !important; }
}

/* ============================================================
 * MOBILE — kill the desktop min-width on carded list tables so
 * cards never overflow the card/border (ID-scoped to beat the
 * per-shell ID rules that set a wide min-width for desktop).
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body #member-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #payment-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #debt-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #credit-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #course-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #expense-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #income-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #sale-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #coach-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #safe-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #safe-import-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #safe-export-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #safe-transfer-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #safe-archive-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #attendance-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #event-log-table-shell .system-data-table.min-w-full,
  html body.system-screen-body #membership-ledger-shell .system-data-table.min-w-full {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* Scroll-to-top button hidden for now (kept in DOM for easy re-enable). */
html body.system-screen-body .system-scroll-top,
html body.system-screen-body .system-scroll-top.is-visible {
  display: none !important;
}

/* ============================================================
 * MOBILE — dashboard report / donut card tables (DIV-based
 * grids). Hide the column-name head row and render each data
 * row as a card of "label: value" pairs (labels set in JS as
 * data-report-label). Works on the coloured report cards too.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-report-table__head,
  html body.system-screen-body .system-report-simple-table__head,
  html body.system-screen-body .system-report-members__head {
    display: none !important;
  }
  html body.system-screen-body .system-report-table__body,
  html body.system-screen-body .system-report-members__body,
  html body.system-screen-body .system-report-simple-table {
    margin-top: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  html body.system-screen-body .system-report-table__body > div,
  html body.system-screen-body .system-report-members__body > div,
  html body.system-screen-body .system-report-simple-table__row {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0.7rem 0.9rem !important;
    margin: 0 !important;
  }
  /* Value cell: label on the left (::before), value on the right. */
  html body.system-screen-body .system-report-table__body > div > [data-report-label],
  html body.system-screen-body .system-report-members__body > div > [data-report-label],
  html body.system-screen-body .system-report-simple-table__row > [data-report-label] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 0.22rem 0 !important;
    text-align: right !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  html body.system-screen-body .system-report-table__body > div > [data-report-label]::before,
  html body.system-screen-body .system-report-members__body > div > [data-report-label]::before,
  html body.system-screen-body .system-report-simple-table__row > [data-report-label]::before {
    content: attr(data-report-label);
    flex: 0 0 auto;
    font-weight: 700;
    opacity: 0.66;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  /* Avatar / action cells (no label) sit on their own line. */
  html body.system-screen-body .system-report-table__body > div > *:not([data-report-label]),
  html body.system-screen-body .system-report-members__body > div > *:not([data-report-label]),
  html body.system-screen-body .system-report-simple-table__row > *:not([data-report-label]) {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 0.4rem !important;
  }
  /* The members-card avatar (first child) sits as a centered header badge. */
  html body.system-screen-body .system-report-members__body > div > :first-child:not([data-report-label]) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 3rem !important;
    height: 3rem !important;
    margin: 0 auto 0.55rem !important;
    border-radius: 999px !important;
    overflow: hidden !important;
    flex: 0 0 auto !important;
  }
  html body.system-screen-body .system-report-members__body > div > :first-child:not([data-report-label]) img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
  }
  /* Breathing room under the last card / at the bottom of the scroll area. */
  html body.system-screen-body .system-panel-scroll {
    padding-bottom: 1.5rem !important;
  }
  html body.system-screen-body .system-report-card,
  html body.system-screen-body .system-safe-module,
  html body.system-screen-body .system-expense-module {
    margin-bottom: 0.2rem !important;
  }
}

/* ============================================================
 * MOBILE — Safe & Expense dashboard "module" tables (their own
 * grid classes). Same card treatment: hide head, label rows.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-safe-module__table-head,
  html body.system-screen-body .system-expense-module__table-head {
    display: none !important;
  }
  html body.system-screen-body .system-safe-module__table,
  html body.system-screen-body .system-expense-module__table-body {
    display: flex !important;
    flex-direction: column !important;
    gap: 0.6rem !important;
  }
  html body.system-screen-body .system-safe-module__row,
  html body.system-screen-body .system-expense-module__table-row {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0.7rem 0.9rem !important;
    margin: 0 !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1rem !important;
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.04) !important;
    box-sizing: border-box !important;
  }
  html body.system-screen-body .system-safe-module__row > [data-report-label],
  html body.system-screen-body .system-expense-module__table-row > [data-report-label] {
    display: flex !important;
    align-items: baseline !important;
    justify-content: space-between !important;
    gap: 1rem !important;
    padding: 0.22rem 0 !important;
    text-align: right !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  html body.system-screen-body .system-safe-module__row > [data-report-label]::before,
  html body.system-screen-body .system-expense-module__table-row > [data-report-label]::before {
    content: attr(data-report-label);
    flex: 0 0 auto;
    font-weight: 700;
    opacity: 0.66;
    text-align: left;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
  }
  html body.system-screen-body .system-safe-module__row > *:not([data-report-label]),
  html body.system-screen-body .system-expense-module__table-row > *:not([data-report-label]) {
    display: flex !important;
    justify-content: flex-start !important;
    margin-top: 0.45rem !important;
  }
}

/* ============================================================
 * MOBILE — extra polish round:
 *  - View Member membership tables → cards
 *  - Device Users / report rows: more space between cards
 *  - member row "+" menu escapes the clipped scroll area
 *  - Add Membership modal fits the viewport width
 *  - smaller modal footer + delete buttons
 *  - members footer: compact, report button on its own line
 * ============================================================ */
@media (max-width: 1024px) {
  /* View Member modal tables → labeled cards. */
  html body.system-screen-body .system-member-view-table,
  html body.system-screen-body .system-member-view-table > tbody,
  html body.system-screen-body .system-member-view-table > tbody > tr {
    display: block !important;
    width: 100% !important;
  }
  html body.system-screen-body .system-member-view-table > thead { display: none !important; }
  html body.system-screen-body .system-member-view-table > tbody > tr {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1rem !important;
    padding: 0.7rem 0.9rem !important;
    margin-bottom: 0.7rem !important;
    box-sizing: border-box !important;
    background: #ffffff !important;
  }
  html body.system-screen-body .system-member-view-table > tbody > tr > td {
    display: block !important;
    text-align: left !important;
    padding: 0.28rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  html body.system-screen-body .system-member-view-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #64748b;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
  }

  /* More breathing room between report / device cards. */
  html body.system-screen-body .system-report-simple-table,
  html body.system-screen-body .system-report-table__body,
  html body.system-screen-body .system-report-members__body,
  html body.system-screen-body .system-safe-module__table,
  html body.system-screen-body .system-expense-module__table-body {
    gap: 0.85rem !important;
  }

  /* The row "+" menu (Add Credit / Repayment / Debt) is clipped by the
   * scroll container's overflow — float it as a centered popup instead. */
  html body.system-screen-body .system-member-plus-menu:not([hidden]) {
    position: fixed !important;
    left: 50% !important;
    top: 50% !important;
    right: auto !important;
    bottom: auto !important;
    transform: translate(-50%, -50%) !important;
    z-index: 95 !important;
    min-width: 13rem !important;
    max-width: calc(100vw - 2.5rem) !important;
    box-shadow: 0 24px 60px rgba(15, 23, 42, 0.34) !important;
  }

  /* Add Membership (and other editor) modals: fields fit the screen. */
  html body.system-screen-body .system-form-panel .system-form-dialog {
    width: calc(100vw - 0.9rem) !important;
    max-width: calc(100vw - 0.9rem) !important;
  }
  html body.system-screen-body .system-form-panel .system-form-field,
  html body.system-screen-body .system-form-panel .system-form-field input,
  html body.system-screen-body .system-form-panel .system-form-field select,
  html body.system-screen-body .system-form-panel .system-form-field textarea,
  html body.system-screen-body .system-form-panel .system-member-form-grid {
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }
  html body.system-screen-body .system-form-panel .system-member-form-grid,
  html body.system-screen-body .system-form-panel .system-form-body {
    grid-template-columns: 1fr !important;
  }

  /* Smaller modal footer buttons (Save & Print / Save / Close) + delete. */
  html body.system-screen-body .system-form-panel .system-member-modal-actions > button,
  html body.system-screen-body .system-form-panel .system-form-actions > button,
  html body.system-screen-body .system-form-panel .system-transaction-modal-actions > button,
  html body.system-screen-body .system-form-panel .system-transaction-modal-actions--view > button {
    padding: 0.5rem 0.6rem !important;
    font-size: 0.8rem !important;
    min-height: 0 !important;
    border-radius: 0.8rem !important;
  }
  html body.system-screen-body .system-form-panel .system-member-modal-actions > button .material-symbols-outlined,
  html body.system-screen-body .system-form-panel .system-transaction-modal-actions > button .material-symbols-outlined {
    font-size: 1rem !important;
  }

  /* Members footer: compact; the report button on its own line at the top. */
  html body.system-screen-body .system-table-shell__footer {
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 0.4rem 0.9rem !important;
    padding: 0.7rem 0.9rem !important;
  }
  html body.system-screen-body .system-table-shell__footer > .system-member-footer-report,
  html body.system-screen-body .system-table-shell__footer > button {
    order: -1 !important;
    margin-inline-start: auto !important;
  }
}

/* ============================================================
 * MOBILE — modal form overflow + report action centering.
 * ============================================================ */
@media (max-width: 1024px) {
  /* Editor forms use a fixed 400px grid column that overflows narrow
   * screens — collapse to a single fluid column so fields fit. */
  html body.system-screen-body .system-form-panel form,
  html body.system-screen-body .system-form-panel .system-form-body,
  html body.system-screen-body .system-form-panel .system-membership-detail-form,
  html body.system-screen-body .system-form-panel .system-member-form-grid {
    grid-template-columns: minmax(0, 1fr) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  html body.system-screen-body .system-form-panel .system-form-field,
  html body.system-screen-body .system-form-panel .system-form-field > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  /* Center the Transfer / view action inside report + module cards. */
  html body.system-screen-body .system-safe-module__row > *:not([data-report-label]),
  html body.system-screen-body .system-expense-module__table-row > *:not([data-report-label]),
  html body.system-screen-body .system-report-simple-table__row > *:not([data-report-label]),
  html body.system-screen-body .system-report-table__body > div > *:not([data-report-label]) {
    justify-content: center !important;
  }
  html body.system-screen-body .system-safe-module__row .system-safe-module__action {
    margin-inline: auto !important;
    text-align: center !important;
  }
  /* Report view (eye) icon → looks like a proper round button. */
  html body.system-screen-body .system-expense-module__table-row > *:not([data-report-label]) button,
  html body.system-screen-body .system-expense-module__table-row > button:not([data-report-label]),
  html body.system-screen-body .system-report-simple-table__row > button:not([data-report-label]),
  html body.system-screen-body .system-report-table__body > div > button:not([data-report-label]) {
    border: 1px solid rgba(148, 163, 184, 0.45) !important;
    border-radius: 999px !important;
    width: 2.5rem !important;
    height: 2.5rem !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    background: rgba(255, 255, 255, 0.9) !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.08) !important;
  }
}

/* ============================================================
 * Filter-switch fade animation — plays whenever a period filter
 * re-renders the report content (rows, ring, totals). Global so
 * it applies on every page's filters.
 * ============================================================ */
@keyframes masulkaFilterFade {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.system-report-table__body > div,
.system-report-simple-table__row,
.system-report-members__body > div,
.system-safe-module__row,
.system-expense-module__table-row,
.system-report-ring,
.system-safe-module__ring,
.system-expense-module__ring,
[data-safe-total],
[data-report-total] {
  animation: masulkaFilterFade 0.34s ease both;
}
@media (prefers-reduced-motion: reduce) {
  .system-report-table__body > div,
  .system-report-simple-table__row,
  .system-report-members__body > div,
  .system-safe-module__row,
  .system-expense-module__table-row { animation: none !important; }
}

/* Complete the Safe donut ring (was stopping at 359deg, leaving a notch). */
html body.system-screen-body .system-safe-module__ring {
  background-image: conic-gradient(#ff7a2f 0deg, #ff7a2f 360deg) !important;
}

/* ============================================================
 * MOBILE — hide scrollbars so the content uses the full screen
 * width and reads as centered (the reserved scrollbar gutter was
 * leaving ~11px empty on the right). Touch users scroll by drag.
 * ============================================================ */
@media (max-width: 1024px) {
  html:has(body.system-screen-body),
  body.system-screen-body,
  body.system-screen-body .system-panel-scroll,
  body.system-screen-body .system-table-shell .overflow-x-auto {
    scrollbar-width: none !important;
  }
  html:has(body.system-screen-body)::-webkit-scrollbar,
  body.system-screen-body::-webkit-scrollbar,
  body.system-screen-body .system-panel-scroll::-webkit-scrollbar,
  body.system-screen-body .system-table-shell .overflow-x-auto::-webkit-scrollbar {
    width: 0 !important;
    height: 0 !important;
    display: none !important;
  }
}

/* ============================================================
 * MOBILE — date-range nav stays on one row (prev | from | to |
 * next) instead of the next arrow wrapping to its own line.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-report-daterange {
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 0.35rem !important;
  }
  html body.system-screen-body .system-report-daterange__field {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    font-size: 0.72rem !important;
    padding-inline: 0.5rem !important;
    white-space: nowrap !important;
    overflow: hidden !important;
  }
  html body.system-screen-body .system-report-daterange__nav {
    flex: 0 0 auto !important;
  }

  /* Expense total footer → a labeled card, empty cells hidden. */
  html body.system-screen-body .system-expense-module__table-footer {
    display: block !important;
    grid-template-columns: none !important;
    padding: 0.75rem 0.95rem !important;
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1rem !important;
    background: #f8fafc !important;
    box-sizing: border-box !important;
    margin-top: 0.3rem !important;
  }
  html body.system-screen-body .system-expense-module__table-footer > [data-report-label] {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: 1rem !important;
    padding: 0.22rem 0 !important;
    text-align: right !important;
    font-weight: 800 !important;
  }
  html body.system-screen-body .system-expense-module__table-footer > [data-report-label]::before {
    content: attr(data-report-label);
    font-weight: 700;
    opacity: 0.66;
    text-transform: uppercase;
    font-size: 0.68rem;
    letter-spacing: 0.03em;
    white-space: nowrap;
    flex: 0 0 auto;
    text-align: left;
  }
  html body.system-screen-body .system-expense-module__table-footer > span:not([data-report-label]) {
    display: none !important;
  }
}

/* ============================================================
 * MOBILE — Member ledger modal table → labeled cards.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-member-ledger-table,
  html body.system-screen-body .system-member-ledger-table > tbody,
  html body.system-screen-body .system-member-ledger-table > tbody > tr {
    display: block !important;
    width: 100% !important;
  }
  html body.system-screen-body .system-member-ledger-table > thead { display: none !important; }
  html body.system-screen-body .system-member-ledger-table > tbody > tr {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 1rem !important;
    padding: 0.7rem 0.9rem !important;
    margin-bottom: 0.7rem !important;
    box-sizing: border-box !important;
  }
  html body.system-screen-body .system-member-ledger-table > tbody > tr > td {
    display: block !important;
    text-align: left !important;
    padding: 0.28rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  html body.system-screen-body .system-member-ledger-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #64748b;
    font-size: 0.66rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
  }
}

/* ============================================================
 * MOBILE — Member view/ledger modals: fit the screen + scroll,
 * and use compact 2-column cards so they aren't so tall.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-member-dialog,
  html body.system-screen-body .system-form-panel .system-member-dialog--view,
  html body.system-screen-body .system-form-panel .system-member-dialog--ledger {
    max-height: 90vh !important;
    max-height: 90dvh !important;
  }
  html body.system-screen-body .system-view-scroll,
  html body.system-screen-body .system-member-ledger-scroll,
  html body.system-screen-body .system-member-dialog [class*="scroll"] {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
  }
  /* Compact two-column cards (halves the height). */
  html body.system-screen-body .system-member-view-table > tbody > tr,
  html body.system-screen-body .system-member-ledger-table > tbody > tr {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0.9rem !important;
    row-gap: 0.1rem !important;
    align-items: start !important;
  }
  /* Long / primary fields span both columns. */
  html body.system-screen-body .system-member-view-table > tbody > tr > td[data-label="Member"],
  html body.system-screen-body .system-member-view-table > tbody > tr > td[data-label="Note"],
  html body.system-screen-body .system-member-ledger-table > tbody > tr > td[data-label="Transaction Type"] {
    grid-column: 1 / -1 !important;
  }
  /* Action cell (eye / print, no label) spans full width, centered. */
  html body.system-screen-body .system-member-view-table > tbody > tr > td:not([data-label]),
  html body.system-screen-body .system-member-ledger-table > tbody > tr > td:not([data-label]) {
    grid-column: 1 / -1 !important;
    display: flex !important;
    justify-content: center !important;
    margin-top: 0.3rem !important;
  }
}

/* ============================================================
 * MOBILE — member modals: flex column that fits the screen, an
 * inner scroll body, and the footer pinned BELOW the scroll so
 * the scrollbar ends above the footer border. Covers finance
 * (Add Credit/Debt/Repayment), view, ledger, transaction view.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-member-dialog {
    max-height: 92vh !important;
    max-height: 92dvh !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  html body.system-screen-body .system-member-dialog > .system-member-dialog__banner,
  html body.system-screen-body .system-member-dialog > .system-member-view-footer {
    flex: 0 0 auto !important;
  }
  html body.system-screen-body .system-member-dialog > .system-view-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  /* Finance form: the fields grid scrolls, the actions row is pinned
   * outside the scroll (so the scrollbar stops above the footer). */
  html body.system-screen-body .system-member-finance-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
  }
  /* ONLY the finance modal's own grid scrolls. Scoping this to
   * `.system-member-finance-form >` matters: the Add/Edit Membership form
   * reuses `.system-member-finance-grid` for its fields, and applying
   * flex/min-height:0/overflow to it there collapsed the whole field block to
   * zero height (so the access-type section appeared right under "Member"). */
  html body.system-screen-body .system-member-finance-form > .system-member-finance-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.system-screen-body .system-member-finance-actions {
    flex: 0 0 auto !important;
    position: static !important;
  }

  /* Access Type sub-table (Add Membership) → labeled cards. */
  html body.system-screen-body .system-membership-subtable,
  html body.system-screen-body .system-membership-subtable > tbody,
  html body.system-screen-body .system-membership-subtable > tbody > tr {
    display: block !important;
    width: 100% !important;
  }
  html body.system-screen-body .system-membership-subtable > thead { display: none !important; }
  html body.system-screen-body .system-membership-subtable > tbody > tr {
    border: 1px solid rgba(226, 232, 240, 0.9) !important;
    border-radius: 0.9rem !important;
    padding: 0.6rem 0.8rem !important;
    margin-bottom: 0.6rem !important;
    box-sizing: border-box !important;
  }
  html body.system-screen-body .system-membership-subtable > tbody > tr > td {
    display: block !important;
    /* Logical, not physical: `left` put every value on the wrong edge in RTL. */
    text-align: start !important;
    padding: 0.28rem 0 !important;
    border: 0 !important;
    white-space: normal !important;
    min-width: 0 !important;
  }
  html body.system-screen-body .system-membership-subtable > tbody > tr > td > * {
    max-width: 100% !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }
  html body.system-screen-body .system-membership-subtable > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 700;
    color: #64748b;
    font-size: 0.64rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    margin-bottom: 0.1rem;
  }

  /* Device Users (and report) cards: clear space between them. */
  html body.system-screen-body .system-report-simple-table__row,
  html body.system-screen-body .system-report-table__body > div,
  html body.system-screen-body .system-report-members__body > div {
    margin-bottom: 0.7rem !important;
  }
  html body.system-screen-body .system-report-simple-table__row:last-child,
  html body.system-screen-body .system-report-table__body > div:last-child,
  html body.system-screen-body .system-report-members__body > div:last-child {
    margin-bottom: 0 !important;
  }
}

/* ============================================================
 * MOBILE — center the action buttons in list card footers.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td.system-member-actions-cell,
  html body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td:last-child,
  html body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td:last-child,
  html body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td:last-child {
    justify-content: center !important;
  }
}

/* ============================================================
 * MOBILE — the WHOLE member editor form scrolls (not just the
 * access-type sub-table); footer stays pinned below it.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-member-dialog > form.system-form-body,
  html body.system-screen-body .system-member-dialog > .system-form-body,
  html body.system-screen-body .system-member-dialog > .system-membership-detail-form {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.system-screen-body .system-member-dialog > .system-form-actions,
  html body.system-screen-body .system-member-dialog > .system-member-finance-actions,
  html body.system-screen-body .system-member-dialog > .system-member-modal-actions {
    flex: 0 0 auto !important;
    position: static !important;
  }
  /* The sub-table itself should NOT create its own scroll area. */
  html body.system-screen-body .system-membership-subtable {
    overflow: visible !important;
    max-height: none !important;
  }
}

/* ============================================================
 * MOBILE — ANY modal dialog that has a scroll body (view modals
 * for expense/income/sale/transaction, etc.): make it a flex
 * column that fits the screen, with the body scrolling and the
 * header + footer pinned.
 * ============================================================ */
@media (max-width: 1024px) {
  /* Target the view-modal dialog by its class (no :has(), which some
   * browsers/webviews don't support) so the flex-column + max-height is
   * always applied and the body actually scrolls. */
  html body.system-screen-body .system-form-panel .system-form-dialog--transaction-view,
  html body.system-screen-body .system-form-panel .system-invoice-dialog {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    max-height: 92vh !important;
  }
  html body.system-screen-body .system-form-panel .system-form-dialog > .system-view-scroll {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.system-screen-body .system-form-panel .system-form-dialog > .system-form-head,
  html body.system-screen-body .system-form-panel .system-form-dialog > .system-toolbar,
  html body.system-screen-body .system-form-panel .system-form-dialog > .system-member-dialog__banner,
  html body.system-screen-body .system-form-panel .system-form-dialog > .system-member-view-footer,
  html body.system-screen-body .system-form-panel .system-form-dialog > .system-transaction-modal-actions,
  html body.system-screen-body .system-form-panel .system-form-dialog > .system-transaction-modal-actions--view {
    flex: 0 0 auto !important;
    /* Neutralise the sticky positioning: inside a flex column with an
     * overflow-hidden dialog, `position: sticky` has no scroll context and
     * lets the last field slide UNDER the footer. As a static flex item the
     * footer simply sits below the scroll body, always visible. */
    position: static !important;
  }
}

/* ============================================================
 * MOBILE — the row-action button group (Add Membership + icons)
 * lives in a `.system-row-actions` flex wrapper that is nowrap,
 * so it overflows the card on both edges. Let it wrap and centre
 * inside the card footer.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-table-shell .system-row-actions,
  html body.system-screen-body .system-table-shell .system-row-actions--member,
  html body.system-screen-body .system-member-actions-cell .system-row-actions {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.5rem !important;
  }
  html body.system-screen-body .system-table-shell .system-row-actions > *,
  html body.system-screen-body .system-member-actions-cell .system-row-actions > * {
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
}

/* ============================================================
 * Add/Edit Payment modal — member payment-history table.
 * ============================================================ */
body.system-screen-body .system-payment-history {
  margin-top: 0.35rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 0.9rem;
}
body.system-screen-body .system-payment-history-table {
  width: 100%;
  border-collapse: collapse;
}
body.system-screen-body .system-payment-history-table thead th {
  text-align: left;
  font-size: 0.82rem;
  font-weight: 700;
  color: #475569;
  padding: 0.55rem 0.75rem;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
body.system-screen-body .system-payment-history-table thead th:first-child { border-top-left-radius: 12px; }
body.system-screen-body .system-payment-history-table thead th:last-child { border-top-right-radius: 12px; }
body.system-screen-body .system-payment-history-table tbody td {
  padding: 0.55rem 0.75rem;
  font-size: 0.9rem;
  color: #0f172a;
  border-bottom: 1px solid #f1f5f9;
}
body.system-screen-body .system-payment-history__empty {
  text-align: center !important;
  color: #94a3b8;
  font-style: italic;
  padding: 1rem 0.75rem !important;
}
html.dark body.system-screen-body .system-payment-history { border-top-color: #334155; }
html.dark body.system-screen-body .system-payment-history-table thead th {
  background: #1e293b;
  color: #cbd5e1;
  border-bottom-color: #334155;
}
html.dark body.system-screen-body .system-payment-history-table tbody td {
  color: #e2e8f0;
  border-bottom-color: #1e293b;
}

/* Mobile — stack the history rows as compact cards. */
@media (max-width: 1024px) {
  html body.system-screen-body .system-payment-history-table thead { display: none !important; }
  html body.system-screen-body .system-payment-history-table,
  html body.system-screen-body .system-payment-history-table tbody,
  html body.system-screen-body .system-payment-history-table tbody tr,
  html body.system-screen-body .system-payment-history-table tbody td { display: block !important; width: 100% !important; }
  html body.system-screen-body .system-payment-history-table tbody tr {
    border: 1px solid #e2e8f0 !important;
    border-radius: 12px !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.6rem !important;
  }
  html body.system-screen-body .system-payment-history-table tbody td { border: 0 !important; padding: 0.2rem 0 !important; }
  html body.system-screen-body .system-payment-history-table tbody td:not(.system-payment-history__empty)::before {
    content: attr(data-label);
    display: block;
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    color: #94a3b8;
  }
}

/* ============================================================
 * MOBILE — authoritative overrides (must beat earlier rules):
 *  (1) page title truly centred on the header row
 *  (2) member card footer: Add Membership first, icons after,
 *      the whole group centred (beats the flex-end base rule).
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy {
    width: 100% !important;
    flex: 1 1 100% !important;
    text-align: center !important;
    align-items: center !important;
    padding-left: 0 !important;
  }
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy > * {
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    text-align: center !important;
  }

  html body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell,
  html body.system-screen-body .system-data-table--transactions > tbody > tr > td:last-child,
  html body.system-screen-body .system-data-table--membership > tbody > tr > td:last-child,
  html body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:last-child {
    display: flex !important;
    justify-content: center !important;
  }
  /* All card footers: buttons centred, in order. They WRAP (never crop) so
   * nothing is cut off; padding keeps them clear of the card's rounded edge. */
  html body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell > .system-row-actions,
  html body.system-screen-body .system-data-table--transactions > tbody > tr > td:last-child > .system-row-actions,
  html body.system-screen-body .system-data-table--membership > tbody > tr > td:last-child > .system-row-actions,
  html body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:last-child > .system-row-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.4rem !important;
    overflow: visible !important;
    padding: 0.15rem 0 !important;
  }
  html body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell > .system-row-actions > * {
    flex: 0 0 auto !important;
  }
  /* Compact the member footer so Add Membership + 5 icons pack tightly
   * (one line where it fits, otherwise a neat centred second row). */
  html body.system-screen-body .system-row-actions--member .system-table-button--solid {
    padding: 0.42rem 0.7rem !important;
    font-size: 0.74rem !important;
    min-width: 0 !important;
  }
  html body.system-screen-body .system-row-actions--member .system-table-button--icon {
    width: 1.95rem !important;
    min-width: 1.95rem !important;
    height: 1.95rem !important;
  }
}

/* ============================================================
 * MOBILE — Expense invoice modal (.system-invoice-dialog).
 * It has no .system-view-scroll wrapper; its content is head +
 * amount + grid + actions as direct siblings. Make the fields
 * GRID the scroll area and pin the head/amount/Close.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-invoice-dialog {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    max-height: 92vh !important;
  }
  html body.system-screen-body .system-invoice-dialog > .system-invoice-head,
  html body.system-screen-body .system-invoice-dialog > .system-invoice-amount,
  html body.system-screen-body .system-invoice-dialog > .system-form-actions {
    flex: 0 0 auto !important;
  }
  html body.system-screen-body .system-invoice-dialog > .system-invoice-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
}

/* ============================================================
 * MOBILE — the floating absolute close "X" on member view/ledger
 * dialogs overlaps content and is redundant with the footer Close
 * button, so hide it on small screens.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-member-dialog__close {
    display: none !important;
  }
}

/* ============================================================
 * MOBILE — ledger & report member modals: their shell is the
 * scroll body (flex:1) so the newly added footer Close stays
 * pinned at the bottom.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-member-dialog--ledger > .system-member-ledger-shell,
  html body.system-screen-body .system-member-dialog--report > .system-member-report-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.system-screen-body .system-member-dialog--ledger > .system-member-dialog__banner,
  html body.system-screen-body .system-member-dialog--report > .system-member-dialog__banner,
  html body.system-screen-body .system-member-dialog--ledger > .system-member-view-footer,
  html body.system-screen-body .system-member-dialog--report > .system-member-view-footer {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
 * Top-bar navigation dropdown (next to the dark-mode toggle).
 * ============================================================ */
body.system-screen-body .site-topbar-nav { position: relative; display: inline-flex; }
body.system-screen-body .site-topbar-nav__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: 9999px;
  border: 1px solid #e2e8f0;
  background: #ffffff;
  color: #0f172a;
  cursor: pointer;
  transition: background 0.15s ease;
}
body.system-screen-body .site-topbar-nav__button:hover { background: #f1f5f9; }
body.system-screen-body .site-topbar-nav__menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  /* Logical inset so the panel flips sides under dir="rtl" (Arabic/Kurdish).
     With a physical `right: 0` the panel hung ~76px off the left edge of a
     390px RTL viewport and the labels were clipped. */
  inset-inline-end: 0;
  z-index: 80;
  min-width: 12rem;
  max-width: calc(100vw - 1.5rem);
  max-height: 70vh;
  overflow-y: auto;
  padding: 0.4rem;
  border-radius: 14px;
  background: #ffffff;
  box-shadow: 0 18px 40px rgba(15, 23, 42, 0.18);
  border: 1px solid #e2e8f0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
body.system-screen-body .site-topbar-nav__menu[hidden] { display: none; }
body.system-screen-body .site-topbar-nav__menu a {
  display: block;
  padding: 0.55rem 0.85rem;
  border-radius: 10px;
  font-size: 0.9rem;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
}
body.system-screen-body .site-topbar-nav__menu a:hover { background: #f1f5f9; }
body.system-screen-body .site-topbar-nav__menu a[aria-current="page"] { background: #fff1e9; color: #b02f00; }
html.dark body.system-screen-body .site-topbar-nav__button { background: #1e293b; border-color: #334155; color: #e2e8f0; }
html.dark body.system-screen-body .site-topbar-nav__button:hover { background: #334155; }
html.dark body.system-screen-body .site-topbar-nav__menu { background: #0f172a; border-color: #334155; }
html.dark body.system-screen-body .site-topbar-nav__menu a { color: #e2e8f0; }
html.dark body.system-screen-body .site-topbar-nav__menu a:hover { background: #1e293b; }

/* ============================================================
 * Top-bar hamburger menu — language section styling.
 * ============================================================ */
body.system-screen-body .site-topbar-nav__sep {
  height: 1px;
  margin: 0.35rem 0.3rem;
  background: #e2e8f0;
}
body.system-screen-body .site-topbar-nav__label {
  margin: 0.15rem 0.85rem 0.25rem;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #94a3b8;
}
body.system-screen-body .site-topbar-nav__lang {
  display: block;
  width: 100%;
  /* `start` follows the document direction, so Arabic/Kurdish align right. */
  text-align: start;
  padding: 0.5rem 0.85rem;
  border: 0;
  border-radius: 10px;
  background: transparent;
  font-size: 0.88rem;
  font-weight: 600;
  color: #0f172a;
  cursor: pointer;
}
body.system-screen-body .site-topbar-nav__lang:hover { background: #f1f5f9; }
body.system-screen-body .site-topbar-nav__lang[aria-pressed="true"] { background: #fff1e9; color: #b02f00; }
html.dark body.system-screen-body .site-topbar-nav__sep { background: #334155; }
html.dark body.system-screen-body .site-topbar-nav__lang { color: #e2e8f0; }
html.dark body.system-screen-body .site-topbar-nav__lang:hover { background: #1e293b; }

/* RTL (Arabic / Kurdish Sorani): `inset-inline-end: 0` above already resolves
 * to physical left:0 here, so the panel opens inward from the button instead of
 * hanging off the left edge. Only the text flow needs stating. */
html[dir="rtl"] body.system-screen-body .site-topbar-nav__menu {
  text-align: right;
}
html[dir="rtl"] body.system-screen-body .site-topbar-nav__menu a,
html[dir="rtl"] body.system-screen-body .site-topbar-nav__lang,
html[dir="rtl"] body.system-screen-body .site-topbar-nav__label {
  text-align: right;
  white-space: nowrap;
}

/* ============================================================
 * MOBILE — final pass:
 *  (a) card footer buttons forced onto ONE line (shrunk to fit)
 *  (b) the dashboard "Masulka System" pill centred and kept
 *      clear of the fixed hamburger button on the left.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell > .system-row-actions,
  html body.system-screen-body .system-data-table--transactions > tbody > tr > td:last-child > .system-row-actions,
  html body.system-screen-body .system-data-table--membership > tbody > tr > td:last-child > .system-row-actions,
  html body.system-screen-body .system-data-table--membership-ledger > tbody > tr > td:last-child > .system-row-actions {
    flex-wrap: nowrap !important;
    gap: 0.22rem !important;
  }
  /* Shrink the member footer group so all six controls fit one row. */
  html body.system-screen-body .system-row-actions--member .system-table-button--solid {
    padding: 0.34rem 0.44rem !important;
    font-size: 0.62rem !important;
    min-width: 0 !important;
    line-height: 1.15 !important;
  }
  html body.system-screen-body .system-row-actions--member .system-table-button--icon {
    width: 1.62rem !important;
    min-width: 1.62rem !important;
    height: 1.62rem !important;
    padding: 0 !important;
  }
  html body.system-screen-body .system-row-actions--member .system-table-button--icon .material-symbols-outlined {
    font-size: 0.95rem !important;
  }

  /* Eyebrow pill: centred, and narrow enough that it never slides under
   * the fixed hamburger (which occupies ~3.2rem on the left). */
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy > span {
    align-self: center !important;
    margin-inline: auto !important;
    max-width: calc(100% - 7rem) !important;
    letter-spacing: 0.12em !important;
    font-size: 0.62rem !important;
    padding-inline: 0.75rem !important;
    text-align: center !important;
    justify-content: center !important;
  }
}

/* ============================================================
 * Top-bar menu — open animation.
 * ============================================================ */
@keyframes masulkaTopbarMenuIn {
  from { opacity: 0; transform: translateY(-8px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
body.system-screen-body .site-topbar-nav__menu:not([hidden]) {
  animation: masulkaTopbarMenuIn 0.18s ease-out both;
  transform-origin: top right;
}
body.system-screen-body .site-topbar-nav__button .material-symbols-outlined { transition: transform 0.18s ease; }
body.system-screen-body .site-topbar-nav__button[aria-expanded="true"] .material-symbols-outlined { transform: rotate(90deg); }

/* Dark mode: the active language row was light-on-light (unreadable). */
html.dark body.system-screen-body .site-topbar-nav__lang[aria-pressed="true"],
html.dark body.system-screen-body .site-topbar-nav__menu a[aria-current="page"] {
  background: #7c2d12 !important;
  color: #ffedd5 !important;
}
html.dark body.system-screen-body .site-topbar-nav__label { color: #94a3b8 !important; }

/* ============================================================
 * Delete confirmation dialogs — narrower action buttons.
 * ============================================================ */
body.system-screen-body .system-delete-dialog__actions > button,
body.system-screen-body [data-system-modal$="-delete"] .system-member-modal-button,
body.system-screen-body [data-system-modal$="-delete"] .system-transaction-modal-actions > button {
  flex: 0 0 auto !important;
  width: auto !important;
  min-width: 7rem !important;
  max-width: 10rem !important;
  padding-inline: 1rem !important;
}
body.system-screen-body .system-delete-dialog__actions,
body.system-screen-body [data-system-modal$="-delete"] .system-transaction-modal-actions {
  gap: 0.6rem !important;
  justify-content: center !important;
}

/* ============================================================
 * MOBILE — final corrections:
 *  (a) the header pill/title centre correctly in a GRID parent
 *      (needs justify-self, not just margin/align-self)
 *  (b) the membership list body scrolls
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy > * {
    justify-self: center !important;
    justify-items: center !important;
  }
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy > span {
    width: fit-content !important;
    justify-self: center !important;
    margin-inline: auto !important;
  }
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy {
    justify-items: center !important;
    justify-content: center !important;
  }

  /* Membership list: the card body must scroll inside the shell. */
  html body.system-screen-body #membership-table-shell > .overflow-x-auto,
  html body.system-screen-body .system-table-shell--membership > .overflow-x-auto {
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
    min-height: 0 !important;
    flex: 1 1 auto !important;
  }
}

/* ============================================================
 * PRINT — view/detail forms print as label|value rows instead of
 * one item per line.
 * ============================================================ */
@media print {
  .system-membership-detail-form,
  .system-member-finance-grid,
  .system-form-grid--two,
  .system-invoice-grid {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 4px 18px !important;
  }
  .system-membership-detail-form .system-form-field,
  .system-member-finance-grid .system-form-field,
  .system-form-grid--two .system-form-field,
  .system-invoice-grid .system-form-field {
    display: grid !important;
    grid-template-columns: 8.5rem minmax(0, 1fr) !important;
    align-items: baseline !important;
    gap: 0 0.5rem !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 2px 0 !important;
    break-inside: avoid;
  }
  .system-membership-detail-form .system-form-field > label,
  .system-member-finance-grid .system-form-field > label,
  .system-form-grid--two .system-form-field > label,
  .system-invoice-grid .system-form-field > label {
    font-weight: 700 !important;
    color: #111827 !important;
    margin: 0 !important;
  }
  .system-membership-detail-form .system-membership-detail-section,
  .system-invoice-grid .system-membership-detail-section {
    grid-column: 1 / -1 !important;
  }
}

/* ============================================================
 * MOBILE — final header + subtable corrections.
 *  (1) Header copy becomes a plain BLOCK so the eyebrow pill (an
 *      inline-flex element) centres via text-align — this works
 *      whether the original layout was grid or flex.
 *  (2) The empty access/exercise sub-table showed TWO nested
 *      boxes (the table's own card border + the placeholder row's
 *      border). Keep only the outer one.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy {
    display: block !important;
    text-align: center !important;
    padding-left: 0 !important;
  }
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy > span {
    display: inline-flex !important;
    float: none !important;
    margin: 0 auto !important;
    max-width: calc(100% - 7rem) !important;
  }
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy > h2,
  html body.system-screen-body .system-panel-scroll > section:first-child .system-page-header-copy > p {
    text-align: center !important;
    margin-inline: auto !important;
  }

  /* Empty sub-table: one box, not two. */
  html body.system-screen-body .system-membership-subtable > tbody > tr:has(> .system-subtable-empty),
  html body.system-screen-body .system-course-subtable > tbody > tr:has(> .system-subtable-empty) {
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  html body.system-screen-body .system-subtable-empty {
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    text-align: center !important;
    padding: 0.85rem 0.5rem !important;
  }
  html body.system-screen-body .system-subtable-empty::before { content: none !important; }
}

/* ============================================================
 * PRINT — form modals (View/Edit Membership, Sale, etc.) must
 * print as a clean document, not as live form controls.
 * ============================================================ */
@media print {
  /* Serialised state fields are implementation detail — never print them. */
  [name="accessRows"], [name="freezeRows"], [name="exerciseRows"],
  [data-membership-access-rows-input], input[type="hidden"] { display: none !important; }
  /* Render inputs/selects as plain text. */
  .system-form-panel input,
  .system-form-panel select,
  .system-form-panel textarea {
    border: 0 !important;
    outline: 0 !important;
    box-shadow: none !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font: inherit !important;
    color: #111827 !important;
    -webkit-appearance: none !important;
    appearance: none !important;
    height: auto !important;
    min-height: 0 !important;
    width: auto !important;
  }
  .system-form-panel select::-ms-expand { display: none !important; }
  /* Sub-tables print as real tables. */
  .system-membership-subtable,
  .system-course-subtable {
    width: 100% !important;
    border-collapse: collapse !important;
  }
  .system-membership-subtable th, .system-membership-subtable td,
  .system-course-subtable th, .system-course-subtable td {
    border-bottom: 1px solid #e5e7eb !important;
    padding: 4px 6px !important;
    text-align: left !important;
  }
  /* Don't print action buttons. */
  .system-form-actions, .system-transaction-modal-actions,
  .system-member-view-footer, .system-membership-inline-action,
  [data-membership-access-add], [data-membership-access-remove],
  [data-course-exercise-open] { display: none !important; }
}

/* ============================================================
 * MOBILE — modal footers: buttons side by side at a sensible
 * size (Add/Edit expense, course, coach income, safe, import,
 * export, transfer, archive, …).
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-form-actions,
  html body.system-screen-body .system-form-panel .system-transaction-modal-actions,
  html body.system-screen-body .system-form-panel .system-member-modal-actions,
  html body.system-screen-body .system-form-panel .system-member-finance-actions,
  html body.system-screen-body .system-form-panel .system-member-view-footer {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: center !important;
    gap: 0.5rem !important;
  }
  html body.system-screen-body .system-form-panel .system-form-actions > button,
  html body.system-screen-body .system-form-panel .system-transaction-modal-actions > button,
  html body.system-screen-body .system-form-panel .system-member-modal-actions > button,
  html body.system-screen-body .system-form-panel .system-member-finance-actions > button,
  html body.system-screen-body .system-form-panel .system-member-view-footer > button {
    flex: 1 1 0 !important;
    width: auto !important;
    min-width: 6.5rem !important;
    max-width: 12rem !important;
    padding: 0.55rem 0.7rem !important;
    font-size: 0.82rem !important;
    white-space: nowrap !important;
  }

  /* Coach/Safe report modals: scroll body + pinned header. */
  html body.system-screen-body .system-member-dialog--report .system-coach-report-shell,
  html body.system-screen-body .system-form-panel [class*="report-shell"] {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Utility panels (Account Info / Subscription History): sticky header,
   * and cards that actually fit the screen width. */
  html body.system-screen-body .system-utility-panel .system-utility-head,
  html body.system-screen-body .system-account-dialog .system-utility-head,
  html body.system-screen-body .system-subhistory-dialog .system-subhistory-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    background: #ffffff !important;
  }
  html.dark body.system-screen-body .system-utility-panel .system-utility-head,
  html.dark body.system-screen-body .system-subhistory-dialog .system-subhistory-head {
    background: #0f172a !important;
  }
  html body.system-screen-body .system-subhistory-scroll {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
  html body.system-screen-body .system-subhistory-table,
  html body.system-screen-body .system-subhistory-table > tbody,
  html body.system-screen-body .system-subhistory-table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body.system-screen-body .system-subhistory-table > tbody > tr > td {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
}

/* ============================================================
 * MOBILE — corrections to earlier rules in this file:
 *  (1) Utility panel headers must be STICKY. An earlier rule
 *      (`.system-form-panel .system-form-dialog > .system-form-head
 *      { position: static }`) is more specific and was winning, so
 *      the Account Info header scrolled away. Match its specificity
 *      here (and come later in the file) to win the cascade.
 *  (2) The View Member footer holds TEXT (totals) as well as the
 *      Close button; the generic "footer buttons side by side" rule
 *      made the totals collide with the button. Lay it out as its
 *      own wrapping column instead.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-account-dialog > .system-utility-head,
  html body.system-screen-body .system-form-panel .system-subhistory-dialog > .system-subhistory-head,
  html body.system-screen-body .system-form-panel .system-sub-plans-dialog > .system-utility-head,
  html body.system-screen-body .system-form-panel .system-utility-panel > .system-utility-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08) !important;
  }
  html.dark body.system-screen-body .system-form-panel .system-account-dialog > .system-utility-head,
  html.dark body.system-screen-body .system-form-panel .system-subhistory-dialog > .system-subhistory-head {
    background: #0f172a !important;
  }

  /* View Member / ledger / report footer: totals on their own line,
   * the Close button centred beneath them. */
  html body.system-screen-body .system-form-panel .system-member-view-footer {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.45rem !important;
    text-align: center !important;
  }
  html body.system-screen-body .system-form-panel .system-member-view-footer > button {
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 8rem !important;
    max-width: 14rem !important;
  }
}

/* ============================================================
 * The top-bar hamburger stands in for the site nav links, so it must be
 * visible exactly where those links are NOT.
 *
 * This used to hide the hamburger from 768px up, on the assumption that the
 * nav links take over there. They don't: the marketing header hides
 * `.site-nav-links` AND the language switcher between 768px and 1023px
 * (there isn't room for them beside the CTA). That left the 768–1023px band
 * with no way to reach Home/Features/Solutions/Security or change language —
 * the reported missing menu. Hide the hamburger only from 1024px, where the
 * real links come back.
 * ============================================================ */
@media (min-width: 1024px) {
  body.system-screen-body .site-topbar-nav { display: none !important; }
}
/* The hamburger's own styling lives in a `max-width: 1024px` block, so give
 * the 1024px boundary itself an explicit inline-flex to avoid a dead pixel
 * where neither rule applies. */
@media (min-width: 768px) and (max-width: 1023px) {
  body.system-screen-body .site-topbar-nav {
    display: inline-flex !important;
  }
}

/* ============================================================
 * Safe page — report button now lives inline in the footer next
 * to the total, at a small size.
 * ============================================================ */
body.system-screen-body .system-table-shell__footer--safe {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}
body.system-screen-body .system-safe-report-inline-button {
  width: 2.1rem !important;
  min-width: 2.1rem !important;
  height: 2.1rem !important;
  padding: 0 !important;
  border: 1px solid #f2d3c4 !important;
  color: #b02f00 !important;
  flex: 0 0 auto !important;
}
body.system-screen-body .system-safe-report-inline-button .material-symbols-outlined { font-size: 1.15rem !important; }
html.dark body.system-screen-body .system-safe-report-inline-button { border-color: #7c2d12 !important; color: #fdba74 !important; }

/* View Course is read-only: no exercise delete control. */
body.system-screen-body .system-course-form--view [data-course-exercise-remove],
body.system-screen-body [data-system-modal="course-view"] [data-course-exercise-remove] {
  display: none !important;
}

@media (max-width: 1024px) {
  /* Membership Report / Safe Report / Coach Report: header stays put. */
  html body.system-screen-body .system-form-panel .system-member-dialog--report > .system-member-dialog__banner,
  html body.system-screen-body .system-form-panel .system-form-dialog--safe-report > .system-member-dialog__banner,
  html body.system-screen-body .system-form-panel .system-coach-report-dialog > .system-member-dialog__banner {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08) !important;
  }
  html.dark body.system-screen-body .system-form-panel .system-member-dialog--report > .system-member-dialog__banner {
    background: #0f172a !important;
  }

  /* Deleted Membership (and sibling report tables) → labelled cards. */
  html body.system-screen-body .system-form-panel .system-report-card table,
  html body.system-screen-body .system-form-panel .system-report-card table > tbody,
  html body.system-screen-body .system-form-panel .system-report-card table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body.system-screen-body .system-form-panel .system-report-card table > thead { display: none !important; }
  html body.system-screen-body .system-form-panel .system-report-card table > tbody > tr {
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 0.6rem 0.8rem !important;
    margin-bottom: 0.6rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0.8rem !important;
  }
  html body.system-screen-body .system-form-panel .system-report-card table > tbody > tr > td {
    display: block !important;
    border: 0 !important;
    padding: 0.15rem 0 !important;
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  html body.system-screen-body .system-form-panel .system-report-card table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.68rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
  }
}

/* ============================================================
 * MOBILE — REPORT MODAL TABLES → labelled cards.
 * The Coach/Safe/Membership report tables were ~700px wide inside
 * a ~344px dialog, so the figures were cut off and the period
 * filters LOOKED broken (the data was changing, just off-screen).
 * ============================================================ */
@media (max-width: 1024px) {
  /* Kill the horizontal scroll wrapper so cards use the full width. */
  html body.system-screen-body .system-form-panel .overflow-x-auto {
    overflow-x: visible !important;
  }
  html body.system-screen-body .system-data-table--coach-report,
  html body.system-screen-body .system-data-table--safe-report,
  html body.system-screen-body .system-membership-report-table,
  html body.system-screen-body .system-data-table--coach-report > tbody,
  html body.system-screen-body .system-data-table--safe-report > tbody,
  html body.system-screen-body .system-membership-report-table > tbody,
  html body.system-screen-body .system-data-table--coach-report > tbody > tr,
  html body.system-screen-body .system-data-table--safe-report > tbody > tr,
  html body.system-screen-body .system-membership-report-table > tbody > tr {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }
  html body.system-screen-body .system-data-table--coach-report > thead,
  html body.system-screen-body .system-data-table--safe-report > thead,
  html body.system-screen-body .system-membership-report-table > thead {
    display: none !important;
  }
  html body.system-screen-body .system-data-table--coach-report > tbody > tr,
  html body.system-screen-body .system-data-table--safe-report > tbody > tr,
  html body.system-screen-body .system-membership-report-table > tbody > tr {
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    padding: 0.6rem 0.85rem !important;
    margin-bottom: 0.6rem !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
    column-gap: 0.85rem !important;
    row-gap: 0.15rem !important;
  }
  html body.system-screen-body .system-data-table--coach-report > tbody > tr > td,
  html body.system-screen-body .system-data-table--safe-report > tbody > tr > td,
  html body.system-screen-body .system-membership-report-table > tbody > tr > td {
    display: block !important;
    border: 0 !important;
    padding: 0.12rem 0 !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
  }
  html body.system-screen-body .system-data-table--coach-report > tbody > tr > td[data-label]::before,
  html body.system-screen-body .system-data-table--safe-report > tbody > tr > td[data-label]::before,
  html body.system-screen-body .system-membership-report-table > tbody > tr > td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 0.66rem;
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: #94a3b8;
  }
  /* Empty-state rows span the full card. */
  html body.system-screen-body .system-data-table--coach-report > tbody > tr > td.system-subtable-empty,
  html body.system-screen-body .system-data-table--safe-report > tbody > tr > td.system-subtable-empty {
    grid-column: 1 / -1 !important;
    text-align: center !important;
  }
  html.dark body.system-screen-body .system-data-table--coach-report > tbody > tr,
  html.dark body.system-screen-body .system-data-table--safe-report > tbody > tr,
  html.dark body.system-screen-body .system-membership-report-table > tbody > tr {
    border-color: #334155 !important;
  }

  /* Membership Report dialog: sticky toolbar header + scrolling body.
   * (Its header is `.system-toolbar`, NOT `.system-member-dialog__banner`,
   * which is why the earlier sticky rule never applied.) */
  html body.system-screen-body .system-form-panel .system-membership-report-dialog {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    max-height: 92vh !important;
    max-height: 92dvh !important;
    max-height: 92vh !important;
  }
  html body.system-screen-body .system-form-panel .system-membership-report-dialog > .system-toolbar {
    position: sticky !important;
    top: 0 !important;
    z-index: 6 !important;
    flex: 0 0 auto !important;
    background: #ffffff !important;
    box-shadow: 0 1px 0 rgba(15, 23, 42, 0.08) !important;
  }
  html body.system-screen-body .system-form-panel .system-membership-report-dialog > .system-membership-report-grid {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
  }
  html.dark body.system-screen-body .system-form-panel .system-membership-report-dialog > .system-toolbar {
    background: #0f172a !important;
  }
}

/* Report tables are forced wide by earlier `min-width` rules on
 * `.system-data-table` (and Tailwind's min-w-full); collapse them so the
 * card rows actually fit the dialog width. */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-data-table--coach-report,
  html body.system-screen-body .system-form-panel .system-data-table--safe-report,
  html body.system-screen-body .system-form-panel .system-membership-report-table,
  html body.system-screen-body .system-form-panel table.system-data-table.min-w-full {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    table-layout: auto !important;
  }
  html body.system-screen-body .system-form-panel .overflow-x-auto {
    overflow-x: hidden !important;
    max-width: 100% !important;
  }
}

/* ============================================================
 * MOBILE — REPORT MODALS: the real scroll blocker.
 * `.system-report-card` has `overflow: hidden`; inside the modal
 * its content was 1460px tall in a 542px box, so the table was
 * simply CLIPPED and the dialog's scroll container never saw any
 * overflow to scroll. Let the card grow and the shell scroll.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-report-card,
  html body.system-screen-body .system-form-panel .system-report-card__top,
  html body.system-screen-body .system-form-panel .system-membership-report-card {
    overflow: visible !important;
    max-height: none !important;
    height: auto !important;
    flex: 0 0 auto !important;
  }
  html body.system-screen-body .system-form-panel .system-coach-report-shell,
  html body.system-screen-body .system-form-panel .system-safe-report-shell,
  html body.system-screen-body .system-form-panel .system-member-report-shell {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* Date range row: prev arrow + both dates + next arrow on ONE line. */
  html body.system-screen-body .system-form-panel .system-report-card__top > .grid,
  html body.system-screen-body .system-form-panel .system-membership-report-range {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.3rem !important;
  }
  html body.system-screen-body .system-form-panel .system-report-card__top > .grid > .system-form-field {
    flex: 1 1 0 !important;
    min-width: 0 !important;
  }
  html body.system-screen-body .system-form-panel .system-report-card__top > .grid > .system-form-field > label {
    display: none !important;   /* the arrows + values make the meaning clear */
  }
  html body.system-screen-body .system-form-panel .system-report-card__top > .grid input[type="date"],
  html body.system-screen-body .system-form-panel .system-membership-report-range input[type="date"] {
    width: 100% !important;
    min-width: 0 !important;
    padding: 0.35rem 0.4rem !important;
    font-size: 0.7rem !important;
    height: 2.1rem !important;
  }
  html body.system-screen-body .system-form-panel .system-report-card__top > .grid > .system-report-icon-button {
    flex: 0 0 auto !important;
    width: 1.85rem !important;
    min-width: 1.85rem !important;
    height: 1.85rem !important;
    padding: 0 !important;
  }
  html body.system-screen-body .system-form-panel .system-report-card__top > .grid > .system-report-icon-button .material-symbols-outlined {
    font-size: 1rem !important;
  }
  /* Period toggle fits one row. */
  html body.system-screen-body .system-form-panel .system-report-toggle {
    flex-wrap: nowrap !important;
    gap: 0.15rem !important;
  }
  html body.system-screen-body .system-form-panel .system-report-toggle .system-report-toggle__button {
    padding: 0.3rem 0.4rem !important;
    font-size: 0.72rem !important;
    white-space: nowrap !important;
  }

  /* Print dropdown must float ABOVE the report dialog, not behind it. */
  html body.system-screen-body .system-form-panel .system-course-print-wrap { position: static !important; }
  html body.system-screen-body .system-form-panel .system-course-print-menu {
    position: fixed !important;
    right: 1rem !important;
    bottom: 5.5rem !important;
    left: auto !important;
    top: auto !important;
    z-index: 2147483000 !important;
  }
}

/* ============================================================
 * In-document print layer (mobile print preview).
 * ============================================================ */
.system-print-layer { display: none; }
@media print {
  body.system-is-printing > *:not(.system-print-layer) { display: none !important; }
  body.system-is-printing .system-print-layer {
    display: block !important;
    position: static !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #111827;
    font-family: Inter, Arial, sans-serif;
  }
  body.system-is-printing .system-print-layer__title { font-size: 22px; margin: 0 0 12px; }
  body.system-is-printing .system-print-layer table { width: 100%; border-collapse: collapse; font-size: 12px; }
  body.system-is-printing .system-print-layer thead th {
    background: #f1f5f9; text-align: left; padding: 6px 8px; border-bottom: 2px solid #e2e8f0; font-weight: 700;
  }
  body.system-is-printing .system-print-layer tbody td { padding: 5px 8px; border-bottom: 1px solid #eef2f7; }
  /* Inside the print layer, tables print as REAL tables (not mobile cards). */
  body.system-is-printing .system-print-layer table,
  body.system-is-printing .system-print-layer thead,
  body.system-is-printing .system-print-layer tbody,
  body.system-is-printing .system-print-layer tr { display: table-row-group; }
  body.system-is-printing .system-print-layer table { display: table !important; }
  body.system-is-printing .system-print-layer thead { display: table-header-group !important; }
  body.system-is-printing .system-print-layer tbody { display: table-row-group !important; }
  body.system-is-printing .system-print-layer tr { display: table-row !important; }
  body.system-is-printing .system-print-layer td,
  body.system-is-printing .system-print-layer th { display: table-cell !important; }
  body.system-is-printing .system-print-layer td::before { content: none !important; }
  body.system-is-printing .system-print-layer button { display: none !important; }
}

/* ============================================================
 * Utility panel headers — button placement.
 *  - Subscription Plans: history button LEFT, close button RIGHT.
 *  - Account Info: close button on the RIGHT of the header.
 * ============================================================ */
body.system-screen-body .system-utility-head,
body.system-screen-body .system-subhistory-head {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
}
body.system-screen-body .system-utility-head > .system-utility-head__actions,
body.system-screen-body .system-utility-head > button,
body.system-screen-body .system-subhistory-head > button {
  order: 3 !important;
  margin-left: auto !important;
  flex: 0 0 auto !important;
}
/* The history shortcut sits on the LEFT of the Subscription Plans header. */
body.system-screen-body .system-sub-plans-dialog .system-utility-head [data-system-open-subhistory],
body.system-screen-body .system-sub-plans-dialog .system-utility-head .system-sub-history-btn {
  order: 0 !important;
  margin-left: 0 !important;
  margin-right: 0.5rem !important;
}

/* Report-table card cells kept a leftover intrinsic table-cell cap
 * (computed max-width ~45px), which made every value wrap one character per
 * line. Clear the width constraints so the grid column width is used. */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-data-table--coach-report > tbody > tr > td,
  html body.system-screen-body .system-form-panel .system-data-table--safe-report > tbody > tr > td,
  html body.system-screen-body .system-form-panel .system-membership-report-table > tbody > tr > td,
  html body.system-screen-body .system-form-panel .system-subhistory-table > tbody > tr > td,
  html body.system-screen-body .system-utility-panel .system-subhistory-table > tbody > tr > td {
    max-width: none !important;
    width: auto !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
  }
}

/* The grid layout on <tr> left the <td>s at their intrinsic table width
 * (~6px) instead of filling the grid column, so every value wrapped one
 * character per line. FLEX makes the cells size correctly. */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel .system-data-table--coach-report > tbody > tr,
  html body.system-screen-body .system-form-panel .system-data-table--safe-report > tbody > tr,
  html body.system-screen-body .system-form-panel .system-membership-report-table > tbody > tr,
  html body.system-screen-body .system-form-panel .system-subhistory-table > tbody > tr,
  html body.system-screen-body .system-utility-panel .system-subhistory-table > tbody > tr {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
    column-gap: 0.6rem !important;
    row-gap: 0.3rem !important;
  }
  html body.system-screen-body .system-form-panel .system-data-table--coach-report > tbody > tr > td,
  html body.system-screen-body .system-form-panel .system-data-table--safe-report > tbody > tr > td,
  html body.system-screen-body .system-form-panel .system-membership-report-table > tbody > tr > td,
  html body.system-screen-body .system-form-panel .system-subhistory-table > tbody > tr > td,
  html body.system-screen-body .system-utility-panel .system-subhistory-table > tbody > tr > td {
    flex: 1 1 43% !important;
    box-sizing: border-box !important;
  }
  /* Cells with no label (action buttons) get their own full-width line. */
  html body.system-screen-body .system-form-panel .system-data-table--coach-report > tbody > tr > td:not([data-label]),
  html body.system-screen-body .system-form-panel .system-data-table--safe-report > tbody > tr > td:not([data-label]),
  html body.system-screen-body .system-form-panel .system-membership-report-table > tbody > tr > td:not([data-label]),
  html body.system-screen-body .system-form-panel .system-subhistory-table > tbody > tr > td:not([data-label]),
  html body.system-screen-body .system-utility-panel .system-subhistory-table > tbody > tr > td:not([data-label]) {
    flex: 1 1 100% !important;
    display: flex !important;
    justify-content: center !important;
  }
}

/* ============================================================
 * Table-shell footers: total on the LEFT, report button on the
 * RIGHT, on one line (Safe + Coach Salary).
 * ============================================================ */
body.system-screen-body .system-table-shell__footer--safe,
body.system-screen-body .system-table-shell__footer--coach {
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 0.75rem !important;
  text-align: left !important;
}
body.system-screen-body .system-table-shell__footer--coach > span,
body.system-screen-body .system-table-shell__footer--safe > span {
  flex: 1 1 auto !important;
  text-align: left !important;
}
/* The old floating report launchers are replaced by the footer buttons. */
body.system-screen-body .system-coach-report-launcher,
body.system-screen-body .system-safe-report-launcher { display: none !important; }

/* ============================================================
 * Report modal footer: Close on the left, print options button
 * to its RIGHT, and the dropdown opens ABOVE the button.
 * ============================================================ */
body.system-screen-body .system-member-view-footer .system-course-print-wrap {
  position: relative !important;
  flex: 0 0 auto !important;
  order: 5 !important;
}
body.system-screen-body .system-member-view-footer .system-course-print-wrap > [data-course-print-trigger] {
  width: 2.6rem !important;
  min-width: 2.6rem !important;
  height: 2.6rem !important;
  padding: 0 !important;
  border: 1px solid #f2d3c4 !important;
  color: #b02f00 !important;
  border-radius: 9999px !important;
  box-shadow: none !important;
}
body.system-screen-body .system-member-view-footer .system-course-print-menu {
  position: absolute !important;
  bottom: calc(100% + 0.5rem) !important;   /* opens upward */
  top: auto !important;
  right: 0 !important;
  left: auto !important;
  z-index: 2147483000 !important;
  min-width: 11rem !important;
}

@media (max-width: 1024px) {
  /* Report footers put Close and the print button on one row. */
  html body.system-screen-body .system-form-panel .system-member-view-footer {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }

  /* ----------------------------------------------------------
   * Safe Report summary (Cash In / Cash Out / Balance): these
   * were overlapping the table and date pickers. Make them a
   * compact row that sits at the BOTTOM of the report, in flow.
   * -------------------------------------------------------- */
  html body.system-screen-body .system-form-panel .system-safe-report-summary-grid {
    position: static !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    order: 99 !important;
    margin-top: 0.75rem !important;
    gap: 0.4rem !important;
    transform: none !important;
    inset: auto !important;
    z-index: auto !important;
  }
  html body.system-screen-body .system-form-panel .system-safe-report-summary-grid > * {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0.5rem 0.45rem !important;
    border-radius: 12px !important;
    box-shadow: none !important;
    border: 1px solid #e2e8f0 !important;
    background: #ffffff !important;
  }
  html body.system-screen-body .system-form-panel .system-safe-report-summary-grid h4 {
    font-size: 0.66rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: #94a3b8 !important;
    margin: 0 0 0.15rem !important;
    white-space: nowrap !important;
  }
  html body.system-screen-body .system-form-panel .system-safe-report-summary-value {
    font-size: 0.82rem !important;
    line-height: 1.15 !important;
    display: block !important;
    overflow-wrap: anywhere !important;
  }
  html.dark body.system-screen-body .system-form-panel .system-safe-report-summary-grid > * {
    background: #0f172a !important;
    border-color: #334155 !important;
  }
  /* The shell must lay its children out in order so `order:99` works. */
  html body.system-screen-body .system-form-panel .system-safe-report-shell {
    display: flex !important;
    flex-direction: column !important;
  }
}

/* ============================================================
 * MOBILE — Membership list must scroll, and modal footer
 * buttons share one consistent size (Course / Expense / etc).
 * ============================================================ */
@media (max-width: 1024px) {
  /* Membership page: the shell is the scroll container. */
  html body.system-screen-body #membership-table-shell,
  html body.system-screen-body .system-table-shell--membership {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  html body.system-screen-body #membership-table-shell > .overflow-x-auto,
  html body.system-screen-body .system-table-shell--membership > .overflow-x-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.system-screen-body #membership-table-shell > .system-table-shell__footer,
  html body.system-screen-body .system-table-shell--membership > .system-table-shell__footer {
    flex: 0 0 auto !important;
  }

  /* Every modal footer button: identical height, equal share of the row. */
  html body.system-screen-body .system-form-panel .system-form-actions > button,
  html body.system-screen-body .system-form-panel .system-transaction-modal-actions > button,
  html body.system-screen-body .system-form-panel .system-member-modal-actions > button,
  html body.system-screen-body .system-form-panel .system-member-finance-actions > button {
    flex: 1 1 0 !important;
    min-width: 0 !important;
    max-width: none !important;
    height: 2.75rem !important;
    min-height: 2.75rem !important;
    padding: 0 0.6rem !important;
    font-size: 0.82rem !important;
    line-height: 1 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.35rem !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
  }
  /* A 3-button footer wraps the last button onto its own full-width line
   * rather than squeezing all three. */
  html body.system-screen-body .system-form-panel .system-form-actions > button:nth-child(3),
  html body.system-screen-body .system-form-panel .system-transaction-modal-actions > button:nth-child(3) {
    flex: 1 1 100% !important;
  }
}

/* The Membership list shell is `#membership-ledger-shell`
 * (.system-membership-ledger-shell.overflow-hidden) — not
 * `#membership-table-shell`. Its inner .overflow-x-auto had
 * overflow-y:hidden, clipping 3828px of cards into 471px with no scroll. */
@media (max-width: 1024px) {
  html body.system-screen-body #membership-ledger-shell,
  html body.system-screen-body .system-membership-ledger-shell {
    display: flex !important;
    flex-direction: column !important;
    min-height: 0 !important;
  }
  html body.system-screen-body #membership-ledger-shell > .overflow-x-auto,
  html body.system-screen-body .system-membership-ledger-shell > .overflow-x-auto,
  html body.system-screen-body #membership-ledger-shell .overflow-x-auto,
  html body.system-screen-body .system-membership-ledger-shell .overflow-x-auto {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
  }
  html body.system-screen-body #membership-ledger-shell > .system-table-shell__footer,
  html body.system-screen-body .system-membership-ledger-shell > .system-table-shell__footer {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
 * TABLET (iPad portrait) — bigger, better-spaced action buttons
 * in the MEMBER cards only. Deliberately scoped to
 * `--members` so no other page's footers change.
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell > .system-row-actions--member {
    gap: 0.65rem !important;
    padding: 0.25rem 0 !important;
  }
  html body.system-screen-body .system-data-table--members .system-row-actions--member .system-table-button--solid {
    padding: 0.62rem 1.15rem !important;
    font-size: 0.92rem !important;
    height: auto !important;
    border-radius: 9999px !important;
  }
  html body.system-screen-body .system-data-table--members .system-row-actions--member .system-table-button--icon {
    width: 2.7rem !important;
    min-width: 2.7rem !important;
    height: 2.7rem !important;
  }
  html body.system-screen-body .system-data-table--members .system-row-actions--member .system-table-button--icon .material-symbols-outlined {
    font-size: 1.3rem !important;
  }
}

/* ============================================================
 * Membership page header: the search bar sat right-aligned under
 * a centred title, leaving the left half empty. Give it the full
 * row with the input flexing and the button beside it.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-membership-ledger-header__row {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.75rem !important;
  }
  html body.system-screen-body .system-membership-ledger-searchbar {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    width: 100% !important;
    max-width: 100% !important;
    gap: 0.5rem !important;
  }
  html body.system-screen-body .system-membership-ledger-searchbar .system-member-toolbar__search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
  }
  html body.system-screen-body .system-membership-ledger-searchbar .system-member-toolbar__action {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
 * ACCOUNT INFO header — one line.
 * A mobile rule (`.system-utility-head { flex-direction: column;
 * align-items: stretch }`) stacked the header, so the Close button
 * dropped onto its own row beneath a centred title. Keep the text
 * block on the start edge and the Close button on the end edge,
 * side by side, at every width.
 * ============================================================ */
html body.system-screen-body .system-account-dialog > .system-utility-head {
  flex-direction: row !important;
  align-items: center !important;
  justify-content: space-between !important;
  flex-wrap: nowrap !important;
  gap: 0.75rem !important;
  text-align: start !important;
}
html body.system-screen-body .system-account-dialog > .system-utility-head > div {
  min-width: 0 !important;
  flex: 1 1 auto !important;
  text-align: start !important;
}
html body.system-screen-body .system-account-dialog > .system-utility-head .system-dialog-kicker {
  margin-bottom: 0.2rem !important;
  text-align: start !important;
}
html body.system-screen-body .system-account-dialog > .system-utility-head h3 {
  margin: 0 !important;
  text-align: start !important;
  overflow-wrap: anywhere !important;
}
html body.system-screen-body .system-account-dialog > .system-utility-head [data-system-utility-close] {
  flex: 0 0 auto !important;
  align-self: center !important;
  width: auto !important;
  margin: 0 !important;
}

/* Subscription Plans header: three slots (history — title — close) that stay
 * on one line even on narrow phones. */
@media (max-width: 560px) {
  body.system-screen-body .system-sub-plans-head,
  body.system-screen-body .system-subhistory-head {
    padding-inline: 4.4rem !important;
  }
  body.system-screen-body .system-sub-plans-head h3,
  body.system-screen-body .system-subhistory-head h3 {
    font-size: 1.1rem !important;
  }
  body.system-screen-body .system-sub-history-btn {
    inset-inline-start: 0.85rem !important;
  }
  body.system-screen-body .system-subhistory-head [data-system-utility-close],
  body.system-screen-body .system-sub-plans-head [data-system-utility-close] {
    inset-inline-end: 0.85rem !important;
    padding-inline: 0.7rem !important;
  }
}

/* ============================================================
 * iPAD (768–1024px) — member card action row.
 * The bigger iPad buttons need 330px, but the actions cell is one
 * column of the two-column card grid (~233px) and the row is
 * `nowrap`, so the first button ("Add Membership") was pushed to
 * left:-60px and clipped by the card edge. Give the cell the whole
 * card width; everything then fits on one line as intended.
 * ============================================================ */
@media (min-width: 768px) and (max-width: 1024px) {
  html body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell {
    /* `justify-self: stretch` is what actually widens the grid AREA —
       `grid-column` alone left it at content width, so `width: 100%`
       resolved to 248px. Span every track: this was `span 2`, written when
       the card grid was hard-locked to two columns; the grid is now 3/4/5
       tracks by width, so a fixed span left the row narrow and clipped the
       Add-Membership button again. */
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    justify-content: center !important;
  }
  html body.system-screen-body .system-data-table--members > tbody > tr > td.system-member-actions-cell > .system-row-actions--member {
    width: 100% !important;
    max-width: 100% !important;
    justify-content: center !important;
    /* ~330px of controls in ~700px of card: comfortably one line. */
    flex-wrap: nowrap !important;
    overflow: visible !important;
  }
}

/* ============================================================
 * RTL date-range nav arrows.
 * The prev/next chevrons are `chevron_left` / `chevron_right`.
 * Under dir="rtl" the flex row already reverses the buttons'
 * POSITIONS, but the glyphs kept pointing the LTR way, so "next"
 * ended up on the left still pointing right. Mirror the glyph so
 * prev points toward the start edge (right) and next toward the
 * end edge (left) — matching the reading direction.
 * ============================================================ */
html[dir="rtl"] .system-report-daterange__nav .material-symbols-outlined {
  transform: scaleX(-1);
}

/* ============================================================
 * RTL HEADING FONT (Arabic / Kurdish Sorani).
 * The real fix is per-glyph fallback in the Manrope stacks
 * (see the "Manrope, Vazirmatn" edits across the CSS + the
 * Tailwind config): English glyphs use Manrope, Arabic/Kurdish
 * glyphs — which Manrope lacks — fall back to Vazirmatn, matching
 * the body. This lang-scoped rule additionally makes standalone
 * page titles fully Vazirmatn for a cleaner look.
 * ============================================================ */
html[lang="ar"] .system-page-header h2,
html[lang="ku"] .system-page-header h2,
html[lang="ar"] .system-page-header h1,
html[lang="ku"] .system-page-header h1 {
  font-family: "Vazirmatn", "Manrope", sans-serif !important;
}

/* ============================================================
 * RTL: phone numbers, dates and times must read left-to-right.
 * Under dir="rtl" a value like "0750 373 6715" or "12 Feb 1994"
 * was reordered as an RTL run and shown reversed. Force LTR
 * ordering on just these value cells (isolated so neighbours are
 * unaffected); text stays on the start edge for the card layout.
 * ============================================================ */
html[dir="rtl"] [data-field="phone"],
html[dir="rtl"] [data-field="phone1"],
html[dir="rtl"] [data-field="phone2"],
html[dir="rtl"] [data-field="emergencyPhone"],
html[dir="rtl"] [data-field="birthDate"],
html[dir="rtl"] [data-field="date"],
html[dir="rtl"] [data-field="paidDate"],
html[dir="rtl"] [data-field="startDate"],
html[dir="rtl"] [data-field="endDate"],
html[dir="rtl"] [data-field="fromDate"],
html[dir="rtl"] [data-field="toDate"],
html[dir="rtl"] [data-field="joinedDate"],
html[dir="rtl"] [data-field="time"],
html[dir="rtl"] [data-field="timeLabel"],
html[dir="rtl"] [data-view-field="date"],
html[dir="rtl"] [data-view-field="paidDate"],
html[dir="rtl"] [data-view-field="startDate"],
html[dir="rtl"] [data-view-field="endDate"],
html[dir="rtl"] [data-view-field="fromDate"],
html[dir="rtl"] [data-view-field="toDate"],
html[dir="rtl"] [data-view-field="time"],
html[dir="rtl"] [data-view-field="receipt"] {
  direction: ltr !important;
  unicode-bidi: isolate;
}
/* In RTL these cells still sit on the right (start) edge. */
html[dir="rtl"] td[data-field="phone"],
html[dir="rtl"] td[data-field="phone1"],
html[dir="rtl"] td[data-field="birthDate"],
html[dir="rtl"] td[data-field="date"],
html[dir="rtl"] td[data-field="paidDate"],
html[dir="rtl"] td[data-field="startDate"],
html[dir="rtl"] td[data-field="endDate"],
html[dir="rtl"] td[data-field="time"],
html[dir="rtl"] td[data-field="timeLabel"] {
  text-align: right !important;
}

/* ============================================================
 * Subscription History table — desktop fit.
 * The 9th (print-button) column collapsed to ~9px, clipping the
 * per-row print buttons, and the other columns overflowed the
 * dialog by a few px. Tighten padding and give the action column
 * a real width so every column — and the print button — fits.
 * ============================================================ */
@media (min-width: 1025px) {
  body.system-screen-body .system-subhistory-table thead th,
  body.system-screen-body .system-subhistory-table tbody td {
    padding: 0.55rem 0.6rem !important;
    font-size: 0.8rem !important;
    white-space: nowrap !important;
  }
  body.system-screen-body .system-subhistory-table thead th:last-child,
  body.system-screen-body .system-subhistory-table tbody td:last-child {
    width: 3rem !important;
    min-width: 3rem !important;
    text-align: center !important;
  }
  body.system-screen-body .system-subhistory-print {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 2rem !important;
    height: 2rem !important;
    flex: 0 0 auto !important;
  }
  /* A touch more room and internal padding so edge columns never clip. */
  body.system-screen-body .system-subhistory-dialog {
    width: min(64rem, calc(100vw - 2rem)) !important;
  }
  body.system-screen-body .system-subhistory-scroll {
    padding-inline: 1rem !important;
  }
}

/* Access-type menu anchored to the "Add Access Type" button: drop it just
 * below the button, aligned to the button's inline-start, not the section. */
body.system-screen-body .system-access-type-menu--anchored {
  bottom: auto !important;
  top: calc(100% + 0.4rem) !important;
  left: auto !important;
  inset-inline-start: 0 !important;
  min-width: 12rem !important;
  max-width: min(16rem, 80vw) !important;
}
/* Menu item labels follow the reading direction. */
html[dir="rtl"] body.system-screen-body .system-access-type-menu__item {
  text-align: right !important;
}

/* ============================================================
 * RTL: report-card row values (phones, dates, "(-58 Days)").
 * Report rows are plain <span>s with no data-field hooks, so the
 * earlier [data-field] rule never reached them and phone numbers
 * still rendered reversed (0070 701 0750 instead of 0750 701 0070).
 * Isolate every value cell as an LTR run; the label row and text
 * cells are unaffected because only numeric runs reorder.
 * ============================================================ */
html[dir="rtl"] .system-report-members__body > div > span,
html[dir="rtl"] .system-report-table__body > div > span,
html[dir="rtl"] .system-report-simple-table__row > span,
html[dir="rtl"] [data-report-rows] > div > span,
html[dir="rtl"] .system-report-members__body > div > span > small,
html[dir="rtl"] [data-report-rows] > div > span > small {
  unicode-bidi: isolate;
}
/* Numeric-only cells (phone, date, "(-58 Days)") read left-to-right.
 * `.system-report-table__body` is the Membership/Income Expirations layout
 * (Name | Expiration | Phone) — it was previously only isolated, not forced
 * LTR, so its phone column still rendered reversed. */
html[dir="rtl"] .system-report-members__body > div > span:nth-child(n+3),
html[dir="rtl"] .system-report-table__body > div > span:nth-child(n+2),
html[dir="rtl"] [data-report-rows] > div > span:nth-child(n+2),
html[dir="rtl"] .system-report-simple-table__row > span:nth-child(n+3) {
  direction: ltr !important;
  unicode-bidi: isolate !important;
  text-align: right;
}

/* ============================================================
 * Coach / Safe report modal: print button to the LEFT corner and
 * range arrows that follow the reading direction.
 * The print wrap used a physical `right`, so it sat on the right in
 * both directions; the user wants it in the left corner. The range
 * chevrons are chevron_left / chevron_right, which point the LTR way
 * under dir="rtl" (same fix as the dashboard date nav).
 * ============================================================ */
/* Specificity must beat
 * `.system-member-view-footer .system-course-print-wrap { position: relative }`
 * (earlier in this file), which was pinning the wrap into the flex footer and
 * leaving the print button centred instead of in the corner. */
html body.system-screen-body .system-member-view-footer .system-coach-report-print-wrap,
html body.system-screen-body .system-member-view-footer .system-safe-report-print-wrap,
html body.system-screen-body .system-coach-report-print-wrap,
html body.system-screen-body .system-safe-report-print-wrap {
  position: absolute !important;
  left: 1.5rem !important;
  right: auto !important;
  bottom: 1.25rem !important;
  z-index: 5 !important;
}
html[dir="rtl"] body.system-screen-body [data-coach-report-step] .material-symbols-outlined,
html[dir="rtl"] body.system-screen-body [data-safe-report-step] .material-symbols-outlined,
html[dir="rtl"] body.system-screen-body [data-member-report-step] .material-symbols-outlined,
html[dir="rtl"] body.system-screen-body [data-membership-report-step] .material-symbols-outlined {
  transform: scaleX(-1);
}

/* ============================================================
 * NARROW DESKTOP (1025–1180px) — sidebar must never overflow its
 * grid column. The shell's first track shrinks in this band, so any
 * fixed/vw sidebar width spills over the content panel (the panel
 * then rendered *underneath* the menu). Pin the sidebar to its
 * track and give the track a sane minimum.
 * ============================================================ */
@media (min-width: 1025px) and (max-width: 1180px) {
  html body.system-screen-body .system-page-shell > .system-sidebar {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Keep the nav readable in the narrower column. */
  html body.system-screen-body .system-sidebar-link {
    font-size: 0.82rem !important;
    padding-inline: 0.7rem !important;
  }
  html body.system-screen-body .system-sidebar-link__icon {
    font-size: 1.05rem !important;
  }
}

/* ============================================================
 * TABLET / NARROW-DESKTOP CARDS (≤1024px) — right-size them.
 *
 * The card presentation now starts at 1024px (it used to disagree with
 * the drawer breakpoint), and the info grid was hard-locked to TWO
 * columns. At ~900–1024px that produced ~480px-wide columns and very
 * tall cards with a lot of dead space. Let the number of columns follow
 * the available width instead, and tighten the vertical rhythm.
 *
 * Full-width cells keep using `grid-column: 1 / -1`, which still spans
 * every track under auto-fit.
 * ============================================================ */
/* NOTE: the track count is stated EXPLICITLY per tier rather than with
 * `repeat(auto-fit, ...)`. The avatar header, the action footer and the Note
 * cell all span with `grid-column: 1 / -1`, and under auto-fit that span
 * collapsed to a single track — the Add-Membership button then overflowed and
 * was clipped by the card. Explicit counts keep `1 / -1` meaningful. */
@media (min-width: 641px) and (max-width: 767px) {
  html body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 768px) and (max-width: 900px) {
  html body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 901px) and (max-width: 1024px) {
  html body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr {
    grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
  }
}
@media (min-width: 641px) and (max-width: 1024px) {
  html body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr,
  html body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr {
    column-gap: 1.1rem !important;
    row-gap: 0.1rem !important;
    padding: 0.7rem 0.9rem !important;
    margin-bottom: 0.6rem !important;
  }
  /* Shorter label/value pairs: the label sits directly above its value. */
  html body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td[data-label],
  html body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td[data-label],
  html body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td[data-label],
  html body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td[data-label] {
    padding: 0.25rem 0 !important;
    line-height: 1.35 !important;
  }
  html body.system-screen-body .system-table-shell .system-data-table--members > tbody > tr > td[data-label]::before,
  html body.system-screen-body .system-table-shell .system-data-table--transactions > tbody > tr > td[data-label]::before,
  html body.system-screen-body .system-table-shell .system-data-table--membership > tbody > tr > td[data-label]::before,
  html body.system-screen-body .system-table-shell .system-data-table--membership-ledger > tbody > tr > td[data-label]::before {
    margin-bottom: 0 !important;
    font-size: 0.68rem !important;
  }
}

/* ============================================================
 * RTL for the mobile/tablet cards.
 *
 * The card cells previously hardcoded physical `text-align`, so under
 * RTL both the label and its value hugged the left edge (see report).
 * They now use logical `start`; these rules cover the cells that are
 * deliberately forced to LTR (dates, times, phone numbers, money) so
 * their glyph order stays Latin while the block still sits on the RTL
 * start edge — otherwise they'd drift to the far side of the card.
 * ============================================================ */
@media (max-width: 1024px) {
  html[dir="rtl"] body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td[data-label] {
    text-align: right !important;
  }
  html[dir="rtl"] body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td[data-label]::before {
    text-align: right !important;
  }
  /* Action-button footers start from the RTL start edge too. */
  html[dir="rtl"] body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td.system-member-actions-cell,
  html[dir="rtl"] body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td:last-child {
    justify-content: flex-start !important;
  }
}

/* ============================================================
 * Card spans need `justify-self: stretch`.
 *
 * `grid-column: 1 / -1` reserves the tracks but leaves the grid AREA at the
 * item's content width unless it is told to stretch, so the avatar header
 * and the action footer sat narrow inside a full-width span (the header's
 * underline stopped short and the buttons overflowed the card).
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td.system-row-avatar-cell,
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td.system-row-avatar-cell--transaction,
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td.system-member-actions-cell,
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td:last-child,
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td[data-label="Note"] {
    grid-column: 1 / -1 !important;
    justify-self: stretch !important;
    /* `min-width: 100%` is what actually fills the span. Neither
     * `justify-self: stretch` nor `width: 100%` does it reliably for these
     * <td> grid items — measured 248px (content width) inside a 966px span,
     * which is what clipped the Add-Membership button and left the avatar
     * header's underline stopping short. A minimum is resolved against the
     * grid area, so it holds regardless of the stretch quirk. */
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ============================================================
 * Card action rows must never squeeze their buttons.
 *
 * The row was pinned to `flex-wrap: nowrap` on the assumption that the
 * actions cell spans the whole card (~700px). In the tablet card grid the
 * cell can be a single track (~248px), and Chrome does not reliably stretch
 * a <td> grid item to its `1 / -1` span, so the wide "Add Membership"
 * button was flex-shrunk from 233px down to 37px and its label spilled out
 * of the card — the reported clipping.
 *
 * Letting the row wrap and forbidding shrink makes the layout correct at
 * ANY cell width: the button keeps its natural size and simply moves to its
 * own line when there is not enough room.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td .system-row-actions {
    flex-wrap: wrap !important;
    row-gap: 0.45rem !important;
    column-gap: 0.45rem !important;
    overflow: visible !important;
  }
  /* The member row is down to two controls (Add Membership + the overflow
   * menu), so it always fits on one line — wrapping it just made the card
   * taller and split the pair apart. */
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td .system-row-actions--member {
    flex-wrap: nowrap !important;
    column-gap: 0.5rem !important;
    row-gap: 0 !important;
    overflow: visible !important;
    justify-content: center !important;
  }
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td .system-row-actions > *,
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td .system-row-actions--member > * {
    /* No `min-width: 0` here: a generic `.system-table-button { width: 1.85rem;
     * min-width: 1.85rem }` icon rule exists, and the labelled buttons only
     * escape it via their own larger min-width. Zeroing min-width let the icon
     * rule win and squashed "Add Membership" into a 37px circle. */
    flex: 0 0 auto !important;
    max-width: 100% !important;
  }
  /* Labelled (solid) buttons size to their text, whatever the icon rule says. */
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td .system-row-actions .system-table-button--solid,
  html body.system-screen-body .system-table-shell .system-data-table > tbody > tr > td .system-row-actions--member .system-table-button--solid {
    width: auto !important;
    height: auto !important;
  }
}

/* ============================================================
 * MEMBER ROW OVERFLOW ("collector") MENU
 *
 * The row's five icon buttons were folded into one three-dot menu, so each
 * row now carries just the menu trigger and Add Membership. The menu items
 * gained an icon + label, which the old block-level `display: block` rule
 * would have stacked; make them icon-beside-label rows instead.
 *
 * `text-align: start` (not `left`) so the labels follow RTL, and the icon
 * keeps its own colour so the glyphs read as secondary to the text.
 * ============================================================ */
body.system-screen-body .system-member-plus-menu {
  width: 13.5rem !important;
}
body.system-screen-body .system-member-plus-menu button.system-member-plus-menu__item {
  display: flex !important;
  align-items: center !important;
  gap: 0.6rem !important;
  width: 100% !important;
  padding: 0.6rem 0.85rem !important;
  text-align: start !important;
  font-size: 0.86rem !important;
  line-height: 1.25 !important;
}
body.system-screen-body .system-member-plus-menu button.system-member-plus-menu__item .material-symbols-outlined {
  font-size: 1.15rem !important;
  color: #64748b !important;
  flex: 0 0 auto !important;
}
/* Delete is destructive — mark it, and separate it from the rest. */
body.system-screen-body .system-member-plus-menu button.system-member-plus-menu__item[data-row-delete] {
  color: #b42318 !important;
}
body.system-screen-body .system-member-plus-menu button.system-member-plus-menu__item[data-row-delete] .material-symbols-outlined {
  color: #b42318 !important;
}
html.dark body.system-screen-body .system-member-plus-menu button.system-member-plus-menu__item .material-symbols-outlined {
  color: #94a3b8 !important;
}

/* Two controls only: keep them together on one line at every width. The old
 * rules assumed six buttons and let the row wrap. */
body.system-screen-body .system-row-actions--member {
  flex-wrap: nowrap !important;
  align-items: center !important;
  gap: 0.5rem !important;
}

/* ============================================================
 * MEMBER TABLE — actions column now only needs two controls.
 *
 * The column was pinned at 15.45rem (247px), sized back when the row held
 * Add Membership plus five icon buttons. The member table's fixed column
 * widths then added up to 919px inside an 853px shell whose overflow-x is
 * `hidden`, so the tail of the actions column was simply clipped — the
 * reported cut-off.
 *
 * Two controls need 148px (the widest label, Kurdish) + 8px gap + 28px for
 * the menu trigger + cell padding, so 12.5rem is comfortable. Trimming the
 * name column as well brings the table back inside the shell.
 * ============================================================ */
body.system-screen-body #member-table-shell .system-data-table--members th:last-child,
body.system-screen-body #member-table-shell .system-data-table--members td:last-child,
body.system-screen-body .system-data-table--members th:last-child,
body.system-screen-body .system-member-actions-cell {
  width: 12.5rem !important;
  min-width: 12.5rem !important;
}
body.system-screen-body #member-table-shell .system-data-table--members th:first-child,
body.system-screen-body #member-table-shell .system-data-table--members td:first-child {
  width: 11.25rem !important;
  min-width: 11.25rem !important;
}

/* ============================================================
 * FREEZE / ACCESS-TYPE SUB-TABLE CARDS — remove the dead space.
 *
 * Each cell was a full-width stacked block, so a two-value row (From Date,
 * To Date) plus its delete button became three full-width lines with the
 * text hugging one edge and the rest of the card empty. Lay the value cells
 * out side by side and let the actions cell span underneath.
 *
 * The actions cell needs `min-width: 100%` to fill its span — `width` and
 * `justify-self: stretch` do not size a <td> grid item reliably.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-membership-subtable > tbody > tr {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 0.9rem !important;
    row-gap: 0 !important;
    align-items: start !important;
    padding: 0.5rem 0.75rem !important;
    margin-bottom: 0.5rem !important;
  }
  html body.system-screen-body .system-membership-subtable > tbody > tr > td {
    padding: 0.2rem 0 !important;
    line-height: 1.3 !important;
  }
  html body.system-screen-body .system-membership-subtable > tbody > tr > td[data-label]::before {
    margin-bottom: 0 !important;
  }
  /* Delete button row: spans the card and sits on the start edge. */
  html body.system-screen-body .system-membership-subtable > tbody > tr > td.system-subtable-actions,
  html body.system-screen-body .system-membership-subtable > tbody > tr > td:not([data-label]):last-child {
    grid-column: 1 / -1 !important;
    min-width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    display: flex !important;
    justify-content: flex-start !important;
    padding-top: 0.35rem !important;
  }
  /* The empty state ("No freeze dates added.") spans the whole card. */
  html body.system-screen-body .system-membership-subtable > tbody > tr > td.system-subtable-empty {
    grid-column: 1 / -1 !important;
    min-width: 100% !important;
    text-align: center !important;
  }
  /* Access-type rows carry more fields, so give them room to flow. */
  html body.system-screen-body .system-membership-subtable--access > tbody > tr {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* ============================================================
 * MODAL FOOTERS — one row, equal-width buttons.
 *
 * The mobile footer rules gave each button `flex: 1 1 45%` but forced the
 * Close / ghost button to `flex: 1 1 100%`, so it always dropped onto its own
 * line: "Save" above, "Close" below. The request is for them to sit next to
 * each other at the same size on the add / edit / view dialogs.
 *
 * `flex: 1 1 0` makes every button in a footer take an equal share of the
 * row; `min-width` is the escape hatch so a footer with three or four
 * buttons still wraps instead of squeezing the labels to nothing.
 *
 * The delete confirmations keep their own deliberately narrow buttons — they
 * are scoped by [data-system-modal$="-delete"] and excluded here.
 * ============================================================ */
@media (max-width: 1024px) {
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-transaction-modal-actions,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-transaction-modal-actions--view,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-member-modal-actions,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-member-editor-actions,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-form-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: stretch !important;
    justify-content: center !important;
    gap: 0.5rem !important;
  }
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-transaction-modal-actions > button,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-transaction-modal-actions--view > button,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-member-modal-actions > button,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-member-editor-actions > button,
  html body.system-screen-body .system-form-panel:not([data-system-modal$="-delete"]) .system-form-actions > button {
    /* Equal share of the row — this replaces both the old `1 1 45%` and the
     * `1 1 100%` that pushed Close onto its own line. */
    flex: 1 1 0 !important;
    min-width: 6.5rem !important;
    max-width: none !important;
    width: auto !important;
    margin: 0 !important;
  }
}

/* ============================================================
 * LIST-PAGE HEADERS — one line at every desktop width.
 *
 * The header row is `title | tools`, where tools = add button + search field
 * + advanced-search button. The search field was given a generous
 * flex-basis (17rem, growing to 32rem) and the tools group a 30rem basis,
 * which together exceed the content column once the sidebar takes its share
 * below ~1180px. The row then wrapped: on Membership the title ended up
 * alone and centred with the search underneath; on Coach the add button,
 * search field and search button each took their own line.
 *
 * Letting the search field shrink (`min-width: 0`, no fixed basis) keeps
 * everything on one line — title on the inline-start edge, tools on the
 * inline-end edge — matching how the wide-desktop layout already looks.
 *
 * Scoped to min-width 1025px: below that the mobile header deliberately
 * stacks and centres.
 * ============================================================ */
@media (min-width: 1025px) {
  html body.system-screen-body .system-toolbar.system-page-header,
  html body.system-screen-body .system-membership-ledger-header__row {
    display: flex !important;
    /* `flex-direction: row` is required, not just `nowrap`: a
     * `max-width: 1200px` rule sets the Membership header row to
     * `column`, which is what stacked its title above the search bar. */
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 0.9rem !important;
  }
  /* Title keeps its natural width and never wraps mid-word. */
  html body.system-screen-body .system-toolbar.system-page-header > .system-page-header-copy,
  html body.system-screen-body .system-membership-ledger-header__row > .system-page-header-copy {
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  /* Tools group: takes the remaining space and is allowed to shrink. */
  html body.system-screen-body .system-page-header-tools,
  html body.system-screen-body .system-member-toolbar,
  html body.system-screen-body .system-membership-ledger-searchbar {
    display: flex !important;
    flex: 1 1 auto !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    justify-content: flex-end !important;
    min-width: 0 !important;
    width: auto !important;
  }
  /* The search field is the flexible part — this is what stops the wrap. */
  html body.system-screen-body .system-toolbar-search,
  html body.system-screen-body .system-member-toolbar__search {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: 32rem !important;
    width: auto !important;
  }
  html body.system-screen-body .system-toolbar-search input,
  html body.system-screen-body .system-member-toolbar__search input {
    min-width: 0 !important;
    width: 100% !important;
  }
  /* Buttons stay at their intrinsic size. */
  html body.system-screen-body .system-page-header-tools .system-toolbar-actions,
  html body.system-screen-body .system-page-header-tools .system-icon-button,
  html body.system-screen-body .system-member-toolbar__action {
    flex: 0 0 auto !important;
  }
}

/* ============================================================
 * PHONE — Safe / Expense dashboard cards were clipped at the edges.
 *
 * Grid and flex items default to `min-width: auto`, which means a track can
 * never shrink below its content's min-content width. The Safe module's rows
 * have a wide min-content, so the chain
 *
 *     .system-panel-scroll (360px)
 *       └ .grid                 -> track forced to 392px
 *           └ card              -> 392px
 *               └ .system-safe-module  -> track forced to 328px
 *
 * blew past the viewport on both sides: at 360px the card started at -41px,
 * so the donut total, the row values and the date-range controls were cut
 * off. The document itself reported no overflow because the scroll container
 * clips it, which is why it read as "cut off" rather than scrollable.
 *
 * Releasing `min-width` at every level lets each track shrink to the
 * viewport; the row content already wraps (it is laid out as cards here).
 * ============================================================ */
@media (max-width: 767px) {
  /* Every direct child of the scroll area, and every grid cell inside it. */
  html body.system-screen-body .system-panel-scroll > *,
  html body.system-screen-body .system-panel-scroll .grid > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* The module boxes and their inner grids. */
  html body.system-screen-body .system-safe-module,
  html body.system-screen-body .system-expense-module,
  html body.system-screen-body .system-safe-module > *,
  html body.system-screen-body .system-expense-module > *,
  html body.system-screen-body .system-safe-module__table > *,
  html body.system-screen-body .system-expense-module__table-body > * {
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  /* Long figures must wrap rather than widen their row. */
  html body.system-screen-body .system-safe-module__row > *,
  html body.system-screen-body .system-expense-module__table-row > * {
    min-width: 0 !important;
    overflow-wrap: anywhere !important;
  }
  /* The donut sits centred and never wider than the card. */
  html body.system-screen-body .system-safe-module__ring-wrap,
  html body.system-screen-body .system-expense-module__ring-wrap {
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: center !important;
  }
  /* Date-range controls (Day/Week/Month/Year + the two date pickers) wrap
   * instead of forcing the card wider than the screen. */
  html body.system-screen-body .system-report-daterange,
  html body.system-screen-body .system-report-period-switch {
    flex-wrap: wrap !important;
    justify-content: center !important;
    min-width: 0 !important;
    max-width: 100% !important;
  }
  html body.system-screen-body .system-report-daterange > * {
    min-width: 0 !important;
    flex: 0 1 auto !important;
  }
}