/**
 * Responsive global — Cabinet médical
 * Overrides sous media queries uniquement. Desktop ≥1100px inchangé.
 * Ne modifie pas la logique métier (IDs, handlers, formulaires).
 */

:root {
    --bp-sm: 480px;
    --bp-md: 768px;
    --bp-lg: 980px;
    --bp-xl: 1100px;
    --rg-safe-bottom: env(safe-area-inset-bottom, 0px);
    --rg-safe-top: env(safe-area-inset-top, 0px);
}

/* Backdrop menu mobile (créé en JS) */
.sidebar-mobile-backdrop {
    display: none;
}

/* ---------- Tablettes / petits portables ≤1100 ---------- */
@media (max-width: 1100px) {
    .main-content {
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .page-header {
        margin-left: -1.5rem;
        margin-right: -1.5rem;
        padding-left: 1.5rem;
        padding-right: 1.5rem;
    }

    .toolbar,
    .toolbar-filters {
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .toolbar-filters .form-control,
    .search-box .form-control {
        min-width: 0;
        width: 100%;
        max-width: 100%;
    }

    .search-box {
        flex: 1 1 220px;
        min-width: 0;
        max-width: 100%;
    }

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

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

    .chart-card-wide {
        grid-column: auto;
    }

    .modal-xl,
    .modal-lg {
        max-width: min(920px, calc(100vw - 1.25rem));
        width: calc(100vw - 1.25rem);
    }

    .sa-layout,
    .sa-main-grid,
    .sa-preview-layout {
        grid-template-columns: 1fr !important;
    }
}

/* ---------- ≤980 ---------- */
@media (max-width: 980px) {
    .form-row {
        grid-template-columns: 1fr;
    }

    .form-row > * {
        min-width: 0;
    }

    .page-header {
        align-items: flex-start;
    }

    .topbar-user-info {
        max-width: 9rem;
    }

    .topbar-user-info strong,
    .topbar-user-info small {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        display: block;
    }

    /* Onglets / barres d’actions horizontales */
    .dm-tabs,
    .dm-onglets,
    .dm-z3-tabs,
    .dm-nav-tabs,
    [role="tablist"],
    .sa-tabs,
    .tabs-bar {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.35rem;
        scrollbar-width: thin;
        max-width: 100%;
    }

    .dm-tabs > *,
    .dm-onglets > *,
    .dm-z3-tabs > *,
    [role="tablist"] > * {
        flex: 0 0 auto;
    }
}

/* ---------- Smartphones / tablettes portrait ≤768 ---------- */
@media (max-width: 768px) {
    html,
    body {
        overflow-x: hidden;
        max-width: 100%;
    }

    body.sidebar-mobile-lock {
        overflow: hidden;
    }

    /* Menu : drawer overlay (écrase position:relative de style.css) */
    .app-layout {
        flex-direction: column;
    }

    .sidebar {
        position: fixed !important;
        top: 0;
        left: 0;
        width: min(300px, 88vw) !important;
        height: 100% !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        z-index: 20020 !important;
        display: flex !important;
        flex-direction: column;
        overflow: hidden !important;
        transform: translateX(0);
        visibility: visible;
        pointer-events: auto;
        transition: transform 0.22s ease, visibility 0.22s ease;
        padding-top: var(--rg-safe-top);
        padding-bottom: var(--rg-safe-bottom);
        box-shadow: 8px 0 32px rgba(8, 47, 73, 0.28);
    }

    .sidebar-nav {
        max-height: none !important;
        flex: 1 1 auto;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* Menu latéral smartphone : options essentielles uniquement */
    .sidebar-nav > :not([data-nav-mobile="1"]) {
        display: none !important;
    }

    html.sidebar-collapsed .sidebar {
        display: flex !important;
        transform: translateX(-105%) !important;
        visibility: hidden;
        pointer-events: none;
    }

    html:not(.sidebar-collapsed) .sidebar {
        transform: translateX(0) !important;
        visibility: visible;
        pointer-events: auto;
    }

    .sidebar-mobile-backdrop {
        display: none;
        position: fixed;
        inset: 0;
        z-index: 20010;
        background: rgba(15, 23, 42, 0.48);
        border: 0;
        padding: 0;
        margin: 0;
        cursor: pointer;
        -webkit-tap-highlight-color: transparent;
    }

    html:not(.sidebar-collapsed) .sidebar-mobile-backdrop {
        display: block;
    }

    /*
     * Premier plan smartphone : au-dessus des FAB / popups métier (~10040–10070)
     *  toast / alertes  >  confirmations  >  modales  >  menu latéral  >  FAB
     */
    #toast-container,
    .sa-vitals-alerts-host,
    .dm-vitals-alerts-host {
        z-index: 20050 !important;
    }

    #confirm-popup,
    .popup-overlay,
    .popup-overlay.active,
    .confirm-popup-overlay {
        z-index: 20040 !important;
    }

    .modal.active,
    .dm-loading-overlay,
    .dm-lock-overlay,
    .dm-lock-overlay.active {
        z-index: 20030 !important;
    }

    /*
     * Petites popups DM (patience / confirmation) : centrées, entièrement visibles
     * (ne pas les traiter comme bottom-sheet pleine largeur)
     */
    #dm-loading-popup.popup-overlay,
    #confirm-popup.popup-overlay {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px))
            max(0.75rem, env(safe-area-inset-right, 0px))
            max(0.75rem, env(safe-area-inset-bottom, 0px))
            max(0.75rem, env(safe-area-inset-left, 0px)) !important;
        overflow: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    #dm-loading-popup .popup-sm,
    #dm-loading-popup .dm-loading-dialog,
    #confirm-popup .confirm-popup-dialog {
        width: min(100%, 22rem) !important;
        max-width: min(100%, 22rem) !important;
        max-height: none !important;
        margin: auto !important;
        border-radius: 16px !important;
        flex-shrink: 0;
        overflow: visible !important;
        box-sizing: border-box;
    }

    #dm-loading-popup .dm-loading-dialog {
        padding: 1.35rem 1.25rem 1.25rem;
    }

    #confirm-popup.confirm-popup-required .confirm-popup-close {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        width: 100%;
        max-width: 100%;
        padding: 0 0.9rem calc(1.25rem + var(--rg-safe-bottom));
        min-width: 0;
    }

    .page-header {
        margin: 0 -0.9rem 0.45rem;
        padding: 0.4rem 0.9rem;
        padding-top: calc(0.4rem + var(--rg-safe-top));
        gap: 0.3rem;
        align-items: center;
        min-height: 0;
    }

    .page-header h1 {
        font-size: clamp(0.95rem, 4vw, 1.15rem);
        line-height: 1.15;
    }

    .page-header-start {
        flex: 1 1 auto;
        min-width: 0;
        gap: 0.35rem;
        row-gap: 0.2rem;
        align-items: center;
    }

    .sidebar-toggle-btn {
        width: 2.35rem;
        height: 2.35rem;
        min-width: 2.35rem;
        flex-shrink: 0;
    }

    .topbar-user {
        flex-shrink: 0;
        padding: 0.2rem;
        min-height: 0;
    }

    .topbar-user-avatar {
        width: 2rem;
        height: 2rem;
        border-radius: 8px;
        font-size: 0.7rem;
    }

    .topbar-user-info {
        display: none;
    }

    /* Salle d'attente : masquer cartes En attente / Vus / Consultation (types) */
    .page-header .sa-header-extra,
    .page-header #sa-stats-panel,
    .page-header .sa-header-stats,
    .page-header .sa-header-stat.is-waiting,
    .page-header .sa-header-stat.is-seen,
    .page-header .sa-header-stat.is-type,
    .page-header .sa-header-stats-types,
    .page-header .sa-stats-types-empty {
        display: none !important;
    }

    /* Stats Patients : pas d’espace vertical vide */
    .page-header .pt-header-extra {
        margin-top: 0 !important;
        margin-left: 0 !important;
        padding-top: 0 !important;
        padding-left: 0 !important;
        border-top: none !important;
        border-left: none !important;
        max-width: 100%;
        flex: 1 1 100%;
        gap: 0.3rem;
    }

    .page-header .pt-header-stats {
        gap: 0.3rem;
        align-items: stretch;
    }

    .page-header .pt-header-stat {
        padding: 0.12rem 0.35rem !important;
        min-height: 0 !important;
        min-width: 0 !important;
        border-radius: 8px;
        line-height: 1.05;
        box-shadow: none;
    }

    .page-header .pt-header-stat-kicker {
        font-size: 0.5rem;
        line-height: 1.05;
        letter-spacing: 0.02em;
    }

    .page-header .pt-header-stat-value {
        font-size: 0.85rem;
        line-height: 1.05;
    }

    /*
     * Toutes les cartes + toolbars : compactes
     * (padding / gaps réduits, pas de marge vide sous titres)
     */
    .card,
    .stat-card,
    .caisse-filter-card,
    .caisse-table-card,
    .caisse-sidebar-panel,
    .pt-card,
    .chart-card,
    .dashboard-card {
        padding: 0.6rem 0.7rem !important;
        margin-top: 0 !important;
        margin-bottom: 0.5rem !important;
        gap: 0.35rem;
        min-height: 0;
    }

    /* Exceptions : structure interne gérée ailleurs */
    .card.sa-card,
    .sa-card.card,
    .chat-card,
    .card.chat-card,
    .agenda-main.card {
        padding: 0 !important;
    }

    .agenda-main.card {
        padding: 0.35rem !important;
        margin-bottom: 0 !important;
    }

    .card-header,
    .card-title-row {
        margin: 0 0 0.4rem !important;
        padding: 0 0 0.35rem !important;
        gap: 0.35rem !important;
        min-height: 0;
        align-items: center;
    }

    .card-header h2,
    .card-header h3,
    .card-title,
    .card-header .card-title {
        margin: 0 !important;
        line-height: 1.2;
        font-size: 0.95rem;
    }

    .card-header-sub,
    .card-subtitle,
    .page-header .page-subtitle {
        margin: 0.15rem 0 0 !important;
        line-height: 1.25;
        font-size: 0.78rem;
    }

    .card-body {
        padding: 0.45rem 0 0 !important;
        margin: 0 !important;
    }

    .card-footer,
    .card-actions {
        margin-top: 0.4rem !important;
        padding-top: 0.4rem !important;
        gap: 0.35rem;
    }

    .stats-grid,
    .dashboard-grid,
    .dashboard-charts-grid {
        gap: 0.45rem !important;
    }

    .patients-page,
    .agenda-page,
    .options-page,
    .caisse-page,
    .charges-page {
        gap: 0.45rem !important;
    }

    .sa-toolbar,
    .agenda-toolbar,
    .agenda-toolbar.card,
    .pt-toolbar,
    .patients-toolbar,
    .list-toolbar,
    .filters-bar,
    .page-toolbar,
    .toolbar.card {
        padding: 0.4rem 0.55rem !important;
        margin-top: 0 !important;
        margin-bottom: 0.45rem !important;
        gap: 0.35rem !important;
        min-height: 0 !important;
        align-items: center;
    }

    .sa-toolbar .btn-sm,
    .agenda-toolbar .btn-sm,
    .pt-toolbar .btn-sm,
    .caisse-filter-card .btn-sm,
    .list-toolbar .btn-sm,
    .filters-bar .btn-sm,
    .card .btn-sm {
        min-height: 2.15rem;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    .sa-toolbar .form-control,
    .agenda-toolbar .form-control,
    .pt-toolbar .form-control,
    .caisse-filter-card .form-control,
    .list-toolbar .form-control,
    .filters-bar .form-control {
        min-height: 2.15rem;
        padding-top: 0.3rem;
        padding-bottom: 0.3rem;
    }

    .agenda-toolbar-left,
    .agenda-toolbar-right,
    .sa-toolbar-actions,
    .pt-toolbar-actions {
        gap: 0.35rem !important;
        align-items: center;
    }

    /* SA smartphone — Date + Actualiser + Nouveau + Ancien sur une seule ligne */
    .sa-toolbar {
        width: 100%;
        overflow: hidden;
    }

    .sa-toolbar-actions {
        display: flex !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        width: 100%;
        gap: 0.22rem !important;
        min-width: 0;
    }

    .sa-toolbar .sa-btn-config {
        display: none !important;
    }

    .sa-toolbar .sa-date-label {
        flex: 0 0 auto;
        gap: 0.15rem;
        min-width: 0;
    }

    .sa-toolbar .sa-date-label-text {
        display: none;
    }

    .sa-toolbar .sa-date-input,
    .sa-toolbar .sa-date-field input.flatpickr-input.form-control,
    .sa-toolbar .sa-date-field input[type="date"].form-control + input.form-control {
        width: 8.75rem !important;
        min-width: 8.75rem !important;
        max-width: 8.75rem !important;
        min-height: 1.75rem !important;
        height: 1.75rem !important;
        padding: 0.1rem 0.35rem !important;
        font-size: 0.72rem !important;
        line-height: 1.2;
    }

    .sa-toolbar .sa-date-calendar-btn {
        width: 1.55rem;
        min-height: 1.75rem;
        height: 1.75rem;
    }

    .sa-toolbar .sa-date-calendar-btn svg {
        width: 12px;
        height: 12px;
    }

    .sa-toolbar .btn-sm {
        min-height: 1.75rem !important;
        height: 1.75rem;
        padding: 0.15rem 0.35rem !important;
        font-size: 0.65rem !important;
        line-height: 1.1;
        white-space: nowrap;
        flex: 1 1 0;
        min-width: 0;
        gap: 0.2rem;
    }

    .sa-toolbar .sa-refresh-btn {
        flex: 0 0 auto;
        width: 1.75rem;
        min-width: 1.75rem;
        padding-left: 0 !important;
        padding-right: 0 !important;
        justify-content: center;
    }

    .sa-toolbar .sa-refresh-btn .sa-btn-label {
        display: none;
    }

    .sa-toolbar .sa-refresh-btn svg {
        width: 12px;
        height: 12px;
    }

    .sa-toolbar .sa-btn-label-full {
        display: none;
    }

    .sa-toolbar .sa-btn-label-short {
        display: inline;
    }

    .agenda-filter-label {
        gap: 0.2rem !important;
    }

    .sa-card .tab-panel {
        padding: 0.35rem 0.5rem 0.5rem !important;
    }

    .sa-tabs {
        padding: 0.35rem 0.5rem 0 !important;
    }

    /* Formulaires */
    .form-row,
    .form-row.cols-2,
    .form-row.cols-3,
    .form-row.cols-4 {
        grid-template-columns: 1fr !important;
    }

    .form-control,
    select.form-control,
    textarea.form-control {
        max-width: 100%;
        font-size: 16px; /* évite zoom iOS */
    }

    /* Toolbars */
    .toolbar {
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-title {
        width: 100%;
    }

    .toolbar-filters {
        width: 100%;
        flex-direction: column;
        align-items: stretch;
    }

    .toolbar-filters .form-control,
    .toolbar-filters .btn,
    .search-box,
    .search-box .form-control {
        width: 100%;
        min-width: 0;
        max-width: 100%;
    }

    /* Boutons tactiles */
    .btn:not(.btn-icon):not(.btn-sm),
    .page-header .btn {
        min-height: 2.75rem;
    }

    .btn-sm {
        min-height: 2.35rem;
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }

    .btn-icon {
        min-width: 2.5rem;
        min-height: 2.5rem;
    }

    /* Images / médias */
    img,
    video {
        max-width: 100%;
        height: auto;
    }

    /* Schémas interactifs : ne pas forcer height:auto destructeur */
    .dm-derm-body-map img,
    .dm-derm-body-img,
    .anatomie-schema img,
    canvas.anatomie-canvas {
        max-width: 100%;
    }

    /* Tableaux → cartes structurées (zones répétées) */
    .table-responsive,
    .sa-table-wrap,
    .sa-ep-visites-wrap,
    .data-table-wrap,
    .pt-table-wrap,
    .card > .table-responsive {
        display: block;
        width: 100%;
        max-width: 100%;
        overflow-x: visible;
    }

    .table,
    table.table,
    .sa-table,
    .sa-ep-visites-table,
    .sa-ep-table,
    .pt-table,
    .rg-table-cards {
        min-width: 0 !important;
        width: 100% !important;
    }

    .card {
        overflow-x: visible;
        max-width: 100%;
    }

    table.rg-table-cards,
    table.rg-table-cards > tbody {
        display: block;
        width: 100%;
    }

    table.rg-table-cards > thead {
        display: none;
    }

    table.rg-table-cards > tbody > tr.rg-card-row {
        display: block;
        width: 100%;
        margin: 0 0 0.5rem;
        padding: 0.6rem 0.7rem;
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        background: #fff;
        box-shadow: 0 1px 3px rgba(15, 23, 42, 0.06);
        box-sizing: border-box;
    }

    table.rg-table-cards > tbody > tr.rg-card-row.is-selected {
        border-color: rgba(12, 74, 138, 0.45);
        box-shadow: 0 0 0 2px rgba(12, 74, 138, 0.12);
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td {
        display: grid;
        grid-template-columns: minmax(6.2rem, 36%) minmax(0, 1fr);
        align-items: start;
        gap: 0.25rem 0.65rem;
        width: 100% !important;
        max-width: 100%;
        min-width: 0 !important;
        padding: 0.28rem 0 !important;
        border: none !important;
        border-bottom: 1px dashed #eef2f7 !important;
        text-align: left !important;
        background: transparent !important;
        box-shadow: none !important;
        white-space: normal !important;
        word-break: break-word;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td:last-child {
        border-bottom: none !important;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td::before {
        content: attr(data-label);
        font-size: 0.68rem;
        font-weight: 700;
        color: #64748b;
        line-height: 1.3;
        padding-top: 0.1rem;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-title {
        display: flex;
        flex-direction: column;
        gap: 0.15rem;
        padding-bottom: 0.55rem !important;
        margin-bottom: 0.15rem;
        border-bottom: 1px solid #e2e8f0 !important;
        font-size: 0.95rem;
        font-weight: 700;
        color: #0f172a;
    }

    /* SA smartphone — nom patient un peu plus petit sur toutes les cartes / onglets */
    #table-en_attente.rg-table-cards > tbody > tr.rg-card-row > td.sa-td-patient .sa-cell-patient,
    #table-vus.rg-table-cards > tbody > tr.rg-card-row > td.sa-td-patient,
    #table-vus.rg-table-cards > tbody > tr.rg-card-row > td.sa-td-patient .sa-cell-patient,
    #table-annuler.rg-table-cards > tbody > tr.rg-card-row > td.sa-td-patient,
    #table-annuler.rg-table-cards > tbody > tr.rg-card-row > td.sa-td-patient .sa-cell-patient,
    #table-vus.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-title,
    #table-annuler.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-title {
        font-size: 0.85rem;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-title::before {
        font-size: 0.65rem;
        font-weight: 700;
        color: #64748b;
        text-transform: uppercase;
        letter-spacing: 0.02em;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions {
        display: flex !important;
        flex-wrap: wrap;
        gap: 0.4rem;
        align-items: center;
        padding-top: 0.7rem !important;
        margin-top: 0.15rem;
        border-bottom: none !important;
        border-top: 1px solid #e2e8f0 !important;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions::before {
        flex: 1 0 100%;
        margin-bottom: 0.1rem;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-actions,
    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .btn,
    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn {
        min-height: 2.4rem;
    }

    /*
     * SA smartphone — boutons des cartes (tous onglets) :
     * même style que « + Nouveau patient » (btn-primary), sauf Supprimer.
     */
    #table-en_attente.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger),
    #table-vus.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger),
    #table-annuler.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger) {
        background: linear-gradient(135deg, var(--primary), var(--primary-dark));
        color: #fff;
        border: none;
        box-shadow: 0 2px 8px rgba(14, 165, 233, 0.3);
        border-radius: var(--radius-sm, 8px);
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        font-weight: 600;
        opacity: 1;
        transition: all var(--transition, 0.2s ease);
    }

    #table-en_attente.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger):hover,
    #table-vus.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger):hover,
    #table-annuler.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger):hover {
        transform: translateY(-1px);
        box-shadow: 0 4px 14px rgba(14, 165, 233, 0.4);
        opacity: 1;
    }

    #table-en_attente.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger) .sa-btn-ico svg,
    #table-vus.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger) .sa-btn-ico svg,
    #table-annuler.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn:not(.sa-btn-danger) .sa-btn-ico svg {
        stroke: currentColor;
        fill: none;
    }

    #table-en_attente.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn-danger,
    #table-vus.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn-danger,
    #table-annuler.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-btn-danger {
        background: #ef4444;
        color: #fff;
        border: none;
        box-shadow: 0 2px 8px rgba(239, 68, 68, 0.28);
        border-radius: var(--radius-sm, 8px);
        padding: 0.4rem 0.8rem;
        font-size: 0.8rem;
        font-weight: 600;
        opacity: 1;
    }

    /* SA smartphone : Supprimer masqué sauf Médecin / Administrateur */
    .sa-btn-delete-hide-mobile {
        display: none !important;
    }

    /* SA smartphone : Historique + Dossier en tête des actions */
    .sa-btn-mobile-only {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        gap: 0.35rem;
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 7.5rem;
        min-height: 2.45rem;
        padding: 0.45rem 0.7rem;
        font-size: 0.8rem;
        border-radius: var(--radius-sm, 8px);
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td.rg-card-actions .sa-actions,
    .sa-td-actions .sa-actions {
        flex-wrap: wrap;
        white-space: normal;
        justify-content: stretch;
        gap: 0.4rem;
    }

    table.rg-table-cards > tbody > tr.rg-card-empty > td {
        display: block;
        width: 100% !important;
        text-align: center !important;
        padding: 1rem 0.5rem !important;
        border: none !important;
        color: #64748b;
    }

    table.rg-table-cards > tbody > tr.rg-card-empty > td::before {
        display: none;
    }

    /* Colonnes fixes SA : désactiver en mode carte */
    table.rg-table-cards .sa-th-actions,
    table.rg-table-cards .sa-td-actions {
        position: static !important;
        box-shadow: none !important;
    }

    /* Stats */
    .stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 0.65rem;
    }

    /* Modales / popups */
    .modal.active,
    .modal {
        align-items: flex-end;
        padding: 0;
    }

    /*
     * Dossier médical smartphone : toutes les popups centrées à l’écran
     * (override du bottom-sheet global).
     */
    body:has(.dm-page) .modal,
    body:has(.dm-page) .modal.active,
    body:has(.dm-page) .popup-overlay,
    body:has(.dm-page) .popup-overlay.active,
    body:has(.dm-page) .confirm-popup-overlay,
    body:has(.dm-page) .dm-constantes-modal-root,
    body:has(.dm-page) .dm-left-fab-modal-root {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px))
            max(0.75rem, env(safe-area-inset-right, 0px))
            max(0.75rem, env(safe-area-inset-bottom, 0px))
            max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    body:has(.dm-page) .modal-content,
    body:has(.dm-page) .modal-content.modal-lg,
    body:has(.dm-page) .modal-content.modal-xl,
    body:has(.dm-page) .popup-overlay .popup-sm,
    body:has(.dm-page) .popup-overlay > .popup-sm,
    body:has(.dm-page) .confirm-popup-dialog,
    body:has(.dm-page) .dm-left-fab-modal-dialog,
    body:has(.dm-page) .dm-constantes-modal-dialog {
        width: min(100%, 28rem) !important;
        max-width: min(100%, 28rem) !important;
        max-height: min(92dvh, 100%) !important;
        margin: auto !important;
        border-radius: 16px !important;
    }

    body:has(.dm-page) .modal-content.modal-lg,
    body:has(.dm-page) .modal-content.modal-xl {
        width: min(100%, 36rem) !important;
        max-width: min(100%, 36rem) !important;
    }

    /* Documents patient : centrée (pas en bas d’écran) */
    #sa-documents-modal.modal,
    #sa-documents-modal.modal.active {
        align-items: center !important;
        justify-content: center !important;
        padding: max(0.75rem, env(safe-area-inset-top, 0px))
            max(0.75rem, env(safe-area-inset-right, 0px))
            max(0.75rem, env(safe-area-inset-bottom, 0px))
            max(0.75rem, env(safe-area-inset-left, 0px)) !important;
    }

    #sa-documents-modal .modal-content.sa-docs-modal {
        display: flex !important;
        flex-direction: column !important;
        width: min(100%, 26rem) !important;
        max-width: min(100%, 26rem) !important;
        max-height: min(92dvh, 100%) !important;
        margin: auto !important;
        border-radius: 16px !important;
        overflow: hidden;
    }

    #sa-documents-modal .sa-docs-body {
        flex: 1 1 auto;
        min-height: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }

    #sa-documents-modal .sa-docs-header,
    #sa-documents-modal .sa-docs-footer {
        flex-shrink: 0;
    }

    .modal-content,
    .modal-content.modal-lg,
    .modal-content.modal-xl,
    .popup-overlay .popup-sm,
    .popup-overlay > div,
    .confirm-popup-dialog {
        width: 100% !important;
        max-width: 100% !important;
        max-height: min(96dvh, 100%) !important;
        margin: 0;
        border-radius: 16px 16px 0 0;
    }

    .modal-content {
        display: flex;
        flex-direction: column;
        overflow: hidden;
    }

    .modal-header,
    .modal-footer {
        flex-shrink: 0;
    }

    .modal-body,
    .modal-content form {
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        max-height: none;
        flex: 1 1 auto;
        min-height: 0;
    }

    .modal-content.sa-patient-modal {
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
        flex-direction: column !important;
    }

    .sa-patient-modal-main {
        width: 100%;
        max-width: 100%;
    }

    .pf-form-sidebar {
        display: none;
    }

    .sa-patient-modal.pf-compact .form-row {
        grid-template-columns: 1fr !important;
    }

    /* Drawers historiques / fichiers */
    .dm-historique-drawer,
    .dm-fichiers-drawer {
        width: min(100vw, 100%) !important;
        max-width: 100vw !important;
        left: 0 !important;
        right: 0 !important;
        top: 0 !important;
        bottom: 0 !important;
        height: 100dvh !important;
        max-height: 100dvh !important;
        border-radius: 0 !important;
    }

    /* FAB DM droite — Historique / H.Constantes collés au bord */
    .dm-fab-stack:not(.dm-fab-stack-left) {
        top: 50% !important;
        bottom: auto !important;
        right: 0 !important;
        left: auto !important;
        transform: translateY(-50%) !important;
    }

    .dm-fab-stack:not(.dm-fab-stack-left) .dm-historique-fab {
        right: auto !important;
        bottom: auto !important;
        transform: none !important;
    }

    .fab,
    .floating-actions {
        bottom: calc(1rem + var(--rg-safe-bottom)) !important;
        right: max(0.75rem, env(safe-area-inset-right, 0px)) !important;
    }

    .dm-fab-stack-left {
        display: flex !important;
        top: 50% !important;
        bottom: auto !important;
        left: 0 !important;
        right: auto !important;
        transform: translateY(-50%) !important;
    }

    /* Chat */
    .chat-card {
        height: calc(100dvh - 120px);
        min-height: 280px;
    }

    .chat-layout {
        grid-template-columns: 1fr;
        grid-template-rows: minmax(160px, 36%) 1fr;
    }

    .chat-contacts {
        border-right: none;
        border-bottom: 1px solid var(--border, #e2e8f0);
    }

    /* Agenda FullCalendar */
    .fc .fc-toolbar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .fc .fc-toolbar-chunk {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0.35rem;
    }

    .fc .fc-button {
        min-height: 2.5rem;
    }

    /* Login helpers (si feuille chargée) */
    .login-card,
    .login-box,
    .auth-card {
        width: 100%;
        max-width: 100%;
        margin: 0.75rem;
    }
}

