/* ==========================================================================
   Responsive polish — loaded last in the admin and client layouts (child panels use the same layouts).
   Guarantees:
   1. Universal button containment: no button label bursting out of borders or overlapping.
   2. Universal form layout protection: no 1-letter vertical text collapse on labels/inputs.
   3. Universal card & table containment: prevents horizontal window blowouts and mobile scroll lag.
   4. Smooth rendering: disables hidden reveal transitions that cause mobile rendering stutter.
   5. Search inputs & flex labels: perfectly centered icons, inputs, and dropdowns.
   6. Mobile sidebar tree navigation & bottom-nav containment.
   ========================================================================== */

/* ==========================================================================
   GLOBAL VIEWPORT LOCK & ANTI-WOBBLE (Prevents Horizontal Shaking / Automatic Hilna)
   ========================================================================== */
html, body {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    position: relative !important;
    -webkit-overflow-scrolling: touch !important;
}

:root :is(
    .admin-layout, .admin-main, .page-container,
    .client-layout, .client-wrapper, .client-main, .client-content,
    .container, .container-fluid, .ps-page, .apc-body, .main-content
) {
    width: 100% !important;
    max-width: 100vw !important;
    overflow-x: clip !important;
    box-sizing: border-box !important;
}

/* Eliminate table container blowout */
:root body:not(#rp) :is(.table-responsive, .table-scroll, .data-table-wrap, .table-container) {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    box-sizing: border-box !important;
}

