/* V2.4 — couche responsive finale, chargée après les styles historiques. */

:root {
    --app-gutter: clamp(14px, 2.2vw, 36px);
    --app-sidebar-width: clamp(238px, 18vw, 270px);
}

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

body {
    min-width: 0;
}

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

img,
video {
    height: auto;
}

.app-shell,
.content,
.content > .container-fluid,
.row > *,
.card-pro,
.metric,
#v2Export,
.v2-print,
.export-document {
    min-width: 0;
    max-width: 100%;
}

.content {
    width: calc(100% - var(--app-sidebar-width));
}

.sidebar {
    flex: 0 0 var(--app-sidebar-width);
    width: var(--app-sidebar-width);
}

.content > .container-fluid {
    width: 100%;
    padding: 28px var(--app-gutter) 42px !important;
}

.page-title > div:first-child,
.topbar-user,
.operation-section-heading > div,
.export-brand-left,
.panel-heading > div,
.dashboard-section-title > div {
    min-width: 0;
}

.page-title h1,
.page-title p,
.card-pro,
.alert,
.form-label,
.topbar-user strong,
.topbar-user span,
.export-document,
.assembly-receipt-content,
.remittance-item,
.dashboard-action-list a {
    overflow-wrap: anywhere;
}

.btn {
    max-width: 100%;
    white-space: normal;
}

.input-group {
    min-width: 0;
    flex-wrap: nowrap;
}

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

textarea.form-control {
    resize: vertical;
}

.form-control[type="file"] {
    max-width: 100%;
    overflow: hidden;
}

.table-responsive,
.matrix-wrap,
.export-table-wrap {
    width: 100%;
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scrollbar-width: thin;
    -webkit-overflow-scrolling: touch;
}

.table-responsive > .table,
.matrix-wrap > table,
.export-table-wrap > table {
    width: max-content;
    min-width: 100%;
    margin-bottom: 0;
}

.table-responsive > .table th,
.table-responsive > .table td,
.matrix-wrap th,
.matrix-wrap td,
.export-table-wrap th,
.export-table-wrap td {
    max-width: 320px;
    overflow-wrap: anywhere;
}

.table-responsive > .table:has(tr > :nth-child(5)),
.export-table-wrap > table:has(tr > :nth-child(5)) {
    min-width: 680px;
}

.table-responsive > .table:has(tr > :nth-child(7)),
.export-table-wrap > table:has(tr > :nth-child(7)) {
    min-width: 880px;
}

.matrix-wrap > table,
.matrix-table,
.matrix-table-inverted {
    min-width: 760px;
}

.modal-dialog {
    width: auto;
    max-width: min(620px, calc(100vw - 28px));
    margin: 14px auto;
}

.modal-content {
    max-height: calc(100dvh - 28px);
    overflow: hidden;
}

.modal-body {
    overflow-y: auto;
    overscroll-behavior: contain;
}

.sidebar-backdrop {
    display: none;
}

.v2-paper-header {
    min-width: 0;
}

.v2-paper-header h2,
.v2-paper-header p,
.v2-document-ref {
    overflow-wrap: anywhere;
}

/* La gestion des utilisateurs reste fonctionnelle même si la grille Bootstrap
   est momentanément indisponible ou servie depuis un ancien cache PWA. */
.user-admin-grid {
    display: grid;
    grid-template-columns: minmax(0, 2fr) minmax(340px, 1fr);
    gap: 24px;
    align-items: start;
}

.user-list-panel,
.user-create-panel,
.user-list-card,
.user-create-card,
.user-create-form {
    min-width: 0;
}

.user-create-card {
    position: sticky;
    top: 92px;
}

.user-create-form .form-control,
.user-create-form .form-select {
    display: block;
    width: 100%;
    max-width: 100%;
}

.user-create-submit {
    width: 100%;
}

