/* ====================================================
   RESPONSIVE DASHBOARD STYLES - Gis Ticket Wifi
   Optimisations pour toutes les tailles d'écran
   ==================================================== */

/* Sidebar fixe - Ajustement du contenu principal */
@media (min-width: 992px) {
    .dashboard-content-wrapper {
        margin-left: 25%;
        width: 75%;
        padding: 60px 40px 40px;
    }
}

@media (max-width: 991px) {
    .dashboard-content-wrapper {
        width: 100%;
        padding: 30px 20px;
    }
}

/* ============================================
   MOBILE FIRST - Base Styles (< 576px)
   ============================================ */

/* Container Adjustments */
.container-fluid {
    padding-left: 10px;
    padding-right: 10px;
}

@media (min-width: 576px) {
    .container-fluid {
        padding-left: 15px;
        padding-right: 15px;
    }
}

/* Sidebar Mobile */
@media (max-width: 991.98px) {
    .sidebar {
        margin-bottom: 20px;
    }
    
    .sidebar-menu {
        font-size: 14px;
    }
    
    .sidebar-menu li a {
        padding: 10px 15px;
    }
}

/* Dashboard Content */
.dashboard-content {
    min-height: calc(100vh - 200px);
}

/* Cards Stack on Mobile */
@media (max-width: 575.98px) {
    .row > [class*='col-'] {
        margin-bottom: 15px;
    }
    
    .row > [class*='col-']:last-child {
        margin-bottom: 0;
    }
}

/* ============================================
   FORM ELEMENTS RESPONSIVE
   ============================================ */

/* Input Groups Mobile Friendly */
@media (max-width: 575.98px) {
    .input-group-text {
        font-size: 14px;
        padding: 0.375rem 0.5rem;
    }
    
    .input-group .btn {
        font-size: 14px;
    }
}

/* Form Check Radio Buttons */
.form-check {
    padding: 0;
}

.form-check-input {
    margin-top: 0.25rem;
}

@media (max-width: 767.98px) {
    .form-check-inline.w-100 {
        display: block !important;
    }
}

/* ============================================
   BUTTONS RESPONSIVE
   ============================================ */

/* Button Groups on Mobile */
@media (max-width: 575.98px) {
    .btn {
        font-size: 14px;
        padding: 8px 12px;
    }
    
    .btn-lg {
        font-size: 15px;
        padding: 10px 16px;
    }
    
    .btn-sm {
        font-size: 12px;
        padding: 6px 10px;
    }
}

