/* =====================================================================
   TEGH · Apple-style light theme  (โหลดท้ายสุด — ทับชั้นดีไซน์เดิมทั้งหมด)
   · โทนสว่าง พื้นเทาอ่อน #f5f5f7 การ์ดขาว มุมโค้ง เงานุ่ม เส้นบาง
   · สีหลัก = น้ำเงิน TEGH (ตัวอักษรในโลโก้ #272f7d) · ปุ่ม/ลิงก์ใช้เฉดสว่างขึ้นจากสีเดียวกัน
   · ตัวอักษรเข้มขึ้น (#1d1d1f) ให้ข้อมูลอ่านชัด · ตัวเลขกว้างเท่ากัน (tabular) ในตาราง/KPI
   · สีสื่อความหมายแยกจากสีแบรนด์: --success (เสร็จ/พร้อม) · --warn · --orange · --danger
   ย้อนกลับทั้งหมด = เอา <link theme.css> ออกจาก base.html
   ===================================================================== */
:root {
  /* ── แบรนด์ ── */
  --brand: #272f7d;          /* น้ำเงินโลโก้ TEGH */
  --brand-red: #ea1c2d;      /* แดงโลโก้ (ใช้เฉพาะจุดเน้นเล็ก ๆ) */

  /* ── พื้น / การ์ด ── */
  --canvas: #f5f5f7;
  --bg-grad-1: #f5f5f7; --bg-grad-2: #f5f5f7;
  --card-bg: #ffffff;
  --card-border: #e3e3e8;
  --line: #ececf0;           /* เส้นคั่นในการ์ด/แถวตาราง */
  --fill: #f2f2f7;           /* พื้นช่องค้นหา / ปุ่มรอง */
  --th-bg: #f8f8fa;          /* หัวตาราง */
  --row-hover: #f5f7fe;      /* แถวที่ชี้ (อมน้ำเงินจาง ๆ) */

  /* ── ตัวอักษร: เข้ม อ่านชัด ── */
  --text: #1d1d1f;
  --text-soft: #5b5b62;
  --text-faint: #7c7c84;

  /* ── สีหลัก (น้ำเงิน TEGH) ── */
  --primary: #2e48c0; --primary-dark: #22379a; --primary-soft: #edf1fd;
  --info: #2e48c0; --info-dark: #22379a; --info-soft: #edf1fd;
  --focus: rgba(46, 72, 192, .20);

  /* ── สีสื่อความหมาย ── */
  --success: #1a8a4a; --success-dark: #146c3a; --success-soft: #e7f5ec;
  --ok-text: #146c3a;
  --accent: #0b7f8f; --accent-dark: #09636f; --accent-soft: #e2f3f5;
  --warn: #e8a317; --warn-soft: #fdf3d8; --warn-text: #8a5a00;
  --orange: #ef6a0c; --orange-soft: #fdeadb; --orange-text: #a84a00;
  --danger: #d0202f; --danger-soft: #fde8ea;
  --brown: #7c7c84; --brown-soft: #f5f5f7;

  /* ── ช่องกรอก ── */
  --field-bg: #f5f5f7;
  --field-border: #d2d2d7;

  /* ── รูปทรง ── */
  --radius: 16px; --radius-sm: 12px; --radius-btn: 10px; --radius-pill: 999px;
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow: 0 1px 2px rgba(0, 0, 0, .04), 0 6px 20px rgba(0, 0, 0, .05);
  --shadow-card: 0 1px 2px rgba(0, 0, 0, .04), 0 2px 10px rgba(0, 0, 0, .03);
  --shadow-pop: 0 12px 40px rgba(0, 0, 0, .14), 0 2px 6px rgba(0, 0, 0, .06);

  /* ── แถบข้าง / แถบบน : น้ำเงิน TEGH (เฉดเดียวกับปุ่มหลัก · สว่างกว่าน้ำเงินกรมท่าเดิม) ── */
  --side-bg: #2c46bd; --side-bg-2: #3551cc;
  --side-text: #ffffff;
  --side-text-faint: #d3daf9;
  --side-active: rgba(255, 255, 255, .15); --side-hover: rgba(255, 255, 255, .08);
  --side-line: rgba(255, 255, 255, .10);
  --side-dot: #e6ebff;           /* จุด/ตัวเน้นบนพื้นน้ำเงิน (ขาวอมฟ้า) */
  --tree-line: rgba(255, 255, 255, .28);
  --topbar-h: 76px;

  /* แถบหัว/แท็บที่ยังอ้างสีหัวพาเนลเดิม → น้ำเงินแบรนด์ (ตัวอักษรขาวยังอ่านชัด) */
  --panelhead: #2e48c0; --panelhead-2: #2e48c0;

  /* ── สีไอคอนหมวดเมนู (ทรง squircle แบบ Settings ของ Apple) ── */
  --ic-ops: #4c6ef5;             /* ไอคอนหมวดบนพื้นน้ำเงินเข้ม — เฉดสว่างพอให้แยกจากพื้น */
  --ic-display: #16a3b5;
  --ic-data: #f0a92a;
  --ic-system: #9b6cf0;
  --ic-alert: #f0525a;
  --ic-report: #6b6bf0;
  --ic-eqr: #4c6ef5;
}

