/* =====================================================================
   STT Truck Management — Stylesheet (V56 clean rewrite)
   ---------------------------------------------------------------------
   ไฟล์ CSS หลักไฟล์เดียวของทั้งระบบ (มือถือเป็นหลัก / dark theme เดียว)
   จัดเป็น 18 หมวด — กด Ctrl+F หาเลขหมวดหรือชื่อหมวดเพื่อกระโดดไปแก้ได้เลย:

     1. TOKENS         — สี, ระยะห่าง, ความโค้งมุม, เงา (แก้สีทั้งระบบที่นี่จุดเดียว)
     2. RESET/BASE      — ค่าพื้นฐานของ body/h1-h3/ลิงก์/รูปภาพ
     3. LAYOUT SHELL     — โครงหน้า .app, แถบบนสุด .topbar, หัวข้อหน้า .hero, เมนูล่าง .bottom-nav
     4. BUTTONS          — ปุ่มทุกแบบ (primary/good/warn/bad/light ฯลฯ)
     5. CARDS & GRIDS     — การ์ดทุกแบบ .card, .data-card, .menu-card, .quick-btn, .long-card, สถิติต่างๆ
     6. FORMS             — label, input, select, textarea, กลุ่มฟอร์ม
     7. TABLES             — ตารางข้อมูล (เวอร์ชันเดสก์ท็อป — มือถือดูหมวด 17)
     8. BADGES / PILLS / STATUS — ป้ายสถานะ, กล่องแจ้งเตือนสี (สำเร็จ/ผิดพลาด)
     9. EMPTY STATES        — ข้อความ "ยังไม่มีข้อมูล"
    10. NOTIFICATIONS PAGE   — หน้าแจ้งเตือนทั้งหน้า (notifications.php)
    11. TOASTS / CONFIRM MODAL — popup แจ้งผลสำเร็จ/ผิดพลาด และ popup ยืนยันก่อนบันทึก/ลบ
    12. EVIDENCE IMAGE VIEWER — popup ดูรูปหลักฐาน (ใบเสร็จ, รูปไมล์ ฯลฯ)
    13. DOCUMENT / MAINTENANCE ALERT POPUP — popup แจ้งเตือนเอกสารหมดอายุ/ถึงรอบซ่อม
    14. TRUCK SELECT CARDS   — การ์ดเลือกรถ (select_truck.php)
    15. VEHICLE STATUS CARD  — การ์ดสถานะรถ (cost_analysis.php และหน้าอื่นที่คล้ายกัน)
    16. PROFILE PAGE          — รูปโปรไฟล์พนักงาน (profile.php)
    17. RESPONSIVE TABLE      — ทำให้ตารางกลายเป็นการ์ดบนจอมือถือ (คู่กับ JS ใน includes/layout.php)
    18. DESKTOP ENHANCEMENTS  — ปรับ layout ให้ใหญ่ขึ้น/จัดเป็นหลายคอลัมน์เมื่อจอกว้าง ≥768px / ≥1024px

   หลักการไฟล์นี้: เขียนแบบ "มือถือก่อน" (mobile-first) คือ CSS ด้านบนทั้งหมด
   คือค่าเริ่มต้นสำหรับจอมือถือ แล้วค่อยมีโค้ดท้ายไฟล์ (หมวด 18) มา "เสริม" ให้
   สวยขึ้นตอนจอกว้างขึ้นเท่านั้น — ไม่มีการเขียน !important ที่ไหนเลยในไฟล์นี้
   ดังนั้นกฎข้อไหนเขียนทีหลังจะ "เพิ่มเติม" ไม่ใช่ "แย่งชิง" กฎก่อนหน้า
   แก้ตรงไหนก็ไม่กระทบส่วนอื่นโดยไม่ได้ตั้งใจ
===================================================================== */

/* ==============================================================
   1. TOKENS — ตัวแปรสีและขนาดกลางของทั้งเว็บ
   ------------------------------------------------------------
   ถ้าอยากเปลี่ยน "โทนสีหลัก" ของทั้งระบบ (เช่นเปลี่ยนจากฟ้าเป็นสีอื่น)
   แก้แค่ตรงนี้ที่เดียว ทุกปุ่ม/การ์ด/ลิงก์ที่อ้างอิง var(--primary) จะเปลี่ยนตาม
   ไม่ต้องไปไล่แก้ทีละจุดทั่วไฟล์
================================================================== */
:root{
  color-scheme: dark; /* บอกเบราว์เซอร์ว่าเว็บนี้เป็นธีมมืดโดยตั้งใจ (สกอลบาร์/ปฏิทินจะได้เป็นสีเข้มตาม) */

  /* พื้นผิว/พื้นหลังของแต่ละชั้น เรียงจากมืดสุด (--bg) ไปสว่างขึ้นทีละนิด
     ปรับให้มีโทนน้ำเงินอมม่วงเล็กน้อย (ไม่ใช่เทาดำเฉยๆ) ให้ดูพรีเมียมขึ้น */
  --bg:        #090d16;  /* สีพื้นหลังของทั้งหน้าเว็บ */
  --surface:   #0d1424;  /* สีแถบบนสุด (topbar) และเมนูล่าง (bottom-nav) */
  --card:      #121a2c;  /* สีพื้นการ์ดทั่วไป (.card, .data-card ฯลฯ) */
  --card-2:    #1a2439;  /* สีพื้นกล่องย่อยในการ์ด เช่นช่อง input, กล่องสถิติเล็กๆ */
  --card-hover:#1e2a45;  /* สีพื้นตอน hover การ์ดที่กดได้ */
  --line:      #26324a;  /* สีเส้นขอบบางๆ ที่ใช้แทบทุกที่ */
  --line-soft: #1c2740;  /* เส้นขอบจางกว่า ใช้แบ่งส่วนภายในการ์ดเดียวกัน */

  /* สีตัวหนังสือ */
  --ink:       #f7f9fc;  /* สีตัวหนังสือหลัก (เกือบขาว) */
  --muted:     #adb9cc;  /* สีตัวหนังสือรอง เช่น label, คำอธิบายเล็กๆ */
  --muted-2:   #7c8aa3;  /* สีตัวหนังสือจางที่สุด เช่น timestamp, ตัวอย่างในช่องกรอก */

  /* สีแบรนด์ + สีสถานะ (ใช้ทั้งปุ่ม, ป้ายสถานะ, ไอคอน)
     น้ำเงินเข้มขึ้น อิ่มตัวขึ้นกว่าเดิม (โทน "cobalt") ให้ความรู้สึกมั่นคง/น่าเชื่อถือ
     เหมาะกับงานโลจิสติกส์ ไม่ใช่ฟ้าจางๆ แบบ default ทั่วไป */
  --primary:      #2f6feb;  /* สีน้ำเงินหลักของระบบ ปุ่ม/ลิงก์/ไฮไลต์ */
  --primary-2:    #5b9bff;  /* สีฟ้าอ่อนกว่า ใช้ตอน hover หรือ ตัวหนังสือลิงก์ */
  --primary-dark: #1e4fc4;  /* น้ำเงินเข้มกว่า ใช้ทำ gradient ปุ่มหลักให้มีมิติ */
  --primary-soft: #152040;  /* สีฟ้าอมดำ ใช้เป็นพื้นหลังป้าย/ไอคอนกลมๆ ให้ดูนุ่มตา */
  --accent:       #f0a63a;  /* สีส้มทองอมเหลือง — สีเน้นรอง ใช้จุดเล็กๆ ที่อยากให้สะดุดตาเป็นพิเศษ (โลโก้ไฟเตือน/แถบเน้น) */
  --green:   #2bd576;       /* เขียว = สำเร็จ / สถานะดี (เช่น "ใช้งาน", "เข้าลาน") — สดขึ้นกว่าเดิมเล็กน้อย */
  --green-soft: #0e2a1c;
  --orange:  #f5a524;       /* ส้ม = เตือน / รอดำเนินการ */
  --orange-soft: #362309;
  --red:     #f0465a;       /* แดง = ผิดพลาด / อันตราย / ลบ — อุ่นขึ้นนิดหน่อย อ่านง่ายบนพื้นมืด */
  --red-soft: #34141a;
  --purple:  #b18cf5;       /* ม่วง = ปุ่มเสริมพิเศษ (ไม่ได้ใช้บ่อย) */

  /* ขนาดความโค้งมุมและเงา ใช้ให้เหมือนกันทั้งเว็บ
     เงาเพิ่มสีให้เข้ากับพื้นหลัง (ไม่ใช่ดำล้วน) ให้ความรู้สึกลอยตัวนุ่มนวลขึ้น */
  --radius-lg: 20px;  /* การ์ดใหญ่, popup */
  --radius-md: 14px;  /* กล่องขนาดกลาง เช่นตาราง, กล่องแจ้งเตือนย่อย */
  --radius-sm: 12px;  /* ปุ่ม, ช่องกรอกข้อมูล, ไอคอนวงกลม/เหลี่ยม */
  --shadow:    0 20px 44px -8px rgba(3,6,14,.55), 0 4px 12px rgba(3,6,14,.35);   /* เงาเข้ม ใช้กับ popup/modal ที่ลอยเหนือทุกอย่าง */
  --shadow-sm: 0 10px 24px -6px rgba(3,6,14,.4), 0 2px 6px rgba(3,6,14,.25);    /* เงาบาง ใช้กับการ์ดทั่วไป */
  --shadow-glow: 0 8px 20px -4px rgba(47,111,235,.35); /* เงาสีฟ้าจางๆ ใช้กับปุ่ม/การ์ดสำคัญที่อยากให้เด่น */
  --ease: cubic-bezier(.2,.7,.3,1); /* เส้นโค้งการเคลื่อนไหวที่ดูนุ่มนวลเป็นธรรมชาติ ใช้แทน ease ปกติในจุดสำคัญ */

  --gap: 14px;    /* ระยะห่างมาตรฐานระหว่างช่อง grid ทั่วไป */
  --nav-h: 66px;  /* ความสูงประมาณของเมนูล่าง ใช้คำนวณ padding กันเนื้อหาโดนบัง */
}

