/* =====================================================================
   FLEET MNM — Theme (โทนน้ำเงิน / ขาว / เทา)
   ===================================================================== */
:root{
  --fleet-primary:#1565c0;      /* น้ำเงินหลัก */
  --fleet-primary-dark:#0d47a1;
  --fleet-primary-light:#e3f0fc;
  --fleet-accent:#1e88e5;
  --fleet-gray:#f4f6f9;         /* พื้นหลังเทาอ่อน */
  --fleet-gray-2:#e9edf2;
  --fleet-text:#2b3648;
  --fleet-muted:#6c7a90;
  --fleet-sidebar:#0f2748;      /* น้ำเงินเข้ม sidebar */
  --fleet-sidebar-hover:#1a3a63;
  --sidebar-w:250px;
  --sidebar-w-collapsed:74px;
  --navbar-h:60px;
}

*{ font-family:'Sarabun',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif; }
body{ background:var(--fleet-gray); color:var(--fleet-text); font-size:.95rem; }

/* ปุ่ม/การ์ด ไม่มนมากเกินไป (มาตรฐาน MDBootstrap) */
.btn{ border-radius:.375rem; text-transform:none; font-weight:500; letter-spacing:0; box-shadow:none; }
.btn:hover{ box-shadow:0 2px 5px rgba(0,0,0,.12); }
.card{ border-radius:.5rem; border:1px solid var(--fleet-gray-2); box-shadow:0 1px 3px rgba(20,40,80,.06); }
.btn-primary{ background:var(--fleet-primary); }
.btn-primary:hover{ background:var(--fleet-primary-dark); }
.text-primary{ color:var(--fleet-primary)!important; }
.bg-primary{ background:var(--fleet-primary)!important; }

/* ---------- Layout shell ---------- */
#wrapper{ display:flex; min-height:100vh; }

/* ---------- Sidebar ---------- */
#sidebar{
  width:var(--sidebar-w);
  background:var(--fleet-sidebar);
  color:#cdd8e8;
  position:fixed; top:0; left:0; bottom:0; z-index:1040;
  display:flex; flex-direction:column;
  transition:width .22s ease, transform .22s ease;
  overflow:hidden;
}
#sidebar .brand{
  height:var(--navbar-h); display:flex; align-items:center; gap:.6rem;
  padding:0 1rem; color:#fff; font-weight:700; white-space:nowrap;
  border-bottom:1px solid rgba(255,255,255,.08); flex:0 0 auto;
}
#sidebar .brand-mark{ width:32px; height:32px; object-fit:contain; flex:0 0 32px; }
#sidebar .menu{ flex:1 1 auto; overflow-y:auto; padding:.5rem 0; }
#sidebar .menu::-webkit-scrollbar{ width:6px; }
#sidebar .menu::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.15); border-radius:3px; }
#sidebar .nav-link{
  color:#cdd8e8; display:flex; align-items:center; gap:.75rem;
  padding:.6rem 1.1rem; border-radius:0; white-space:nowrap; cursor:pointer;
  font-size:.92rem; border-left:3px solid transparent;
}
#sidebar .nav-link i.lead-icon{ width:20px; text-align:center; font-size:1rem; flex:0 0 20px; }
#sidebar .nav-link:hover{ background:var(--fleet-sidebar-hover); color:#fff; }
#sidebar .nav-link.active{ background:var(--fleet-sidebar-hover); color:#fff; border-left-color:#64b5f6; }
#sidebar .nav-link .caret{ margin-left:auto; transition:transform .2s; font-size:.75rem; }
#sidebar .nav-link[aria-expanded="true"] .caret{ transform:rotate(90deg); }
#sidebar .submenu{ list-style:none; padding:0; margin:0; background:rgba(0,0,0,.18); }
#sidebar .submenu .nav-link{ padding-left:3.1rem; font-size:.88rem; }
#sidebar .menu-heading{ color:#6f86a6; font-size:.72rem; text-transform:uppercase; letter-spacing:.08em; padding:.9rem 1.1rem .3rem; }

