/* ==========================================================================
   ATX Solutions - Mobile Layout Adaptations
   Responsive layout utilities and adaptations for mobile devices
   ========================================================================== */

/* ==========================================================================
   Container and Grid Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Full-width containers on mobile */
    .container {
        max-width: 100%;
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
    }

/* ==========================================================================
   CustomerView — Detail Shell, Tab Strip, and Key Table→Card Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .customer-detail-header {
        padding: var(--mobile-space-sm) var(--mobile-space-md) !important;
    }

    .customer-detail-heading-mobile {
        min-width: 0;
        flex: 1;
    }

    .customer-detail-heading-mobile h6 {
        max-width: calc(100vw - 120px);
    }

    .customer-detail-body {
        padding: var(--mobile-space-sm) var(--mobile-space-md) !important;
    }

    .customer-detail-info-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-xs);
    }

    .customer-detail-email-mobile {
        font-size: var(--mobile-font-sm);
        color: #495057;
    }

    .customer-detail-badges-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .customer-detail-badges-mobile .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .customer-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .customer-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .customer-tabs-wrapper::before,
    .customer-tabs-wrapper::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        width: 24px;
        min-height: 100%;
        pointer-events: none;
        z-index: 2;
        flex-shrink: 0;
    }

    .customer-tabs-wrapper::before {
        left: 0;
        background: linear-gradient(to right, #fff 30%, transparent);
    }

    .customer-tabs-wrapper::after {
        right: 0;
        background: linear-gradient(to left, #fff 30%, transparent);
    }

    .customer-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
        gap: 0;
        margin-bottom: var(--mobile-space-md) !important;
    }

    .customer-tabs-wrapper .nav-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .customer-tabs-wrapper .nav-link {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .customer-tabs-wrapper .nav-link.active {
        border-bottom-color: var(--bs-primary);
        color: var(--bs-primary);
        background: transparent;
    }

    .customer-tab-content .card-header h5,
    .customer-tab-content .card-header h6 {
        font-size: 16px;
        line-height: 1.25;
    }

    .customer-tab-content .card-header {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
    }

    .customer-tab-content .card-body {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
    }

    .customer-tab-content .btn-group {
        flex-wrap: wrap;
    }

    .customer-overview-tenant-list,
    .customer-contact-card-list,
    .customer-transaction-card-list,
    .customer-wallet-card-list,
    .customer-doc-card-list,
    .customer-relationship-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .customer-overview-tenant-card,
    .customer-contact-card,
    .customer-transaction-card,
    .customer-wallet-card,
    .customer-doc-card,
    .customer-relationship-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .customer-overview-tenant-info,
    .customer-contact-card-info,
    .customer-transaction-card-info,
    .customer-wallet-card-info,
    .customer-doc-card-info,
    .customer-relationship-card-info {
        min-width: 0;
        flex: 1;
    }

    .customer-overview-tenant-name,
    .customer-contact-card-name,
    .customer-transaction-card-name,
    .customer-wallet-card-name,
    .customer-doc-card-title,
    .customer-relationship-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .customer-overview-tenant-type,
    .customer-contact-card-email,
    .customer-contact-card-phone,
    .customer-transaction-card-sub,
    .customer-wallet-card-sub,
    .customer-doc-card-file,
    .customer-doc-card-desc,
    .customer-relationship-card-email,
    .customer-relationship-card-notes {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .customer-overview-tenant-date,
    .customer-doc-card-date {
        font-size: 11px;
        color: #adb5bd;
        white-space: nowrap;
    }

    .customer-contact-card-meta,
    .customer-transaction-card-meta,
    .customer-wallet-card-meta,
    .customer-doc-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .customer-contact-card-meta .badge,
    .customer-transaction-card-meta .badge,
    .customer-wallet-card-meta .badge,
    .customer-doc-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .customer-transaction-card-amount,
    .customer-wallet-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
    }

    .customer-doc-card-logo {
        object-fit: contain;
        flex-shrink: 0;
    }

    .customer-tab-content .accordion-button {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        align-items: flex-start;
    }
}

/* ==========================================================================
   Inventory Create/Edit Pages — Compact Mobile Headers + Line Cards
   ========================================================================== */

@media (max-width: 767px) {
    .invadj-detail-heading-mobile,
    .invcount-detail-heading-mobile,
    .invtransfer-detail-heading-mobile {
        min-width: 0;
        flex: 1;
    }

    .invadj-line-card-list,
    .invcount-line-card-list,
    .invtransfer-line-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-sm);
    }

    .invadj-line-card,
    .invcount-line-card,
    .invtransfer-line-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .invcount-line-card-pending {
        border-color: #ffe69c;
        background: #fff8e1;
    }

    .invadj-line-card-info,
    .invcount-line-card-info,
    .invtransfer-line-card-info {
        min-width: 0;
        flex: 1;
    }

    .invadj-line-card-name,
    .invcount-line-card-name,
    .invtransfer-line-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .invadj-line-card-sub,
    .invcount-line-card-sub,
    .invtransfer-line-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .invadj-line-card-meta,
    .invcount-line-card-meta,
    .invtransfer-line-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .invadj-line-card-meta .badge,
    .invcount-line-card-meta .badge,
    .invtransfer-line-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }
}

@media (max-width: 767px) {
    /* Mobile header consolidation: remove the horizontal workspace menu bar on mobile */
    .workspace-menu-bar {
        display: none !important;
    }
}

/* ======================================================================
   One-handed / Bottom navigation spacing
   ====================================================================== */

@media (max-width: 767px) {
    /* Prevent fixed bottom nav from overlapping content */
    main {
        padding-bottom: calc(56px + var(--mobile-safe-area-bottom));
    }
}
    
    /* Stack all columns on mobile */
    .row > [class*="col-"] {
        flex: 0 0 100%;
        max-width: 100%;
    }
    
    /* Remove negative margins on rows */
    .row {
        margin-left: calc(-1 * var(--mobile-space-sm));
        margin-right: calc(-1 * var(--mobile-space-sm));
    }
    
    .row > * {
        padding-left: var(--mobile-space-sm);
        padding-right: var(--mobile-space-sm);
    }
    
    /* Grid gap adjustments */
    .g-3,
    .gx-3 {
        --bs-gutter-x: var(--mobile-space-md);
    }
    
    .g-3,
    .gy-3 {
        --bs-gutter-y: var(--mobile-space-md);
    }
}

/* ==========================================================================
   Card Layout Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Cards take full width with minimal spacing */
    .card {
        border-radius: var(--mobile-radius-md);
        margin-bottom: var(--mobile-space-md);
        box-shadow: var(--mobile-shadow-sm);
    }
    
    .card-body {
        padding: var(--mobile-space-md);
    }
    
    .card-header,
    .card-footer {
        padding: var(--mobile-space-md);
    }
    
    /* Horizontal cards stack vertically */
    .card-horizontal {
        flex-direction: column !important;
    }
    
    .card-horizontal .card-img,
    .card-horizontal .card-img-top {
        width: 100%;
        max-width: 100%;
        border-radius: var(--mobile-radius-md) var(--mobile-radius-md) 0 0;
    }
    
    /* Card groups stack */
    .card-group {
        flex-direction: column;
    }
    
    .card-group > .card {
        margin-bottom: var(--mobile-space-md);
    }
}

/* ==========================================================================
   Flex and Display Utilities
   ========================================================================== */

@media (max-width: 767px) {
    /* Force column direction for flex containers */
    .mobile-flex-column {
        flex-direction: column !important;
    }
    
    /* Center items */
    .mobile-justify-center {
        justify-content: center !important;
    }
    
    .mobile-align-center {
        align-items: center !important;
    }
    
    /* Spacing between flex items */
    .mobile-gap-sm > * + * {
        margin-top: var(--mobile-space-sm);
    }
    
    .mobile-gap-md > * + * {
        margin-top: var(--mobile-space-md);
    }
    
    .mobile-gap-lg > * + * {
        margin-top: var(--mobile-space-lg);
    }
    
    /* Flex order control */
    .mobile-order-first {
        order: -1 !important;
    }
    
    .mobile-order-last {
        order: 999 !important;
    }
}

/* ==========================================================================
   Modal Adaptations

   IMPORTANT: All rules are scoped to `.modal.show` (not plain `.modal`).
   Hidden modals (e.g. #sessionTimeoutModal from session-timeout.js)
   permanently exist in the DOM. Without `.show` scoping, these hidden
   modals receive full-screen layout and pointer-events overrides that
   create invisible touch-blocking layers on mobile, preventing users
   from interacting with ANY visible modal.
   ========================================================================== */

@media (max-width: 767px) {
    /* Bootstrap sets overflow-y:auto on .modal, creating a viewport-sized
       scroll container. On mobile browsers this scroll container runs touch-
       event hit-testing that can delay or swallow taps on child elements
       (buttons in header/footer). Since modal-body handles its own scrolling
       in the full-screen layout, the outer scroll container is unnecessary.
       Override to hidden so the browser treats the modal as a plain fixed
       overlay and routes touch events directly to child elements. */
    .modal.show {
        overflow: hidden !important;
    }

    /* Bootstrap dynamically creates a .modal-backdrop element when showing
       modals. On mobile browsers this fixed-position overlay intercepts all
       touch events, preventing users from tapping modal buttons (X, Cancel,
       Save). Remove it entirely on mobile — the .modal element itself
       already provides the dimmed overlay via its own background. */
    .modal-backdrop {
        display: none !important;
    }

    /* Modals take full screen on mobile — flex layout keeps header/footer
       visible while only body scrolls.

       Bootstrap sets pointer-events: none on .modal-dialog (so clicks pass
       through to the backdrop on desktop). On mobile, this creates a
       full-screen touch-event dead zone that prevents taps from reaching
       buttons inside .modal-content on iOS Safari and some Android Chrome
       versions. Override to auto — in full-screen layout there is no visible
       backdrop gap to click through.

       Bootstrap's .modal.fade .modal-dialog also has a transform transition
       (translate(0, -50px) → none). Even after the modal is shown, the
       transition property keeps a GPU compositing layer alive which can
       misroute touch events. Disable the transform transition entirely for
       mobile full-screen modals. */
    .modal.show .modal-dialog {
        margin: 0;
        max-width: 100%;
        height: 100%;
        pointer-events: auto;
    }

    /* Disable the fade slide-down transform on mobile to prevent a
       permanent compositing layer from intercepting touch events. */
    .modal.show.fade .modal-dialog {
        transform: none;
        transition: none;
    }

    /* modal-dialog-centered adds display:flex + align-items:center for
       vertical centering on desktop. In full-screen mobile layout the dialog
       already fills 100% height, so flex centering is unnecessary and can
       create an intermediate flex formatting context that interferes with
       touch hit-testing on some mobile browsers. */
    .modal.show .modal-dialog-centered {
        display: block;
        align-items: unset;
        min-height: 100%;
    }

    .modal.show .modal-content {
        display: flex;
        flex-direction: column;
        height: 100%;
        max-height: 100%;
        border: none;
        border-radius: 0;
    }

    /* Many modals wrap header/body/footer inside a <form>. The form must
       itself be a flex container so header/body/footer participate as flex
       items. Do NOT use display:contents — it strips the form's box and
       breaks button type="button" semantics in some browsers. */
    .modal.show .modal-content > form {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-height: 0;
    }

    .modal.show .modal-header {
        flex-shrink: 0;
        padding: var(--mobile-space-md);
        background: white;
        z-index: 1;
        border-bottom: 1px solid #dee2e6;
        touch-action: manipulation;
    }

    .modal.show .modal-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: var(--mobile-space-md);
    }

    .modal.show .modal-footer {
        flex-shrink: 0;
        padding: var(--mobile-space-md);
        background: white;
        z-index: 2;
        border-top: 1px solid #dee2e6;
        touch-action: manipulation;
    }

    /* Exception: Small modals (alerts, confirmations) */
    .modal.show.modal-sm .modal-dialog {
        height: auto;
        margin: var(--mobile-space-md);
        max-width: calc(100% - var(--mobile-space-lg));
    }

    .modal.show.modal-sm .modal-content {
        height: auto;
        border-radius: var(--mobile-radius-lg);
    }
}

/* ==========================================================================
   Offcanvas Enhancements
   ========================================================================== */

@media (max-width: 767px) {
    /* Offcanvas takes appropriate width */
    .offcanvas {
        max-width: 85vw;
    }
    
    .offcanvas-start,
    .offcanvas-end {
        width: 85vw;
    }
    
    .offcanvas-body {
        padding: var(--mobile-space-md);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .offcanvas-header {
        padding: var(--mobile-space-md);
        min-height: var(--mobile-touch-target-large);
    }
    
    /* Backdrop */
    .offcanvas-backdrop {
        background-color: rgba(0, 0, 0, 0.5);
    }

    /* The custom #mobile-offcanvas-backdrop lives permanently in the DOM.
       When not actively shown (.show), ensure it cannot intercept touch
       events even if display/opacity transitions leave it momentarily
       in the rendering tree. */
    #mobile-offcanvas-backdrop:not(.show) {
        pointer-events: none !important;
    }
}

/* ==========================================================================
   Alert and Toast Positioning
   ========================================================================== */

@media (max-width: 767px) {
    /* Alerts */
    .alert {
        border-radius: var(--mobile-radius-md);
        padding: var(--mobile-space-md);
        margin-bottom: var(--mobile-space-md);
    }
    
    .alert-dismissible .btn-close {
        padding: var(--mobile-touch-padding);
    }
    
    /* Toast container positioning */
    .toast-container {
        padding: var(--mobile-space-md);
        /* Respect safe areas on notched devices */
        padding-top: max(var(--mobile-space-md), var(--mobile-safe-area-top));
        padding-bottom: max(var(--mobile-space-md), var(--mobile-safe-area-bottom));
    }
    
    /* Toasts full width on mobile */
    .toast {
        width: 100%;
        max-width: 100%;
        border-radius: var(--mobile-radius-md);
    }
    
    .toast-header,
    .toast-body {
        padding: var(--mobile-space-md);
    }
}

