/* ==========================================
   🎨 shared-style.css - สไตล์แกนกลางของระบบ (Centered Responsive Layout)
   ========================================== */
@import url('https://fonts.googleapis.com/css2?family=Prompt:wght@300;400;600;700&display=swap');

body { 
    font-family: 'Prompt', sans-serif; 
    background: #f4f5f7; 
    margin: 0; 
    padding: 0; 
    color: #172b4d; 
    padding-top: 70px; /* เว้นที่ว่างด้านบนเผื่อ Navbar */
}

/* 🌟 Global Navbar (แถบเมนูด้านบนสุด) */
.global-navbar { 
    position: fixed; 
    top: 0; 
    left: 0; 
    width: 100%; 
    height: 60px; 
    background: #ffffff; 
    box-shadow: 0 2px 10px rgba(0,0,0,0.08); 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    z-index: 9999; 
    padding: 0 20px; 
    box-sizing: border-box; 
    border-bottom: 3px solid #0052cc; 
}
.nav-brand { font-size: 18px; font-weight: 700; color: #0052cc; text-decoration: none; display: flex; align-items: center; gap: 10px; }
.nav-menu { display: flex; gap: 5px; align-items: center; overflow-x: auto; white-space: nowrap; }
.nav-item { text-decoration: none; color: #5e6c84; font-size: 14px; font-weight: 600; padding: 8px 12px; border-radius: 6px; transition: 0.2s; display: flex; align-items: center; gap: 5px; }
.nav-item:hover { background: #f4f5f7; color: #0052cc; }
.nav-item.active { background: #e3f2fd; color: #0052cc; }

/* User Profile in Nav */
.nav-user { display: flex; align-items: center; gap: 15px; margin-left: auto; border-left: 1px solid #dfe1e6; padding-left: 15px; }
.user-name-display { font-size: 13px; font-weight: 600; color: #172b4d; }

/* ซ่อนปุ่มแฮมเบอร์เกอร์ในจอคอมพิวเตอร์ */
.hamburger-btn { display: none; }

/* 🔲 Common Buttons (ปุ่มมาตรฐานใช้ร่วมกัน) */
.btn { padding: 8px 16px; border: none; border-radius: 6px; cursor: pointer; font-weight: bold; font-family: 'Prompt', sans-serif; font-size: 13px; transition: 0.2s; text-decoration: none; display: inline-flex; align-items: center; justify-content: center; gap: 5px; }
.btn:hover { filter: brightness(0.9); transform: translateY(-1px); }
.btn:active { transform: translateY(0); }
.btn-primary { background: #0052cc; color: white; }
.btn-success { background: #28a745; color: white; }
.btn-danger { background: #dc3545; color: white; }
.btn-warning { background: #ffab00; color: black; }
.btn-info { background: #17a2b8; color: white; }
.btn-purple { background: #6f42c1; color: white; }
.btn-outline { background: transparent; border: 1px solid #dfe1e6; color: #42526e; }
.btn-sm { padding: 4px 8px; font-size: 11px; }

/* ==================================================
   📦 Common Layout (การจัดวางเนื้อหา - ปรับใหม่ให้อยู่ตรงกลางแบบ Word)
   ================================================== */
/* แบบมาตรฐาน (หน้าย่อย, การเงิน, กระดานงาน ฯลฯ) */
.page-container, .container { 
    max-width: 1200px !important; /* จำกัดความกว้างไม่ให้ย้วย */
    width: 95% !important; /* ในมือถือจะหดตัวลงมาเหลือ 95% */
    margin: 20px auto !important; /* ดันให้อยู่ตรงกลางจอเสมอ */
    padding: 0 15px !important; 
    box-sizing: border-box;
}

/* แบบจอกว้างพิเศษ (สำหรับหน้าตารางคอลัมน์เยอะๆ เช่น Shopee, TikTok) */
.page-container-wide, .container-fluid {
    max-width: 1600px !important; /* ให้พื้นที่กว้างกว่าปกติ แต่ก็ยังไม่ย้วยทะลุจอ 4K */
    width: 98% !important;
    margin: 20px auto !important;
    padding: 0 15px !important;
    box-sizing: border-box;
}

.card-box { background: white; padding: 20px; border-radius: 12px; box-shadow: 0 2px 8px rgba(0,0,0,0.05); margin-bottom: 20px; }
.page-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; border-bottom: 2px solid #eee; padding-bottom: 10px;}
.page-header h2 { margin: 0; display: flex; align-items: center; gap: 10px; }

/* Common Inputs */
.input-box { width: 100%; padding: 10px; border: 1px solid #dfe1e6; border-radius: 6px; font-family: 'Prompt'; font-size: 14px; box-sizing: border-box; transition: border-color 0.2s; }
.input-box:focus { border-color: #0052cc; outline: none; }

/* ==========================================
   🌈 สีสันสำหรับปุ่มเมนู Navbar (Pastel Theme)
   ========================================== */
.nav-item {
    padding: 6px 12px;
    border-radius: 8px;
    text-decoration: none;
    font-weight: 600;
    font-size: 13px;
    transition: all 0.2s;
    border: 1px solid transparent;
}

/* กระดานงาน: สีฟ้าอ่อน */
.nav-task { background: #e3f2fd; color: #0052cc; }
.nav-task:hover, .nav-task.active { background: #cce5ff; border-color: #0052cc; }

/* การเงิน: สีเหลือง/ทองอ่อน */
.nav-finance { background: #fff8e1; color: #b07d00; }
.nav-finance:hover, .nav-finance.active { background: #ffecb3; border-color: #b07d00; }

/* TikTok: สีเทา/ดำอ่อน */
.nav-tiktok { background: #f2f2f2; color: #333333; }
.nav-tiktok:hover, .nav-tiktok.active { background: #e6e6e6; border-color: #333333; }

/* Shopee: สีส้มพาสเทล */
.nav-shopee { background: #fff0ed; color: #ee4d2d; }
.nav-shopee:hover, .nav-shopee.active { background: #ffe1db; border-color: #ee4d2d; }

/* คลังสินค้า: สีน้ำตาลไม้/กล่องพัสดุ */
.nav-stock { background: #f4ece8; color: #795548; }
.nav-stock:hover, .nav-stock.active { background: #e8d8ce; border-color: #795548; }

/* ส่งของ: สีม่วงอ่อน */
.nav-ship { background: #f3e5f5; color: #6a1b9a; }
.nav-ship:hover, .nav-ship.active { background: #e1bee7; border-color: #6a1b9a; }

/* HR พนักงาน: สีแดงอ่อน */
.nav-hr { background: #ffebee; color: #c62828; }
.nav-hr:hover, .nav-hr.active { background: #ffcdd2; border-color: #c62828; }

/* ==========================================
   📱 Mobile Responsive (แสดงผลบนจอมือถือ)
   ========================================== */
@media screen and (max-width: 768px) {
    /* 🌟 เปลี่ยน Navbar ให้มีปุ่ม 3 ขีด และซ่อนเมนูไว้ก่อน */
    .global-navbar {
        padding: 0 10px;
    }
    .hamburger-btn {
        display: block; /* โชว์ปุ่ม 3 ขีด */
        background: none;
        border: none;
        font-size: 26px;
        cursor: pointer;
        color: #0052cc;
        padding: 0;
        margin-right: 10px;
    }
    
    /* 🌟 จัดรูปแบบเมนูที่กางออกมาแบบแนวตั้ง */
    .nav-menu {
        display: none; /* ซ่อนไว้รอคนกด */
        flex-direction: column;
        position: absolute;
        top: 60px;
        left: 0;
        width: 100%;
        background: #ffffff;
        box-shadow: 0 4px 10px rgba(0,0,0,0.1);
        padding: 15px;
        box-sizing: border-box;
        gap: 10px;
        z-index: 9998;
        border-bottom: 2px solid #0052cc;
    }
    .nav-menu.show {
        display: flex; /* แสดงเมื่อถูกใส่คลาส show จาก Javascript */
    }
    
    .nav-item {
        justify-content: center;
        padding: 10px;
        font-size: 15px;
    }

    /* 🌟 จัดชื่อและปุ่มออกจากระบบบนมือถือ */
    .nav-user {
        border-left: none;
        padding-left: 0;
        gap: 10px;
    }
    .nav-user button {
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* 🌟 จัดระเบียบเนื้อหาให้เต็มจอขึ้น */
    .page-container, .container, .page-container-wide, .container-fluid {
        width: 100% !important;
        margin: 10px auto !important;
        padding: 0 10px !important;
    }
    
    /* 🌟 ปัด Header และกล่องค้นหาให้ตกลงมาเรียงกันแนวตั้ง */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .page-header > div, .filter-section {
        width: 100%;
        flex-wrap: wrap;
        justify-content: flex-start;
    }
}