/* collapsed */
body.sidebar-collapsed #sidebar{ width:var(--sidebar-w-collapsed); }
body.sidebar-collapsed #sidebar .brand span,
body.sidebar-collapsed #sidebar .label,
body.sidebar-collapsed #sidebar .caret,
body.sidebar-collapsed #sidebar .menu-heading{ display:none; }
body.sidebar-collapsed #sidebar .submenu{ display:none!important; }
body.sidebar-collapsed #sidebar .nav-link{ justify-content:center; padding-left:0; padding-right:0; }
body.sidebar-collapsed #sidebar .brand{ justify-content:center; padding:0; }
body.sidebar-collapsed #content{ margin-left:var(--sidebar-w-collapsed); }

/* ---------- Content ---------- */
#content{ flex:1; margin-left:var(--sidebar-w); transition:margin-left .22s ease; min-width:0; display:flex; flex-direction:column; }
#topnav{
  height:var(--navbar-h); background:#fff; border-bottom:1px solid var(--fleet-gray-2);
  display:flex; align-items:center; gap:1rem; padding:0 1.1rem; position:sticky; top:0; z-index:1030;
}
#topnav .hamburger{ border:none; background:transparent; font-size:1.2rem; color:var(--fleet-text); cursor:pointer; padding:.4rem .6rem; border-radius:.375rem; }
#topnav .hamburger:hover{ background:var(--fleet-gray); }
#topnav .page-title{ font-weight:600; font-size:1.02rem; margin:0; }
.main-body{ padding:1.25rem; flex:1; }

footer.app-footer{
  background:#fff; border-top:1px solid var(--fleet-gray-2); color:var(--fleet-muted);
  padding:.85rem 1.25rem; font-size:.83rem; text-align:center;
}

/* ---------- Backdrop (mobile) ---------- */
#sb-backdrop{ position:fixed; inset:0; background:rgba(0,0,0,.4); z-index:1035; display:none; }

