/* สีทั้งหมดมาจากตัวแปรชุดนี้ (กฎกลางข้อ 8.2 ข้อ 11) — ธีม SIAM.RENT แดง/เหลือง/ฟ้าอ่อน */
:root {
  --bg: #F2F7FB;
  --bg-card: #FFFFFF;
  --text-primary: #181818;
  --text-muted: #5E6670;
  --accent-primary: #C4161C;
  --accent-soft: #FDECEC;
  --accent-yellow: #FFCE00;
  --line: #DCE3EA;
  --row-hover: #F7FAFD;
  --row-active: #FFF7D1;
  --warn-bg: #FFF4CC;
  --warn-line: #E5B800;
  --chart-a: #C4161C;
  --chart-b: #2F6FB0;
  /* ระดับดีมานด์ — ต่ำ ฟ้า · ปกติ เทา · สูง เหลือง · รถเริ่มขาด แดง */
  --tier0-bg: #DCEBF8; --tier0-fg: #1F4E79;
  --tier1-bg: #EEF1F4; --tier1-fg: #3D4650;
  --tier2-bg: #FFE38A; --tier2-fg: #5C4300;
  --tier3-bg: #C4161C; --tier3-fg: #FFFFFF;
  --off-text: #C4161C;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text-primary);
  font-family: 'Leelawadee UI', 'Sarabun', 'Noto Sans Thai', system-ui, sans-serif;
  font-size: 15px;
}
.top {
  background: var(--bg-card);
  border-bottom: 4px solid var(--accent-primary);
  padding: 14px 16px;
}
.top h1 { margin: 0; font-size: 20px; }
.top small { display: block; font-size: 13px; font-weight: normal; color: var(--text-muted); margin-top: 2px; }

main { max-width: 1280px; margin: 0 auto; padding: 16px; }

.filters {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(170px, 1fr));
  gap: 12px 16px;
  background: var(--bg-card);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 14px 16px;
}
.filters label { display: flex; flex-direction: column; gap: 4px; font-size: 13px; color: var(--text-muted); }
.filters select {
  font: inherit; color: var(--text-primary);
  padding: 9px 10px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card);
}

.tabs { display: flex; gap: 8px; margin: 16px 0 12px; flex-wrap: wrap; }
.tabs button {
  font: inherit; padding: 10px 18px; min-height: 42px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--bg-card); color: var(--text-primary); cursor: pointer;
}
.tabs button.on { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-card); }

.notice {
  background: var(--warn-bg); border: 1px solid var(--warn-line);
  border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px;
}

.card {
  background: var(--bg-card); border: 1px solid var(--line); border-radius: 10px;
  padding: 14px 16px; margin-bottom: 16px;
}
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.card h2 { margin: 0 0 10px; font-size: 17px; }
.muted { color: var(--text-muted); }
.small { font-size: 13px; }
.ghost {
  font: inherit; padding: 8px 14px; border: 1px solid var(--line);
  border-radius: 8px; background: var(--bg-card); color: var(--text-primary); cursor: pointer;
}

.table-wrap { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 14px; }
th, td { padding: 8px 10px; border-bottom: 1px solid var(--line); text-align: right; white-space: nowrap; }
th:first-child, td:first-child { text-align: left; position: sticky; left: 0; background: var(--bg-card); }
th { font-weight: 600; color: var(--text-muted); cursor: pointer; user-select: none; vertical-align: bottom; }
th.sorted { color: var(--accent-primary); }
th .sub { display: block; font-weight: normal; font-size: 12px; }
tbody tr { cursor: pointer; }
/* ตารางสี (.heat) ไม่ไฮไลต์ตอนชี้เมาส์ — สีในช่องคือข้อมูล เปลี่ยนแล้วอ่านไม่ออก (เจ้าของขอ 20 ต.ค. 2569) */
table:not(.heat) tbody tr:hover td { background: var(--row-hover); }
table:not(.heat) tbody tr.active td { background: var(--row-active); }
td.key { font-weight: 600; color: var(--accent-primary); }
td .range { color: var(--text-muted); font-size: 12px; }
tfoot td { font-weight: 600; border-top: 2px solid var(--line); }

#trend svg { width: 100%; height: auto; display: block; }
#trend .axis { stroke: var(--line); }
#trend .lbl { fill: var(--text-muted); font-size: 11px; }
#trend .line-a { stroke: var(--chart-a); fill: none; stroke-width: 2.5; }
#trend .line-b { stroke: var(--chart-b); fill: none; stroke-width: 2; stroke-dasharray: 5 4; }
#trend .dot { fill: var(--chart-a); }
.legend { display: flex; gap: 16px; font-size: 13px; color: var(--text-muted); margin-top: 6px; flex-wrap: wrap; }
.legend i { display: inline-block; width: 18px; height: 3px; vertical-align: middle; margin-right: 6px; }
.legend .a { background: var(--chart-a); }
.legend .b { background: var(--chart-b); }