/* Ensure table contents wrap and never force horizontal expansion */
:root body:not(#rp) :is(table, table.stack-table, .data-table, .client-table) {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

:root body:not(#rp) :is(td, th):not(.num) {
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* ==========================================================================
   UNIVERSAL STACKED TABLE PROTECTION (Fixes "Amou nt" & "₹8.9 9" splits)
   Guarantees labels & currency values stay intact on phones & tablets
   ========================================================================== */
@media (max-width: 768px) {
    :root body:not(#rp) table.stack-table,
    :root body.admin-body table.stack-table,
    :root body.cc table.stack-table {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    :root body:not(#rp) table.stack-table tbody,
    :root body:not(#rp) table.stack-table tr {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    :root body:not(#rp) table.stack-table td {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        flex-wrap: nowrap !important;
        padding: 9px 0 !important;
        min-width: 0 !important;
        text-align: right !important;
    }

    /* Stacked table labels (Amount, Customer, Status, Invoice, etc.) */
    :root body:not(#rp) table.stack-table td::before {
        content: attr(data-label) !important;
        display: inline-block !important;
        flex: 0 0 auto !important;
        min-width: max-content !important;
        max-width: 48% !important;
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        text-align: left !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.05em !important;
        text-transform: uppercase !important;
        color: var(--p-text-3, #64748b) !important;
        margin: 0 !important;
    }

    /* Stacked table cell values */
    :root body:not(#rp) table.stack-table td > .stack-val {
        display: inline-flex !important;
        flex: 1 1 auto !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: right !important;
        gap: 6px !important;
        min-width: 0 !important;
        flex-wrap: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* Numbers, Currencies, Status Badges, Chips NEVER wrap or split characters */
    :root body:not(#rp) table.stack-table td.num,
    :root body:not(#rp) table.stack-table td.num > .stack-val,
    :root body:not(#rp) table.stack-table td .num,
    :root body:not(#rp) table.stack-table td .status-badge,
    :root body:not(#rp) table.stack-table td [class*="badge"],
    :root body:not(#rp) table.stack-table td [class*="chip"],
    :root body:not(#rp) table.stack-table td code,
    :root body:not(#rp) table.stack-table td small {
        white-space: nowrap !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    /* First cell: typically item name, order ID, product description */
    :root body:not(#rp) table.stack-table td:first-child {
        display: block !important;
        text-align: left !important;
        padding-top: 12px !important;
    }

    :root body:not(#rp) table.stack-table td:first-child::before {
        display: none !important;
    }

    :root body:not(#rp) table.stack-table td:first-child > .stack-val {
        display: block !important;
        text-align: left !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        white-space: normal !important;
    }

    /* Last cell: remove border and keep row alignment */
    :root body:not(#rp) table.stack-table td:last-child {
        border-bottom: 0 !important;
        padding-bottom: 12px !important;
    }

    /* Only allow flex-wrap on action cells with multiple buttons/forms */
    :root body:not(#rp) table.stack-table td:has(:is(.btn, button, form)) > .stack-val {
        flex-wrap: wrap !important;
        justify-content: flex-end !important;
    }

    /* Support ticket subject & rich multi-line description cells in card mode */
    :root body:not(#rp) table.stack-table td:is(.ac-tk-subject, :has(> .stack-val > .ac-cell-title), :has(> .stack-val > .ac-tk-meta)) {
        display: block !important;
        width: 100% !important;
        text-align: left !important;
        padding: 10px 0 !important;
    }

    :root body:not(#rp) table.stack-table td:is(.ac-tk-subject, :has(> .stack-val > .ac-cell-title), :has(> .stack-val > .ac-tk-meta))::before {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        margin-bottom: 4px !important;
        font-size: 10.5px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        text-transform: uppercase !important;
        color: var(--p-text-3, #64748b) !important;
        text-align: left !important;
    }

    :root body:not(#rp) table.stack-table td:is(.ac-tk-subject, :has(> .stack-val > .ac-cell-title), :has(> .stack-val > .ac-tk-meta)) > .stack-val {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        justify-content: flex-start !important;
        text-align: left !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 6px !important;
    }

    :root body:not(#rp) table.stack-table td .ac-cell-title {
        display: block !important;
        width: 100% !important;
        white-space: normal !important;
        word-break: break-word !important;
        overflow-wrap: break-word !important;
        font-size: 13.5px !important;
        font-weight: 600 !important;
        line-height: 1.4 !important;
        color: var(--p-text, #0f172a) !important;
        text-align: left !important;
    }

    :root body:not(#rp) table.stack-table td :is(.ac-tk-meta, .ac-cell-sub) {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        max-width: 100% !important;
        white-space: normal !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
        font-size: 11.5px !important;
        line-height: 1.4 !important;
        color: var(--p-text-3, #64748b) !important;
        margin-top: 2px !important;
        text-align: left !important;
    }

    :root body:not(#rp) table.stack-table td :is(.ac-tk-meta, .ac-cell-sub) > * {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }

    /* Ticket creation date & time */
    :root body:not(#rp) table.stack-table td.ac-time > .stack-val {
        display: inline-flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        white-space: nowrap !important;
    }

    :root body:not(#rp) table.stack-table td.ac-time small {
        display: inline-block !important;
        margin-left: 4px !important;
        font-size: 11.5px !important;
        color: var(--p-text-3, #64748b) !important;
    }

    /* Ensure client mobile content scrolls past floating bottom-nav */
    :root body.is-client :is(.client-content, .client-main, .ac-page, .ps-page, .ac-layout) {
        padding-bottom: calc(96px + env(safe-area-inset-bottom, 0px)) !important;
    }
}

/* Breadcrumbs wrap cleanly on mobile so 3+ items never push page width */
:root body:not(#rp) :is(.breadcrumb-trail, .breadcrumb, .breadcrumbs, .page-crumbs, .pb-crumbs) {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 4px 6px !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow: hidden !important;
    word-break: break-word !important;
}

/* ==========================================================================
   UNIVERSAL PERFORMANCE OPTIMIZATION (Eliminates Mobile Lag & Stutter)
   ========================================================================== */
@media (max-width: 1024px) {
    *, *::before, *::after {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    :root :is(.admin-topbar, .client-header, .bottom-nav, .as-topbar) {
        background: var(--p-card, #ffffff) !important;
    }
    :root[data-theme="dark"] :is(.admin-topbar, .client-header, .bottom-nav, .as-topbar) {
        background: var(--p-card, #0f172a) !important;
    }
}

@media (max-width: 768px) {
    :root body.cc .client-content,
    :root body.cc .client-content :is(.dash-stats, .ps-stats, .dash-att-list, .dash-col, .ax-grid, .kpi-grid, .client-kpi-grid, .pb-stats, .pb-kpis, .ac-grid, .ps-grid, .ps-plans, .dash-quick, .cm-stagger) > * {
        animation: none !important;
        opacity: 1 !important;
        transform: none !important;
    }
    :root svg.cm-draw[data-cm-norm] :is(path, circle, rect, line, polyline, polygon, ellipse) {
        animation: none !important;
        stroke-dasharray: none !important;
        stroke-dashoffset: 0 !important;
    }
}

/* ==========================================================================
   UNIVERSAL ICON STABILIZATION (Admin & Client Area)
   ========================================================================== */
:root body:not(#rp) svg {
    flex-shrink: 0 !important;
}

:root body:not(#rp) :is(
    .header-icon-box,
    .kpi-icon-pill,
    .kpi-icon,
    .dash-stat-ico,
    .dash-att-ico,
    .ps-tile-ico,
    .ps-plan-ico,
    .ps-empty-ico,
    .ac-ico,
    .ac-choice-ico,
    .ax-ico,
    .pb-ico,
    .pb-file-ico,
    .pb-aff-stat-ico,
    .dmx-whois-ico,
    .si-action-ico,
    .si-score-ico,
    .cm-hico,
    .ops-card-icon,
    .cpt-tile-ico
) {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
}

/* ==========================================================================
   ADMIN PANEL: REMOVE BREADCRUMBS & PAGE TITLES ON ALL ADMIN PAGES
   (Sidebar & topbar identify location; keeps action buttons as clean toolbar)
   ========================================================================== */
:root body.admin-body .breadcrumb-trail,
:root body.admin-body .breadcrumb,
:root body.admin-body .breadcrumbs,
:root body.admin-body nav[aria-label="Breadcrumb"] {
    display: none !important;
}

:root body.admin-body :is(.header-title-group, .header-text, .header-icon-box, .page-title, .page-subtitle, .cx-header-left, .cx-main-title, .cx-main-subtitle) {
    display: none !important;
}

:root body.admin-body .cx-header-row {
    display: flex !important;
    justify-content: flex-end !important;
    border-bottom: 0 !important;
    margin-bottom: 12px !important;
    padding-bottom: 0 !important;
}

:root body.admin-body .page-header {
    display: flex !important;
    justify-content: flex-end !important;
    align-items: center !important;
    min-height: 0 !important;
    margin: 0 0 16px !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
}

:root body.admin-body .page-header:empty,
:root body.admin-body .page-header:not(:has(.header-actions:not(:empty))) {
    display: none !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* CLIENT AREA ONLY: Clean icon box and header alignment */
:root body.is-client :is(.page-header, .client-page-header) .header-icon-box {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    min-height: 44px !important;
    border-radius: 12px !important;
    background: var(--p-primary-soft, rgba(37, 99, 235, 0.08)) !important;
    color: var(--p-primary, #2563eb) !important;
    font-size: 20px !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
    margin-right: 12px !important;
    position: static !important;
    visibility: visible !important;
    clip: auto !important;
    opacity: 1 !important;
}

:root body.is-client :is(.page-header, .client-page-header) .header-title-group {
    display: flex !important;
    align-items: center !important;
    position: static !important;
    visibility: visible !important;
    clip: auto !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
}

:root body.is-client :is(.page-header, .client-page-header) .header-text {
    position: static !important;
    visibility: visible !important;
    clip: auto !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
    min-width: 0 !important;
    flex: 1 1 auto !important;
}

:root body.is-client :is(.page-header, .client-page-header) :is(.client-page-title, .page-title, h1) {
    position: static !important;
    visibility: visible !important;
    clip: auto !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

:root body.is-client :is(.page-header, .client-page-header) :is(.client-page-desc, .page-subtitle, p) {
    position: static !important;
    visibility: visible !important;
    clip: auto !important;
    opacity: 1 !important;
    width: auto !important;
    height: auto !important;
}

/* ---------- 0. Universal Button Containment & Overflow Prevention ---------- */
:root body:not(#rp) :is(.btn, .pb-btn, .ac-btn, .ax-btn, .si-btn, .dash-btn, .apc-btn, button, [class*="btn-"]) {
    max-width: 100% !important;
    box-sizing: border-box !important;
}

:root body:not(#rp) :is(.btn, .pb-btn, .ac-btn, .ax-btn, .si-btn, .dash-btn, .apc-btn, button) > span {
    max-width: 100%;
    overflow-wrap: anywhere;
}

/* On medium & mobile screens (phones and tablets <= 768px) */
@media (max-width: 768px) {
    :root body:not(#rp) :is(.btn, .pb-btn, .ac-btn, .ax-btn, .si-btn, .dash-btn, .apc-btn, button):not(.vps-tabs-bar *):not(.ops-tabs *):not(.apc-tabs *):not(.nav-tabs *):not(.tab-bar *):not(.sub-nav *):not(.si-tabs *):not([role="tab"]):not(.si-switch):not([role="switch"]):not(.icon-btn):not(.si-icon-btn) {
        white-space: normal !important;
        height: auto !important;
        min-height: 38px;
        line-height: 1.35 !important;
        text-align: center;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }
}

/* Navigation Tabs & Tab buttons MUST keep single line, nowrap, and scroll horizontally */
:root body:not(#rp) :is(.vps-tabs-bar, .ops-tabs, .apc-tabs, .nav-tabs, .tab-bar, .sub-nav, .tabs-bar, .si-tabs) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    scrollbar-width: thin !important;
    gap: 8px !important;
}

:root body:not(#rp) :is(.vps-tabs-bar, .ops-tabs, .apc-tabs, .nav-tabs, .tab-bar, .sub-nav, .tabs-bar, .si-tabs) > :is(a, button, .btn, .nav-link, .si-tab) {
    white-space: nowrap !important;
    flex: 0 0 auto !important;
    min-width: max-content !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

/* Service Insights Auto-Renew Switch (.si-switch) — Guarantees fixed 44px x 24px and perfectly aligned knob */
:root body:not(#rp) .si-switch,
:root body.cc .si-switch,
:root .si-switch {
    appearance: none !important;
    -webkit-appearance: none !important;
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    border-radius: 999px !important;
    border: 0 !important;
    background: #cbd5e1 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    vertical-align: middle !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    line-height: 1 !important;
    transition: background-color .2s ease !important;
}

:root body:not(#rp) .si-switch.is-on,
:root body.cc .si-switch.is-on,
:root .si-switch.is-on {
    background: var(--p-primary, #2563eb) !important;
}

:root body:not(#rp) .si-switch span,
:root body.cc .si-switch span,
:root .si-switch span {
    position: absolute !important;
    top: 3px !important;
    left: 3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
    transition: transform .2s ease !important;
    transform: none !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
}

:root body:not(#rp) .si-switch.is-on span,
:root body.cc .si-switch.is-on span,
:root .si-switch.is-on span {
    transform: translateX(20px) !important;
}

:root body:not(#rp) .si-switch-label,
:root body.cc .si-switch-label {
    font-size: 13px !important;
    font-weight: 600 !important;
    line-height: 24px !important;
    color: var(--p-text, #0f172a) !important;
    margin-left: 2px !important;
}

:root body:not(#rp) .si-inline-form {
    display: inline-flex !important;
    align-items: center !important;
    gap: 8px !important;
    margin: 0 !important;
}

/* Marketplace & fulfillment download button specifics */
:root body:not(#rp) .pb-market-card .pb-btn,
:root body:not(#rp) .pb-table--stack td.is-actions .btn {
    white-space: normal !important;
    height: auto !important;
    min-height: 38px;
    line-height: 1.35 !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
}

/* ---------- 1. Universal Form & Label Layout Protection ---------- */
/* Prevent 1-character vertical text collapse (e.g. Upgrade / Downgrade "N e w  p l a n") */
:root body:not(#rp) :is(.form-group, .form-row, .ops-row, .si-setting-row, .si-form, .apc-grid, .dash-card, .client-card, .card) > * {
    min-width: 0 !important;
}

:root body:not(#rp) .form-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Only block regular form labels; keep search/switch/check labels flex */
:root body:not(#rp) :is(.form-label, .form-group > label, .apc-form-grid label, .form-row label) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

/* Flex / search labels MUST stay flex with centered items (excluding header topbar-search which hides on mobile) */
:root body:not(#rp) :is(.sl-search, .dmx-hub-field, .dmx-search, .search-bar, .search-wrap, .form-check, label.form-check-label) {
    display: flex !important;
    width: auto;
    white-space: normal;
}

/* ==========================================================================
   Universal Toggle Switch Protection (Ui::toggle() -> .switch-row / .switch / .slider)
   Guarantees switch track & knob stay fixed 44px x 24px and never overlap label text
   ========================================================================== */
:root body:not(#rp) .switch-row,
:root body.admin-body .switch-row,
:root body.cc .switch-row {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 14px !important;
    position: relative !important;
    cursor: pointer !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 16px !important;
    background: var(--cl-card, #ffffff) !important;
    border: 1px solid var(--cl-line-soft, #e2e8f0) !important;
    border-radius: 12px !important;
    margin: 0 0 12px 0 !important;
}

:root[data-theme="dark"] body:not(#rp) .switch-row {
    background: var(--cl-card, #1e293b) !important;
    border-color: var(--cl-line, #334155) !important;
}

:root body:not(#rp) :is(.card-body, .form-card, .ops-card, .ops-grid, .apc-card-body, form) > .switch-row,
:root body:not(#rp) :is(.card-body, .form-card, .ops-card, .ops-grid, .apc-card-body, form) > form > .switch-row {
    padding: 12px 16px !important;
    margin: 0 0 12px 0 !important;
}

/* The switch wrapper: ALWAYS fixed 44px x 24px, never auto, never flex-shrink */
:root body:not(#rp) .switch,
:root body.admin-body .switch,
:root body.cc .switch {
    position: relative !important;
    display: inline-block !important;
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 24px !important;
    min-height: 24px !important;
    max-height: 24px !important;
    flex: 0 0 44px !important;
    margin: 2px 0 0 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    vertical-align: middle !important;
}

:root body:not(#rp) .switch input[type="hidden"] {
    display: none !important;
}

:root body:not(#rp) .switch input[type="checkbox"] {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    opacity: 0 !important;
    appearance: none !important;
    -webkit-appearance: none !important;
    -moz-appearance: none !important;
    margin: 0 !important;
    padding: 0 !important;
    cursor: pointer !important;
    z-index: 5 !important;
}

:root body:not(#rp) .switch .slider,
:root body.admin-body .switch .slider,
:root body.cc .switch .slider {
    position: absolute !important;
    inset: 0 !important;
    width: 44px !important;
    height: 24px !important;
    border-radius: 999px !important;
    background: #cbd5e1 !important;
    transition: background-color .2s ease !important;
    cursor: pointer !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
}

:root[data-theme="dark"] body:not(#rp) .switch .slider {
    background: #475569 !important;
}

:root body:not(#rp) .switch .slider::before {
    content: "" !important;
    position: absolute !important;
    left: 3px !important;
    top: 3px !important;
    width: 18px !important;
    height: 18px !important;
    border-radius: 50% !important;
    background: #ffffff !important;
    box-shadow: 0 1px 3px rgba(15, 23, 42, .3) !important;
    transition: transform .2s ease !important;
    transform: none !important;
    display: block !important;
    z-index: 2 !important;
}

:root body:not(#rp) .switch .slider::after {
    display: none !important;
}

:root body:not(#rp) .switch input:checked + .slider {
    background: var(--cl-accent, #4361ee) !important;
}

:root body:not(#rp) .switch input:checked + .slider::before {
    transform: translateX(20px) !important;
}

:root body:not(#rp) .switch input:focus-visible + .slider {
    box-shadow: 0 0 0 3px rgba(67, 97, 238, 0.35) !important;
}

:root body:not(#rp) .switch-text,
:root body.admin-body .switch-text,
:root body.cc .switch-text {
    flex: 1 1 auto !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 3px !important;
    min-width: 0 !important;
    text-align: left !important;
    margin: 0 !important;
    padding: 0 !important;
}

:root body:not(#rp) .switch-text strong {
    display: block !important;
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--cl-ink, #0f172a) !important;
    line-height: 1.4 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

:root[data-theme="dark"] body:not(#rp) .switch-text strong {
    color: #f8fafc !important;
}

:root body:not(#rp) .switch-text small {
    display: block !important;
    font-size: 12.5px !important;
    color: var(--cl-ink-3, #64748b) !important;
    line-height: 1.45 !important;
    margin: 0 !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
}

:root[data-theme="dark"] body:not(#rp) .switch-text small {
    color: #94a3b8 !important;
}

/* Forms inside aside cards (e.g. Upgrade / Downgrade) */
:root body:not(#rp) #plan-change form,
:root body:not(#rp) #plan-change .form-group,
:root body:not(#rp) .apc-card-body .form-group,
:root body:not(#rp) .apc-col .form-group {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-bottom: 12px !important;
}

:root body:not(#rp) #plan-change .form-label,
:root body:not(#rp) .apc-card-body .form-label,
:root body:not(#rp) .apc-col .form-label {
    display: block !important;
    width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    margin-bottom: 6px !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
}

:root body:not(#rp) #plan-change select.form-control,
:root body:not(#rp) .apc-card-body select.form-control,
:root body:not(#rp) .apc-col select.form-control {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    min-height: 42px !important;
}

:root body:not(#rp) :is(.form-control, select.form-control, input.form-control, textarea.form-control) {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
}

:root body:not(#rp) :is(.form-help, .form-text, small.form-help) {
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    max-width: 100% !important;
}

/* ---------- 2. Container & Table Sideways Containment ---------- */
:root body:not(#rp) :is(.table-responsive, .pb-table-wrap, .table-scroll, .dataTables_wrapper) {
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Universal Table Responsiveness: Any table directly inside a card or container scrolls horizontally without blowing out the layout */
:root body:not(#rp) :is(.card, .dash-card, .data-card, .client-card, .form-card, .ops-card, .apc-card, .card-body, .ops-body, .apc-card-body, .page-container, .admin-main) > table,
:root body:not(#rp) :is(.card, .dash-card, .data-card, .client-card, .form-card, .ops-card, .apc-card, .card-body, .ops-body, .apc-card-body, .page-container, .admin-main) > form > table {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
}

:root body:not(#rp) table {
    max-width: 100% !important;
}

:root body:not(#rp) :is(.card, .dash-card, .data-card, .client-card, .kpi-card, .dash-stat, .pb-card, .ac-card, .apc-card, .ops-card, .form-card) {
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-wrap: anywhere;
}

/* Toggle-row inside cards flexes cleanly */
:root body:not(#rp) .toggle-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
    width: 100% !important;
}

:root body:not(#rp) .toggle-row > .switch-row {
    flex: 1 1 240px !important;
    width: auto !important;
    margin-bottom: 0 !important;
}

/* ==========================================================================
   Universal Admin Mobile Responsiveness Overrides (<= 768px)
   ========================================================================== */
@media (max-width: 768px) {
    /* Collapse ALL multi-column inline grids inside admin forms, modals and cards */
    :root body:not(#rp) :is([style*="grid-template-columns: 1fr 1fr"],
                           [style*="grid-template-columns:1fr 1fr"],
                           [style*="grid-template-columns: 2fr 1fr"],
                           [style*="grid-template-columns:2fr 1fr"],
                           [style*="grid-template-columns: 1fr 2fr"],
                           [style*="grid-template-columns:1fr 2fr"],
                           [style*="grid-template-columns: 1fr 1fr 1fr"],
                           [style*="grid-template-columns:1fr 1fr 1fr"],
                           [style*="grid-template-columns: repeat(2"],
                           [style*="grid-template-columns:repeat(2"],
                           [style*="grid-template-columns: repeat(3"],
                           [style*="grid-template-columns:repeat(3"],
                           [style*="grid-template-columns: repeat(4"],
                           [style*="grid-template-columns:repeat(4"]) {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* All form grid rows collapse to single vertical stack */
    :root body:not(#rp) :is(.form-row, .form-grid-2, .form-row-3, .form-grid-3, .form-row-4, .apc-form-grid, .ops-grid) {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
    }

    :root body:not(#rp) :is(.form-row, .form-grid-2, .form-row-3, .form-grid-3, .form-row-4, .apc-form-grid, .ops-grid) > * {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* HTML5 <dialog> elements MUST stay hidden when not open */
    dialog:not([open]) {
        display: none !important;
    }

    [hidden] {
        display: none !important;
    }

    /* ------------------------------------------------------------------
       Modals, Drawers & Popups on Mobile: 100% Smooth Scrolling & Touch
       ------------------------------------------------------------------ */
    :root body:not(#rp) :is(.modal-overlay, .modal-backdrop, .drawer-overlay, .guh-modal-backdrop) {
        padding: 0 !important;
        display: flex !important;
        align-items: flex-end !important;
        justify-content: center !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
    }

    :root body:not(#rp) :is(.modal-dialog, .modal-card, .modal-box, .slide-drawer, .guh-modal-box) {
        width: 100% !important;
        max-width: 100% !important;
        border-radius: 20px 20px 0 0 !important;
        max-height: 90vh !important;
        max-height: 90dvh !important;
        margin: auto 0 0 0 !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important;
        box-shadow: 0 -12px 36px rgba(0, 0, 0, 0.35) !important;
    }

    /* Modal Form wrapper: must be flex column so modal-body can shrink and scroll */
    :root body:not(#rp) :is(.modal-dialog, .modal-card, .modal-box, .slide-drawer) > form {
        display: flex !important;
        flex-direction: column !important;
        flex: 1 1 auto !important;
        min-height: 0 !important;
        overflow: hidden !important;
        margin: 0 !important;
    }

    :root body:not(#rp) :is(.modal-body, .drawer-body, .guh-modal-body) {
        flex: 1 1 auto !important;
        min-height: 0 !important;
        max-height: none !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        touch-action: pan-y !important;
        overscroll-behavior-y: contain !important;
        padding: 16px 18px !important;
    }

    :root body:not(#rp) :is(.modal-header, .drawer-header, .guh-modal-head) {
        flex: 0 0 auto !important;
        padding: 14px 18px !important;
        border-bottom: 1px solid var(--cl-line-soft, #e2e8f0) !important;
        background: var(--cl-card, #ffffff) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 5 !important;
    }

    :root body:not(#rp) :is(.modal-footer, .drawer-footer) {
        flex: 0 0 auto !important;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 8px)) !important;
        padding: 12px 18px calc(12px + env(safe-area-inset-bottom, 8px)) !important;
        border-top: 1px solid var(--cl-line-soft, #e2e8f0) !important;
        background: var(--cl-sunken, #f8fafc) !important;
        display: flex !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
        position: sticky !important;
        bottom: 0 !important;
        z-index: 5 !important;
    }

    :root body:not(#rp) :is(.modal-footer, .drawer-footer) > * {
        width: 100% !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* ------------------------------------------------------------------
       Form Controls on Phones: 16px Stops iOS Zoom, 44px Touch Targets
       ------------------------------------------------------------------ */
    :root body:not(#rp) :is(
        input[type="text"], input[type="email"], input[type="password"],
        input[type="number"], input[type="search"], input[type="tel"],
        input[type="url"], input[type="date"], select, textarea,
        .form-control, .filter-select, .apc-search-input
    ) {
        font-size: 16px !important; /* STRICT: Stops iOS auto-zoom on field focus */
        min-height: 44px !important; /* Apple & Google mobile touch target standard */
        line-height: 1.35 !important;
        width: 100% !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        border-radius: 10px !important;
    }

    :root body:not(#rp) select:is(.form-control, select) {
        -webkit-appearance: none !important;
        -moz-appearance: none !important;
        appearance: none !important;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 14px center !important;
        background-size: 16px !important;
        padding-right: 38px !important;
    }

    :root body:not(#rp) textarea:is(.form-control, textarea) {
        min-height: 100px !important;
        font-size: 16px !important;
        line-height: 1.45 !important;
    }

    :root body:not(#rp) .form-group {
        margin-bottom: 14px !important;
        width: 100% !important;
        min-width: 0 !important;
        box-sizing: border-box !important;
    }

    :root body:not(#rp) .form-label {
        font-size: 13.5px !important;
        font-weight: 600 !important;
        margin-bottom: 6px !important;
        display: block !important;
        color: var(--cl-ink, #0f172a) !important;
    }

    :root body:not(#rp) form div[style*="grid-template-columns"] {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 12px !important;
        box-sizing: border-box !important;
    }

    :root body:not(#rp) form div[style*="grid-column"] {
        grid-column: auto !important;
        width: 100% !important;
    }

    /* Page header & actions on mobile */
    :root body:not(.admin-body):not(#rp) .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
    }

    :root body.admin-body .page-header {
        margin: 0 0 16px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    :root body:not(#rp) .page-header .header-title-group {
        width: 100% !important;
        flex: 1 1 100% !important;
    }

    :root body:not(#rp) .page-header .header-actions {
        width: 100% !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: stretch !important;
    }

    :root body:not(#rp) .page-header .header-actions > * {
        flex: 1 1 calc(50% - 6px) !important;
        min-width: 0 !important;
    }

    :root body:not(#rp) .page-header .header-actions > * > :is(.btn, button) {
        width: 100% !important;
        justify-content: center !important;
    }

    /* Admin toolbars (search bar + filter selects) */
    :root body:not(#rp) :is(.apc-toolbar, .ops-toolbar, .filter-bar-card, .toolbar) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 10px !important;
        padding: 12px 14px !important;
    }

    :root body:not(#rp) :is(.apc-toolbar-form, .ops-toolbar-start, .filter-left-controls) {
        width: 100% !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 10px !important;
    }

    :root body:not(#rp) :is(.apc-toolbar-form, .ops-toolbar) > * {
        width: 100% !important;
        flex: 1 1 auto !important;
        max-width: 100% !important;
    }

    :root body:not(#rp) :is(.apc-toolbar-actions, .ops-toolbar-end) {
        width: 100% !important;
        display: flex !important;
        gap: 8px !important;
        margin-left: 0 !important;
    }

    :root body:not(#rp) :is(.apc-toolbar-actions, .ops-toolbar-end) > :is(.btn, button, a) {
        flex: 1 1 auto !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Long code / hash / token wrapping */
    :root body:not(#rp) :is(code, pre, .ops-mono, .apc-mono, .mono) {
        overflow-wrap: anywhere !important;
        word-break: break-all !important;
    }

    /* Dashboard rows collapse */
    :root body:not(#rp) :is(.dash-row, .dash-row-charts, .dash-row-2, .wapi-grid, .mf-grid) {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    /* Fix inline flex containers with space-between from blowing out mobile viewports */
    :root body:not(#rp) :is([style*="justify-content: space-between"], [style*="justify-content:space-between"]) {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }
}

@media (max-width: 480px) {
    :root body:not(#rp) .page-header .header-actions > * {
        flex: 1 1 100% !important;
    }
    :root body:not(#rp) .toggle-row > .switch-row {
        flex: 1 1 100% !important;
    }
}

/* ---------- 3. Services Search Bar & Filter Alignment ---------- */
:root body:not(#rp) .sl-search {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 10px !important;
    height: 42px !important;
    padding: 0 14px !important;
    border: 1px solid var(--cl-line, #cbd5e1) !important;
    border-radius: 10px !important;
    background: var(--cl-card, #ffffff) !important;
    box-sizing: border-box !important;
}
:root body:not(#rp) .sl-search svg {
    flex: 0 0 16px !important;
    width: 16px !important;
    height: 16px !important;
    color: var(--cl-ink-3, #94a3b8) !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    display: block !important;
}
:root body:not(#rp) .sl-search :is(input, input[type="search"], input[type="text"]) {
    flex: 1 1 auto !important;
    height: 100% !important;
    min-height: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    font-size: 13.5px !important;
    line-height: normal !important;
    color: var(--cl-ink, #0f172a) !important;
    box-shadow: none !important;
}
:root body:not(#rp) .sl-filter select.form-control {
    height: 42px !important;
    min-height: 42px !important;
    border-radius: 10px !important;
    border: 1px solid var(--cl-line, #cbd5e1) !important;
    background: var(--cl-card, #ffffff) !important;
    padding: 0 34px 0 12px !important;
    font-size: 13.5px !important;
    color: var(--cl-ink, #0f172a) !important;
}
@media (max-width: 720px) {
    :root body:not(#rp) .sl-tools {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 14px !important;
    }
    :root body:not(#rp) .sl-tools > * {
        width: 100% !important;
        flex: 1 1 auto !important;
    }
    :root body:not(#rp) .sl-filter {
        width: 100% !important;
    }
    :root body:not(#rp) .sl-filter select.form-control {
        width: 100% !important;
    }
    :root body:not(#rp) .sl-order {
        width: 100% !important;
        justify-content: center !important;
    }
}

/* ---------- 4. WHOIS Lookup Search Bar & Button Alignment ---------- */
:root body:not(#rp) .dmx-hub-search {
    border: 1.5px solid var(--cl-line, #cbd5e1) !important;
    border-radius: 12px !important;
    background: var(--cl-card, #ffffff) !important;
    overflow: hidden !important;
}
:root body:not(#rp) .dmx-hub-field {
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    position: relative !important;
    height: 52px !important;
    padding: 0 !important;
    margin: 0 !important;
    flex: 1 1 auto !important;
    min-width: 0 !important;
}
:root body:not(#rp) .dmx-hub-field svg {
    position: absolute !important;
    left: 16px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    width: 18px !important;
    height: 18px !important;
    color: var(--cl-ink-3, #94a3b8) !important;
    pointer-events: none !important;
    margin: 0 !important;
}
:root body:not(#rp) .dmx-hub-field input {
    width: 100% !important;
    height: 52px !important;
    line-height: 52px !important;
    padding: 0 16px 0 46px !important;
    border: 0 !important;
    outline: 0 !important;
    background: transparent !important;
    font-size: 14.5px !important;
    color: var(--cl-ink, #0f172a) !important;
    box-shadow: none !important;
}
:root body:not(#rp) .dmx-hub-search .btn {
    min-height: 52px !important;
    height: 52px !important;
    padding: 0 24px !important;
    font-size: 14.5px !important;
    font-weight: 600 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
}
@media (max-width: 720px) {
    :root body:not(#rp) .dmx-hub-search {
        flex-direction: column !important;
    }
    :root body:not(#rp) .dmx-hub-search .btn {
        width: 100% !important;
        border-radius: 0 0 11px 11px !important;
        border-top: 1px solid var(--cl-line-soft, #e2e8f0) !important;
        min-height: 48px !important;
        height: 48px !important;
    }
    :root body:not(#rp) .dmx-hub-field input {
        height: 48px !important;
        line-height: 48px !important;
    }
}

/* ---------- 5. Mobile Client Sidebar Tree Navigation ---------- */
:root body.cc .client-sidebar .nav-sub::before,
:root body:not(#rp) .client-sidebar .nav-sub::before,
:root body.is-client .client-sidebar .nav-sub::before,
.nav-sub::before {
    display: none !important;
    content: none !important;
    width: 0 !important;
    height: 0 !important;
    border: none !important;
}

:root body.cc .client-sidebar .nav-sub,
:root body:not(#rp) .client-sidebar .nav-sub,
:root body.is-client .client-sidebar .nav-sub,
.client-sidebar .nav-sub {
    list-style: none !important;
    margin: 4px 0 6px 18px !important;
    padding: 2px 0 2px 8px !important;
    border-left: none !important;
    border: none !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    position: relative !important;
}
:root .client-sidebar .nav-sub::before,
:root .client-sidebar .nav-sub::after,
:root .client-sidebar .nav-sub .nav-item::before,
:root .client-sidebar .nav-sub .nav-item::after {
    display: none !important;
    content: none !important;
    border: none !important;
}
:root body.cc .client-sidebar .nav-sub[hidden],
:root body:not(#rp) .client-sidebar .nav-sub[hidden] {
    display: none !important;
}
:root body.cc .client-sidebar .nav-sub .nav-item {
    margin: 0 !important;
    width: 100% !important;
    list-style: none !important;
}
:root body.cc .client-sidebar .nav-sub .nav-item a {
    display: flex !important;
    align-items: center !important;
    padding: 7px 12px !important;
    min-height: 34px !important;
    font-size: 13.5px !important;
    border-radius: 8px !important;
    color: var(--cl-ink-2, #475569) !important;
    text-decoration: none !important;
    transition: all .15s ease !important;
}
:root body.cc .client-sidebar .nav-sub .nav-item.active > a {
    background: var(--cl-active, rgba(67, 97, 238, 0.08)) !important;
    color: var(--cl-accent, #4361ee) !important;
    font-weight: 600 !important;
}

/* Hide floating mobile bottom-nav when sidebar drawer is open */
:root body.sidebar-locked .bottom-nav,
:root .sidebar-backdrop.active ~ .bottom-nav,
:root .client-sidebar.open ~ .bottom-nav {
    display: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* ---------- 6. Stacked Table Cards Polish ---------- */
@media (max-width: 768px) {
    :root body:not(#rp) .pb-table--stack tr {
        padding: 16px 18px !important;
        margin-bottom: 12px !important;
        border-radius: 12px !important;
        background: var(--cl-card, #ffffff) !important;
        box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    }
    :root body:not(#rp) .pb-table--stack td {
        padding: 8px 0 !important;
        font-size: 13.5px !important;
    }
    :root body:not(#rp) .pb-table--stack td::before {
        font-size: 11px !important;
        letter-spacing: .05em !important;
        font-weight: 700 !important;
        color: var(--cl-ink-3, #64748b) !important;
        text-transform: uppercase !important;
    }
    :root body:not(#rp) .pb-table--stack td.is-lead {
        padding-bottom: 12px !important;
        margin-bottom: 6px !important;
        border-bottom: 1px dashed var(--cl-line-soft, #f1f5f9) !important;
    }
    :root body:not(#rp) .pb-table--stack td.is-actions {
        padding-top: 14px !important;
        margin-top: 6px !important;
        border-top: 1px dashed var(--cl-line-soft, #f1f5f9) !important;
        width: 100% !important;
    }
    :root body:not(#rp) .pb-table--stack td.is-actions .pb-btn {
        width: 100% !important;
        min-height: 44px !important;
        height: 44px !important;
        border-radius: 10px !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        justify-content: center !important;
    }

    /* Fulfillment pill inside stacked cards */
    :root body:not(#rp) .pb-table--stack td.is-fulfillment {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 6px !important;
        text-align: left !important;
    }
    :root body:not(#rp) .pb-table--stack td.is-fulfillment::before {
        margin-top: 0 !important;
        flex: 0 0 auto !important;
        text-align: left !important;
    }
    :root body:not(#rp) .pb-table--stack td.is-fulfillment .pb-fulfillment-pill {
        width: 100% !important;
        max-width: 100% !important;
        word-break: break-all !important;
        overflow-wrap: anywhere !important;
        white-space: normal !important;
        text-align: left !important;
        box-sizing: border-box !important;
    }
}

/* Universal Fulfillment Pill styling */
:root body:not(#rp) .pb-fulfillment-pill {
    display: inline-flex !important;
    align-items: flex-start !important;
    gap: 6px !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: #15803d !important;
    background: rgba(34, 197, 94, 0.08) !important;
    border: 1px solid rgba(34, 197, 94, 0.22) !important;
    border-radius: 8px !important;
    padding: 6px 10px !important;
    max-width: 100% !important;
    width: 100% !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-overflow: unset !important;
    text-align: left !important;
    line-height: 1.45 !important;
    box-sizing: border-box !important;
}
:root body:not(#rp) .pb-fulfillment-ico {
    flex-shrink: 0 !important;
    flex: 0 0 14px !important;
    display: flex !important;
    align-items: center !important;
    margin-top: 2px !important;
    color: #16a34a !important;
}
:root body:not(#rp) .pb-fulfillment-text {
    flex: 1 1 auto !important;
    word-break: break-all !important;
    overflow-wrap: anywhere !important;
    white-space: normal !important;
    text-overflow: unset !important;
    max-width: 100% !important;
}

/* ---------- 7. Scroll Performance & Animation Lag Fix ---------- */
/* Stop hidden element flicker / lag on mobile scroll */
:root body.cc .cm-reveal {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
    transition: none !important;
}
:root body.cc .cm-reveal.cm-in {
    opacity: 1 !important;
    transform: none !important;
}

/* ---------- 8. Phones (to 640 px) ---------- */
@media (max-width: 640px) {
    /* Stat / KPI tiles: two per row */
    :root body:not(#rp) :is(.dash-stats, .ps-stats, .kpi-grid, .cx-kpi-grid, .wapi-stats, .srv-stats) {
        display: grid !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
        gap: 10px !important;
    }
    /* an odd last tile spans the row instead of leaving a hole */
    :root body:not(#rp) :is(.dash-stats, .ps-stats, .kpi-grid, .cx-kpi-grid, .wapi-stats, .srv-stats) > :last-child:nth-child(odd) { grid-column: 1 / -1; }

    /* client tiles */
    :root body:not(#rp) .dash-stat { padding: 12px 12px 11px !important; min-width: 0; }
    :root body:not(#rp) .dash-stat-ico { width: 30px !important; height: 30px !important; }
    :root body:not(#rp) .dash-stat-ico svg { width: 15px !important; height: 15px !important; }
    :root body:not(#rp) .dash-stat-label { font-size: 11.5px !important; }
    :root body:not(#rp) .dash-stat-value { font-size: 19px !important; overflow-wrap: anywhere; }
    :root body:not(#rp) .dash-stat-link { margin-top: 6px !important; font-size: 11.5px !important; }

    /* ==========================================================================
       UNIVERSAL KPI CARD & EXECUTIVE METRICS MOBILE RESPONSIVENESS
       Fixes squeezed 60px columns, side-floating icons, and distorted badge blobs
       ========================================================================== */
    :root .page-container .kpi-card,
    :root body:not(#rp) .kpi-card,
    :root body:not(#rp) .cx-kpi-card,
    :root body:not(#rp) .wapi-stat {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 16px 18px !important;
        gap: 6px !important;
        min-height: 0 !important;
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    :root .page-container .kpi-card .kpi-top,
    :root body:not(#rp) .kpi-card .kpi-top {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: flex-start !important;
        width: 100% !important;
        gap: 10px !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    :root .page-container .kpi-card .kpi-label,
    :root body:not(#rp) .kpi-card .kpi-label {
        flex: 1 1 auto !important;
        font-size: 13.5px !important;
        font-weight: 500 !important;
        line-height: 1.35 !important;
        color: var(--p-text-3, #64748b) !important;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: clip !important;
        margin: 0 !important;
    }

    :root .page-container .kpi-card .kpi-icon-pill.kpi-icon-pill,
    :root body:not(#rp) .kpi-card .kpi-icon-pill {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        min-height: 38px !important;
        border-radius: 10px !important;
        flex: 0 0 38px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 18px !important;
        margin: 0 !important;
    }

    :root .page-container .kpi-card .kpi-val,
    :root body:not(#rp) .kpi-card .kpi-val {
        font-size: 22px !important;
        line-height: 1.25 !important;
        font-weight: 700 !important;
        color: var(--p-text, #0f172a) !important;
        margin: 4px 0 0 0 !important;
        word-break: break-word !important;
        overflow-wrap: anywhere !important;
    }

    :root .page-container .kpi-card .kpi-meta,
    :root body:not(#rp) .kpi-card .kpi-meta {
        font-size: 12px !important;
        line-height: 1.4 !important;
        color: var(--p-text-3, #64748b) !important;
        margin: 2px 0 0 0 !important;
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 6px !important;
    }

    :root .page-container .kpi-card .kpi-meta :is(.trend-up, .trend-down) {
        display: inline-flex !important;
        align-items: center !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        font-size: 11.5px !important;
        line-height: 1.3 !important;
        font-weight: 600 !important;
        width: fit-content !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    :root .page-container .kpi-card > :not(.kpi-top):not(.kpi-val):not(.kpi-meta):not(.kpi-icon-pill):not(.kpi-label) {
        margin-top: 4px !important;
        width: 100% !important;
    }

    /* Admin customer header: avatar beside the name, not floating mid-height */
    :root body:not(#rp) :is(.apc-hero-main, .apc-hero-id) { align-items: flex-start !important; }
    :root body:not(#rp) .apc-hero-avatar { width: 48px !important; height: 48px !important; flex: 0 0 48px; font-size: 18px !important; }
    /* quick actions two per row instead of a full-width stack */
    :root body:not(#rp) .apc-quick { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px !important; }
    :root body:not(#rp) .apc-quick form, :root body:not(#rp) .apc-quick > .btn, :root body:not(#rp) .apc-quick > a { width: 100%; }
    :root body:not(#rp) .apc-quick .btn { width: 100%; justify-content: center; padding-left: 8px; padding-right: 8px; }
    :root body:not(#rp) .apc-quick .apc-quick-sep { display: none; }

    /* Long words (emails, hostnames, IDs) never push a card wider than the screen */
    :root body:not(#rp) :is(.dash-card, .data-card, .client-card, .kpi-card, .dash-stat) { overflow-wrap: anywhere; }
}

/* ---------- 9. Phone viewports (<= 768px): 1 clean card per row ---------- */
@media (max-width: 768px) {
    :root .page-container .kpi-grid,
    :root body:not(#rp) :is(.kpi-grid, .cx-kpi-grid, .wapi-stats, .srv-stats, .dash-stats, .ps-stats) {
        grid-template-columns: 1fr !important;
        gap: 12px !important;
    }
    :root body:not(#rp) .apc-quick {
        grid-template-columns: 1fr !important;
    }
}

/* ==========================================================================
   10. MOBILE APP EXPERIENCE POLISH (Phones <= 768px)
   Ultra-modern floating app bar, app drawer, touch feedback & card ergonomics
   ========================================================================== */
@media (max-width: 768px) {
    /* Floating mobile navigation bar */
    :root body.is-client .bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        position: fixed !important;
        left: 12px !important;
        right: 12px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 94 !important;
        padding: 6px 4px !important;
        background: rgba(255, 255, 255, 0.95) !important;
        backdrop-filter: blur(20px) saturate(180%) !important;
        -webkit-backdrop-filter: blur(20px) saturate(180%) !important;
        border: 1px solid rgba(226, 232, 240, 0.85) !important;
        border-radius: 24px !important;
        box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.2), 0 4px 12px -2px rgba(15, 23, 42, 0.08) !important;
    }
    :root[data-theme="dark"] body.is-client .bottom-nav {
        background: rgba(15, 23, 42, 0.95) !important;
        border-color: rgba(51, 65, 85, 0.7) !important;
        box-shadow: 0 12px 32px -8px rgba(0, 0, 0, 0.6) !important;
    }
    :root body.is-client .bottom-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 5px 2px !important;
        min-height: 48px !important;
        text-decoration: none !important;
        font-size: 11px !important;
        font-weight: 500 !important;
        color: var(--cl-ink-3, #64748b) !important;
        border-radius: 14px !important;
        transition: color .15s ease, transform .15s ease !important;
    }
    :root body.is-client .bottom-nav-item svg {
        width: 20px !important;
        height: 20px !important;
        transition: transform .2s ease !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-item.active {
        color: var(--cl-accent, #4361ee) !important;
        font-weight: 600 !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-item.active svg {
        transform: translateY(-1px) scale(1.08) !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-cta {
        position: relative !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-fab {
        width: 44px !important;
        height: 44px !important;
        border-radius: 14px !important;
        background: #2563eb !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: -20px auto 2px !important;
        box-shadow: 0 8px 20px -4px rgba(37, 99, 235, 0.55) !important;
        border: 3px solid var(--cl-card, #ffffff) !important;
        transition: transform .2s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
    }
    :root[data-theme="dark"] body:is(.is-client, .is-guest) .bottom-nav-fab {
        border-color: #0f172a !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-cta:active .bottom-nav-fab {
        transform: scale(0.92) !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-fab svg {
        width: 22px !important;
        height: 22px !important;
        color: #ffffff !important;
        stroke: #ffffff !important;
        fill: none !important;
    }

    /* Content bottom padding ensures floating nav never overlaps content */
    :root body.is-client .client-content {
        padding: 16px 14px 105px !important;
    }

    /* Mobile Header Clean Spacing & Hamburger Protection */
    :root body.is-client .topbar-search {
        display: none !important;
    }
    :root body.is-client .client-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        height: 60px !important;
        padding: 0 12px !important;
        background: var(--cl-card, #ffffff) !important;
        border-bottom: 1px solid var(--cl-line-soft, #f1f5f9) !important;
        overflow: visible !important;
    }
    :root body.is-client .header-left {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
        flex: 0 0 auto !important;
        min-width: 0 !important;
    }
    :root body.is-client .header-right {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 6px !important;
        flex: 1 1 auto !important;
        min-width: 0 !important;
    }
    :root body.is-client .mobile-menu-btn {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: #ffffff !important;
        border: 1.5px solid #cbd5e1 !important;
        color: #0f172a !important;
        cursor: pointer !important;
        box-shadow: 0 1px 3px rgba(0,0,0,0.06) !important;
        flex-shrink: 0 !important;
    }
    :root[data-theme="dark"] body.is-client .mobile-menu-btn {
        background: #1e293b !important;
        border-color: #334155 !important;
        color: #f8fafc !important;
    }
    :root body.is-client .header-guest-auth {
        gap: 6px !important;
        margin-left: 2px !important;
    }
    :root body.is-client .header-guest-btn {
        padding: 6px 11px !important;
        font-size: 11.5px !important;
        border-radius: 7px !important;
    }
    :root body.is-client .header-greeting {
        display: none !important;
    }

    /* Guaranteed Symmetrical 5-Item Bottom Nav Bar */
    :root body:is(.is-client, .is-guest) .bottom-nav {
        display: grid !important;
        grid-template-columns: repeat(5, 1fr) !important;
        align-items: center !important;
        position: fixed !important;
        left: 10px !important;
        right: 10px !important;
        bottom: calc(10px + env(safe-area-inset-bottom, 0px)) !important;
        z-index: 9999 !important;
        padding: 6px !important;
        background: #ffffff !important;
        border: 1px solid #e2e8f0 !important;
        border-radius: 20px !important;
        box-shadow: 0 10px 30px rgba(15, 23, 42, 0.12) !important;
    }
    :root[data-theme="dark"] body:is(.is-client, .is-guest) .bottom-nav {
        background: #0f172a !important;
        border-color: #1e293b !important;
        box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45) !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-item,
    :root body:is(.is-client, .is-guest) .bottom-nav-item.active,
    :root body:is(.is-client, .is-guest) .bottom-nav-item:active,
    :root body:is(.is-client, .is-guest) .bottom-nav-item:focus,
    :root body:is(.is-client, .is-guest) .bottom-nav-item:hover,
    :root body:is(.is-client, .is-guest) .bottom-nav-cta,
    :root body:is(.is-client, .is-guest) .bottom-nav-cta.active,
    :root body:is(.is-client, .is-guest) .bottom-nav-cta:active {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 3px !important;
        padding: 5px 0 !important;
        font-size: 10.5px !important;
        font-weight: 600 !important;
        text-decoration: none !important;
        background: transparent !important;
        background-color: transparent !important;
        box-shadow: none !important;
        outline: none !important;
        -webkit-tap-highlight-color: transparent !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-item:not(.active) {
        color: #64748b !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-item:not(.active) svg {
        color: #64748b !important;
        stroke: #64748b !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-item.active {
        color: #2563eb !important;
        font-weight: 700 !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-item.active > svg {
        color: #2563eb !important;
        stroke: #2563eb !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-fab svg,
    :root body:is(.is-client, .is-guest) .bottom-nav-fab svg path,
    :root body:is(.is-client, .is-guest) .bottom-nav-cta.active .bottom-nav-fab svg,
    :root body:is(.is-client, .is-guest) .bottom-nav-cta.active .bottom-nav-fab svg path,
    body:is(.is-client, .is-guest) .bottom-nav-fab svg,
    body:is(.is-client, .is-guest) .bottom-nav-fab svg path,
    .bottom-nav-fab svg,
    .bottom-nav-fab svg path {
        color: #ffffff !important;
        stroke: #ffffff !important;
        fill: none !important;
        stroke-width: 2.5px !important;
        width: 22px !important;
        height: 22px !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    :root body:is(.is-client, .is-guest) .bottom-nav-fab {
        width: 44px !important;
        height: 44px !important;
        margin-top: -20px !important;
        border-radius: 14px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        color: #ffffff !important;
        background: #2563eb !important;
        box-shadow: 0 4px 14px rgba(37, 99, 235, 0.45) !important;
        border: 3px solid #ffffff !important;
        box-sizing: border-box !important;
    }
    :root[data-theme="dark"] body:is(.is-client, .is-guest) .bottom-nav-fab {
        border-color: #0f172a !important;
    }

    /* Store Category Pills Horizontal Touch Slider on Phones */
    :root body.is-client .store-cat-bar {
        display: flex !important;
        flex-wrap: nowrap !important;
        justify-content: flex-start !important;
        align-items: center !important;
        gap: 8px !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        padding: 6px 14px 14px !important;
        margin: 0 -14px 14px -14px !important;
        width: calc(100% + 28px) !important;
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    :root body.is-client .store-cat-bar::-webkit-scrollbar {
        display: none !important;
    }
    :root body.is-client .store-cat-pill {
        flex: 0 0 auto !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    :root body.is-client .topbar-pin {
        padding: 4px 8px !important;
        border-radius: 8px !important;
        font-size: 12px !important;
    }
    :root body.is-client .topbar-pin-label {
        display: none !important;
    }
    :root body.is-client .topbar-cart-text {
        display: none !important;
    }
    :root body.is-client .topbar-cart {
        padding: 6px !important;
        border-radius: 10px !important;
    }
    :root body.is-client .theme-toggle {
        width: 38px !important;
        height: 38px !important;
        min-width: 38px !important;
        border-radius: 10px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    :root body.is-client .header-avatar-btn {
        width: 36px !important;
        height: 36px !important;
        min-width: 36px !important;
        border-radius: 50% !important;
    }

    /* Mobile Sidebar Drawer */
    :root body.is-client .client-sidebar {
        width: 300px !important;
        max-width: 86vw !important;
        border-radius: 0 20px 20px 0 !important;
        box-shadow: 0 20px 60px rgba(15, 23, 42, 0.35) !important;
        background: var(--cl-card, #ffffff) !important;
    }
    :root body.is-client .sidebar-backdrop {
        background: rgba(15, 23, 42, 0.65) !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        z-index: 9990 !important;
    }
    :root body.is-client :is(.client-sidebar.open, .client-sidebar.mobile-open, #clientSidebar.open, #clientSidebar.mobile-open) {
        z-index: 10001 !important;
        position: fixed !important;
        filter: none !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
}

/* Card & Tile Polish on Phones */
@media (max-width: 640px) {
    :root body:not(#rp) :is(.dash-card, .data-card, .client-card, .pb-card, .ps-card, .card) {
        border-radius: 16px !important;
        padding: 16px 14px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 2px 10px rgba(15, 23, 42, 0.04), 0 0 0 1px var(--cl-line-soft, #f1f5f9) !important;
    }
    :root body:not(#rp) :is(.dash-card-head, .card-head, .client-card-header, .pb-card-head) {
        padding: 0 0 14px !important;
        margin-bottom: 14px !important;
        border-bottom: 1px solid var(--cl-line-soft, #f1f5f9) !important;
    }
    :root body:not(#rp) :is(.client-page-title, .page-title, .page-header h1, .client-page-header h1, .ps-title, .ac-title, .pb-title) {
        font-size: 22px !important;
        line-height: 1.25 !important;
    }
    :root body:not(#rp) .client-page-header {
        margin-bottom: 16px !important;
        gap: 10px !important;
    }
}

/* Quick search dropdown matches the clean card theme */
:root body.cc .topbar-search,
:root body:not(#rp) .topbar-search {
    position: relative !important;
    transition: width 0.2s ease, max-width 0.2s ease, box-shadow 0.2s ease !important;
}

:root body.cc .quick-search-dropdown,
:root body:not(#rp) .quick-search-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: 320px !important;
    max-width: calc(100vw - 32px) !important;
    max-height: 400px !important;
    overflow-y: auto !important;
    background: var(--cl-card, #ffffff) !important;
    border: 1.5px solid var(--cl-line, #e2e8f0) !important;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16) !important;
    border-radius: 14px !important;
    padding: 8px !important;
    z-index: 9999 !important;
    box-sizing: border-box !important;
}

:root[data-theme="dark"] body.cc .quick-search-dropdown,
:root[data-theme="dark"] body:not(#rp) .quick-search-dropdown {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.6) !important;
}

:root body.cc .quick-search-header,
:root body:not(#rp) .quick-search-header {
    font-size: 11px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.05em !important;
    color: var(--cl-ink-3, #94a3b8) !important;
    padding: 6px 10px 4px !important;
}

:root body.cc .quick-search-item,
:root body:not(#rp) .quick-search-item {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 10px !important;
    padding: 8px 12px !important;
    border-radius: 10px !important;
    color: var(--cl-ink, #0f172a) !important;
    text-decoration: none !important;
    font-size: 13.5px !important;
    font-weight: 500 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    box-sizing: border-box !important;
    width: 100% !important;
}

:root[data-theme="dark"] body.cc .quick-search-item,
:root[data-theme="dark"] body:not(#rp) .quick-search-item {
    color: #f1f5f9 !important;
}

:root body.cc .quick-search-item:hover,
:root body.cc .quick-search-item.is-selected,
:root body:not(#rp) .quick-search-item:hover,
:root body:not(#rp) .quick-search-item.is-selected {
    background: var(--cl-active, rgba(67, 97, 238, 0.08)) !important;
    color: var(--cl-accent, #4361ee) !important;
}

:root[data-theme="dark"] body.cc .quick-search-item:hover,
:root[data-theme="dark"] body.cc .quick-search-item.is-selected,
:root[data-theme="dark"] body:not(#rp) .quick-search-item:hover,
:root[data-theme="dark"] body:not(#rp) .quick-search-item.is-selected {
    background: rgba(67, 97, 238, 0.22) !important;
    color: #818cf8 !important;
}

:root body.cc .quick-search-icon,
:root body:not(#rp) .quick-search-icon {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 28px !important;
    height: 28px !important;
    min-width: 28px !important;
    border-radius: 8px !important;
    background: var(--cl-sunken, #f1f5f9) !important;
    color: var(--cl-ink-3, #64748b) !important;
    flex-shrink: 0 !important;
    position: relative !important;
}

:root body.cc .quick-search-icon svg,
:root body:not(#rp) .quick-search-icon svg {
    position: static !important;
    left: auto !important;
    top: auto !important;
    transform: none !important;
    width: 15px !important;
    height: 15px !important;
    display: block !important;
    color: inherit !important;
    pointer-events: none !important;
    margin: auto !important;
}

:root[data-theme="dark"] body.cc .quick-search-icon,
:root[data-theme="dark"] body:not(#rp) .quick-search-icon {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

:root body.cc .quick-search-item:hover .quick-search-icon,
:root body.cc .quick-search-item.is-selected .quick-search-icon,
:root body:not(#rp) .quick-search-item:hover .quick-search-icon,
:root body:not(#rp) .quick-search-item.is-selected .quick-search-icon {
    background: var(--cl-accent, #4361ee) !important;
    color: #ffffff !important;
}

:root body.cc .quick-search-label,
:root body:not(#rp) .quick-search-label {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}

:root body.cc .quick-search-badge,
:root body:not(#rp) .quick-search-badge {
    flex: 0 0 auto !important;
    margin-left: auto !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    padding: 2px 7px !important;
    border-radius: 6px !important;
    background: var(--cl-sunken, #f1f5f9) !important;
    color: var(--cl-ink-3, #64748b) !important;
}

:root[data-theme="dark"] body.cc .quick-search-badge,
:root[data-theme="dark"] body:not(#rp) .quick-search-badge {
    background: #0f172a !important;
    color: #94a3b8 !important;
}

@media (max-width: 768px) {
    :root body.cc .quick-search-dropdown,
    :root body:not(#rp) .quick-search-dropdown {
        left: 0 !important;
        right: auto !important;
        width: min(320px, calc(100vw - 32px)) !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* ==========================================================================
   Universal Navigation Tabs Protection (Admin & Client)
   Prevents any tab bar from vertical squishing or 1-letter-per-line wrapping
   ========================================================================== */
:root body:not(#rp) :is(.vps-tabs-bar, .ops-tabs, .apc-tabs, .seg-tabs, .tabs, .nav-tabs, .tab-bar, .group-tabs, .group-bar) {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    gap: 8px !important;
    width: 100% !important;
    max-width: 100% !important;
    padding-bottom: 6px !important;
    scrollbar-width: thin !important;
    box-sizing: border-box !important;
}

:root body:not(#rp) :is(.vps-tabs-bar, .ops-tabs, .apc-tabs, .seg-tabs, .tabs, .nav-tabs, .tab-bar, .group-tabs, .group-bar) > * {
    flex: 0 0 auto !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    height: 42px !important;
    min-height: 42px !important;
    max-height: 42px !important;
    padding: 0 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    text-decoration: none !important;
    box-sizing: border-box !important;
}

:root body:not(#rp) :is(.vps-tabs-bar, .ops-tabs, .apc-tabs, .seg-tabs, .tabs, .nav-tabs, .tab-bar, .group-tabs, .group-bar) > * > * {
    white-space: nowrap !important;
}

/* ==========================================================================
   Support Ticket Conversation: Professional Message Stream
   Replaces SMS/WhatsApp blue chat bubble with clean Helpdesk message cards
   ========================================================================== */
:root body.cc .ac-chat,
:root body:not(#rp) .ac-chat {
    display: flex !important;
    flex-direction: column !important;
    gap: 16px !important;
    padding: 18px 20px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

:root body.cc .ac-msg,
:root body:not(#rp) .ac-msg {
    width: 100% !important;
    max-width: 100% !important;
    align-self: stretch !important;
    border: 1px solid var(--cl-line-soft, #e2e8f0) !important;
    border-radius: 14px !important;
    background: var(--cl-card, #ffffff) !important;
    overflow: hidden !important;
    box-shadow: 0 2px 8px rgba(15, 23, 42, 0.04) !important;
    margin: 0 !important;
}

:root[data-theme="dark"] body.cc .ac-msg,
:root[data-theme="dark"] body:not(#rp) .ac-msg {
    background: #1e293b !important;
    border-color: #334155 !important;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.3) !important;
}

:root body.cc .ac-msg--staff,
:root body:not(#rp) .ac-msg--staff {
    border-left: 4px solid var(--cl-accent, #4361ee) !important;
}

:root body.cc .ac-msg--me,
:root body:not(#rp) .ac-msg--me {
    border-left: 4px solid #10b981 !important;
}

:root body.cc .ac-msg--ai,
:root body:not(#rp) .ac-msg--ai {
    border-left: 4px solid #8b5cf6 !important;
}

:root body.cc .ac-msg-header,
:root body:not(#rp) .ac-msg-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    padding: 12px 18px !important;
    background: var(--cl-hover, #f8fafc) !important;
    border-bottom: 1px solid var(--cl-line-soft, #f1f5f9) !important;
    border-radius: 14px 14px 0 0 !important;
}

:root[data-theme="dark"] body.cc .ac-msg-header,
:root[data-theme="dark"] body:not(#rp) .ac-msg-header {
    background: #0f172a !important;
    border-bottom-color: #334155 !important;
}

:root body.cc .ac-msg-body,
:root body:not(#rp) .ac-msg-body {
    padding: 18px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

:root body.cc .ac-msg-bubble,
:root body.cc .ac-msg--me .ac-msg-bubble,
:root body:not(#rp) .ac-msg-bubble,
:root body:not(#rp) .ac-msg--me .ac-msg-bubble {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--cl-ink, #0f172a) !important;
    font-size: 14.5px !important;
    line-height: 1.65 !important;
    white-space: pre-wrap !important;
    word-break: break-word !important;
    overflow-wrap: anywhere !important;
    text-align: left !important;
    padding: 0 !important;
    margin: 0 !important;
}

:root[data-theme="dark"] body.cc .ac-msg-bubble,
:root[data-theme="dark"] body.cc .ac-msg--me .ac-msg-bubble,
:root[data-theme="dark"] body:not(#rp) .ac-msg-bubble,
:root[data-theme="dark"] body:not(#rp) .ac-msg--me .ac-msg-bubble {
    color: #f1f5f9 !important;
}

/* ==========================================================================
   WHOIS Lookup Clean Mobile Form (Fix Image 5)
   ========================================================================== */
@media (max-width: 768px) {
    :root body:not(#rp) .dmx-whois-form,
    :root body:not(#rp) .dmx-hub-search {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        border: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        padding: 0 !important;
        width: 100% !important;
    }
    :root body:not(#rp) .dmx-whois-form .dmx-hub-field,
    :root body:not(#rp) .dmx-hub-search .dmx-hub-field {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        width: 100% !important;
        height: 50px !important;
        border: 1.5px solid var(--cl-line, #cbd5e1) !important;
        border-radius: 12px !important;
        background: var(--cl-card, #ffffff) !important;
        padding: 0 !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }
    :root body:not(#rp) .dmx-whois-form .dmx-hub-field svg,
    :root body:not(#rp) .dmx-hub-search .dmx-hub-field svg {
        position: absolute !important;
        left: 16px !important;
        top: 50% !important;
        transform: translateY(-50%) !important;
        width: 18px !important;
        height: 18px !important;
        color: var(--cl-ink-3, #94a3b8) !important;
        z-index: 3 !important;
        pointer-events: none !important;
        margin: 0 !important;
    }
    :root body:not(#rp) .dmx-whois-form .dmx-hub-field :is(input, input[type="text"]),
    :root body:not(#rp) .dmx-hub-search .dmx-hub-field :is(input, input[type="text"]) {
        width: 100% !important;
        height: 100% !important;
        padding: 0 16px 0 46px !important;
        border: 0 !important;
        outline: 0 !important;
        background: transparent !important;
        box-shadow: none !important;
        font-size: 14.5px !important;
        color: var(--cl-ink, #0f172a) !important;
        border-radius: 12px !important;
        box-sizing: border-box !important;
    }
    :root body:not(#rp) .dmx-whois-form .btn,
    :root body:not(#rp) .dmx-hub-search .btn {
        width: 100% !important;
        height: 48px !important;
        min-height: 48px !important;
        border-radius: 12px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 0 !important;
        box-sizing: border-box !important;
    }
}

/* ==========================================================================
   Mobile Sidebar Drawer Backdrop Stacking (Admin & Client)
   Prevents backdrop blur from ever covering or blurring the open sidebar drawer
   ========================================================================== */
:root :is(.sidebar-backdrop, #sidebarBackdrop) {
    z-index: 9990 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(15, 23, 42, 0.65) !important;
}

:root :is(
    .client-sidebar, #clientSidebar,
    .admin-sidebar, #appSidebar,
    .as-sidebar
) {
    filter: none !important;
}

@media (max-width: 1024px) {
    :root:not([data-theme="dark"]) :is(.client-sidebar, #clientSidebar, .as-sidebar, .admin-sidebar, #appSidebar, #adminSidebar) {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }
    :root[data-theme="dark"] :is(.client-sidebar, #clientSidebar, .as-sidebar, .admin-sidebar, #appSidebar, #adminSidebar) {
        background: #0f172a !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }
}

:root :is(
    .client-sidebar.open, .client-sidebar.mobile-open,
    #clientSidebar.open, #clientSidebar.mobile-open,
    .admin-sidebar.open, .admin-sidebar.mobile-open,
    #appSidebar.open, #appSidebar.mobile-open,
    .as-sidebar.open, .as-sidebar.mobile-open
) {
    z-index: 10001 !important;
    position: fixed !important;
    filter: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
}

:root body.is-client:has(.client-sidebar.open) .bottom-nav,
:root body.sidebar-locked .bottom-nav {
    z-index: 90 !important;
}

/* ==========================================================================
   Support Tickets Mobile Card Polish (Fix for cramped subject & last reply)
   ========================================================================== */
@media (max-width: 768px) {
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row {
        display: block !important;
        width: 100% !important;
        background: var(--cl-card, #ffffff) !important;
        border: 1px solid var(--cl-line-soft, #e2e8f0) !important;
        border-radius: 16px !important;
        padding: 14px 16px !important;
        margin-bottom: 14px !important;
        box-shadow: 0 2px 8px -2px rgba(15, 23, 42, 0.05) !important;
    }
    :root[data-theme="dark"] body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row {
        background: #111a2e !important;
        border-color: rgba(51, 65, 85, 0.7) !important;
        box-shadow: 0 4px 12px -2px rgba(0, 0, 0, 0.3) !important;
    }
    /* Ticket ID top line */
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td:first-child {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 0 8px 0 !important;
        border-bottom: 1px solid var(--cl-line-soft, #f1f5f9) !important;
        margin-bottom: 8px !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td:first-child .ac-tk-id {
        font-family: var(--font-mono, monospace) !important;
        font-weight: 700 !important;
        font-size: 14px !important;
        color: var(--cl-accent, #2563eb) !important;
    }
    /* Subject cell - full width vertical stack so subject & last reply never squeeze each other */
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-tk-subject {
        display: flex !important;
        flex-direction: column !important;
        align-items: flex-start !important;
        text-align: left !important;
        gap: 6px !important;
        width: 100% !important;
        padding: 6px 0 10px 0 !important;
        border: 0 !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-tk-subject::before {
        content: 'SUBJECT' !important;
        display: inline-block !important;
        max-width: 100% !important;
        font-size: 11px !important;
        font-weight: 700 !important;
        letter-spacing: 0.06em !important;
        color: var(--cl-ink-4, #94a3b8) !important;
        margin-bottom: 2px !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-tk-subject .ac-cell-title {
        display: block !important;
        width: 100% !important;
        font-size: 14px !important;
        font-weight: 600 !important;
        line-height: 1.45 !important;
        color: var(--cl-ink, #0f172a) !important;
        text-align: left !important;
        word-break: break-word !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-tk-subject .ac-cell-sub.ac-tk-meta {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        gap: 8px !important;
        width: 100% !important;
        margin-top: 4px !important;
        font-size: 12px !important;
        color: var(--cl-ink-3, #64748b) !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-tk-subject .ac-cell-sub.ac-tk-meta span {
        white-space: nowrap !important;
    }
    /* Key-value rows: Department, Status, Created */
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td:not(:first-child):not(.ac-tk-subject):not(.ac-right) {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 12px !important;
        padding: 6px 0 !important;
        border: 0 !important;
        font-size: 13px !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td:not(:first-child):not(.ac-tk-subject):not(.ac-right)[data-label]::before {
        font-size: 11.5px !important;
        font-weight: 600 !important;
        color: var(--cl-ink-3, #64748b) !important;
    }
    /* Action cell: full width button */
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-right {
        display: block !important;
        width: 100% !important;
        padding: 10px 0 0 0 !important;
        margin-top: 6px !important;
        border-top: 1px dashed var(--cl-line-soft, #e2e8f0) !important;
        text-align: center !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-right::before {
        display: none !important;
    }
    :root body.is-client :is(.ac-tk-table, .client-table).is-stackable tbody tr.ac-tk-row td.ac-right .btn {
        width: 100% !important;
        min-height: 40px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        border-radius: 10px !important;
        font-weight: 600 !important;
        font-size: 13.5px !important;
    }
    /* Ensure content bottom padding on client pages clears the floating bottom nav */
    :root body.is-client .client-content {
        padding-bottom: 115px !important;
    }
}

/* Real Payment Action Buttons (Emerald Green for high visibility & distinction from blue navigation) */
:root body.is-client :is(.pb-btn--primary, .pb-btn--pay, a.btn[href*="/client/invoices/pay"], button[href*="/client/invoices/pay"], a.pb-btn[href*="/client/invoices/pay"]):not(.notif-item) {
    background: linear-gradient(135deg, #10b981 0%, #059669 100%) !important;
    border-color: #059669 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3) !important;
}

:root body.is-client :is(.pb-btn--primary, .pb-btn--pay, a.btn[href*="/client/invoices/pay"], button[href*="/client/invoices/pay"], a.pb-btn[href*="/client/invoices/pay"]):not(.notif-item) svg {
    color: #ffffff !important;
    stroke: #ffffff !important;
}

:root body.is-client :is(.pb-btn--primary, .pb-btn--pay, a.btn[href*="/client/invoices/pay"], button[href*="/client/invoices/pay"], a.pb-btn[href*="/client/invoices/pay"]):not(.notif-item):hover {
    background: linear-gradient(135deg, #059669 0%, #047857 100%) !important;
    border-color: #047857 !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(16, 185, 129, 0.45) !important;
    transform: translateY(-1px);
}

/* ==========================================================================
   Admin Operations & Servers Mobile Polish
   ========================================================================== */
@media (max-width: 768px) {
    :root body .ops-card-head {
        display: flex !important;
        flex-wrap: wrap !important;
        align-items: flex-start !important;
        padding: 14px !important;
        gap: 8px 10px !important;
    }
    :root body .ops-card-icon {
        flex: 0 0 38px !important;
        width: 38px !important;
        height: 38px !important;
        font-size: 18px !important;
    }
    :root body .ops-card-title {
        flex: 1 1 calc(100% - 52px) !important;
        width: calc(100% - 52px) !important;
        min-width: 0 !important;
    }
    :root body .srv-mod-chip {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
        display: inline-flex !important;
        max-width: fit-content !important;
    }
    :root body .ops-card-badges {
        width: 100% !important;
        flex: 0 0 100% !important;
        margin-top: 6px !important;
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        justify-content: flex-start !important;
    }
    :root body .prov-banner {
        flex-direction: column !important;
        align-items: stretch !important;
        padding: 14px !important;
        gap: 12px !important;
    }
    :root body .prov-pipeline {
        width: 100% !important;
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        padding-bottom: 8px !important;
        gap: 8px !important;
        -webkit-overflow-scrolling: touch !important;
    }
    :root body .prov-step,
    :root body .prov-arrow {
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   Clean White (#ffffff) Uniform Canvas for Light Theme
   ========================================================================== */
:root[data-theme="light"], :root:not([data-theme="dark"]) {
    --cl-canvas: #ffffff !important;
    --canvas: #ffffff !important;
    --bg-app: #ffffff !important;
    --bg-base: #ffffff !important;
    --p-bg: #ffffff !important;
}

:root:not([data-theme="dark"]) body:not(.dark-mode),
:root:not([data-theme="dark"]) body.cc:not(.dark-mode),
:root:not([data-theme="dark"]) body.admin-body:not(.dark-mode),
:root:not([data-theme="dark"]) body.is-client:not(.dark-mode),
:root:not([data-theme="dark"]) body.is-guest:not(.dark-mode),
:root:not([data-theme="dark"]) .client-main,
:root:not([data-theme="dark"]) .client-content,
:root:not([data-theme="dark"]) .admin-main,
:root:not([data-theme="dark"]) .page-container {
    background: #ffffff !important;
}

/* ==========================================================================
   Client Notifications Dropdown & Notification Item Elements
   ========================================================================== */
:root body.is-client .notif-menu {
    width: min(390px, calc(100vw - 20px)) !important;
    max-height: min(480px, calc(100vh - 90px)) !important;
    padding: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
}
:root body.is-client .notif-menu-head {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 14px 18px !important;
    background: #ffffff !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
}
:root body.is-client .notif-menu-head strong {
    font-size: 14.5px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
}
:root body.is-client .notif-mark {
    color: #2563eb !important;
    font-size: 12.5px !important;
    font-weight: 700 !important;
    background: none !important;
    border: none !important;
    cursor: pointer !important;
    padding: 0 !important;
}
:root body.is-client .notif-mark:hover {
    text-decoration: underline !important;
}
:root body.is-client a.notif-item,
:root body.is-client .notif-item {
    display: flex !important;
    align-items: flex-start !important;
    gap: 13px !important;
    padding: 13px 18px !important;
    border-bottom: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
    background: #ffffff !important;
    color: #0f172a !important;
    box-shadow: none !important;
    transform: none !important;
    transition: background 0.15s ease !important;
}
:root body.is-client .notif-item:hover {
    background: #f8fafc !important;
    transform: none !important;
    box-shadow: none !important;
}
:root body.is-client .notif-item.is-unread {
    background: #eff6ff !important;
}
:root body.is-client .notif-item.is-unread:hover {
    background: #e0f2fe !important;
}
:root body.is-client .notif-text {
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
    min-width: 0 !important;
    flex: 1 !important;
}
:root body.is-client .notif-text strong {
    font-size: 13px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    line-height: 1.4 !important;
    display: inline-block !important;
    overflow-wrap: anywhere !important;
}
:root body.is-client .notif-item.is-unread .notif-text strong::after {
    content: '' !important;
    display: inline-block !important;
    width: 6px !important;
    height: 6px !important;
    margin-left: 6px !important;
    border-radius: 50% !important;
    background: #2563eb !important;
    vertical-align: middle !important;
}
:root body.is-client .notif-text small {
    font-size: 12px !important;
    color: #475569 !important;
    line-height: 1.45 !important;
    display: block !important;
    margin-top: 2px !important;
}
:root body.is-client .notif-text time {
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    margin-top: 4px !important;
    display: block !important;
}
:root body.is-client .notif-ico {
    width: 34px !important;
    height: 34px !important;
    flex: 0 0 34px !important;
    border-radius: 10px !important;
    display: grid !important;
    place-items: center !important;
    background: #f1f5f9 !important;
    color: #2563eb !important;
    border: 1px solid #e2e8f0 !important;
}
:root body.is-client .notif-ico svg {
    width: 17px !important;
    height: 17px !important;
    stroke: currentColor !important;
    color: inherit !important;
}
:root body.is-client .notif-ico.notif-billing {
    background: #ecfdf5 !important;
    color: #059669 !important;
    border-color: #a7f3d0 !important;
}
:root body.is-client .notif-ico.notif-billing svg {
    color: #059669 !important;
    stroke: #059669 !important;
}
:root body.is-client .notif-ico.notif-service {
    background: #eff6ff !important;
    color: #2563eb !important;
    border-color: #bfdbfe !important;
}
:root body.is-client .notif-ico.notif-service svg {
    color: #2563eb !important;
    stroke: #2563eb !important;
}
:root body.is-client .notif-ico.notif-support {
    background: #f0fdf4 !important;
    color: #16a34a !important;
    border-color: #bbf7d0 !important;
}
:root body.is-client .notif-ico.notif-support svg {
    color: #16a34a !important;
    stroke: #16a34a !important;
}
:root body.is-client .notif-ico.notif-warning {
    background: #fffbeb !important;
    color: #d97706 !important;
    border-color: #fde68a !important;
}
:root body.is-client .notif-ico.notif-warning svg {
    color: #d97706 !important;
    stroke: #d97706 !important;
}
:root body.is-client .notif-ico.notif-network {
    background: #fef2f2 !important;
    color: #dc2626 !important;
    border-color: #fecaca !important;
}
:root body.is-client .notif-ico.notif-network svg {
    color: #dc2626 !important;
    stroke: #dc2626 !important;
}
:root body.is-client .notif-ico.notif-announcement {
    background: #f5f3ff !important;
    color: #7c3aed !important;
    border-color: #ddd6fe !important;
}
:root body.is-client .notif-ico.notif-announcement svg {
    color: #7c3aed !important;
    stroke: #7c3aed !important;
}
:root body.is-client .notif-all {
    display: block !important;
    padding: 12px 16px !important;
    text-align: center !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #2563eb !important;
    background: #ffffff !important;
    border-top: 1px solid #f1f5f9 !important;
    text-decoration: none !important;
}
:root body.is-client .notif-all:hover {
    background: #eff6ff !important;
}

/* ==========================================================================
   Client Header WhatsApp Direct Department Routing Dropdown
   ========================================================================== */
:root body.is-client #whatsappHeaderMenu {
    min-width: 275px !important;
    background: #ffffff !important;
    border: 1.5px solid #e2e8f0 !important;
    border-radius: 14px !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.05) !important;
    padding: 6px !important;
}
:root body.is-client #whatsappHeaderMenu .header-menu-title {
    padding: 9px 12px 7px !important;
    font-size: 10.5px !important;
    font-weight: 800 !important;
    letter-spacing: 0.06em !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    border-bottom: 1.5px solid #f1f5f9 !important;
    margin-bottom: 4px !important;
}
:root body.is-client #whatsappHeaderMenu .header-menu-item {
    display: flex !important;
    align-items: center !important;
    gap: 12px !important;
    padding: 9px 12px !important;
    border-radius: 10px !important;
    text-decoration: none !important;
    background: transparent !important;
    transition: background 0.15s ease !important;
}
:root body.is-client #whatsappHeaderMenu .header-menu-item:hover {
    background: #f8fafc !important;
}
:root body.is-client #whatsappHeaderMenu .header-menu-item strong {
    font-size: 13px !important;
    font-weight: 750 !important;
    color: #0f172a !important;
    display: block !important;
    margin-bottom: 1px !important;
}
:root body.is-client #whatsappHeaderMenu .header-menu-item small {
    font-size: 11.5px !important;
    color: #64748b !important;
    display: block !important;
}

/* Dark mode overrides for client notification and whatsapp dropdowns */
:root[data-theme="dark"] body.is-client .notif-menu,
:root[data-theme="dark"] body.is-client #whatsappHeaderMenu {
    background: #0f172a !important;
    border-color: #334155 !important;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] body.is-client .notif-menu-head,
:root[data-theme="dark"] body.is-client #whatsappHeaderMenu .header-menu-title {
    background: #0f172a !important;
    border-color: #1e293b !important;
}
:root[data-theme="dark"] body.is-client .notif-menu-head strong,
:root[data-theme="dark"] body.is-client #whatsappHeaderMenu .header-menu-item strong,
:root[data-theme="dark"] body.is-client .notif-text strong {
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client a.notif-item {
    background: #0f172a !important;
    border-color: #1e293b !important;
}
:root[data-theme="dark"] body.is-client a.notif-item:hover {
    background: #1e293b !important;
}
:root[data-theme="dark"] body.is-client a.notif-item.is-unread {
    background: rgba(37, 99, 235, 0.15) !important;
}
:root[data-theme="dark"] body.is-client .notif-all {
    background: #0f172a !important;
    border-color: #1e293b !important;
}

/* ==========================================================================
   Ensure client main content is NEVER hidden or covered behind sidebar
   ========================================================================== */
:root body.is-client .client-main {
    margin-left: var(--sidebar-width, 260px) !important;
    min-width: 0 !important;
    transition: margin-left .2s ease;
}
:root.sb-rail body.is-client .client-main {
    margin-left: var(--sidebar-width, var(--p-rail-width, 70px)) !important;
}
@media (max-width: 1024px) {
    :root body.is-client .client-main {
        margin-left: 0 !important;
        width: 100% !important;
    }
}

/* ==========================================================================
   Guest Portal Mode (Sidebar Guest Card & Guest Auth Actions)
   ========================================================================== */
/* Sidebar guest card */
:root body.is-client .sidebar-guest-card {
    background: #ffffff;
    border: 1.5px solid #e2e8f0;
    border-radius: 12px;
    padding: 14px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
:root body.is-client .sidebar-guest-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 800;
    color: #2563eb;
    background: #eff6ff;
    padding: 2px 8px;
    border-radius: 6px;
    border: 1px solid #dbeafe;
    margin-bottom: 8px;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
:root body.is-client .sidebar-guest-text {
    font-size: 12px;
    line-height: 1.45;
    color: #64748b;
    margin: 0 0 12px 0;
}
:root body.is-client .sidebar-guest-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
:root body.is-client .btn-guest-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 10px;
    border-radius: 8px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none !important;
    text-align: center;
    transition: all 0.15s ease;
}
:root body.is-client .btn-guest-action--login {
    background: #f1f5f9;
    color: #0f172a !important;
    border: 1px solid #cbd5e1;
}
:root body.is-client .btn-guest-action--login:hover {
    background: #e2e8f0;
    color: #0f172a !important;
}
:root body.is-client .btn-guest-action--reg {
    background: #2563eb;
    color: #ffffff !important;
    border: 1px solid #1d4ed8;
    box-shadow: 0 2px 6px rgba(37,99,235,0.25);
}
:root body.is-client .btn-guest-action--reg:hover {
    background: #1d4ed8;
    color: #ffffff !important;
}

/* Header Guest Auth Buttons */
:root body.is-client .header-guest-auth {
    display: flex;
    align-items: center;
    gap: 8px;
}
:root body.is-client .header-guest-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 7px 14px;
    border-radius: 8px;
    font-size: 12.5px;
    font-weight: 700;
    text-decoration: none !important;
    transition: all 0.15s ease;
}
:root body.is-client .header-guest-btn--login {
    background: #ffffff;
    border: 1.5px solid #cbd5e1;
    color: #0f172a !important;
}
:root body.is-client .header-guest-btn--login:hover {
    background: #f8fafc;
    border-color: #94a3b8;
    color: #2563eb !important;
}
:root body.is-client .header-guest-btn--reg {
    background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
    border: 1.5px solid #1d4ed8;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
:root body.is-client .header-guest-btn--reg:hover {
    background: #1e40af;
    color: #ffffff !important;
    transform: translateY(-1px);
}

@media (max-width: 540px) {
    :root body.is-client .header-guest-auth {
        gap: 5px !important;
    }
    :root body.is-client .header-guest-btn {
        padding: 5px 9px !important;
        font-size: 11.5px !important;
    }
    :root body.is-client .topbar-title {
        font-size: 14.5px !important;
    }
}

/* Dark mode for guest UI elements */
:root[data-theme="dark"] body.is-client .sidebar-guest-card {
    background: #1e293b;
    border-color: #334155;
}
:root[data-theme="dark"] body.is-client .sidebar-guest-badge {
    background: rgba(37, 99, 235, 0.2);
    border-color: rgba(37, 99, 235, 0.4);
    color: #93c5fd;
}
:root[data-theme="dark"] body.is-client .sidebar-guest-text {
    color: #94a3b8;
}
:root[data-theme="dark"] body.is-client .btn-guest-action--login {
    background: #334155;
    border-color: #475569;
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .header-guest-btn--login {
    background: #1e293b;
    border-color: #334155;
    color: #f8fafc !important;
}

/* High-priority protection for notification text & icon visibility */
:root body.is-client a.notif-item,
:root body.is-client .notif-item {
    color: #0f172a !important;
}
:root body.is-client a.notif-item .notif-text strong,
:root body.is-client .notif-item .notif-text strong {
    color: #0f172a !important;
    font-weight: 700 !important;
}
:root body.is-client a.notif-item .notif-text small,
:root body.is-client .notif-item .notif-text small {
    color: #475569 !important;
}
:root body.is-client a.notif-item .notif-text time,
:root body.is-client .notif-item .notif-text time {
    color: #94a3b8 !important;
}
:root body.is-client a.notif-item .notif-ico,
:root body.is-client .notif-item .notif-ico {
    background: #f1f5f9 !important;
    border: 1px solid #e2e8f0 !important;
}
:root body.is-client a.notif-item .notif-ico svg,
:root body.is-client .notif-item .notif-ico svg {
    opacity: 1 !important;
    visibility: visible !important;
}
:root[data-theme="dark"] body.is-client a.notif-item,
:root[data-theme="dark"] body.is-client .notif-item {
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client a.notif-item .notif-text strong,
:root[data-theme="dark"] body.is-client .notif-item .notif-text strong {
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client a.notif-item .notif-text small,
:root[data-theme="dark"] body.is-client .notif-item .notif-text small {
    color: #94a3b8 !important;
}

/* ==========================================================================
   Universal High-Contrast Dark Mode Rules for All Buttons & UI Controls
   Fixes washed out / faint / invisible buttons across client portal in dark theme
   ========================================================================== */

/* 1. General & Secondary Buttons */
:root[data-theme="dark"] body.is-client :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary, button.btn-secondary, a.btn-secondary, .btn-ghost),
:root[data-theme="dark"] :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary, button.btn-secondary, a.btn-secondary) {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3) !important;
}
:root[data-theme="dark"] body.is-client :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary, button.btn-secondary, a.btn-secondary, .btn-ghost):hover,
:root[data-theme="dark"] :is(.btn-secondary, .btn-outline, .btn-light, .btn-white, .btn-default, .guh-btn-secondary, button.btn-secondary, a.btn-secondary):hover {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* 2. Header Guest Buttons & Topbar Controls in Dark Mode */
:root[data-theme="dark"] body.is-client .header-guest-btn--login {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .header-guest-btn--login:hover {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .header-guest-btn--reg {
    background: #2563eb !important;
    border: 1.5px solid #3b82f6 !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .header-guest-btn--reg:hover {
    background: #1d4ed8 !important;
}
/* Universal Top Header WhatsApp Icon Button (All Screen Sizes - Desktop, Tablet & Mobile) */
:root .header-btn-whatsapp .label,
:root body.is-client .header-btn-whatsapp .label,
.header-btn-whatsapp .label,
.header-btn-whatsapp span,
:root .topbar-pill-whatsapp .label,
:root .topbar-pill-whatsapp span,
.topbar-pill-whatsapp .label,
.topbar-pill-whatsapp span {
    display: none !important;
}
:root .header-btn-whatsapp,
:root body.is-client .header-btn-whatsapp,
.header-btn-whatsapp,
:root .topbar-pill-whatsapp,
.topbar-pill-whatsapp {
    width: 38px !important;
    height: 38px !important;
    min-width: 38px !important;
    min-height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
    padding: 0 !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: 10px !important;
    overflow: hidden !important;
    white-space: nowrap !important;
    font-size: 0 !important;
    line-height: 0 !important;
    color: transparent !important;
    flex-shrink: 0 !important;
    box-sizing: border-box !important;
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    cursor: pointer !important;
}
:root .header-btn-whatsapp:hover,
:root body.is-client .header-btn-whatsapp:hover,
.header-btn-whatsapp:hover,
:root .topbar-pill-whatsapp:hover,
.topbar-pill-whatsapp:hover {
    background: rgba(37, 211, 102, 0.12) !important;
    background-color: rgba(37, 211, 102, 0.12) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
:root .header-btn-whatsapp svg,
:root body.is-client .header-btn-whatsapp svg,
.header-btn-whatsapp svg,
:root .topbar-pill-whatsapp svg,
.topbar-pill-whatsapp svg {
    width: 22px !important;
    height: 22px !important;
    min-width: 22px !important;
    min-height: 22px !important;
    max-width: 22px !important;
    max-height: 22px !important;
    display: block !important;
    margin: 0 !important;
    filter: none !important;
}
:root :is(.header-btn-whatsapp, .topbar-pill-whatsapp) svg path.wa-bubble,
:root :is(.header-btn-whatsapp, .topbar-pill-whatsapp) svg path:first-child {
    fill: #25D366 !important;
}
:root :is(.header-btn-whatsapp, .topbar-pill-whatsapp) svg path.wa-phone,
:root :is(.header-btn-whatsapp, .topbar-pill-whatsapp) svg path:last-child {
    fill: #FFFFFF !important;
}

:root[data-theme="dark"] body.is-client :is(.mobile-menu-btn, #mobileMenuBtn, .theme-toggle, .icon-btn, .rail-toggle) {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    color: #f8fafc !important;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35) !important;
}
:root[data-theme="dark"] body.is-client :is(.mobile-menu-btn, #mobileMenuBtn, .theme-toggle, .icon-btn, .rail-toggle):hover {
    background: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] :is(.header-btn-whatsapp, .topbar-pill-whatsapp),
:root[data-theme="dark"] body.is-client :is(.header-btn-whatsapp, .topbar-pill-whatsapp) {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] :is(.header-btn-whatsapp, .topbar-pill-whatsapp):hover,
:root[data-theme="dark"] body.is-client :is(.header-btn-whatsapp, .topbar-pill-whatsapp):hover {
    background: rgba(37, 211, 102, 0.16) !important;
    background-color: rgba(37, 211, 102, 0.16) !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
}
    background: #334155 !important;
    border-color: #475569 !important;
    color: #ffffff !important;
}

/* 3. Store Category Pills (Store Index Page) */
:root[data-theme="dark"] body.is-client .store-cat-pill,
:root[data-theme="dark"] .store-cat-pill {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    color: #e2e8f0 !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25) !important;
}
:root[data-theme="dark"] body.is-client .store-cat-pill:hover,
:root[data-theme="dark"] .store-cat-pill:hover {
    background: #334155 !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}
:root[data-theme="dark"] body.is-client .store-cat-pill.is-active,
:root[data-theme="dark"] .store-cat-pill.is-active {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.4) !important;
}
:root[data-theme="dark"] body.is-client .store-cat-count,
:root[data-theme="dark"] .store-cat-count {
    background: #0f172a !important;
    color: #94a3b8 !important;
}
:root[data-theme="dark"] body.is-client .store-cat-pill.is-active .store-cat-count,
:root[data-theme="dark"] .store-cat-pill.is-active .store-cat-count {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #ffffff !important;
}

/* 4. Billing Cycle Switcher & Currency Selector in Dark Mode */
:root[data-theme="dark"] body.is-client .store-billing-switch,
:root[data-theme="dark"] .store-billing-switch {
    background: #111a2e !important;
    border: 1.5px solid #1e293b !important;
}
:root[data-theme="dark"] body.is-client .store-billing-btn,
:root[data-theme="dark"] .store-billing-btn {
    color: #cbd5e1 !important;
}
:root[data-theme="dark"] body.is-client .store-billing-btn:hover,
:root[data-theme="dark"] .store-billing-btn:hover {
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .store-billing-btn.is-active,
:root[data-theme="dark"] .store-billing-btn.is-active {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}
:root[data-theme="dark"] body.is-client .store-save-pill,
:root[data-theme="dark"] .store-save-pill {
    background: #059669 !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .store-cur-wrap,
:root[data-theme="dark"] .store-cur-wrap {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
}
:root[data-theme="dark"] body.is-client .store-cur-wrap label,
:root[data-theme="dark"] .store-cur-wrap label {
    color: #94a3b8 !important;
}
:root[data-theme="dark"] body.is-client .store-cur-wrap select,
:root[data-theme="dark"] .store-cur-wrap select {
    color: #f8fafc !important;
    background: transparent !important;
}
:root[data-theme="dark"] body.is-client .store-cur-wrap select option,
:root[data-theme="dark"] .store-cur-wrap select option {
    background: #0f172a !important;
    color: #f8fafc !important;
}

/* 5. Store Product Cards & Specs in Dark Mode */
:root[data-theme="dark"] body.is-client .store-card,
:root[data-theme="dark"] .store-card {
    background: #111a2e !important;
    border: 1.5px solid #1e293b !important;
}
:root[data-theme="dark"] body.is-client .store-card:hover,
:root[data-theme="dark"] .store-card:hover {
    border-color: #3b82f6 !important;
}
:root[data-theme="dark"] body.is-client .store-card-name,
:root[data-theme="dark"] .store-card-name {
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .store-card-desc,
:root[data-theme="dark"] .store-card-desc {
    color: #94a3b8 !important;
}
:root[data-theme="dark"] body.is-client .store-card-price-box,
:root[data-theme="dark"] .store-card-price-box {
    background: #0b1322 !important;
    border-color: #1e293b !important;
}
:root[data-theme="dark"] body.is-client .store-card-price strong,
:root[data-theme="dark"] .store-card-price strong {
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .store-card-price span,
:root[data-theme="dark"] .store-card-price span {
    color: #94a3b8 !important;
}
:root[data-theme="dark"] body.is-client .store-order-btn,
:root[data-theme="dark"] .store-order-btn {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}
:root[data-theme="dark"] body.is-client .store-order-btn:hover,
:root[data-theme="dark"] .store-order-btn:hover {
    background: #1d4ed8 !important;
}
:root[data-theme="dark"] body.is-client .store-spec-item,
:root[data-theme="dark"] .store-spec-item {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #e2e8f0 !important;
}
:root[data-theme="dark"] body.is-client .store-spec-item strong,
:root[data-theme="dark"] .store-spec-item strong {
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .store-features li,
:root[data-theme="dark"] .store-features li {
    color: #cbd5e1 !important;
}

/* 6. Store Configure Page Buttons & Option Cards in Dark Mode */
:root[data-theme="dark"] body.is-client .back-link,
:root[data-theme="dark"] .back-link {
    color: #93c5fd !important;
}
:root[data-theme="dark"] body.is-client .domain-tab-btn,
:root[data-theme="dark"] .domain-tab-btn {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    color: #e2e8f0 !important;
}
:root[data-theme="dark"] body.is-client .domain-tab-btn:hover,
:root[data-theme="dark"] .domain-tab-btn:hover {
    background: #334155 !important;
    border-color: #3b82f6 !important;
    color: #60a5fa !important;
}
:root[data-theme="dark"] body.is-client .domain-tab-btn.active,
:root[data-theme="dark"] .domain-tab-btn.active {
    background: rgba(37, 99, 235, 0.25) !important;
    border-color: #3b82f6 !important;
    color: #93c5fd !important;
    box-shadow: 0 0 0 1px #3b82f6 !important;
}
:root[data-theme="dark"] body.is-client .domain-prefix-input,
:root[data-theme="dark"] .domain-prefix-input {
    background: #0b1322 !important;
    border: 1.5px solid #334155 !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .btn-domain-search,
:root[data-theme="dark"] .btn-domain-search {
    background: #2563eb !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .cycle-row-item,
:root[data-theme="dark"] .cycle-row-item {
    background: #111a2e !important;
    border: 1.5px solid #1e293b !important;
}
:root[data-theme="dark"] body.is-client .cycle-row-item:hover,
:root[data-theme="dark"] .cycle-row-item:hover {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
}
:root[data-theme="dark"] body.is-client .cycle-row-item.selected,
:root[data-theme="dark"] .cycle-row-item.selected {
    background: rgba(37, 99, 235, 0.2) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
}
:root[data-theme="dark"] body.is-client .cycle-period-name,
:root[data-theme="dark"] .cycle-period-name,
:root[data-theme="dark"] body.is-client .cycle-per-mo,
:root[data-theme="dark"] .cycle-per-mo {
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .cycle-pay-now,
:root[data-theme="dark"] .cycle-pay-now {
    color: #60a5fa !important;
}
:root[data-theme="dark"] body.is-client .location-card-item,
:root[data-theme="dark"] .location-card-item {
    background: #111a2e !important;
    border: 1.5px solid #1e293b !important;
}
:root[data-theme="dark"] body.is-client .location-card-item:hover,
:root[data-theme="dark"] .location-card-item:hover {
    background: #1e293b !important;
    border-color: #3b82f6 !important;
}
:root[data-theme="dark"] body.is-client .location-card-item.selected,
:root[data-theme="dark"] .location-card-item.selected {
    background: rgba(37, 99, 235, 0.2) !important;
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.3) !important;
}
:root[data-theme="dark"] body.is-client .loc-name,
:root[data-theme="dark"] .loc-name {
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .addon-row-item,
:root[data-theme="dark"] .addon-row-item {
    background: #111a2e !important;
    border: 1.5px solid #1e293b !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .coupon-row input,
:root[data-theme="dark"] .coupon-row input {
    background: #0b1322 !important;
    border: 1.5px solid #334155 !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client .coupon-row button,
:root[data-theme="dark"] .coupon-row button {
    background: #2563eb !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .btn-checkout-primary,
:root[data-theme="dark"] .btn-checkout-primary {
    background: #2563eb !important;
    color: #ffffff !important;
    box-shadow: 0 4px 14px rgba(37, 99, 235, 0.4) !important;
}
:root[data-theme="dark"] body.is-client .btn-help-ticket,
:root[data-theme="dark"] .btn-help-ticket {
    background: rgba(37, 99, 235, 0.2) !important;
    border-color: #1e40af !important;
    color: #93c5fd !important;
}

/* 7. General Client Portal Elements in Dark Mode (Pagination, Segments, Filters) */
:root[data-theme="dark"] body.is-client :is(.pagination .page-link, .page-btn, .pagination button) {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] body.is-client :is(.pagination .page-link.active, .page-btn.active, .pagination .active .page-link) {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client :is(.seg-tabs a, .seg-tabs button, .tabs a, .tabs button, .filter-chip) {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}
:root[data-theme="dark"] body.is-client :is(.seg-tabs a.active, .seg-tabs button.active, .tabs a.active, .tabs button.active, .filter-chip.active) {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] body.is-client .notif-mark {
    background: #1e293b !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}

/* ==========================================================================
   Complete Universal Dark Mode Palette & Background Overrides for ALL Pages
   Ensures 100% of pages, wrappers, cards, tables, panels, and forms turn dark
   ========================================================================== */

/* 1. Global Page Backgrounds, HTML, Body & Main Containers */
:root[data-theme="dark"] {
    --cl-canvas: #0b1220 !important;
    --canvas: #0b1220 !important;
    --bg-app: #0b1220 !important;
    --bg-base: #0b1220 !important;
    --p-bg: #0b1220 !important;
    --cl-card: #111a2e !important;
    --p-card: #111a2e !important;
    --surface: #111a2e !important;
    --surface-2: #0e1627 !important;
    --surface-3: #172235 !important;
}
:root[data-theme="dark"],
:root[data-theme="dark"] html,
:root[data-theme="dark"] body,
:root[data-theme="dark"] body.is-client,
:root[data-theme="dark"] body.admin-body,
:root[data-theme="dark"] body.cc,
:root[data-theme="dark"] body.dark-theme,
:root[data-theme="dark"] .client-wrapper,
:root[data-theme="dark"] .client-main,
:root[data-theme="dark"] .client-content,
:root[data-theme="dark"] .client-layout,
:root[data-theme="dark"] .admin-layout,
:root[data-theme="dark"] .admin-main,
:root[data-theme="dark"] .main-content,
:root[data-theme="dark"] #main-content,
:root[data-theme="dark"] .app-main,
:root[data-theme="dark"] .portal-main,
:root[data-theme="dark"] .content-wrapper,
:root[data-theme="dark"] .container,
:root[data-theme="dark"] .container-fluid,
:root[data-theme="dark"] .page-container,
:root[data-theme="dark"] .admin-body .page-container,
:root[data-theme="dark"] .client-dashboard-wrap,
:root[data-theme="dark"] .store-wrap,
:root[data-theme="dark"] .hl-cart-wrap,
:root[data-theme="dark"] .si-page,
:root[data-theme="dark"] .sl-page {
    background: #0b1220 !important;
    background-color: #0b1220 !important;
    color: #e2e8f0 !important;
}

/* 2. Top Header & Navigation Bars */
:root[data-theme="dark"] :is(.client-header, .topbar, .app-header, .portal-header, .public-header, .admin-topbar, .as-topbar),
:root[data-theme="dark"] body.is-client .client-header,
:root[data-theme="dark"] body.admin-body .admin-topbar {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(.client-header .topbar-title, .client-header h1, .header-greeting h1, .topbar-title, .topbar-title h1) {
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(.topbar-search input, .global-search-container) {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    color: #f8fafc !important;
}

/* 3. Sidebar in Dark Mode */
:root[data-theme="dark"] :is(.client-sidebar, .sidebar, .sidebar-brand, .client-sidebar .sidebar-brand, .as-sidebar, .admin-sidebar, #appSidebar, #adminSidebar) {
    background: #0f172a !important;
    background-color: #0f172a !important;
    border-color: #1e293b !important;
}
:root[data-theme="dark"] :is(.client-sidebar, .as-sidebar) :is(.nav-item > a, .nav-group-toggle, .as-link) {
    color: #cbd5e1 !important;
}
:root[data-theme="dark"] :is(.client-sidebar, .as-sidebar) :is(.nav-item > a, .nav-group-toggle, .as-link):hover {
    background: #1e293b !important;
    color: #60a5fa !important;
}
:root[data-theme="dark"] :is(.client-sidebar, .as-sidebar) :is(.nav-item.active > a, .nav-item > a.active, .as-link.is-active) {
    background: rgba(37, 99, 235, 0.22) !important;
    color: #93c5fd !important;
}
:root[data-theme="dark"] :is(.client-sidebar, .as-sidebar) :is(.nav-group-title, .as-section-title, .nav-heading) {
    color: #64748b !important;
}
:root[data-theme="dark"] .as-sidebar .as-brand {
    background: #0f172a !important;
    border-bottom: 1px solid #1e293b !important;
}
:root[data-theme="dark"] .as-sidebar .as-brand-text {
    color: #f8fafc !important;
}

/* 4. Bottom Navigation (Mobile Phones) */
:root[data-theme="dark"] :is(.bottom-nav, nav.bottom-nav) {
    background: rgba(15, 23, 42, 0.96) !important;
    border-top: 1px solid #1e293b !important;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.45) !important;
}

/* 5. ALL Cards, Panels, Boxes, Sections across every client & admin page */
:root[data-theme="dark"] :is(
    .client-card, .data-card, .chart-card, .form-card, .guh-card, .dash-card,
    .ps-card, .pb-card, .ac-card, .client-empty-card, .filter-bar-card, .news-card,
    .plan-card, .srv-card, .whmcs-section-panel, .checkout-summary, .checkout-main,
    .client-flash-bar, .sl-card, .si-card, .card, .panel, .box, .well,
    .store-card, .cart-card, .summary-card, .client-kpi-card, .kpi-card,
    .dash-stat, .ticket-card, .invoice-card, .service-card, .profile-card,
    .domain-card, .kyc-card, .ticket-message, .order-card, .srv-detail-card,
    .tool-card, .cpt-card, .sec-card, .aff-stat-card, .faq-card, .pricing-card,
    .store-trust-card, .store-faq-wrap, .store-faq-item, .store-card-price-box,
    .ops-card, .apc-card, .ops-section, .apc-toolbar, .ops-toolbar, .dash-kpi,
    .whmcs-action-card, .ops-stat-tile, .srv-stat, .ac-group, .sc-strip,
    .settings-group, .ops-group, .filter-bar, .apc-hero, .cx-kpi-card, .whmcs-kpi-tile
) {
    background: #111a2e !important;
    background-color: #111a2e !important;
    border: 1.5px solid #1e293b !important;
    color: #e2e8f0 !important;
    box-shadow: none !important;
}
:root[data-theme="dark"] body.admin-body :is(.data-card, .form-card, .ops-card, .apc-card) :is(.data-card, .form-card, .kpi-card, .srv-stat, .ops-stat-tile),
:root[data-theme="dark"] body.admin-body .ops-card-stats > div,
:root[data-theme="dark"] body.admin-body .dash-status a {
    background: #0e1627 !important;
    border-color: #1e293b !important;
    color: #cbd5e1 !important;
}

/* 6. Card Headers, Footers, Sub-elements & Titles */
:root[data-theme="dark"] :is(
    .card-head, .client-card-header, .chart-header, .guh-card-header,
    .pb-card-head, .ac-card-head, .ps-card-head, .card-header, .panel-heading,
    .ops-card-head, .apc-card-head, .ac-group-head, .ops-head
) {
    background: transparent !important;
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(
    .dash-card-title, .ac-card-title, .client-card-title, .ps-card-title,
    .card-title, .card-head h2, .card-head h3, .chart-header h3,
    .sl-head h1, .si-title, .page-title, .client-page-title,
    .ops-card-head h2, .ops-card-head h3, .apc-card-head h2, .apc-card-head h3
) {
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(
    .sl-foot, .si-pager, .card-footer, .client-card-footer, .panel-footer,
    .card-foot, .apc-card-foot, .ops-foot, .table-footer, .table-foot,
    .pager, .si-pager-nav, .data-table-footer, .pagination-bar
) {
    background: #0e1627 !important;
    background-color: #0e1627 !important;
    border-top: 1px solid #1e293b !important;
    color: #94a3b8 !important;
}
:root[data-theme="dark"] :is(.sl-foot, .si-pager) span,
:root[data-theme="dark"] :is(.sl-foot, .si-pager) #slInfo {
    color: #94a3b8 !important;
}
:root[data-theme="dark"] :is(.si-page-btn, .page-btn, .pager button, .pager span) {
    background: #111a2e !important;
    border: 1px solid #334155 !important;
    color: #cbd5e1 !important;
}
:root[data-theme="dark"] :is(.si-page-btn:hover, .page-btn:hover) {
    background: #1e293b !important;
    color: #60a5fa !important;
    border-color: #3b82f6 !important;
}
:root[data-theme="dark"] :is(.si-page-btn.is-current, .si-page-btn.active, .page-btn.active) {
    background: #2563eb !important;
    border-color: #2563eb !important;
    color: #ffffff !important;
}
:root[data-theme="dark"] :is(.si-page-btn.is-off, .si-page-btn:disabled, .page-btn:disabled) {
    background: #0b1322 !important;
    border-color: #1e293b !important;
    color: #475569 !important;
    cursor: not-allowed !important;
}

/* 7. ALL Tables, Table Headers, Rows & Cells */
:root[data-theme="dark"] :is(
    .client-table, .data-table, .mini-table, table.table, .guh-table,
    .pb-table, .ac-table, .ps-table, .dm-table, .si-table, .sl-table,
    .ops-table, .apc-table, table
) {
    color: #e2e8f0 !important;
    border-color: #1e293b !important;
}
:root[data-theme="dark"] :is(
    .client-table, .data-table, .mini-table, table.table, .guh-table,
    .pb-table, .ac-table, .ps-table, .dm-table, .si-table, .sl-table,
    .ops-table, .apc-table, table
) th {
    background: #0f172a !important;
    background-color: #0f172a !important;
    color: #94a3b8 !important;
    border-bottom: 1.5px solid #1e293b !important;
}
:root[data-theme="dark"] :is(
    .client-table, .data-table, .mini-table, table.table, .guh-table,
    .pb-table, .ac-table, .ps-table, .dm-table, .si-table, .sl-table,
    .ops-table, .apc-table, table
) td {
    background: transparent !important;
    color: #cbd5e1 !important;
    border-bottom: 1px solid #1e293b !important;
}
:root[data-theme="dark"] :is(
    .client-table, .data-table, .mini-table, table.table, .guh-table,
    .pb-table, .ac-table, .ps-table, .dm-table, .si-table, .sl-table,
    .ops-table, .apc-table, table
) tbody tr:hover td {
    background: rgba(96, 165, 250, 0.08) !important;
}

/* 8. ALL Form Inputs, Selects, Textareas & Addons */
:root[data-theme="dark"] :is(
    input.form-control, select.form-control, textarea.form-control, .form-control,
    .filter-select, .guh-autorefresh-select, select, textarea,
    input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="url"], input[type="date"]
) {
    background: #0b1322 !important;
    background-color: #0b1322 !important;
    border: 1.5px solid #334155 !important;
    color: #f8fafc !important;
    color-scheme: dark !important;
}
:root[data-theme="dark"] :is(
    input.form-control, select.form-control, textarea.form-control, .form-control,
    .filter-select, .guh-autorefresh-select, select, textarea,
    input[type="text"], input[type="search"], input[type="email"], input[type="password"],
    input[type="number"], input[type="tel"], input[type="url"], input[type="date"]
):focus {
    border-color: #3b82f6 !important;
    box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25) !important;
    outline: none !important;
}
:root[data-theme="dark"] option {
    background: #0f172a !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(.input-group-text, .input-addon, .input-group-prepend, .input-group-append) {
    background: #1e293b !important;
    border: 1.5px solid #334155 !important;
    color: #94a3b8 !important;
}

/* 9. Modals, Drawers, Dropdowns & Popups */
:root[data-theme="dark"] :is(
    .modal-dialog, .modal-content, .modal-box, .modal-card, .slide-drawer,
    .header-menu, .dropdown-menu, .select2-dropdown, .notif-menu, .sidebar-flyout,
    #notifHeaderMenu, #whatsappHeaderMenu, #profileHeaderMenu, .quick-search-dropdown,
    .cmdk-panel, .topbar-menu, .as-tip, .ops-savebar, .apc-savebar
) {
    background: #111a2e !important;
    background-color: #111a2e !important;
    border: 1.5px solid #1e293b !important;
    color: #f8fafc !important;
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.5) !important;
}
:root[data-theme="dark"] :is(.modal-header, .drawer-header) {
    border-bottom: 1px solid #1e293b !important;
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(.modal-footer, .drawer-footer) {
    border-top: 1px solid #1e293b !important;
}
:root[data-theme="dark"] :is(.header-menu-item, .dropdown-item, .topbar-menu-item) {
    color: #e2e8f0 !important;
}
:root[data-theme="dark"] :is(.header-menu-item, .dropdown-item, .topbar-menu-item):hover {
    background: #1e293b !important;
    color: #60a5fa !important;
}
:root[data-theme="dark"] :is(.header-menu-title, .dropdown-header) {
    color: #94a3b8 !important;
    border-bottom: 1px solid #1e293b !important;
}
:root[data-theme="dark"] .ops-log {
    background: #070b14 !important;
    border: 1px solid #1e293b !important;
    color: #cbd5e1 !important;
}

/* 10. Dashboard Specific KPIs, Stat Tiles & Badges */
:root[data-theme="dark"] :is(.client-kpi-card, .kpi-card, .dash-stat) {
    background: #111a2e !important;
    border: 1.5px solid #1e293b !important;
    color: #e2e8f0 !important;
}
:root[data-theme="dark"] :is(.client-kpi-card, .kpi-card, .dash-stat):hover {
    border-color: #3b82f6 !important;
    box-shadow: 0 8px 24px -4px rgba(0,0,0,0.4) !important;
}
:root[data-theme="dark"] .kpi-val {
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(.kpi-label, .kpi-sub, .dash-stat-label) {
    color: #94a3b8 !important;
}
:root[data-theme="dark"] .kpi-trend {
    border-top-color: #1e293b !important;
}
:root[data-theme="dark"] .kpi-icon.blue { background: rgba(37, 99, 235, 0.2) !important; color: #60a5fa !important; }
:root[data-theme="dark"] .kpi-icon.cyan { background: rgba(6, 182, 212, 0.2) !important; color: #38bdf8 !important; }
:root[data-theme="dark"] .kpi-icon.amber { background: rgba(245, 158, 11, 0.2) !important; color: #fbbf24 !important; }
:root[data-theme="dark"] .kpi-icon.green { background: rgba(16, 185, 129, 0.2) !important; color: #34d399 !important; }
:root[data-theme="dark"] .kpi-icon.violet { background: rgba(124, 58, 237, 0.2) !important; color: #a78bfa !important; }
:root[data-theme="dark"] :is(.hero-id-pill, .service-id-badge, .ip-address-pill) {
    background: #1e293b !important;
    border-color: #334155 !important;
    color: #cbd5e1 !important;
}
:root[data-theme="dark"] .hero-status-pill {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #34d399 !important;
}
:root[data-theme="dark"] .service-type-badge {
    background: rgba(37, 99, 235, 0.2) !important;
    color: #93c5fd !important;
}

/* 11. Alerts, Notices & Banners in Dark Mode */
:root[data-theme="dark"] :is(.alert, .flash, .save-alert-banner, .guest-checkout-notice, .impersonation-bar, .verify-banner-bar) {
    background: rgba(37, 99, 235, 0.16) !important;
    border: 1px solid rgba(59, 130, 246, 0.35) !important;
    color: #93c5fd !important;
}
:root[data-theme="dark"] :is(.alert-success, .flash-success) {
    background: rgba(16, 185, 129, 0.16) !important;
    border-color: rgba(16, 185, 129, 0.35) !important;
    color: #6ee7b7 !important;
}
:root[data-theme="dark"] :is(.alert-warning, .flash-warning) {
    background: rgba(245, 158, 11, 0.16) !important;
    border-color: rgba(245, 158, 11, 0.35) !important;
    color: #fcd34d !important;
}
:root[data-theme="dark"] :is(.alert-danger, .flash-danger, .flash-error) {
    background: rgba(239, 68, 68, 0.16) !important;
    border-color: rgba(239, 68, 68, 0.35) !important;
    color: #fca5a5 !important;
}

/* 12. Universal Fallback: Override any hardcoded light inline styles on any element */
:root[data-theme="dark"] :is(
    [style*="background: #fff"], [style*="background:#fff"], [style*="background: white"],
    [style*="background-color: #fff"], [style*="background: #ffffff"], [style*="background:#ffffff"],
    [style*="background-color: #ffffff"], [style*="background: #f8fafc"], [style*="background:#f8fafc"],
    [style*="background: #f1f5f9"], [style*="background:#f1f5f9"], [style*="background: #f8fbff"],
    [style*="background: #eff6ff"], [style*="background:#eff6ff"]
) {
    background: #111a2e !important;
    background-color: #111a2e !important;
}
:root[data-theme="dark"] :is(
    [style*="color: #0f172a"], [style*="color:#0f172a"], [style*="color: #1e293b"],
    [style*="color:#1e293b"], [style*="color: #334155"], [style*="color:#334155"],
    [style*="color: #000"], [style*="color:#000"], [style*="color: black"]
) {
    color: #f8fafc !important;
}
:root[data-theme="dark"] :is(
    [style*="border: 1px solid #e"], [style*="border:1px solid #e"], [style*="border: 1.5px solid #e"],
    [style*="border: 2px solid #e"], [style*="border-color: #e"], [style*="border: 1px solid #cbd5e1"],
    [style*="border: 1px solid #bfdbfe"]
) {
    border-color: #1e293b !important;
}

/* Fix loyalty card progress on mobile & desktop: prevent label clipping, hide any redundant/cramped bubbles */
.pf-prog-label {
    white-space: nowrap !important;
    overflow: visible !important;
    font-size: 13px !important;
    font-weight: 700 !important;
}
.pf-prog {
    position: relative !important;
    height: 8px !important;
    border-radius: 99px !important;
    overflow: hidden !important;
}
.pf-prog em,
.pf-prog ::after,
.pf-prog ::before,
.pf-prog > span::after,
.pf-prog > span::before {
    display: none !important;
    content: none !important;
}

/* ==========================================================================
   Mobile Notification & Banner Slider Polish (Prevents Stuck Sliders on Phones)
   ========================================================================== */

/* 1. Promo / Notification Banner Track - Smooth touch horizontal swipe */
:root .promo-track {
    display: flex !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    scroll-snap-type: x mandatory !important;
    scroll-behavior: smooth !important;
    -webkit-overflow-scrolling: touch !important;
    touch-action: pan-y pinch-zoom !important;
    scrollbar-width: none !important;
    box-sizing: border-box !important;
}
:root .promo-track::-webkit-scrollbar {
    display: none !important;
}
:root .promo-slide {
    flex: 0 0 100% !important;
    width: 100% !important;
    min-width: 100% !important;
    max-width: 100% !important;
    scroll-snap-align: start !important;
    scroll-snap-stop: always !important;
    box-sizing: border-box !important;
}

/* 2. Live Flash Notification Ticker - Smooth sliding & full readability */
:root .client-flash-container {
    width: 100% !important;
    box-sizing: border-box !important;
    position: relative !important;
    overflow: hidden !important;
}
:root .flash-ticker-track {
    display: flex !important;
    transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1) !important;
    width: 100% !important;
}
:root .client-flash-bar {
    box-sizing: border-box !important;
    width: 100% !important;
    flex: 0 0 100% !important;
    min-width: 100% !important;
}
@media (max-width: 640px) {
    :root .client-flash-bar {
        padding: 10px 42px 10px 14px !important;
        font-size: 13px !important;
    }
    :root .client-flash-bar > div:first-child > span.flash-copy-text,
    :root .client-flash-bar > div:first-child > span:last-child {
        display: inline !important;
    }
}
:root[data-theme="dark"] .flash-dot:not(.is-active) {
    background: #334155 !important;
}