/* ============================================================================
   ADMIN = APP THEME (authoritative, loads LAST).
   Super-admin + org-admin must look like the member app: navy surfaces, light
   readable text — everywhere, especially the mobile card-transform of data tables
   and the org/user list "white cards" that were white-on-white / unreadable.
   Broad class-pattern selectors because the brittle inline-style approach kept
   missing class-based whites.
   ============================================================================ */

#super-admin-content, #org-admin-content,
.super-admin-content, .org-admin-content {
    background: #0a1628 !important;
    color: #e7ecf3 !important;
}

/* Every surface / card / box / table / row / form control → navy + light text */
#super-admin-content :is(.card,[class*="card"],[class*="-box"],[class*="box-"],[class*="panel"],[class*="tile"],[class*="metric"],[class*="stat"],[class*="list-item"],[class*="org"],[class*="user"],[class*="customer"],[class*="row"],[class*="cell"],.data-table,table,thead,tbody,tr,td,th,.modal-content,form,fieldset,input,select,textarea),
#org-admin-content  :is(.card,[class*="card"],[class*="-box"],[class*="box-"],[class*="panel"],[class*="tile"],[class*="metric"],[class*="stat"],[class*="list-item"],[class*="org"],[class*="user"],[class*="customer"],[class*="row"],[class*="cell"],.data-table,table,thead,tbody,tr,td,th,.modal-content,form,fieldset,input,select,textarea) {
    background-color: #0f1a2e !important;
    color: #e7ecf3 !important;
    border-color: rgba(255,255,255,0.10) !important;
}

/* Headings / names / values / strong → bright white */
#super-admin-content :is(h1,h2,h3,h4,strong,b,.stat-value,[class*="title"],[class*="name"],[class*="value"],[class*="amount"]),
#org-admin-content  :is(h1,h2,h3,h4,strong,b,.stat-value,[class*="title"],[class*="name"],[class*="value"],[class*="amount"]) {
    color: #ffffff !important;
}

/* Secondary / muted / meta / dates / labels → readable light-grey (was invisible) */
#super-admin-content :is(p,li,td,small,label,.section-desc,.stat-label,[class*="muted"],[class*="sub"],[class*="meta"],[class*="date"],[class*="email"],[class*="desc"],[class*="hint"],[class*="secondary"],[class*="note"],[class*="caption"]),
#org-admin-content  :is(p,li,td,small,label,.section-desc,.stat-label,[class*="muted"],[class*="sub"],[class*="meta"],[class*="date"],[class*="email"],[class*="desc"],[class*="hint"],[class*="secondary"],[class*="note"],[class*="caption"]) {
    color: #c2cdda !important;
}

/* Links → gold for visibility on navy */
#super-admin-content a, #org-admin-content a { color: #d8b65a !important; }

/* Badges / pills / tags / chips / status → translucent navy + light text */
#super-admin-content :is(.badge,[class*="badge"],[class*="pill"],[class*="tag"],[class*="chip"],[class*="status"]),
#org-admin-content  :is(.badge,[class*="badge"],[class*="pill"],[class*="tag"],[class*="chip"],[class*="status"]) {
    background-color: rgba(255,255,255,0.10) !important;
    color: #e7ecf3 !important;
    border-color: rgba(255,255,255,0.16) !important;
}

/* Primary / gold action buttons stay gold; secondary buttons readable on navy */
#super-admin-content :is(.btn-primary,.qa-save-btn,[class*="btn"][class*="primary"],[class*="save"]),
#org-admin-content  :is(.btn-primary,.qa-save-btn,[class*="btn"][class*="primary"],[class*="save"]) {
    background-color: #c8a03c !important; color: #0a1628 !important; border-color: #c8a03c !important;
}
#super-admin-content button:not([class*="primary"]):not([class*="save"]):not(.admin-logout-btn),
#org-admin-content  button:not([class*="primary"]):not([class*="save"]):not(.admin-logout-btn) {
    color: #e7ecf3 !important;
}
/* Danger / delete / reject → red text, transparent (not a white box) */
#super-admin-content :is([class*="delete"],[class*="danger"],[class*="reject"],[class*="remove"]),
#org-admin-content  :is([class*="delete"],[class*="danger"],[class*="reject"],[class*="remove"]) {
    background-color: #16223c !important;
    color: #ff8a8a !important;
    border-color: rgba(255,107,107,0.5) !important;
}
/* Positive status (active / current / paid) → green text, still on navy pill */
#super-admin-content :is([class*="active"],[class*="success"],[class*="paid"],[class*="current"]),
#org-admin-content  :is([class*="active"],[class*="success"],[class*="paid"],[class*="current"]) {
    color: #34c759 !important;
}

