:root {
    --primary: #2563eb;
    --primary-hover: #1d4ed8;
    --primary-light: #eff6ff;

    --bg-color: #f8fafc; /* สีพื้นหลังสไตล์ Modern SaaS (เทาอมฟ้าอ่อนมาก) */
    --surface: #ffffff;

    --text-main: #1e293b; /* สีตัวอักษรหลัก (ไม่ดำสนิท ดูสบายตา) */
    --text-muted: #64748b; /* สีเทาสำหรับหัวข้อและข้อความรอง */

    --border-light: #e2e8f0;
    --border-focus: #93c5fd;

    --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
    --shadow-card: 0 4px 24px -4px rgba(15, 23, 42, 0.04), 0 12px 16px -8px rgba(15, 23, 42, 0.02);

    /* 🆕 ===== SEMANTIC STATUS COLORS ===== */
    /* ใช้ชุดสีเดียวนี้ทุกจุด: badge, KPI accent, calendar dot, event chip */
    --status-pending-bg: #fef3c7;
    --status-pending-text: #b45309;
    --status-pending-border: #fde68a;
    --status-pending-solid: #f59e0b;

    --status-approved-bg: #e0f2fe;
    --status-approved-text: #0369a1;
    --status-approved-border: #bae6fd;
    --status-approved-solid: #0ea5e9;

    /* 🆕 สถานะกลาง: "ตรวจสอบแล้ว/พร้อมจ่ายงาน" — แยกจาก pending (เหลือง) และ
       approved (ฟ้า) ด้วยเจตนา เพราะเป็นคนละความหมาย: pending = ยังแก้ไขได้,
       review = ล็อกข้อมูลแล้ว รอหัวหน้าขนส่งมาเลือกคนขับ
       ⚠️ ใช้โทน indigo ไม่ใช่ teal/เขียว เพราะ teal อยู่ตระกูลเดียวกับสีเขียวของ
       "จัดส่งสำเร็จ" เสี่ยงมองผิดว่างานเสร็จแล้วทั้งที่ยังไม่ได้จ่ายรถเลย */
    --status-review-bg: #e0e7ff;
    --status-review-text: #4338ca;
    --status-review-border: #c7d2fe;
    --status-review-solid: #6366f1;

    --status-shipping-bg: #ede9fe;
    --status-shipping-text: #5b21b6;
    --status-shipping-border: #ddd6fe;
    --status-shipping-solid: #7c3aed;

    --status-success-bg: #dcfce7;
    --status-success-text: #15803d;
    --status-success-border: #bbf7d0;
    --status-success-solid: #16a34a;

    --status-cancel-bg: #fee2e2;
    --status-cancel-text: #b91c1c;
    --status-cancel-border: #fecaca;
    --status-cancel-solid: #dc2626;

    --status-total-solid: #64748b; /* งานทั้งหมด = เทากลาง ไม่แย่งความสนใจจากสถานะอื่น */

    /* 🆕 สถานะเฉพาะขนส่งภายนอก: "เรียกรถแล้ว (รอขนส่งภายนอกยืนยัน)"
       ใช้ cyan ซึ่งยังไม่ถูกใช้ในระบบ แยกจาก sky(อนุมัติแล้ว)/violet(กำลังจัดส่ง)
       เพราะความหมายต่างกัน: สีม่วง/ฟ้าคือ "เรารู้จริงว่าอยู่ขั้นไหน" (internal มี driver
       app คอยอัปเดต) ส่วน cyan คือ "เราเรียกไปแล้ว แต่ไม่มีทางรู้ต่อ นอกจากโทรถาม" */
    --status-external-bg: #cffafe;
    --status-external-text: #155e75;
    --status-external-border: #a5f3fc;
    --status-external-solid: #0891b2;

    /* 🆕 ===== SPACING & RADIUS SCALE ===== */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;
    --radius-pill: 9999px;

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

    /* 🆕 ===== TYPOGRAPHY SCALE ===== */
    --fs-caption: 11.5px;
    --fs-body: 13.5px;
    --fs-subheading: 15px;
    --fs-heading: 22px;
    --fs-kpi-number: 30px;
}

