/**
 * Chakula Smart — Responsive foundation
 * Single source for breakpoints, safe areas, touch targets, and layout guards.
 * Load after dark-mode.css in head-assets.php (global, all pages).
 */

:root {
    /* Bootstrap 5.3–aligned breakpoints */
    --bp-xs: 375px;
    --bp-sm: 576px;
    --bp-md: 768px;
    --bp-lg: 992px;
    --bp-xl: 1200px;
    --bp-xxl: 1400px;

    /* Device safe areas (notched phones, home indicator) */
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --safe-right: env(safe-area-inset-right, 0px);

    --touch-min: 44px;
    --content-max: 1320px;
    --dash-content-max: 1280px;

    /* Mobile rhythm — fluid gutters & section spacing */
    --page-gutter: clamp(0.75rem, 4.5vw, 1.25rem);
    --section-y: clamp(2.25rem, 7vw, 4rem);
    --mobile-card-radius: 14px;
    --mobile-stack-gap: 0.75rem;
}

/* ── Global overflow & text scaling ── */
html {
    overflow-x: clip;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

body {
    overflow-x: clip;
    min-height: 100vh;
    min-height: 100dvh;
}

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

/* Readable line lengths & no overflow from long strings */
p,
li,
td,
th,
label,
.btn,
.badge {
    overflow-wrap: anywhere;
    word-break: break-word;
}

/* Chart.js canvases — size from parent wrapper, not global canvas rules */
canvas.dash-stat-spark,
canvas.dash-chart-canvas,
.chart-container canvas,
.chart-container-app canvas,
.dash-chart-wrap canvas,
.admin-chart-wrap canvas,
.analytics-chart-wrap canvas {
    max-width: none;
    display: block;
}

/* Prevent flex/grid children from forcing horizontal scroll */
.min-width-0,
.dash-main,
.dash-content,
.app-page-header-text,
.chat-panel,
.contacts-panel {
    min-width: 0;
}

/* ── Touch-friendly controls (phones & tablets) ── */
a,
button,
[role="button"],
input[type="submit"],
input[type="button"],
.dropdown-item,
.chakula-nav__link,
.chakula-nav__btn {
    -webkit-tap-highlight-color: transparent;
}

@media (hover: none) and (pointer: coarse) {
    .btn,
    .btn-sm,
    .dash-nav-link,
    .dash-icon-btn,
    .dash-mobile-toggle,
    .dash-fab-btn,
    .navbar-app .nav-link,
    .chakula-nav__link,
    .chakula-nav__btn,
    .app-filter-bar .btn,
    .like-btn,
    .dropdown-item,
    a[data-auth-modal],
    .back-to-top {
        min-height: var(--touch-min);
        touch-action: manipulation;
    }

    .dash-icon-btn,
    .dash-mobile-toggle {
        min-width: var(--touch-min);
    }

    /* Reduce hover lift on touch — avoids sticky :hover states */
    .app-tile-card:hover,
    .ui-stat-tile:hover,
    .card:hover,
    .trust-item:hover,
    .step-card:hover,
    .testimonial-card:hover {
        transform: none;
    }
}

/* ── Scrollable tables (staff + user dashboards) ── */
.app-table-panel,
.table-responsive-wrap,
.table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
}

.app-table-panel .table {
    min-width: 520px;
}

/* ── Form inputs: 16px prevents iOS zoom on focus ── */
@media (max-width: 767.98px) {
    input.form-control,
    input.form-select,
    select.form-select,
    textarea.form-control,
    .dash-topbar-search input {
        font-size: max(16px, 1rem);
    }

    .form-control,
    .form-select {
        border-radius: 10px;
    }
}

