/* ═══════════════════════════════════════════════════════════
   nexiva — ระบบดีไซน์กลาง
   โหลดหลัง <style> ของแต่ละหน้า จึงทับค่าเดิมได้โดยไม่ต้องรื้อโครง

   สีหลักเป็นเขียวเข้มให้เข้ากับตราบริษัท (ทอง+เขียว) แทนสีเดิมที่เป็นเขียวอมฟ้า
   ทองสงวนไว้ให้ตราอย่างเดียว ถ้าเอาไปใช้กับปุ่มหรือหัวข้อจะกลายเป็นหน้าเว็บ
   ที่ทุกอย่างอยากเด่นเท่ากันหมด แล้วสุดท้ายไม่มีอะไรเด่น
   ═══════════════════════════════════════════════════════════ */

@import url("/static/fonts/fonts.css");

:root {
  /* ── สี ── */
  --paper:     #fbfbf9;
  --card:      #ffffff;
  --surface:   #f4f5f2;
  --sunk:      #eceeea;
  --ink:       #17211c;
  --soft:      #4d5a53;
  --faint:     #8a948e;
  --rule:      #e2e5e0;
  --hard:      #ccd1cb;

  /* เขียวจากตราบริษัท */
  --petrol:    #1b6b42;
  --petrol-dk: #145233;
  --petrol-bg: #e8f2ec;
  --gold:      #c9a227;

  --amber:     #8a6206;
  --amber-bg:  #fbf1da;
  --red:       #a02a1c;
  --red-bg:    #fbeae7;
  --green:     #1b6b42;
  --green-bg:  #e8f2ec;

  /* ── ตัวอักษร ── */
  --thai: "IBM Plex Sans Thai", "Noto Sans Thai", "Leelawadee UI", Tahoma, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, Consolas, monospace;

  /* ── ระยะห่าง — ไล่เป็นระบบ ไม่เดาทีละจุด ── */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px;

  --r:   8px;      /* มุมโค้งมาตรฐาน */
  --r-sm: 5px;
  --shadow:    0 1px 2px rgba(20,35,28,.06), 0 2px 8px rgba(20,35,28,.05);
  --shadow-lg: 0 4px 12px rgba(20,35,28,.10), 0 12px 32px rgba(20,35,28,.09);
  --ring: 0 0 0 3px rgba(27,107,66,.20);
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper:   #0e1512;
    --card:    #151d19;
    --surface: #1a2420;
    --sunk:    #202b26;
    --ink:     #e8ede9;
    --soft:    #a6b2ab;
    --faint:   #717d76;
    --rule:    #26312c;
    --hard:    #3a463f;
    --petrol:    #5fc48c;
    --petrol-bg: #10281c;
    --gold:      #d9b64a;
    --amber:   #e0b45f; --amber-bg: #2a2112;
    --red:     #f08b7c; --red-bg:   #2b1613;
    --green:   #5fc48c; --green-bg: #10281c;
    --shadow:    0 1px 2px rgba(0,0,0,.32), 0 2px 8px rgba(0,0,0,.26);
    --shadow-lg: 0 4px 12px rgba(0,0,0,.42), 0 12px 32px rgba(0,0,0,.36);
    --ring: 0 0 0 3px rgba(95,196,140,.24);
  }
}

/* ── พื้นฐาน ─────────────────────────────────────────────── */
body {
  font-family: var(--thai);
  font-size: 15.5px;
  line-height: 1.7;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4 { letter-spacing: -.006em; text-wrap: balance; }
h1 { font-weight: 700; }
h2, h3 { font-weight: 600; }

/* ตัวเลขเรียงตรงคอลัมน์เสมอ — ตารางเงินและจำนวนคนอ่านง่ายขึ้นมาก */
.num, td.num, input[type=number], .stat dd, .est b { font-variant-numeric: tabular-nums; }

/* ── ป้ายกำกับและตัวอักษรเล็ก ────────────────────────────── */
label {
  font-size: 13px;
  font-weight: 500;
  color: var(--soft);
  margin-bottom: 5px;
  letter-spacing: .002em;
}
.hint { font-size: 13px; color: var(--faint); line-height: 1.6; }
.crumb {
  font-family: var(--thai);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--faint);
}