.notes ul { margin: 0; padding-left: 20px; line-height: 1.7; font-size: 14px; }

/* ── เมนูหน้า ── */
.top { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.pages { display: flex; gap: 6px; flex-wrap: wrap; }
.pages a {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--line);
  color: var(--text-primary); text-decoration: none; font-size: 14px; background: var(--bg-card);
}
.pages a.on { background: var(--accent-primary); border-color: var(--accent-primary); color: var(--bg-card); }

/* ── ตารางสีระดับดีมานด์ ── */
.legend.tiers { margin: 0 0 10px; }
.legend.tiers i { width: 14px; height: 14px; border-radius: 3px; }
.legend i.t0, .t0 { background: var(--tier0-bg); color: var(--tier0-fg); }
.legend i.t1, .t1 { background: var(--tier1-bg); color: var(--tier1-fg); }
.legend i.t2, .t2 { background: var(--tier2-bg); color: var(--tier2-fg); }
.legend i.t3, .t3 { background: var(--tier3-bg); color: var(--tier3-fg); }
table.heat { width: auto; font-size: 12px; }
table.heat th, table.heat td { padding: 4px 3px; min-width: 30px; text-align: center; border-bottom: 1px solid var(--bg-card); }
table.heat td.na { color: var(--text-muted); }
table.heat td.long { box-shadow: inset 0 0 0 2px var(--text-primary); }
table.heat th { font-weight: 600; line-height: 1.2; cursor: default; }
table.heat th.off { color: var(--off-text); }
table.heat th .dow { display: block; font-weight: normal; }
table.heat th .mon { display: block; font-size: 11px; color: var(--accent-primary); }
table.heat .name { text-align: left; min-width: 170px; position: sticky; left: 0; background: var(--bg-card); z-index: 1; }
table.heat td.name { font-weight: 600; font-size: 13px; cursor: pointer; }
table.heat td.name .sub { display: block; font-weight: normal; font-size: 11px; color: var(--text-muted); }
table.heat tr.active td.name { color: var(--accent-primary); }

#detail caption.warn { caption-side: top; text-align: left; background: var(--warn-bg); padding: 8px 10px; border-radius: 6px; margin-bottom: 8px; }
#detail td.hol { text-align: left; white-space: normal; min-width: 120px; max-width: 220px; font-size: 12px; color: var(--off-text); }
#detail td.offtxt { color: var(--off-text); font-weight: 600; }
#detail tbody tr { cursor: default; }
.chip { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 13px; }

.rules { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; font-size: 14px; }
.rule { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.rule input[type=number] {
  width: 76px; font: inherit; padding: 6px 8px; min-height: 38px;
  border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); color: var(--text-primary);
}
.rule input[type=checkbox] { width: 20px; height: 20px; }
.card h2 small { font-weight: normal; font-size: 13px; }

/* ── ดีมานด์จากแชท ── */
.chatbox { background: var(--accent-soft); border-radius: 8px; padding: 10px 14px; margin-bottom: 12px; font-size: 14px; line-height: 1.6; }
table.chat-models th .sub { display: block; font-weight: normal; font-size: 12px; }
table.chat-models tbody tr { cursor: default; }
.minis { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-top: 16px; }
.mini h3 { font-size: 15px; margin: 0 0 6px; }
.mini table { font-size: 13px; }
.mini td { padding: 5px 8px; }
.mini tbody tr { cursor: default; }