/* ---------- KPI cards ---------- */
.kpi-card{ border:none; border-radius:.6rem; color:#fff; overflow:hidden; }
.kpi-card .kpi-body{ padding:1rem 1.1rem; display:flex; align-items:center; justify-content:space-between; }
.kpi-card .kpi-icon{ font-size:2rem; opacity:.35; }
.kpi-card .kpi-value{ font-size:1.5rem; font-weight:700; line-height:1.1; }
.kpi-card .kpi-label{ font-size:.82rem; opacity:.92; }
.kpi-blue{ background:linear-gradient(135deg,#1976d2,#1565c0); }
.kpi-green{ background:linear-gradient(135deg,#2e9e5b,#26864c); }
.kpi-red{ background:linear-gradient(135deg,#e0564e,#c62828); }
.kpi-gray{ background:linear-gradient(135deg,#5c6b82,#465267); }
.kpi-orange{ background:linear-gradient(135deg,#f0932b,#e17055); }

/* ---------- Forms (ป้องกัน label ซ้อน input) ---------- */
.form-label{ font-weight:500; margin-bottom:.3rem; font-size:.86rem; color:var(--fleet-text); }
.form-control, .form-select{ border-radius:.375rem; font-size:.9rem; }
.form-control:focus, .form-select:focus{ border-color:var(--fleet-accent); box-shadow:0 0 0 .18rem rgba(21,101,192,.15); }
.readonly-calc{ background:var(--fleet-primary-light)!important; font-weight:600; }
.form-section-title{ font-weight:600; color:var(--fleet-primary); border-bottom:2px solid var(--fleet-primary-light); padding-bottom:.4rem; margin:1rem 0 .8rem; }
.required-star{ color:#c62828; }
.product-picker{border:1px solid #d9e0e8;border-radius:.375rem;padding:.75rem;background:#fff}
.product-checklist{max-height:190px;overflow:auto;border:1px solid #eef0f3;border-radius:.375rem;padding:.35rem .65rem}
.product-check{display:flex;align-items:center;gap:.55rem;padding:.4rem 0;border-bottom:1px solid #f0f2f5}
.product-check:last-child{border-bottom:0}
.product-check label{margin:0;cursor:pointer;flex:1;min-width:0}
.product-selected{display:flex;flex-wrap:wrap;gap:.35rem;min-height:1.5rem}
.product-selected .badge{font-weight:500;white-space:normal;text-align:left}

/* ---------- Tables ---------- */
table.dataTable thead th{ background:var(--fleet-primary-light); color:var(--fleet-primary-dark); font-weight:600; font-size:.85rem; white-space:nowrap; }
table.dataTable td{ font-size:.88rem; vertical-align:middle; }
.table-actions .btn{ padding:.2rem .5rem; font-size:.8rem; }
.dataTables_wrapper .dataTables_paginate .paginate_button.current{ background:var(--fleet-primary)!important; color:#fff!important; border-color:var(--fleet-primary)!important; }

/* ---------- Badges ---------- */
.badge-status{ font-weight:500; font-size:.75rem; padding:.35em .6em; }
.st-active,.st-completed,.st-approved,.st-paid,.st-CLOSED{ background:#e6f4ea; color:#1e7e34; }
.st-inactive,.st-cancelled,.st-rejected{ background:#fdecea; color:#c62828; }
.st-pending,.st-in_progress,.st-OPEN{ background:#fff4e0; color:#b26a00; }
.st-maintenance{ background:#e7edf5; color:#334e73; }

/* ---------- Page header ---------- */
.page-head{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:.6rem; margin-bottom:1rem; }
.page-head h4{ margin:0; font-weight:600; }
.page-head .sub{ color:var(--fleet-muted); font-size:.85rem; }

/* stat pills บนหน้า list */
.stat-pills{ display:flex; gap:.6rem; flex-wrap:wrap; margin-bottom:1rem; }
.stat-pill{ background:#fff; border:1px solid var(--fleet-gray-2); border-radius:.5rem; padding:.6rem .9rem; min-width:120px; flex:1; }
.stat-pill .n{ font-size:1.15rem; font-weight:700; }
.stat-pill .l{ font-size:.76rem; color:var(--fleet-muted); }

/* alert banner */
.fuel-warn-banner{ border-left:4px solid #f0932b; }
.fuel-warn-banner.danger{ border-left-color:#c62828; }

/* ---------- Responsive ---------- */
@media (max-width:992px){
  #sidebar{ transform:translateX(-100%); width:var(--sidebar-w); }
  body.sidebar-open #sidebar{ transform:translateX(0); }
  body.sidebar-open #sb-backdrop{ display:block; }
  #content{ margin-left:0!important; }
  body.sidebar-collapsed #content{ margin-left:0!important; }
}

/* login */
.login-wrap{ min-height:100vh; display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#0f2748,#1565c0); padding:1rem; }
.login-card{ width:100%; max-width:410px; border-radius:.7rem; }
.login-brand{ text-align:center; margin-bottom:1.2rem; }
.login-brand .login-logo{ width:100%; max-width:240px; height:auto; }

/* ---------- Modal รายละเอียดกลาง (Fleet.bindDetail) ---------- */
.detail-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:2px 18px;margin-bottom:14px}
.detail-item{padding:7px 0;border-bottom:1px solid #eef0f3;min-width:0}
.detail-item.detail-full{grid-column:1/-1}
.detail-label{font-size:12px;color:#7a848e;line-height:1.4}
.detail-value{font-size:14.5px;color:#1d2125;font-weight:500;word-break:break-word}
.detail-section{font-size:12px;font-weight:700;letter-spacing:.04em;color:#1565c0;
  text-transform:uppercase;margin:16px 0 6px;padding-bottom:5px;border-bottom:2px solid #e3ecf7}
.detail-section:first-child{margin-top:0}
/* แถวที่คลิกดูรายละเอียดได้ */
table.table-clickable tbody tr{cursor:pointer}
table.table-clickable tbody tr:hover{background-color:#f2f7fd}
.fleet-vehicle-native { display: none !important; }
.fleet-vehicle-search { width: 100%; }
.fleet-vehicle-options {
  position: fixed;
  z-index: 2000;
  overflow-y: auto;
  background: #fff;
  border: 1px solid #b9c6d6;
  border-radius: 6px;
  box-shadow: 0 8px 20px rgba(13, 38, 69, .18);
}
.fleet-vehicle-options[hidden] { display: none; }
.fleet-vehicle-option {
  display: block;
  width: 100%;
  padding: 8px 12px;
  border: 0;
  background: transparent;
  color: #243447;
  text-align: left;
  cursor: pointer;
}
.fleet-vehicle-option:hover, .fleet-vehicle-option.active { background: #e7f0fb; }
.fleet-vehicle-empty { padding: 8px 12px; color: #6c7a90; }