/**
 * InvoiceHub Enterprise Mobile Theme & Mobile-First Design System
 * File: public/assets/css/invoicehub_mobile_theme.css
 * Authors: InvoiceHub Team (ABBER.KZ)
 * Standards: Rule 16 Mobile-First, Touch Targets >= 44x44px, Zero Horizontal Scroll Leak
 */

/* ==========================================================================
   1. GLOBAL ZERO-HORIZONTAL-OVERFLOW SHIELD
   ========================================================================== */
html, body {
    max-width: 100vw !important;
    overflow-x: hidden !important;
    position: relative;
    -webkit-text-size-adjust: 100%;
}

.layout-wrapper,
.layout-container,
.layout-page,
.content-wrapper,
.container-xxl,
.container-fluid,
.content-backdrop {
    max-width: 100% !important;
    overflow-x: clip !important;
    box-sizing: border-box;
}

/* ==========================================================================
   2. TOUCH TARGETS (Apple HIG / Material Standard: >= 44x44px)
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Buttons & Interactive Elements */
    .btn:not(.btn-icon-inline),
    button.btn:not(.btn-icon-inline),
    a.btn:not(.btn-icon-inline) {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        font-weight: 600 !important;
        touch-action: manipulation;
    }

    /* Small and Extra-Small button sizing on mobile */
    .btn-sm, .btn-xs {
        min-height: 38px !important;
        padding: 0.35rem 0.75rem !important;
    }

    /* Ensure action button groups wrap cleanly */
    .btn-group {
        flex-wrap: wrap !important;
        gap: 6px;
    }

    /* Navigation links in tabs */
    .nav-tabs .nav-link,
    .nav-pills .nav-link {
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        padding: 0.65rem 1rem !important;
        font-weight: 500 !important;
    }

    /* Pagination controls */
    .pagination .page-item .page-link {
        min-width: 44px !important;
        min-height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 1rem !important;
    }

    /* Dropdown Items */
    .dropdown-menu .dropdown-item {
        min-height: 44px !important;
        display: flex !important;
        align-items: center !important;
        padding-top: 0.6rem !important;
        padding-bottom: 0.6rem !important;
        font-size: 0.95rem !important;
    }
}

/* ==========================================================================
   3. IOS SAFARI AUTO-ZOOM PREVENTION (font-size >= 16px)
   ========================================================================== */
@media (max-width: 767.98px) {
    input.form-control,
    select.form-select,
    textarea.form-control,
    .form-control,
    .form-select {
        font-size: 16px !important; /* Disables intrusive iOS focus auto-zoom */
        min-height: 44px !important;
        border-radius: 8px !important;
    }

    /* Soft light placeholder standard (Rule 12) */
    ::placeholder,
    ::-webkit-input-placeholder,
    ::-moz-placeholder,
    :-moz-placeholder,
    :-ms-input-placeholder,
    .form-control::placeholder {
        color: #b5b5c3 !important;
        opacity: 0.75 !important;
        font-weight: 400 !important;
    }
}

/* ==========================================================================
   4. MOBILE NAVIGATION, OFFCANVAS & HEADER CONTROLS
   ========================================================================== */