body {
    font-family: 'Prompt', -apple-system, BlinkMacSystemFont, sans-serif;
    background-color: var(--bg-color);
    color: var(--text-main);
    margin: 0;
    padding: 40px 20px;
    -webkit-font-smoothing: antialiased; /* ทำให้ฟอนต์เนียนขึ้น */
}

/* 🟢 กรอบหลัก */
.dashboard-wrapper {
    max-width: 100%;
    margin: 0 auto;
    width: 100%;
}

/* =========================================================
   🟢 ส่วนหัว Header — ปรับ hierarchy ของปุ่ม
   ธุรกิจ: "จองรถเพิ่ม" คือ primary action ที่ใช้บ่อยสุด
   ต้องเด่นกว่าปุ่มอื่นทั้งขนาดและสี ส่วนปุ่มจัดการระบบ
   (จัดการรถ/จัดการผู้ใช้งาน) เป็น secondary / ghost
   ========================================================= */
.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-5);
    flex-wrap: wrap;
    gap: var(--space-3);
}

.header h2 {
    margin: 0;
    font-size: var(--fs-heading);
    font-weight: 600;
    color: #0f172a;
    letter-spacing: -0.5px; /* บีบช่องไฟนิดๆ ให้ดู Modern */
}

.header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}

/* Base button reset — ทุกปุ่มใน header ใช้ฐานเดียวกัน แล้วค่อยต่างที่ variant */
.btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 40px;
    padding: 0 16px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-family: inherit;
    font-size: 13.5px;
    font-weight: 600;
    cursor: pointer;
    text-decoration: none;
    white-space: nowrap;
    transition: all 0.2s ease;
}

/* 🥇 Primary — "จองรถเพิ่ม" เท่านั้น: สีเข้มสุด ขนาดใหญ่สุด อยู่ขวาสุด */
.btn-primary,
.btn-green {
    background: #0f172a;
    color: white;
    box-shadow: var(--shadow-sm);
    height: 42px;
    padding: 0 20px;
}
.btn-primary:hover,
.btn-green:hover {
    background: #334155;
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(15, 23, 42, 0.15);
}

/* 🥈 Secondary — "จัดการรถ", "โหลด Excel": มีขอบ พื้นขาว ใช้บ่อยรองลงมา */
.btn-secondary {
    background: var(--surface);
    color: var(--text-main);
    border-color: var(--border-light);
}
.btn-secondary:hover {
    border-color: #cbd5e1;
    background: #f8fafc;
}

/* 🥉 Ghost — "จัดการผู้ใช้งาน": งาน admin ที่ใช้ไม่บ่อย ไม่ควรแย่งสายตา */
.btn-ghost {
    background: transparent;
    color: var(--text-muted);
    border-color: transparent;
}
.btn-ghost:hover {
    background: #f1f5f9;
    color: var(--text-main);
}

/* =========================================================
   🆕 KPI Cards — เพิ่ม visual hierarchy ด้วยสีตามสถานะ
   ก่อนหน้านี้ 4 การ์ดหน้าตาเหมือนกันหมด ไม่รู้ว่าอันไหนสำคัญ
   ตอนนี้ใช้ accent bar ด้านบน + ไอคอนพื้นสี ให้กวาดตาแล้วรู้ทันที
   ========================================================= */
.dashboard-stats {
    display: grid;
    /* 🆕 5 การ์ดแล้ว (เพิ่ม "พร้อมจ่ายงาน" แยกจาก "รอดำเนินการ")
       ใช้ auto-fit แทนตัวเลขคงที่ ปรับตามพื้นที่จอได้เอง ไม่ต้องคอยแก้เลขคอลัมน์ */
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: var(--space-4);
    margin-bottom: var(--space-5);
}

.stat-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-4) var(--space-5);
    overflow: hidden;
    /* 🆕 บอกใบ้ว่ากดได้ (คลิกแล้วกรองตารางตามสถานะนี้ทันที) */
    cursor: pointer;
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.stat-card:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 20px -6px rgba(15, 23, 42, 0.12);
}
.stat-card:active {
    transform: translateY(0);
}

/* แถบสีบนสุดของการ์ด — บอกสถานะโดยไม่ต้องอ่านตัวอักษร */
.stat-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--accent-color, var(--status-total-solid));
}

