/* mobile-quickbooks-fixes.css */
/* Phase 2: Safe Implementation - QuickBooks Mobile Vibe */
/* SCOPED: All rules target body.admin-body so they do NOT affect the frontend */

@media (max-width: 768px) {

    /* ── Admin-only: Global Reset & Body Spacing ──────────── */
    body.admin-body {
        background-color: #f4f5f8 !important;
        -webkit-tap-highlight-color: transparent !important;
        padding-bottom: 80px !important;
    }

    /* ── Admin-only: Tables to Stacked Cards ──────────────── */
    body.admin-body table {
        border: 0 !important;
        box-shadow: none !important;
        display: block !important;
        width: 100% !important;
        background: transparent !important;
    }
    body.admin-body table thead {
        border: none !important;
        clip: rect(0 0 0 0) !important;
        height: 1px !important;
        margin: -1px !important;
        overflow: hidden !important;
        padding: 0 !important;
        position: absolute !important;
        width: 1px !important;
        display: none !important;
    }
    body.admin-body table tbody {
        display: block !important;
        width: 100% !important;
    }
    body.admin-body table tr {
        display: block !important;
        background: #ffffff !important;
        border: 1px solid #eaedf1 !important;
        border-radius: 12px !important;
        margin-bottom: 16px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.04) !important;
        padding: 16px !important;
    }
    body.admin-body table td {
        display: block !important;
        text-align: left !important;
        padding: 8px 0 !important;
        border-bottom: 1px solid #f0f2f5 !important;
        font-size: 14px !important;
        color: #4b5563 !important;
    }
    body.admin-body table td:last-child {
        border-bottom: none !important;
        padding-bottom: 0 !important;
    }
    body.admin-body table td:first-child {
        padding-top: 0 !important;
        font-weight: 700 !important;
        font-size: 16px !important;
        color: #111827 !important;
    }

    /* ── Admin-only: Card Effect for Content Blocks ────────── */
    body.admin-body .card,
    body.admin-body .box,
    body.admin-body .panel,
    body.admin-body .bg-white {
        border-radius: 16px !important;
        box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
        border: 1px solid #eaedf1 !important;
        margin-bottom: 16px !important;
        padding: 16px !important;
    }
    body.admin-body .admin-content .container-fluid {
        padding: 12px !important;
    }

    /* ── Admin-only: Sticky Full-Width Primary Buttons ─────── */
    body.admin-body form:not(.d-inline):not(.search-form) {
        padding-bottom: 80px !important;
    }
    body.admin-body form:not(.d-inline):not(.search-form) button[type="submit"],
    body.admin-body form:not(.d-inline):not(.search-form) input[type="submit"],
    body.admin-body .sticky-mobile-btn {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        z-index: 1040 !important;
        border-radius: 0 !important;
        margin: 0 !important;
        padding: 18px 16px !important;
        font-size: 16px !important;
        font-weight: 600 !important;
        box-shadow: 0 -4px 12px rgba(0,0,0,0.1) !important;
        height: auto !important;
        text-transform: uppercase !important;
        letter-spacing: 0.5px !important;
    }

    /* ── Admin-only: Touch Target Sizes ────────────────────── */
    body.admin-body a,
    body.admin-body button,
    body.admin-body .btn,
    body.admin-body .nav-link,
    body.admin-body .nav-item {
        min-height: 44px;
    }
    body.admin-body .btn {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    body.admin-body table td .btn {
        min-height: 38px !important;
        margin-top: 8px !important;
        margin-bottom: 4px !important;
    }

    /* ── Admin-only: Form Inputs Optimization ──────────────── */
    body.admin-body input[type="text"],
    body.admin-body input[type="email"],
    body.admin-body input[type="password"],
    body.admin-body input[type="number"],
    body.admin-body input[type="date"],
    body.admin-body select,
    body.admin-body textarea,
    body.admin-body .form-control,
    body.admin-body .form-select {
        border-radius: 8px !important;
        border: 1px solid #d1d5db !important;
        padding: 12px 16px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        background-color: #f9fafb !important;
    }
    body.admin-body input:focus,
    body.admin-body select:focus,
    body.admin-body textarea:focus {
        background-color: #ffffff !important;
        border-color: #2563eb !important;
        box-shadow: 0 0 0 3px rgba(37,99,235,0.1) !important;
    }

    /* ── Admin-only: Off-Canvas Sidebar ────────────────────── */
    body.admin-body .admin-sidebar {
        width: 85% !important;
        max-width: 320px !important;
        transform: translateX(-100%) !important;
        transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
        z-index: 1050 !important;
        box-shadow: 4px 0 24px rgba(0,0,0,0.15) !important;
        background: #ffffff !important;
    }
    body.admin-body .admin-sidebar.show {
        transform: translateX(0) !important;
    }
    body.admin-body .admin-topbar {
        background: #ffffff !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
        position: sticky !important;
        top: 0 !important;
        z-index: 999 !important;
        padding: 12px 16px !important;
        display: flex !important;
        justify-content: space-between !important;
        align-items: center !important;
    }
    body.admin-body .sidebar-nav .nav-item {
        border-radius: 8px !important;
        margin: 4px 12px !important;
        padding: 12px 16px !important;
        font-weight: 500 !important;
    }

    /* ── Admin-only: Layout Adjustments ────────────────────── */
    body.admin-body .d-flex:not(.flex-nowrap) {
        flex-wrap: wrap !important;
    }
    body.admin-body .d-flex.flex-nowrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        padding-bottom: 8px !important;
    }
    body.admin-body .justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 12px !important;
    }

    /* ── Admin-only: Overflow containment ──────────────────── */
    body.admin-body {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
        margin: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
    }

    body.admin-body * {
        box-sizing: border-box !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    body.admin-body img,
    body.admin-body video,
    body.admin-body iframe,
    body.admin-body canvas,
    body.admin-body svg,
    body.admin-body picture,
    body.admin-body figure {
        max-width: 100% !important;
        height: auto !important;
        box-sizing: border-box !important;
        display: block !important;
    }

    body.admin-body p,
    body.admin-body h1,
    body.admin-body h2,
    body.admin-body h3,
    body.admin-body h4,
    body.admin-body h5,
    body.admin-body h6,
    body.admin-body a,
    body.admin-body span,
    body.admin-body div,
    body.admin-body li,
    body.admin-body td,
    body.admin-body th,
    body.admin-body label,
    body.admin-body blockquote {
        word-wrap: break-word !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
        white-space: normal !important;
    }

    body.admin-body pre,
    body.admin-body code {
        white-space: pre-wrap !important;
        word-wrap: break-word !important;
        overflow-x: auto !important;
        max-width: 100% !important;
    }

    body.admin-body .container,
    body.admin-body .container-fluid,
    body.admin-body .row,
    body.admin-body .vr-container,
    body.admin-body .wrapper,
    body.admin-body .main-content {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    body.admin-body .row {
        margin-left: 0 !important;
        margin-right: 0 !important;
        width: 100% !important;
    }

    body.admin-body #wrapper,
    body.admin-body .admin-wrapper,
    body.admin-body main,
    body.admin-body .main-content {
        overflow-x: hidden !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    body.admin-body [style*="width:"] {
        max-width: 100% !important;
    }
}