/* ============================================================
   ระบบออกแบบกลาง (design system) เว็บกองรถ — ใช้ร่วมทั้ง 4 หน้า
   ธีมสว่าง อ่านกลางแดดง่าย การ์ดขาว สถานะดูจากสีได้ทันที
   ============================================================ */
:root{
  /* พื้นหลัง / การ์ด / เส้นขอบ */
  --bg:#edf0f5;          /* เทาอมฟ้าอ่อน พื้นหลังแอป */
  --card:#ffffff;
  --card2:#f6f8fb;       /* พื้นย่อยในการ์ด */
  --line:#dde4ee;
  --line2:#c9d3e2;

  /* ตัวหนังสือ */
  --ink:#17233b;         /* หัวข้อ / ตัวเลขสำคัญ */
  --ink2:#54637c;        /* เนื้อความรอง */
  --ink3:#8b98ad;        /* เนื้อความจาง */

  /* สีหลัก (ปุ่ม / ลิงก์) */
  --brand:#0b5bd3;
  --brand-deep:#0a4cb0;
  --brand-soft:#e8f0fd;
  --brand-line:#b8d1f4;

  /* สถานะ: เขียว=ปกติ เหลือง=ใกล้หมด แดง=หมดอายุ เทา=ไม่มี ฟ้า=มีไฟล์แต่ไม่มีวัน */
  --ok:#0d8a5f;    --ok-bg:#e4f6ed;    --ok-line:#b3e2cc;
  --soon:#b25b06;  --soon-bg:#fbf0de;  --soon-line:#f0d6ad;
  --exp:#cf3128;   --exp-bg:#fdecea;   --exp-line:#f3c3be;
  --none:#66748c;  --none-bg:#eef1f6;  --none-line:#dde4ee;
  --nodate:#175cd3;--nodate-bg:#ebf2fd;--nodate-line:#c0d6f6;

  --r:16px;              /* มุมการ์ด */
  --r-sm:12px;           /* มุมปุ่ม/ช่องกรอก */
  --shadow:0 1px 2px rgba(23,35,59,.05),0 3px 10px rgba(23,35,59,.05);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--ink);
  font:15.5px/1.55 "Noto Sans Thai","Noto Sans Thai Looped",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;
  padding:16px 14px 44px;
}
.wrap{max-width:720px;margin:0 auto}
:focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:8px}

/* ---------- หัวหน้า ---------- */
.ph h1{font-size:22px;margin:0;font-weight:700;letter-spacing:-.2px}
.sub{color:var(--ink2);font-size:13px;margin:3px 0 0}
.linkrow{display:flex;flex-wrap:wrap;gap:6px 18px;margin:10px 0 14px}
.linkrow a{color:var(--brand);font-size:13.5px;font-weight:600;text-decoration:underline;
  text-underline-offset:3px;min-height:44px;display:inline-flex;align-items:center}

/* ---------- แถวตัวเลขสรุป ---------- */
.stats{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin-bottom:14px}
@media(min-width:640px){.stats{grid-template-columns:repeat(4,minmax(0,1fr))}}
.stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-sm);
  padding:10px 13px;font-size:12px;color:var(--ink2);box-shadow:var(--shadow)}
.stat b{display:block;font-size:21px;margin-top:2px;color:var(--ink);font-variant-numeric:tabular-nums}
.stat b.red{color:var(--exp)} .stat b.amber{color:var(--soon)} .stat b.green{color:var(--ok)} .stat b.blue{color:var(--nodate)}

/* ---------- ค้นหา + ตัวกรอง ---------- */
input[type=search]{width:100%;max-width:100%;min-width:0;padding:12px 15px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:var(--card);color:var(--ink);font-size:16px;font-family:inherit;
  min-height:48px;margin-bottom:10px}
input[type=search]:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.filters{display:flex;gap:8px;flex-wrap:nowrap;overflow-x:auto;padding-bottom:4px;margin-bottom:14px;
  scrollbar-width:none;-webkit-overflow-scrolling:touch}
.filters::-webkit-scrollbar{display:none}
.filters button{flex:0 0 auto;background:var(--card);border:1px solid var(--line2);color:var(--ink2);
  border-radius:999px;padding:10px 16px;font-size:13.5px;font-family:inherit;min-height:44px;cursor:pointer}