/* ==============================================================
   2. RESET / BASE — ค่าพื้นฐานของทั้งเว็บ (ฟอนต์, สีพื้นหลัง, หัวข้อ)
   ------------------------------------------------------------
   อยากเปลี่ยนฟอนต์ทั้งเว็บ หรือขนาดตัวหนังสือเริ่มต้น แก้ที่ body{...} ด้านล่างนี้
================================================================== */
*, *::before, *::after{ box-sizing: border-box; } /* กันปัญหา padding บวกความกว้างจนล้นจอ */
html{ scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; } /* smooth = เลื่อนหน้านุ่มๆ, tap-highlight = เอาสีฟ้าเวลาแตะบนมือถือออก */
body{
  margin: 0;
  min-height: 100vh;
  background:
    radial-gradient(1100px 520px at 12% -8%, rgba(47,111,235,.14), transparent 60%),
    radial-gradient(900px 460px at 100% 0%, rgba(240,166,58,.06), transparent 55%),
    var(--bg); /* พื้นหลังไล่เฉดจางๆ 2 จุด ให้มีมิติ ไม่แบนเหมือนสีทึบล้วน — ยังคงเป็นธีมมืดปกติ ไม่รบกวนการอ่าน */
  background-attachment: fixed;
  color: var(--ink);
  font-family: 'Noto Sans Thai', 'Sarabun', -apple-system, 'Segoe UI', Roboto, Arial, sans-serif; /* ฟอนต์ไทยอ่านง่าย มี fallback เป็นฟอนต์ระบบถ้าโหลด Google Font ไม่ทัน */
  font-size: 16px;
  line-height: 1.55;
  letter-spacing: .1px;
  padding-bottom: calc(var(--nav-h) + 24px + env(safe-area-inset-bottom)); /* กันเนื้อหาโดนเมนูล่างบัง + เผื่อพื้นที่ปุ่ม home แบบ iPhone ไม่มีปุ่ม */
  -webkit-font-smoothing: antialiased;
}
h1,h2,h3,h4{ margin: 0 0 8px; line-height: 1.25; font-weight: 800; letter-spacing: -.2px; }
h1{ font-size: 25px; }
h2{ font-size: 20px; }
h3{ font-size: 17px; }
p{ margin: 0 0 10px; }
a{ color: var(--primary-2); transition: color .15s var(--ease); }
img{ max-width: 100%; } /* กันรูปใหญ่ล้นจอมือถือ */
.muted{ color: var(--muted); }
.hint{ color: var(--muted); font-size: 13px; text-align: center; margin-top: 12px; } /* ข้อความคำแนะนำเล็กๆ ใต้ฟอร์ม/ปุ่ม */

/* แถบเน้นบางๆ ด้านบนของ .app กันไม่ให้จอรู้สึกจืดเกินไป — เป็นเส้นไล่สีจางๆ คั่นก่อนถึง topbar */
.app{ position: relative; }

/* ==============================================================
   3. LAYOUT SHELL — โครงสร้างหลักของทุกหน้า
   ------------------------------------------------------------
   ทุกหน้าจะมี: .app (กรอบเนื้อหากลางจอ) > .topbar (แถบบน) > .hero (หัวข้อหน้า)
   > เนื้อหาของแต่ละหน้า > .bottom-nav (เมนูล่าง, เฉพาะมือถือ)
================================================================== */
.app{
  width: min(1180px, 100%);  /* กว้างเต็มจอมือถือ แต่ไม่เกิน 1180px บนจอใหญ่ */
  margin: 0 auto;
  padding: 12px 12px 28px;
}

/* --- topbar: แถบบนสุดของทุกหน้า มีโลโก้ + ชื่อระบบ + ปุ่มแจ้งเตือน/โปรไฟล์ + ช่องค้นหา --- */
.topbar{
  position: sticky; /* ติดค้างบนสุดตอนเลื่อนหน้าจอ */
  top: 0;
  z-index: 50;
  margin: 0 -12px 14px; /* ดึงให้ชิดขอบจอพอดี (หักลบ padding ของ .app ออก) */
  padding: max(40px, calc(12px + env(safe-area-inset-top))) 14px 12px;
  /* max(40px, ...) แทนที่จะพึ่ง env() อย่างเดียว เพราะ Safari ปกติ (ไม่ใช่แอปที่เพิ่มไปหน้าจอโฮม)
     เวลาเลื่อนจอแล้วแถบที่อยู่ (URL bar) ของ Safari หดตัวไปชั่วคราว จะโชว์นาฬิกา/สัญญาณของ iPhone ทับตรงนั้น
     แต่ env(safe-area-inset-top) กลับคืนค่า 0 อยู่ในจังหวะนั้น (บั๊กที่รู้กันของ Safari ไม่ใช่ปัญหาโค้ดเรา)
     ใส่ค่าต่ำสุดตายตัว 40px ไว้เป็นเซฟตี้ กันทับซ้อนไม่ว่า Safari จะรายงานค่าถูกหรือไม่ก็ตาม */
  /* padding-top เผื่อพื้นที่แถบสถานะของ iPhone (นาฬิกา/สัญญาณ/แบตเตอรี่) ตอนเปิดผ่านไอคอนที่เพิ่มไปหน้าจอโฮม (PWA)
     เพราะตั้งค่า apple-mobile-web-app-status-bar-style เป็น black-translucent ไว้ (สถานะบาร์โปร่งใสทับเนื้อหา)
     ถ้าไม่เผื่อพื้นที่ตรงนี้ โลโก้/ชื่อระบบจะไปซ้อนทับกับนาฬิกาของ iPhone พอดี อ่านยากมาก (บั๊กที่เคยเจอจากรูปจริง) */
  background: var(--surface); /* fallback สำหรับเบราว์เซอร์เก่าที่ไม่รู้จัก color-mix() */
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.4); /* กระจกฝ้าจางๆ ให้เนื้อหาที่เลื่อนผ่านด้านล่างเห็นราง ๆ ดูมีมิติ ทันสมัยขึ้น */
  -webkit-backdrop-filter: blur(14px) saturate(1.4);
  border-bottom: 1px solid var(--line);
  color: var(--ink);
}
.topbar-main{ display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.topbar-brand-block{ min-width: 0; } /* min-width:0 จำเป็นเวลามีข้อความยาวเกิน ต้องการให้มัน ellipsis (...) ได้ */
.brand, .brand-with-logo, .persistent-brand{ /* ชื่อระบบ + โลโก้ ที่มุมซ้ายบน */
  display: flex; align-items: center; gap: 10px;
  font-weight: 900; font-size: 17px; letter-spacing: .2px;
  color: var(--ink); text-decoration: none;
}
.brand-logo{
  width: 32px; height: 32px; border-radius: 10px;
  background: #fff; object-fit: contain; padding: 2px;
  border: 1px solid var(--line);
}
.subtitle{ /* บรรทัดเล็กใต้ชื่อระบบ เช่น "ชื่อพนักงาน · ตำแหน่ง · รถที่เลือก" */
  font-size: 12px; color: var(--muted); margin-top: 2px;
  max-width: 56vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* ยาวเกินให้ตัดเป็น ... แทนที่จะขึ้นบรรทัดใหม่ */
}
.topbar-actions{ display: flex; align-items: center; gap: 8px; flex-shrink: 0; } /* กลุ่มปุ่มขวาบน: กระดิ่งแจ้งเตือน, รูปโปรไฟล์ */
.icon-action, .noti-bell, .profile-icon{ /* ปุ่มไอคอนกลมๆ สี่เหลี่ยมมุมมน ใช้ซ้ำหลายที่ */
  position: relative;
  width: 42px; height: 42px;
  display: inline-grid; place-items: center;
  overflow: hidden; /* บั๊กที่เจอ: ถ้าไม่ใส่บรรทัดนี้ รูปโปรไฟล์จะล้นออกนอกกรอบวงกลม เพราะ grid item อย่างรูปภาพจะไม่ยอมเล็กกว่าขนาดไฟล์จริงเอง ต่อให้ตั้ง width/height:100% ไว้แล้วก็ตาม (ดู .topbar-profile-img ด้านล่างที่แก้อีกจุดคู่กัน) */
  border-radius: var(--radius-sm);
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--ink);
  text-decoration: none;
  font-size: 18px;
  transition: background .15s, border-color .15s;
}
.icon-action:hover, .noti-bell:hover, .profile-icon:hover{
  background: #1c2942; border-color: var(--primary);
}
.topbar-profile-img{
  width: 100%; height: 100%; min-width: 0; min-height: 0; /* min-width/height:0 คือตัวแก้บั๊กจริง — ไม่งั้นรูปจะยึดขนาดไฟล์จริงเป็นขนาดขั้นต่ำเสมอในเลย์เอาต์ grid */
  border-radius: var(--radius-sm); object-fit: cover; display: block;
} /* รูปโปรไฟล์จริงแทนไอคอนคน ถ้าอัปโหลดไว้ */
.noti-bell b{ /* เลขแจ้งเตือนสีแดงมุมบนขวาของกระดิ่ง */
  position: absolute; top: -4px; right: -4px;
  min-width: 18px; height: 18px; padding: 0 4px;
  border-radius: 999px;
  background: var(--red); color: #fff;
  border: 2px solid var(--surface);
  font-size: 10px; line-height: 14px; text-align: center; font-weight: 800;
}