.stat-card.total     { --accent-color: var(--status-total-solid); }
.stat-card.pending   { --accent-color: var(--status-pending-solid); }
.stat-card.review    { --accent-color: var(--status-review-solid); } /* 🆕 */
.stat-card.shipping  { --accent-color: var(--status-shipping-solid); }
.stat-card.success   { --accent-color: var(--status-success-solid); }

.stat-card .stat-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: var(--fs-body);
    font-weight: 600;
    color: var(--text-muted);
    margin-bottom: var(--space-2);
}

.stat-card .stat-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    border-radius: 6px;
    background: color-mix(in srgb, var(--accent-color, var(--status-total-solid)) 15%, white);
    color: var(--accent-color, var(--status-total-solid));
    font-size: 12px;
}

.stat-card .stat-number {
    font-size: var(--fs-kpi-number);
    font-weight: 700;
    color: #0f172a;
    line-height: 1;
}

/* งานที่ต้อง "ลงมือทำ" เน้นตัวเลขด้วยสีสถานะ (รอดำเนินการ/พร้อมจ่ายงาน/กำลังจัดส่ง)
   ส่วน "งานทั้งหมด" กับ "สำเร็จ" ใช้สีเข้มปกติ ไม่ต้องแย่งความสนใจ */
.stat-card.pending .stat-number,
.stat-card.review .stat-number,
.stat-card.shipping .stat-number {
    color: var(--accent-color);
}

@media (max-width: 768px) {
    .dashboard-stats {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-3);
    }
    .stat-card { padding: var(--space-3) var(--space-4); }
    .stat-card .stat-number { font-size: 24px; }
    .stat-card .stat-label { font-size: 12px; }
}

/* =========================================================
   🟢 กล่องตัวกรอง (Filter Box) — ทำให้ compact ลง
   ลด padding แนวตั้งเพื่อคืนพื้นที่ให้ตารางเวลา ซึ่งเป็นส่วนที่
   ผู้ใช้ดูบ่อยที่สุด ส่วน filter ใช้เป็นครั้งคราวเท่านั้น
   ========================================================= */
.filter-card {
    background: var(--surface);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: var(--space-4);
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(180px, 260px));
    gap: var(--space-4);
    align-items: end;
    justify-content: start;
}

@media (max-width: 1400px) {
    .filter-grid { grid-template-columns: repeat(5, 1fr); justify-content: stretch; }
}
@media (max-width: 1200px) {
    .filter-grid { grid-template-columns: repeat(3, 1fr); justify-content: stretch; }
}
@media (max-width: 768px) {
    .filter-grid { grid-template-columns: repeat(2, 1fr); justify-content: stretch; }
}
@media (max-width: 576px) {
    .filter-grid { grid-template-columns: 1fr; }
}

.filter-label {
    display: block;
    font-size: var(--fs-caption);
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 6px; /* ลดจาก 10px เพื่อความ compact */
}

/* 🟢 ช่องกรอกข้อมูล (Inputs) */
.form-control {
    width: 100%;
    height: 38px; /* ลดเล็กน้อยจาก 40px ให้สมดุลกับ filter ที่กระชับขึ้น */
    padding: 1px 10px;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-sm);
    box-sizing: border-box;
    font-family: inherit;
    font-size: var(--fs-body);
    color: var(--text-main);
    background: #f8fafc;
    transition: all 0.2s ease;
    outline: none;
}

.form-control:hover { border-color: #cbd5e1; }
.form-control:focus {
    background: var(--surface);
    border-color: var(--primary);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.12);
}

/* 🟢 กล่องตาราง (Table Card) */
.card {
    background: var(--surface);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    border: 1px solid rgba(226, 232, 240, 0.8);
    overflow-x: auto;
    padding: 0;
}

.fc table { min-width: 0 !important; width: 100% !important; }
.fc th { padding: 4px 0 !important; border-bottom: none !important; }
.fc td { padding: 0 !important; }

