/* =========================================================
   🖥️ DESKTOP MODE 
   ========================================================= */
@media screen and (min-width: 1024px) {

    /* 1. ล็อคหน้าจอหลัก */
    html, body {
        height: 100vh !important;
        overflow: hidden !important;
        display: flex !important;
        flex-direction: column !important;
    }

    h1 { margin-top: 10px !important; font-size: 1.8rem !important; margin-bottom: 5px !important; }
    h2 { margin-top: 0 !important; margin-bottom: 15px !important; font-size: 1rem !important; }
    .top-left-banner { top: 15px !important; left: 15px !important; }
    #dark-mode-btn { top: 15px !important; right: 15px !important; }

    /* 2. Container หลัก */
    .dashboard-container, .history-container {
        height: auto !important;
        min-height: 70vh !important;
        width: 98% !important; 
        max-width: 1600px !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* --- TAB 1: Dashboard --- */
    .dashboard-container {
        display: flex !important;
        flex-direction: row !important;
        justify-content: center !important;
        align-items: flex-start !important;
        gap: 20px !important;
    }
    .station-group {
        width: 48% !important;
        flex: 1 !important;
        margin: 0 !important;
    }
    .station-card-container .card .value { font-size: 2.5rem !important; }

    /* --- TAB 2: History --- */
    #history-tab .history-container {
        display: grid !important;
        grid-template-columns: 60% 39% !important; 
        grid-template-rows: 48% 48% !important;
        gap: 1% !important; 
        height: 75vh !important;
    }

    /* กราฟ */
    #history-tab .card:nth-child(1) {
        grid-column: 1 !important;
        grid-row: 1 / span 2 !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
    }
    .chart-box {
        position: relative;
        width: 100%;
        
        /* 🔥 สำคัญ: ต้องกำหนดความสูงเริ่มต้นให้มัน! ไม่งั้นมันจะยืดตามกราฟที่ค้าง */
        height: 300px; 
        
        /* ป้องกันล้น */
        overflow: hidden; 
    }

    /* ตาราง */
    .table-card {
        margin: 0 !important;
        height: 100% !important;
        padding: 10px !important;
        display: flex !important;
        flex-direction: column !important;
        overflow: hidden !important; 
    }
    
    .table-card h2 { margin-top: 0 !important; margin-bottom: 5px !important; font-size: 0.9rem !important; }

    .table-responsive {
        flex-grow: 1;
        width: 100%;
        overflow-x: auto; /* ให้เลื่อนซ้าย-ขวาได้ ถ้าตารางกว้างเกินจอ */
        -webkit-overflow-scrolling: touch; /* เลื่อนลื่นๆ บนมือถือ */
        margin-top: 10px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    }
    
    .table-responsive::-webkit-scrollbar { display: none !important; }

    th, td { padding: 8px !important; font-size: 0.8rem !important; }

    #history-tab .card:nth-child(2) { grid-column: 2 !important; grid-row: 1 !important; }
    #history-tab .card:nth-child(3) { grid-column: 2 !important; grid-row: 2 !important; }

    /* --- TAB 3: About (จุดแก้: ซ่อน Scrollbar) --- */
    #about-tab .history-container {
        display: flex !important;
        flex-direction: row !important;
        gap: 20px !important;
    }
    
    .about-card {
        width: 32% !important;
        flex: 1 !important;
        margin: 0 !important;
        max-height: 75vh !important;
        
        /* 🔥 1. อนุญาตให้เลื่อนได้ */
        overflow-y: auto !important; 
        
        /* 🔥 2. สั่งซ่อนแท่ง Scrollbar (Firefox/IE) */
        scrollbar-width: none !important; 
        -ms-overflow-style: none !important; 
    }

    /* 🔥 3. สั่งซ่อนแท่ง Scrollbar (Chrome/Safari) */
    .about-card::-webkit-scrollbar { 
        display: none !important; 
    }

    /* --- TAB BAR --- */
    .tab-bar {
        position: static !important;
        transform: none !important;
        margin: 20px auto 0 auto !important;
        display: inline-flex !important;
        background: var(--card-bg) !important;
    }
}
/* จัดหน้า Dashboard เฉพาะในจอคอม */
@media (min-width: 992px) {
    .history-container {
        display: flex;
        flex-wrap: nowrap; /* ห้ามปัดตกบรรทัด */
        gap: 20px;
        align-items: flex-start; /* จัดให้เริ่มที่ขอบบนเสมอกัน */
    }

    /* ฝั่งซ้าย: กราฟ (ให้กว้าง 65%) */
    .chart-card {
        flex: 2; 
        min-width: 0; /* แก้บั๊กกราฟล้นจอ */
        height: auto; /* ให้ความสูงยืดหดตามเนื้อหา */
    }

    /* ฝั่งขวา: กล่องรวมตาราง (ให้กว้าง 35%) */
    .right-column {
        flex: 1;
        display: flex;
        flex-direction: column; /* เรียงตารางลงมาแนวตั้ง */
        gap: 20px;
        min-width: 350px; /* ความกว้างขั้นต่ำ */
    }
    
    /* ปรับตารางในฝั่งขวาให้สวยขึ้น */
    .right-column .table-card {
        width: 100%;
        margin-bottom: 0;
    }
    
    /* ย่อขนาดกราฟให้พอดีกับหน้าจอ ไม่สูงเกินไป */
    .chart-box {
        height: 600px !important; /* ฟิกซ์ความสูงกราฟให้พอดีกับตาราง 2 อันรวมกัน */
    }
}
/* =================================================================
   Desktop Layout Fixes & Styling
   (ทำงานเฉพาะหน้าจอคอมพิวเตอร์ กว้าง 992px ขึ้นไป)
   ================================================================= */
