/* ═══════════════════════════════════════════════════════════════
   Eastern Honda — ธีมเดียวกับ dashwork-app (navy · น้ำเงิน · ทอง · IBM Plex Sans Thai)
   แทน css เดิมทั้งชุด (reset/grid/style/forms/tables) โดยจัดหน้าตาให้ class เดิมของทุกหน้า
   ★ สีทั้งหมดอ้างตัวแปรด้านล่าง ห้ามใส่เลขสีดิบในหน้า ★
   หน้าพิมพ์ (meta.print) ไม่โหลดไฟล์นี้ — เอกสารที่พิมพ์ต้องหน้าตาเหมือนเดิม
   ═══════════════════════════════════════════════════════════════ */
:root {
  --navy: #0F2A4A; --navy-hover: #1b3f68; --blue: #1F5FA8; --blue-hover: #194f8c; --gold: #C9A227;
  --red: #E31E24;                       /* แดง Honda (โลโก้) ใช้เน้นนิดเดียว */
  --bg: #f3f5f9; --card: #ffffff; --surface-2: #f7f9fc; --sum-bg: #eef2f7; --row-hover: #f5f9ff;
  --ink: #1b2533; --ink-soft: #5b6676; --ink-muted: #8a94a3;
  --line: #e3e8ef; --line-strong: #cfd7e3; --focus: rgba(31, 95, 168, .25);
  --ok: #1E8E5A; --ok-bg: #e7f6ee; --warn: #9a6b00; --warn-bg: #fdf6dd; --danger: #C0392B; --danger-bg: #fdecea; --info-bg: #eaf1fb;
  --topbar-muted: #9db8d8; --on-bg: #eaf1fb;
  --radius: 10px; --radius-lg: 14px; --shadow: 0 1px 2px rgba(15, 42, 74, .06), 0 2px 8px rgba(15, 42, 74, .05);
  --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px;
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body { font: 14px/1.6 'IBM Plex Sans Thai', 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; background: var(--bg); color: var(--ink); -webkit-font-smoothing: antialiased; }
a { color: var(--blue); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { color: var(--navy); margin: 0 0 var(--s2); line-height: 1.35; }
h2 { font-size: 20px; font-weight: 700; } h3 { font-size: 16px; } h4 { font-size: 15px; } h5 { font-size: 14px; font-weight: 600; color: var(--ink); } h6 { font-size: 13px; }
p { margin: 0 0 var(--s2); }
small { color: var(--ink-soft); }
img { max-width: 100%; }

/* ── แถบบน (เหมือน dashwork-app TopBar) ───────────────────── */
.tb { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: var(--s4); padding: 8px 22px; background: var(--navy); color: #fff; }
.tb-logo { display: flex; align-items: center; gap: 10px; color: #fff; font-weight: 700; white-space: nowrap; }
.tb-logo:hover { text-decoration: none; }
.tb-logo img { height: 34px; width: auto; border-radius: 6px; background: var(--red); }
.tb-sum { display: flex; align-items: center; gap: 9px; min-height: 40px; padding: 6px 12px 6px 8px; border: 0; border-radius: 8px; background: none; color: #fff; font: inherit; cursor: pointer; }
.tb-sum:hover, .tb-sum--open { background: var(--navy-hover); }
.tb-hamb { font-size: 18px; line-height: 1; }
.tb-crumb { font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 52vw; }
.tb-crumb i { font-style: normal; font-weight: 400; opacity: .55; margin: 0 6px; }
.tb-caret { font-size: 10px; opacity: .7; }
.tb-spacer { flex: 1; }
.tb-who { font-size: 13px; color: var(--topbar-muted); white-space: nowrap; }
.tb-pop { position: absolute; left: 0; right: 0; top: 100%; z-index: 60; background: var(--card); color: var(--ink); border-bottom: 3px solid var(--gold); box-shadow: 0 12px 40px rgba(15, 42, 74, .18); max-height: 80vh; overflow-y: auto; }
.tb-pop-in { max-width: 1280px; margin: 0 auto; padding: 14px 22px 18px; }
.tb-grid { display: grid; gap: 14px 20px; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); }
@media (min-width: 1100px) { .tb-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); } }  /* 6 หมวดในแถวเดียว */
.tb-grid h4 { margin: 0 0 5px; font-size: 11px; font-weight: 700; letter-spacing: .8px; color: var(--ink-soft); }
.tb-grid a { display: block; padding: 5px 9px; border-radius: 7px; color: var(--ink); line-height: 1.35; font-size: 14px; }
.tb-grid a:hover { background: var(--surface-2); text-decoration: none; }
.tb-grid a.on { background: var(--on-bg); box-shadow: inset 3px 0 0 var(--gold); font-weight: 600; }
.tb-grid a.off { color: var(--ink-muted); pointer-events: none; }
.tb-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink-soft); }
.tb-foot button { border: 0; background: none; color: var(--danger); font: inherit; cursor: pointer; padding: 8px; }
.tb-foot a { margin-right: var(--s4); }

