/* =====================================================
   RESPONSIVE STYLES – BLUEPRINT
   ===================================================== */


/* ===============================
   Large Desktop
================================= */
@media (min-width: 1400px) {

    .stats-grid,
    .ward-overview {
        gap: 25px;
    }

}


/* ===============================
   Desktop
================================= */
@media (max-width: 1199px) {

    .ward-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* ===============================
   Tablet
================================= */
@media (max-width: 991px) {

    .ward-overview {
        grid-template-columns: repeat(2, 1fr);
    }

    .patients-grid {
        grid-template-columns: repeat(2, 1fr);
    }

}


/* =====================================================
   MOBILE FIXES (CRITICAL FOR WARD PAGES)
   ===================================================== */

@media (max-width: 767px) {

    /* ===== Header Layout ===== */
    .dashboard-header {
        flex-direction: column !important;
        text-align: center;
        gap: 15px;
    }

    .header-actions {
        width: 100%;
        flex-direction: column !important;
        gap: 10px;
    }

    /* ===== Grid Layouts ===== */
    .ward-overview,
    .stats-grid,
    .patients-grid,
    .records-grid,
    .ward-grid {
        grid-template-columns: 1fr !important;
        display: flex !important;
        flex-direction: column !important;
        gap: 15px !important;
    }

    /* ===== Patient Header + Filters ===== */
    .patients-header,
    .search-filters {
        display: flex !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100%;
    }

    .search-box {
        width: 100%;
    }

    .search-input,
    .filter-select {
        width: 100% !important;
    }

    /* ===== Action Buttons ===== */
    .actions,
    .record-actions {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* ===== Activity Layout ===== */
    .activity-item {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px;
    }

    /* ===== Tables ===== */
    table {
        display: block;
        width: 100%;
        overflow-x: auto;
    }

    .sessions-table-wrapper {
        overflow-x: auto;
    }

}


/* ===============================
   Small Mobile
================================= */
@media (max-width: 480px) {

    .stat-card .value {
        font-size: 26px;
    }

    h1 {
        font-size: 20px;
    }

    h2 {
        font-size: 18px;
    }

}