/*
 * mobile-safari-fixes.css
 * Safari/WebKit compatibility + mobile responsive fixes for admin panel.
 * Loaded after style.css to override vendor styles without modifying vendor files.
 *
 * Note: position:sticky and @keyframes beatHeart are already defined unprefixed
 * in libs/css/style.css and work on every Safari in our support range (15+), so
 * no -webkit-sticky / @-webkit-keyframes shims are needed here.
 */

/* =====================================================
   1. SAFARI: -webkit-transform for rotate/scale
   ===================================================== */
.navigation-horizontal .nav-link[data-toggle="collapse"][aria-expanded="false"]:after {
    -webkit-transform: rotate(-90deg);
    transform: rotate(-90deg);
}

/* Product colors radio transforms */
.product-colors .radio:checked + label:after {
    -webkit-transform: scale(1);
    transform: scale(1);
}
#radio-1 + label:before,
#radio-2 + label:before,
#radio-3 + label:before {
    -webkit-transform: scale(0);
    transform: scale(0);
}
#radio-1:checked + label:before,
#radio-2:checked + label:before,
#radio-3:checked + label:before {
    -webkit-transform: scale(1);
    transform: scale(1);
}

/* =====================================================
   2. SAFARI: -webkit-transition for all transition props
   ===================================================== */
.navigation-horizontal .nav-link[data-toggle="collapse"]:after {
    -webkit-transition: transform .35s ease, opacity .35s ease;
    transition: transform .35s ease, opacity .35s ease;
}
.navigation-horizontal .navbar-nav .nav-link {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.navigation-horizontal .submenu .nav .nav-item .nav-link {
    -webkit-transition: 0.3s;
    transition: 0.3s;
}
.product-colors label {
    -webkit-transition: all .2s ease-in-out;
    transition: all .2s ease-in-out;
}
.product-colors .radio:checked + label:after {
    -webkit-transition: all .5s;
    transition: all .5s;
}
#radio-1:checked + label:before,
#radio-2:checked + label:before,
#radio-3:checked + label:before {
    -webkit-transition: all .4s;
    transition: all .4s;
}

/* =====================================================
   3. SAFARI: Fix text-overflow: clip → ellipsis
   ===================================================== */
.btn-account .user-info {
    text-overflow: ellipsis;
}

/* =====================================================
   4. SAFARI: -webkit-appearance fixes for form elements
   ===================================================== */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="color"] {
    -webkit-appearance: none;
    appearance: none;
}
input[type="search"] {
    -webkit-appearance: none;
    appearance: none;
}
select.form-control,
select.custom-select {
    -webkit-appearance: none;
    appearance: none;
}

/* =====================================================
   5. MOBILE: Sidebar & header layout on small screens
   ===================================================== */
@media (max-width: 767.98px) {
    /* Ensure sidebar collapses properly and doesn't overflow */
    .dashboard-main-wrapper {
        overflow-x: hidden;
    }

    /* Top header — prevent horizontal scroll */
    .header {
        padding-left: 0.5rem;
        padding-right: 0.5rem;
    }

    /* Page titles on mobile */
    .page-header {
        padding: 0.75rem 1rem;
    }
    .page-header h4,
    .page-header .breadcrumb {
        font-size: 0.875rem;
    }

    /* Cards on mobile — remove excessive padding */
    .card-body {
        padding: 1rem;
    }

    /* Form groups — stack labels and inputs */
    .form-group label {
        font-size: 0.8125rem;
    }

    /* Buttons — full width on very small screens */
    .btn-block-xs {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
}

/* =====================================================
   6. MOBILE: Table horizontal scrolling
   ===================================================== */
@media (max-width: 991.98px) {
    /* Auto-apply table-responsive behaviour to all admin tables */
    .card-body .table-responsive,
    .card-body > .table {
        -webkit-overflow-scrolling: touch;
    }

    /* DataTables wrapper on mobile */
    .dataTables_wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Prevent table cells from being too narrow */
    .table th,
    .table td {
        white-space: nowrap;
        font-size: 0.8125rem;
    }

    /* Action buttons in tables */
    .table .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.75rem;
    }
}

/* =====================================================
   7. MOBILE: Modal improvements
   ===================================================== */
@media (max-width: 767.98px) {
    /* Full-width modals on mobile */
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100vw - 1rem);
    }

    /* Tall modals should scroll on mobile */
    .modal-dialog:not(.modal-dialog-scrollable) .modal-body {
        max-height: calc(100vh - 12rem);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Modal header padding */
    .modal-header,
    .modal-footer {
        padding: 0.75rem 1rem;
    }

    /* Close button tap target */
    .modal-header .close {
        padding: 0.75rem;
        margin: -0.75rem -0.75rem -0.75rem auto;
    }
}

/* =====================================================
   8. MOBILE: Dashboard cards & stats
   ===================================================== */
@media (max-width: 575.98px) {
    /* Stack 2-col grids to 1 col on extra small */
    .col-sm-6 {
        flex: 0 0 100%;
        max-width: 100%;
    }

    /* Reduce dashboard stat card font sizes */
    .ecommerce-card .card-body h3,
    .ecommerce-card .card-body h4 {
        font-size: 1.25rem;
    }
}

/* =====================================================
   9. TABLET: Sidebar overlay on medium screens
   ===================================================== */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dashboard-main-wrapper {
        overflow-x: hidden;
    }

    .card-body {
        padding: 1.25rem;
    }

    /* Adjust header spacing */
    .header {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
}

/* =====================================================
   10. SAFARI: Touch-action for scrollable areas
   ===================================================== */
.table-responsive,
.modal-body,
.dataTables_scrollBody {
    -webkit-overflow-scrolling: touch;
}

/* =====================================================
   11. MOBILE: Input & select minimum tap targets (WCAG)
   ===================================================== */
@media (max-width: 767.98px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="tel"],
    input[type="number"],
    input[type="search"],
    input[type="date"],
    select,
    textarea {
        min-height: 2.5rem;
        font-size: 1rem; /* Prevents Safari zoom-on-focus (requires >= 16px) */
    }
}

/* =====================================================
   12. SAFARI: Fix 100vh on mobile Safari (URL bar bug)
   The @supports block targets iOS Safari specifically, so
   -webkit-fill-available is the correct value here. We do NOT
   add a `calc(var(--vh) ...)` override because no JS sets the
   --vh custom property — that would fall back to 1vh and
   re-introduce the exact 100vh URL-bar bug this section fixes.
   ===================================================== */
@supports (-webkit-touch-callout: none) {
    .modal-dialog:not(.modal-dialog-scrollable) .modal-body {
        max-height: -webkit-fill-available;
    }
}

/* =====================================================
   13. Card header row: restore XL→LG breakpoint
   The original viewport (min/max-scale=0.8) made CSS pixel
   width = device width / 0.8, so 992px screens appeared as
   ~1240px, triggering col-xl-6 side-by-side. After changing
   to initial-scale=1.0 (WCAG), the XL breakpoint (1200px)
   is no longer triggered on most admin screens. This section
   makes col-xl-6 in card header rows activate at LG (992px)
   to match the original layout.
   ===================================================== */
@media (min-width: 992px) {
    .card > .row.pl-4.pr-4 > .col-xl-6,
    .card > .row.pl-4.pr-4.pt-4 > .col-xl-6 {
        -webkit-flex: 0 0 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }
    .card > .row.pl-4.pr-4 > .col-xl-6.mt-xl-0,
    .card > .row.pl-4.pr-4.pt-4 > .col-xl-6.mt-xl-0 {
        margin-top: 0 !important;
    }
}