@media (min-width: 992px) {

    /* -----------------------------------------------------------
       [ส่วนที่ 1] KEEP: โค้ดจัด Layout เดิม (ห้ามลบ เดี๋ยวหน้าประวัติพัง)
       ----------------------------------------------------------- */
    /* จัดโซนประวัติ (กราฟซ้าย ตารางขวา) ให้สูงเท่ากัน */
    #history-tab .history-container {
        display: flex;
        flex-direction: row;
        gap: 20px;
        height: 700px; /* ฟิกซ์ความสูง */
        align-items: stretch;
    }
    .chart-card {
        flex: 2;
        height: 100%;
        margin-bottom: 0;
        display: flex;
        flex-direction: column;
    }
    .chart-box {
        flex: 1;
        position: relative;
        min-height: 0;
    }
    .right-column {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 20px;
        height: 100%;
        min-width: 350px;
    }
    .right-column .table-card {
        flex: 1;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        margin-bottom: 0;
    }
    .right-column .table-responsive {
        flex: 1;
        height: 100%;
        overflow-y: auto;
        max-height: none !important;
    }


    /* =================================================================
   Desktop Layout Fixes & Styling (แก้เฉพาะหน้าจอคอม 992px ขึ้นไป)
   ================================================================= */
@media (min-width: 992px) {

    /* -----------------------------------------------------------
       [ส่วนที่ 1] Layout หน้าประวัติ (ห้ามลบ เดี๋ยวหน้าพัง)
       ----------------------------------------------------------- */
    #history-tab .history-container {
        display: flex;
        flex-direction: row;
        gap: 20px;
        height: 700px;
        align-items: stretch;
    }
    .chart-card { flex: 2; height: 100%; margin-bottom: 0; display: flex; flex-direction: column; }
    .chart-box { flex: 1; position: relative; min-height: 0; }
    .right-column { flex: 1; display: flex; flex-direction: column; gap: 20px; height: 100%; min-width: 350px; }
    .right-column .table-card { flex: 1; display: flex; flex-direction: column; overflow: hidden; margin-bottom: 0; }
    .right-column .table-responsive { flex: 1; height: 100%; overflow-y: auto; max-height: none !important; }


    /* -----------------------------------------------------------
       [ส่วนที่ 2] แต่งหน้าผู้จัดทำ (About Tab) - แบบจัดเต็ม
       ----------------------------------------------------------- */
    
    /* จัดเรียงการ์ด 3 ใบ แนวนอน */
    #about-tab .history-container {
        display: flex;
        flex-direction: row;
        justify-content: space-between; /* กระจายห่างเท่ากัน */
        align-items: stretch; /* ยืดให้สูงเท่ากัน */
        gap: 30px;
        min-height: 650px; /* ความสูงขั้นต่ำ */
    }

    /* ปรับแต่งการ์ดทั่วไป */
    #about-tab .card {
        flex: 1;
        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;
        padding: 40px 20px;
        text-align: center;
    }

    /* 🔥 [เจาะจงการ์ดใบแรก = อาจารย์] (ไม่ต้องแก้ HTML) */
    #about-tab .card:first-child {
        background: linear-gradient(135deg, #d1f0ff 0%, #a5eaff 100%); /* พื้นหลังสีฟ้าจางๆ */
        border: 4px solid #58ecff; /* ขอบสีฟ้า */
        transform: scale(1.02); /* ขยายใหญ่กว่าเพื่อนหน่อยนึง */
        z-index: 2;
    }

    /* 🔥 [เจาะจงรูปในใบแรก = รูปอาจารย์] */
    #about-tab .card:first-child img {
        width: 280px !important;  /* กว้าง 280px ใหญ่สะใจ */
        height: 280px !important; /* สูง 280px */
        object-fit: cover;
        border-radius: 20px; /* มุมมน */
        border: 8px solid #ffffff; /* ขอบขาวหนา */
        box-shadow: 0 15px 40px rgba(0,0,0,0.2); /* เงาฟุ้ง */
        margin-bottom: 25px;
        transition: transform 0.4s ease;
    }

    /* เอฟเฟกต์ตอนเอารูปเมาส์ชี้อาจารย์ */
    #about-tab .card:first-child img:hover {
        transform: scale(1.05) translateY(-5px);
        border-color: #4a90e2; /* เปลี่ยนขอบเป็นสีฟ้าเข้ม */
    }

    /* ขยายชื่ออาจารย์ */
    #about-tab .card:first-child .name {
        font-size: 19.5px !important; /* ตัวหนังสือใหญ่มาก */
        font-weight: 800;
        color: #2c3e50;
        margin-top: 15px;
    }


    /* -----------------------------------------------------------
       [ส่วนที่ 3] แต่งการ์ดนักเรียน (ใบที่ 2 และ 3)
       ----------------------------------------------------------- */
    
    /* รูปนักเรียน */
    #about-tab .card:not(:first-child) .member-item img {
        object-fit: cover;
        border-radius: 50%; /* วงกลม */
        border: 5px solid #ffffff;
        box-shadow: 0 8px 20px rgba(0,0,0,0.1);
        transition: all 0.3s ease;
    }

    /* เอฟเฟกต์รูปนักเรียน */
    #about-tab .card:not(:first-child) .member-item img:hover {
        transform: scale(1.15) rotate(5deg); /* หมุนนิดๆ */
        box-shadow: 0 10px 25px rgba(52, 152, 219, 0.4);
        border-color: #3498db;
    }
}
}
/* --- [ส่วนที่ 3] 🔥 DARK MODE FIXES --- */
    
    body[data-theme="dark"] .card h2, body[data-theme="dark"] #chart-title, 
    body[data-theme="dark"] .card .name, body[data-theme="dark"] .card .dept-text, 
    body[data-theme="dark"] .card .year-text, body[data-theme="dark"] .card .id, 
    body[data-theme="dark"] .card .value, body[data-theme="dark"] .card .unit { color: #ecf0f1 !important; }

    body[data-theme="dark"] #about-tab .card:first-child { 
        background: linear-gradient(135deg, #1f2933 0%, #000000 100%) !important;
        border-color: #34495e !important; 
    }
    body[data-theme="dark"] #about-tab .card:first-child img { border-color: #34495e !important; }
    body[data-theme="dark"] .card hr { border-color: #555 !important; }

    /* 🔥 ตาราง: ลบเส้นเฉพาะตารางเกณฑ์ */
    body[data-theme="dark"] #data-table th, body[data-theme="dark"] #data-table td {
        background-color: transparent !important; color: #ecf0f1 !important; border-bottom: 1px solid #34495e !important;
    }
    body[data-theme="dark"] #data-table th { background-color: #1a252f !important; color: #ffffff !important; }

    body[data-theme="dark"] table:not(#data-table) th, body[data-theme="dark"] table:not(#data-table) td {
        background-color: transparent !important; color: #ecf0f1 !important; border: none !important;
    }
    body[data-theme="dark"] table:not(#data-table) th { background-color: #1a252f !important; color: #ffffff !important; }

    /* =========================================================
   🔧 FIX: ปรับตารางสรุปผล (Report) ให้เต็มจอ & เลื่อนได้
   ========================================================= */

/* 1. กำหนดความสูงของกรอบตารางให้เกือบเต็มจอ (70-75% ของจอ) */
#report-detail .table-responsive {
    max-height: 75vh;      /* ความสูง 75% ของหน้าจอ (ปรับเลขได้ตามชอบ) */
    overflow-y: auto;      /* เปิดให้เลื่อนแนวตั้ง (Scroll) */
    position: relative;
    border-bottom: 2px solid #e2e8f0;
}

/* 2. สั่งให้ "หัวตาราง" (Header) ลอยค้างไว้ข้างบนเวลาเลื่อนลง (Sticky) */
#report-detail table thead th {
    position: sticky;
    top: 0;
    background-color: #f1f5f9; /* สีพื้นหลังหัวตาราง (ต้องใส่ ไม่งั้นตัวหนังสือจะซ้อนกัน) */
    z-index: 20;               /* ให้ลอยอยู่เหนือข้อมูล */
    box-shadow: 0 2px 4px rgba(0,0,0,0.05); /* เงาใต้หัวตาราง */
}