.remittance-fill-card {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    border-left: 4px solid #b8874f;
    background: linear-gradient(135deg, #f7fafc 0%, #fff 100%);
}

.remittance-fill-card p {
    color: var(--muted);
}

.remittance-fill-card .btn {
    flex: 0 0 auto;
}

.user-table-wrap .table {
    min-width: 660px;
}

.bilan-matrix-heading {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 18px;
    margin-bottom: 16px;
}

.bilan-matrix-heading h2,
.bilan-matrix-heading p {
    margin-top: 0;
}

.bilan-matrix-heading p {
    max-width: 820px;
    margin-bottom: 0;
    color: var(--muted);
}

.bilan-matrix-wrap {
    border: 1px solid var(--line);
    scrollbar-gutter: stable;
}

.bilan-matrix {
    min-width: max-content !important;
}

.bilan-scrollbar-top {
    position: sticky;
    top: 78px;
    z-index: 24;
    display: none;
    width: 100%;
    height: 19px;
    margin: 0 0 8px;
    overflow-x: scroll;
    overflow-y: hidden;
    border: 1px solid #c7d4e0;
    border-radius: 8px;
    background: #eef3f7;
    box-shadow: 0 4px 12px rgba(22, 52, 81, .08);
    scrollbar-color: #6f8498 #e5ecf2;
    scrollbar-width: auto;
}

.bilan-scrollbar-top.is-scrollable {
    display: block;
}

.bilan-scrollbar-top > div {
    height: 1px;
}

.bilan-matrix .bilan-city-row > th:first-child,
.bilan-matrix tbody > tr > th:first-child,
.bilan-matrix tfoot > tr > th:first-child {
    position: sticky;
    left: 0;
    z-index: 2;
    min-width: 210px;
    max-width: 260px;
    background: #f2f5f8;
    box-shadow: 1px 0 0 #d8e1ea;
}

.bilan-matrix tbody > tr > th:first-child {
    background: #fff;
}

.bilan-matrix .bilan-assembly-row > th,
.bilan-matrix tbody > tr > td:not(:last-child),
.bilan-matrix tfoot > tr > th:not(:first-child):not(:last-child) {
    min-width: 128px;
}

.bilan-matrix .bilan-city-row > th:last-child,
.bilan-matrix tbody > tr > td:last-child,
.bilan-matrix tfoot > tr > th:last-child {
    position: sticky;
    right: 0;
    z-index: 2;
    min-width: 150px;
    background: #edf3f8;
    box-shadow: -1px 0 0 #cbd8e4;
}

.bilan-matrix .bilan-city-row > th {
    z-index: 3;
    padding-top: 11px;
    padding-bottom: 10px;
    color: #fff;
    background: #163451;
    border-bottom: 2px solid #b8874f;
    font-size: 12px;
    letter-spacing: .045em;
    text-transform: uppercase;
}

.bilan-matrix .bilan-city-row > th:first-child,
.bilan-matrix .bilan-city-row > th:last-child,
.bilan-matrix tfoot th:first-child,
.bilan-matrix tfoot th:last-child {
    z-index: 4;
}

.bilan-matrix .bilan-city-row > th:first-child,
.bilan-matrix .bilan-city-row > th:last-child {
    background: #163451;
}

.bilan-matrix .bilan-city-row th > span {
    display: block;
    margin-bottom: 2px;
    color: #d9b47d;
    font-size: 8px;
    font-weight: 700;
    letter-spacing: .16em;
}

.bilan-matrix .bilan-assembly-row > th {
    position: static;
    z-index: 1;
    padding-top: 9px;
    padding-bottom: 9px;
    color: #29465f;
    background: #e8eef4;
    border-bottom-color: #cdd9e4;
    font-size: 11px;
    letter-spacing: .025em;
}

.bilan-matrix th > span,
.bilan-matrix th > small {
    display: block;
}

.bilan-matrix th > small {
    margin-top: 4px;
    color: #6b7b8d;
    font-size: 11px;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0;
}

.bilan-matrix td,
.bilan-matrix th {
    font-variant-numeric: tabular-nums lining-nums;
}

@media (min-width: 901px) {
    .sidebar {
        position: fixed !important;
        inset: 0 auto 0 0;
        z-index: 1030;
        width: var(--app-sidebar-width);
        height: 100vh !important;
        height: 100dvh !important;
        max-height: 100dvh;
    }

    .content {
        flex: none;
        width: calc(100% - var(--app-sidebar-width));
        margin-left: var(--app-sidebar-width);
    }
}

@media (min-width: 1800px) {
    .content > .container-fluid {
        max-width: 1720px;
        margin-inline: auto;
    }

    .v2-grid {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    }
}

@media (max-width: 1199.98px) {
    :root {
        --app-gutter: clamp(16px, 2vw, 26px);
    }

    .card-pro {
        padding: 20px;
    }

    .dashboard-quick-actions,
    .export-actions {
        align-items: stretch;
    }

    .developer-tools-grid,
    .password-page-grid {
        grid-template-columns: minmax(0, 1fr);
    }

    .category-create-card {
        position: static;
    }

    .user-admin-grid {
        grid-template-columns: 1fr;
    }

    .user-create-card {
        position: static;
    }

    .user-create-form {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0 16px;
    }

    .user-create-form .user-create-submit,
    .user-create-form .assembly-role-callout {
        grid-column: 1 / -1;
    }
}

@media (max-width: 900px) {
    body.sidebar-is-open {
        overflow: hidden;
        touch-action: none;
    }

    .app-shell {
        display: block;
        min-height: 100dvh;
    }

    .content {
        width: 100%;
        margin: 0 !important;
    }

    .sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        z-index: 1045;
        width: min(86vw, 310px);
        max-width: calc(100vw - 46px);
        height: 100dvh;
        padding-top: max(16px, env(safe-area-inset-top));
        padding-bottom: max(12px, env(safe-area-inset-bottom));
        transform: translate3d(-102%, 0, 0);
        box-shadow: 18px 0 45px rgba(8, 24, 40, .24);
        visibility: hidden;
        transition: transform .22s ease, visibility 0s linear .22s !important;
    }

    .sidebar.open {
        transform: translate3d(0, 0, 0);
        visibility: visible;
        transition: transform .22s ease, visibility 0s !important;
    }

    .sidebar-backdrop {
        position: fixed;
        inset: 0;
        z-index: 1040;
        display: block;
        width: 100%;
        height: 100%;
        padding: 0;
        border: 0;
        background: rgba(8, 24, 40, .48);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
        transition: opacity .2s ease, visibility 0s linear .2s;
    }

    body.sidebar-is-open .sidebar-backdrop {
        opacity: 1;
        visibility: visible;
        pointer-events: auto;
        transition: opacity .2s ease, visibility 0s;
    }

    .topbar {
        min-height: 64px;
        padding: 9px max(14px, env(safe-area-inset-right)) 9px max(14px, env(safe-area-inset-left));
    }

    .menu-btn {
        display: inline-grid;
        min-width: 44px;
        width: 44px;
        min-height: 44px;
        height: 44px;
        flex: 0 0 44px;
    }

    .content > .container-fluid {
        padding: 22px var(--app-gutter) 36px !important;
    }

    .page-title {
        flex-direction: row;
        align-items: flex-start;
        flex-wrap: wrap;
    }

    .page-title > div:first-child {
        flex: 1 1 300px;
    }

    .export-actions,
    .dashboard-quick-actions {
        flex: 1 1 100%;
        width: 100%;
    }

    .export-actions .btn,
    .dashboard-quick-actions .btn {
        flex: 1 1 190px;
    }

    .v2-grid {
        grid-template-columns: repeat(auto-fit, minmax(min(100%, 210px), 1fr));
    }

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

    .export-document {
        padding: clamp(18px, 3vw, 26px);
    }
}

