/* ==================== STYLES GLOBAUX ==================== */
.responsive-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    width: 100%;
    box-sizing: border-box;
}

.responsive-grid {
    min-width: 100%;
}

.badge-comment {
    position: absolute;
    top: -8px;
    right: -8px;
    z-index: 2;
}

/* ==================== SELECT LOCATION PAGE ==================== */
.select-location-container {
    padding: 0.5rem;
}

.page-title {
    font-size: 1.5rem;
    margin-bottom: 1rem;
}

.responsive-tabs .rz-tabview-nav {
    display: flex;
    gap: 0.5rem;
}

/* ==================== LOCATION TILES ==================== */
.location-tile {
    transition: transform 0.2s ease-in-out;
    display: flex;
    flex-direction: column;
}

    .location-tile:hover {
        transform: translateY(-2px);
        cursor: pointer;
    }

.tile-admin {
    border: 2px solid #1976d2 !important;
    background-color: #e3f2fd !important;
}

.tile-valid {
    border: 2px solid #4CAF50 !important;
    background-color: #e8f5e9 !important;
}

.tile-pending {
    border: 2px dashed #FFC107 !important;
    background-color: #fffde7 !important;
}

.tile-other {
    border: 2px solid #90A4AE !important;
    background-color: #eceff1 !important;
}

.tile-content {
    width: 100%;
}

.tile-header {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    flex: 1;
}

.location-logo {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
}

.location-info {
    flex: 1;
    min-width: 0;
}

.location-name {
    word-break: break-word;
}

.location-sector {
    color: #555;
}

.role-badge {
    flex-shrink: 0;
}

.tile-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
}

.action-btn {
    flex-shrink: 0;
}

/* ==================== GUARDS & EXCHANGES ==================== */
.guard-row-exchange-requested {
    background-color: #fff3cd !important;
}
/* ==================== PLANNINGS ==================== */

.plannings-container {
    padding: 0.5rem;
}

.separator {
    margin: 1rem 0;
}

.quick-actions-row {
    margin-bottom: 1rem;
}

.action-stack {
    width: 100%;
}

.action-btn {
    width: 100%;
    min-width: fit-content;
}

.dashboard-content {
    padding: 1rem 0;
}

.location-logo-img {
    width: 200px;
    height: 120px;
    border-radius: 40%;
}

.dashboard-title {
    text-align: center;
}

.title-text {
    width: 100%;
    text-align: center;
}

.mode-menu-btn {
    min-width: 32px;
    min-height: 32px;
    padding: 0;
}

.view-mode-text {
    width: 100%;
    color: #1976d2;
    text-align: center;
}

.guest-alert {
    margin: 1rem 0;
}

.plannings-header {
    margin-bottom: 1rem;
}

.plannings-title {
    font-weight: 600;
}

