/*
===============================================================================
Alterations Plus PH
System Theme CSS - Hybrid Readability Fix v3
===============================================================================

Drop-in replacement:
    static/css/system/system-theme.css

Purpose:
    Fix the dark-mode readability issue where:
    - shell/topbar/sidebar became dark
    - module cards stayed cream/light
    - headings/text inside those cream cards became white/cream and disappeared

Design decision:
    HYBRID DARK MODE

    The outer shell becomes dark.
    Main module cards remain premium warm-cream for brand consistency.
    Text inside light cards becomes dark/readable.
    Dark filter/action panels stay dark with light/readable text.

This avoids the ugly "all-black everything" look and keeps the luxury boutique
Alterations Plus aesthetic.

===============================================================================
*/

/* ============================================================================
   1. Core tokens
============================================================================ */

:root {
    --ap-warm-bg: #fffdf9;
    --ap-warm-bg-soft: #faf4ea;
    --ap-warm-card: #ffffff;
    --ap-warm-card-cream: #fffaf2;
    --ap-warm-card-paper: #fff7eb;
    --ap-warm-text: #2f1a17;
    --ap-warm-text-strong: #1f100d;
    --ap-warm-muted: #7d6a61;
    --ap-warm-muted-2: #9f7e70;
    --ap-warm-border: rgba(220, 197, 169, 0.78);
    --ap-warm-border-soft: rgba(220, 197, 169, 0.42);
    --ap-warm-red: #a60f0a;
    --ap-warm-red-deep: #7f0906;
    --ap-warm-red-bright: #d01812;
    --ap-warm-gold: #f4d65e;
    --ap-warm-gold-deep: #b98708;

    --ap-dark-bg: #16100e;
    --ap-dark-bg-2: #1d1512;
    --ap-dark-bg-3: #241a16;
    --ap-dark-panel: #261c18;
    --ap-dark-panel-2: #30231e;
    --ap-dark-text: #fff7ec;
    --ap-dark-text-soft: #f2dfcc;
    --ap-dark-muted: #cdb6a2;
    --ap-dark-muted-2: #b69b88;
    --ap-dark-border: rgba(244, 214, 94, 0.22);
    --ap-dark-border-strong: rgba(244, 214, 94, 0.38);
    --ap-dark-red: #ff6f66;
    --ap-dark-red-deep: #ffaaa4;
    --ap-dark-gold: #f4d65e;

    --ap-shadow-warm: 0 18px 58px rgba(71, 34, 22, 0.10);
    --ap-shadow-dark: 0 18px 58px rgba(0, 0, 0, 0.42);
    --ap-shadow-dark-soft: 0 16px 42px rgba(0, 0, 0, 0.26);

    --ap-radius-lg: 28px;
    --ap-radius-md: 20px;
    --ap-radius-sm: 14px;
}

/* ============================================================================
   2. Dark shell foundation
============================================================================ */

html.ap-system-dark,
body.ap-system-dark {
    background: var(--ap-dark-bg) !important;
    color: var(--ap-dark-text) !important;
    color-scheme: dark;
}

