/* =========================================================
   1. GLOBAL VARIABLES & RESET
   ========================================================= */
:root {
    /* Light Mode */
    --bg-gradient: linear-gradient(120deg, #c6faea 0%, #00bef8 100%);
    --text-color: #2a3342;
    --card-bg: rgba(255, 255, 255, 0.75);
    --card-border: rgba(255, 255, 255, 0.8);
    --card-backdrop: blur(20px);
    --card-shadow: 0 10px 30px -5px rgba(0, 0, 0, 0.1), 0 0 20px rgba(255, 255, 255, 0.4) inset;
    --primary: #6bc1f3;
    --secondary: #61ee9b;
    --danger: #ee4f4f;
    --th-bg: rgba(255,255,255,0.5);
    --border-color: rgba(137, 137, 137, 0.15);
    --btn-bg: linear-gradient(to right, #73d9f5, #5b9ff1);
    --btn-text: #fff;
}

[data-theme="dark"] {
    /* Dark Mode */
    --bg-gradient: linear-gradient(to right, #24243e, #302b63, #0f0c29);
    --text-color: #e2e8f0;
    --card-bg: rgba(30, 30, 40, 0.7);
    --card-border: rgba(255, 255, 255, 0.1);
    --card-backdrop: blur(20px);
    --card-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.5);
    --primary: #4facfe;
    --danger: #ff4b4b;
    --th-bg: rgba(255,255,255,0.05);
    --border-color: rgba(255,255,255,0.1);
    --btn-bg: linear-gradient(to right, #4facfe, #00f2fe);
}

*, *::before, *::after { box-sizing: border-box; }

body {
    font-family: "Prompt", sans-serif;
    margin: 0; 
    padding: 0; 
    padding-bottom: 100px;
    color: var(--text-color);
    background: var(--bg-gradient);
    background-size: 200% 200%;
    animation: gradientBG 15s ease infinite;
    min-height: 100vh;
    transition: background 0.5s ease, 
    color 0.3s ease;
    overflow-x: hidden;
}

/* Background Texture */
body::before {
    content: ""; 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)' opacity='0.05'/%3E%3C/svg%3E");
    opacity: 0.3; 
    z-index: -1; 
    pointer-events: none;
}

@keyframes gradientBG { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes fadeInUp { from { opacity: 0; transform: translateY(25px); } to { opacity: 1; transform: translateY(0); } }

/* =========================================================
   2. DESKTOP STYLES
   ========================================================= */
h1 { 
    text-align: center; 
    margin-top: 60px; 
    font-size: 2.5rem; 
    font-weight: 700; 
    color: #fff; 
    text-shadow: 0 4px 10px rgba(0,0,0,0.15); 
}
h2 { 
    text-align: center; 
    margin: 10px 0 40px 0; 
    font-weight: 400; 
    color: var(--text-color); 
    opacity: 0.9; 
    font-size: 1.2rem; 
}
[data-theme="dark"] h2 { color: rgba(255,255,255,0.8); }

.top-left-banner {
    position: fixed; 
    top: 20px; 
    left: 20px;
    background: var(--card-bg); 
    color: var(--text-color);
    padding: 8px 20px; 
    font-size: 0.9rem; 
    font-weight: bold;
    border-radius: 30px; 
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow); 
    z-index: 1000; 
    backdrop-filter: blur(10px);
}

#dark-mode-btn {
    position: fixed; 
    top: 20px; 
    right: 20px; 
    z-index: 2000;
    padding: 8px 20px; 
    border-radius: 30px; 
    border: 1px solid var(--card-border);
    background: var(--card-bg); 
    backdrop-filter: blur(10px);
    color: var(--text-color); 
    font-family: "Prompt", sans-serif; 
    font-weight: bold;
    cursor: pointer; 
    box-shadow: var(--card-shadow); 
    transition: all 0.3s ease;
}
#dark-mode-btn:hover { transform: translateY(-2px); }

.dashboard-container, .history-container {
    padding: 0 20px; 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center; 
    gap: 30px;
    max-width: 1200px; 
    margin: 0 auto;
}

.card, .station-group, .about-card {
    background: var(--card-bg); 
    color: var(--text-color);
    border-radius: 20px; 
    border: 1px solid var(--card-border);
    box-shadow: var(--card-shadow); 
    backdrop-filter: var(--card-backdrop);
    -webkit-backdrop-filter: var(--card-backdrop);
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    opacity: 0; animation: fadeInUp 0.6s ease-out forwards;
    border-top: 1px solid rgba(255, 255, 255, 0.8);
}
.card:hover, .station-group:hover { transform: translateY(-6px); box-shadow: 0 15px 35px rgba(52, 152, 219, 0.15); }

.station-group:nth-child(1) { animation-delay: 0.1s; }
.station-group:nth-child(2) { animation-delay: 0.2s; }
.chart-card { animation-delay: 0.3s; }
.table-card { animation-delay: 0.4s; }

.card { 
    padding: 30px;
    min-width: 180px; 
    text-align: center; 
}
.station-group { 
    padding: 35px; 
    flex-basis: 100%; 
    max-width: 750px; 
}
.table-card, .about-card { flex-basis: 100%; max-width: 800px; }

.chart-card {
    display: flex !important;
    flex-direction: column !important;
    height: 60vh !important;    /* ปรับความสูงรวมตรงนี้ (ถ้าอยากได้สูงกว่านี้แก้เลขได้เลย) */
    min-height: 500px !important; 
    padding-bottom: 10px !important;
}

.card h2 { 
    font-size: 1.1rem; 
    margin: 0; 
    text-align: left; 
    font-weight: 500; 
    color: var(--text-color); 
    opacity: 0.8; 
}
.card .value { 
    font-size: 2.5rem; 
    font-weight: 700; 
    margin: 10px 0; 
    line-height: 1; 
    background: -webkit-linear-gradient(45deg, var(--primary), #8e44ad); 
    -webkit-background-clip: text; 
    -webkit-text-fill-color: transparent;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.1));
}
[data-theme="dark"] .card .value { 
    background: none; 
    -webkit-text-fill-color: #fff; 
    text-shadow: 0 0 10px var(--primary); 
    filter: none; 
}

