/* =============================================
   Mobile Fixes - All Pages
   ============================================= */

/* ---- 1. SIDEBAR FOOTER FIX ---- */
.sidebar .sidebar-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
}

.sidebar .nav-section {
    flex-shrink: 0;
}

.sidebar .sidebar-footer {
    margin-top: auto;
    flex-shrink: 0;
    padding: 1rem;
    border-top: 1px solid rgba(255,255,255,0.1);
    background: rgba(0,0,0,0.1);
}

/* Mobile: sidebar-content fills remaining height and scrolls */
@media (max-width: 992px) {
    .sidebar {
        display: flex !important;
        flex-direction: column !important;
        position: fixed !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        max-width: 85% !important;
        height: 100% !important; /* Fallback */
        height: 100dvh !important; /* Modern mobile browsers */
        z-index: 10001 !important;
        transition: transform 0.3s ease-in-out !important;
        visibility: visible !important;
        opacity: 1 !important;
        box-shadow: none !important;
        overflow: hidden !important; /* Prevent parent from scrolling */
    }

    /* RTL Default */
    .sidebar {
        right: 0 !important;
        left: auto !important;
        transform: translateX(100%) !important;
    }

    /* LTR Support */
    [dir="ltr"] .sidebar {
        left: 0 !important;
        right: auto !important;
        transform: translateX(-100%) !important;
    }

    .sidebar.show {
        transform: translateX(0) !important;
        box-shadow: -10px 0 30px rgba(0,0,0,0.5) !important;
    }

    /* Highlight close button */
    .sidebar .close-btn {
        display: flex !important;
        background: rgba(255, 255, 255, 0.2) !important;
        color: white !important;
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
        margin-left: 10px !important;
        font-size: 1.4rem !important;
    }

    .sidebar .sidebar-content {
        flex: 1 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        min-height: 0 !important;
    }

    .sidebar .sidebar-footer {
        flex-shrink: 0 !important;
        background: rgba(0,0,0,0.3) !important;
        border-top: 1px solid rgba(255,255,255,0.1) !important;
        padding: 10px !important;
        z-index: 1050 !important;
    }

    .sidebar .sidebar-footer .nav-link {
        padding: 10px 15px !important;
        background: rgba(255,255,255,0.1) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
    }
}

/* ---- 2. OVERRIDE INLINE margin-right: 250px in KPI page ---- */
/* key_performance_indicators.php has inline style that overrides our CSS */
/* We use !important to override it */
@media (max-width: 992px) {
    /* Override any inline margin-right on main-content */
    .main-content[style*="margin-right"] {
        margin-right: 0 !important;
    }
    .main-content[style*="margin-left"] {
        margin-left: 0 !important;
    }
}

/* ---- 3. TOGGLE BUTTONS - Mobile Fix ---- */
.toggle-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 20px;
}

.toggle-btn {
    font-size: 14px;
    padding: 10px 20px;
}

@media (max-width: 768px) {
    .toggle-buttons {
        flex-direction: column;
        align-items: stretch;
        gap: 6px;
        padding: 0 0.25rem;
    }

    .toggle-btn {
        width: 100%;
        text-align: center;
        justify-content: center;
        padding: 10px 15px;
        font-size: 13px;
        border-radius: 10px !important;
    }
}

/* ---- 4. PAGE HEADER BUTTONS - Mobile Fix ---- */
@media (max-width: 768px) {
    /* Header row with title + buttons */
    .d-flex.justify-content-between.align-items-center.mb-4 {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 0.75rem;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 0.4rem !important;
        width: 100%;
    }

    .d-flex.justify-content-between.align-items-center.mb-4 > div:last-child .btn,
    .d-flex.justify-content-between.align-items-center.mb-4 > div:last-child .action-btn {
        flex: 1 1 auto;
        min-width: 0;
        font-size: 0.78rem;
        padding: 0.45rem 0.65rem;
        border-radius: 8px !important;
        white-space: nowrap;
        text-align: center;
        justify-content: center;
    }
}