/* ===================================================================== พื้นฐาน */
body {
  font-family: -apple-system, BlinkMacSystemFont, "Inter", "Noto Sans Thai", "Sukhumvit Set", system-ui, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}
body.staff, body.auth { background: var(--canvas); }
a { color: var(--primary); }
::selection { background: rgba(46, 72, 192, .18); }
input[type="checkbox"], input[type="radio"], input[type="range"], progress { accent-color: var(--primary); }

/* ===================================================================== แถบข้าง — น้ำเงินเข้ม TEGH
   กรอบระบบ (แถบข้าง + แถบบน) เข้ม · พื้นที่ทำงานสว่าง → เมนูและข้อมูลในหน้าเด่นแยกกันชัด */
.side { background: var(--side-bg); border-right: 0; box-shadow: none; }
.side-brand { border-bottom: 1px solid var(--side-line); height: var(--topbar-h); }
/* โลโก้เป็นอักษรน้ำเงิน+แดง → วางบนแผ่นขาวให้อ่านออกบนพื้นเข้ม */
.side-brand .logo {
  background: #fff !important; padding: 6px 10px !important; border-radius: 9px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, .25) !important;
}
.side-brand .logo .logo-img { height: 24px; }
.side-brand .nm { color: #fff; font-weight: 700; letter-spacing: -.01em; }
.side-brand .nm small { color: var(--side-text-faint); }
.side-collapse { display: none !important; }            /* เลิกใช้ปุ่มย่อเมนูบนคอม (แท็บเล็ตยังเป็นแถบไอคอนตามเดิม) */
.side-nav { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
.side-nav::-webkit-scrollbar-thumb { background: rgba(255, 255, 255, .20); }
.side-nav::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, .32); }
.side-nav .grp { color: var(--side-text-faint); }

