/* ===== Design tokens (ใช้ร่วมกันทุกหน้าที่ link ไฟล์นี้) =====
   อัปเดตตาม design system "Planex Dashboard" จาก Figma (community file เชื่อมผ่าน Figma MCP) — พื้นหลังโทนครีมอุ่น
   #f5f2f0 แทนเทาอมเขียวเดิม, ตัวหนังสือดำอมน้ำตาล #1c1a19 (เข้มกว่าเดิม) พร้อมมิวเต็ด 2 ระดับ (#6e6965 รอง,
   #a39e9a อ่อนสุดสำหรับ placeholder/หัวตาราง), เส้นขอบอุ่นขึ้น #eae6e2, เพิ่ม --color-ink (เกือบดำ #121110)
   เป็นสีปุ่ม CTA หลักตัวใหม่ (ปุ่ม "ดูทั้งหมด", "+ เพิ่มกิจกรรม" ฯลฯ) แยกจาก --color-accent เดิม (มะนาวสด ใช้เฉพาะ
   active state ของเมนูซ้ายเหมือนเดิม เพราะดีไซน์ Figma เองก็ใช้สีมะนาวจุดนี้เหมือนกัน) border radius/shadow ที่ปรับ
   ไว้รอบก่อน (การ์ด 24px, ปุ่ม pill) ตรงกับ Figma อยู่แล้วไม่ต้องแก้ */
@import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap');

:root {
    --bg-page: #f5f2f0;
    --bg-surface: #ffffff;
    --bg-success-light: #e3f9ea;
    --bg-danger-light: #ffdad6;
    --bg-warning-light: #fff4e0;
    --bg-info-light: #eaf1ff;

    --text-primary: #1c1a19;
    --text-secondary: #6e6965;
    --text-muted: #a39e9a;
    --text-heading: #1c1a19;

    --border-subtle: #eae6e2;
    --border-input: #eae6e2;

    /* primary = เขียวมะนาวสด (พื้นปุ่ม/active state เฉพาะเมนูซ้าย) ตัวหนังสือ/ไอคอนบนพื้นนี้ใช้ --color-accent-text
       (เข้ม) เสมอ ไม่ใช่ขาว เพราะพื้นมะนาวสว่างเกินกว่าตัวหนังสือขาวจะอ่านออก */
    --color-accent: #d4ff5f;
    --color-accent-hover: #c3ee4d;
    --color-accent-text: #33430a;
    --color-accent-dark: #4f6600;
    --color-secondary: #127c71;
    --color-secondary-hover: #0e645c;
    /* ink = ปุ่ม CTA หลักตัวใหม่ตาม Figma (เกือบดำ ตัวหนังสือขาว) ใช้แยกจาก accent มะนาว */
    --color-ink: #121110;
    --color-ink-hover: #2c2a28;
    --color-info: #3b82f6;
    --color-info-dark: #1d4ed8;
    --color-danger: #ba1a1a;
    --color-danger-dark: #93000a;
    --color-warning: #e67e22;
    --color-warning-dark: #ba7517;

    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
    --radius-full: 999px;

    --shadow-sm: 0 1px 3px rgba(0,0,0,0.05);
    --shadow-md: 0 4px 20px rgba(0,0,0,0.06);
    --shadow-lg: 0 10px 30px rgba(18,124,113,0.10);

    --space-1: 4px;
    --space-2: 8px;
    --space-3: 12px;
    --space-4: 16px;
    --space-5: 20px;
    --space-6: 24px;

    --font-base: 'Plus Jakarta Sans', 'Noto Sans Thai', sans-serif;
}

/* แต่ละ template ประกาศ body { padding: 20-30px } เองไม่ตรงกัน (ของเดิมไว้ห่อ .page-shell ทั้งก้อนให้ sidebar
   ลอยเป็นการ์ด) — reset เป็น 0 ที่นี่ (ชนะเพราะไฟล์นี้ link ทีหลัง <style> เฉพาะหน้าเสมอ) แล้วย้าย padding ไปไว้ที่
   .main-content แทน เพื่อให้ sidebar ชิดขอบจอเต็มความสูงได้จริงตามแบบอ้างอิง */