/* ── ช่องกรอก ────────────────────────────────────────────── */
input, select, textarea {
  font-family: var(--thai);
  font-size: 15px;
  padding: 10px 13px;
  min-height: 44px;                 /* นิ้วกดได้จริงบนมือถือ */
  border: 1px solid var(--hard);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  transition: border-color .12s, box-shadow .12s;
}
input::placeholder, textarea::placeholder { color: var(--faint); }
input:hover:not(:disabled), select:hover:not(:disabled) { border-color: var(--soft); }
input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--petrol);
  box-shadow: var(--ring);
}
input:disabled, select:disabled, textarea:disabled {
  background: var(--sunk);
  color: var(--faint);
  cursor: not-allowed;
}
select {
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--soft) 50%),
                    linear-gradient(135deg, var(--soft) 50%, transparent 50%);
  background-position: calc(100% - 18px) 52%, calc(100% - 13px) 52%;
  background-size: 5px 5px, 5px 5px;
  background-repeat: no-repeat;
  padding-right: 34px;
}
input[type=checkbox] { min-height: 0; width: 17px; height: 17px; accent-color: var(--petrol); }

/* ── ปุ่ม ────────────────────────────────────────────────── */
button {
  font-family: var(--thai);
  font-size: 14.5px;
  font-weight: 500;
  padding: 10px 18px;
  min-height: 42px;
  border: 1px solid var(--hard);
  border-radius: var(--r-sm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background .12s, border-color .12s, box-shadow .12s, transform .06s;
}
button:hover:not(:disabled) { background: var(--surface); border-color: var(--soft); color: var(--ink); }
button:active:not(:disabled) { transform: translateY(1px); }
button:focus-visible { outline: none; box-shadow: var(--ring); border-color: var(--petrol); }

button.primary {
  background: var(--petrol);
  border-color: var(--petrol);
  color: #fff;
  font-weight: 600;
  box-shadow: var(--shadow);
}
button.primary:hover:not(:disabled) { background: #165937; border-color: #165937; color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) button.primary { color: #072315; }
  :root:not([data-theme=light]) button.primary:hover:not(:disabled) { background: #74d09d; border-color: #74d09d; color: #072315; }
}
button.danger:hover:not(:disabled) { border-color: var(--red); color: var(--red); background: var(--red-bg); }
button:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }

/* ── กล่องและการ์ด ───────────────────────────────────────── */
.step, .drafts, #login, #chpw, .cs, .panel, .est {
  border-radius: var(--r);
  border-color: var(--rule);
}
.step, .drafts { box-shadow: var(--shadow); background: var(--card); }
.step-hd, .cs-hd {
  border-top-left-radius: var(--r);
  border-top-right-radius: var(--r);
  padding: 14px 20px;
}
.step-bd { padding: 20px; }
.step-no {
  font-family: var(--mono);
  font-size: 12px;
  font-weight: 600;
  border-radius: 4px;
  padding: 4px 9px;
  letter-spacing: .02em;
}
.step-hd h2 { font-size: 17px; font-weight: 600; }

/* ── หน้าเข้าสู่ระบบ ─────────────────────────────────────── */
#login, #chpw {
  box-shadow: var(--shadow-lg);
  padding: 34px 30px;
  background: var(--card);
}
#login h1, #chpw h1 { font-size: 21px; font-weight: 700; margin-bottom: 6px; }
#login p, #chpw p { font-size: 14px; color: var(--soft); line-height: 1.6; }
#login button, #chpw button { min-height: 46px; font-size: 15px; }

/* ── ตัวเลขสรุป ──────────────────────────────────────────── */
.stats { border-radius: var(--r); overflow: hidden; box-shadow: var(--shadow); border-color: var(--rule); }
.stat { padding: 14px 18px; }
.stat dt { font-size: 11px; font-weight: 500; letter-spacing: .09em; color: var(--faint); }
.stat dd { font-size: 25px; font-weight: 700; letter-spacing: -.02em; }