tr:last-child td { border-bottom: none; }
tr:hover { background-color: #f8fafc; }
.text-center { text-align: center; }

/* =========================================================
   🆕 ตารางรายการจองหลัก (#mainJobTable) — ใส่เส้นกรอบให้ครบ + สลับสี
   ตามกลุ่มวันที่ + กระชับขึ้น (ลด font/padding) เพื่อลดการเลื่อนแนวนอน
   🆕 คอลัมน์ "จัดการ" (ปุ่มจ่ายงาน/อัปเดตสถานะ) ปักไว้ชิดขวาเสมอ (sticky)
   เพราะเป็นปุ่มที่กดบ่อยที่สุด ไม่อยากให้ต้องเลื่อนไปหาทุกครั้ง แม้ว่า
   คอลัมน์อื่นในตารางจะยังกว้างจนต้องเลื่อนดูอยู่ก็ตาม
   ========================================================= */
#mainJobTable {
    width: max-content;
    min-width: 100%;
    border-collapse: collapse;
    font-size: 11.5px; /* 🆕 ลดจาก 13px ให้กระชับขึ้น */
}

#mainJobTable th,
#mainJobTable td {
    border: 1px solid var(--border-light);
    padding: 6px 8px; /* 🆕 ลดจาก 10px 12px */
    white-space: nowrap;
    text-align: left;
    vertical-align: middle;
}

/* คอลัมน์ที่อยู่/รายละเอียด ยังคงตัดบรรทัดได้ตามเดิม (กำหนดใน inline style
   ของแต่ละ td โดย renderTable() อยู่แล้ว ซึ่งมี specificity สูงกว่า nowrap ด้านบน) */

#mainJobTable thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    font-size: 11px;
    position: sticky;
    top: 0;
    z-index: 2;
}

/* 🆕 สลับพื้นหลังทีละ "กลุ่มวันที่" (ไม่ใช่สลับทุกแถวแบบ zebra ทั่วไป)
   ฟ้าอ่อน/ส้มอ่อน ให้พอสังเกตได้แต่ไม่แย่งความสนใจจาก badge สถานะ */
#mainJobTable tbody tr.date-group-main { background-color: #eff6ff; }
#mainJobTable tbody tr.date-group-alt  { background-color: #fff7ed; }

/* ต้องชนะ specificity ของสีกลุ่มด้านบนตอน hover เสมอ */
#mainJobTable tbody tr:hover { background-color: #e2e8f0 !important; }

/* 🆕 ปักคอลัมน์สุดท้าย ("จัดการ") ให้ชิดขวาเสมอ ไม่ว่าจะเลื่อนตารางไปถึงไหน
   ต้องกำหนดพื้นหลังตรงๆ ต่อสถานะแถว (ปกติ/date-group/hover) เพราะ sticky
   element ทึบแสงไม่รับ background จาก parent โดยอัตโนมัติ ถ้าไม่กำหนดจะเห็น
   เนื้อหาคอลัมน์อื่นทะลุออกมาตอนเลื่อน */
#mainJobTable th:last-child,
#mainJobTable td:last-child {
    position: sticky;
    right: 0;
    z-index: 1;
    box-shadow: -2px 0 4px rgba(0, 0, 0, 0.04); /* เงาบางๆ บอกว่ามีเนื้อหาซ่อนอยู่ด้านซ้าย */
}
#mainJobTable thead th:last-child { z-index: 3; background: #f8fafc; }
#mainJobTable tbody tr.date-group-main td:last-child { background-color: #eff6ff; }
#mainJobTable tbody tr.date-group-alt  td:last-child { background-color: #fff7ed; }
#mainJobTable tbody tr:hover td:last-child { background-color: #e2e8f0 !important; }

/* =========================================================
   🟢 ป้ายสถานะ (Badges) — ตอนนี้ผูกกับตัวแปรสีกลาง
   เปลี่ยนสีที่เดียว (ใน :root) มีผลกับ badge, KPI, calendar ทั้งหมด
   ========================================================= */
.status-badge {
    padding: 6px 12px;
    border-radius: var(--radius-pill);
    font-size: 12px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    white-space: nowrap;
    border: 1px solid transparent;
}

