/* ==========================================================================
   USER APP — RESPONSIVE
   File: /user_app/assets/css/responsive.css

   Purpose:
   - Shared responsive behavior for the complete User Application.
   - Works with:
       variables.css
       reset.css
       base.css
       layout.css
       header.css
       sidebar.css
       navigation.css
       forms.css
       buttons.css
       cards.css
       tables.css
       modal.css
       alerts.css
       auth.css
       dashboard.css
       profile.css
       locations.css
       search.css
       enquiries.css
       favorites.css
       reviews.css
       messages.css
       notifications.css
       activity.css
       settings.css
       security.css
       support.css
       account.css

   IMPORTANT:
   - Do not place API logic here.
   - Do not define page-specific business styles here.
   - Do not redefine body/global typography unless absolutely required.
   - Prefer existing CSS variables with safe fallbacks.
   ========================================================================== */


/* ==========================================================================
   01. RESPONSIVE ROOT VARIABLES
   ========================================================================== */

:root {
    --responsive-mobile: 640px;
    --responsive-tablet: 768px;
    --responsive-desktop: 1024px;
    --responsive-wide: 1200px;

    --responsive-page-padding: 24px;
    --responsive-mobile-padding: 16px;

    --responsive-sidebar-width: 260px;
    --responsive-sidebar-collapsed-width: 76px;

    --responsive-gap: 20px;
    --responsive-mobile-gap: 14px;
}


/* ==========================================================================
   02. GLOBAL WIDTH SAFETY
   ========================================================================== */

html {
    max-width: 100%;
    overflow-x: hidden;
}

body {
    max-width: 100%;
    overflow-x: hidden;
}

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

img {
    height: auto;
}

iframe {
    border: 0;
}


/* ==========================================================================
   03. LARGE DESKTOP
   ========================================================================== */

@media (min-width: 1201px) {

    .container,
    .page-container,
    .app-container,
    .main-container {
        width: 100%;
        max-width: 1440px;
        margin-inline: auto;
    }

    .content-grid,
    .dashboard-grid {
        gap: 24px;
    }
}


/* ==========================================================================
   04. DESKTOP / LAPTOP
   ========================================================================== */

@media (max-width: 1200px) {

    :root {
        --responsive-page-padding: 20px;
    }

    .container,
    .page-container,
    .app-container,
    .main-container {
        max-width: 100%;
    }

    .content-grid,
    .dashboard-grid {
        gap: 18px;
    }

    .two-column,
    .two-col,
    .content-two-column {
        grid-template-columns:
            minmax(0, 1fr)
            minmax(260px, 340px);
    }
}


/* ==========================================================================
   05. TABLET
   ========================================================================== */