.topbar-search-row{ display: flex; gap: 8px; margin-top: 10px; } /* แถวช่องค้นหาทะเบียนรถ อยู่ใต้แถวโลโก้ */
.topbar-search{
  flex: 1; display: flex; align-items: stretch; gap: 0;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); overflow: hidden;
}
.topbar-search input{
  flex: 1; border: 0; background: transparent; color: var(--ink);
  padding: 10px 12px; font-size: 15px; min-height: 42px; border-radius: 0;
}
.topbar-search input:focus{ outline: none; box-shadow: none; }
.topbar-search button{
  width: 44px; border: 0; background: transparent; color: var(--muted);
  font-size: 16px; cursor: pointer; min-height: 42px;
}
.topbar-nav-links{ display: none; } /* เมนูลิงก์แบบข้อความ (หน้าแรก/เลือกรถ/Dashboard) — ซ่อนบนมือถือเพราะมีเมนูล่างอยู่แล้ว, โผล่ตอนจอกว้างในหมวด 18 */
.nav-pill{
  color: var(--ink); text-decoration: none; font-weight: 700; font-size: 13px;
  padding: 8px 14px; border-radius: 999px;
  background: var(--card-2); border: 1px solid var(--line);
}
.nav-pill:hover{ border-color: var(--primary); }

/* --- hero: กล่องหัวข้อใหญ่ของแต่ละหน้า (ชื่อหน้า + คำอธิบายสั้นๆ) --- */
.hero{ margin: 4px 0 16px; }
.hero h1{ font-size: 22px; margin-bottom: 4px; }
.hero p{ color: var(--muted); margin: 0; font-size: 14px; }

/* --- bottom-nav: เมนูหลักแบบแท็บด้านล่างจอ ใช้เฉพาะมือถือ (หน้าแรก/รถ/เที่ยว/ประวัติ/โปรไฟล์) --- */
.bottom-nav{
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 100;
  background: var(--surface); /* fallback */
  background: color-mix(in srgb, var(--surface) 92%, transparent);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-top: 1px solid var(--line);
  box-shadow: 0 -12px 32px rgba(3,6,14,.4);
  padding-bottom: env(safe-area-inset-bottom); /* เผื่อพื้นที่ปุ่ม home bar ของ iPhone รุ่นใหม่ */
}
.bottom-nav-inner{
  width: min(720px, 100%); margin: 0 auto;
  display: grid; grid-template-columns: repeat(4, 1fr); /* 4 เมนูเท่ากันเป๊ะ (หน้าแรก/เที่ยวรถ/เติมน้ำมัน/ซ่อมบำรุง) */
}
.bottom-nav a{
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  text-decoration: none; color: var(--muted-2);
  padding: 9px 4px; /* ไม่ใส่ safe-area-inset-bottom ซ้ำตรงนี้ เพราะ .bottom-nav (กล่องแม่) ใส่ไปแล้วบรรทัดบน — ใส่ซ้ำ 2 ที่ทำให้เมนูล่างสูงเกินจำเป็น มีพื้นที่ว่างลอยๆ ด้านล่าง (บั๊กที่เคยเจอจากรูปจริงบน iPhone) */
  font-size: 11px; font-weight: 700;
  min-height: 56px; justify-content: center; /* ปุ่มสูงพอกดง่ายด้วยนิ้วโป้ง (แนะนำอย่างน้อย 44-48px) */
  position: relative;
  transition: color .15s var(--ease);
}
.bottom-nav a .ico{ font-size: 21px; line-height: 1; transition: transform .18s var(--ease); } /* ไอคอน emoji เหนือชื่อเมนู */
.bottom-nav a:hover{ color: var(--ink); }
.bottom-nav a:hover .ico{ transform: translateY(-2px); }
.bottom-nav a.active{ color: var(--primary-2); } /* หน้าปัจจุบัน ไฮไลต์สีฟ้า ถ้ามีการเติม class="active" ผ่าน JS */
.bottom-nav a.active::before{
  content: ''; position: absolute; top: 2px; left: 50%; transform: translateX(-50%);
  width: 22px; height: 3px; border-radius: 999px; background: var(--primary-2);
}

/* ==============================================================
   4. BUTTONS — ปุ่มทุกแบบในระบบ
   ------------------------------------------------------------
   ปุ่มทุกปุ่ม (<button>, <a class="btn">, input[type=submit]) ใช้สไตล์เดียวกันหมด
   อยากได้สีต่างไป ให้เติม class ต่อท้าย เช่น class="btn primary" / class="btn bad"
================================================================== */
.btn, button, input[type="submit"]{ /* ค่าเริ่มต้น = ปุ่มสีเทาเข้ม (เป็นปุ่มรอง/ปุ่มทั่วไป) */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  padding: 12px 16px;
  min-height: 46px; /* สูงพอกดง่ายบนมือถือ */
  background: var(--card-2);
  color: var(--ink);
  border-color: var(--line);
  text-decoration: none;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  transition: transform .12s var(--ease), background .18s var(--ease), border-color .18s var(--ease), opacity .15s var(--ease), box-shadow .18s var(--ease);
}
.btn:hover, button:hover{ border-color: color-mix(in srgb, var(--line) 40%, var(--muted-2)); }
.btn:active, button:active{ transform: scale(.97); } /* เอฟเฟกต์กดยุบเล็กน้อยตอนแตะ ให้รู้สึกว่ากดโดน */
.btn:focus-visible, button:focus-visible{ outline: 2px solid var(--primary-2); outline-offset: 2px; } /* ให้เห็นชัดตอนกดผ่านคีย์บอร์ด/Tab (accessibility) */
.btn:disabled, button:disabled{ opacity: .55; cursor: not-allowed; transform: none; }