.card .unit { 
    font-size: 0.9rem; 
    opacity: 0.7; 
    font-weight: 500; 
}

.station-group-header { 
    flex-shrink: 0;
    display:flex; 
    justify-content:space-between; 
    align-items:center; 
    margin-bottom:25px; 
    border-bottom:1px solid var(--border-color); 
    padding-bottom: 15px; 
}

.station-group-header h2 { 
    color: var(--primary); 
    font-weight: 700; 
    font-size: 1.5rem; 
    opacity: 1; 
}

.station-group.is-offline { 
    border: 2px solid var(--danger); 
    opacity: 0.7; 
    filter: grayscale(0.8); 
}

.station-card-container { 
    display:flex; 
    flex-wrap:wrap; 
    gap:25px; 
    justify-content:center; 
}

.station-card-container .card { 
    flex: 1; 
    background: rgba(255,255,255,0.4);
    border: none; 
}

[data-theme="dark"] .station-card-container .card { background: rgba(255,255,255,0.05); }

.aqi-card { 
    color: #fff !important; 
    border: none !important; 
    transition: background 0.5s ease; /* แถม: เพิ่มให้สีเปลี่ยนนุ่มๆ */
}

.card.aqi-card h2, .card.aqi-card .value, .card.aqi-card .unit { 
    color: #fff !important; 
    opacity: 1; 
    text-shadow: 0 1px 2px rgba(0,0,0,0.1); 
    -webkit-text-fill-color: #fff !important; 
    background: none !important; 
}

.status-badge { 
    display:inline-block; 
    padding:5px 15px; 
    border-radius:20px; 
    font-weight:700; 
    font-size:0.9rem; 
    margin-top:10px; 
    background-color: rgba(255,255,255,0.3);
    backdrop-filter: blur(4px); 
}
/* =========================================
   AQI Color Scale (แบบ Gradient + !important)
   ========================================= */