@media (max-width: 1199.98px) {
    /* Offcanvas Sidebar Drawer */
    .layout-menu {
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 290px !important;
        max-width: 85vw !important;
        height: 100vh !important;
        z-index: 1095 !important;
        transform: translateX(-100%) !important;
        transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.28s ease !important;
        box-shadow: none !important;
        background: #ffffff !important;
        display: flex !important;
        flex-direction: column !important;
        will-change: transform;
    }

    /* When active / shown */
    .layout-menu.show,
    .layout-menu:not(.collapsed) {
        transform: translateX(0) !important;
        box-shadow: 0 0.5rem 2rem 0 rgba(75, 70, 92, 0.3) !important;
    }

    /* Mobile Backdrop Overlay */
    .layout-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(47, 43, 61, 0.45) !important;
        backdrop-filter: blur(3px) !important;
        -webkit-backdrop-filter: blur(3px) !important;
        z-index: 1090 !important;
        opacity: 0 !important;
        visibility: hidden !important;
        transition: opacity 0.25s ease, visibility 0.25s ease !important;
    }

    .layout-overlay.show {
        opacity: 1 !important;
        visibility: visible !important;
    }

    /* Hamburger Menu Button */
    .mobile-menu-btn {
        width: 44px !important;
        height: 44px !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: transparent !important;
        border: 1px solid rgba(75, 70, 92, 0.12) !important;
        border-radius: 8px !important;
        color: #5d596c !important;
        cursor: pointer !important;
        transition: background 0.15s ease, color 0.15s ease !important;
    }

    .mobile-menu-btn:hover,
    .mobile-menu-btn:active {
        background: rgba(115, 103, 240, 0.08) !important;
        color: #7367f0 !important;
    }

    /* Safe navbar spacing */
    .layout-navbar {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* ==========================================================================
   5. RESPONSIVE TABLES & HORIZONTAL SCROLL CONTAINER
   ========================================================================== */
.table-responsive {
    -webkit-overflow-scrolling: touch !important;
    position: relative !important;
    border-radius: 8px;
    border: 1px solid rgba(75, 70, 92, 0.08);
    margin-bottom: 1rem;
}

/* Scroll indicator shadow */
.table-responsive::-webkit-scrollbar {
    height: 6px;
}
.table-responsive::-webkit-scrollbar-thumb {
    background: rgba(115, 103, 240, 0.25);
    border-radius: 3px;
}

@media (max-width: 767.98px) {
    /* For compact tables, reduce cell padding */
    .table-sm th, .table-sm td {
        padding: 0.45rem 0.5rem !important;
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   6. MOBILE MODALS & BOTTOM SHEET ADAPTATION
   ========================================================================== */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem auto !important;
        max-width: calc(100vw - 1rem) !important;
    }

    .modal-content {
        border-radius: 14px !important;
        border: none !important;
        box-shadow: 0 0.5rem 2rem rgba(0, 0, 0, 0.2) !important;
    }

    .modal-header {
        padding: 1rem 1.25rem !important;
    }

    .modal-header .btn-close {
        min-width: 44px !important;
        min-height: 44px !important;
        padding: 0.75rem !important;
        margin: -0.5rem -0.5rem -0.5rem auto !important;
    }

    .modal-body {
        padding: 1rem 1.25rem !important;
        max-height: calc(85vh - 120px) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .modal-footer {
        padding: 0.75rem 1.25rem !important;
        flex-direction: column-reverse !important;
        gap: 8px;
    }

    .modal-footer .btn {
        width: 100% !important;
        margin: 0 !important;
    }
}

/* ==========================================================================
   7. SCROLLABLE TABS BAR (Horizontal Pill Carousel)
   ========================================================================== */
@media (max-width: 991.98px) {
    .nav-tabs,
    .nav-pills:not(.flex-column) {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        padding-bottom: 6px !important;
        scrollbar-width: none; /* Firefox */
    }
    .nav-tabs::-webkit-scrollbar,
    .nav-pills::-webkit-scrollbar {
        display: none; /* Chrome, Safari */
    }
    .nav-tabs .nav-item,
    .nav-pills .nav-item {
        flex: 0 0 auto !important;
        white-space: nowrap !important;
    }
}

/* ==========================================================================
   8. MICRO-INTERACTIONS & MOTION ACCESSIBILITY
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    /* Smooth button tap feedback */
    .btn:active,
    .nav-link:active,
    .dropdown-item:active {
        transform: scale(0.975);
        transition: transform 0.12s ease;
    }

    .card {
        transition: transform 0.2s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.2s ease;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* ==========================================================================
   9. SETTINGS, TASKS & COMPONENT SPECIFIC MOBILE ADAPTATIONS
   ========================================================================== */
@media (max-width: 767.98px) {
    /* Admin Settings Tabs: convert vertical 12-item list into swipeable pill carousel */
    .settings-nav-col {
        border-right: none !important;
        border-bottom: 1px solid #dbdade !important;
        min-height: auto !important;
        padding: 0.5rem 0.25rem !important;
        background-color: #ffffff !important;
    }

    #settingsTabs {
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        flex-wrap: nowrap !important;
        gap: 6px !important;
        padding-bottom: 6px !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    #settingsTabs::-webkit-scrollbar {
        display: none !important;
    }

    #settingsTabs .settings-category-header {
        display: none !important; /* Hide dense headers on mobile carousel */
    }

    #settingsTabs .nav-item {
        flex: 0 0 auto !important;
    }

    #settingsTabs .nav-link {
        white-space: nowrap !important;
        padding: 0.5rem 0.85rem !important;
        border-radius: 8px !important;
        font-size: 0.85rem !important;
        background-color: #f8f7fa !important;
        color: #5d596c !important;
        border: 1px solid rgba(75, 70, 92, 0.1) !important;
    }

    #settingsTabs .nav-link.active {
        background-color: #7367f0 !important;
        color: #ffffff !important;
        border-color: #7367f0 !important;
        box-shadow: 0 2px 6px rgba(115, 103, 240, 0.3) !important;
    }

    /* Content spacing on mobile */
    .content-wrapper {
        padding: 0.75rem 0.5rem !important;
    }

    .card-header {
        padding: 1rem 1rem !important;
    }

    .card-body {
        padding: 1rem 1rem !important;
    }

    /* SKU copy button tap area */
    .sku-copy-btn {
        min-height: 40px !important;
        padding: 6px 12px !important;
        font-size: 0.85rem !important;
    }
}

/* ==========================================================================
   10. SWEETALERT2 & POPUP DIALOGS MOBILE OPTIMIZATION
   ========================================================================== */