/* ==========================================================================
   Dropdown Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .topbar-right-actions {
        flex-direction: row;
        align-items: center;
        gap: 0.25rem;
        margin-bottom: 0;
    }

    .topbar-right-actions .nav-item {
        display: flex;
        align-items: center;
    }

    /* Dropdowns take full width */
    .dropdown-menu {
        width: 100%;
        max-width: calc(100vw - var(--mobile-space-lg));
        border-radius: var(--mobile-radius-md);
        padding: var(--mobile-space-sm);
        box-shadow: var(--mobile-shadow-lg);
    }
    
    .dropdown-item {
        min-height: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding) var(--mobile-space-md);
        border-radius: var(--mobile-radius-sm);
        margin-bottom: var(--mobile-space-xs);
        font-size: var(--mobile-font-base);
    }
    
    .dropdown-divider {
        margin: var(--mobile-space-sm) 0;
    }
    
    /* Dropdown header */
    .dropdown-header {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
    }
    
    /* Profile dropdown specific */
    .navbar .dropdown-menu {
        position: absolute;
        right: 0;
        left: auto;
        min-width: 200px;
        margin-top: 0.5rem;
    }
    
    /* Dropdown item text */
    .dropdown-item-text {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        min-height: auto;
    }
    
    /* Icons in dropdown items */
    .dropdown-item i,
    .dropdown-item svg {
        width: 20px;
        margin-right: var(--mobile-space-sm);
        display: inline-block;
    }
    
    /* Active/hover states for touch */
    .dropdown-item:active {
        background-color: var(--bs-primary);
        color: white;
    }
    
    /* Dropdown toggle button in navbar */
    .navbar .nav-link.dropdown-toggle {
        min-height: var(--mobile-touch-target-min);
        min-width: var(--mobile-touch-target-min);
        display: flex;
        align-items: center;
        padding: var(--mobile-space-sm);
    }
    
    /* Profile image in dropdown toggle */
    .navbar .nav-link.dropdown-toggle img {
        border: 2px solid rgba(255, 255, 255, 0.3);
    }
}

/* ==========================================================================
   Accordion Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .accordion-item {
        margin-bottom: var(--mobile-space-sm);
        border-radius: var(--mobile-radius-md);
        overflow: hidden;
    }
    
    .accordion-button {
        padding: var(--mobile-space-md);
        font-size: var(--mobile-font-base);
        min-height: var(--mobile-touch-target-large);
    }
    
    .accordion-body {
        padding: var(--mobile-space-md);
    }
    
    /* Icons */
    .accordion-button::after {
        flex-shrink: 0;
        width: 24px;
        height: 24px;
    }
}

/* ==========================================================================
   List Group Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .list-group-item {
        padding: var(--mobile-space-md);
        border-left: none;
        border-right: none;
    }
    
    /* First and last items */
    .list-group-item:first-child {
        border-top: none;
        border-top-left-radius: 0;
        border-top-right-radius: 0;
    }
    
    .list-group-item:last-child {
        border-bottom: none;
        border-bottom-left-radius: 0;
        border-bottom-right-radius: 0;
    }
    
    /* Interactive list items */
    .list-group-item-action {
        min-height: var(--mobile-touch-target-min);
    }
}

/* ==========================================================================
   Badge and Pill Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .badge {
        font-size: var(--mobile-font-sm);
        padding: 4px 8px;
        border-radius: var(--mobile-radius-sm);
    }
    
    /* Clickable badges */
    a.badge,
    button.badge {
        min-height: 32px;
        padding: 6px 12px;
        display: inline-flex;
        align-items: center;
    }
}

/* ==========================================================================
   Progress and Spinner Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .progress {
        height: 8px;
        border-radius: var(--mobile-radius-full);
    }
    
    /* Larger progress bars for important actions */
    .progress.progress-lg {
        height: 12px;
    }
    
    /* Spinners */
    .spinner-border,
    .spinner-grow {
        width: 2rem;
        height: 2rem;
    }
}

/* ==========================================================================
   Image and Media Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Images responsive by default */
    img {
        max-width: 100%;
        height: auto;
    }
    
    /* Figure */
    figure {
        margin: var(--mobile-space-md) 0;
    }
    
    figcaption {
        font-size: var(--mobile-font-sm);
        padding: var(--mobile-space-sm);
    }
    
    /* Thumbnails */
    .img-thumbnail {
        padding: 4px;
        border-radius: var(--mobile-radius-md);
    }
}

/* ==========================================================================
   Breadcrumb Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Breadcrumbs scroll horizontally if needed */
    .breadcrumb {
        overflow-x: auto;
        overflow-y: hidden;
        white-space: nowrap;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        padding: var(--mobile-space-sm) 0;
        margin-bottom: var(--mobile-space-md);
    }
    
    .breadcrumb-item {
        font-size: var(--mobile-font-sm);
    }
    
    /* Show only last 2 items + home on very small screens */
    @media (max-width: 375px) {
        .breadcrumb-item:not(:first-child):not(:nth-last-child(-n+2)) {
            display: none;
        }
        
        .breadcrumb-item:nth-last-child(3)::before {
            content: "...";
        }
    }
}

/* ==========================================================================
   Pagination Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }
    
    .page-link {
        min-width: var(--mobile-touch-target-min);
        min-height: var(--mobile-touch-target-min);
        padding: var(--mobile-touch-padding-sm);
        font-size: var(--mobile-font-sm);
    }
    
    /* Hide page numbers on very small screens, show only prev/next */
    @media (max-width: 375px) {
        .page-item:not(.active):not(:first-child):not(:last-child) {
            display: none;
        }
    }
}

/* ==========================================================================
   Utility Spacing for Mobile
   ========================================================================== */

@media (max-width: 767px) {
    /* Margin utilities */
    .mobile-m-0 { margin: 0 !important; }
    .mobile-m-1 { margin: var(--mobile-space-xs) !important; }
    .mobile-m-2 { margin: var(--mobile-space-sm) !important; }
    .mobile-m-3 { margin: var(--mobile-space-md) !important; }
    .mobile-m-4 { margin: var(--mobile-space-lg) !important; }
    .mobile-m-5 { margin: var(--mobile-space-xl) !important; }
    
    /* Padding utilities */
    .mobile-p-0 { padding: 0 !important; }
    .mobile-p-1 { padding: var(--mobile-space-xs) !important; }
    .mobile-p-2 { padding: var(--mobile-space-sm) !important; }
    .mobile-p-3 { padding: var(--mobile-space-md) !important; }
    .mobile-p-4 { padding: var(--mobile-space-lg) !important; }
    .mobile-p-5 { padding: var(--mobile-space-xl) !important; }
    
    /* Margin bottom utilities (most common) */
    .mobile-mb-0 { margin-bottom: 0 !important; }
    .mobile-mb-1 { margin-bottom: var(--mobile-space-xs) !important; }
    .mobile-mb-2 { margin-bottom: var(--mobile-space-sm) !important; }
    .mobile-mb-3 { margin-bottom: var(--mobile-space-md) !important; }
    .mobile-mb-4 { margin-bottom: var(--mobile-space-lg) !important; }
    .mobile-mb-5 { margin-bottom: var(--mobile-space-xl) !important; }
}

/* ==========================================================================
   Horizontal Scroll Container (for tables, etc.)
   ========================================================================== */

