body {
    padding-bottom: 2rem;
    font-size: 1rem;
}
.list-group-item .form-check-input {
    margin-top: 0.1rem;
}
.navbar-brand {
    font-weight: 700;
}
.badge {
    font-size: 0.9rem;
}
.form-control-sm, .form-select-sm {
    font-size: 1rem;
}
.btn-sm {
    font-size: 0.9rem;
}

/* === MOBILE RESPONSIVE === */
@media (max-width: 767.98px) {
    /* Header - stack buttons vertically */
    .d-flex.justify-content-between.align-items-center.mb-3 {
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex.gap-2 {
        width: 100%;
        justify-content: stretch;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex.gap-2 > .btn,
    .d-flex.justify-content-between.align-items-center.mb-3 > .d-flex.gap-2 > a.btn {
        flex: 1 1 calc(50% - 0.25rem);
        min-width: 120px;
        text-align: center;
    }

    /* Progress bar thicker on mobile */
    .progress[style*="height: 24px"] {
        height: 28px !important;
        font-size: 0.95rem;
    }

    /* Info rows - stack on mobile */
    .row.mb-3 > .col-md-4 {
        width: 100%;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9ecef;
    }
    .row.mb-3 > .col-md-4:last-child {
        border-bottom: none;
    }

    /* Category cards */
    .card.mb-3 {
        margin-bottom: 1rem !important;
    }
    .card-header.bg-secondary {
        padding: 0.5rem 0.75rem;
        font-size: 1rem;
    }

    /* Hide desktop-only Ok button (in first div) on mobile */
    .list-group-item > div:first-child > .status-btn[data-status="ok"] {
        display: none !important;
    }

    /* Show mobile-only Ok button (in button row) on mobile */
    .list-group-item .status-btn.mobile-only-btn {
        display: inline-flex !important;
    }

    /* List group items - grid layout on mobile:
       Row 1: Description
       Row 2: Three buttons (Ok | À vérifier | URGENT) - FILLED COLORS */
    .list-group-item {
        display: grid !important;
        grid-template-rows: auto auto;
        grid-template-columns: 1fr;
        gap: 0.5rem;
        padding: 0.75rem;
        align-items: start;
    }
    /* Promote grandchildren to grid children */
    .list-group-item > div {
        display: contents !important;
    }
    /* Description (span in first div) */
    .list-group-item > div:first-child > span {
        grid-row: 1;
        font-size: 1rem;
        font-weight: 500;
        text-align: left;
    }
    /* Button row - three buttons equal width */
    .list-group-item > div:last-child {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        gap: 0.35rem;
        grid-row: 2;
        flex-wrap: nowrap;
    }
    .list-group-item .status-btn {
        flex: 1 1 0% !important;
        min-width: 0 !important;
        min-height: 44px !important;
        font-size: 0.85rem !important;
        font-weight: 600 !important;
        padding: 0.5rem 0.35rem !important;
        white-space: nowrap !important;
        border: 1px solid #dee2e6 !important;
        color: #212529 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
        text-align: center !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        background: white !important;
        background-image: none !important;
        background-color: white !important;
        border-color: #dee2e6 !important;
    }

    /* 1. NEUTRALIZE all Bootstrap variant styles for status-btn (default + pseudo-states, NOT .active) */
    .list-group-item .status-btn.btn-success,
    .list-group-item .status-btn.btn-outline-success,
    .list-group-item .status-btn.btn-warning,
    .list-group-item .status-btn.btn-outline-warning,
    .list-group-item .status-btn.btn-danger,
    .list-group-item .status-btn.btn-outline-danger,
    .list-group-item .status-btn.btn-success:hover,
    .list-group-item .status-btn.btn-outline-success:hover,
    .list-group-item .status-btn.btn-warning:hover,
    .list-group-item .status-btn.btn-outline-warning:hover,
    .list-group-item .status-btn.btn-danger:hover,
    .list-group-item .status-btn.btn-outline-danger:hover,
    .list-group-item .status-btn.btn-success:focus,
    .list-group-item .status-btn.btn-outline-success:focus,
    .list-group-item .status-btn.btn-warning:focus,
    .list-group-item .status-btn.btn-outline-warning:focus,
    .list-group-item .status-btn.btn-danger:focus,
    .list-group-item .status-btn.btn-outline-danger:focus,
    .list-group-item .status-btn.btn-success:active,
    .list-group-item .status-btn.btn-outline-success:active,
    .list-group-item .status-btn.btn-warning:active,
    .list-group-item .status-btn.btn-outline-warning:active,
    .list-group-item .status-btn.btn-danger:active,
    .list-group-item .status-btn.btn-outline-danger:active {
        background: #fff !important;
        background-image: none !important;
        background-color: #fff !important;
        color: #212529 !important;
        border-color: #dee2e6 !important;
        box-shadow: none !important;
    }
    .list-group-item .status-btn:hover {
        box-shadow: 0 2px 4px rgba(0,0,0,0.15) !important;
    }

    /* 2. BASE BUTTON STYLES (white by default) - using attribute selector for specificity */
    .list-group-item .status-btn[data-status="ok"],
    .list-group-item .status-btn[data-status="a_corriger"],
    .list-group-item .status-btn[data-status="urgent"] {
        background: #fff !important;
        color: #212529 !important;
        border-color: #dee2e6 !important;
    }
    .list-group-item .status-btn[data-status="ok"] { order: 1; }
    .list-group-item .status-btn[data-status="a_corriger"] { order: 2; }
    .list-group-item .status-btn[data-status="urgent"] { order: 3; }

    /* 3. ACTIVE STATE - single .active class, comes AFTER neutralization, HIGHER specificity */
    .list-group-item .btn.status-btn[data-status="ok"].active,
    .list-group-item .btn.status-btn[data-status="ok"].active:hover,
    .list-group-item .btn.status-btn[data-status="ok"].active:focus {
        background: #157347 !important;
        color: #fff !important;
        border-color: #157347 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    .list-group-item .btn.status-btn[data-status="a_corriger"].active,
    .list-group-item .btn.status-btn[data-status="a_corriger"].active:hover,
    .list-group-item .btn.status-btn[data-status="a_corriger"].active:focus {
        background: #ffc107 !important;
        color: #212529 !important;
        border-color: #ffc107 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }
    .list-group-item .btn.status-btn[data-status="urgent"].active,
    .list-group-item .btn.status-btn[data-status="urgent"].active:hover,
    .list-group-item .btn.status-btn[data-status="urgent"].active:focus {
        background: #dc3545 !important;
        color: #fff !important;
        border-color: #dc3545 !important;
        box-shadow: 0 2px 4px rgba(0,0,0,0.2) !important;
    }

    /* Badges - inline in button row */
    .list-group-item > div:last-child > .badge.bg-info {
        font-size: 0.7rem;
        padding: 0.25rem 0.4rem;
        flex-shrink: 0;
        margin-left: 0.25rem;
        align-self: center;
    }
    /* Status badge - REMOVED on mobile (button shows active state) */
    .list-group-item .item-status-badge {
        display: none !important;
    }

    /* Filter buttons (Terminé / Voir tout) - same style as item buttons */
    #filter-done-btn,
    #filter-all-btn,
    #filter-done-btn-bottom,
    #filter-all-btn-bottom {
        background: white !important;
        color: #212529 !important;
        border: 1px solid #dee2e6 !important;
        min-height: 44px;
        font-size: 1rem;
        font-weight: 600;
        padding: 0.5rem 1rem;
        text-align: center;
        display: flex;
        align-items: center;
        justify-content: center;
        box-shadow: 0 2px 4px rgba(0,0,0,0.15);
    }
    #filter-done-btn.active,
    #filter-all-btn.active,
    #filter-done-btn-bottom.active,
    #filter-all-btn-bottom.active {
        background: #0d6efd !important; /* bootstrap primary blue */
        color: white !important;
        border-color: #0d6efd !important;
    }

    /* Notes card */
    .card.mt-3 {
        margin-top: 1rem !important;
    }

    /* === DASHBOARD MOBILE === */
    /* Header - stack title and button */
    .d-flex.justify-content-between.align-items-center.mb-3:has(h2:only-child) {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .d-flex.justify-content-between.align-items-center.mb-3:has(h2:only-child) > .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Today's prequart card - stack elements */
    .card.mb-4 .d-flex.justify-content-between.align-items-center {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }
    .card.mb-4 .d-flex.justify-content-between.align-items-center > .btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* Admin verification form - stack inputs */
    .card.mb-4 form.mt-3 .d-flex.gap-2 {
        flex-direction: column !important;
        gap: 0.5rem !important;
    }
    .card.mb-4 form.mt-3 .d-flex.gap-2 > .btn,
    .card.mb-4 form.mt-3 .d-flex.gap-2 > span {
        width: 100% !important;
        text-align: center !important;
    }
    .card.mb-4 form.mt-3 input.form-control-sm {
        width: 100% !important;
    }

    /* Recent prequarts table -> card layout */
    .table-responsive {
        overflow-x: visible !important;
    }
    .table-responsive table.table {
        display: none !important; /* Hide desktop table */
    }

    /* Mobile card layout for prequarts */
    .prequart-mobile-card {
        display: block !important;
        background: #fff;
        border: 1px solid #dee2e6;
        border-radius: 0.5rem;
        margin-bottom: 1rem;
        padding: 1rem;
    }
    .prequart-mobile-card .prequart-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 0.75rem;
        padding-bottom: 0.5rem;
        border-bottom: 1px solid #e9ecef;
    }
    .prequart-mobile-card .prequart-date-shift {
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .prequart-mobile-card .prequart-date {
        font-weight: 600;
        font-size: 1rem;
    }
    .prequart-mobile-card .prequart-shift {
        font-size: 0.875rem;
        color: #6c757d;
    }
    .prequart-mobile-card .prequart-status {
        display: flex;
        flex-direction: column;
        align-items: flex-end;
        gap: 0.25rem;
    }
    .prequart-mobile-card .prequart-progress {
        margin: 0.75rem 0;
    }
    .prequart-mobile-card .prequart-progress .progress {
        height: 20px !important;
        font-size: 0.8rem;
    }
    .prequart-mobile-card .prequart-times {
        display: flex;
        gap: 1rem;
        font-size: 0.875rem;
        color: #6c757d;
        margin-bottom: 0.75rem;
    }
    .prequart-mobile-card .prequart-times span {
        display: flex;
        align-items: center;
        gap: 0.25rem;
    }
    .prequart-mobile-card .prequart-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 0.5rem;
    }
    .prequart-mobile-card .prequart-actions .btn {
        flex: 1 1 auto;
        min-width: 120px;
        text-align: center;
    }
    .prequart-mobile-card .prequart-actions .form-group {
        flex: 1 1 100%;
        display: flex;
        flex-direction: column;
        gap: 0.25rem;
    }
    .prequart-mobile-card .prequart-actions .form-group .d-flex {
        flex-direction: column !important;
        gap: 0.25rem !important;
    }
    .prequart-mobile-card .prequart-actions .form-group input {
        width: 100% !important;
    }
    .prequart-mobile-card .prequart-actions .form-group .btn {
        width: 100% !important;
    }
    .prequart-mobile-card .verified-badge {
        color: #198754;
        font-size: 1.5rem;
        text-align: center;
        width: 100%;
    }
}

/* Desktop: hide mobile-only Ok button */
@media (min-width: 768px) {
    .list-group-item .status-btn.mobile-only-btn {
        display: none !important;
    }
}

/* Tablet adjustments */
@media (min-width: 768px) and (max-width: 991.98px) {
    .list-group-item .status-btn {
        min-height: 44px;
    }
    .list-group-item .btn-warning,
    .list-group-item .btn-outline-warning,
    .list-group-item .btn-danger,
    .list-group-item .btn-outline-danger {
        min-height: 44px;
    }
}

/* Larger touch targets everywhere */
.btn {
    min-height: 40px;
}
.form-control-sm, .form-select-sm {
    min-height: 44px;
}