/* =====================================================================
   ธีม "เขียว SWI" — เขียวเข้ม + เขียว SWI · ฟอนต์ Prompt (เส้นบาง) · ชื่อตัวแปร navy/gold คงไว้ = สีหลัก/สีเน้น
   โหลดต่อจาก style.css ทับค่าสี/ฟอนต์ทั้งหมด (เปลี่ยนธีม = แก้ไฟล์นี้ไฟล์เดียว)
   ===================================================================== */
:root {
  --navy: #0b6b3a; --navy-2: #095a31; --navy-3: #2e9e45;
  --gold: #2e9e45; --gold-2: #1f7a3d; --gold-soft: #e8f5ea; --gold-text: #0b6b3a;
  --text: #334155; --muted: #64748b; --faint: #94a3b8;
  --line: #e2e8f0; --line-2: #eef2f6; --canvas: #f4f6f9; --surface: #ffffff;
  --ok: #15803d; --ok-soft: #ecfdf3; --warn: #a16207; --warn-soft: #fffbeb; --bad: #b4534b; --bad-soft: #f9eeec;
  --bs-body-font-family: 'Prompt', 'Segoe UI', Tahoma, sans-serif;
}
body { font-family: 'Prompt', 'Segoe UI', Tahoma, sans-serif; font-weight: 300; background: var(--canvas); color: var(--text); font-size: 14.5px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
b, strong, th, legend, h1, h2, h3, h4, h5, .fw-bold, .fw-semibold { font-weight: 500 !important; }
.r, .kpi .v, .mono, .calc .l b, input[type=number], .scale-num { font-variant-numeric: tabular-nums; }

/* ---------- แถบบน: กรมท่าเข้ม ---------- */
.app-nav { background: var(--navy) !important; border-bottom: 2px solid var(--gold); box-shadow: none; padding-top: .45rem; padding-bottom: .45rem; }
.app-nav .navbar-brand { gap: 12px !important; }
.app-logo { background: #fff; border-radius: 6px; padding: 3px 7px; height: 38px; }
.brand-text { color: #fff; font-weight: 500; font-size: 1.02rem; letter-spacing: .6px; border-left: 1px solid rgba(255,255,255,.18); padding-left: .8rem; }
.brand-text .text-muted { color: var(--gold-text) !important; font-weight: 300 !important; letter-spacing: 0; }
.brand-sub { color: #93a5b8; font-weight: 300; letter-spacing: .3px; }
.app-nav .nav-link { color: #b6c3d1 !important; font-weight: 300; font-size: 14.5px; }
.app-nav .nav-link:hover { color: #fff !important; }
.app-nav .nav-link.active { color: var(--gold-text) !important; border-bottom: 2px solid var(--gold); font-weight: 400; }
.app-nav .navbar-toggler { border-color: rgba(255,255,255,.3); }
.app-nav .navbar-toggler-icon { filter: invert(1); }
.app-nav .dropdown-menu { border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 8px; box-shadow: 0 10px 28px rgba(19,41,61,.12) !important; padding: .35rem;
  --bs-dropdown-link-active-bg: var(--gold-soft); --bs-dropdown-link-active-color: var(--navy); --bs-dropdown-link-hover-bg: #f4f6f9; }
.app-nav .dropdown-item { border-radius: 6px; font-size: 14px; font-weight: 300; color: var(--text); }
.app-nav .dropdown-item.active, .app-nav .dropdown-item:active { background: var(--gold-soft); color: var(--navy); font-weight: 400; }
.menu-sub { color: var(--faint); font-size: 11px; font-weight: 300; }
.rate-chip { color: #93a5b8 !important; font-weight: 300; }
.rate-chip b { color: var(--gold-text) !important; font-weight: 400 !important; }
.app-nav .btn-light { background: transparent; border: 1px solid rgba(255,255,255,.22) !important; color: #e5ebf2; font-size: 13.5px; font-weight: 300; }
.app-nav .btn-light:hover, .app-nav .btn-light.show { background: rgba(255,255,255,.08); color: #fff; }
.app-nav .btn-light .badge { background: rgba(232,213,169,.16) !important; color: var(--gold-text) !important; font-weight: 400; }
.ico { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.4; vertical-align: -2px; }
.sync-chip { font-size: 12px; font-weight: 300; padding: 3px 11px; background: transparent; border: 1px solid rgba(255,255,255,.22); color: #c9d4e0; }
.sync-chip.on { background: transparent; border-color: rgba(125,190,150,.45); color: #bfe3cc; }
.sync-chip.on::before { color: #7dbe96; }
.sync-chip.off { background: transparent; border-color: rgba(230,140,130,.5); color: #f3c4bd; }
.sync-chip.off::before { color: #e68c82; }

/* ---------- หัวหน้า ---------- */
main { padding-top: .75rem; }
main h2 { font-size: 1.35rem; font-weight: 400 !important; color: var(--navy); letter-spacing: .1px; }
main h3 { font-size: 15px; font-weight: 400 !important; color: var(--navy); }
.page-sub { color: var(--muted); font-size: 13.5px; font-weight: 300; }

/* ---------- กล่อง ---------- */
.panel, .kpi { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 1px 2px rgba(19,41,61,.03); }
.panel { padding: 18px 20px; }
.kpi { padding: 16px 20px; }
.kpi .k { font-size: 12.5px; font-weight: 300; color: var(--muted); letter-spacing: .2px; }
.kpi .v { font-size: 27px; font-weight: 400; color: var(--navy); letter-spacing: -.2px; margin-top: 3px; }
.kpi .v small { font-size: 13px; color: var(--muted); font-weight: 300; }
.kpi .s { font-size: 12px; color: var(--faint); font-weight: 300; }
.kpi.kpi-main { border: 1px solid var(--line); border-top: 2px solid var(--gold); border-radius: 0 0 10px 10px; }
.kpi.kpi-main .v { color: var(--navy); }
.kpi-good { color: var(--ok) !important; font-weight: 400 !important; }
.kpi-bad { color: var(--bad) !important; font-weight: 400 !important; }

/* ---------- ตาราง: เส้นแนวนอนบาง หัวตารางไม่มีพื้นสี ---------- */
.tw .table { font-size: 13.5px; }
.tw .table th { background: transparent; color: var(--muted); font-weight: 400 !important; font-size: 12.5px; border-color: var(--line) !important; padding-top: .6rem; padding-bottom: .6rem; }
.tw .table td { color: var(--text); border-color: var(--line-2) !important; padding-top: .55rem; padding-bottom: .55rem; }
.table-bordered > :not(caption) > * > * { border-left-width: 0; border-right-width: 0; }
.table-hover > tbody > tr:hover > * { --bs-table-hover-bg: #f8f9fb; }
.table-light, .table-light > * { --bs-table-bg: #fafbfc; }
.mono { color: var(--navy); font-weight: 400; }
.bad-v { color: var(--bad); font-weight: 400; }

/* ---------- สถานะ: ตัวหนังสือสี + จุด ไม่มีพื้นสีจัด ---------- */
.pill { font-weight: 400; font-size: 12px; padding: 1px 0; background: transparent !important; border: 0; border-radius: 0; white-space: nowrap; }
.pill::before { content: ''; display: inline-block; width: 6px; height: 6px; border-radius: 50%; margin-right: 6px; vertical-align: 1px; background: currentColor; opacity: .85; }
.p-ok { color: var(--ok); } .p-warn { color: var(--warn); } .p-bad { color: var(--bad); } .p-mute { color: var(--muted); }
.steps span { background: #eef1f5; color: var(--muted); font-weight: 300; }
.steps span.on { background: var(--navy); color: #fff; }

/* ---------- ฟอร์ม ---------- */
form label { color: var(--text); font-weight: 400; font-size: 13px; }
input:not([type=checkbox]):not([type=hidden]), select, textarea { font-family: 'Prompt', sans-serif; font-weight: 300; border: 1px solid #d5dce5; border-radius: 7px; color: var(--navy); font-size: 14.5px; }
input:focus, select:focus, textarea:focus { border-color: var(--navy-3); box-shadow: 0 0 0 3px rgba(44,74,102,.12); }
fieldset { background: #fafbfc; border: 1px solid var(--line); border-radius: 8px; }
legend { color: var(--gold-2); font-size: 12.5px; letter-spacing: .3px; }
.calc { background: var(--gold-soft); border: 1px solid #ece2cc; }
.calc .tot b { color: var(--navy); }

/* ---------- ปุ่ม: กรมท่าเป็นหลัก ทองใช้เน้น ---------- */
.btn { font-family: 'Prompt', sans-serif; font-weight: 400; border-radius: 7px; letter-spacing: .2px; }
.btn-success { --bs-btn-bg: var(--navy); --bs-btn-border-color: var(--navy); --bs-btn-color: #fff; --bs-btn-hover-bg: var(--navy-2); --bs-btn-hover-border-color: var(--navy-2);
  --bs-btn-active-bg: #0c1d2c; --bs-btn-active-border-color: #0c1d2c; --bs-btn-disabled-bg: #8a99aa; --bs-btn-disabled-border-color: #8a99aa; }
.btn-outline-success { --bs-btn-color: var(--navy); --bs-btn-border-color: #cfd7e1; --bs-btn-hover-bg: var(--navy); --bs-btn-hover-border-color: var(--navy);
  --bs-btn-hover-color: #fff; --bs-btn-active-bg: var(--navy); --bs-btn-active-border-color: var(--navy); }
.btn-group .btn { font-size: 13px; }
.badge.bg-success-subtle { background: var(--gold-soft) !important; color: var(--gold-2) !important; }
a { color: var(--navy-3); }
.pager .pagination .page-link { color: var(--navy); }
.pager .pagination .active .page-link { background: var(--navy); border-color: var(--navy); color: #fff; }

/* ---------- กราฟ / แจ้งเตือน ---------- */
.chart-title { font-size: 15px; font-weight: 400; color: var(--navy); }
.chart-sub { color: var(--faint); font-weight: 300; }
.alert { border-radius: 8px; font-size: 14px; font-weight: 300; }
.alert-success { background: var(--ok-soft); border-color: #d4e6da; color: #2f5f45; }
.alert-danger { background: var(--bad-soft); border-color: #efd3cf; color: #8f3d36; }
.alert-warning { background: var(--warn-soft); border-color: #eadfc6; color: #7d6434; }

/* ---------- สถานีชั่ง / ตาราง batch / การ์ด ---------- */
.scale-box { background: var(--navy); border-color: var(--navy-3); }
.batch-table tr.saved td { background: var(--ok-soft); }
.batch-table tr:focus-within td { background: #f4f6f9; }
.open-item { border-left-color: var(--gold); }
.open-item.sel { background: var(--gold-soft); border-left-color: var(--navy); }

/* ---------- หน้าล็อกอิน ---------- */
.login-page { background: var(--navy); }
.login-box { border: 0; border-top: 3px solid var(--gold); border-radius: 12px; box-shadow: 0 24px 60px rgba(0,0,0,.25) !important; }
.login-box .brand-text { color: var(--navy); border-left-color: var(--line); }
.login-box .brand-text .text-muted { color: var(--gold-2) !important; }
.login-box .brand-sub { color: var(--muted); }
.login-box .app-logo { background: transparent; padding: 0; }
.login-box h5 { font-weight: 400 !important; color: var(--navy); }

/* ---------- ไอคอน / หัวหน้าเพจ / ปุ่ม ---------- */
.ti { font-size: 1.1em; vertical-align: -.12em; line-height: 1; }
main h2 .ti { color: var(--gold); font-size: 1.05em; margin-right: 4px; }
.chart-title .ti, main h3 .ti { color: var(--gold); margin-right: 3px; }
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.page-head .page-sub { margin-bottom: 0; }
.page-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.page-actions .btn .ti, .panel-tools .btn .ti, main h3 .btn .ti { font-size: 1.05em; margin-right: 2px; color: inherit; }
.min-w-0 { min-width: 0; }
.panel { position: relative; }
.panel-tools { position: absolute; top: 14px; right: 16px; display: flex; gap: 4px; }
.panel-tools .btn { padding: 2px 9px; font-size: 12px; }
.panel .chart-sub { padding-right: 190px; }
.flash-ring { box-shadow: 0 0 0 3px rgba(184,149,90,.45) !important; transition: box-shadow .3s; }

/* เมนู: ไอคอนหน้ารายการ */
.app-nav .nav-link .ti { margin-right: 3px; opacity: .85; }
.app-nav .dropdown-item { display: flex; gap: 10px; align-items: flex-start; }
.app-nav .dropdown-item .mi { width: 22px; flex: none; color: var(--gold); font-size: 17px; padding-top: 1px; }
.app-nav .dropdown-item.text-danger .ti, .app-nav .dropdown-item .ti { margin-right: 4px; }

/* ---------- ปุ่มลัดหน้าภาพรวม ---------- */
.quick-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 14px; }
@media (max-width: 992px) { .quick-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.quick-tile { display: flex; align-items: center; gap: 12px; padding: 12px 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); transition: border-color .15s, background .15s; }
.quick-tile:hover { border-color: var(--gold); background: #fffdf9; color: var(--navy); }
.quick-tile .qt-ic { width: 38px; height: 38px; border-radius: 9px; background: var(--navy); color: var(--gold-text); display: grid; place-items: center; font-size: 19px; flex: none; }
.quick-tile b { display: block; color: var(--navy); font-weight: 500; font-size: 14.5px; }
.quick-tile small { display: block; color: var(--muted); font-size: 12px; font-weight: 300; }
.quick-tile .qt-go { margin-left: auto; color: var(--faint); }
.quick-tile:hover .qt-go { color: var(--gold); }

@media print { .quick-tiles, .panel-tools, .page-actions { display: none !important; } }

/* ตารางบันทึก % แป้ง */
.starch-table input { padding: .25rem .5rem; font-size: 14px; }
.starch-table tr.editing td { background: var(--gold-soft) !important; }
.starch-table .s-show b { color: var(--navy); }

/* ---------- แถบบนสีขาว เส้นเขียว (แบบ SWI LineTrack) ---------- */
.app-nav { background: #ffffff !important; border-bottom: 3px solid var(--gold); box-shadow: 0 1px 0 rgba(15,23,42,.04); }
.app-logo { background: transparent; padding: 0; height: 40px; }
.brand-text { color: var(--navy); border-left: 2px solid #d1e7d6; }
.brand-text .text-muted { color: var(--muted) !important; }
.brand-sub { color: var(--faint); }
.app-nav .nav-link { color: #334155 !important; }
.app-nav .nav-link:hover { color: var(--navy) !important; }
.app-nav .nav-link.active { color: var(--navy) !important; border-bottom: 2px solid var(--gold); }
.app-nav .navbar-toggler { border-color: var(--line); }
.app-nav .navbar-toggler-icon { filter: none; }
.rate-chip { color: var(--muted) !important; }
.rate-chip b { color: var(--navy) !important; }
.app-nav .btn-light { background: #fff; border: 1px solid var(--line) !important; color: #334155; }
.app-nav .btn-light:hover, .app-nav .btn-light.show { background: #f4f6f9; color: var(--navy); }
.app-nav .btn-light .badge { background: var(--gold-soft) !important; color: var(--navy) !important; }
.sync-chip { border: 1px solid var(--line); background: #fff; color: var(--muted); }
.sync-chip.on { background: #ecfdf3; border-color: #bbf7d0; color: #15803d; }
.sync-chip.on::before { color: #22c55e; }
.sync-chip.off { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }
.sync-chip.off::before { color: #ef4444; }
.scale-box { background: #111827; border-color: #374151; }
.login-page { background: linear-gradient(160deg, #eaf6ec 0%, #f4f6f9 60%); }
.login-box { box-shadow: 0 16px 40px rgba(15,23,42,.10) !important; }

/* ใบชั่งที่ยกเลิก: ขีดฆ่า สีจาง */
tr.row-void td { color: var(--faint) !important; }
tr.row-void td:not(:nth-last-child(-n+2)) { text-decoration: line-through; }
.void-stamp { position: absolute; top: 38%; left: 50%; transform: translate(-50%, -50%) rotate(-18deg); border: 4px solid #b91c1c; color: #b91c1c; font-size: 46px; font-weight: 600; padding: 4px 28px; border-radius: 10px; opacity: .55; pointer-events: none; letter-spacing: 4px; }
.slip { position: relative; }

/* แถบจ่ายเงิน (ติดล่างจอเมื่อเลือกใบชั่ง) */
.pay-bar { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; gap: 10px 20px; align-items: center; justify-content: space-between;
  background: #f0faf2; border: 2px solid #2e9e45; border-radius: .5rem; padding: 10px 14px; margin-top: 10px; box-shadow: 0 -4px 14px rgba(0,0,0,.06); }
.pay-bar[hidden] { display: none; }
.nav-tabs .nav-link { color: #3c3b38; } .nav-tabs .nav-link.active { color: #0b6b3a; font-weight: 600; }

/* ---------- ภาพรวมแบบบล็อก (แบบ LineTrack) ---------- */
.status-strip { padding: 14px 18px; }
.status-strip .st-head { font-weight: 600; color: #111; font-size: 15px; }
.st-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.st-card { border: 1px solid var(--line); border-left: 4px solid #cbd5e1; border-radius: 8px; padding: 10px 14px 12px; background: #fff; min-width: 0; }
.st-card.st-ok { border-left-color: #22a04b; } .st-card.st-warn { border-left-color: #e0a526; } .st-card.st-bad { border-left-color: #d03b3b; }
.st-top { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.st-top b { font-weight: 600; color: #111; }
.st-v { font-size: 22px; font-weight: 600; color: #111; line-height: 1.25; margin-top: 2px; font-variant-numeric: tabular-nums; }
.st-v small { font-size: 12.5px; font-weight: 300; color: var(--muted); }
.st-s { font-size: 12.5px; color: var(--muted); }
.st-bar { position: relative; height: 8px; background: #e9edf2; border-radius: 99px; margin-top: 8px; }
.st-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: #2e9e45; border-radius: 99px; }
.st-bar em { position: absolute; top: -4px; bottom: -4px; width: 2px; background: #111; }
.dash .kpi { padding: 14px 18px; border-radius: 8px; border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.dash .kpi .k { font-size: 13px; color: #374151; font-weight: 400; }
.dash .kpi .v { font-size: 30px; font-weight: 600; color: #111; letter-spacing: -.3px; }
.dash .kpi.kpi-main { border: 1.5px solid #2e9e45; border-radius: 8px; }
.dash .kpi.kpi-main .v { color: #0b6b3a; }
.dash .kpi .s { font-size: 12.5px; color: #4b5563; }
.dash .kpi-good, .dash .kpi-bad { font-weight: 600 !important; }
.dash .panel { border-radius: 8px; box-shadow: 0 1px 2px rgba(16,24,40,.04); }
.dash .chart-title, .dash .panel h3 { font-weight: 600 !important; color: #111; font-size: 15px; }
.dash .chart-sub { color: #6b7280; }

/* ภาพรวม: ลดความรก */
.dash h2 { font-size: 1.3rem; color: #111; font-weight: 600 !important; }
a.st-card { display: block; color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
a.st-card:hover { box-shadow: 0 4px 14px rgba(16,24,40,.08); transform: translateY(-1px); }
.st-tag { font-size: 11.5px; color: var(--muted); }
.st-bad .st-tag { color: #d03b3b; } .st-ok .st-tag { color: #22a04b; }
.dash .ph { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; margin-bottom: 8px; }
.dash .ph .chart-sub { margin-bottom: 0; }
.dash a.more { font-size: 12.5px; white-space: nowrap; text-decoration: none; color: var(--navy-3); }
.dash a.more:hover { text-decoration: underline; }
.dash .tw .table th { font-size: 12px; }
.dash .tw .table td { padding-top: .45rem; padding-bottom: .45rem; }

/* ตัวเลือกช่วงเวลาแบบแถบเดียว */
.seg { display: inline-flex; background: #eef1f4; border-radius: 9px; padding: 3px; gap: 2px; }
.seg a { padding: 4px 12px; border-radius: 7px; font-size: 13px; color: #4b5563; text-decoration: none; line-height: 1.6; white-space: nowrap; }
.seg a:hover { color: #111; }
.seg a.on { background: #fff; color: #0b6b3a; font-weight: 500; box-shadow: 0 1px 3px rgba(16,24,40,.12); }
.icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; color: #4b5563; text-decoration: none; font-size: 17px; }
.icon-btn:hover { background: #eef1f4; color: #111; }
.range-form { display: flex; align-items: center; gap: 6px; flex-basis: 100%; justify-content: flex-end; }
.range-form[hidden] { display: none; }
.range-form input { width: 150px !important; flex: none; padding: 3px 8px; font-size: 13.5px; }

/* หน้ารายงาน: เมนูซ้าย + ตาราง */
.rep-nav { width: 220px; flex: none; display: flex; flex-direction: column; gap: 2px; position: sticky; top: 12px; }
.rep-nav a { padding: 7px 10px; border-radius: 8px; color: #374151; text-decoration: none; font-size: 14px; white-space: nowrap; }
.rep-nav a:hover { background: #eef1f4; }
.rep-nav a.on { background: #e8f5ea; color: #0b6b3a; font-weight: 500; }
.rep-main { flex: 1; min-width: 0; }
.rep .rep-total td { font-weight: 600; color: #111; border-top: 2px solid var(--line) !important; background: #fafbfc; }
@media (max-width: 992px) { .rep-nav { width: 100%; flex-direction: row; overflow-x: auto; position: static; } }
@media print { .rep-main { width: 100%; } }
#rangeForm[hidden], form[hidden] { display: none !important; }