: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: 8px 12px;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-card);
    margin-bottom: 10px;
    border: 1px solid rgba(226, 232, 240, 0.8);
}

.filter-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(170px, 1fr));
    gap: 10px;
    align-items: end;
    justify-content: start;
}

@media (max-width: 1400px) {
    .filter-grid { grid-template-columns: repeat(4, 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: 3px;
}

/* 🟢 ช่องกรอกข้อมูล (Inputs) */
.form-control {
    width: 100%;
    height: 38px;
    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;
}

.filter-card .form-control {
    height: 32px;
    font-size: 12px;
}

.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);
    /* 🆕 จำกัดความสูงกล่องตาราง เพื่อให้ scrollbar แนวนอนติดขอบล่างจอเสมอ
       ไม่ต้องเลื่อนหน้าลงไปสุดตารางถึงจะเจอแถบเลื่อนขวา (คู่กับ thead sticky
       ด้านล่างที่ค้างหัวตารางไว้ตอนเลื่อนแนวตั้งในกล่อง)
       ค่านี้เป็นแค่ fallback — fitTableHeight() ใน app.js จะวัดตำแหน่งจริง
       แล้ว set max-height ให้พอดีขอบล่างจอเป๊ะๆ อีกที (กันเผื่อ header สูงไม่เท่ากันแต่ละจอ) */
    overflow: auto;
    max-height: calc(100vh - 430px);
    min-height: 280px;
    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 #cbd5e1; /* 🆕 เส้นกรอบเข้มขึ้น เห็นการแบ่งช่องชัด */
    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 ทั่วไป)
   🆕 เพิ่มความเข้มของสี ให้แยกกลุ่มวันได้ชัดขึ้น (ของเดิมจางมากจนแทบไม่เห็น) */
#mainJobTable tbody tr.date-group-main { background-color: #dbeafe; }
#mainJobTable tbody tr.date-group-alt  { background-color: #ffe8cc; }

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

/* 🆕 ปักคอลัมน์สุดท้าย ("จัดการ") ให้ชิดขวาเสมอ ไม่ว่าจะเลื่อนตารางไปถึงไหน
   ต้องกำหนดพื้นหลังตรงๆ ต่อสถานะแถว (ปกติ/date-group/hover) เพราะ sticky
   element ทึบแสงไม่รับ background จาก parent โดยอัตโนมัติ ถ้าไม่กำหนดจะเห็น
   เนื้อหาคอลัมน์อื่นทะลุออกมาตอนเลื่อน */
/* ล็อกความกว้างคอลัมน์ "จัดการ" ให้แน่นอน เพื่อคำนวณ offset ของคอลัมน์ "สถานะ" ที่มาตรึงต่อ */
#mainJobTable th:last-child,
#mainJobTable td:last-child {
    width: 150px;
    min-width: 150px;
    max-width: 150px;
    white-space: normal; /* ปุ่มในคอลัมน์นี้ซ้อนเป็นแนวตั้งอยู่แล้ว ให้ตัดบรรทัดได้ */
}

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

#mainJobTable thead th:last-child,
#mainJobTable thead th:nth-last-child(2) { z-index: 3; background: #f8fafc; }