/* ---------- Petits téléphones ≤480 ---------- */
@media (max-width: 480px) {
    .main-content {
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

    .page-header {
        margin-left: -0.7rem;
        margin-right: -0.7rem;
        padding-left: 0.7rem;
        padding-right: 0.7rem;
    }

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

    table.rg-table-cards > tbody > tr.rg-card-row {
        padding: 0.5rem 0.6rem;
    }

    table.rg-table-cards > tbody > tr.rg-card-row > td {
        grid-template-columns: minmax(5.5rem, 34%) minmax(0, 1fr);
        font-size: 0.82rem;
    }

    .brand-text {
        font-size: 0.85rem;
    }
}

/* ---------- Orientation paysage mobile ---------- */
@media (max-width: 980px) and (orientation: landscape) {
    .modal-content,
    .modal-content.sa-patient-modal {
        max-height: 100dvh !important;
    }

    .sidebar {
        max-height: 100dvh;
    }
}

/* ---------- Pages listes / CRUD (phase 2) ---------- */
@media (max-width: 980px) {
    .pt-toolbar,
    .patients-toolbar,
    .page-toolbar,
    .filters-bar,
    .list-toolbar {
        flex-wrap: wrap;
        gap: 0.65rem;
    }

    .pt-toolbar .form-control,
    .patients-toolbar .form-control,
    .filters-bar .form-control {
        min-width: 0;
        flex: 1 1 100%;
    }

    .card-header,
    .card-title-row {
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .actions-cell,
    .td-actions,
    .sa-td-actions {
        white-space: nowrap;
    }
}

@media (max-width: 768px) {
    .patients-toolbar,
    .list-toolbar,
    .filters-bar {
        flex-direction: column;
        align-items: stretch;
        gap: 0.4rem;
        padding: 0.45rem 0.6rem;
    }

    /* Ne pas forcer de layout sur .pt-toolbar : géré dans patients.css */

    .list-toolbar .btn:not(.pt-btn-icon) {
        width: 100%;
        justify-content: center;
    }

    /* Tables dans cards sans wrapper : scroll horizontal du card */
    .card .table,
    .card table {
        width: max(100%, 560px);
    }

    .pagination,
    .pager,
    .table-footer {
        flex-wrap: wrap;
        gap: 0.5rem;
        justify-content: center;
    }
}

/* ---------- Dossier médical / SA / agenda (phase 3 — compléments globaux) ---------- */
@media (max-width: 1100px) {
    .dm-layout {
        grid-template-columns: 1fr !important;
        grid-template-rows: auto;
    }

    .dm-z1,
    .dm-z2,
    .dm-z3 {
        min-width: 0;
        max-width: 100%;
    }

    .dm-layout-resizer,
    .dm-col-resizer,
    [data-dm-resizer] {
        display: none !important;
    }
}

@media (max-width: 768px) {
    .dm-page,
    .dm-shell {
        min-width: 0;
        max-width: 100%;
        overflow-x: hidden;
    }

    .dm-z3-tabs,
    .dm-tabs-bar,
    .dm-section-tabs {
        display: flex;
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 0.25rem;
        max-width: 100%;
        padding-bottom: 0.25rem;
    }

    .fc {
        max-width: 100%;
        overflow-x: auto;
    }

    .sa-board,
    .sa-columns,
    .sa-kanban {
        display: flex;
        flex-direction: column;
        gap: 0.75rem;
    }

    .dicom-layout,
    .dicom-viewer-wrap,
    .platform-grid,
    .aide-layout {
        grid-template-columns: 1fr !important;
        flex-direction: column;
    }
}

/* ---------- Login / platform (phase 4) ---------- */
@media (max-width: 980px) {
    .login-split {
        flex-direction: column;
        min-height: 100dvh;
    }

    .login-hero {
        min-height: 180px;
        max-height: 32vh;
    }

    .login-panel,
    .login-form-wrap {
        width: 100%;
        max-width: 100%;
        padding: 1rem;
    }

    .platform-page,
    .platform-content,
    .platform-shell {
        padding: 0.75rem;
        max-width: 100%;
    }

    .platform-topbar {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
}

@media (max-width: 768px) {
    .login-hero {
        display: none;
    }

    .login-split {
        display: block;
    }

    .login-panel,
    .login-form-wrap,
    .login-card {
        min-height: 100dvh;
        border-radius: 0;
        box-shadow: none;
        padding: 1.25rem 1rem;
    }

    .platform-table-wrap,
    .platform-content .table-responsive {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ---------- Print : ne pas casser ---------- */
@media print {
    .sidebar-mobile-backdrop,
    .sidebar-toggle-btn,
    .dm-fab-stack,
    .dm-fab-stack-left,
    .dm-historique-fab,
    .dm-left-fab-modal-root {
        display: none !important;
    }

    .sidebar {
        display: none !important;
    }

    .main-content {
        margin-left: 0 !important;
        padding: 0 !important;
    }
}