/* สีปุ่มตามความหมาย — ใส่คู่กับ class="btn" เช่น <button class="btn primary"> */
.btn.primary, button.primary, input[type="submit"].primary{ /* ปุ่มหลัก/ปุ่มยืนยัน สีฟ้า ทำเป็น gradient ให้มีมิติ ไม่แบน */
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border-color: var(--primary-dark); color: #fff;
  box-shadow: var(--shadow-glow);
}
.btn.primary:hover{ background: linear-gradient(135deg, var(--primary-2), var(--primary)); box-shadow: 0 10px 26px -4px rgba(47,111,235,.48); }
.btn.good{ background: linear-gradient(135deg, var(--green), #17a862); border-color: #17a862; color: #06210f; }      /* เขียว = ยืนยัน/สำเร็จ เช่น "เข้าลาน" */
.btn.warn{ background: linear-gradient(135deg, var(--orange), #d98a10); border-color: #d98a10; color: #2a1c02; }    /* ส้ม = ต้องระวัง/รอดำเนินการ */
.btn.bad, .btn.danger{ background: linear-gradient(135deg, var(--red), #c92e40); border-color: #c92e40; color: #fff; } /* แดง = ลบ/อันตราย */
.btn.purple{ background: var(--purple); border-color: var(--purple); color: #1c1533; }
.btn.light{ background: var(--card-2); border-color: var(--line); color: var(--ink); }  /* ปุ่มรอง เช่น "ยกเลิก" */
.btn.light:hover{ background: var(--card-hover); }
.btn.danger-soft{ background: var(--red-soft); border-color: #5c2626; color: #fca5a5; } /* แดงจางๆ สำหรับปุ่มลบที่ไม่อยากให้เด่นมาก */
.btn.block{ display: flex; width: 100%; }   /* ปุ่มเต็มความกว้าง (เช่นปุ่ม submit ท้ายฟอร์ม) */
.btn.big{ min-height: 56px; font-size: 17px; }   /* ปุ่มใหญ่พิเศษ เช่นปุ่มเข้า/ออกลานในหน้า yard */
.btn.compact{ min-height: 36px; padding: 6px 12px; font-size: 13px; border-radius: 10px; } /* ปุ่มเล็ก เช่นปุ่มแก้ไข/ลบในตาราง */

.link{ color: var(--primary-2); font-weight: 700; text-decoration: none; }
.link:hover{ text-decoration: underline; }

/* กลุ่มปุ่มเรียงกัน */
.actions{ display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; }  /* แถวปุ่มทั่วไป เช่นบนสุดของหน้า */
.actions .btn, .actions button{ flex: 1 1 150px; } /* แต่ละปุ่มยืดเท่ากัน ขั้นต่ำ 150px แล้วตกบรรทัดเองถ้าไม่พอ */
.list-actions{ display: flex; gap: 8px; flex-wrap: wrap; } /* กลุ่มปุ่มเล็กในการ์ด/แถวตาราง เช่น "แก้ไข | ลบ" */
.list-actions .btn{ min-height: 38px; padding: 8px 12px; font-size: 13px; border-radius: 10px; }
.split-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ปุ่ม 2 ปุ่มแบ่งครึ่งเท่ากัน เช่น "ออกจากลาน / เข้าลาน" */
.dash-actions, .dashboard-actions{ display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; }

/* ==============================================================
   5. CARDS & GRIDS — กล่อง/การ์ดทุกแบบที่ใช้แสดงข้อมูล
================================================================== */
.card{ /* กล่องพื้นฐานที่ใช้บ่อยที่สุดในระบบ ห่อฟอร์ม/เนื้อหาเป็นกล่องมน */
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 16px;
  margin: 0 0 14px;
}
.card.compact{ padding: 12px; } /* เวอร์ชัน padding น้อยลง สำหรับพื้นที่จำกัด */
.card h2, .card h3{ margin-top: 0; }

.grid{ display: grid; gap: var(--gap); grid-template-columns: 1fr; } /* บนมือถือ = 1 คอลัมน์เสมอ, จอกว้างค่อยแบ่งคอลัมน์ (ดูหมวด 18) */
.grid.col-4, .col-4{ grid-column: span 1; }
.grid.col-6, .col-6{ grid-column: span 1; }

.section-title{ /* หัวข้อย่อยของแต่ละส่วนในหน้า พร้อมปุ่ม action ชิดขวา เช่น "รถทั้งหมด ... [+ เพิ่มรถ]" */
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 12px;
}
.section-title h2{ margin-bottom: 2px; }

/* --- เมนูลัดหน้าแรก (dashboard shortcuts) --- */
.menu-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } /* มือถือ = 2 คอลัมน์ */
.menu-card{
  display: block; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 15px;
  text-decoration: none; color: var(--ink);
  box-shadow: var(--shadow-sm);
  transition: transform .18s var(--ease), border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease);
}
.menu-card:active{ transform: scale(.97); }
.menu-card:hover{ border-color: var(--primary); transform: translateY(-2px); box-shadow: var(--shadow-glow); background: var(--card-hover); }
.menu-card b{ display: block; font-size: 15px; margin-bottom: 4px; }    /* ชื่อเมนู ตัวหนา */
.menu-card span{ display: block; color: var(--muted); font-size: 12.5px; line-height: 1.4; } /* คำอธิบายเมนูตัวเล็ก */

/* --- ปุ่มลัดด่วน (quick actions) เช่นในหน้า dashboard --- */
.quick-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.quick-btn{
  display: block; background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 14px;
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
}
.quick-btn b{ display: block; font-size: 15px; }
.quick-btn span{ display: block; color: var(--muted); font-size: 12.5px; margin-top: 3px; }

/* --- แถวรายการยาว (เช่นรายการประวัติ/เมนูลิงก์แนวตั้ง) --- */
.long-list{ display: grid; gap: 10px; }
.long-card{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px 16px;
  text-decoration: none; color: var(--ink); box-shadow: var(--shadow-sm);
}
.long-card .left{ display: flex; gap: 12px; align-items: center; min-width: 0; }
.long-card .icon{ /* ไอคอนกลมๆ ด้านซ้ายของแถว */
  width: 42px; height: 42px; flex-shrink: 0;
  border-radius: var(--radius-sm); display: grid; place-items: center;
  background: var(--primary-soft); font-size: 20px;
}
.long-card b{ font-size: 15px; display: block; }
.long-card span{ font-size: 12.5px; color: var(--muted); display: block; margin-top: 2px; }
.long-card .arrow{ font-size: 20px; color: var(--muted-2); flex-shrink: 0; } /* ลูกศร ">" ด้านขวาสุด บอกว่ากดเข้าไปดูต่อได้ */

/* --- การ์ดข้อมูล เช่นรายการรถทั้งหมดในหน้า cars.php --- */
.data-card-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }
.data-card{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 15px; box-shadow: var(--shadow-sm);
  min-width: 0; /* บั๊กที่เคยเจอ: การ์ดในกริดจอเดสก์ท็อป (2-3 คอลัมน์) ล้นออกนอกจอ เพราะ CSS Grid
                   ไม่ยอมให้ item หดเล็กกว่าความกว้างเนื้อหาข้างในโดยปริยาย (min-width:auto) — ถ้าใน
                   การ์ดมีตารางที่มีข้อความยาวไม่มีช่องว่าง (เช่น path ไฟล์รูปภาพ) การ์ดทั้งใบจะดันขยาย
                   กว้างเกิน track ที่กำหนดไว้ ทำให้ทั้งหน้าล้นขวาไปเลย ใส่ min-width:0 นี้แก้ปัญหาได้ */
}
.data-card .head{ display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.data-card .title{ font-size: 17px; font-weight: 800; }
.data-card .sub{ color: var(--muted); font-size: 13px; margin-top: 2px; }

/* --- กล่องสถิติแบบย่อในหน้า Dashboard ---
   โครงสร้าง HTML จริงคือ: <div class="dash-card [big|good|warn|danger]">
                              <span>ป้ายชื่อ</span><b>ตัวเลข</b><small>คำอธิบาย</small>
                           </div>
   ต้องใช้ order: 1/2/3 เพราะ HTML เขียน span-b-small แต่เราอยากให้ตัวเลข (b)
   มาก่อนสายตาหรือเน้นสุด — จริงๆ ที่นี่คือเรียงตามลำดับ HTML ปกติ (label > เลข > หมายเหตุ)
   ป้องกันปัญหาตัวหนังสือ 3 ก้อนวิ่งติดกันเป็นบรรทัดเดียว (บั๊กที่เคยเจอ) */
.dash-card-grid{ display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.dash-card{
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 14px;
  display: flex; flex-direction: column; gap: 2px;
}
.dash-card span{ display: block; color: var(--muted); font-size: 12.5px; font-weight: 700; order: 1; }   /* ป้ายชื่อ เช่น "รถทั้งหมด" */
.dash-card b{ display: block; font-size: 22px; font-weight: 900; order: 2; margin-top: 4px; }             /* ตัวเลขใหญ่ */
.dash-card small{ display: block; color: var(--muted-2); font-size: 11.5px; order: 3; margin-top: 2px; }  /* คำอธิบายเล็กใต้ตัวเลข */
.dash-card.big b{ font-size: 26px; color: var(--primary-2); }  /* การ์ดใบแรก (รวมทั้งหมด) ให้เด่นสุด */
.dash-card.good b{ color: var(--green); }    /* เช่นการ์ด "อยู่ในลาน" */
.dash-card.warn b{ color: var(--orange); }   /* เช่นการ์ด "ออกวิ่ง" */
.dash-card.danger b{ color: var(--red); }    /* เช่นการ์ด "ซ่อม" */

/* --- แถวคู่ label/value เรียงชิดซ้าย-ขวา เช่นในการ์ดรถ "ปี: 2020" --- */
.kv{ display: grid; grid-template-columns: 1fr auto; gap: 8px; margin: 6px 0; font-size: 14px; }
.kv span{ color: var(--muted); }
.kv b{ text-align: right; }

/* --- กล่องสถิติเล็ก 3 ช่องบนสุดของฟอร์มบันทึกข้อมูล (วันที่ / รถที่เลือก / คนขับ) ---
   โครงสร้าง HTML: <div class="mini-stat"><span>ป้ายชื่อ</span><b>ค่า</b></div>
   (คนละแบบกับ .dash-card ด้านบนที่มี small ด้วย — อันนี้มีแค่ span+b) */
.mini-stats{ display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 12px 0; }
.mini-stat, .stat{
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 12px;
  display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.mini-stat span, .stat .label{ color: var(--muted); font-size: 11.5px; font-weight: 700; order: 1; }
.mini-stat b{
  order: 2; font-size: 14.5px; font-weight: 800;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; /* ชื่อคนขับ/ทะเบียนยาวเกินให้ตัด ... กันล้นกล่อง */
}
.stat .num, .num{ font-size: 24px; font-weight: 900; margin-top: 6px; }
.value{ font-size: 20px; font-weight: 800; display: block; }
.unit{ font-size: 12px; color: var(--muted); margin-left: 4px; font-weight: 600; } /* หน่วย เช่น "กม." ต่อท้ายตัวเลข */

/* กล่องแสดงเลขไมล์/สถานะแบบ label กับ value คนละบรรทัด
   โครงสร้าง HTML: <div class="mileage-box"><div class="label">..</div><div class="value">เลข<span class="unit">กม.</span></div></div> */
.mileage-box .label{ color: var(--muted); font-size: 12.5px; font-weight: 700; margin-bottom: 4px; }

.dashboard-toolbar{ display: flex; gap: 10px; flex-wrap: wrap; margin: 12px 0; } /* แถวตัวกรอง/ปุ่มด้านบนของหน้า dashboard เช่น dropdown เลือกลาน */

/* ==============================================================
   6. FORMS — ฟอร์มกรอกข้อมูลทั้งหมด (label, input, select, textarea)
   ------------------------------------------------------------
   ทุกช่องกรอกในระบบใช้สไตล์เดียวกันอัตโนมัติ ไม่ต้องใส่ class เพิ่ม
================================================================== */
label, .label{ display: block; font-weight: 700; font-size: 14px; margin: 12px 0 6px; color: var(--ink); }
.form-group{ margin-bottom: 4px; } /* กล่องครอบ label+input หนึ่งช่อง ใช้จัดระยะห่างในฟอร์มแบบ grid (เช่น .search-row) */
input, select, textarea{
  width: 100%; max-width: 100%; min-width: 0; /* กันช่องกรอกล้นขอบจอ/ล้นการ์ดบนมือถือ */
  background: var(--card-2);
  border: 1px solid var(--line);
  color: var(--ink);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 16px; /* ต้อง >= 16px ไม่งั้น iPhone จะซูมจอเข้าอัตโนมัติตอนแตะช่องกรอก (บั๊กของ iOS เอง ไม่ใช่ของเรา) */
  font-family: inherit;
  min-height: 46px;
  transition: border-color .18s var(--ease), box-shadow .18s var(--ease);
}
input::placeholder, textarea::placeholder{ color: var(--muted-2); }
input:focus, select:focus, textarea:focus{
  outline: none; border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft), var(--shadow-glow); /* ขอบฟ้าเรืองแสงบางๆ ตอนกำลังกรอก ช่วยให้เห็นชัดว่าอยู่ช่องไหน */
}
textarea{ min-height: 96px; resize: vertical; } /* resize:vertical = ลากขยายได้แค่แนวตั้ง กันลากแนวนอนจนล้นจอ */
input[type="file"]{ padding: 10px; background: var(--card); }
input[type="checkbox"], input[type="radio"]{ width: auto; min-height: 0; } /* checkbox/radio ไม่ต้องเต็มความกว้างเหมือนช่องอื่น */

/* ช่องกรอกวันที่/เวลา — ตัวช่องเหล่านี้ browser วาด UI ปฏิทิน/นาฬิกาให้เองข้างในไอคอน+ตัวเลข
   ถ้าจอแคบ (มือถือ) แล้ว padding เท่า input ทั่วไป จะทำให้เนื้อหาข้างในแคบเกินจนไอคอนล้นขอบขวา
   ลด padding + ลดขนาดตัวอักษรเฉพาะ input ประเภทนี้แก้ปัญหาได้ (ลดขนาดตัวอักษรได้อย่างปลอดภัย เพราะ
   input วันที่/เวลาไม่ได้เปิดคีย์บอร์ดให้พิมพ์ตรงๆ จึงไม่ทำให้ iPhone ซูมจอเข้าเหมือน input ข้อความทั่วไป) */
input[type="date"], input[type="time"], input[type="datetime-local"], input[type="month"], input[type="week"]{
  min-width: 0;
  font-size: 15px;
  padding: 10px 8px;
}
@media (max-width: 380px){
  /* จอมือถือแคบมาก (เช่น iPhone SE) — datetime-local ต้องโชว์ทั้งวันที่+เวลาในช่องเดียว ยาวกว่า date เฉยๆ
     ลดขนาดตัวอักษร+padding อีกนิดเพื่อให้พอดีจอ ไม่ล้น */
  input[type="datetime-local"]{
    font-size: 13.5px;
    padding-left: 6px;
    padding-right: 4px;
  }
}

.form-grid{ display: grid; grid-template-columns: 1fr; gap: 10px; }  /* กลุ่มฟอร์มที่อยากเรียง 2 คอลัมน์บนจอกว้าง (ดูหมวด 18) */
.search-row{ display: grid; grid-template-columns: 1fr; gap: 10px; align-items: end; }  /* แถวตัวกรองค้นหา เช่นหน้า ประวัติ */
.inline-form{ display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* ฟอร์มสั้นๆ อยู่บรรทัดเดียว */
.yard-filter-form{ display: flex; gap: 10px; flex-wrap: wrap; align-items: end; margin-bottom: 12px; } /* ตัวกรองลานในหน้า yard */

/* ฟอร์มที่ไม่ได้ใส่ .card เอง — JS ใน includes/layout.php จะเติม class นี้ให้อัตโนมัติ
   เพื่อให้หน้าตาเหมือนอยู่ในกล่องการ์ดเสมอ ไม่ต้องแก้ไฟล์ PHP ทีละหน้า */
.form-card-auto{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px; box-shadow: var(--shadow-sm);
}

/* ==============================================================
   7. TABLES — ตารางข้อมูล (นี่คือหน้าตาบนจอกว้าง — บนมือถือดูหมวด 17 ที่แปลงเป็นการ์ด)
================================================================== */
.table-wrap{ /* กล่องครอบตาราง ให้เลื่อนซ้าย-ขวาได้ถ้าตารางกว้างเกินจอ (แทนที่จะบีบจนอ่านไม่ออก) */
  width: 100%; overflow-x: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--line);
  background: var(--card);
  margin: 12px 0;
  -webkit-overflow-scrolling: touch; /* เลื่อนนุ่มแบบ native บน iOS Safari */
}
table{ min-width: 100%; border-collapse: collapse; } /* min-width:100% = ตารางกว้างเต็มกล่องครอบเสมอ (ไม่เหลือช่องว่างด้านขวาตอนคอลัมน์น้อย) แต่ถ้าคอลัมน์เยอะ (เช่น 19 คอลัมน์) ก็ยังขยายกว้างกว่า 100% ได้ตามจำนวน min-width ต่อคอลัมน์ด้านล่าง แล้วให้ .table-wrap เลื่อนแนวนอนเอา (บั๊กที่เคยเจอ: ตารางคอลัมน์เยอะ เช่น 19 คอลัมน์ แต่ตั้ง min-width รวมตายตัวไว้แค่ 640px ทำให้หัวตารางบีบจนตัวอักษรตกบรรทัดทีละตัว อ่านไม่ออกเลย) */
th, td{ padding: 11px 12px; border-bottom: 1px solid var(--line-soft); text-align: left; vertical-align: top; font-size: 14px; }
th{ min-width: 90px; } /* ความกว้างขั้นต่ำต่อคอลัมน์ กันหัวตารางบีบจนตัวอักษรตกบรรทัดทีละตัว */
td{ overflow-wrap: anywhere; } /* ยอมตัดคำตรงไหนก็ได้ถ้าเป็นข้อความยาวไม่มีช่องว่าง เช่น path ไฟล์รูปภาพในหน้า Audit Log — ป้องกันดันตารางทั้งก้อนกว้างเกินจอ */
th{ background: var(--card-2); color: var(--muted); font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; position: sticky; top: 0; }
tr:last-child td{ border-bottom: 0; }
tbody tr, tr:not(.rt-head-row){ transition: background .15s var(--ease); }
tbody tr:hover, tr:not(.rt-head-row):hover{ background: var(--card-2); } /* ไฮไลต์แถวตอนเลื่อนเมาส์ผ่าน ช่วยอ่านตารางกว้างๆ ง่ายขึ้นบนเดสก์ท็อป */
.thumb{ width: 64px; height: 64px; border-radius: var(--radius-sm); object-fit: cover; border: 1px solid var(--line); } /* รูปเล็กในตาราง เช่นรูปหลักฐาน */

/* ==============================================================
   8. BADGES / PILLS / STATUS — ป้ายสถานะเล็กๆ และกล่องแจ้งเตือนสี
================================================================== */
.badge{ /* ป้ายวงรีเล็ก สีฟ้า มักใช้บอกจำนวน/หมวดหมู่ */
  display: inline-flex; align-items: center; gap: 4px;
  border-radius: 999px; padding: 5px 10px;
  background: var(--primary-soft); color: var(--primary-2);
  font-weight: 700; font-size: 11.5px;
}
.pill{ /* ป้ายสถานะ ใส่ class เสริม .good/.warn/.bad/.primary/.light เพื่อเปลี่ยนสีตามความหมาย */
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--card-2); border: 1px solid var(--line-soft); border-radius: 999px; padding: 6px 11px;
  font-size: 12px; font-weight: 700; color: var(--muted);
}
.pill.good{ background: var(--green-soft); color: #6ee7a8; border-color: #1c4a30; }     /* เช่น "อนุมัติแล้ว" */
.pill.warn{ background: var(--orange-soft); color: #fbbf60; border-color: #5c3d10; }    /* เช่น "รอดำเนินการ" */
.pill.bad{ background: var(--red-soft); color: #fca5a5; border-color: #6b2626; }        /* เช่น "ถูกปฏิเสธ" */
.pill.primary{ background: var(--primary-soft); color: var(--primary-2); border-color: #1e3a6f; }
.pill.light{ background: var(--card-2); color: var(--muted); }

.status-dot{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; background: var(--muted-2); } /* จุดกลมเล็กบอกสถานะ ใช้แทนหรือคู่กับ .pill ก็ได้ */
.status-dot.good{ background: var(--green); }
.status-dot.warn{ background: var(--orange); }
.status-dot.bad{ background: var(--red); }

/* กล่องข้อความแจ้งผล เต็มความกว้าง มักอยู่บนสุดของฟอร์มหลัง submit */
.notice, .success, .error{
  padding: 13px 16px; border-radius: var(--radius-md); margin: 0 0 14px;
  border: 1px solid; font-size: 14px; font-weight: 600; line-height: 1.5;
}
.notice{ background: var(--primary-soft); color: var(--primary-2); border-color: #1e3a6f; }  /* ข้อความแจ้งเตือนทั่วไป */
.success{ background: var(--green-soft); color: #6ee7a8; border-color: #1c4a30; }            /* บันทึกสำเร็จ */
.error{ background: var(--red-soft); color: #fca5a5; border-color: #6b2626; }                /* เกิดข้อผิดพลาด เช่น login ผิด */

/* ==============================================================
   9. EMPTY STATES — ข้อความ "ยังไม่มีข้อมูล" ตอนไม่มีอะไรให้แสดง
================================================================== */
.empty-state, .empty-card, .noti-empty{
  background: var(--card);
  border: 1px dashed var(--line); /* เส้นประ ให้ดูต่างจากการ์ดข้อมูลจริง */
  border-radius: var(--radius-lg);
  padding: 28px 20px;
  text-align: center;
  color: var(--muted);
}
.noti-empty-icon{ font-size: 34px; margin-bottom: 8px; opacity: .7; } /* ไอคอนใหญ่จางๆ เหนือข้อความ "ไม่มีการแจ้งเตือน" */

/* ==============================================================
   10. NOTIFICATIONS PAGE — หน้ารายการแจ้งเตือนทั้งหมด (notifications.php)
================================================================== */
.noti-page-head{ display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } /* หัวหน้า + ปุ่ม "อ่านทั้งหมด" */
.noti-head-actions{ display: flex; gap: 8px; flex-wrap: wrap; }
.noti-list{ display: grid; gap: 10px; }
.noti-card{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 14px; box-shadow: var(--shadow-sm);
}
.noti-card.is-new, .noti-card.new{ border-color: var(--primary); } /* แจ้งเตือนที่ยังไม่อ่าน ขอบจะเป็นสีฟ้าเด่นขึ้นมา */
.noti-card-top{ display: flex; justify-content: space-between; gap: 10px; align-items: flex-start; }
.noti-card-main{ display: flex; gap: 12px; align-items: flex-start; min-width: 0; }
.noti-card-icon{ /* ไอคอนวงกลมซ้ายมือของการ์ดแจ้งเตือน */
  width: 38px; height: 38px; flex-shrink: 0; border-radius: var(--radius-sm);
  background: var(--primary-soft); display: grid; place-items: center; font-size: 18px;
}
.noti-title-block{ min-width: 0; }
.noti-title-line{ display: flex; align-items: center; gap: 8px; }
.noti-title-icon{ font-size: 16px; }
.noti-card-title{ font-weight: 800; font-size: 14.5px; }
.noti-message{ color: var(--muted); font-size: 13.5px; margin-top: 4px; }
.noti-card-date{ color: var(--muted-2); font-size: 12px; white-space: nowrap; } /* เวลาที่แจ้งเตือน มุมขวาบนของการ์ด */
.noti-status{ font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 999px; background: var(--card-2); color: var(--muted); }
.noti-status.is-read, .noti-status.read{ opacity: .6; } /* อ่านแล้ว = จางลง */
.noti-actions{ display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.noti-system-section{ margin: 18px 0 8px; font-weight: 800; font-size: 13px; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } /* หัวข้อคั่นกลุ่ม เช่น "แจ้งเตือนระบบ" */

/* ==============================================================
   11. TOASTS / CONFIRM MODAL
   ------------------------------------------------------------
   - .toast-* = popup แจ้งผลลัพธ์หลังทำรายการ (สำเร็จ/ผิดพลาด/แจ้งเตือนทั่วไป)
   - .confirm-* = popup ถามยืนยันก่อนบันทึก/ลบ/logout (มาจาก appConfirm() ใน layout.php)
   สองอันนี้หน้าตาคล้ายกันมาก เลยใช้กฎร่วมกันเกือบทั้งหมด
================================================================== */
.toast-backdrop{ /* พื้นหลังมืดครอบทั้งจอตอนมี popup ขึ้น */
  position: fixed; inset: 0; z-index: 300;
  background: rgba(2,6,23,.6);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.toast-card, .confirm-card{ /* กล่อง popup ตรงกลางจอ */
  width: min(360px, 100%);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px 22px;
  text-align: center;
  box-shadow: 0 24px 60px rgba(0,0,0,.4);
}
.toast-icon, .confirm-icon{ font-size: 34px; margin-bottom: 10px; }
.toast-title, .confirm-title{ font-size: 17px; font-weight: 800; margin-bottom: 6px; }
.toast-message, .confirm-message{ color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.toast-ok{ width: 100%; background: var(--primary); border-color: var(--primary); color: #fff; } /* ปุ่ม "ตกลง" ของ toast */
.confirm-card.danger .confirm-icon{ color: var(--red); } /* popup ยืนยันการลบ ไอคอนจะแดง */
.confirm-actions{ display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } /* ปุ่ม "ยกเลิก" กับ "ยืนยัน" แบ่งครึ่งเท่ากัน */
.confirm-cancel{ background: var(--card-2); border-color: var(--line); color: var(--ink); }
.confirm-ok{ background: var(--primary); border-color: var(--primary); color: #fff; }
.confirm-ok.danger{ background: var(--red); border-color: var(--red); } /* ปุ่มยืนยันของ popup ลบ ใช้สีแดงแทนฟ้า */

/* ==============================================================
   12. EVIDENCE IMAGE VIEWER — popup ดูรูปหลักฐาน (ใบเสร็จ/รูปไมล์/รูปส่งของ)
   เปิดจากฟังก์ชัน openEvidenceImages() ใน includes/layout.php
================================================================== */
.evidence-modal{
  position: fixed; inset: 0; z-index: 300;
  background: rgba(2,6,23,.75);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.evidence-panel{
  width: min(720px, 100%); max-height: 88vh; overflow-y: auto; /* รูปเยอะให้เลื่อนดูได้ ไม่ล้นจอ */
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 16px;
}
.evidence-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; } /* หัว popup + ปุ่มปิด */
.evidence-head button{ min-height: 36px; padding: 6px 14px; }
.evidence-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; } /* มือถือ = รูปเดียวต่อแถว, จอกว้างค่อยแบ่ง 2 คอลัมน์ (หมวด 18) */
.evidence-item img{ width: 100%; border-radius: var(--radius-md); border: 1px solid var(--line); margin-bottom: 8px; }
.evidence-btn{ white-space: nowrap; } /* ปุ่ม "เปิดรูปเต็ม" ไม่ให้ตัวหนังสือตกบรรทัด */

/* ==============================================================
   12b. COMPANY INFO POPUP — ข้อมูลห้าง/บริษัท (ชื่อ, ที่อยู่, เบอร์, เลขภาษี)
   เปิดจากการ์ด "ข้อมูลห้าง" ในหน้าแรก — Admin แก้ไขได้ในป็อปอัปเดียวกัน
================================================================== */
.company-info-name{ font-size: 19px; font-weight: 800; margin: 0 0 14px; }
.company-info-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; } /* มือถือ = เรียงเป็นแถวเดียว, จอกว้างค่อยแบ่งเป็นแนวนอน (หมวด 18) */
.company-info-item{
  background: var(--card-2); border: 1px solid var(--line-soft); border-radius: var(--radius-md);
  padding: 12px 14px;
}
.company-info-item .label{ display: block; font-size: 11.5px; color: var(--muted-2); font-weight: 700; text-transform: uppercase; letter-spacing: .04em; margin-bottom: 4px; }
.company-info-item .value{ font-size: 14.5px; color: var(--ink); font-weight: 600; line-height: 1.5; white-space: pre-line; } /* pre-line = ให้ที่อยู่หลายบรรทัดขึ้นบรรทัดใหม่ได้ตามที่พิมพ์จริง */

/* ==============================================================
   13. DOCUMENT / MAINTENANCE ALERT POPUP
   popup เตือนตอนเปิดหน้า dashboard ถ้ามีเอกสารรถใกล้หมดอายุ หรือถึงรอบซ่อมบำรุง
================================================================== */
.doc-alert-backdrop{
  position: fixed; inset: 0; z-index: 250;
  background: rgba(2,6,23,.65);
  display: flex; align-items: flex-end; justify-content: center; /* เลื่อนขึ้นจากด้านล่างจอ แบบ sheet มือถือ */
}
.doc-alert-modal{
  width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg) var(--radius-lg) 0 0; /* โค้งมนแค่มุมบน เพราะชิดขอบล่างจอ */
  padding: 18px;
}
.doc-alert-list{ display: grid; gap: 10px; margin: 12px 0; }
.doc-alert-item, .maintenance-alert-item{ /* แต่ละแถวในลิสต์ เช่น "พ.ร.บ. รถ 70-0000 หมดอายุ 23 ก.ค." */
  display: flex; justify-content: space-between; gap: 10px; align-items: center;
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-md); padding: 12px 14px;
}
.doc-alert-icon{ font-size: 20px; }
.doc-alert-date{ font-size: 12.5px; color: var(--muted); }
.doc-alert-actions{ display: flex; gap: 8px; margin-top: 14px; }
.dashboard-alert-popup .doc-alert-modal{ border-radius: var(--radius-lg); } /* เวอร์ชันที่ใช้ในหน้า dashboard โดยเฉพาะ ให้โค้งมนทุกมุม (ไม่ใช่แบบ sheet) */

/* ==============================================================
   14. TRUCK SELECT CARDS — การ์ดเลือกรถในหน้า select_truck.php
================================================================== */
.truck-select-hint{ color: var(--muted); font-size: 13px; margin-bottom: 12px; } /* ข้อความอธิบายบนสุดของหน้า */
.truck-select-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; } /* มือถือ = การ์ดเดียวต่อแถว */
.truck-select-card, .truck-item{ /* การ์ดรถแต่ละคัน กดแตะเพื่อเลือก */
  display: block; width: 100%; text-align: left;
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 15px;
  color: var(--ink); cursor: pointer; box-shadow: var(--shadow-sm);
}
.truck-select-card:hover{ border-color: var(--primary); }
.truck-card-top{ display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } /* แถวบนสุดของการ์ด: ไอคอนรถ + ป้ายสถานะชิดขวา */
.truck-icon{
  width: 42px; height: 42px; border-radius: var(--radius-sm);
  background: var(--primary-soft); display: grid; place-items: center; font-size: 20px; flex-shrink: 0;
}
.truck-status{ /* ป้ายสถานะ "ใช้งาน/ซ่อม" มุมขวาบนของการ์ด */
  margin-left: auto; padding: 5px 12px; border-radius: 999px;
  background: var(--card-2); font-size: 12px; font-weight: 700; color: var(--muted);
}
.truck-main-info{ margin-bottom: 10px; }
.truck-brand{ font-size: 18px; font-weight: 800; line-height: 1.2; }   /* ยี่ห้อ+รุ่นรถ */
.truck-plate{ font-size: 16px; font-weight: 700; color: var(--primary-2); margin-top: 2px; } /* ทะเบียนรถ เน้นสีฟ้า */
.truck-yard{ font-size: 13px; color: var(--muted); margin-top: 2px; }  /* ลานประจำของรถ */
.truck-mileage-box{ /* กล่องเลขไมล์ล่าสุด อยู่ล่างสุดของการ์ด */
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0;
}
.truck-mileage-box span{ display: block; font-size: 12px; color: var(--muted); margin-bottom: 2px; }
.truck-mileage-box b{ font-size: 19px; }

/* ==============================================================
   15. VEHICLE STATUS CARD — การ์ดสรุปสถานะรถ (เช่นในหน้าวิเคราะห์ต้นทุน)
================================================================== */
.vehicle-status-grid{ display: grid; grid-template-columns: 1fr; gap: 12px; }
.vehicle-status-card{
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 15px; box-shadow: var(--shadow-sm);
}
.vsc-head{ display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; gap: 8px; }
.vsc-head b{ min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vsc-head .pill{ flex-shrink: 0; white-space: nowrap; }
.vsc-meta{ color: var(--muted); font-size: 13px; }

/* ==============================================================
   16. PROFILE PAGE — รูปโปรไฟล์พนักงาน (profile.php)
================================================================== */
.profile-photo-box{ display: flex; align-items: center; gap: 14px; margin: 12px 0 18px; }
.profile-photo{
  width: 88px; height: 88px; border-radius: var(--radius-lg);
  object-fit: cover; border: 1px solid var(--line); background: var(--card-2);
  box-shadow: var(--shadow-sm);
}
.profile-photo.placeholder{ display: flex; align-items: center; justify-content: center; font-size: 40px; color: var(--muted); } /* ยังไม่มีรูป = โชว์ไอคอนคนแทน */
.profile-upload-form{ margin: 12px 0 18px; }

/* ==============================================================
   17. RESPONSIVE TABLE — เปลี่ยนตารางให้เป็นการ์ดซ้อนกันตอนจอแคบ (มือถือ)
   ------------------------------------------------------------
   ทำงานคู่กับ JS ใน includes/layout.php ซึ่งจะ:
     1) หาว่าตารางไหนอยู่ใน .app แล้วเติม class="responsive-table" ให้อัตโนมัติ
     2) เอาข้อความหัวคอลัมน์ (จาก <th> แถวแรก) ไปใส่เป็น data-label ในทุกช่อง <td>
     3) ติด class="rt-head-row" ให้แถวหัวตาราง (เผื่อไม่มี <thead> ครอบ)
   จากนั้น CSS ด้านล่างนี้จะซ่อนแถวหัวตาราง แล้วเอาค่า data-label มาโชว์เป็น
   "ป้ายชื่อ" ด้านซ้ายของแต่ละแถวแทน กลายเป็นการ์ดแนวตั้งอ่านง่ายบนจอแคบ
================================================================== */
@media (max-width: 720px){
  /* ซ่อนแถวหัวตาราง ไม่ว่าจะห่อด้วย <thead> จริงๆ หรือเป็นแค่ <tr><th> ธรรมดาแถวแรก */
  table.responsive-table thead,
  table.responsive-table .rt-head-row{ display: none; }
  table.responsive-table, table.responsive-table tbody, table.responsive-table tr, table.responsive-table td, table.responsive-table th{
    display: block; width: 100%; /* บังคับทุกส่วนของตารางให้วางซ้อนกันแนวตั้งแทนตารางจริง */
  }
  table.responsive-table{ min-width: 0; } /* ยกเลิก min-width:640px จากหมวด 7 เพราะตอนนี้ไม่ใช่ตารางแล้ว */
  table.responsive-table tr{
    border-bottom: 1px solid var(--line); /* เส้นคั่นระหว่าง "การ์ด" แต่ละแถวข้อมูล */
    padding: 10px 12px;
  }
  table.responsive-table tr:last-child{ border-bottom: 0; }
  table.responsive-table td{
    border-bottom: 0;
    display: flex; justify-content: space-between; gap: 12px; /* ป้ายชื่อชิดซ้าย ค่าจริงชิดขวา */
    padding: 6px 0; text-align: right;
  }
  table.responsive-table td::before{
    content: attr(data-label); /* ดึงข้อความจาก data-label ที่ JS ใส่ไว้ มาโชว์เป็นป้ายชื่อ */
    color: var(--muted); font-weight: 700; text-align: left; flex-shrink: 0;
  }
}

/* ==============================================================
   17b. DASHBOARD — ส่วนเสริมเฉพาะหน้า Dashboard (dashboard.php)
   ------------------------------------------------------------
   แถบสัดส่วนสถานะรถ (.fleet-bar) และแถบสัดส่วนต้นทุน (.cost-bar)
   เป็นแท่งสีตามสัดส่วน % ล้วนๆ ด้วย CSS ธรรมดา ไม่ต้องพึ่ง JS chart library
================================================================== */
.dash-hero{
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px;
}
.dash-hero .dash-card{ padding: 16px; }
.dash-hero .dash-card b{ font-size: 26px; }

.fleet-bar-card{ margin-bottom: 14px; }
.fleet-bar{
  display: flex; width: 100%; height: 14px; border-radius: 999px;
  overflow: hidden; background: var(--card-2); margin: 10px 0 12px;
}
.fleet-bar span{ height: 100%; transition: width .3s; }
.fleet-bar .seg-good{ background: var(--green); }
.fleet-bar .seg-warn{ background: var(--orange); }
.fleet-bar .seg-danger{ background: var(--red); }
.fleet-bar .seg-muted{ background: var(--muted-2); }
.fleet-legend{ display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); }
.fleet-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.fleet-legend .dot{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.fleet-legend .dot.good{ background: var(--green); }
.fleet-legend .dot.warn{ background: var(--orange); }
.fleet-legend .dot.danger{ background: var(--red); }
.fleet-legend .dot.muted{ background: var(--muted-2); }

.cost-bar{
  display: flex; width: 100%; height: 30px; border-radius: var(--radius-sm);
  overflow: hidden; background: var(--card-2); margin: 10px 0 4px;
}
.cost-bar span{
  height: 100%; display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 800; color: #06210f; transition: width .3s;
  white-space: nowrap; overflow: hidden;
}
.cost-bar .seg-fuel{ background: var(--primary-2); color: #07213f; }
.cost-bar .seg-maint{ background: var(--orange); color: #2a1c02; }
.cost-bar .seg-toll{ background: var(--purple); color: #1c1533; }
.cost-legend{ display: flex; flex-wrap: wrap; gap: 14px; font-size: 12.5px; color: var(--muted); margin-top: 8px; }
.cost-legend span{ display: inline-flex; align-items: center; gap: 6px; }
.cost-legend .dot{ width: 9px; height: 9px; border-radius: 50%; display: inline-block; }
.cost-legend .dot.fuel{ background: var(--primary-2); }
.cost-legend .dot.maint{ background: var(--orange); }
.cost-legend .dot.toll{ background: var(--purple); }

.dash-section-head{
  display: flex; align-items: center; justify-content: space-between;
  margin: 22px 0 12px; gap: 10px; flex-wrap: wrap;
}
.dash-section-head h2{ margin: 0; font-size: 17px; }
.dash-section-head .badge{ font-size: 11px; }

@media (min-width: 640px){
  .dash-hero{ grid-template-columns: repeat(4, 1fr); }
}

/* ==============================================================
   17c. ปฏิทินวันลา (leave_calendar.php) — ตารางปฏิทินแบบ 7 คอลัมน์
================================================================== */
.calendar-grid{
  display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px;
  margin: 14px 0;
}
.calendar-weekday{
  text-align: center; font-size: 11px; font-weight: 700; color: var(--muted);
  padding: 6px 2px;
}
.calendar-cell{
  background: var(--card); border: 1px solid var(--line); border-radius: 8px;
  min-height: 64px; padding: 4px; display: flex; flex-direction: column; gap: 2px;
  overflow: hidden;
}
.calendar-cell.empty{ background: transparent; border: none; }
.calendar-cell.today{ border-color: var(--primary); border-width: 2px; }
.calendar-day-num{ font-size: 11px; color: var(--muted); font-weight: 700; }
.calendar-leave-chip{
  font-size: 9px; padding: 2px 5px; border-radius: 6px; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; display: block;
}
.calendar-more{ font-size: 9px; color: var(--muted); padding: 0 3px; }

@media (max-width: 480px){
  .calendar-cell{ min-height: 48px; }
  .calendar-weekday{ font-size: 9px; }
  .calendar-leave-chip{ font-size: 8px; }
}

/* ==============================================================
   18. DESKTOP ENHANCEMENTS — ปรับ layout ให้ใหญ่ขึ้น/แบ่งหลายคอลัมน์เมื่อจอกว้างพอ
   ------------------------------------------------------------
   ทุกอย่างด้านบนคือค่าเริ่มต้นสำหรับมือถือ ส่วนนี้จะ "เสริม" ให้สวยขึ้นเท่านั้น
   ไม่มีการ override/ลบค่าที่ตั้งไว้ก่อนหน้า (ไม่ใช้ !important) — ปลอดภัยต่อการแก้ไข
================================================================== */
@media (min-width: 768px){ /* จอแท็บเล็ต/เดสก์ท็อปเล็ก */
  .app{ padding: 20px 20px 32px; }
  .topbar{ margin: 0 -20px 18px; padding: 14px 24px; }
  .topbar-main{ gap: 16px; }
  .subtitle{ max-width: 40vw; }
  .topbar-search-row{ margin-top: 0; flex: 1; justify-content: flex-end; }
  .topbar-main + .topbar-search-row{ margin-top: 10px; }
  .topbar-nav-links{ display: flex; gap: 8px; } /* โชว์เมนูลิงก์แบบข้อความแทนเมนูล่าง เพราะจอกว้างพอแล้ว */
  .topbar-search{ max-width: 320px; }

  .hero h1{ font-size: 26px; }

  .bottom-nav{ display: none; }        /* ซ่อนเมนูล่าง เพราะมี .topbar-nav-links แทนแล้ว */
  body{ padding-bottom: 32px; }         /* เอา padding กันเมนูล่างออก เพราะไม่มีเมนูล่างแล้ว */

  /* แบ่งกริดต่างๆ เป็นหลายคอลัมน์เมื่อพื้นที่พอ */
  .menu-grid{ grid-template-columns: repeat(3, 1fr); }
  .quick-grid{ grid-template-columns: repeat(4, 1fr); }
  .data-card-grid, .dash-card-grid{ grid-template-columns: repeat(2, 1fr); }
  .mini-stats{ grid-template-columns: repeat(4, 1fr); }
  .truck-select-grid{ grid-template-columns: repeat(2, 1fr); }
  .vehicle-status-grid{ grid-template-columns: repeat(2, 1fr); }
  .company-info-grid{ grid-template-columns: repeat(3, 1fr); } /* จอกว้างพอ = เรียงที่อยู่/เบอร์/เลขภาษี เป็นแนวนอน 3 ช่องเท่ากัน (การ์ดแนวนอน) */

  .form-grid{ grid-template-columns: repeat(2, 1fr); }
  .search-row{ grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); }

  .grid{ grid-template-columns: repeat(12, 1fr); } /* ระบบกริด 12 ช่องสไตล์ Bootstrap สำหรับหน้าที่ใช้ .col-4/.col-6 */
  .col-4{ grid-column: span 4; }
  .col-6{ grid-column: span 6; }

  .confirm-actions{ grid-template-columns: 1fr 1fr; }
  .evidence-grid{ grid-template-columns: repeat(2, 1fr); } /* popup ดูรูปหลักฐาน โชว์ 2 รูปต่อแถว */

  .actions .btn, .actions button{ flex: 0 1 auto; } /* จอกว้างพอแล้ว ปุ่มไม่ต้องยืดเต็มแถว ให้กว้างตามเนื้อหาพอ */
}

@media (min-width: 1024px){ /* จอเดสก์ท็อปใหญ่ */
  .menu-grid{ grid-template-columns: repeat(4, 1fr); }
  .data-card-grid, .dash-card-grid{ grid-template-columns: repeat(3, 1fr); }
}

/* ==============================================================
   ท้ายไฟล์ — คลาสเบ็ดเตล็ดที่ใช้เฉพาะจุด
================================================================== */
.missing{ color: var(--muted-2); font-style: italic; } /* ข้อความ "ไม่พบไฟล์รูปภาพ" ในหน้า image_view.php */
.missing .path, .path{ font-family: monospace; font-size: 12px; word-break: break-all; color: var(--muted-2); margin: 8px 0; } /* โชว์ path ไฟล์ที่หาไม่เจอ ใช้ฟอนต์ monospace ให้อ่านง่าย */
pre{ white-space: pre-wrap; word-break: break-word; }
.thumb-row{ display: flex; gap: 8px; flex-wrap: wrap; }

/* กล่องเลขไมล์ล่าสุดในฟอร์มเติมน้ำมัน/บันทึกซ่อม (คนละจุดกับ .truck-mileage-box ของหน้าเลือกรถ) */
.mileage-box{
  background: var(--card-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 10px 12px; margin: 10px 0;
  font-size: 14px;
}

/* ตัวเลขระยะทางที่คำนวณอัตโนมัติในฟอร์มบันทึกเที่ยวรถ (trip.php) */
.distance-preview{
  margin: 8px 0 16px; color: var(--primary-2); font-weight: 700; font-size: 14px;
}

/* ปุ่มใหญ่ "เข้าลาน / ออกจากลาน" ในหน้า yard.php ให้กดง่ายด้วยนิ้วโป้ง */
.yard-action{
  min-height: 88px; border-radius: var(--radius-lg); font-size: 17px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px;
}
.yard-action small{ font-size: 11.5px; font-weight: 600; opacity: .85; } /* คำอธิบายเล็กใต้ชื่อปุ่ม เช่น "บันทึกเวลาเริ่มงาน" */

/* แถวไฟล์สำรองข้อมูลในหน้า backup.php */
.backup-file{
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 13px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--line); background: var(--card);
  margin: 8px 0; box-shadow: var(--shadow-sm);
}

/* ระยะห่างเพิ่มเติมให้กริดสถิติแถวที่สองในหน้า dashboard (เที่ยววันนี้/เดือนนี้ ฯลฯ) ไม่ให้ชิดแถวแรกเกินไป */
.dash-card-grid.second, .data-card-grid.second{ margin-top: 4px; }

@media (max-width: 480px){ /* จอมือถือจอเล็กมากๆ ปรับลดขนาดอีกนิดให้พอดี */
  .backup-file{ flex-direction: column; align-items: flex-start; }
  .backup-file .btn{ width: 100%; }
  .yard-action{ min-height: 76px; font-size: 15px; }
}