/* ── ตาราง ───────────────────────────────────────────────── */
table { font-size: 14.5px; }
th {
  font-family: var(--thai);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .07em;
  color: var(--faint);
  padding: 11px 14px;
}
td { padding: 12px 14px; }
tbody tr { transition: background .1s; }
tbody tr:hover:not(.unitrow) { background: var(--surface); }
.unitrow td { font-weight: 600; font-size: 13.5px; letter-spacing: .01em; }
td.code { font-family: var(--mono); font-size: 12.5px; letter-spacing: -.01em; color: var(--soft); }

/* ── ป้ายสถานะ ───────────────────────────────────────────── */
.tag, .pill {
  border-radius: 100px;
  padding: 3px 11px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: .01em;
  border-width: 1px;
}

/* ── กล่องโต้ตอบ ─────────────────────────────────────────── */
dialog {
  border: 0;
  border-radius: var(--r);
  box-shadow: var(--shadow-lg);
  padding: 0;
}
dialog::backdrop { background: rgba(14,21,18,.5); backdrop-filter: blur(2px); }
.dlg-hd { padding: 18px 22px; font-size: 17px; font-weight: 600; }
.dlg-bd { padding: 20px 22px; }
.dlg-ft { padding: 16px 22px; gap: 10px; }

/* ── ข้อความแจ้งเตือน ────────────────────────────────────── */
.err {
  border-radius: var(--r-sm);
  padding: 11px 14px;
  font-size: 14px;
  line-height: 1.55;
  border-left-width: 3px;
}
#toast {
  border-radius: 100px;
  padding: 11px 22px;
  font-size: 14.5px;
  font-weight: 500;
  box-shadow: var(--shadow-lg);
}

/* ── เอกสารข้อตกลง ───────────────────────────────────────── */
.cs-doc { font-size: 15px; line-height: 1.9; padding: 20px 22px; }
.cs-doc h4 { font-size: 15.5px; font-weight: 600; margin: 18px 0 6px; }
.cs-langs button { border-radius: 0; min-height: 44px; font-weight: 500; }
.sigpad { border-radius: var(--r-sm); }

/* ── ประมาณการรายได้ ─────────────────────────────────────── */
.est { border-radius: var(--r); padding: 16px 18px; }
.est b { font-size: 22px; font-weight: 700; letter-spacing: -.02em; }

/* ── รูปถ่าย ─────────────────────────────────────────────── */
.photo { border-radius: var(--r-sm); padding: 16px 12px; }

/* ── หัวหน้าจอ ───────────────────────────────────────────── */
header { padding-bottom: 16px; border-bottom-width: 1px; border-bottom-color: var(--rule); }
.brand-tx b { letter-spacing: .01em; }

/* ── มือถือ ──────────────────────────────────────────────── */
@media (max-width: 640px) {
  body { font-size: 15px; }
  .step-bd, .dlg-bd { padding: 16px; }
  .stat dd { font-size: 22px; }
}

/* ═══ จอมือถือ: ตารางกลายเป็นการ์ด ═══════════════════════════
   ตารางนี้มี 7 คอลัมน์ กว้าง ~690px บนจอ 360-390px จึงถูกตัดหายไปครึ่งหนึ่ง
   และเพราะการ์ดตั้ง overflow:hidden ไว้ เลื่อนดูก็ไม่ได้ — **ปุ่มแก้ไขกับลบ
   หายไปเลย** เท่ากับทำงานจากมือถือไม่ได้จริง
   แก้โดยเลิกเป็นตารางบนจอเล็ก ให้แต่ละหน่วยงานเป็นการ์ดเรียงลงมาแทน
   ไม่ใช้วิธีเลื่อนแนวนอน เพราะคนต้องเลื่อนไปมาทุกครั้งที่อยากกดปุ่ม
   ═══════════════════════════════════════════════════════════ */