@media (max-width: 767px) {
    .mobile-scroll-x {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        margin-bottom: var(--mobile-space-md);
    }
    
    /* Shadow indicators for scrollable content */
    .mobile-scroll-x-shadow {
        position: relative;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-scroll-x-shadow::before,
    .mobile-scroll-x-shadow::after {
        content: '';
        position: absolute;
        top: 0;
        bottom: 0;
        width: 20px;
        pointer-events: none;
        z-index: 1;
    }
    
    .mobile-scroll-x-shadow::before {
        left: 0;
        background: linear-gradient(to right, rgba(255,255,255,1), rgba(255,255,255,0));
    }
    
    .mobile-scroll-x-shadow::after {
        right: 0;
        background: linear-gradient(to left, rgba(255,255,255,1), rgba(255,255,255,0));
    }
}

/* ==========================================================================
   Fixed Positioning Adjustments
   ========================================================================== */

@media (max-width: 767px) {
    /* Fixed top elements respect safe area */
    .fixed-top {
        padding-top: max(0.5rem, var(--mobile-safe-area-top));
    }
    
    /* Fixed bottom elements respect safe area */
    .fixed-bottom {
        padding-bottom: max(0.5rem, var(--mobile-safe-area-bottom));
    }
    
    /* Sticky elements */
    .sticky-top {
        top: calc(56px + var(--mobile-safe-area-top));
    }
}

/* ==========================================================================
   TenantView — List Page Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Compact card header */
    .tenant-list-header {
        padding: var(--mobile-space-sm) var(--mobile-space-md) !important;
    }

    /* Tighter body padding */
    .tenant-list-body {
        padding: var(--mobile-space-sm) var(--mobile-space-md) !important;
    }

    /* Card-based tenant list */
    .tenant-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .tenant-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .tenant-card:active {
        background: #f8f9fa;
    }

    .tenant-card-info {
        min-width: 0; /* allow truncation */
        flex: 1;
    }

    .tenant-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-card-email {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-card-slug {
        font-size: var(--mobile-font-xs);
        color: #adb5bd;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 70vw;
    }

    .tenant-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .tenant-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .tenant-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    /* FAB — floating action button for Create Tenant */
    .tenant-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .tenant-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    /* Pagination compact on mobile */
    .tenant-list-card .pagination {
        margin-top: var(--mobile-space-md);
        margin-bottom: var(--mobile-space-xs);
    }

    .tenant-list-card .pagination .page-link {
        padding: 6px 10px;
        font-size: var(--mobile-font-sm);
    }
}

/* ==========================================================================
   TenantView — Detail Page Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    /* Compact detail header */
    .tenant-detail-header {
        padding: var(--mobile-space-sm) var(--mobile-space-md) !important;
    }

    .tenant-detail-heading-mobile {
        min-width: 0; /* allow truncation */
        flex: 1;
    }

    .tenant-detail-heading-mobile h6 {
        max-width: calc(100vw - 120px);
    }

    .tenant-detail-body {
        padding: var(--mobile-space-sm) var(--mobile-space-md) !important;
    }

    /* Mobile info strip */
    .tenant-detail-info-mobile {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-xs);
    }

    .tenant-detail-email-mobile {
        font-size: var(--mobile-font-sm);
        color: #495057;
    }

    .tenant-detail-badges-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .tenant-detail-badges-mobile .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* Scrollable tab strip */
    .tenant-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;           /* Firefox */
        -ms-overflow-style: none;        /* IE/Edge */
    }

    .tenant-tabs-wrapper::-webkit-scrollbar {
        display: none;                   /* Chrome/Safari */
    }

    /* Gradient fade indicators — hint that more tabs exist off-screen */
    .tenant-tabs-wrapper::before,
    .tenant-tabs-wrapper::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        width: 24px;
        min-height: 100%;
        pointer-events: none;
        z-index: 2;
        flex-shrink: 0;
    }

    .tenant-tabs-wrapper::before {
        left: 0;
        background: linear-gradient(to right, #fff 30%, transparent);
    }

    .tenant-tabs-wrapper::after {
        right: 0;
        background: linear-gradient(to left, #fff 30%, transparent);
    }

    .tenant-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
        gap: 0;
        margin-bottom: var(--mobile-space-md) !important;
    }

    .tenant-tabs-wrapper .nav-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .tenant-tabs-wrapper .nav-link {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .tenant-tabs-wrapper .nav-link.active {
        border-bottom-color: var(--bs-primary);
        color: var(--bs-primary);
        background: transparent;
    }

    /* Shorten tab labels on mobile via the wrapper span */
    .tenant-tab-label {
        /* Labels shown in the Razor use shorter text on mobile */
    }
}

/* ==========================================================================
   TenantView Tab Content — Mobile Adaptations (Phase 2)
   Addresses, Directors, Banking, Documents table→card transformations
   + compact card headers + scrollable Settings sub-nav
   ========================================================================== */

@media (max-width: 767px) {

    /* --- Shared card-list pattern for all tab content cards --- */
    .tenant-addr-card-list,
    .tenant-dir-card-list,
    .tenant-bank-card-list,
    .tenant-doc-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .tenant-addr-card,
    .tenant-dir-card,
    .tenant-bank-card,
    .tenant-doc-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .tenant-addr-card:active,
    .tenant-dir-card:active,
    .tenant-bank-card:active,
    .tenant-doc-card:active {
        background: #f8f9fa;
    }

    /* --- Shared card info (flex child with truncation) --- */
    .tenant-addr-card-info,
    .tenant-dir-card-info,
    .tenant-bank-card-info,
    .tenant-doc-card-info {
        min-width: 0;
        flex: 1;
    }

    /* --- Shared card meta row --- */
    .tenant-addr-card-meta,
    .tenant-dir-card-meta,
    .tenant-bank-card-meta,
    .tenant-doc-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .tenant-addr-card-meta .badge,
    .tenant-dir-card-meta .badge,
    .tenant-bank-card-meta .badge,
    .tenant-doc-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* --- Addresses card --- */
    .tenant-addr-card-street {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight, 1.3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-addr-card-city {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .tenant-addr-card-country {
        font-size: 12px;
        color: #adb5bd;
    }

    /* --- Directors card --- */
    .tenant-dir-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight, 1.3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-dir-card-email,
    .tenant-dir-card-phone {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-dir-card--inactive {
        opacity: 0.6;
    }

    .tenant-dir-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .tenant-dir-card-total {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        background: #f8f9fa;
        border-radius: var(--mobile-radius-sm);
        font-size: var(--mobile-font-sm);
        text-align: right;
        margin-top: var(--mobile-space-sm);
    }

    /* --- Banking card --- */
    .tenant-bank-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight, 1.3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-bank-card-holder {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-bank-card-acct {
        font-size: 12px;
        color: #adb5bd;
        font-family: monospace;
    }

    .tenant-bank-card--inactive {
        opacity: 0.6;
    }

    .tenant-bank-card-branch {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    /* --- Documents card --- */
    .tenant-doc-card-title {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight, 1.3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tenant-doc-card-file {
        font-size: 12px;
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        max-width: 55vw;
    }

    .tenant-doc-card-size {
        font-size: 11px;
        color: #6c757d;
    }

    .tenant-doc-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    /* --- Settings drill-down navigation (replaces horizontal pills on mobile) --- */
    .tenant-settings-pills-wrapper {
        display: none !important;
    }

    .tenant-settings-drilldown {
        display: flex;
        flex-direction: column;
    }

    .tenant-settings-drilldown-item {
        display: flex;
        align-items: center;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border-bottom: 1px solid #e9ecef;
        color: #212529;
        text-decoration: none;
        min-height: var(--mobile-touch-target-comfortable);
        transition: background var(--mobile-transition-fast);
    }

    .tenant-settings-drilldown-item:first-child {
        border-top: 1px solid #e9ecef;
    }

    .tenant-settings-drilldown-item:active {
        background: #f8f9fa;
        color: #212529;
    }

    .tenant-settings-drilldown-item i:first-child {
        font-size: var(--mobile-font-lg);
        width: 24px;
        text-align: center;
        flex-shrink: 0;
    }

    .tenant-settings-drilldown-item span {
        flex: 1;
        font-size: var(--mobile-font-base);
        font-weight: 500;
    }

    .tenant-settings-drilldown-back a {
        display: inline-flex;
        align-items: center;
        gap: var(--mobile-space-xs);
        padding: var(--mobile-space-sm) 0;
        margin-bottom: var(--mobile-space-sm);
        font-size: var(--mobile-font-sm);
        color: var(--bs-primary);
        text-decoration: none;
        font-weight: 500;
    }

    .tenant-settings-drilldown-back a:active {
        opacity: 0.7;
    }

    /* --- Overview: tighter summary cards on mobile --- */
    .tenant-overview-summary .card-header h6 {
        font-size: var(--mobile-font-sm);
    }

    /* --- Notes accordion: compact float buttons on mobile --- */
    .accordion-body .btn-group-sm .btn {
        padding: 2px 6px;
        font-size: 12px;
    }

    /* ==========================================================================
       Settings Tab Deep-Dive — Mobile Adaptations
       ========================================================================== */

    /* --- Settings cards: compact h5 headers --- */
    #settingsContent .card-header h5 {
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    #settingsContent .card-header h5 .badge {
        font-size: 10px;
        padding: 2px 5px;
    }

    /* (Settings pills hidden on mobile — no boxed look override needed) */

    /* --- Financial: accounting mode flex wrap --- */
    #financial .d-flex.gap-3 {
        flex-wrap: wrap;
        gap: var(--mobile-space-sm) !important;
    }

    /* --- Email Config sub-section mobile navigation strip --- */
    .tenant-settings-email-subnav {
        display: flex;
        gap: 4px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        padding-bottom: var(--mobile-space-sm);
        margin-bottom: var(--mobile-space-md);
        border-bottom: 1px solid #e9ecef;
    }

    .tenant-settings-email-subnav::-webkit-scrollbar {
        display: none;
    }

    .tenant-settings-email-subnav a {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 10px;
        border-radius: var(--mobile-radius-sm);
        color: #6c757d;
        text-decoration: none;
        background: #f8f9fa;
        border: 1px solid transparent;
    }

    .tenant-settings-email-subnav a.active {
        background: var(--bs-primary);
        color: #fff;
    }

    .tenant-settings-email-subnav a:active {
        opacity: 0.8;
    }
}

/* ==========================================================================
   MyContacts — Mobile Card List, Collapsible Filters, FAB
   ========================================================================== */

@media (max-width: 767px) {
    .contact-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .contact-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .contact-card:active {
        background: #f8f9fa;
    }

    .contact-card-info {
        min-width: 0;
        flex: 1;
    }

    .contact-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact-card-email {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact-card-company {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .contact-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .contact-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .contact-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .contact-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    #contactMobileFilters {
        margin-top: var(--mobile-space-sm);
    }
}

/* Desktop: ensure collapsible filter wrapper is always visible on ≥768px */
@media (min-width: 768px) {
    #contactMobileFilters.collapse:not(.show) {
        display: block !important;
    }
}

/* ==========================================================================
   ContactView — Compact Detail Header, Info Strip, Scrollable Tab Bar
   ========================================================================== */

@media (max-width: 767px) {
    .contact-detail-heading-mobile {
        padding: var(--mobile-space-sm) 0;
    }

    .contact-detail-heading-mobile h6 {
        font-size: var(--mobile-font-base);
        font-weight: 600;
        max-width: 70vw;
    }

    .contact-detail-info-mobile {
        padding: var(--mobile-space-sm) 0 var(--mobile-space-md);
    }

    .contact-detail-email-mobile,
    .contact-detail-phone-mobile {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .contact-detail-email-mobile i,
    .contact-detail-phone-mobile i {
        width: 16px;
        text-align: center;
        margin-right: 4px;
    }

    .contact-detail-badges-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .contact-detail-badges-mobile .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .contact-detail-date-mobile {
        font-size: 11px;
        color: #adb5bd;
        margin-top: var(--mobile-space-xs);
    }

    /* Scrollable tab strip */
    .contact-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .contact-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .contact-tabs-wrapper::before,
    .contact-tabs-wrapper::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        width: 24px;
        min-height: 100%;
        pointer-events: none;
        z-index: 2;
        flex-shrink: 0;
    }

    .contact-tabs-wrapper::before {
        left: 0;
        background: linear-gradient(to right, #fff 30%, transparent);
    }

    .contact-tabs-wrapper::after {
        right: 0;
        background: linear-gradient(to left, #fff 30%, transparent);
    }

    .contact-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
        gap: 0;
        margin-bottom: var(--mobile-space-md) !important;
    }

    .contact-tabs-wrapper .nav-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .contact-tabs-wrapper .nav-link {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .contact-tabs-wrapper .nav-link.active {
        border-bottom-color: var(--bs-primary);
        color: var(--bs-primary);
        background: transparent;
    }

    .contact-tab-label {
        /* label spans — no extra style needed, inherits from nav-link */
    }
}

/* ==========================================================================
   TenantCustomers — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {

    /* Map contact select: full width on mobile (desktop uses w-50 via tcust-map-select) */
    .tcust-map-select {
        width: 100% !important;
    }

    /* Card list container */
    .tcust-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .tcust-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .tcust-card:active {
        background: #f8f9fa;
    }

    .tcust-card-info {
        min-width: 0;
        flex: 1;
    }

    .tcust-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tcust-card-email {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tcust-card-company {
        font-size: 12px;
        color: #adb5bd;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tcust-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .tcust-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .tcust-card-phone {
        font-size: 11px;
        color: #6c757d;
        margin-left: auto;
    }
}

/* Desktop: map contact select width */
@media (min-width: 768px) {
    .tcust-map-select {
        width: 50%;
    }
}

/* ==========================================================================
   Manager Dashboard — Compact Heading, Tenant Cards, Usage Widget Tightening
   ========================================================================== */

@media (max-width: 767px) {
    /* Tenant card list */
    .mgr-dash-tenant-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .mgr-dash-tenant-card {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .mgr-dash-tenant-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        min-width: 0;
        flex: 1;
    }

    .mgr-dash-tenant-card-currency {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        margin-top: 2px;
    }

    /* Usage widget: tighter icon sizing */
    .card-body .col-md-6 .fs-3 {
        font-size: 1.25rem !important;
    }

    /* Accounting Tasks widget: compact badge on mobile */
    .list-group-item .gap-2 .btn-outline-primary.btn-sm {
        padding: 4px 8px;
        font-size: 12px;
    }

    /* Storage breakdown text wrapping */
    .card-body .col-md-6 small.text-muted.d-block {
        word-break: break-word;
    }
}

/* ==========================================================================
   Subscription & Features — Mobile Adaptations
   (Index, _ActiveFeatures, _CurrentPlan, _UsageStatistics,
    Plans, Features, OrderHistory)
   ========================================================================== */

@media (max-width: 767px) {
    /* --- Active Features & Products: card list --- */
    .sub-features-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-sm) 0;
    }

    .sub-features-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        transition: background var(--mobile-transition-fast);
    }

    .sub-features-card:active {
        background: #f8f9fa;
    }

    .sub-features-card-info {
        min-width: 0;
        flex: 1;
    }

    .sub-features-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .sub-features-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-xs);
    }

    .sub-features-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    /* --- Order History: card list --- */
    .order-hist-card-list {
        display: flex;
        flex-direction: column;
    }

    .order-hist-card {
        display: block;
        position: relative;
        padding: var(--mobile-space-md);
        padding-right: 28px;
        border-bottom: 1px solid #e9ecef;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .order-hist-card:first-child {
        border-top: 1px solid #e9ecef;
    }

    .order-hist-card:active {
        background: #f8f9fa;
    }

    .order-hist-card-info {
        min-width: 0;
        flex: 1;
    }

    .order-hist-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .order-hist-card-date {
        font-size: 12px;
        color: #6c757d;
    }

    .order-hist-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .order-hist-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .order-hist-card-chevron {
        position: absolute;
        right: var(--mobile-space-sm);
        top: 50%;
        transform: translateY(-50%);
        font-size: 14px;
    }

    /* --- Usage Statistics: tighter on mobile --- */
    .col-6.col-md-4.col-lg-2 .progress {
        height: 3px !important;
    }

    /* --- Plans: plan card h5 tighter --- */
    .col-md-6.col-lg-3 .card-header h5 {
        font-size: 15px;
    }

    .col-md-6.col-lg-3 .card-body h3 {
        font-size: 1.25rem;
    }

    /* --- Features: sticky search bar compact --- */
    .sticky-top.bg-white .row .col-md-6 .input-group {
        margin-bottom: 0;
    }

    .sticky-top.bg-white .row .col-md-3 {
        display: none;
    }
}

/* ==========================================================================
   Subscription Plans — Swipeable Card Carousel
   ========================================================================== */

@media (max-width: 767px) {
    /* --- Carousel container: horizontal scroll with snap --- */
    .plans-carousel {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        --bs-gutter-x: 0 !important;
        margin-left: calc(-1 * var(--mobile-space-md)) !important;
        margin-right: calc(-1 * var(--mobile-space-md)) !important;
        padding: var(--mobile-space-sm) 10%;
        gap: var(--mobile-space-md) !important;
    }

    .plans-carousel::-webkit-scrollbar {
        display: none;
    }

    /* --- Each plan card: 80% width, centered snap --- */
    .plans-carousel > [class*="col-"] {
        flex: 0 0 80%;
        max-width: 80%;
        scroll-snap-align: center;
        padding: 0 !important;
        /* No transition until JS adds .plans-carousel-ready */
        transition: none;
    }

    /* Enable smooth transitions after initial scroll position is set */
    .plans-carousel-ready > [class*="col-"] {
        transition: transform var(--mobile-transition-base) ease,
                    opacity var(--mobile-transition-base) ease;
    }

    /* --- Depth effect: peek cards scale down + fade --- */
    .plans-carousel > [class*="col-"].plans-snap-peek {
        transform: scale(0.90);
        opacity: 0.45;
    }

    .plans-carousel > [class*="col-"].plans-snap-active {
        transform: scale(1);
        opacity: 1;
    }

    /* Card sizing inside carousel */
    .plans-carousel .card {
        border-radius: var(--mobile-radius-lg);
        box-shadow: var(--mobile-shadow-md);
    }

    .plans-carousel .card-header h5 {
        font-size: 16px;
    }

    .plans-carousel .card-body h3 {
        font-size: 1.35rem;
    }

    /* Feature list compact in carousel */
    .plans-carousel .list-unstyled.small {
        font-size: 12px;
    }

    /* --- Dot indicators --- */
    .plans-dots {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding: var(--mobile-space-md) 0 var(--mobile-space-sm);
    }

    .plans-dot {
        width: 8px;
        height: 8px;
        border-radius: 50%;
        background: #dee2e6;
        border: none;
        transition: transform var(--mobile-transition-fast),
                    background var(--mobile-transition-fast);
    }

    .plans-dot.active {
        background: var(--bs-primary);
        transform: scale(1.5);
    }
}

/* ==========================================================================
   Profile — Mobile Adaptations
   Compact heading, scrollable tab strip with gradient fades, consent table→card,
   wallet transaction table→card, documents table→card with collapsible filters
   ========================================================================== */

@media (max-width: 767px) {
    /* --- Scrollable Tab Strip --- */
    .profile-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .profile-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .profile-tabs-wrapper::before,
    .profile-tabs-wrapper::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        width: 24px;
        min-height: 100%;
        pointer-events: none;
        z-index: 2;
        flex-shrink: 0;
    }

    .profile-tabs-wrapper::before {
        left: 0;
        background: linear-gradient(to right, #fff 30%, transparent);
    }

    .profile-tabs-wrapper::after {
        right: 0;
        background: linear-gradient(to left, #fff 30%, transparent);
    }

    .profile-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
        gap: 0;
        margin-bottom: var(--mobile-space-md) !important;
    }

    .profile-tabs-wrapper .nav-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .profile-tabs-wrapper .nav-link {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .profile-tabs-wrapper .nav-link.active {
        border-bottom-color: var(--bs-primary);
        color: var(--bs-primary);
        background: transparent;
    }

    .profile-tab-label {
        /* keep visible — labels are already short */
    }

    /* --- Consent Card List --- */
    .profile-consent-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .profile-consent-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .profile-consent-card-info {
        min-width: 0;
        flex: 1;
    }

    .profile-consent-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .profile-consent-card-date {
        font-size: 11px;
        color: #adb5bd;
    }

    /* --- Wallet Transaction Card List --- */
    .profile-tx-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
    }

    .profile-tx-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .profile-tx-card-info {
        min-width: 0;
        flex: 1;
    }

    .profile-tx-card-desc {
        font-size: var(--mobile-font-sm);
        color: #495057;
    }

    .profile-tx-card-meta {
        display: flex;
        align-items: center;
        gap: 8px;
        margin-top: var(--mobile-space-sm);
        font-size: 11px;
        color: #adb5bd;
    }

    /* --- Document Card List --- */
    .profile-doc-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
    }

    .profile-doc-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .profile-doc-card-info {
        min-width: 0;
        flex: 1;
    }

    .profile-doc-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight, 1.3);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .profile-doc-card-desc {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .profile-doc-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .profile-doc-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .profile-doc-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Notifications — Mobile Adaptations
   Compact heading, hidden summary cards, collapsible filters, table→card list
   ========================================================================== */

@media (max-width: 767px) {
    /* --- Notification Card List --- */
    .notif-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
    }

    .notif-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .notif-card:active {
        background: #f8f9fa;
    }

    .notif-card-unread {
        border-left: 3px solid var(--bs-primary);
        font-weight: 600;
    }

    .notif-card-info {
        min-width: 0;
        flex: 1;
    }

    .notif-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .notif-card-msg {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        font-weight: 400;
        margin-top: 2px;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        overflow: hidden;
    }

    .notif-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .notif-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .notif-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
        font-weight: 400;
    }
}

/* ==========================================================================
   Manager Support Tickets (List) — Mobile Adaptations
   Compact heading, FAB, collapsible filters, table→card list
   ========================================================================== */

