/* ── CSS ของธีม OK1 (รวม style.css เดิมไว้ที่นี่แล้ว) ──────────────────────────
   เคยแยกเป็น style.css + ok1.css แต่ทุกหน้าโหลดทั้งคู่เสมอ การแยกจึงได้แค่
   "หนึ่งคำขอต่อหนึ่งหน้า" เพิ่มมาเปล่า ๆ — บนเส้นทางผ่าน Cloudflare แต่ละคำขอ
   มีโอกาสค้างยาว 1–3 วินาที ยิ่งไฟล์น้อยยิ่งเจอโอกาสนั้นน้อยลง
   ลำดับด้านล่างคือลำดับเดิมที่หน้า HTML เคยโหลด (style.css ก่อน ok1.css) ห้ามสลับ
   เพราะกฎใน ok1.css หลายข้อตั้งใจให้ทับของ style.css */

/* ── เดิมอยู่ใน style.css ─────────────────────────────────────────────── */

:root {
  --primary-color: #278445;
  --background-color: #f7f7f7;
  --text-color: #282828;
  --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bg-h-1: linear-gradient(45deg, #278445, #33944f);
  --bt-b-1: #278445;
  --bt-b-2: #33944f;
}

.dark-theme {
  --primary-color: #2c3e50;
  --background-color: #cfcfcf;
  --text-color: #282828;
  --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bg-h-1: linear-gradient(45deg, #171718, #222222);
  --bt-b-1: #2c3e50;
  --bt-b-2: #26394d;
}

.light-theme {
  --primary-color: #3498db;
  --background-color: #c7dffe;
  --text-color: #282828;
  --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bg-h-1: linear-gradient(45deg, #436fec, #61b9dd);
  --bt-b-1: #007bff;
  --bt-b-2: #0056b3;
}

.light-theme-2 {
  --primary-color: #278445;
  --background-color: #f7f7f7;
  --text-color: #282828;
  --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bg-h-1: linear-gradient(45deg, #278445, #33944f);
  --bt-b-1: #278445;
  --bt-b-2: #33944f;
}

.light-theme-3 {
  --primary-color: #1656d1;
  --background-color: #f7f7f7;
  --text-color: #282828;
  --font-family: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Helvetica Neue",Arial,"Noto Sans","Liberation Sans",sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol","Noto Color Emoji";
  --bg-h-1: linear-gradient(45deg, #286589, #2452ab);
  --bt-b-1: #274c84;
  --bt-b-2: #1656d1;
}


body {
  padding-top: 48px !important; /* ระยะห่างเท่ากับความสูงของ navbar (ปรับลดตาม navbar ที่บางลง) */
}
body {
  font-family: Arial, sans-serif;
  background-color: #ffffff;
  color: #292a2c;
}

body h1 {
  font-size: 2.5rem;
  text-align: center;
  margin-top: 20px;
}

/* body .btn-primary {
  background: linear-gradient(45deg, #278445, #33944f) !important;
  border: none;
}

body .btn-primary:hover {
  background: linear-gradient(45deg, #278445, #175027) !important;
} */

/* Remove the navbar's default margin-bottom and rounded borders */
.navbar {
  margin-bottom: 0;
  border-radius: 0;
  min-height: 48px;
}

/* Set height of the grid so .sidenav can be 100% (adjust as needed) */
.row.content {
  height: 450px
}

/* Set gray background color and 100% height */
.sidenav {
  padding-top: 20px;
  background-color: #f1f1f1;
  height: 100%;
}

/* Set black background color, white text and some padding */
footer {
  background-color: #555;
  color: white;
  padding: 15px;
}

/* On small screens, set height to 'auto' for sidenav and grid */
@media screen and (max-width: 767px) {
  .sidenav {
    height: auto;
    padding: 15px;
  }

  .row.content {
    height: auto;
  }
}

/* ทำให้หน้า loading อยู่กลางหน้าจอ
 *
 * ⚠️ ตัวนี้คลุมทั้งจอและรับคลิกไว้หมด ถ้า js ไม่ได้สั่งปิด (คำขอค้าง / โหลด module ไม่สำเร็จ)
 * ผู้ใช้จะกดอะไรไม่ได้เลยทั้งหน้า — ลูกค้าเจอจริงบน Android: "กดอะไรไม่ได้เลย"
 * จึงตั้งให้มันยอมแพ้เองใน 20 วินาที ทำด้วย CSS ไม่ใช่ js เพราะต้องทำงานแม้ js จะพังไปแล้ว
 * (หน้าที่โหลดข้อมูลนานกว่านั้นจะเห็นหน้าจริงข้างล่างแทน ซึ่งดีกว่าโดนบล็อกถาวร) */
@keyframes loaderGiveUp {
  to { opacity: 0; visibility: hidden; pointer-events: none; }
}

.loading {
  animation: loaderGiveUp 0.4s ease 20s forwards;
  display: flex;
  justify-content: center;
  align-items: center;
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  min-height: 100dvh;
  background:
    radial-gradient(circle at 50% 42%, rgb(67 111 236 / 18%), transparent 38%),
    rgb(8 15 28 / 82%);
  z-index: 1002;
  flex-direction: column;
  color: #ffffff;
  text-align: center;
}

.spinner {
  position: relative;
  width: 82px;
  height: 82px;
  border: 0;
  border-radius: 22px;
  background: #071633 url('/img/ok1next-icon-192.png?v=20261015a') center / cover no-repeat;
  box-shadow:
    0 14px 34px rgb(0 0 0 / 35%),
    0 0 0 1px rgb(255 255 255 / 16%);
  animation: ok1LogoPulse 1.65s ease-in-out infinite;
}

.spinner::before {
  content: '';
  position: absolute;
  inset: -11px;
  border: 3px solid rgb(255 255 255 / 16%);
  border-top-color: #2ee6a0;
  border-right-color: #2f7bff;
  border-radius: 29px;
  animation: ok1LoaderOrbit 1.05s linear infinite;
}

.spinner::after {
  content: '';
  position: absolute;
  inset: 5px;
  border-radius: 17px;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 13%);
}

.loading p {
  margin: 25px 20px 0;
  color: rgb(255 255 255 / 92%);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .2px;
  text-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

@keyframes ok1LoaderOrbit {
  to { transform: rotate(360deg); }
}

@keyframes ok1LogoPulse {
  0%, 100% { transform: scale(.96); box-shadow: 0 12px 30px rgb(0 0 0 / 32%), 0 0 0 1px rgb(255 255 255 / 14%); }
  50% { transform: scale(1.03); box-shadow: 0 16px 38px rgb(0 0 0 / 38%), 0 0 24px rgb(97 185 221 / 24%); }
}

@media (prefers-reduced-motion: reduce) {
  .spinner { animation: none; }
  .spinner::before { animation-duration: 2.2s; }
}

.navbar-dark .navbar-toggler {
  color: rgb(255 255 255 / 98%) !important;
  border-color: rgb(255 255 255) !important;
}

.navbar-dark .navbar-nav .nav-link {
  color: #fffffff0 !important;
}

/* ลดขนาดเมนู navbar ให้บางลง ไม่ให้ตัวอักษรตกบรรทัดจนแถบเมนูดูหนา */
.navbar .nav-link,
.navbar-nav .nav-link {
  font-size: 13px !important;
  padding: 6px 8px !important;
  white-space: nowrap;
}

.nav-link i {
  margin-right: 4px;
  /* เพิ่มช่องว่างระหว่างไอคอนกับข้อความ */
  font-size: 13px;
  /* ขนาดไอคอน */
}

.list-group-item i {
  margin-right: 10px;
}

.badgeMenu {
  padding: 10px !important;
  border-radius: 10px !important;
  box-shadow: 3px 3px #88888857;
  background-color: var(--bt-b-2) !important;
}

.boxBadgeMenu {
  margin-top: 5px;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

.dkBoxTex {
  font-size: 14px;
}

.dkli {
  padding: 2px !important;
  flex-direction: column;
  max-width: 380px;
  margin: 2px;
}

.showBodge {
  display: flex;
  justify-content: center;
  align-items: center;
}

.boxOnlineCarAll {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.onlineCarAll {
  padding: 8px;
  border-radius: 18px;
  margin: 5px;
}

.inputGroup {
  width: 98vw;
}

.bg-dark {
  background: var(--bg-h-1) !important;
}

a:link,
a:visited {
  color: #434649;
}

a:hover,
a:active {
  color: #434649;
}

.reportMenu {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border-radius: 25px !important;
  padding: 20px;
}

#showUser {
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 13px;
  color: #ffffff;
  background: #464747;
  border-radius: 20px;
  margin: 3px 8px;
  padding: 4px 12px;
  white-space: nowrap;
}

.modal {
  z-index: 10003 !important;
}

@media only screen and (min-width: 768px) and (max-width: 1024px) and (orientation: portrait) {
  .navbar-menu {
    display: none;
  }

  .navbar-toggle {
    display: block;
  }
}

@media only screen and (min-width: 1024px) and (max-width: 1366px) and (orientation: landscape) {
  .navbar-menu {
    display: none;
  }

  .navbar-toggle {
    display: block;
  }
}

hr {
  margin: 0px !important;
}

.navbar-brand{
  font-size: 16px !important;
  font-weight: bold;
  padding-top: 4px !important;
  padding-bottom: 4px !important;
}

.loginBG{
  height: 25vh;
  width: 100%;
  background: var(--bg-h-1) !important;
  border-radius: 0px 0px 20px 20px;
}

/* ── เดิมอยู่ใน ok1.css ───────────────────────────────────────────────── */
/* ── ส่วนที่ธีม OK1 เพิ่มจาก CSS ของระบบเดิม ───────────────────────────────────
   ผัง/ขนาดของ .boxBody .desktopBox #map .mobileBox .listCar ปล่อยให้ css/map.css
   ที่ยกมาเป็นคนกำหนดทั้งหมด — ที่นี่มีเฉพาะของที่ระบบเดิมเขียนไว้ใน <style> ของแต่ละหน้า
   (35 หน้า) กับของใหม่ที่เราเพิ่มเอง */

/* map.css คำนวณความสูงจาก calc(100vh - 56px) ทั้งไฟล์ — navbar ต้องสูง 56px พอดี
   ไม่งั้นแผนที่จะล้นจอหรือเหลือแถบขาวด้านล่าง
   แต่เครื่องที่ตั้งฟอนต์ระบบใหญ่ navbar สูงกว่า 56px ได้ — theme.js วัดของจริงแล้วตั้ง
   --ok1-nav-h ให้ body เว้นที่ตามนั้น (หน้าแผนที่ก็วัดความสูงที่เหลือจากค่านี้เหมือนกัน) */
.navbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1030;
  min-height: 56px;
  background: var(--bg-h-1);
  box-shadow: 0 2px 5px rgba(0, 0, 0, .1);
}
body { padding-top: var(--ok1-nav-h, 56px) !important; margin: 0; overflow-x: hidden; }
html, body { height: 100%; }

.navbar .nav-link { color: #ffffffee !important; }
.navbar .nav-link:hover,
.navbar .nav-link.active { color: #fff !important; }
.navbar-brand { color: #fff !important; }

/* โลโก้แนวนอน OK1 GPS NEXT บน navbar — ป้ายกรมท่าแบบพื้นไอคอน อ่านชัดบนทุกชุดสีของ navbar */
.navbar-brand.ok1-brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-right: 12px;
  padding: 3px 13px 3px 3px !important;
  border-radius: 12px;
  background: linear-gradient(180deg, #0d2453, #071633);
  box-shadow: 0 0 0 1px rgb(255 255 255 / 16%), 0 4px 12px rgb(0 0 0 / 18%);
  line-height: 1;
  text-decoration: none;
}
.ok1-brand img { width: 30px; height: 30px; border-radius: 8px; flex: none; }
.ok1-wordmark {
  font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif;
  font-size: 16px;
  font-style: italic;
  font-weight: 900;
  letter-spacing: .01em;
  white-space: nowrap;
}
.ok1-wordmark .w-ok1 { color: #fff; }
.ok1-wordmark .w-gps { color: #d6e2f7; }
.ok1-wordmark .w-next {
  padding-right: 2px;
  background: linear-gradient(100deg, #5ee36f, #2ee6a0 45%, #22c7e8);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
/* จอแคบมาก (มีปุ่มรีเฟรช + แฮมเบอร์เกอร์อยู่แถวเดียวกัน) ซ่อนคำว่า GPS ให้โลโก้ไม่ดันปุ่มตกบรรทัด */
@media (max-width: 359px) {
  .ok1-wordmark .w-gps { display: none; }
}

/* ป้ายชื่อผู้ใช้มุมขวาบน — ระบบเดิมเป็นเม็ดยาสีเข้มมีกระดิ่งอยู่ข้างหน้า */
.ok1-user-pill {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(0, 0, 0, .35); color: #fff;
  border-radius: 999px; padding: 4px 12px; font-size: 13px; font-weight: 600;
}

.ok1-user-pill { position: relative; display: inline-flex; align-items: center; gap: 7px; color: #fff !important; text-decoration: none !important; }
.ok1-nav-avatar { width: 25px; height: 25px; border-radius: 50%; object-fit: cover; border: 2px solid rgba(255,255,255,.85); }
.ok1-nav-avatar-fallback { display: inline-grid; place-items: center; background: rgba(255,255,255,.18); }
.ok1-unread-dot, .ok1-user-unread-dot { display: none; width: 9px; height: 9px; border-radius: 50%; background: #ef233c; border: 2px solid #fff; box-shadow: 0 0 0 2px rgba(239,35,60,.25); }
.ok1-unread-dot { position: absolute; top: 5px; right: 3px; }
.ok1-user-unread-dot { position: absolute; top: -1px; right: -1px; }
.ok1-pill-bell { position: relative; display: inline-flex; }
.ok1-pill-bell .ok1-user-unread-dot { top: -5px; right: -6px; }
.navbar.has-unread-alerts .ok1-unread-dot,
.navbar.has-unread-alerts .ok1-user-unread-dot { display: block; }
.navbar .nav-link { position: relative; }

/* ── Alerts page ────────────────────────────────────────────────────────────
   Keep these rules in the shared theme stylesheet. A missing page-specific
   stylesheet otherwise falls through to the SPA route and leaves this page
   as unstyled markup. */
.ok-alert-page {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 24px 16px 40px;
}
.ok-alert-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 22px;
  color: #fff;
  border-radius: 16px;
  background: linear-gradient(135deg, #315eea, #16a8d5);
  box-shadow: 0 12px 28px rgba(49, 94, 234, .2);
}
.ok-alert-head h1 { margin: 0 0 4px; font-size: 23px; font-weight: 700; }
.ok-alert-head p { margin: 0; opacity: .92; }
.ok-alert-head .btn { flex: 0 0 auto; font-weight: 600; }
#unreadWrap { color: #fff3a3; }
.ok-alert-filters {
  display: grid;
  grid-template-columns: minmax(220px, 2fr) repeat(3, minmax(120px, 1fr)) auto;
  gap: 8px;
  margin: 14px 0;
  padding: 12px;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 5px 16px rgba(15, 23, 42, .05);
}
.ok-alert-list { display: grid; gap: 8px; }
.ok-alert-card {
  position: relative;
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr) auto;
  gap: 11px;
  padding: 13px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
  border-radius: 13px;
  background: #fff;
  box-shadow: 0 4px 14px rgba(15, 23, 42, .04);
}
.ok-alert-card.unread { border-color: #f5cf65; background: #fffcf1; }
.ok-alert-card.unread::before {
  content: "";
  position: absolute;
  inset: 0 auto 0 0;
  width: 4px;
  background: #f59e0b;
}
.ok-alert-icon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--alert-color);
  border-radius: 12px;
  background: var(--alert-bg);
  font-size: 18px;
}
.ok-alert-title { color: #172033; font-weight: 700; }
.ok-alert-meta,
.ok-alert-message,
.ok-alert-time { color: #64748b; font-size: 12px; }
.ok-alert-message { margin-top: 3px; overflow-wrap: anywhere; }
.ok-alert-side { text-align: right; white-space: nowrap; }
.ok-alert-read {
  margin-top: 6px;
  padding: 4px 9px;
  color: #fff;
  border: 0;
  border-radius: 7px;
  background: #315eea;
  font-size: 11px;
  cursor: pointer;
}
.ok-alert-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  margin-top: 16px;
}
.ok-alert-empty {
  padding: 55px 15px;
  color: #94a3b8;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
  background: #fff;
  text-align: center;
}
.ok-alert-empty i { display: block; margin-bottom: 8px; font-size: 40px; }

@media (max-width: 900px) {
  .ok-alert-filters { grid-template-columns: 1fr 1fr; }
  .ok-alert-filters #searchFilter { grid-column: 1 / -1; }
  .ok-alert-filters #btnReload { grid-column: 1 / -1; }
}
@media (max-width: 576px) {
  .ok-alert-page { padding: 12px 10px 28px; }
  .ok-alert-head { align-items: flex-start; padding: 15px; }
  .ok-alert-head h1 { font-size: 19px; }
  .ok-alert-head .btn { padding: 6px 9px; font-size: 12px; }
  .ok-alert-filters { grid-template-columns: 1fr; }
  .ok-alert-filters #searchFilter,
  .ok-alert-filters #btnReload { grid-column: auto; }
  .ok-alert-card { grid-template-columns: 34px minmax(0, 1fr); padding: 10px; }
  .ok-alert-icon { width: 34px; height: 34px; }
  .ok-alert-side { grid-column: 2; text-align: left; }
  .ok-alert-time { margin-right: 8px; }
  .ok-alert-pager { gap: 8px; }
  .ok-alert-pager .btn { padding: 6px 9px; font-size: 12px; }
}

/* ── ปุ่มรีเฟรช + ตัวนับถอยหลังบนแถบเมนู ─────────────────────────────────────
   ย้ายออกมาจากตับปุ่มขวามือของแผนที่ (ปุ่มเยอะจนไล่หาไม่เจอ) มาไว้ที่แถบบน
   พร้อมบอกว่าอีกกี่วินาทีจะดึงข้อมูลรอบถัดไป */
.ok1-refresh-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin: 0 10px;
  padding: 3px 11px;
  border: 1px solid rgba(255, 255, 255, .5);
  border-radius: 999px;
  background: rgba(255, 255, 255, .18);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
}

.ok1-refresh-chip:hover { background: rgba(255, 255, 255, .32); }

.ok1-refresh-chip b {
  min-width: 17px;
  text-align: right;
  font-variant-numeric: tabular-nums; /* ตัวเลขไม่ขยับซ้าย-ขวาตอนนับจาก 10 ลง 9 */
}

.ok1-refresh-chip.spin i { animation: ok1-refresh-spin .8s linear infinite; }

@keyframes ok1-refresh-spin {
  to { transform: rotate(360deg); }
}

@media (max-width: 991px) {
  /* จอแคบ: ดันไปชิดปุ่มแฮมเบอร์เกอร์ จะได้ไม่ไปเบียดชื่อแบรนด์ */
  .ok1-refresh-chip { margin-left: auto; }
}

/* ลิงก์ไปหน้ารายละเอียด/ตั้งค่ารถ ใน popup ของหมุดบนแผนที่ */
.ok1-pop-link {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  margin-top: 8px; padding: 6px 10px; border-radius: 8px;
  background: var(--bt-b-1); color: #fff !important;
  font-size: 12.5px; font-weight: 600; text-decoration: none !important;
}
.ok1-pop-link:hover { filter: brightness(1.08); color: #fff !important; }

/* ── หมุดรถ ───────────────────────────────────────────────────────────────── */
/* เงา/ขอบขาวอยู่ที่กรอบนอก (.vehicle-marker) ไม่ใช่ .vehicle-icon — filter ของ .vehicle-icon คือ
   สีสถานะ (carFilter ใส่ inline) ถ้าตั้ง filter ที่ตัวนั้นจะทับสีสถานะทิ้ง: เคยทำให้รถที่กดเลือก
   จากรายการเปลี่ยนสีเป็นสีดิบของรูป · filter ของพ่อซ้อนบนของลูกได้ สีสถานะจึงอยู่ครบ */
.vehicle-marker {
  background: none; border: none;
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 1px #fff) drop-shadow(0 2px 3px rgba(0, 0, 0, .55));
}
.vehicle-icon {
  display: grid; place-items: center; width: 100%; height: 100%;
  transition: transform .25s linear;
}
.vehicle-marker.vehicle-marker-selected {
  filter: drop-shadow(0 0 1px #fff) drop-shadow(0 0 2px #fff) drop-shadow(0 0 6px #ffb800) drop-shadow(0 0 4px #ffb800);
}

/* ป้ายสำเร็จรูป (cn_*) กับรูปที่ลูกค้าอัปโหลด (up_… หรือ data:) เป็นวงกลมนิ่ง ๆ ตามระบบเดิม
   (map.js เดิม: พื้น aliceblue · ขอบขาว 3px · เงา · border-radius 50% · ไม่หมุนตามทิศ)
   theme-map.js ใส่ class ตามชนิดไอคอนให้ · รูปถูกยืดเต็มวง (fill) เหมือนระบบเดิม เพราะรูป
   ชื่อคนขับส่วนใหญ่กว้างกว่าสูง ถ้า contain จะเหลือแถบบาง ๆ กลางวงอ่านไม่ออก */
.vehicle-icon--badge img, .vehicle-icon--upload img { border-radius: 50%; object-fit: fill; }
.vehicle-icon--upload {
  background: aliceblue; border-radius: 50%; border: 3px solid #fff;
  box-shadow: 0 0 8px rgba(0, 0, 0, .3);
}

/* แบบเดียวกันสำหรับ <img> ในรายการ/การ์ด/หน้ารถ (theme.js carImgClass ใส่ class ให้)
   object-fit ต้อง !important เพราะ .car-img-list/.vcard-head img/.vp-hero > img ตั้ง contain
   ไว้ด้วย specificity เท่ากันและบางไฟล์โหลดทีหลัง */
img.car-img--badge, img.car-img--upload { border-radius: 50%; object-fit: fill !important; }
img.car-img--upload {
  background: aliceblue; border: 2px solid #fff; box-shadow: 0 0 6px rgba(0, 0, 0, .3);
}

/* ป้ายทะเบียนใต้รถ — .custom-label มาจาก map.css เดิมแล้ว ตรงนี้แค่ถอดกรอบ/ลูกศร
   ของ tooltip Leaflet ออก ให้เหลือเฉพาะกล่องดำของระบบเดิม */
.leaflet-tooltip.ok1-vname {
  background: transparent; border: none; box-shadow: none; padding: 0;
  width: 70px; height: 18px;
}
.leaflet-tooltip.ok1-vname::before { display: none; }

.ok1-cluster {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--bg-h-1); color: #fff; font-weight: 800; border: 3px solid #fff;
  box-shadow: 0 4px 14px rgba(0, 0, 0, .35);
}

.ok1-poi {
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
  color: #fff; border: 2px solid #fff; box-shadow: 0 2px 8px rgba(0, 0, 0, .25); font-size: 13px;
}
.ok1-poi-name {
  background: rgba(255, 255, 255, .9); border: 1px solid #ccc; border-radius: 4px;
  padding: 0 3px; font-size: 10px; box-shadow: none;
}
.ok1-poi-name::before { display: none; }

/* ── แผงรายการรถ ─────────────────────────────────────────────────────────── */
/* รูปรถในการ์ด: ระบบเดิมกำหนดด้วย inline style ย้ายมารวมไว้ที่เดียว */
.car-img-list { width: 50px; height: 50px; object-fit: contain; margin: 5px; }
/* คันที่กำลังเลือกอยู่ ต้องเห็นชัดว่าอันไหนตรงกับหมุดที่โฟกัสบนแผนที่ */
.dkli-active { outline: 2px solid var(--bt-b-1); outline-offset: -2px; }

/* ── ตารางรายงาน / รายการรถ (หน้าที่ระบบเดิมไม่มีแบบตาราง) ────────────────── */
.ok1-table-wrap { overflow: auto; max-height: calc(100vh - 240px); }
.ok1-table-wrap table { font-size: 13px; }
.ok1-table-wrap thead th { position: sticky; top: 0; background: #f1f1f1; z-index: 1; }

/* ── หน้าเข้าสู่ระบบ ──────────────────────────────────────────────────────── */
/* ผัง/ขนาดใช้ของเดิมทั้งหมด (.loginBG 25vh + .loginBox -10vh + #map 85vh ใน login.css)
   ที่เพิ่มมีแค่: หน้านี้ไม่มี navbar แบบหน้าอื่น จึงไม่ต้องเว้นที่ 56px เต็ม
   และกันแผนที่ล้นจอบนเครื่องแคบ */
body.ok1-login { padding-top: 48px !important; }
body.ok1-login #map { max-width: 100%; }
@media (max-width: 900px) {
  body.ok1-login #map { display: none; }
  body.ok1-login .loginBox { margin: -10vh auto 0; }
}

/* ── สรุปผลหน้าประวัติ ────────────────────────────────────────────────────── */
/* Bootstrap 4 ไม่มี utility gap-* (นั่นของ BS5) ตัวเลขกับไอคอนเลยติดกันจนอ่านยาก */
#historySummary span { margin-right: 16px; white-space: nowrap; }
#historySummary i { margin-right: 4px; }

/* ── หน้ารายการรถ: การ์ดเรียงเป็นตาราง ────────────────────────────────────── */
/* ระบบเดิมใช้ flex-wrap ตรง ๆ ทำให้การ์ดกว้างไม่เท่ากันเวลาแถวสุดท้ายมีใบเดียว
   ใช้ grid แทนเพื่อให้ทุกใบกว้างเท่ากันทุกแถว แต่คงหน้าตาการ์ดเดิมไว้ */
.ok1-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(330px, 1fr));
  gap: 10px;
  padding: 0 12px 20px;
  background: none;
}
.ok1-card-grid .dkli {
  flex-direction: column !important;
  align-items: stretch !important;
  border-radius: 10px;
  border: 1px solid #e3e8ef;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .06);
}
.boxOnlineCarAll { padding-top: 8px; }

/* .mini-filter-btn ตั้ง flex:1 ไว้เพื่อให้พอดีแผงแคบข้างแผนที่ พอมาอยู่หน้าเต็มจอ
   มันเลยยืดเต็มความกว้าง — จำกัดความกว้างของกลุ่มปุ่มเฉพาะหน้ารายการรถ */
.boxOnlineCarAll .mini-filter-group,
.boxOnlineCarAll .sort-btn-group {
  max-width: 720px;
  margin: 0 auto;
}
.boxOnlineCarAll .searchBox h5 { white-space: nowrap; }

/* ── หน้าเมนูรายงาน ───────────────────────────────────────────────────────── */
/* ปุ่มใหญ่แบบระบบเดิม: ไอคอนบน–ข้อความล่าง สูงเท่ากันทุกใบไม่ว่าชื่อจะยาวแค่ไหน */
.reportMenu {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: 118px; gap: 8px; white-space: normal; line-height: 1.25;
  background: var(--bg-h-1); border: none; border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .12);
}
.reportMenu i { font-size: 34px; }
.reportMenu span { font-size: 14px; font-weight: 600; }
.reportMenu:hover { filter: brightness(1.08); }
#reportMenu h4 { border-left: 5px solid var(--bt-b-1); padding-left: 10px; font-size: 17px; }

/* ── หน้าประวัติเดินทาง ───────────────────────────────────────────────────── */
/* ผังและแผงลอยทั้งหมดของหน้านั้นอยู่ที่ css/history.css (ใช้หน้าเดียว ไม่ปนที่นี่) */

/* ── แถบปุ่มลอยมุมขวาบนของแผนที่ ──────────────────────────────────────────── */
/* ระบบเดิมเรียง L.control ทีละอันจนกลายเป็นตับปุ่มสี่เหลี่ยมมุมมน */
.ok1-mapbtn { border: none !important; box-shadow: 0 2px 6px rgba(0, 0, 0, .28); margin-bottom: 6px !important; }
.ok1-mapbtn button {
  width: 38px; height: 38px; padding: 0; border: none; cursor: pointer;
  background: #fff; border-radius: 8px; display: grid; place-items: center;
  color: #334155; font-size: 17px;
}
.ok1-mapbtn button:hover { background: #eef4ff; color: var(--bt-b-1); }
.ok1-mapbtn img { width: 24px; height: 24px; object-fit: contain; }

@media (max-width: 767px) {
  /* บนมือถือแผงล่างกินพื้นที่ ปุ่มต้องเล็กลงและไม่ทับปุ่มซูม */
  .ok1-mapbtn button { width: 34px; height: 34px; font-size: 15px; }
  .ok1-mapbtn img { width: 21px; height: 21px; }
}

/* ── หน้าจุดสนใจบนมือถือ ──────────────────────────────────────────────────── */
/* ชื่อคลาสของ body ต้องลงท้าย -page เสมอ: .ok1-poi ถูกใช้เป็นคลาสของหมุด POI ไปแล้ว
   (วงกลม 26px display:grid) เผลอเอามาใส่ที่ body ทีเดียว ทั้งหน้าหดเหลือ 26px */
/* map.css ซ่อน .desktopBox บนมือถือ เพราะหน้าแผนที่ย้ายไปใช้ .mobileBox แทน
   แต่หน้า POI ไม่มี .mobileBox — ถ้าปล่อยไว้รายการจุดสนใจจะหายไปทั้งหน้า
   หน้านี้จึงวางเป็นแผนที่บน–รายการล่างแทน */
@media (max-width: 767px) {
  body.ok1-poi-page .boxBody { flex-direction: column; height: calc(100vh - var(--ok1-nav-h, 56px)); }
  /* html วางแผงไว้ก่อนแผนที่ (ผังจอใหญ่) — บนมือถือให้แผนที่ขึ้นก่อนด้วย order */
  body.ok1-poi-page #map { height: 45vh; flex: none; order: 1; }
  body.ok1-poi-page .desktopBox {
    display: block !important; order: 2;
    width: 100% !important; min-width: 0 !important; height: auto; flex: 1 1 auto;
    overflow-y: auto; padding: 8px;
  }
  body.ok1-poi-page .resizer { display: none; }
}

/* ── หน้ากล้อง (ผังการ์ดเดียวกับ user-web) ────────────────────────────────── */
.cap-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cap-stat { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; padding: 10px 14px; }
.cap-stat b { display: block; font-size: 22px; line-height: 1.1; }
.cap-stat span { font-size: 12px; color: #6b7280; }
.cap-round {
  display: flex; justify-content: space-between; align-items: center;
  background: #eef4ff; border-radius: 8px; padding: 6px 12px; margin: 14px 0 8px; font-weight: 600;
}
.cap-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.cap-card { position: relative; background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; overflow: hidden; }
.cap-card img { width: 100%; height: 150px; object-fit: cover; display: block; }
.cap-mark { position: absolute; top: 8px; left: 8px; z-index: 2; }
.cap-noimg {
  height: 150px; display: grid; place-items: center; gap: 4px;
  background: #f4f6f9; color: #94a3b8; font-size: 13px;
}
.cap-noimg i { font-size: 26px; }
.cap-body { padding: 8px 10px 10px; }

/* ── หน้าแจ้งเตือน ────────────────────────────────────────────────────────── */
/* แถวที่ยังไม่อ่านต้องเห็นชัดจากการกวาดตา ไม่ใช่ต้องอ่านป้ายทีละอัน */
.alert-unread { background: #fff8e1; cursor: pointer; }
.alert-unread:hover { background: #fff3cd; }

/* ── หน้ากล้อง ─────────────────────────────────────────────────────────────── */
/* ช่องกล้องดูสด: จำนวนคอลัมน์ตามจำนวนกล้องที่เปิด ไม่ตรึงไว้สองช่องเสมอ
   เปิดกล้องเดียวแล้วเหลือช่องว่างครึ่งจอคือเสียพื้นที่ดูภาพไปเปล่า ๆ */
.ok1-cam-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 12px; }
.ok1-cam-cell { position: relative; background: #0b1220; border-radius: 10px; overflow: hidden; }
.ok1-cam-video { width: 100%; aspect-ratio: 16/9; display: block; background: #0b1220; object-fit: contain; }
.ok1-cam-tag {
  position: absolute; top: 8px; left: 8px; z-index: 2; padding: 3px 9px; border-radius: 20px;
  background: rgba(11,18,32,.72); color: #fff; font-size: 11px; font-weight: 700;
}
.ok1-cam-msg {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  color: #cbd5e1; font-size: 13px; text-align: center; padding: 16px; background: rgba(11,18,32,.6);
}
/* รายการคลิปยาวได้เป็นร้อยไฟล์ ต้องเลื่อนในกล่องตัวเอง ไม่ใช่ดันหน้าเว็บให้ยาวลงไปเรื่อย ๆ */
.ok1-cam-list { max-height: 420px; overflow-y: auto; }
.ok1-cam-grid-sm { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.ok1-cam-evcard { background: #fff; border: 1px solid #e3e8ef; border-radius: 10px; overflow: hidden; }
.ok1-cam-evcard img, .ok1-cam-evcard video { width: 100%; height: 140px; object-fit: cover; display: block; background: #0b1220; }

/* แถวคลิปที่เก็บไว้ = ปุ่มเลือกดู + ปุ่มโหลดเก็บไว้ อยู่คนละที่กันในแถวเดียว
   (ถ้าซ้อนปุ่มในปุ่ม HTML ไม่ยอม และการกดโหลดจะกลายเป็นการกดเลือกดูไปด้วย) */
.ok1-clip-pick {
  flex: 1 1 auto; min-width: 0; text-align: left; border: 0; background: none;
  font: inherit; color: inherit; cursor: pointer; padding: 8px 12px;
}
.ok1-clip-pick:hover { background: #f4f7fb; }
.list-group-item.active .ok1-clip-pick { color: #fff; }
.list-group-item.active .ok1-clip-pick .text-muted { color: rgba(255,255,255,.75) !important; }
.ok1-clip-dl {
  flex: 0 0 auto; display: flex; align-items: center; padding: 0 14px;
  color: #1a78ff; border-left: 1px solid #e3e8ef; text-decoration: none;
}
.ok1-clip-dl:hover { background: #eaf2ff; color: #0d5bd0; }
.ok1-clip-dl-inline { color: #1a78ff; margin-left: 6px; text-decoration: none; }
/* แท็บที่ปิดอยู่ (รถไม่มีกล้อง) ต้องกดไม่ได้จริง ไม่ใช่แค่ดูจาง */
#camTabs .nav-link.disabled { pointer-events: none; opacity: .45; }

/* ── เมนูหน้าปัจจุบัน ─────────────────────────────────────────────────────────
   เดิม .active แค่ทำตัวอักษรขาวทึบ ต่างจากเมนูอื่น (ขาว 93%) จนดูไม่ออกว่าอยู่หน้าไหน
   ใส่พื้นทึบ + เส้นใต้ ให้เห็นชัดทั้งแถบบนจอใหญ่และเมนูพับบนมือถือ */
.navbar .nav-item.active > .nav-link,
.navbar .nav-link.active {
  background: rgba(255, 255, 255, .22);
  border-radius: 8px;
  font-weight: 700;
  box-shadow: inset 0 -3px 0 #fff;
}
@media (max-width: 991px) {
  .navbar .nav-link.active { box-shadow: inset 4px 0 0 #fff; padding-left: 12px; }
}
.ok1-readonly-tag {
  background: #fde68a; color: #92400e; border-radius: 999px;
  padding: 0 8px; font-size: 11px; font-weight: 700;
}
/* ผู้ใช้ลูกดูอย่างเดียว — API ปฏิเสธการแก้อยู่แล้ว ซ่อนส่วนที่จัดการบัญชีไม่ให้งง */
body.ok1-subuser .ok1-owner-only { display: none !important; }

/* ── สีสถานะ (ตั้งจาก theme.js ตามชุดสีที่ผู้ใช้เลือก) ───────────────────────── */
:root {
  --ok1-st-run: #1a78ff; --ok1-st-idle: #f59e0b; --ok1-st-park: #22c55e;
  --ok1-st-off: #ef4444; --ok1-st-expired: #94a3b8;
}

/* ── ไฟเลี้ยงถูกตัด ───────────────────────────────────────────────────────── */
.ok1-power-chip { color: #b45309; font-weight: 600; }
.ok1-power-chip.is-cut { color: #fff !important; background: #dc2626; border-radius: 6px; padding: 0 6px; }
.ok1-power-text { color: #dc2626; font-weight: 700; }

/* ── ปุ่มโทร/LINE ต่ออายุ (รถหมดอายุ) ──────────────────────────────────────── */
.ok1-renew { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.ok1-renew-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 12px; border-radius: 999px; font-size: 13px; font-weight: 700;
  color: #fff !important; text-decoration: none !important;
}
.ok1-renew-tel { background: #2563eb; }
.ok1-renew-line { background: #06c755; }
.ok1-renew-btn:hover { filter: brightness(1.08); }

/* ── popup รถบนแผนที่ ─────────────────────────────────────────────────────── */
.ok1-pop { font-size: 12.5px; line-height: 1.45; }
.ok1-pop-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ok1-pop-head b { font-size: 14px; }
.ok1-pop-state { border: 1px solid; border-radius: 999px; padding: 0 8px; font-size: 11px; font-weight: 700; white-space: nowrap; }
.ok1-pop-speed { margin: 2px 0 4px; color: #6b7280; }
.ok1-pop-speed b { font-size: 22px; margin-right: 2px; }
.ok1-pop-chips { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 4px; }
.ok1-pop-chip { background: #f1f5f9; border-radius: 6px; padding: 1px 7px; color: #334155; white-space: nowrap; }
.ok1-pop-chip.is-on { background: #dcfce7; color: #15803d; font-weight: 700; }
.ok1-pop-chip.is-warn { background: #fef3c7; color: #b45309; font-weight: 700; }
.ok1-pop-power { background: #fef3c7; color: #b45309; border-radius: 6px; padding: 3px 8px; font-weight: 700; margin-bottom: 4px; }
.ok1-pop-power.is-cut { background: #fee2e2; color: #dc2626; }
.ok1-pop-event { background: #eff6ff; color: #1d4ed8; border-radius: 6px; padding: 3px 8px; margin-bottom: 4px; }
.ok1-pop-meta { color: #4b5563; border-top: 1px solid #e5e7eb; padding-top: 4px; }
.ok1-pop-meta i { width: 14px; color: #9ca3af; }

/* ── หน้าตั้งค่า: ชุดสี / ผู้ใช้ลูก / ลิงก์แชร์ ───────────────────────────────── */
.ok1-pal-list { display: grid; gap: 8px; }
.ok1-pal {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 14px; background: #fff; text-align: left;
  border: 2px solid #dbe3f0; border-radius: 10px; cursor: pointer;
}
.ok1-pal.sel { border-color: #436fec; background: #eef3ff; }
.ok1-pal:disabled { cursor: default; opacity: .7; }
.ok1-pal-check {
  width: 22px; height: 22px; border-radius: 50%; border: 2px solid #c7d2e3;
  display: grid; place-items: center; color: transparent; font-size: 11px; flex-shrink: 0;
}
.ok1-pal.sel .ok1-pal-check { background: #436fec; border-color: #436fec; color: #fff; }
.ok1-pal-dots { margin-left: auto; display: flex; gap: 5px; }
.ok1-pal-dots i, .ok1-pal-legend i { width: 12px; height: 12px; border-radius: 50%; display: inline-block; }
.ok1-pal-legend { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 13px; }
.ok1-pal-legend span { display: inline-flex; align-items: center; gap: 5px; }

.ok1-sub-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e5e7eb; border-radius: 10px; margin-bottom: 6px; }
.ok1-sub-avatar { width: 32px; height: 32px; border-radius: 50%; background: #ede9fe; color: #7c3aed; display: grid; place-items: center; font-weight: 800; flex-shrink: 0; }
.ok1-sub-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ok1-sub-txt small { color: #6b7280; }

.ok1-share-row { border: 1px solid #e5e7eb; border-radius: 10px; padding: 8px 10px; margin-bottom: 6px; }
.ok1-share-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ok1-share-link { display: flex; align-items: center; gap: 6px; margin-top: 6px; background: #f6f8fc; border-radius: 8px; padding: 4px 6px; }
.ok1-share-link code { flex: 1; min-width: 0; font-size: 11px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok1-share-link small { white-space: nowrap; color: #6b7280; }

.ok1-dialog { border: 0; border-radius: 14px; padding: 18px; width: min(560px, calc(100vw - 32px)); box-shadow: 0 20px 50px rgba(0, 0, 0, .25); }
.ok1-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.ok1-checklist { max-height: 200px; overflow-y: auto; border: 1px solid #e5e7eb; border-radius: 8px; padding: 6px 10px; }
.ok1-checklist label { display: flex; align-items: center; gap: 6px; margin: 2px 0; font-size: 13px; cursor: pointer; }
.ok1-checklist--grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.ok1-check-all { font-weight: 700; border-bottom: 1px solid #eef0f4; padding-bottom: 4px; }
.ok1-pop-head { padding-right: 14px; }

/* popup รถแบบกระจกโปร่ง: ให้เห็นแผนที่ด้านหลัง แต่เบลอพื้นหลังเพื่อคงความคมของข้อความ */
.ok1-vehicle-popup .leaflet-popup-content-wrapper,
.ok1-vehicle-popup .leaflet-popup-tip {
  background: rgba(248, 250, 252, .78) !important;
  border: 1px solid rgba(255, 255, 255, .88);
  box-shadow: 0 8px 24px rgba(15, 23, 42, .3);
}
.ok1-vehicle-popup .leaflet-popup-content-wrapper {
  -webkit-backdrop-filter: blur(10px) saturate(140%);
  backdrop-filter: blur(10px) saturate(140%);
}
.ok1-vehicle-popup .leaflet-popup-content { color: #0f172a; text-shadow: 0 1px 0 rgba(255, 255, 255, .72); }
.ok1-vehicle-popup .ok1-pop-meta { color: #273449; }

/* ── แผงรายการรถ: รถที่ชอบ + มุมมองย่อ ─────────────────────────────────────── */
.list-group-item.dkli, .ok1-crow { position: relative; }
.ok1-fav {
  position: absolute; top: 4px; right: 6px; z-index: 2;
  border: 0; background: transparent; padding: 2px 4px; line-height: 1;
  font-size: 18px; color: #c3cad6; cursor: pointer;
}
.ok1-fav:hover { color: #f59e0b; }
.ok1-fav.on { color: #f59e0b; text-shadow: 0 0 2px rgba(0, 0, 0, .15); }
.mini-filter-btn.ok1-fav-filter .fa-star { color: #f59e0b; }
.mini-filter-btn.ok1-fav-filter.active .fa-star { color: #fff; }

.ok1-view-toggle { display: flex; gap: 4px; margin: 4px 0 6px; }
.ok1-view-toggle button {
  flex: 1; border: 1px solid #ddd; background: #fff; color: #555;
  border-radius: 4px; padding: 3px 6px; font-size: 12px; font-weight: 600;
}
.ok1-view-toggle button.active { background: var(--bt-b-1); border-color: transparent; color: #fff; }

.ok1-crow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 8px 6px 4px !important; cursor: pointer;
  border-left: 4px solid var(--ok1-crow-c, #94a3b8);
}
.ok1-crow:hover { background: #f5f8ff; }
.ok1-crow--run     { --ok1-crow-c: var(--ok1-st-run); }
.ok1-crow--idle    { --ok1-crow-c: var(--ok1-st-idle); }
.ok1-crow--park    { --ok1-crow-c: var(--ok1-st-park); }
.ok1-crow--off     { --ok1-crow-c: var(--ok1-st-off); }
.ok1-crow--expired { --ok1-crow-c: var(--ok1-st-expired); opacity: .75; }
.ok1-crow > img { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; }
.ok1-crow-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; line-height: 1.25; }
.ok1-crow-txt b { font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok1-crow-txt small { font-size: 11px; color: #6b7280; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok1-crow-st { display: flex; flex-direction: column; align-items: flex-end; font-size: 11.5px; font-weight: 700; color: var(--ok1-crow-c); white-space: nowrap; }
.ok1-crow-st small { font-weight: 400; color: #6b7280; }
.ok1-crow-dot { display: none; }
.ok1-crow .ok1-fav { position: static; flex-shrink: 0; padding: 2px; }

/* ── หัวแผงรายการรถ (หน้าแผนที่ จอคอม) แบบย่อ ──────────────────────────────────
   ของเดิม: กล่องค้นหาสีเข้ม + ปุ่มสีเต็ม 4 แถว กินที่ครึ่งจอก่อนจะเห็นรถคันแรก
   ใช้คลาส ok1-pnl-* แยกจาก .mini-filter-btn/.sort-btn ของ map.css (หน้า list ยังใช้ชุดนั้น) */
.ok1-pnl {
  display: flex; flex-direction: column; gap: 8px;
  padding-bottom: 10px; margin-bottom: 8px; border-bottom: 1px solid #eef0f4;
  font-size: 13px; color: #334155;
}
.ok1-pnl-row { display: flex; align-items: center; gap: 6px; }

.ok1-pnl-search {
  flex: 1; display: flex; align-items: center; gap: 8px; margin: 0;
  height: 34px; padding: 0 10px; border-radius: 9px;
  background: #f3f5f9; border: 1px solid transparent; transition: border-color .15s, background .15s;
}
.ok1-pnl-search:focus-within { background: #fff; border-color: var(--bt-b-1, #436fec); }
.ok1-pnl-search i { color: #94a3b8; font-size: 13px; }
.ok1-pnl-search input {
  flex: 1; min-width: 0; border: 0; outline: 0; background: transparent;
  font-size: 13px; color: #1e293b; padding: 0;
}

.ok1-pnl-icon {
  width: 34px; height: 34px; flex: none; border: 1px solid #e2e8f0; border-radius: 9px;
  background: #fff; color: #64748b; cursor: pointer;
}
.ok1-pnl-icon:hover { color: var(--bt-b-1, #436fec); border-color: var(--bt-b-1, #436fec); }

/* สวิตช์ เปิด/ปิด — aria-pressed เป็นตัวบอกสถานะ (view-map.js paintToggles) */
.ok1-sw {
  display: inline-flex; align-items: center; gap: 5px;
  border: 0; background: transparent; padding: 2px 2px; color: #64748b;
  font-size: 12.5px; cursor: pointer;
}
.ok1-sw i { width: 13px; text-align: center; }
.ok1-sw-track {
  position: relative; width: 28px; height: 16px; border-radius: 99px;
  background: #cbd5e1; transition: background .15s;
}
.ok1-sw-track::after {
  content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px;
  border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .2); transition: transform .15s;
}
.ok1-sw[aria-pressed="true"] { color: #1e293b; }
.ok1-sw[aria-pressed="true"] i { color: var(--bt-b-1, #436fec); }
.ok1-sw[aria-pressed="true"] .ok1-sw-track { background: #22c55e; }
.ok1-sw[aria-pressed="true"] .ok1-sw-track::after { transform: translateX(12px); }
.ok1-sw + .ok1-sw { margin-left: 8px; }

/* ปุ่มกลุ่มแบบแคปซูล (เรียง / มุมมอง) */
.ok1-seg { display: inline-flex; padding: 2px; border-radius: 8px; background: #f1f5f9; }
.ok1-seg button {
  border: 0; background: transparent; color: #64748b; border-radius: 6px;
  padding: 3px 9px; font-size: 12px; font-weight: 600; line-height: 1.4; cursor: pointer;
}
.ok1-seg button:hover { color: #1e293b; }
.ok1-seg button.active { background: #fff; color: var(--bt-b-1, #436fec); box-shadow: 0 1px 2px rgba(15, 23, 42, .12); }
.ok1-seg-icons button { padding: 3px 8px; }

.ok1-pnl-sort { justify-content: space-between; }
.ok1-pnl-label { font-size: 12px; color: #94a3b8; }

/* ตัวกรองสถานะ: ตัวเลขนำ ป้ายตาม */
.ok1-chips { display: flex; gap: 5px; }
.ok1-chip {
  flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 30px; padding: 0 8px; border: 1px solid #e2e8f0; border-radius: 8px;
  background: #fff; color: #64748b; font-size: 12px; white-space: nowrap; cursor: pointer;
}
.ok1-chip b { color: #1e293b; font-size: 13px; }
.ok1-chip.is-on b { color: #16a34a; }
.ok1-chip.is-off b { color: #94a3b8; }
.ok1-chip.is-fav { flex: 0 0 auto; }
.ok1-chip.is-fav i { color: #f59e0b; }
.ok1-chip:hover { border-color: #cbd5e1; }
.ok1-chip.active { background: var(--bt-b-1, #436fec); border-color: transparent; color: #fff; }
.ok1-chip.active b, .ok1-chip.active i { color: #fff; }

/* แผงอยู่ซ้าย: กลับลำดับ flex ของ .boxBody (#map มาก่อนใน DOM แผงจึงอยู่ขวาโดยปริยาย) */
@media (min-width: 769px) {
  .boxBody.ok1-panel-left { flex-direction: row-reverse; }
  .boxBody.ok1-panel-left .desktopBox { box-shadow: 2px 0 5px rgba(0, 0, 0, .05); }
  .boxBody:not(.ok1-panel-left) .desktopBox { box-shadow: -2px 0 5px rgba(0, 0, 0, .05); }
}

/* ── แผงรายการรถ: การ์ด/ปุ่ม/ปรับขนาด (หน้าแผนที่ จอคอม) ───────────────────────── */
/* การ์ดเดิมเป็น flex คอลัมน์ align-items:center ข้อความจึงลอยกลาง — ชิดซ้ายให้อ่านเป็นแนวเดียว */
.ok1-map-page .desktopBox > .container { max-width: none; padding: 0; }
.ok1-map-page #showDetailDesktop {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(290px, 100%), 1fr));
  gap: 8px; align-items: start;
}
.ok1-map-page #showDetailDesktop .dkli {
  align-items: stretch !important; max-width: none; margin: 0 !important; padding: 10px 12px !important;
  border: 1px solid #eef0f4; border-radius: 10px !important;
}
.ok1-map-page #showDetailDesktop .dkBoxTex { text-align: left; font-size: 13px; line-height: 1.55; color: #334155; }
.ok1-map-page #showDetailDesktop .dkBoxTex span { margin: 0; }
.ok1-map-page #showDetailDesktop .dkli > hr { margin: 8px 0 0 !important; border-color: #f1f5f9; }

/* ปุ่มลัดใต้การ์ด: 2 คอลัมน์เพื่อให้ชื่อปุ่มแสดงครบแม้แผงแคบ */
.ok1-map-page #showDetailDesktop .boxBadgeMenu {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px;
  margin: 0; padding-top: 6px; border: 0;
}
.ok1-map-page #showDetailDesktop .boxBadgeMenu a { margin: 0 !important; min-width: 0; text-decoration: none; }
.ok1-map-page #showDetailDesktop .badgeMenu {
  display: flex; align-items: center; justify-content: center; gap: 4px; width: 100%; height: auto; min-height: 24px;
  padding: 2px 6px !important; margin: 0; border: 0; border-radius: 6px !important; box-shadow: none;
  background: #eef3ff !important; color: var(--bt-b-1, #436fec) !important;
  font-size: 11px; font-weight: 600; white-space: normal; overflow-wrap: anywhere; line-height: 1.2; text-align: center;
}
.ok1-map-page #showDetailDesktop .badgeMenu i { margin: 0; font-size: 10px; }
.ok1-map-page #showDetailDesktop .badgeMenu:hover { background: var(--bt-b-1, #436fec) !important; color: #fff !important; }

/* แถวย่อ: ทะเบียน+สถานะ บรรทัดบน · เวลาอัปเดต+ที่อยู่ บรรทัดล่าง */
.ok1-map-page #showDetailDesktop .ok1-crow { margin: 0; border-radius: 8px; border-top: 0; border-right: 0; border-bottom: 1px solid #f1f5f9; }
.ok1-crow-l1 { display: flex; align-items: baseline; gap: 6px; min-width: 0; }
.ok1-crow-l1 > b { flex: 1; min-width: 0; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ok1-crow-l1 .ok1-crow-st { display: inline; flex: none; font-size: 11.5px; }
.ok1-crow-txt small i { margin-right: 2px; }

/* เส้นแบ่งลากปรับขนาด + ปุ่มพับ */
.ok1-split { display: none; }
@media (min-width: 769px) {
  .ok1-split {
    display: block; position: relative; flex: none; width: 6px; cursor: col-resize; z-index: 500;
    background: #eef0f4; transition: background .15s;
  }
  .ok1-split:hover, body.ok1-resizing .ok1-split { background: #c7d4f7; }
  .ok1-split-btn {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 18px; height: 44px; padding: 0; border: 1px solid #dbe2ee; border-radius: 9px;
    background: #fff; color: #64748b; font-size: 10px; box-shadow: 0 1px 3px rgba(15, 23, 42, .12); cursor: pointer;
  }
  .ok1-split-btn:hover { color: var(--bt-b-1, #436fec); border-color: var(--bt-b-1, #436fec); }
  .boxBody.ok1-panel-collapsed .desktopBox { display: none; }
  .boxBody #map { flex: 1 1 auto; min-width: 0; }
  body.ok1-resizing { cursor: col-resize; user-select: none; }
  body.ok1-resizing #map { pointer-events: none; }
}
/* แผงลากกว้างหลายคอลัมน์ หัวแผงไม่ต้องยืดตาม (ปุ่มตัวกรองยาวครึ่งจอดูไม่ออกว่าเป็นปุ่ม) */
.ok1-map-page .ok1-pnl { max-width: 560px; }
/* แผงแคบ (ลากต่ำกว่า 300px): สวิตช์เหลือแค่ไอคอน ปุ่มไม่ตกบรรทัด */
.ok1-map-page .desktopBox { overflow-x: hidden; }
.ok1-seg button, .ok1-chip, .ok1-sw { white-space: nowrap; }
.desktopBox.ok1-panel-narrow { padding: 10px; }
.ok1-panel-narrow .ok1-sw > span:not(.ok1-sw-track),
.ok1-panel-narrow .ok1-pnl-label { display: none; }
.ok1-panel-narrow .ok1-sw + .ok1-sw { margin-left: 4px; }
.ok1-panel-narrow .ok1-chips { gap: 3px; }
.ok1-panel-narrow .ok1-chip { padding: 0 5px; font-size: 11px; }
.ok1-panel-narrow .ok1-seg button { padding: 3px 6px; font-size: 11px; }
.ok1-panel-narrow .ok1-pnl-sort .ok1-seg { width: 100%; justify-content: space-between; }
/* พับแล้ว: เส้นแบ่งกว้างพอให้ปุ่มกางอยู่ในจอทั้งปุ่ม (ไม่งั้นครึ่งปุ่มล้นขอบจอ) */
@media (min-width: 769px) {
  .boxBody.ok1-panel-collapsed .ok1-split { width: 22px; background: #fff; cursor: default; box-shadow: 0 0 4px rgba(0, 0, 0, .08); }
  .boxBody.ok1-panel-collapsed .ok1-split-btn { color: var(--bt-b-1, #436fec); }
}

/* ── สถานะรถโม่ปูน (แผนที่/รายการรถ — เฉพาะคันที่เปิดรถโม่ปูน) ───────────────── */
.ok1-mixer { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; white-space: nowrap; }
.ok1-mixer--out { color: #fff !important; background: #ea580c !important; border-radius: 6px; padding: 1px 7px; }
.ok1-mixer--in { color: #1d4ed8 !important; background: #dbeafe !important; border-radius: 6px; padding: 1px 7px; }
.ok1-mixer--idle, .ok1-mixer--none { color: #475569 !important; background: #e2e8f0 !important; border-radius: 6px; padding: 1px 7px; }
.ok1-crow-mixer { margin: 1px 0 2px; font-size: 11.5px; }
.vcard-mixer { align-self: flex-start; font-size: 13px; padding: 3px 10px !important; margin: -2px 0 2px; }