/* ==========================================================================
   GLOBAL RESPONSIVE STYLESHEET — eazy-services
   Covers all breakpoints: 320px · 480px · 576px · 768px · 992px · 1200px
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. ROOT / CSS VARIABLES
   -------------------------------------------------------------------------- */
:root {
    --sidebar-width: 250px;
    --navbar-height: 57px;
    --touch-target: 44px;
}

/* --------------------------------------------------------------------------
   2. RESET / BASE — fluid images and box-sizing
   -------------------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

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

/* --------------------------------------------------------------------------
   3. LAYOUT — content wrapper adapts to sidebar state
   -------------------------------------------------------------------------- */
.content-wrapper {
    min-height: calc(100vh - var(--navbar-height));
    overflow-x: hidden;
}

/* Prevent horizontal scroll on the whole page */
body {
    overflow-x: hidden;
}

/* --------------------------------------------------------------------------
   4. NAVBAR / HEADER
   -------------------------------------------------------------------------- */
.main-header.navbar {
    min-height: var(--navbar-height);
    flex-wrap: nowrap;
    padding: 0 0.75rem;
}

/* Profile image — slightly larger touch area */
.main-header .navbar-nav .nav-link img.rounded-circle {
    width: 34px;
    height: 34px;
}

/* Dropdown right-align on small screens */
@media (max-width: 575.98px) {
    .main-header .dropdown-menu-right {
        right: 0;
        left: auto;
    }
}

/* --------------------------------------------------------------------------
   5. SIDEBAR
   -------------------------------------------------------------------------- */
@media (max-width: 991.98px) {
    /* AdminLTE collapses sidebar — brand text hidden when mini */
    .brand-text {
        display: inline-block;
        font-size: 0.9rem;
    }
}

/* --------------------------------------------------------------------------
   6. CARDS
   -------------------------------------------------------------------------- */
.card {
    margin-bottom: 1rem;
}

@media (max-width: 575.98px) {
    .card-body {
        padding: 0.75rem;
    }
    .card-header {
        padding: 0.6rem 0.75rem;
    }
    .card-footer {
        padding: 0.6rem 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   7. TYPOGRAPHY — fluid scale
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    h1, .h1 { font-size: 1.5rem; }
    h2, .h2 { font-size: 1.3rem; }
    h3, .h3 { font-size: 1.15rem; }
    h4, .h4 { font-size: 1rem; }
    h5, .h5 { font-size: 0.95rem; }
    h6, .h6 { font-size: 0.875rem; }
}

/* --------------------------------------------------------------------------
   8. BUTTONS — touch-friendly minimum size
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .btn {
        min-height: var(--touch-target);
        padding: 0.375rem 0.75rem;
    }
    /* Except icon-only xs/sm buttons in tables — keep them compact */
    .btn-xs,
    .table .btn,
    .table .btn-sm {
        min-height: 28px;
    }
    .btn-block {
        width: 100%;
    }
}

/* --------------------------------------------------------------------------
   9. FORMS
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .form-control,
    .form-control-sm {
        font-size: 16px; /* prevents iOS auto-zoom on focus */
        min-height: var(--touch-target);
    }
    select.form-control {
        min-height: var(--touch-target);
    }
    .form-group {
        margin-bottom: 0.75rem;
    }
    /* Stack inline form groups */
    .form-inline .form-group {
        display: block;
        width: 100%;
        margin-bottom: 0.5rem;
    }
    .form-inline .form-control {
        width: 100%;
    }
}

/* Select2 — mobile friendly */
@media (max-width: 767.98px) {
    .select2-container {
        width: 100% !important;
    }
    .select2-container .select2-selection--single {
        height: var(--touch-target) !important;
        line-height: calc(var(--touch-target) - 2px) !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: calc(var(--touch-target) - 2px) !important;
    }
    .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: calc(var(--touch-target) - 2px) !important;
    }
}

/* --------------------------------------------------------------------------
   10. TABLES / DATATABLES
   -------------------------------------------------------------------------- */