#mainJobTable tbody tr.date-group-main td:last-child,
#mainJobTable tbody tr.date-group-main td:nth-last-child(2) { background-color: #dbeafe; }
#mainJobTable tbody tr.date-group-alt  td:last-child,
#mainJobTable tbody tr.date-group-alt  td:nth-last-child(2) { background-color: #ffe8cc; }
#mainJobTable tbody tr:hover td:last-child,
#mainJobTable tbody tr:hover td:nth-last-child(2) { background-color: #cbd5e1 !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; }
.assign-driver-picker { position:relative; }
.assign-driver-picker-button { display:flex; align-items:center; justify-content:space-between; gap:8px; text-align:left; cursor:pointer; height:auto; min-height:42px; }
.assign-driver-picker-summary { display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.assign-driver-placeholder { color:#64748b; }
.assign-driver-chip { display:inline-flex; align-items:center; gap:5px; max-width:100%; padding:4px 7px; border-radius:6px; color:#1e5f87; background:#e8f3fb; font-size:12px; font-weight:600; }
.assign-driver-chip small { color:#64748b; font-size:9px; font-weight:500; }
.assign-driver-picker-menu { position:absolute; z-index:1200; top:calc(100% + 5px); left:0; right:0; max-height:250px; overflow:auto; padding:7px; background:#fff; border:1px solid #bfccda; border-radius:9px; box-shadow:0 12px 30px rgba(15,23,42,.18); }
.assign-driver-picker-hint { padding:5px 7px 8px; color:#64748b; font-size:11px; }
.assign-driver-choice { display:flex; align-items:center; gap:9px; min-height:38px; padding:7px 8px; border-radius:6px; cursor:pointer; color:#1e293b; }
.assign-driver-choice:hover { background:#eff6ff; }
.assign-driver-choice input { width:17px; height:17px; accent-color:#2563eb; }
.assign-driver-choice span { flex:1; font-size:13px; font-weight:500; }
.assign-driver-choice small { color:#2563eb; font-size:10px; }
.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); }

/* 🆕 ถอด CSS สำหรับ Resource Timeline ออกทั้งหมดแล้ว (เคยอยู่ตรงนี้) เพราะเลิกใช้
   FullCalendar Scheduler (Premium) หลังเจอปัญหา license ซ้ำๆ ไม่คุ้มที่จะยื้อต่อ
   สำหรับฟีเจอร์เสริมที่ไม่ใช่แกนหลักของระบบ */

/* =========================================================
   🆕 หน้าคนขับ (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) {
    .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;
}
/* Permission matrix: scoped to the permissions dialog. */
#permissionsPanelModal { box-sizing: border-box; padding: 12px 0; }
#permissionsPanelModal .permissions-panel {
    box-sizing: border-box;
    width: 96%; max-width: 1440px; max-height: 92vh; padding: 28px;
    display: flex; flex-direction: column; overflow: hidden; border-radius: 20px;
    background: #fff; box-shadow: 0 24px 80px #0f172a33;
}
#permissionsTitle { font-size: 21px; letter-spacing: -.4px; }
#permissionsTitle > i { color: #2563eb; margin-right: 8px; }
.permissions-toolbar { display: flex; align-items: center; gap: 16px; padding: 4px 0 18px; flex-wrap: wrap; }
.permissions-search { display: flex; align-items: center; gap: 10px; background: #f8fafc; border: 1px solid #dbe3ee; border-radius: 10px; padding: 0 14px; width: 320px; max-width: 100%; color: #64748b; }
#permissionsSearch { border: 0; box-shadow: none; outline: none; background: transparent; margin: 0; padding: 11px 0; width: 100%; min-width: 0; font: inherit; font-size: 13px; color: #0f172a; }
.permissions-search:focus-within { border-color: #2563eb; box-shadow: 0 0 0 3px #2563eb18; }
.permissions-count { font-size: 12px; font-weight: 600; color: #475569; }
.permissions-legend { margin-left: auto; font-size: 12px; color: #475569; display: flex; align-items: center; gap: 7px; }
.permissions-legend > span { width: 9px; height: 9px; border-radius: 50%; background: #2563eb; }
.permissions-table-wrap { overflow: auto; min-height: 100px; border: 1px solid #dbe3ee; border-radius: 12px; scrollbar-color: #a9b9cf #f1f5f9; }
#permissionsPanelModal table { min-width: 1120px !important; table-layout: fixed; }
#permissionsPanelModal th { position: sticky; top: 0; z-index: 2; padding: 16px 8px !important; background: #eef3f9; color: #334155 !important; font-size: 12px; line-height: 1.6; white-space: normal; }
#permissionsPanelModal th:first-child { width: 225px; left: 0; z-index: 3; text-align: left; padding-left: 18px !important; }
#permissionsPanelModal th small { font-size: 10px; color: #64748b; }
#permissionsPanelModal th:last-child { background: #fff1f2; color: #9f1239 !important; }
#permissionsPanelModal tbody td { padding: 0 8px; height: 58px; text-align: center; border-bottom: 1px solid #e9eef5; background: #fff; }
#permissionsPanelModal tbody tr:nth-child(even) td { background: #f8fafc; }
#permissionsPanelModal tbody tr:hover td { background: #eff6ff; }
#permissionsPanelModal tbody tr[hidden] { display: none; }
#permissionsPanelModal tbody td:first-child:not([colspan]) { position: sticky; left: 0; z-index: 1; text-align: left; padding-left: 18px; box-shadow: 1px 0 0 #dbe3ee; }
.permission-person { display: flex; align-items: center; gap: 10px; color: #172033; font-size: 12px; }
.permission-person strong { overflow-wrap: anywhere; }
.permission-avatar { width: 30px; height: 30px; flex-shrink: 0; display: grid; place-items: center; background: #e8eefb; color: #3159a4; border-radius: 9px; font-weight: 700; }
.permission-choice { display: inline-grid; place-items: center; width: 44px; height: 44px; position: relative; cursor: pointer; margin: 0; }
.permission-choice input { position: absolute; width: 24px; height: 24px; opacity: 0; cursor: pointer; margin: 0; }
.permission-choice > span { display: grid; place-items: center; width: 23px; height: 23px; border: 1.5px solid #bac7d7; border-radius: 7px; background: #fff; pointer-events: none; }
.permission-choice input:checked + span { background: #2563eb; border-color: #2563eb; box-shadow: 0 2px 4px #2563eb22; }
.permission-choice input:checked + span::after { content: '✓'; color: #fff; font-size: 16px; font-weight: 700; }
.permission-choice input:focus-visible + span { outline: 3px solid #93c5fd; outline-offset: 3px; }
.permission-choice input:disabled + span { opacity: .45; }
.permissions-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 8px; padding-top: 16px; font-size: 12px; color: #64748b; }
#permissionsSaveStatus { color: #1e40af; font-weight: 600; }
@media (max-width: 700px) {
    #permissionsPanelModal .permissions-panel { width: 98%; padding: 16px; max-height: 94vh; border-radius: 14px; }
    #permissionsTitle { font-size: 16px; }
    #permissionsPanelModal .btn-cancel { padding: 8px; font-size: 11px; white-space: nowrap; }
    #permissionsPanelModal th:first-child { width: 165px; }
    .permissions-toolbar { gap: 10px; }
    .permissions-search { width: 100%; }
    .permission-avatar { display: none; }
}
/* Dashboard navigation, unified filters and compact row actions. */
.dashboard-page .header { gap: 16px; flex-wrap: wrap; }
.dashboard-page .header-actions { display: flex; margin-left: auto; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
.dashboard-page .booking-primary { background: #172554; border-color: #172554; color: #fff; height: 44px; padding: 0 20px; box-shadow: 0 4px 10px #17255426; font-weight: 600; }
.dashboard-page .booking-primary:hover { background: #1e3a8a; border-color: #1e3a8a; }
.dashboard-system-menu { position: relative; }
.dashboard-system-menu summary { list-style: none; cursor: pointer; }
.dashboard-system-menu summary::-webkit-details-marker { display: none; }
.dashboard-system-menu[open] > summary { background: #eaf0fb; border-color: #b6c8e6; }
.dashboard-system-items { position: absolute; top: calc(100% + 8px); right: 0; width: 250px; max-height: 70vh; overflow-y: auto; box-sizing: border-box; padding: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 14px 40px #0f172a24; z-index: 100; }
.dashboard-page .dashboard-system-items > .btn { width: 100%; justify-content: flex-start; border: 0; background: transparent; color: #27364d; box-shadow: none; font-size: 13px; }
.dashboard-page .dashboard-system-items > .btn:hover { background: #eff6ff; color: #1d4ed8; }
.dashboard-view-tools { display: flex; justify-content: flex-end; gap: 8px; margin-bottom: 12px; }
.dashboard-page .dashboard-view-tools > button { margin-left: 0 !important; padding: 0 14px !important; height: 34px; font-size: 12px !important; }
.dashboard-page .unified-filter { padding: 12px; border-radius: 12px; }
.dashboard-page .unified-filter .filter-grid { grid-template-columns: minmax(150px, 1.25fr) minmax(300px, 1.7fr) minmax(140px, 1fr) minmax(120px, .85fr) minmax(140px, 1fr); gap: 10px; }
.dashboard-page .unified-filter .filter-grid > div { min-width: 0; }
.dashboard-page .unified-filter .form-control { height: 36px; }
.filter-date-inputs { display: flex; align-items: center; gap: 6px; height: 36px; }
.filter-date-inputs input { box-sizing: border-box; width: 0; min-width: 0; flex: 1; height: 36px; padding: 0 6px; font: inherit; font-size: 12px; color: #1e293b; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 6px; }
.filter-date-inputs > span { font-size: 11px; color: #64748b; }
.filter-date-clear { width: 30px; height: 36px; flex-shrink: 0; border: 1px solid #e2e8f0; border-radius: 6px; background: #fff; color: #475569; font-size: 19px; cursor: pointer; }
.dashboard-page #mainJobTable th { font-size: 12px; }
.dashboard-page #mainJobTable td { padding-top: 10px; padding-bottom: 10px; }
.dashboard-page #mainJobTable th:last-child { position: sticky; right: 0; z-index: 4; background: #eef3fa; }
.dashboard-page #mainJobTable .job-actions-cell { position: sticky; right: 0; background: #f8fafc; box-shadow: -1px 0 0 #e2e8f0; z-index: 1; min-width: 90px; text-align: center; }
.job-actions-trigger { display: inline-flex; align-items: center; gap: 12px; padding: 7px 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #fff; color: #334155; font: inherit; font-size: 12px; font-weight: 500; cursor: pointer; white-space: nowrap; }
.job-actions-trigger:hover, .job-actions-trigger[aria-expanded=true] { background: #eff6ff; color: #1d4ed8; border-color: #93b4ee; }
.job-actions-source[hidden] { display: none !important; }
.job-action-popup { position: fixed; z-index: 950; width: 225px; max-width: calc(100vw - 16px); max-height: calc(100vh - 16px); overflow: auto; box-sizing: border-box; padding: 8px; background: #fff; border: 1px solid #e2e8f0; border-radius: 12px; box-shadow: 0 12px 36px #0f172a30; }
.job-action-popup > div { gap: 3px !important; }
.job-action-popup button { display: flex !important; align-items: center; justify-content: flex-start; width: 100%; height: auto !important; min-height: 38px; padding: 9px 10px !important; margin: 0; border: 0 !important; border-radius: 6px; box-shadow: none !important; background: #fff !important; color: #25344b !important; font-family: inherit; font-size: 12px !important; cursor: pointer; text-align: left; }
.job-action-popup button:hover, .job-action-popup button:focus-visible { background: #eff6ff !important; color: #1d4ed8 !important; }
.job-action-popup button[onclick^="cancelJob"] { color: #b91c1c !important; }
.job-action-popup span { padding: 6px; }
@media (max-width: 1100px) {
    .dashboard-page .unified-filter .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
    .dashboard-page .unified-filter .filter-date-range { grid-column: span 2; }
}
@media (max-width: 600px) {
    .dashboard-page .header-actions { width: 100%; justify-content: flex-start; }
    .dashboard-page .header-actions > .btn { width: auto; }
    .dashboard-page .header-actions > .booking-primary { margin-left: auto !important; }
    .dashboard-system-items { left: 0; right: auto; }
    .dashboard-page .unified-filter .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-page .unified-filter .filter-grid > div:first-child { grid-column: span 2; }
}
/* Compact overview keeps working space available for the job table. */
.dashboard-page .dashboard-stats { margin-bottom: 14px; gap: 12px; }
.dashboard-page .stat-card { box-sizing: border-box; min-height: 86px; padding: 14px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.dashboard-page .stat-card .stat-number { margin: 0; font-size: 28px; flex-shrink: 0; }
.dashboard-page .stat-card .stat-label { margin: 0; flex-wrap: wrap; font-size: 12px; gap: 6px; }
.stat-scope-date { display: block; flex-basis: 100%; font-size: 10px; font-weight: 400; color: #64748b; }
.dashboard-page .unified-filter .filter-grid { grid-template-columns: minmax(140px, 1.1fr) minmax(290px, 1.65fr) minmax(125px, 1fr) minmax(115px, .8fr) minmax(130px, 1fr) auto; }
.dashboard-page .unified-filter .dashboard-view-tools { margin: 0; align-items: center; gap: 6px; }
.dashboard-page .unified-filter .dashboard-view-tools > button { height: 36px; padding: 0 10px !important; white-space: nowrap; }
.dashboard-view-switch { display: flex; background: #edf2f8; padding: 3px; border-radius: 8px; gap: 2px; }
.dashboard-view-switch button { border: 0; background: transparent; padding: 6px 9px; border-radius: 6px; color: #64748b; font: inherit; font-size: 12px; cursor: pointer; }
.dashboard-view-switch .is-active { color: #1e3a8a; background: #fff; box-shadow: 0 1px 4px #0f172a18; font-weight: 600; }
.filter-date-labels { display: grid; grid-template-columns: 1fr 1fr; padding-right: 36px; gap: 20px; }
#dateFilterHint { font-weight: 400; font-size: 10px; }
@media (max-width: 1400px) {
    .dashboard-page .unified-filter .filter-grid { grid-template-columns: minmax(140px, 1fr) minmax(290px, 1.6fr) repeat(3, minmax(110px, 1fr)); }
    .dashboard-page .unified-filter .dashboard-view-tools { grid-column: 1 / -1; justify-content: flex-end; }
}
@media (max-width: 1100px) {
    .dashboard-page .unified-filter .filter-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
    .dashboard-page .unified-filter .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .dashboard-page .stat-card { min-height: 78px; padding: 10px; }
    .dashboard-page .stat-card .stat-number { font-size: 23px; }
}
/* Delivery details are readable directly in the day/week calendar. */
#calendarDay .calendar-job-content { padding: 6px 8px; color: #172033; background: #ffffffed; border-radius: 4px; white-space: normal; overflow-wrap: anywhere; line-height: 1.5; font-size: 12px; }
#calendarDay .calendar-job-receiver { font-weight: 700; }
#calendarDay .calendar-job-address { margin-top: 2px; }
#calendarDay .calendar-job-meta { margin-top: 4px; color: #475569; font-size: 11px; }
#calendarDay .fc-daygrid-event { white-space: normal; align-items: stretch; }
#calendarDay .fc-event-main { overflow: auto; }
#calendarDay .fc-daygrid-event .fc-event-main { width: 100%; }
#calendarDay .fc-timegrid-event .calendar-job-content { box-sizing: border-box; min-height: 100%; }
.dashboard-view-tools #viewIcon[hidden] { display: none !important; }

.mobile-job-expand { display: none; }
@media screen and (max-width: 768px) {
    body.dashboard-page { padding: 12px; }
    .dashboard-page .header { margin-bottom: 14px; gap: 8px; }
    .dashboard-page .header h2 { font-size: 18px; margin: 0; }
    .dashboard-page .header-actions { margin-top: 0; gap: 6px; }
    .dashboard-page .dashboard-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; margin-bottom: 10px; }
    .dashboard-page .stat-card { min-height: 68px; padding: 8px; flex-direction: column; align-items: flex-start; gap: 4px; }
    .dashboard-page .stat-card .stat-label { font-size: 10px; line-height: 1.4; gap: 3px; }
    .dashboard-page .stat-card .stat-number { font-size: 21px; }
    .dashboard-page .stat-icon { display: none; }
    .dashboard-page .stat-scope-date { font-size: 9px; }
    .dashboard-page .unified-filter { padding: 10px; margin-bottom: 12px; }
    .dashboard-page .unified-filter .filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
    .dashboard-page .unified-filter .filter-grid > div:first-child,
    .dashboard-page .unified-filter .filter-date-range { grid-column: 1 / -1; }
    .dashboard-page .filter-label { font-size: 11px; margin-bottom: 4px; }
    .dashboard-page .unified-filter .form-control { font-size: 14px; padding: 0 8px; height: 40px; }
    .dashboard-page .filter-date-inputs { height: 40px; }
    .dashboard-page .filter-date-inputs input { font-size: 13px; height: 40px; }
    .dashboard-page .filter-date-clear { height: 40px; }
    .dashboard-page .unified-filter .dashboard-view-tools { grid-column: 1 / -1; justify-content: space-between; }
    .dashboard-page .unified-filter .dashboard-view-tools > button,
    .dashboard-page .dashboard-view-switch button { min-height: 40px; }

    .dashboard-page .job-table-card { max-height: none !important; min-height: 0; overflow: visible; border: 0; background: transparent; box-shadow: none; }
    .dashboard-page #mainJobTable { display: block; width: 100%; min-width: 0; border: 0; }
    .dashboard-page #mainJobTable thead { display: none; }
    .dashboard-page #mainJobTable tbody { display: grid; gap: 12px; }
    .dashboard-page #mainJobTable tbody tr { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px; padding: 12px; border: 1px solid #cbd5e1; border-radius: 12px; background: #fff !important; }
    .dashboard-page #mainJobTable tbody tr.date-group-alt { border-top: 4px solid #edb666; }
    .dashboard-page #mainJobTable tbody tr.date-group-main { border-top: 4px solid #7faee6; }
    .dashboard-page #mainJobTable tbody td { display: none; min-width: 0 !important; max-width: none; width: auto; padding: 0 !important; border: 0; position: static !important; background: transparent !important; box-shadow: none !important; white-space: normal; overflow-wrap: anywhere; font-size: 14px; color: #172033; line-height: 1.5; }
    .dashboard-page #mainJobTable tbody td::before { content: attr(data-label); display: block; font-size: 11px; color: #64748b; margin-bottom: 2px; font-weight: 500; }
    .dashboard-page #mainJobTable tbody td:nth-child(2) { display: block; order: 0; }
    .dashboard-page #mainJobTable tbody td:nth-child(17) { display: block; order: 1; text-align: right; }
    .dashboard-page #mainJobTable tbody td:nth-child(17)::before { display: none; }
    .dashboard-page #mainJobTable tbody td:nth-child(6) { display: block; order: 2; grid-column: 1 / -1; font-size: 16px; font-weight: 600; }
    .dashboard-page #mainJobTable tbody td:nth-child(3) { display: block; order: 3; grid-column: 1 / -1; }
    .dashboard-page #mainJobTable tbody td:nth-child(8) { display: block; order: 4; grid-column: 1 / -1; }
    .dashboard-page #mainJobTable tbody td:nth-child(9) { display: block; order: 5; grid-column: 1 / -1; white-space: normal !important; }
    .dashboard-page #mainJobTable tbody tr.mobile-job-expanded td { display: block; }
    .dashboard-page #mainJobTable tbody tr.mobile-job-expanded td:nth-child(1),
    .dashboard-page #mainJobTable tbody tr.mobile-job-expanded td:nth-child(n+4):not(:nth-child(6)):not(:nth-child(8)):not(:nth-child(9)):not(:nth-child(17)):not(:nth-child(18)) { order: 6; }
    .dashboard-page #mainJobTable tbody td.job-actions-cell { display: flex; grid-column: 1 / -1; order: 100; align-items: center; justify-content: space-between; gap: 8px; border-top: 1px solid #e2e8f0; padding-top: 10px !important; text-align: left; }
    .dashboard-page #mainJobTable tbody td.job-actions-cell::before { display: none; }
    .dashboard-page .mobile-job-expand { display: inline-flex; align-items: center; justify-content: center; min-height: 42px; padding: 0 12px; border: 1px solid #cbd5e1; border-radius: 8px; background: #f8fafc; color: #1e3a8a; font: inherit; font-size: 13px; cursor: pointer; }
    .dashboard-page .job-actions-trigger { min-height: 42px; padding: 0 16px; font-size: 14px; }
    .dashboard-page #mainJobTable .status-badge { font-size: 11px; padding: 5px 7px; white-space: normal; }
    .dashboard-page #mainJobTable .js-pod-image { width: 40px !important; height: 40px !important; }
    .dashboard-page #mainJobTable tbody tr > td:only-child { display: block; grid-column: 1 / -1; text-align: center; }
}
.agenda-heading { display:flex; justify-content:space-between; gap:16px; align-items:center; padding:22px; }
.agenda-heading h2 { margin:4px 0; font-size:24px; }
.agenda-heading p,.agenda-heading small { color:#64748b; margin:0; }
.agenda-heading nav { display:flex; gap:6px; }
.agenda-heading button,.agenda-action button { background:white; border:1px solid #d8e2ee; border-radius:8px; color:#1e3a5f; padding:9px 12px; cursor:pointer; font:inherit; }
.agenda-heading button { min-height:42px; min-width:42px; }
.agenda-stats { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:10px; padding:0 22px 20px; }
.agenda-stats>div { display:flex; align-items:center; justify-content:space-between; gap:8px; padding:14px; border:1px solid #e2e8f0; border-radius:12px; font-size:12px; }
.agenda-stats strong { font-size:24px; }
.agenda-stats>div:nth-child(2) strong { color:#b77906; }
.agenda-stats>div:nth-child(3) strong { color:#6366f1; }
.agenda-stats>div:nth-child(4) strong { color:#15803d; }
.agenda-tools { display:flex; justify-content:space-between; align-items:center; flex-wrap:wrap; gap:12px; padding:14px 22px; border-top:1px solid #e2e8f0; }
.agenda-tools label { display:flex; align-items:center; gap:8px; font-size:13px; }
.agenda-tools select { width:auto; max-width:240px; min-height:40px; }
.agenda-tools small { color:#64748b; }
.agenda-columns,.agenda-job { display:grid; grid-template-columns:115px minmax(0,1fr) 170px 160px; gap:16px; padding:18px 22px; border-top:1px solid #e2e8f0; }
.agenda-columns { padding-top:10px; padding-bottom:10px; background:#f7f9fc; font-size:12px; color:#64748b; }
.agenda-job { font-size:13px; line-height:1.6; overflow-wrap:anywhere; }
.agenda-job strong { color:#18324e; }
.agenda-job small { display:block; color:#64748b; margin-top:6px; }
.agenda-job p { margin:6px 0; white-space:pre-line; }
.agenda-destination p { display:-webkit-box; -webkit-line-clamp:3; line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.agenda-expanded .agenda-destination p { display:block; }
.agenda-action { display:flex; align-items:flex-start; flex-direction:column; gap:10px; }
.agenda-action .status-badge { white-space:normal; }
.agenda-action button { font-size:12px; }
.agenda-empty { text-align:center; padding:48px 20px; color:#64748b; }
.pod-draft-photo { position:relative; width:105px; border:1px solid #dce4ef; border-radius:10px; padding:6px; background:#fff; }
.pod-draft-photo img { width:100%; height:85px; object-fit:cover; border-radius:6px; cursor:pointer; }
.pod-draft-photo small { display:block; font-size:11px; line-height:1.5; margin-top:4px; overflow-wrap:anywhere; }
.pod-draft-remove { position:absolute; top:-8px; right:-8px; width:30px; height:30px; border:0; border-radius:50%; background:#dc2626; color:#fff; cursor:pointer; font-size:20px; }
.pod-draft-retry { width:100%; min-height:36px; margin-top:6px; border:1px solid #cbd5e1; border-radius:6px; background:#f8fafc; color:#1e3a5f; font:inherit; font-size:11px; cursor:pointer; }
.pod-draft-error { color:#b91c1c; }
.agenda-detail { width:min(720px,calc(100% - 24px)); max-height:85dvh; padding:0; border:1px solid #dce4ef; border-radius:18px; color:#18324e; box-shadow:0 20px 70px #17243a33; }
.agenda-detail::backdrop { background:#17243a80; }
.agenda-detail-heading { position:sticky; top:0; display:flex; align-items:center; justify-content:space-between; gap:12px; background:white; padding:18px 22px; border-bottom:1px solid #e2e8f0; }
.agenda-detail-heading h2 { margin:0; font-size:20px; }
.agenda-detail-close { min-height:44px; padding:8px 14px; border:1px solid #d8e2ee; border-radius:8px; background:#f8fafc; color:#18324e; font:inherit; cursor:pointer; }
.agenda-detail-content { padding:20px 22px; }
.agenda-detail-status { margin:0 0 20px; padding:12px 16px; border-radius:10px; background:#eff6ff; font-weight:600; }
.agenda-detail dl { display:grid; grid-template-columns:145px minmax(0,1fr); gap:12px 18px; margin:0; }
.agenda-detail dt { color:#64748b; font-size:13px; }
.agenda-detail dd { margin:0; white-space:pre-wrap; overflow-wrap:anywhere; }
.agenda-detail-photos { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:12px; }
.agenda-detail-photos a { display:block; border:1px solid #e2e8f0; border-radius:10px; overflow:hidden; text-decoration:none; }
.agenda-detail-photos img { width:100%; height:170px; display:block; object-fit:contain; background:#f1f5f9; }
.agenda-detail-photos span { display:block; padding:10px; font-size:12px; }
@media(max-width:480px) { .agenda-detail dl { grid-template-columns:1fr; gap:4px; } .agenda-detail dd { margin-bottom:12px; } .agenda-detail-heading,.agenda-detail-content { padding:16px; } .agenda-detail-heading h2 { font-size:18px; } }
#calendarMonth .agenda-selected { background:#dbeafe; box-shadow:inset 0 0 0 2px #2563eb; }
@media(max-width:1200px) { .agenda-columns,.agenda-job { grid-template-columns:95px minmax(0,1fr) 140px; } .agenda-columns>span:last-child { display:none; } .agenda-action { grid-column:2 / -1; flex-direction:row; flex-wrap:wrap; align-items:center; } .agenda-stats { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media(max-width:768px) { .agenda-heading { padding:16px; flex-wrap:wrap; } .agenda-heading h2 { font-size:21px; } .agenda-columns { display:none; } .agenda-job { grid-template-columns:80px minmax(0,1fr); padding:16px; gap:10px; } .agenda-driver,.agenda-action { grid-column:2; } .agenda-stats { padding:0 16px 16px; } .agenda-tools { padding:14px 16px; } .agenda-tools label { flex-wrap:wrap; } #calendarDay { scroll-margin-top:12px; } }
.push-guide { display:grid; grid-template-columns:38px minmax(0,1fr) auto 28px; align-items:center; gap:12px; box-sizing:border-box; padding:14px 16px; margin:0 0 16px; border:1px solid #dce7e4; border-radius:12px; color:#27433c; background:#f4f9f7; font-family:Prompt,sans-serif; }
.push-guide[hidden], .push-guide [hidden] { display:none; }
.push-guide-copy { min-width:0; }
.push-guide h2 { margin:0 0 3px; font-size:15px; line-height:1.5; font-weight:600; }
.push-guide #pushGuideDescription { margin:0; color:#6b807a; font-size:12px; line-height:1.7; }
.push-guide-icon { display:grid; place-items:center; width:38px; height:38px; border-radius:10px; background:#e6f0ec; color:#42766a; }
.push-guide-icon svg { width:23px; height:23px; }
.push-guide button { font:500 12px Prompt,sans-serif; cursor:pointer; }
.push-guide-primary { min-height:40px; padding:8px 15px; border:1px solid #abc9bf; border-radius:8px; background:#fff; color:#205f4f; white-space:nowrap; }
.push-guide-close { width:28px; height:32px; padding:0; border:0; border-radius:6px; background:transparent; color:#7c918a; font-size:22px !important; }
.push-guide button:disabled { opacity:.6; cursor:wait; }
.push-guide button:focus-visible { outline:2px solid #6fbcae; outline-offset:3px; }
.push-guide-content,.push-guide-message,.push-guide-note { grid-column:2 / 4; }
.push-guide-steps { display:grid; gap:10px; padding:0; margin:4px 0; list-style:none; counter-reset:push-steps; }
.push-guide-steps li { display:grid; grid-template-columns:24px minmax(0,1fr); gap:10px; font-size:12px; line-height:1.8; counter-increment:push-steps; }
.push-guide-steps li::before { content:counter(push-steps); display:grid; place-items:center; width:24px; height:24px; border-radius:50%; background:#e0ece6; color:#42766a; font-weight:600; font-size:11px; }
.push-guide-note { margin:0; font-size:11px; line-height:1.7; color:#81928e; }
.push-guide-message { margin:0; font-size:12px; color:#9a5a09; line-height:1.7; }
.push-guide-message:empty { display:none; }
.push-guide-link { box-sizing:border-box; width:100%; padding:10px; border:1px solid #c6d8d2; border-radius:8px; margin-bottom:12px; }
.push-guide-toast { position:fixed; z-index:1000000; bottom:calc(24px + env(safe-area-inset-bottom)); left:50%; transform:translateX(-50%); width:max-content; max-width:calc(100vw - 32px); box-sizing:border-box; padding:13px 20px; border-radius:12px; background:#134c40; color:white; font:13px Prompt,sans-serif; box-shadow:0 8px 28px #0002; }
.push-guide-toast[hidden] { display:none; }
@media(max-width:540px) { .push-guide { grid-template-columns:32px minmax(0,1fr) 26px; padding:12px; gap:8px 10px; } .push-guide-icon { width:32px; height:32px; } .push-guide-close { grid-column:3; grid-row:1; align-self:start; } .push-guide-primary { grid-column:2; grid-row:2; width:fit-content; max-width:100%; white-space:normal; } .push-guide-content,.push-guide-message,.push-guide-note { grid-column:1 / 4; } .push-guide h2 { font-size:14px; } }