@media (max-width: 1024px) {

    :root {
        --responsive-page-padding: 20px;
        --responsive-gap: 18px;
    }

    /* ----------------------------------------------------------------------
       Main application layout
       ---------------------------------------------------------------------- */

    .app-layout,
    .user-app-layout,
    .dashboard-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }

    /* ----------------------------------------------------------------------
       Sidebar
       ---------------------------------------------------------------------- */

    .sidebar {
        width: min(
            var(--responsive-sidebar-width),
            82vw
        );
    }

    .sidebar.is-open,
    .sidebar.open,
    .sidebar[data-state="open"] {
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar-overlay,
    .app-sidebar-overlay {
        display: block;
    }

    /* ----------------------------------------------------------------------
       Generic grids
       ---------------------------------------------------------------------- */

    .grid-4,
    .grid-cols-4,
    .four-column {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .grid-3,
    .grid-cols-3,
    .three-column {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    .dashboard-grid,
    .content-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /* ----------------------------------------------------------------------
       Search / results
       ---------------------------------------------------------------------- */

    .search-layout,
    .results-layout {
        grid-template-columns:
            minmax(220px, 280px)
            minmax(0, 1fr);
    }

    /* ----------------------------------------------------------------------
       Forms
       ---------------------------------------------------------------------- */

    .form-grid,
    .form-row,
    .fields-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /* ----------------------------------------------------------------------
       Tables
       ---------------------------------------------------------------------- */

    .table-responsive {
        width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .table-responsive > table {
        min-width: 700px;
    }

    /* ----------------------------------------------------------------------
       Modal
       ---------------------------------------------------------------------- */

    .modal-dialog,
    .modal-content {
        width: min(
            calc(100vw - 40px),
            700px
        );
    }
}


/* ==========================================================================
   06. TABLET PORTRAIT
   ========================================================================== */

@media (max-width: 900px) {

    /* ----------------------------------------------------------------------
       Header
       ---------------------------------------------------------------------- */

    .app-header,
    .site-header,
    .user-header {
        min-height: 60px;
    }

    .header-search,
    .topbar-search {
        max-width: 320px;
    }

    /* ----------------------------------------------------------------------
       Page header
       ---------------------------------------------------------------------- */

    .page-header,
    .section-header,
    .content-header {
        gap: 14px;
    }

    /* ----------------------------------------------------------------------
       Two-column layouts
       ---------------------------------------------------------------------- */

    .two-column,
    .two-col,
    .content-two-column,
    .profile-layout,
    .settings-layout,
    .security-layout,
    .support-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }

    /* ----------------------------------------------------------------------
       Cards
       ---------------------------------------------------------------------- */

    .card-grid,
    .cards-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /* ----------------------------------------------------------------------
       Statistics
       ---------------------------------------------------------------------- */

    .stats-grid,
    .statistics-grid,
    .metric-grid {
        grid-template-columns:
            repeat(2, minmax(0, 1fr));
    }

    /* ----------------------------------------------------------------------
       Navigation
       ---------------------------------------------------------------------- */

    .tabs,
    .tab-list,
    .page-tabs {
        overflow-x: auto;
        white-space: nowrap;
        scrollbar-width: thin;
    }

    .tabs > *,
    .tab-list > *,
    .page-tabs > * {
        flex: 0 0 auto;
    }
}


/* ==========================================================================
   07. MOBILE — 768px
   ========================================================================== */

@media (max-width: 768px) {

    :root {
        --responsive-page-padding: 16px;
        --responsive-gap: 14px;
    }

    /* ----------------------------------------------------------------------
       Application shell
       ---------------------------------------------------------------------- */

    .app-container,
    .page-container,
    .main-container,
    .container {
        width: 100%;
        max-width: 100%;
    }

    .main-content,
    .app-content,
    .page-content {
        min-width: 0;
    }

    /* ----------------------------------------------------------------------
       Sidebar
       ---------------------------------------------------------------------- */

    .sidebar {
        position: fixed;
        inset-block: 0;
        inset-inline-start: 0;
        z-index: 1000;
        width: min(
            var(--responsive-sidebar-width),
            86vw
        );

        transform: translateX(-105%);
        visibility: hidden;

        transition:
            transform 180ms ease,
            visibility 180ms ease;
    }

    .sidebar.is-open,
    .sidebar.open,
    .sidebar[data-state="open"] {
        transform: translateX(0);
        visibility: visible;
    }

    .sidebar-overlay,
    .app-sidebar-overlay {
        position: fixed;
        inset: 0;
        z-index: 999;
        display: none;
        background: rgba(15, 23, 42, 0.45);
    }

    .sidebar-overlay.is-visible,
    .sidebar-overlay.is-open,
    .app-sidebar-overlay.is-visible,
    .app-sidebar-overlay.is-open {
        display: block;
    }

    /* ----------------------------------------------------------------------
       Header
       ---------------------------------------------------------------------- */

    .app-header,
    .site-header,
    .user-header {
        position: sticky;
        top: 0;
        z-index: 900;
    }

    .header-inner,
    .topbar-inner {
        min-width: 0;
    }

    .header-search,
    .topbar-search {
        max-width: none;
        flex: 1 1 auto;
    }

    .header-actions,
    .topbar-actions {
        gap: 6px;
    }

    /* ----------------------------------------------------------------------
       Page headers
       ---------------------------------------------------------------------- */

    .page-header,
    .section-header,
    .content-header {
        flex-direction: column;
        align-items: stretch;
    }

    .page-header-actions,
    .section-header-actions,
    .content-header-actions {
        justify-content: flex-start;
        width: 100%;
    }

    /* ----------------------------------------------------------------------
       Generic grids
       ---------------------------------------------------------------------- */

    .grid-4,
    .grid-cols-4,
    .four-column,
    .grid-3,
    .grid-cols-3,
    .three-column,
    .grid-2,
    .grid-cols-2,
    .two-column-grid,
    .two-column,
    .two-col {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .dashboard-grid,
    .content-grid,
    .card-grid,
    .cards-grid,
    .stats-grid,
    .statistics-grid,
    .metric-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    /* ----------------------------------------------------------------------
       Search layout
       ---------------------------------------------------------------------- */

    .search-layout,
    .results-layout,
    .search-results-layout {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .search-filters,
    .filter-panel {
        width: 100%;
    }

    /* ----------------------------------------------------------------------
       Forms
       ---------------------------------------------------------------------- */

    .form-grid,
    .form-row,
    .fields-grid {
        grid-template-columns:
            minmax(0, 1fr);
    }

    .form-field-full,
    .field-full,
    .form-group-full {
        grid-column: auto;
    }

    /* ----------------------------------------------------------------------
       Form actions
       ---------------------------------------------------------------------- */

    .form-actions,
    .form-footer,
    .page-actions,
    .section-actions {
        flex-wrap: wrap;
    }

    /* ----------------------------------------------------------------------
       Buttons
       ---------------------------------------------------------------------- */

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

    /* ----------------------------------------------------------------------
       Tables
       ---------------------------------------------------------------------- */

    .table-wrapper,
    .table-responsive,
    .responsive-table {
        width: 100%;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-inline: contain;
    }

    .table-wrapper > table,
    .table-responsive > table,
    .responsive-table > table {
        min-width: 680px;
    }

    /* ----------------------------------------------------------------------
       Modal
       ---------------------------------------------------------------------- */

    .modal {
        padding: 12px;
    }

    .modal-dialog,
    .modal-content {
        width: 100%;
        max-width: 100%;
        max-height: calc(100dvh - 24px);
    }

    /* ----------------------------------------------------------------------
       Pagination
       ---------------------------------------------------------------------- */

    .pagination {
        flex-wrap: wrap;
        justify-content: center;
    }

    /* ----------------------------------------------------------------------
       User menu
       ---------------------------------------------------------------------- */

    .user-menu,
    .notification-panel {
        max-width: calc(100vw - 24px);
    }
}


/* ==========================================================================
   08. MOBILE — 640px
   ========================================================================== */

@media (max-width: 640px) {

    /* ----------------------------------------------------------------------
       Page spacing
       ---------------------------------------------------------------------- */

    .page,
    .page-container,
    .app-container,
    .main-container,
    .container {
        padding-inline: var(
            --responsive-mobile-padding
        );
    }

    /* ----------------------------------------------------------------------
       Header
       ---------------------------------------------------------------------- */

    .header-inner,
    .topbar-inner {
        gap: 8px;
    }

    .header-search,
    .topbar-search {
        order: 3;
        flex-basis: 100%;
        width: 100%;
    }

    .header-actions,
    .topbar-actions {
        margin-inline-start: auto;
    }

    /* ----------------------------------------------------------------------
       Logo
       ---------------------------------------------------------------------- */

    .brand-text,
    .logo-text {
        max-width: 150px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ----------------------------------------------------------------------
       Page title
       ---------------------------------------------------------------------- */

    .page-title,
    .section-title,
    .content-title {
        font-size: 1.3rem;
    }

    .page-subtitle,
    .section-description,
    .content-description {
        font-size: 0.84rem;
    }

    /* ----------------------------------------------------------------------
       Cards
       ---------------------------------------------------------------------- */

    .card,
    .panel {
        border-radius: 10px;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-inline: 16px;
    }

    /* ----------------------------------------------------------------------
       Stats
       ---------------------------------------------------------------------- */

    .stat-card,
    .metric-card {
        min-width: 0;
    }

    /* ----------------------------------------------------------------------
       Navigation
       ---------------------------------------------------------------------- */

    .navigation,
    .main-navigation,
    .tabs,
    .tab-list {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* ----------------------------------------------------------------------
       Dropdowns
       ---------------------------------------------------------------------- */

    .dropdown-menu {
        max-width: calc(100vw - 24px);
    }

    /* ----------------------------------------------------------------------
       Alerts
       ---------------------------------------------------------------------- */

    .alert {
        align-items: flex-start;
    }

    /* ----------------------------------------------------------------------
       Modal
       ---------------------------------------------------------------------- */

    .modal {
        align-items: flex-end;
        padding: 0;
    }

    .modal-dialog,
    .modal-content {
        width: 100%;
        max-width: 100%;
        margin: 0;
        border-radius: 16px 16px 0 0;
    }

    /* ----------------------------------------------------------------------
       Pagination
       ---------------------------------------------------------------------- */

    .pagination {
        gap: 5px;
    }

    .pagination .page-link {
        min-width: 36px;
        min-height: 36px;
    }
}


/* ==========================================================================
   09. SMALL MOBILE — 480px
   ========================================================================== */

@media (max-width: 480px) {

    /* ----------------------------------------------------------------------
       Header
       ---------------------------------------------------------------------- */

    .header-inner,
    .topbar-inner {
        min-height: 54px;
    }

    .brand-text,
    .logo-text {
        max-width: 120px;
    }

    /* ----------------------------------------------------------------------
       Page actions
       ---------------------------------------------------------------------- */

    .page-header-actions,
    .section-header-actions,
    .content-header-actions,
    .form-actions,
    .form-footer {
        width: 100%;
    }

    .page-header-actions > *,
    .section-header-actions > *,
    .content-header-actions > * {
        flex: 1 1 auto;
    }

    /* ----------------------------------------------------------------------
       Button groups
       ---------------------------------------------------------------------- */

    .button-group,
    .btn-group {
        width: 100%;
        flex-direction: column;
    }

    .button-group > *,
    .btn-group > * {
        width: 100%;
    }

    /* ----------------------------------------------------------------------
       Forms
       ---------------------------------------------------------------------- */

    .form-actions {
        flex-direction: column;
        align-items: stretch;
    }

    .form-actions > * {
        width: 100%;
    }

    /* ----------------------------------------------------------------------
       Tables
       ---------------------------------------------------------------------- */

    .table-responsive > table,
    .table-wrapper > table,
    .responsive-table > table {
        min-width: 620px;
    }

    /* ----------------------------------------------------------------------
       List rows
       ---------------------------------------------------------------------- */

    .list-item,
    .list-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .list-item-actions,
    .list-row-actions {
        width: 100%;
        justify-content: flex-start;
    }
}


/* ==========================================================================
   10. EXTRA SMALL DEVICES — 360px
   ========================================================================== */

@media (max-width: 360px) {

    :root {
        --responsive-mobile-padding: 12px;
    }

    .page-title,
    .section-title,
    .content-title {
        font-size: 1.18rem;
    }

    .card-header,
    .card-body,
    .card-footer {
        padding-inline: 13px;
    }

    .header-actions,
    .topbar-actions {
        gap: 3px;
    }

    .pagination .page-link {
        min-width: 32px;
        min-height: 32px;
        padding-inline: 7px;
    }
}


/* ==========================================================================
   11. LANDSCAPE MOBILE
   ========================================================================== */

@media (max-width: 768px) and (orientation: landscape) {

    .sidebar {
        width: 280px;
    }

    .modal-dialog,
    .modal-content {
        max-height: calc(100dvh - 16px);
    }

    .modal-body {
        overflow-y: auto;
        max-height: calc(100dvh - 140px);
    }
}


/* ==========================================================================
   12. TOUCH DEVICES
   ========================================================================== */

@media (hover: none) and (pointer: coarse) {

    a,
    button,
    input,
    select,
    textarea,
    [role="button"] {
        -webkit-tap-highlight-color: transparent;
    }

    .navigation-link,
    .nav-link,
    .sidebar-link,
    .tab-link {
        min-height: 42px;
    }

    .dropdown-item {
        min-height: 42px;
    }
}


/* ==========================================================================
   13. ACCESSIBILITY — REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}


/* ==========================================================================
   14. ACCESSIBILITY — HIGH CONTRAST
   ========================================================================== */

@media (prefers-contrast: more) {

    .card,
    .panel,
    .modal-content,
    .dropdown-menu,
    .form-control,
    .form-select {
        border-width: 2px;
    }

    .nav-link,
    .sidebar-link,
    .tab-link,
    .button,
    .btn {
        outline-offset: 2px;
    }
}


/* ==========================================================================
   15. SAFE AREA — MOBILE DEVICES
   ========================================================================== */

@supports (padding: env(safe-area-inset-bottom)) {

    .app-footer,
    .mobile-footer,
    .bottom-navigation {
        padding-bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            );
    }

    .sidebar {
        padding-bottom:
            max(
                12px,
                env(safe-area-inset-bottom)
            );
    }

    .modal-dialog,
    .modal-content {
        padding-bottom:
            env(safe-area-inset-bottom);
    }
}


/* ==========================================================================
   16. RESPONSIVE UTILITY CLASSES
   ========================================================================== */

/* Hide on mobile */
.hide-mobile {
    display: initial;
}

.show-mobile {
    display: none;
}

/* Hide on tablet */
.hide-tablet {
    display: initial;
}

.show-tablet {
    display: none;
}

@media (max-width: 768px) {

    .hide-mobile {
        display: none !important;
    }

    .show-mobile {
        display: initial !important;
    }

    .hide-tablet {
        display: none !important;
    }

    .show-tablet {
        display: initial !important;
    }
}


/* ==========================================================================
   17. RESPONSIVE TEXT UTILITIES
   ========================================================================== */

@media (max-width: 640px) {

    .text-center-mobile {
        text-align: center !important;
    }

    .text-left-mobile {
        text-align: left !important;
    }

    .text-right-mobile {
        text-align: right !important;
    }
}


/* ==========================================================================
   18. RESPONSIVE FLEX UTILITIES
   ========================================================================== */

@media (max-width: 640px) {

    .stack-mobile {
        flex-direction: column !important;
        align-items: stretch !important;
    }

    .wrap-mobile {
        flex-wrap: wrap !important;
    }

    .full-width-mobile {
        width: 100% !important;
    }
}


/* ==========================================================================
   19. RESPONSIVE SPACING UTILITIES
   ========================================================================== */

@media (max-width: 640px) {

    .no-padding-mobile {
        padding: 0 !important;
    }

    .no-margin-mobile {
        margin: 0 !important;
    }

    .compact-mobile {
        padding: 12px !important;
    }
}


/* ==========================================================================
   20. PRINT SAFETY
   ========================================================================== */

@media print {

    .sidebar,
    .sidebar-overlay,
    .app-sidebar-overlay,
    .mobile-navigation,
    .bottom-navigation,
    .header-actions,
    .topbar-actions,
    .page-header-actions,
    .section-header-actions,
    .form-actions,
    .pagination {
        display: none !important;
    }

    .main-content,
    .app-content,
    .page-content {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .card,
    .panel,
    .modal-content {
        box-shadow: none !important;
    }

    .table-responsive,
    .table-wrapper,
    .responsive-table {
        overflow: visible !important;
    }

    .table-responsive > table,
    .table-wrapper > table,
    .responsive-table > table {
        min-width: 0 !important;
        width: 100% !important;
    }
}