@media (max-width: 700px) {
  .tbl-card { background: transparent; border: 0; box-shadow: none; overflow: visible; }
  /* เจาะจงเป็นลูกโดยตรงของตารางหลัก ไม่งั้นกฎการ์ดจะไปโดนตารางกะที่ซ้อนอยู่
     ข้างในด้วย แล้วเวลาแก้อะไรทีหลังจะงงว่าทำไมของข้างในเปลี่ยนตาม */
  .tbl-card > table,
  .tbl-card > table > tbody,
  .tbl-card > table > tbody > tr,
  .tbl-card > table > tbody > tr > td { display: block; width: 100%; }
  .tbl-card > table > thead { display: none; }

  .tbl-card > table > tbody > tr:not(.unitrow):not(.kids) {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
    box-shadow: var(--shadow); padding: 12px 14px; margin-bottom: 10px;
  }
  .tbl-card > table > tbody > tr:hover:not(.unitrow):not(.kids) { background: var(--card); }
  .tbl-card > table > tbody > tr > td { border: 0; padding: 3px 0; }
  .tbl-card > table > tbody > tr > td:empty { display: none; }   /* ไม่มีค่าก็ไม่ต้องมีป้าย */
  .tbl-card td[data-l]::before {
    content: attr(data-l) " · "; color: var(--faint); font-size: 12.5px;
  }
  .tbl-card td.code { color: var(--faint); font-size: 12px; padding-bottom: 0; }
  .tbl-card td.name { font-size: 16px; padding-top: 0; }
  .tbl-card > table > tbody > tr > td > .acts { justify-content: stretch; gap: 8px; margin-top: 10px; }
  .tbl-card > table > tbody > tr > td > .acts button { flex: 1; min-height: 40px; font-size: 14px; }

  /* หัวกลุ่มหน่วยงาน */
  .tbl-card .unitrow td { border-radius: var(--r-sm); padding: 9px 12px; margin-bottom: 8px; }

  /* แถวที่กางอยู่ */
  .tbl-card > table > tbody > tr.opened { background: var(--petrol-bg); border-color: var(--petrol); }
  .tbl-card > table > tbody > tr.opened > td { background: transparent; }

  /* แถวย่อยของกะ — แต่ละกะเป็นการ์ดย่อยของตัวเอง ปุ่มอยู่ในกะที่มันคุม
     ไม่ใช่ปุ่มลอย ๆ ที่ต้องเดาว่าอันไหนของใคร */
  .tbl-card tr.kids { margin: -6px 0 12px; }
  .kid { padding: 12px; border-radius: var(--r); box-shadow: inset 3px 0 0 var(--petrol); }
  .kid-tb, .kid-tb tbody, .kid-tb tr, .kid-tb td { display: block; width: 100%; }
  .kid-tb { min-width: 0; }
  .kid-tb tr {
    background: var(--card); border: 1px solid var(--rule); border-radius: var(--r-sm);
    padding: 10px 12px; margin-bottom: 8px;
  }
  .kid-tb td { padding: 2px 0; border: 0; }
  .kid-nm { font-size: 15px; font-weight: 600; }
  .kid-tb .acts { justify-content: flex-start; gap: 8px; margin-top: 8px; }
  .kid-tb .acts button { flex: 1; min-height: 38px; }
  .kid-sum { display: block; text-align: center; }
  .kid-add { width: 100%; min-height: 40px; }
}

