/* =============================================================
 * app.css — Modern Corporate Financial Dashboard
 * Navy/Blue theme · light surface · Desktop-first, responsive
 * ============================================================= */

:root {
  --navy: #0e2f5c; --navy-2: #123a70; --blue: #1f5da8; --blue-soft: #8fb3dd;
  --bg: #f3f5f8; --surface: #ffffff; --border: #dde2ea; --border-strong: #b9c2cf;
  --ink: #14181f; --ink-2: #4a5160; --muted: #7d8695;
  --up: #b32d2d; --down: #1c6b34; --warn-bg: #fdf6e7; --warn-bd: #c98a00;
  --crit-bg: #fbeded; --crit-bd: #b32d2d; --ok: #1c7a3a;
  --radius: 8px;
  --shadow: 0 1px 2px rgba(14,47,92,.06), 0 2px 8px rgba(14,47,92,.05);
  --shadow-lg: 0 2px 6px rgba(14,47,92,.08), 0 8px 22px rgba(14,47,92,.10);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: "IBM Plex Sans Thai", "Segoe UI", "Leelawadee UI", "Noto Sans Thai", system-ui, sans-serif;
  background: var(--bg); color: var(--ink); font-size: 14px; line-height: 1.5;
}
small { font-size: .68em; color: var(--muted); font-weight: 400; }
a { color: var(--blue); }
.link { color: var(--blue); text-decoration: none; }
.link:hover { text-decoration: underline; }
.muted { color: var(--muted); } .small { font-size: 12px; }