/* Stat-card inner pills (breakdown/detail/sub) were light boxes with faint text —
   blend them into the navy card with readable light-grey text. High specificity to
   beat styles.css's `.stat-card .stat-breakdown span`. */
#super-admin-content :is(.stat-card,[class*="stat-card"]) :is(span,div,.stat-breakdown,[class*="breakdown"],[class*="detail"],[class*="sub"]),
#org-admin-content  :is(.stat-card,[class*="stat-card"]) :is(span,div,.stat-breakdown,[class*="breakdown"],[class*="detail"],[class*="sub"]) {
    background: transparent !important;
    color: #a9b8cc !important;
}
#super-admin-content :is(.stat-card,[class*="stat-card"]) .stat-value,
#org-admin-content  :is(.stat-card,[class*="stat-card"]) .stat-value { color: #ffffff !important; }

/* Admin buttons: navy, padded, text CONTAINED (was white boxes with overflowing text).
   Gold primary + red danger rules above win by specificity (they carry a class). */
#super-admin-content button, #super-admin-content .btn,
#org-admin-content button, #org-admin-content .btn {
    background-color: #16223c !important;
    color: #e7ecf3 !important;
    border: 1px solid rgba(255,255,255,0.18) !important;
    border-radius: 8px !important;
    padding: 0.45rem 0.85rem !important;
    width: auto !important; min-width: auto !important; max-width: none !important;
    height: auto !important;
    white-space: nowrap !important;
    overflow: visible !important;
    text-overflow: clip !important;
    font-size: 0.8rem !important;
    line-height: 1.25 !important;
}
/* Action cells / button groups: space the buttons so they don't collide */
#super-admin-content :is(.actions-cell,[class*="actions"],[class*="action-btn"]),
#org-admin-content  :is(.actions-cell,[class*="actions"],[class*="action-btn"]) {
    display: flex !important; gap: 0.4rem !important; flex-wrap: wrap !important; align-items: center !important;
}
/* re-assert gold + danger AFTER the generic button rule so they always win */
#super-admin-content :is(.btn-primary,.qa-save-btn,[class*="btn"][class*="primary"],[class*="save"]),
#org-admin-content  :is(.btn-primary,.qa-save-btn,[class*="btn"][class*="primary"],[class*="save"]) {
    background-color: #c8a03c !important; color: #0a1628 !important; border-color: #c8a03c !important;
}
#super-admin-content :is([class*="delete"],[class*="danger"],[class*="reject"],[class*="remove"]),
#org-admin-content  :is([class*="delete"],[class*="danger"],[class*="reject"],[class*="remove"]) {
    background-color: transparent !important; color: #ff6b6b !important; border-color: rgba(255,107,107,0.45) !important;
}

/* WHITE "Manage user" modal (.admin-modal) — the admin light-text rules above turned its
   headings white-on-white. Keep the white card (nice contrast vs the navy app) but restore
   dark text. Higher specificity (extra class) beats the #..-content light-text rules. */
