/* ==========================================================================
   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 */
:root body:not(#rp) :is(.sl-search, .dmx-hub-field, .dmx-search, .topbar-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 {
    list-style: none !important;
    margin: 4px 0 6px 18px !important;
    padding: 4px 0 4px 10px !important;
    border-left: 2px solid var(--cl-line-soft, #e2e8f0) !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 2px !important;
}
:root body.cc .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-client .bottom-nav-item.active {
        color: var(--cl-accent, #4361ee) !important;
        font-weight: 600 !important;
    }
    :root body.is-client .bottom-nav-item.active svg {
        transform: translateY(-1px) scale(1.08) !important;
    }
    :root body.is-client .bottom-nav-cta {
        position: relative !important;
    }
    :root body.is-client .bottom-nav-fab {
        width: 44px !important;
        height: 44px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, var(--cl-accent, #4361ee), #3b82f6) !important;
        color: #ffffff !important;
        display: grid !important;
        place-items: center !important;
        margin: -20px auto 2px !important;
        box-shadow: 0 8px 20px -4px rgba(67, 97, 238, 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-client .bottom-nav-fab {
        border-color: #0f172a !important;
    }
    :root body.is-client .bottom-nav-cta:active .bottom-nav-fab {
        transform: scale(0.92) !important;
    }
    :root body.is-client .bottom-nav-fab svg {
        width: 20px !important;
        height: 20px !important;
        color: #ffffff !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 */
    :root body.is-client .client-header {
        height: 60px !important;
        padding: 0 14px !important;
        background: var(--cl-card, #ffffff) !important;
        border-bottom: 1px solid var(--cl-line-soft, #f1f5f9) !important;
    }
    :root body.is-client .header-left {
        gap: 10px !important;
    }
    :root body.is-client .header-right {
        gap: 6px !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: var(--cl-hover, #f8fafc) !important;
        border: 1px solid var(--cl-line-soft, #e2e8f0) !important;
        color: var(--cl-ink, #0f172a) !important;
    }
    :root body.is-client .header-greeting {
        display: none !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 .quick-search-dropdown,
:root body:not(#rp) .quick-search-dropdown {
    position: absolute !important;
    top: calc(100% + 8px) !important;
    left: 0 !important;
    width: 340px !important;
    max-width: 90vw !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;
}

: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;
    gap: 10px !important;
    padding: 10px 14px !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;
}

: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;
}

/* ==========================================================================
   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 :is(.client-sidebar, #clientSidebar) {
        background: #ffffff !important;
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
        filter: none !important;
    }
    :root[data-theme="dark"] :is(.client-sidebar, #clientSidebar) {
        background: #0f172a !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;
    }
}