/* ---- 5. REPORTS CENTER - Card Grid Fix ---- */
@media (max-width: 768px) {
    /* reports_center.php cards */
    .report-card {
        margin-bottom: 1rem;
        height: auto !important;
    }

    .report-card-header {
        padding: 12px 15px !important;
    }

    .report-card-header h5 {
        font-size: 0.85rem !important;
        margin-bottom: 2px !important;
        word-break: break-word;
        white-space: normal !important;
        overflow: visible !important;
        text-overflow: unset !important;
    }

    .report-card-header small {
        font-size: 0.7rem !important;
        display: block;
        white-space: normal !important;
    }

    .report-icon {
        font-size: 1.8rem !important;
        margin-bottom: 6px !important;
    }

    .report-card-body {
        padding: 12px !important;
    }

    .report-card-body p {
        font-size: 0.78rem !important;
        margin-bottom: 8px !important;
        display: none; /* Hide description on mobile to save space */
    }

    .report-btn {
        padding: 7px 8px !important;
        font-size: 0.78rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .section-title {
        font-size: 1rem !important;
        margin: 12px 0 10px 0 !important;
        padding-bottom: 6px !important;
    }
}

/* ---- 6. ACTIVITY LOG - Mobile Fix ---- */
@media (max-width: 768px) {
    .activity-item {
        padding: 12px !important;
    }

    .activity-icon {
        width: 38px !important;
        height: 38px !important;
        font-size: 1rem !important;
        margin-left: 12px !important;
        flex-shrink: 0;
    }

    .activity-item .d-flex.align-items-start {
        flex-wrap: nowrap;
    }

    .activity-item .flex-grow-1 .d-flex.justify-content-between {
        flex-direction: column;
        gap: 0.25rem;
    }

    .activity-item .flex-grow-1 .row {
        margin: 0;
    }

    .activity-item .flex-grow-1 .row .col-md-6 {
        padding: 0;
        width: 100%;
        flex: 0 0 100%;
        max-width: 100%;
    }

    .filter-card {
        padding: 15px !important;
        border-radius: 10px !important;
    }

    .filter-card .row.g-3 > * {
        padding-right: 0.4rem !important;
        padding-left: 0.4rem !important;
    }

    /* Stats cards in activity log */
    .row.mb-4 .col-md-3 {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
        margin-bottom: 0.5rem;
    }
}

/* ---- 7. PHARMACIST SCHEDULE - Table Fix ---- */
@media (max-width: 992px) {
    .schedule-header {
        padding: 0.85rem !important;
        border-radius: 10px !important;
    }

    .schedule-header .action-buttons-grid {
        width: 100%;
        justify-content: flex-start !important;
    }

    .schedule-header .action-buttons-grid .btn {
        font-size: 0.75rem;
        padding: 0.4rem 0.6rem;
    }

    /* Schedule table wrapper: horizontal scroll - CRITICAL for sticky to work */
    .schedule-table-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        border-radius: 10px;
        scrollbar-width: thin;
        scrollbar-color: #5e35b1 #f0f0f0;
        /* Must be positioned for sticky children to work */
        position: relative !important;
    }

    .schedule-table-wrapper::-webkit-scrollbar { height: 5px; }
    .schedule-table-wrapper::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
    .schedule-table-wrapper::-webkit-scrollbar-thumb { background: #5e35b1; border-radius: 3px; }

    /* Schedule table cells smaller on mobile */
    .schedule-table th,
    .schedule-table td {
        padding: 5px 3px !important;
        font-size: 0.72rem !important;
        min-width: 28px !important;
    }

    /* Fix sticky name column width on mobile - RTL */
    [dir="rtl"] .schedule-table .sticky-col-name {
        position: sticky !important;
        right: 0 !important;
        z-index: 40 !important;
        min-width: 90px !important;
        max-width: 90px !important;
        width: 90px !important;
        font-size: 0.72rem !important;
        background-color: #f8f9fa !important;
        box-shadow: -3px 0 6px rgba(0,0,0,0.15) !important;
    }

    [dir="rtl"] .schedule-table .sticky-col-code {
        position: sticky !important;
        right: 90px !important;
        z-index: 40 !important;
        min-width: 45px !important;
        max-width: 45px !important;
        width: 45px !important;
        font-size: 0.72rem !important;
        background-color: #f8f9fa !important;
        box-shadow: -2px 0 4px rgba(0,0,0,0.1) !important;
    }

    [dir="rtl"] .schedule-table thead th.sticky-col-name {
        position: sticky !important;
        right: 0 !important;
        z-index: 50 !important;
        min-width: 90px !important;
        max-width: 90px !important;
        width: 90px !important;
        background-color: #5e35b1 !important;
        color: white !important;
    }

    [dir="rtl"] .schedule-table thead th.sticky-col-code {
        position: sticky !important;
        right: 90px !important;
        z-index: 50 !important;
        min-width: 45px !important;
        max-width: 45px !important;
        width: 45px !important;
        background-color: #5e35b1 !important;
        color: white !important;
    }

    /* Fix sticky name column width on mobile - LTR */
    [dir="ltr"] .schedule-table .sticky-col-name {
        position: sticky !important;
        left: 0 !important;
        z-index: 40 !important;
        min-width: 90px !important;
        max-width: 90px !important;
        width: 90px !important;
        font-size: 0.72rem !important;
        background-color: #f8f9fa !important;
        box-shadow: 3px 0 6px rgba(0,0,0,0.15) !important;
    }

    [dir="ltr"] .schedule-table .sticky-col-code {
        position: sticky !important;
        left: 90px !important;
        z-index: 40 !important;
        min-width: 45px !important;
        max-width: 45px !important;
        width: 45px !important;
        font-size: 0.72rem !important;
        background-color: #f8f9fa !important;
        box-shadow: 2px 0 4px rgba(0,0,0,0.1) !important;
    }

    [dir="ltr"] .schedule-table thead th.sticky-col-name {
        position: sticky !important;
        left: 0 !important;
        z-index: 50 !important;
        min-width: 90px !important;
        max-width: 90px !important;
        width: 90px !important;
        background-color: #5e35b1 !important;
        color: white !important;
    }

    [dir="ltr"] .schedule-table thead th.sticky-col-code {
        position: sticky !important;
        left: 90px !important;
        z-index: 50 !important;
        min-width: 45px !important;
        max-width: 45px !important;
        width: 45px !important;
        background-color: #5e35b1 !important;
        color: white !important;
    }

    /* Team header row - must NOT span the sticky columns area visually */
    .schedule-table .team-header {
        font-size: 0.82rem !important;
        padding: 8px !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Date filter form */
    .card.form-card .row.g-3 > * {
        padding-right: 0.4rem !important;
        padding-left: 0.4rem !important;
    }

    /* Notes textarea in modal */
    #schedule_notes {
        min-height: 80px !important;
        font-size: 0.9rem !important;
    }

    /* Legend section */
    .mt-4.p-3 .row .col-md-12 p {
        font-size: 0.82rem;
        margin-bottom: 0.3rem !important;
    }
}

/* Extra small screens */
@media (max-width: 480px) {
    [dir="rtl"] .schedule-table .sticky-col-name,
    [dir="rtl"] .schedule-table thead th.sticky-col-name {
        min-width: 70px !important;
        max-width: 70px !important;
        width: 70px !important;
        font-size: 0.65rem !important;
    }

    [dir="rtl"] .schedule-table .sticky-col-code,
    [dir="rtl"] .schedule-table thead th.sticky-col-code {
        min-width: 36px !important;
        max-width: 36px !important;
        width: 36px !important;
        right: 70px !important;
        font-size: 0.65rem !important;
    }

    [dir="ltr"] .schedule-table .sticky-col-name,
    [dir="ltr"] .schedule-table thead th.sticky-col-name {
        min-width: 70px !important;
        max-width: 70px !important;
        width: 70px !important;
        font-size: 0.65rem !important;
    }

    [dir="ltr"] .schedule-table .sticky-col-code,
    [dir="ltr"] .schedule-table thead th.sticky-col-code {
        min-width: 36px !important;
        max-width: 36px !important;
        width: 36px !important;
        left: 70px !important;
        font-size: 0.65rem !important;
    }

    .schedule-table th,
    .schedule-table td {
        padding: 4px 2px !important;
        font-size: 0.62rem !important;
        min-width: 22px !important;
    }
}

/* ---- 8. KPI PAGE - Table & Stats Fix ---- */
@media (max-width: 768px) {
    .medical-table-wrapper {
        border-radius: 8px !important;
        margin-top: 10px !important;
    }

    .table-header-section {
        padding: 12px !important;
    }

    .table-main-title {
        font-size: 14px !important;
    }

    .table-subtitle {
        font-size: 11px !important;
    }

    /* KPI stat cards - 2 per row */
    .statistics-section .col-md-2 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        margin-bottom: 0.5rem;
    }

    .stat-card {
        padding: 12px !important;
    }

    .stat-card h6 {
        font-size: 11px !important;
        margin-bottom: 6px !important;
    }

    .stat-card span {
        font-size: 18px !important;
    }

    /* Filter row buttons */
    .col-md-3.d-flex.align-items-end {
        flex-wrap: wrap;
        gap: 0.3rem;
    }

    .col-md-3.d-flex.align-items-end .btn {
        flex: 1 1 auto;
        font-size: 0.75rem;
        padding: 0.4rem 0.5rem;
    }
}