@media (max-width: 767px) {
    .mgrticket-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .mgrticket-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    .mgrticket-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
    }

    .mgrticket-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .mgrticket-card:active {
        background: #f8f9fa;
    }

    .mgrticket-card-info {
        min-width: 0;
        flex: 1;
    }

    .mgrticket-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mgrticket-card-contact {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .mgrticket-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .mgrticket-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .mgrticket-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Admin Support Tickets (List) — Mobile Adaptations
   Compact heading, hidden stats, collapsible filters, table→card list
   ========================================================================== */

@media (max-width: 767px) {
    .adminticket-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
    }

    .adminticket-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .adminticket-card:active {
        background: #f8f9fa;
    }

    .adminticket-card-info {
        min-width: 0;
        flex: 1;
    }

    .adminticket-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .adminticket-card-contact {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .adminticket-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .adminticket-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .adminticket-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Admin Dashboard — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .admindash-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .admindash-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .admindash-card:active {
        background: #f8f9fa;
    }

    .admindash-card-info {
        min-width: 0;
        flex: 1;
    }

    .admindash-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admindash-card-email {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .admindash-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .admindash-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .admindash-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .admindash-job-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .admindash-job-card.admindash-job-alert {
        border-color: #dc3545;
        background: #fff5f5;
    }

    .admindash-job-card.admindash-job-disabled {
        opacity: 0.6;
        background: #f8f9fa;
    }

    .admindash-sticky-banner {
        flex-wrap: wrap;
        gap: var(--mobile-space-sm);
        padding-bottom: calc(8px + var(--mobile-safe-area-bottom, 0px)) !important;
    }

    .admindash-sticky-banner-content {
        font-size: var(--mobile-font-sm);
        flex: 1;
        min-width: 0;
    }

    .admindash-sticky-banner-content .ms-2 {
        display: block;
        margin-left: 0 !important;
        margin-top: 2px;
    }
}

/* ==========================================================================
   Manager Referral — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mgrreferral-sidebar-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        padding-bottom: var(--mobile-space-sm);
    }

    .mgrreferral-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .mgrreferral-sidebar-nav .nav.flex-column {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .mgrreferral-sidebar-nav .nav-link {
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 10px;
    }

    .mgrreferral-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .mgrreferral-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .mgrreferral-card:active {
        background: #f8f9fa;
    }

    .mgrreferral-card-info {
        min-width: 0;
        flex: 1;
    }

    .mgrreferral-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mgrreferral-card-secondary {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mgrreferral-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .mgrreferral-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .mgrreferral-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Admin Referral — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminreferral-sidebar-nav {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        padding-bottom: var(--mobile-space-sm);
    }

    .adminreferral-sidebar-nav::-webkit-scrollbar {
        display: none;
    }

    .adminreferral-sidebar-nav .nav.flex-column {
        flex-direction: row !important;
        flex-wrap: nowrap;
        gap: 4px;
    }

    .adminreferral-sidebar-nav .nav-link {
        white-space: nowrap;
        font-size: 12px;
        padding: 6px 10px;
    }

    .adminreferral-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminreferral-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .adminreferral-card:active {
        background: #f8f9fa;
    }

    .adminreferral-card-info {
        min-width: 0;
        flex: 1;
    }

    .adminreferral-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .adminreferral-card-secondary {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .adminreferral-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .adminreferral-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .adminreferral-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Payroll Dashboard — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .payrolldash-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .payrolldash-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .payrolldash-card:active {
        background: #f8f9fa;
    }

    .payrolldash-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .payrolldash-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .payrolldash-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .payrolldash-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .payrolldash-card-amount {
        font-size: var(--mobile-font-sm);
        font-weight: 600;
        margin-left: auto;
    }
}

/* ==========================================================================
   Payroll Employees — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .payrollemp-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .payrollemp-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .payrollemp-card:active {
        background: #f8f9fa;
    }

    .payrollemp-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .payrollemp-card-email {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .payrollemp-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .payrollemp-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .payrollemp-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .payrollemp-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Customer Invoices — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .custinv-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .custinv-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .custinv-card:active {
        background: #f8f9fa;
    }

    .custinv-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .custinv-card-customer {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custinv-card-amounts {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--mobile-space-sm);
        font-size: var(--mobile-font-sm);
    }

    .custinv-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .custinv-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .custinv-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .custinv-summary-cards .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .custinv-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .custinv-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Products Manage — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .prodmgmt-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .prodmgmt-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .prodmgmt-card:active {
        background: #f8f9fa;
    }

    .prodmgmt-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .prodmgmt-card-sku {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .prodmgmt-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .prodmgmt-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .prodmgmt-card-price {
        font-size: var(--mobile-font-sm);
        font-weight: 600;
        margin-left: auto;
    }

    .prodmgmt-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .prodmgmt-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Suppliers — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .supplier-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .supplier-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .supplier-card:active {
        background: #f8f9fa;
    }

    .supplier-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .supplier-card-email {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .supplier-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .supplier-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .supplier-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Banking Transactions — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .banktx-toolbar-extra {
        display: none !important;
    }

    .banktx-filter-collapse .form-label {
        font-size: var(--mobile-font-sm);
        margin-bottom: 2px;
    }

    /* ── Card List ── */
    .banktx-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-sm) 0;
    }

    .banktx-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        cursor: pointer;
        transition: background var(--mobile-transition-fast);
    }

    .banktx-card:active {
        background: #f8f9fa;
    }

    .banktx-card-voided {
        opacity: 0.5;
    }

    .banktx-card-voided .banktx-card-desc {
        text-decoration: line-through;
    }

    .banktx-card-ignored {
        opacity: 0.6;
    }

    .banktx-card-info {
        min-width: 0;
        flex: 1;
    }

    .banktx-card-desc {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .banktx-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .banktx-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-lg);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .banktx-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .banktx-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .banktx-card-balance {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    /* ── Detail Offcanvas ── */
    .banktx-detail-handle {
        width: 40px;
        height: 4px;
        border-radius: 2px;
        background: #dee2e6;
        margin: 0 auto var(--mobile-space-sm);
    }

    .banktx-detail-amount {
        font-size: 28px;
        font-weight: 700;
        line-height: 1.2;
    }

    #txnDetailFields .list-group-item {
        border-left: 0;
        border-right: 0;
        font-size: var(--mobile-font-sm);
    }

    #txnDetailSecondaryActions .btn {
        font-size: var(--mobile-font-sm);
    }
}

/* ==========================================================================
   Sales Quotes Create — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .quotecreate-actions .btn-lg {
        font-size: var(--mobile-font-base);
        padding: 10px;
    }
}

/* ==========================================================================
   Sales Quotes Index — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .salesquote-summary-cards .col-md-4 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .salesquote-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .salesquote-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .salesquote-card:active {
        background: #f8f9fa;
    }

    .salesquote-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .salesquote-card-customer {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .salesquote-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .salesquote-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .salesquote-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .salesquote-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .salesquote-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .salesquote-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Supplier Payments — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .supppay-summary-cards .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .supppay-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .supppay-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .supppay-card:active {
        background: #f8f9fa;
    }

    .supppay-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .supppay-card-supplier {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .supppay-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .supppay-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .supppay-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .supppay-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .supppay-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .supppay-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Supplier Returns — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .suppret-summary-cards .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .suppret-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .suppret-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .suppret-card:active {
        background: #f8f9fa;
    }

    .suppret-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .suppret-card-supplier {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .suppret-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .suppret-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .suppret-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .suppret-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .suppret-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .suppret-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Supplier Invoices — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .suppinv-summary-cards .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .suppinv-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .suppinv-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .suppinv-card:active {
        background: #f8f9fa;
    }

    .suppinv-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .suppinv-card-supplier {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .suppinv-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .suppinv-card-amounts {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--mobile-space-xs);
    }

    .suppinv-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .suppinv-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .suppinv-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .suppinv-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .suppinv-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Supplier Credit Notes — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .suppcn-summary-cards .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .suppcn-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .suppcn-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .suppcn-card:active {
        background: #f8f9fa;
    }

    .suppcn-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .suppcn-card-supplier {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .suppcn-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .suppcn-card-amounts {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: var(--mobile-space-xs);
    }

    .suppcn-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .suppcn-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .suppcn-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .suppcn-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .suppcn-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Customer Receipts — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .custrcpt-summary-cards .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .custrcpt-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .custrcpt-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        text-decoration: none;
        transition: background var(--mobile-transition-fast);
    }

    .custrcpt-card:active {
        background: #f8f9fa;
    }

    .custrcpt-card-number {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .custrcpt-card-customer {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custrcpt-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .custrcpt-card-amounts {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: var(--mobile-space-xs);
        margin-top: var(--mobile-space-xs);
        font-size: var(--mobile-font-sm);
    }

    .custrcpt-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .custrcpt-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .custrcpt-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .custrcpt-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .custrcpt-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Access Staff — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .accessstaffdetails-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .accessstaffdetails-info-mobile span,
    .accessacct-card-sub {
        display: block;
        font-size: 11px;
        color: #6c757d;
    }

    .accessstaffdetails-actions {
        display: grid;
        gap: var(--mobile-space-sm);
    }

    .accessstaffdetails-actions .btn {
        width: 100%;
        margin-right: 0 !important;
    }

    .staff-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .staff-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .staff-card:active {
        background: #f8f9fa;
    }

    .staff-card-info {
        min-width: 0;
        flex: 1;
    }

    .staff-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .staff-card-email {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .staff-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .staff-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .staff-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .accessacct-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .accessacct-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .accessacct-card-info {
        min-width: 0;
        flex: 1;
    }

    .accessacct-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .accessacct-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .accessacct-card-meta .badge {
        font-size: 11px;
    }
}

/* ==========================================================================
   Customer Invoice View — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .invview-line-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
    }

    .invview-line-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .invview-line-info {
        min-width: 0;
        flex: 1;
    }

    .invview-line-desc {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .invview-line-sub {
        font-size: var(--mobile-font-sm);
    }

    .invview-line-amount {
        font-weight: 700;
        font-size: var(--mobile-font-lg);
        white-space: nowrap;
        flex-shrink: 0;
        margin-left: var(--mobile-space-sm);
    }

    .invview-line-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .invview-line-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .invview-line-totals {
        padding: var(--mobile-space-md);
        border-top: 2px solid #dee2e6;
        font-size: var(--mobile-font-sm);
    }
}

/* ==========================================================================
   Product Categories — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .prodform-tab-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        scrollbar-width: none;
    }

    .prodform-tab-strip::-webkit-scrollbar {
        display: none;
    }

    .prodform-tab-strip .nav-item {
        flex: 0 0 auto;
    }

    .prodtemplate-card-list,
    .prodinv-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .prodtemplate-card,
    .prodinv-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .prodtemplate-card-info,
    .prodinv-card-info {
        min-width: 0;
        flex: 1;
    }

    .prodtemplate-card-name,
    .prodinv-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .prodtemplate-card-sub,
    .prodinv-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .prodtemplate-card-meta,
    .prodinv-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .prodinv-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
    }

    .prodinv-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .prodinv-info-mobile span {
        display: block;
        font-size: 11px;
        margin-bottom: 2px;
    }
}

@media (max-width: 767px) {
    .prodcat-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-sm) 0;
    }

    .prodcat-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        cursor: pointer;
        transition: background var(--mobile-transition-fast);
    }

    .prodcat-card:active {
        background: #f8f9fa;
    }

    .prodcat-card-info {
        min-width: 0;
        flex: 1;
    }

    .prodcat-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .prodcat-card-path {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .prodcat-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .prodcat-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .prodcat-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        border: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .prodcat-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Customer Credit Notes — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .custcn-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-sm) 0;
    }

    .custcn-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .custcn-card:active {
        background: #f8f9fa;
    }

    .custcn-card-info {
        min-width: 0;
        flex: 1;
    }

    .custcn-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .custcn-card-customer {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custcn-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .custcn-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .custcn-card-date {
        font-size: var(--mobile-font-xs);
        color: #6c757d;
        margin-left: auto;
    }

    .custcn-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        border: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .custcn-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }
}

/* ==========================================================================
   Inventory Management — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .inven-tab-strip {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        border-bottom: none;
    }

    .inven-tab-strip::-webkit-scrollbar {
        display: none;
    }

    .inven-tab-strip .nav-item {
        flex: 0 0 auto;
    }

    .inven-tab-strip .nav-link {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: var(--mobile-font-sm);
    }
}

/* ==========================================================================
   Warehouse Management — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .whousedetails-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .whousedetails-info-mobile span {
        display: block;
        font-size: 11px;
        margin-bottom: 2px;
    }

    .whouse-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-sm) 0;
    }

    .whouse-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .whouse-card:active {
        background: #f8f9fa;
    }

    .whouse-card-info {
        min-width: 0;
        flex: 1;
    }

    .whouse-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .whouse-card-code {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .whouse-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .whouse-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .whouse-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        border: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .whouse-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    .whouseform-actions {
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .whouseform-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Billing Dashboard — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .supportpage-success-actions {
        flex-direction: column;
    }

    .supportpage-success-actions .btn,
    .supportpage-submit-actions .btn {
        width: 100%;
    }

    .supportkb-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .supportkb-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .supportkb-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .supportkb-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }
}

@media (max-width: 767px) {
    .billdash-tab-strip {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        gap: 0;
        border-bottom: none;
    }

    .billdash-tab-strip::-webkit-scrollbar {
        display: none;
    }

    .billdash-tab-strip .nav-item {
        flex: 0 0 auto;
    }

    .billdash-tab-strip .nav-link {
        white-space: nowrap;
        padding: 8px 12px;
        font-size: var(--mobile-font-sm);
    }
}

/* ==========================================================================
   Schedule Assistant — Mobile Adaptations
   Page: /Accounting/Customers/ScheduleAssistant
   ========================================================================== */

@media (max-width: 767px) {
    #scheduleAssistantAccordion .accordion-button {
        font-size: var(--mobile-font-sm);
        padding: 10px 12px;
    }

    #scheduleAssistantAccordion .accordion-body {
        padding: 12px;
    }

    #scheduleAssistantAccordion .card-title {
        font-size: var(--mobile-font-base);
    }
}