/* ── หัวจอและตัวเลขสรุปบนมือถือ ─────────────────────────────── */
/* เดิมหัวจอสูง ~200px กินไปหนึ่งในสี่ของจอก่อนเห็นเนื้อหาแม้แต่บรรทัดเดียว */
@media (max-width: 640px) {
  header { padding: 10px 14px !important; gap: 10px; margin-top: 10px; }
  header .brand-mk { width: 40px; height: 40px; }
  header .brand-tx b { font-size: 16px; }
  header .crumb { display: none; }        /* ชื่อหน้าไม่จำเป็น มีหน้าเดียว */
  header .who { margin-left: auto; font-size: 12.5px; }
  header #btnOut { min-height: 36px; padding: 6px 12px; font-size: 13px; }

  /* 5 ช่อง เรียงสองคอลัมน์ ช่องสุดท้ายกินเต็มแถว จะได้ไม่เหลือช่องว่างเทา ๆ */
  .stats { grid-template-columns: 1fr 1fr; }
  .stat:last-child { grid-column: 1 / -1; }
  .stat { padding: 10px 14px; }

  /* ปุ่มหลักเต็มความกว้าง กดด้วยนิ้วโป้งได้ถนัด */
  .toolbar { gap: 8px; }
  .toolbar input[type=search] { max-width: none; }
  .toolbar select { max-width: none; flex: 1; }
  .toolbar #btnNew { width: 100%; }
  #swPick { max-width: none; width: 100%; }
}