/* ---- 9. MONITORING PAGE - Fix ---- */
@media (max-width: 768px) {
    .monitoring-table {
        font-size: 0.75rem !important;
    }

    .monitoring-table th,
    .monitoring-table td {
        padding: 6px 3px !important;
        font-size: 0.72rem !important;
    }
}

/* ---- 10. CLINICAL PHARMACY - Form Fix ---- */
@media (max-width: 768px) {

    .form-section {
        padding: 12px !important;
        margin-bottom: 12px !important;
        overflow: hidden !important;
    }

    .form-section h5 {
        margin: -12px -12px 12px -12px !important;
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
    }

    /* Stack 3-col form rows to full width */
    .form-section .row .col-md-4,
    .form-section .row .col-md-6 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Units grid - tight padding */
    .form-section .row.g-2 > [class*="col-"] {
        padding-right: 3px !important;
        padding-left: 3px !important;
    }

    /* Checkbox group: 2 columns */
    .checkbox-group {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Radio group: 2 columns */
    .radio-group {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Fix checkbox/radio size - prevent overflow */
    input[type="checkbox"],
    input[type="radio"] {
        width: 0.9rem !important;
        height: 0.9rem !important;
        flex-shrink: 0 !important;
        margin: 0 !important;
    }

    /* form-check layout */
    .form-check {
        display: flex !important;
        align-items: center !important;
        gap: 4px !important;
        padding-right: 0 !important;
        padding-left: 0 !important;
        margin-bottom: 4px !important;
        min-width: 0 !important;
    }

    .form-check-label {
        font-size: 0.75rem !important;
        line-height: 1.3 !important;
        word-break: break-word !important;
        white-space: normal !important;
        min-width: 0 !important;
    }

    /* inline radio stays inline */
    .form-check-inline {
        display: inline-flex !important;
        margin-left: 1rem !important;
        margin-right: 0 !important;
    }

    /* Textarea */
    textarea.form-control {
        min-height: 90px !important;
        font-size: 0.88rem;
    }

    /* Submit buttons stack */
    .d-flex.gap-2.mb-4 {
        flex-direction: column !important;
    }

    .d-flex.gap-2.mb-4 .btn {
        width: 100% !important;
        justify-content: center;
    }
}

/* ---- 11. NURSERY & ICU - Section Cards Fix ---- */
@media (max-width: 768px) {
    .section-card {
        margin-bottom: 12px !important;
    }

    .section-header {
        padding: 10px 12px !important;
        font-size: 0.88rem !important;
    }

    .patient-row {
        padding: 10px !important;
    }

    /* Count display badges */
    .card-header .bg-white {
        padding: 4px 10px !important;
        font-size: 0.8rem !important;
    }
}

/* ---- PATIENT DATA TABLE - Mobile Card Layout ---- */
/* Convert patient tables to card-style on mobile */
@media (max-width: 768px) {

    /* Make table scroll horizontally - simpler approach */
    #patientsTable,
    #intermediate_patients_table,
    #internal_patients_table,
    #nursery_patients_table,
    #pediatric_patients_table,
    .patient-data-table {
        min-width: 100% !important;
        width: 100% !important;
    }

    /* Remove fixed widths from th */
    #patientsTable th,
    #intermediate_patients_table th,
    #internal_patients_table th,
    #nursery_patients_table th,
    #pediatric_patients_table th,
    .patient-data-table th {
        width: auto !important;
        min-width: 0 !important;
        white-space: normal !important;
        font-size: 0.7rem !important;
        padding: 5px 3px !important;
    }

    /* All td inputs take full width of their cell */
    #patientsTable td,
    #intermediate_patients_table td,
    #internal_patients_table td,
    #nursery_patients_table td,
    #pediatric_patients_table td,
    .patient-data-table td {
        padding: 4px 3px !important;
        font-size: 0.78rem !important;
        vertical-align: middle !important;
    }

    /* Reason input - make it bigger and more usable */
    input[name="reason[]"],
    input[name="intermediate_reason[]"],
    input[name="internal_reason[]"],
    input[name="nursery_reason[]"],
    input[name="pediatric_reason[]"] {
        min-width: 80px !important;
        width: 100% !important;
        font-size: 0.82rem !important;
        padding: 5px 6px !important;
    }

    /* Patient name input */
    input[name="patient_name[]"],
    input[name="intermediate_patient_name[]"],
    input[name="internal_patient_name[]"],
    input[name="nursery_patient_name[]"],
    input[name="pediatric_patient_name[]"] {
        min-width: 90px !important;
        width: 100% !important;
        font-size: 0.82rem !important;
    }

    /* Select dropdowns in tables */
    #patientsTable td select,
    #intermediate_patients_table td select,
    #internal_patients_table td select,
    #nursery_patients_table td select,
    #pediatric_patients_table td select {
        min-width: 70px !important;
        font-size: 0.78rem !important;
        padding: 4px 2px !important;
    }

    /* Delete button */
    #patientsTable td .btn-danger,
    #intermediate_patients_table td .btn-danger,
    #internal_patients_table td .btn-danger,
    #nursery_patients_table td .btn-danger,
    #pediatric_patients_table td .btn-danger {
        padding: 4px 8px !important;
        font-size: 0.78rem !important;
    }

    /* Wrapper must scroll */
    .table-responsive:has(#patientsTable),
    .table-responsive:has(#intermediate_patients_table),
    .table-responsive:has(#internal_patients_table),
    .table-responsive:has(#nursery_patients_table),
    .table-responsive:has(#pediatric_patients_table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* ---- 12. OPERATIONS PAGE - Tabs Fix ---- */
@media (max-width: 768px) {
    .nav-tabs {
        flex-wrap: wrap !important;
        gap: 4px !important;
        border-bottom: none !important;
        margin-bottom: 0.75rem !important;
    }

    .nav-tabs .nav-link {
        padding: 8px 12px !important;
        font-size: 0.78rem !important;
        margin-right: 0 !important;
        border-radius: 8px !important;
        flex: 1 1 auto;
        text-align: center;
        justify-content: center;
    }

    .tab-content {
        padding: 0.75rem 0 !important;
    }
}

/* ---- 13. GENERAL FORM IMPROVEMENTS ---- */
@media (max-width: 768px) {
    /* Row columns stack properly */
    .row .col-md-2,
    .row .col-md-3,
    .row .col-md-4 {
        margin-bottom: 0.5rem;
    }

    /* Form controls */
    .form-control,
    .form-select {
        font-size: 0.88rem;
    }

    /* Buttons in forms */
    .btn-submit {
        width: 100%;
        border-radius: 10px !important;
        padding: 10px !important;
    }

    /* Alert messages */
    .alert {
        font-size: 0.85rem;
        padding: 0.65rem 0.85rem;
    }
}

/* ---- 14. CARD IMPROVEMENTS ---- */
@media (max-width: 768px) {
    .card {
        border-radius: 10px !important;
        margin-bottom: 0.75rem !important;
    }

    .card-header {
        padding: 0.75rem 1rem !important;
    }

    .card-header h3,
    .card-header h4,
    .card-header h5 {
        font-size: 1rem !important;
    }

    .card-header small {
        font-size: 0.72rem !important;
    }
}

/* ---- 15. PAGINATION FIX ---- */
@media (max-width: 768px) {
    .pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 2px;
    }

    .pagination .page-link {
        padding: 0.35rem 0.6rem;
        font-size: 0.82rem;
    }
}

/* ---- 16. MODAL FIX ON MOBILE ---- */
@media (max-width: 768px) {
    .modal-dialog {
        margin: 0.5rem !important;
        max-width: calc(100% - 1rem) !important;
    }

    .modal-body {
        padding: 0.85rem !important;
    }

    .modal-header {
        padding: 0.75rem 0.85rem !important;
    }

    .modal-footer {
        padding: 0.65rem 0.85rem !important;
        flex-wrap: wrap;
        gap: 0.4rem;
    }

    .modal-footer .btn {
        flex: 1 1 auto;
    }
}

/* ---- 17. DROPDOWN MENUS ---- */
@media (max-width: 768px) {
    .dropdown-menu {
        font-size: 0.85rem;
    }

    .dropdown-item {
        padding: 0.5rem 0.85rem;
    }
}

/* ---- 18. JSON VIEWER ---- */
@media (max-width: 768px) {
    .json-viewer {
        font-size: 0.75rem !important;
        max-height: 120px !important;
    }
}

/* ---- 19. SCHEDULE HEADER RESPONSIVE ---- */
@media (max-width: 576px) {
    .schedule-header .col-12.d-flex {
        flex-direction: column !important;
        align-items: flex-start !important;
    }

    .schedule-header .action-buttons-grid {
        justify-content: flex-start !important;
    }

    .schedule-header .action-buttons-grid .btn {
        font-size: 0.72rem;
        padding: 0.35rem 0.5rem;
    }
}

/* ---- 20. REPORTS CENTER - 2 cols on mobile ---- */
@media (max-width: 576px) {
    /* Medical reports section: 2 per row */
    .row .col-md-4.mb-3,
    .row .col-md-3.mb-3 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-right: 0.3rem !important;
        padding-left: 0.3rem !important;
    }

    /* Operations section: full width */
    .row .col-md-6.mb-3 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }

    /* Statistics section: full width */
    .row .col-md-12.mb-3 {
        width: 100% !important;
    }

    .report-card-header h5 {
        font-size: 0.78rem !important;
        line-height: 1.3 !important;
    }

    .report-card-header small {
        font-size: 0.65rem !important;
    }

    .report-icon {
        font-size: 1.5rem !important;
        margin-bottom: 4px !important;
    }

    .report-btn {
        font-size: 0.72rem !important;
        padding: 6px 4px !important;
    }
}

/* Very small screens: still 2 cols but tighter */
@media (max-width: 380px) {
    .row .col-md-4.mb-3,
    .row .col-md-3.mb-3 {
        width: 50% !important;
        flex: 0 0 50% !important;
        max-width: 50% !important;
        padding-right: 0.2rem !important;
        padding-left: 0.2rem !important;
    }

    .report-card-header {
        padding: 8px 10px !important;
    }

    .report-card-body {
        padding: 8px 10px !important;
    }
}

/* ---- 21. MEDICATION DISPENSED PER OPERATION - Mobile Fix ---- */
@media (max-width: 768px) {
    /* Form row: stack fields vertically */
    .access-form .form-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 8px !important;
    }

    /* Table: horizontal scroll */
    .table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-height: none !important;
    }

    .access-table {
        min-width: 700px !important;
    }

    .access-table th,
    .access-table td {
        font-size: 0.72rem !important;
        padding: 5px 4px !important;
        white-space: nowrap !important;
    }

    /* Stats bar: wrap */
    .stats-bar {
        flex-wrap: wrap !important;
        gap: 10px !important;
    }

    .stats-bar .stat-item {
        flex: 1 1 calc(33% - 10px) !important;
        min-width: 80px !important;
        text-align: center;
    }

    /* Header buttons stack */
    .d-flex.justify-content-between.align-items-center.mb-4 .btn {
        font-size: 0.78rem !important;
        padding: 0.4rem 0.6rem !important;
    }
}

@media (max-width: 480px) {
    .access-form .form-row {
        grid-template-columns: 1fr !important;
    }

    .stats-bar .stat-item {
        flex: 1 1 calc(50% - 10px) !important;
    }
}

/* ---- 22. OPERATIONS TEAM REPORT - Mobile Fix ---- */
@media (max-width: 576px) {
    /* stat-box edit input: smaller font */
    .stat-box .edit-input {
        font-size: 1.1rem !important;
        padding: 4px !important;
    }

    /* stat-number: smaller on very small screens */
    .stat-number {
        font-size: 2rem !important;
    }

    /* Filter form: stack */
    #filterForm .row > [class*="col-"] {
        margin-bottom: 0.5rem;
    }

    /* Chart containers: reduce height */
    .chart-container {
        height: 250px !important;
    }
}