/* ── พื้นที่เนื้อหา (แทน #wrapper/container_8/grid เดิม) ───── */
.app-main { max-width: 1280px; margin: 0 auto; padding: var(--s6) 22px 60px; }
.app-main .container_8, .app-main .main-section, .app-main .grid_8 { width: auto; margin: 0; padding: 0; float: none; }
.clearfix::after, .clear { content: ''; display: block; clear: both; }
.grid_4, .grid_3, .grid_2, .grid_5, .grid_6 { float: none; }
.alpha, .omega { margin-left: 0; margin-right: 0; }
.fl { float: left !important; } .fr { float: right !important; } .ac { text-align: center !important; } .ar { text-align: right !important; } .al { text-align: left !important; }

/* การ์ด (main-content เดิม) — ฟอร์มกล่องเล็ก (grid_4) กว้างพอดีฟอร์ม · ตารางเต็มความกว้าง */
.main-content { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow); margin: 0 0 var(--s5); position: relative; overflow: hidden; }
.main-content.grid_4, .main-content.grid_3 { max-width: 640px; }
.main-content.grid_5, .main-content.grid_6 { max-width: 900px; }
.main-content > header { padding: var(--s4) var(--s5) var(--s3); border-bottom: 1px solid var(--line); background: var(--card); }
.main-content > header h2 { margin: 0; font-size: 18px; font-family: inherit; }
.main-content > header small { display: block; margin-top: 2px; font-size: 13px; }
.main-content > header h5 { margin: 2px 0; font-weight: 500; }
.main-content > section { padding: var(--s5); overflow-x: auto; }
.main-content > section.with-table { padding: 0; }
.main-content > section h3 { border-bottom: 1px solid var(--line); padding-bottom: var(--s2); margin-bottom: var(--s3); }