/* ── พิมพ์ ───────────────────────────────────────────────── */
@media print {
  body { background: #fff; color: #111; }
  button, .toolbar, header button { display: none !important; }
  .step, .drafts, .cs { box-shadow: none; border: 1px solid #ccc; }
}

/* ── ตราบริษัทบนหน้าล็อกอิน ─────────────────────────────── */
/* คนกำลังจะกรอกรหัสผ่าน ต้องเห็นก่อนว่าเป็นระบบของบริษัทจริง */
#loginBrand { margin-bottom: 22px; padding-bottom: 20px; border-bottom: 1px solid var(--rule); }
#loginBrand .brand-mk { width: 52px; height: 52px; }
#loginBrand .brand-tx b { font-size: 20px; }
#login h1, #chpw h1 { font-size: 19px; }

/* ── ปุ่มหลัก: บังคับคอนทราสต์ให้ชนะกฎเดิมของหน้า ────────── */
/* หน้าเดิมมีกฎ :root:not([data-theme=light]) ที่ specificity สูงกว่า
   จึงต้องเขียนด้วยความจำเพาะเท่ากันและมาทีหลัง ไม่งั้นตัวอักษรจะเข้มบนพื้นเขียว */
:root:not([data-theme=dark]) button.primary,
:root:not([data-theme=dark]) button.primary:hover:not(:disabled) { color: #fff; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) button.primary,
  :root:not([data-theme=light]) button.primary:hover:not(:disabled) { color: #062315; }
}

/* ── เครื่องมือหาพิกัด ───────────────────────────────────── */
/* ชื่อคลาสเป็น .geobox ไม่ใช่ .geo เพราะ .geo ถูกใช้เป็นป้ายสถานะ (.tag.geo)
   อยู่ก่อนแล้ว ถ้าตั้งชื่อซ้ำ กฎของกล่องจะไปพองป้ายในตารางให้ใหญ่ผิดรูป */
.geobox { border: 1px solid var(--rule); border-radius: var(--r); padding: 16px; margin-top: 4px; background: var(--surface); }
.geo-hd { font-weight: 600; font-size: 14.5px; margin-bottom: 4px; }
.geo-acts { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 8px; }
.geo-acts .geo-find { display: flex; gap: 8px; flex: 1; min-width: 240px; }
.geo-acts input[type=search] { flex: 1; min-width: 0; }
.geo-acts .geo-find button { flex: none; }
.geo-acts .or { color: var(--faint); font-size: 13px; }
#geoMsg { min-height: 1.2em; margin-bottom: 6px; }
#geoHits { display: flex; flex-direction: column; gap: 6px; }
.hit { display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
       text-align: left; padding: 9px 12px; min-height: 0; width: 100%; }
.hit-nm { font-size: 13.5px; line-height: 1.45; }
.hit-co { font-size: 12px; color: var(--faint); }
.hit.on { border-color: var(--petrol); background: var(--petrol-bg); }
.geo-ft { display: flex; gap: 12px; align-items: baseline; justify-content: space-between; flex-wrap: wrap; margin-top: 6px; }
.geo-ft a { color: var(--petrol); font-size: 13px; font-weight: 500; text-decoration: none; }
.geo-ft a:hover { text-decoration: underline; }
.geo-link { color: var(--ink); text-decoration: none; font-size: 13px; }
.geo-link:hover { color: var(--petrol); text-decoration: underline; }
.geo-link .rad { color: var(--faint); }

/* ═══ สีพื้นหลังและการแยกชั้น ═══════════════════════════════
   เดิมทั้งหน้าเป็นสีขาวล้วน ตาไม่รู้ว่าอะไรเป็นกลุ่มเดียวกัน ต้องอ่านทีละบรรทัด
   ทำใหม่เป็นสามชั้น: พื้นหน้าเว็บมีสีอ่อน ๆ · การ์ดเป็นสีขาววางทับ · หัวข้อกลุ่มเป็นแถบเขียว
   สีที่ใช้มาจากตราบริษัทชุดเดิม ไม่เพิ่มสีใหม่ให้ฉูดฉาด
   ═══════════════════════════════════════════════════════════ */
:root {
  --paper:   #e9eeea;      /* พื้นหน้าเว็บ — เขียวอมเทาอ่อน ไม่ใช่ขาวโพลน */
  --surface: #f0f3ef;
  --sunk:    #e3e8e3;
  --rule:    #dde3dd;
  --band:    linear-gradient(180deg, #e4efe7, #dbe9e0);   /* แถบหัวกลุ่ม */
  --info:    #1d5d8c;  --info-bg: #e5eff7;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) {
    --paper:   #0c1210;
    --surface: #18211d;
    --band:    linear-gradient(180deg, #16302322, #16302300);
    --info:    #79b8e0;  --info-bg: #112432;
  }
}

body {
  background:
    radial-gradient(1100px 480px at 12% -8%, rgba(27,107,66,.10), transparent 62%),
    radial-gradient(900px 420px at 95% 4%, rgba(201,162,39,.09), transparent 60%),
    var(--paper);
  background-attachment: fixed;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) body {
    background:
      radial-gradient(1100px 480px at 12% -8%, rgba(95,196,140,.09), transparent 62%),
      radial-gradient(900px 420px at 95% 4%, rgba(217,182,74,.06), transparent 60%),
      var(--paper);
  }
}

/* หัวหน้าจอ — แถบสีขาวลอยเหนือพื้น ให้ตราบริษัทมีที่ยืน */
header {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  padding: 14px 20px !important;
  margin-top: 18px;
}
header .crumb {
  background: var(--petrol-bg);
  color: var(--petrol);
  padding: 4px 12px;
  border-radius: 100px;
  font-weight: 600;
}

/* ตัวเลขสรุป — แต่ละใบมีเส้นสีบนหัว แยกออกจากกันโดยไม่ต้องอ่านหัวข้อ */
.stats { background: var(--rule); border: 0; }
.stat { background: var(--card); position: relative; padding-top: 16px; }
.stat::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  background: var(--petrol);
}
.stat:nth-child(2)::before { background: var(--info); }
.stat:nth-child(3)::before { background: var(--amber); }
.stat:nth-child(4)::before { background: var(--red); }
.stat:nth-child(5)::before { background: var(--faint); }
.stat dd { color: var(--ink); }

/* ตารางเป็นการ์ดสีขาว มีหัวตารางสีจม ไม่ลอยติดกับพื้นหลัง */
.tbl-card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: var(--shadow);
  overflow: hidden;
}
.tbl-card table { margin: 0; }
thead th { background: var(--sunk) !important; border-bottom: 1px solid var(--rule); }
tbody tr:hover:not(.unitrow):not(.kids) { background: var(--petrol-bg); }

/* หัวกลุ่มหน่วยงาน — แถบเขียวมีขีดข้างซ้าย บอกว่ากำลังอยู่ในกลุ่มไหน */
.unitrow td {
  background: var(--band) !important;
  color: var(--petrol);
  border-bottom: 1px solid var(--rule);
  box-shadow: inset 3px 0 0 var(--petrol);
  padding-left: 14px;
}

/* ═══ กะเป็นแถวย่อยใต้หน่วยงาน ═══════════════════════════════ */
/* ปุ่มชื่อหน่วยงานทำหน้าที่กาง/หุบ — คลิกที่ชื่อคือสิ่งที่คนลองทำอยู่แล้ว */
button.tw {
  border: 0; background: none; padding: 0; min-height: 0;
  font-size: inherit; font-weight: 600; color: var(--ink);
  display: inline-flex; align-items: center; gap: 9px; text-align: left;
}
button.tw:hover:not(:disabled) { background: none; color: var(--petrol); }
.tw-nm { text-decoration: underline; text-decoration-style: dotted;
         text-decoration-color: var(--hard); text-underline-offset: 4px; }
button.tw:hover .tw-nm { text-decoration-style: solid; text-decoration-color: var(--petrol); }
/* ลูกศรเป็นปุ่มกลมมีพื้น ให้เห็นแต่ไกลว่าแถวนี้กดขยายได้ */
.tw-ar {
  color: var(--petrol); background: var(--petrol-bg); border: 1px solid var(--petrol-bg);
  font-size: 10px; line-height: 1; width: 22px; height: 22px; flex: none;
  border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s, border-color .12s;
}
button.tw:hover .tw-ar { background: var(--petrol); color: var(--card); border-color: var(--petrol); }
/* คำใบ้ท้ายชื่อ โผล่ตอนชี้ที่แถว ไม่รกตาเวลากวาดสายตาอ่านรายชื่อ */
.tw-cue { display: block; font-size: 11.5px; color: var(--petrol); margin-left: 31px;
          opacity: 0; transition: opacity .12s; }
tbody tr:hover .tw-cue, button.tw:focus-visible + .tw-cue { opacity: 1; }
@media (hover: none) { .tw-cue { opacity: .75; } }   /* มือถือไม่มีการชี้ ให้เห็นตลอด */

/* ไซต์ที่เพิ่งสร้าง — เน้นให้เห็นสองสามวินาทีว่าอันไหน */
@keyframes justmade { from { background: var(--petrol-bg); } to { background: transparent; } }
tr.justmade td, tr.justmade .kid { animation: justmade 2.4s ease-out; }

.th-tip { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--faint); }
tr.opened td { background: var(--petrol-bg); }
tr.opened td.name button.tw { color: var(--petrol); }