/* ---------- layout ---------- */
.app { display: flex; min-height: 100vh; }
.sidebar {
  width: 236px; flex-shrink: 0; color: #fff;
  background: linear-gradient(175deg, #10315f 0%, #0c2749 55%, #0e2f5c 100%);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto;
  box-shadow: 4px 0 20px rgba(6, 22, 58, .22); z-index: 40;
}
.brand { display: flex; gap: 10px; align-items: center; padding: 18px 16px; border-bottom: 1px solid rgba(255,255,255,.12); }
.brand-link { text-decoration: none; color: inherit; cursor: pointer; }
.brand-link:hover { background: rgba(255,255,255,.06); }
.brand-link:hover .brand-name { text-decoration: underline; text-underline-offset: 3px; }
.app-logo svg { width: 40px; height: 40px; display: block; }
.app-logo { width: 42px; height: 42px; border-radius: 11px; overflow: hidden; flex: none; }
.app-logo img { width: 100%; height: 100%; display: block; object-fit: cover; transform: scale(1.16); }
.topbar-left { display: flex; align-items: center; gap: 14px; }
.topbar-idash { height: 64px; display: block; }
.login-applogo svg { width: 72px; height: 72px; margin: 0 auto 10px; display: block; }
.login-powered { text-align: center; margin-top: 16px; }
.login-powered img { height: 40px; opacity: .9; border-radius: 8px; }
.brand-logo {
  width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, #256abf, #86b6ef);
  display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 800; color: #fff; flex-shrink: 0;
}
.brand-logo.big { width: 52px; height: 52px; font-size: 26px; margin: 0 auto 10px; }
.brand-logo.logo-idash {
  width: auto; min-width: 38px; padding: 0 11px; font-size: 16px; font-weight: 800;
  font-style: italic; letter-spacing: .01em;
}
.brand-logo.big.logo-idash { font-size: 22px; padding: 0 16px; height: 52px; width: auto; margin: 0 auto 10px; display: inline-flex; }
.brand-name { font-weight: 700; font-size: 14px; line-height: 1.25; }
.brand-sub { font-size: 10.5px; color: #9ec5f4; letter-spacing: .06em; }
/* โลโก้ซ้าย — ชื่อประเภทงบ ใหญ่ ชัด ชิดขวา */
.brand-logoright { padding: 18px 14px; }
.brand-logoright .brand-tx { flex: 1; min-width: 0; text-align: right; }
/* v22.116 ชื่อประเภทงบต้องอยู่บรรทัดเดียวเสมอ — เดิม 18px กินพื้นที่ 158px จาก 163px ที่มี เหลือ 5px
   ฟอนต์ไทยต่างเครื่อง/ซูมนิดเดียวก็ตกบรรทัด → ลดเป็น 16px (ใช้ 140px เหลือ 23px) + nowrap กันตกบรรทัดเด็ดขาด */
.brand-logoright .brand-name { font-size: 16px; font-weight: 800; letter-spacing: .01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.brand-logoright .brand-sub { font-size: 11px; margin-top: 2px; letter-spacing: .08em; }
.brand-logoright .brand-caret { margin-left: 8px; }
.sidebar nav { padding: 12px 10px; flex: 1; }
.nav-item {
  display: flex; align-items: center; gap: 11px; padding: 9px 12px; margin: 3px 0;
  color: #cfe0f5; text-decoration: none; border-radius: 11px; font-size: 13.5px;
}
.nav-item:hover { background: rgba(255,255,255,.1); color: #fff; }
.nav-item.active {
  background: rgba(255,255,255,.18); color: #fff; font-weight: 600;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.22), 0 2px 8px rgba(0,0,0,.18);
}
.nav-ic { width: 22px; text-align: center; font-size: 16px; }
.nav-tx { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.nav-tx small { font-size: 10px; color: #9ec5f4; font-weight: 400; }
.nav-item.active .nav-tx small { color: #cfe0f5; }
/* v22.383 badge แจ้งเตือนจำนวนงบรอตรวจสอบ (แบบ Facebook) */
.nav-badge { margin-left: auto; background: #e0245e; color: #fff; font-size: 11px; font-weight: 800;
  line-height: 1; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.sidebar-foot { padding: 12px 14px 14px; border-top: 1px solid rgba(255,255,255,.14); font-size: 11px; color: #9ec5f4; }
.sf-company { font-weight: 600; color: #cfe0f5; margin-top: 8px; }
/* การ์ดรอบงบประมาณ */
.period-card { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.16); border-radius: 12px; padding: 11px 12px; }
.pc-title { font-size: 11px; color: #cfe0f5; margin-bottom: 4px; }
.pc-year { font-size: 14px; font-weight: 700; color: #fff; display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.pc-badge { font-size: 9.5px; font-weight: 700; border-radius: 999px; padding: 2px 8px; }
.pc-badge.open { background: #0ca30c; color: #fff; }
.pc-badge.closed { background: rgba(255,255,255,.25); color: #fff; }
.pc-range { font-size: 10.5px; color: #9ec5f4; margin: 3px 0 7px; }
.pc-bar { height: 6px; background: rgba(255,255,255,.18); border-radius: 999px; overflow: hidden; }
.pc-fill { height: 100%; border-radius: 999px; background: linear-gradient(90deg, #5598e7, #86e79b); }

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  position: sticky; top: 0; z-index: 30; background: rgba(252,252,251,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--border); box-shadow: 0 2px 14px rgba(13,54,107,.07);
  display: flex; align-items: center; justify-content: space-between; padding: 10px 22px; gap: 12px;
}
.topbar-right { display: flex; align-items: center; gap: 10px; }
.year-select {
  font: inherit; font-weight: 600; padding: 7px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: #fff; color: var(--navy);
}
.icon-btn { position: relative; font-size: 16px; background: none; border: 1px solid var(--border); border-radius: 8px; padding: 6px 10px; cursor: pointer; }
.icon-btn:hover { background: var(--bg); }
.noti-dot {
  position: absolute; top: -6px; right: -6px; background: var(--up); color: #fff;
  font-size: 10px; font-weight: 700; border-radius: 999px; padding: 1px 5px;
}
.user-chip { display: flex; align-items: center; gap: 8px; }
.uc-avatar {
  width: 30px; height: 30px; border-radius: 50%; background: var(--blue); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; flex-shrink: 0;
}
.uc-avatar.acc { background: var(--navy); }
.uc-name { font-size: 13px; font-weight: 600; max-width: 210px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.noti-panel {
  position: absolute; right: 22px; top: 52px; width: 360px; max-height: 60vh; overflow: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 8px 24px rgba(11,11,11,.14);
}
/* เมนูโปรไฟล์ (คลิกที่ user chip) */
.user-chip.uc-clickable { font: inherit; background: #fff; border: 1px solid var(--border-strong); border-radius: 999px; padding: 4px 12px 4px 5px; cursor: pointer; transition: all .15s ease; }
.user-chip.uc-clickable:hover { border-color: var(--blue); box-shadow: 0 3px 10px rgba(37,106,191,.16); }
.uc-caret { font-size: 10px; color: #8a97ab; margin-left: 2px; }
.user-menu {
  position: absolute; right: 22px; top: 52px; width: 320px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border-strong); border-radius: 14px;
  box-shadow: 0 12px 34px rgba(11,31,77,.18); overflow: hidden;
}
.um-head { display: flex; gap: 12px; align-items: center; padding: 14px 16px; background: linear-gradient(180deg, #eef4fd 0%, #e5eefb 100%); border-bottom: 1px solid var(--border); }
.um-avatar { width: 44px; height: 44px; border-radius: 50%; background: linear-gradient(135deg, #2f7fd6, #0c2c61); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; flex-shrink: 0; }
.um-info { min-width: 0; }
.um-info b { font-size: 14.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-email { font-size: 12px; color: #5a6b85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.um-role { font-size: 11.5px; color: #256abf; font-weight: 600; margin-top: 3px; }
.um-item { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; width: 100%; text-align: left; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink); background: none; border: none; border-bottom: 1px solid var(--border); padding: 11px 16px; cursor: pointer; }
.um-item small { font-size: 11.5px; color: #8a97ab; font-weight: 400; }
.um-item:hover { background: #eef4fc; }
.um-item.um-danger { color: #c0392b; border-bottom: none; }
.um-item.um-danger:hover { background: #fdeeea; }
/* สลับบทบาทในเมนู */
.um-switch { border-bottom: 1px solid var(--border); }
.um-switch-h { font-size: 11.5px; font-weight: 800; color: var(--ink-2); padding: 9px 16px 4px; letter-spacing: .02em; }
.um-switch-list { max-height: 230px; overflow-y: auto; padding: 0 8px 8px; display: flex; flex-direction: column; gap: 4px; }
.um-swrole { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left; font: inherit; font-size: 13.5px; font-weight: 600; color: var(--ink); background: none; border: 1px solid transparent; border-radius: 9px; padding: 8px 10px; cursor: pointer; }
.um-swrole:hover:not(.cur) { background: #eef4fc; border-color: #cfe0f5; }
.um-swrole.cur { background: #eef7f0; border-color: #cfe9d6; cursor: default; }
.umr-ic { font-size: 15px; flex-shrink: 0 }
.umr-nm { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap }
.umr-nm em { font-style: normal; opacity: .6; font-weight: 800 }
.umr-cur { font-size: 10.5px; font-weight: 800; color: #1c7c33; white-space: nowrap }
/* คำอธิบายสีไอคอนบทบาท — วางกลาง topbar เรียงแนวนอน */
.topbar-legend { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; justify-content: center; flex: 1; min-width: 0; }
.topbar-legend span { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); font-weight: 600; white-space: nowrap; }
.rl-dot { width: 13px; height: 13px; border-radius: 4px; flex-shrink: 0; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 1px 2px rgba(13,54,107,.18); }
@media (max-width: 1120px) { .topbar-legend { display: none; } }
/* tooltip อธิบายบทบาท (โผล่ซ้ายของเมนูโปรไฟล์) */
.role-tip { position: fixed; z-index: 200; transform: translate(-100%, -50%); max-width: 280px;
  background: #0d366b; color: #fff; font-size: 12.5px; font-weight: 600; line-height: 1.45;
  padding: 8px 12px; border-radius: 9px; box-shadow: 0 8px 24px rgba(11,31,77,.3);
  opacity: 0; pointer-events: none; transition: opacity .12s ease; }
.role-tip.show { opacity: 1; }
.noti-head { padding: 10px 14px; font-weight: 700; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--surface); z-index: 1; }
.noti-unread-n { color: #2563eb; font-size: 12px; font-weight: 700; }
.noti-compose { padding: 10px 12px; border-bottom: 1px solid var(--border); background: #f7faff; display: flex; flex-direction: column; gap: 7px; }
.noti-compose textarea { font: inherit; font-size: 13px; width: 100%; border: 1px solid var(--border-strong); border-radius: 9px; padding: 7px 9px; resize: vertical; }
.noti-compose .primary-btn.small { align-self: flex-end; padding: 5px 12px; font-size: 12.5px; }
.noti-item { display: flex; gap: 9px; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--border); font-size: 13px; }
.noti-item.unread { background: #eef4fc; }
.noti-ic { font-size: 15px; line-height: 1.4; flex-shrink: 0; }
.noti-body { min-width: 0; flex: 1; }
.noti-msg { line-height: 1.5; word-break: break-word; }
.noti-item.is-ann { background: #fff8e8; border-left: 3px solid #e6a417; }
.noti-item.is-ann.unread { background: #fff2d4; }
.noti-tag { display: inline-block; font-size: 10.5px; font-weight: 800; color: #a86a00; background: #ffe6ab; border-radius: 5px; padding: 1px 6px; margin-right: 4px; vertical-align: 1px; }
.noti-empty { color: var(--muted); justify-content: center; }
.noti-ts { font-size: 11px; color: var(--muted); margin-top: 3px; }

.content { padding: 20px 22px 60px; max-width: 1500px; width: 100%; }

/* ---------- page head ---------- */
/* หัวเรื่องบน · ปุ่มเครื่องมือบรรทัดล่างซ้ายเสมอ — ตำแหน่งคงที่ทุกหน้า/ทุกแผนก ไม่ขึ้นกับความยาวชื่อ */
.page-head { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; margin-bottom: 16px; }
.page-head h1 { font-size: 21px; color: var(--navy); }
.page-sub { color: var(--ink-2); font-size: 13px; margin-top: 2px; }
.page-actions { display: flex; gap: 8px; flex-wrap: wrap; width: 100%; }
.btn-push-right { margin-left: auto; }
.btn-locked { opacity: .55; cursor: not-allowed; filter: grayscale(.5); }   /* v22.178 ปุ่ม Excel ล็อกชั่วคราว */
/* v22.164 กรอบตารางกรอกสีเข้มตามงบ — ค่าใช้จ่าย น้ำเงิน · ซ่อมแซม ส้ม · ลงทุน เขียว (แยกจากพื้นหลังชัด) */
.bt-frame { border: 3px solid var(--bt-frame, #1c46d0) !important; box-shadow: 0 0 0 5px var(--bt-frame-tint, #c9d8f7), 0 10px 28px rgba(31,43,67,.14) !important; }
.bt-frame-expense { --bt-frame: #1c46d0; --bt-frame-tint: #c9d8f7; }
.bt-frame-repair { --bt-frame: #b26a0c; --bt-frame-tint: #f6ddb6; }
.bt-frame-invest { --bt-frame: #0d6e48; --bt-frame-tint: #bfe9d3; }
.grid-actions-below { margin: 2px 0 10px; align-items: center; }   /* v22.163 แถบปุ่มใต้การ์ด KPI เหนือตารางกรอก */
/* v22.150 Flow สายงาน: ตารางคอลัมน์ แผนก | ผู้กรอก | ผู้อนุมัติ | ผู้ดู (จัดกลุ่ม ด้าน → ฝ่าย) */
.flow-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.flow-table th { text-align: left; padding: 8px 10px; background: #f0f4fa; color: #33415c; font-size: 12.5px; position: sticky; top: 0; }
.flow-table td { padding: 7px 10px; border-bottom: 1px solid #eef1f6; vertical-align: top; }
.flow-table tr.flow-divrow td { background: #f3f6fb; font-weight: 700; color: #33415c; border-left: 3px solid #9fb3d1; }
.flow-table .ft-dept { min-width: 220px; }
.flow-table .ft-unit { font-size: 11px; color: #6b7280; margin-top: 2px; }
.fchip { display: inline-block; border-radius: 999px; padding: 2px 9px; margin: 1px 4px 1px 0; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.fc-f { background: #eef4fc; border-color: #cfe0f5; color: #1c4e8a; }
.fc-a { background: #e9f7ef; border-color: #bde3cd; color: #16744a; }
.fc-v { background: #f5f3ff; border-color: #ddd6fe; color: #5b3ca8; }
.asof { color: var(--muted); font-size: 12px; }
.breadcrumb { margin: -6px 0 12px; font-size: 13px; color: var(--ink-2); }
.breadcrumb a { color: var(--blue); text-decoration: none; }

/* ---------- KPI ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; margin-bottom: 16px; }
.kpi-grid-4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); padding: 13px 15px;
  transition: transform .16s ease, box-shadow .2s ease;
}
.kpi:hover { transform: translateY(-2px); box-shadow: var(--shadow-lg); }
.kpi-label { font-size: 12px; color: var(--ink-2); margin-bottom: 5px; }
.kpi-value { font-size: 21px; font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; line-height: 1.2; }
/* การ์ดผู้จัดการ/ผู้บริหาร — ไม่มีไอคอน เน้นตัวเลขใหญ่ */
.kpi.kpi-noic { display: block; }
.kpi-noic .kpi-label { font-size: 12.5px; color: var(--ink-2); margin-bottom: 8px; font-weight: 600; }
.kpi-noic .kpi-value { font-size: 34px; font-weight: 800; letter-spacing: -.6px; line-height: 1.08; }
.kpi-noic .kpi-value small { font-size: .46em; font-weight: 600; color: #8a97ab; letter-spacing: 0; }
.kpi-noic .kpi-sub { margin-top: 8px; font-size: 12px; color: #8a97ab; }
/* หน้ากรอกงบ (4 การ์ด) — กะทัดรัด และทุกการ์ดสูงเท่ากัน */
.kpi-grid-4 { align-items: stretch; }
.kpi-grid-4 .kpi { display: flex; flex-direction: column; justify-content: flex-start; }
.kpi-grid-4 .kpi { padding: 11px 14px; }
.kpi-grid-4 .kpi-noic .kpi-label { margin-bottom: 5px; }
.kpi-grid-4 .kpi-noic .kpi-value { font-size: 28px; line-height: 1.05; }
/* การ์ด "เพิ่ม/ลด" — badge เป็นตัวเลขหลัก จัดให้พอดี ไม่ล้นทับบรรทัดอื่น */
.kpi-grid-4 .kpi-noic .kpi-value:has(.delta) { line-height: 1; margin: 4px 0 2px; }
/* การ์ด "เพิ่ม/ลด" — badge เป็นตัวเลขหลักของการ์ด จึงทำให้ใหญ่ชัด */
.kpi-grid-4 .kpi-noic .kpi-value .delta { display: inline-block; font-size: 21px; font-weight: 800; padding: 4px 13px; border-radius: 10px; line-height: 1.2; vertical-align: middle; }
.kpi-grid-4 .kpi-noic .kpi-sub { margin-top: 5px; }
.kpi-grid-4 .gauge-wrap { padding: 0; }
.kpi-grid-4 .gauge-wrap svg { width: 88px; height: auto; }
/* รายการ error ที่เหลือ — กดเพื่อขยายดูทั้งหมด */
.err-more { margin: 4px 0 10px; }
.err-more > summary { cursor: pointer; color: var(--brand, #256abf); font-weight: 600; list-style: none; padding: 4px 0; user-select: none; }
.err-more > summary::-webkit-details-marker { display: none; }
.err-more > summary:hover { text-decoration: underline; }
.err-more[open] > summary { margin-bottom: 6px; }
.kpi-sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kpi-good { border-left: 4px solid var(--ok); }
.kpi-warn { border-left: 4px solid var(--warn-bd); }

/* ---------- cards & grids ---------- */
.card {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow); margin-bottom: 16px; overflow: hidden;
  transition: box-shadow .2s ease;
}
.card:hover { box-shadow: var(--shadow-lg); }
.card-head { display: flex; justify-content: space-between; align-items: center; padding: 12px 16px 0; }
.card-head h3 { font-size: 14px; color: var(--ink); font-weight: 700; }
.card-body { padding: 14px 16px 16px; }
.card-flush .card-body { padding: 0; }
/* Budget Control — แต่ละส่วนเป็นกล่องมีกรอบชัดเจน + หัวสีของตัวเอง */
.ctrl-page .card { border: 1.5px solid #c2d1e8 !important; border-radius: 14px !important; box-shadow: 0 1px 3px rgba(13,54,107,.06), 0 8px 20px rgba(13,54,107,.06) !important; }
.ctrl-page .card + .card { margin-top: 18px; }
/* ไฮไลต์การ์ดที่ถูกเลื่อนมาจาก KPI (เช่น GL Master) ชั่วคราว */
@keyframes ctrlFlash { 0% { box-shadow: 0 0 0 3px rgba(79,110,242,.55); } 100% { box-shadow: 0 0 0 3px rgba(79,110,242,0); } }
.ctrl-page .card.ctrl-flash { animation: ctrlFlash 1.2s ease-out 1; }
.ctrl-page .card-head { padding: 12px 16px; background: linear-gradient(180deg, #eef4fd 0%, #e3edfa 100%); border-bottom: 1.5px solid #c2d1e8; }
.ctrl-page .card-head h3 { font-size: 14.5px; color: var(--navy); display: flex; align-items: center; gap: 7px; }
.ctrl-page .card-body { padding: 16px; }
.card-flush .grid-hint { margin: 10px 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .grid-2 { grid-template-columns: 1fr; } }

/* ---------- tables ---------- */
.table-scroll { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.data-table.small { font-size: 12.5px; }
.data-table th {
  text-align: left; font-size: 12px; color: var(--navy); font-weight: 700;
  padding: 9px 12px; border-bottom: 2px solid #c9d8ee; background: #f2f6fb; white-space: nowrap;
}
/* v22.74 freeze หัวตาราง: หัวคอลัมน์ค้างบนสุดตอนเลื่อนดูรายการยาวๆ (ตารางแผนกงบซ่อม/ลงทุน/ค่าใช้จ่าย ฯลฯ)
   ทำงานทั้งใน .table-scroll ที่จำกัดความสูง (ค้างในกล่อง) และตารางเต็มหน้า (ค้างตอนเลื่อนเพจ) — พื้นหลังทึบอยู่แล้ว */
.data-table thead th { position: sticky; top: 0; z-index: 3; }
.data-table td { padding: 8px 12px; border-bottom: 1px solid var(--border); vertical-align: middle; }
.data-table tbody tr:hover { background: #f4f7fb; }
.data-table .num, th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tr-sum td { background: #eef2f8; font-weight: 600; border-top: 2px solid var(--border-strong); }
.td-actions { white-space: nowrap; }
.td-actions > * { margin-right: 6px; vertical-align: middle; display: inline-flex; }
.td-actions > *:last-child { margin-right: 0; }
.gl-code { font-weight: 700; color: var(--navy); font-variant-numeric: tabular-nums; margin-right: 4px; }

/* ---------- เทียบปีก่อนเดือนต่อเดือนในตารางกรอก ---------- */
.prev-ghost {
  display: none; font-size: 10px; color: #7f95b8; text-align: right;
  padding: 0 9px 4px; font-variant-numeric: tabular-nums; line-height: 1.2;
}
.budget-card.show-prev .prev-ghost { display: block; }
.budget-card.show-prev .prev-ghost::before { content: 'ปีก่อน '; color: #b3bfd4; font-size: 9px; }
.budget-card.revise-mode.show-prev .prev-ghost::before { content: 'งบเดิม '; }
/* โหมด "ดูงบต้นปี" — ธีมสีส้ม/อำพันทั้งตาราง แยกจากงบปัจจุบัน (สีน้ำเงิน) */
.vo-banner { background: #eee7dc; border: 1px solid #b6a68c; color: #4a3d2f; font-weight: 700; font-size: 13px; padding: 9px 14px; border-radius: 10px; margin: 0 0 10px; }
/* ชั้น freeze: หัวตารางเปลี่ยนสีตามชั้น (แยกกันชัด) — งบต้นปี=เทาน้ำเงิน · Revise=เทาอุ่น · เกิดจริง=เทาเขียว
   · คอลัมน์ Base/Best/Worst (th-sc) + MTP คงสีเดิมเหมือนงบปัจจุบัน (ไม่ทับ) */
/* v22.375 ผู้ใช้สั่ง 18 ก.ย.: หัวตารางกรอกงบค่าใช้จ่ายเป็นสีน้ำเงิน (เหมือนเมนู) ทุกชั้น — ยกเลิกสีเทา/น้ำตาล/เขียวตามชั้น งบต้นปี/Revise/เกิดจริง (ชั้นดูได้จากแท็บด้านบนอยู่แล้ว) */
.budget-card.view-orig .th-yr { color: rgba(255,255,255,.82) !important; }
.budget-card.view-orig .cell, .budget-card.view-orig .cell:disabled { border-color: #cfd6df !important; }
#viewOrigBtn.vo-on { background: #fdf3e0 !important; border-color: #d4a23c !important; color: #a6741a !important; font-weight: 700; }

/* ---------- รอบ Revise ---------- */
.revise-banner { background: #f3effc; border-color: #b7a6ec; color: #4a3492; }
.cell.cell-actual, .cell.cell-actual:disabled {
  background: #fff !important; border-color: #d5dbe3 !important; color: var(--ink) !important;
  font-weight: 600; cursor: not-allowed;
}
.cell.cell-floor { border-color: #e0b25c !important; box-shadow: inset 2px 0 0 #eda100; }
.prev-chip {
  position: fixed; z-index: 95; display: none; pointer-events: none;
  background: #0d366b; color: #cfe0f5; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 7px; box-shadow: 0 4px 14px rgba(13,54,107,.35);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ---------- ซ่อน GL ที่ไม่มีงบ (ตารางเปรียบเทียบ) ---------- */
.cmp-toolbar { padding: 0 0 10px; text-align: right; }
.cmp-wrap.hide-zero tr.row-zero { display: none; }

/* ---------- delta / status / anomaly ---------- */
.delta { font-weight: 700; font-size: 12.5px; padding: 2px 8px; border-radius: 999px; white-space: nowrap; }
.delta.up { color: var(--up); background: var(--crit-bg); }
.delta.down { color: var(--down); background: #eaf6ea; }
.delta.neutral { color: var(--muted); background: #f0efec; }
/* แถวรายได้/กำไร (GL 44/45/46) — กลับสี: เพิ่มขึ้น = เขียว (ดี), ลดลง = แดง */
.delta.up.inv { color: var(--down); background: #eaf6ea; }
.delta.down.inv { color: var(--up); background: var(--crit-bg); }
.txt-up { color: var(--up); } .txt-down { color: var(--down); }
.txt-ok { color: var(--ok); } .txt-warn { color: var(--warn-bd); }
.status-badge { font-size: 11.5px; font-weight: 700; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.st-draft { background: #f0efec; color: var(--ink-2); }
.st-progress { background: #e6f0fb; color: var(--blue); }
.st-completed { background: #eaf6ea; color: var(--down); }
.st-submitted { background: #e6f0fb; color: var(--navy); border: 1px solid var(--blue-soft); }
.st-endorsed { background: #dcf5ef; color: #0b6e5b; border: 1px solid #9be0c5; }
.st-revision { background: var(--warn-bg); color: #8a5a00; border: 1px solid var(--warn-bd); }
.st-locked { background: #ececec; color: var(--ink-2); border: 1px solid var(--border-strong); }
.anomaly { font-size: 11.5px; font-weight: 700; padding: 2px 8px; border-radius: 6px; white-space: nowrap; }
.anomaly.warning { background: var(--warn-bg); color: #8a5a00; }
.anomaly.critical { background: var(--crit-bg); color: var(--up); }
.anomaly-ic { cursor: help; margin-left: 4px; }
.anomaly-ic.critical { color: var(--up); }
.anomaly-ic.warning { color: var(--warn-bd); }
.anomaly-box { margin-top: 12px; padding: 10px 12px; border-radius: 8px; font-size: 13px; }
.anomaly-box.warning { background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.anomaly-box.critical { background: var(--crit-bg); border: 1px solid var(--crit-bd); }

/* ---------- budget grid ---------- */
.budget-scroll { max-height: calc(100vh - 320px); overflow: auto; }
body.no-scroll { overflow: hidden; }
.budget-card.fullscreen {
  position: fixed; inset: 10px; z-index: 80; margin: 0;
  display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(11,11,11,.35); border-color: var(--border-strong);
}
.budget-card.fullscreen .card-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.budget-card.fullscreen .budget-scroll { flex: 1; max-height: none; }
.budget-card.fullscreen .grid-hint { flex-shrink: 0; }
.budget-table { border-collapse: separate; border-spacing: 0; font-size: 12.5px; min-width: 1500px; }
.budget-table th {
  position: sticky; top: 0; z-index: 5; font-size: 13px; font-weight: 700; color: #ffffff;
  background: linear-gradient(180deg, #17469b 0%, #0d366b 100%);
  padding: 8px 8px; border-bottom: 2px solid #3f8be8; text-align: right; white-space: nowrap;
  text-shadow: 0 1px 2px rgba(0,0,0,.25); letter-spacing: .01em;
}
.budget-table th.th-gl { text-align: left; color: #fff; font-size: 13.5px; }
.th-yr { font-size: 10.5px; color: #b7d3f6; font-weight: 500; text-shadow: none; }
.budget-table td { border-bottom: 1px solid var(--border); padding: 0; }
.sticky-col { position: sticky; left: 0; z-index: 4; background: var(--surface); }
.budget-table th.sticky-col { z-index: 6; background: linear-gradient(180deg, #17469b 0%, #0d366b 100%); }
.td-gl { padding: 6px 10px !important; min-width: 230px; max-width: 260px; border-right: 2px solid var(--border-strong) !important; }
.gl-name-wrap { display: flex; align-items: center; gap: 6px; }
.cct-tag {
  font-size: 10.5px; color: #6d7f9e; margin: 2px 0 0 30px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 210px;
}
.gl-nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cell-td { min-width: 92px; padding: 3px 3px !important; }
.cell {
  width: 100%; min-width: 86px; border: 1px solid var(--border-strong); border-radius: 6px;
  background: #fff; padding: 6px 8px; cursor: text;
  font: inherit; font-size: 12.5px; text-align: right; font-variant-numeric: tabular-nums; outline: none;
}
.cell::placeholder { color: #b9b7ae; font-style: italic; font-size: 11px; }
.cell:hover:not(:disabled) { border-color: var(--blue); }
.cell:focus { background: #eef4fc; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,106,191,.25); }
.cell:disabled { color: var(--ink-2); background: #fff; border-color: var(--border); cursor: not-allowed; }
/* พื้นหลังงบเป็นขาว · ช่องที่มีตัวเลข = ไฮไลต์เขียวอ่อนให้เด่น */
.cell.has-val, .cell.has-val:disabled { background: #edf7f0; border-color: #cfe6d7; }
.cell-changed, .cell.has-val.cell-changed { background: #fff9e8; border-color: var(--warn-bd); }
/* โหมดแอดมิน: ช่องที่แก้แต่ยังไม่ยืนยัน = สีเหลืองเข้ม + เส้นขอบเน้น */
.cell.cell-pending, .cell.has-val.cell-pending { background: #fff3cd; border-color: #eda100; outline: 2px solid #eda100; outline-offset: -2px; font-weight: 600; }
.cell.cell-err { background: #fde8e8; border-color: #e02424; outline: 2px solid #e02424; outline-offset: -2px; }
/* v22.147 ช่วงช่องที่เลือกด้วยเมาส์ (ลาก/Shift+คลิก) — ทั้ง .cell (ค่าใช้จ่าย) และ .cx-cell (ซ่อม/ลงทุน) */
.cell.cell-range, .cx-cell.cell-range { background: #dbe9ff !important; box-shadow: inset 0 0 0 2px #3b74d0 !important; }
body.cell-drag { user-select: none; cursor: cell; }
/* โหมดแอดมิน: ขยายตารางแก้งบเต็มจอ */
body.edit-fs-lock { overflow: hidden; }
#admEditWrap.edit-fs { position: fixed; inset: 0; z-index: 1200; background: var(--bg, #fff); margin: 0; padding: 14px 16px; overflow: auto; box-shadow: 0 0 0 100vmax rgba(0,0,0,.15); }
#admEditWrap.edit-fs .budget-scroll { max-height: calc(100vh - 40px); }
/* ปุ่ม X ลอย ในโหมดเต็มจอ — ซ่อนไว้บนสุด เลื่อนเมาส์ขึ้นบนแล้วโผล่ลงมา */
#admFsClose { display: none; position: fixed; top: 12px; left: 50%; z-index: 1300;
  align-items: center; gap: 7px; background: rgba(31,58,95,.55); color: #fff; border: none; border-radius: 22px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer; backdrop-filter: blur(2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.18); opacity: 0; transform: translate(-50%, -22px);
  transition: opacity .2s ease, transform .2s ease, background .2s ease; pointer-events: none; }
#admFsClose.show { opacity: .5; transform: translate(-50%, 0); pointer-events: auto; }
#admFsClose.show:hover { opacity: 1; background: rgba(22,70,111,.95); }
#admFsClose .fs-x { font-size: 15px; line-height: 1; }
#admFsClose kbd { background: rgba(255,255,255,.22); border-radius: 5px; padding: 1px 6px; font-size: 11px; font-family: inherit; }
/* แถบจับเมาส์บนสุด ให้ปุ่มโผล่ง่ายในเต็มจอ */
#admEditWrap.edit-fs::before { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 70px; z-index: 1250; pointer-events: none; }
/* ===== Pop-up เต็มจอ: เทียบงบต้นปี ↔ ปัจจุบัน + งบคงเหลือ ===== */
.cmp-overlay { position: fixed; inset: 0; z-index: 1400; background: rgba(15,23,42,.45); display: flex; align-items: stretch; justify-content: center; padding: 22px; overflow: auto; }
.cmp-inner-wrap { background: var(--surface, #fff); width: 100%; max-width: 1180px; max-height: 94vh; border-radius: 14px; padding: 18px 20px 24px; box-shadow: 0 18px 50px rgba(0,0,0,.3); display: flex; flex-direction: column; }
/* โซนกลาง (ข้อสังเกต + ตาราง GL) = พื้นที่เลื่อนเดียว — หัว/KPI/ปุ่มส่งเห็นตลอด */
.cmp-scroll { flex: 1 1 auto; min-height: 140px; overflow: auto; }
.cmp-inner-wrap { overflow: hidden; }
.cmp-inner-wrap .sub-foot, .cmp-inner-wrap .cmp-head, .cmp-inner-wrap .cmp-kpis { flex: none; }
.cmp-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; border-bottom: 1px solid var(--border); padding-bottom: 12px; margin-bottom: 14px; }
.cmp-head h2 { margin: 0; font-size: 19px; }
.cmp-sub { color: var(--muted); font-size: 13px; margin-top: 3px; }
.cmp-x { background: #f1f3f5; border: none; border-radius: 8px; width: 34px; height: 34px; font-size: 16px; cursor: pointer; color: #444; flex: none; }
.cmp-x:hover { background: #e2e6ea; }
.cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 14px; }
.cmp-kpi { background: #f6f8fb; border-radius: 10px; padding: 11px 14px; }
.cmp-kpi span { display: block; font-size: 12px; color: var(--muted); margin-bottom: 3px; }
.cmp-kpi b { font-size: 18px; font-weight: 700; }
.cmp-kpi.up b { color: #c0392b; }
.cmp-kpi.down b { color: #1d9e75; }
/* % ในการ์ด — เล็กลง + คนละสี (เทา) แยกจากตัวเลขเงิน */
.cmp-kpi .cmp-pct { font-size: 13px; font-weight: 600; color: #64748b; margin-left: 6px; }
.cmp-tabs { display: flex; gap: 6px; margin-bottom: 12px; }
.cmp-tab { background: #fff; border: 1px solid var(--border); border-radius: 999px; padding: 7px 15px; font-size: 13px; cursor: pointer; color: var(--ink-2, #556); }
.cmp-tab.active { background: #1f3a5f; color: #fff; border-color: #1f3a5f; }
.cmp-body { overflow: auto; }
.cmp-table { width: 100%; }
.cmp-table .tr-sum td { background: #f0f4f8; font-weight: 700; border-top: 2px solid #cfd8e3; }
/* สี % ในตารางเทียบ ให้ตัวอักษรเด่นและแยกทิศทางชัด */
.cmp-overlay .delta { font-weight: 800; font-size: 13px; }
.cmp-overlay .delta.up { color: #c0261a; background: #fdeceb; }
.cmp-overlay .delta.down { color: #0b7d52; background: #e6f7ee; }
.cmp-overlay .delta.neutral { color: #6b7280; background: #f0efec; }
.cmp-glrow { cursor: pointer; }
.cmp-glrow:hover td { background: #f2f7ff; }
/* เทียบ 3 ชั้น: แถบสีหัวคอลัมน์ + KPI แยกชั้น (ต้นปี=น้ำเงิน · Revise=ส้ม · เกิดจริง=เขียว) */
.cmp-3 th.c-orig, .cmp-3 td.c-orig { background: #eef4fb; }
.cmp-3 th.c-rev,  .cmp-3 td.c-rev  { background: #fef4ea; }
.cmp-3 th.c-act,  .cmp-3 td.c-act  { background: #ecf7f1; }
.cmp-3 th small { display:block; font-weight:600; font-size:10px; letter-spacing:.5px; opacity:.6; }
.cmp-3 .tr-sum td.c-orig { background:#dbe8f6; } .cmp-3 .tr-sum td.c-rev { background:#fce6cf; } .cmp-3 .tr-sum td.c-act { background:#d7efe1; }
/* v22.261 ยอดบาทใต้ยอดกีบที่แถวรวม (หน้าเทียบงบซ่อม/ลงทุน) */
.cmp-baht { font-size: 11px; font-weight: 700; color: #8a5a10; margin-top: 2px; font-variant-numeric: tabular-nums; }
/* v22.263 การ์ดสรุป: ทำยอดบาทให้เด่นชัด (ผู้ใช้แจ้งว่ามองไม่เห็น) — ป้ายพื้นทองอ่อน ตัวใหญ่ขึ้น */
.cmp-kpi .cmp-baht { display: inline-block; margin-top: 6px; font-size: 14px; font-weight: 800; color: #7a4a08; background: #fdf3d9; border: 1px solid #ecd39a; border-radius: 8px; padding: 2px 10px; }
.cmp-3 td.c-act.c-fc { color: #8a5a00; font-style: italic; background: #fbf3e4; }   /* v22.198 เดือนคาดการณ์ที่กรอก (ยังไม่เกิดจริง) */
.cmp-kpi.c-orig { background:#eef4fb; box-shadow: inset 3px 0 #4a7fc0; }
.cmp-kpi.c-rev  { background:#fef4ea; box-shadow: inset 3px 0 #dd8a3c; }
.cmp-kpi.c-act  { background:#ecf7f1; box-shadow: inset 3px 0 #2ea377; }
.cmp-inner td.c-orig { background:#f4f8fc; } .cmp-inner td.c-rev { background:#fef9f3; } .cmp-inner td.c-act { background:#f3faf6; }
.cmp-caret { display: inline-block; transition: transform .15s; color: #7a889a; font-size: 11px; }
.cmp-glrow.open .cmp-caret { transform: rotate(90deg); }
.cmp-inner { margin: 2px 0; background: #fbfcfe; }
.cmp-inner th, .cmp-inner td { padding: 4px 8px !important; font-size: 12px; }
.cmp-detail > td { padding: 4px 10px 10px !important; background: #f7f9fc; }
.txt-warn { color: #c0392b; }
@media (max-width: 720px){ .cmp-overlay { padding: 8px; } .cmp-inner-wrap { padding: 14px; } }
/* ปุ่ม "ส่งงบประมาณ" ในแถบเครื่องมือ — เล็ก โมเดิร์น เด่น */
.tool-submit { background: #2563eb; color: #fff; border: none; border-radius: 8px; padding: 6px 14px;
  font-size: 13px; font-weight: 700; cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
  box-shadow: 0 2px 7px rgba(37,99,235,.32); transition: background .15s, box-shadow .15s, transform .05s; white-space: nowrap; }
.tool-submit:hover { background: #1d4fd7; box-shadow: 0 4px 12px rgba(37,99,235,.42); }
.tool-submit:active { transform: translateY(1px); }
/* ล็อกอยู่ (ส่งแล้ว/รอบปิด) — โทนครามอ่อน มีกรอบ + กุญแจ (จางกว่าปุ่มส่งจริง แต่ยังเห็นชัด) */
.tool-submit.locked { background: #eef2ff; color: #4356b8; border: 1px solid #c3ccf3; box-shadow: none; font-weight: 700; }
/* v22.386 โหมดตรวจสอบ (ตารางผู้กรอกสำหรับผู้อนุมัติ) — ปุ่มอนุมัติเขียว · ตีกลับแดง · แบนเนอร์น้ำเงินบอกโหมด */
.tool-submit.tool-approve { background: #0d9488; }
.tool-submit.tool-approve:hover { background: #0b7f75; box-shadow: 0 4px 12px rgba(13,148,136,.4); }
.btn-return { color: #c0392b !important; border-color: #e6a9a9 !important; font-weight: 700; }
.btn-return:hover:not(:disabled) { background: #fdecec; }
.rv-banner { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; background: #e8f0fb; border: 1px solid #b6cdf0; border-left: 5px solid #2563eb; color: #12305e; border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13px; }
.rv-banner > a { margin-left: auto; }
/* v22.388 dropdown เลือกหน่วยงานในหน้าตรวจสอบ (โหมดกริด) */
.rv-pick { flex: 1 1 100%; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: 13.5px; }
.rv-dept-select { flex: 1; max-width: 560px; padding: 7px 10px; border: 1px solid #b6cdf0; border-radius: 8px; background: #fff; color: #12305e; font: inherit; font-weight: 600; cursor: pointer; }
.rv-dept-select:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 3px rgba(37,99,235,.18); }
.tool-submit.locked:hover { background: #e2e9fe; box-shadow: none; }
/* การ์ดอัปโหลดไฟล์ — กรอบไฮไลต์เด่น (SAP = คราม · Excel = เขียว) */
.ctrl-page .card.upload-card, .card.upload-card { border-width: 2px !important; border-style: solid !important; border-radius: 14px !important; box-shadow: 0 6px 20px rgba(30,41,59,.12) !important; }
.card.upload-card .card-head { border-radius: 12px 12px 0 0; padding: 12px 16px; margin: -2px -2px 0; }
.card.upload-card .card-head h3 { font-size: 16px; }
.card.upload-card input[type=file] { padding: 7px 10px; border: 1px dashed #99a3b3; border-radius: 8px; background: #fff !important; cursor: pointer; }
.ctrl-page .card.upload-sap, .card.upload-sap { border-color: #4f6ef2 !important; background: #f6f8ff !important; }
.card.upload-sap .card-head { background: #e7ecff !important; color: #26379a; }
.card.upload-sap .card-head h3 { color: #26379a; }
.ctrl-page .card.upload-xlsx, .card.upload-xlsx { border-color: #1f9d57 !important; background: #f3fbf6 !important; }
.card.upload-xlsx .card-head { background: #e0f5e9 !important; color: #0f6e3e; }
.card.upload-xlsx .card-head h3 { color: #0f6e3e; }
/* ปุ่มล้างข้อมูล — โทนแดงอ่อน */
.btn-clear { color: #c0392b !important; border-color: #f0c0b8 !important; }
.btn-clear:hover { background: #fdeceb !important; }
/* การ์ดสถานะในป๊อปอัพส่งงบ */
.sub-status { border-radius: 10px; padding: 11px 14px; margin: 12px 0 0; font-size: 13.5px; }
.sub-status.ok { background: #e6f7ee; color: #0b7d52; border: 1px solid #9fe1cb; }
.sub-status.miss { background: #fdeceb; color: #a3251d; border: 1px solid #f0997b; }
.sub-status.warn { background: #fff7e6; color: #7a5405; border: 1px solid #eda100; }
.sub-status.locked { background: #eef1f4; color: #4a5568; border: 1px solid #cbd2da; }
.chip-new { display: inline-block; font-size: 10.5px; font-weight: 700; color: #185a2e; background: #d9f5e3; border: 1px solid #9fd8b7; border-radius: 99px; padding: 0 6px; vertical-align: middle; }
.sub-status .err-list li, .sub-status .warn-list li { font-size: 12.5px; }
.sub-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--border); }
.sub-foot .primary-btn[disabled] { opacity: .5; cursor: not-allowed; }
/* ซ่อน GL ที่ไม่ได้ใช้ (แถวรวม=0) */
.budget-card.hide-empty tr.row-empty { display: none; }
/* v22.165 ปุ่มดวงตา (ซ่อน GL ที่ไม่ได้ใช้): เปิด = ตาเปิด · ซ่อนอยู่ = ตาปิดขีดแดง พื้นแดงอ่อน */
#hideEmptyBtn.btn-eye, #cxHideEmpty.btn-eye { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px !important; }
#hideEmptyBtn .eye-n, #cxHideEmpty .eye-n { font-size: 11px; font-weight: 700; }
#hideEmptyBtn.he-on, #cxHideEmpty.he-on { background: #fdecec !important; border-color: #d03b3b !important; color: #b42318 !important; font-weight: 700; }
.tool-submit .ico-plane { vertical-align: -2px; margin-right: 2px; }
.cell-err { background: var(--crit-bg) !important; border-color: var(--up) !important; box-shadow: 0 0 0 2px rgba(208,59,59,.25); }
.cell-mtp { background: #f2f6fc; }
/* คอลัมน์งบสมมติฐาน 3 เคส (Base=ฟ้า · Best=เขียว · Worst=ส้ม) ตามฟอร์ม Excel */
/* v22.84 สี Base/Best/Worst Case หัวคอลัมน์ — ครอบทั้งงบค่าใช้จ่าย (.budget-table) และงบซ่อม/ลงทุน (.cx-grid) ให้เหมือนกัน · ตัวอักษรขาว */
.budget-table th.th-sc, .cx-grid th.th-sc { background: linear-gradient(180deg, #2f6bd0 0%, #234f9c 100%) !important; color: #fff !important; }
.budget-table th.th-sc.sc-best,  .cx-grid th.th-sc.sc-best  { background: linear-gradient(180deg, #3f9d5a 0%, #2e7a44 100%) !important; }
.budget-table th.th-sc.sc-worst, .cx-grid th.th-sc.sc-worst { background: linear-gradient(180deg, #e08a3c 0%, #c26a1f 100%) !important; }
.th-sc { border-left: 2px solid rgba(255,255,255,.35); }
.sc-cell { background: #f4f8fe; }
.sc-cell.sc-best  { background: #f2faf3; }
.sc-cell.sc-worst { background: #fdf5ec; }
.sc-cell .cell { background: transparent; }
.sc-cell .cell:focus { background: #fff; }
.sc-cell { border-left: 1px solid var(--border); }
.cell-wrap { position: relative; }
.cell-wrap .cell { padding-left: 20px; }
.cell-detail-btn {
  position: absolute; left: 3px; top: 50%; transform: translateY(-50%);
  border: none; background: none; font-size: 11px; line-height: 1; padding: 2px;
  cursor: pointer; opacity: 0; filter: grayscale(1); transition: opacity .12s;
}
.cell-wrap:hover .cell-detail-btn { opacity: .65; }
.cell-detail-btn:hover { opacity: 1 !important; filter: none; }
.cell-detail-btn.has { opacity: 1; filter: none; }

/* ป๊อปอัพรายละเอียดค่าใช้จ่าย */
.modal.modal-detail { width: 480px; }
.dt-head { font-weight: 700; margin-bottom: 10px; }
.dt-month { float: right; font-weight: 600; color: var(--blue); background: #eef4fc; border-radius: 999px; padding: 2px 10px; font-size: 12px; }
.dt-row { display: grid; grid-template-columns: 1fr 150px 30px; gap: 6px; margin-bottom: 6px; }   /* v22.209 ข้อความก่อน ตัวเลขหลัง */
.dt-row input { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--border-strong); border-radius: 7px; min-width: 0; }
.dt-amt { text-align: right; font-variant-numeric: tabular-nums; }
.dt-row input:focus { border-color: var(--blue); outline: none; box-shadow: 0 0 0 2px rgba(37,106,191,.2); }
.dt-del {
  font: inherit; font-size: 15px; font-weight: 700; border: 1px solid var(--border-strong); background: #fff;
  border-radius: 7px; cursor: pointer; color: var(--ink-2);
}
.dt-del:hover { border-color: var(--up); color: var(--up); background: var(--crit-bg); }
.dt-total {
  margin-top: 10px; padding: 9px 12px; background: #eef2f8; border-radius: 8px;
  font-size: 14px; text-align: right; font-variant-numeric: tabular-nums;
}
.dt-total b { color: var(--navy); font-size: 16px; }
.td-total { font-weight: 700; padding: 7px 10px !important; background: #eef2f8; border-left: 2px solid var(--border-strong) !important; }
.td-prev { color: var(--ink-2); padding: 7px 10px !important; }
.td-delta { padding: 4px 8px !important; }
.td-note { padding: 4px 8px !important; white-space: nowrap; }
.note-btn {
  font: inherit; font-size: 11.5px; border: 1px dashed var(--border-strong); background: none;
  border-radius: 6px; padding: 4px 8px; cursor: pointer; color: var(--ink-2); white-space: nowrap;
}
.note-btn.has-note { border-style: solid; border-color: var(--blue-soft); color: var(--navy); background: #eef4fc; }
.note-btn:hover { border-color: var(--blue); color: var(--blue); }
.nu-btn {
  font: inherit; font-size: 13px; border: 1px solid var(--border-strong); background: #fff;
  border-radius: 6px; padding: 3px 8px; cursor: pointer; vertical-align: middle; margin-right: 4px;
}
.nu-btn:hover:not(:disabled) { border-color: var(--up); background: var(--crit-bg); }
.nu-btn.active { border-color: var(--blue); background: #eef4fc; }
.nu-btn.active:hover { border-color: var(--down); background: #eaf6ea; }
.nu-btn:disabled { opacity: .5; cursor: not-allowed; }
.nu-chip {
  font-size: 10.5px; font-weight: 700; color: var(--ink-2); background: #ececec;
  border: 1px solid var(--border-strong); border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.tr-notused td { background: #f6f6f4; }
.tr-notused .td-gl .gl-code, .tr-notused .gl-nm { color: var(--muted); }
.tr-notused .cell:disabled { background: #ededeb; color: var(--muted); }
.grid-hint {
  font-size: 12px; color: var(--ink-2); background: #eef4fc; border: 1px solid #cfe0f5;
  border-radius: 8px; padding: 8px 12px; display: flow-root; /* กัก float ปุ่มไว้ในแถบเสมอ */
}
.hint-actions { float: right; display: inline-flex; gap: 6px; margin: -3px 0 0 10px; }
.btn-fs { font-size: 13px; padding: 4px 11px !important; }
.btn-clear:hover:not(:disabled) { border-color: var(--up) !important; color: var(--up) !important; background: var(--crit-bg) !important; }
.btn-clear:disabled { opacity: .5; cursor: not-allowed; }
/* แถบเครื่องมือเหนือตาราง — ปุ่มปีก่อน · ขยาย · ตรวจสอบงบ */
.grid-toolbar { display: flex; align-items: center; gap: 10px; padding: 8px 14px; }
.grid-tools { display: inline-flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-left: auto; justify-content: flex-end; row-gap: 6px; }
/* ป้ายล็อกในแถบเครื่องมือ (แทน banner เต็มความกว้าง) */
.lock-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; font-weight: 600;
  color: #9a6a00; background: var(--warn-bg); border: 1px solid var(--warn-bd);
  border-radius: 999px; padding: 4px 12px; white-space: nowrap;
}
.card-flush .grid-toolbar { margin: 0; }
.budget-card.fullscreen .grid-toolbar { flex-shrink: 0; }
/* ตัวเลือกดูชั้นงบ 3 ระดับ (segmented) */
.layer-seg { display: inline-flex; gap: 0; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; background: #fff; }
.layer-seg .lseg { border: none; background: #fff; font-size: 12.5px; font-weight: 600; padding: 5px 13px; cursor: pointer; color: var(--ink-2, #556); border-right: 1px solid var(--border); white-space: nowrap; }
.layer-seg .lseg:last-child { border-right: none; }
.layer-seg .lseg.on { background: #1f3a5f; color: #fff; }
.layer-seg .lseg.on[data-layer="original"] { background: #4a7fc0; }
.layer-seg .lseg.on[data-layer="revise"] { background: #dd8a3c; }
.layer-seg .lseg.on[data-layer="actual"] { background: #2ea377; }
.layer-seg .lseg.locked { opacity: .4; cursor: not-allowed; color: #9aa3ad; }
.layer-seg .lseg small { opacity: .7; }
/* แถบ 3 ระยะงบ (เทียบ 3 ชั้น + Budget Control) */
.tc-stages { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tc-stage { padding: 3px 11px; border-radius: 999px; background: #eef1f5; border: 1px solid var(--border); font-weight: 600; color: #64748b; }
.tc-stage.on { background: #1f3a5f; color: #fff; border-color: #1f3a5f; }
/* แถบ 3 ระยะงบ ใน Budget Control */
.stage-strip { display: flex; align-items: stretch; gap: 10px; flex-wrap: wrap; }
.stage-tile { flex: 1 1 200px; border: 1px solid var(--border); border-radius: 12px; padding: 12px 15px; background: #f8fafc; }
.stage-tile.cur { border-color: #1f3a5f; background: #eef4fb; box-shadow: inset 0 0 0 1px #1f3a5f; }
.stage-tile.empty { opacity: .6; }
.stage-tile .st-h { display: flex; align-items: center; gap: 6px; font-size: 13px; margin-bottom: 6px; }
.stage-tile .st-v { font-size: 19px; font-weight: 700; color: #16233a; }
.st-cur-badge { margin-left: auto; font-size: 11px; font-weight: 700; background: #1f3a5f; color: #fff; padding: 2px 9px; border-radius: 999px; }
.st-arrow { align-self: center; color: #94a3b8; font-size: 18px; font-weight: 700; }
@media (max-width: 720px) { .st-arrow { display: none; } }
.budget-card.view-orig .cell:disabled { background: #f6f9fc; color: #2c4a6b; -webkit-text-fill-color: #2c4a6b; opacity: 1; }
/* ปุ่มตรวจสอบงบ — ธีมใหม่ (ไล่สีม่วง-คราม เด่นแยกจากปุ่มเขียว) */
.grid-tools .btn-review, a.btn-review {
  background: linear-gradient(135deg, #6366f1, #4f46e5) !important; border: none !important;
  color: #fff !important; font-weight: 600; box-shadow: 0 2px 8px rgba(79,70,229,.28);
}
.grid-tools .btn-review:hover, a.btn-review:hover { color: #fff !important; filter: brightness(1.06); box-shadow: 0 5px 14px rgba(79,70,229,.36); }
.lock-banner {
  background: var(--warn-bg); border: 1px solid var(--warn-bd); border-radius: 8px;
  padding: 10px 14px; margin-bottom: 14px; font-weight: 600;
}

/* ---------- buttons & forms ---------- */
.primary-btn, .ghost-btn, .danger-btn {
  font: inherit; font-size: 13px; font-weight: 600; border-radius: 8px; padding: 8px 14px;
  cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; border: 1px solid transparent;
  transition: transform .13s ease, box-shadow .18s ease, background .15s ease;
}
.primary-btn:hover, .ghost-btn:hover, .danger-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,54,107,.18); }
.primary-btn:active, .ghost-btn:active, .danger-btn:active { transform: translateY(0); box-shadow: none; }
.primary-btn { background: var(--blue); color: #fff; box-shadow: 0 2px 8px rgba(37,106,191,.28); }
.primary-btn:hover { background: var(--navy-2); }
.primary-btn:disabled { background: var(--border-strong); cursor: not-allowed; }
.primary-btn.big { font-size: 15px; padding: 11px 22px; }
.ghost-btn { background: #fff; border-color: var(--border-strong); color: var(--ink-2); }
.ghost-btn:hover { border-color: var(--blue); color: var(--blue); }
/* v22.89 ปุ่มเครื่องมือที่ใช้ไม่ได้ตอนนี้ = จางลง (ไม่หายไป) — ปุ่มในแถบเครื่องมือจึงครบเท่ากันทุกงบทุกสถานะ */
.grid-tools .ghost-btn:disabled { opacity: .42; cursor: not-allowed; background: #f6f7f9; }
.grid-tools .ghost-btn:disabled:hover { transform: none; box-shadow: none; border-color: var(--border-strong); color: var(--ink-2); }
.danger-btn { background: var(--up); color: #fff; }
.danger-btn:hover { background: #b02f2f; }
.ghost-btn.small, .danger-btn.small { font-size: 12px; padding: 4px 10px; }
.chip-x { border: none; background: none; cursor: pointer; color: var(--muted); font-size: 10px; padding: 0 2px; }
.chip-x:hover { color: var(--up); }
.gl-chip {
  display: inline-flex; align-items: center; gap: 2px; background: #eef2f8; border: 1px solid var(--border);
  border-radius: 6px; padding: 1px 6px; font-size: 11.5px; font-variant-numeric: tabular-nums; margin: 1px;
}
.inline-form { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.inline-form input, .fld input, .fld select, .fld textarea, #loginUser, #loginPass, textarea {
  font: inherit; font-size: 13.5px; padding: 8px 10px; border: 1px solid var(--border-strong);
  border-radius: 8px; background: #fff; width: 100%;
}
.inline-form input { width: auto; }
.fld { display: block; margin-bottom: 10px; }
.fld span { display: block; font-size: 12px; color: var(--ink-2); margin-bottom: 4px; font-weight: 600; }
.calc-form { margin-top: 12px; }
.calc-result {
  background: #eef2f8; border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px;
  margin: 10px 0; font-size: 14px; font-variant-numeric: tabular-nums;
}
.calc-result b { color: var(--navy); font-size: 16px; }
.assume-text { background: var(--bg); border: 1px dashed var(--border-strong); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; }

/* ---------- lists ---------- */
.todo-list, .err-list, .warn-list { padding-left: 20px; }
.todo-list li, .err-list li, .warn-list li { margin: 5px 0; }
.err-list li { color: var(--up); }
.warn-list li { color: #8a5a00; }
.todo-crit { color: var(--up); font-weight: 600; }
.warn-text { color: #8a5a00; font-weight: 600; margin-top: 8px; }

/* ---------- completion bar ---------- */
.comp-bar { width: 90px; height: 7px; background: var(--border); border-radius: 999px; display: inline-block; margin-right: 8px; vertical-align: middle; }
.comp-fill { height: 100%; border-radius: 999px; background: var(--warn-bd); }
.comp-fill.full { background: var(--ok); }

/* ---------- notes view ---------- */
.note-view .nv-label { font-size: 12px; font-weight: 700; color: var(--ink-2); margin: 10px 0 4px; }
.note-view .nv-text { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; font-size: 13.5px; }
.note-cmp { background: #eef2f8; border-radius: 8px; padding: 8px 12px; margin-bottom: 12px; font-size: 13px; }

/* ---------- charts ---------- */
.chart-tip {
  position: fixed; z-index: 99; display: none; background: rgba(11,11,11,.92); color: #fff;
  font-size: 12px; padding: 7px 10px; border-radius: 7px; pointer-events: none; max-width: 280px; line-height: 1.5;
}
.chart-legend { display: flex; gap: 16px; margin-top: 8px; flex-wrap: wrap; font-size: 12px; color: var(--ink-2); }
.lg-item { display: inline-flex; align-items: center; gap: 6px; }
.dl-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.donut-wrap { display: flex; gap: 18px; align-items: center; flex-wrap: wrap; }
.donut-legend { flex: 1; min-width: 240px; }
.dl-row { display: grid; grid-template-columns: 14px 1fr auto 52px; gap: 8px; align-items: center; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.dl-val { font-variant-numeric: tabular-nums; color: var(--ink-2); }
.dl-pct { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }

/* ---------- ปุ่มสี (accent) ---------- */
.btn-purple { background: #6d5ae0 !important; color: #fff !important; border-color: #6d5ae0 !important; }
.btn-purple:hover { background: #5a48c8 !important; }
.btn-teal { background: #eafcfa !important; color: #0d8f85 !important; border: 1px solid #58c9be !important; }
.btn-teal:hover { background: #d5f5f1 !important; }
.btn-green { background: #0ca30c !important; color: #fff !important; border-color: #0ca30c !important; }
.btn-green:hover { background: #0a8a0a !important; }
.btn-grad {
  background: linear-gradient(90deg, #6d5ae0, #2a78d6) !important; color: #fff !important; border: none !important;
}
.btn-grad:hover { filter: brightness(1.08); }

/* ---------- KPI แบบมีไอคอนสี ---------- */
.kpi-c { display: flex; gap: 12px; align-items: flex-start; }
.kpi-ic {
  width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; font-size: 20px;
}
.kpi-c .kpi-body { min-width: 0; flex: 1; }
.kpi-tint-blue  { border-top: 3px solid #2a78d6; }
.kpi-tint-teal  { border-top: 3px solid #1baf7a; }
.kpi-tint-green { border-top: 3px solid #0ca30c; }
.kpi-tint-amber { border-top: 3px solid #eda100; }

.kpi-tint-red { border-top: 3px solid #d03b3b; }

/* ---------- Executive Dashboard ---------- */
.exec-status-bar {
  display: flex; gap: 3px; height: 16px; border-radius: 999px; overflow: hidden; margin-bottom: 10px;
  background: var(--border);
}
.status-seg { min-width: 14px; transition: filter .15s; }
.status-seg:hover { filter: brightness(1.15); }
.st-legends { display: flex; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2); }
.st-legend { display: inline-flex; align-items: center; gap: 6px; }
.st-legend b { color: var(--ink); }
.st-waiting {
  margin-top: 10px; padding: 8px 12px; background: var(--warn-bg); border: 1px solid #f3d9a4;
  border-radius: 8px; font-size: 12.5px;
}
.mover-list { display: flex; flex-direction: column; }
.mover-row {
  display: flex; justify-content: space-between; align-items: center; gap: 12px;
  padding: 9px 10px; border-bottom: 1px dashed var(--border); text-decoration: none; color: inherit;
  border-radius: 8px; transition: background .12s;
}
.mover-row:hover { background: #f4f7fb; }
.mover-row:last-child { border-bottom: none; }
.mv-main { min-width: 0; }
.mv-main b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-main small { color: var(--muted); font-size: 11.5px; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mv-val { text-align: right; flex-shrink: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; }
.mv-val .num { font-weight: 700; font-variant-numeric: tabular-nums; font-size: 13px; }
.exc-critical td:first-child { border-left: 3px solid var(--up); }
.exc-warning td:first-child { border-left: 3px solid var(--warn-bd); }

/* ---------- ไอคอน GL รายแถว ---------- */
.gl-ic {
  width: 24px; height: 24px; border-radius: 7px; flex-shrink: 0; font-size: 12px;
  display: inline-flex; align-items: center; justify-content: center;
}

/* ---------- แถบขวาหน้ากรอกงบ ---------- */
.budget-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 16px; align-items: start; }
@media (max-width: 1250px) { .budget-layout { grid-template-columns: 1fr; } }
.rail .card { margin-bottom: 14px; }
.rail-list { list-style: none; }
.rail-list li { display: flex; justify-content: space-between; gap: 8px; padding: 5px 0; font-size: 12.5px; border-bottom: 1px dashed var(--border); }
.rail-list li:last-child { border-bottom: none; }
.rail-list .rl-val { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }
.rl-ok { color: var(--down); } .rl-warn { color: #8a5a00; } .rl-crit { color: var(--up); }
.rail-check-card { border-top: 3px solid #6d5ae0; }
.rail-warn-card { border-top: 3px solid #eda100; background: #fffdf7; }
.rail-submit-card { border-top: 3px solid #0ca30c; }
.rail-ring { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.submit-state { font-size: 12.5px; font-weight: 600; margin-bottom: 10px; }
.rail .primary-btn, .rail .ghost-btn { width: 100%; justify-content: center; margin-top: 8px; }

/* ---------- แถวเทียบปีก่อนท้ายตาราง ---------- */
.tr-pct td { background: #fbfbf9; font-size: 11px; padding: 4px 8px; }

/* ---------- sync chip ---------- */
.sync-chip {
  display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); white-space: nowrap; cursor: default;
}
.sync-off  { color: var(--muted); background: #f0efec; }
.sync-sync { color: var(--blue); background: #e6f0fb; border-color: var(--blue-soft); }
.sync-ok   { color: var(--down); background: #eaf6ea; border-color: #bfe3bf; }
.sync-err  { color: var(--up); background: var(--crit-bg); border-color: var(--crit-bd); }
.setup-steps { padding-left: 22px; font-size: 13px; }
.setup-steps li { margin: 4px 0; }
.setup-steps code { background: #eef2f8; border-radius: 4px; padding: 1px 6px; font-size: 12px; }

/* ---------- gauge KPI ---------- */
.kpi-gauge { text-align: center; }
.kpi-gauge .kpi-label { text-align: left; }
.gauge-wrap { display: flex; justify-content: center; padding: 2px 0; }

/* ---------- calculator ---------- */
.calcu-display {
  width: 100%; font-size: 20px; font-weight: 700; text-align: right; padding: 10px 12px;
  border: 1px solid var(--border-strong); border-radius: 8px; font-variant-numeric: tabular-nums;
  margin-bottom: 8px; background: #fff;
}
.calcu-display.calcu-err { border-color: var(--up); background: var(--crit-bg); }
.calcu-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; margin-bottom: 8px; }
.calcu-btn {
  font: inherit; font-size: 16px; font-weight: 600; padding: 10px 0; border-radius: 8px;
  border: 1px solid var(--border-strong); background: #fff; cursor: pointer;
}
.calcu-btn:hover { background: var(--bg); }
.calcu-btn:active { transform: scale(.96); }
.calcu-btn.op { background: #eef2f8; color: var(--navy); }
.calcu-btn.fn { background: #f0efec; color: var(--ink-2); }
.calcu-btn.eq { background: var(--blue); color: #fff; border-color: var(--blue); }
.calcu-btn.eq:hover { background: var(--navy-2); }

/* ---------- เครื่องมือคำนวณ (Financial Tools — ตาม mock) ---------- */
.mt-ic {
  width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center;
  justify-content: center; font-size: 19px; margin-right: 10px; vertical-align: middle;
}
.mt-rainbow { background: linear-gradient(135deg, #fde68a, #f9a8d4 45%, #93c5fd); }
.mt-teal { background: linear-gradient(135deg, #34d399, #0ea5b7); }
.mt-svg { display: inline-block; margin-right: 10px; vertical-align: middle; filter: drop-shadow(0 2px 6px rgba(13,148,136,.35)); }
.btn-svg { display: inline-flex; vertical-align: -3px; border-radius: 4px; }
.mt-tx { display: inline-flex; flex-direction: column; vertical-align: middle; line-height: 1.3; }
.mt-tx small { font-size: 11px; color: var(--muted); font-weight: 400; }
.ft-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
@media (max-width: 1000px) { .ft-grid { grid-template-columns: 1fr; } }
.ft-col {
  background: #fff; border: 1px solid var(--border); border-radius: 14px; padding: 16px;
  box-shadow: var(--shadow);
}
.ft-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.ft-ic { width: 40px; height: 40px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 19px; flex-shrink: 0; }
.ft-head b { font-size: 15px; display: block; }
.ft-head small { color: var(--muted); font-size: 11px; }
.pill-green { font-size: 10.5px; font-weight: 700; color: #059669; background: #d1fae5; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.ft-ratebox { background: #f8fafc; border: 1px solid var(--border); border-radius: 11px; padding: 10px 12px; margin-bottom: 12px; }
.ft-ratebox-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; font-size: 13px; }
.ft-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.ft-table th { text-align: left; font-size: 11px; color: var(--muted); font-weight: 600; padding: 4px 4px; border-bottom: 1px solid var(--border); }
.ft-table td { padding: 6px 4px; border-bottom: 1px dashed var(--border); font-variant-numeric: tabular-nums; }
.ft-table tr:last-child td { border-bottom: none; }
.ft-table .num { text-align: right; }
.flag { font-size: 14px; }
.flag-img {
  width: 22px; height: 15px; object-fit: cover; border-radius: 3px; vertical-align: -2px;
  border: 1px solid rgba(11,11,11,.12); box-shadow: 0 1px 2px rgba(11,11,11,.12); margin-right: 4px;
}
.flag-cell { white-space: nowrap; }
/* v22.258 กดแถวธงในตารางอัตราแลกเปลี่ยนเพื่อเลือกสกุลในเครื่องคำนวณ */
.ft-table tr.fx-pick-row { cursor: pointer; transition: background .12s; }
.ft-table tr.fx-pick-row:hover td { background: #eef4fc; }
.ft-table tr.fx-pick-row.fx-active td { background: #dcebfb; box-shadow: inset 3px 0 0 #1d5a9e; }
.ft-divider { display: flex; align-items: center; gap: 10px; color: var(--muted); font-size: 11px; margin: 12px 0 10px; }
.ft-divider::before, .ft-divider::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.two-up { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.fx-ratebox { background: #eef4fc; border: 1px solid #cfe0f5; border-radius: 11px; padding: 10px 12px; margin: 4px 0 10px; }
.fxr-label { font-size: 11.5px; font-weight: 700; color: var(--blue); margin-bottom: 4px; }
.fxr-row { display: flex; align-items: baseline; gap: 10px; }
.fxr-row input {
  font-size: 24px !important; font-weight: 800; color: var(--navy); border: none !important;
  background: transparent !important; padding: 0 !important; width: 60% !important; font-variant-numeric: tabular-nums;
}
.fxr-row input:focus { outline: none; border-bottom: 2px solid var(--blue) !important; border-radius: 0 !important; }
.fx-result {
  width: 100%; font: inherit; cursor: pointer; border: none; border-radius: 12px; padding: 12px 16px;
  background: linear-gradient(100deg, #2563eb, #3b82f6); color: #fff; text-align: left;
  display: flex; flex-direction: column; gap: 2px; box-shadow: 0 6px 18px rgba(37,99,235,.35);
  transition: transform .13s, box-shadow .18s;
}
.fx-result:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(37,99,235,.45); }
.fxr-sub { font-size: 11.5px; opacity: .85; }
.fxr-val { font-size: 21px; font-weight: 800; font-variant-numeric: tabular-nums; }
.fuel-info { background: #eef4fc; border: 1px solid #cfe0f5; border-radius: 11px; padding: 10px 12px; margin-bottom: 12px; }
.fuel-row { display: flex; justify-content: space-between; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed #cfe0f5; }
.fuel-row:last-child { border-bottom: none; }
.suffix-wrap { position: relative; }
.suffix-wrap input { width: 100%; padding-right: 44px !important; }
.suffix {
  position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  font-size: 11px; font-weight: 700; color: var(--ink-2); background: #f0efec; border-radius: 6px; padding: 3px 8px;
}
.green-card, .purple-card { border-radius: 11px; padding: 10px 14px; margin-bottom: 9px; display: flex; flex-direction: column; gap: 1px; }
.green-card { background: #ecfdf5; border: 1px solid #a7f3d0; }
.purple-card { background: #f5f3ff; border: 1px solid #ddd6fe; text-align: center; padding: 14px; }
.gc-label { font-size: 11.5px; font-weight: 700; color: var(--ink-2); }
.gc-val { font-size: 17px; font-weight: 800; color: #047857; font-variant-numeric: tabular-nums; }
.gc-sub { font-size: 11.5px; color: var(--muted); }
.pc-val { font-size: 22px; font-weight: 800; color: #6d28d9; font-variant-numeric: tabular-nums; }
.ft-foot { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--border); }

/* ---------- เครื่องคิดเลข (ธีมเขียวมิ้นต์ — ตาม mock) ---------- */
.modal.modal-calcu { width: 460px; }
.calcu2-display {
  background: #ecfdf5; border: 1px solid #a7f3d0; border-radius: 13px; padding: 10px 16px 12px; margin-bottom: 12px;
}
.cd-label { font-size: 11.5px; color: #059669; font-weight: 700; display: block; }
.calcu2-display input {
  width: 100%; border: none; background: transparent; font: inherit; font-size: 30px; font-weight: 800;
  text-align: right; color: #064e3b; outline: none; font-variant-numeric: tabular-nums;
}
.calcu2-display input.calcu-err { color: var(--up); }
.calcu2-fnrow { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; margin-bottom: 8px; }
.calcu2-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin-bottom: 12px; }
.cbtn {
  font: inherit; font-size: 19px; font-weight: 700; color: var(--ink); padding: 10px 0 8px;
  background: #fff; border: 1px solid var(--border); border-radius: 12px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; gap: 0; line-height: 1.15;
  box-shadow: 0 1px 3px rgba(13,54,107,.06); transition: transform .1s, box-shadow .15s, background .12s;
}
.cbtn small { font-size: 9px; font-weight: 500; color: var(--muted); }
.cbtn:hover { background: #f8fafc; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(13,54,107,.12); }
.cbtn:active { transform: scale(.96); }
.cbtn.fn { background: #ecfdf5; border-color: #a7f3d0; color: #047857; font-size: 16px; }
.cbtn.fn small, .cbtn.op small, .cbtn.eq small { color: inherit; opacity: .75; }
.cbtn.op { background: #ecfdf5; border-color: #a7f3d0; color: #0d9488; }
.cbtn.eq { background: linear-gradient(135deg, #34d399, #2563eb); border: none; color: #fff; box-shadow: 0 4px 14px rgba(13,148,136,.35); }
.calcu2-copy {
  width: 100%; font: inherit; text-align: left; display: flex; gap: 10px; align-items: center;
  background: #f0fdf9; border: 1px solid #a7f3d0; border-radius: 11px; padding: 10px 12px; cursor: pointer;
  font-size: 12.5px; transition: background .12s;
}
.calcu2-copy:hover { background: #dcfce7; }
.calcu2-copy small { color: var(--muted); font-size: 11px; }
.cc-ic { width: 34px; height: 34px; border-radius: 50%; background: #d1fae5; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }

/* ---------- toast & modal ---------- */
.toast {
  position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--navy); color: #fff; padding: 11px 20px; border-radius: 9px; font-size: 13.5px;
  opacity: 0; pointer-events: none; transition: all .25s; z-index: 2000; box-shadow: 0 8px 24px rgba(11,11,11,.25); max-width: 90vw;   /* v22.266 ผู้ใช้แจ้ง 15 ก.ย.: toast โผล่หลัง popup/หน้าต่างเทียบ → อยู่หน้าสุดเสมอ (modal 300 · cmp-overlay 1400) */
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.err { background: var(--up); }
.modal-back {
  position: fixed; inset: 0; background: rgba(11,11,11,.42); z-index: 300;
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.modal {
  background: var(--surface); border-radius: 12px; width: 560px; max-width: 100%;
  max-height: 88vh; overflow: auto; box-shadow: 0 20px 60px rgba(11,11,11,.3);
}
.modal.modal-wide { width: 1120px; }
.modal.modal-narrow { width: 340px; }
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; border-bottom: 1px solid var(--border); }
.modal-head h3 { font-size: 15px; color: var(--navy); }
.modal-x { border: none; background: none; font-size: 15px; cursor: pointer; color: var(--muted); }
.modal-body { padding: 16px 18px; }
.modal-foot { display: flex; justify-content: flex-end; gap: 8px; padding: 12px 18px; border-top: 1px solid var(--border); }

/* ---------- login ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(160deg, var(--navy) 0%, #1c5cab 60%, #256abf 100%); padding: 20px; }
.login-card { background: var(--surface); border-radius: 16px; padding: 34px 36px; width: 430px; max-width: 100%; box-shadow: 0 24px 80px rgba(0,0,0,.35); }
.login-brand { text-align: center; margin-bottom: 22px; }
.login-brand h1 { font-size: 21px; color: var(--navy); }
.login-sub { color: var(--blue); font-size: 12px; letter-spacing: .1em; margin-top: 2px; }
.login-company { color: var(--muted); font-size: 12.5px; margin-top: 6px; }
.login-card-wide { width: 900px; max-height: 92vh; overflow-y: auto; }
.admin-link {
  display: block; width: 100%; text-align: center; font: inherit; font-size: 12.5px;
  background: none; border: none; color: var(--muted); cursor: pointer; padding: 10px 0 0; margin-top: 6px;
}
.admin-link:hover { color: var(--blue); text-decoration: underline; }
.admin-head { display: flex; gap: 12px; align-items: center; margin-bottom: 14px; padding: 10px 12px; background: #eef2f8; border-radius: 10px; }
#deptSel { font-size: 14px; }
.login-acc {
  display: flex; gap: 12px; align-items: center; text-align: left; font: inherit;
  padding: 12px 14px; border: 1px solid var(--border-strong); background: #fff; border-radius: 10px; cursor: pointer;
}
.login-acc:hover { border-color: var(--blue); background: #eef4fc; }
.login-acc-main { width: 100%; background: var(--navy); border-color: var(--navy); color: #fff; margin-bottom: 18px; }
.login-acc-main small { color: #9ec5f4; }
.login-acc-main:hover { background: var(--navy-2); border-color: var(--navy-2); }
.la-arrow { margin-left: auto; font-size: 18px; opacity: .7; }
.login-section-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); margin: 0 0 10px; letter-spacing: .02em; }
.dept-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; margin-bottom: 16px; }
@media (max-width: 980px) { .dept-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .dept-grid { grid-template-columns: 1fr; } }
.dept-card {
  display: flex; gap: 10px; align-items: center; text-align: left; font: inherit;
  padding: 10px 12px; border: 1px solid var(--border-strong); background: #fff; border-radius: 10px; cursor: pointer;
  min-width: 0;
}
.dept-card:hover:not(:disabled) { border-color: var(--blue); background: #eef4fc; transform: translateY(-1px); box-shadow: 0 3px 10px rgba(13,54,107,.1); }
.dept-card.dc-inactive { opacity: .45; cursor: not-allowed; }
.dc-avatar {
  width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(135deg, #256abf, #86b6ef);
  color: #fff; font-weight: 800; font-size: 15px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.dc-text { min-width: 0; display: block; }
.dc-text b { display: block; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dc-text small { color: var(--muted); font-size: 11px; }
.login-hint { text-align: center; }

/* ---------- v22.151 Dashboard นำเสนอผู้บริหาร (งบค่าใช้จ่าย) ---------- */
.exec-kpis .kpi-value { font-size: 22px; }
.exec-kpis .kpi-sub b { color: var(--navy); }
.exec-table td.ex-notecell { max-width: 320px; }
.ex-note { font-size: 12px; color: #33415c; }
.ex-st { display: inline-block; border-radius: 999px; padding: 2px 9px; font-size: 12px; white-space: nowrap; }
.ex-pos { color: #16744a; } .ex-neg { color: #b42318; } .ex-warn { color: #b45309; font-weight: 600; }
.ex-ok { background: #e9f7ef; color: #16744a; } .ex-near { background: #fff4d6; color: #8a6100; } .ex-over { background: #fde8e8; color: #b42318; } .ex-new { background: #f1ecfd; color: #5b3ca8; }
/* v22.156 การ์ดหน้าตางบปีนี้: เดือนเกิดจริง (เทา) · เดือนคาดการณ์ (เหลืองอ่อน) · แถวรวม */
.exec-months tr.ex-mact td:first-child { color: #6b7280; }
.exec-months tr.ex-mfc td { background: #fffbeb; }
.exec-months tfoot td { border-top: 2px solid #d8dee9; background: #f7f9fc; }
.exec-months tr.ex-mtotal td { background: #eef3fb; }
body.present-mode .sidebar, body.present-mode .topbar { display: none !important; }
body.present-mode .content { max-width: 1500px; margin: 0 auto; padding: 22px 32px; }
body.present-mode .exec-kpis .kpi-value { font-size: 30px; }
body.present-mode .kpi-label, body.present-mode .kpi-sub { font-size: 13px; }
body.present-mode .no-print { display: none !important; }
body.present-mode h1 { font-size: 26px; }

/* ---------- v22.153 อัปโหลด Excel (หน้ากรอกงบค่าใช้จ่าย) ---------- */
.btn-blue { background: #2a78d6 !important; color: #fff !important; border-color: #2a78d6 !important; }
.btn-blue:hover { background: #1f62b5 !important; }
.btn-blue:disabled { opacity: .5; cursor: not-allowed; }
/* v22.215 ผู้ใช้กำหนดสีปุ่มหัวตารางกรอก 14 ก.ย.: ปีก่อน=ขาว · เทียบงบ=เขียว · ดวงตา=แดง(เมื่อซ่อน) · บันทึก=ม่วง · ส่งงบ=น้ำเงิน · ⛶=ขาว */
#cmpOrigBtn.btn-green, #cxCmp3.btn-green { background: #2e9e4f !important; border-color: #2e9e4f !important; }
#cmpOrigBtn.btn-green:hover, #cxCmp3.btn-green:hover { background: #26873f !important; }
#saveNowBtn.btn-purple, #cxSaveNow.btn-purple { background: #6a3fd9 !important; border-color: #6a3fd9 !important; }
#saveNowBtn.btn-purple:hover, #cxSaveNow.btn-purple:hover { background: #5a33bd !important; }
#saveNowBtn.btn-purple:disabled, #cxSaveNow.btn-purple:disabled { opacity: .5; cursor: not-allowed; }
.imp-sum { display: grid; gap: 4px; margin-bottom: 8px; font-size: 13.5px; }
/* v22.193 popup ตรวจก่อนนำเข้า Assumption (ตารางช่องที่จะเปลี่ยน) */
.as-imp { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.as-imp th, .as-imp td { border: 1px solid #e5e7eb; padding: 3px 6px; text-align: left; white-space: nowrap; }
.as-imp th { background: #f3f4f6; position: sticky; top: 0; }
.as-imp td:nth-child(3) { max-width: 260px; overflow: hidden; text-overflow: ellipsis; }
.as-imp tr.imp-ow td { background: #fff7ed; }
.as-imp-b { color: #2563eb; } .as-imp-r { color: #b91c1c; }
.imp-diff { max-height: 220px; overflow: auto; font-size: 12.5px; color: #7a3b00; background: #fff7ed; border: 1px solid #fed7aa; border-radius: 8px; padding: 8px 8px 8px 26px; margin: 6px 0; }
.imp-table tr.imp-over td { background: #fff4e5; }

/* ---------- print ---------- */
@media print {
  .no-print { display: none !important; }
  .sidebar, .topbar, .page-actions, .note-btn, .primary-btn, .ghost-btn, .danger-btn { display: none !important; }
  .content { padding: 0; max-width: none; }
  .card, .kpi { box-shadow: none; break-inside: avoid; }
  body { background: #fff; }
  .budget-scroll { max-height: none; overflow: visible; }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .sidebar { width: 64px; }
  .sidebar .brand-name, .sidebar .brand-sub, .sidebar .nav-item span:not(.nav-ic):not(.nav-badge), .sidebar-foot { display: none; }
  .topbar-idash { display: none; }
  .nav-item { justify-content: center; padding: 11px; font-size: 0; position: relative; }
  .nav-ic { font-size: 16px; }
  .sidebar .nav-badge { position: absolute; top: 3px; right: 5px; margin: 0; min-width: 16px; height: 16px; font-size: 10px; padding: 0 4px; }
  .uc-name { display: none; }
  .content { padding: 14px 12px 80px; }
  .grid-2, .grid-3 { grid-template-columns: 1fr; }
}

/* ---------- แถวหัวกลุ่ม "ด้าน" ในตารางหน่วยงาน (v3.4) ---------- */
.data-table tr.side-row td{
  background:linear-gradient(90deg,#eef4fc,#f7fafd);
  color:#1c4e8f;font-weight:700;font-size:13px;
  border-top:2px solid #d5e3f5;padding:8px 14px;letter-spacing:.2px;
}

/* ---------- Executive Dashboard v3.6 ---------- */
.exec-hero{background:linear-gradient(120deg,#0c2c61 0%,#17457f 55%,#2264ad 100%);border-radius:18px;
  padding:24px 26px;color:#fff;box-shadow:0 14px 38px rgba(12,44,97,.28);margin-bottom:16px;
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,2fr);gap:22px;align-items:center}
.eh-kicker{font-size:13px;opacity:.9;margin-bottom:6px;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.eh-chip{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);border-radius:999px;
  padding:2px 12px;font-size:11.5px;font-weight:600;white-space:nowrap}
.eh-chip-rv{background:#7c3aed;border-color:#a78bfa}
.eh-big{font-size:38px;font-weight:800;letter-spacing:.3px;line-height:1.15}
.eh-big small{font-size:16px;font-weight:600;opacity:.8}
.eh-full{font-size:12.5px;opacity:.75;margin-top:6px}
.eh-stats{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.eh-stat{background:rgba(255,255,255,.09);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:12px 14px}
.ehs-label{font-size:12px;opacity:.85;margin-bottom:4px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ehs-val{font-size:18px;font-weight:700;line-height:1.3}
.ehs-val small{font-size:11.5px;font-weight:500;opacity:.8}
.ehs-bar{height:5px;border-radius:3px;background:rgba(255,255,255,.18);margin:7px 0 5px;overflow:hidden}
.ehs-bar i{display:block;height:100%;border-radius:3px;background:#4ade80}
.ehs-sub{font-size:11.5px;opacity:.75}
.side-cards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:16px}
.side-card{display:block;min-width:0;background:#fff;border:1px solid #e3e9f2;border-left:5px solid var(--sc);border-radius:14px;
  padding:14px 16px;box-shadow:0 4px 14px rgba(30,64,120,.07);transition:transform .15s,box-shadow .15s;
  text-decoration:none;color:inherit}
.side-card:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(30,64,120,.14)}
.sc-head{font-size:13px;font-weight:700;color:#33475f;display:flex;align-items:center;gap:6px}
.sc-head .sc-n{margin-left:auto;font-size:11px;font-weight:600;color:var(--sc);background:var(--scbg);border-radius:999px;padding:2px 9px;white-space:nowrap}
.sc-val{font-size:21px;font-weight:800;color:#122a49;margin:7px 0 6px}
.sc-val small{font-size:12px;font-weight:500;color:#7d8da3}
.sc-bar{height:6px;border-radius:3px;background:#edf1f7;overflow:hidden}
.sc-bar i{display:block;height:100%;background:var(--sc);border-radius:3px}
.sc-sub{font-size:11.5px;color:#7d8da3;margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mtp-row{display:flex;gap:26px;align-items:flex-end;justify-content:center;padding:10px 0 2px}
.mtp-col{text-align:center;flex:0 1 150px}
.mtp-bar-wrap{height:124px;display:flex;align-items:flex-end;justify-content:center}
.mtp-bar{width:58px;border-radius:9px 9px 3px 3px;background:linear-gradient(180deg,#3b82d8,#1c4e8f)}
.mtp-bar-cur{background:linear-gradient(180deg,#7fb0e8,#4a7fc0)}
.mtp-y{font-size:13px;font-weight:700;color:#33475f;margin-top:8px}
.mtp-v{font-size:12.5px;color:#122a49;font-weight:600}
.mtp-d{font-size:11.5px;font-weight:700}
@media (max-width:1100px){.exec-hero{grid-template-columns:1fr}.eh-stats{grid-template-columns:repeat(2,minmax(0,1fr))}.side-cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.eh-stats,.side-cards{grid-template-columns:1fr}}

/* ---------- v3.7: แสง-เงา โมเดิร์นทั้ง template ---------- */
.topbar{background:linear-gradient(180deg,#ffffff 0%,#f8fbfe 100%);border-bottom:1px solid #e6ecf5;
  box-shadow:0 6px 20px rgba(15,50,105,.08);position:sticky;top:0;z-index:40}
.icon-btn{background:#fff;border:1px solid #e3e9f2;border-radius:12px;
  box-shadow:0 3px 10px rgba(15,50,105,.08);transition:transform .15s,box-shadow .15s}
.icon-btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,50,105,.16)}
.user-chip{background:#fff;border:1px solid #e3e9f2;border-radius:999px;padding:4px 14px 4px 5px;
  box-shadow:0 3px 10px rgba(15,50,105,.08)}
.uc-avatar{background:linear-gradient(135deg,#2f7fd6,#0c2c61);color:#fff;font-size:16px;
  box-shadow:0 3px 9px rgba(12,44,97,.35),inset 0 1px 0 rgba(255,255,255,.28)}
.year-select{box-shadow:0 3px 10px rgba(15,50,105,.07)}
.ghost-btn,.primary-btn,.danger-btn{transition:transform .15s,box-shadow .15s}
.ghost-btn:hover{transform:translateY(-1px);box-shadow:0 6px 14px rgba(15,50,105,.13)}
.primary-btn:hover{transform:translateY(-1px);box-shadow:0 8px 20px rgba(37,106,191,.35)}
.sidebar{box-shadow:8px 0 28px rgba(12,44,97,.16)}
.nav-item.active{box-shadow:0 6px 18px rgba(0,0,0,.24),inset 0 1px 0 rgba(255,255,255,.16)}
.noti-panel{border-radius:14px;box-shadow:0 20px 50px rgba(12,44,97,.24)}
.sync-chip{box-shadow:0 2px 8px rgba(15,50,105,.07)}
.kpi{transition:transform .15s,box-shadow .15s}
.kpi:hover{transform:translateY(-2px);box-shadow:0 12px 26px rgba(30,64,120,.14)}

/* ---------- ตารางดูเลข IO / CCT ---------- */
.io-search{width:100%;margin-bottom:10px;padding:9px 14px;border:1.6px solid #d5e0ef;border-radius:10px;
  font:inherit;font-size:13.5px;box-shadow:inset 0 1px 3px rgba(15,50,105,.06)}
.io-search:focus{outline:none;border-color:#2f7fd6;box-shadow:0 0 0 3px rgba(47,127,214,.15)}
.mono{font-family:Consolas,'Courier New',monospace;font-size:12.5px;letter-spacing:.2px}
td.copyable{cursor:pointer}
td.copyable:hover{background:#eef5fd;color:#1c4e8f}
td.copyable.muted{color:#a9b4c4;cursor:default}

/* ---------- v3.8: ช่องตัวเลขไม่ล้น — กว้างขึ้น + ย่อฟอนต์อัตโนมัติเมื่อเลขยาว ---------- */
.cell-td { min-width: 116px; }
.cell { min-width: 110px; padding: 6px 7px; }
.cell-wrap .cell { padding-left: 18px; }
.cell.cell-long { font-size: 11px; letter-spacing: -.2px; }
.cell.cell-xlong { font-size: 9.8px; letter-spacing: -.3px; padding-left: 4px; padding-right: 5px; }
.prev-ghost { max-width: 116px; overflow: hidden; text-overflow: ellipsis; }

/* ---------- v3.9: ป้ายสถานะ backend ที่กำลังใช้งาน ---------- */
.pill-on{display:inline-block;font-size:12px;font-weight:600;color:#0b7f58;background:#e6f7f0;
  border:1px solid #9be0c5;border-radius:999px;padding:1px 10px;margin-left:8px;vertical-align:2px}

/* ---------- v4.2: ขยาย/ย่อตารางทั่วไป (หน้ารายย่อยผู้จัดการ ฯลฯ) ---------- */
.mgr-toolbar { display:flex; justify-content:flex-end; align-items:center; gap:8px; padding:2px 2px 10px; }
.fs-card.fullscreen {
  position: fixed; inset: 10px; z-index: 80; margin: 0; background:#fff;
  border-radius:14px; box-shadow:0 24px 70px rgba(12,44,97,.32);
  display:flex; flex-direction:column; overflow:hidden;
}
.fs-card.fullscreen .card-body { flex:1; display:flex; flex-direction:column; overflow:hidden; }
.fs-card.fullscreen .fs-scroll { flex:1; max-height:none !important; }
.fs-scroll { max-height: calc(100vh - 320px); overflow:auto; }

/* ============ Modern Landing / Login (v5.8) ============ */
.login-wrap {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; position: relative; overflow: hidden;
  background:
    radial-gradient(1100px 560px at 12% 8%, #1c5cab 0%, transparent 55%),
    radial-gradient(900px 680px at 92% 96%, #2f7fd6 0%, transparent 52%),
    linear-gradient(160deg, #071d40 0%, #0c2c61 55%, #123a76 100%);
}
.login-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.login-orbs span { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .45; animation: lorb 15s ease-in-out infinite; }
.login-orbs span:nth-child(1) { width: 360px; height: 360px; left: -70px; top: 6%; background: #2f7fd6; }
.login-orbs span:nth-child(2) { width: 300px; height: 300px; right: 3%; top: 10%; background: #4aa3ff; animation-delay: -5s; }
.login-orbs span:nth-child(3) { width: 420px; height: 420px; left: 34%; bottom: -140px; background: #1c5cab; animation-delay: -9s; }
@keyframes lorb { 0%,100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-28px) scale(1.05); } }

.login-card.login-2col {
  position: relative; z-index: 1; width: 880px; max-width: 100%; padding: 0;
  background: rgba(255,255,255,.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.55); border-radius: 24px; overflow: hidden;
  box-shadow: 0 44px 100px rgba(3,14,38,.6), inset 0 1px 0 rgba(255,255,255,.7);
  display: grid; grid-template-columns: 1.05fr 1fr;
}
.login-hero {
  position: relative; padding: 44px 38px; color: #fff; overflow: hidden;
  background: linear-gradient(155deg, #0c2c61 0%, #1c5cab 62%, #2a78d6 100%);
  display: flex; flex-direction: column; gap: 13px;
}
.login-hero::before { content: ''; position: absolute; top: -35%; right: -28%; width: 360px; height: 360px; border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,.22), transparent 62%); }
.login-hero::after { content: ''; position: absolute; bottom: -30%; left: -20%; width: 300px; height: 300px; border-radius: 50%;
  background: radial-gradient(circle, rgba(74,163,255,.35), transparent 60%); }
.lh-logo { position: relative; width: 78px; height: 78px; border-radius: 20px; display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 14px 34px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.5); }
.lh-logo svg { width: 52px; height: 52px; }
.login-hero h1 { position: relative; font-size: 27px; font-weight: 800; margin-top: 8px; line-height: 1.2; }
.lh-sub { position: relative; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; opacity: .82; }
.lh-company { position: relative; font-size: 13.5px; opacity: .92; }
.lh-features { position: relative; list-style: none; margin-top: 10px; display: flex; flex-direction: column; gap: 10px; }
.lh-features li { font-size: 13px; opacity: .95; display: flex; gap: 8px; }
.lh-year { position: relative; margin-top: auto; align-self: flex-start; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.15); border: 1px solid rgba(255,255,255,.3); border-radius: 999px; padding: 6px 15px; }

.login-form { padding: 44px 42px; display: flex; flex-direction: column; justify-content: center; }
.login-form .fld { margin-bottom: 14px; }
.login-form .fld > span { color: #33475f; font-weight: 600; font-size: 13.5px; }
.login-form select, .login-form input[type=password] {
  border-radius: 12px; border: 1.7px solid #dfe6f0; padding: 11px 13px; font-size: 14px;
  box-shadow: inset 0 1px 3px rgba(15,50,105,.05); transition: border-color .15s, box-shadow .15s;
}
.login-form select:focus, .login-form input[type=password]:focus {
  border-color: #2f7fd6; box-shadow: 0 0 0 4px rgba(47,127,214,.16); outline: none;
}
.login-form .primary-btn.big { border-radius: 12px; padding: 13px; box-shadow: 0 12px 26px rgba(37,106,191,.42); transition: transform .15s, box-shadow .15s; }
.login-form .primary-btn.big:hover { transform: translateY(-1px); box-shadow: 0 16px 32px rgba(37,106,191,.52); }
.login-powered { text-align: center; margin-top: 20px; opacity: .85; }

@media (max-width: 760px) {
  .login-card.login-2col { grid-template-columns: 1fr; width: 440px; }
  .login-hero { padding: 30px 30px 24px; gap: 10px; }
  .lh-features { display: none; }
  .login-hero h1 { font-size: 23px; }
  .login-form { padding: 28px 28px 32px; }
}

/* ---------- v5.9: landing hero — โลโก้ใหญ่ขึ้น + จัดกึ่งกลางแนวตั้ง ---------- */
.login-hero { justify-content: center; gap: 16px; }
.lh-logo { width: 120px; height: 120px; border-radius: 28px; }
.lh-logo svg { width: 82px; height: 82px; }
.login-hero h1 { font-size: 30px; }

/* ---------- v6.0: ตารางเรียงลำดับได้ (คลิกหัวคอลัมน์) ---------- */
.sortable-table th.sortable { cursor: pointer; user-select: none; position: relative; padding-right: 20px; transition: background .12s; }
.sortable-table th.sortable:hover { background: rgba(255,255,255,.12); }
.sortable-table th.sortable::after { content: '⇅'; position: absolute; right: 6px; opacity: .4; font-size: 11px; }
.sortable-table th.sortable.sort-asc::after { content: '▲'; opacity: 1; }
.sortable-table th.sortable.sort-desc::after { content: '▼'; opacity: 1; }

/* ============ Landing / Login v7 (ตาม reference ใหม่) ============ */
.login-wrap.login-v7 {
  height: 100vh; overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px;
  background: #1a49b0;   /* สีเรียบเดียวกับ body — ล็อกความสูงพอดีจอ ไม่เลื่อนขึ้นลง */
}
.login-v7 .login-orbs { display: none; }   /* ปิดออร์บที่ทำให้ขอบสีเพี้ยน */
.login-v7 .lv-shell {
  position: relative; z-index: 1; width: 1400px; max-width: 100%;
  display: grid; grid-template-columns: 1.12fr .9fr;
  border-radius: 28px; overflow: hidden; background: #fff;
  box-shadow: 0 54px 130px rgba(3,12,40,.62), 0 2px 0 rgba(255,255,255,.4) inset;
}

/* ---- ซ้าย: hero ---- */
.login-v7 .lv-hero {
  position: relative; overflow: hidden; color: #fff; padding: 46px 44px;
  display: flex; flex-direction: column; gap: 20px;
  background: linear-gradient(158deg, #123a86 0%, #1a49b0 58%, #2358e6 120%);
}
.login-v7 .lv-hero::before { content: ''; position: absolute; top: -30%; right: -22%; width: 380px; height: 380px;
  border-radius: 50%; background: radial-gradient(circle, rgba(120,170,255,.35), transparent 62%); }
.login-v7 .lv-hero::after { content: ''; position: absolute; bottom: -26%; left: -18%; width: 320px; height: 320px;
  border-radius: 50%; background: radial-gradient(circle, rgba(40,199,111,.22), transparent 60%); }
.login-v7 .lv-brand { position: relative; }
.login-v7 .lv-brand img { height: 34px; background: #fff; padding: 6px 12px; border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0,0,0,.22); }
.login-v7 .lv-head { position: relative; }
.login-v7 .lv-head h1 { font-size: 46px; line-height: 1.04; font-weight: 800; letter-spacing: -.5px;
  text-shadow: 0 4px 18px rgba(0,0,0,.28); }
.login-v7 .lv-en { margin-top: 8px; font-size: 15px; letter-spacing: .34em; font-weight: 600; color: #a9c6ff; }
.login-v7 .lv-tag { margin-top: 14px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,.9); }

.login-v7 .lv-features { position: relative; list-style: none; display: flex; flex-direction: column; gap: 13px; margin: 2px 0; }
.login-v7 .lv-features li { display: flex; gap: 13px; align-items: center; }
.login-v7 .lvf-ic { flex: none; width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center;
  font-size: 19px; box-shadow: 0 8px 18px rgba(0,0,0,.24), inset 0 1px 0 rgba(255,255,255,.35); }
.login-v7 .lvf-ic.i1 { background: linear-gradient(145deg,#3b74ff,#1f49d6); }
.login-v7 .lvf-ic.i2 { background: linear-gradient(145deg,#22c37a,#12965b); }
.login-v7 .lvf-ic.i3 { background: linear-gradient(145deg,#8a6bff,#5b3fe0); }
.login-v7 .lvf-ic.i4 { background: linear-gradient(145deg,#39a7ff,#1f7fe0); }
.login-v7 .lvf-tx { display: flex; flex-direction: column; }
.login-v7 .lvf-tx b { font-size: 15px; font-weight: 700; }
.login-v7 .lvf-tx small { font-size: 12.5px; color: rgba(255,255,255,.78); }

/* mini dashboard ประดับ */
.login-v7 .lv-deco { position: relative; border-radius: 16px; padding: 14px 16px;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(6px); box-shadow: 0 14px 34px rgba(0,0,0,.22); display: flex; flex-direction: column; gap: 10px; }
.login-v7 .lvd-head { display: flex; align-items: center; justify-content: space-between; font-size: 10.5px;
  letter-spacing: .16em; color: rgba(255,255,255,.75); font-weight: 700; }
.login-v7 .lvd-dot { width: 8px; height: 8px; border-radius: 50%; background: #28c76f; box-shadow: 0 0 0 4px rgba(40,199,111,.25); }
.login-v7 .lvd-spark { display: flex; align-items: flex-end; gap: 5px; height: 40px; }
.login-v7 .lvd-spark i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg,#7fe6b0,#28c76f); }
.login-v7 .lvd-spark i:nth-child(1){height:38%} .login-v7 .lvd-spark i:nth-child(2){height:58%}
.login-v7 .lvd-spark i:nth-child(3){height:44%} .login-v7 .lvd-spark i:nth-child(4){height:78%}
.login-v7 .lvd-spark i:nth-child(5){height:62%} .login-v7 .lvd-spark i:nth-child(6){height:90%}
.login-v7 .lvd-spark i:nth-child(7){height:72%}
.login-v7 .lvd-row { display: flex; align-items: flex-end; gap: 16px; }
.login-v7 .lvd-bars { flex: 1; display: flex; align-items: flex-end; gap: 6px; height: 34px; }
.login-v7 .lvd-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg,#8fb4ff,#3f74ff); }
.login-v7 .lvd-bars i:nth-child(1){height:50%} .login-v7 .lvd-bars i:nth-child(2){height:74%}
.login-v7 .lvd-bars i:nth-child(3){height:60%} .login-v7 .lvd-bars i:nth-child(4){height:96%}
.login-v7 .lvd-donut { width: 44px; height: 44px; border-radius: 50%;
  background: conic-gradient(#28c76f 0 38%, #3f74ff 38% 74%, #8a6bff 74% 100%); position: relative; }
.login-v7 .lvd-donut::after { content: ''; position: absolute; inset: 12px; border-radius: 50%; background: #163a8e; }

.login-v7 .lv-stats { position: relative; margin-top: auto; display: grid; grid-template-columns: repeat(4,1fr);
  gap: 6px; padding: 15px 8px; border-radius: 16px; background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18); }
.login-v7 .lv-stats > div { text-align: center; position: relative; }
.login-v7 .lv-stats > div + div::before { content: ''; position: absolute; left: 0; top: 12%; height: 76%;
  width: 1px; background: rgba(255,255,255,.16); }
.login-v7 .lv-stats b { display: block; font-size: 21px; font-weight: 800; }
.login-v7 .lv-stats span { font-size: 11.5px; color: rgba(255,255,255,.78); }

/* ---- ขวา: การ์ด login ---- */
.login-v7 .lv-login { background: #fbfcff; padding: 48px 60px 40px; display: flex; flex-direction: column; justify-content: center; }
.login-v7 .lv-badge { width: 124px; height: 124px; margin: 0 auto 20px; border-radius: 30px; overflow: hidden;
  box-shadow: 0 16px 34px rgba(21,51,150,.34), 0 0 0 6px rgba(43,92,240,.08); }
.login-v7 .lv-badge svg { width: 100%; height: 100%; display: block; }
.login-v7 .lv-badge img { width: 100%; height: 100%; display: block; object-fit: contain; }
.login-v7 .lv-badge { box-shadow: 0 22px 46px rgba(21,51,150,.32); border-radius: 30px; }
.login-v7 .lv-hero-img { padding: 0; position: relative; overflow: hidden; background: #0b2050; display: flex; }
.login-v7 .lv-hero-img img { width: 100%; height: auto; margin: auto; display: block; }   /* แสดงเต็มภาพ ไม่ครอป */
.login-v7 .lv-hero-img::before, .login-v7 .lv-hero-img::after { display: none; }
.login-v7 .lv-login h2 { text-align: center; font-size: 34px; font-weight: 800; color: #16233a; }
.login-v7 .lv-sub { text-align: center; font-size: 17px; color: #6b7a90; margin: 5px 0 4px; }
.login-v7 .lv-co { text-align: center; font-size: 16px; font-weight: 800; color: #1d5a9e; margin: 0 0 26px; }
.login-v7 .lv-login .fld { display: block; margin-bottom: 20px; }
.login-v7 .lv-login .fld > span { display: block; margin-bottom: 8px; color: #35455c; font-weight: 600; font-size: 17.5px; }
.login-v7 .lv-login select {
  width: 100%; border-radius: 13px; border: 1.7px solid #dde5f1; padding: 16px 16px; font-size: 17.5px; background: #fff;
  box-shadow: inset 0 1px 3px rgba(15,50,105,.05); transition: border-color .15s, box-shadow .15s;
}
.login-v7 .lv-login .fld select, .login-v7 .lv-login select, .login-v7 .lv-pass input { font-size: 17.5px !important; }   /* กันโดน .fld select (font:inherit) ทับ */
/* ช่องอีเมล — ขนาด/ความสูงเดียวกับช่องรหัสผ่านเป๊ะ */
.login-v7 .lv-login #loginEmail {
  width: 100%; border-radius: 13px; border: 1.7px solid #dde5f1; padding: 16px 16px; font-size: 17.5px !important; background: #fff;
  box-shadow: inset 0 1px 3px rgba(15,50,105,.05); transition: border-color .15s, box-shadow .15s;
}
.login-v7 .lv-login #loginEmail:focus { border-color: #2b5cf0; box-shadow: 0 0 0 4px rgba(43,92,240,.16); outline: none; }
.login-v7 .lv-pass { position: relative; display: flex; align-items: center; }
.login-v7 .lv-pass .lv-lock { position: absolute; left: 13px; font-size: 14px; opacity: .55; pointer-events: none; }
.login-v7 .lv-pass input {
  width: 100%; border-radius: 13px; border: 1.7px solid #dde5f1; padding: 16px 46px 16px 42px; font-size: 17.5px; background: #fff;
  box-shadow: inset 0 1px 3px rgba(15,50,105,.05); transition: border-color .15s, box-shadow .15s;
}
.login-v7 .lv-pass .lv-eye { position: absolute; right: 8px; background: none; border: none; cursor: pointer;
  font-size: 15px; opacity: .55; padding: 6px; border-radius: 8px; }
.login-v7 .lv-pass .lv-eye:hover { opacity: .9; background: #eef2f9; }
.login-v7 .lv-login select:focus, .login-v7 .lv-pass input:focus {
  border-color: #2b5cf0; box-shadow: 0 0 0 4px rgba(43,92,240,.16); outline: none;
}
.login-v7 .lv-row { display: flex; align-items: center; justify-content: space-between; margin: 2px 0 18px; font-size: 15.5px; }
.login-v7 .lv-remember { display: flex; align-items: center; gap: 9px; color: #4a5a72; cursor: pointer; }
.login-v7 .lv-remember input { width: 18px; height: 18px; accent-color: #2b5cf0; }
.login-v7 .lv-forgot { color: #2b5cf0; font-weight: 600; cursor: pointer; }
.login-v7 .lv-forgot:hover { text-decoration: underline; }
/* v22.76 "จดจำฉัน" (ซ้าย) กับ "ลืมรหัสผ่าน?" (ขวา) แถวเดียวกัน เหนือปุ่มเข้าสู่ระบบ */
.login-v7 .lv-remember-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.login-v7 .lv-remember-row .lv-forgot { margin: 0; flex-shrink: 0; white-space: nowrap; }
.login-v7 .lv-submit {
  width: 100%; border-radius: 13px; padding: 17px; font-size: 17px; font-weight: 700;
  background: linear-gradient(135deg, #2f66f2, #1c46d0); border: none; color: #fff;
  box-shadow: 0 14px 30px rgba(37,80,208,.42); transition: transform .15s, box-shadow .15s;
}
.login-v7 .lv-submit:hover { transform: translateY(-1px); box-shadow: 0 18px 38px rgba(37,80,208,.52); }
.login-v7 .lv-submit:disabled { opacity: .7; cursor: default; transform: none; }
.login-v7 .lv-or { display: flex; align-items: center; gap: 12px; margin: 20px 0 14px; color: #9aa7ba; font-size: 12px; }
.login-v7 .lv-or::before, .login-v7 .lv-or::after { content: ''; flex: 1; height: 1px; background: #e4e9f2; }
.login-v7 .lv-idash { text-align: center; }
.login-v7 .lv-idash img { height: 30px; padding: 8px 16px; border: 1.5px solid #e4e9f2; border-radius: 12px; background: #fff; }
.login-v7 .lv-secure { text-align: center; margin-top: 16px; font-size: 14px; color: #8a97ab; }

/* ===== หน้าแรก "วาว" (glossy / shine) ===== */
.login-v7 .lv-login { position: relative; overflow: hidden; }
.login-v7 .lv-login::before {                     /* กลอสด้านบนการ์ด */
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 150px; pointer-events: none; z-index: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,0));
}
.login-v7 .lv-login > * { position: relative; z-index: 1; }
/* โลโก้ iBud: วงแสงหมุนรอบ + ลอยเบา ๆ + ไฮไลต์กระจก */
.login-v7 .lv-badge { position: relative; background: #0b1a3d; overflow: hidden; animation: lvFloat 4.6s ease-in-out infinite;
  box-shadow: 0 22px 46px rgba(21,51,150,.42); }
.login-v7 .lv-badge img { object-fit: cover; transform: scale(1.18); }   /* ตัดพื้นขาวรอบไอคอนออก */
.login-v7 .lv-badge::before { content: ''; position: absolute; inset: -9px; border-radius: 30px; z-index: -1;
  background: conic-gradient(from 0deg, #3f74ff, #22d3ee, #8a6bff, #38bdf8, #3f74ff);
  filter: blur(13px); opacity: .8; animation: lvSpin 6s linear infinite; }
.login-v7 .lv-badge::after { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(135deg, rgba(255,255,255,.6) 0%, rgba(255,255,255,.06) 42%, transparent 62%); }
@keyframes lvSpin { to { transform: rotate(360deg); } }
@keyframes lvFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
/* ปุ่มเข้าระบบมีประกายกวาด */
.login-v7 .lv-submit { position: relative; overflow: hidden; }
.login-v7 .lv-submit::after { content: ''; position: absolute; top: 0; left: -120%; width: 55%; height: 100%;
  background: linear-gradient(100deg, transparent, rgba(255,255,255,.55), transparent); transform: skewX(-18deg);
  animation: lvBtnShine 3.6s ease-in-out infinite; }
@keyframes lvBtnShine { 0% { left: -120%; } 45% { left: 135%; } 100% { left: 135%; } }
/* hero มีแสงวาวเลื่อนผ่าน */
.login-v7 .lv-hero-img::after { display: block !important; content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.22) 50%, transparent 58%);
  background-size: 260% 100%; animation: lvHeroShine 7.5s ease-in-out infinite; }
@keyframes lvHeroShine { 0% { background-position: 160% 0; } 100% { background-position: -60% 0; } }
/* ออร์บพื้นหลังสว่างขึ้น */
.login-orbs span { opacity: .55; filter: blur(64px); }
/* แบรนด์ iBud บน hero (ไม่มีกล่องขาว) */
.login-v7 .lv-brand { display: flex; align-items: center; gap: 11px; }
.login-v7 .lv-brand-ic { width: 46px; height: 46px; border-radius: 13px; overflow: hidden; background: #0b1a3d; flex: none; box-shadow: 0 8px 20px rgba(0,0,0,.32); }
.login-v7 .lv-brand-ic img { width: 100% !important; height: 100% !important; padding: 0 !important; background: none !important; border-radius: 0 !important; object-fit: cover; transform: scale(1.16); display: block; }
.login-v7 .lv-brand-tx { display: flex; flex-direction: column; line-height: 1.12; }
.login-v7 .lv-brand-tx b { font-size: 21px; font-weight: 800; color: #fff; }
.login-v7 .lv-brand-tx small { font-size: 10px; letter-spacing: .16em; color: #a9c6ff; text-transform: uppercase; }

@media (max-width: 820px) {
  .login-v7 .lv-shell { grid-template-columns: 1fr; width: 460px; }
  .login-v7 .lv-hero { padding: 34px 30px; gap: 16px; }
  .login-v7 .lv-head h1 { font-size: 36px; }
  .login-v7 .lv-deco { display: none; }
  .login-v7 .lv-login { padding: 30px 28px 28px; }
}

/* ผู้บริหาร: ตัวเลือกดูแยกฝ่ายย่อย (drill by sub-unit) */
.mgr-view { position: sticky; top: var(--topbar-h, 86px); z-index: 20; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; padding: 12px 16px; background: linear-gradient(135deg,#eef4ff,#f6f9ff); border: 1px solid #dbe6fb; border-radius: 14px; }
.mgr-view-lb { font-weight: 700; color: #1c3d6e; font-size: 14px; }
.mgr-view-sel { flex: 1; min-width: 240px; max-width: 480px; border-radius: 10px; border: 1.7px solid #c9d8f0; padding: 9px 12px; font-size: 14px; background: #fff; font-family: inherit; }
.mgr-view-sel:focus { border-color: #2b5cf0; box-shadow: 0 0 0 3px rgba(43,92,240,.15); outline: none; }

/* ===== Landing v7: เต็มขอบจอ (ไม่ย่อ) ===== */
.login-v7 .lv-shell { transform: scale(0.8); transform-origin: center center; }   /* ลดหน้า landing 20% คงสัดส่วน */

/* ===== กราฟ: toolbar ขยาย(popup)/บันทึกภาพ ===== */
.chart-save{position:absolute;top:14px;right:16px;z-index:4;width:30px;height:30px;border:1px solid #e0e6f0;background:#fff;border-radius:8px;cursor:pointer;font-size:14px;line-height:1;display:grid;place-items:center;padding:0;box-shadow:0 2px 6px rgba(16,38,76,.12);color:#3560c9;opacity:.7;transition:opacity .15s,background .15s,border-color .15s}
.card:hover .chart-save,.chart-save:hover{opacity:1}
.chart-save:hover{background:#eef2f9;border-color:#2b5cf0}
.modal.modal-chart{width:min(94vw,1000px);max-width:none}
.chart-modal{width:100%}
.chart-modal svg{width:100%!important;height:auto}
.chart-modal .chart-legend,.chart-modal .donut-legend{margin-top:10px}

/* ===== 3D depth layer — ใช้กับทุกแดชบอร์ด (การ์ดลอย เงาหลายชั้น ไฮไลต์) ===== */
.card{
  background:linear-gradient(165deg,#ffffff,#f4f8fd) !important;
  border:1px solid rgba(255,255,255,.75) !important;
  box-shadow:0 1px 2px rgba(16,38,76,.05),0 6px 16px rgba(16,38,76,.08),0 16px 34px rgba(16,38,76,.09),inset 0 1px 0 rgba(255,255,255,.9) !important;
}
.kpi,.kpi-c{
  background:linear-gradient(160deg,#ffffff,#f3f7fd) !important;
  box-shadow:0 2px 4px rgba(16,38,76,.08),0 12px 26px rgba(16,38,76,.12),inset 0 1px 0 #fff !important;
  transition:transform .18s ease,box-shadow .18s ease;
}
.kpi:hover,.kpi-c:hover{transform:translateY(-3px)}
.kpi-tint-blue {box-shadow:0 2px 4px rgba(43,92,240,.12),0 14px 30px rgba(43,92,240,.20),inset 0 1px 0 #fff !important}
.kpi-tint-teal {box-shadow:0 2px 4px rgba(13,148,136,.12),0 14px 30px rgba(13,148,136,.20),inset 0 1px 0 #fff !important}
.kpi-tint-green{box-shadow:0 2px 4px rgba(18,150,91,.12),0 14px 30px rgba(18,150,91,.20),inset 0 1px 0 #fff !important}
.kpi-tint-amber{box-shadow:0 2px 4px rgba(224,145,42,.14),0 14px 30px rgba(224,145,42,.22),inset 0 1px 0 #fff !important}
.kpi-ic{box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 8px 16px rgba(0,0,0,.15) !important}
.exec-hero{box-shadow:0 2px 4px rgba(11,31,77,.25),0 18px 40px rgba(11,31,77,.32),0 40px 80px rgba(11,31,77,.20),inset 0 1px 0 rgba(255,255,255,.22) !important}
.eh-stat{box-shadow:inset 0 1px 0 rgba(255,255,255,.20),0 6px 14px rgba(0,0,0,.16) !important;background:rgba(255,255,255,.10) !important}
.side-card{
  background:linear-gradient(160deg,#ffffff,#f4f8fd) !important;
  box-shadow:0 2px 4px rgba(16,38,76,.06),0 12px 26px rgba(16,38,76,.10),inset 0 1px 0 #fff !important;
}
.side-card:hover{transform:translateY(-3px) !important;box-shadow:0 4px 8px rgba(16,38,76,.08),0 20px 40px rgba(16,38,76,.17),inset 0 1px 0 #fff !important}
.card svg{filter:drop-shadow(0 6px 12px rgba(16,38,76,.13))}
.chart-save{filter:none}

/* ===== Manager dashboard: KPI 5 ช่อง + auto-insights ===== */
.kpi-grid-5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:13px;margin-bottom:16px}
@media (max-width:1100px){.kpi-grid-5{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.kpi-grid-5{grid-template-columns:1fr}}
.ins{display:flex;flex-direction:column;gap:10px}
.insit{display:flex;gap:11px;padding:11px 12px;border-radius:12px;background:#f7f9fd;border:1px solid #e6ecf5;border-left:4px solid #2b5cf0}
.insit .ic{font-size:18px;flex:none}
.insit b{font-size:13px;color:#16233a} .insit p{font-size:12px;color:#6b7a90;margin-top:2px}
.insit.red{border-left-color:#d13b3b;background:#fdf4f4}
.insit.amber{border-left-color:#e0912a;background:#fdf8f0}
.insit.blue{border-left-color:#2b5cf0;background:#f4f7fe}
.insit.violet{border-left-color:#7b57ff;background:#f7f5fe}

/* ===== ม่านตอนเปิดแอป: กันกดบนข้อมูลเก่า จนกว่าซิงค์ Supabase เสร็จ ===== */
.boot-sync{position:fixed;inset:0;z-index:99999;display:flex;align-items:center;justify-content:center;
  background:linear-gradient(160deg,#071633,#0b2050 55%,#0e2c6e);}
.bs-card{background:#fff;border-radius:50%;padding:18px;box-shadow:0 30px 80px rgba(0,0,0,.4);display:grid;place-items:center}
.bs-card b{font-size:16px;color:#16233a}
.bs-card small{font-size:12px;color:#6b7a90}
.bs-spin{width:34px;height:34px;border-radius:50%;border:4px solid #e3ebfa;border-top-color:#2b5cf0;animation:bsr 0.8s linear infinite}
@keyframes bsr{to{transform:rotate(360deg)}}

/* ฟอร์มเพิ่ม GL (แถวงบ) — 8 ฟิลด์ */
.glrow-form{display:grid;grid-template-columns:repeat(4,1fr);gap:14px 14px}
.glrow-form label{display:flex;flex-direction:column;justify-content:flex-end;font-size:13px;font-weight:600;color:#33425c;gap:5px}
.glrow-form label>span,.glrow-form label{line-height:1.35}
.glrow-form input{font:inherit;font-size:14px;font-weight:400;padding:9px 11px;border:1.5px solid #cdd6e6;border-radius:8px;color:#16233a}
.glrow-form input::placeholder{color:#9aa6bb;font-weight:400}
.glrow-form input:focus{outline:none;border-color:#2b5cf0;box-shadow:0 0 0 3px rgba(43,92,240,.14)}
@media(max-width:860px){.glrow-form{grid-template-columns:repeat(2,1fr)}}
.glrow-form label.opt{opacity:1;color:#54617a}
.glrow-form label small{color:#b3760a;font-weight:700}
/* เทียบเวอร์ชันงบ — สรุปหัว modal */
.cmp-sum{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:14px}
.cmp-sum>div{background:#f5f8fd;border:1px solid var(--border);border-radius:11px;padding:9px 16px;min-width:150px}
.cmp-sum span{display:block;font-size:11.5px;color:var(--muted);font-weight:600}
.cmp-sum b{font-size:18px;font-weight:800;color:var(--navy);font-variant-numeric:tabular-nums}
.cmp-arrow{background:none !important;border:none !important;font-size:20px;color:var(--muted);min-width:0 !important;padding:0 !important}
.cmp-dv b{color:var(--ink)} .cmp-dv.up b{color:var(--up)} .cmp-dv.down b{color:var(--down)}
.cmp-ver-sel{max-width:170px;font-weight:600}
/* รหัสกลุ่มบัญชี (pill เล็กหน้าชื่อกลุ่ม) */
.grp-code{display:inline-block;min-width:24px;text-align:center;font-size:11.5px;font-weight:800;font-variant-numeric:tabular-nums;color:var(--navy);background:#eaf1fb;border:1px solid #cfe0f5;border-radius:6px;padding:1px 6px;margin-right:7px}
/* tooltip กลุ่มบัญชี (CSS ล้วน — โผล่เมื่อ hover) */
.grp-cell{position:relative;cursor:help}
.grp-cell::after{content:attr(data-tip);position:absolute;left:12px;bottom:100%;margin-bottom:7px;z-index:50;
  background:#0d366b;color:#fff;font-size:12.5px;font-weight:600;line-height:1.4;white-space:normal;width:max-content;max-width:340px;
  padding:8px 12px;border-radius:9px;box-shadow:0 8px 24px rgba(11,31,77,.28);
  opacity:0;transform:translateY(4px);pointer-events:none;transition:opacity .14s ease,transform .14s ease}
.grp-cell::before{content:"";position:absolute;left:26px;bottom:100%;margin-bottom:1px;z-index:51;
  border:6px solid transparent;border-top-color:#0d366b;opacity:0;transition:opacity .14s ease}
.grp-cell:hover::after,.grp-cell:hover::before{opacity:1;transform:translateY(0)}
/* ไอคอนบทบาท (SVG badge) — กรอก=น้ำเงิน · อนุมัติ=เขียว · สังกัด=ส้ม · บริษัท=ม่วง */
.ricon{display:inline-flex;align-items:center;justify-content:center;width:22px;height:22px;border-radius:7px;flex-shrink:0;box-shadow:inset 0 1px 0 rgba(255,255,255,.25),0 1px 2px rgba(13,54,107,.18)}
.ricon svg{width:15px;height:15px;display:block}
.ri-fill{background:linear-gradient(135deg,#22c55e,#16a34a)}   /* ผู้กรอกงบประมาณ = เขียว */
.ri-div{background:linear-gradient(135deg,#3b82f6,#2563eb)}    /* ผู้ตรวจสอบงบประมาณ = น้ำเงิน */
.ri-area{background:linear-gradient(135deg,#f59e0b,#d97706)}   /* ผู้รีวิวงบประมาณ = ส้ม */
.ri-co{background:linear-gradient(135deg,#8b5cf6,#7c3aed)}     /* ผู้ดูภาพรวมบริษัท = ม่วง */
/* หน้าจัดการผู้ใช้ (Admin) */
.stats-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}
.stats-row .stat{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:13px 16px}
.stats-row .stat b{display:block;font-size:26px;font-weight:800;color:var(--navy);line-height:1.1;font-variant-numeric:tabular-nums}
.stats-row .stat span{font-size:12.5px;color:var(--ink-2);font-weight:600}
/* แถบเครื่องมือ: ค้นหา + เพิ่มผู้ใช้ */
.ud-bar{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 14px}
.ud-bar input{font:inherit;font-size:14.5px;padding:10px 14px;border:1.5px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--ink)}
.ud-bar #udSearch{flex:1;min-width:200px}
.ud-bar #newUserEmail{width:220px}
.ud-bar input:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,106,191,.14)}
.ud-bar #udSort{font:inherit;font-size:13.5px;font-weight:600;padding:10px 12px;border:1.5px solid var(--border-strong);border-radius:11px;background:var(--surface);color:var(--ink);cursor:pointer}
.ud-bar #udSort:focus{outline:none;border-color:var(--blue)}
.ud-bar .ud-sep{width:1px;align-self:stretch;background:var(--border);margin:2px 2px}
.ud-bar .count{font-size:13px;color:var(--muted);font-weight:600;white-space:nowrap;margin-left:auto}
@media(max-width:720px){.ud-bar .ud-sep{display:none}.ud-bar #udSearch,.ud-bar #newUserEmail{flex:1 1 100%}}
/* v18.3 — รายการผู้ใช้แบบ list บาง ตัวเล็ก ไม่มีไอคอน (กดแล้วเด้ง popup) */
.ud-bar2{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:0 0 10px}
.ud-bar2 #udSearch{flex:1;min-width:220px;font:inherit;font-size:13.5px;padding:9px 13px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--ink)}
.ud-bar2 #udSort,.ud-bar2 #udDept,.ud-bar2 #udRole{font:inherit;font-size:13px;font-weight:600;padding:9px 12px;border:1px solid var(--border-strong);border-radius:10px;background:var(--surface);color:var(--ink-2);cursor:pointer}
.ud-bar2 #udDept{max-width:260px}
.ud-bar2 input:focus,.ud-bar2 select:focus{outline:none;border-color:var(--blue)}
.ud-bar2 .count{font-size:12.5px;color:var(--muted);font-weight:600;white-space:nowrap;margin-left:auto}
.ud-add{display:flex;gap:10px;align-items:center;flex-wrap:wrap;padding:12px 14px;margin:0 0 14px;background:#f5f8fd;border:1px solid var(--border);border-radius:12px}
.ud-add>b{font-size:13px;color:var(--ink-2)}
.ud-add #newUserEmail{flex:1;min-width:200px;font:inherit;font-size:13.5px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:10px;background:#fff}
.ud-add #newUserRole{font:inherit;font-size:13px;padding:9px 12px;border:1px solid var(--border-strong);border-radius:10px;background:#fff;max-width:230px}
.ud-add input:focus,.ud-add select:focus{outline:none;border-color:var(--blue)}
.ur-list{display:flex;flex-direction:column;gap:5px}
.ur2{display:flex;align-items:center;gap:12px;padding:9px 14px;background:var(--surface);border:1px solid var(--border);border-radius:10px;cursor:pointer;transition:border-color .12s,background .12s}
.ur2:hover,.ur2:focus{outline:none;border-color:var(--blue);background:#f6f9ff}
.ur2-em{font-size:13px;font-weight:600;color:var(--ink);min-width:220px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur2-sum{flex:1;font-size:12px;color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur2-badge{font-size:11.5px;font-weight:800;background:#eef2f8;color:var(--ink-2);min-width:22px;height:22px;padding:0 7px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ur2-go{font-size:12px;font-weight:700;color:var(--blue);flex-shrink:0}
/* popup จัดการผู้ใช้ */
.umodal-ov{position:fixed;inset:0;z-index:120;background:rgba(15,25,50,.42);display:flex;align-items:center;justify-content:center;padding:20px;animation:umfade .12s ease}
@keyframes umfade{from{opacity:0}to{opacity:1}}
.umodal{width:460px;max-width:100%;max-height:88vh;display:flex;flex-direction:column;background:#fff;border-radius:16px;box-shadow:0 24px 60px rgba(15,25,50,.32);overflow:hidden}
.umodal-h{display:flex;align-items:center;gap:12px;padding:16px 18px;border-bottom:1px solid var(--border);background:#f5f8fd}
.umodal-av{width:40px;height:40px;border-radius:50%;background:var(--blue);color:#fff;display:flex;align-items:center;justify-content:center;font-size:17px;font-weight:800;flex-shrink:0}
.umodal-hi{min-width:0;flex:1}
.umodal-em{font-size:14.5px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umodal-sub{font-size:12px;color:var(--muted)}
.umodal-x{background:none;border:none;font-size:16px;color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px}
.umodal-x:hover{background:#e6ecf5;color:var(--ink)}
.umodal-b{padding:14px 18px;overflow-y:auto}
.umodal-sec{font-size:12px;font-weight:800;color:var(--ink-2);margin:4px 0 8px;letter-spacing:.01em}
.umodal-roles{display:flex;flex-direction:column;gap:6px;margin-bottom:16px}
.umr-row{display:flex;align-items:center;gap:10px;padding:8px 10px;background:#f6f8fc;border:1px solid var(--border);border-radius:9px}
.umr-tag{font-size:10.5px;font-weight:800;padding:2px 9px;border-radius:999px;flex-shrink:0}
.umr-tag.fill{background:#eaf1fe;color:#1e40af} .umr-tag.div{background:#e8f6ec;color:#166534} .umr-tag.area{background:#fdf3e2;color:#92600a} .umr-tag.co{background:#f2ecfd;color:#5b21b6}
.umr-name{flex:1;font-size:13px;font-weight:600;color:var(--ink);min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.umr-name em{font-style:normal;opacity:.6;font-weight:800}
.umr-del{background:none;border:none;color:#b7c0d0;font-size:13px;cursor:pointer;padding:2px 7px;border-radius:6px;flex-shrink:0}
.umr-del:hover{background:var(--crit-bg);color:var(--up)}
.umodal-addsel{width:100%;font:inherit;font-size:13.5px;padding:10px 12px;border:1.5px solid var(--border-strong);border-radius:10px;background:#fff;cursor:pointer}
.umodal-addsel:focus{outline:none;border-color:var(--blue)}
.umodal-f{display:flex;gap:8px;align-items:center;padding:12px 18px;border-top:1px solid var(--border);background:#fafbfe}
.umodal-f .primary-btn{margin-left:auto}
/* (เดิม) รายการผู้ใช้ — แถวกะทัดรัด กดขยาย */
.ur-list-old{display:flex;flex-direction:column;gap:8px}
.ur{background:var(--surface);border:1px solid var(--border);border-radius:12px;overflow:hidden;transition:border-color .12s,box-shadow .12s}
.ur.open{border-color:var(--border-strong);box-shadow:0 4px 14px rgba(13,54,107,.09)}
.ur-head{display:flex;align-items:center;gap:12px;padding:10px 14px;cursor:pointer}
.ur-head:hover{background:#f6f9fe}
.ur .av{width:34px;height:34px;border-radius:50%;background:linear-gradient(135deg,#2f7fd6,#0c2c61);color:#fff;display:flex;align-items:center;justify-content:center;font-size:15px;font-weight:800;flex-shrink:0}
.ur-main{min-width:0;flex:1;display:flex;flex-direction:column;gap:3px}
.ur-em{font-size:14px;font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ur-sum{display:flex;gap:6px;flex-wrap:wrap}
.rt{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:3px 10px 3px 4px;border-radius:999px;white-space:nowrap}
.rt .ricon{width:18px;height:18px;border-radius:6px}
.rt .ricon svg{width:12px;height:12px}
.rt.none{padding:3px 10px}
.rt.fill{background:#eaf1fe;color:#2563eb} .rt.div{background:#e8f6ec;color:#1c7c33} .rt.area{background:#fdf3e2;color:#b3760a} .rt.co{background:#f2ecfd;color:#6d28d9} .rt.none{background:var(--bg);color:var(--muted);font-weight:600}
.ur-badge{font-size:12px;font-weight:800;background:var(--navy);color:#fff;min-width:24px;height:24px;padding:0 6px;border-radius:999px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.ur-caret{color:#9aa6bb;font-size:12px;transition:transform .15s;flex-shrink:0}
.ur.open .ur-caret{transform:rotate(180deg)}
.ur-body{display:none;padding:2px 14px 14px;border-top:1px solid var(--border)}
.ur.open .ur-body{display:block}
.ur-roles{display:flex;flex-wrap:wrap;gap:7px;padding:12px 0}
.rp{display:inline-flex;align-items:center;gap:7px;font-size:12.5px;font-weight:600;padding:4px 6px 4px 5px;border-radius:999px;border:1px solid transparent;max-width:100%}
.rp .ricon{width:20px;height:20px}
.rp .rp-nm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rp .rp-nm em{font-style:normal;opacity:.65;font-weight:800;font-variant-numeric:tabular-nums}
.rp.fill{background:#eaf1fe;color:#1e40af;border-color:#cfe0fe} .rp.div{background:#e8f6ec;color:#166534;border-color:#c7ead0} .rp.area{background:#fdf3e2;color:#92600a;border-color:#f0dcb8} .rp.co{background:#f2ecfd;color:#5b21b6;border-color:#e2d4fb}
.rp-x{background:rgba(0,0,0,.06);border:none;color:inherit;opacity:.65;font-size:12px;line-height:1;width:18px;height:18px;border-radius:50%;cursor:pointer;flex-shrink:0}
.rp-x:hover{opacity:1;background:var(--up);color:#fff}
.ur-actions{display:flex;gap:8px;flex-wrap:wrap;align-items:center;padding-top:10px;border-top:1px dashed var(--border)}
.ud-addsel{font:inherit;font-size:12.5px;padding:7px 10px;border:1.5px solid var(--border-strong);border-radius:9px;background:#fff;flex:1;min-width:170px}
/* หน้าเลือกบทบาท (login ด้วยอีเมลที่มีหลายสิทธิ์) */
.pk-list{display:flex;flex-direction:column;gap:8px;max-height:52vh;overflow-y:auto;margin:14px 0 6px;padding-right:4px}
.pk-group{font-size:14px;font-weight:800;color:#2b3654;margin:10px 0 2px;padding-bottom:5px;border-bottom:2px solid #e4ebf5}
.pk-group:first-child{margin-top:0}
.pk-item{display:flex;align-items:center;gap:8px;flex-wrap:wrap;text-align:left;font:inherit;font-size:14.5px;color:#1c2b45;
  background:#fff;border:1.5px solid #cdd8ea;border-radius:12px;padding:11px 14px;cursor:pointer;transition:all .15s ease}
.pk-item:hover{border-color:#2563eb;background:#eef4fc;transform:translateY(-1px);box-shadow:0 4px 12px rgba(37,99,235,.14)}
.pk-item small{color:#8a97ab;font-size:12px}
.pk-chip{margin-left:auto;font-size:11.5px;font-weight:700;padding:3px 10px;border-radius:999px;background:#eef2f8;color:#5a6b85;white-space:nowrap}
.pk-chip.pk-ok{background:#e7f6ea;color:#1c7c33}
.pk-chip.pk-warn{background:#fdeeea;color:#c0392b}
.pk-chip.pk-lock{background:#f0efec;color:#6b6a66}
.lv-alt-toggle{display:block;text-align:center;margin-top:14px;cursor:pointer;font-size:14px}
#unitLoginBox{margin-top:12px;padding-top:12px;border-top:1px dashed #cdd8ea}
/* แถบตีกลับหลายแผนก + checkbox เลือกแผนก (หน้าตรวจสอบของแอดมิน) */
.bulk-bar{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:10px 14px;border-bottom:1px solid var(--border);background:#fbfcfe;font-size:13px;max-width:100%}
.bulk-bar>b{flex:0 0 auto}
.bulk-bar select{font:inherit;font-size:12.5px;padding:5px 8px;border:1px solid var(--border-strong);border-radius:8px;flex:1 1 180px;min-width:130px;max-width:260px}
/* หัวเพจ: ปุ่มกลับชิดซ้าย · ปุ่ม action ดันไปชิดขวา */
.page-actions .pa-right{margin-left:auto;display:flex;gap:8px;flex-wrap:wrap}
/* สถานะแบบไอคอนแม่กุญแจ (คอลัมน์แคบ กันตารางล้น) */
.lock-ic{display:inline-flex;align-items:center;justify-content:center;line-height:0}
.lock-ic svg{display:block}
.lock-ic.is-locked{opacity:.85}
.st-lock-col{text-align:center;width:48px}
.lock-ic-btn{background:none;border:0;cursor:pointer;padding:5px;border-radius:8px;line-height:0;transition:background .12s}
.lock-ic-btn:hover{background:rgba(15,30,60,.08)}
.lock-ic-btn:active{transform:scale(.92)}
.bulk-bar .danger-btn:disabled{opacity:.45;cursor:not-allowed}
/* ปุ่มจัดการรายแผนก — ไอคอนกะทัดรัด กันล้นเพจ */
.td-actions{white-space:nowrap;width:1%}
.act-btns{display:inline-flex;gap:5px;align-items:center}
.act-ic{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:8px;
  border:1px solid var(--border-strong);background:#fff;color:var(--ink-2);font-size:14px;text-decoration:none;cursor:pointer;transition:all .12s}
.act-ic:hover{border-color:var(--blue);color:var(--blue);background:#eff5ff}
.act-rev:hover{border-color:var(--up);color:var(--up);background:#fdeeea}
.act-lock{color:#2e7a44} .act-lock:hover{border-color:#2e7a44;color:#2e7a44;background:#f2faf3}
.chk-col{width:34px;text-align:center !important}
.chk-col input{width:15px;height:15px;cursor:pointer;accent-color:#2563eb}
.btn-lockback{border-color:#b7d3a8 !important;color:#2e7a44 !important}
.btn-lockback:hover{background:#f2faf3 !important}
/* สกุลเงิน + ธง ในตาราง Exchange Rate */
.cur-cell{display:inline-flex;align-items:center;gap:8px}
.cur-cell b{font-size:14px;color:var(--ink);letter-spacing:.02em}

/* ===== หน้า ต้นทุนต่อหน่วย (unit cost) ===== */
.uc-table td.uc-ton{color:#3556a8;background:#fafcff}
.uc-table tr.uc-cat td{background:#fff}                         /* ⬜ ขาว = แถวกรอก */
.uc-table tr.uc-cat td.uc-item{padding-left:24px;color:#42526b;font-size:12.5px}
.uc-table tr.uc-cat td.uc-white{background:#fff}
.uc-table tr.uc-sum td{background:#fff7cc;font-size:13px;border-top:1px solid #ecdd97;font-weight:600}   /* 🟨 เหลือง = รวมหมวด */
.uc-table tr.uc-grand td{background:#fbe0ec;border-top:2px solid #eeaecb;border-bottom:2px solid #eeaecb;font-size:13.5px}  /* 🟥 ชมพู = รวมใหญ่ */
.uc-table tr.uc-sum td small,.uc-table tr.uc-grand td small{font-size:11px;font-weight:400}
.uc-white{background:#fff}
.uc-amt{font:inherit;font-size:13px;text-align:right;width:100%;max-width:170px;padding:6px 8px;border:1px solid #cdd6e6;border-radius:7px;background:#fff}
.uc-amt:focus{outline:none;border-color:#2b5cf0;box-shadow:0 0 0 3px rgba(43,92,240,.12)}
.uc-vol{font:inherit;font-size:13px;text-align:right;width:130px;padding:6px 8px;border:1px solid #d7deea;border-radius:8px}
.uc-vol:focus{outline:none;border-color:#2b5cf0;box-shadow:0 0 0 3px rgba(43,92,240,.12)}

/* ===== FP&A insights (Executive Dashboard) ===== */
.fpa-list{display:flex;flex-direction:column;gap:8px}
.fpa-ins{display:flex;gap:10px;align-items:flex-start;padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.55;border:1px solid var(--line,#e2e8f2)}
.fpa-ins .fi-ic{flex-shrink:0;font-size:15px}
.fpa-hi{background:#fdf0ef;border-color:#f2c4c0}
.fpa-med{background:#fff8ec;border-color:#f0dcae}
.fpa-ok{background:#eefaf1;border-color:#bfe6cb}
.fpa-info{background:#eef4fd;border-color:#c5d8f5}

/* แถบสถานะรอบปี — หน้าต้นทุนต่อหน่วย */
.uc-round{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:600;padding:6px 14px;border-radius:20px}
.uc-round-open{background:#e6f7ec;color:#1e7d46;border:1px solid #b6e2c6}
.uc-round-lock{background:#eef1f6;color:#5a6b85;border:1px solid #d3dae7}
.uc-round-rv{background:#fff3e0;color:#a05a00;border:1px solid #f0cf94}
.uc-auto{color:#1e7d46;font-weight:600}
.uc-table tr.uc-auto-row td{background:#f3faf5}
.uc-submit-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;background:#eef4fd;border:1px solid #c5d8f5;border-radius:10px;padding:10px 14px;margin-bottom:14px;font-size:13px}
.uc-sub-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid #eef1f6;font-size:13px}
.uc-sub-row:last-child{border-bottom:none}
.uc-st{display:inline-block;font-size:11px;font-weight:600;padding:1px 7px;border-radius:20px;white-space:nowrap;vertical-align:middle}
.uc-st-ok{background:#e6f7ec;color:#1e7d46;border:1px solid #b6e2c6}
.uc-st-wait{background:#fff3d6;color:#8a5a00;border:1px solid #f0d38a}
.uc-hint-calc{background:#eef4fd;border:1px solid #c5d8f5;border-radius:9px;padding:9px 13px;margin-bottom:12px;font-size:12.5px;color:#274b7a;line-height:1.6}
/* ---- คำร้องปรับงบ ---- */
.req-form{display:flex;flex-direction:column;gap:16px}
.req-form .fld{display:flex;flex-direction:column;gap:5px;font-size:13.5px}
.req-form .fld>span{font-weight:600;color:#48506a}
.req-form select,.req-form input,.req-form textarea{padding:10px 12px;border:1.5px solid #d5dbe8;border-radius:8px;font:inherit;font-size:14px;background:#fff}
.req-form select:focus,.req-form input:focus,.req-form textarea:focus{border-color:var(--blue);outline:none;box-shadow:0 0 0 3px rgba(37,106,191,.14)}
/* กล่องแยกส่วนกรอกให้ชัดเจน */
.req-section{border:1.5px solid #e1e6f0;border-radius:12px;padding:14px 16px 16px;background:#fbfcfe;display:flex;flex-direction:column;gap:12px}
.req-section-h{font-weight:800;font-size:14px;color:#2b3654;letter-spacing:.01em;padding-bottom:9px;border-bottom:2px solid #eceff5}
/* ปุ่มส่ง — อยู่กลาง พอดีกับข้อความ */
.req-submit-wrap{display:flex;justify-content:center;padding-top:2px}
.req-submit-wrap .primary-btn{width:auto;padding:12px 34px;font-size:14.5px;font-weight:700}
.req-req{color:#c0322b}
.req-grid3{display:grid;grid-template-columns:2fr 1fr 1fr;gap:10px}
.req-tr{display:grid;grid-template-columns:1fr auto 1fr;gap:10px;align-items:center;margin-bottom:8px}
.req-tr-side{background:#f7f9fe;border:1px solid #e6e9f0;border-radius:10px;padding:10px;display:flex;flex-direction:column;gap:8px}
.req-tr-h{font-weight:700;font-size:12.5px;color:#48506a}
.req-tr-arrow{font-size:22px;color:#2563eb;text-align:center}
.req-card{border:1px solid #e6e9f0;border-radius:12px;padding:12px 14px;margin-bottom:10px;background:#fff}
.req-top{display:flex;justify-content:space-between;gap:10px;align-items:flex-start}
.req-items{margin:8px 0;display:flex;flex-direction:column;gap:4px}
.req-item{display:flex;justify-content:space-between;gap:10px;background:#f7f9fe;border-radius:7px;padding:5px 10px;font-size:13px}
.req-plus{color:#1e7d46;font-weight:700}
.req-minus{color:#c0322b;font-weight:700}
.req-reason{font-size:12.5px;color:#3a4256;margin-top:4px}
/* ===== โหมดนำเสนอผู้บริหาร (full-screen) ===== */
.present-btn{border:none;border-radius:9px;padding:8px 15px;cursor:pointer;font:inherit;font-size:13px;font-weight:700;color:#fff;background:linear-gradient(120deg,#7c3aed,#2563eb);box-shadow:0 3px 10px rgba(124,58,237,.3)}
.present-btn:hover{filter:brightness(1.08)}
.ps-overlay{position:fixed;inset:0;z-index:9999;background:radial-gradient(120% 120% at 20% 0%,#15306b 0%,#0b1a3d 55%,#060f26 100%);color:#eaf1ff;display:flex;flex-direction:column;font-family:"IBM Plex Sans Thai","Segoe UI",Tahoma,sans-serif;animation:psFade .25s ease}
@keyframes psFade{from{opacity:0}to{opacity:1}}
.ps-stage{flex:1;display:flex;align-items:center;justify-content:center;padding:4vh 6vw;cursor:pointer;overflow:hidden}
.ps-slide{width:100%;max-width:1100px;text-align:center;animation:psSlide .35s cubic-bezier(.2,.7,.3,1)}
@keyframes psSlide{from{opacity:0;transform:translateY(18px)}to{opacity:1;transform:none}}
.ps-kick{font-size:clamp(15px,2.4vw,26px);font-weight:600;color:#8fb4ff;letter-spacing:.02em;margin-bottom:2.5vh}
.ps-big{font-size:clamp(44px,9vw,120px);font-weight:800;line-height:1.02;letter-spacing:-.02em;margin:1vh 0}
.ps-big span{font-size:.32em;font-weight:600;color:#9fb3d6}
.ps-big.ps-good{color:#4ade80}.ps-big.ps-bad{color:#f87171}
.ps-good{color:#4ade80}.ps-bad{color:#f87171}
.ps-num{font-size:clamp(30px,5vw,64px);font-weight:800}
.ps-num2{font-size:clamp(28px,4.6vw,56px);font-weight:800}
.ps-num2 small,.ps-big span small{font-size:.32em;font-weight:600;color:#9fb3d6}
.ps-sub{font-size:clamp(13px,1.8vw,20px);color:#a9bcdd;margin-top:2.5vh;line-height:1.6}
.ps-mini3{display:flex;gap:3vw;justify-content:center;margin-top:4vh;flex-wrap:wrap}
.ps-mini3>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:2.4vh 3vw;min-width:160px}
.ps-ml{font-size:clamp(12px,1.5vw,16px);color:#8fb4ff;margin-bottom:8px}
.ps-mv{font-size:clamp(22px,3.4vw,40px);font-weight:800}
.ps-duo{display:flex;gap:2vw;align-items:center;justify-content:center;margin:2vh 0;flex-wrap:wrap}
.ps-duo>div{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:2.4vh 3.4vw;min-width:200px}
.ps-arrow{font-size:clamp(24px,4vw,48px);color:#8fb4ff;background:none!important;border:none!important;padding:0!important;min-width:0!important}
.ps-bars{display:flex;flex-direction:column;gap:1.6vh;margin:2vh auto 0;max-width:960px;text-align:left}
.ps-bar-row{display:grid;grid-template-columns:minmax(120px,26%) 1fr minmax(90px,auto);gap:2vw;align-items:center}
.ps-bar-lbl{font-size:clamp(13px,1.7vw,20px);font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ps-bar-track{height:clamp(14px,2vw,24px);background:rgba(255,255,255,.08);border-radius:20px;overflow:hidden}
.ps-bar-track i{display:block;height:100%;border-radius:20px;background:linear-gradient(90deg,#3b82f6,#22d3ee)}
.ps-bar-val{font-size:clamp(13px,1.7vw,20px);font-weight:800;text-align:right;white-space:nowrap}
.ps-vtable{display:flex;flex-direction:column;gap:1.2vh;max-width:900px;margin:2vh auto 0;text-align:left}
.ps-vrow{display:grid;grid-template-columns:1fr auto auto;gap:2vw;align-items:center;background:rgba(255,255,255,.05);border-radius:12px;padding:1.2vh 2vw}
.ps-vnum{font-size:clamp(14px,1.8vw,20px);font-weight:700}.ps-vnum small{color:#8fb4ff;font-weight:500}
.ps-vdv{font-size:clamp(15px,2vw,24px);font-weight:800;text-align:right;min-width:120px}
.ps-ins{list-style:none;padding:0;max-width:920px;margin:2vh auto 0;text-align:left;display:flex;flex-direction:column;gap:1.6vh}
.ps-ins li{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.1);border-left:4px solid #6ea8ff;border-radius:12px;padding:1.8vh 2.4vw;font-size:clamp(14px,1.9vw,21px);line-height:1.55}
.ps-ins li b{color:#cfe0ff}
.ps-center{text-align:center}
.ps-logo{font-size:clamp(50px,9vw,110px);margin-bottom:2vh}
.ps-co{font-size:clamp(15px,2vw,24px);color:#8fb4ff;font-weight:600}
.ps-h1{font-size:clamp(30px,5.5vw,68px);font-weight:800;margin:1.5vh 0}
.ps-date{font-size:clamp(13px,1.7vw,19px);color:#a9bcdd}
.ps-exit{position:absolute;top:20px;right:24px;width:44px;height:44px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#eaf1ff;font-size:20px;cursor:pointer;z-index:2}
.ps-exit:hover{background:rgba(255,255,255,.18)}
.ps-ctrl{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);display:flex;align-items:center;gap:18px;z-index:2}
.ps-nav{width:52px;height:52px;border-radius:50%;border:1px solid rgba(255,255,255,.2);background:rgba(255,255,255,.08);color:#fff;font-size:26px;cursor:pointer;line-height:1}
.ps-nav:hover{background:rgba(255,255,255,.2)}
.ps-count{font-size:15px;font-weight:700;color:#a9bcdd;min-width:60px;text-align:center}
.ps-progress{position:absolute;left:0;right:0;bottom:0;height:4px;background:rgba(255,255,255,.08)}
.ps-progress i{display:block;height:100%;background:linear-gradient(90deg,#7c3aed,#22d3ee);transition:width .35s ease}
@media(max-width:640px){.ps-bar-row{grid-template-columns:1fr}.ps-bar-track{grid-column:1/-1}}
.autosave-ind{display:inline-flex;align-items:center;gap:4px;font-size:12.5px;font-weight:600;color:#6b7488;background:#f0f3fa;border:1px solid #e6e9f0;border-radius:20px;padding:6px 12px;transition:.2s}
.autosave-ind.saved{color:#1e7d46;background:#e6f7ec;border-color:#b6e2c6}
.adj-ic{cursor:help;font-size:11px;margin-left:4px;vertical-align:middle}
.cell-td.cell-adj{background:#f6f1ff}
.cell-adj-dot{position:absolute;left:2px;top:0;font-size:9px;line-height:1;cursor:help;opacity:.85}
.req-cross-badge{display:inline-block;background:#f0eafe;color:#6d28d9;border:1px solid #d9c9f7;border-radius:8px;padding:3px 10px;font-size:12px;font-weight:600;margin:6px 0}
.req-cross{color:#6d28d9;font-weight:600}
.req-cur-tag{display:inline-block;font-size:10.5px;font-weight:700;color:#1e7d46;background:#e6f7ec;border:1px solid #b6e2c6;border-radius:20px;padding:1px 8px;margin-left:4px}
.req-memo{margin-top:6px}
.req-memo-link{display:inline-flex;align-items:center;gap:4px;background:#eef4fd;border:1px solid #c5d8f5;color:#1d4fd0;border-radius:8px;padding:4px 10px;font-size:12.5px;font-weight:600;text-decoration:none}
.req-memo-link:hover{background:#dfeaff}
.req-form input[type=file]{padding:6px;background:#f7f9fe;border:1px dashed #c5d8f5}
.req-note{font-size:12px;margin-top:4px}
.req-actions{display:flex;gap:8px;margin-top:10px;flex-wrap:wrap}
.req-win{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:9px 4px;border-bottom:1px solid #eef1f6;font-size:13.5px}
.req-win:last-child{border-bottom:none}
.req-st{display:inline-block;font-size:11px;font-weight:600;padding:1px 9px;border-radius:20px;white-space:nowrap;margin-left:6px}
.req-yr{display:inline-block;font-size:11px;font-weight:700;padding:1px 8px;border-radius:20px;margin-left:6px;background:#eef2f8;color:#3c4b63;border:1px solid #d5deeb}
/* ประทับตราผลคำร้อง (ใคร·เมื่อไหร่) */
.req-stamp{margin-top:8px;padding:6px 12px;border-radius:8px;font-size:12.5px;background:#f4f6f9;color:#3c4b63;border:1px solid #dde4ee}
.req-stamp-ok{background:#e6f7ec;color:#1e7d46;border-color:#b6e2c6}
.req-stamp-no{background:#fde8e6;color:#c0322b;border-color:#f3b8b2}
/* ตัวเลขช่องงบที่ถูกปรับจากคำร้องอนุมัติ — เขียว=เพิ่มสุทธิ · แดง=ลดสุทธิ (ตาราง user + แอดมิน) */
input.cell.cell-adj-up, input.adm-cell.cell-adj-up{color:#0d7a3a !important;font-weight:800;background:#eefcf3}
input.cell.cell-adj-down, input.adm-cell.cell-adj-down{color:#c0322b !important;font-weight:800;background:#fdf1f0}
.txt-adj-up{color:#0d7a3a;font-weight:700}
.txt-adj-down{color:#c0322b;font-weight:700}
.txt-adj-up small,.txt-adj-down small{font-size:10.5px;opacity:.85}
.req-st.st-wait{background:#fff3d6;color:#8a5a00;border:1px solid #f0d38a}
.req-st.st-acc{background:#e6f1ff;color:#1d4fd0;border:1px solid #bcd4ff}
.req-st.st-ok{background:#e6f7ec;color:#1e7d46;border:1px solid #b6e2c6}
.req-st.st-no{background:#fde8e6;color:#c0322b;border:1px solid #f3b8b2}
.req-st.st-cancel{background:#eef1f6;color:#6b7488;border:1px solid #dfe3ec}
@media(max-width:640px){ .req-grid3{grid-template-columns:1fr} .req-tr{grid-template-columns:1fr} .req-tr-arrow{transform:rotate(90deg)} }

/* =============================================================
 * v18.2 — Clean Professional Theme (แนว PEAK: ขาวสะอาด · ฟ้าสดจุดเดียว · เงาบางเบา)
 *  บล็อกนี้อยู่ท้ายไฟล์ = ชนะทุก rule ก่อนหน้า (รวม glossy !important)
 * ============================================================= */
:root{
  --navy:#12203b; --navy-2:#1b2f52; --blue:#1d5a9e; --blue-soft:#9db8dc;
  --bg:#f4f6f9; --surface:#ffffff; --border:#e3e8f0; --border-strong:#ccd5e2;
  --ink:#0d1526; --ink-2:#44536b; --muted:#7b899e;
  --radius:8px;
  --shadow:0 1px 2px rgba(31,43,67,.06),0 3px 10px rgba(31,43,67,.07);
  --shadow-lg:0 2px 4px rgba(31,43,67,.07),0 8px 20px rgba(31,43,67,.11);
}
body{background:var(--bg)}

/* ---------- Sidebar: ขาวสะอาด + ขอบขวาชัดเพื่อแบ่ง layout ---------- */
.sidebar{background:#fff !important;color:var(--ink);border-right:1px solid var(--border-strong);box-shadow:1px 0 0 var(--border), 4px 0 16px rgba(31,43,67,.05) !important}
.brand{border-bottom:1px solid var(--border)}
.brand-name{color:var(--ink)}
.brand-sub{color:var(--muted)}
.brand-link:hover{background:#f2f6fd}
.nav-item{color:#4a5a74;font-weight:600}
.nav-item:hover{background:#eef4fe;color:var(--blue)}
.nav-item.active{background:linear-gradient(135deg,#1b3a68,#12294d) !important;color:#fff !important;font-weight:700;box-shadow:0 4px 12px rgba(18,41,77,.28) !important}
.nav-item.active .nav-ic{filter:none}
.nav-tx small{color:#9aa7bb}
.nav-item.active .nav-tx small{color:rgba(255,255,255,.82)}
.sidebar-foot{border-top:1px solid var(--border);color:#8b98ad}
.sf-company{color:#3a4763;font-weight:700}
/* การ์ดรอบงบ — ไล่สีฟ้าอ่อนให้มีสีสัน */
.period-card{background:linear-gradient(135deg,#eaf2fe,#e2ecfb) !important;border:1px solid #cfe0f8 !important}
.pc-title{color:#5f7196}
.pc-year{color:#1a3566}
.pc-badge.closed{background:#dbe6f7;color:#3a5788}
.pc-range{color:#7286a8}
.pc-bar{background:#d3e0f5}
.pc-fill{background:linear-gradient(90deg,#1d5a9e,#3f7cbf)}

/* ---------- Topbar: ขาวแบน เงาจาง ---------- */
.topbar{background:#fff !important;border-bottom:1px solid var(--border-strong);box-shadow:0 1px 8px rgba(31,43,67,.05) !important;backdrop-filter:none}
.icon-btn{background:#fff;border:1px solid var(--border-strong);border-radius:11px;box-shadow:none}
.icon-btn:hover{transform:none;background:#f2f6fd;box-shadow:none}
.user-chip{box-shadow:none}
.user-chip.uc-clickable{border:1px solid var(--border-strong)}
.uc-avatar{background:var(--blue);box-shadow:none}
.year-select{box-shadow:none;border-radius:10px}

/* ---------- การ์ด/KPI: ขาว มีมิติ (แสง-เงา) ---------- */
.card{background:#fff !important;border:1px solid var(--border) !important;border-radius:14px !important;box-shadow:var(--shadow) !important;transition:transform .16s ease,box-shadow .2s ease}
.card:hover{transform:translateY(-2px);box-shadow:var(--shadow-lg) !important}
.card svg{filter:drop-shadow(0 4px 8px rgba(31,43,67,.12))}
.kpi,.kpi-c{background:linear-gradient(180deg,#ffffff,#fbfcff) !important;border:1px solid var(--border) !important;border-radius:14px;box-shadow:var(--shadow) !important;transition:transform .16s ease,box-shadow .2s ease}
.kpi:hover,.kpi-c:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg) !important}
.kpi-tint-blue{box-shadow:0 2px 4px rgba(29,90,158,.08),0 8px 18px rgba(29,90,158,.12),0 20px 40px rgba(31,43,67,.06) !important}
.kpi-tint-teal{box-shadow:0 2px 4px rgba(13,148,136,.10),0 10px 22px rgba(13,148,136,.16),0 20px 40px rgba(31,43,67,.06) !important}
.kpi-tint-green{box-shadow:0 2px 4px rgba(22,163,74,.10),0 10px 22px rgba(22,163,74,.15),0 20px 40px rgba(31,43,67,.06) !important}
.kpi-tint-amber{box-shadow:0 2px 4px rgba(217,119,6,.10),0 10px 22px rgba(217,119,6,.16),0 20px 40px rgba(31,43,67,.06) !important}
.side-card{background:linear-gradient(180deg,#ffffff,#fbfcff) !important;border:1px solid var(--border);border-left:4px solid var(--sc);box-shadow:var(--shadow) !important;transition:transform .16s ease,box-shadow .2s ease}
.side-card:hover{transform:translateY(-3px) !important;box-shadow:var(--shadow-lg) !important}
.ctrl-page .card{border:1px solid var(--border-strong) !important;box-shadow:var(--shadow) !important}
.ctrl-page .card-head{background:#f5f8fd;border-bottom:1px solid var(--border)}
/* กราฟ/แผนภูมิ — เพิ่มเงาให้ดูลอย */
.exec-hero{box-shadow:0 4px 12px rgba(11,31,77,.28),0 20px 44px rgba(11,31,77,.30),0 40px 80px rgba(11,31,77,.16) !important}
.mtp-bar,.mtp-bar-cur{box-shadow:0 4px 10px rgba(31,43,67,.18)}
canvas{filter:drop-shadow(0 3px 8px rgba(31,43,67,.10))}
/* แถบปุ่ม Submit/Edit ต้นทุนการผลิต */
.uc-fill-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;padding:14px 4px 4px;margin-top:8px;border-top:1px dashed var(--border-strong)}
.uc-fill-foot .primary-btn,.uc-fill-foot .ghost-btn{margin-left:auto}
.uc-fill-foot.done .uc-st-ok{font-size:13.5px}

/* ---------- ปุ่ม: ทึบสีเดียว มน ไม่มี gradient ---------- */
.primary-btn{background:var(--blue) !important;background-image:none !important;border:none;border-radius:11px;font-weight:700;box-shadow:0 1px 2px rgba(29,90,158,.25)}
.primary-btn:hover{transform:none;background:#164a85 !important;box-shadow:0 3px 10px rgba(22,74,133,.3)}
.ghost-btn{border-radius:11px;border-color:var(--border-strong);box-shadow:none}
.ghost-btn:hover{transform:none;border-color:var(--blue);color:var(--blue);box-shadow:none}
.danger-btn{border-radius:11px}
.btn-grad{background:var(--blue) !important;background-image:none !important}

/* ---------- อื่นๆ ให้เข้าชุด ---------- */
.noti-panel,.user-menu{border-radius:14px;box-shadow:0 12px 32px rgba(31,43,67,.14)}
.um-head{background:#f5f8fd}
.bulk-bar,.ud-foot,.ur-head:hover{background:#f8fafd}
.grid-toolbar{background:#fff}
.data-table thead th{background:#f5f8fd;color:#44526b}
.tr-sum td{background:#f5f8fd}
.io-search,.ud-bar input,.req-form select,.req-form input,.req-form textarea{box-shadow:none}
.req-section{background:#fafbfe;border-color:var(--border)}
.boot-sync{background:#f5f7fb}
.bs-card{box-shadow:0 10px 40px rgba(31,43,67,.12)}

/* แท็บ "วิเคราะห์งบ" (รวม วิเคราะห์ + งบการเงิน + ควบคุมงบ) */
.an-tabs{display:flex;gap:4px;margin:2px 0 18px;border-bottom:2px solid var(--border);flex-wrap:wrap}
.an-tab{padding:11px 20px;font-weight:700;font-size:14px;color:var(--ink-2);text-decoration:none;border-bottom:3px solid transparent;margin-bottom:-2px;display:flex;align-items:center;gap:7px;transition:color .15s,border-color .15s;white-space:nowrap}
.an-tab:hover{color:var(--navy)}
.an-tab.active{color:var(--navy);border-bottom-color:var(--blue)}
.an-actions{display:flex;justify-content:flex-end;gap:8px;margin:-6px 0 12px}

/* ===== Assumption MTP table ===== */
.as-scroll { max-height: calc(100vh - 220px); overflow: auto; }
.as-table { border-collapse: separate; border-spacing: 0; font-size: 12px; white-space: nowrap; }
.as-table th, .as-table td { border-right: 1px solid var(--line, #e4e8f1); border-bottom: 1px solid var(--line, #e4e8f1); padding: 3px 7px; }
.as-table thead th { position: sticky; top: 0; z-index: 3; background: #1f3a5f; color: #fff; text-align: center; font-weight: 600; font-size: 11px; }
.as-table thead tr:nth-child(2) th { top: 34px; }
/* หัว 2 ชั้น (หน้า MTP แอดมิน): แถบกลุ่ม+ช่วงเดือน → scenario — ความสูงตายตัวให้ sticky เนียน */
.as-table thead th.as-h1 { white-space: nowrap; }
.as-table thead .as-rng { font-weight: 400; font-size: 10px; opacity: .85; }
.as-table.mtp3 thead th { box-sizing: border-box; border-bottom: none; border-right: 1px solid rgba(255,255,255,.14); vertical-align: middle; }
.as-table.mtp3 thead tr:nth-child(1) th { top: 0; height: 34px; padding: 0 8px; }
.as-table.mtp3 thead tr:nth-child(2) th { top: 34px; height: 24px; padding: 0 6px; line-height: 24px; border-bottom: 2px solid #10203c; }
.as-table.mtp3 thead th.as-h1 { background: #1f3a5f; font-size: 11.5px; }
.as-table.mtp3 thead th.as-h2 { font-size: 10.5px; }
/* คอลัมน์ป้าย (rowspan 2) — สูงเต็ม 58px กันโหว่ */
.as-table.mtp3 thead th.as-note, .as-table.mtp3 thead th.as-ord, .as-table.mtp3 thead th.as-name, .as-table.mtp3 thead th.as-unit, .as-table.mtp3 thead th.as-remark { top: 0; height: 58px; }
.as-h1 .as-yr { font-size: 10px; opacity: .85; font-weight: 400; }
.as-h2 { font-size: 10px; font-weight: 400; }
/* scenario tint เฉพาะ "หัวตาราง" (Opt ฟ้า / Real น้ำเงิน / Pess น้ำตาล) — body ไม่ลงสี ให้ช่องค่าสีเดียว */
.as-table thead th.sc-o { background:#20507e; }
.as-table thead th.sc-r { background:#1f3a5f; }
.as-table thead th.sc-p { background:#7a3b2e; }
/* sticky ป้ายซ้าย 4 คอลัมน์ */
.as-table th.as-note, .as-table td.as-note { position: sticky; left: 0; z-index: 2; background: #f4f6fb; width: 28px; text-align:center; color:#8a94a6; }
.as-table th.as-ord, .as-table td.as-ord  { position: sticky; left: 28px; z-index: 2; background: #f4f6fb; width: 42px; color:#556; }
.as-table th.as-name, .as-table td.as-name { position: sticky; left: 70px; z-index: 2; background: #fff; min-width: 210px; max-width: 260px; overflow: hidden; text-overflow: ellipsis; text-align:left; }
.as-table th.as-unit, .as-table td.as-unit { position: sticky; left: 280px; z-index: 2; background: #fbfcfe; min-width: 78px; text-align:left; color:#667; }
.as-table thead th.as-note, .as-table thead th.as-ord, .as-table thead th.as-name, .as-table thead th.as-unit, .as-table thead th.as-remark { background:#1f3a5f; z-index:4; color:#fff !important; }
/* ผู้รับผิดชอบ — คอลัมน์ท้ายสุด (ไม่ freeze) */
.as-table th.as-remark, .as-table td.as-remark { min-width: 92px; text-align: left; }
.as-table.mtp3 thead th.as-remark { top: 0; height: 58px; }
.as-table tr.as-main td.as-remark { background: #d6dff8 !important; }
.as-table tr.as-sub.as-alt td.as-remark { background: #f2f5fb; }
/* แถบหัวหมวด (main row) — bar สีครามเด่น + เส้นแบ่งหนา */
.as-table tr.as-main td { background-color: #dfe7fb !important; border-top: 2px solid #4f6ef2; }
.as-table tr.as-main td.as-name { font-weight: 700; color: #22317f; }
.as-table tr.as-main td.as-note, .as-table tr.as-main td.as-ord { background: #cdd8f6 !important; color: #22317f; }
.as-table tr.as-main td.as-unit { background: #d6dff8 !important; }
.as-table tr.as-main td.as-note { box-shadow: inset 5px 0 0 #3a52c9; }
/* zebra สลับแถวย่อย ให้อ่านง่าย (รวมคอลัมน์ตรึงซ้าย) */
.as-table tr.as-sub.as-alt td { background-color: #f6f8fc; }
.as-table tr.as-sub.as-alt td.as-name { background: #f6f8fc; }
.as-table tr.as-sub.as-alt td.as-note, .as-table tr.as-sub.as-alt td.as-ord { background: #eef1f8; }
.as-table tr.as-sub.as-alt td.as-unit { background: #f2f5fb; }
.as-table tr.as-sub td.as-name { padding-left: 16px; color: #3a4658; }
.as-calc { color: #556; background-image: none; }
.as-in { padding: 1px !important; }
.as-cell { width: 100%; min-width: 62px; border: none; background: #fffbe8; text-align: right; font: inherit; padding: 2px 6px; border-radius: 3px; }
.as-cell:hover { background: #fff4c9; } .as-cell:focus { outline: 2px solid #eda100; background:#fff; }
.as-remark { background: #f4f6fb; color: #8a5a00; font-size: 11px; }   /* ไม่ freeze — เลื่อนตามตาราง */

.as-table td.as-ext .as-cell { background:#eef2ff; }
.as-table td.as-ext .as-cell:hover { background:#e2e9fe; }

.as-table td .as-cell.as-edited { }   /* ไม่ไฮไลต์ช่องที่แก้แล้ว (autosave ทุกช่องอยู่แล้ว) */

/* Assumption: ช่องที่แก้แต่ยังไม่ Submit (staged) */
.as-table td .as-cell.as-pending { background:#fff3cd !important; box-shadow: inset 2px 0 0 #eda100; font-weight:600; }
.as-table td .as-cell.as-pending:hover { background:#ffec9e !important; }
/* Assumption: ขยายเต็มจอ */
#asWrap.as-fs, #c3Wrap.as-fs { position: fixed; inset: 0; z-index: 1200; background: var(--bg,#fff); margin:0; padding:12px 14px; overflow:auto; }
#asWrap.as-fs .as-scroll { max-height: calc(100vh - 30px); }
/* เปรียบเทียบงบประมาณ ตามรอบ — โหมดเต็มจอ: ตารางสูงเต็ม + ปุ่ม ✕ ย่อกลับ มุมขวาบน */
#c3Wrap.as-fs .c3-scroll { max-height: calc(100vh - 120px) !important; }
#c3Wrap .c3-fs-close { display: none; }
#c3Wrap.as-fs .c3-fs-close { display: inline-flex; align-items: center; gap: 6px; position: sticky; top: 0; float: right; z-index: 10;
  font: inherit; font-size: 12.5px; font-weight: 700; padding: 7px 12px; margin: 0 0 6px 10px; cursor: pointer;
  background: #1d5a9e; color: #fff; border: 0; border-radius: 999px; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
#c3Wrap.as-fs .c3-fs-close kbd { background: rgba(255,255,255,.22); border-radius: 4px; padding: 1px 5px; font-size: 11px; }
#asFsClose { display:none; position:fixed; top:12px; left:50%; z-index:1300; align-items:center; gap:7px; background:rgba(31,58,95,.55); color:#fff; border:none; border-radius:22px; padding:8px 18px; font-size:13px; font-weight:600; cursor:pointer; backdrop-filter:blur(2px); box-shadow:0 4px 14px rgba(0,0,0,.18); opacity:0; transform:translate(-50%,-22px); transition:opacity .2s,transform .2s,background .2s; pointer-events:none; }
#asFsClose.show { opacity:.5; transform:translate(-50%,0); pointer-events:auto; }
#asFsClose.show:hover { opacity:1; background:rgba(22,70,111,.95); }
#asFsClose .fs-x { font-size:15px; line-height:1; } #asFsClose kbd { background:rgba(255,255,255,.22); border-radius:5px; padding:1px 6px; font-size:11px; font-family:inherit; }

/* Assumption: ปุ่ม Edit เปิด + ช่องสูตรที่แก้ได้ในโหมด Edit */
.ghost-btn.as-edit-on { background:#e7ecff; color:#26379a; border-color:#9db0f5; font-weight:700; }
.as-table td.as-fcell .as-cell { background:#eef1f6; color:#334; }
.as-table td.as-fcell .as-cell:hover { background:#e3e8f0; }
.as-table td.as-fcell .as-cell:focus { background:#fff; outline:2px solid #7a889a; }

/* Assumption ฝั่ง User — ช่องกรอกสีชมพู (ตรงกับไฟล์ Excel) + ปุ่มรอบ */
/* หน้า User MTP — แถวย่อยพื้นขาว · แถวรวม (main) คงสีเดิม · ช่องกรอก = ชมพู */
.as-table.asu-table tbody tr.as-sub td { background: #fff !important; }
.as-table.asu-table tbody tr.as-sub td.asu-in, .as-table.asu-table tbody td.asu-in { background: #fbe4f3 !important; }
.asu-table td.asu-in .as-cell { background: transparent; }
.asu-table td.asu-in .as-cell:hover { background: #f6d0ea; }
.asu-table td.asu-in .as-cell:focus { background: #fff; outline: 2px solid #d4537e; }
.asu-table th.as-ord, .asu-table td.as-ord { left: 0; width: 46px; }
.asu-table th.as-name, .asu-table td.as-name { left: 46px; }
.asu-table th.as-unit, .asu-table td.as-unit { left: 256px; }
.asu-rounds { display: inline-flex; gap: 6px; }
.asu-rounds .asu-on { background: #1f3a5f; color: #fff; border-color: #1f3a5f; font-weight: 700; }
/* หัว 2 ส่วนตามวงจร — คุมความสูงตายตัว ไม่มีช่องว่างขาว */
.as-table.asu-table thead th { box-sizing: border-box; border-bottom: none; border-right: 1px solid rgba(255,255,255,.14); vertical-align: middle; }
.as-table.asu-table thead tr:nth-child(1) th { top: 0; height: 34px; padding: 0 8px; }
.as-table.asu-table thead tr:nth-child(2) th { top: 34px; height: 24px; padding: 0 6px; line-height: 24px; border-bottom: 2px solid #10203c; }
.as-table.asu-table thead th.as-ord, .as-table.asu-table thead th.as-name, .as-table.asu-table thead th.as-unit { top: 0; height: 58px; }
.asu-table thead th.asu-sec1 { background: #20507e !important; }
.asu-table thead th.asu-sec2 { background: #7a3b2e !important; }
.asu-table thead .as-rng { font-weight: 400; font-size: 10px; opacity: .85; }

/* Assumption: ช่องอัตราแลกเปลี่ยน auto จาก Budget Control */
.as-table td.as-fx { background:#e6f6ee !important; color:#0b6b47; font-weight:600; }

/* หน้าแอดมิน MTP — ช่องค่า 3 แบบ สีเดียวชัดเจน: กรอกได้=ขาว · สูตร=เทา · แถวรวม=คราม */
.as-table.mtp3 tbody td.as-calc { background: #eef1f5; }                 /* สูตร (อ่านอย่างเดียว) = เทาเดียว */
.as-table.mtp3 tbody tr td.as-in { background: #fff; }                   /* กรอกได้ = ขาว */
.as-table.mtp3 tbody tr.as-alt td.as-in { background: #fff; }
.as-table.mtp3 td.as-in .as-cell { background: transparent; }
.as-table.mtp3 td.as-in .as-cell:focus { background: #fff; outline: 2px solid #6f8dd6; }
.as-table.mtp3 td.as-in.as-fcell .as-cell { background: #eef1f6; }   /* โหมด Edit: ช่องที่จริงเป็นสูตร ยังเทาไว้ */
/* แถบแจ้งล็อกฝั่ง user */
.asu-locked-bar { margin: 8px 0 -4px; padding: 8px 12px; border-radius: 8px; background: #fbeaea; color: #a12727; font-weight: 600; border: 1px solid #f0c2c2; }
.ghost-btn.as-locked { background: #fbeaea; color: #a12727; border-color: #eaa; font-weight: 700; }

/* Assumption autosave — ไฟลชเขียวเมื่อบันทึก (ทั้งแอดมิน/user) */
.as-table .as-cell.as-saved { background: #d7f5e3 !important; transition: background .3s; }

/* Assumption ส่งแล้ว */
.asu-sent { font-size: 13px; color: #1d7a4c; font-weight: 700; }
.ghost-btn.asu-sent-chip { background:#e6f6ee; color:#1d7a4c; border-color:#b7e0c8; }

/* หน้าต้นทุน: ปุ่มสลับชุดตัวหาร */
.uc-divmode { display:flex; gap:6px; margin: 0 0 10px; }
.uc-divmode .uc-dm-on { background:#1f3a5f; color:#fff; border-color:#1f3a5f; font-weight:700; }

/* ============ Formal financial polish (v20.17) ============ */
/* ตัวเลขการเงิน: tabular figures — หลักตรงคอลัมน์ทุกตาราง */
.data-table td.num, .data-table th.num, .kpi-value, .as-table td, .uc-table td.num,
.cmp-kpi b, .ehs-value, td[class*=num] { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }
/* หัวตาราง: ขรึม สม่ำเสมอ */
.data-table thead th { text-transform: none; letter-spacing: .01em; font-weight: 600; }
/* ปุ่มหลักโทนเนวี่ */
.primary-btn { background: var(--navy-2); border-color: var(--navy-2); }
.primary-btn:hover { background: var(--navy); border-color: var(--navy); }
/* การ์ด: เส้นขอบชัด เงาเบา */
.card { border: 1px solid var(--border); }
/* KPI: ตัวเลขเข้ม อ่านเป็นทางการ */
.kpi-value { color: var(--navy); font-weight: 700; }

/* ชื่อหน่วยงานในตาราง: เข้ม ชัด เด่น (แทนไอคอนที่เอาออก) */
.data-table td b, .data-table td > b { color: #12203b; font-weight: 700; letter-spacing: .005em; }
/* v22.377 ตัวหนาในตารางที่ติดป้ายบวก/ลบ ต้องเห็นสี (เดิม #12203b ทับ .txt-up/.txt-down → คงเหลือติดลบใน popup เทียบงบเป็นสีดำ) */
.data-table td b.txt-up, .data-table td > b.txt-up { color: var(--up); }
.data-table td b.txt-down, .data-table td > b.txt-down { color: var(--down); }
.data-table td .muted.small { color: #8b96a8; font-size: 11px; letter-spacing: .03em; }

/* ============ เครื่องมือคำนวณ: แบบแท็บ + ขอบ input ชัด ============ */
.ft-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 16px; border-bottom: 2px solid var(--border); padding-bottom: 12px; }
.ft-tab { border: 1.5px solid var(--border-strong); background: #fff; border-radius: 10px; padding: 10px 18px; cursor: pointer; font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .1px; color: var(--ink-2); transition: all .14s; box-shadow: 0 1px 2px rgba(13,54,107,.05); }
.ft-tab:hover { border-color: var(--blue); color: var(--blue); background: #f5f9ff; transform: translateY(-1px); }
.ft-tab.active { background: var(--navy-2); border-color: var(--navy-2); color: #fff; font-weight: 800; box-shadow: 0 4px 12px rgba(29,90,158,.28); }
.ft-grid.ft-tabbed { display: block; }
.ft-grid.ft-tabbed .ft-pane { display: none; }
.ft-grid.ft-tabbed .ft-pane.active { display: block; max-width: 560px; margin: 0 auto; }
/* ขอบ input/select ชัดทุกช่องในเครื่องมือคำนวณ */
.ft-grid input, .ft-grid select, .ft-grid .suffix-wrap { border: 1.5px solid var(--border-strong) !important; border-radius: 8px; background: #fff; }
.ft-grid .suffix-wrap input { border: none !important; }
.ft-grid input:focus, .ft-grid select:focus, .ft-grid .suffix-wrap:focus-within { border-color: var(--blue) !important; outline: none; box-shadow: 0 0 0 2px rgba(29,90,158,.15); }

/* เครื่องมือคำนวณ: modal พอดีเนื้อหา (แท็บเดียวต่อครั้ง) */
.modal.modal-tools { width: min(680px, 94vw); max-height: 92vh; }
.modal.modal-tools .ft-pane.active { max-width: none; }

/* v22.260 ผู้ใช้สั่ง 15 ก.ย.: ย่อแต่ละเครื่องมือให้พอดี pop up ไม่ต้องเลื่อนขึ้นลง (ยกเว้นภาษีที่สั้นอยู่แล้ว)
   — บีบระยะห่างแนวตั้ง · ซ่อนหัวแผงที่ซ้ำกับชื่อแท็บด้านบน · ย่อปุ่มเครื่องคิดเลข · ซ่อนแถบปุ่มปิดด้านล่าง (มี ✕ ที่หัวแล้ว) */
.modal.modal-tools .modal-foot { display: none; }
.modal.modal-tools .modal-body { padding: 12px 16px 14px; }
.modal.modal-tools .ft-head { display: none; }                     /* ชื่อเครื่องมือมีที่แท็บและกล่องอัตราแล้ว */
.modal.modal-tools .ft-tabs { margin-bottom: 10px; padding-bottom: 8px; }
.modal.modal-tools .ft-tab { font-size: 14px; padding: 8px 14px; }
.modal.modal-tools .fld { margin-bottom: 6px; }
.modal.modal-tools .fld span { margin-bottom: 3px; }
.modal.modal-tools .fld input, .modal.modal-tools .fld select { padding: 6px 10px; font-size: 13px; }
.modal.modal-tools .ft-ratebox, .modal.modal-tools .fuel-info, .modal.modal-tools .fx-ratebox { padding: 8px 12px; margin-bottom: 8px; }
.modal.modal-tools .ft-ratebox-head { margin-bottom: 4px; }
.modal.modal-tools .ft-table td { padding: 4px 4px; }
.modal.modal-tools .fuel-row { padding: 3px 0; }
.modal.modal-tools .ft-divider { margin: 8px 0 6px; }
.modal.modal-tools .green-card, .modal.modal-tools .purple-card { padding: 8px 12px; margin-bottom: 7px; }
.modal.modal-tools .fx-ratebox { margin-top: 2px; }
.modal.modal-tools .fx-result { padding: 10px 16px; }
.modal.modal-tools .fxr-val { font-size: 19px; }
/* เครื่องคิดเลข: ย่อจอ + ปุ่มให้เตี้ยลง */
.modal.modal-tools .calcu2-display { padding: 8px 14px; margin-bottom: 8px; }
.modal.modal-tools .calcu2-display input { font-size: 26px; }
.modal.modal-tools .calcu2-fnrow { gap: 6px; margin-bottom: 6px; }
.modal.modal-tools .calcu2-grid { gap: 6px; margin-bottom: 8px; }
.modal.modal-tools .cbtn { font-size: 17px; padding: 7px 0 6px; }
.modal.modal-tools .cbtn.fn { font-size: 14px; }
.modal.modal-tools .calcu2-copy { padding: 8px 12px; }
/* ชื่อหน่วยงานมุมขวาบน: กรอบน้ำเงินชัด */
.user-chip, .user-chip.uc-clickable { border: 1.5px solid var(--navy-2) !important; border-radius: 999px; padding: 5px 14px; background: #fff; }
.user-chip.uc-clickable.uc-stb { border-color: var(--uc-st) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--uc-st) 22%, transparent); }   /* v22.190 ขอบสีตามสถานะงบของแผนก */
.user-chip .uc-name { color: var(--navy); font-weight: 700; }

/* ชื่อแผนก: แวววาว — แสงวิ่งผ่าน (shimmer) + เงาเรืองน้ำเงิน */
.user-chip.uc-clickable { position: relative; overflow: hidden; box-shadow: 0 0 10px rgba(29,90,158,.25), 0 2px 6px rgba(14,47,92,.12) !important; }
.user-chip.uc-clickable::after {
  content: ""; position: absolute; top: 0; left: -80%; width: 55%; height: 100%;
  background: linear-gradient(105deg, transparent 0%, rgba(120,170,255,.28) 45%, rgba(255,255,255,.75) 50%, rgba(120,170,255,.28) 55%, transparent 100%);
  transform: skewX(-18deg); animation: chipShine 3.2s ease-in-out infinite; pointer-events: none;
}
@keyframes chipShine { 0%,55% { left: -80%; } 85%,100% { left: 130%; } }

/* Insight เชิงบัญชี */
.fi-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.fi-list li { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 8px; border: 1px solid var(--border); background: #fff; font-size: 13.5px; line-height: 1.55; }
.fi-list .fi-ic { flex: none; font-size: 16px; }
.fi-list li.fi-warn { background: #fdf6e7; border-color: #ecd9a8; }
.fi-list li.fi-crit { background: #fbeded; border-color: #eec3c3; }
.fi-list li.fi-good { background: #ecf7f0; border-color: #bfe0cb; }

/* การ์ดค่าน้ำมันเดินทาง (ในแท็บน้ำมัน): ชิดซ้ายเหมือนการ์ดเขียว */
[data-ftpane="fuel"] .purple-card { text-align: left; padding: 10px 14px; }

/* การ์ด GL: แบ่งครึ่งบน-ล่าง — บน จำนวน GL · ล่าง สัดส่วน % (ตัวใหญ่เท่ากัน ไม่มีเส้นแบ่ง) */
.kpi-duo { display: flex; flex-direction: column; gap: 2px; }
.kpi-duo > span { white-space: nowrap; line-height: 1.25; }

/* ============ Skeleton loading (ตอนเปิด/รีเฟรช ระหว่างดึงข้อมูล) ============ */
.boot-sync.boot-skel { display: flex; align-items: stretch; justify-content: flex-start; background: var(--bg); }
.boot-skel .sk { position: relative; overflow: hidden; background: #e6ebf2; border-radius: 8px; }
.boot-skel .sk::after { content: ""; position: absolute; inset: 0; transform: translateX(-100%);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.65), transparent);
  animation: skShine 1.4s ease-in-out infinite; }
@keyframes skShine { 100% { transform: translateX(100%); } }
.boot-skel .sk-side { width: 236px; flex: none; background: #0c2749; padding: 18px 14px; display: flex; flex-direction: column; gap: 12px; }
.boot-skel .sk-side .sk { background: rgba(255,255,255,.12); }
.boot-skel .sk-side .sk::after { background: linear-gradient(90deg, transparent, rgba(255,255,255,.14), transparent); }
.boot-skel .sk-logo { height: 44px; margin-bottom: 12px; }
.boot-skel .sk-nav { height: 34px; }
.boot-skel .sk-main { flex: 1; padding: 18px 26px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.boot-skel .sk-top { display: flex; gap: 12px; }
.boot-skel .sk-chip { width: 140px; height: 34px; border-radius: 999px; }
.boot-skel .sk-title { width: 320px; height: 26px; }
.boot-skel .sk-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; }
.boot-skel .sk-kpi { height: 92px; }
.boot-skel .sk-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.boot-skel .sk-card { height: 220px; }
.boot-skel .sk-table { flex: 1; min-height: 160px; }
/* Skeleton สีตามประเภทงบ */
body[data-bt="repair"] .boot-skel .sk-side { background: #4a3109; }
body[data-bt="invest"] .boot-skel .sk-side { background: #0b3324; }
body[data-bt="repair"] .boot-skel .sk-main .sk, body[data-bt="invest"] .boot-skel .sk-main .sk { background: color-mix(in srgb, var(--blue) 11%, #eef1f6); }
body[data-bt="repair"] .boot-skel .sk-main .sk::after, body[data-bt="invest"] .boot-skel .sk-main .sk::after {
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--blue) 22%, #fff), transparent); }

/* GL chip ที่ยังไม่ตั้งงบ (ยอดปี = 0) — แดง */
.gl-chip.gl-chip-zero { background: #fbeded; border-color: #e5a9a9; color: #b32d2d; font-weight: 700; }
.gl-chip.gl-chip-zero .chip-x { color: #b32d2d; }

/* จดจำฉัน (หน้า login) */
.lv-remember { display: flex; align-items: center; gap: 8px; font-size: 13px; color: var(--ink-2); margin: 2px 0 4px; cursor: pointer; user-select: none; }
.lv-remember input { width: 15px; height: 15px; accent-color: var(--navy-2); cursor: pointer; }

/* คอลัมน์ PR-PO ค้างรอเบิก (หน้ากรอกงบ) — แดง อ่านอย่างเดียว โผล่เฉพาะแผนกที่มียอด */
.th-prpo { background: #7a2323 !important; color: #fff; }
.td-prpo { background: #fbeded; color: #b32d2d; font-weight: 700; }
tr.tr-sum .td-prpo { background: #f6dcdc; }
/* งบเพิ่ม-ลดระหว่างปี (คอลัมน์ V) — หลัง PR-PO */
.th-adjust { background: #1d5a9e !important; color: #fff; }
.td-adjust { background: #eef4fb; font-weight: 700; }
tr.tr-sum .td-adjust { background: #dfeaf7; }
.td-adjust.txt-up { color: #1c7a3a; }
.td-adjust.txt-down { color: #c0392b; }

/* คอลัมน์ MTP (ปี +1/+2): โทนม่วง แยกชัดจากคอลัมน์อื่น */
.th-mtp { background: #4c3a8f !important; color: #fff !important; }  /* v22.77 บังคับตัวอักษรปี (2027/2028) เป็นขาว ทุกงบ — กัน .data-table thead th (เทาเข้ม) ที่ specificity สูงกว่ามาทับ */
.td-mtp { background: #f4f1fd; }
.td-mtp .cell-mtp { background: #ece6fb; }
.td-mtp .cell-mtp:hover { background: #e0d7f8; }
.td-mtp .cell-mtp:focus { background: #fff; outline: 2px solid #6b54c9; }

/* ช่องว่างคั่นหลังคอลัมน์ MTP ปีที่ 2 ก่อนเข้าโซน scenario (~1cm) */
.th-mtp + .th-mtp, .td-mtp + .td-mtp { border-right: 1cm solid #f4f6f9 !important; }

/* ===== MGR dashboard: การใช้จริง + Top movers ===== */
.mgr-use-bar { display: flex; height: 18px; border-radius: 6px; background: #e8eaef; overflow: hidden; margin-bottom: 10px; border: 1px solid #d7dae2; }
.mgr-use-bar i { display: block; height: 100%; }
.mgr-use-bar .mu-act { background: linear-gradient(180deg, #2a9d5c, #1c7a3a); }
.mgr-use-bar .mu-cm { background: repeating-linear-gradient(45deg, #eebb55, #eebb55 6px, #e0a63b 6px, #e0a63b 12px); }
.mgr-use-row { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 13px; color: #3c4657; }
.mgr-use-row b { font-variant-numeric: tabular-nums; }
.mgr-mv-wrap { gap: 18px; }
.mgr-mv-h { font-size: 12.5px; font-weight: 700; margin-bottom: 6px; padding-bottom: 4px; border-bottom: 2px solid #e5e8ee; }
.mgr-mv-h.up { color: #b23c3c; }
.mgr-mv-h.dn { color: #1c7a3a; }
.mgr-mv { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 5px 0; border-bottom: 1px dashed #edeff3; font-size: 13px; }
.mgr-mv:last-child { border-bottom: 0; }
.mgr-mv .mv-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mgr-mv .mv-nums { white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ===== MGR: แถว drill คลิกได้ทั้งแถว + หน้าตรวจสอบงบ ===== */
#mgrDeptTable .tr-drill { cursor: pointer; }
#mgrDeptTable .tr-drill:hover td { background: #eef3fa; }
.rv-sec-h { font-size: 13.5px; font-weight: 700; margin: 4px 0 8px; color: #2b3648; }
.mgr-rv-toggle { display: inline-flex; gap: 0; border: 1px solid var(--border-strong, #ccd5e2); border-radius: 8px; overflow: hidden; }
.mgr-rv-toggle .ghost-btn.small { border: none; border-radius: 0; margin: 0; box-shadow: none; }
.mgr-rv-toggle .ghost-btn.small.active { background: var(--blue); color: #fff; }
.rv-item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border: 1px solid #e3e7ee; border-radius: 8px; margin-bottom: 8px; background: #fff; }
.rv-item.rv-wait { border-left: 4px solid #256abf; }
.rv-item.rv-ok { border-left: 4px solid #0d9488; background: #f7fcfb; }
.rv-item.rv-ret { border-left: 4px solid #d03b3b; background: #fdf8f8; }
.rv-nm b { color: #1c2b46; }
.rv-nums { font-variant-numeric: tabular-nums; font-size: 13px; color: #3c4657; white-space: nowrap; }
.rv-act { display: flex; gap: 6px; flex: none; }

/* ===== ประเภทงบประมาณ: brand switch + picker + ribbon ===== */
.brand-switch { width: 100%; border: none; background: transparent; cursor: pointer; text-align: left;
  display: flex; align-items: center; gap: 10px; padding: 0; font: inherit; position: relative; }
.brand-switch .brand-tx { min-width: 0; }
.brand-switch .brand-caret { margin-left: auto; opacity: .5; font-size: 12px; transition: opacity .15s, transform .15s; }
.brand-switch:hover .brand-caret { opacity: 1; transform: translateY(1px); }
.brand-switch:hover .brand-name { text-decoration: underline; text-underline-offset: 3px; }

/* ===== v22.86 Pop-up เลือกประเภทงบ — การ์ดมีมิติ · สีธีมแยกแต่ละงบ · active เด่นชัด ===== */
.modal-bt { max-width: 440px; }
.bt-hint { margin: -2px 0 14px; font-size: 12px; }
.bt-list { display: flex; flex-direction: column; gap: 12px; }
/* สีธีมต่อประเภทงบ (ค่าใช้จ่าย=น้ำเงิน · ซ่อม=อำพัน · ลงทุน=เขียว) */
.bt-opt.bt-expense { --bt-a: #2f66f2; --bt-b: #1c46d0; --bt-tint: #eef3fe; }
.bt-opt.bt-repair  { --bt-a: #e0912a; --bt-b: #b26a0c; --bt-tint: #fdf4e6; }
.bt-opt.bt-invest  { --bt-a: #16a06a; --bt-b: #0d6e48; --bt-tint: #e9f8f1; }
.bt-opt { position: relative; display: flex; align-items: center; gap: 14px; width: 100%; text-align: left; cursor: pointer;
  border: 1.5px solid #e6eaf1; background: #fff; border-radius: 16px; padding: 15px 16px 15px 20px; font: inherit; overflow: hidden;
  box-shadow: 0 2px 5px rgba(24,40,72,.05), 0 8px 20px rgba(24,40,72,.05);
  transition: transform .16s cubic-bezier(.2,.7,.3,1), box-shadow .16s, border-color .16s; }
/* แถบสีธีมด้านซ้าย */
.bt-opt::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: linear-gradient(180deg, var(--bt-a), var(--bt-b)); opacity: .9; }
.bt-opt:hover:not(:disabled) { transform: translateY(-2px); border-color: color-mix(in srgb, var(--bt-a) 55%, #fff);
  box-shadow: 0 4px 10px rgba(24,40,72,.08), 0 16px 34px color-mix(in srgb, var(--bt-a) 24%, transparent); }
.bt-opt:active:not(:disabled) { transform: translateY(0); }
.bt-opt:disabled { cursor: default; }
/* ไอคอนไทล์ gradient + เงาสีธีม */
.bt-opt .bt-ic { flex: none; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center;
  font-size: 24px; border-radius: 13px; color: #fff;
  background: linear-gradient(145deg, var(--bt-a), var(--bt-b));
  box-shadow: inset 0 1px 0 rgba(255,255,255,.4), 0 5px 12px color-mix(in srgb, var(--bt-a) 40%, transparent); }
.bt-opt .bt-tx { display: flex; flex-direction: column; gap: 3px; line-height: 1.2; min-width: 0; }
.bt-opt .bt-tx b { font-size: 16px; font-weight: 800; color: #16233c; letter-spacing: -.2px; }
.bt-opt .bt-tx small { font-size: 11.5px; font-weight: 600; letter-spacing: .3px; text-transform: uppercase; color: color-mix(in srgb, var(--bt-b) 70%, #7b8494); }
.bt-blank { font-size: 10px; color: #a06a12; background: #fdf3e2; border-radius: 4px; padding: 0 5px; margin-left: 5px; }
.bt-opt .bt-chk { margin-left: auto; flex: none; }
.bt-opt .bt-arrow { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%;
  font-size: 16px; font-weight: 800; color: var(--bt-b); background: var(--bt-tint); transition: transform .16s, background .16s; }
.bt-opt:hover:not(:disabled) .bt-arrow { transform: translateX(3px); background: color-mix(in srgb, var(--bt-a) 18%, #fff); }
.bt-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 800; color: #fff; white-space: nowrap;
  padding: 5px 12px; border-radius: 999px; background: linear-gradient(145deg, var(--bt-a), var(--bt-b));
  box-shadow: 0 3px 8px color-mix(in srgb, var(--bt-a) 40%, transparent); }
/* การ์ดที่ใช้อยู่ — เด่น: พื้น tint + ขอบสีธีม + ring */
.bt-opt.bt-active { border-color: var(--bt-a); background: linear-gradient(135deg, var(--bt-tint), #fff);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--bt-a) 22%, transparent), 0 10px 26px color-mix(in srgb, var(--bt-a) 20%, transparent); }
.bt-opt.bt-active::before { opacity: 1; width: 6px; }

.bt-ribbon { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; padding: 9px 14px;
  border-radius: 8px; font-size: 13px; border: 1px solid; }
.bt-ribbon-repair { background: #fff6e9; border-color: #f0cf9a; color: #8a5a10; }
.bt-ribbon-invest { background: #eef4ff; border-color: #b9cdf2; color: #274b8a; }
.bt-ribbon b { font-weight: 700; }
.bt-ribbon-sw { margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 600; cursor: pointer;
  border: 1px solid currentColor; background: transparent; color: inherit; border-radius: 6px; padding: 3px 11px; }
.bt-ribbon-sw:hover { background: rgba(0,0,0,.05); }

/* ===== ธีมสี accent ตามประเภทงบ (override --blue/--navy ที่ระดับ body) ===== */
body[data-bt="repair"] {
  --navy: #5b3d0e; --navy-2: #7a5111; --blue: #b26a0c; --blue-soft: #e6c78f;
}
body[data-bt="repair"] .nav-item.active {
  background: linear-gradient(135deg, #8a5a10, #5b3d0e) !important;
  box-shadow: 0 4px 12px rgba(90, 61, 14, .28) !important;
}
body[data-bt="repair"] .primary-btn { box-shadow: 0 2px 8px rgba(178, 106, 12, .28); }
body[data-bt="repair"] .period-card { background: linear-gradient(135deg, #fdf2df, #fae9cd) !important; border-color: #f0d8a8 !important; }

body[data-bt="invest"] {
  --navy: #0d3d2b; --navy-2: #124f38; --blue: #12805a; --blue-soft: #9ed9bf;
}
body[data-bt="invest"] .nav-item.active {
  background: linear-gradient(135deg, #12805a, #0d3d2b) !important;
  box-shadow: 0 4px 12px rgba(13, 61, 43, .28) !important;
}
body[data-bt="invest"] .primary-btn { box-shadow: 0 2px 8px rgba(18, 128, 90, .28); }
body[data-bt="invest"] .period-card { background: linear-gradient(135deg, #e6f6ee, #d9f0e4) !important; border-color: #b4e0c9 !important; }

/* การ์ด Executive Dashboard (exec-hero) เปลี่ยนสีตามประเภทงบ — การ์ดสถิติในนั้นเป็นขาวโปร่ง ปรับตามเอง */
body[data-bt="repair"] .exec-hero { background: linear-gradient(120deg, #4a3109 0%, #7a5111 55%, #b26a0c 100%); }
body[data-bt="invest"] .exec-hero { background: linear-gradient(120deg, #0b3324 0%, #12684a 55%, #12805a 100%); }

/* ปุ่ม primary-btn hover = สีของงบ (เข้มขึ้น) แทนน้ำเงินตายตัว */
body[data-bt="repair"] .primary-btn:hover { background: #8a5210 !important; box-shadow: 0 3px 10px rgba(122, 81, 17, .32) !important; }
body[data-bt="invest"] .primary-btn:hover { background: #0d6146 !important; box-shadow: 0 3px 10px rgba(13, 97, 70, .32) !important; }

/* ปุ่ม ส่งงบ / สถานะ-สรุป (tool-submit) ของงบซ่อม-ลงทุน: หน้าตาเดียวกันทั้ง 2 สถานะ + สีตามงบ */
/* v22.216 ถอด override สีอ่อนของ repair/invest ออก — ผู้ใช้สั่ง 14 ก.ย. ให้ปุ่มงบซ่อม/ลงทุนสีเดียวกับงบค่าใช้จ่าย (ส่งงบ = น้ำเงินทึบ .tool-submit เดิม) */

/* ===== แถบ Topbar เปลี่ยนสีตามประเภทงบ (จุดสังเกต) — ข้อความตัดกับแถบสี ===== */
body[data-bt="expense"] .topbar, body:not([data-bt]) .topbar { background: linear-gradient(100deg, #1d5a9e, #2f70b6) !important; border-bottom: 1px solid #16487e !important; }
body[data-bt="repair"]  .topbar { background: linear-gradient(100deg, #9c5c09, #bd7813) !important; border-bottom: 1px solid #7f4c07 !important; }
body[data-bt="invest"]  .topbar { background: linear-gradient(100deg, #0e6f4d, #159067) !important; border-bottom: 1px solid #0a5539 !important; }
/* ข้อความบนแถบ = ขาว (ตัดกับสี) */
.topbar .topbar-legend, .topbar .topbar-legend span { color: #fff !important; }
.topbar .topbar-legend .rl-dot { box-shadow: 0 0 0 2px rgba(255,255,255,.55); }
/* pill/ปุ่มบนแถบ = การ์ดขาวลอยบนสี (คงข้อความเข้ม อ่านง่าย) */
body[data-bt] .topbar .year-select,
body[data-bt] .topbar .icon-btn,
body[data-bt] .topbar .user-chip.uc-clickable { background: #fff !important; border-color: rgba(255,255,255,.65) !important; box-shadow: 0 2px 8px rgba(0,0,0,.12) !important; }
body[data-bt] .topbar .user-chip.uc-clickable.uc-stb { border: 2px solid var(--uc-st) !important; box-shadow: 0 0 0 2px color-mix(in srgb, var(--uc-st) 25%, #fff) !important; }   /* v22.192 ขอบสีตามบทบาท — ต้องชนะกฎ data-bt ด้านบน */
body[data-bt] .topbar .icon-btn:hover { background: #f2f6fd !important; }

/* ===== ค้นหาหน่วยงาน + การ์ดอีเมลทดสอบ ===== */
.dept-search-bar { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.dept-search-bar input[type=search] { flex: 1; max-width: 460px; padding: 9px 13px; border: 1.5px solid var(--border-strong, #ccd5e2); border-radius: 8px; font: inherit; }
.dept-search-bar input[type=search]:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,106,191,.18); }
.em-test { margin-top: 14px; padding-top: 12px; border-top: 1px dashed #dfe4ec; }

/* ===== Admin: การ์ดงานที่ต้องทำ + เข้าสู่ระบบล่าสุด + timeline ===== */
.action-card { border-left: 3px solid var(--blue); }
.ai-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin-bottom: 12px; }
.ai-item { display: flex; align-items: flex-start; gap: 11px; padding: 11px 13px; border-radius: 9px; border: 1px solid #e3e8f0; background: #fff; text-decoration: none; transition: border-color .12s, box-shadow .12s; }
.ai-item:hover { border-color: var(--blue); box-shadow: 0 2px 10px rgba(31,43,67,.08); }
.ai-n { font-size: 24px; font-weight: 800; font-variant-numeric: tabular-nums; min-width: 32px; text-align: center; }
.ai-lb { font-size: 12.5px; color: #44536b; line-height: 1.25; }
.ai-red .ai-n { color: #d03b3b; } .ai-red { border-color: #f0c9c9; background: #fdf6f6; }
.ai-amber .ai-n { color: #c98a00; } .ai-amber { border-color: #f0dfb0; background: #fffbf2; }
.ai-grey .ai-n { color: #7b8494; }
.ai-ok .ai-n { color: #0d9488; }
/* v22.329 บรรทัดแยกงบใน "งานที่ต้องทำ" */
.ai-brk { display: inline-block; margin-top: 3px; font-size: 11px; color: #7d8695; font-variant-numeric: tabular-nums; letter-spacing: .01em; }
.ai-n { padding-top: 1px; }
.dl-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding-top: 10px; border-top: 1px dashed #dfe4ec; }
.dl-lb { font-size: 13px; font-weight: 600; color: #44536b; }
.dl-bar input[type=date] { padding: 6px 9px; border: 1px solid #ccd5e2; border-radius: 7px; font: inherit; }
.dl-status { font-size: 12.5px; font-weight: 700; }
.dl-status.dl-near { color: #c98a00; } .dl-status.dl-over { color: #d03b3b; }
tr.ll-never td { background: #fffaf1; }
.tl-list { display: flex; flex-direction: column; }
.tl-item { display: flex; gap: 11px; padding: 9px 4px; border-bottom: 1px solid #eef1f6; }
.tl-item:last-child { border-bottom: 0; }
.tl-ic { font-size: 17px; flex: none; width: 24px; text-align: center; }
.tl-act { font-size: 13px; color: #1c2b46; }
.tl-meta { font-size: 11.5px; color: #8a97ab; margin-top: 2px; }

/* ===== แถบเตือนเส้นตายส่งงบ (ฝั่งผู้กรอก) ===== */
.dl-banner { padding: 11px 16px; border-radius: 9px; margin-bottom: 14px; font-size: 14px; border: 1px solid; display: flex; align-items: center; gap: 8px; }
.dl-banner b { font-weight: 800; }
.dl-ban-soon { background: #fff8ec; border-color: #f0d9a6; color: #8a5a10; }
.dl-ban-near { background: #fff1e6; border-color: #f0c090; color: #a2500c; }
.dl-ban-over { background: #fdecec; border-color: #e6a9a9; color: #b32020; animation: dlPulse 1.6s ease-in-out infinite; }
@keyframes dlPulse { 0%,100% { box-shadow: 0 0 0 0 rgba(179,32,32,.18); } 50% { box-shadow: 0 0 0 5px rgba(179,32,32,0); } }

/* ===== ข้อความ error ในฟอร์มล็อกอิน (ติดกับช่องกรอก) ===== */
.lv-error { background: #fdecec; border: 1px solid #e6a9a9; color: #b32020; border-radius: 8px;
  padding: 9px 13px; font-size: 13.5px; font-weight: 600; margin: 2px 0 10px; text-align: left;
  animation: lvErrIn .18s ease-out; }
@keyframes lvErrIn { from { opacity: 0; transform: translateY(-3px); } to { opacity: 1; transform: none; } }

/* ===== ปุ่มลืมรหัสผ่าน (หน้า login) ===== */
.lv-forgot { display: block; margin: 10px auto 0; background: none; border: none; cursor: pointer;
  color: var(--blue); font: inherit; font-size: 13px; text-decoration: underline; text-underline-offset: 3px; opacity: .85; }
.lv-forgot:hover { opacity: 1; }

/* ===== แถบเตือนให้เปลี่ยนรหัสเริ่มต้น ===== */
.pw-reminder { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px;
  padding: 10px 15px; border-radius: 9px; font-size: 13.5px;
  background: #fff6e9; border: 1px solid #f0cf9a; color: #8a5a10; }
.pw-reminder-go { margin-left: auto; font: inherit; font-size: 12.5px; font-weight: 700; cursor: pointer;
  background: #b26a0c; color: #fff; border: none; border-radius: 6px; padding: 5px 14px; }
.pw-reminder-go:hover { background: #955a09; }

/* ===== Capex (งบซ่อมแซม/ลงทุน) — รายรายการ ===== */
.cx-need { display: inline-flex; align-items: center; gap: 5px; font-size: 11px; font-weight: 600; border-radius: 20px; padding: 2px 9px; white-space: nowrap; }
.cx-need.n1 { background: #fdecec; color: #c23a2e; }
.cx-need.n2 { background: #fbf1de; color: #a86a0c; }
.cx-pm { display: inline-block; font-size: 10px; font-weight: 700; background: #eef4fc; color: #1f5da8; border-radius: 4px; padding: 0 5px; }
.cx-flag { color: #c98a00; cursor: help; }
.cx-mos { display: flex; gap: 4px; flex-wrap: wrap; padding: 4px 0; }
.cx-mo { width: 30px; height: 26px; display: grid; place-items: center; font-size: 11.5px; border-radius: 6px; background: var(--bg, #f4f6f9); border: 1px solid var(--border-strong, #ccd5e2); color: #7b8494; cursor: pointer; user-select: none; }
.cx-mo.sel { background: var(--blue); border-color: var(--blue); color: #fff; font-weight: 700; }
.cx-grid3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
.cx-auto { background: #eef4fc; border: 1px solid #c9dbf2; border-radius: 8px; padding: 8px 12px; font-size: 12.5px; color: #3c4657; margin: 8px 0; }
.cx-drill { cursor: pointer; }
.cx-drill:hover td { background: #eef3fa; }
.cx-table td { vertical-align: top; }

/* ===== Capex 12-month grid (Hybrid entry) ===== */
.cx-grid { min-width: 1000px; }
/* v22.87 หัวตารางงบซ่อม/ลงทุน = สีตามธีมงบ (ซ่อม=อำพัน · ลงทุน=เขียว ผ่าน --navy) + ตัวอักษรขาว · เหมือน budget-table งบค่าใช้จ่าย
   · th-mtp (ม่วง) / th-sc (Base/Best/Worst) คงสีเดิม (มี !important) */
.data-table.cx-grid thead th { background: linear-gradient(180deg, var(--navy-2) 0%, var(--navy) 100%); color: #fff; border-bottom: 2px solid rgba(255,255,255,.28); z-index: 5; }
.data-table.cx-grid thead th.th-gl { color: #fff; }
.cx-grid .th-yr { color: rgba(255,255,255,.82); }
/* freeze คอลัมน์แรก (GL/รายการ) — ลำดับชั้น z ให้ถูก: มุมหัว(7) > หัวอื่น(5) > คอลัมน์แช่แข็งในตัว(4) > เซลล์เลื่อน(0)
   (เดิม cx-grid ไม่ได้ตั้ง จึงเพี้ยน: คอลัมน์แช่แข็งลอยทับหัว / หัวโปร่งเห็นทะลุ) */
.data-table.cx-grid thead th.sticky-col { z-index: 7; }
.cx-grid td.sticky-col { z-index: 4; background: var(--surface); }
.cx-grid tbody tr:hover td.sticky-col { background: #f4f7fb; }
.cx-grid tr.tr-sum td.sticky-col, .cx-grid tr.tr-pct td.sticky-col { background: #f5f8fd; }
.cx-grid .td-gl { min-width: 260px; max-width: 340px; }
.cx-grid .gl-nm { white-space: normal; }
.cx-grid .cct-tag { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 3px; }
.cx-grid .th-m, .cx-grid .cell-td { min-width: 82px; }
.cx-cell { width: 100%; text-align: right; font: inherit; font-size: 12.5px; padding: 5px 7px; border: 1px solid var(--border-strong, #ccd5e2); border-radius: 6px; background: #fff; }
.cx-cell:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,106,191,.16); background: #fff; }
.cx-cell.has-val { background: color-mix(in srgb, var(--blue) 7%, #fff); font-weight: 600; }
.cx-cell:disabled { background: #f4f6f9; color: #7b8494; border-color: #e3e9f2; }
.cx-editbtn { font: inherit; font-size: 11px; color: var(--blue); background: none; border: none; cursor: pointer; padding: 0 2px; }
.cx-editbtn:hover { text-decoration: underline; }

/* ===== รายงานนำเสนอ (canvas editor แบบ Canva) ===== */
.rpt-editor { display: flex; flex-direction: column; gap: 12px; }
.rpt-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; padding: 8px 10px; background: var(--card, #fff); border: 1px solid var(--border-strong, #ccd5e2); border-radius: 10px; position: sticky; top: 8px; z-index: 6; }
.rpt-tb { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 11px; border: 1px solid var(--border-strong, #ccd5e2); border-radius: 8px; background: #fff; color: var(--ink, #2b3a4d); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; }
.rpt-tb:hover:not(:disabled) { background: #f2f6fd; border-color: var(--blue); }
.rpt-tb:disabled { opacity: .38; cursor: not-allowed; }
.rpt-tb.rpt-ic { padding: 6px 10px; min-width: 34px; justify-content: center; }
.rpt-tb.on { background: var(--blue); color: #fff; border-color: var(--blue); }
.rpt-empty { text-align: center; padding: 46px 24px; background: #fff; border: 1px dashed var(--border-strong, #ccd5e2); border-radius: 12px; max-width: 640px; margin: 8px auto; }
.rpt-empty-ic { font-size: 44px; line-height: 1; margin-bottom: 10px; }
.rpt-empty-t { font-size: 18px; font-weight: 700; color: var(--ink, #1f2b43); }
.rpt-empty-d { font-size: 14px; color: #566476; line-height: 1.6; margin: 8px auto 20px; max-width: 460px; }
.rpt-empty-btn { font-size: 15px; padding: 11px 22px; }
.rpt-empty-note { margin-top: 14px; font-size: 13px; color: #5f6b80; }
.rpt-empty-note.warn { color: #c0322b; font-weight: 600; }
.rpt-tb.rpt-tb-gen { background: #16a34a; color: #fff; border-color: #16a34a; }
.rpt-tb.rpt-tb-gen:hover:not(:disabled) { background: #12833c; border-color: #12833c; }
.rpt-tb.rpt-del { background: #fdecec; color: #c0322b; border-color: #e6b3b3; font-size: 17px; }
.rpt-tb.rpt-del:hover:not(:disabled) { background: #f8dada; }
.rpt-sel { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border-strong, #ccd5e2); border-radius: 8px; background: #fff; cursor: pointer; }
.rpt-sel:disabled { opacity: .38; }
.rpt-grp { display: inline-flex; align-items: center; gap: 6px; }
.rpt-sep { width: 1px; height: 24px; background: var(--border); margin: 0 2px; }
.rpt-shapepick { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.rpt-shapeopt { font: inherit; font-size: 14px; padding: 12px 8px; border: 1px solid var(--border-strong, #ccd5e2); border-radius: 8px; background: #fff; cursor: pointer; }
.rpt-shapeopt:hover { background: color-mix(in srgb, var(--blue) 8%, #fff); border-color: var(--blue); }
#rptColor { width: 32px; height: 30px; padding: 0; border: 1px solid var(--border-strong); border-radius: 6px; cursor: pointer; background: none; }
#rptColor:disabled { opacity: .38; }
.rpt-shape { width: 100%; height: 100%; }
.rpt-table { width: 100%; height: 100%; border-collapse: collapse; table-layout: fixed; }
.rpt-table td { border: 1px solid #9fb2cc; padding: 2px 5px; vertical-align: top; overflow: hidden; word-break: break-word; }
.rpt-table-h td { border-color: #2f6fd0; }
.rpt-table-h tr:first-child td { background: #2f6fd0; color: #fff; font-weight: 700; text-align: center; vertical-align: middle; }
#rptCanvasWrap .rpt-table td { cursor: text; }
.rpt-stage { background: #e9edf3; border-radius: 12px; padding: 20px; display: flex; justify-content: center; }
#rptCanvasWrap { width: 100%; max-width: 900px; }
/* canvas 16:9 — ใช้ cqw ให้ตัวอักษร/ตำแหน่งสเกลตามขนาด */
.rpt-canvas { position: relative; width: 100%; aspect-ratio: 16/9; background: #fff; border-radius: 8px; overflow: hidden; container-type: size; box-shadow: 0 6px 24px rgba(11,31,77,.14); }
#rptCanvasWrap .rpt-canvas { cursor: default; }
.rpt-canvas-ro { box-shadow: none; }
.rpt-el { position: absolute; box-sizing: border-box; }
#rptCanvasWrap .rpt-el { cursor: move; }
.rpt-el-tx { width: 100%; height: 100%; overflow: hidden; white-space: pre-wrap; word-break: break-word; line-height: 1.3; padding: 2px; }
.rpt-el-image img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 3px; }
#rptCanvasWrap .rpt-el.sel { outline: 2px solid var(--blue); outline-offset: 1px; }
#rptCanvasWrap .rpt-el.editing { cursor: text; outline: 2px solid var(--blue); }
#rptCanvasWrap .rpt-el.editing .rpt-el-tx { cursor: text; }
.rpt-h { position: absolute; width: 13px; height: 13px; background: var(--blue); border: 2px solid #fff; border-radius: 3px; display: none; box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.rpt-h-br { right: -7px; bottom: -7px; cursor: nwse-resize; }
#rptCanvasWrap .rpt-el.sel .rpt-h { display: block; }
/* strip thumbnails */
.rpt-strip { display: flex; gap: 10px; overflow-x: auto; padding: 6px 2px 10px; align-items: center; }
.rpt-th { position: relative; width: 150px; flex: none; border: 2px solid transparent; border-radius: 8px; cursor: pointer; padding: 2px; background: #e9edf3; }
.rpt-th.sel { border-color: var(--blue); }
.rpt-th-in { pointer-events: none; border-radius: 5px; overflow: hidden; }
.rpt-th-n { position: absolute; left: 5px; bottom: 4px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(20,30,50,.6); border-radius: 4px; padding: 0 5px; }
.rpt-th-x { position: absolute; top: 4px; right: 4px; width: 28px; height: 28px; border: none; border-radius: 8px; background: rgba(200,40,40,.92); color: #fff; font-size: 15px; cursor: pointer; line-height: 1; display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 4px rgba(0,0,0,.3); }
.rpt-th-x:hover { background: #c0322b; transform: scale(1.08); }
/* ปุ่มลบองค์ประกอบใน toolbar — ใหญ่ ชัด */
#rptDelEl { font-size: 17px; padding: 4px 12px; background: #fdecec !important; color: #c0322b !important; border: 1px solid #e6b3b3 !important; border-radius: 8px; }
#rptDelEl:hover { background: #f8dada !important; }
.rpt-th-add { width: 54px; height: 84px; flex: none; border: 1.5px dashed var(--blue); background: color-mix(in srgb, var(--blue) 6%, #fff); color: var(--blue); border-radius: 8px; font-size: 20px; font-weight: 700; cursor: pointer; }
/* คลังรายงาน (hub) */
.rpt-hub-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; }
.rpt-hub-card { border: 1px solid var(--border-strong, #ccd5e2); border-radius: 10px; overflow: hidden; background: var(--card, #fff); display: flex; flex-direction: column; box-shadow: 0 2px 8px rgba(31,43,67,.05); }
.rpt-hub-thumb { position: relative; border-bottom: 1px solid var(--border); }
.rpt-hub-thumb .rpt-canvas { border-radius: 0; box-shadow: none; }
.rpt-hub-n { position: absolute; right: 6px; bottom: 6px; font-size: 10px; font-weight: 700; color: #fff; background: rgba(20,30,50,.7); border-radius: 5px; padding: 1px 7px; }
.rpt-hub-meta { padding: 9px 11px; flex: 1; }
.rpt-hub-card .primary-btn.small { margin: 0 11px 11px; }
/* v22.390 ปุ่มในคลังรายงาน: ดู/พิมพ์ + ดาวน์โหลด PowerPoint */
.rpt-hub-btns { display: flex; gap: 6px; margin: 0 11px 11px; }
.rpt-hub-btns .primary-btn.small { margin: 0; flex: 1; }
.rpt-hub-btns .ghost-btn.small { flex: 1; }
@media (max-width: 640px) { .rpt-hub-grid { grid-template-columns: 1fr 1fr; } }
/* read-only เด็ค + preview */
.rpt-deck { display: flex; flex-direction: column; gap: 16px; }
.rpt-deck-modal { max-height: 72vh; overflow: auto; }
.rpt-page { position: relative; }
.rpt-page-ft { text-align: right; font-size: 11px; color: #9aa7b8; margin-top: 4px; }
/* หน้าปกรายงาน (print) */
.rpt-cover { aspect-ratio: 16/9; background: linear-gradient(135deg, var(--navy, #12314f), var(--blue)); color: #fff; border-radius: 10px; display: flex; align-items: center; justify-content: center; }
.rpt-cover-t { font-size: 30px; font-weight: 800; }
.rpt-cover-d { font-size: 22px; margin-top: 10px; text-align: center; }
.rpt-cover-y { font-size: 14px; opacity: .85; margin-top: 14px; text-align: center; }
/* พิมพ์ */
#rptPrintRoot { display: none; }
@media print {
  body.rpt-printing > #root, body.rpt-printing > .toast, body.rpt-printing > #modalRoot { display: none !important; }
  body.rpt-printing #rptPrintRoot { display: block !important; }
  #rptPrintRoot .rpt-canvas, #rptPrintRoot .rpt-cover { aspect-ratio: auto; width: 100vw; height: 100vh; page-break-after: always; border-radius: 0; box-shadow: none; }
  @page { size: landscape; margin: 0; }
}
.cx-grid .th-need { min-width: 150px; }
.cx-grid .th-note { min-width: 160px; }
.cx-grid .th-mtp { min-width: 92px; }
.cx-needin { font: inherit; font-size: 11.5px; padding: 4px 6px; border: 1px solid var(--border-strong, #ccd5e2); border-radius: 6px; background: #fff; width: 100%; }
.cx-retin, .cx-mtpin { width: 100%; font: inherit; font-size: 11.5px; padding: 5px 7px; border: 1px solid var(--border-strong, #ccd5e2); border-radius: 6px; background: #fff; }
.cx-retin:focus, .cx-mtpin:focus, .cx-needin:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,106,191,.16); }
.cx-mtpin { text-align: right; }
/* toolbar เหมือนงบค่าใช้จ่าย */
.cx-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding: 10px 14px; border-bottom: 1px solid var(--border, #e6ecf5); }
.cx-tb-info { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 12.5px; color: var(--ink-2, #56617a); }
.cx-tb-btns { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
/* ซ่อน GL ที่ไม่ได้ใช้ */
.cx-grid.cx-hide-empty tbody tr.row-empty { display: none; }
/* ขยายเต็มจอ — ทำที่ทั้งการ์ด (toolbar + ตารางตามมา) เสถียร ไม่กระพริบ (แบบเดียวกับ budget-card) */
.cx-entry-card.fullscreen { position: fixed; inset: 10px; z-index: 80; margin: 0; display: flex; flex-direction: column; overflow: hidden;
  box-shadow: 0 24px 80px rgba(11,11,11,.35); border-color: var(--border-strong); border-radius: 12px; background: var(--card, #fff); }
.cx-entry-card.fullscreen .card-body { flex: 1; display: flex; flex-direction: column; overflow: hidden; padding: 8px; }
.cx-entry-card.fullscreen .cx-gridwrap { flex: 1; max-height: none; overflow: auto; }
.cx-entry-card.fullscreen .grid-toolbar, .cx-entry-card.fullscreen .cx-addrow { flex-shrink: 0; }
/* v22.128 ตอนขยายเต็มจอ: ตรึงแถว "รวมทั้งหน่วยงาน" + แถว % เทียบ ไว้ล่างสุด (ทั้ง 3 ประเภทงบ) — เฉพาะโหมดขยาย · ปกติเลื่อนตามเดิม
   --fs-pct-h = ความสูงแถว % ที่วัดจริงตอนกดขยาย (JS ใน setFs) เพื่อให้แถวรวมซ้อนอยู่เหนือแถว % พอดี */
.budget-card.fullscreen .budget-table tr.tr-pct td, .cx-entry-card.fullscreen .cx-grid tr.tr-pct td { position: sticky; bottom: 0; z-index: 6; }
.budget-card.fullscreen .budget-table tr.tr-sum td, .cx-entry-card.fullscreen .cx-grid tr.tr-sum td { position: sticky; bottom: var(--fs-pct-h, 30px); z-index: 6; box-shadow: 0 -2px 6px rgba(13,54,107,.10); }
.budget-card.fullscreen .budget-table tr.tr-sum td.sticky-col, .budget-card.fullscreen .budget-table tr.tr-pct td.sticky-col,
.cx-entry-card.fullscreen .cx-grid tr.tr-sum td.sticky-col, .cx-entry-card.fullscreen .cx-grid tr.tr-pct td.sticky-col { z-index: 8; }
/* ปุ่มเพิ่มรายการใต้ตาราง */
.cx-addrow { padding: 12px 14px; }
.btn-dashed { width: 100%; justify-content: center; border: 1.5px dashed var(--blue) !important; background: color-mix(in srgb, var(--blue) 5%, #fff) !important; color: var(--blue) !important; font-weight: 700; box-shadow: none !important; }
.btn-dashed:hover { background: color-mix(in srgb, var(--blue) 11%, #fff) !important; transform: none !important; }

/* ===== Capex workflow: กราฟเดือน + การ์ดรอบ ===== */
.cx-mchart { display: flex; align-items: flex-end; gap: 6px; height: 108px; padding: 6px 4px 0; }
.cx-mbar { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0; }
.cx-mbar i { display: block; width: 100%; max-width: 34px; border-radius: 5px 5px 0 0; background: linear-gradient(180deg, var(--blue), color-mix(in srgb, var(--blue) 55%, #fff)); }
.cx-mbar span { font-size: 10.5px; color: #8a97ab; }
.cx-period-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }


/* ---------- สายอนุมัติงบ (Flow) ---------- */
.flow-tool-card .card-body { padding: 12px 14px; }
.flow-toolbar { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.flow-search { flex: 1; min-width: 260px; font: inherit; font-size: 13.5px; padding: 9px 12px; border: 1px solid var(--border-strong); border-radius: 10px; }
.flow-legend { display: flex; gap: 8px; flex-wrap: wrap; }
.flow-legend .flow-node { pointer-events: none; }
.flow-group { margin-bottom: 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); overflow: hidden; }
.flow-group > summary { cursor: pointer; padding: 11px 16px; font-weight: 700; font-size: 14px; background: #f5f8fd; border-bottom: 1px solid var(--border); list-style: none; user-select: none; }
.flow-group > summary::-webkit-details-marker { display: none; }
.flow-group > summary::before { content: '▸ '; color: #9aa7bd; }
.flow-group[open] > summary::before { content: '▾ '; }
.flow-rows { padding: 6px 8px; }
.flow-row { padding: 9px 8px; border-bottom: 1px solid #eef1f6; }
.flow-row:last-child { border-bottom: none; }
.flow-line { display: flex; align-items: center; gap: 3px; flex-wrap: wrap; }
.flow-node { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 4px 11px 4px 8px; font-size: 12px; border: 1px solid transparent; white-space: nowrap; }
.flow-node .fn-ic { font-size: 13px; }
.flow-node .fn-tx { display: flex; flex-direction: column; line-height: 1.15; }
.flow-node .fn-tx b { font-weight: 700; font-size: 12.5px; }
.flow-node .fn-tx small { font-size: 10px; color: inherit; opacity: .72; font-weight: 400; }
.fn-filler { background: #eef4fc; border-color: #cfe0f5; color: #1c4e8a; }
.fn-appr { background: #e9f7ef; border-color: #bde3cd; color: #16744a; }
.fn-view { background: #f4f1fb; border-color: #ddd2f2; color: #5b3ca8; }
.fn-acc { background: #f3f5f8; border-color: #d7dde6; color: #45526a; }
.flow-arrow { color: #b3bdcd; font-weight: 700; margin: 0 1px; }
.flow-meta { margin-top: 6px; padding-left: 4px; }
.flow-glbtn { font: inherit; font-size: 11px; color: var(--blue); background: none; border: none; cursor: pointer; padding: 2px 0; }
.flow-glbtn:hover { text-decoration: underline; }
.flow-gllist { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 6px; }
.flow-gl { font-size: 11px; font-variant-numeric: tabular-nums; background: #f2f6fb; border: 1px solid var(--border); border-radius: 6px; padding: 1px 7px; color: var(--navy); font-weight: 600; }
@media (max-width: 700px) { .flow-node .fn-tx small { display: none; } }

/* Flow — โหมด GL + ตัวสลับมุมมอง */
.flow-vtabs { display: inline-flex; background: #eef2f8; border: 1px solid var(--border); border-radius: 999px; padding: 3px; gap: 2px; }
.flow-vtab { font: inherit; font-size: 12.5px; font-weight: 600; border: none; background: none; color: var(--ink-2); padding: 6px 14px; border-radius: 999px; cursor: pointer; }
.flow-vtab.active { background: #fff; color: var(--navy); box-shadow: 0 1px 4px rgba(13,54,107,.14); }
.flow-glblock { padding: 8px 8px 4px; border-bottom: 1px solid #eef1f6; }
.flow-glblock:last-child { border-bottom: none; }
.flow-glhead { font-size: 13px; margin-bottom: 4px; }
.flow-glblock .flow-row { padding: 5px 6px; border-bottom: none; }
.flow-glblock .flow-row + .flow-row { border-top: 1px dashed #eef1f6; }

/* เทียบ 3 ชั้น — แถวหน่วยงานคลิกดูราย GL */
.tc-drill { cursor: pointer; }
.tc-drill:hover { background: #f5f8fd; }

/* ===== v22.203 Executive dashboard ผู้ดู/ผู้อนุมัติ (xd-*) ===== */
.xd-kpis { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 1400px) { .xd-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 760px) { .xd-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.xd-kpi { position: relative; background: #fff; border: 1px solid #e3e8f0; border-radius: 14px; padding: 12px 14px 11px 16px; box-shadow: 0 1px 2px rgba(16,24,40,.04), 0 8px 20px rgba(16,24,40,.06); overflow: hidden; }
.xd-kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; background: #64748b; }
.xd-kpi.xd-ok::before { background: #16a34a; } .xd-kpi.xd-warn::before { background: #d97706; } .xd-kpi.xd-crit::before { background: #dc2626; } .xd-kpi.xd-info::before { background: #2563eb; }
.xd-kpi.xd-crit { background: linear-gradient(180deg, #fff, #fef2f2); } .xd-kpi.xd-warn { background: linear-gradient(180deg, #fff, #fffbeb); }
.xd-kpi-h { display: flex; align-items: center; justify-content: space-between; gap: 6px; min-height: 18px; }
.xd-kpi-l { font-size: 11.5px; font-weight: 700; color: #475569; letter-spacing: .01em; line-height: 1.25; }
.xd-kpi-v { font-size: 25px; font-weight: 800; color: var(--navy, #16233a); font-variant-numeric: tabular-nums; line-height: 1.1; margin: 6px 0 4px; letter-spacing: -.01em; }
.xd-kpi-v small { font-size: 12px; font-weight: 600; color: #64748b; margin-left: 4px; }
.xd-kpi-s { font-size: 12px; color: #334155; line-height: 1.45; }
.xd-kpi-s .delta { font-size: 11.5px; }
.xd-kpi-f { font-size: 11px; color: #94a3b8; margin-top: 4px; }
.xd-tag { font-size: 10.5px; font-weight: 700; padding: 2px 7px; border-radius: 999px; white-space: nowrap; background: #eef2f7; color: #475569; }
.xd-tag-ok { background: #dcfce7; color: #166534; } .xd-tag-warn { background: #fef3c7; color: #92400e; } .xd-tag-crit { background: #fee2e2; color: #991b1b; } .xd-tag-info { background: #dbeafe; color: #1e40af; }
.xd-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 3px; vertical-align: middle; }
.xd-hl { margin: 0; padding-left: 18px; display: grid; gap: 6px; font-size: 13.5px; color: #1f2937; line-height: 1.55; }
.xd-hl li::marker { color: #2563eb; }
.xd-hl b { font-variant-numeric: tabular-nums; color: #0f172a; }
.xd-up { color: #b91c1c; } .xd-dn { color: #15803d; }
.xd-note { font-size: 11.5px; color: #64748b; margin: 6px 4px 0; }
.xd-tbl td, .xd-tbl th { white-space: nowrap; }
.xd-bar { display: inline-block; vertical-align: middle; width: 110px; height: 9px; background: #e8edf5; border-radius: 5px; overflow: hidden; margin-right: 6px; }
.xd-bar i { display: block; height: 100%; background: linear-gradient(90deg, #2a78d6, #1d5a9e); }
.xd-bar-t { font-size: 12px; color: #475569; font-variant-numeric: tabular-nums; }
.xd-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 10px; }
.xd-act { border: 1px solid #e5e7eb; border-left: 5px solid #64748b; border-radius: 12px; padding: 10px 12px; background: #fafbfd; }
.xd-act.xd-crit { border-left-color: #dc2626; background: #fff5f5; } .xd-act.xd-warn { border-left-color: #d97706; background: #fffaf0; } .xd-act.xd-info { border-left-color: #2563eb; background: #f5f8ff; }
.xd-act-h { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .xd-act-h .xd-tag { margin-left: auto; }
.xd-act-t { font-size: 13px; font-weight: 700; color: #111827; margin-top: 4px; }
.xd-act-m { font-size: 12px; color: #475569; font-variant-numeric: tabular-nums; margin-top: 2px; }
.xd-act-f { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12px; color: #374151; margin-top: 6px; padding-top: 6px; border-top: 1px dashed #e5e7eb; }
.xd-ok { padding: 12px; border-radius: 10px; background: #f0fdf4; color: #166534; font-weight: 600; }
.xd-foot { font-size: 11px; color: #94a3b8; margin: 4px 2px 18px; line-height: 1.5; }
@media print { .xd-kpis { grid-template-columns: repeat(3, 1fr); } .xd-kpi, .xd-act, .card { break-inside: avoid; } .mgr-view, .page-actions { display: none !important; } }

/* v22.210 ตาราง GL ทั้งหมดของหน่วยงาน (แอดมิน drill) — พอดีหน้า ไม่ล้นแนวนอน (ผู้ใช้สั่ง 14 ก.ย.) */
.gl-fit { table-layout: fixed; width: 100%; min-width: 0; font-size: 12.5px; }
.gl-fit th, .gl-fit td { padding: 6px 7px; white-space: normal; word-break: break-word; overflow-wrap: anywhere; vertical-align: middle; }
.gl-fit th.num, .gl-fit td.num { white-space: nowrap; }
.gl-fit th:first-child, .gl-fit td:first-child { width: 21%; }
.gl-fit td:first-child .gl-code { display: inline-block; margin-right: 4px; }
.gl-fit .delta { white-space: nowrap; }
.gl-fit .anomaly { white-space: normal; font-size: 11px; line-height: 1.3; display: inline-block; }
.gl-fit td.small { font-size: 11.5px; color: #5b6b80; line-height: 1.35; }
.gl-fit th:last-child, .gl-fit td:last-child { width: 78px; white-space: nowrap; }
/* v22.235 popup เทียบงบซ่อม/ลงทุน 2 ปี จำแนกตามรายละเอียดรายการ (คอลัมน์ J) */
.cxp-table td:first-child { max-width: 380px; }
.cxp-detail { font-weight: 600; white-space: normal; word-break: break-word; }
.cxp-sec td { background: #eef2f7 !important; font-weight: 700; padding: 6px 8px !important; }
.cxp-new td { background: #f3fbf3; }
.cxp-gone td { background: #fafafa; color: #777; }
/* v22.236 จำนวน (คอลัมน์ L) ในช่องรายละเอียดรายการงบซ่อม/ลงทุน — ผู้ใช้สั่ง 14 ก.ย. */
.cx-qty { display: inline-block; background: #eef2ff; color: #3b4fb8; border: 1px solid #c9d3f5; border-radius: 6px; padding: 0 6px; font-weight: 700; font-size: 11px; line-height: 18px; }
/* v22.237 หน้าผู้ดูงบซ่อม/ลงทุน: เงินบาทคู่กีบ */
.xd-baht { font-size: 11px; color: #7a6a3a; font-weight: 500; }


/* v22.246-247 รายการ "งานที่จะซ่อม" (คอลัมน์ J) ในหน้าต่างเพิ่มรายการงบซ่อม — คลิก=ไฮไลต์ · ดับเบิลคลิก=เลือก (✓ ขาวในวงกลมเขียว) */
.cx-jlist { list-style: none; margin: 0; padding: 0; border: 1px solid #dfe4ec; border-radius: 8px; background: #fff; max-height: 240px; overflow: auto; }
.cx-jlist li { display: flex; align-items: center; gap: 10px; padding: 8px 12px; cursor: pointer; border-bottom: 1px solid #f0f2f6; user-select: none; }
.cx-jlist li:last-child { border-bottom: 0; }
.cx-jlist li::before { content: ''; flex: none; width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid #cbd5e1; box-sizing: border-box; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; }
.cx-jlist li:hover, .cx-jlist li.hl { background: #f3f6fb; }
.cx-jlist li.sel { background: #e6f7ec; font-weight: 600; }
.cx-jlist li.sel::before { content: '✓'; background: #16a34a; border-color: #16a34a; color: #fff; }
.cx-jlist li.cx-jother { color: #6b7280; font-style: italic; }
.cx-jlist.need { outline: 2px solid #d97706; box-shadow: 0 0 0 4px rgba(217, 119, 6, .18); }

/* v22.252 โหมดนำเสนอ: ปุ่ม ✕ กลางบน โผล่เมื่อเมาส์ไปขอบบน */
#presentX { display: none; }
body.present-mode #presentX { display: block; }
#presentX .present-x { position: fixed; top: -56px; left: 50%; transform: translateX(-50%); z-index: 1300; border: 0; border-radius: 0 0 14px 14px; background: #1d5a9e; color: #fff; font: inherit; font-weight: 700; font-size: 14px; padding: 10px 22px; box-shadow: 0 6px 18px rgba(13,54,107,.35); cursor: pointer; transition: top .18s ease; }
#presentX.show .present-x, #presentX .present-x:hover { top: 0; }
@media print { #presentX { display: none !important; } }

/* v22.270 ลากสไลด์ย่อในรายงานนำเสนอ (งบซ่อม/ลงทุน) เพื่อย้ายลำดับ */
.rpt-th.dragging { opacity: .45; }
.rpt-th.drop-before { box-shadow: -4px 0 0 0 var(--blue); }
.rpt-th.drop-after { box-shadow: 4px 0 0 0 var(--blue); }
.rpt-th[draggable="true"] { cursor: grab; }
.rpt-th[draggable="true"]:active { cursor: grabbing; }

/* v22.301 Dashboard ผู้กรอก capex — decision-first hero + KPI มีเกณฑ์สี */
.kpi-crit { border-left: 4px solid var(--crit-bd); }
.cx-kstrip { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.cx-hero { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 12px; margin: 4px 0 14px; border: 1px solid #dfe4ec; background: #fff; }
.cx-hero .he-ic { font-size: 30px; line-height: 1; width: 46px; height: 46px; display: flex; align-items: center; justify-content: center; border-radius: 10px; background: rgba(0,0,0,.05); flex: none; }
.cx-hero .he-body { flex: 1; min-width: 0; }
.cx-hero .he-t { font-weight: 800; font-size: 17px; }
.cx-hero .he-s { font-size: 13px; color: #55637a; margin-top: 2px; }
.cx-hero .he-list { margin: 6px 0 0; padding-left: 18px; font-size: 13px; }
.cx-hero .he-list li { margin: 2px 0; }
.cx-hero .he-btn { flex: none; background: #1c2b52; color: #fff; padding: 9px 16px; border-radius: 8px; font-weight: 700; text-decoration: none; white-space: nowrap; }
.cx-hero .he-btn:hover { background: #26356b; }
.cx-hero.he-ready { background: #eaf7ee; border-color: #a8dcb8; } .cx-hero.he-ready .he-ic { background: #cfeeda; } .cx-hero.he-ready .he-btn { background: var(--ok); }
.cx-hero.he-todo  { background: var(--warn-bg); border-color: var(--warn-bd); } .cx-hero.he-todo .he-ic { background: #f6e6bd; }
.cx-hero.he-crit  { background: var(--crit-bg); border-color: var(--crit-bd); } .cx-hero.he-crit .he-ic { background: #f6cccc; } .cx-hero.he-crit .he-btn { background: var(--crit-bd); }
.cx-hero.he-done  { background: #eef4fc; border-color: #b9d2ef; } .cx-hero.he-done .he-ic { background: #d3e4fa; }
.cx-hero.he-lock  { background: #f1f2f4; border-color: #d3d7de; }
@media (max-width: 640px) { .cx-hero { flex-wrap: wrap; } .cx-hero .he-btn { width: 100%; text-align: center; } }

/* v22.302 คิวรออนุมัติ (ผู้อนุมัติ capex) */
.cx-queue-card { border-top: 3px solid #0d9488; }
.cx-queue { display: flex; flex-direction: column; gap: 8px; }
.cx-q { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 14px; border: 1px solid #e2e7ef; border-radius: 9px; background: #fbfdff; }
.cx-q.cx-q-urg { border-color: #e6b8b8; background: #fef8f8; }
.cx-q-main { min-width: 0; flex: 1; }
.cx-q-num { font-size: 13px; color: #33415c; margin-top: 3px; }
.cx-q-act { flex: none; display: flex; gap: 6px; align-items: center; }
@media (max-width: 640px) { .cx-q { flex-wrap: wrap; } .cx-q-act { width: 100%; } }

/* v22.303 แถบคืบหน้าการส่ง-อนุมัติ capex */
.cx-pg-card .cx-pg-bar { display: flex; height: 18px; border-radius: 9px; overflow: hidden; background: #eef1f5; }
.cx-pg-card .cx-pg-seg { height: 100%; }
.cx-pg-leg { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 8px; font-size: 12.5px; color: #4a5568; }
.cx-pg-lg { display: inline-flex; align-items: center; gap: 5px; }
.cx-pg-lg i { width: 11px; height: 11px; border-radius: 3px; display: inline-block; }

/* v22.307 ช่องสมมติฐาน 3 เคสที่ยังว่าง (งบซ่อมรอบงบต้นปี) = ถ้าบังคับกรอกก่อนส่ง */
.cell.cx-scin.sc-miss, .cell.cx-scin.sc-miss:focus { background: #fdecec; box-shadow: inset 0 0 0 1.5px #e07b7b; }
.cell.cx-scin.sc-miss::placeholder { color: #c0392b; opacity: .85; }

/* v22.310 Premium hero band (dashboard ผู้ดู) + KPI hover lift */
.xd-hero { display: flex; align-items: center; justify-content: space-between; gap: 22px; flex-wrap: wrap;
  background: linear-gradient(135deg, #17264a 0%, #223357 52%, #2b3f6b 100%); color: #fff;
  border-radius: 18px; padding: 20px 24px; margin: 4px 0 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,.10), 0 18px 40px rgba(23,38,74,.22); position: relative; overflow: hidden; }
.xd-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 140% at 100% 0%, rgba(120,160,255,.20), transparent 55%); pointer-events: none; }
.xd-hero-l { min-width: 0; position: relative; z-index: 1; }
.xd-hero-eyebrow { font-size: 11.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: rgba(203,217,248,.72); }
.xd-hero-title { font-size: 25px; font-weight: 800; letter-spacing: -.01em; margin: 3px 0 3px; line-height: 1.12; }
.xd-hero-meta { font-size: 12.5px; color: rgba(207,219,245,.78); }
.xd-hero-stats { display: flex; align-items: stretch; gap: 0; position: relative; z-index: 1; flex-wrap: wrap; }
.xd-hs { display: flex; flex-direction: column; justify-content: center; gap: 3px; padding: 2px 20px; border-left: 1px solid rgba(255,255,255,.12); min-width: 128px; }
.xd-hs:first-child { border-left: 0; }
.xd-hs-l { font-size: 11px; font-weight: 600; color: rgba(200,214,244,.72); letter-spacing: .01em; }
.xd-hs-v { font-size: 26px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.05; letter-spacing: -.01em; }
.xd-hs-v i { font-size: 12px; font-weight: 600; font-style: normal; color: rgba(200,214,244,.66); margin-left: 3px; }
.xd-hs-v.hs-ok { color: #5fe39b; } .xd-hs-v.hs-warn { color: #ffcb52; } .xd-hs-v.hs-crit { color: #ff8a8a; }
.xd-hs-s { font-size: 11px; color: rgba(200,214,244,.72); }
/* v22.383 %Δ บน hero เข้ม — เดิม color:inherit ทำให้กลืนพื้น มองไม่เห็น → ใส่ชิปโปร่ง + สีสด */
.xd-hs-s .delta { background: rgba(255,255,255,.16); padding: 1px 8px; border-radius: 999px; font-weight: 800; }
.xd-hs-s .delta.up { color: #ff9d9d; } .xd-hs-s .delta.down { color: #74e6a6; }
.xd-hs-s .delta.up.inv { color: #74e6a6; } .xd-hs-s .delta.down.inv { color: #ff9d9d; }
.xd-hs-s .delta.neutral { color: rgba(223,232,250,.92); }
@media (max-width: 760px) { .xd-hero { padding: 16px 18px; } .xd-hero-stats { width: 100%; } .xd-hs { flex: 1; padding: 2px 12px; } .xd-hs:first-child { padding-left: 0; } .xd-hero-title { font-size: 21px; } }
.xd-kpi { transition: transform .15s ease, box-shadow .15s ease; }
.xd-kpi:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(16,24,40,.06), 0 16px 34px rgba(16,24,40,.12); }
@media print { .xd-hero { box-shadow: none; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .xd-kpi:hover { transform: none; } }

/* v22.317 dropdown สถานะ (หน้ารายชื่อหน่วยงาน) ให้เข้าชุดกับช่องค้นหา */
.dept-search-bar select { padding: 9px 36px 9px 13px; border: 1.5px solid var(--border-strong, #ccd5e2); border-radius: 8px; font: inherit; font-weight: 600; color: var(--navy, #16233a); background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%2355637a' stroke-width='1.8' stroke-linecap='round'/></svg>") no-repeat right 13px center; -webkit-appearance: none; appearance: none; cursor: pointer; height: 41px; }
.dept-search-bar select:hover { border-color: #9fb3d1; }
.dept-search-bar select:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 2px rgba(37,106,191,.18); }

/* v22.322 ปุ่ม ＋แถว/－แถว ติดใต้ตารางในสไลด์ (โหมดแก้ไข) — โผล่เมื่อชี้/เลือกตาราง */
.rpt-tbl-tools { position: absolute; left: 0; bottom: 100%; margin-bottom: 3px; display: none; gap: 4px; z-index: 5; }
#rptCanvasWrap .rpt-el:hover .rpt-tbl-tools, #rptCanvasWrap .rpt-el.sel .rpt-tbl-tools { display: inline-flex; }
.rpt-tbl-tools button { font: inherit; font-size: 11px; font-weight: 700; line-height: 1; padding: 4px 8px; border-radius: 6px; border: 1px solid #b8cce6; background: #fff; color: #1c2b52; cursor: pointer; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.rpt-tbl-tools button:hover { background: #eaf2ff; border-color: #2f6fd0; }
@media print { .rpt-tbl-tools { display: none !important; } }

/* v22.323 ตารางในสไลด์: แถวมีความสูงขั้นต่ำ (แถวเปล่าที่เพิ่มไม่ถูกบีบเป็นเส้น) · ช่องว่างมีพื้นที่ให้ดับเบิลคลิกพิมพ์ */
.rpt-table tr { height: 1.75em; }
.rpt-table td:empty::before { content: "\00a0"; }
#rptCanvasWrap .rpt-el-table .rpt-table { height: auto; min-height: 100%; }

/* v22.328 การ์ดเงินรายไตรมาส — กราฟเต็มกว้างบน · ตารางต่อท้ายล่าง (ผู้ใช้สั่ง) */
.qtr-wrap { display: flex; flex-direction: column; gap: 14px; }
.qtr-chart { width: 100%; }
.qtr-table { width: 100%; }
.qtr-table th, .qtr-table td { white-space: nowrap; }
.qtr-table td:first-child b { white-space: normal; }
.qtr-table td.qtr-peak, .qtr-table th.qtr-peak { background: #fff7e6; }
.qtr-table th.qtr-peak { box-shadow: inset 0 -3px 0 #e6a100; }