/* ── Bootstrap grid: tighter gutters on phones ── */
@media (max-width: 767.98px) {
    .container,
    .container-fluid {
        --bs-gutter-x: 1rem;
    }

    .row {
        --bs-gutter-x: 0.85rem;
        --bs-gutter-y: 0.85rem;
    }

    .row > [class*="col-"]:last-child {
        margin-bottom: 0;
    }

    .card,
    .card-body {
        border-radius: var(--mobile-card-radius);
    }

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

/* ── Dashboard shell: conflict-free backgrounds ── */
body.dash-user-app {
    background: var(--dash-surface, #f4f7f5) !important;
}

body.dash-user-app::before,
body.dash-user-app::after {
    display: none !important;
}

body.dash-sidebar-open,
body.landing-nav-open,
body.chakula-nav-menu-open {
    overflow: hidden;
    touch-action: none;
}

/* ── User dashboard: safe areas & ultra-wide laptops ── */
.dash-user-app .dash-topbar {
    padding-top: max(0.85rem, var(--safe-top));
    padding-left: max(1.5rem, var(--safe-left));
    padding-right: max(1.5rem, var(--safe-right));
}

.dash-user-app .dash-content {
    padding-left: max(1.5rem, var(--safe-left));
    padding-right: max(1.5rem, var(--safe-right));
    padding-bottom: max(5rem, calc(4rem + var(--safe-bottom)));
}

.dash-user-app .dash-fab-wrap {
    bottom: max(1.5rem, calc(0.75rem + var(--safe-bottom)));
    right: max(1.5rem, calc(0.75rem + var(--safe-right)));
}

.dash-user-app .dash-sidebar {
    padding-top: var(--safe-top);
    padding-bottom: var(--safe-bottom);
}

@media (min-width: 1200px) {
    .dash-user-app .dash-content {
        max-width: var(--dash-content-max);
    }
}

@media (min-width: 1400px) {
    .dash-user-app .dash-main {
        align-items: center;
    }

    .dash-user-app .dash-topbar,
    .dash-user-app .dash-content {
        width: 100%;
        max-width: calc(var(--dash-content-max) + var(--dash-sidebar-w, 260px));
    }
}

/* ── Tablet (768–991): tighter topbar, readable stats ── */
@media (min-width: 768px) and (max-width: 991.98px) {
    .dash-user-app .dash-topbar {
        padding-left: 1rem;
        padding-right: 1rem;
        gap: 0.65rem;
    }

    .dash-user-app .dash-stat-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .app-page-header {
        align-items: center;
    }
}

/* ── Phone: stack headers, full-width actions ── */
@media (max-width: 767.98px) {
    .app-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1.15rem;
    }

    .app-page-header h1 {
        font-size: clamp(1.25rem, 5.5vw, 1.5rem);
        line-height: 1.25;
    }

    .app-page-header p {
        font-size: 0.875rem;
        line-height: 1.45;
    }

    .app-page-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .app-page-header-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }

    .dash-user-app .dash-topbar {
        padding: 0.65rem max(0.75rem, var(--safe-left)) 0.65rem max(0.75rem, var(--safe-right));
        padding-top: max(0.65rem, var(--safe-top));
        gap: 0.5rem;
    }

    .dash-user-app .dash-topbar-actions .dropdown-toggle::after {
        display: none;
    }

    .dash-user-app .dash-motivation {
        flex-direction: column;
        align-items: flex-start;
        text-align: left;
        padding: 0.85rem 1rem;
        border-radius: var(--mobile-card-radius);
    }

    .dash-user-app .dash-content {
        padding-left: max(var(--page-gutter), var(--safe-left));
        padding-right: max(var(--page-gutter), var(--safe-right));
        padding-top: 0.85rem;
    }

    .app-filter-bar {
        display: flex;
        flex-wrap: nowrap;
        gap: 0.45rem;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        padding-bottom: 0.25rem;
        margin-bottom: 0.75rem;
        scrollbar-width: none;
    }

    .app-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .app-filter-bar .btn {
        flex: 0 0 auto;
        white-space: nowrap;
        padding-left: 0.85rem;
        padding-right: 0.85rem;
    }

    .app-card-grid {
        gap: var(--mobile-stack-gap);
    }

    .app-tile-card {
        padding: 0.95rem 1rem;
    }

    .feed-post-card .post-head {
        padding: 0.85rem 1rem;
    }
}

@media (max-width: 575.98px) {
    .dash-user-app .dash-stat-grid {
        grid-template-columns: 1fr;
    }

    .app-stat-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.65rem;
    }

    .app-page-header-actions .btn-group {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
    }

    .dash-user-app .chart-container,
    .dash-user-app .dash-chart-wrap {
        height: min(220px, 42vw);
        min-height: 180px;
    }
}

@media (max-width: 380px) {
    .app-stat-row {
        grid-template-columns: 1fr;
    }
}