.admin-modal-content { background: #ffffff !important; }
.admin-modal-content :is(h1,h2,h3,h4,h5),
#super-admin-content .admin-modal-content :is(h1,h2,h3,h4,h5),
#org-admin-content  .admin-modal-content :is(h1,h2,h3,h4,h5) { color: #111827 !important; }
.admin-modal-content :is(p,span,td,th,label,li,[class*="name"],[class*="value"],[class*="title"],[class*="label"],strong,b),
#super-admin-content .admin-modal-content :is(p,span,td,th,label,li,[class*="name"],[class*="value"],[class*="title"],[class*="label"],strong,b),
#org-admin-content  .admin-modal-content :is(p,span,td,th,label,li,[class*="name"],[class*="value"],[class*="title"],[class*="label"],strong,b) { color: #1f2937 !important; }
/* the modal's own buttons keep their themed colours (navy review / gold assign) */
.admin-modal-content button[style*="fff"], .admin-modal-content button[style*="FFF"] { color: #fff !important; }
/* Form fields in the white admin cards: dark text on light bg. The light-text restore above
   covered p/span/label but NOT textarea/input/select, so typed text was white-on-white. */
.admin-modal-content :is(input:not([type=checkbox]):not([type=radio]), textarea, select) {
    color: #1f2937 !important; background: #ffffff !important; border: 1px solid #d1d5db !important;
}

/* Form placeholders readable */
#super-admin-content ::placeholder, #org-admin-content ::placeholder { color: #7e90a8 !important; }

/* Mobile data-table card transform: each row is a navy card, labels readable */
@media (max-width: 768px) {
    #super-admin-content .data-table tr, #super-admin-content .data-table td,
    #org-admin-content  .data-table tr, #org-admin-content  .data-table td {
        background-color: #0f1a2e !important; color: #e7ecf3 !important;
    }
    #super-admin-content .data-table td::before,
    #org-admin-content  .data-table td::before { color: #8fa3bd !important; }
}

/* ============================================================================
   DESKTOP: Settings page used a narrow single column of 680px cards, wasting the
   right half of wide screens. Flow the settings cards into a full-width multi-
   column grid. Header, the wide Pending-Payments card, and the Save row span all
   columns. Single column on mobile is preserved (rules gated >=901px; the 900px
   collapse already lives in admin-config.css). Scoped to .admin-config (Settings
   page only).
   ============================================================================ */
@media (min-width: 901px) {
    .admin-config {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        align-items: start;
    }
    /* Header, the first (Pending Payments) card, and the Save row go full-width */
    .admin-config > .page-header,
    .admin-config > .pe-actions,
    .admin-config > .cfg-card:first-of-type {
        grid-column: 1 / -1;
    }
    /* Cards fill their grid column instead of the old 680px cap; kill the per-card
       bottom margin (the grid gap handles spacing) */
    .admin-config > .cfg-card {
        max-width: none !important;
        margin-bottom: 0 !important;
    }
    /* Inputs/fields inside cards can use the full card width on desktop */
    .admin-config .cfg-field { max-width: none !important; }
    .admin-config .cfg-input:not(.cfg-input-sm) { width: 100%; box-sizing: border-box; }
}

/* ── Org-admin mobile hamburger drawer (nav + sign-out pinned at the bottom) ── */
.oa-hamburger { display: none; background: transparent; border: none; color: #fff; cursor: pointer; padding: 0.4rem; border-radius: 8px; flex-shrink: 0; }
.oa-drawer, .oa-drawer-overlay { display: none; }
.oa-drawer-head { padding: 1rem 1.1rem; color: var(--gold, #c8a03c); font-weight: 700; font-size: 1rem; border-bottom: 1px solid rgba(255,255,255,0.08); }
.oa-drawer-nav { display: flex; flex-direction: column; padding: 0.5rem; gap: 2px; flex: 1; }
.oa-drawer-item { display: block; width: 100%; text-align: left; min-height: 48px; padding: 0 0.9rem; background: transparent; border: none; border-radius: 10px; color: rgba(255,255,255,0.85); font-size: 0.98rem; font-weight: 500; cursor: pointer; }
.oa-drawer-item.active { background: rgba(200,160,60,0.14); color: var(--gold, #c8a03c); }
.oa-drawer-logout { margin: 0.5rem; margin-top: auto; position: sticky; bottom: 0; min-height: 48px; padding: 0 0.9rem; display: flex; align-items: center; background: #0d1424; border: none; border-top: 1px solid rgba(255,255,255,0.06); border-radius: 10px; color: #ff6b6b; font-size: 0.98rem; font-weight: 600; cursor: pointer; }
@media (max-width: 900px) {
    .super-admin-header .super-admin-nav { display: none !important; }
    .super-admin-header .super-admin-user { display: none !important; }
    .oa-hamburger { display: inline-flex; align-items: center; justify-content: center; order: 10; margin-left: auto; }
    .oa-drawer-overlay { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 0.25s; z-index: 1400; }
    .oa-drawer-overlay.open { opacity: 1; pointer-events: auto; }
    .oa-drawer { display: flex; flex-direction: column; position: fixed; top: 0; bottom: 0; right: 0; width: min(82vw, 320px); background: #0d1424; border-left: 1px solid rgba(255,255,255,0.08); transform: translateX(100%); transition: transform 0.3s cubic-bezier(.32,.72,0,1); z-index: 1401; padding-top: env(safe-area-inset-top, 0px); padding-bottom: env(safe-area-inset-bottom, 0px); overflow-y: auto; box-shadow: -4px 0 32px rgba(0,0,0,0.4); }
    .oa-drawer.open { transform: translateX(0); }
}