@media (max-width: 767.98px) {
    :root {
        --app-gutter: 14px;
    }

    .content > .container-fluid {
        padding-top: 18px !important;
    }

    .page-title {
        margin-bottom: 18px;
    }

    .page-title h1 {
        font-size: clamp(24px, 7vw, 29px);
        line-height: 1.12;
    }

    .page-title p {
        margin-top: 5px;
        font-size: 14px;
    }

    .card-pro,
    .metric,
    .stats-filter-card {
        border-radius: 12px;
    }

    .card-pro {
        padding: 17px;
    }

    .metric {
        min-height: 0;
        padding: 17px;
    }

    .row.g-4 {
        --bs-gutter-y: 1rem;
    }

    .row.g-3 {
        --bs-gutter-y: .85rem;
    }

    .form-control,
    .form-select,
    .btn:not(.btn-sm) {
        min-height: 46px;
    }

    .v2-form-footer,
    .entry-form-footer,
    .operation-section-heading,
    .category-sync-panel,
    .imeg-auto-info,
    .imeg-wallet-hero,
    .assembly-accounting-rule,
    .receipt-imeg-note,
    .export-section-heading,
    .grand-envelope {
        align-items: stretch;
        flex-direction: column;
    }

    .v2-form-footer .btn,
    .entry-form-footer .btn,
    .category-sync-actions .btn,
    .validation-actions .btn {
        width: 100%;
    }

    .category-sync-actions,
    .validation-actions {
        width: 100%;
        display: grid;
        grid-template-columns: 1fr;
    }

    .income-batch-total,
    .assembly-pending-counter {
        width: 100%;
        min-width: 0;
        text-align: left;
    }

    .stats-filter-form,
    .assembly-export-filter {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .export-brand-header,
    .export-footer {
        align-items: flex-start;
        flex-direction: column;
    }

    .export-reference {
        width: 100%;
        padding: 10px 0 0;
        border-left: 0;
        border-top: 1px solid var(--export-line, #dce3eb);
        text-align: left;
    }

    .export-summary-band {
        align-items: flex-start;
        flex-direction: column;
    }

    .export-info-grid,
    .export-stats,
    .export-validation-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

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

    .table-responsive {
        position: relative;
        border-radius: 8px;
    }

    .table-responsive::after,
    .matrix-wrap::after,
    .export-table-wrap::after {
        content: "Défilez horizontalement si nécessaire →";
        position: sticky;
        left: 0;
        display: block;
        width: max-content;
        max-width: 100%;
        padding: 6px 8px 2px;
        color: #68778a;
        font-size: 11px;
        font-weight: 600;
    }

    .topbar-user strong {
        font-size: 15px;
    }

    .topbar-user span {
        font-size: 12px;
    }
}

@media (max-width: 575.98px) {
    .content > .container-fluid {
        padding-inline: 12px !important;
        padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
    }

    .topbar {
        padding-inline: 12px;
    }

    .topbar-user {
        overflow: hidden;
    }

    .topbar-user strong,
    .topbar-user span {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-title > div:first-child {
        flex-basis: 100%;
    }

    .bilan-matrix-heading {
        flex-direction: column;
    }

    .remittance-fill-card {
        align-items: stretch;
        flex-direction: column;
    }

    .remittance-fill-card .btn {
        width: 100%;
    }

    .bilan-scrollbar-top {
        top: 64px;
    }

    .bilan-matrix .bilan-city-row > th:first-child,
    .bilan-matrix tbody > tr > th:first-child,
    .bilan-matrix tfoot > tr > th:first-child {
        min-width: 165px;
        max-width: 190px;
    }

    .bilan-matrix .bilan-assembly-row > th,
    .bilan-matrix tbody > tr > td:not(:last-child),
    .bilan-matrix tfoot > tr > th:not(:first-child):not(:last-child) {
        min-width: 116px;
    }

    .export-actions {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .export-actions .btn {
        width: 100%;
        min-width: 0;
        padding-inline: 10px;
    }

    .v2-grid,
    .income-grid,
    .v2-metrics,
    .imeg-wallet-mini-stats,
    .dashboard-imeg-strip,
    .developer-count-grid {
        grid-template-columns: 1fr;
    }

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

    .user-create-form .user-create-submit,
    .user-create-form .assembly-role-callout {
        grid-column: auto;
    }

    .v2-metrics .card-pro {
        min-height: 104px;
    }

    .v2-amount-card {
        padding: 15px;
    }

    .stats-filter-form,
    .assembly-export-filter,
    .export-info-grid,
    .export-stats,
    .export-validation-grid,
    .envelope-grid {
        grid-template-columns: 1fr;
    }

    .assembly-export-intro,
    .pending-validation-heading,
    .dashboard-section-title,
    .panel-heading,
    .latest-shipment,
    .remittance-item,
    .tass-summary-list > div {
        align-items: flex-start;
        flex-direction: column;
    }

    .assembly-export-icon {
        display: none;
    }

    .assembly-receipt-card,
    .assembly-receipt-main,
    .assembly-receipt-side {
        grid-template-columns: 1fr;
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .assembly-receipt-ref,
    .assembly-receipt-side .btn {
        width: 100%;
    }

    .operation-switch {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .operation-switch-btn {
        min-width: 0;
        width: 100%;
        padding-inline: 8px;
    }

    .funding-row > [class*="col-"] {
        width: 100%;
    }

    .funding-row [data-remove-funding] {
        width: 100%;
    }

    .login-body {
        min-height: 100dvh;
        padding: max(14px, env(safe-area-inset-top)) 12px max(14px, env(safe-area-inset-bottom));
        align-items: center;
    }

    .login-card {
        width: 100%;
        max-width: 430px;
        padding: clamp(22px, 7vw, 30px);
        border-radius: 14px;
    }

    .login-card h1 {
        font-size: clamp(24px, 7vw, 28px);
    }

    .modal-dialog {
        max-width: calc(100vw - 16px);
        margin: 8px auto;
    }

    .modal-content {
        max-height: calc(100dvh - 16px);
        border-radius: 14px;
    }

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

    .modal-footer {
        display: grid;
        grid-template-columns: 1fr;
    }

    .modal-footer .btn {
        width: 100%;
        margin: 0;
    }

    .export-document,
    .v2-print {
        padding: 15px;
    }

    .export-logo {
        width: 46px;
        height: 46px;
        flex-basis: 46px;
    }

    .export-title-block h2 {
        font-size: clamp(23px, 7vw, 28px);
    }

    .grand-envelope b,
    .export-summary-band strong {
        white-space: normal;
        font-size: clamp(20px, 6vw, 25px);
    }
}

@media (max-width: 389.98px) {
    .content > .container-fluid {
        padding-inline: 10px !important;
    }

    .topbar {
        gap: 9px;
        padding-inline: 10px;
    }

    .menu-btn {
        min-width: 42px;
        width: 42px;
        min-height: 42px;
        height: 42px;
        flex-basis: 42px;
    }

    .card-pro,
    .metric,
    .stats-filter-card,
    .entry-form-body {
        padding: 14px;
    }

    .page-title h1 {
        font-size: 23px;
    }

    .export-actions,
    .operation-switch {
        grid-template-columns: 1fr;
    }

    .input-group-text {
        padding-inline: 8px;
    }

    .col-6 {
        width: 100%;
    }

    .dashboard-quick-actions .btn {
        flex-basis: 100%;
        width: 100%;
    }

    .password-field .form-control {
        padding-right: 76px;
    }

    .password-toggle {
        padding-inline: 7px;
    }
}

@media (max-height: 520px) and (max-width: 900px) and (orientation: landscape) {
    .sidebar .brand {
        padding-bottom: 8px;
    }

    .sidebar nav a,
    .sidebar-account-action {
        min-height: 38px;
        padding-block: 7px;
    }

    .sidebar-account-user {
        display: none;
    }

    .topbar {
        position: relative;
    }
}

@media (hover: none) and (pointer: coarse) {
    .sidebar nav a,
    .sidebar-account-action,
    .btn,
    .form-control,
    .form-select,
    .password-toggle {
        min-height: 44px;
    }

    .table a,
    .card-pro a:not(.btn) {
        text-underline-offset: 4px;
    }
}

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

@media print {
    .sidebar-backdrop {
        display: none !important;
    }

    html,
    body,
    .app-shell,
    .content {
        width: 100% !important;
        max-width: none !important;
        overflow: visible !important;
    }

    .table-responsive,
    .matrix-wrap,
    .export-table-wrap {
        overflow: visible !important;
    }

    .table-responsive::after,
    .matrix-wrap::after,
    .export-table-wrap::after {
        display: none !important;
    }

    .bilan-matrix th,
    .bilan-matrix td {
        position: static !important;
        min-width: 0 !important;
        max-width: none !important;
        box-shadow: none !important;
    }
}