.plannings-table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* ==================== RESPONSIVE MOBILE (≤768px) ==================== */
@media (max-width: 768px) {
    /* Containers */
    .responsive-container {
        padding: 0.5rem;
        gap: 0.5rem;
    }

    .select-location-container {
        padding: 0.25rem;
    }

    /* Titles */
    .page-title {
        font-size: 1.2rem;
        margin-bottom: 0.75rem;
    }

    /* Location Tiles */
    .location-tile {
        padding: 0.5rem !important;
    }

    .tile-content {
        gap: 0.5rem !important;
    }

    .tile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 0.5rem;
    }

    .location-logo {
        width: 60px;
        height: 60px;
    }

    .location-info {
        text-align: center;
    }

    .location-name {
        font-size: 1rem !important;
    }

    .tile-actions {
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
        width: 100%;
        gap: 0.3rem;
    }

    .action-btn {
        min-width: 40px !important;
        padding: 0.4rem !important;
    }

        .action-btn .rz-button-text {
            display: none;
        }

    .role-badge {
        font-size: 0.7rem !important;
    }

    /* Fieldsets */
    .rz-fieldset {
        margin-bottom: 0.5rem !important;
    }

    .rz-fieldset-legend {
        font-size: 0.9rem !important;
    }

    /* DataTables */
    .rz-datatable-data td {
        padding: 0.3rem !important;
        font-size: 0.85rem;
        word-break: break-word;
    }

    .rz-datatable-thead th {
        padding: 0.4rem !important;
        font-size: 0.8rem;
    }

    /* Boutons */
    .rz-button-sm {
        font-size: 0.75rem;
        padding: 0.3rem 0.5rem;
    }

    .rz-button-xs {
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
    }

    /* Badges */
    .rz-badge {
        font-size: 0.7rem !important;
        padding: 0.2rem 0.4rem !important;
    }

    /* Tabs */
    .rz-tabview-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
    }

        .rz-tabview-nav::-webkit-scrollbar {
            height: 4px;
        }

        .rz-tabview-nav li {
            white-space: nowrap;
        }

            .rz-tabview-nav li a {
                padding: 0.5rem 0.75rem;
                font-size: 0.9rem;
            }

    .responsive-tabs .rz-tabview-nav li a {
        padding: 0.5rem 0.75rem;
        font-size: 0.9rem;
    }

    /* Cards */
    .rz-card {
        padding: 0.5rem !important;
    }

    /* Stacks */
    .rz-stack {
        gap: 0.5rem !important;
    }

    /* Text */
    .rz-text-h6 {
        font-size: 1rem !important;
    }

    .rz-text-body1 {
        font-size: 0.85rem !important;
    }

    .rz-text-overline {
        font-size: 0.7rem !important;
    }

    /* Dialogs */
    .rz-dialog {
        max-width: 95vw !important;
        max-height: 90vh !important;
    }

    .rz-dialog-content {
        padding: 0.5rem !important;
    }

    .plannings-container {
        padding: 0.25rem;
    }

    .separator {
        margin: 0.5rem 0;
    }

    .quick-actions-row {
        margin-bottom: 0.5rem;
    }

    .action-column {
        margin-bottom: 0.5rem;
    }

    .left-actions, .right-actions {
        order: 2;
    }

    .dashboard-column {
        order: 1;
        margin-bottom: 1rem;
    }

    .action-stack {
        flex-wrap: wrap;
        justify-content: center !important;
    }

    .action-btn {
        flex: 0 0 auto;
        min-width: 40px;
        padding: 0.4rem !important;
    }

    .location-logo-img {
        width: 120px;
        height: 80px;
    }

    .dashboard-title {
        flex-wrap: wrap;
        justify-content: center;
    }

    .title-text {
        font-size: 1rem;
    }

    .view-mode-text {
        font-size: 0.8rem;
    }

    .guest-alert {
        font-size: 0.9rem;
        padding: 0.5rem;
    }

    .plannings-header {
        flex-wrap: wrap;
    }

    .plannings-title {
        font-size: 1rem;
    }

    /* Masquer le texte des boutons sur mobile, garder uniquement les icônes */
    .action-btn .rz-button-text {
        display: none;
    }
}
}

/* ==================== RESPONSIVE TRÈS PETIT (≤480px) ==================== */
@media (max-width: 480px) {

    .location-logo-img {
        width: 100px;
        height: 70px;
    }

    .title-text {
        font-size: 0.9rem;
    }

    .action-btn {
        min-width: 35px;
        padding: 0.3rem !important;
    }

    .responsive-container {
        padding: 0.25rem;
    }

    .select-location-container {
        padding: 0.15rem;
    }

    .page-title {
        font-size: 1.1rem;
        margin-bottom: 0.5rem;
    }

    .location-tile {
        padding: 0.4rem !important;
    }

    .location-logo {
        width: 50px;
        height: 50px;
    }

    .location-name {
        font-size: 0.9rem !important;
    }

    .tile-actions {
        gap: 0.2rem;
    }

    .action-btn {
        min-width: 36px !important;
        height: 36px !important;
        padding: 0.3rem !important;
    }

    .rz-datatable-data td {
        padding: 0.2rem !important;
        font-size: 0.75rem;
    }

    .rz-datatable-thead th {
        padding: 0.3rem !important;
        font-size: 0.75rem;
    }

    .rz-button-xs {
        min-width: 28px !important;
        height: 28px !important;
    }

    .rz-badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }

    .responsive-tabs .rz-tabview-nav li a {
        padding: 0.4rem 0.6rem;
        font-size: 0.85rem;
    }

    .rz-text-h6 {
        font-size: 0.9rem !important;
    }

    .rz-text-body1 {
        font-size: 0.75rem !important;
    }
}