.status-pending  { background: var(--status-pending-bg);  color: var(--status-pending-text);  border-color: var(--status-pending-border); }
.status-review   { background: var(--status-review-bg);   color: var(--status-review-text);   border-color: var(--status-review-border); } /* 🆕 */
.status-approved { background: var(--status-approved-bg); color: var(--status-approved-text); border-color: var(--status-approved-border); }
.status-shipping { background: var(--status-shipping-bg); color: var(--status-shipping-text); border-color: var(--status-shipping-border); }
.status-external { background: var(--status-external-bg); color: var(--status-external-text); border-color: var(--status-external-border); } /* 🆕 */
.status-success  { background: var(--status-success-bg);  color: var(--status-success-text);  border-color: var(--status-success-border); }
.status-cancel   { background: var(--status-cancel-bg);   color: var(--status-cancel-text);   border-color: var(--status-cancel-border); }

/* 🟢 ปุ่มจัดการ (Edit Button) - สไตล์ Ghost Button */
.btn-blue {
    background: var(--primary-light);
    color: var(--primary);
    padding: 6px 14px;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 600;
    transition: all 0.2s ease;
}
.btn-blue:hover {
    background: var(--primary);
    color: white;
    box-shadow: 0 2px 8px rgba(37, 99, 235, 0.25);
}