@media (max-width: 575.98px) {
    .swal2-container {
        padding: 0.5rem !important;
    }

    .swal2-popup {
        width: calc(100vw - 1.5rem) !important;
        max-width: calc(100vw - 1.5rem) !important;
        margin: auto !important;
        padding: 1.25rem 1rem !important;
        border-radius: 14px !important;
    }

    .swal2-actions {
        width: 100% !important;
        flex-direction: column-reverse !important;
        gap: 8px !important;
    }

    .swal2-actions button {
        width: 100% !important;
        margin: 0 !important;
        min-height: 44px !important;
        font-size: 0.95rem !important;
    }

    .swal2-title {
        font-size: 1.15rem !important;
    }

    .swal2-html-container {
        font-size: 0.875rem !important;
    }

    /* Fixed positioned dropdowns on small viewports */
    .stock-date-dropdown-menu {
        max-width: calc(100vw - 2rem) !important;
        width: calc(100vw - 2rem) !important;
    }
}

/* ==========================================================================
   11. ENTERPRISE CURSOR & CARET SYSTEM (ZERO-LEAK CARET STANDARD)
   ========================================================================== */

/* 1. Глобальный сброс: стрелка и скрытая каретка на всех элементах */
*, *::before, *::after {
    cursor: default !important;
    caret-color: transparent !important;
}

/* 2. Защита интерфейса от случайного выделения текста */
a,
button,
.btn,
.nav-link,
.menu-link,
.menu-item > a,
.menu-toggle,
.badge,
th,
.dropdown-item,
.page-link,
[role="button"],
[role="tab"],
[role="menuitem"],
[role="switch"],
.form-check-label,
label[for],
.card-header,
.navbar,
.sidebar,
.layout-menu {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

/* 3. Pointer для всех интерактивных элементов */
a[href],
button:not([disabled]),
.btn:not(:disabled):not(.disabled),
[role="button"],
[role="tab"],
[role="menuitem"],
[role="option"],
[role="switch"],
[role="checkbox"],
[role="radio"],
label[for],
label.form-check-label,
label.btn,
.clickable,
.dropdown-item,
.dropdown-toggle,
.nav-link,
.nav-tabs .nav-item,
.nav-pills .nav-item,
.page-link,
.menu-item > a,
.menu-toggle,
.accordion-button,
.list-group-item-action,
.modal .btn-close,
.offcanvas .btn-close,
.toast .btn-close,
.alert .btn-close,
.carousel-control-prev,
.carousel-control-next,
.carousel-indicators > button,
[data-bs-toggle],
[data-bs-dismiss],
[data-bs-slide],
[data-bs-slide-to],
select:not([disabled]),
.form-select:not([disabled]),
input[type="checkbox"]:not([disabled]),
input[type="radio"]:not([disabled]),
input[type="file"]:not([disabled]),
input[type="submit"]:not([disabled]),
input[type="button"]:not([disabled]),
input[type="reset"]:not([disabled]),
input[type="range"]:not([disabled]),
input[type="color"]:not([disabled]),
.mobile-menu-btn,
.sidebar-toggle-btn,
.brand-text,
.profile-sidebar-link,
.badge[onclick],
[onclick]:not(input):not(textarea):not(div):not(span):not(td):not(li),
.cursor-pointer {
    cursor: pointer !important;
    caret-color: transparent !important;
}

/* 4. Текстовый курсор и видимая каретка — ТОЛЬКО в редактируемых полях */
input[type="text"]:not([readonly]):not([disabled]),
input[type="email"]:not([readonly]):not([disabled]),
input[type="password"]:not([readonly]):not([disabled]),
input[type="number"]:not([readonly]):not([disabled]),
input[type="search"]:not([readonly]):not([disabled]),
input[type="tel"]:not([readonly]):not([disabled]),
input[type="url"]:not([readonly]):not([disabled]),
input[type="date"]:not([readonly]):not([disabled]),
input[type="time"]:not([readonly]):not([disabled]),
input[type="week"]:not([readonly]):not([disabled]),
input[type="month"]:not([readonly]):not([disabled]),
input[type="datetime-local"]:not([readonly]):not([disabled]),
textarea:not([readonly]):not([disabled]),
[contenteditable="true"],
.form-control:not([readonly]):not([disabled]):not([type="checkbox"]):not([type="radio"]) {
    cursor: text !important;
    caret-color: auto !important;
    -webkit-user-select: text !important;
    user-select: text !important;
}

/* 5. Запрещено / заблокировано */
input[disabled],
textarea[disabled],
button[disabled],
.btn:disabled,
.btn.disabled,
select[disabled],
.form-select[disabled],
input[readonly],
textarea[readonly],
[aria-disabled="true"] {
    cursor: not-allowed !important;
    caret-color: transparent !important;
}

/* 6. Draggable & Zoom */
[draggable="true"],
.draggable,
.sortable-handle {
    cursor: grab !important;
}
[draggable="true"]:active,
.draggable:active,
.sortable-handle:active {
    cursor: grabbing !important;
}
.zoomable,
img[data-bs-toggle="modal"],
.lightbox-trigger {
    cursor: zoom-in !important;
}