/**
 * Mobile Harmonization CSS
 * Style cohérent pour toutes les pages de l'application
 * Optimisation mobile-first
 */

/* ============================================
   EN-TÊTES ET TITRES
   ============================================ */

/* Titres principaux des pages */
.page-header {
    margin-bottom: 1rem;
}

.page-header h1 {
    font-size: 1.75rem;
    margin-bottom: 0;
}

/* Optimisation mobile des titres */
@media (max-width: 768px) {
    .page-header h1,
    h1.h3 {
        font-size: 1.25rem !important;
    }
    
    h2, .h4 {
        font-size: 1.1rem !important;
    }
    
    h3, .h5 {
        font-size: 1rem !important;
    }
    
    h4, h5, h6, .h6 {
        font-size: 0.9rem !important;
    }
    
    .card-header h3,
    .card-header h4,
    .card-header h5,
    .card-header h6 {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   CARTES
   ============================================ */

@media (max-width: 768px) {
    .card {
        margin-bottom: 1rem;
    }
    
    .card-body {
        padding: 1rem !important;
        font-size: 0.85rem;
    }
    
    .card-header {
        padding: 0.75rem 1rem;
    }
    
    .card-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.5rem;
    }
    
    .card-text {
        font-size: 0.85rem;
    }
}

/* ============================================
   FORMULAIRES
   ============================================ */

@media (max-width: 768px) {
    .form-label {
        font-size: 0.85rem !important;
        margin-bottom: 0.3rem !important;
        font-weight: 500;
    }
    
    .form-control,
    .form-select {
        font-size: 0.85rem !important;
        padding: 0.5rem !important;
    }
    
    .form-text,
    .form-check-label {
        font-size: 0.75rem !important;
    }
    
    .input-group-text {
        font-size: 0.85rem;
        padding: 0.5rem;
    }
}

/* ============================================
   BOUTONS
   ============================================ */

@media (max-width: 768px) {
    /* Tous les boutons plus compacts sur mobile */
    .btn:not(.btn-lg) {
        font-size: 0.8rem !important;
        padding: 0.4rem 0.8rem !important;
    }
    
    .btn-sm {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.6rem !important;
    }
    
    .btn i {
        font-size: 0.85rem;
    }
    
    /* Boutons dans les cartes */
    .card-body .btn,
    .card-footer .btn {
        font-size: 0.75rem !important;
        padding: 0.35rem 0.6rem !important;
    }
}

/* ============================================
   BADGES
   ============================================ */

@media (max-width: 768px) {
    .badge {
        font-size: 0.7rem !important;
        padding: 0.3rem 0.5rem !important;
    }
    
    .badge i {
        font-size: 0.7rem;
    }
}

/* ============================================
   TABLEAUX
   ============================================ */

@media (max-width: 768px) {
    .table {
        font-size: 0.8rem;
    }
    
    .table th,
    .table td {
        padding: 0.5rem;
    }
    
    .table-responsive {
        font-size: 0.8rem;
    }
}

/* ============================================
   ALERTS
   ============================================ */

@media (max-width: 768px) {
    .alert {
        font-size: 0.85rem !important;
        padding: 0.75rem !important;
    }
    
    .alert i {
        font-size: 0.85rem;
    }
    
    .alert .btn-close {
        padding: 0.5rem;
    }
}

/* ============================================
   MODALS
   ============================================ */

@media (max-width: 768px) {
    .modal-title {
        font-size: 1rem !important;
    }
    
    .modal-body {
        font-size: 0.85rem;
        padding: 1rem;
    }
    
    .modal-footer .btn {
        font-size: 0.75rem !important;
        padding: 0.4rem 0.8rem !important;
    }
}

/* ============================================
   PAGINATION
   ============================================ */

@media (max-width: 768px) {
    .pagination {
        font-size: 0.8rem;
    }
    
    .page-link {
        padding: 0.4rem 0.6rem;
    }
}

/* ============================================
   BREADCRUMBS
   ============================================ */

@media (max-width: 768px) {
    .breadcrumb {
        font-size: 0.75rem;
        padding: 0.5rem;
        margin-bottom: 0.75rem;
    }
    
    .breadcrumb-item {
        padding: 0;
    }
}

/* ============================================
   LISTES
   ============================================ */

@media (max-width: 768px) {
    .list-group-item {
        padding: 0.75rem;
        font-size: 0.85rem;
    }
    
    .list-group-item .badge {
        font-size: 0.7rem;
    }
}

/* ============================================
   SPACING AJUSTEMENTS
   ============================================ */

@media (max-width: 768px) {
    /* Réduire les espacements globaux */
    .container-fluid {
        padding-left: 0.75rem;
        padding-right: 0.75rem;
    }
    
    .row.g-3 {
        --bs-gutter-x: 0.75rem;
        --bs-gutter-y: 0.75rem;
    }
    
    .mb-4 {
        margin-bottom: 1rem !important;
    }
    
    .mb-3 {
        margin-bottom: 0.75rem !important;
    }
    
    .py-4 {
        padding-top: 1rem !important;
        padding-bottom: 1rem !important;
    }
    
    .py-3 {
        padding-top: 0.75rem !important;
        padding-bottom: 0.75rem !important;
    }
}

/* ============================================
   TABS / PILLS
   ============================================ */

@media (max-width: 768px) {
    .nav-pills .nav-link,
    .nav-tabs .nav-link {
        font-size: 0.85rem !important;
        padding: 0.5rem 0.9rem !important;
    }
    
    .nav-pills .nav-link i,
    .nav-tabs .nav-link i {
        font-size: 0.9rem;
    }
}

/* ============================================
   DROPDOWNS
   ============================================ */

@media (max-width: 768px) {
    .dropdown-menu {
        font-size: 0.85rem;
    }
    
    .dropdown-item {
        padding: 0.5rem 1rem;
    }
    
    .dropdown-toggle {
        font-size: 0.85rem !important;
    }
}

/* ============================================
   INFO GROUPS (Page profil)
   ============================================ */

.info-group {
    padding: 0.5rem;
    border-radius: 0.375rem;
    background-color: #f8f9fa;
    margin-bottom: 0.75rem;
}

.info-group .small {
    font-weight: 600;
    color: var(--primary-color);
    margin-bottom: 0.25rem;
}

@media (max-width: 768px) {
    .info-group {
        padding: 0.4rem;
        margin-bottom: 0.5rem;
    }
    
    .info-group .small {
        font-size: 0.75rem !important;
    }
    
    .info-group .fw-medium {
        font-size: 0.85rem;
    }
}

/* ============================================
   ICÔNES
   ============================================ */

@media (max-width: 768px) {
    /* Réduire légèrement les icônes */
    .fas, .far, .fab {
        font-size: 0.9em;
    }
    
    /* Icônes dans les titres */
    h1 .fas,
    h2 .fas,
    h3 .fas {
        font-size: 1em;
    }
}

/* ============================================
   IMAGES ET PHOTOS
   ============================================ */

@media (max-width: 768px) {
    .photo-container {
        height: 140px !important;
    }
    
    .gallery-thumb {
        height: 50px !important;
        width: 70px !important;
    }
}

/* ============================================
   GRILLES DE CARTES (Meubles, Templates)
   ============================================ */

@media (max-width: 768px) {
    .furniture-item .card,
    .template-item .card {
        font-size: 0.85rem;
    }
    
    .furniture-item .card-title,
    .template-item .card-title {
        font-size: 0.9rem !important;
        margin-bottom: 0.3rem;
    }
    
    .furniture-item .card-text,
    .template-item .card-text {
        font-size: 0.75rem;
        margin-bottom: 0.25rem;
    }
    
    .furniture-item .card-body,
    .template-item .card-body {
        padding: 0.5rem !important;
    }
}

/* ============================================
   ACTIONS RAPIDES
   ============================================ */

@media (max-width: 768px) {
    .action-buttons .btn {
        font-size: 0.7rem !important;
        padding: 0.25rem 0.5rem !important;
    }
    
    .mobile-actions .btn {
        font-size: 0.75rem !important;
        padding: 0.3rem 0.5rem !important;
    }
}

/* ============================================
   FORMULAIRES DE RECHERCHE
   ============================================ */

@media (max-width: 768px) {
    #quickSearch,
    .search-input {
        font-size: 0.85rem !important;
        padding: 0.5rem !important;
    }
    
    .input-group .btn {
        padding: 0.5rem !important;
    }
}

/* ============================================
   EMPTY STATES
   ============================================ */

@media (max-width: 768px) {
    .empty-state {
        padding: 2rem 1rem !important;
    }
    
    .empty-state h3 {
        font-size: 1.1rem !important;
    }
    
    .empty-state p {
        font-size: 0.85rem;
    }
    
    .empty-state i {
        font-size: 3rem !important;
    }
}

/* ============================================
   STATISTIQUES / DASHBOARD
   ============================================ */

@media (max-width: 768px) {
    .stat-card .display-4 {
        font-size: 2rem !important;
    }
    
    .stat-card h5 {
        font-size: 0.9rem !important;
    }
}

/* ============================================
   TIMELINE
   ============================================ */

@media (max-width: 768px) {
    .timeline-item {
        font-size: 0.85rem;
    }
    
    .timeline-item .timeline-date {
        font-size: 0.75rem;
    }
}

/* ============================================
   TABLETTE ET PC - CORRECTIONS BREAKPOINTS
   ============================================ */

/* Sur tablette et PC (769px et plus), forcer l'affichage du menu desktop */
@media (min-width: 769px) {
    /* Menu desktop visible */
    .navbar-collapse {
        display: flex !important;
        flex-basis: auto !important;
    }
    
    .navbar-toggler {
        display: none !important;
    }
    
    /* Footer desktop visible */
    .footer .container.d-none.d-md-block {
        display: block !important;
    }
    
    .mobile-bottom-nav {
        display: none !important;
    }
    
    .floating-add-btn {
        display: none !important;
    }
    
    /* Onglets de page mobiles cachés */
    #page-tabs-container {
        display: none !important;
    }
    
    /* Ajuster le padding du contenu pour tablette/PC */
    .main-content {
        padding-bottom: 80px !important;
    }
    
    /* Logo texte et bouton profil mobile cachés */
    .flex-grow-1.text-center.d-md-none {
        display: none !important;
    }
    
    .mobile-profile-btn.d-md-none {
        display: none !important;
    }
}