/* 🟢 Modal Popup */
.modal-overlay {
    display: none;
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(15, 23, 42, 0.6);
    backdrop-filter: blur(4px);
    z-index: 1000;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.modal-box {
    background: white;
    padding: 32px;
    border-radius: 20px;
    width: 90%;
    max-width: 650px;
    max-height: 90vh;
    overflow-y: auto;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.modal-box h3 { margin-top: 0; margin-bottom: 24px; color: #0f172a; font-size: 20px; font-weight: 700; }
.form-group { margin-bottom: 16px; }
.form-group label, .grid-2 label { margin-bottom: 6px; display: block; font-size: 12.5px; font-weight: 600; color: var(--text-muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.mb-15 { margin-bottom: 20px; }
.divider { margin: 24px 0; border: 0; border-top: 1px solid var(--border-light); }
.label-blue { font-size: 13px; font-weight: 600; color: var(--primary); }
.highlight-blue { border-color: #bfdbfe; background: #eff6ff; font-weight: 500; color: #1e3a8a; }
.modal-actions { display: flex; gap: 12px; justify-content: flex-end; margin-top: 24px; }
.btn-cancel { padding: 10px 18px; background: #f1f5f9; color: #475569; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; }
.btn-cancel:hover { background: #e2e8f0; color: #0f172a; }
.btn-save { padding: 10px 18px; background: var(--primary); color: white; font-weight: 600; border: none; border-radius: 8px; cursor: pointer; transition: 0.2s; box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2); }
.btn-save:hover { background: var(--primary-hover); transform: translateY(-1px); }
.hidden { display: none !important; }
.ellipsis-text { max-width: 140px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }

/* 🆕 คำเตือนตอนคนขับ/รถที่เลือกในโมดัลจ่ายงานชนกับงานอื่นในวันเดียวกัน
   ไม่ใช่ error สีแดงจ๋า เพราะไม่ได้ block การบันทึก แค่เตือนให้เช็คก่อน */
.assign-conflict-warning {
    margin-top: 6px;
    padding: 8px 10px;
    background: var(--status-pending-bg);
    color: var(--status-pending-text);
    border: 1px solid var(--status-pending-border);
    border-radius: 8px;
    font-size: 12px;
    line-height: 1.5;
}

/* 🆕 แบนเนอร์เตือนในโมดัลแก้ไขเต็ม — โชว์ตอนที่อยู่/รายละเอียดงานถูกล็อกไว้
   (เพราะสถานะผ่านการตรวจสอบไปแล้ว) กันแก้ข้อมูลเผลอๆ หลังหัวหน้าขนส่งดูไปแล้ว */
.edit-lock-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    padding: 10px 14px;
    margin-bottom: 16px;
    background: var(--status-review-bg);
    color: var(--status-review-text);
    border: 1px solid var(--status-review-border);
    border-radius: 10px;
    font-size: 12.5px;
    line-height: 1.5;
}
.edit-lock-banner button {
    flex-shrink: 0;
    background: var(--surface);
    color: var(--status-review-text);
    border: 1px solid var(--status-review-border);
    border-radius: 6px;
    padding: 6px 10px;
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    white-space: nowrap;
}
.edit-lock-banner button:hover { background: var(--status-review-bg); }

/* ฟิลด์ที่ถูก disable ให้ดูจางลงชัดเจน แยกจากฟิลด์ที่แก้ได้จริง */
.form-control:disabled {
    background: #f1f5f9;
    color: #94a3b8;
    cursor: not-allowed;
}

/* 🆕 กล่องแจ้งเตือนในโมดัลจ่ายงาน เฉพาะตอนเป็นงานขนส่งภายนอก
   ย้ำให้แอดมินรู้ตัวว่าระบบนี้ "มองไม่เห็น" สถานะจริงของรถขนส่งภายนอก
   ต่างจากงานภายในที่คนขับอัปเดตเองผ่านแอปได้ */
.external-assign-notice {
    display: flex;
    gap: 8px;
    align-items: flex-start;
    padding: 10px 12px;
    margin-bottom: 16px;
    background: var(--status-external-bg);
    color: var(--status-external-text);
    border: 1px solid var(--status-external-border);
    border-radius: 10px;
    font-size: 12px;
    line-height: 1.6;
}

/* 🟢 ปุ่มดูทั้งหมด (View All Button) */
.btn-view-all {
    background: #e0e7ff;
    color: #4338ca;
    border: none;
    padding: 4px 10px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s ease;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-family: inherit;
    text-transform: none;
    letter-spacing: normal;
}
.btn-view-all:hover { background: #c7d2fe; color: #3730a3; transform: translateY(-1px); box-shadow: 0 2px 4px rgba(67, 56, 202, 0.15); }
.btn-view-all:active { transform: translateY(0); }

/* 🟢 ปุ่มสไตล์ Minimal Glass */
.btn-glass {
    margin-top: 8px;
    font-size: 11px;
    padding: 6px 12px;
    border-radius: 8px;
    background: rgba(226, 232, 240, 0.4);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    border: 1px solid rgba(255, 255, 255, 0.6);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    color: #334155;
    cursor: pointer;
    transition: all 0.3s ease;
}
.btn-glass:hover { background: rgba(226, 232, 240, 0.7); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); transform: translateY(-2px); }

/* =========================================================
   🆕 Resource Timeline (มุมมอง "แยกตามรถ" — เฉพาะ Admin)
   ปรับให้เข้ากับ typography/สีของทั้งหน้า แทนสไตล์ default ของปลั๊กอิน
   ========================================================= */
.fc .fc-resource-timeline-divider { background: var(--border-light); }
.fc-datagrid-cell-main {
    font-size: 12.5px !important;
    font-weight: 600 !important;
    color: var(--text-main) !important;
}
.fc-resource-timeline .fc-event {
    font-size: 11px !important;
    border-radius: 4px !important;
    padding: 1px 6px !important;
}
/* แถว "รอจัดรถ" เน้นพื้นหลังอ่อนๆ ให้สะดุดตากว่าแถวรถปกติเล็กน้อย
   เพราะเป็นแถวที่ต้องรีบจัดการก่อนแถวอื่น */
.fc-datagrid-cell[data-resource-id="UNASSIGNED"] {
    background: var(--status-pending-bg) !important;
}

/* =========================================================
   🆕 หน้าคนขับ (Driver View) — mobile-first, ปุ่มใหญ่กดง่ายด้วยนิ้วโป้ง
   คนละ pattern กับตาราง/ปฏิทินฝั่งแอดมินโดยสิ้นเชิง เพราะคนขับใช้งาน
   ผ่านมือถือเป็นหลัก ต้องการแค่ "ลำดับงานวันนี้" ไม่ใช่ภาพรวมทั้งบริษัท
   ========================================================= */
.driver-view-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: var(--space-3);
    margin-bottom: var(--space-4);
    flex-wrap: wrap;
}

.driver-job-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-4);
}

.driver-job-card {
    position: relative;
    background: var(--surface);
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    padding: var(--space-4);
    overflow: hidden;
}

/* แถบสีซ้ายบอกสถานะ เหมือน logic เดียวกับ stat-card แต่วางแนวตั้งแทน
   เพราะการ์ดนี้กว้างเต็มจอมือถือ แถวบนไม่มีที่พอจะใส่แถบแนวนอนสวยๆ */
.driver-job-card::before {
    content: "";
    position: absolute;
    top: 0; left: 0; bottom: 0;
    width: 5px;
    background: var(--accent-color, var(--status-pending-solid));
}

.driver-job-card.pending  { --accent-color: var(--status-pending-solid); }
.driver-job-card.review   { --accent-color: var(--status-review-solid); }
.driver-job-card.approved { --accent-color: var(--status-approved-solid); }
.driver-job-card.shipping { --accent-color: var(--status-shipping-solid); }
.driver-job-card.success  { --accent-color: var(--status-success-solid); }
.driver-job-card.external { --accent-color: var(--status-external-solid); }
.driver-job-card.cancel   { --accent-color: var(--status-cancel-solid); }

.driver-job-card .djc-time {
    font-size: 20px;
    font-weight: 700;
    color: #0f172a;
}

.driver-job-card .djc-destination {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-main);
    margin-top: 2px;
}

.driver-job-card .djc-meta {
    font-size: 13px;
    color: var(--text-muted);
    margin-top: 6px;
    line-height: 1.6;
}

.driver-job-card .djc-actions {
    display: flex;
    gap: var(--space-2);
    margin-top: var(--space-4);
}

/* ปุ่มในหน้าคนขับสูงกว่าปกติ (48px) เพราะกดผ่านมือถือด้วยนิ้วโป้งขณะขับ/ยืน
   หน้ารถ ต่างจากปุ่มฝั่งแอดมินที่กดผ่านเมาส์บนจอคอมได้แม่นกว่า */
.driver-job-card .djc-actions .btn {
    height: 48px;
    flex: 1;
    justify-content: center;
    font-size: 14px;
    border-radius: var(--radius-md);
}

.driver-empty-state {
    text-align: center;
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
}
.driver-empty-state .icon { font-size: 40px; margin-bottom: var(--space-2); color: #cbd5e1; }

@media (max-width: 480px) {
    .driver-view-header { flex-direction: column; align-items: stretch; }
    .driver-view-header input[type="date"] { max-width: none; }
}

/* ==========================================
   📱 การปรับแสดงผลสำหรับมือถือ (Mobile Responsive)
   ========================================== */
@media (max-width: 768px) {
    /* 🆕 มุมมอง resource timeline (Gantt-style หลายแถว) ใช้ไม่ได้จริงบนจอมือถือแคบๆ
       ซ่อนปุ่มนี้บนมือถือ เหลือแค่ desktop/tablet ที่มีพื้นที่แนวนอนพอ */
    .fc-resourceTimelineDay-button { display: none !important; }

    .header > div {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
        width: 100%;
        margin-top: 15px;
    }
    .header button, .header a {
        box-sizing: border-box;
        margin: 0 !important;
        width: 100%;
        height: 42px !important;
        padding: 0 10px !important;
        font-size: 13px !important;
        justify-content: center;
        display: flex;
        align-items: center;
        text-decoration: none;
        border-radius: 6px;
    }

    .date-filter-wrapper {
        flex-direction: column;
        align-items: stretch !important;
        gap: 10px !important;
    }
    .date-filter-wrapper > button { width: 100%; margin-left: 0 !important; }

    .fc .fc-toolbar { display: flex; flex-direction: column; gap: 12px; }
    .fc .fc-toolbar-title { font-size: 18px !important; text-align: center; }
    .fc .fc-button { padding: 6px 10px !important; font-size: 12px !important; }
}

/* ==========================================
   🎨 Layout ปฏิทิน 2 ฝั่ง (Balanced Calendar Layout)
   🆕 ทั้งฝั่งซ้ายและขวาตอนนี้ใช้ radius/shadow/border ชุดเดียวกับ .card
   เพื่อให้เป็น visual system เดียวกันทั้งหน้า ไม่ใช่กรอบคนละสไตล์อีกต่อไป
   ========================================== */
.calendar-split-container {
    display: grid;
    grid-template-columns: 320px minmax(0, 1fr);
    gap: var(--space-5);
    align-items: start;
    width: 100%;
    box-sizing: border-box;
}

.calendar-left {
    width: 100%;
    background: var(--surface);
    padding: var(--space-4);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: var(--shadow-card);
    box-sizing: border-box;
}

.calendar-right {
    width: 100%;
    min-width: 0;
    overflow: hidden;
    box-sizing: border-box;
    background: var(--surface);
    border-radius: var(--radius-lg);
    border: 1px solid rgba(226, 232, 240, 0.8);
    box-shadow: var(--shadow-card);
}

#calendarMonth .fc-col-header-cell { padding: 4px 0 !important; }
#calendarMonth .fc-col-header-cell-cushion {
    font-size: 11px !important;
    font-weight: 600;
    color: #475569;
    padding: 2px 0 !important;
    white-space: nowrap;
    display: block;
    text-align: center;
}

#calendarMonth .fc-daygrid-day-frame {
    aspect-ratio: 1 / 1 !important;
    min-height: auto !important;
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 2px !important;
    box-sizing: border-box !important;
}

#calendarMonth .fc-daygrid-day-top { justify-content: center !important; width: 100% !important; padding-top: 2px !important; }
#calendarMonth .fc-daygrid-day-number { font-size: 11px !important; font-weight: 600 !important; padding: 0 !important; }
#calendarMonth .fc-daygrid-day-events { width: 100% !important; margin: 0 !important; min-height: 0 !important; }

/* 🆕 event chip ในมินิปฏิทิน — ไม่บังคับสีทับ (ลบ !important background ออกแล้ว)
   เพราะ app.js กำหนดสีต่อ event เองอยู่แล้วตามสถานะงาน (ดู updateCalendarEvents)
   CSS ตรงนี้คุมแค่ ขนาด/ระยะห่าง/รูปทรง ให้เข้ากับมินิปฏิทิน */
#calendarMonth .fc-event {
    font-size: 9px !important;
    padding: 1px 2px !important;
    margin: 1px auto !important;
    width: 90% !important;
    text-align: center !important;
    border-radius: 3px !important;
}

