/**
 * App-wide dashboard responsive + iPad/touch layout.
 * html.is-ipad / .is-touch / .is-compact are set in _responsive-head.blade.php
 * so iPadOS "Request Desktop Website" still gets a tablet layout.
 */

html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

html.is-touch,
html.is-ipad {
    touch-action: manipulation;
}

html.is-touch a,
html.is-touch button,
html.is-touch [role="button"],
html.is-touch input[type="button"],
html.is-touch input[type="submit"],
html.is-touch .btn,
html.is-touch .nav-link,
html.is-touch .dropdown-toggle,
html.is-touch .sidebar-menu a,
html.is-touch #mobile_btn,
html.is-touch #toggle_btn,
html.is-touch .sidebar-overlay,
html.is-touch .fc-event,
html.is-touch .page-btn a,
html.is-touch [onclick],
html.is-touch .dataTables_paginate a,
html.is-touch .paginate_button {
    cursor: pointer;
    -webkit-tap-highlight-color: rgba(253, 241, 11, 0.25);
    touch-action: manipulation;
}

/* Sticky :hover on iPad applies hover transforms as a first tap — skip them. */
html.is-touch .card:hover,
html.is-touch .metric-card:hover,
html.is-touch .btn:hover,
html.is-touch .report-page .report-stat-card:hover,
html.is-touch .salon-dash-card:hover {
    transform: none !important;
}

html.is-touch input,
html.is-touch select,
html.is-touch textarea,
html.is-touch .form-control,
html.is-touch .form-select,
html.is-touch .select2-search__field {
    font-size: 16px !important;
}

img,
svg,
video,
canvas {
    max-width: 100%;
    height: auto;
}

.sidebar-overlay {
    pointer-events: none;
    display: none;
}

.sidebar-overlay.opened {
    display: block !important;
    pointer-events: auto;
    cursor: pointer;
    z-index: 1040;
    top: 0 !important;
    height: 100vh !important;
    height: 100dvh !important;
}

html.menu-opened,
html.menu-opened body {
    overflow: hidden;
    overscroll-behavior: none;
    touch-action: none;
}

/* Native sidebar scroll on touch — jquery.slimscroll intercepts taps on iOS. */
html.is-touch .sidebar .sidebar-inner,
html.is-touch .sidebar .slimScrollDiv,
html.is-ipad .sidebar .sidebar-inner,
html.is-ipad .sidebar .slimScrollDiv {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    height: calc(100vh - 60px - env(safe-area-inset-top)) !important;
    height: calc(100dvh - 60px - env(safe-area-inset-top)) !important;
    max-height: none !important;
}

html.is-touch .sidebar .slimScrollBar,
html.is-touch .sidebar .slimScrollRail,
html.is-ipad .sidebar .slimScrollBar,
html.is-ipad .sidebar .slimScrollRail {
    display: none !important;
}

/* ---- Compact chrome: phones, tablets, iPad at any width ---- */
html.is-compact .header {
    left: 0 !important;
    right: 0 !important;
    height: calc(60px + env(safe-area-inset-top));
    padding-top: env(safe-area-inset-top);
    z-index: 999;
}

html.is-compact .header .header-left {
    width: auto !important;
    min-width: 0;
    height: 60px;
    padding: 0 8px 0 56px !important;
    border-right: 0;
    position: relative;
    z-index: 2;
}

html.is-compact .header .header-left #toggle_btn {
    display: none !important;
}

html.is-compact .header .mobile_btn {
    display: flex !important;
    align-items: center;
    justify-content: center;
    color: #fdf10b;
    font-size: 22px;
    height: 60px;
    width: 52px;
    z-index: 11;
    padding: 0;
    position: absolute;
    top: env(safe-area-inset-top);
    left: 0;
    text-align: center;
}

html.is-compact .header .mobile_btn .bar-icon {
    display: inline-block;
    width: 22px;
    margin-top: 0;
    vertical-align: middle;
}

html.is-compact .header .mobile_btn .bar-icon span {
    display: block;
    float: none;
    width: 22px;
    height: 2px;
    margin: 5px auto;
    background: #fdf10b;
    border-radius: 2px;
}