.filters button.on{background:var(--brand);border-color:var(--brand);color:#fff;font-weight:700}

/* ---------- การ์ด ---------- */
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:15px 15px 13px;margin-bottom:13px;box-shadow:var(--shadow)}
.chead{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.unit{font-size:21px;font-weight:700;letter-spacing:-.2px}
.plate{background:#fff;border:2px solid var(--ink);border-radius:8px;padding:2px 10px;
  font-weight:700;font-size:14.5px;letter-spacing:.4px;color:var(--ink);white-space:nowrap}
.badge{background:var(--none-bg);border:1px solid var(--none-line);border-radius:8px;
  padding:3px 9px;font-size:12px;color:var(--ink2);font-weight:600;white-space:nowrap}
.sum{margin-left:auto;border-radius:999px;padding:5px 12px;font-size:12.5px;font-weight:700;border:1px solid;white-space:nowrap}
.sum.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.sum.soon{color:var(--soon);border-color:var(--soon-line);background:var(--soon-bg)}
.sum.expired{color:var(--exp);border-color:var(--exp-line);background:var(--exp-bg)}
.sum.none{color:var(--none);border-color:var(--none-line);background:var(--none-bg)}
.meta{color:var(--ink2);font-size:13px;margin-top:8px}
.meta .nobody{color:var(--ink3)}

/* ---------- แถวคนขับ + ปุ่มโทร ---------- */
.drv{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:10px}
.drv .who{font-size:14.5px}
.telbtn{display:inline-flex;align-items:center;justify-content:center;min-height:46px;padding:0 18px;
  border-radius:999px;border:1.5px solid var(--brand-line);background:var(--brand-soft);
  color:var(--brand);text-decoration:none;font-size:14.5px;font-weight:700;white-space:nowrap}
.telbtn:active{background:var(--brand);color:#fff}

/* ---------- ตารางสถานะเอกสาร (ชิปใหญ่ 2 คอลัมน์) ---------- */
.docgrid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-top:12px}
.doc{border-radius:var(--r-sm);border:1px solid;padding:9px 12px;min-width:0}
.doc.span2{grid-column:1/-1}
.doc .t{font-size:12px;font-weight:600;opacity:.85}
.doc .d{font-size:15.5px;font-weight:700;margin-top:2px;font-variant-numeric:tabular-nums}
.doc .l{font-size:12px;margin-top:1px;font-weight:600}
.doc.ok{color:var(--ok);background:var(--ok-bg);border-color:var(--ok-line)}
.doc.soon{color:var(--soon);background:var(--soon-bg);border-color:var(--soon-line)}
.doc.expired{color:var(--exp);background:var(--exp-bg);border-color:var(--exp-line)}
.doc.none{color:var(--none);background:var(--none-bg);border-color:var(--none-line)}
.doc.nodate{color:var(--nodate);background:var(--nodate-bg);border-color:var(--nodate-line)}
.doc .dd{color:var(--ink)} /* วันที่อ่านชัดบนพื้นสี */

/* ---------- ชิปสถานะแบบ pill (ยาง/ซ่อม) ---------- */
.chips{display:flex;gap:6px;flex-wrap:wrap;margin-top:10px}
.chip{border-radius:999px;padding:5px 12px;font-size:12.5px;border:1px solid;font-weight:600;
  display:inline-flex;align-items:center;gap:7px}
.chip::before{content:"";width:7px;height:7px;border-radius:50%;background:currentColor;flex:0 0 auto}
.chip.ok{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.chip.soon{color:var(--soon);border-color:var(--soon-line);background:var(--soon-bg)}
.chip.expired{color:var(--exp);border-color:var(--exp-line);background:var(--exp-bg)}
.chip.none{color:var(--none);border-color:var(--none-line);background:var(--none-bg)}
.chip.none::before{display:none}
.chip.nodate{color:var(--nodate);border-color:var(--nodate-line);background:var(--nodate-bg)}
.chip.work{color:var(--nodate);border-color:var(--nodate-line);background:var(--nodate-bg)}
.chip.wait{color:var(--soon);border-color:var(--soon-line);background:var(--soon-bg)}
.chip.done{color:var(--ok);border-color:var(--ok-line);background:var(--ok-bg)}
.chip.late{color:var(--exp);border-color:var(--exp-line);background:var(--exp-bg)}

/* ---------- รายการไฟล์ (พับ/ขยายได้) ---------- */
.files{margin-top:4px;display:none}
.card.open .files{display:block}
.files a{display:flex;align-items:center;gap:9px;color:var(--ink);text-decoration:none;
  padding:9px 2px;font-size:13.5px;border-bottom:1px dashed var(--line);min-height:44px}
.files a:last-child{border-bottom:none}
.files a .nm{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.files a .dt{color:var(--ink3);font-size:12px;white-space:nowrap;flex:0 0 auto}
.tag{flex:0 0 auto;font-size:10.5px;font-weight:700;color:var(--exp);border:1px solid var(--exp-line);
  background:var(--exp-bg);border-radius:5px;padding:1px 5px}

/* ---------- ปุ่ม ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:46px;
  padding:10px 18px;border-radius:var(--r-sm);border:1.5px solid transparent;cursor:pointer;
  font-family:inherit;font-size:14.5px;font-weight:700;text-decoration:none;background:none;color:var(--brand)}
.btn.primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn.primary:active{background:var(--brand-deep)}
.btn.ghost{background:var(--card);border-color:var(--line2);color:var(--ink)}
.btn.ghost:active{border-color:var(--brand);color:var(--brand)}
.btn.small{min-height:44px;padding:8px 14px;font-size:13px;font-weight:600}
.btn.del{color:var(--exp);border-color:var(--exp-line);background:var(--exp-bg);font-weight:600}
.btnrow{display:flex;gap:9px;align-items:center;margin-top:12px;flex-wrap:wrap}

/* ---------- ฟอร์ม ---------- */
.panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r);
  padding:16px 15px;box-shadow:var(--shadow)}
.sec{display:none;margin-bottom:14px}
.sec.on{display:block}
.sec h2{font-size:16px;margin:0 0 12px;font-weight:700}
.field{margin-bottom:12px}
label{display:block;font-size:13px;color:var(--ink2);margin:0 0 5px;font-weight:600}
input,select,textarea{width:100%;max-width:100%;min-width:0;padding:11px 13px;border-radius:var(--r-sm);
  border:1px solid var(--line2);background:#fbfcfe;color:var(--ink);font-size:16px;font-family:inherit;min-height:48px}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft);background:#fff}
textarea{min-height:80px;resize:vertical;line-height:1.5}
.dgrid{display:grid;grid-template-columns:76px minmax(0,1fr) 104px;gap:8px;max-width:420px}
.dgrid select{padding-left:8px;padding-right:8px}
.hint{color:var(--ink3);font-size:12.5px;margin-top:8px;line-height:1.7}
.quick{display:flex;gap:7px;flex-wrap:wrap;margin-top:9px}
.quick button{background:var(--card2);border:1px solid var(--line2);color:var(--ink2);border-radius:999px;
  padding:9px 15px;font-size:13px;font-family:inherit;min-height:44px;cursor:pointer}

/* ---------- ส่วนขยาย (details) ---------- */
details summary{cursor:pointer;list-style:none;-webkit-tap-highlight-color:transparent}
details summary::-webkit-details-marker{display:none}
.chev{display:inline-block;width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:rotate(45deg);margin-left:6px;transition:transform .15s}
details[open] .chev{transform:rotate(225deg)}

/* ---------- อื่น ๆ ---------- */
.empty{color:var(--ink3);text-align:center;padding:30px 14px;line-height:1.9}
.empty b{display:block;color:var(--ink2);font-size:14px}
footer{color:var(--ink3);font-size:12px;text-align:center;padding:20px 0 8px;line-height:2;
  border-top:1px solid var(--line);margin-top:20px}
@media(min-width:760px){
  #list.grid2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:13px;align-items:start}
  #list.grid2 .card{margin-bottom:0}
  #list.grid2 .empty{grid-column:1/-1}
}