/* 1. สีฟ้า */
.aqi-blue {
    /* 🔥 เติม !important ตรงนี้ครับ เพื่อให้ชนะสีขาว */
    background: linear-gradient(135deg, #42e6ff 0%, #0099ff 100%) !important;
    color: #000000;
    box-shadow: 0 4px 10px rgba(0, 153, 255, 0.3);
}

/* 2. สีเขียว */
.aqi-green {
    background: linear-gradient(135deg, #5aff5a 0%, #00cc00 100%) !important;
    color: #000000;
    box-shadow: 0 4px 10px rgba(0, 204, 0, 0.3);
}

/* 3. สีเหลือง */
.aqi-yellow {
    background: linear-gradient(135deg, #d1d113 0%, #ffcc00 100%) !important;
    color: #000000;
    box-shadow: 0 4px 10px rgba(255, 204, 0, 0.3);
}

/* 4. สีส้ม */
.aqi-orange {
    background: linear-gradient(135deg, #ffbd4a 0%, #ff7b00 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(255, 123, 0, 0.3);
}

/* 5. สีแดง */
.aqi-red {
    background: linear-gradient(135deg, #ff6b6b 0%, #cc0000 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(204, 0, 0, 0.3);
}

/* 6. สีม่วง */
.aqi-purple {
    background: linear-gradient(135deg, #d279ee 0%, #800080 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(128, 0, 128, 0.3);
}

/* 7. สีแดงเข้ม */
.aqi-maroon {
    background: linear-gradient(135deg, #a64d4d 0%, #520015 100%) !important;
    color: #ffffff;
    box-shadow: 0 4px 10px rgba(82, 0, 21, 0.4);
}
/* =========================================
   ตารางแบบ Compact & Beautiful (ปรับปรุงใหม่)
   ========================================= */

/* 1. ตัวตารางหลัก */
.table-card table {
    width: 100%;
    border-collapse: collapse;
    background: white;
    font-size: 14px; /* 🔥 ปรับลดขนาดฟอนต์รวมทั้งตาราง (จากเดิม 16px) */
    min-width: 600px; /* บังคับกว้างขั้นต่ำ เพื่อไม่ให้ตารางบีบเกินไป */
}

/* 2. หัวตาราง (Header) */
.table-card th {
    background-color: #f1f5f9;
    color: #475569;
    font-size: 13px; /* หัวตารางเล็กกว่าเนื้อหานิดนึง */
    font-weight: 700;
    text-transform: uppercase; /* ตัวพิมพ์ใหญ่ (ถ้าเป็นอังกฤษ) ดูทางการ */
    padding: 10px 12px; /* 🔥 ลดระยะห่างลง (เดิม 14px) */
    text-align: left;
    white-space: nowrap;
    border-bottom: 2px solid #e2e8f0; /* เส้นใต้หัวหนาหน่อย */
}

/* 3. ช่องข้อมูลทั่วไป (Cells) */
.table-card td {
    padding: 10px 12px; /* 🔥 ลดระยะห่างลง ให้ตารางกระชับ */
    border-bottom: 1px solid #f0f0f0;
    color: #334155;
    vertical-align: top; /* จัดกึ่งกลางแนวตั้ง */
    white-space: nowrap;    /* ข้อมูลสั้นๆ ห้ามตัดคำ */
}

/* 4. 🔥 จัดระเบียบช่อง "คำแนะนำ" (ช่องสุดท้าย) โดยเฉพาะ */
.table-card td:last-child {
    font-size: 12px; /* 🔥 ลดฟอนต์เฉพาะช่องนี้ลงอีกนิด เพื่อให้อ่านข้อความยาวๆ สบายตา */
    color: #64748b;  /* สีเทาจางลงนิดนึง ให้ดูเป็นข้อมูลเสริม */
    
    /* การตัดคำ */
    white-space: normal !important; /* อนุญาตให้ขึ้นบรรทัดใหม่ */
    word-wrap: break-word;
    
    /* ขนาดพื้นที่ */
    min-width: 220px; /* กว้างพอให้อ่านรู้เรื่อง */
    max-width: 355px; /* ไม่กว้างเกินไปจนกินที่ */
    
    /* ระยะห่างบรรทัด */
    line-height: 1.25; /* ห่างกำลังดี อ่านแล้วไม่อึดอัด */
    padding-top: 12px;
    padding-bottom: 12px;
}

/* 5. ปรับขนาดวงกลมสี (Legend) ให้เข้ากับฟอนต์ใหม่ */
.legend-swatch {
    width: 12px;  /* ลดขนาดลง */
    height: 12px;
    margin-right: 6px;
    border: none;
}

/* สีสลับบรรทัดแบบจางๆ (Subtle Zebra) */
.table-card tbody tr:nth-child(even) {
    background-color: #fafafa;
}

/* เอฟเฟกต์ตอนเอาเมาส์ชี้ */
.table-card tbody tr:hover {
    background-color: #f0f9ff;
    transition: background-color 0.2s ease;
}

.export-btn {
    background-color: #16a2b4; /* สีเขียว Excel */
    color: white;
    border: none;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 12px;
}
.export-btn:hover { background-color: #218838; }

table {
    width: 100%;
    border-collapse: collapse;
    min-width: 600px; /* 🔥 จุดสำคัญ: บังคับให้ตารางกว้างอย่างน้อย 600px เพื่อไม่ให้ข้อความเบียด */
    font-size: 12px;  /* ลดขนาดฟอนต์นิดนึง */
    background: white;
}

/* 3. หัวตารางและช่องข้อมูล */
th, td {
    padding: 12px 13px; /* เพิ่มระยะห่างให้อ่านง่าย */
    text-align: left;
    border-bottom: 1px solid #eee;
    white-space: nowrap; /* 🔥 จุดสำคัญ: ห้ามตัดคำขึ้นบรรทัดใหม่ (ถ้าไม่ชอบให้เอาออก) */
}

/* ปรับแต่งหัวตาราง */
th {
    background-color: #f8f9fa;
    color: #333;
    font-weight: 600;
    position: sticky; /* ตรึงหัวตารางไว้บนสุดตอนเลื่อน */
    top: 0;
    z-index: 1;
}

/* สีสลับบรรทัด (Zebra Striping) */
tbody tr:nth-child(even) {
    background-color: #fcfcfc;
}

.legend-swatch { 
    display: inline-block; 
    width: 16px; 
    height: 16px; 
    border-radius: 4px; 
    vertical-align: middle; 
    margin-right: 8px; 
}

.member-grid { 
    display: flex; 
    flex-wrap: wrap; 
    justify-content: center;
    gap: 30px; 
    margin-top: 20px; 
}

.member-item { 
    display: flex; 
    flex-direction: column; 
    align-items: center; 
    text-align: center; 
    width: 180px; 
}

.member-item img { 
    width: 110px; 
    height: 110px; 
    border-radius: 50%; 
    object-fit: cover; 
    border: 4px solid var(--primary); 
    margin-bottom: 15px; 
    box-shadow: var(--shadow-soft); 
}

.member-item .name { 
    font-weight: bold; 
    margin: 0; 
    font-size: 0.85rem; 
}

.tab-bar { 
    position: fixed; 
    bottom: 25px; 
    left: 50%; 
    transform: translateX(-50%); 
    width: auto; 
    display:flex; 
    gap: 10px; 
    background: var(--card-bg); 
    backdrop-filter: blur(20px); 
    padding: 10px 20px; 
    border-radius: 50px; 
    box-shadow: var(--card-shadow); 
    z-index:1000; 
    border: 1px solid var(--card-border); 
}

.tab-btn { 
    padding: 12px 25px; 
    border:none; 
    background:none; 
    font-size:1rem; 
    cursor:pointer; 
    color: var(--text-color); 
    transition: all 0.3s ease; 
    border-radius: 30px; 
    font-weight: 600; 
    opacity: 0.7; 
}

.tab-btn.active { 
    background: var(--btn-bg); 
    color: #fff; 
    opacity: 1; 
    box-shadow: 0 4px 15px rgba(0, 118, 255, 0.3); 
}

.tab-content { display:none; } .tab-content.active { display:block; }

#refresh-chart-btn {
    margin-left: auto; /* 🔥 คำสั่งพระเอก: ผลักตัวเองไปชิดขวา */
    margin-right: 10px; /* เว้นระยะห่างจากปุ่มขยายจอนิดหน่อย */
}

.refresh-btn { 
    padding: 10px 25px; 
    background: var(--btn-bg); 
    color: var(--btn-text); 
    border: none; 
    border-radius: 30px; 
    cursor: pointer; 
    font-weight: bold; 
}
/* =========================================
   🌪️ ATMOSPHERIC DUST THEME (Cinematic)
   ========================================= */
:root {
    --bg-dark: #1a1a1e;       /* color */
    --gold-accent: #c2a878;
    --stamp-red: #a33;
}
#elden-splash {
    position: fixed;
    top: 0; left: 0; width: 100vw; height: 100vh;
    z-index: 9999;
    background-color: var(--bg-dark);
    color: var(--gold-accent);
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden; /* ห้ามให้หมอกล้นจอ */
    transition: opacity 1.5s ease-in-out, visibility 1.5s;
}

#elden-splash.hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}

/* =========================================
   🔦 SOFT SPOTLIGHT (แสงนุ่มนวล ไม่ลายตา)
   ========================================= */

/* ตัวคอนเทนเนอร์พื้นหลัง */
.fog-container {
    position: absolute;
    width: 100%; 
    height: 100%;
    z-index: -1;
    /* เปลี่ยนเป็น Radial Gradient (วงกลม) แทนเส้นๆ */
    background: radial-gradient(
        circle at center, 
        rgba(194, 168, 120, 0.15) 0%, /* สีทองจางๆ ตรงกลาง */
        transparent 60%               /* ค่อยๆ จางหายไป */
    );
    
    /* อนิเมชั่น: แสงวูบวาบช้าๆ */
    animation: pulseLight 4s ease-in-out infinite;
}

/* ลบคลาส fog-img เดิมทิ้ง (หรือซ่อนไว้) เพราะเราใช้ตัวแม่ตัวเดียวจบ */
.fog-img {
    display: none; 
}

/* คีย์เฟรม: ให้แสงหุบเข้า-ขยายออก เหมือนหายใจ */
@keyframes pulseLight {
    0%, 100% { 
        opacity: 0.5; 
        transform: scale(0.8); /* แสงดวงเล็ก */
    }
    50% { 
        opacity: 1; 
        transform: scale(1.2); /* แสงขยายใหญ่ */
    }
}
/* --- ✨ เอฟเฟกต์ละอองฝุ่น (Particles) --- */
.particles span {
    position: absolute;
    bottom: -10px;
    width: 4px; height: 4px;
    background: var(--gold-accent);
    border-radius: 50%;
    box-shadow: 0 0 10px var(--gold-accent); /* เรืองแสง */
    opacity: 0;
    animation: riseUp 5s infinite ease-in-out;
}
/* สุ่มตำแหน่งและเวลาให้ฝุ่นแต่ละเม็ด */
.particles span:nth-child(1) { left: 10%; animation-delay: 0s; }
.particles span:nth-child(2) { left: 20%; animation-delay: 2s; width: 6px; height: 6px; }
.particles span:nth-child(3) { left: 35%; animation-delay: 4s; }
.particles span:nth-child(4) { left: 50%; animation-delay: 1s; width: 3px; height: 3px; }
.particles span:nth-child(5) { left: 65%; animation-delay: 3s; }
.particles span:nth-child(6) { left: 80%; animation-delay: 1.5s; }
.particles span:nth-child(7) { left: 90%; animation-delay: 2.5s; }
/* ...เพิ่มได้อีกตามใจชอบ... */

@keyframes riseUp {
    0% { bottom: -10px; opacity: 0; transform: translateX(0); }
    50% { opacity: 0.8; }
    100% { bottom: 100vh; opacity: 0; transform: translateX(20px); }
}

/* --- 📦 เนื้อหาหลัก --- */
.splash-content-wukong {
    position: relative; /* เป็นจุดอ้างอิง */
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
    gap: 30px;
    z-index: 2;
    
    /* 🔥 เพิ่ม: จำกัดความกว้างไม่ให้เกินจอ */
    max-width: 90vw; 
    margin: 0 auto; /* จัดกึ่งกลาง */
}

.wukong-img {
    width: 200px;
    filter: drop-shadow(0 0 20px rgba(194, 168, 120, 0.3));
    animation: floatLogo 4s ease-in-out infinite;
}

.vertical-text-container {
    border-left: 4px solid var(--stamp-red);
    padding-left: 20px;
}

.chapter-title {
    font-size: 3rem;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 4px;
    background: linear-gradient(to right, #fff, #c2a878);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent; /* ตัวหนังสือไล่สี */
}

.chapter-subtitle {
    font-size: 1rem;
    color: rgba(255,255,255,0.6);
    letter-spacing: 2px;
    margin-top: 5px;
}

.loading-status {
    margin-top: 15px;
    font-family: monospace;
    font-size: 0.9rem;
    color: var(--gold-accent);
}
.loading-status::before { content: ">> "; } /* ลูกเล่น Tech */

.red-stamp {
    position: absolute;
    
    /* 🔥 แก้ไข: ให้เกาะอยู่ที่มุมขวาล่าง แบบไม่ล้น */
    bottom: -15px; 
    right: -10px; /* ขยับเข้ามานิดนึงจากเดิม -20 */

    width: 60px; height: 60px;
    background: var(--stamp-red);
    color: #fff;
    display: flex; justify-content: center; align-items: center;
    font-weight: bold; border-radius: 4px;
    transform: rotate(15deg);
    box-shadow: 2px 2px 10px rgba(0,0,0,0.3);
    
    /* ป้องกันการเลือกข้อความ */
    user-select: none;
}

/* --- 📏 หลอดโหลดด้านล่าง (Cinematic Loader) --- */
.cinematic-loader {
    position: absolute;
    bottom: 0; left: 0;
    height: 4px;
    background: var(--gold-accent);
    box-shadow: 0 0 15px var(--gold-accent);
    width: 0%;
    animation: loadLine 3s ease-out forwards;
}

@keyframes loadLine { to { width: 100%; } }
@keyframes floatLogo { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }

/* Mobile */
@media screen and (max-width: 768px) {
    .splash-content-wukong { flex-direction: column; text-align: center; }
    .vertical-text-container { border-left: none; border-bottom: 3px solid var(--stamp-red); padding-left: 0; padding-bottom: 20px; }
    .wukong-img { width: 150px; }
}



/* =========================================
   📱 MOBILE FIX: ซ่อนเมนูทะลุหน้าโหลด
   ========================================= */

/* 1. ดันหน้าโหลดขึ้นมาอยู่สูงที่สุดในจักรวาล (สูงสุดที่ Browser รองรับ) */
    #elden-splash {
        z-index: 2147483647 !important; 
    }

    /* 2. สั่งซ่อน UI อื่นๆ ทั้งหมด ตราบใดที่หน้าโหลดยังไม่หายไป (ยังไม่มีคลาส hidden) */
    #elden-splash:not(.hidden) ~ .tab-bar,
    #elden-splash:not(.hidden) ~ .top-left-banner,
    #elden-splash:not(.hidden) ~ #dark-mode-btn {
        display: none !important;
}

/* =========================================
   📱 FULLSCREEN CHART (กราฟเต็มจอ)
   ========================================= */

/* จัดกลุ่มปุ่มให้เรียงสวยๆ */
.chart-controls {
    display: flex;
    gap: 10px;
    align-items: center;
}

/* ปุ่มไอคอนขยาย */
.icon-btn {
    background: none;
    border: 1px solid var(--primary);
    color: var(--primary);
    border-radius: 4px;
    width: 32px; height: 32px;
    cursor: pointer;
    font-size: 1.2rem;
    display: flex; justify-content: center; align-items: center;
    transition: all 0.2s;
}
.icon-btn:hover {
    background: var(--primary);
    color: #fff;
}

/* =========================================
   ⛶ FULLSCREEN 
   ========================================= */

/* 1. ตัวการ์ดหลัก (กรอบนอกสุด) */
.chart-card.fullscreen-mode {
    position: fixed !important;
    top: 0 !important; left: 0 !important;
    width: 100vw !important; height: 100vh !important;
    z-index: 999999 !important;
    background-color: #ffffff !important; /* ต้องมีสีพื้น */
    padding: 10px !important;
    margin: 0 !important;
    border-radius: 0 !important;
    
    /* จัดแบบ Flex แนวตั้ง */
    display: flex !important;
    flex-direction: column !important;
}

/* รองรับ Dark Mode */
[data-theme="dark"] .chart-card.fullscreen-mode {
    background-color: #1a1a2e !important;
}

/* 2. กล่องหุ้มกราฟ (Wrapper) */
.fullscreen-mode /* --- ในไฟล์ style.css --- */

#pm25-chart {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
}

.chart-box {
    flex: 1 1 auto !important;  /* พระเอกของงาน: สั่งให้ยืดจนสุดขอบล่าง */
    position: relative !important;
    width: 100% !important;
    height: auto !important;    /* ให้ความสูงปรับตาม Flex */
    min-height: 0 !important;   /* แก้บั๊กกราฟล้น */
    overflow: hidden !important;
}

/* 2. ซ่อนปุ่มขยายเป็นค่าเริ่มต้น (สำหรับ PC) */
#fullscreen-btn {
    display: none; 
}

/* --- ส่วน Media Query สำหรับมือถือ --- */
@media screen and (max-width: 768px) {
    /* ปรับความสูงกราฟในมือถือให้เล็กลงหน่อย จะได้ไม่ล้นจอ */
    .chart-box {
        height: 300px; 
    }

    /* สั่งให้ปุ่มแสดงเฉพาะในมือถือ */
    #fullscreen-btn {
        display: inline-block; /* หรือ block */
        padding: 5px 10px;
        background-color: #eee;
        border: none;
        border-radius: 5px;
        cursor: pointer;
    }
}/* 3. 🔥 ตัวกราฟ (Canvas) - ต้องสั่งบรรทัดนี้ ไม่งั้นกราฟหาย! */
.fullscreen-mode canvas {
        width: 100% !important;
        height: 100% !important;
        display: block !important;
}

.range-group {
    display: inline-flex;
    margin-right: 10px;
    background: #e0e0e0;
    border-radius: 20px;
    padding: 2px;
}
.range-btn {
    border: none;
    background: transparent;
    padding: 5px 15px;
    border-radius: 15px;
    cursor: pointer;
    font-size: 14px;
    color: #555;
    transition: 0.3s;
}
.range-btn.active {
    background: #007bff;
    color: white;
    font-weight: bold;
}

/* --- Loading Spinner CSS --- */
.loader-overlay {
    position: absolute; /* ลอยทับกราฟ */
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 100%;
    background: rgba(255,255,255,0.8); /* พื้นหลังสีขาวจางๆ */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999; /* 🔥 เลขยิ่งเยอะยิ่งอยู่บนสุด */
    transition: opacity 0.3s;
}

.spinner {
    width: 40px; 
    height: 40px;
    border: 4px solid #f3f3f3;
    border-top: 4px solid #007bff; /* สีฟ้า */
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 
    0% { transform: rotate(0deg); } 
    100% { transform: rotate(360deg); } 
}

/* Class สำหรับซ่อน */
.hidden {
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: -1 !important; /* ดันไปไว้ข้างหลังเมื่อซ่อน */
}

/* =========================================
   🌙 Dark Mode Support for Tables
   ========================================= */

/* 1. ปรับสีพื้นหลังของการ์ด (Card) ให้มืด */
[data-theme="dark"] .card {
    background-color: #1e1e1e; /* สีเทาเกือบดำ */
    color: #e0e0e0;            /* ตัวหนังสือสีขาวควันบุหรี่ */
    box-shadow: 0 4px 6px rgba(0,0,0,0.3); /* เงาเข้มขึ้น */
}

/* 2. ปรับสีพื้นหลังตาราง */
[data-theme="dark"] table {
    background-color: #1e1e1e; /* พื้นหลังเดียวกับการ์ด */
    color: #e0e0e0;
}

/* 3. ปรับสีหัวตาราง (Thead) */
[data-theme="dark"] th {
    background-color: #2d2d2d; /* สีเทาเข้ม (สว่างกว่าพื้นหลังนิดนึง) */
    color: #ffffff;            /* ตัวหนังสือสีขาวชัดๆ */
    border-bottom: 1px solid #444; /* เส้นขอบสีเทาเข้ม */
}

/* 4. ปรับสีเส้นคั่นระหว่างแถว (Border) */
[data-theme="dark"] td {
    border-bottom: 1px solid #333;
    color: #cccccc; /* ตัวหนังสือสีเทาอ่อน */
}

/* 5. ปรับสีสลับบรรทัด (Zebra Striping) ให้ดูนวลตาในโหมดมืด */
[data-theme="dark"] tbody tr:nth-child(even) {
    background-color: #252525; /* สีเทากลางๆ */
}

/* 6. (แถม) ปรับสีปุ่ม Export CSV ใน Dark Mode */
[data-theme="dark"] .export-btn {
    background-color: #198754; /* สีเขียวเข้มขึ้นนิดนึง */
    color: #fff;
}
[data-theme="dark"] .export-btn:hover {
    background-color: #157347;
}
/* CSS สำหรับ Animation แถวตารางใหม่ */
@keyframes highlightFadeIn {
    from {
        background-color: rgba(0, 123, 255, 0.3); /* สีฟ้าจางๆ ตอนเริ่ม */
        transform: translateY(-10px); /* เลื่อนลงมานิดนึง */
        opacity: 0;
    }
    to {
        background-color: transparent;
        transform: translateY(0);
        opacity: 1;
    }
}

.new-row-animation {
    animation: highlightFadeIn 0.8s ease-out;
}

/* =========================================================
   🔥 แก้ปัญหาสีตัวอักษรกลืนกับพื้นหลัง (เฉพาะสถานี Offline)
   ========================================================= */

/* 1. หัวข้อสถานีและเวลา (เช่น "สถานี 2 (Offline)", "ขาดการเชื่อมต่อ...") */
.station-group.is-offline .station-group-header h2,
.station-group.is-offline .last-updated {
    color: #333333 !important; /* เปลี่ยนเป็นสีเทาเข้มเกือบดำ */
    opacity: 1 !important;     /* ยกเลิกความโปร่งใส */
    text-shadow: none !important;
}

/* 2. การ์ดข้อมูลใบเล็ก (PM1.0, PM2.5, PM10) */
.station-group.is-offline .card h2,       /* หัวข้อ (เช่น PM2.5) */
.station-group.is-offline .card .value,   /* ตัวเลข (เช่น --) */
.station-group.is-offline .card .unit {   /* หน่วย (เช่น µg/m³) */
    color: #555555 !important; /* สีเทาเข้ม */
    opacity: 1 !important;
    
    /* ล้างค่าสีพิเศษอื่นๆ ที่อาจค้างอยู่ */
    background: none !important; 
    -webkit-text-fill-color: #555555 !important;
    filter: none !important;
}

/* 3. การ์ด AQI ใบใหญ่ (ด้านล่างสุด) */
.station-group.is-offline .aqi-card {
    /* เปลี่ยนพื้นหลังการ์ดให้เป็นสีเทาเรียบๆ เพื่อสื่อว่าใช้งานไม่ได้ */
    background: #e0e0e0 !important; 
    box-shadow: none !important; /* เอาเงาสีๆ ออก */
    border: 1px solid #ccc !important;
}

/* ตัวหนังสือในการ์ด AQI */
.station-group.is-offline .aqi-card h2,
.station-group.is-offline .aqi-card .value,
.station-group.is-offline .aqi-card .unit {
    color: #333333 !important; /* สีเข้ม */
    text-shadow: none !important;
    -webkit-text-fill-color: #333333 !important;
}

/* 4. ปุ่มสถานะ (เช่น "💤 ไม่มีสัญญาณ") */
.station-group.is-offline .status-badge {
    background-color: rgba(0, 0, 0, 0.1) !important; /* พื้นหลังเทาจางๆ */
    color: #333333 !important; /* ตัวหนังสือสีเข้ม */
    backdrop-filter: none !important;
}

/* ตรึงหัวตารางไว้ด้านบน */
.table-card th {
    position: sticky;
    top: 0;
    z-index: 10; /* ให้ลอยอยู่เหนือข้อมูล */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* ใส่เงาเล็กๆ ให้รู้ว่าเป็นหัวตาราง */
    background-color: #f1f5f9; /* ต้องใส่สีพื้นหลัง ไม่งั้นตัวหนังสือจะซ้อนกัน */
}
/* ปรับแต่ง Scrollbar ให้สวยงาม (Chrome, Edge, Safari) */
::-webkit-scrollbar {
    width: 8px;
    height: 8px; /* ความสูงสำหรับ scrollbar แนวนอน */
}

::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
    background: #a8a8a8;
}
/* เม็ดยาบอกค่า AQI ในตาราง */
.aqi-pill {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: bold;
    font-size: 0.85rem;
    min-width: 40px;
    text-align: center;
    color: #000; /* สีตัวอักษรตั้งต้น (จะถูกทับด้วย class สี) */
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}

/* ปรับสีตัวอักษรให้อ่านง่ายขึ้นสำหรับสีเข้ม */
.aqi-pill.aqi-blue, 
.aqi-pill.aqi-green, 
.aqi-pill.aqi-yellow { color: #000 !important; }

.aqi-pill.aqi-orange, 
.aqi-pill.aqi-red, 
.aqi-pill.aqi-purple, 
.aqi-pill.aqi-maroon { color: #fff !important; }

/* =========================================
   🔥 ลบเส้นตารางออกทั้งหมด (No Borders)
   ========================================= */

/* ลบเส้นขีดคั่นแนวนอนของทุกตาราง */
th, td {
    border-bottom: none !important;
    border-top: none !important;
}

/* ลบเส้นขอบของตาราง (ถ้ามี) */
table {
    border: none !important;
}

/* ถ้าอยากลบเส้นตรงหัวตารางด้วย (ตรงแถบสีเทา) */
.table-card th, th {
    border-bottom: none !important;
    box-shadow: none !important; /* ลบเงาใต้หัวตารางออกด้วยถ้ามี */
}

/* ==========================================================================
   📊 REPORT SYSTEM STYLES (ส่วนสรุปผล)
   ========================================================================== */

/* --- 1. กล่องเมนูเลือก (Report Menu) --- */
.report-menu-container {
    padding: 40px 20px;
    animation: fadeIn 0.5s ease-in-out;
}

.report-selection {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap; /* ให้ปัดลงบรรทัดใหม่ถ้าจอเล็ก */
}

/* การ์ดปุ่มเลือก (เหมือน Netpie) */
.report-card {
    background: var(--card-bg, #ffffff); /* ใช้สีขาวเป็นค่าตั้งต้น */
    border: 1px solid #e2e8f0;
    width: 280px;
    padding: 30px;
    border-radius: 24px;
    text-align: center;
    cursor: pointer;
    position: relative;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

/* Effect ตอนเอาเมาส์ชี้ */
.report-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);
    border-color: #3b82f6; /* สีเส้นขอบตอนชี้ */
}

.report-card .icon {
    font-size: 3.5rem;
    margin-bottom: 15px;
    display: inline-block;
    filter: drop-shadow(0 4px 3px rgba(0,0,0,0.07));
}

.report-card h3 {
    font-size: 1.25rem;
    color: #1e293b;
    margin: 10px 0;
    font-weight: 600;
}

.report-card p {
    color: #64748b;
    font-size: 0.9rem;
    margin-bottom: 25px;
    line-height: 1.5;
}

/* ปุ่มกดด้านล่างการ์ด */
.btn-arrow {
    display: inline-block;
    padding: 8px 24px;
    background: #eff6ff;
    color: #2563eb;
    border-radius: 99px;
    font-weight: 600;
    font-size: 0.9rem;
    transition: 0.2s;
}

.report-card:hover .btn-arrow {
    background: #2563eb;
    color: white;
}

/* --- 2. ส่วนหัวของตารางรายละเอียด (Header) --- */
.report-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 20px;
    background: var(--card-bg, #ffffff);
    padding: 15px 20px;
    border-radius: 16px;
    border: 1px solid #e2e8f0;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.report-header h2 {
    font-size: 1.1rem;
    color: #334155;
}

/* ปุ่มย้อนกลับ */
.back-btn {
    background: transparent;
    border: 1px solid #cbd5e1;
    color: #475569;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    transition: 0.2s;
    display: flex;
    align-items: center;
    gap: 5px;
}

.back-btn:hover {
    background: #f1f5f9;
    color: #0f172a;
    border-color: #94a3b8;
}

/* ปุ่ม Export CSV */
.export-btn {
    background: #10b981;
    color: white;
    border: none;
    padding: 8px 16px;
    border-radius: 8px;
    cursor: pointer;
    font-weight: 500;
    box-shadow: 0 2px 4px rgba(16, 185, 129, 0.2);
    transition: 0.2s;
}

.export-btn:hover {
    background: #059669;
    transform: translateY(-1px);
}

/* --- 3. ไฮไลท์แถวที่มีค่าสูงสุด (สำคัญ!) --- */
tr.highlight-max-row {
    background-color: rgba(239, 68, 68, 0.08) !important; /* พื้นหลังแดงจาง */
    position: relative;
}

/* เพิ่มเส้นแดงด้านซ้าย */
tr.highlight-max-row td:first-child {
    box-shadow: inset 4px 0 0 #ef4444; 
}

/* เปลี่ยนสีตัวหนังสือให้เด่น */
tr.highlight-max-row td {
    color: #b91c1c !important;
    font-weight: 700;
}

/* --- 4. ป้ายสถานะ AQI ในตาราง (Pills) --- */
.aqi-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 99px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
    min-width: 80px;
    text-align: center;
}

/* สีของป้ายสถานะ */
.aqi-blue { background: #dbeafe; color: #1e40af; }   /* ดีมาก */
.aqi-green { background: #dcfce7; color: #166534; }  /* ดี */
.aqi-yellow { background: #fef9c3; color: #854d0e; } /* ปานกลาง */
.aqi-orange { background: #ffedd5; color: #9a3412; } /* เริ่มมีผล */
.aqi-red { background: #fee2e2; color: #991b1b; }    /* มีผล */
.aqi-purple { background: #f3e8ff; color: #6b21a8; } /* อันตราย */

/* --- 5. Loading Animation --- */
.loader-overlay {
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(255,255,255,0.9);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    z-index: 10;
    border-radius: 16px;
}

.spinner {
    width: 40px;
    height: 40px;
    border: 4px solid #e2e8f0;
    border-top: 4px solid #3b82f6;
    border-radius: 50%;
    animation: spin 1s linear infinite;
}

@keyframes spin { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } }
@keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }

/* --- 6. Utility --- */
.hidden { display: none !important; }

/* =========================================================
   🔧 FIX: บังคับตารางสรุปผลให้กว้างเต็มจอ 100%
   ========================================================= */

/* 1. สั่งให้การ์ดในหน้า Report ยืดเต็มความกว้าง */
#report-detail .card,
.table-card {
    width: 100% !important;      /* ยืดเต็มพื้นที่ */
    max-width: 100% !important;  /* ปลดล็อคความกว้างสูงสุด */
    flex: none !important;       /* แก้ปัญหาถ้าพ่อเป็น Flexbox */
    display: block !important;   /* ให้แสดงเป็นบล็อกยาวๆ */
}

/* 2. (เผื่อไว้) สั่งให้ Container หลักยืดเต็มด้วย */
#report-tab .history-container,
#report-detail {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0; /* ลดช่องว่างขอบซ้ายขวาถ้าต้องการ */
}

/* 3. ปรับตารางข้างในให้ยืดตาม */
#report-table {
    width: 100% !important;
}

/* --- เพิ่มต่อท้ายในไฟล์ CSS --- */

.map-card {
    margin-top: 15px;      /* เว้นระยะห่างจากกล่องค่าฝุ่นด้านบน */
    width: 100%;           /* ให้กว้างเต็มจอ */
    padding: 15px;         /* ระยะห่างภายใน */
    box-sizing: border-box;
}

.map-frame {
    width: 100%;
    height: 300px;         /* ความสูงของแผนที่ */
    border: 0;
    border-radius: 12px;   /* ขอบมนของตัวแผนที่ */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.1);
}

/* ปรับแต่งหัวข้อแผนที่ */
.map-title {
    margin-bottom: 10px;
    font-size: 1.1rem;
    color: var(--text-color);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* ปรับขนาดแผนที่ */
.map-frame {
    height: 300px;
    width: 100%;
    border-radius: 12px;
    z-index: 1; /* สำคัญ: เพื่อไม่ให้ทับเมนู */
}

/* ดีไซน์ป้ายบอกค่าฝุ่นบนแผนที่ (วงกลม) */
.pm-marker {
    background-color: white;
    border: 2px solid #fff;
    border-radius: 50%; /* ทำเป็นวงกลม */
    text-align: center;
    color: white;
    font-weight: bold;
    font-family: 'Prompt', sans-serif;
    box-shadow: 0 4px 6px rgba(0,0,0,0.3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-size: 14px;
    transition: all 0.3s ease;
}

/* --- เพิ่มต่อท้ายในไฟล์ CSS --- */

/* สีสำหรับ Map Marker (เพิ่มสี ฟ้า และ แดงเข้ม) */
.bg-blue { background-color: #3498db; }    /* AQI 0-25 */
.bg-green { background-color: #2ecc71; }   /* AQI 26-50 */
.bg-yellow { background-color: #f1c40f; color: black !important; } /* AQI 51-100 */
.bg-orange { background-color: #e67e22; }  /* AQI 101-150 */
.bg-red { background-color: #e74c3c; }     /* AQI 151-200 */
.bg-purple { background-color: #9b59b6; }  /* AQI 201-300 */
.bg-maroon { background-color: #701616; }  /* AQI > 300 */

/* =========================================
   Custom Scrollbar สำหรับหน้า Dashboard
   ========================================= */

/* 1. กำหนดความสูงของพื้นที่ Dashboard และสั่งให้ Scroll */
#dashboard-tab {
    /* ความสูงเต็มจอ - (ความสูงหัวข้อ + เมนูล่าง) โดยประมาณ */
    height: calc(100vh - 180px); 
    
    /* สั่งให้เกิด Scrollbar แนวตั้งถ้าเนื้อหาเกิน */
    overflow-y: auto; 
    
    /* ซ่อน Scrollbar แนวนอน */
    overflow-x: hidden; 
    
    /* เว้นระยะด้านล่างและด้านขวาเล็กน้อย */
    padding-bottom: 80px; 
    padding-right: 5px;
}

/* 2. ปรับแต่งหน้าตา Scrollbar (สำหรับ Chrome, Edge, Safari) */
#dashboard-tab::-webkit-scrollbar {
    width: 8px; /* ความกว้างของแกน */
}

/* สีพื้นหลังของรางเลื่อน */
#dashboard-tab::-webkit-scrollbar-track {
    background: rgba(0, 0, 0, 0.05); 
    border-radius: 10px;
}

/* สีของตัวเลื่อน (Thumb) */
#dashboard-tab::-webkit-scrollbar-thumb {
    background: #bbb; 
    border-radius: 10px;
}

/* สีตอนเอาเมาส์ชี้ */
#dashboard-tab::-webkit-scrollbar-thumb:hover {
    background: #888; 
}

/* --- Dark Mode Support (ปรับสี Scrollbar เมื่อเป็นโหมดมืด) --- */
[data-theme="dark"] #dashboard-tab::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
}
[data-theme="dark"] #dashboard-tab::-webkit-scrollbar-thumb {
    background: #555;
}
[data-theme="dark"] #dashboard-tab::-webkit-scrollbar-thumb:hover {
    background: #888;
}