/* Stack Buttons on Small Screens */
.btn-group-responsive {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

@media (min-width: 576px) {
    .btn-group-responsive {
        flex-direction: row;
    }
}

/* ============================================
   TABLES RESPONSIVE
   ============================================ */

/* Better Table Scrolling */
.table-responsive {
    border-radius: 8px;
    margin-bottom: 1rem;
}

@media (max-width: 767.98px) {
    .table-responsive {
        border: 1px solid #dee2e6;
    }
    
    .table {
        margin-bottom: 0;
        min-width: 500px;
    }
    
    .table thead {
        font-size: 12px;
    }
    
    .table tbody {
        font-size: 13px;
    }
}

/* Hide columns on smaller screens */
@media (max-width: 767.98px) {
    .d-md-table-cell {
        display: none !important;
    }
}

@media (max-width: 991.98px) {
    .d-lg-table-cell {
        display: none !important;
    }
}

/* ============================================
   CARDS & BOXES RESPONSIVE
   ============================================ */

/* Card Spacing */
.card, .config-card, .info-box, .warning-box {
    margin-bottom: 15px;
}

@media (min-width: 768px) {
    .card, .config-card, .info-box, .warning-box {
        margin-bottom: 20px;
    }
}

@media (min-width: 992px) {
    .card, .config-card, .info-box, .warning-box {
        margin-bottom: 25px;
    }
}

/* ============================================
   TYPOGRAPHY RESPONSIVE
   ============================================ */

/* Headings Scale */
h1, .h1 {
    font-size: 1.75rem;
}

h2, .h2 {
    font-size: 1.5rem;
}

h3, .h3 {
    font-size: 1.25rem;
}

h4, .h4 {
    font-size: 1.125rem;
}

h5, .h5 {
    font-size: 1rem;
}

@media (min-width: 768px) {
    h1, .h1 {
        font-size: 2.25rem;
    }
    
    h2, .h2 {
        font-size: 1.875rem;
    }
    
    h3, .h3 {
        font-size: 1.5rem;
    }
    
    h4, .h4 {
        font-size: 1.25rem;
    }
    
    h5, .h5 {
        font-size: 1.125rem;
    }
}

/* Body Text */
body {
    font-size: 14px;
    line-height: 1.6;
}

@media (min-width: 768px) {
    body {
        font-size: 15px;
    }
}

@media (min-width: 992px) {
    body {
        font-size: 16px;
    }
}

/* ============================================
   SPACING UTILITIES
   ============================================ */

/* Responsive Margins */
.mb-responsive {
    margin-bottom: 1rem;
}

@media (min-width: 768px) {
    .mb-responsive {
        margin-bottom: 1.5rem;
    }
}

@media (min-width: 992px) {
    .mb-responsive {
        margin-bottom: 2rem;
    }
}

/* Responsive Padding */
.p-responsive {
    padding: 1rem;
}

@media (min-width: 768px) {
    .p-responsive {
        padding: 1.5rem;
    }
}

@media (min-width: 992px) {
    .p-responsive {
        padding: 2rem;
    }
}

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

@media (max-width: 575.98px) {
    .modal-dialog {
        margin: 10px;
        max-width: calc(100% - 20px);
    }
    
    .modal-content {
        padding: 15px;
    }
    
    .modal-header {
        padding: 15px;
    }
    
    .modal-body {
        padding: 15px;
    }
    
    .modal-footer {
        padding: 15px;
    }
}

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

@media (max-width: 575.98px) {
    .alert {
        padding: 10px 12px;
        font-size: 13px;
    }
    
    .alert-dismissible .btn-close {
        padding: 8px;
    }
}

/* ============================================
   BADGES & LABELS
   ============================================ */

.badge {
    font-size: 11px;
    padding: 4px 8px;
}

@media (min-width: 768px) {
    .badge {
        font-size: 12px;
        padding: 5px 10px;
    }
}

/* ============================================
   NAVIGATION & BREADCRUMBS
   ============================================ */

@media (max-width: 767.98px) {
    .breadcrumb {
        font-size: 12px;
        padding: 8px 12px;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        padding-right: 0.3rem;
        padding-left: 0.3rem;
    }
}

/* ============================================
   UTILITIES FOR HIDING/SHOWING CONTENT
   ============================================ */

/* Show on Mobile Only */
.show-mobile {
    display: block !important;
}

@media (min-width: 768px) {
    .show-mobile {
        display: none !important;
    }
}

/* Hide on Mobile */
.hide-mobile {
    display: none !important;
}

@media (min-width: 768px) {
    .hide-mobile {
        display: block !important;
    }
}

/* ============================================
   OVERFLOW & SCROLLING
   ============================================ */

/* Better Overflow Handling */
@media (max-width: 767.98px) {
    .overflow-auto-mobile {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* Prevent Horizontal Scroll */
body {
    overflow-x: hidden;
}

.row {
    margin-left: -10px;
    margin-right: -10px;
}

@media (min-width: 576px) {
    .row {
        margin-left: -15px;
        margin-right: -15px;
    }
}

/* ============================================
   LOADING & SKELETON SCREENS
   ============================================ */

@media (max-width: 575.98px) {
    .spinner-border {
        width: 1.5rem;
        height: 1.5rem;
    }
    
    .spinner-border-sm {
        width: 1rem;
        height: 1rem;
    }
}

/* ============================================
   PRINT STYLES
   ============================================ */

@media print {
    .sidebar,
    .navbar,
    .btn,
    .no-print {
        display: none !important;
    }
    
    .dashboard-content {
        padding: 0;
    }
    
    .col-lg-9 {
        width: 100%;
        max-width: 100%;
    }
}