:root{--green:#1FA45B;--green-dark:#158046;--green-light:#E8F6EE;--bg:#F4F6F5;--card:#FFFFFF;--ink:#1E2B24;--muted:#6B7A72;--line:#E3E8E5;--danger:#D64545;--warn:#E8A13D;--radius:14px;--shadow:0 2px 10px rgba(30,43,36,.07);--sp1:8px;--sp2:12px;--sp3:16px;--sp4:24px}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
body{font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Noto Sans Thai",sans-serif;background:var(--bg);color:var(--ink);font-size:15px;line-height:1.5}
h1{font-size:20px}h2{font-size:16px}
.muted{color:var(--muted);font-size:13px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:6px;border:0;border-radius:10px;padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;background:var(--green);color:#fff;font-family:inherit}
.btn:hover{background:var(--green-dark)}
.btn.ghost{background:var(--card);color:var(--ink);border:1px solid var(--line)}
.btn.danger{background:var(--danger)}
.btn.sm{padding:6px 10px;font-size:13px;border-radius:8px}
.card{background:var(--card);border-radius:var(--radius);box-shadow:var(--shadow);padding:var(--sp3)}
input,select,textarea{width:100%;border:1px solid var(--line);border-radius:10px;padding:10px 12px;font:inherit;background:#fff;color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:2px solid var(--green-light);border-color:var(--green)}
label{display:block;font-size:13px;font-weight:600;margin-bottom:4px;color:var(--muted)}
.field{margin-bottom:var(--sp3)}
.badge{display:inline-block;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;background:var(--green-light);color:var(--green-dark)}
.badge.warn{background:#FBF1DD;color:#9A6B1D}
.badge.danger{background:#FBE4E4;color:#A33030}
table{width:100%;border-collapse:collapse}
th{font-size:12px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);text-align:left;padding:10px 12px;border-bottom:1px solid var(--line)}
td{padding:12px;border-bottom:1px solid var(--line)}
tbody tr:hover td{background:var(--green-light)}
.empty{padding:40px 16px;text-align:center;color:var(--muted)}
.layout{display:grid;grid-template-columns:220px 1fr;min-height:100vh}
.sidebar{background:var(--card);border-right:1px solid var(--line);padding:var(--sp3);position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;font-weight:700;font-size:16px;margin-bottom:var(--sp4)}
.brand-dot{width:12px;height:12px;border-radius:50%;background:var(--green);box-shadow:0 0 0 4px var(--green-light)}
.nav{display:flex;flex-direction:column;gap:4px}
.nav-item{display:block;padding:10px 12px;border-radius:10px;color:var(--ink);text-decoration:none;font-size:14px;cursor:pointer}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--green-light);color:var(--green-dark);font-weight:600}
.main{padding:var(--sp4);min-width:0}
.topbar{display:flex;align-items:center;gap:var(--sp2);margin-bottom:var(--sp4)}
.topbar-right{margin-left:auto;display:flex;gap:var(--sp1)}
.menu-btn{display:none}
.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:var(--sp3);margin-bottom:var(--sp4)}
.kpi-num{font-size:26px;font-weight:700;color:var(--green-dark);margin-top:4px}
.content-grid{display:grid;grid-template-columns:1fr 1.4fr;gap:var(--sp3);align-items:start}
.chart-area{min-height:220px}
.table-wrap{overflow-x:auto}
@media(max-width:768px){.layout{grid-template-columns:1fr}.sidebar{position:fixed;left:-240px;width:220px;z-index:50;transition:left .2s}.sidebar.open{left:0}.menu-btn{display:inline-flex}.content-grid{grid-template-columns:1fr}.main{padding:var(--sp3)}}

/* ===== App-specific: pages ===== */
.page[hidden]{display:none !important;}
.page.active{display:block}
.section-title{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--sp3)}
.section-title h2{font-weight:700}

/* ===== KPI cards ===== */
.kpi{display:flex;flex-direction:column;gap:2px}
.kpi-label{font-size:13px;color:var(--muted);font-weight:600}
.kpi-icon{width:38px;height:38px;border-radius:10px;background:var(--green-light);color:var(--green-dark);display:inline-flex;align-items:center;justify-content:center;font-size:18px;margin-bottom:var(--sp2)}
.kpi.running .kpi-icon{background:#E8F6EE;color:var(--green)}
.kpi.idle .kpi-icon{background:#EEF2F0;color:var(--muted)}
.kpi.maintenance .kpi-icon{background:#FBF1DD;color:#9A6B1D}
.kpi-row{display:flex;align-items:center;justify-content:space-between}

/* ===== Dashboard recent trips ===== */
.trip-row{display:flex;align-items:center;gap:var(--sp2);padding:10px 0;border-bottom:1px solid var(--line)}
.trip-row:last-child{border-bottom:0}
.trip-plate{font-weight:700;color:var(--green-dark);min-width:90px}
.trip-route{flex:1;min-width:0;font-size:14px}
.trip-route .arrow{color:var(--muted);margin:0 6px}
.trip-status{font-size:12px}

/* ===== Status badges specific ===== */
.badge.idle{background:#EEF2F0;color:var(--muted)}
.badge.running{background:var(--green-light);color:var(--green-dark)}
.badge.maintenance{background:#FBF1DD;color:#9A6B1D}
.badge.pending{background:#EEF2F0;color:var(--muted)}
.badge.transit{background:var(--green-light);color:var(--green-dark)}
.badge.arrived{background:#E8F0FF;color:#1F4FA4}
.badge.closed{background:#F0F0F0;color:var(--muted)}

/* ===== Toolbar / filter bar ===== */
.toolbar{display:flex;flex-wrap:wrap;gap:var(--sp2);align-items:flex-end;margin-bottom:var(--sp3)}
.toolbar .field{margin-bottom:0;min-width:160px;flex:1}
.toolbar .actions{display:flex;gap:var(--sp1)}

/* ===== Forms grid ===== */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
.form-grid .full{grid-column:1/-1}
.form-actions{display:flex;gap:var(--sp1);justify-content:flex-end;margin-top:var(--sp3)}

/* ===== Modal ===== */
.modal{position:fixed;inset:0;margin:auto;border:0;padding:0;background:transparent;max-width:none;max-height:none;width:auto;height:auto;overflow:visible;z-index:100;display:none;align-items:center;justify-content:center}
.modal[open]{display:flex}
.modal::backdrop{background:rgba(20,50,31,.55)}
.modal > form, .modal > .modal-panel{background:var(--card);border-radius:var(--radius);box-shadow:0 12px 40px rgba(0,0,0,.18);width:100%;max-width:560px;max-height:90vh;overflow:auto}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp3);border-bottom:1px solid var(--line);position:sticky;top:0;background:var(--card)}
.modal-head h2{font-weight:700}
.modal-body{padding:var(--sp3)}
.modal-close{background:none;border:0;font-size:22px;cursor:pointer;color:var(--muted);line-height:1;padding:4px}
.modal-close:hover{color:var(--ink)}

/* ===== Map & Driver pages ===== */
.livemap-wrap{position:relative;height:calc(100vh - 120px);min-height:320px;border-radius:var(--radius);overflow:hidden}
#livemapMap{height:100%;width:100%;background:var(--card)}
.livemap-empty{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;background:var(--card)}
.driver-card{max-width:520px;margin:0 auto}
.driver-card h2{margin-bottom:var(--sp3)}
.driver-status{display:flex;align-items:center;gap:8px;font-size:16px;margin:var(--sp2) 0;padding:12px;border-radius:10px;background:var(--bg)}
.driver-status .dot{width:12px;height:12px;border-radius:50%;background:var(--muted)}
.driver-status.active{background:var(--green-light);color:var(--green-dark)}
.driver-status.active .dot{background:var(--green);box-shadow:0 0 0 4px var(--green-light)}
.driver-status.error .dot{background:var(--danger)}
.driver-info{color:var(--muted);font-size:14px;margin-bottom:var(--sp3)}
.driver-actions{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp2);margin-bottom:var(--sp3)}
.btn-big{padding:18px 16px;font-size:16px;border-radius:14px}
.driver-checkin{background:var(--bg);border-radius:12px;padding:var(--sp3)}
.driver-checkin input{margin:var(--sp2) 0}
.route-map{height:320px;border-radius:10px;margin-bottom:var(--sp3);background:var(--bg)}
.route-meta{display:flex;flex-wrap:wrap;gap:var(--sp3);font-size:14px;color:var(--muted)}

/* ===== Table actions ===== */
.row-actions{display:flex;gap:6px;justify-content:flex-end;flex-wrap:wrap}
.td-plate{font-weight:700;color:var(--green-dark)}
.td-muted{color:var(--muted);font-size:13px}

/* ===== Trip timeline ===== */
.timeline{display:flex;align-items:center;gap:4px;flex-wrap:wrap}
.tl-step{display:flex;align-items:center;gap:4px;font-size:12px;color:var(--muted)}
.tl-dot{width:10px;height:10px;border-radius:50%;background:var(--line)}
.tl-step.done .tl-dot{background:var(--green)}
.tl-step.done{color:var(--green-dark);font-weight:600}
.tl-step.current .tl-dot{background:var(--warn);box-shadow:0 0 0 3px #FBF1DD}
.tl-step.current{color:#9A6B1D;font-weight:600}
.tl-line{width:18px;height:2px;background:var(--line)}
.tl-line.done{background:var(--green)}

/* ===== Trip card list ===== */
.trip-card{border:1px solid var(--line);border-radius:12px;padding:var(--sp3);margin-bottom:var(--sp2);background:var(--card)}
.trip-card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:var(--sp2);margin-bottom:var(--sp2)}
.trip-card-route{font-weight:700;font-size:15px}
.trip-card-meta{display:flex;flex-wrap:wrap;gap:var(--sp3);font-size:13px;color:var(--muted);margin-bottom:var(--sp2)}
.trip-card-meta b{color:var(--ink);font-weight:600}
.trip-card-foot{display:flex;justify-content:space-between;align-items:center;gap:var(--sp2);flex-wrap:wrap}

/* ===== Toast / status ===== */
.toast{position:fixed;bottom:var(--sp4);left:50%;transform:translateX(-50%);background:var(--ink);color:#fff;padding:12px 20px;border-radius:10px;font-size:14px;z-index:200;box-shadow:0 8px 24px rgba(0,0,0,.2);opacity:0;pointer-events:none;transition:opacity .2s,bottom .2s}
.toast.show{opacity:1;bottom:calc(var(--sp4) + 8px)}
.toast.success{background:var(--green-dark)}
.toast.error{background:var(--danger)}
.toast.warn{background:#9A6B1D}
.status-msg{padding:10px 14px;border-radius:10px;font-size:13px;margin-bottom:var(--sp3)}
.status-msg.info{background:var(--green-light);color:var(--green-dark)}
.status-msg.error{background:#FBE4E4;color:#A33030}

/* ===== Reports ===== */
.report-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3);margin-bottom:var(--sp3)}
.report-card h2{margin-bottom:var(--sp3)}
.bar-chart{display:flex;flex-direction:column;gap:10px}
.bar-row{display:grid;grid-template-columns:90px 1fr 70px;align-items:center;gap:var(--sp2);font-size:13px}
.bar-track{background:var(--bg);border-radius:6px;height:22px;overflow:hidden}
.bar-fill{height:100%;background:linear-gradient(90deg,var(--green),var(--green-dark));border-radius:6px;min-width:2px;transition:width .3s}
.bar-val{text-align:right;font-weight:700;color:var(--green-dark)}
.rank-list{display:flex;flex-direction:column;gap:8px}
.rank-item{display:flex;align-items:center;gap:var(--sp2);padding:8px 10px;border-radius:10px;background:var(--bg)}
.rank-no{width:26px;height:26px;border-radius:50%;background:var(--green);color:#fff;display:inline-flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;flex-shrink:0}
.rank-item:nth-child(1) .rank-no{background:var(--green-dark)}
.rank-item:nth-child(2) .rank-no{background:var(--green)}
.rank-item:nth-child(3) .rank-no{background:#7BBE97}
.rank-info{flex:1;min-width:0}
.rank-info b{display:block;font-size:14px}
.rank-info small{color:var(--muted);font-size:12px}
.rank-val{font-weight:700;color:var(--green-dark)}

/* ===== Misc ===== */
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp3)}
.stack{display:flex;flex-direction:column;gap:var(--sp2)}
.divider{height:1px;background:var(--line);margin:var(--sp3) 0}
.tag{display:inline-block;padding:2px 8px;border-radius:6px;font-size:12px;background:var(--bg);color:var(--muted);font-weight:600}
.nowrap{white-space:nowrap}
.text-right{text-align:right}
.mt0{margin-top:0}.mb0{margin-bottom:0}
.mb2{margin-bottom:var(--sp2)}.mb3{margin-bottom:var(--sp3)}.mb4{margin-bottom:var(--sp4)}
.mt3{margin-top:var(--sp3)}.mt4{margin-top:var(--sp4)}

/* ===== Responsive tweaks ===== */
@media(max-width:768px){
  .form-grid{grid-template-columns:1fr}
  .report-grid{grid-template-columns:1fr}
  .two-col{grid-template-columns:1fr}
  .toolbar .field{min-width:100%}
  .modal{max-width:100%}
  .bar-row{grid-template-columns:70px 1fr 60px;font-size:12px}
  h1{font-size:18px}
  .topbar-right .btn span.lbl{display:none}
}
@media(max-width:480px){
  .kpis{grid-template-columns:1fr 1fr}
  .trip-card-meta{gap:var(--sp2)}
}
/* zz-modal-fix 2026-07-18: dialog เดิมกางเต็มจอชิดมุมซ้ายบน ให้จัดกลางและพอดีเนื้อหา */
dialog.modal, dialog#truckModal, dialog#tripModal, dialog#routeModal {
  position: fixed; inset: 0; margin: auto;
  width: auto; min-width: min(420px, 92vw); max-width: min(560px, 94vw);
  height: auto; max-height: 88vh; overflow: auto;
  border: none; border-radius: 16px; padding: 22px;
  background: var(--card, #fff); color: var(--ink, #14321f);
  box-shadow: 0 24px 60px rgba(0,0,0,.28);
}
dialog.modal::backdrop, dialog#truckModal::backdrop, dialog#tripModal::backdrop, dialog#routeModal::backdrop {
  background: rgba(0,0,0,.5);
}
@media (max-width: 640px) {
  dialog.modal, dialog#truckModal, dialog#tripModal, dialog#routeModal {
    min-width: 0; width: 94vw; max-width: 94vw; padding: 18px;
  }
  #livemapMap { height: 60vh !important; min-height: 320px; }
  .driver-actions .btn-big { width: 100%; }
}
#livemapMap { height: calc(100vh - 220px); min-height: 380px; }