tr.kids td { padding: 0; border-bottom: 1px solid var(--rule); }
.kid {
  background: var(--surface);
  box-shadow: inset 3px 0 0 var(--petrol);
  padding: 12px 16px 14px 46px;
}
.kid-msg { color: var(--soft); font-size: 13.5px; padding: 2px 0 10px; }
.kid-tb { width: auto; min-width: min(560px, 100%); font-size: 14px; }
.kid-tb td { padding: 7px 16px 7px 0; border-bottom: 1px dashed var(--rule); vertical-align: middle; }
.kid-tb tr:last-child td { border-bottom: 0; }
.kid-nm { font-weight: 500; }
.kid-tm { color: var(--soft); font-family: var(--mono); font-size: 13px; }
.kid-ct { color: var(--soft); }
.kid-tb .acts button { padding: 4px 12px; min-height: 30px; font-size: 13px; }
.kid-sum {
  display: inline-block; margin-top: 10px; padding: 4px 12px;
  border-radius: 100px; font-size: 12.5px; font-weight: 500;
}
.kid-sum.ok   { background: var(--green-bg); color: var(--green); }
.kid-sum.warn { background: var(--amber-bg); color: var(--amber); }
.kid-add {
  display: block; margin-top: 12px; min-height: 34px; padding: 5px 14px;
  font-size: 13.5px; border-style: dashed; color: var(--petrol); border-color: var(--petrol);
  background: var(--card);
}
.kid-add:hover:not(:disabled) { background: var(--petrol-bg); border-style: solid; color: var(--petrol); }