/* ---- 23. MANAGE PATIENTS TABLE - Mobile Fix ---- */
@media (max-width: 768px) {

    /* Force horizontal scroll on the patients table wrapper */
    .card .table-responsive:has(.pt-table) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Fallback for browsers that don't support :has() */
    .table-responsive {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Patients table: compact cells */
    .pt-table th,
    .pt-table td {
        font-size: 0.72rem !important;
        padding: 5px 4px !important;
        white-space: nowrap !important;
    }

    /* Avatar + name column: keep readable */
    .pt-table td .d-flex.align-items-center.gap-2 {
        gap: 5px !important;
    }

    .pt-table td .d-flex.align-items-center.gap-2 > div {
        width: 26px !important;
        height: 26px !important;
        font-size: 0.72rem !important;
        flex-shrink: 0 !important;
    }

    /* Hide less important columns on small screens */
    .pt-table th:nth-child(7),   /* last report */
    .pt-table td:nth-child(7),
    .pt-table th:nth-child(8),   /* date added */
    .pt-table td:nth-child(8) {
        display: none !important;
    }

    /* Action buttons: tighter */
    .pt-table .d-flex.gap-1 {
        gap: 2px !important;
    }

    .pt-table .btn-xs {
        padding: 3px 6px !important;
        font-size: 0.7rem !important;
    }

    /* Unit badges: smaller */
    .unit-badge {
        font-size: 0.62rem !important;
        padding: 1px 5px !important;
    }
}

@media (max-width: 480px) {
    /* On very small screens also hide units column */
    .pt-table th:nth-child(5),
    .pt-table td:nth-child(5) {
        display: none !important;
    }
}

/* ---- 24. PHARMACIST SCHEDULE - Sticky Columns Deep Fix ---- */
/* Prevent card from clipping sticky positioned cells */
.card-body:has(.schedule-table) {
    overflow: visible !important;
}

@media (max-width: 992px) {
    .schedule-table-wrapper {
        overflow-x: auto !important;
        overflow-y: visible !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: thin;
        scrollbar-color: #5e35b1 #f0f0f0;
    }

    .schedule-table-wrapper::-webkit-scrollbar { height: 5px; }
    .schedule-table-wrapper::-webkit-scrollbar-track { background: #f0f0f0; border-radius: 3px; }
    .schedule-table-wrapper::-webkit-scrollbar-thumb { background: #5e35b1; border-radius: 3px; }

    .schedule-table .team-header {
        font-size: 0.82rem !important;
        padding: 8px !important;
    }
}
