/* หน้าตาเดียวกับ SWI LineTrack (ระบบดาวน์ไทม์ PD): Bootstrap 5 + Sarabun + แถบเขียว SWI */
body { font-family: 'Sarabun', system-ui, sans-serif; background: #f4f6f9; font-size: 15px; color: #1f2937; }

/* ---------- แถบบน ---------- */
.app-nav { border-bottom: 4px solid #2e9e45; box-shadow: 0 1px 4px rgba(0,0,0,.06); }
.app-logo { height: 40px; width: auto; }
.brand-text { font-weight: 700; color: #0b6b3a; font-size: 1.15rem; border-left: 2px solid #d1e7d6; padding-left: .6rem; line-height: 1.15; }
.brand-sub { font-size: 11px; font-weight: 400; color: #6b7f72; letter-spacing: .2px; }
.app-nav .nav-link { color: #334155; }
.app-nav .nav-link.active { color: #0b6b3a !important; border-bottom: 3px solid #2e9e45; font-weight: 600; }
.app-nav .main-menu .nav-link { padding-left: .8rem; padding-right: .8rem; }
.app-nav .dropdown-menu { min-width: 260px; border-top: 3px solid #2e9e45;
  --bs-dropdown-link-active-bg: #e8f5ea; --bs-dropdown-link-active-color: #0b6b3a; --bs-dropdown-link-hover-bg: #f3f8f4; }
.app-nav .dropdown-item { padding: .45rem 1rem; }
.app-nav .dropdown-item.active, .app-nav .dropdown-item:active { background: #e8f5ea; color: #0b6b3a; font-weight: 600; }
.menu-sub { font-size: 11px; color: #8a8984; font-weight: 400; }
.rate-chip { white-space: nowrap; }
@media (max-width: 576px) { .app-logo { height: 30px; } .brand-text { font-size: 1rem; } }

/* ---------- หัวหน้า / โครงหน้า ---------- */
main h2 { font-size: 1.35rem; font-weight: 700; margin: 0; color: #0b0b0b; }
main h3 { font-size: 15px; font-weight: 700; margin: 0 0 10px; display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; }
.page-sub { color: #52514e; font-size: 14px; margin: 2px 0 16px; max-width: 90ch; }
.grid2 { display: grid; grid-template-columns: minmax(0, 400px) minmax(0, 1fr); gap: 16px; align-items: start; }
.grid-eq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 992px) { .grid2, .grid-eq { grid-template-columns: minmax(0, 1fr); } }
.stack { display: grid; gap: 16px; min-width: 0; }
.panel { background: #fff; border: 1px solid #dee2e6; border-radius: .375rem; padding: 14px 16px; min-width: 0; }

/* ---------- ฟอร์ม (ใช้รูปแบบ form-control ของ Bootstrap) ---------- */
form.f { display: grid; gap: 10px; }
.frow { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.frow3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 10px; }
form label { display: grid; gap: 3px; font-size: 13px; color: #52514e; font-weight: 600; min-width: 0; }
input:not([type=checkbox]):not([type=hidden]), select {
  font: inherit; font-size: 15px; color: #212529; background: #fff; border: 1px solid #ced4da; border-radius: .375rem;
  padding: .375rem .65rem; width: 100%; min-width: 0; transition: border-color .15s, box-shadow .15s; }
input:focus, select:focus { border-color: #2e9e45; outline: 0; box-shadow: 0 0 0 .2rem rgba(46,158,69,.2); }
input[type=number] { font-variant-numeric: tabular-nums; }
fieldset { border: 1px solid #e5e7eb; background: #f8fafc; border-radius: .375rem; padding: 8px 12px 12px; margin: 0; display: grid; gap: 10px; }
legend { float: none; width: auto; font-size: 13px; font-weight: 700; color: #0b6b3a; padding: 0 6px; margin: 0; }
.calc { background: #e8f5ea; border: 1px solid #cfe8d4; border-radius: .375rem; padding: 10px 12px; display: grid; gap: 3px; }
.calc .l { display: flex; justify-content: space-between; gap: 10px; font-size: 14px; }
.calc .l b { font-weight: 600; font-variant-numeric: tabular-nums; }
.calc .tot { border-top: 1px solid #cfe8d4; margin-top: 4px; padding-top: 6px; font-size: 15px; }
.calc .tot b { font-size: 20px; color: #0b6b3a; }

/* ---------- ตาราง ---------- */
.tw { overflow-x: auto; }
.tw .table { font-size: 14px; margin-bottom: 0; }
.tw .table th { background: #eef2f7; font-size: 13px; white-space: nowrap; vertical-align: middle; }
.tw .table td { white-space: nowrap; vertical-align: middle; }
.r { text-align: right !important; font-variant-numeric: tabular-nums; }
.mono { font-variant-numeric: tabular-nums; font-weight: 600; color: #334155; }
.bad-v { color: #b42d2d; font-weight: 700; }

/* ---------- สถานะ (สี + ข้อความ เหมือน chk ของ LineTrack) ---------- */
.pill { display: inline-block; padding: 1px 9px; border-radius: 99px; font-size: 12px; font-weight: 600; }
.p-ok { background: #e3f5e3; color: #0b7a0b; } .p-warn { background: #fff4d6; color: #8a5a00; }
.p-bad { background: #fde8e8; color: #b42d2d; } .p-mute { background: #e5e7eb; color: #52514e; }

/* ---------- Dashboard KPI ---------- */
.kpis { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; }
@media (max-width: 992px) { .kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi { background: #fff; border: 1px solid #dee2e6; border-radius: .375rem; padding: 12px 16px; }
.kpi .k { font-size: 13px; color: #52514e; }
.kpi .v { font-size: 30px; font-weight: 700; line-height: 1.15; color: #0b0b0b; font-variant-numeric: tabular-nums; }
.kpi .v small { font-size: 14px; font-weight: 400; color: #52514e; }
.kpi .s { font-size: 12px; color: #8a8984; }
.kpi.kpi-main { border-color: #2e9e45; border-width: 2px; } .kpi.kpi-main .v { color: #0b6b3a; }
@media (max-width: 576px) { .kpi .v { font-size: 24px; } }
.kpis.kpis-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 992px) { .kpis.kpis-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kpi .s + .s { margin-top: 2px; }
.kpi-good { color: #0b7a0b; font-weight: 600; } .kpi-bad { color: #b42d2d; font-weight: 600; }
.chart-title { font-weight: 700; font-size: 15px; }
.chart-sub { font-size: 12px; color: #8a8984; margin-bottom: 8px; }
.chart-box { position: relative; height: 280px; } .chart-box.short { height: 200px; }
.bar { height: 10px; border-radius: 3px; display: inline-block; }

/* ---------- กรอกใบชั่งด่วน ---------- */
.batch-table td { padding: 2px 3px !important; }
.batch-table td.r, .batch-table td.note { padding: 2px 8px !important; }
.batch-table input { border: 1px solid transparent; border-radius: 4px; padding: .3rem .45rem; background: transparent; font-size: 15px; }
.batch-table input:hover { border-color: #dee2e6; }
.batch-table input:focus { background: #fff; border-color: #2e9e45; }
.batch-table input.autofill { color: #0b6b3a; background: #f3f8f4; }
.batch-table input::-webkit-outer-spin-button, .batch-table input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.batch-table input[type=number] { -moz-appearance: textfield; }
.batch-table tr:focus-within td { background: #f3f8f4; }
.batch-table tr.saved td { background: #ecfdf5; } .batch-table tr.saved input { color: #334155; }
.batch-table tr.err-row td { background: #fef2f2; }
.batch-table tr.warn-row td { background: #fff8e6; }
.batch-table.hide-time .col-time, .batch-table.hide-starch .col-starch { display: none; }
/* ---------- สถานีชั่ง ---------- */
.station { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 1200px) { .station { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } .station > .stack { grid-column: 1 / -1; } }
@media (max-width: 768px) { .station { grid-template-columns: minmax(0, 1fr); } }
.scale-box { background: #111827; border-radius: 8px; padding: 12px 16px 10px; color: #e5e7eb; border: 3px solid #374151; transition: border-color .2s; }
.scale-box.is-stable { border-color: #22c55e; } .scale-box.is-motion { border-color: #f59e0b; }
.scale-top { display: flex; justify-content: space-between; gap: 8px; }
.sc-chip { font-size: 12px; padding: 1px 9px; border-radius: 99px; background: #374151; color: #d1d5db; }
.sc-chip.on { background: #14532d; color: #86efac; } .sc-chip.warn { background: #78350f; color: #fcd34d; }
.sc-chip.off { background: #7f1d1d; color: #fecaca; } .sc-chip.sim { background: #1e3a8a; color: #bfdbfe; }
.scale-num { text-align: right; font-size: clamp(44px, 6vw, 72px); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; color: #f87171; letter-spacing: .02em; }
.scale-box.is-stable .scale-num { color: #4ade80; } .scale-box.is-off .scale-num { color: #4b5563; }
.scale-num small { font-size: 18px; color: #9ca3af; margin-left: 6px; }
.scale-bar { height: 4px; background: #374151; border-radius: 2px; overflow: hidden; }
.scale-bar div { height: 100%; width: 0; background: #22c55e; transition: width .2s; }
.sim-box { background: #eff6ff; border: 1px dashed #93c5fd; border-radius: 6px; padding: 8px 10px; }
.manual-box { background: #fff8e6; border: 1px solid #f5d48a; border-radius: 6px; padding: 8px 10px; }
.raw-log { background: #0f172a; color: #a5f3fc; font-size: 12px; padding: 8px; border-radius: 6px; min-height: 60px; max-height: 180px; overflow: auto; margin: 6px 0; white-space: pre-wrap; word-break: break-all; }
.open-item { border: 1px solid #e5e7eb; border-left: 5px solid #f0b429; border-radius: 6px; padding: 8px 10px; margin-bottom: 8px; cursor: pointer; font-size: 14px; }
.open-item:hover { background: #f8fafc; } .open-item.sel { background: #e8f5ea; border-left-color: #2e9e45; }

kbd { background: #eef2f7; color: #1f2937; border: 1px solid #cbd5e1; font-size: 12px; padding: 0 5px; }

.note { font-size: 13px; color: #6b7280; }
.err { color: #b42d2d; font-size: 13px; }
.steps { display: flex; gap: 4px; flex-wrap: wrap; }
.steps span { font-size: 12px; padding: 2px 9px; border-radius: 99px; background: #e5e7eb; color: #52514e; }
.steps span.on { background: #2e9e45; color: #fff; }
.checks { display: grid; gap: 6px; }
.checks label { display: flex; gap: 8px; align-items: center; font-size: 14px; color: #1f2937; font-weight: 400; }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: 3px 14px; margin: 0; font-size: 14px; }
dl.kv dt { color: #6b7280; font-weight: 400; } dl.kv dd { margin: 0; text-align: right; }
.inline { display: inline; }
.ship-card { border-left: 5px solid #f0b429; } .ship-card.done { border-left-color: #0ca30c; }

/* ---------- ใบชั่งสำหรับพิมพ์ (แบบเดียวกับใบชั่งโรงงาน) ---------- */
.slip { background: #fff; color: #000; max-width: 780px; margin: 0 auto; padding: 24px 28px; border: 1px solid #dee2e6; font-size: 14px; }
.slip .hd { text-align: center; }
.slip .hd b { font-size: 20px; letter-spacing: .02em; }
.slip .meta { display: flex; justify-content: space-between; margin: 14px 0 8px; gap: 12px; }
.slip table { width: 100%; border-collapse: collapse; }
.slip table td, .slip table th { border: 1px solid #000; color: #000; font-size: 13.5px; padding: 4px 8px; background: #fff; }
.slip .bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 30px; margin-top: 12px; }
.slip .bottom div { display: flex; justify-content: space-between; }
.slip .netbox { border: 2px solid #000; padding: 6px 14px; text-align: right; font-size: 20px; font-weight: 700; margin-left: auto; width: max-content; margin-top: 10px; }
.slip .sig { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-top: 40px; text-align: center; font-size: 13px; }
.slip .sig div { border-top: 1px dotted #000; padding-top: 4px; }
@media print {
  .d-print-none, .no-print { display: none !important; }
  body { background: #fff; font-size: 12px; } main { padding: 0 !important; }
  .slip { border: 0; max-width: none; }
}

/* ฟอร์มแนวนอน (เช่น ออกใบขนส่ง) + แถวรายละเอียดที่กางได้ */
form.f.f-wide { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); align-items: end; }
form.f.f-wide > .btn, form.f.f-wide > .err { grid-column: auto; }
.ship-detail > td { background: #f8fafc !important; padding: 12px 16px !important; white-space: normal !important; }
.pager .pagination .page-link { color: #0b6b3a; }
.pager .pagination .active .page-link { background: #2e9e45; border-color: #2e9e45; color: #fff; }

/* ---------- ล็อกอิน + สถานะซิงก์ ---------- */
.login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 16px; background: linear-gradient(160deg, #eaf6ec 0%, #f4f6f9 60%); }
.login-box { width: 100%; max-width: 400px; border-top: 5px solid #2e9e45; }
.sync-chip { border: 1px solid #cbd5e1; background: #f1f5f9; color: #52514e; border-radius: 99px; font-size: 12.5px; padding: 2px 10px; text-decoration: none; white-space: nowrap; cursor: pointer; }
.sync-chip::before { content: '●'; margin-right: 5px; color: #94a3b8; }
.sync-chip.on { background: #e8f5ea; border-color: #b7dfc0; color: #0b6b3a; } .sync-chip.on::before { color: #22c55e; }
.sync-chip.off { background: #fde8e8; border-color: #f5b5b5; color: #b42d2d; } .sync-chip.off::before { color: #ef4444; }
.sync-chip.busy::before { color: #f59e0b; }
form label > .pill { justify-self: start; }   /* ป้ายเล็กในฟอร์ม เช่น "ตั้งที่ Host" ไม่ยืดเต็มช่อง */