body.ap-system-dark {
    background:
        radial-gradient(circle at 7% 4%, rgba(244, 214, 94, 0.06), transparent 24%),
        radial-gradient(circle at 92% 9%, rgba(166, 15, 10, 0.10), transparent 26%),
        linear-gradient(135deg, #16100e 0%, #211713 48%, #15100e 100%) !important;
}

/* Let the shell be dark, not the cards. */
body.ap-system-dark #internalShell,
body.ap-system-dark .internal-shell,
body.ap-system-dark .admin-shell,
body.ap-system-dark .branch-shell,
body.ap-system-dark .staff-shell,
body.ap-system-dark .customer-shell {
    background: transparent !important;
    color: var(--ap-dark-text) !important;
}

body.ap-system-dark .internal-main,
body.ap-system-dark .admin-main,
body.ap-system-dark .branch-main,
body.ap-system-dark .staff-main,
body.ap-system-dark .customer-main,
body.ap-system-dark .main-content,
body.ap-system-dark .content,
body.ap-system-dark .page-content,
body.ap-system-dark .workspace-content,
body.ap-system-dark main {
    background: transparent !important;
    color: var(--ap-dark-text) !important;
}

/* ============================================================================
   3. Header/topbar stays dark and readable
============================================================================ */

body.ap-system-dark .internal-header,
body.ap-system-dark .admin-header,
body.ap-system-dark .branch-header,
body.ap-system-dark .staff-header,
body.ap-system-dark .customer-header,
body.ap-system-dark .topbar,
body.ap-system-dark .admin-topbar,
body.ap-system-dark .branch-topbar,
body.ap-system-dark .staff-topbar,
body.ap-system-dark .page-header,
body.ap-system-dark .workspace-header,
body.ap-system-dark .internal-topbar {
    background:
        radial-gradient(circle at 94% 18%, rgba(244, 214, 94, 0.08), transparent 34%),
        linear-gradient(135deg, #241914, #17110f) !important;
    border-color: rgba(244, 214, 94, 0.18) !important;
    color: var(--ap-dark-text) !important;
    box-shadow: var(--ap-shadow-dark-soft) !important;
}

body.ap-system-dark .internal-header h1,
body.ap-system-dark .admin-header h1,
body.ap-system-dark .branch-header h1,
body.ap-system-dark .staff-header h1,
body.ap-system-dark .page-header h1,
body.ap-system-dark .workspace-header h1,
body.ap-system-dark .internal-topbar h1,
body.ap-system-dark .topbar h1 {
    color: var(--ap-dark-text) !important;
    text-shadow: none !important;
}

body.ap-system-dark .internal-header p,
body.ap-system-dark .admin-header p,
body.ap-system-dark .branch-header p,
body.ap-system-dark .staff-header p,
body.ap-system-dark .page-header p,
body.ap-system-dark .workspace-header p,
body.ap-system-dark .internal-topbar p,
body.ap-system-dark .topbar p {
    color: var(--ap-dark-muted) !important;
}

/* Topbar user pill must remain readable. */
body.ap-system-dark .user-pill,
body.ap-system-dark .profile-pill,
body.ap-system-dark .admin-user-pill,
body.ap-system-dark .internal-user-pill,
body.ap-system-dark .topbar-user,
body.ap-system-dark .user-chip {
    background: #fff7ec !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(244, 214, 94, 0.30) !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.22) !important;
}

body.ap-system-dark .user-pill *,
body.ap-system-dark .profile-pill *,
body.ap-system-dark .admin-user-pill *,
body.ap-system-dark .internal-user-pill *,
body.ap-system-dark .topbar-user *,
body.ap-system-dark .user-chip * {
    color: var(--ap-warm-text) !important;
}

/* ============================================================================
   4. Sidebar remains brand red
============================================================================ */

body.ap-system-dark .internal-sidebar,
body.ap-system-dark .admin-sidebar,
body.ap-system-dark .staff-sidebar,
body.ap-system-dark .sidebar,
body.ap-system-dark aside.sidebar,
body.ap-system-dark [data-sidebar] {
    background:
        linear-gradient(180deg, #cf2a1d 0%, #9f0b07 44%, #720704 100%) !important;
    color: #fff7ec !important;
    border-color: rgba(244, 214, 94, 0.16) !important;
    box-shadow: 14px 0 42px rgba(0, 0, 0, 0.25) !important;
}

body.ap-system-dark .internal-sidebar a,
body.ap-system-dark .admin-sidebar a,
body.ap-system-dark .staff-sidebar a,
body.ap-system-dark .sidebar a,
body.ap-system-dark [data-sidebar] a,
body.ap-system-dark .internal-sidebar button,
body.ap-system-dark .admin-sidebar button,
body.ap-system-dark .staff-sidebar button,
body.ap-system-dark .sidebar button,
body.ap-system-dark [data-sidebar] button {
    color: #fff8ed !important;
}

body.ap-system-dark .internal-sidebar a:hover,
body.ap-system-dark .admin-sidebar a:hover,
body.ap-system-dark .staff-sidebar a:hover,
body.ap-system-dark .sidebar a:hover,
body.ap-system-dark [data-sidebar] a:hover,
body.ap-system-dark .internal-sidebar a.is-active,
body.ap-system-dark .admin-sidebar a.is-active,
body.ap-system-dark .staff-sidebar a.is-active,
body.ap-system-dark .sidebar a.is-active,
body.ap-system-dark [data-sidebar] a.is-active {
    background: rgba(255, 255, 255, 0.14) !important;
    color: #ffffff !important;
}

/* ============================================================================
   5. LIGHT SURFACES: keep cream, force dark readable text
============================================================================ */

/*
Important:
These are the cream panels/cards/heroes in the screenshots.
They must NOT inherit white text from global dark mode.
*/

body.ap-system-dark :is(
    .card,
    .panel,
    .box,
    .module-card,
    .dashboard-card,
    .summary-card,
    .kpi-card,
    .stat-card,
    .table-card,
    .form-card,
    .section-card,
    .content-card,
    .settings-card,
    .ap-card,
    .hero-card,
    .hero-panel,
    .page-hero,
    .module-hero,
    .control-hero,
    .dashboard-hero,
    .filter-card,
    .filters-card,
    .search-card,
    .table-shell,
    .table-wrap,
    .table-panel,
    [data-card],
    [class*="-card"],
    [class*="-panel"],
    [class*="-hero"],
    [class*="-shell"]
) {
    border-color: rgba(220, 197, 169, 0.82) !important;
}

/* Premium cream surfaces. */
body.ap-system-dark :is(
    .dashboard-card,
    .summary-card,
    .kpi-card,
    .stat-card,
    .hero-card,
    .hero-panel,
    .page-hero,
    .module-hero,
    .control-hero,
    .dashboard-hero,
    .table-card,
    .form-card,
    .section-card,
    .content-card,
    .settings-card,
    .ap-card,
    [data-card]
) {
    background:
        radial-gradient(circle at 92% 8%, rgba(244, 214, 94, 0.14), transparent 34%),
        linear-gradient(135deg, #fffdf8 0%, #fff8ed 100%) !important;
    color: var(--ap-warm-text) !important;
    box-shadow: 0 18px 54px rgba(0, 0, 0, 0.18) !important;
}

/* Any content inside premium cream surfaces must be readable. */
body.ap-system-dark :is(
    .dashboard-card,
    .summary-card,
    .kpi-card,
    .stat-card,
    .hero-card,
    .hero-panel,
    .page-hero,
    .module-hero,
    .control-hero,
    .dashboard-hero,
    .table-card,
    .form-card,
    .section-card,
    .content-card,
    .settings-card,
    .ap-card,
    [data-card]
) :is(h1, h2, h3, h4, h5, h6, strong, b, label, .title, .heading, .card-title, .section-title, .module-title, .page-title) {
    color: var(--ap-warm-text-strong) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

body.ap-system-dark :is(
    .dashboard-card,
    .summary-card,
    .kpi-card,
    .stat-card,
    .hero-card,
    .hero-panel,
    .page-hero,
    .module-hero,
    .control-hero,
    .dashboard-hero,
    .table-card,
    .form-card,
    .section-card,
    .content-card,
    .settings-card,
    .ap-card,
    [data-card]
) :is(p, span, small, em, .muted, .text-muted, .subtitle, .description, .help-text, .meta, .caption) {
    color: var(--ap-warm-muted) !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Large decorative hero titles were the main unreadable problem. */
body.ap-system-dark :is(
    .dashboard-hero,
    .page-hero,
    .module-hero,
    .hero-card,
    .hero-panel,
    .control-hero,
    [class*="-hero"]
) :is(h1, h2, .hero-title, .module-title, .page-title, .display-title) {
    color: #3a211d !important;
    opacity: 1 !important;
    text-shadow: none !important;
}

/* Eyebrows inside cream surfaces. */
body.ap-system-dark :is(
    .dashboard-card,
    .summary-card,
    .kpi-card,
    .stat-card,
    .hero-card,
    .hero-panel,
    .page-hero,
    .module-hero,
    .control-hero,
    .dashboard-hero,
    .table-card,
    .form-card,
    .section-card,
    .content-card,
    .settings-card,
    .ap-card,
    [data-card]
) :is(.eyebrow, .overline, .label, .card-label, .section-label, .module-eyebrow, [class*="eyebrow"], [class*="label"]) {
    color: #9c6d5a !important;
    opacity: 1 !important;
    letter-spacing: 0.18em;
}

/* ============================================================================
   6. DARK SURFACES: filters/tables/actions should stay dark but readable
============================================================================ */

body.ap-system-dark :is(
    .filter-bar,
    .filters-bar,
    .filter-panel,
    .filters-panel,
    .search-panel,
    .search-controls,
    .control-panel,
    .toolbar,
    .table-toolbar,
    .dark-panel,
    .dark-card,
    .ledger-panel,
    .module-dark,
    [class*="filter"],
    [class*="toolbar"]
) {
    background:
        radial-gradient(circle at 94% 10%, rgba(244, 214, 94, 0.05), transparent 30%),
        linear-gradient(135deg, #332720 0%, #251b17 100%) !important;
    border-color: rgba(244, 214, 94, 0.22) !important;
    color: var(--ap-dark-text) !important;
    box-shadow: var(--ap-shadow-dark-soft) !important;
}

body.ap-system-dark :is(
    .filter-bar,
    .filters-bar,
    .filter-panel,
    .filters-panel,
    .search-panel,
    .search-controls,
    .control-panel,
    .toolbar,
    .table-toolbar,
    .dark-panel,
    .dark-card,
    .ledger-panel,
    .module-dark,
    [class*="filter"],
    [class*="toolbar"]
) :is(h1, h2, h3, h4, h5, h6, strong, b, label, .title, .heading) {
    color: var(--ap-dark-text) !important;
    opacity: 1 !important;
}

body.ap-system-dark :is(
    .filter-bar,
    .filters-bar,
    .filter-panel,
    .filters-panel,
    .search-panel,
    .search-controls,
    .control-panel,
    .toolbar,
    .table-toolbar,
    .dark-panel,
    .dark-card,
    .ledger-panel,
    .module-dark,
    [class*="filter"],
    [class*="toolbar"]
) :is(p, span, small, em, .muted, .text-muted, .subtitle, .description, .help-text, .meta, .caption) {
    color: var(--ap-dark-muted) !important;
    opacity: 1 !important;
}

/* ============================================================================
   7. Forms
============================================================================ */

body.ap-system-dark input,
body.ap-system-dark select,
body.ap-system-dark textarea,
body.ap-system-dark .form-control,
body.ap-system-dark .input,
body.ap-system-dark .select,
body.ap-system-dark .textarea {
    background: #241914 !important;
    color: #fff7ec !important;
    border-color: rgba(244, 214, 94, 0.26) !important;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

body.ap-system-dark input::placeholder,
body.ap-system-dark textarea::placeholder {
    color: rgba(255, 247, 236, 0.46) !important;
}

body.ap-system-dark input:focus,
body.ap-system-dark select:focus,
body.ap-system-dark textarea:focus,
body.ap-system-dark .form-control:focus {
    border-color: rgba(244, 214, 94, 0.62) !important;
    box-shadow:
        0 0 0 4px rgba(244, 214, 94, 0.12),
        0 14px 34px rgba(0, 0, 0, 0.25) !important;
    outline: none !important;
}

/* Inputs inside light cards can remain dark for contrast. */
body.ap-system-dark :is(.dashboard-card, .summary-card, .kpi-card, .stat-card, .hero-card, .page-hero, .module-hero, .table-card, .form-card, .section-card, .content-card, .settings-card, .ap-card) :is(input, select, textarea) {
    background: #2a1d18 !important;
    color: #fff7ec !important;
    border-color: rgba(80, 47, 36, 0.55) !important;
}

/* ============================================================================
   8. Tables
============================================================================ */

body.ap-system-dark table,
body.ap-system-dark .table,
body.ap-system-dark .data-table,
body.ap-system-dark .ledger-table {
    background: #fffaf2 !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(220, 197, 169, 0.82) !important;
}

body.ap-system-dark thead,
body.ap-system-dark th,
body.ap-system-dark .table-header {
    background: #372821 !important;
    color: #fff7ec !important;
    border-color: rgba(244, 214, 94, 0.22) !important;
}

body.ap-system-dark td,
body.ap-system-dark tr,
body.ap-system-dark tbody {
    border-color: rgba(220, 197, 169, 0.42) !important;
}

body.ap-system-dark tbody td {
    color: var(--ap-warm-text) !important;
}

body.ap-system-dark tbody tr:hover,
body.ap-system-dark .table-row:hover {
    background: #fff4df !important;
}

body.ap-system-dark td :is(h1, h2, h3, h4, h5, h6, strong, b, span, p, small) {
    color: inherit !important;
    opacity: 1 !important;
}

/* ============================================================================
   9. Buttons
============================================================================ */

body.ap-system-dark button,
body.ap-system-dark .btn,
body.ap-system-dark .button,
body.ap-system-dark .ap-btn,
body.ap-system-dark .internal-btn,
body.ap-system-dark .admin-btn,
body.ap-system-dark [role="button"] {
    border-color: rgba(220, 197, 169, 0.72) !important;
}

body.ap-system-dark :is(.btn-primary, .is-primary, .ap-btn-primary, .internal-btn-primary, .admin-btn-primary),
body.ap-system-dark button.primary,
body.ap-system-dark button[type="submit"],
body.ap-system-dark .primary-btn {
    background: linear-gradient(135deg, #d81f18, #9f0b07) !important;
    color: #ffffff !important;
    border-color: transparent !important;
    box-shadow: 0 18px 44px rgba(166, 15, 10, 0.28) !important;
}

body.ap-system-dark :is(.btn-secondary, .btn-ghost, .ap-btn-ghost, .internal-btn-ghost, .admin-btn-ghost),
body.ap-system-dark button.secondary,
body.ap-system-dark button.ghost {
    background: #fffaf2 !important;
    color: var(--ap-warm-red-deep) !important;
    border-color: rgba(220, 197, 169, 0.82) !important;
}

body.ap-system-dark :is(.btn-gold, .ap-btn-gold, .internal-btn-gold, .admin-btn-gold),
body.ap-system-dark button.gold {
    background: #fff4cb !important;
    color: #7d5200 !important;
    border-color: rgba(244, 214, 94, 0.86) !important;
}

/* ============================================================================
   10. Badges/pills/chips
============================================================================ */

body.ap-system-dark .badge,
body.ap-system-dark .pill,
body.ap-system-dark .chip,
body.ap-system-dark .tag,
body.ap-system-dark .status-pill,
body.ap-system-dark .status-badge {
    background: #fff4e6 !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(220, 197, 169, 0.72) !important;
}

body.ap-system-dark :is(.badge-success, .status-success, .is-success, .success) {
    background: #eaf8ef !important;
    color: #246349 !important;
    border-color: rgba(36, 116, 90, 0.28) !important;
}

body.ap-system-dark :is(.badge-warning, .status-warning, .is-warning, .warning) {
    background: #fff5cf !important;
    color: #7d5200 !important;
    border-color: rgba(244, 214, 94, 0.55) !important;
}

body.ap-system-dark :is(.badge-danger, .status-danger, .is-danger, .danger, .critical) {
    background: #fff1ef !important;
    color: #9f0b07 !important;
    border-color: rgba(166, 15, 10, 0.26) !important;
}

/* ============================================================================
   11. Modals, drawers, dropdowns
============================================================================ */

body.ap-system-dark .modal,
body.ap-system-dark .modal-content,
body.ap-system-dark .modal-card,
body.ap-system-dark .drawer,
body.ap-system-dark .side-drawer,
body.ap-system-dark .offcanvas,
body.ap-system-dark [data-drawer] {
    background: #fffaf2 !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(220, 197, 169, 0.82) !important;
    box-shadow: 0 34px 120px rgba(0, 0, 0, 0.36) !important;
}

body.ap-system-dark :is(.modal, .modal-content, .modal-card, .drawer, .side-drawer, .offcanvas, [data-drawer]) :is(h1, h2, h3, h4, h5, h6, strong, b, label) {
    color: var(--ap-warm-text-strong) !important;
}

body.ap-system-dark :is(.modal, .modal-content, .modal-card, .drawer, .side-drawer, .offcanvas, [data-drawer]) :is(p, span, small, em, .muted, .text-muted, .description, .meta) {
    color: var(--ap-warm-muted) !important;
}

body.ap-system-dark .modal-backdrop,
body.ap-system-dark .backdrop,
body.ap-system-dark [data-backdrop] {
    background: rgba(8, 5, 4, 0.70) !important;
    backdrop-filter: blur(12px);
}

body.ap-system-dark .dropdown-menu,
body.ap-system-dark .ap-dropdown-menu,
body.ap-system-dark [data-dropdown-menu] {
    background: #fffaf2 !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(220, 197, 169, 0.82) !important;
    box-shadow: 0 22px 70px rgba(0, 0, 0, 0.28) !important;
}

body.ap-system-dark .dropdown-menu *,
body.ap-system-dark .ap-dropdown-menu *,
body.ap-system-dark [data-dropdown-menu] * {
    color: var(--ap-warm-text) !important;
}

body.ap-system-dark .dropdown-menu a:hover,
body.ap-system-dark .ap-dropdown-menu a:hover,
body.ap-system-dark [data-dropdown-menu] a:hover {
    background: #fff1da !important;
}

/* ============================================================================
   12. Alerts/toasts
============================================================================ */

body.ap-system-dark .alert,
body.ap-system-dark .notice,
body.ap-system-dark .toast,
body.ap-system-dark .ap-shell-toast {
    background: #fffaf2 !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(220, 197, 169, 0.82) !important;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.28) !important;
}

body.ap-system-dark :is(.alert-danger, .notice-danger, .toast.is-error, .ap-shell-toast.is-error) {
    background: #fff1ef !important;
    color: #9f0b07 !important;
    border-color: rgba(166, 15, 10, 0.26) !important;
}

body.ap-system-dark :is(.alert-success, .notice-success, .toast.is-success, .ap-shell-toast.is-success) {
    background: #effff7 !important;
    color: #116047 !important;
    border-color: rgba(36, 116, 90, 0.28) !important;
}

body.ap-system-dark :is(.alert-warning, .notice-warning, .toast.is-warning, .ap-shell-toast.is-warning) {
    background: #fff8dd !important;
    color: #805a00 !important;
    border-color: rgba(244, 214, 94, 0.70) !important;
}

/* ============================================================================
   13. Module-specific APH prefixes
============================================================================ */

/*
These prefixes are used by APH modules:
dashx, bkx, wix, jox, brx, usx, rpx, ntx, arx, actx, stx, cmsx.

The goal is not to redesign them.
The goal is to restore contrast inside their cream panels.
*/

body.ap-system-dark :is(
    [class^="dashx-"], [class*=" dashx-"],
    [class^="bkx-"], [class*=" bkx-"],
    [class^="wix-"], [class*=" wix-"],
    [class^="jox-"], [class*=" jox-"],
    [class^="brx-"], [class*=" brx-"],
    [class^="usx-"], [class*=" usx-"],
    [class^="rpx-"], [class*=" rpx-"],
    [class^="ntx-"], [class*=" ntx-"],
    [class^="arx-"], [class*=" arx-"],
    [class^="actx-"], [class*=" actx-"],
    [class^="stx-"], [class*=" stx-"],
    [class^="cmsx-"], [class*=" cmsx-"]
) {
    text-shadow: none !important;
}

/* Hero/card variants should be cream + dark text. */
body.ap-system-dark :is(
    [class^="dashx-hero"], [class*=" dashx-hero"],
    [class^="bkx-hero"], [class*=" bkx-hero"],
    [class^="wix-hero"], [class*=" wix-hero"],
    [class^="jox-hero"], [class*=" jox-hero"],
    [class^="brx-hero"], [class*=" brx-hero"],
    [class^="usx-hero"], [class*=" usx-hero"],
    [class^="rpx-hero"], [class*=" rpx-hero"],
    [class^="ntx-hero"], [class*=" ntx-hero"],
    [class^="arx-hero"], [class*=" arx-hero"],
    [class^="actx-hero"], [class*=" actx-hero"],
    [class^="stx-hero"], [class*=" stx-hero"],
    [class^="cmsx-hero"], [class*=" cmsx-hero"],
    [class^="dashx-card"], [class*=" dashx-card"],
    [class^="bkx-card"], [class*=" bkx-card"],
    [class^="wix-card"], [class*=" wix-card"],
    [class^="jox-card"], [class*=" jox-card"],
    [class^="brx-card"], [class*=" brx-card"],
    [class^="usx-card"], [class*=" usx-card"],
    [class^="rpx-card"], [class*=" rpx-card"],
    [class^="ntx-card"], [class*=" ntx-card"],
    [class^="arx-card"], [class*=" arx-card"],
    [class^="actx-card"], [class*=" actx-card"],
    [class^="stx-card"], [class*=" stx-card"],
    [class^="cmsx-card"], [class*=" cmsx-card"]
) {
    background:
        radial-gradient(circle at 92% 8%, rgba(244, 214, 94, 0.14), transparent 34%),
        linear-gradient(135deg, #fffdf8 0%, #fff8ed 100%) !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(220, 197, 169, 0.82) !important;
}

body.ap-system-dark :is(
    [class^="dashx-hero"], [class*=" dashx-hero"],
    [class^="bkx-hero"], [class*=" bkx-hero"],
    [class^="wix-hero"], [class*=" wix-hero"],
    [class^="jox-hero"], [class*=" jox-hero"],
    [class^="brx-hero"], [class*=" brx-hero"],
    [class^="usx-hero"], [class*=" usx-hero"],
    [class^="rpx-hero"], [class*=" rpx-hero"],
    [class^="ntx-hero"], [class*=" ntx-hero"],
    [class^="arx-hero"], [class*=" arx-hero"],
    [class^="actx-hero"], [class*=" actx-hero"],
    [class^="stx-hero"], [class*=" stx-hero"],
    [class^="cmsx-hero"], [class*=" cmsx-hero"],
    [class^="dashx-card"], [class*=" dashx-card"],
    [class^="bkx-card"], [class*=" bkx-card"],
    [class^="wix-card"], [class*=" wix-card"],
    [class^="jox-card"], [class*=" jox-card"],
    [class^="brx-card"], [class*=" brx-card"],
    [class^="usx-card"], [class*=" usx-card"],
    [class^="rpx-card"], [class*=" rpx-card"],
    [class^="ntx-card"], [class*=" ntx-card"],
    [class^="arx-card"], [class*=" arx-card"],
    [class^="actx-card"], [class*=" actx-card"],
    [class^="stx-card"], [class*=" stx-card"],
    [class^="cmsx-card"], [class*=" cmsx-card"]
) :is(h1, h2, h3, h4, h5, h6, strong, b, label, .title, .heading) {
    color: var(--ap-warm-text-strong) !important;
    opacity: 1 !important;
}

body.ap-system-dark :is(
    [class^="dashx-hero"], [class*=" dashx-hero"],
    [class^="bkx-hero"], [class*=" bkx-hero"],
    [class^="wix-hero"], [class*=" wix-hero"],
    [class^="jox-hero"], [class*=" jox-hero"],
    [class^="brx-hero"], [class*=" brx-hero"],
    [class^="usx-hero"], [class*=" usx-hero"],
    [class^="rpx-hero"], [class*=" rpx-hero"],
    [class^="ntx-hero"], [class*=" ntx-hero"],
    [class^="arx-hero"], [class*=" arx-hero"],
    [class^="actx-hero"], [class*=" actx-hero"],
    [class^="stx-hero"], [class*=" stx-hero"],
    [class^="cmsx-hero"], [class*=" cmsx-hero"],
    [class^="dashx-card"], [class*=" dashx-card"],
    [class^="bkx-card"], [class*=" bkx-card"],
    [class^="wix-card"], [class*=" wix-card"],
    [class^="jox-card"], [class*=" jox-card"],
    [class^="brx-card"], [class*=" brx-card"],
    [class^="usx-card"], [class*=" usx-card"],
    [class^="rpx-card"], [class*=" rpx-card"],
    [class^="ntx-card"], [class*=" ntx-card"],
    [class^="arx-card"], [class*=" arx-card"],
    [class^="actx-card"], [class*=" actx-card"],
    [class^="stx-card"], [class*=" stx-card"],
    [class^="cmsx-card"], [class*=" cmsx-card"]
) :is(p, span, small, em, .muted, .text-muted, .subtitle, .description, .help-text, .meta, .caption) {
    color: var(--ap-warm-muted) !important;
    opacity: 1 !important;
}

/* Tables/ledgers with module prefixes. */
body.ap-system-dark :is(
    [class^="dashx-table"], [class*=" dashx-table"],
    [class^="bkx-table"], [class*=" bkx-table"],
    [class^="wix-table"], [class*=" wix-table"],
    [class^="jox-table"], [class*=" jox-table"],
    [class^="brx-table"], [class*=" brx-table"],
    [class^="usx-table"], [class*=" usx-table"],
    [class^="rpx-table"], [class*=" rpx-table"],
    [class^="ntx-table"], [class*=" ntx-table"],
    [class^="arx-table"], [class*=" arx-table"],
    [class^="actx-table"], [class*=" actx-table"],
    [class^="stx-table"], [class*=" stx-table"],
    [class^="cmsx-table"], [class*=" cmsx-table"],
    [class^="dashx-ledger"], [class*=" dashx-ledger"],
    [class^="bkx-ledger"], [class*=" bkx-ledger"],
    [class^="wix-ledger"], [class*=" wix-ledger"],
    [class^="jox-ledger"], [class*=" jox-ledger"],
    [class^="brx-ledger"], [class*=" brx-ledger"],
    [class^="usx-ledger"], [class*=" usx-ledger"],
    [class^="rpx-ledger"], [class*=" rpx-ledger"],
    [class^="ntx-ledger"], [class*=" ntx-ledger"],
    [class^="arx-ledger"], [class*=" arx-ledger"],
    [class^="actx-ledger"], [class*=" actx-ledger"],
    [class^="stx-ledger"], [class*=" stx-ledger"],
    [class^="cmsx-ledger"], [class*=" cmsx-ledger"]
) {
    background: #fffaf2 !important;
    color: var(--ap-warm-text) !important;
}

/* ============================================================================
   14. Red/accent cards should stay red with white text
============================================================================ */

body.ap-system-dark :is(
    .is-red,
    .red-card,
    .danger-card,
    .critical-card,
    .primary-card,
    .kpi-card.is-primary,
    .kpi-card.is-red,
    .stat-card.is-primary,
    .stat-card.is-red,
    [class*="red-card"],
    [class*="primary-card"],
    [class*="danger-card"],
    [class*="critical-card"]
) {
    background: linear-gradient(135deg, #d81f18, #8d0905) !important;
    color: #ffffff !important;
    border-color: rgba(255, 255, 255, 0.18) !important;
}

body.ap-system-dark :is(
    .is-red,
    .red-card,
    .danger-card,
    .critical-card,
    .primary-card,
    .kpi-card.is-primary,
    .kpi-card.is-red,
    .stat-card.is-primary,
    .stat-card.is-red,
    [class*="red-card"],
    [class*="primary-card"],
    [class*="danger-card"],
    [class*="critical-card"]
) * {
    color: #ffffff !important;
    opacity: 1 !important;
}

/* ============================================================================
   15. Profile/demo/fallback pages
============================================================================ */

body.ap-system-dark :is(
    .profile-page,
    .profile-shell,
    .profile-card,
    .demo-page,
    .demo-shell,
    .fallback-page,
    .fallback-shell
) {
    background: #fffaf2 !important;
    color: var(--ap-warm-text) !important;
    border-color: rgba(220, 197, 169, 0.82) !important;
}

body.ap-system-dark :is(
    .profile-page,
    .profile-shell,
    .profile-card,
    .demo-page,
    .demo-shell,
    .fallback-page,
    .fallback-shell
) :is(h1, h2, h3, h4, h5, h6, strong, label) {
    color: var(--ap-warm-text-strong) !important;
}

body.ap-system-dark :is(
    .profile-page,
    .profile-shell,
    .profile-card,
    .demo-page,
    .demo-shell,
    .fallback-page,
    .fallback-shell
) :is(p, span, small, .muted, .description, .meta) {
    color: var(--ap-warm-muted) !important;
}

/* ============================================================================
   16. Settings page keeps its own dark styling, but improve contrast
============================================================================ */

body.ap-system-dark .sysset-page {
    background:
        radial-gradient(circle at 7% 4%, rgba(244, 214, 94, 0.06), transparent 24%),
        radial-gradient(circle at 92% 9%, rgba(166, 15, 10, 0.10), transparent 26%),
        linear-gradient(135deg, #16100e 0%, #211713 48%, #15100e 100%) !important;
    color: var(--ap-dark-text) !important;
}

body.ap-system-dark .sysset-page :is(.sysset-card, .sysset-section-head, .sysset-actor-card, .sysset-nav, .sysset-kpis article) {
    background:
        radial-gradient(circle at 92% 10%, rgba(244, 214, 94, 0.06), transparent 30%),
        linear-gradient(135deg, #2b201b 0%, #211713 100%) !important;
    color: var(--ap-dark-text) !important;
    border-color: rgba(244, 214, 94, 0.24) !important;
}

body.ap-system-dark .sysset-page :is(h1, h2, h3, h4, h5, h6, strong, label) {
    color: var(--ap-dark-text) !important;
}

body.ap-system-dark .sysset-page :is(p, span, small, .description, .meta, .muted) {
    color: var(--ap-dark-muted) !important;
}

/* ============================================================================
   17. Blank-page safety
============================================================================ */

/*
If a module becomes blank because page content is accidentally transparent or
same-color as the body, these rules bring it back into view.
*/

body.ap-system-dark .internal-main > *:not(script):not(style),
body.ap-system-dark .admin-main > *:not(script):not(style),
body.ap-system-dark main > *:not(script):not(style) {
    opacity: 1 !important;
    visibility: visible !important;
}

body.ap-system-dark .internal-main :is(h1, h2, h3, h4, h5, h6, p, span, small, strong, b, label, td, th, a, button) {
    opacity: 1 !important;
    visibility: visible !important;
}

/* ============================================================================
   18. Scrollbars/selection
============================================================================ */

body.ap-system-dark ::selection {
    background: rgba(244, 214, 94, 0.30);
    color: #ffffff;
}

body.ap-system-dark ::-webkit-scrollbar {
    width: 12px;
    height: 12px;
}

body.ap-system-dark ::-webkit-scrollbar-track {
    background: #16100e;
}

body.ap-system-dark ::-webkit-scrollbar-thumb {
    background: rgba(244, 214, 94, 0.22);
    border: 3px solid #16100e;
    border-radius: 999px;
}

body.ap-system-dark ::-webkit-scrollbar-thumb:hover {
    background: rgba(244, 214, 94, 0.38);
}

/* ============================================================================
   19. Motion, transparency, mobile
============================================================================ */

.ap-motion-disabled *,
.ap-motion-disabled *::before,
.ap-motion-disabled *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    scroll-behavior: auto !important;
    transition-duration: 0.001ms !important;
}

.ap-reduced-transparency *,
.ap-reduced-transparency *::before,
.ap-reduced-transparency *::after {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

.ap-no-scroll {
    overflow: hidden !important;
}

.ap-shell-toast {
    position: fixed;
    right: 28px;
    bottom: 28px;
    z-index: 9999;
    max-width: min(440px, calc(100vw - 48px));
    padding: 15px 18px;
    border: 1px solid rgba(36, 116, 90, 0.28);
    border-radius: 18px;
    background: #effff7;
    color: #116047;
    box-shadow: 0 20px 60px rgba(33, 19, 16, 0.18);
    font-weight: 900;
    opacity: 0;
    pointer-events: none;
    transform: translateY(18px) scale(0.98);
    transition:
        opacity 0.24s ease,
        transform 0.24s cubic-bezier(.2,.8,.2,1);
}

.ap-shell-toast.is-open {
    opacity: 1;
    transform: translateY(0) scale(1);
}

.ap-shell-toast.is-error {
    color: #8d0c08;
    background: #fff1ef;
    border-color: rgba(166, 15, 10, 0.24);
}

.ap-shell-toast.is-warning {
    color: #805a00;
    background: #fff8dd;
    border-color: rgba(244, 214, 94, 0.84);
}

.ap-shell-toast.is-success {
    color: #116047;
    background: #effff7;
    border-color: rgba(36, 116, 90, 0.28);
}

.ap-ripple {
    position: absolute;
    border-radius: 999px;
    pointer-events: none;
    transform: scale(0);
    background: rgba(255, 255, 255, 0.42);
    animation: apRipple 700ms ease-out forwards;
}

@keyframes apRipple {
    to {
        transform: scale(2.8);
        opacity: 0;
    }
}

@media (max-width: 640px) {
    .is-mobile-sidebar-open [data-sidebar],
    .is-mobile-sidebar-open .internal-sidebar,
    .is-mobile-sidebar-open .admin-sidebar,
    .is-mobile-sidebar-open .sidebar {
        transform: translateX(0) !important;
        visibility: visible !important;
    }

    [data-sidebar-backdrop].is-active {
        opacity: 1;
        pointer-events: auto;
    }
}