/* ==========================================================================
   Customer Dashboard — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .customerdash-link-col {
        flex: 0 0 50% !important;
        max-width: 50% !important;
    }

    .customerdash-link-btn {
        min-height: 88px;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        font-size: var(--mobile-font-sm);
    }

    .customerdash-link-btn i {
        margin-right: 0 !important;
        font-size: 1.1rem;
    }

    .customerdash-stats .col-md-4 {
        flex: 0 0 33.3333% !important;
        max-width: 33.3333% !important;
    }

    .customerdash-stats .card-header,
    .customerdash-stats .card-body {
        padding: var(--mobile-space-sm);
    }

    .customerdash-stats .card-header strong {
        font-size: 12px;
    }

    .customerdash-stats h5 {
        font-size: 1rem;
    }
}

/* ==========================================================================
   Customer Support Tickets (List) — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .custticket-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .custticket-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    .custticket-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .custticket-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .custticket-card:active {
        background: #f8f9fa;
    }

    .custticket-card-info {
        min-width: 0;
        flex: 1;
    }

    .custticket-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .custticket-card-category,
    .custticket-card-update {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .custticket-card-update {
        margin-top: 4px;
    }

    .custticket-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .custticket-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .custticket-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Customer Support Ticket Details — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .custticketdetail-heading-mobile {
        min-width: 0;
    }

    .custticketdetail-heading-mobile h6 {
        max-width: calc(100vw - 156px);
    }

    .custticketdetail-info-mobile {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .custticketdetail-topic-mobile {
        font-size: var(--mobile-font-sm);
        color: #495057;
        font-weight: 500;
    }

    .custticketdetail-badges-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .custticketdetail-badges-mobile .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .custticketdetail-date-mobile {
        font-size: 11px;
        color: #adb5bd;
    }
}

/* ==========================================================================
   TenantUser Support Create Ticket — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .tucreateticket-heading-mobile {
        min-width: 0;
    }

    .tucreateticket-success-actions {
        flex-direction: column;
    }
}

/* ==========================================================================
   TenantUser Support Tickets (List) — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .tuticket-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        transition: transform var(--mobile-transition-fast), box-shadow var(--mobile-transition-fast);
    }

    .tuticket-fab:active {
        transform: scale(0.92);
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
        color: #fff;
    }

    .tuticket-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .tuticket-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .tuticket-card:active {
        background: #f8f9fa;
    }

    .tuticket-card-info {
        min-width: 0;
        flex: 1;
    }

    .tuticket-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tuticket-card-secondary {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .tuticket-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .tuticket-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .tuticket-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   TenantUser Support Ticket Details — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .tuticketdetail-heading-mobile {
        min-width: 0;
    }

    .tuticketdetail-heading-mobile h6 {
        max-width: calc(100vw - 156px);
    }

    .tuticketdetail-info-mobile {
        display: flex;
        flex-direction: column;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .tuticketdetail-topic-mobile {
        font-size: var(--mobile-font-sm);
        color: #495057;
        font-weight: 500;
    }

    .tuticketdetail-badges-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
    }

    .tuticketdetail-badges-mobile .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .tuticketdetail-date-mobile {
        font-size: 11px;
        color: #adb5bd;
    }
}

/* ==========================================================================
   Tenant Dashboard — Mobile Adaptations
   Compact heading, commerce card list tightening
   ========================================================================== */

@media (max-width: 767px) {
    .tdash-commerce-card.mobile-card.compact {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
    }

    .tdash-commerce-card .mobile-card-header {
        font-size: var(--mobile-font-base);
        font-weight: 600;
    }
}

/* ==========================================================================
   Tenant Commerce Invoice Details — Compact Mobile Header
   ========================================================================== */

@media (max-width: 767px) {
    .tcinv-detail-heading h6 {
        max-width: calc(100vw - 100px);
    }
}

/* ==========================================================================
   Tenant Commerce Payment Details — Compact Mobile Header
   ========================================================================== */

@media (max-width: 767px) {
    .tcpay-detail-heading h6 {
        max-width: calc(100vw - 100px);
    }
}

/* ==========================================================================
   Tenant Commerce Receipt Details — Compact Mobile Header
   ========================================================================== */

@media (max-width: 767px) {
    .tcrcpt-detail-heading h6 {
        max-width: calc(100vw - 100px);
    }
}

/* ==========================================================================
   Payroll MyDashboard — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .card-hover:hover {
        transform: none;
        box-shadow: inherit !important;
    }
}

/* ==========================================================================
   Payroll MyPayslips — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mypayslip-card-list,
    .mypayslipline-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .mypayslip-card,
    .mypayslipline-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .mypayslip-card-info {
        min-width: 0;
        flex: 1;
    }

    .mypayslip-card-name,
    .mypayslipline-name {
        font-size: var(--mobile-font-base);
        font-weight: 600;
        line-height: var(--mobile-line-height-tight);
    }

    .mypayslip-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .mypayslip-card-amount,
    .mypayslipline-amount {
        font-weight: 700;
        font-size: var(--mobile-font-sm);
    }

    .mypayslip-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .mypayslip-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .mypayslip-detail-info {
        display: grid;
        gap: var(--mobile-space-sm);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mypayslip-detail-info span {
        display: block;
        font-size: 11px;
    }

    .mypayslip-detail-info strong {
        display: block;
        font-size: var(--mobile-font-sm);
    }

    .mypayslipline-card {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: var(--mobile-space-sm);
    }

    .mypayslipline-total {
        background: #f8f9fa;
    }
}

/* ==========================================================================
   Payroll MyLeave — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .myleave-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .myleave-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .myleave-card-info {
        min-width: 0;
        flex: 1;
    }

    .myleave-card-name {
        font-size: var(--mobile-font-base);
        font-weight: 600;
    }

    .myleave-card-sub,
    .myleave-card-notes {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .myleave-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .myleave-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }
}

/* ==========================================================================
   Payroll MyTimeEntries — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mytime-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .mytime-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .mytime-card-info {
        min-width: 0;
        flex: 1;
    }

    .mytime-card-name {
        font-size: var(--mobile-font-base);
        font-weight: 600;
    }

    .mytime-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .mytime-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .mytime-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Payroll MyDocuments — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mydocs-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .mydocs-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .mydocs-card-info {
        min-width: 0;
        flex: 1;
    }

    .mydocs-card-name {
        font-size: var(--mobile-font-base);
        font-weight: 600;
        line-height: var(--mobile-line-height-tight);
    }

    .mydocs-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .mydocs-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .mydocs-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Payroll MyTaxCertificates — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mytax-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .mytax-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .mytax-card-info {
        min-width: 0;
        flex: 1;
    }

    .mytax-card-name {
        font-size: var(--mobile-font-base);
        font-weight: 600;
    }

    .mytax-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .mytax-card-amount {
        font-size: var(--mobile-font-sm);
        font-weight: 700;
    }

    .mytax-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .mytax-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .mytax-detail-info {
        display: grid;
        gap: var(--mobile-space-sm);
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .mytax-detail-info span {
        display: block;
        font-size: 11px;
    }

    .mytax-detail-info strong {
        display: block;
        font-size: var(--mobile-font-sm);
    }
}

/* ==========================================================================
   Payroll MyProfile — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .myprofile-summary {
        display: flex;
        flex-wrap: wrap;
        gap: 4px 8px;
        font-size: var(--mobile-font-sm);
        line-height: 1.4;
    }

    .myprofile-actions {
        flex-direction: column-reverse;
        align-items: stretch !important;
        gap: var(--mobile-space-sm);
    }

    .myprofile-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Payroll TimeEntries Admin — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .payrolltime-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .payrolltime-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .payrolltime-card-info {
        min-width: 0;
        flex: 1;
    }

    .payrolltime-card-name {
        font-size: var(--mobile-font-base);
        font-weight: 600;
    }

    .payrolltime-card-sub,
    .payrolltime-card-empno {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .payrolltime-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .payrolltime-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }
}

/* ==========================================================================
   Accounting Customer Invoice Create/Edit — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .acctcustinvcreate-header {
        gap: var(--mobile-space-sm);
    }

    .acctcustinvcreate-header h6 {
        min-width: 0;
        flex: 1;
    }

    .acctcustinvcreate-back,
    .acctcustinvcreate-actions .btn {
        white-space: nowrap;
    }

    .acctcustinvcreate-actions {
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctcustinvcreate-actions > a,
    .acctcustinvcreate-actions > div,
    .acctcustinvcreate-actions > div .btn {
        width: 100%;
    }

    .acctcustinvcreate-actions > div {
        display: grid;
        gap: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Accounting Customer Receipt Create/Edit — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .acctcustreceiptcreate-header {
        gap: var(--mobile-space-sm);
    }

    .acctcustreceiptcreate-header h6 {
        min-width: 0;
        flex: 1;
    }

    .acctcustreceiptalloc-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctcustreceiptalloc-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .acctcustreceiptalloc-card-info {
        min-width: 0;
        flex: 1;
    }

    .acctcustreceiptalloc-card-name {
        font-weight: 600;

/* ==========================================================================
   Accounting General — Chart of Accounts, General Ledger, Journals
   ========================================================================== */

@media (max-width: 767px) {
    .acctcoa-header,
    .acctgl-header,
    .acctjournidx-header,
    .acctjourncreate-header,
    .acctjournview-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .acctcoa-heading-mobile,
    .acctgl-heading-mobile,
    .acctjournidx-heading-mobile,
    .acctjourncreate-heading-mobile,
    .acctjournview-heading-mobile {
        min-width: 0;
        flex: 1;
    }

    .acctcoa-heading-mobile h6,
    .acctgl-heading-mobile h6,
    .acctjournidx-heading-mobile h6,
    .acctjourncreate-heading-mobile h6,
    .acctjournview-heading-mobile h6 {
        margin-bottom: 2px;
    }

    .acctcoa-header-actions,
    .acctjournview-header-actions {
        width: 100%;
        justify-content: flex-start !important;
        flex-wrap: wrap;
    }

    .acctcoa-header-actions .btn,
    .acctgl-header-action,
    .acctjournidx-header .btn,
    .acctjournview-header-actions .btn,
    .acctjournview-actions .btn {
        min-height: 40px;
    }

    .acctcoa-header-actions .btn,
    .acctjournidx-header .btn,
    .acctjournview-header-actions .btn,
    .acctjournview-actions .btn {
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
    }

    .acctcoa-mobile-accordion .accordion-button {
        display: flex;
        align-items: center;
        gap: var(--mobile-space-xs);
    }

    .acctcoa-mobile-accordion .accordion-button .badge {
        font-size: 11px;
    }

    .acctcoa-card-list,
    .acctgl-card-list,
    .acctjournidx-card-list,
    .acctjournview-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctcoa-card,
    .acctgl-card,
    .acctjournidx-card,
    .acctjournview-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        transition: background var(--mobile-transition-fast);
    }

    .acctcoa-card:active,
    .acctgl-card:active,
    .acctjournidx-card:active,
    .acctjournview-card:active {
        background: #f8f9fa;
    }

    .acctcoa-card-info,
    .acctgl-card-info,
    .acctjournidx-card-info,
    .acctjournview-card-info {
        min-width: 0;
        flex: 1;
    }

    .acctcoa-card-name,
    .acctgl-card-name,
    .acctjournidx-card-name,
    .acctjournview-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .acctcoa-card-sub,
    .acctgl-card-sub,
    .acctjournidx-card-sub,
    .acctjournview-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .acctcoa-card-meta,
    .acctgl-card-meta,
    .acctjournidx-card-meta,
    .acctjournview-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .acctgl-card-amount,
    .acctjournview-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
    }

    .acctgl-info-mobile,
    .acctjournview-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .acctgl-info-mobile span,
    .acctjournview-info-mobile span {
        display: block;
        font-size: 11px;
        margin-bottom: 2px;
    }

    .acctgl-section-label {
        margin: var(--mobile-space-sm) 0 var(--mobile-space-xs);
        font-size: 11px;
        font-weight: 700;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .acctjournidx-fab,
    .acctcoa-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
        border: none;
    }

    .acctjournidx-fab:active,
    .acctcoa-fab:active {
        color: #fff;
        transform: scale(0.92);
    }

    #linesTable thead {
        display: none;
    }

    #linesTable,
    #linesTable tbody,
    #linesTable tfoot,
    #linesTable tr,
    #linesTable td {
        display: block;
        width: 100%;
    }

    #linesTable tbody {
        padding: var(--mobile-space-sm);
    }

    #linesTable .line-row {
        padding: var(--mobile-space-md);
        border-bottom: 1px solid #e9ecef;
    }

    #linesTable .line-row td {
        padding: 0;
        margin-bottom: var(--mobile-space-sm);
        border: 0;
    }

    #linesTable .line-row td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: 4px;
    }

    #linesTable .line-row td:last-child {
        margin-bottom: 0;
    }

    #linesTable .line-row td:last-child .btn {
        width: 100%;
    }

    #linesTable tfoot {
        padding: var(--mobile-space-md);
        border-top: 1px solid #dee2e6;
        background: #f8f9fa;
    }

    #linesTable tfoot tr {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    #linesTable tfoot td {
        padding: 0;
        border: 0;
    }

    #linesTable tfoot td:first-child {
        grid-column: 1 / -1;
        text-align: left !important;
    }

    .acctjourncreate-actions {
        flex-direction: column;
    }

    .acctjourncreate-actions > * {
        width: 100%;
    }
}

/* ==========================================================================
   Accounting General — Periods, Year-End Close, and setup stubs
   ========================================================================== */

@media (max-width: 767px) {
    .acctmanual-header,
    .acctopenbal-header,
    .acctperiods-header,
    .accttaxcfg-header,
    .accttaxreports-header,
    .acctyearend-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .acctmanual-card-list,
    .acctopenbal-card-list,
    .accttaxcfg-card-list,
    .accttaxreports-card-list,
    .acctperiods-card-list,
    .acctyearend-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctmanual-card,
    .acctopenbal-card,
    .accttaxcfg-card,
    .accttaxreports-card,
    .acctperiods-card,
    .acctyearend-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .acctmanual-card-name,
    .acctopenbal-card-name,
    .accttaxcfg-card-name,
    .accttaxreports-card-name,
    .acctperiods-card-name,
    .acctyearend-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .acctmanual-card-sub,
    .acctopenbal-card-sub,
    .accttaxcfg-card-sub,
    .accttaxreports-card-sub,
    .acctperiods-card-sub,
    .acctyearend-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .acctperiods-card-info,
    .acctyearend-card-info {
        min-width: 0;
        flex: 1;
    }

    .acctperiods-card-meta,
    .acctyearend-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .acctyearend-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
    }

    .acctmanual-header + .alert,
    .acctopenbal-header + .alert,
    .accttaxcfg-header + .alert,
    .accttaxreports-header + .alert,
    .acctyearend-header + .alert,
    .acctperiods-header + .alert {
        margin-top: 0;
    }

    .acctmanual-header + .alert + .card .card-body h5,
    .acctopenbal-header + .alert + .card .card-body h5,
    .accttaxcfg-header + .alert + .card .card-body h5,
    .accttaxreports-header + .alert + .card .card-body h5 {
        font-size: var(--mobile-font-base);
        margin-bottom: var(--mobile-space-sm);
    }

    .acctmanual-header + .alert + .card .card-body ul,
    .acctopenbal-header + .alert + .card .card-body ul,
    .accttaxcfg-header + .alert + .card .card-body ul,
    .accttaxreports-header + .alert + .card .card-body ul {
        padding-left: 1rem;
    }

    .acctperiods-header .btn,
    .acctyearend-header .btn {
        min-width: 0;
        padding-left: var(--mobile-space-sm);
        padding-right: var(--mobile-space-sm);
    }

    .acctyearend-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .acctyearend-info-mobile span {
        display: block;
        font-size: 11px;
        margin-bottom: 2px;
    }

    .acctyearend-summary-row h3 {
        font-size: 1.5rem;
    }

    .acctyearend-summary-row .card-body,
    .acctyearend-closed-summary > div {
        text-align: left;
    }

    .acctyearend-summary-row .card {
        margin-bottom: var(--mobile-space-sm);
    }

    .acctyearend-card-list + .alert,
    .acctyearend-card-list + .card,
    .acctyearend-card-list + .row {
        margin-top: var(--mobile-space-sm);
    }

    .acctyearend-header + .alert + .card .btn,
    .acctyearend-header + .card .btn,
    .acctyearend-header + .alert + .card form .btn,
    .acctyearend-header + .card form .btn {
        white-space: nowrap;
    }
}
        font-size: var(--mobile-font-base);
    }

    .acctcustreceiptalloc-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }
}

