/* ============================
    📱 MOBILE RESPONSIVE 
   ============================ */
@media screen and (max-width: 768px) {

    /* 1. Global Reset */
    body {
        padding: 10px !important;
        padding-bottom: 110px !important; /* เพิ่มที่ให้ Tab Bar ลอย */
        overflow-x: hidden !important;
    }

    /* 2. แก้ตารางล้น  */
    .table-card {
        width: 100% !important;
        overflow: hidden !important; /* ซ่อนส่วนเกินของกล่อง */
        padding: 15px !important;
    }
    
    /* สร้างกล่องคลุมตารางให้เลื่อนได้ */
    .table-responsive {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;     /* เลื่อนแนวนอนได้ */
        -webkit-overflow-scrolling: touch !important; /* เลื่อนลื่นๆ */
        margin-top: 10px !important;
    }
    
    /* ปรับตาราง */
    table {
        width: 100% !important;
        min-width: 500px !important;     /* บังคับกว้างขั้นต่ำ */
        border-collapse: collapse !important;
    }
    
    th, td {
        white-space: nowrap !important;  /* ห้ามตัดคำ */
        padding: 12px 15px !important;   /* เพิ่มช่องไฟให้อ่านง่าย */
        font-size: 0.85rem !important;
        text-align: center !important;   /* จัดกลาง */
    }
    
    /* 3. Tab Bar ใหม่ (ลอยสวยๆ) */
    .tab-bar {
        position: fixed !important;
        bottom: 20px !important;         /* ลอยขึ้นมาจากขอบล่าง */
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 90% !important;           /* ไม่เต็มจอ */
        max-width: 400px !important;
        background: rgba(255, 255, 255, 0.9) !important;
        backdrop-filter: blur(15px) !important;
        padding: 8px 15px !important;
        border-radius: 50px !important;  /* มนกลม */
        box-shadow: 0 10px 30px rgba(0,0,0,0.15) !important;
        border: 1px solid rgba(255,255,255,0.5) !important;
        display: flex !important;
        justify-content: space-between !important;
        gap: 5px !important;
        z-index: 9999 !important;
    }
    
    [data-theme="dark"] .tab-bar {
        background: rgba(30, 30, 30, 0.9) !important;
        border-color: rgba(255,255,255,0.1) !important;
    }

    .tab-btn {
        flex: 1 !important;
        padding: 10px 0 !important;
        font-size: 0.8rem !important;
        border-radius: 30px !important;
        text-align: center !important;
        transition: all 0.3s ease !important;
    }
    
    /* ปุ่ม Active ให้เด่น */
    .tab-btn.active {
        background: var(--primary) !important;
        color: #fff !important;
        box-shadow: 0 4px 10px rgba(0,0,0,0.2) !important;
        transform: translateY(-2px) !important;
    }

    /* 4. จัด Header (เหมือนเดิม) */
    .top-left-banner {
        position: static !important;
        display: table !important;
        margin: 50px auto 10px auto !important;
        transform: none !important;
    }
    h1 { margin-top: 10px !important; font-size: 1.6rem !important; }
    #dark-mode-btn { top: 10px !important; right: 10px !important; }

    .splash-content-wukong {
        flex-direction: column;
        text-align: center;
        gap: 15px;
        width: 100%;
        max-width: 100vw;
        padding: 0 20px 30px 20px; /* เพิ่ม padding ด้านล่างเผื่อไว้หน่อย */
        box-sizing: border-box;
        overflow-x: hidden;
    }
    
    .wukong-img { 
        width: 140px; 
        margin: 0 auto;
    }

    .vertical-text-container {
        border-left: none;
        border-bottom: 2px solid var(--stamp-red);
        padding-left: 0;
        padding-bottom: 20px;
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;
    }

    /* 🔥 จุดแก้สำคัญ: ลดขนาดตราประทับลง */
    .red-stamp {
        position: static; /* วางต่อท้ายปกติ */
        margin-top: 20px; /* เว้นระยะห่างด้านบน */
        align-self: center; /* จัดกึ่งกลาง */
        
        /* 👉 ลดขนาดกล่องลง (จากเดิม 60x60) */
        width: 45px;
        height: 45px;
        
        /* 👉 ลดขนาดตัวหนังสือลงให้พอดีกล่อง */
        font-size: 0.8rem; 
        
        transform: rotate(-10deg); /* เอียงเหมือนเดิม */
        
        /* ปรับเงาให้เล็กลงนิดนึง */
        box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
        
        /* รีเซ็ตค่าเดิม */
        bottom: auto; right: auto;
    }
}