.muted { color: var(--faint); font-size: 13.5px; }

/* ── แถบแจ้งว่ามีเวอร์ชันใหม่ ─────────────────────────────────── */
/* วางลอยล่างขวา ไม่ทับเนื้อหาและไม่ดันของทั้งหน้าให้ขยับตอนโผล่มา
   คนกำลังกรอกฟอร์มอยู่จะได้ไม่กดพลาดเพราะปุ่มเลื่อนหนี */
.verbar {
  position: fixed; right: 18px; bottom: 18px; z-index: 120;
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  max-width: calc(100% - 36px);
  background: var(--card); color: var(--ink);
  border: 1px solid var(--petrol); border-left-width: 4px;
  border-radius: var(--r); box-shadow: var(--shadow-lg);
  padding: 12px 16px; font-size: 14px;
}
.verbar button { min-height: 34px; padding: 5px 14px; font-size: 13.5px;
                 background: var(--petrol); border-color: var(--petrol); color: #fff; font-weight: 600; }
.verbar button.ghost { background: var(--card); color: var(--soft); border-color: var(--hard); font-weight: 400; }
.verbar button:disabled { opacity: .6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme=light]) .verbar button { color: #062315; }
  :root:not([data-theme=light]) .verbar button.ghost { color: var(--soft); }
}
@media (max-width: 560px) { .verbar { left: 18px; right: 18px; bottom: 12px; } }

/* ── แถบเตือนตอนสวมสิทธิ์เป็นผู้ใช้อื่น ──────────────────────── */
/* ต้องเห็นชัดตลอดเวลา ไม่งั้นคนทดสอบจะลืมว่าตัวเองไม่ใช่ตัวเองอยู่
   แล้วไปแก้ข้อมูลจริงของคนอื่นโดยไม่ตั้งใจ */
.swbar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  background: var(--amber-bg); color: var(--amber);
  border: 1px solid var(--amber); border-radius: var(--r);
  padding: 10px 16px; margin-bottom: 16px; font-size: 14px;
}
.swbar b { color: var(--ink); }
.swbar button { margin-left: auto; min-height: 34px; padding: 5px 14px; font-size: 13.5px; }
#swPick { max-width: 230px; min-height: 38px; font-size: 13.5px; }
/* ช่องเวลา — ตัวเลขเรียงตรง อ่านผิดยาก */
input.tm { font-family: var(--mono); letter-spacing: .06em; max-width: 130px; }

/* กล่องโต้ตอบ — หัวกล่องมีสีจึงแยกจากเนื้อหาได้ */
.dlg-hd { background: var(--band); color: var(--petrol); border-bottom: 1px solid var(--rule); }
.dlg-ft { background: var(--surface); border-top: 1px solid var(--rule); }
#login, #chpw { border-top: 3px solid var(--petrol); }


/* ── ขนาดพื้นที่กดบนจอสัมผัส ─────────────────────────────────── */
/* ต้องอยู่ท้ายไฟล์ เพราะกฎของ tree ด้านบนตั้ง button.tw{min-height:0} ไว้
   ถ้าเขียนไว้ก่อนหน้านั้น กฎนี้จะถูกทับแล้วปุ่มจะเตี้ยเหมือนเดิมโดยไม่มีอะไรฟ้อง */
@media (max-width: 700px) {
  /* ชื่อหน่วยงานคือปุ่มกาง/หุบ — กดด้วยนิ้วโป้ง ต้องสูงพอและกินเต็มความกว้าง
     จะได้ไม่ต้องเล็งที่ตัวอักษร */
  button.tw { min-height: 42px; width: 100%; }
  .tw-cue { opacity: .8; }              /* จอสัมผัสไม่มีการชี้ ต้องเห็นตลอด */
  .toolbar label.chk { min-height: 42px; padding: 0 2px; }
  .toolbar input[type=checkbox] { width: 22px; height: 22px; min-height: 22px; }
}