/* 3. ปรับแต่ง Scrollbar ให้ดูดีขึ้น (สำหรับ Chrome/Safari) */
#report-detail .table-responsive::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

#report-detail .table-responsive::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

#report-detail .table-responsive::-webkit-scrollbar-thumb {
    background: #cbd5e1;
    border-radius: 4px;
}

#report-detail .table-responsive::-webkit-scrollbar-thumb:hover {
    background: #94a3b8;
}

/* =========================================================
   ↔️ FIX: ขยายตารางให้เต็มจอ (Full Width Table)
   ========================================================= */

/* 1. บังคับตารางให้กว้าง 100% ของพื้นที่ */
#report-table, 
#data-table, 
.table-responsive table {
    width: 100% !important;
    min-width: 600px; /* ถ้าจอมือถือเล็กเกินไป ให้เลื่อนแนวนอนเอา (กันเบียด) */
    border-collapse: collapse;
}

/* 2. จัดข้อความให้อยู่กึ่งกลาง (ดูสวยกว่าชิดซ้าย) */
.table-responsive th, 
.table-responsive td {
    text-align: center !important; /* จัดกลางทั้งหมด */
    vertical-align: middle;
    padding: 12px 10px; /* เพิ่มช่องว่างให้อ่านง่าย */
}

/* 3. (Optional) ถ้าอยากให้คอลัมน์แรก (เวลา/วันที่) ชิดซ้ายเหมือนเดิม */
.table-responsive td:first-child,
.table-responsive th:first-child {
    text-align: left !important;
    padding-left: 20px;
    width: 40%; /* กำหนดให้คอลัมน์แรกกว้างกว่าเพื่อนหน่อย */
}

/* 4. ปรับพื้นหลังหัวตารางให้เต็ม */
.table-responsive thead tr {
    width: 100%;
    background-color: #f1f5f9;
}