/* --- แก้ปุ่มล้นจอในมือถือ --- */

/* 1. สั่งให้ส่วนหัวเรียงเป็นแนวตั้ง (หัวข้อไว้บน ปุ่มไว้ล่าง) */
.station-group-header {
    flex-direction: column !important; /* บังคับเรียงแนวตั้ง */
    align-items: flex-start !important; /* ชิดซ้าย */
    gap: 10px; /* เว้นระยะห่างระหว่างหัวข้อกับปุ่ม */
    height: auto !important; /* ปล่อยความสูงอิสระ */
}

/* 2. จัดระเบียบกลุ่มปุ่มกด */
.chart-controls {
    width: 100%; /* ให้กว้างเต็มจอ */
    display: flex;
    justify-content: space-between; /* กระจายปุ่มซ้าย-ขวาให้สวยงาม */
    flex-wrap: wrap; /* ถ้าจอมือถือเล็กมากๆ ให้ปุ่มไหลลงมาบรรทัดใหม่ได้ ไม่ล้นจอ */
    gap: 5px;
    margin-left: 0 !important; /* ล้างค่า margin auto ของ Desktop ทิ้ง */
}

/* 3. (เสริม) ปรับขนาดปุ่มบนมือถือให้เล็กลงนิดนึงจะได้ไม่เบียด */
.range-btn, .refresh-btn, .icon-btn {
    font-size: 12px;
    padding: 5px 10px;
}

/* 4. ลดขนาดหัวข้อกราฟ */
#chart-title {
    font-size: 16px;
    margin-bottom: 5px;
}

/* =========================================================
   🔥 แก้ไขการแสดงผลในมือถือ (ตามที่แจ้งมา)
   ========================================================= */

/* ---------------------------------------------------------
   1. แก้ตารางหน้า Dashboard ให้ยาวลงมาเลย (ไม่โดนตัดความสูง)
   --------------------------------------------------------- */
/* สมมติว่าตารางในหน้า Dashboard อยู่ภายใต้ class .dashboard-container
   เราจะสั่งปลดล็อกความสูงของ container ที่หุ้มตารางไว้
*/
.dashboard-container .table-responsive {
    /* ปลดล็อกความสูง เพื่อให้ตารางยืดตามจำนวนแถว */
    height: auto !important;
    max-height: none !important; 
    
    /* ปิด scrollbar แนวตั้ง (เพราะเรายอมให้มันยาวลงมาแล้ว) */
    overflow-y: visible !important; 
}
/* =========================================================
   🔥 FINAL FIX: แก้จัดระเบียบตารางและไอคอน (จบปัญหา)
   ========================================================= */

/* ---------------------------------------------------------
   1. จัดไอคอนสี ให้ตรงกับตัวหนังสือเป๊ะๆ (ด้วย Flexbox)
   --------------------------------------------------------- */
/* เจาะจงไปที่ "ช่องแรก" (ช่องสี) ของตารางเกณฑ์ */
.table-card td:first-child {
    display: flex !important;       /* เปิดโหมด Flexbox */
    align-items: center !important; /* สั่งให้ทุกอย่างอยู่ "กึ่งกลางแนวตั้ง" */
    justify-content: flex-start;    /* ชิดซ้าย */
    gap: 10px;                      /* ระยะห่างระหว่างไอคอนกับตัวหนังสือ */
    height: 100%;                   /* ยืดความสูงให้เต็ม */
    min-height: 40px;               /* ความสูงขั้นต่ำ กันบรรทัดบี้ */
    border-bottom: 1px solid #eee;  /* ใส่เส้นใต้คืนให้ (เพราะ display:flex อาจทำเส้นหาย) */
    padding: 10px 15px;             /* จัดระยะห่างภายใน */
}