/* ── ฟอร์ม (form.form เดิม: label ซ้าย + ช่องขวา) ─────────── */
.form .clearfix, form .clearfix { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2) var(--s3); margin-bottom: var(--s3); }
.form label, form .clearfix > label { flex: 0 0 170px; font-weight: 600; color: var(--ink); font-size: 13px; text-align: right; }
.form label small, form .clearfix > label small { display: block; font-weight: 400; font-size: 11px; color: var(--ink-muted); }
.form label em, label em { color: var(--danger); font-style: normal; margin-left: 2px; }
.form .action, .action { display: flex; gap: var(--s2); flex-wrap: wrap; margin: var(--s3) 0 0; padding-left: 182px; }
input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], input[type=time], input[type=search], input:not([type]), select, textarea {
  font: inherit; font-size: 14px; color: var(--ink); background: #fff; border: 1px solid var(--line-strong); border-radius: 8px; padding: 8px 11px; min-height: 40px; min-width: 0; max-width: 100%;
}
.form input[type=text], .form input[type=password], .form input[type=date], .form input[type=number], .form input:not([type]), .form select, .form textarea { flex: 1 1 240px; max-width: 420px; }
input:focus, select:focus, textarea:focus { outline: 0; border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus); }
input:disabled, select:disabled, textarea:disabled { background: var(--surface-2); color: var(--ink-soft); }
textarea { min-height: 80px; }
input[type=checkbox], input[type=radio] { width: 17px; height: 17px; accent-color: var(--blue); vertical-align: middle; }
/* select แบบ ui-select เดิม → ใช้ select จริงที่มองเห็นได้เลย (เดิมซ้อนโปร่งใส ทำให้ค่าว่างดูเหมือนไม่มีตัวเลือก) */
.ui-select { display: inline-flex; flex: 1 1 240px; max-width: 420px; position: relative !important; }
.ui-select .ui-select-value, .ui-select .ui-select-button { display: none !important; }
.ui-select select { position: static !important; opacity: 1 !important; inset: auto !important; width: 100% !important; height: auto !important; cursor: pointer; }

