:root{--bg:#0f1117;--surface:#161b27;--border:#2a2f40;--text:#e8eaf0;--muted:#64748b;--sub:#94a3b8;--blue:#3b82f6;--green:#22c55e;--red:#ef4444;--yellow:#f59e0b;--mono:'Space Mono',monospace;--sans:'Sarabun',sans-serif;}
*{box-sizing:border-box;margin:0;padding:0;}
body{font-family:var(--sans);background:var(--bg);color:var(--text);min-height:100vh;}
#auth-screen{min-height:100vh;display:flex;align-items:center;justify-content:center;background:radial-gradient(ellipse at 60% 40%,#1e3a5f33,transparent 60%),var(--bg);}
.auth-box{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:40px;width:380px;max-width:90vw;}
.auth-logo{display:flex;align-items:center;gap:12px;margin-bottom:32px;}
.auth-logo .icon{width:40px;height:40px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#06b6d4);display:flex;align-items:center;justify-content:center;font-size:20px;}
.auth-logo span{font-family:var(--mono);font-weight:700;font-size:18px;}
.auth-box h2{font-size:20px;margin-bottom:6px;} .auth-box p{color:var(--muted);font-size:14px;margin-bottom:28px;}
.form-group{margin-bottom:16px;}
.form-group label{display:block;font-size:13px;color:var(--sub);margin-bottom:6px;}
.form-group input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--text);font-family:var(--sans);font-size:14px;outline:none;transition:border .2s;}
.form-group input:focus{border-color:var(--blue);}
.btn{width:100%;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:13px;font-size:15px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:opacity .2s;}
.btn:hover{opacity:.85;} .btn:disabled{opacity:.5;cursor:not-allowed;}
.err-msg{color:var(--red);font-size:13px;margin-top:12px;text-align:center;}
#app-screen{display:none;}
header{background:var(--surface);border-bottom:1px solid var(--border);padding:0 20px;display:flex;align-items:center;justify-content:space-between;height:58px;position:sticky;top:0;z-index:100;}
.header-left{display:flex;align-items:center;gap:10px;}
.logo-icon{width:30px;height:30px;border-radius:7px;background:linear-gradient(135deg,#3b82f6,#06b6d4);display:flex;align-items:center;justify-content:center;font-size:15px;}
.logo-text{font-family:var(--mono);font-weight:700;font-size:14px;letter-spacing:1px;}
nav{display:flex;gap:2px;}
.nav-btn{padding:6px 14px;border-radius:6px;border:none;cursor:pointer;font-size:13px;font-family:var(--sans);font-weight:600;background:transparent;color:var(--muted);transition:all .2s;}
.nav-btn.active{background:var(--blue);color:#fff;}
.header-right{display:flex;align-items:center;gap:10px;}
.user-badge{font-size:13px;color:var(--muted);}
.role-badge{font-size:11px;padding:2px 8px;border-radius:4px;font-weight:600;}
.role-admin{background:#3b1f6e;color:#a78bfa;} .role-line{background:#1e3a5f;color:#60a5fa;}
.role-super{background:#14532d;color:#4ade80;}
.logout-btn{background:transparent;border:1px solid var(--border);color:var(--muted);border-radius:6px;padding:5px 10px;font-size:12px;cursor:pointer;font-family:var(--sans);}
.lang-switcher{display:flex;gap:4px;}
.lang-btn{background:#1e293b;border:1px solid var(--border);color:var(--sub);border-radius:5px;padding:3px 7px;font-size:11px;cursor:pointer;font-family:var(--sans);font-weight:600;transition:all .2s;}
.lang-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}
main{max-width:1100px;margin:0 auto;padding:24px 16px;}
.stat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-bottom:24px;}
.stat-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;}
.stat-icon{font-size:22px;margin-bottom:8px;} .stat-num{font-family:var(--mono);font-weight:700;font-size:30px;}
.stat-unit{font-size:12px;color:var(--muted);margin-top:2px;} .stat-label{font-size:13px;color:var(--sub);margin-top:4px;}
.section{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:22px;margin-bottom:18px;}
.section-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px;flex-wrap:wrap;gap:10px;}
.section-title{font-size:15px;font-weight:600;}
table{width:100%;border-collapse:collapse;}
th{padding:11px 14px;text-align:left;font-size:12px;color:var(--muted);font-weight:600;letter-spacing:.5px;border-bottom:1px solid var(--border);}
td{padding:10px 14px;font-size:13px;border-bottom:1px solid #1e293b;}
tr:last-child td{border-bottom:none;}
.failed-num{font-family:var(--mono);font-weight:700;font-size:14px;}
.failed-high{color:var(--red);} .failed-mid{color:var(--yellow);} .failed-low{color:var(--green);}
.btn-primary{background:var(--blue);color:#fff;border:none;border-radius:7px;padding:9px 18px;font-size:13px;font-weight:600;font-family:var(--sans);cursor:pointer;}
.btn-danger{background:transparent;border:none;color:var(--red);font-size:12px;cursor:pointer;font-family:var(--sans);}
.btn-add{background:#1e3a5f;color:#60a5fa;border:none;border-radius:6px;padding:6px 12px;font-size:12px;cursor:pointer;font-family:var(--sans);font-weight:600;}
.btn-export{background:#14532d;color:#4ade80;border:none;border-radius:6px;padding:8px 14px;font-size:13px;cursor:pointer;font-family:var(--sans);font-weight:600;}
.btn-icon{background:transparent;border:none;cursor:pointer;font-size:15px;padding:2px 5px;opacity:.7;transition:opacity .2s;}
.btn-icon:hover{opacity:1;}
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.75);z-index:200;display:none;align-items:center;justify-content:center;}
.modal-overlay.open{display:flex;}
.modal{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:30px;width:440px;max-width:92vw;max-height:90vh;overflow-y:auto;}
.modal h2{font-size:17px;margin-bottom:22px;}
.modal-btns{display:flex;gap:10px;margin-top:6px;}
.btn-cancel{flex:1;background:#1e293b;color:var(--sub);border:none;border-radius:8px;padding:12px;font-size:14px;font-family:var(--sans);cursor:pointer;}
.btn-save{flex:2;background:var(--blue);color:#fff;border:none;border-radius:8px;padding:12px;font-size:14px;font-weight:600;font-family:var(--sans);cursor:pointer;transition:background .3s;}
.btn-save.success{background:var(--green);}
.add-input{width:100%;background:var(--bg);border:1px solid var(--border);border-radius:8px;padding:11px 14px;color:var(--text);font-family:var(--sans);font-size:14px;outline:none;margin-bottom:14px;}
.filter-row{display:flex;gap:10px;margin-bottom:18px;flex-wrap:wrap;align-items:center;}
.filter-btn{background:#1e293b;color:var(--sub);border:none;border-radius:6px;padding:7px 14px;font-size:13px;cursor:pointer;font-family:var(--sans);transition:all .2s;}
.filter-btn.active{background:var(--blue);color:#fff;}
.loading{text-align:center;color:var(--muted);padding:40px;font-size:14px;}
.dash-filters{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px;}
.sel-input{background:var(--surface);border:1px solid var(--border);border-radius:8px;padding:8px 12px;color:var(--text);font-family:var(--sans);font-size:13px;outline:none;cursor:pointer;}
.sel-input:focus{border-color:var(--blue);}
.bar-chart{display:flex;align-items:flex-end;gap:10px;height:130px;margin-top:10px;overflow-x:auto;padding-bottom:4px;}
.bar-col{flex:0 0 auto;min-width:48px;display:flex;flex-direction:column;align-items:center;gap:5px;}
.bar-val{font-family:var(--mono);font-size:11px;font-weight:700;}
.bar{width:36px;border-radius:4px 4px 0 0;min-height:4px;transition:height .5s;}
.bar-label{font-size:11px;color:var(--muted);text-align:center;max-width:52px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.inline-edit-input{background:var(--bg);border:1px solid var(--blue);border-radius:6px;padding:4px 8px;color:var(--text);font-family:var(--mono);font-size:13px;font-weight:700;width:70px;outline:none;}
.export-type-row{display:flex;gap:8px;margin-bottom:16px;flex-wrap:wrap;}
.export-type-btn{flex:1;padding:9px;border-radius:7px;border:1px solid var(--border);background:#1e293b;color:var(--sub);font-family:var(--sans);font-size:13px;font-weight:600;cursor:pointer;transition:all .2s;}
.export-type-btn.active{background:var(--blue);color:#fff;border-color:var(--blue);}
.export-section{display:none;} .export-section.visible{display:block;}

/* ========================================================= */
/* 📱 MOBILE RESPONSIVE OPTIMIZATION (ระบบจัดการหน้าจอมือถือ) 📱 */
/* ========================================================= */
@media (max-width: 768px) {
    
    /* ------------------------------------------- */
    /* 🌟 เพิ่มกฎพิเศษสำหรับแก้อาการแปลกๆ บน iPhone 🌟 */
    /* ------------------------------------------- */
    
    /* 1. แก้ปัญหา iPhone ซูมหน้าจอเองเวลาจิ้มช่องพิมพ์ (บังคับฟอนต์ 16px) */
    input, select, textarea, .add-input, .sel-input {
        font-size: 16px !important;
    }

    /* 2. แก้ปัญหาหน้าจอตกขอบล่าง (ปัญหา 100vh ของ Safari) */
    body, #auth-screen {
        min-height: 100dvh; 
    }

    /* 3. หลบพื้นที่ขอบจอ (Notch) และแถบขีดด้านล่างของ iPhone (Safe Area) */
    header {
        padding-top: max(12px, env(safe-area-inset-top));
    }
    main {
        padding-bottom: max(24px, env(safe-area-inset-bottom));
    }
    
    /* 4. ป้องกันแอปกระตุกจากการแตะรัวๆ (Double Tap to Zoom) */
    button, a, input, select {
        touch-action: manipulation;
    }

    /* ------------------------------------------- */
    /* 🌟 ปรับ Layout ทั่วไปสำหรับจอมือถือ 🌟 */
    /* ------------------------------------------- */

    /* ปรับ Header และเมนูให้เรียงใหม่และเลื่อนซ้ายขวาได้ */
    header {
        flex-wrap: wrap;
        height: auto;
        padding: 12px 16px;
        gap: 12px;
        justify-content: center;
    }
    .header-left {
        width: 100%;
        justify-content: space-between;
    }
    .header-right {
        width: 100%;
        justify-content: space-between;
    }
    nav {
        width: 100%;
        overflow-x: auto;
        padding-bottom: 6px;
        justify-content: flex-start;
        -webkit-overflow-scrolling: touch; /* ให้เลื่อนบนมือถือลื่นขึ้น */
    }
    .nav-btn {
        white-space: nowrap;
        flex-shrink: 0;
        padding: 8px 12px;
    }

    /* ปรับหน้าต่าง Login */
    .auth-box {
        padding: 24px 20px;
    }

    /* ปรับการ์ดสถิติให้เรียงเป็นแนวตั้ง 1 แถว */
    .stat-grid {
        grid-template-columns: 1fr; 
    }

    /* ปรับ Layout รวมๆ */
    main {
        padding: 16px 10px;
    }
    .section {
        padding: 16px 12px;
        /* ทำให้กล่องที่มีตารางสามารถสไลด์ซ้ายขวาได้ */
        overflow-x: auto; 
        -webkit-overflow-scrolling: touch;
    }

    /* ป้องกันตารางบีบตัว บังคับให้สไลด์แทน */
    table {
        min-width: 600px; 
    }

    /* ปรับช่องตัวกรอง (Filters) ให้เต็มจอ */
    .filter-row {
        flex-direction: column;
        align-items: stretch;
    }
    .filter-row .sel-input, .filter-row .filter-btn,
    .dash-filters select, .dash-filters input {
        width: 100%;
        margin-bottom: 8px;
    }

    /* ปรับหน้าต่าง Modal ตอนกดบันทึกข้อมูล */
    .modal {
        padding: 20px;
    }

    /* ปรับปุ่ม Export ให้เป็นตาราง 2x2 แทนการเรียงยาว 4 อัน */
    .export-type-row {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    /* ปรับกล่องเมนูหน้า Manage (พนักงาน/แพ็กเกจ) ให้เรียงแนวตั้ง */
    div[style*="grid-template-columns: 1fr 1fr;"] {
        grid-template-columns: 1fr !important;
    }
}