body { background: var(--bg-page); margin: 0; padding: 0; }

/* ===== โครงหน้า + เมนูซ้าย (ใช้ร่วมกันทุกหน้า) =====
   เมนูซ้ายเปลี่ยนเป็นแบบ "ไอคอนล้วน" กว้าง 64px ตาม Figma "Planex Dashboard" (เดิมกว้าง 260px มีตัวหนังสือกำกับ
   ตลอด) — ไอเทมเดี่ยว (หน้าโฮม/จำลองการผลิต/ปฏิทิน/สำรองข้อมูล) ใช้ title attribute โชว์ชื่อเมนูตอน hover
   (tooltip ของเบราว์เซอร์เอง เบาที่สุด ไม่ต้องเขียน JS/CSS tooltip เพิ่ม) ส่วนกลุ่มเมนูที่มีเมนูย่อย (PO/สต็อก/
   ข้อมูลโมล/QC/พนักงาน/รายงาน) เปิดเป็น "flyout" popover ลอยด้านขวาไอคอนแทนการขยายแนวตั้งแบบเดิม — เปิดได้ทั้ง
   hover (เมาส์) และคลิก (.open class เดิมจาก toggleNavGroup() ใน sidebar.js ไม่ต้องแก้ JS) โปรไฟล์ผู้ใช้ท้ายเมนู
   ก็เป็น flyout แบบเดียวกัน (avatar ไอคอนเดียวอยู่นิ่ง ชื่อ/role/ออกจากระบบลอยขึ้นตอน hover)
   ทุกอย่างนี้เฉพาะจอ desktop เท่านั้น — บนมือถือ (media query ท้ายไฟล์) กลับไปเป็นเมนูลิ้นชักแบบมีตัวหนังสือเหมือนเดิมทุกจุด
   เพราะ hover ใช้ไม่ได้บนทัชสกรีน และไม่ใช่สิ่งที่ Figma อ้างอิงตั้งใจแก้ (ดีไซน์นั้นเป็น desktop-only) */
.page-shell { display: flex; align-items: stretch; min-height: 100vh; }

/* z-index ที่นี่จำเป็น: การ์ด/แถวในเนื้อหาหลักมีคลาส .fade-item ซึ่ง animation ของมันตั้ง transform ไว้ —
   element ที่มี transform จะสร้าง stacking context ของตัวเองขึ้นมา ถ้า .sidebar (position:sticky) ไม่ประกาศ
   z-index ไว้ ตัว sidebar จะไม่สร้าง stacking context ทำให้ flyout เมนูย่อย (z-index:1500) ไปเทียบชั้นกับ
   .fade-item ที่มาทีหลังใน DOM แล้วโดนทับ เห็นเป็นตัวหนังสือซ้อนกันมั่วกับหัวข้อ "หน้าโฮม"/การ์ด KPI */
.sidebar { width: 64px; flex-shrink: 0; background: var(--bg-surface);
           padding: 16px 8px; border-right: 1px solid var(--border-subtle);
           position: sticky; top: 0; height: 100vh; overflow-y: visible; z-index: 50;
           display: flex; flex-direction: column; align-items: center; }
.sidebar .brand { display: flex; align-items: center; justify-content: center; gap: 10px;
                   padding: 0 0 20px; width: 100%; border-bottom: 1px solid var(--border-subtle); margin-bottom: 12px; }
.sidebar .brand-mark { width: 44px; height: 44px; object-fit: contain; }
.sidebar .brand-full { display: none; }

/* การ์ดโปรไฟล์ผู้ใช้ท้าย sidebar — ดันลงล่างสุดด้วย margin-top:auto บน .nav-divider ตัวสุดท้ายก่อนหน้า */
.nav-divider:last-of-type { margin-top: auto; }
.sidebar-profile { position: relative; display: flex; align-items: center; justify-content: center;
                    padding: 10px 0 4px; width: 100%; }
.sidebar-profile-avatar { width: 32px; height: 32px; border-radius: 50%; flex-shrink: 0;
                           background: var(--color-accent); color: var(--color-accent-text);
                           display: flex; align-items: center; justify-content: center;
                           font-weight: 700; font-size: 13px; cursor: default; }