/* ==================== RESPONSIVE LARGE (≥1200px) ==================== */
@media (min-width: 1200px) {
    .responsive-container {
        padding: 1.5rem;
        gap: 1.5rem;
    }

    .tile-content {
        gap: 1.5rem !important;
    }

    .location-logo {
        width: 100px;
        height: 100px;
    }

}
/* ==================== ALL MEMBERS PAGE ==================== */
.alert {
    padding: 0.75rem;
    margin-bottom: 1rem;
    border-radius: 0.25rem;
}

.alert-warning {
    background-color: #fff3cd;
    border: 1px solid #ffc107;
    color: #856404;
}

@media (max-width: 768px) {
    /* Barre de boutons en mode mobile */
    .rz-stack[orientation="Vertical"] .action-btn {
        width: 100%;
    }

    /* Améliorer la lisibilité du dropdown référent sur mobile */
    #referentDropDown .rz-dropdown {
        width: 100% !important;
        min-width: 150px;
    }

    /* Alertes en mode mobile */
    .alert {
        font-size: 0.85rem;
        padding: 0.5rem;
    }

    /* DataGrid responsive - force le scroll horizontal si nécessaire */
    .rz-datatable {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .rz-datatable-scrollable-wrapper {
        overflow-x: auto !important;
    }

    /* Réduire les marges des colonnes et lignes */
    .rz-datatable-data > tr > td {
        padding: 0.3rem !important;
        font-size: 0.8rem !important;
    }

    .rz-datatable-thead > tr > th {
        padding: 0.3rem !important;
        font-size: 0.75rem !important;
    }

    /* Ajustement des badges dans les cellules */
    .rz-datatable-data .rz-badge {
        font-size: 0.65rem !important;
        padding: 0.15rem 0.3rem !important;
    }

    /* Amélioration des stacks dans les cellules */
    .rz-datatable-data .rz-stack {
        gap: 0.3rem !important;
    }

    /* SearchBar responsive */
    .rz-mb-3 {
        margin-bottom: 0.5rem !important;
    }

    .rz-mt-3 {
        margin-top: 0.5rem !important;
    }
}

@media (max-width: 480px) {
    /* Très petits écrans */
    .rz-datatable-data > tr > td {
        padding: 0.2rem !important;
        font-size: 0.7rem !important;
    }

    .rz-datatable-thead > tr > th {
        padding: 0.2rem !important;
        font-size: 0.7rem !important;
    }

    /* Boutons encore plus petits */
    .rz-button-xs {
        min-width: 32px !important;
        height: 32px !important;
        padding: 0.2rem !important;
    }
}
/* Boutons de copie dans le presse-papier */
.rz-button[title^="Copier"] {
    opacity: 0.7;
    transition: opacity 0.2s ease, transform 0.2s ease;
}

    .rz-button[title^="Copier"]:hover {
        opacity: 1;
        transform: scale(1.1);
    }

    .rz-button[title^="Copier"]:active {
        transform: scale(0.95);
    }

@media (max-width: 768px) {
    .rz-button[title^="Copier"] {
        min-width: 28px !important;
        height: 28px !important;
    }
}