/* ── Messages (user dash shell) ── */
@media (max-width: 767.98px) {
    .dash-user-app.messages-page .dash-content {
        padding-bottom: max(1rem, var(--safe-bottom));
        display: flex;
        flex-direction: column;
        min-height: 0;
    }

    .dash-user-app.messages-page .chat-shell {
        flex: 1 1 auto;
        min-height: calc(100dvh - 10.5rem);
        height: calc(100dvh - 10.5rem);
    }
}

/* ── Scanner page in dash shell ── */
@media (max-width: 1199.98px) {
    .dash-user-app.scanner-page .dash-content {
        padding-left: max(0.5rem, var(--safe-left));
        padding-right: max(0.5rem, var(--safe-right));
        padding-bottom: max(0.75rem, var(--safe-bottom));
        overflow: visible;
        touch-action: pan-y;
    }

    .dash-user-app.scanner-page .dash-main {
        overflow: visible;
    }

    .scanner-page .concierge-scan-shell {
        border-radius: 16px !important;
    }
}

/* ── Staff / app navbar pages ── */
@media (max-width: 991.98px) {
    body:not(.landing-page):not(.dash-user-app) main.container,
    body:not(.landing-page):not(.dash-user-app) > .container {
        padding-left: max(var(--page-gutter), var(--safe-left));
        padding-right: max(var(--page-gutter), var(--safe-right));
        padding-bottom: max(1.5rem, var(--safe-bottom));
    }

    body:not(.landing-page):not(.dash-user-app) .navbar-app {
        padding-left: max(0.5rem, var(--safe-left));
        padding-right: max(0.5rem, var(--safe-right));
    }

    body.fx-app:not(.landing-page):not(.dash-user-app) .app-page-header {
        flex-direction: column;
        align-items: stretch;
        gap: 0.75rem;
        margin-bottom: 1.15rem;
        padding-left: 0;
        padding-right: 0;
    }

    body.fx-app:not(.landing-page):not(.dash-user-app) .app-page-header-actions {
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    body.fx-app:not(.landing-page):not(.dash-user-app) .app-page-header-actions .btn {
        flex: 1 1 auto;
        min-width: 0;
    }
}

@media (min-width: 1200px) {
    body:not(.landing-page):not(.dash-user-app) main.container,
    body:not(.landing-page):not(.dash-user-app) > .container {
        max-width: var(--content-max);
    }
}

/* ── Landing page: mobile layout & safe areas ── */
body.landing-page {
    padding-left: var(--safe-left);
    padding-right: var(--safe-right);
}

body.landing-page .chakula-nav {
    padding-top: var(--safe-top);
}

@media (max-width: 991.98px) {
    body.landing-page section {
        padding-top: var(--section-y) !important;
        padding-bottom: var(--section-y) !important;
    }

    body.landing-page section .container {
        padding-left: max(var(--page-gutter), 0.5rem);
        padding-right: max(var(--page-gutter), 0.5rem);
    }

    body.landing-page .section-header {
        margin-bottom: 1.35rem;
        text-align: center;
    }

    body.landing-page .section-title {
        font-size: clamp(1.35rem, 5.5vw, 1.75rem);
        line-height: 1.2;
        margin-bottom: 0.5rem;
    }

    body.landing-page .section-subtitle {
        font-size: clamp(0.875rem, 3.8vw, 1rem);
        line-height: 1.5;
        max-width: 36rem;
        margin-left: auto;
        margin-right: auto;
    }

    /* Trust bar — horizontal scroll on narrow screens */
    body.landing-page .trust-bar .container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: none;
    }

    body.landing-page .trust-bar .container::-webkit-scrollbar {
        display: none;
    }

    body.landing-page .trust-bar .row {
        flex-wrap: nowrap;
        justify-content: flex-start;
        min-width: min-content;
    }

    body.landing-page .trust-item {
        flex: 0 0 auto;
        white-space: nowrap;
        font-size: 0.82rem;
        padding: 0.45rem 0.85rem;
    }

    /* Cards stack cleanly */
    body.landing-page .step-card,
    body.landing-page .features .card,
    body.landing-page .testimonial-card {
        margin-bottom: var(--mobile-stack-gap);
        border-radius: var(--mobile-card-radius);
    }

    body.landing-page .how-it-works-section .row > [class*="col-"],
    body.landing-page #testimonials .row > [class*="col-"],
    body.landing-page #features-cards .row > [class*="col-"] {
        margin-bottom: var(--mobile-stack-gap);
    }

    body.landing-page footer {
        padding-top: 3rem;
        padding-bottom: max(1.75rem, calc(1rem + var(--safe-bottom)));
        clip-path: none;
        margin-top: 0;
    }

    body.landing-page footer .row > [class*="col-"] {
        margin-bottom: 1.5rem;
        text-align: center;
    }

    body.landing-page footer ul {
        margin-bottom: 0;
    }
}