/* เมนูหลัก (หมวด) */
.grp-head {
  min-height: 56px; border-bottom: 0; color: var(--side-text); font-weight: 600;
  transition: background var(--dur-fast) var(--ease-out);
}
.grp-head:hover { background: var(--side-hover); }
.grp-block.open > .grp-head { background: transparent; font-weight: 700; }
.grp-block.open > .grp-head:hover { background: var(--side-hover); }
.grp-head .ic {
  width: 32px; height: 32px; border-radius: 9px;
  box-shadow: 0 1px 2px rgba(16, 28, 90, .25);
}
/* แผ่นขาว + สัญลักษณ์สีประจำหมวด (พื้นแถบเป็นน้ำเงิน — ไอคอนพื้นน้ำเงินจะกลืน) */
.grp-block > .grp-head .ic { background: #fff; color: var(--ic-eqr); }
.grp-block[data-g="hr"] > .grp-head .ic { background: #fff; color: var(--ic-alert); }
.grp-block[data-g="system"] > .grp-head .ic { background: #fff; color: var(--ic-system); }
.grp-block[data-g="eqr"] > .grp-head .ic { background: #fff; color: var(--ic-eqr); }
.grp-head .ic .ic-svg { color: currentColor; }
.grp-head .ic .ic-svg { width: 16px; height: 16px; }
.grp-head .tw { background: rgba(255, 255, 255, .12); }
.grp-head .tw::before,
.grp-head .tw::after { background: #fff; }

/* เมนูย่อย — เส้นลำต้น/จุดโปร่งขาว · หน้าที่เปิดอยู่ = ป้ายขาวโปร่ง ตัวหนาขาว + จุดฟ้าสว่าง */
.grp-sub,
body.staff .grp-sub { background: transparent; }
.side-nav .grp-sub a { color: rgba(255, 255, 255, .88); font-weight: 500; }
.side-nav .grp-sub a::before { background: var(--tree-line); }
.side-nav .grp-sub a::after { background: var(--side-bg); border-color: rgba(255, 255, 255, .34); }
.side-nav .grp-sub a:hover { background: var(--side-hover); color: #fff; }
.side-nav .grp-sub a:hover::after { border-color: rgba(255, 255, 255, .7); }
.side-nav .grp-sub a.on { color: #fff; font-weight: 700; background: transparent; }
.side-nav .grp-sub a.on .lbl {
  background: rgba(255, 255, 255, .20); border-radius: 8px; padding: 3px 10px; margin: -3px 0 -3px -10px;
}
.side-nav .grp-sub a.on::after { background: #fff; border-color: #fff; box-shadow: 0 0 0 3px rgba(255, 255, 255, .30); }
.side-nav .grp-sub a .ext { color: var(--side-text-faint); }
.side-nav .grp-sub .sub-sep {
  border-color: rgba(255, 255, 255, .14); background: rgba(255, 255, 255, .07); color: rgba(255, 255, 255, .86);
}
.side-nav .grp-sub .sub-sep::after { background: rgba(255, 255, 255, .7); }
.side-nav .grp-sub .sub-sep::before { background: var(--tree-line); }
.side-nav a .ext { color: var(--side-text-faint); }

.side-foot { border-top: 1px solid var(--side-line); }
.side-user .who { color: #fff; }
.side-user .who small { color: var(--side-text-faint); }
.side-user .av { background: var(--side-dot); color: var(--brand); }
.side-foot .logout {
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .18); color: #fff; border-radius: var(--radius-btn);
}
/* ต้องแรงกว่า body.staff .btn-sm:hover (พื้นฟ้าอ่อน) — ไม่งั้นชี้แล้วตัวขาวบนพื้นเกือบขาว */
body.staff .side-foot .logout:hover, .side-foot .logout:hover { background: rgba(255, 255, 255, .18); color: #fff; border-color: rgba(255, 255, 255, .34); }

/* แผงเมนูย่อยที่ลอยออกมา (แท็บเล็ต / มือถือ 768–900) — น้ำเงินเข้มเดียวกับแถบ */
@media (max-width: 900px) {
  .grp-sub { background: var(--side-bg-2); box-shadow: var(--shadow-pop); border-radius: 12px; }
}
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.staff .grp-sub {
    background: var(--side-bg-2); border: 1px solid rgba(255, 255, 255, .10); border-radius: 12px; box-shadow: var(--shadow-pop);
  }
}
@media (max-width: 767.98px) {
  body.staff .grp-sub { background: transparent; box-shadow: none; border: 0; border-radius: 0; }
  body.staff .grp-head { border-bottom: 1px solid var(--side-line); }
}
/* คอม: ไม่มีโหมดย่อเมนูแล้ว — ต่อให้เครื่องเคยจำสถานะย่อไว้ ก็แสดงเมนูเต็มเสมอ */
@media (min-width: 1024px) {
  body.staff.nav-collapsed { --side-w: 300px; }
}

/* ===================================================================== แถบบน — น้ำเงินเข้มต่อเนื่องกับแถบข้าง */
body.staff .work-head {
  min-height: var(--topbar-h);
  background: var(--side-bg); -webkit-backdrop-filter: none; backdrop-filter: none;
  border-bottom: 1px solid rgba(16, 28, 90, .18); box-shadow: 0 1px 3px rgba(16, 28, 90, .14); color: #fff;
}
.work-head h1 { color: #fff; font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; }
.work-head .eyebrow { color: var(--side-dot); font-weight: 600; }
.work-head .sub { color: var(--side-text-faint); }
/* ช่องค้นหานัดย้ายไปอยู่ในแถบข้างแล้ว (.side-search ใน staff.css) — แถบบนเหลือ ชื่อหน้า | ปุ่มของหน้า */

/* ปุ่มบนแถบเข้ม: ปุ่มรอง = ขาวโปร่ง · ปุ่มหลัก = ขาวทึบ ตัวอักษรน้ำเงิน (เด่นสุดบนพื้นเข้ม) */
.work-head .head-actions .btn-sm,
body.staff .work-head .btn-sm:not(.primary):not(.danger):not(.info):not(.logout):not(.on-dark),
body.staff .work-head .btn-sm.on-dark {
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .32); color: #fff;
}
.work-head .head-actions .btn-sm:hover,
body.staff .work-head .btn-sm:not(.primary):not(.danger):not(.info):not(.logout):not(.on-dark):hover,
body.staff .work-head .btn-sm.on-dark:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .4); }
.work-head .head-actions .btn-sm.primary,
body.staff .work-head .btn-sm.primary {
  background: #fff; border-color: #fff; color: var(--primary-dark); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.work-head .head-actions .btn-sm.primary:hover,
body.staff .work-head .btn-sm.primary:hover { background: #e9edff; border-color: #e9edff; color: var(--primary-dark); }
.work-head .btn-sm .ic-svg { color: currentColor; }
body.staff .work-head a { color: #fff; }
body.staff .work-head a.btn-sm { color: #fff; }
body.staff .work-head a.btn-sm.primary { color: var(--primary-dark); }
/* ปุ่ม ☰ บนมือถือ (อยู่บนแถบเข้ม) */
body.staff .nav-open-btn { background: rgba(255, 255, 255, .12); border-color: rgba(255, 255, 255, .22); color: #fff; }
.work-body { background: var(--canvas); }

/* ===================================================================== การ์ด / แผง */
body.staff .bk,
body.staff .toolbar,
.dash-panels .panel,
.tbl-wrap,
.slot-block,
.navcard,
.kpi {
  border-radius: var(--radius); border: 1px solid var(--card-border); box-shadow: var(--shadow-card);
}
body.staff .bk:hover,
.navcard:hover,
.kpi:hover { border-color: var(--card-border); box-shadow: var(--shadow-card); transform: none; }
a.kpi-link:hover, a.navcard:hover { border-color: #c8d1f3; box-shadow: var(--shadow); }

/* หัวการ์ด: พื้นขาว ตัวหนาเข้ม ไอคอนน้ำเงินอ่อน เส้นคั่นบาง (แทนแถบสีทึบเดิม) */
.panel-h, .bk .card-h,
.grid-2 > .panel > .panel-h, .dash-panels .panel > .panel-h,
.tbl-card .tbl-head,
body.staff .bk > strong:first-child,
body.staff .bk > .mf-head {
  background: #fff; color: var(--text);
  border-bottom: 1px solid var(--line); box-shadow: none;
  font-size: 1rem; font-weight: 700; letter-spacing: 0;
}
.panel-h .hi, .bk .card-h .hi {
  background: var(--primary-soft); color: var(--primary); border-radius: 9px;
}
.panel-h .hi .ic-svg, .bk .card-h .hi .ic-svg { color: var(--primary); }
.panel-h .upd, .bk .card-h .upd { color: var(--text-soft); opacity: 1; }
body.staff .bk > strong:first-child .ic-svg { color: var(--primary); }
body.staff .bk > .mf-head strong { color: var(--text); font-weight: 700; }
body.staff .bk > .mf-head .muted { color: var(--text-soft) !important; }
body.staff .bk > .mf-head .mf-ic { background: var(--primary-soft) !important; color: var(--primary) !important; border-radius: 9px; }
body.staff .bk > .mf-head .mf-ic .ic-svg { color: var(--primary); }
.tbl-card .tbl-head .ic-svg { color: var(--primary); }
.tbl-card .tbl-head .th-count { color: var(--text-soft); opacity: 1; }
.tbl-card .tbl-head .btn-sm { background: #fff; border-color: var(--field-border); color: var(--primary); }
.tbl-card .tbl-head .btn-sm:hover { background: var(--primary-soft); }
.tbl-card .tbl-head .btn-sm.primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.dash-sec { color: var(--text); font-weight: 700; letter-spacing: -.01em; }

/* หัวช่วงเวลาในคิว */
.slot-head { background: var(--fill); color: var(--text); border-bottom: 1px solid var(--line); }
.slot-head .slot-time { color: var(--text); font-weight: 700; }
.slot-head .slot-cnt { background: #fff; color: var(--text-soft); border: 1px solid var(--line); }

/* หัวหน้าต่าง (modal) */
.um-head { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); }
.um-head .ic { background: var(--primary-soft); }
.um-head .ic .ic-svg { color: var(--primary); }
.um-head .sub { color: var(--text-soft); opacity: 1; }
.um-head .x { background: var(--fill); color: var(--text-soft); }
.um-head .x:hover { background: #e8e8ed; color: var(--text); }

/* หัวแถบเฉพาะหน้า (กำหนดใน <style> ของหน้า → ต้องใส่ body.staff ให้น้ำหนักสูงกว่า) */
body.staff .gt-head,
body.staff .gg-sec > .hd,
body.staff .wi-step-h,
body.staff .uf-side .sh {
  background: #fff; color: var(--text); border-bottom: 1px solid var(--line);
}
body.staff .gt-head .ic-svg,
body.staff .gg-sec > .hd .ic-svg { color: var(--primary); }
body.staff .gt-head .th-chip { background: var(--fill); color: var(--text-soft); }
body.staff .gt-head .th-chip.warn { background: var(--orange-soft); color: var(--orange-text); }
body.staff .gg-sec > .hd .n { background: var(--primary); color: #fff; }
body.staff .gg-sec > .hd .sub { color: var(--text-soft); opacity: 1; }
body.staff .wi-step-h small { color: var(--text-soft); opacity: 1; }
body.staff .wi-step-h .wi-no { background: var(--primary); color: #fff; }

/* ===================================================================== KPI */
.kpi { padding: 16px 18px; }
.kpi-ic { border-radius: 12px; }
.kpi-lbl { font-size: .78rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-soft); }
.kpi-val { font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.kpi .kpi-body .kpi-val { color: var(--text); }                   /* ตัวเลขเข้ม อ่านชัด — สีบอกด้วยไอคอน */
.kpi.k-red .kpi-body .kpi-val,
.kpi:has(.ic-red) .kpi-body .kpi-val { color: var(--danger); }     /* ปัญหา = แดง ยังเด่น */
.kpi.k-mute .kpi-body .kpi-val { color: var(--text-faint); }
.kpi.k-mute .kpi-ic { background: #d6d6dc; }
.kpi-go { color: var(--text-faint); }
a.kpi-link:hover .kpi-go { color: var(--primary); }

/* ===================================================================== ตาราง */
table.tbl { font-size: .86rem; }
table.tbl thead th {
  background: var(--th-bg); color: var(--text-soft);
  font-size: .76rem; font-weight: 600; letter-spacing: 0; text-transform: none;
  padding: 11px 14px; border-bottom: 1px solid var(--card-border); box-shadow: none;
}
table.tbl tbody td {
  padding: 12px 14px; font-weight: 400; color: var(--text);
  border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums;
}
table.tbl tbody tr:hover,
table.tbl tbody tr:nth-child(even):hover { background: var(--row-hover); }
.tbl .t-main { font-weight: 600; color: var(--text); }
.tbl .t-code { color: var(--primary); font-weight: 600; }
.ah-tbl td, .gs-ptv td { font-variant-numeric: tabular-nums; }

/* ===================================================================== ป้ายสถานะ: แคปซูลพื้นอ่อน + จุดสี */
body.staff .st, .tbl .st {
  display: inline-flex; align-items: center; justify-content: flex-start; gap: 6px;
  border-radius: var(--radius-pill); border: 0; white-space: nowrap;
  font-weight: 600; font-size: .76rem; line-height: 1.45; padding: 3px 10px 3px 8px;
}
body.staff .st::before, .tbl .st::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.tbl td .st { display: inline-flex; width: auto; max-width: none; padding: 3px 10px 3px 8px; font-size: .76rem; }
body.staff .st-pending   { background: var(--warn-soft);    color: var(--warn-text); }
body.staff .st-confirmed { background: var(--primary-soft); color: var(--primary-dark); }
body.staff .st-arrived   { background: var(--accent-soft);  color: var(--accent-dark); }
body.staff .st-completed { background: var(--success-soft); color: var(--success-dark); }
body.staff .st-cancelled { background: #f0f0f3;             color: #6e6e76; }
body.staff .st-late, body.staff .st-overdue { background: var(--orange-soft); color: var(--orange-text); }

/* ===================================================================== ปุ่ม */
.btn, .btn-sm { border-radius: var(--radius-btn); }
.btn-sm { border-color: var(--field-border); color: var(--primary); }
body.staff .btn-sm { font-weight: 600; transition: background var(--dur-fast) var(--ease-out), border-color var(--dur-fast), box-shadow var(--dur-fast); }
body.staff .btn-sm:hover { border-color: var(--field-border); background-color: var(--primary-soft); }
body.staff .btn-sm.primary, body.staff .btn-primary, .btn-primary, .btn-sm.primary {
  background: var(--primary); border-color: var(--primary); color: #fff;
  box-shadow: 0 1px 2px rgba(46, 72, 192, .25);
}
body.staff .btn-sm.primary:hover, body.staff .btn-primary:hover, .btn-primary:hover {
  background: var(--primary-dark); border-color: var(--primary-dark); filter: none;
}
body.staff .btn-sm.info { background: var(--primary); border-color: var(--primary); color: #fff; }
body.staff .btn-sm.info:hover { background: var(--primary-dark); border-color: var(--primary-dark); color: #fff; filter: none; }
body.staff .btn-sm.danger, .btn-sm.danger { background: #fff; border-color: #f0c2c6; color: var(--danger); }
body.staff .btn-sm.danger:hover { background: var(--danger-soft); border-color: #eaa8ae; }
.btn-ghost { color: var(--primary); border-color: var(--field-border); }
.btn:focus-visible, .btn-sm:focus-visible, .grp-head:focus-visible, .side-nav a:focus-visible {
  outline: 3px solid var(--focus); outline-offset: 1px;
}
.auth-body .btn-primary { box-shadow: 0 2px 8px rgba(46, 72, 192, .28); }
.auth-body .btn-primary:hover { background: var(--primary-dark); }

/* ===================================================================== ช่องกรอก */
input, select, textarea { color: var(--text); border-color: var(--field-border); border-radius: var(--radius-btn); }
body.staff input, body.staff select, body.staff textarea {
  border-radius: var(--radius-btn); border: 1px solid var(--field-border); background-color: #fff; color: var(--text);
}
input:focus, select:focus, textarea:focus,
body.staff input:focus, body.staff select:focus, body.staff textarea:focus {
  border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus); outline: none;
}
input::placeholder, textarea::placeholder { color: var(--text-faint); }
body.staff .side-search input:focus { box-shadow: none !important; }

/* ===================================================================== แท็บ · ชิป · ตัวแบ่งหน้า */
body.staff .status-tabs .stab { color: var(--text-soft); }
body.staff .status-tabs .stab:hover { color: var(--text); }
body.staff .status-tabs .stab.on { color: var(--primary); }
.status-tabs .stab.st-completed::before,
.status-tabs .stab.st-done::before,
.status-tabs .stab.st-loaded::before { background: var(--success); }
.status-tabs .stab.st-confirmed::before,
.status-tabs .stab.st-hr_received::before { background: var(--primary); }
.pager .pg.cur { background: var(--primary); border-color: var(--primary); color: #fff; }
.pager a:hover { border-color: var(--primary); color: var(--primary-dark); }
.fchip:hover { background: var(--primary-soft); border-color: #c8d1f3; }

/* ===================================================================== หน้าเข้าสู่ระบบ */
.auth-card { border-radius: 20px; border: 1px solid var(--card-border); box-shadow: 0 20px 60px rgba(0, 0, 0, .10); }
.auth-head { background: #fff; border-bottom: 1px solid var(--line); }
.auth-head h1 { color: var(--text); }
.auth-head p { color: var(--text-soft); opacity: 1; }

/* ===================================================================== อื่น ๆ */
.live-banner { border-radius: var(--radius-pill); }

/* ===================================================================== รอบ 2 — จุดที่ยังหลุดโทน */
/* ปุ่มในตาราง: ห้ามตัดคำกลางปุ่ม ("แก้ไ|ข") */
table.tbl .btn-sm, .tbl .t-actions .btn-sm, table.tbl td .btn-sm { white-space: nowrap; }

/* ป้ายสถานะชุด tag-* (หน้า HR / บัญชีผู้ใช้ / ร้าน) → แคปซูลพื้นอ่อน + จุดสี เหมือน .st */
.tag-ok, .tag-wait, .tag-info, .tag-warn, .tag-block, .tag-danger {
  display: inline-flex; align-items: center; gap: 6px; border-radius: var(--radius-pill);
  padding: 3px 10px 3px 8px; font-size: .76rem; font-weight: 600; line-height: 1.45;
}
.tag-ok::before, .tag-wait::before, .tag-info::before, .tag-warn::before, .tag-block::before, .tag-danger::before {
  content: ""; width: 7px; height: 7px; border-radius: 50%; background: currentColor; flex: 0 0 auto;
}
.tag-ok { background: var(--success-soft); color: var(--success-dark); }
.tag-wait { background: var(--warn-soft); color: var(--warn-text); }
.tag-info { background: var(--primary-soft); color: var(--primary-dark); }
.tag-warn { background: var(--orange-soft); color: var(--orange-text); }
.tag-block, .tag-danger { background: var(--danger-soft); color: var(--danger); }

/* การ์ดหมวด กล้อง & ประตู (camgate.css) — หัวขาวแบบเดียวกับการ์ดอื่น + มุมโค้ง */
.cg-card { border-radius: var(--radius); box-shadow: var(--shadow-card); }
.cg-card > .hd { background: #fff; color: var(--text); border-bottom: 1px solid var(--line); }
.cg-card > .hd .ic-svg { color: var(--primary); }
.cg-card > .hd .sub { color: var(--text-soft); opacity: 1; }

/* หัวแถบชิดขอบบนของการ์ด — โค้งตามการ์ด (ไม่ต้องใช้ overflow:hidden ที่ตัดดรอปดาวน์) */
.cg-card > .hd:first-child,
body.staff .wi-step-h, body.staff .gt-head, body.staff .gg-sec > .hd, .um-head,
.tbl-card > .tbl-head:first-child {
  border-top-left-radius: calc(var(--radius) - 1px); border-top-right-radius: calc(var(--radius) - 1px);
}
.cg-card > .ft:last-child, .cg-card > form:last-child > .ft:last-child {
  border-bottom-left-radius: calc(var(--radius) - 1px); border-bottom-right-radius: calc(var(--radius) - 1px);
}

/* ลงนัดแทนลูกค้า: ขั้นที่ยังล็อก = หัวเทาอ่อน (เดิมแถบเทาทึบ) */
body.staff .wi-lockable.wi-locked .wi-step-h { background: var(--fill); color: var(--text-faint); }
body.staff .wi-lockable.wi-locked .wi-step-h .wi-no { background: #d6d6dc; color: #fff; }

/* จอหน้างาน (Cockpit / Wallboard / Yard / Scanner / จุดเช็กอิน) — ข้อมูลแน่น ใช้ฟอนต์ลำดับเดิม
   (ตัวเลขของ Inter กว้างกว่า ทำให้ทะเบียนรถบนการ์ดลานถูกตัดเป็น "…") */
body.face, body.yard { font-family: "Noto Sans Thai", "Inter", system-ui, -apple-system, sans-serif; }

/* แท็บเล็ต (แถบไอคอน 74px): โลโก้เต็มกว้างเกินแถบ → ครอปเหลือสัญลักษณ์ดอกบัว */
@media (min-width: 768px) and (max-width: 1023.98px) {
  body.staff .side-brand .logo { padding: 6px 9px !important; }
  body.staff .side-brand .logo .logo-img { width: 22px; height: 28px; object-fit: cover; object-position: left center; }
}

/* บทบาท & สิทธิ์: ชื่อบทบาทแก้ได้ในที่ — ปกติเป็นหัวข้อเรียบ ๆ (ไม่มีกรอบ) · ชี้/แก้แล้วจึงเห็นช่อง */
body.staff .role-label { border-color: transparent; background: transparent; box-shadow: none; }
body.staff .role-label:hover { border-color: var(--field-border); background: #fff; }
body.staff .role-label:focus { border-color: var(--primary); background: #fff; box-shadow: 0 0 0 3px var(--focus); }
/* วันที่/เวลาในตาราง ห้ามตัดกลางตัวเลข ("15/06/202|6") */
table.tbl td .t-sub { overflow-wrap: normal; word-break: keep-all; }