/* ไฟล์: assets/css/responsive.css */

/* ===== RESPONSIVE STYLES ===== */

/* ==== COMMON RESPONSIVE STYLES ==== */
@media (max-width: 992px) {
    /* ปรับ sidebar */
    .sidebar {
        position: fixed;
        top: 0;
        left: -250px;
        width: 250px;
        height: 100vh;
        z-index: 1050;
        transition: all 0.3s;
        box-shadow: 3px 0 10px rgba(0, 0, 0, 0.1);
    }
    
    .sidebar.active {
        left: 0;
    }
    
    .sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 1040;
    }
    
    .sidebar-overlay.active {
        display: block;
    }
    
    /* ปรับ content ให้เต็มหน้าจอ */
    .content-wrapper {
        width: 100% !important;
        margin-left: 0 !important;
    }
    
    /* ปรับ navbar */
    .navbar .sidebar-toggle {
        display: block !important;
    }
    
    /* ปรับขนาดฟอนต์หัวข้อ */
    .page-heading {
        font-size: 1.5rem;
    }
}

@media (max-width: 768px) {
    /* ปรับขนาดการ์ด */
    .card {
        margin-bottom: 15px;
    }
    
    /* ปรับขนาดตาราง */
    .table-responsive {
        font-size: 0.9rem;
    }
    
    /* ปรับขนาดปุ่ม */
    .btn {
        padding: 0.375rem 0.5rem;
        font-size: 0.9rem;
    }
    
    /* ปรับขนาดฟอนต์ */
    .display-6 {
        font-size: 1.5rem;
    }
    
    /* ปรับการแสดงผลของกราฟ */
    canvas {
        max-height: 300px !important;
    }
    
    /* ปรับ margin และ padding */
    .page-heading {
        margin-bottom: 1rem;
        font-size: 1.3rem;
    }
    
    .card-body {
        padding: 1rem;
    }
}

@media (max-width: 576px) {
    /* ปรับขนาดฟอนต์หัวข้อ */
    .page-heading {
        font-size: 1.2rem;
    }
    
    /* ปรับขนาด user info บน navbar */
    .user-info {
        max-width: 150px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    
    /* ปรับ login container */
    .login-container {
        width: 90% !important;
        padding: 20px !important;
    }
    
    /* ปรับปุ่มในตาราง */
    .table .btn {
        padding: 0.2rem 0.4rem;
        font-size: 0.8rem;
    }
    
    /* ปรับขนาดไอคอน */
    .fa, .fas, .far, .fab {
        font-size: 0.9rem;
    }
    
    /* ปรับการแสดงผลของการ์ดข้อมูลบนแดชบอร์ด */
    .dashboard-stats .card {
        text-align: center;
    }
    
    .dashboard-stats .card-icon {
        display: block;
        margin: 0 auto 10px;
    }
    
    /* ซ่อนคอลัมน์ที่ไม่จำเป็นในตาราง */
    .mobile-hide {
        display: none;
    }
}

/* ==== SPECIFIC PAGE RESPONSIVE STYLES ==== */

/* Login Page */
@media (max-width: 576px) {
    .login-header h2 {
        font-size: 1.5rem;
    }
    
    .login-header img {
        max-width: 80px;
    }
}

/* Dashboard */
@media (max-width: 768px) {
    .stat-card {
        margin-bottom: 15px;
    }
    
    /* ปรับให้กราฟอยู่ใต้กัน */
    .dashboard-charts .col-lg-8, 
    .dashboard-charts .col-lg-4 {
        width: 100%;
    }
}

/* Health Records Page */
@media (max-width: 768px) {
    /* ปรับฟอร์มให้เต็มหน้าจอ */
    .record-form .col-md-8,
    .record-form .col-md-4 {
        width: 100%;
    }
    
    /* ปรับขนาดปุ่มในฟอร์ม */
    .form-buttons .btn {
        margin-bottom: 10px;
        display: block;
        width: 100%;
    }
    
    /* แสดงแถวละ 1 การ์ดข้อมูลสุขภาพบนหน้า student/index.php */
    .health-data-cards .col-md-4 {
        width: 100%;
        margin-bottom: 15px;
    }
}

/* Reports Page */
@media (max-width: 768px) {
    /* ปรับฟิลเตอร์เรียงกันแนวตั้ง */
    .report-filters .col-md-3 {
        width: 100%;
        margin-bottom: 10px;
    }
    
    /* ปรับกราฟให้แสดงเต็มหน้าจอ */
    .report-charts .col-md-6,
    .report-charts .col-md-4 {
        width: 100%;
        margin-bottom: 20px;
    }
}

/* ปรับตาราง DataTables ให้ responsive */
@media (max-width: 992px) {
    /* ปรับขนาดควบคุม DataTables */
    div.dataTables_wrapper div.dataTables_length, 
    div.dataTables_wrapper div.dataTables_filter, 
    div.dataTables_wrapper div.dataTables_info, 
    div.dataTables_wrapper div.dataTables_paginate {
        text-align: left;
        margin-bottom: 10px;
    }
    
    div.dataTables_wrapper div.dataTables_paginate ul.pagination {
        justify-content: flex-start !important;
    }
}