html.is-compact .header .user-detail {
    display: none !important;
}

html.is-compact .header .nav.user-menu {
    height: 60px;
    margin: 0;
    float: right;
    position: relative;
    z-index: 12;
    padding-right: max(8px, env(safe-area-inset-right));
}

html.is-compact .header .user-menu .nav-item > a {
    min-height: 44px;
    min-width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
}

html.is-compact .header .page-title-box {
    display: none !important;
}

html.is-compact .sidebar,
html.is-compact .sidebars {
    margin-left: -320px !important;
    width: min(280px, 86vw) !important;
    z-index: 1050 !important;
    top: calc(60px + env(safe-area-inset-top));
    height: calc(100vh - 60px - env(safe-area-inset-top));
    height: calc(100dvh - 60px - env(safe-area-inset-top));
    background: #f8f9fa;
    -webkit-transition: margin-left 0.3s ease;
    transition: margin-left 0.3s ease;
    padding-bottom: env(safe-area-inset-bottom);
}

html.is-compact .sidebar .sidebar-menu {
    width: 100% !important;
}

html.is-compact .slide-nav .sidebar,
html.menu-opened.is-compact .sidebar {
    margin-left: 0 !important;
}

html.is-compact .page-wrapper {
    margin-left: 0 !important;
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
    padding-left: max(12px, env(safe-area-inset-left)) !important;
    padding-right: max(12px, env(safe-area-inset-right)) !important;
    padding-bottom: max(16px, env(safe-area-inset-bottom)) !important;
    min-width: 0;
    width: 100%;
}

html.is-compact .page-wrapper .content {
    padding: 12px !important;
    margin: 0 !important;
    max-width: 100%;
}

html.is-compact .mini-sidebar .page-wrapper,
html.is-compact.mini-sidebar .page-wrapper {
    margin-left: 0 !important;
}

html.is-compact body.mini-sidebar .sidebar,
html.is-compact.mini-sidebar .sidebar {
    width: min(280px, 86vw) !important;
    overflow: auto !important;
}

html.is-compact .sidebar .sidebar-menu ul li a span,
html.is-compact .sidebar .sidebar-menu ul li .submenu-hdr {
    display: inline-block !important;
}

html.is-compact .sidebar .sidebar-menu > ul > li > a,
html.is-compact .sidebar .sidebar-menu li.submenu > a {
    min-height: 44px;
}

/* ---- Content: never overflow the viewport ---- */
.page-wrapper,
.page-wrapper .content,
.card,
.card-body,
.main-wrapper,
.container-fluid,
.table-responsive,
.dataTables_wrapper {
    max-width: 100%;
    min-width: 0;
}

.table-responsive,
.dataTables_wrapper,
.report-page .table-responsive,
.card .table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.table-responsive > table,
.table-responsive .table {
    margin-bottom: 0;
}

