/* ============================================================================
   ORG / SUPER-ADMIN — mobile polish (2026-06-20). Makes the admin portals fluid
   and aligned to the member app's 8pt spacing. All scoped to <=768px so desktop
   is byte-for-byte unchanged. Loaded LAST so it wins.

   Palette rules (org-admin): dark navy surface, gold #c8a03c = brand/active ONLY,
   red ONLY for errors. No off-brand greens. No icons/emoji glyphs.
   ============================================================================ */
@media (max-width: 768px) {

  /* ==========================================================================
     0. LOCAL TOKENS — keep this file self-contained even if a token is missing.
     ========================================================================== */
  .super-admin-app {
    --oa-gold: #c8a03c;
    --oa-gold-tint: rgba(200, 160, 60, 0.16);
    --oa-card: #142238;
    --oa-card-2: #1a2942;
    --oa-border: rgba(255, 255, 255, 0.10);
    --oa-text: #f4f6fb;
    --oa-muted: rgba(244, 246, 251, 0.62);
    --oa-faint: rgba(244, 246, 251, 0.42);
  }

  /* --- Logo: gold brand badge (was a dark #1a1a1a box, near-invisible on the
         navy header). Gold square + navy "P", matching the brand. --- */
  .super-admin-app .super-admin-logo .pioneer-mark {
    background: var(--gold, #c8a03c) !important;
    color: #0a1628 !important;
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    font-size: 1.5rem !important;
    line-height: 1 !important;
    border-radius: 9px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-shadow: none !important;
  }
  .super-admin-app .super-admin-title { font-size: 1rem !important; font-weight: 700 !important; }

  /* ==========================================================================
     1. HEADER — one compact bar. Logo+title left, Sign Out right (same row),
        nav scrolls underneath. Reclaims the wasted "Sign Out alone" row.
     ========================================================================== */
  .super-admin-app .super-admin-header {
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: var(--sp-2, 8px) var(--sp-3, 12px) !important;
    padding: var(--sp-3, 12px) var(--edge-mobile, 16px) !important;
    position: static !important;
  }
  .super-admin-app .super-admin-logo { flex: 0 1 auto !important; min-width: 0 !important; gap: var(--sp-2, 8px) !important; }
  .super-admin-app .super-admin-user { flex: 0 0 auto !important; gap: var(--sp-2, 8px) !important; margin: 0 !important; }
  .super-admin-app .admin-user-name { display: none !important; }   /* redundant on mobile; Sign Out stays */
  .super-admin-app .admin-logout-btn {
    padding: 0.55rem 0.9rem !important;
    min-height: var(--touch-min, 44px) !important;
    font-size: 0.85rem !important;
    display: inline-flex !important;
    align-items: center !important;
  }

  /* Nav = full-width horizontal scroller (no wrap → header stays short).
     Right-edge fade mask signals there's more to scroll. --edge-mobile gutters
     so the last item isn't clipped flush to the viewport edge. */
  .super-admin-app .super-admin-nav {
    order: 3 !important;
    flex: 1 1 100% !important;
    width: 100% !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: var(--sp-1, 4px) !important;
    padding: 0 var(--edge-mobile, 16px) var(--sp-1, 4px) !important;
    margin: 0 calc(-1 * var(--edge-mobile, 16px)) !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%) !important;
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 28px), transparent 100%) !important;
  }
  .super-admin-app .super-admin-nav::-webkit-scrollbar { display: none !important; }
  .super-admin-app .super-admin-nav-item {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: var(--touch-min, 44px) !important;
    padding: 0.5rem 0.85rem !important;
    font-size: 0.85rem !important;
    scroll-snap-align: start !important;
  }
  /* Active tab clearly readable in gold (brand = active). */
  .super-admin-app .super-admin-nav-item.active {
    color: var(--oa-gold, #c8a03c) !important;
  }

  /* ==========================================================================
     2. CONTENT — app edge inset, no clipping, heading visible, 8pt rhythm.
     ========================================================================== */
  .super-admin-app .super-admin-content,
  #org-admin-content, #super-admin-content {
    padding: var(--sp-4, 16px) var(--edge-mobile, 16px) calc(var(--sp-6, 24px) + env(safe-area-inset-bottom, 0px)) !important;
    max-width: none !important;
    overflow-x: hidden !important;   /* nothing bleeds past 393px */
  }
  /* Every direct content block respects edge gutters & never overflows. */
  #org-admin-content .admin-page-container,
  #org-admin-content .invites-panel,
  #org-admin-content .admin-dashboard {
    max-width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  #org-admin-content * { max-width: 100% !important; }   /* no child can bust the width */

  #org-admin-content .page-header, #super-admin-content .page-header {
    margin: 0 0 var(--sp-4, 16px) !important;
    background: transparent !important;
    padding: 0 !important;
  }
  #org-admin-content .page-header h1, #super-admin-content .page-header h1 {
    font-size: 1.5rem !important;
    margin: 0 0 var(--sp-1, 4px) !important;
    color: var(--oa-text, #f4f6fb) !important;
  }
  #org-admin-content .page-header .page-subtitle,
  #org-admin-content .page-subtitle {
    font-size: 0.85rem !important;
    color: var(--oa-muted, rgba(244,246,251,0.62)) !important;
    margin: 0 !important;
  }
  /* Section <h2> wrappers used across Analytics / Settings (inline padding 1.5rem). */
  #org-admin-content h2 { color: var(--oa-text, #f4f6fb) !important; }

  /* ==========================================================================
     3. STAT CARDS — tight 2-up, compressed to 8pt, dark surface.
        Kills the empty .stat-icon box and the big dead gaps inside the cards.
     ========================================================================== */
  #org-admin-content .stats-grid, #super-admin-content .stats-grid,
  #org-admin-content .stat-card-container, #super-admin-content .stat-card-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: var(--sp-2, 8px) !important;
    margin: 0 0 var(--sp-4, 16px) !important;
  }
  #org-admin-content .stat-card, #super-admin-content .stat-card {
    padding: var(--sp-3, 12px) !important;
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 10px !important;
    display: flex !important;
    flex-direction: column !important;
    gap: var(--sp-1, 4px) !important;
  }
  #org-admin-content .stat-card-warning, #super-admin-content .stat-card-warning {
    background: var(--oa-card, #142238) !important;          /* no light-mode yellow wash */
    border-left: 3px solid var(--oa-gold, #c8a03c) !important;
  }
  /* The empty .stat-icon boxes just add height on mobile. */
  #org-admin-content .stat-icon, #super-admin-content .stat-icon { display: none !important; }
  #org-admin-content .stat-value, #super-admin-content .stat-card h3 {
    font-size: 1.5rem !important;
    line-height: 1.05 !important;
    margin: 0 !important;
    color: var(--oa-text, #f4f6fb) !important;
  }
  #org-admin-content .stat-label, #super-admin-content .stat-card p {
    font-size: 0.72rem !important;
    margin: 0 !important;
    color: var(--oa-muted, rgba(244,246,251,0.62)) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
  }
  /* The breakdown lines: pull them together (was a big blank row inside cards). */
  #org-admin-content .stat-breakdown, #super-admin-content .stat-breakdown {
    gap: var(--sp-1, 4px) var(--sp-2, 8px) !important;
    margin-top: var(--sp-1, 4px) !important;
    font-size: 0.7rem !important;
  }
  #org-admin-content .stat-breakdown span, #super-admin-content .stat-breakdown span {
    padding: 0.15rem 0.4rem !important;
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--oa-muted, rgba(244,246,251,0.62)) !important;
    border-radius: 4px !important;
  }

  /* ==========================================================================
     4. GENERIC TABLE -> CARD  (Users, Pending, Activity, Recent Users, Orgs)
        thead hidden; each <tr> = a bordered navy card; each <td> = a flex row
        with the column label on the left (data-label) and value on the right.
        Wins over the light-theme generic rule in styles.css (loaded earlier).
     ========================================================================== */
  #org-admin-content .table-container,
  #super-admin-content .table-container {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
  }
  #org-admin-content .data-table,
  #org-admin-content .data-table tbody,
  #super-admin-content .data-table,
  #super-admin-content .data-table tbody { display: block !important; }
  #org-admin-content .data-table thead,
  #super-admin-content .data-table thead { display: none !important; }

  #org-admin-content .data-table tbody tr,
  #super-admin-content .data-table tbody tr {
    display: block !important;
    margin: 0 0 var(--sp-3, 12px) !important;
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
    padding: 0.6rem !important;          /* 9.6px ≈ 8pt rhythm */
    box-shadow: none !important;
  }
  #org-admin-content .data-table tbody tr:hover,
  #super-admin-content .data-table tbody tr:hover {
    background: var(--oa-card, #142238) !important;
    box-shadow: none !important;
  }

  /* Each cell = label : value on one line. */
  #org-admin-content .data-table tbody td,
  #super-admin-content .data-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: var(--sp-3, 12px) !important;
    padding: 0.3rem 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    text-align: right !important;
    font-size: 0.85rem !important;
    color: var(--oa-text, #f4f6fb) !important;
    background: transparent !important;
    min-height: 0 !important;
  }
  #org-admin-content .data-table tbody td:last-child,
  #super-admin-content .data-table tbody td:last-child { border-bottom: none !important; }

  /* Column label on the left (populated by data-label attrs the renderer adds). */
  #org-admin-content .data-table tbody td::before,
  #super-admin-content .data-table tbody td::before {
    content: attr(data-label);
    display: inline !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--oa-muted, rgba(244,246,251,0.62)) !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  /* If a cell has no data-label, drop the empty label box so the value gets the row. */
  #org-admin-content .data-table tbody td:not([data-label])::before,
  #super-admin-content .data-table tbody td:not([data-label])::before { content: ""; display: none !important; }

  /* First cell (name) reads as a heading line, value left-aligned & bold. */
  #org-admin-content .data-table tbody td:first-child,
  #super-admin-content .data-table tbody td:first-child {
    justify-content: flex-start !important;
    text-align: left !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    padding-bottom: 0.45rem !important;
  }
  #org-admin-content .data-table tbody td:first-child::before,
  #super-admin-content .data-table tbody td:first-child::before { display: none !important; }
  #org-admin-content .data-table tbody td strong,
  #super-admin-content .data-table tbody td strong { color: var(--oa-text, #f4f6fb) !important; }
  #org-admin-content .data-table tbody td small,
  #org-admin-content .data-table tbody td div {
    color: inherit !important;
  }

  /* Actions cell: full-width row of tappable buttons (no label). */
  #org-admin-content .data-table tbody td.actions-cell,
  #super-admin-content .data-table tbody td.actions-cell {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    gap: var(--sp-2, 8px) !important;
    justify-content: stretch !important;
    border-bottom: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.06) !important;
    margin-top: var(--sp-1, 4px) !important;
    padding-top: var(--sp-2, 8px) !important;
  }
  #org-admin-content .data-table tbody td.actions-cell::before,
  #super-admin-content .data-table tbody td.actions-cell::before { display: none !important; }
  #org-admin-content .data-table .action-btn,
  #super-admin-content .data-table .action-btn,
  #org-admin-content .actions-cell .action-btn {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: var(--touch-min, 44px) !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    margin: 0 !important;
    font-size: 0.85rem !important;
  }

  /* ==========================================================================
     5. BADGES / STATUS — gold for ACTIVE (brand), neutral for suspended,
        gold-tint for pending. Kills the green ACTIVE pill everywhere on mobile.
        Red stays reserved for genuine error states only.
     ========================================================================== */
  #org-admin-content .badge,
  #super-admin-content .badge {
    display: inline-block !important;
    padding: 0.2rem 0.55rem !important;
    border-radius: 999px !important;
    font-size: 0.7rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    line-height: 1.4 !important;
  }
  #org-admin-content .badge-status-active,
  #super-admin-content .badge-status-active,
  #org-admin-content .status-badge.active,
  #super-admin-content .status-badge.active {
    background: var(--oa-gold-tint, rgba(200,160,60,0.16)) !important;
    color: var(--oa-gold, #c8a03c) !important;
  }
  #org-admin-content .badge-status-suspended,
  #super-admin-content .badge-status-suspended {
    background: rgba(255, 255, 255, 0.08) !important;
    color: var(--oa-muted, rgba(244,246,251,0.62)) !important;
  }
  #org-admin-content .badge-status-pending,
  #super-admin-content .badge-status-pending,
  #org-admin-content .badge-status-trial,
  #org-admin-content .badge-plan,
  #org-admin-content .badge-trial {
    background: var(--oa-gold-tint, rgba(200,160,60,0.16)) !important;
    color: var(--oa-gold, #c8a03c) !important;
  }

  /* Pending Approvals: hard-coded green Approve / red Reject inline buttons.
     Approve -> gold; Reject keeps red (destructive). Equal-width, 44px. */
  #org-admin-content .action-btn-approve,
  #org-admin-content .action-btn-activate {
    background: var(--oa-gold, #c8a03c) !important;
    color: #0a1628 !important;
    border: none !important;
    font-weight: 700 !important;
  }
  #org-admin-content .action-btn-reject,
  #org-admin-content .action-btn-delete {
    background: transparent !important;
    color: #ff6b6b !important;            /* red = destructive only */
    border: 1px solid rgba(255, 107, 107, 0.5) !important;
  }
  #org-admin-content .action-btn-view,
  #org-admin-content .action-btn-suspend {
    background: rgba(255, 255, 255, 0.06) !important;
    color: var(--oa-text, #f4f6fb) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
  }

  /* ==========================================================================
     6. DASHBOARD "Recent Users" — keep the condensed 2-line card working.
        The renderer here has NO data-label/actions, so override the generic
        flex-row rule above with an explicit 2x2 grid (name+status / email+date).
     ========================================================================== */
  #org-admin-content .dashboard-section { margin: 0 0 var(--sp-4, 16px) !important; }
  #org-admin-content .dashboard-section h2 {
    font-size: 1.05rem !important;
    margin: 0 0 var(--sp-2, 8px) !important;
    color: var(--oa-text, #f4f6fb) !important;
  }
  #org-admin-content .dashboard-section .data-table tbody tr {
    display: grid !important;
    grid-template-columns: 1fr auto !important;
    gap: 2px var(--sp-2, 8px) !important;
    align-items: center !important;
    padding: 0.55rem 0.7rem !important;
  }
  #org-admin-content .dashboard-section .data-table td {
    display: block !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
    text-align: left !important;
    min-height: 0 !important;
  }
  #org-admin-content .dashboard-section .data-table td::before { display: none !important; content: "" !important; }
  #org-admin-content .dashboard-section .data-table td:nth-child(1) { font-weight: 700 !important; font-size: 0.92rem !important; }                 /* name */
  #org-admin-content .dashboard-section .data-table td:nth-child(2) { grid-column: 1 !important; font-size: 0.78rem !important; color: var(--oa-muted, rgba(244,246,251,0.62)) !important; } /* email */
  #org-admin-content .dashboard-section .data-table td:nth-child(3) { grid-column: 2 !important; grid-row: 1 !important; text-align: right !important; } /* status */
  #org-admin-content .dashboard-section .data-table td:nth-child(4) { grid-column: 2 !important; grid-row: 2 !important; text-align: right !important; font-size: 0.76rem !important; color: var(--oa-faint, rgba(244,246,251,0.42)) !important; } /* last login */

  /* ==========================================================================
     7. ACTIVITY (compliance) — the renderer keeps its own cell() markup; just
        re-skin the inline light colours so it sits on the dark shell. The
        per-metric labels (Food/Fitness/Water) are added by the renderer.
     ========================================================================== */
  #org-admin-content #compliance-tbody td,
  #org-admin-content #compliance-tbody td * { color: var(--oa-text, #f4f6fb) !important; }
  #org-admin-content #compliance-tbody td div[style*="color"],
  #org-admin-content #compliance-tbody td small { color: var(--oa-muted, rgba(244,246,251,0.62)) !important; }
  #org-admin-content #compliance-tbody tr { border-color: var(--oa-border, rgba(255,255,255,0.1)) !important; }

  /* ==========================================================================
     8. SEARCH / FILTER BARS — kill the white light-theme inputs; dark navy,
        44px tall, tight 8pt stack. Covers Users + Activity filter wrappers
        (inline background:#ffffff containers) and any white search box.
     ========================================================================== */
  /* Filter wrapper cards that are inline-styled white -> navy + tight padding. */
  #org-admin-content .admin-page-container > div[style*="background: #ffffff"],
  #org-admin-content .admin-page-container > div[style*="background:#ffffff"],
  #org-admin-content .admin-page-container > div[style*="background: white"],
  #org-admin-content .admin-page-container > div[style*="background:white"] {
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 10px !important;
    padding: var(--sp-3, 12px) !important;
    margin: 0 0 var(--sp-4, 16px) !important;
  }
  /* The flex row of search + select: stack tight. */
  #org-admin-content #customer-search,
  #org-admin-content #customer-status-filter,
  #org-admin-content #compliance-search {
    width: 100% !important;
    box-sizing: border-box !important;
    min-height: var(--touch-min, 44px) !important;
    padding: 0 var(--sp-3, 12px) !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--oa-text, #f4f6fb) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
    font-size: 16px !important;   /* prevent iOS zoom */
  }
  #org-admin-content #customer-search::placeholder,
  #org-admin-content #compliance-search::placeholder { color: var(--oa-faint, rgba(244,246,251,0.42)) !important; }
  /* The two-control row -> single tight column. */
  #org-admin-content #customer-search ~ *,
  #org-admin-content div[style*="flex-wrap: wrap"]:has(> div > #customer-search) {
    gap: var(--sp-2, 8px) !important;
  }
  #org-admin-content div:has(> #customer-search),
  #org-admin-content div:has(> #customer-status-filter) {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    width: 100% !important;
  }
  #org-admin-content #customer-status-filter { margin-top: var(--sp-2, 8px) !important; }

  /* ==========================================================================
     9. INLINE-STYLED FORM SECTIONS (Analytics, Organization Details, Branding)
        These render with hardcoded white cards + grey/green text + huge rem
        spacing. Re-skin to a single-column dark card stack on 8pt with no
        right-edge bleed. We target the inline white background reliably.
     ========================================================================== */

  /* Section wrappers that use inline `padding:1.5rem;margin-bottom:2rem` (h2 + card) */
  #org-admin-content .admin-page-container > div[style*="padding: 1.5rem"] {
    padding: 0 !important;
    margin: 0 0 var(--sp-6, 24px) !important;
  }
  #org-admin-content .admin-page-container > div[style*="padding: 1.5rem"] > h2 {
    font-size: 1.15rem !important;
    margin: 0 0 var(--sp-3, 12px) !important;
    color: var(--oa-text, #f4f6fb) !important;
  }

  /* Any inline white card -> dark navy card, 16px padding, full width. */
  #org-admin-content div[style*="background: #ffffff"],
  #org-admin-content div[style*="background:#ffffff"],
  #org-admin-content div[style*="background: white"],
  #org-admin-content div[style*="background:white"],
  #org-admin-content .admin-section[style*="background: white"],
  #org-admin-content .admin-section[style*="background:#fff"] {
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 10px !important;
    padding: var(--sp-4, 16px) !important;
    box-sizing: border-box !important;
  }

  /* Grids inside those cards -> single column, tight 8pt rows. */
  #org-admin-content div[style*="grid-template-columns: repeat(auto-fit"] {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: var(--sp-3, 12px) !important;
  }
  /* Two-up side-by-side blocks (workout/nutrition, top exercises) -> stack. */
  #org-admin-content div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
    gap: var(--sp-3, 12px) !important;
    margin-bottom: var(--sp-4, 16px) !important;
  }

  /* Label/value pairs inside analytics & settings cards: compress + recolour.
     Labels (#6b7280 grey) -> muted; values -> readable, body scale not display. */
  #org-admin-content div[style*="color: #6b7280"] {
    color: var(--oa-muted, rgba(244,246,251,0.62)) !important;
    margin-bottom: var(--sp-1, 4px) !important;
    font-size: 0.8rem !important;
  }
  /* Big display values (#1f2937 / #111827 dark-on-dark, and oversized) -> light + smaller. */
  #org-admin-content div[style*="color: #1f2937"],
  #org-admin-content div[style*="color:#1f2937"],
  #org-admin-content div[style*="color: #111827"],
  #org-admin-content span[style*="color: #1f2937"],
  #org-admin-content div[style*="color: #374151"] {
    color: var(--oa-text, #f4f6fb) !important;
  }
  /* Tame the heading-scale stat numerals so nothing bleeds off the bottom. */
  #org-admin-content div[style*="font-size: 3.5rem"],
  #org-admin-content div[style*="font-size: 3rem"] { font-size: 2rem !important; line-height: 1.1 !important; }
  #org-admin-content div[style*="font-size: 2.5rem"] { font-size: 1.8rem !important; line-height: 1.1 !important; }
  #org-admin-content div[style*="font-size: 1.875rem"],
  #org-admin-content div[style*="font-size: 1.75rem"],
  #org-admin-content div[style*="font-size: 1.5rem"] { font-size: 1.4rem !important; line-height: 1.15 !important; }
  #org-admin-content div[style*="font-size: 1.25rem"] { font-size: 1.2rem !important; }

  /* Off-brand greens / blues in analytics & settings values -> gold or light.
     (iOS green #34C759, blue #007AFF/#3b82f6, emerald #10b981, #16a34a) */
  #org-admin-content [style*="color: #34C759"],
  #org-admin-content [style*="color:#34C759"],
  #org-admin-content [style*="color: #16a34a"] { color: var(--oa-gold, #c8a03c) !important; }
  #org-admin-content [style*="color: #007AFF"],
  #org-admin-content [style*="color:#007AFF"],
  #org-admin-content [style*="color: #3b82f6"],
  #org-admin-content [style*="color: #10b981"] { color: var(--oa-text, #f4f6fb) !important; }

  /* Progress bars: any green fill -> gold; track -> faint. */
  #org-admin-content .ag-bar-track { background: rgba(255, 255, 255, 0.08) !important; border-radius: 6px !important; height: 6px !important; margin-top: var(--sp-2, 8px) !important; }
  #org-admin-content .ag-bar-fill, #org-admin-content .ag-bar-green, #org-admin-content .ag-bar-gold { background: var(--oa-gold, #c8a03c) !important; border-radius: 6px !important; }

  /* Light-grey list dividers inside analytics lists -> navy border. */
  #org-admin-content div[style*="border-bottom: 1px solid #e5e7eb"] { border-bottom-color: var(--oa-border, rgba(255,255,255,0.1)) !important; }

  /* Status value text in Organization Details (inline statusColors greens). */
  #org-admin-content div[style*="text-transform: uppercase"][style*="color"] { color: var(--oa-text, #f4f6fb) !important; }

  /* ==========================================================================
     10. BRANDING — Current Branding row, dropzone, colour pickers stack clean.
     ========================================================================== */
  /* Current Branding: the flex row wraps to a tidy single column. */
  #org-admin-content .admin-section > div[style*="display: flex"][style*="flex-wrap: wrap"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--sp-3, 12px) !important;
  }
  /* Each label+swatch+hex sub-row: full width, baseline, tight. */
  #org-admin-content .admin-section div[style*="display: flex"][style*="align-items: center"][style*="gap: 0.5rem"] {
    width: 100% !important;
    gap: var(--sp-2, 8px) !important;
  }
  /* Logo dropzone: shrink the tall empty box, centre it. */
  #org-admin-content div[style*="border: 2px dashed"] {
    width: 100% !important;
    max-width: 160px !important;
    height: 96px !important;
    margin: 0 auto !important;
  }
  /* Colour picker rows: swatch + hex on one full-width line, 44px tall. */
  #org-admin-content input[type="color"] {
    width: 48px !important;
    height: var(--touch-min, 44px) !important;
    flex: 0 0 48px !important;
    padding: 0 !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
    background: transparent !important;
  }
  #org-admin-content input[type="text"][id$="-color-text"],
  #org-admin-content input[type="text"][id*="color"] {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    min-height: var(--touch-min, 44px) !important;
    box-sizing: border-box !important;
    background: rgba(255, 255, 255, 0.04) !important;
    color: var(--oa-text, #f4f6fb) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
    font-size: 16px !important;
  }
  /* Small static colour swatches (Current Branding): give the dark one a border. */
  #org-admin-content div[style*="border: 2px solid #d1d5db"] {
    border: 1px solid rgba(255, 255, 255, 0.35) !important;
    box-sizing: border-box !important;
  }
  /* Branding helper text + upload buttons: tighten + recolour. */
  #org-admin-content div[style*="color: #6b7280"] p,
  #org-admin-content div[style*="color: #374151"] p { color: var(--oa-muted, rgba(244,246,251,0.62)) !important; }
  #org-admin-content #upload-logo-btn {
    background: var(--oa-gold, #c8a03c) !important;
    color: #0a1628 !important;
    min-height: var(--touch-min, 44px) !important;
    border: none !important;
  }
  #org-admin-content #remove-logo-btn {
    min-height: var(--touch-min, 44px) !important;
    background: transparent !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255, 107, 107, 0.5) !important;
  }

  /* ==========================================================================
     11. TIMETABLE — page banner, sub-tabs scroller, class cards.
     ========================================================================== */
  /* Page-title banner: respect edge gutters, no right-edge bleed. */
  #org-admin-content .page-header[style*="var(--navy-light)"],
  #org-admin-content .page-header[style*="navy-light"] {
    padding: var(--sp-4, 16px) !important;
    border-radius: 10px !important;
    margin: 0 0 var(--sp-4, 16px) !important;
  }
  #org-admin-content .page-header[style*="navy-light"] h1 { font-size: 1.5rem !important; }

  /* Section header + Add Class: stack, button full-width below the heading. */
  #org-admin-content .panel-header {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--sp-2, 8px) !important;
    margin-bottom: var(--sp-3, 12px) !important;
  }
  #org-admin-content .panel-header h2 { color: var(--oa-text, #f4f6fb) !important; font-size: 1.15rem !important; }
  #org-admin-content .panel-header p { color: var(--oa-muted, rgba(244,246,251,0.62)) !important; }
  #org-admin-content .panel-header .btn,
  #org-admin-content #btn-add-class {
    width: 100% !important;
    min-height: var(--touch-min, 44px) !important;
  }

  /* Sub-tabs (Classes/Instructors/Schedule/Bookings/Settings) -> scroll strip. */
  #org-admin-content .admin-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    gap: var(--sp-1, 4px) !important;
    margin: 0 calc(-1 * var(--edge-mobile, 16px)) var(--sp-4, 16px) !important;
    padding: 0 var(--edge-mobile, 16px) !important;
    scrollbar-width: none !important;
    -webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%) !important;
            mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%) !important;
  }
  #org-admin-content .admin-tabs::-webkit-scrollbar { display: none !important; }
  #org-admin-content .timetable-tab {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    min-height: var(--touch-min, 44px) !important;
    padding: 0.6rem 0.9rem !important;
  }

  /* Classes table -> dark navy cards via the generic rule, with timetable's own
     inline white table re-skinned (it doesn't use .data-table). */
  #org-admin-content .classes-table {
    background: transparent !important;
    border: none !important;
    overflow: visible !important;
  }
  #org-admin-content .classes-table table,
  #org-admin-content .classes-table tbody { display: block !important; }
  #org-admin-content .classes-table thead { display: none !important; }
  #org-admin-content .classes-table tbody tr {
    display: block !important;
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
    padding: var(--sp-3, 12px) !important;
    margin: 0 0 var(--sp-3, 12px) !important;
  }
  #org-admin-content .classes-table tbody td {
    display: flex !important;
    justify-content: space-between !important;
    align-items: baseline !important;
    gap: var(--sp-3, 12px) !important;
    padding: 0.3rem 0 !important;
    border: none !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06) !important;
    color: var(--oa-text, #f4f6fb) !important;
    text-align: right !important;
    font-size: 0.85rem !important;
  }
  #org-admin-content .classes-table tbody td::before {
    content: attr(data-label);
    flex: 0 0 auto !important;
    font-weight: 600 !important;
    font-size: 0.72rem !important;
    text-transform: uppercase !important;
    letter-spacing: 0.03em !important;
    color: var(--oa-muted, rgba(244,246,251,0.62)) !important;
    text-align: left !important;
    white-space: nowrap !important;
  }
  #org-admin-content .classes-table tbody td:not([data-label])::before { content: ""; }
  /* First cell (class name + desc) = heading line. */
  #org-admin-content .classes-table tbody td:first-child {
    justify-content: flex-start !important;
    text-align: left !important;
    border-bottom: none !important;
  }
  #org-admin-content .classes-table tbody td:first-child::before { display: none !important; }
  #org-admin-content .classes-table tbody td:first-child > div:first-child { font-size: 0.95rem !important; font-weight: 700 !important; color: var(--oa-text, #f4f6fb) !important; }
  #org-admin-content .classes-table tbody td div[style*="max-width: 300px"] { max-width: 100% !important; white-space: normal !important; color: var(--oa-muted, rgba(244,246,251,0.62)) !important; }
  /* Capacity green/red inline text -> light (semantics via wording, not colour). */
  #org-admin-content .classes-table tbody td span[style*="color: #059669"],
  #org-admin-content .classes-table tbody td span[style*="color:#059669"] { color: var(--oa-text, #f4f6fb) !important; }
  /* Edit/Delete footer: equal width, 44px, spaced. */
  #org-admin-content .classes-table tbody td:last-child { border-bottom: none !important; border-top: 1px solid rgba(255,255,255,0.06) !important; padding-top: var(--sp-2, 8px) !important; margin-top: var(--sp-1, 4px) !important; }
  #org-admin-content .classes-table tbody td:last-child::before { display: none !important; }
  #org-admin-content .classes-table tbody td:last-child > div {
    display: flex !important;
    width: 100% !important;
    gap: var(--sp-3, 12px) !important;
    justify-content: stretch !important;
  }
  #org-admin-content .btn-edit-class,
  #org-admin-content .btn-delete-class {
    flex: 1 1 0 !important;
    min-height: var(--touch-min, 44px) !important;
    font-size: 0.85rem !important;
  }
  #org-admin-content .btn-edit-class { background: rgba(255,255,255,0.06) !important; color: var(--oa-text, #f4f6fb) !important; border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important; }
  #org-admin-content .btn-delete-class { background: transparent !important; color: #ff6b6b !important; border: 1px solid rgba(255, 107, 107, 0.5) !important; }

  /* ==========================================================================
     12. TEAM & INVITES — stack header + full-width CTA, tight 8pt, dark cards.
     ========================================================================== */
  #org-admin-content .invites-panel { padding: 0 !important; margin: 0 !important; }
  #org-admin-content .invites-panel > h2 { font-size: 1.5rem !important; color: var(--oa-text, #f4f6fb) !important; margin: 0 0 var(--sp-1, 4px) !important; }
  #org-admin-content .invites-panel > p { color: var(--oa-muted, rgba(244,246,251,0.62)) !important; margin: 0 0 var(--sp-4, 16px) !important; }
  #org-admin-content .seat-card {
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 10px !important;
    padding: var(--sp-3, 12px) !important;
    margin: 0 0 var(--sp-4, 16px) !important;
  }
  #org-admin-content .seat-card > div:first-child { margin-bottom: var(--sp-2, 8px) !important; }
  #org-admin-content .seat-card p { margin: var(--sp-2, 8px) 0 0 !important; color: var(--oa-muted, rgba(244,246,251,0.62)) !important; }
  /* "Invite links" heading row + + NEW INVITE: stack, button full-width. */
  #org-admin-content .invites-panel > div[style*="justify-content: space-between"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: var(--sp-2, 8px) !important;
    margin: 0 0 var(--sp-3, 12px) !important;
  }
  #org-admin-content .invites-panel h3 { color: var(--oa-text, #f4f6fb) !important; margin: 0 !important; }
  #org-admin-content #new-invite-btn {
    width: 100% !important;
    min-height: var(--touch-min, 44px) !important;
  }
  #org-admin-content #invites-list > p { color: var(--oa-muted, rgba(244,246,251,0.62)) !important; }
  #org-admin-content .invite-row {
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 8px !important;
    padding: var(--sp-3, 12px) !important;
    gap: var(--sp-2, 8px) !important;
  }
  #org-admin-content .invite-row .btn { min-height: var(--touch-min, 44px) !important; }
  #org-admin-content .copy-invite-btn { flex: 1 1 auto !important; }
  #org-admin-content .revoke-invite-btn {
    flex: 1 1 auto !important;
    background: transparent !important;
    color: #ff6b6b !important;
    border: 1px solid rgba(255, 107, 107, 0.5) !important;
  }

  /* ==========================================================================
     13. EMPTY STATES — kill the inline white card; dark, centred, no green.
        (Pending Approvals "No Pending Approvals", etc. The emoji glyph itself
        is being removed in app.js; this just re-skins the surrounding card.)
     ========================================================================== */
  #org-admin-content div[style*="padding: 3rem"][style*="text-align: center"] {
    background: var(--oa-card, #142238) !important;
    border: 1px solid var(--oa-border, rgba(255,255,255,0.1)) !important;
    border-radius: 10px !important;
    padding: var(--sp-6, 24px) var(--sp-4, 16px) !important;
  }
  #org-admin-content div[style*="padding: 3rem"][style*="text-align: center"] h2 { color: var(--oa-text, #f4f6fb) !important; }
  #org-admin-content div[style*="padding: 3rem"][style*="text-align: center"] p { color: var(--oa-muted, rgba(244,246,251,0.62)) !important; }
  /* Belt-and-braces: hide any oversized inline emoji block in an empty state
     if it survives in the DOM (raw glyph at font-size:3rem). */
  #org-admin-content div[style*="font-size: 3rem"]:not([class]) { display: none !important; }

  /* ==========================================================================
     14. GLOBAL TAP-TARGET FLOOR for admin controls (buttons / selects / inputs).
     ========================================================================== */
  #org-admin-content .btn,
  #org-admin-content button:not(.admin-modal-close):not(.oca-switch *),
  #org-admin-content select,
  #org-admin-content input:not([type="checkbox"]):not([type="color"]) {
    min-height: var(--touch-min, 44px) !important;
  }

  /* ==========================================================================
     15. INLINE / RAW TABLE FALLBACK — anything that is NOT a .data-table (so it
     is not picked up by the §4 table->card reflow) must still NOT bleed past the
     viewport. This covers:
       - inline-styled raw <table> in .table-container (no .data-table class)
       - the programme-builder / workout-details modal #workouts-table
         (rendered in an .admin-modal, outside #*-admin-content)
     Strategy: the nearest scroll parent clips + scrolls horizontally, and the raw
     table keeps a sensible min-width so columns stay legible while panning. The
     §4 card reflow for .data-table is unaffected (it overrides this with display
     rules at equal specificity loaded in the same file, below in source order is
     not relied on — §4 uses higher-specificity #*-admin-content selectors). */

  /* Scroll containers: clip the bleed, allow horizontal pan, momentum on iOS.
     Exclude containers that hold a .data-table — those are reflowed to cards in
     §4 and must keep overflow:visible (no horizontal scrollbar on a card stack). */
  #org-admin-content .table-container:not(:has(.data-table)),
  #super-admin-content .table-container:not(:has(.data-table)),
  .admin-modal-body {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* Raw tables (NOT .data-table, NOT the already-handled .classes-table): keep a
     legible min-width and let the parent scroll them instead of bursting the page. */
  #org-admin-content .table-container > table:not(.data-table):not(.classes-table),
  #super-admin-content .table-container > table:not(.data-table):not(.classes-table),
  .admin-modal-body table,
  .admin-modal-body #workouts-table {
    display: table !important;
    width: max-content !important;
    min-width: 100% !important;
    border-collapse: collapse !important;
  }
  /* Padding on raw-table cells trimmed to 8pt so the scroll distance is shorter. */
  .admin-modal-body table th,
  .admin-modal-body table td,
  #org-admin-content .table-container > table:not(.data-table) th,
  #org-admin-content .table-container > table:not(.data-table) td {
    padding: var(--sp-2, 8px) var(--sp-3, 12px) !important;
    white-space: nowrap !important;
  }

  /* The workout-details .admin-modal: follow the member modal contract so it does
     not sit as a tiny clipped card. Full-screen flex column, body scrolls. The
     inline white surface stays (admin tables are light-themed here) — we only fix
     the geometry so nothing bleeds and the close button stays reachable. */
  .admin-modal {
    align-items: stretch !important;
    justify-content: stretch !important;
    padding: 0 !important;
  }
  .admin-modal .admin-modal-content {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    max-height: 100dvh !important;
    margin: 0 !important;
    border-radius: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;   /* the .admin-modal-body owns the scroll */
  }
  .admin-modal .admin-modal-header {
    flex: 0 0 auto !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
  }
  .admin-modal .admin-modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: auto !important;
    padding: var(--sp-4, 16px) !important;
    padding-bottom: calc(var(--sp-4, 16px) + env(safe-area-inset-bottom, 0px)) !important;
  }
  .admin-modal .admin-modal-close {
    min-width: var(--touch-min, 44px) !important;
    min-height: var(--touch-min, 44px) !important;
  }
}