.sidebar-profile-flyout { position: absolute; left: 100%; bottom: 0; margin-left: 8px; width: 180px;
                           background: var(--bg-surface); border: 1px solid var(--border-subtle);
                           border-radius: var(--radius-md); box-shadow: var(--shadow-lg); padding: 12px;
                           z-index: 1500; display: none; }
.sidebar-profile:hover .sidebar-profile-flyout { display: block; }
.sidebar-profile-name { font-size: 13px; font-weight: 600; color: var(--text-primary);
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sidebar-profile-role { font-size: 12px; color: var(--text-secondary); margin-bottom: 8px; }
.sidebar-profile-logout { display: flex; align-items: center; gap: 6px; text-decoration: none;
                           font-size: 13px; color: var(--color-danger-dark); border-radius: var(--radius-sm);
                           padding: 6px 8px; margin: 0 -8px; }
.sidebar-profile-logout:hover { background: var(--bg-danger-light); }

.nav-item { display: flex; align-items: center; justify-content: center; gap: 0; padding: 10px; border-radius: var(--radius-md);
            font-size: 14px; color: var(--text-primary); text-decoration: none; cursor: pointer;
            min-height: 44px; width: 100%; box-sizing: border-box; }
.nav-item:hover { background: var(--bg-page); }
.nav-item.active { background: var(--color-accent); color: var(--color-accent-text); font-weight: bold; }
.nav-icon { font-size: 18px; line-height: 1; flex-shrink: 0; }
.nav-label { display: none; }
.nav-group { position: relative; width: 100%; }
.nav-group-header { display: flex; align-items: center; justify-content: center; padding: 10px;
                    border-radius: var(--radius-md); font-size: 14px; color: var(--text-primary); cursor: pointer;
                    text-decoration: none; min-height: 44px; width: 100%; box-sizing: border-box; }
.nav-group-header:hover { background: var(--bg-page); }
.nav-group-header.active-group { background: var(--color-accent); color: var(--color-accent-text); font-weight: bold; }
.nav-group-header .left { display: flex; align-items: center; justify-content: center; gap: 8px; }
.nav-group-header .chevron { display: none; }
.nav-children { display: none; position: absolute; left: 100%; top: 0; margin-left: 8px; width: 200px;
                background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-md);
                box-shadow: var(--shadow-lg); padding: 6px; z-index: 1500; }
.nav-children.open, .nav-group:hover > .nav-children { display: block; }
.nav-children .nav-item { justify-content: flex-start; gap: 8px; padding: 9px 10px; font-size: 13px; }
.nav-children .nav-label { display: inline; }
.nav-divider { height: 1px; background: var(--border-subtle); margin: 10px 4px; width: calc(100% - 8px); }
.sidebar-footer { padding: 8px 10px 2px; font-size: 12px; color: var(--text-secondary); }

.main-content { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 15px;
                 padding: 24px; box-sizing: border-box; }

/* ===== ปุ่มแฮมเบอร์เกอร์ + backdrop (ซ่อนไว้บนจอใหญ่) ===== */
.mobile-menu-btn { display: none; }
.sidebar-backdrop { display: none; }
.sidebar-close-btn { display: none; }