/* ── รายสาขา ── */
:root { --bneg-bg: #C4161C; --bneg-fg: #FFFFFF; --brisk-bg: #FFB36B; --brisk-fg: #4A2500; --bzero-bg: #FFE38A; --ok-text: #1E7B3A; }
#branch-box { margin: 4px 0 18px; }
#branch-box h3, #detail-card > h3 { font-size: 15px; margin: 14px 0 8px; }
.legend i.bneg, td.bneg { background: var(--bneg-bg); color: var(--bneg-fg); }
.legend i.brisk, td.brisk { background: var(--brisk-bg); color: var(--brisk-fg); }
.legend i.bzero, td.bzero { background: var(--bzero-bg); }
#branch-summary th .sub { display: block; font-weight: normal; font-size: 12px; }
#branch-summary tbody tr { cursor: default; }
td.negtxt, .neg-line b, span.neg { color: var(--off-text); font-weight: 600; }
span.risk { color: var(--brisk-fg); background: var(--brisk-bg); padding: 0 6px; border-radius: 4px; }
ul.advice { margin: 6px 0; padding-left: 20px; line-height: 1.7; font-size: 14px; }
p.ok-line { color: var(--ok-text); font-weight: 600; }
#detail td.short { text-align: left; white-space: normal; min-width: 130px; font-size: 12px; }

/* ── แถวรวมรายประเภทรถ ── */
table.heat tr.typerow td.name { background: var(--accent-soft); color: var(--accent-primary); font-size: 14px; cursor: default; }
table.heat tr.typerow td { border-top: 2px solid var(--text-primary); font-weight: 600; }

/* ── หน้าราคาตามดีมานด์ใช้ความกว้างเต็มจอ (20 ต.ค. 2569 เจ้าของขอ) ──
   ตารางรายวันมี 17 คอลัมน์ ถ้าจำกัดที่ 1,280px ต้องเลื่อนซ้ายขวา · จอเล็กกว่านี้ยังเลื่อนได้ตามเดิม */
body.wide main { max-width: none; }
#detail th, #detail td { padding: 7px 6px; }
#detail td.hol { min-width: 0; max-width: 170px; }

/* ── สรุปจากรายการรายคำขอแชท ── */
.chatstats { margin-top: 6px; font-size: 13px; }
table.heat td.name b.nocar { color: var(--off-text); font-weight: 600; }

/* ── หน้าคู่แข่ง ── */
td.oktxt { color: var(--ok-text); font-weight: 600; }
#compare td.src { text-align: left; white-space: normal; font-size: 12px; max-width: 420px; }
#competitors td.txt, table.offers td { text-align: left; white-space: normal; }
table.offers td:first-child { font-weight: 600; width: 160px; }
#advice h3 { font-size: 15px; margin: 14px 0 6px; }
.rule select { font: inherit; padding: 6px 8px; min-height: 38px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg-card); color: var(--text-primary); }

/* ── ระบบแนะนำ ควรทำ/ไม่ควรทำ ── */
#detail td.advise { text-align: left; white-space: normal; min-width: 220px; font-size: 12px; }
.adv { display: inline-block; width: 18px; height: 18px; line-height: 18px; text-align: center; border-radius: 50%; font-weight: 700; font-size: 12px; }
.adv.do { background: var(--ok-text); color: var(--bg-card); }
.adv.dont { background: var(--accent-primary); color: var(--bg-card); }
.adv.keep { background: var(--tier1-bg); color: var(--tier1-fg); }

/* ── ข้อค้นพบจากแชท ── */
.insights { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; margin-bottom: 16px; }
.mini.hot { background: var(--warn-bg); border: 1px solid var(--warn-line); border-radius: 8px; padding: 10px 12px; }
.mini p { margin: 4px 0 8px; }

/* ช่อง "ว่างตอนนี้" ชี้เมาส์ดูทะเบียนรถได้ (เจ้าของขอไม่ให้มีเส้นประ) */
#detail td.freecell { cursor: help; }
/* สาขาที่รถไม่พอ: บรรทัดละ 1 สาขา ป้ายไม่ตัดกลางชื่อ (เจ้าของขอ 20 ต.ค. 2569) */
#detail td.short span.neg, #detail td.short span.risk { display: inline-block; white-space: nowrap; margin: 1px 0; }

/* ── ตรึงหัวตารางรายวันตอนเลื่อนลง (เจ้าของขอ 20 ต.ค. 2569) ──
   กล่องตารางมีแถบเลื่อนแนวนอนอยู่แล้ว หัวตารางแบบ sticky จะติดกับกล่องนั้น ไม่ใช่กับหน้าเว็บ
   จึงจำกัดความสูงกล่องไว้ 75% ของจอ ให้เลื่อนลงในกล่อง แล้วหัวตารางค้างอยู่ด้านบน */
.table-wrap:has(> #detail) { max-height: 75vh; overflow: auto; }
#detail thead th { position: sticky; top: 0; z-index: 2; background: var(--bg-card); box-shadow: inset 0 -1px 0 var(--line); }
#detail thead th:first-child { z-index: 3; }
/* ชื่อวันหยุดยาว ๆ ย่อเหลือบรรทัดเดียว ชี้เมาส์ดูเต็ม (เจ้าของขอ 20 ต.ค. 2569) */
#detail td.hol { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 130px; min-width: 0; }

/* ปุ่มออกจากระบบท้ายแถบเมนู (มีเฉพาะบนเซิร์ฟเวอร์ที่ต้องล็อกอิน) */
nav.pages a.logout { margin-left: auto; opacity: .8; }