.page-header,
.page-header-row,
.report-page .page-header-row,
.page-title-box {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.page-btn,
.page-header .btn-group,
.card-header .btn-group {
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Width fallback when JS classes are missing */
@media (max-width: 1199.98px) {
    .header {
        left: 0 !important;
        right: 0 !important;
        height: calc(60px + env(safe-area-inset-top));
        padding-top: env(safe-area-inset-top);
    }

    .header .mobile_btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        position: absolute;
        top: env(safe-area-inset-top);
        left: 0;
        z-index: 11;
        width: 52px;
        height: 60px;
        text-align: center;
        color: #fdf10b;
    }

    .header .header-left {
        width: auto !important;
        height: 60px;
        padding-left: 56px !important;
        border-right: 0;
    }

    .header .header-left #toggle_btn {
        display: none !important;
    }

    .header .user-detail {
        display: none !important;
    }

    .sidebar,
    .sidebars {
        margin-left: -320px;
        z-index: 1050;
        top: calc(60px + env(safe-area-inset-top));
        height: calc(100dvh - 60px - env(safe-area-inset-top));
        width: min(280px, 86vw);
    }

    .slide-nav .sidebar,
    .menu-opened .sidebar {
        margin-left: 0;
    }

    .page-wrapper,
    .mini-sidebar .page-wrapper {
        margin-left: 0 !important;
        padding-top: calc(60px + env(safe-area-inset-top)) !important;
        padding-left: max(12px, env(safe-area-inset-left)) !important;
        padding-right: max(12px, env(safe-area-inset-right)) !important;
    }

    .page-header,
    .page-header-row,
    .report-page .page-header-row {
        align-items: stretch !important;
        flex-direction: column;
    }

    .page-btn,
    .page-header .page-btn,
    .card-header .page-btn {
        margin-left: 0 !important;
        width: 100%;
        justify-content: flex-start;
    }

    .page-btn .btn,
    .page-header .btn,
    .card-header .btn {
        min-height: 44px;
    }

    .row > [class*="col-"] {
        min-width: 0;
    }

    .card-body {
        padding: 1rem;
    }

    .card-header {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .modal-dialog {
        margin: 0.5rem auto;
        max-width: calc(100vw - 1rem);
    }

    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl,
    .modal-dialog.modal-fullscreen {
        max-width: calc(100vw - 0.75rem);
    }

    .modal-content {
        max-height: calc(100dvh - 1rem - env(safe-area-inset-top) - env(safe-area-inset-bottom));
        overflow: auto;
        -webkit-overflow-scrolling: touch;
    }

    .filter-form,
    .report-filters,
    .report-filters-compact,
    form.row,
    .search-set,
    .table-top,
    .page-header .form-sort {
        flex-wrap: wrap !important;
        gap: 0.5rem;
    }

    .dt-buttons,
    .dataTables_length,
    .dataTables_filter,
    .dataTables_info,
    .dataTables_paginate {
        float: none !important;
        text-align: left !important;
        margin-bottom: 0.5rem;
        width: 100%;
    }

    .dataTables_filter input,
    .dataTables_length select {
        max-width: 100%;
        min-height: 40px;
    }

    .dataTables_paginate .paginate_button,
    .pagination .page-link {
        min-width: 40px;
        min-height: 40px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    .select2-container {
        width: 100% !important;
        max-width: 100% !important;
    }

    .btn-group {
        flex-wrap: wrap;
    }

    .dropdown-menu {
        max-width: calc(100vw - 1.5rem);
    }

    .nav-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0;
    }

    .nav-tabs .nav-link {
        white-space: nowrap;
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }

    .input-group {
        flex-wrap: wrap;
    }

    .input-group > .form-control,
    .input-group > .form-select {
        min-width: 0;
        flex: 1 1 auto;
    }

    /* Dashboard / report widgets */
    .salon-dashboard-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .salon-dashboard {
        padding-left: 0.25rem;
        padding-right: 0.25rem;
    }
}

@media (max-width: 767.98px) {
    html.is-compact .header .header-left .logo img,
    .header .header-left .logo img {
        width: 110px;
        max-height: 36px;
    }

    .page-title h4,
    .page-title h3,
    .page-header h4,
    .card-title {
        font-size: 1.15rem;
    }

    .btn,
    .form-control,
    .form-select,
    select.form-control,
    .input-group-text {
        min-height: 44px;
    }

    .row > [class*="col-xl-1"],
    .row > [class*="col-xl-2"],
    .row > [class*="col-xl-3"],
    .row > [class*="col-xl-4"],
    .row > [class*="col-lg-1"],
    .row > [class*="col-lg-2"],
    .row > [class*="col-lg-3"],
    .row > [class*="col-lg-4"],
    .row > [class*="col-md-1"],
    .row > [class*="col-md-2"],
    .row > [class*="col-md-3"],
    .row > [class*="col-md-4"],
    .row > [class*="col-md-6"],
    .row > [class*="col-lg-6"],
    .row > [class*="col-xl-6"] {
        flex: 0 0 auto;
        width: 100%;
        max-width: 100%;
    }

    .salon-dashboard-grid {
        grid-template-columns: 1fr !important;
    }

    .table th,
    .table td {
        white-space: nowrap;
    }

    .btn-sm {
        min-height: 40px;
        padding: 0.4rem 0.75rem;
    }

    .card {
        margin-bottom: 0.85rem;
    }

    .login-form-wrapper {
        padding: 24px 18px !important;
        border-radius: 12px !important;
    }

    .login-userheading h3 {
        font-size: 22px !important;
    }

    /* Wide report tables stay scrollable */
    .appointments-list-table,
    table[style*="min-width"],
    .table[style*="min-width"] {
        display: block;
        width: max-content;
        max-width: none;
    }

    .action-buttons,
    .page-btn {
        display: flex;
        flex-direction: column;
        align-items: stretch;
    }

    .action-buttons .btn,
    .page-btn .btn {
        width: 100%;
        justify-content: center;
    }
}

/* Very small phones */
@media (max-width: 379.98px) {
    .header .header-left .logo.logo-normal,
    .header .header-left .logo.logo-white {
        display: none !important;
    }

    .header .header-left .logo.logo-small {
        display: block !important;
    }

    html.is-compact .page-wrapper {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .page-wrapper .content {
        padding: 8px !important;
    }
}

/* Landscape phones */
@media (max-height: 480px) and (orientation: landscape) {
    html.is-compact .header {
        height: calc(52px + env(safe-area-inset-top));
    }

    html.is-compact .header .mobile_btn,
    html.is-compact .header .header-left,
    html.is-compact .header .nav.user-menu {
        height: 52px;
    }

    html.is-compact .page-wrapper {
        padding-top: calc(52px + env(safe-area-inset-top)) !important;
    }

    html.is-compact .sidebar {
        top: calc(52px + env(safe-area-inset-top));
        height: calc(100dvh - 52px - env(safe-area-inset-top));
    }
}

/* Bootstrap modal backdrop — layout had width:0 / opacity:0 which broke modals on iOS */
.modal-backdrop {
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
}

.modal-backdrop.fade.show {
    opacity: 0.5 !important;
}

body.modal-open {
    overflow: hidden;
    position: relative;
    padding-right: 0 !important;
}

.select2-container {
    z-index: 1060;
    max-width: 100%;
}

.select2-container--open {
    z-index: 20000 !important;
}

.select2-dropdown {
    z-index: 20001 !important;
    max-width: calc(100vw - 1rem);
}

.bootstrap-datetimepicker-widget {
    z-index: 20002 !important;
}

.dropdown-menu {
    z-index: 1080;
}

/* Calendar / drawers on tablet */
html.is-compact .page-wrapper.calendar-page-shell {
    padding-left: 0 !important;
    padding-right: 0 !important;
    padding-top: calc(60px + env(safe-area-inset-top)) !important;
    height: 100dvh;
}

html.is-compact .page-wrapper.calendar-page-shell > .content.calendar-page {
    margin: 0 !important;
}

html.is-touch .fc-day-slot-hover-root,
html.is-ipad .fc-day-slot-hover-root {
    display: none !important;
}

@media (max-width: 1199.98px) {
    .calendar-drawer .fullscreen-modal-content,
    .calendar-drawer .drawer-main-layout {
        width: 100vw !important;
        max-width: 100vw !important;
    }

    .calendar-nav-fresha {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem 0.5rem !important;
        padding: 0.4rem 0.5rem !important;
    }

    .nav-left,
    .nav-right {
        flex: 1 1 100%;
        min-width: 0;
    }

    .calendar-page .calendar-wrapper-fresha {
        padding: 0.5rem !important;
    }
}

#global-loader,
#calendar-loading-overlay.is-stuck {
    pointer-events: none !important;
}

html.is-touch #global-loader:not(.is-visible) {
    display: none !important;
    pointer-events: none !important;
    visibility: hidden !important;
}

.iti__country-list {
    max-height: 50vh;
    -webkit-overflow-scrolling: touch;
}

/* Touch: avoid sticky hover styles */
@media (hover: none) and (pointer: coarse) {
    .btn:hover,
    .card:hover,
    .metric-card:hover {
        transform: none !important;
    }
}

@media (prefers-reduced-motion: reduce) {
    html.is-compact .sidebar,
    .sidebar-overlay {
        transition: none !important;
    }
}