/* ── ปุ่ม ──────────────────────────────────────────────── */
button, .button, input[type=submit], input[type=button] { font: inherit; }
.button, button.button, input[type=submit], input[type=button], .form button, form button {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 40px; padding: 8px 18px; border-radius: 8px; border: 1px solid var(--blue); background: #fff; color: var(--blue); font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; line-height: 1.2;
}
.form button[type=submit], form button[type=submit], .button-blue, input[type=submit], .button.primary { background: var(--blue); color: #fff; border-color: var(--blue); }
.form button[type=submit]:hover, form button[type=submit]:hover, input[type=submit]:hover { background: var(--blue-hover); }
.button:hover, button.button:hover { background: var(--surface-2); text-decoration: none; }
.button:disabled, button:disabled { opacity: .5; cursor: not-allowed; }
.button .accept, .button span:empty { display: none; }
.button-red, .button.danger { border-color: var(--danger); color: var(--danger); }

/* ── ตาราง (datatable / imagetable / ตารางทั่วไปในการ์ด) ───── */
table { border-collapse: collapse; }
.main-content table, table.datatable, table.imagetable, table.full { width: 100%; font-size: 13.5px; background: #fff; }
.main-content table th, table.datatable th, table.imagetable th {
  background: var(--navy); color: #fff; font-weight: 600; padding: 11px 12px; text-align: left; white-space: nowrap; border: 0; border-right: 1px solid rgba(255, 255, 255, .06);
}
.main-content table th a, table.datatable th a { color: #fff; }
.main-content table th a:hover { text-decoration: none; opacity: .85; }
.main-content table th div, table.imagetable th div { text-align: inherit !important; }
.main-content table td, table.datatable td, table.imagetable td { padding: 10px 12px; border: 0; border-bottom: 1px solid var(--line); background: #fff; vertical-align: top; white-space: nowrap; }
.main-content table tbody tr:hover td { background: var(--row-hover); }
.main-content table tfoot td, .main-content table tr.total td { background: var(--sum-bg); font-weight: 700; }
.main-content table td.column-selected { background: var(--row-hover); }
th a.sort-asc::after { content: ' ▲'; font-size: 9px; } th a.sort-desc::after { content: ' ▼'; font-size: 9px; }
.main-content table input[type=text], .main-content table select { min-height: 34px; padding: 5px 8px; }
ul.pagination { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; padding: var(--s3) var(--s4); margin: 0; border-top: 1px solid var(--line); }
ul.pagination a { display: inline-flex; min-width: 34px; height: 34px; align-items: center; justify-content: center; padding: 0 10px; border-radius: 8px; border: 1px solid var(--line-strong); color: var(--ink); background: #fff; font-size: 13px; }
ul.pagination a:hover { background: var(--surface-2); text-decoration: none; }
ul.pagination a.current { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ── กล่องข้อความ ─────────────────────────────────────── */
.message { border-radius: var(--radius); padding: var(--s3) var(--s4); margin: var(--s3) 0; border: 1px solid transparent; background: var(--info-bg); color: var(--navy); }
.message h3 { margin: 0 0 2px; font-size: 14px; color: inherit; }
.message p { margin: 0; color: inherit; }
.message.error { background: var(--danger-bg); color: var(--danger); border-color: rgba(192, 57, 43, .2); }
.message.success { background: var(--ok-bg); color: var(--ok); border-color: rgba(30, 142, 90, .2); }
.message.warning { background: var(--warn-bg); color: var(--warn); }
.message.notice, .message.info { background: var(--info-bg); color: var(--navy); }
.red_alert, .red { color: var(--danger); } .added { color: var(--blue); }

/* ── หน้าเข้าสู่ระบบ ───────────────────────────────────── */
body.login { background: linear-gradient(160deg, var(--navy) 0%, var(--navy-hover) 55%, var(--bg) 55.1%); min-height: 100vh; }
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--s6); }
.login-card { width: 100%; max-width: 400px; background: var(--card); border-radius: 18px; box-shadow: 0 20px 60px rgba(15, 42, 74, .25); padding: var(--s8) var(--s8) var(--s6); }
.login-card .logo { display: block; width: 150px; margin: 0 auto var(--s4); border-radius: 12px; }
.login-card h1 { text-align: center; font-size: 20px; margin-bottom: var(--s1); }
.login-card .sub { text-align: center; color: var(--ink-soft); font-size: 13px; margin-bottom: var(--s5); }
.login-card .fld { display: block; margin-bottom: var(--s3); }
.login-card .fld span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 4px; }
.login-card .fld input { width: 100%; max-width: none; }
.login-card .go { width: 100%; min-height: 46px; margin-top: var(--s2); background: var(--blue); color: #fff; border: 0; border-radius: 10px; font-weight: 700; font-size: 15px; cursor: pointer; }
.login-card .go:hover { background: var(--blue-hover); }
.login-card .go:disabled { opacity: .6; }
.login-card .row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; color: var(--ink-soft); margin-top: var(--s2); }
.login-card .note { font-size: 12px; color: var(--ink-muted); text-align: center; margin-top: var(--s5); }
.pw-wrap { position: relative; }
.pw-wrap button { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); border: 0; background: none; color: var(--ink-soft); cursor: pointer; font-size: 12px; padding: 6px; min-height: 0; }

/* หน้า/เนื้อหาที่ซ่อนตอนพิมพ์ */
@media print { .tb, .no-print { display: none !important; } body { background: #fff; } .main-content { box-shadow: none; border: 0; } }

/* ── มือถือ ───────────────────────────────────────────── */
@media (max-width: 760px) {
  .tb { padding: 6px 10px; gap: 8px; } .tb-who { display: none; }
  .app-main { padding: var(--s4) 10px 40px; }
  .form label, form .clearfix > label { flex: 1 1 100%; text-align: left; }
  .form .action, .action { padding-left: 0; }
  .form input[type=text], .form select, .ui-select { max-width: none; }
  .tb-grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
}

/* ── หน้ารวมแบบแท็บ ─────────────────────────────────── */
.hub-head { margin: 0 0 var(--s4); }
.hub-head h1 { font-size: 22px; margin: 0 0 var(--s3); }
.hub-tabs { display: flex; flex-wrap: wrap; gap: 6px; border-bottom: 2px solid var(--line); }
.hub-tabs button { border: 0; background: none; font: inherit; font-size: 14px; font-weight: 600; color: var(--ink-soft); padding: 9px 14px; margin-bottom: -2px; border-bottom: 2px solid transparent; cursor: pointer; border-radius: 8px 8px 0 0; min-height: 0; }
.hub-tabs button:hover { color: var(--navy); background: var(--surface-2); }
.hub-tabs button.on { color: var(--navy); border-bottom-color: var(--gold); }