/* ============================================
   MODALS ET BOÎTES DE DIALOGUE
   ============================================ */

/* Assurer que les modals Bootstrap sont au-dessus de tout */
.modal {
    z-index: 1055 !important;
}

.modal-backdrop {
    z-index: 1050 !important;
    background-color: rgba(0, 0, 0, 0.5);
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
}

.modal-backdrop.show {
    opacity: 0.5;
}

/* Quand un modal est ouvert */
body.modal-open {
    overflow: hidden !important;
}

body.modal-open #main-header {
    z-index: 1040 !important;
}

body.modal-open .footer,
body.modal-open .floating-add-btn {
    z-index: 1040 !important;
}

body.modal-open .main-content {
    overflow: hidden !important;
}

/* Modal dialog centré */
.modal-dialog {
    z-index: 1056 !important;
}

/* Modal harmonisé */
.modal-content {
    border-radius: 0.5rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1056 !important;
    position: relative;
}

.modal-header.border-0 {
    border-bottom: 1px solid #e9ecef !important;
}

.modal-footer.border-0 {
    border-top: 1px solid #e9ecef !important;
}

.modal-title i.text-warning {
    animation: pulse 2s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.5;
    }
}

@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem;
    }
    
    .modal-title {
        font-size: 1rem !important;
    }
    
    .modal-body {
        font-size: 0.85rem;
        padding: 1rem !important;
    }
    
    .modal-footer,
    .modal-header {
        padding: 0.75rem 1rem !important;
    }
}

/* ============================================
   MESSAGES FLASH ET ALERTES
   ============================================ */

.flash-messages-container {
    animation: slideDown 0.3s ease-out;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert {
    border-radius: 0.5rem;
    border-left: 4px solid;
}

.alert-success {
    border-left-color: #198754;
    background-color: #d1e7dd;
}

.alert-danger {
    border-left-color: #dc3545;
    background-color: #f8d7da;
}

.alert-warning {
    border-left-color: #ffc107;
    background-color: #fff3cd;
}

.alert-info {
    border-left-color: #0dcaf0;
    background-color: #cff4fc;
}

@media (max-width: 768px) {
    .alert {
        font-size: 0.85rem;
        padding: 0.75rem !important;
    }
    
    .alert i {
        font-size: 1rem;
    }
    
    .alert .btn-close {
        padding: 0.5rem;
    }
}