/* style.css — orgchart.hg-md.com · ธีมขาว-ฟ้า กรมเจ้าท่า
   สีทั้งหมดมาจากชุดโทเคนที่วัด contrast แล้ว (สกิล web-look-and-feel ข้อ 1.0) — ห้ามใส่สีนอกชุดโดยไม่คำนวณ */
:root{
  --bg0:#ffffff; --bg1:#f2f7fb; --bg-dark:#0f2b46; --brand-bg:#1f4e79;
  --ink:#10243a; --ink2:#35506b; --brand:#1f4e79; --accent-ink:#0b6f8c;
  --ok:#1a6b3c; --warn:#8a5300; --bad:#b3261e;
  --on-dark:#ffffff; --on-dark2:#cfe6f5;
  --line:#b8cde0;          /* เส้นกรอบ (ไม่ใช่ตัวหนังสือ) */
  --ok-bg:#e6f3ea; --warn-bg:#fdf1de; --bad-bg:#fbe9e7;
  --font:"TH Sarabun New","Sarabun","Leelawadee UI","Leelawadee",Tahoma,sans-serif;
}
*{box-sizing:border-box}
html{font-size:21px}
body{margin:0;background:var(--bg0);color:var(--ink);font-family:var(--font);line-height:1.45}
a{color:var(--brand)}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer}
h1,h2,h3{color:var(--brand);margin:.2em 0 .4em;line-height:1.25}
h1{font-size:1.75rem} h2{font-size:1.45rem} h3{font-size:1.2rem}
.wrap{padding:0 16px}
.muted{color:var(--ink2)}
.btn{border:1px solid var(--brand);background:var(--bg0);color:var(--brand);border-radius:8px;padding:.25em .8em;font-weight:700}
.btn:hover{background:var(--bg1)}
.btn.primary{background:var(--brand-bg);color:var(--on-dark);border-color:var(--brand-bg)}
.btn.primary:hover{background:var(--bg-dark)}
.btn.danger{border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.55;cursor:not-allowed}
.btn:focus-visible,a:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--accent-ink);outline-offset:2px}

/* หัวหน้า */
.topbar{background:var(--bg-dark);color:var(--on-dark);display:flex;align-items:center;gap:14px;padding:8px 16px;flex-wrap:wrap}
.topbar img.seal{height:62px;width:auto}
.topbar .org{color:var(--on-dark2);font-size:1rem}
.topbar .title{color:var(--on-dark);font-size:1.5rem;font-weight:700;line-height:1.15}
.topbar .grow{flex:1}
.topbar .who{color:var(--on-dark2);font-size:.95rem;text-align:right}
.topbar .btn{background:transparent;color:var(--on-dark);border-color:var(--on-dark2)}
.topbar .btn:hover{background:var(--brand-bg)}
.draft{display:inline-block;background:var(--warn-bg);color:var(--warn);border-radius:6px;padding:0 .5em;font-size:.9rem;font-weight:700;margin-left:.4em;vertical-align:middle}

/* การ์ดทั่วไป / ฟอร์ม */
.panel{background:var(--bg1);border:1px solid var(--line);border-radius:12px;padding:14px 18px;margin:14px 0}
.field{display:block;margin:.5em 0}
.field span{display:block;font-weight:700;color:var(--ink)}
.field input,.field select,.field textarea{width:100%;border:1px solid var(--line);border-radius:8px;padding:.25em .5em;background:var(--bg0)}
.err{color:var(--bad);font-weight:700}
.okmsg{color:var(--ok);font-weight:700}
footer.foot{border-top:1px solid var(--line);margin-top:24px;padding:12px 16px;color:var(--ink2);font-size:.9rem}
table.t{border-collapse:collapse;width:100%;background:var(--bg0)}
table.t th,table.t td{border:1px solid var(--line);padding:.25em .5em;vertical-align:top;text-align:left}
table.t th{background:var(--bg1);color:var(--ink)}
.pill{display:inline-block;border-radius:999px;padding:0 .55em;font-size:.85rem;font-weight:700;border:1px solid currentColor;margin:1px 2px 1px 0;white-space:nowrap}
.pill.ok{color:var(--ok);background:var(--ok-bg)} .pill.warn{color:var(--warn);background:var(--warn-bg)} .pill.bad{color:var(--bad);background:var(--bad-bg)}
.pill.info{color:var(--brand);background:var(--bg1)}