@media (max-width: 767.98px) {
    body.landing-page header.hero.hero-lux .container.hero-content {
        padding-left: max(var(--page-gutter), 0.5rem);
        padding-right: max(var(--page-gutter), 0.5rem);
    }

    body.landing-page .hero-stats-minimal {
        gap: 0.65rem 1.25rem;
        justify-content: center;
    }

    body.landing-page .hero-stat-divider {
        display: none;
    }

    body.landing-page .cta-section {
        padding-left: var(--page-gutter);
        padding-right: var(--page-gutter);
        text-align: center;
    }

    body.landing-page .cta-section .btn {
        width: 100%;
        max-width: 20rem;
    }
}

@media (max-width: 575.98px) {
    body.landing-page .about .container,
    body.landing-page .about ul li {
        padding-left: 0;
        padding-right: 0;
    }

    body.landing-page .footer-brand {
        font-size: 1.25rem;
    }
}

/* Back-to-top: clear AI chat FAB on landing mobile */
@media (max-width: 520px) {
    body.landing-page .back-to-top {
        bottom: max(5.25rem, calc(4.75rem + var(--safe-bottom)));
        right: max(0.85rem, var(--safe-right));
        width: 46px;
        height: 46px;
        font-size: 1.1rem;
    }
}

/* ── Auth pages ── */
body.auth-page {
    padding:
        max(1rem, var(--safe-top))
        max(1rem, var(--safe-right))
        max(1rem, var(--safe-bottom))
        max(1rem, var(--safe-left));
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

@media (max-width: 575.98px) {
    body.auth-page {
        padding:
            max(0.75rem, var(--safe-top))
            max(0.75rem, var(--safe-right))
            max(0.75rem, var(--safe-bottom))
            max(0.75rem, var(--safe-left));
        justify-content: flex-start;
        padding-top: max(1.25rem, var(--safe-top));
    }

    body.auth-page .card,
    body.auth-page .auth-card {
        border-radius: var(--mobile-card-radius);
    }
}

/* ── Modal: full-screen friendly on small phones ── */
@media (max-width: 575.98px) {
    .modal-dialog {
        margin: max(0.5rem, var(--safe-top)) max(0.5rem, var(--safe-right)) max(0.5rem, var(--safe-bottom)) max(0.5rem, var(--safe-left));
        max-width: calc(100% - 1rem - var(--safe-left) - var(--safe-right));
    }

    .modal-dialog-scrollable .modal-content {
        max-height: calc(100dvh - 1rem - var(--safe-top) - var(--safe-bottom));
    }

    .modal-body {
        padding: 1rem;
    }
}

/* ── Landscape phones: reduce vertical pressure ── */
@media (max-height: 500px) and (orientation: landscape) {
    body.landing-page header.hero.hero-lux {
        padding-top: calc(var(--landing-nav-height, 3.25rem) + 0.35rem) !important;
        padding-bottom: 0.65rem !important;
    }

    body.landing-page .hero-lux-logo-stage {
        width: 56px;
        height: 56px;
    }

    .dash-user-app .dash-motivation {
        display: none;
    }

    .modal-dialog {
        margin-top: max(0.35rem, var(--safe-top));
        margin-bottom: max(0.35rem, var(--safe-bottom));
    }
}

/* ── Reduced motion (avoid duplicate animation conflicts) ── */
@media (prefers-reduced-motion: reduce) {
    .dash-sidebar,
    .dash-fab-menu,
    .dash-fab-btn,
    .reveal,
    .landing-section-visible .fx-reveal {
        transition: none !important;
        animation: none !important;
    }
}