/* ==========================================================================
   Accounting Customer Receipt View — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .acctcustreceiptview-heading-mobile h6 {
        max-width: calc(100vw - 150px);
    }

    .acctcustreceiptview-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .acctcustreceiptview-info-mobile span.text-muted {
        display: block;
        font-size: 11px;
    }

    .acctcustreceiptview-info-mobile strong,
    .acctcustreceiptview-info-mobile .badge {
        display: inline-block;
        margin-top: 2px;
    }

    .acctcustreceiptview-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctcustreceiptview-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        color: inherit;
        background: #fff;
    }

    .acctcustreceiptview-card-info {
        min-width: 0;
        flex: 1;
    }

    .acctcustreceiptview-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .acctcustreceiptview-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .acctcustreceiptview-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Accounting Customer Credit Note View/Apply — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .acctcustcnview-heading-mobile h6,
    .acctcustcnapply-heading-mobile h6 {
        max-width: calc(100vw - 150px);
    }

    .acctcustcnview-info-mobile,
    .acctcustcnapply-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .acctcustcnview-info-mobile span.text-muted,
    .acctcustcnapply-info-mobile span.text-muted {
        display: block;
        font-size: 11px;
    }

    .acctcustcnview-line-card-list,
    .acctcustcnview-app-card-list,
    .acctcustcnapply-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctcustcnview-line-card,
    .acctcustcnview-app-card,
    .acctcustcnapply-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
    }

    .acctcustcnview-line-info,
    .acctcustcnapply-card-info {
        min-width: 0;
        flex: 1;
    }

    .acctcustcnview-line-name,
    .acctcustcnapply-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .acctcustcnview-line-sub,
    .acctcustcnapply-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .acctcustcnview-line-amount {
        font-weight: 700;
        font-size: var(--mobile-font-sm);
    }

    .acctcustcnview-line-meta,
    .acctcustcnapply-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Accounting Customer Schedule Dashboard — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .scheddash-tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
    }

    .scheddash-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .scheddash-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
    }

    .scheddash-tabs-wrapper .nav-link {
        white-space: nowrap;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        font-size: var(--mobile-font-sm);
        padding: var(--mobile-space-sm) var(--mobile-space-md);
    }

    .scheddash-tabs-wrapper .nav-link.active {
        border-bottom-color: var(--bs-primary);
        color: var(--bs-primary);
        background: transparent;
    }

    .scheddash-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .scheddash-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .scheddash-card-info {
        min-width: 0;
        flex: 1;
    }

    .scheddash-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .scheddash-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .scheddash-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Accounting Supplier Form Pages — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .suppinvcreate-header,
    .supppaycreate-header,
    .supppayedit-header,
    .suppretcreate-header,
    .suppretedit-header,
    .suppcncreate-header,
    .suppcnedit-header {
        gap: var(--mobile-space-sm);
    }

    .suppinvcreate-header h6,
    .supppaycreate-header h6,
    .supppayedit-header h6,
    .suppretcreate-header h6,
    .suppretedit-header h6,
    .suppcncreate-header h6,
    .suppcnedit-header h6 {
        min-width: 0;
        flex: 1;
    }

    .suppinvcreate-top-actions,
    .supppaycreate-top-actions,
    .supppayedit-top-actions,
    .suppretedit-top-actions {
        display: flex;
        gap: 0;
    }

    .suppinvcreate-top-actions .btn,
    .supppaycreate-top-actions .btn,
    .supppayedit-top-actions .btn,
    .suppretedit-top-actions .btn,
    .suppinvcreate-footer-actions .btn {
        white-space: nowrap;
    }

    .suppinvcreate-footer-actions {
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .suppinvcreate-footer-actions > a,
    .suppinvcreate-footer-actions > div,
    .suppinvcreate-footer-actions > div .btn {
        width: 100%;
    }

    .suppinvcreate-footer-actions > div {
        display: grid;
        gap: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Accounting Supplier Detail Pages — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .suppinvview-heading-mobile h6,
    .supppayview-heading-mobile h6,
    .suppretview-heading-mobile h6,
    .suppcnview-heading-mobile h6 {
        max-width: calc(100vw - 150px);
    }

    .suppinvview-info-mobile,
    .supppayview-info-mobile,
    .suppretview-info-mobile,
    .suppcnview-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .suppinvview-info-mobile span.text-muted,
    .supppayview-info-mobile span.text-muted,
    .suppretview-info-mobile span.text-muted,
    .suppcnview-info-mobile span.text-muted {
        display: block;
        font-size: 11px;
    }

    .suppinvview-card-list,
    .supppayview-card-list,
    .suppretview-card-list,
    .suppcnview-card-list,
    .suppcnview-app-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .suppinvview-card,
    .supppayview-card,
    .suppretview-card,
    .suppcnview-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
    }

    .suppinvview-card-info,
    .supppayview-card-info,
    .suppretview-card-info,
    .suppcnview-card-info {
        min-width: 0;
        flex: 1;
    }

    .suppinvview-card-name,
    .supppayview-card-name,
    .suppretview-card-name,
    .suppcnview-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .suppinvview-card-sub,
    .supppayview-card-sub,
    .suppretview-card-sub,
    .suppcnview-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .suppinvview-card-amount,
    .suppretview-card-amount,
    .suppcnview-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-sm);
    }

    .suppinvview-card-meta,
    .supppayview-card-meta,
    .suppretview-card-meta,
    .suppcnview-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Accounting Supplier Apply/Documents/Profile — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .suppcnapply-heading-mobile h6,
    .supprofile-heading-mobile h6 {
        max-width: calc(100vw - 150px);
    }

    .suppcnapply-info-mobile,
    .supprofile-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .suppcnapply-info-mobile span.text-muted,
    .supprofile-info-mobile span.text-muted {
        display: block;
        font-size: 11px;
    }

    .suppcnapply-card-list,
    .suppdocs-card-list,
    .supprofile-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .suppcnapply-card,
    .suppdocs-card,
    .supprofile-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
    }

    .suppcnapply-card-info,
    .suppdocs-card-info,
    .supprofile-card-info {
        min-width: 0;
        flex: 1;
    }

    .suppcnapply-card-name,
    .suppdocs-card-name,
    .supprofile-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .suppcnapply-card-sub,
    .suppdocs-card-sub,
    .supprofile-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .suppcnapply-card-meta,
    .suppdocs-card-meta,
    .supprofile-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Accounting General Placeholder Pages + Journals Create — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .acctjourncreate-header {
        gap: var(--mobile-space-sm);
    }

    .acctjourncreate-header h6 {
        min-width: 0;
        flex: 1;
    }

    .acctjourncreate-actions {
        flex-direction: column;
    }

    .acctjourncreate-actions .btn {
        width: 100%;
    }

    .acctmanual-card-list,
    .acctopenbal-card-list,
    .accttaxcfg-card-list,
    .accttaxreports-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctmanual-card,
    .acctopenbal-card,
    .accttaxcfg-card,
    .accttaxreports-card {
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .acctmanual-card-name,
    .acctopenbal-card-name,
    .accttaxcfg-card-name,
    .accttaxreports-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .acctmanual-card-sub,
    .acctopenbal-card-sub,
    .accttaxcfg-card-sub,
    .accttaxreports-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        margin-top: 2px;
    }
}

/* ==========================================================================
   Accounting Journals / Periods / Year-End — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .acctjournidx-header,
    .acctperiods-header,
    .acctyearend-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .acctjournidx-header h6,
    .acctperiods-header h6,
    .acctyearend-header h6 {
        min-width: 0;
        flex: 1;
    }

    .acctjournidx-card-list,
    .acctjournview-card-list,
    .acctperiods-card-list,
    .acctyearend-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctjournidx-card,
    .acctjournview-card,
    .acctperiods-card,
    .acctyearend-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
    }

    .acctjournidx-card-info,
    .acctjournview-card-info,
    .acctperiods-card-info,
    .acctyearend-card-info {
        min-width: 0;
        flex: 1;
    }

    .acctjournidx-card-name,
    .acctjournview-card-name,
    .acctperiods-card-name,
    .acctyearend-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .acctjournidx-card-sub,
    .acctjournview-card-sub,
    .acctperiods-card-sub,
    .acctyearend-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .acctjournidx-card-meta,
    .acctjournview-card-meta,
    .acctperiods-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .acctjournview-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .acctjournview-info-mobile span.text-muted {
        display: block;
        font-size: 11px;
    }

    .acctjournview-actions {
        flex-direction: column;
    }

    .acctjournview-actions .btn {
        width: 100%;
    }

    .acctyearend-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-sm);
    }
}

/* ==========================================================================
   Accounting Chart of Accounts / General Ledger — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .acctcoa-card-list,
    .acctgl-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .acctcoa-card,
    .acctgl-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
    }

    .acctcoa-card-info,
    .acctgl-card-info {
        min-width: 0;
        flex: 1;
    }

    .acctcoa-card-name,
    .acctgl-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .acctcoa-card-sub,
    .acctgl-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .acctcoa-card-meta,
    .acctgl-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .acctgl-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .acctgl-info-mobile span.text-muted {
        display: block;
        font-size: 11px;
    }

    .acctgl-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-sm);
    }

    .acctgl-section-label {
        font-size: var(--mobile-font-sm);
        font-weight: 700;
        color: #6c757d;
        margin-top: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Banking Accounts / Imports / Overview / Rules / Transfers — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .bankacct-card-list,
    .bankimports-card-list,
    .bankoverview-card-list,
    .bankrules-card-list,
    .banktransfers-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .bankacct-card,
    .bankimports-card,
    .bankoverview-card,
    .bankrules-card,
    .banktransfers-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
    }

    .bankacct-card-info,
    .bankimports-card-info,
    .bankoverview-card-info,
    .bankrules-card-info,
    .banktransfers-card-info {
        min-width: 0;
        flex: 1;
    }

    .bankacct-card-name,
    .bankimports-card-name,
    .bankoverview-card-name,
    .bankrules-card-name,
    .banktransfers-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .bankacct-card-sub,
    .bankimports-card-sub,
    .bankoverview-card-sub,
    .bankrules-card-sub,
    .banktransfers-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .bankacct-card-meta,
    .bankimports-card-meta,
    .bankoverview-card-meta,
    .bankrules-card-meta,
    .banktransfers-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }
}

/* ==========================================================================
   Banking Reconciliation — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .bankrecon-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .bankrecon-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
    }

    .bankrecon-card-info {
        min-width: 0;
        flex: 1;
    }

    .bankrecon-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
    }

    .bankrecon-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .bankrecon-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .bankrecon-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .bankrecon-info-mobile span.text-muted {
        display: block;
        font-size: 11px;
    }

    .bankrecon-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
    }

    .bankrecon-tabs::-webkit-scrollbar {
        display: none;
    }

    .bankrecon-tabs .nav-item {
        flex: 0 0 auto;
    }
}

/* ==========================================================================
   Reports — Shared Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .report-page-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .report-heading-mobile {
        min-width: 0;
        flex: 1;
    }

    .report-mobile-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .report-mobile-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .report-mobile-card-info {
        min-width: 0;
        flex: 1;
    }

    .report-mobile-card-title {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .report-mobile-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .report-mobile-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .report-mobile-card-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
    }

    .report-summary-card .card-body {
        padding: var(--mobile-space-md);
    }

    .report-info-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .report-info-strip span {
        display: block;
        font-size: 11px;
        margin-bottom: 2px;
    }

    .report-mobile-section-label {
        margin: var(--mobile-space-sm) 0 var(--mobile-space-xs);
        font-size: 11px;
        font-weight: 700;
        color: #6c757d;
        text-transform: uppercase;
        letter-spacing: 0.04em;
    }

    .report-mobile-total-card {
        background: #f8f9fa;
    }
}

/* ==========================================================================
   Sales Remaining — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .salesbanktx-header,
    .salesbatchemail-header,
    .invaudit-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .salesbanktx-heading-mobile,
    .salesbatchemail-heading-mobile,
    .invaudit-heading-mobile {
        min-width: 0;
        flex: 1;
    }

    .salesbanktx-summary > [class*="col-"],
    .salesbatchemail-summary > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .salesbanktx-header .btn-group {
        width: auto;
    }

    .salesbanktx-header .btn,
    .salesbatchemail-footer .btn,
    .invaudit-header .btn {
        min-height: 40px;
    }

    .salesbatchemail-table thead {
        display: none;
    }

    .salesbatchemail-table,
    .salesbatchemail-table tbody,
    .salesbatchemail-table tr,
    .salesbatchemail-table td {
        display: block;
        width: 100%;
    }

    .salesbatchemail-table tbody tr {
        padding: var(--mobile-space-md);
        border-bottom: 1px solid #e9ecef;
    }

    .salesbatchemail-table tbody td {
        padding: 0;
        margin-bottom: var(--mobile-space-sm);
        border: 0;
    }

    .salesbatchemail-table tbody td::before {
        content: attr(data-label);
        display: block;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
        color: #6c757d;
        margin-bottom: 4px;
    }

    .salesbatchemail-table tbody td:last-child {
        margin-bottom: 0;
    }

    .salesbatchemail-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: var(--mobile-space-sm);
    }

    .invaudit-info-mobile {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .invaudit-info-mobile span {
        display: block;
        font-size: 11px;
        margin-bottom: 2px;
    }
}

/* ==========================================================================
   Payroll Operational Pages — Shared Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .payrollop-mobile-header-badges {
        width: 100%;
        justify-content: flex-start;
    }

    .payrollreport-selected-card {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), 0.04);
    }

    .payrollreport-amount {
        font-weight: 600;
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
    }

    .payrollop-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .payrollop-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        color: inherit;
        box-shadow: var(--mobile-shadow-sm);
    }

    .payrollop-card-title {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight, 1.3);
    }

    .payrollop-card-subtitle {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .payrollop-card-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .payrollop-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .payrollop-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        margin-top: var(--mobile-space-sm);
    }

    .payrollop-card-grid-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: var(--mobile-radius-sm);
        background: #f8f9fa;
        min-width: 0;
    }

    .payrollop-card-grid-item-full {
        grid-column: 1 / -1;
    }

    .payrollop-card-grid-item span,
    .payrollop-info-strip span {
        font-size: 11px;
        color: #6c757d;
    }

    .payrollop-card-grid-item strong,
    .payrollop-info-strip strong {
        font-size: var(--mobile-font-sm);
        line-height: 1.35;
    }

    .payrollop-info-strip {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .payrollop-info-strip > div {
        padding: 10px 12px;
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-sm);
        background: #fff;
    }

    .payrollop-quicklinks {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        width: 100%;
    }

    .payrollop-quicklinks > * {
        width: 100%;
        margin: 0 !important;
    }

    .payrollop-pager {
        flex-direction: column;
        align-items: flex-start !important;
        gap: var(--mobile-space-sm);
    }

    .payrollop-pager nav,
    .payrollop-pager .pagination {
        width: 100%;
        justify-content: flex-start;
        flex-wrap: wrap;
    }

    .payrollop-fab {
        position: fixed;
        right: var(--mobile-space-md);
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        width: 56px;
        height: 56px;
        border: 0;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        text-decoration: none;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
    }

    .payrollop-fab:active {
        transform: scale(0.94);
        color: #fff;
    }

    .payrollop-mobile-header h6 {
        min-width: 0;
        flex: 1;
    }

    .payrollop-summary-grid > [class*="col-"] {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .payrollop-tabs-wrapper {
        overflow-x: auto;
        overflow-y: hidden;
        scrollbar-width: none;
        margin: 0 calc(-1 * var(--mobile-space-sm));
        padding: 0 var(--mobile-space-sm);
    }

    .payrollop-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .payrollop-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
    }

    .payrollop-tabs-wrapper .nav-item {
        flex: 0 0 auto;
    }

    .payrollop-tabs-wrapper .nav-link {
        white-space: nowrap;
    }

    .payrollsettings-mobile-nav .nav-link {
        white-space: nowrap;
    }

    .payrollsettings-search-toolbar {
        width: 100%;
        align-items: stretch !important;
    }

    .payrollsettings-search-input {
        width: 100% !important;
        max-width: none !important;
    }

    .payrollsettings-search-toolbar .btn {
        align-self: stretch;
    }

    .payrollop-line-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .payrollop-line-card {
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        gap: var(--mobile-space-sm);
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
    }

    .payrollop-line-title {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: 1.3;
    }

    .payrollop-line-subtitle {
        font-size: 12px;
        color: #6c757d;
        margin-top: 2px;
    }

    .payrollop-line-amount {
        font-weight: 700;
        font-size: var(--mobile-font-base);
        white-space: nowrap;
    }

    .payrollop-line-card-total {
        background: #f8f9fa;
    }
}

/* ==========================================================================
   Manager Access Control Assignments — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mgrassign-search-list {
        max-height: 280px !important;
    }

    .mgrassign-selected-summary .badge {
        margin-top: 4px;
    }

    .mgrassign-assignment-card {
        min-height: var(--mobile-touch-target-comfortable);
    }

    .mgrassign-effective-list {
        max-height: none !important;
    }
}

/* ==========================================================================
   Manager Access Control Groups — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mgrgroups-fab {
        position: fixed;
        bottom: calc(72px + var(--mobile-safe-area-bottom));
        right: var(--mobile-space-md);
        width: 56px;
        height: 56px;
        border-radius: 50%;
        background: var(--bs-primary);
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 24px;
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
        z-index: 1030;
        text-decoration: none;
    }

    .mgrgroups-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .mgrgroups-card {
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        padding: var(--mobile-space-md);
    }

    .mgrgroups-card-muted {
        opacity: 0.72;
        background: #f8f9fa;
    }

    .mgrgroups-card-info {
        min-width: 0;
        flex: 1;
    }

    .mgrgroups-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .mgrgroups-card-description {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
        margin-top: 2px;
    }

    .mgrgroups-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .mgrgroups-card-date {
        margin-left: auto;
        font-size: 11px;
        color: #adb5bd;
    }
}

/* ==========================================================================
   Subscription Cart — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .cart-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .cart-card {
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        padding: var(--mobile-space-md);
    }

    .cart-card-info {
        min-width: 0;
        flex: 1;
    }

    .cart-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .cart-card-secondary {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .cart-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .cart-card-pricing {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
        margin-top: var(--mobile-space-sm);
    }

    .cart-promo-form .form-control {
        max-width: 100% !important;
    }
}

/* ==========================================================================
   Manager Payment Methods / Create Ticket — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .mgrpaymethod-card-footer > * {
        flex: 1 1 auto;
    }

    .mgrpaymethod-card-footer .btn {
        width: 100%;
    }

    .mgrpaymethod-quick-links {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .mgrpaymethod-quick-links a {
        margin-bottom: 0 !important;
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        text-decoration: none;
        color: inherit;
    }

    .mgrcreateticket-actions .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Admin Compliance Batch 3 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminpaia-card-list,
    .adminretention-card-list,
    .adminsecurity-card-list,
    .adminsubproc-card-list,
    .adminvendor-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminpaia-card,
    .adminretention-card,
    .adminsecurity-card,
    .adminsubproc-card,
    .adminvendor-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .adminpaia-card-info,
    .adminretention-card-info,
    .adminsecurity-card-info,
    .adminsubproc-card-info,
    .adminvendor-card-info {
        min-width: 0;
        flex: 1;
    }

    .adminpaia-card-name,
    .adminretention-card-name,
    .adminsecurity-card-name,
    .adminsubproc-card-name,
    .adminvendor-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .adminpaia-card-email,
    .adminretention-card-sub,
    .adminsecurity-card-sub,
    .adminsubproc-card-sub,
    .adminvendor-card-sub {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .adminpaia-card-meta,
    .adminretention-card-meta,
    .adminsecurity-card-meta,
    .adminsubproc-card-meta,
    .adminvendor-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .adminpaia-card-meta .badge,
    .adminretention-card-meta .badge,
    .adminsecurity-card-meta .badge,
    .adminsubproc-card-meta .badge,
    .adminvendor-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .adminpaia-card-date,
    .adminsubproc-card-date {
        font-size: 11px;
        color: #adb5bd;
        margin-left: auto;
    }

    .adminpaia-card-form,
    .adminretention-card-form {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminpaia-card-form .btn,
    .adminretention-card-form .btn,
    .adminsecurity-form-actions .btn,
    .adminsubproc-card-actions .btn,
    .adminvendor-form-actions .btn {
        width: 100%;
    }

    .adminsecurity-form-actions,
    .adminsubproc-form-actions,
    .adminvendor-form-actions {
        display: grid;
        gap: var(--mobile-space-sm);
    }

    .adminsecurity-policy-form .row + .adminsecurity-form-actions {
        margin-top: var(--mobile-space-md) !important;
    }

    .adminsubproc-card-actions {
        display: grid;
        gap: var(--mobile-space-sm);
    }

    .adminvendor-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .adminvendor-card-grid > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: var(--mobile-radius-sm);
        background: #f8f9fa;
        min-width: 0;
    }

    .adminvendor-card-grid span {
        font-size: 11px;
        color: #6c757d;
    }

    .adminvendor-card-grid strong {
        font-size: var(--mobile-font-sm);
        line-height: 1.35;
    }
}

/* ==========================================================================
   Admin Features Batch 4 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminfeature-form-header,
    .adminfeature-manage-header,
    .adminfeature-access-header,
    .adminfeature-section-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .adminfeature-form-header > div,
    .adminfeature-manage-header > div,
    .adminfeature-access-header > div {
        min-width: 0;
        flex: 1;
    }

    .adminfeature-form-actions .btn,
    .adminfeature-form-actions a {
        width: 100%;
    }

    .adminfeature-stats-grid > .col-md-3 {
        flex: 0 0 50%;
        max-width: 50%;
    }

    .adminfeature-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .adminfeature-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .adminfeature-tabs-wrapper::before,
    .adminfeature-tabs-wrapper::after {
        content: '';
        position: sticky;
        top: 0;
        bottom: 0;
        width: 24px;
        min-height: 100%;
        pointer-events: none;
        z-index: 2;
        flex-shrink: 0;
    }

    .adminfeature-tabs-wrapper::before {
        left: 0;
        background: linear-gradient(to right, #fff 30%, transparent);
    }

    .adminfeature-tabs-wrapper::after {
        right: 0;
        background: linear-gradient(to left, #fff 30%, transparent);
    }

    .adminfeature-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
        gap: 0;
        margin-bottom: var(--mobile-space-md) !important;
    }

    .adminfeature-tabs-wrapper .nav-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .adminfeature-tabs-wrapper .nav-link {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .adminfeature-tabs-wrapper .nav-link.active {
        border-bottom-color: var(--bs-primary);
        color: var(--bs-primary);
        background: transparent;
    }

    .adminfeature-access-info-mobile {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .adminfeature-item-card-list,
    .adminfeature-access-card-list,
    .adminfeature-entitlement-card-list,
    .adminfeature-purchase-card-list,
    .adminfeature-revenue-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminfeature-item-card,
    .adminfeature-access-card,
    .adminfeature-entitlement-card,
    .adminfeature-purchase-card,
    .adminfeature-revenue-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .adminfeature-item-card-inactive,
    .adminfeature-item-card-deleted {
        opacity: 0.8;
    }

    .adminfeature-revenue-card-total {
        border-color: #cfe2ff;
        background: #f8fbff;
    }

    .adminfeature-item-card-info,
    .adminfeature-access-card-info,
    .adminfeature-entitlement-card-info,
    .adminfeature-purchase-card-info {
        min-width: 0;
        flex: 1;
    }

    .adminfeature-item-card-name,
    .adminfeature-access-card-name,
    .adminfeature-entitlement-card-name,
    .adminfeature-purchase-card-name,
    .adminfeature-revenue-card-name {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .adminfeature-item-card-sub,
    .adminfeature-access-card-sub,
    .adminfeature-purchase-card-sub,
    .adminfeature-entitlement-card-desc {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .adminfeature-item-card-meta,
    .adminfeature-access-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .adminfeature-item-card-meta .badge,
    .adminfeature-access-card-meta .badge,
    .adminfeature-access-info-mobile .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .adminfeature-item-card-price {
        display: flex;
        flex-direction: column;
        gap: 2px;
        margin-top: var(--mobile-space-sm);
    }

    .adminfeature-item-card-price strong {
        font-size: var(--mobile-font-base);
    }

    .adminfeature-item-card-price .text-muted {
        font-size: 11px;
    }

    .adminfeature-item-card-actions {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .adminfeature-item-card-actions form {
        grid-column: span 1;
    }

    .adminfeature-item-card-actions form:last-child,
    .adminfeature-item-card-actions form:nth-last-child(2) {
        grid-column: span 3;
    }

    .adminfeature-item-card-actions .btn {
        width: 100%;
        min-height: 40px;
    }

    .adminfeature-entitlement-card-key {
        margin-top: 2px;
        font-size: 12px;
    }

    .adminfeature-purchase-card-grid,
    .adminfeature-revenue-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .adminfeature-purchase-card-grid > div,
    .adminfeature-revenue-card-grid > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: var(--mobile-radius-sm);
        background: #f8f9fa;
        min-width: 0;
    }

    .adminfeature-revenue-card-grid-full {
        grid-column: 1 / -1;
    }

    .adminfeature-purchase-card-grid span,
    .adminfeature-revenue-card-grid span {
        font-size: 11px;
        color: #6c757d;
    }

    .adminfeature-purchase-card-grid strong,
    .adminfeature-revenue-card-grid strong {
        font-size: var(--mobile-font-sm);
        line-height: 1.35;
    }
}

/* ==========================================================================
   Admin Features/Layout/Messages/Monitoring Batch 5 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminfeature-entitlements-header,
    .adminfeature-pending-header,
    .adminlayout-header,
    .adminmessages-header,
    .adminemailmonitor-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .adminfeature-entitlements-header > div,
    .adminfeature-pending-header > div,
    .adminlayout-header > div,
    .adminmessages-header > div,
    .adminemailmonitor-header > div {
        min-width: 0;
        flex: 1;
    }

    .adminfeature-entitlements-feature-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 4px;
        margin-top: var(--mobile-space-sm);
    }

    .adminfeature-entitlements-feature-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .adminfeature-entitlements-actions,
    .adminfeature-pending-card-actions,
    .adminfeature-pending-proof-actions,
    .adminlayout-settings-actions,
    .adminmessages-card-actions,
    .adminmessages-create-actions,
    .adminemailmonitor-card-actions,
    .adminemailmonitor-filter-actions {
        display: grid;
        gap: var(--mobile-space-sm);
    }

    .adminfeature-entitlements-actions .btn,
    .adminfeature-entitlements-actions a,
    .adminfeature-pending-card-actions .btn,
    .adminfeature-pending-proof-actions .btn,
    .adminlayout-settings-actions .btn,
    .adminmessages-create-actions .btn,
    .adminmessages-card-actions .btn,
    .adminemailmonitor-card-actions .btn,
    .adminemailmonitor-filter-actions .btn,
    .adminemailmonitor-filter-actions a {
        width: 100%;
    }

    .adminfeature-entitlement-list-mobile,
    .adminfeature-pending-card-list,
    .adminlayout-action-card-list,
    .adminmessages-card-list,
    .adminmessages-notification-card-list,
    .adminemailmonitor-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminfeature-entitlement-mobile-card,
    .adminfeature-pending-card,
    .adminlayout-action-card,
    .adminmessages-card,
    .adminmessages-notification-card,
    .adminemailmonitor-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .adminfeature-entitlement-mobile-card-editing {
        border-color: var(--bs-primary);
        background: rgba(var(--bs-primary-rgb), 0.04);
    }

    .adminfeature-entitlement-mobile-info {
        min-width: 0;
        flex: 1;
    }

    .adminfeature-entitlement-mobile-key,
    .adminfeature-pending-card-title,
    .adminmessages-card-title,
    .adminemailmonitor-card-title {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .adminfeature-entitlement-mobile-name,
    .adminfeature-pending-card-sub,
    .adminemailmonitor-card-subject {
        font-size: var(--mobile-font-sm);
        color: #495057;
    }

    .adminfeature-entitlement-mobile-desc,
    .adminmessages-card-schedule,
    .adminlayout-action-card-extra {
        font-size: var(--mobile-font-sm);
        color: #6c757d;
    }

    .adminfeature-entitlement-mobile-meta,
    .adminmessages-card-meta,
    .adminlayout-action-card-meta {
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px;
    }

    .adminfeature-entitlement-mobile-meta .badge,
    .adminmessages-card-meta .badge,
    .adminlayout-action-card-meta .badge {
        font-size: 11px;
        padding: 2px 6px;
    }

    .adminfeature-entitlement-mobile-actions {
        display: grid;
        gap: var(--mobile-space-sm);
    }

    .adminfeature-entitlement-mobile-actions .btn {
        width: 100%;
    }

    .adminfeature-pending-card-header,
    .adminlayout-filter-form,
    .adminmessages-create-form,
    .adminemailmonitor-filter-form {
        gap: var(--mobile-space-sm);
    }

    .adminfeature-pending-card-grid,
    .adminemailmonitor-card-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .adminfeature-pending-card-grid > div,
    .adminemailmonitor-card-grid > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: var(--mobile-radius-sm);
        background: #f8f9fa;
        min-width: 0;
    }

    .adminfeature-pending-card-grid span,
    .adminemailmonitor-card-grid span {
        font-size: 11px;
        color: #6c757d;
    }

    .adminfeature-pending-card-grid strong,
    .adminemailmonitor-card-grid strong {
        font-size: var(--mobile-font-sm);
        line-height: 1.35;
    }

    .adminemailmonitor-card-grid-full {
        grid-column: 1 / -1;
    }

    .adminlayout-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .adminlayout-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .adminlayout-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
        gap: 0;
        margin-bottom: var(--mobile-space-md) !important;
    }

    .adminlayout-tabs-wrapper .nav-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .adminlayout-tabs-wrapper .nav-link {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        font-size: var(--mobile-font-sm);
        white-space: nowrap;
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .adminlayout-tabs-wrapper .nav-link.active {
        border-bottom-color: var(--bs-primary);
        color: var(--bs-primary);
        background: transparent;
    }

    .adminlayout-bulk-bar form {
        gap: var(--mobile-space-sm);
    }

    .adminlayout-action-card-toggles {
        display: grid;
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .adminlayout-action-card-toggles .form-check {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 6px;
        margin: 0;
        padding: 10px 8px;
        border-radius: var(--mobile-radius-sm);
        background: #f8f9fa;
    }

    .adminmessages-create-form .note-editor .note-toolbar {
        overflow-x: auto;
        white-space: nowrap;
    }
}

/* ==========================================================================
   Admin Referral/Subscriptions Batch 6 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminreferral-header,
    .adminsubscriptions-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
    }

    .adminreferral-header > div,
    .adminsubscriptions-header > div {
        min-width: 0;
        flex: 1;
    }

    .adminreferral-form-actions,
    .adminsubscriptions-form-actions,
    .adminsubscriptions-template-actions {
        display: grid;
        gap: var(--mobile-space-sm);
    }

    .adminreferral-form-actions .btn,
    .adminsubscriptions-form-actions .btn,
    .adminsubscriptions-template-actions .btn,
    .adminreferral-preview-toggle {
        width: 100%;
    }

    .adminreferral-promo-form .bi-question-circle-fill,
    .adminreferral-promo-form .bi-question-circle,
    .adminsubscriptions-plan-page .bi-question-circle-fill,
    .adminsubscriptions-plan-page .bi-question-circle {
        font-size: 14px;
        padding: 4px;
    }

    .adminsubscriptions-template-toolbar .row {
        gap: var(--mobile-space-sm);
    }

    .adminsubscriptions-features-table-wrap {
        margin-left: calc(-1 * var(--mobile-space-sm));
        margin-right: calc(-1 * var(--mobile-space-sm));
        padding-left: var(--mobile-space-sm);
        padding-right: var(--mobile-space-sm);
        -webkit-overflow-scrolling: touch;
    }

    .adminsubscriptions-features-table-wrap table {
        min-width: 560px;
    }

    .adminsubscriptions-features-footer {
        flex-direction: column;
        align-items: stretch !important;
        gap: var(--mobile-space-sm);
    }

    .adminsubscriptions-features-footer .btn {
        width: 100%;
    }
}

/* ==========================================================================
   Admin Subscriptions Batch 7 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminsubscriptions-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-snap-type: x proximity;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .adminsubscriptions-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .adminsubscriptions-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
        margin-bottom: var(--mobile-space-md) !important;
    }

    .adminsubscriptions-tabs-wrapper .nav-item {
        flex-shrink: 0;
        scroll-snap-align: center;
    }

    .adminsubscriptions-tabs-wrapper .nav-link {
        padding: var(--mobile-space-sm) var(--mobile-space-md);
        border: none;
        border-bottom: 2px solid transparent;
        border-radius: 0;
        font-size: var(--mobile-font-sm);
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        gap: 4px;
    }

    .adminsubscriptions-tabs-wrapper .nav-link.active {
        background: transparent;
        color: var(--bs-primary);
        border-bottom-color: var(--bs-primary);
    }

    .adminsubscriptions-section-header,
    .adminsubscriptions-invoice-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
        flex-direction: column;
    }

    .adminsubscriptions-mobile-actions,
    .adminsubscriptions-manage-entitlements-actions,
    .adminsubscriptions-invoice-actions,
    .adminsubscriptions-invoice-downloads,
    .adminsubscriptions-filter-form,
    .adminsubscriptions-usage-filters {
        display: grid;
        gap: var(--mobile-space-sm);
        width: 100%;
    }

    .adminsubscriptions-mobile-actions .btn,
    .adminsubscriptions-manage-entitlements-actions .btn,
    .adminsubscriptions-invoice-actions .btn,
    .adminsubscriptions-invoice-downloads .btn,
    .adminsubscriptions-filter-form .btn,
    .adminsubscriptions-filter-form a,
    .adminsubscriptions-section-header .btn,
    .adminsubscriptions-payment-link {
        width: 100%;
    }

    .adminsubscriptions-section-header > div:last-child {
        width: 100%;
    }

    .adminsubscriptions-grandfathered-card-list,
    .adminsubscriptions-plan-card-list,
    .adminsubscriptions-entitlement-card-list,
    .adminsubscriptions-manager-card-list,
    .adminsubscriptions-payment-card-list,
    .adminsubscriptions-purchase-card-list,
    .adminsubscriptions-line-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminsubscriptions-grandfathered-card,
    .adminsubscriptions-plan-card,
    .adminsubscriptions-entitlement-card,
    .adminsubscriptions-manager-card,
    .adminsubscriptions-payment-card,
    .adminsubscriptions-purchase-card,
    .adminsubscriptions-line-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .adminsubscriptions-plan-card-muted {
        background: #f8f9fa;
    }

    .adminsubscriptions-mobile-card-title {
        font-weight: 600;
        font-size: var(--mobile-font-base);
        line-height: var(--mobile-line-height-tight);
    }

    .adminsubscriptions-grandfathered-grid {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: var(--mobile-space-sm);
    }

    .adminsubscriptions-grandfathered-grid > div {
        display: flex;
        flex-direction: column;
        gap: 2px;
        padding: 10px 12px;
        border-radius: var(--mobile-radius-sm);
        background: #f8f9fa;
    }

    .adminsubscriptions-grandfathered-grid span {
        font-size: 11px;
        color: #6c757d;
    }

    .adminsubscriptions-grandfathered-grid strong {
        font-size: var(--mobile-font-sm);
        line-height: 1.35;
    }

    .adminsubscriptions-usage-search {
        width: 100% !important;
    }

    .adminsubscriptions-usage-filters {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .adminsubscriptions-usage-filters .btn {
        width: 100%;
        margin-right: 0 !important;
    }

    .adminsubscriptions-purchase-form .col-4,
    .adminsubscriptions-purchase-form .col-6 {
        width: 100%;
    }
}

/* ==========================================================================
   Admin Subscriptions Batch 8 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminsubscriptions-global-card-list,
    .adminsubscriptions-manager-override-card-list,
    .adminsubscriptions-migrate-card-list,
    .adminsubscriptions-payment-approval-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminsubscriptions-global-card,
    .adminsubscriptions-manager-override-card,
    .adminsubscriptions-migrate-card,
    .adminsubscriptions-payment-approval-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .adminsubscriptions-manager-override-card-active {
        border-color: #f0ad4e;
        background: rgba(255, 193, 7, 0.08);
    }

    .adminsubscriptions-migrate-submit {
        width: 100%;
    }
}

/* ==========================================================================
   Admin Subscriptions Batch 9 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminsubscriptions-manageaccess-card-list,
    .adminsubscriptions-pricingrules-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminsubscriptions-manageaccess-card,
    .adminsubscriptions-pricingrules-card,
    .adminsubscriptions-document-meta-card,
    .adminsubscriptions-simulation-result-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .adminsubscriptions-viewdocument-page .ratio {
        min-height: 420px !important;
    }

    .adminsubscriptions-viewdocument-page img {
        max-height: 420px !important;
    }
}

/* ==========================================================================
   Admin Support/System Settings Batch 10 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminsupport-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .adminsupport-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .adminsupport-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
    }

    .adminsupport-tabs-wrapper .nav-item {
        flex-shrink: 0;
    }

    .adminsystemsettings-header,
    .adminsystemsettings-section-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
        flex-direction: column;
    }

    .adminsystemsettings-mobile-actions,
    .adminsystemsettings-filter-form,
    .adminsystemsettings-log-actions {
        display: grid;
        gap: var(--mobile-space-sm);
        width: 100%;
    }

    .adminsystemsettings-mobile-actions .btn,
    .adminsystemsettings-filter-form .btn,
    .adminsystemsettings-filter-form a,
    .adminsystemsettings-log-actions .btn,
    .adminsystemsettings-action-bar > .btn,
    .adminsystemsettings-action-bar > div > .btn {
        width: 100%;
        margin-right: 0 !important;
    }

    .adminsystemsettings-action-bar {
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminsupport-webhook-card-list,
    .adminsystemsettings-log-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .adminsupport-webhook-card,
    .adminsystemsettings-log-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .adminsupport-webhook-card.border-danger {
        border-color: #dc3545 !important;
    }

    .adminsupport-webhook-card.border-warning {
        border-color: #ffc107 !important;
    }
}

/* ==========================================================================
   Admin System Settings Batch 11 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .adminsystemsettings-search-toolbar {
        display: grid !important;
        gap: var(--mobile-space-sm);
        width: 100%;
    }

    .adminsystemsettings-search-inline {
        width: 100% !important;
    }

    .adminsystemsettings-sticky-nav {
        position: static !important;
        top: auto !important;
    }
}

/* ==========================================================================
   Manager Batch 12 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .managerpage-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
        flex-direction: column;
    }

    .manager-mobile-actions,
    .manager-mobile-filter-form {
        display: grid;
        gap: var(--mobile-space-sm);
        width: 100%;
    }

    .manager-mobile-actions .btn,
    .manager-mobile-filter-form .btn,
    .manager-mobile-filter-form a {
        width: 100%;
        margin-right: 0 !important;
    }

    .manager-mobile-actions-inline {
        display: flex !important;
        flex-direction: column;
        align-items: stretch !important;
    }

    .manager-tabs-wrapper {
        position: relative;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        margin-left: calc(-1 * var(--mobile-space-md));
        margin-right: calc(-1 * var(--mobile-space-md));
        padding-left: var(--mobile-space-md);
        padding-right: var(--mobile-space-md);
        scrollbar-width: none;
        -ms-overflow-style: none;
    }

    .manager-tabs-wrapper::-webkit-scrollbar {
        display: none;
    }

    .manager-tabs-wrapper .nav-tabs {
        flex-wrap: nowrap;
        white-space: nowrap;
        border-bottom: none;
    }

    .manager-tabs-wrapper .nav-item {
        flex-shrink: 0;
    }

    .manager-email-card-list,
    .manager-subscription-line-card-list,
    .manager-order-item-card-list,
    .manager-transaction-card-list,
    .manager-api-key-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .manager-email-card,
    .manager-subscription-line-card,
    .manager-order-item-card,
    .manager-transaction-card,
    .manager-api-key-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }

    .manager-api-key-card-muted {
        background: #f8f9fa;
    }

    .manager-groups-toolbar,
    .manager-group-footer {
        gap: var(--mobile-space-sm);
    }

    .manager-group-footer {
        flex-direction: column;
        align-items: stretch !important;
    }
}

/* ==========================================================================
   Manager Batch 13 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .manager-support-category-header-row,
    .manager-support-category-actions,
    .manager-support-parent-card {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
        flex-direction: column;
    }

    .manager-support-button-group {
        display: grid;
        gap: var(--mobile-space-sm);
        width: 100%;
    }

    .manager-support-button-group .btn {
        width: 100%;
        margin-right: 0 !important;
    }

    .manager-support-subcategory-card-list {
        display: flex;
        flex-direction: column;
        gap: var(--mobile-space-sm);
    }

    .manager-support-subcategory-card {
        display: block;
        padding: var(--mobile-space-md);
        border: 1px solid #e9ecef;
        border-radius: var(--mobile-radius-md);
        background: #fff;
        box-shadow: var(--mobile-shadow-sm);
    }
}

/* ==========================================================================
   Tenant Batch 14 — Mobile Adaptations
   ========================================================================== */

@media (max-width: 767px) {
    .tenantpage-header {
        gap: var(--mobile-space-sm);
        align-items: flex-start !important;
        flex-direction: column;
    }

    .tenant-mobile-actions {
        display: grid;
        gap: var(--mobile-space-sm);
        width: 100%;
    }

    .tenant-mobile-actions .btn {
        width: 100%;
        margin-right: 0 !important;
    }
}