/* Horizontal scroll wrapper for all DataTables */
.dataTables_wrapper {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-responsive {
    -webkit-overflow-scrolling: touch;
}

/* Make DataTable fit container */
.dataTables_wrapper .dataTables_scroll {
    overflow-x: auto;
}

@media (max-width: 767.98px) {
    /* Reduce padding inside table cells */
    table.dataTable tbody td,
    table.dataTable thead th {
        padding: 6px 8px;
        font-size: 0.8rem;
        white-space: nowrap;
    }

    /* DataTables pagination — wrap cleanly */
    .dataTables_wrapper .dataTables_paginate {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
        margin-top: 8px;
    }
    .dataTables_wrapper .dataTables_paginate .paginate_button {
        min-width: 36px;
        min-height: 36px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
    }

    /* DataTables info + length — stack */
    .dataTables_wrapper .dataTables_info {
        text-align: center;
        padding-top: 8px;
        font-size: 0.8rem;
    }
    .dataTables_wrapper .dataTables_length {
        text-align: center;
        font-size: 0.8rem;
    }
    .dataTables_wrapper .dataTables_length select {
        min-height: 36px;
    }
}

@media (max-width: 575.98px) {
    table.dataTable tbody td,
    table.dataTable thead th {
        font-size: 0.75rem;
        padding: 5px 6px;
    }
    /* Action buttons in table rows — touch targets */
    .btn-xs {
        width: 32px !important;
        height: 32px !important;
        font-size: 13px !important;
    }
}

/* --------------------------------------------------------------------------
   11. MODALS
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 0.5rem;
        max-width: calc(100% - 1rem);
    }
    .modal-dialog.modal-lg,
    .modal-dialog.modal-xl {
        max-width: calc(100% - 1rem);
    }
    .modal-body {
        padding: 0.75rem;
        max-height: 70vh;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    .modal-header {
        padding: 0.6rem 0.75rem;
    }
    .modal-footer {
        padding: 0.5rem 0.75rem;
        flex-wrap: wrap;
        gap: 0.4rem;
    }
    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

@media (max-width: 767.98px) {
    .modal-dialog.modal-lg {
        max-width: calc(100% - 1.5rem);
        margin: 0.75rem auto;
    }
}

/* --------------------------------------------------------------------------
   12. LOGIN PAGE
   -------------------------------------------------------------------------- */
.login-page {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    padding: 1rem;
}

.login-box {
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
}

@media (max-width: 480px) {
    .login-box {
        width: 95% !important;
        max-width: 100%;
        margin: 1rem auto;
    }
    .login-box .card-body {
        padding: 1rem;
    }
    .login-box .login-logo {
        margin-bottom: 0.75rem;
    }
}

@media (max-width: 360px) {
    .login-box {
        width: 100% !important;
        margin: 0;
    }
    .login-box .card {
        border-radius: 0;
    }
}

/* --------------------------------------------------------------------------
   13. FILTER & CONTROL BARS (shared across booking, customers, cleaners)
   -------------------------------------------------------------------------- */
.dt-top-controls {
    flex-wrap: wrap;
    gap: 8px;
}

@media (max-width: 991.98px) {
    .dt-top-controls {
        flex-direction: column;
        align-items: stretch;
    }
    .dt-top-controls > * {
        width: 100%;
    }
    .bulkActionBtns {
        flex-wrap: wrap;
    }
}

@media (max-width: 575.98px) {
    .filter-section {
        padding: 10px;
    }
    .filter-section .form-group {
        width: 100%;
    }
    /* Date range picker full width on mobile */
    #reportrange {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* --------------------------------------------------------------------------
   14. MEDIA GALLERY (booking media)
   -------------------------------------------------------------------------- */
.media-gallery {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
}

@media (max-width: 575.98px) {
    .media-gallery {
        grid-template-columns: repeat(auto-fill, minmax(90px, 1fr));
        gap: 8px;
    }
    .media-item img {
        height: 100px;
    }
    .media-info {
        padding: 6px;
        font-size: 0.7rem;
    }
    .media-preview-item {
        width: 80px;
        height: 80px;
    }
}

/* --------------------------------------------------------------------------
   15. STEPPER (multi-step forms in customer/cleaner modals)
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .bs-stepper-header {
        padding: 6px 0;
    }
    .bs-stepper .step .step-trigger {
        padding: 4px 6px;
    }
    .bs-stepper-box {
        width: 28px !important;
        height: 28px !important;
        font-size: 0.75rem;
    }
    .bs-stepper-label {
        display: none; /* show only icons on very small screens */
    }
    .bs-stepper-content {
        padding: 12px 10px !important;
    }
}

/* --------------------------------------------------------------------------
   16. CONTENT HEADER & PAGE TITLES
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .content-header h1 {
        font-size: 1.1rem;
    }
    .content-header .breadcrumb {
        font-size: 0.75rem;
    }
}

/* --------------------------------------------------------------------------
   17. PROFILE / CLEANER DETAIL PAGES
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    .image-preview-container {
        max-width: 130px;
        height: 130px;
        margin: 0 auto;
    }
    /* Stack two-column detail rows */
    .booking-detail-item {
        flex-direction: column;
    }
}

/* --------------------------------------------------------------------------
   18. ACTION BUTTONS IN TABLE CELLS
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .action-buttons {
        flex-wrap: wrap;
        gap: 3px;
    }
    .action-btn {
        padding: 4px 6px;
        font-size: 11px;
    }
}

/* --------------------------------------------------------------------------
   19. DASHBOARD — stat cards / info boxes
   -------------------------------------------------------------------------- */
@media (max-width: 575.98px) {
    .info-box {
        min-height: 70px;
    }
    .info-box .info-box-icon {
        width: 60px;
        font-size: 1.5rem;
        line-height: 70px;
    }
    .info-box .info-box-content {
        padding: 6px 8px;
    }
    .info-box-text {
        font-size: 0.75rem;
    }
    .info-box-number {
        font-size: 1.2rem;
    }
}

/* --------------------------------------------------------------------------
   20. UTILITY — responsive helpers
   -------------------------------------------------------------------------- */

/* Full width on mobile helper */
@media (max-width: 575.98px) {
    .w-sm-100 { width: 100% !important; }
    .mb-sm-2  { margin-bottom: 0.5rem !important; }
    .text-sm-center { text-align: center !important; }
}

/* Prevent text overflow in table cells */
.text-truncate-responsive {
    max-width: 120px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575.98px) {
    .text-truncate-responsive {
        max-width: 80px;
    }
}

/* --------------------------------------------------------------------------
   21. SCROLLBAR — thin on mobile
   -------------------------------------------------------------------------- */
@media (max-width: 767.98px) {
    ::-webkit-scrollbar {
        width: 4px;
        height: 4px;
    }
    ::-webkit-scrollbar-thumb {
        background-color: rgba(0,0,0,0.25);
        border-radius: 2px;
    }
}

/* --------------------------------------------------------------------------
   22. PRINT STYLES
   -------------------------------------------------------------------------- */
@media print {
    .main-sidebar,
    .main-header,
    .content-header,
    .card-tools,
    .btn,
    footer {
        display: none !important;
    }
    .content-wrapper {
        margin-left: 0 !important;
        padding: 0 !important;
    }
    .card {
        border: none !important;
        box-shadow: none !important;
    }
    table.dataTable {
        width: 100% !important;
    }
    body {
        font-size: 11pt;
    }
}