#calendarMonth .fc-toolbar-title { font-size: 1.1rem !important; }
#calendarMonth .fc-button { padding: 4px 8px !important; font-size: 0.85em !important; }

@media (max-width: 992px) {
    .calendar-split-container { grid-template-columns: 1fr; gap: var(--space-4); }
}

/* =========================================================
   🆕 ตารางเวลารายสัปดาห์ (Weekly Time Grid)
   ปัญหาเดิม: ทุกชั่วโมงสูงเท่ากันแม้ไม่มีข้อมูล ทำให้ scroll เยอะ
   วิธีแก้: ลดความสูง default ของ time-slot ที่ว่าง และ auto-scroll
   ไปช่วงเวลาทำงานจริง (06:00–20:00) ด้วย scrollTime ใน JS config
   ========================================================= */
.fc-timegrid-slot {
    height: 32px !important; /* ลดจากค่า default ~40-50px */
}

.fc-timegrid-slot-label {
    font-size: 11px !important;
    color: var(--text-muted);
}

/* แถวที่ไม่มี event เลย ทำให้จางลงเล็กน้อย ลดความรกของพื้นที่ว่าง */
.fc-timegrid-slot-lane:not(:has(.fc-event)) {
    background: transparent;
}

/* 🆕 Empty state — แสดงเมื่อสัปดาห์นั้นไม่มีงานเลย
   แทนที่จะปล่อยตารางว่างเปล่าทั้งจอ ให้ผู้ใช้รู้ทันทีว่า "ไม่มีงาน"
   ไม่ใช่ "ระบบพัง/โหลดไม่ขึ้น" */
.empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    padding: var(--space-6) var(--space-4);
    color: var(--text-muted);
    text-align: center;
}
.empty-state .empty-state-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: #f1f5f9;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    color: #94a3b8;
}
.empty-state .empty-state-title {
    font-size: var(--fs-subheading);
    font-weight: 600;
    color: var(--text-main);
}
.empty-state .empty-state-desc {
    font-size: var(--fs-body);
    color: var(--text-muted);
    max-width: 280px;
}