/**
 * Heliat — adaptation multi-écrans (mobile, tablette, desktop)
 * Breakpoints : --bp-sm 600px | --bp-md 900px | --bp-lg 1100px
 */

:root {
    --bp-sm: 600px;
    --bp-md: 900px;
    --bp-lg: 1100px;
    --safe-top: env(safe-area-inset-top, 0px);
    --safe-right: env(safe-area-inset-right, 0px);
    --safe-bottom: env(safe-area-inset-bottom, 0px);
    --safe-left: env(safe-area-inset-left, 0px);
    --touch-min: 2.75rem;
}

/* ——— Base cross-navigateurs ——— */
.app-layout {
    min-height: 100vh;
    min-height: 100dvh;
}

.app-viewport {
    min-width: 0;
    overflow-x: clip;
}

img,
video,
svg:not(.icon svg):not(.dash-chart-svg) {
    max-width: 100%;
    height: auto;
}

.app-main,
.auth-panel {
    padding-left: max(var(--content-pad-x), var(--safe-left));
    padding-right: max(var(--content-pad-x), var(--safe-right));
}

.mobile-topbar {
    padding-top: max(0.65rem, var(--safe-top));
    padding-left: max(1rem, var(--safe-left));
    padding-right: max(1rem, var(--safe-right));
}

.mobile-topbar-title {
    flex: 1;
    min-width: 0;
}

.mobile-topbar-actions {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-shrink: 0;
}

/* ——— Typographie fluide ——— */
.page-header h1 {
    font-size: clamp(1.25rem, 4vw, 1.85rem);
    overflow-wrap: anywhere;
}

.panel h2,
.study-panel h2 {
    font-size: clamp(1.05rem, 3vw, 1.35rem);
}

/* ——— Défilement horizontal tableaux ——— */
.table-scroll,
.dpgf-table-wrap,
.table-responsive {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overflow-y: visible;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    scrollbar-gutter: stable;
}

.dpgf-table-wrap.is-scrollable {
    position: relative;
}

.dpgf-table-wrap.is-scrollable::after,
.table-scroll.is-scrollable::after {
    content: "Faites défiler →";
    position: sticky;
    left: 50%;
    bottom: 0.35rem;
    transform: translateX(-50%);
    display: inline-block;
    padding: 0.2rem 0.55rem;
    font-size: 0.68rem;
    font-weight: 600;
    color: #475569;
    background: rgba(255, 255, 255, 0.92);
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    pointer-events: none;
    opacity: 0.85;
    z-index: 2;
}

@media (min-width: 901px) {
    .dpgf-table-wrap.is-scrollable::after,
    .table-scroll.is-scrollable::after {
        display: none;
    }
}

/* ——— Formulaires tactiles (évite le zoom iOS) ——— */
@media (max-width: 900px) {
    input[type="text"],
    input[type="search"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    input[type="tel"],
    input[type="url"],
    select,
    textarea,
    .dpgf-inline-field {
        font-size: max(16px, 1rem);
    }

    .btn,
    .btn-icon,
    .study-tab,
    .sidebar-link {
        min-height: var(--touch-min);
    }

    .btn-sm {
        min-height: 2.25rem;
        padding-top: 0.4rem;
        padding-bottom: 0.4rem;
    }

    .page-header .actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .page-header .actions .btn {
        flex: 1 1 auto;
        min-width: min(100%, 10rem);
    }

    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 9.5rem), 1fr));
        gap: 0.65rem;
    }

    .stat-card {
        padding: 0.85rem 0.9rem 0.85rem 3.25rem;
    }

    .study-tabs {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        scrollbar-width: thin;
        gap: 0.25rem;
    }

    .study-tab {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .workflow-strip {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        overscroll-behavior-x: contain;
        gap: 0.35rem;
        padding-bottom: 0.25rem;
        scrollbar-width: thin;
    }

    .workflow-strip-step {
        flex-shrink: 0;
        white-space: nowrap;
    }

    .workflow-strip-sep {
        flex-shrink: 0;
    }

    .form-grid {
        grid-template-columns: 1fr;
    }

    .panel,
    .study-panel {
        padding: 1rem;
        min-width: 0;
    }

    .dpgf-legend {
        flex-wrap: wrap;
        gap: 0.35rem;
    }

    .dpgf-devis-summary {
        min-width: 0;
    }

    .confirm-dialog,
    .line-edit-dialog {
        width: min(94vw, 100%);
        max-width: calc(100vw - var(--safe-left) - var(--safe-right) - 1rem);
        margin: max(0.5rem, var(--safe-top)) auto max(0.5rem, var(--safe-bottom));
    }

    .line-edit-grid--ident,
    .line-edit-grid--metre {
        grid-template-columns: 1fr;
    }

    .line-edit-pricing__labels,
    .line-edit-pricing__inputs {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .line-edit-dialog__footer {
        flex-direction: column-reverse;
        align-items: stretch;
    }

    .line-edit-dialog__footer .btn {
        width: 100%;
    }

    .devis-layout {
        grid-template-columns: 1fr;
    }

    .devis-layout__nav {
        position: static;
    }

    .devis-nav-list {
        flex-direction: row;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .devis-nav-item {
        flex-shrink: 0;
        min-width: 8.5rem;
    }

    .detail-grid {
        grid-template-columns: 1fr;
    }

    .auth-panel {
        padding-bottom: max(1.5rem, var(--safe-bottom));
    }
}

@media (max-width: 600px) {
    .page-header .actions .btn {
        width: 100%;
        min-width: 0;
    }

    .dpgf-col-bulk__input {
        min-width: 3rem;
    }

    .dpgf-col-bulk__btn {
        min-width: var(--touch-min);
        min-height: var(--touch-min);
    }

    .line-edit-pricing__labels span:nth-child(n+3),
    .line-edit-pricing__inputs input:nth-child(n+3) {
        grid-column: span 1;
    }

    .sales-module__header {
        flex-direction: column;
        align-items: stretch;
    }
}

/* ——— Tablette paysage ——— */
@media (min-width: 601px) and (max-width: 1100px) {
    .stats-grid {
        grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    }

    .devis-layout {
        grid-template-columns: minmax(11rem, 13rem) minmax(0, 1fr);
    }
}

/* ——— Préférences utilisateur ——— */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}