/* ===== Responsive: จอเล็กกว่า 768px ===== */
@media (max-width: 768px) {
    /* ลำดับ z-index ของชั้น overlay บนมือถือ (จากบนสุดลงล่างสุด) ห้ามสลับ:
       เมนู .sidebar (1100) ต้องอยู่เหนือ .sidebar-backdrop (1000) เสมอ
       ไม่งั้น backdrop จะบังคลิกลิงก์ในเมนู ทำให้กดเมนูไม่ได้ */
    .mobile-menu-btn {
        display: flex; align-items: center; justify-content: center;
        position: fixed; top: 14px; left: 14px; z-index: 1002;
        width: 44px; height: 44px; border-radius: var(--radius-md); border: none;
        background: var(--color-secondary); color: white; font-size: 20px; cursor: pointer;
        box-shadow: var(--shadow-md);
    }

    /* หมายเหตุ: ใช้ left แทน transform เพราะ .fade-item มี animation ที่ตั้งค่า transform ไว้อยู่แล้ว
       (animated transform จะชนะค่า transform ปกติเสมอ ทำให้ slide-in/out ด้วย transform ใช้ไม่ได้ที่นี่) */
    .sidebar {
        position: fixed; top: 0; left: -100vw; bottom: 0; height: 100vh;
        width: 250px; max-width: 82vw; border-radius: 0;
        z-index: 1100; align-items: stretch;
        transition: left 0.25s ease; overflow-y: auto;
    }
    .sidebar.open { left: 0; }

    /* มือถือ: กลับไปเป็นเมนูลิ้นชักแบบมีตัวหนังสือกำกับเหมือนเดิมทุกจุด (hover ใช้ไม่ได้บนทัชสกรีน จึง
       ไม่เอาโหมด rail/flyout มาใช้ที่นี่ — เห็นชื่อเมนูตรงๆ ดีกว่า) */
    .sidebar .brand { justify-content: flex-start; padding: 4px 8px 16px; border-bottom: none; margin-bottom: 0; }
    .sidebar .brand-mark { display: none; }
    .sidebar .brand-full { display: block; height: 34px; width: auto; max-width: 160px; object-fit: contain; }
    .nav-item, .nav-group-header { justify-content: flex-start; gap: 8px; }
    .nav-label { display: inline; }
    .nav-group-header .chevron { display: block; }
    .nav-children { position: static; display: none; margin: 2px 0 4px; padding-left: 14px;
                     width: auto; background: none; border: none; box-shadow: none; }
    .nav-children.open { display: block; }
    .nav-group:hover > .nav-children:not(.open) { display: none; }
    .nav-children .nav-item { padding-left: 22px; }
    .sidebar-profile { justify-content: flex-start; gap: 10px; padding: 10px 8px 4px; }
    .sidebar-profile-flyout { position: static; display: block; flex: 1; min-width: 0; width: auto;
                               box-shadow: none; border: none; padding: 0; margin: 0; background: none; }
    .sidebar-profile:hover .sidebar-profile-flyout { display: block; }

    .sidebar-close-btn {
        display: flex; align-items: center; justify-content: center; margin-left: auto;
        background: none; border: none; min-width: 44px; min-height: 44px;
        font-size: 20px; color: var(--text-secondary); cursor: pointer; line-height: 1;
    }

    .sidebar-backdrop {
        display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.45); z-index: 1000;
        pointer-events: none;
    }
    .sidebar-backdrop.open { display: block; pointer-events: auto; }

    .main-content { width: 100%; padding: 16px; }

    /* ===== เมนูที่ซ่อนบนมือถือ (พนักงาน, รายงาน, สำรองข้อมูล) ===== */
    .mobile-hide-nav { display: none !important; }

    /* ===== ปุ่ม/ฟอร์มแก้ไขข้อมูลที่ซ่อนบนมือถือ (มือถือ = ดูข้อมูลอย่างเดียว) ===== */
    .mobile-edit-hide { display: none !important; }
}

/* ===== แบนเนอร์แจ้งมีอัปเดตใหม่ของ PWA (มุมล่างขวา, ลอยทับทุกหน้า) ===== */
.pwa-update-banner {
    display: none; align-items: center; gap: 12px;
    position: fixed; bottom: 20px; right: 20px; z-index: 3000;
    background: var(--color-secondary); color: white; padding: 12px 16px; border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg); font-size: 14px; max-width: 92vw;
}
.pwa-update-banner.show { display: flex; }
.pwa-update-banner button {
    background: white; color: var(--color-secondary); border: none; padding: 7px 14px; border-radius: var(--radius-sm);
    font-weight: bold; font-size: 13px; cursor: pointer; font-family: inherit; white-space: nowrap;
}
.pwa-update-banner button:hover { background: var(--bg-page); }
@media (max-width: 480px) {
    .pwa-update-banner { left: 12px; right: 12px; bottom: 12px; }
}