/* ล้างค่าเก่าของไอคอนทิ้ง เพื่อให้ Flexbox คุมแทน */
.legend-swatch {
    display: block !important; /* เปลี่ยนเป็นบล็อกธรรมดา */
    margin: 0 !important;      /* เอา margin ออก ให้ gap ทำงานแทน */
    flex-shrink: 0;            /* ห้ามไอคอนหดตัว ถ้าจอเล็ก */
    width: 16px;
    height: 16px;
    border-radius: 4px;        /* ปรับเป็นสี่เหลี่ยมมนๆ ตามรูป */
    box-shadow: 0 2px 4px rgba(0,0,0,0.15); /* เงาเล็กน้อย */
}

/* ---------------------------------------------------------
   2. จำกัดความสูงในมือถือ (ให้โชว์ประมาณ 20 แถว)
   --------------------------------------------------------- */
@media (max-width: 768px) {
    .dashboard-container .table-responsive, 
    .history-container .table-responsive,
    .table-card .table-responsive {
        /* คำนวณ: 1 แถวสูงประมาณ 40-50px -> 20 แถว ≈ 800px */
        max-height: 800px !important; 
        
        /* เปิด Scrollbar แนวตั้ง */
        overflow-y: auto !important; 
        
        /* ปิด Scrollbar แนวนอน (ถ้าไม่จำเป็น) หรือปล่อย auto ไว้ */
        overflow-x: auto !important;
        
        /* สไตล์ Scrollbar ให้ดูดีในมือถือ */
        scrollbar-width: thin; 
        border: 1px solid #ddd;
    }
}

/* ============================================================
   ซ่อนแถวตารางให้เหลือแค่ 10 แถว (เฉพาะหน้าจอมือถือ)
   ============================================================ */
@media only screen and (max-width: 767px) {
    /* สั่งให้แถวที่ 11 เป็นต้นไป (n+11) ไม่ต้องแสดงผล */
    #data-table tbody tr:nth-child(n+11) {
        display: none;
    }
}

/* =================================================================
   [ส่วนที่ 3] 🔥 DARK MODE FIXES (Mobile)
   ================================================================= */
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"] .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 img { border-color: #34495e !important; }
body[data-theme="dark"] .card hr { border-top-color: rgba(255, 255, 255, 0.2) !important; }

/* 🔥 จัดการตาราง (ลบเส้นเฉพาะตารางเกณฑ์) */
body[data-theme="dark"] #history-tab table th, body[data-theme="dark"] #history-tab table td {
    background-color: transparent !important; color: #ecf0f1 !important; border: none !important;
}
body[data-theme="dark"] #history-tab table th { background-color: #1a252f !important; color: #ffffff !important; }

/* =========================================================
   📱 MOBILE TWEAKS: ปรับแต่งเฉพาะหน้าจอมือถือ
   ========================================================= */
@media screen and (max-width: 768px) {
    
    /* 1. ลดขอบการ์ดในมือถือ (จะได้มีพื้นที่โชว์ตารางเยอะขึ้น) */
    #report-detail .card,
    .table-card {
        padding: 10px !important; /* จากเดิมอาจจะ 20-30px */
        border-radius: 12px;
    }

    /* 2. ปรับตัวหนังสือในตารางให้เล็กลงนิดนึงจะได้ไม่ล้น */
    #report-table th, 
    #report-table td {
        padding: 8px 4px !important; /* ลดช่องไฟซ้ายขวา */
        font-size: 0.85rem;          /* ลดขนาดตัวอักษรลงหน่อย */
    }

    /* 3. ปรับปุ่มเมนู (24h / 30d) ให้เรียงแนวตั้งสวยๆ */
    .report-selection {
        gap: 15px;
    }
    
    .report-card {
        width: 100%; /* ให้ปุ่มกว้างเต็มจอมือถือ */
        margin-bottom: 10px;
    }

    /* 4. ปรับส่วนหัว (ปุ่มย้อนกลับ + ชื่อ + ปุ่ม CSV) ให้เรียงแนวตั้งถ้าจอเล็กจัด */
    .report-header {
        flex-direction: column;
        gap: 10px;
        text-align: center;
    }
    
    .report-header h2 {
        margin: 5px 0;
        font-size: 1rem;
    }
}