:root { --bs-body-font-family: "Noto Sans Thai", system-ui, -apple-system, "Segoe UI", sans-serif; }
body, .btn, .form-control, .form-select, .tooltip, .popover { font-family: var(--bs-body-font-family); }
body { background: #f5f6f8; font-size: .925rem; }
.card { border: 0; box-shadow: 0 1px 2px rgba(0,0,0,.06); }
.card-header { background: #fff; font-weight: 600; }
.table td, .table th { vertical-align: middle; }
.table-sm td, .table-sm th { padding: .35rem .5rem; }
pre.json { background: #1e1e1e; color: #d4d4d4; padding: .75rem; border-radius: .375rem; max-height: 480px; overflow: auto; font-size: .8rem; white-space: pre-wrap; word-break: break-word; }
textarea.code { font-family: SFMono-Regular, Consolas, monospace; font-size: .8rem; }
.stat { font-size: 1.6rem; font-weight: 600; line-height: 1; }
.stat-label { font-size: .8rem; color: #6c757d; }
.flow { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; font-size: .85rem; }
.flow .node { background: #fff; border: 1px solid #dee2e6; border-radius: .5rem; padding: .35rem .65rem; }
.text-mono { font-family: SFMono-Regular, Consolas, monospace; }
.nowrap { white-space: nowrap; }
.navbar .nav-link, .navbar-text { white-space: nowrap; }
.nav-count { font-size: .68rem; vertical-align: text-top; }
:focus-visible { outline: 2px solid #86b7fe; outline-offset: 1px; }
details > summary { cursor: pointer; list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary.card-header::after { content: "\F282"; font-family: "bootstrap-icons"; float: right; font-weight: 400; color: #adb5bd; transition: transform .15s; }
details[open] > summary.card-header::after { transform: rotate(180deg); }
details:not([open]) > summary.card-header { border-bottom: 0; border-radius: var(--bs-card-inner-border-radius); }

/* ---------- รายการ: แท็บสถานะ / ตัวกรอง / แถวกดได้ / ว่าง ---------- */
.nav-tabs-soft { display: flex; flex-wrap: nowrap; gap: .25rem; list-style: none; padding: 0; overflow-x: auto; overflow-y: hidden; border-bottom: 1px solid #e3e6ea; scrollbar-width: thin; }
.nav-tabs-soft a { display: flex; align-items: center; gap: .4rem; padding: .5rem .8rem; color: #6c757d; text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.nav-tabs-soft a:hover { color: #212529; }
.nav-tabs-soft a.active { color: #0d6efd; border-bottom-color: #0d6efd; font-weight: 600; }
.nav-tabs-soft .cnt { font-size: .72rem; background: #e9ecef; color: #495057; border-radius: 1rem; padding: .05rem .45rem; font-weight: 500; }
.nav-tabs-soft a.active .cnt:not(.bg-warning):not(.bg-danger) { background: #dbe8ff; color: #0d6efd; }
.filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; }
.table-rows tbody tr[data-href] { cursor: pointer; }
.table-rows td { padding-top: .55rem; padding-bottom: .55rem; }
.empty-state { text-align: center; padding: 3rem 1rem; color: #495057; }
.empty-state > i { font-size: 2.4rem; color: #ced4da; display: block; margin-bottom: .5rem; }

/* ---------- เอกสาร: ความคืบหน้า / กล่องสิ่งที่ต้องทำ / ไทม์ไลน์ ---------- */
.progress-steps { display: flex; list-style: none; margin: 0; padding: 0; counter-reset: s; }
.progress-steps li { flex: 1 1 0; position: relative; text-align: center; font-size: .82rem; color: #adb5bd; min-width: 0; }
.progress-steps li::before { content: ""; position: absolute; top: .8rem; left: -50%; width: 100%; height: 3px; background: #e9ecef; z-index: 0; }
.progress-steps li:first-child::before { display: none; }
.progress-steps li.done::before, .progress-steps li.current::before, .progress-steps li.stuck::before { background: #198754; }
.progress-steps .dot { position: relative; z-index: 1; width: 1.65rem; height: 1.65rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e9ecef; color: #fff; font-size: .8rem; }
.progress-steps .dot i.bi-circle-fill { font-size: .4rem; color: #ced4da; }
.progress-steps .lbl { display: block; margin-top: .3rem; line-height: 1.25; }
.progress-steps li.done { color: #198754; } .progress-steps li.done .dot { background: #198754; }
.progress-steps li.current { color: #0d6efd; font-weight: 600; } .progress-steps li.current .dot { background: #0d6efd; box-shadow: 0 0 0 4px #dbe8ff; } .progress-steps li.current .dot i { color: #fff; }
.progress-steps li.stuck { color: #b07800; font-weight: 600; } .progress-steps li.stuck .dot { background: #ffc107; color: #212529; box-shadow: 0 0 0 4px #fff3cd; }
.action-box { border-radius: .6rem; padding: .9rem 1.1rem; border-left: 4px solid; }
.action-warning { background: #fff8e1; border-color: #ffc107; color: #5c4400; }
.action-danger { background: #fdecee; border-color: #dc3545; color: #842029; }
.action-info { background: #e8f4fd; border-color: #0dcaf0; color: #055160; }
.timeline { list-style: none; margin: 0; padding: .25rem 0; }
.timeline li { padding: .5rem .9rem .5rem 1.6rem; position: relative; border-bottom: 1px solid #f3f4f6; }
.timeline li:last-child { border-bottom: 0; }
.timeline li::before { content: ""; position: absolute; left: .7rem; top: .95rem; width: .45rem; height: .45rem; border-radius: 50%; background: #198754; }
.timeline li.t-dead::before { background: #dc3545; } .timeline li.t-failed::before { background: #ffc107; } .timeline li.t-pending::before, .timeline li.t-processing::before { background: #0dcaf0; } .timeline li.t-skipped::before { background: #adb5bd; }
.timeline li:hover { background: #f8f9fa; }
dl.kv { display: grid; grid-template-columns: auto 1fr; gap: .25rem .75rem; }
dl.kv dt { font-weight: 400; color: #6c757d; } dl.kv dd { margin: 0; text-align: right; }
dl.kv-grid dd { text-align: left; }
@media (min-width: 768px) { dl.kv-grid { grid-template-columns: max-content 1fr max-content 1fr; } }
@media (min-width: 1200px) { dl.kv-grid { grid-template-columns: max-content 1fr max-content 1fr max-content 1fr; } }
@media (max-width: 575px) { .progress-steps .lbl { font-size: .7rem; } }

/* ---------- การเชื่อมต่อ / wizard / ภาพรวม ---------- */
.page-intro { color: #6c757d; max-width: 760px; }
.type-icon { width: 2.4rem; height: 2.4rem; border-radius: .6rem; display: inline-flex; align-items: center; justify-content: center; color: #fff; background: var(--c, #6c757d); font-size: 1.15rem; flex: none; }
.type-icon.lg { width: 3rem; height: 3rem; font-size: 1.4rem; }
.type-icon.sm { width: 1.4rem; height: 1.4rem; font-size: .75rem; border-radius: .35rem; }
.state-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .75rem; padding: .15rem .55rem; border-radius: 1rem; white-space: nowrap; }
.state-pill::before { content: ""; width: .5rem; height: .5rem; border-radius: 50%; background: currentColor; }
.state-ok { background: #e8f6ee; color: #198754; }
.state-warn { background: #fff4d6; color: #a36b00; }
.state-error { background: #fde8ea; color: #dc3545; }
.state-setup { background: #e4f3fb; color: #0a7ea4; }
.state-off { background: #eceef0; color: #6c757d; }
.cat-section { margin-bottom: 1.75rem; }
.cat-head { display: flex; align-items: center; gap: .75rem; margin-bottom: .75rem; flex-wrap: wrap; }
.cat-head h6 { margin: 0; font-weight: 600; }
.conn-tile { color: inherit; text-decoration: none; transition: box-shadow .15s, transform .15s; }
.conn-tile:hover { box-shadow: 0 4px 14px rgba(0,0,0,.08); transform: translateY(-1px); color: inherit; }
.conn-add { border: 2px dashed #ced4da; border-radius: .375rem; background: transparent; color: #6c757d; text-decoration: none; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 112px; height: 100%; gap: .25rem; }
.conn-add:hover { border-color: #0d6efd; color: #0d6efd; }
.issue-line { font-size: .8rem; }

.wz-nav { display: flex; gap: .25rem; counter-reset: wz; margin-bottom: 1.25rem; flex-wrap: wrap; }
.wz-nav .wz-dot { flex: 1 1 0; min-width: 110px; display: flex; align-items: center; gap: .5rem; padding: .55rem .75rem; border-radius: .5rem; background: #fff; color: #6c757d; font-size: .85rem; border: 0; text-align: left; }
.wz-nav .wz-dot::before { counter-increment: wz; content: counter(wz); width: 1.6rem; height: 1.6rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: #e9ecef; font-weight: 600; flex: none; }
.wz-nav .wz-dot.active { color: #0d6efd; box-shadow: inset 0 -3px 0 #0d6efd; font-weight: 600; }
.wz-nav .wz-dot.active::before { background: #0d6efd; color: #fff; }
.wz-nav .wz-dot.done { color: #198754; }
.wz-nav .wz-dot.done::before { content: "\2713"; background: #d1e7dd; color: #198754; }
.wz-body { max-width: 900px; }
.wz-q { font-size: 1.1rem; font-weight: 600; margin-bottom: .25rem; }
.pick-card { display: block; cursor: pointer; height: 100%; border: 2px solid #e3e6ea; background: #fff; border-radius: .6rem; padding: .9rem; box-shadow: 0 1px 2px rgba(0,0,0,.06); transition: border-color .15s; }
.pick-card:hover { border-color: #b6d4fe; }
.btn-check:checked + .pick-card { border-color: #0d6efd; background: #f3f8ff; }
.btn-check:focus-visible + .pick-card { outline: 2px solid #86b7fe; }
.wz-group { font-size: .8rem; letter-spacing: .02em; color: #6c757d; font-weight: 600; margin: 1.25rem 0 .5rem; padding-bottom: .25rem; border-bottom: 1px solid #eef0f2; }
.wz-group:first-child { margin-top: 0; }
.wz-foot { display: flex; gap: .5rem; align-items: center; margin-top: 1rem; }
.review-table td:first-child { color: #6c757d; width: 40%; }

.checklist { list-style: none; padding: 0; margin: 0; }
.checklist li { display: flex; gap: .6rem; padding: .5rem 0; border-bottom: 1px solid #f0f1f3; align-items: flex-start; }
.checklist li:last-child { border-bottom: 0; }
.checklist .ck { flex: none; width: 1.35rem; height: 1.35rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; margin-top: .1rem; }
.checklist .ck.yes { background: #d1e7dd; color: #198754; }
.checklist .ck.no { background: #f8d7da; color: #dc3545; }
.checklist .ck.opt { background: #e9ecef; color: #6c757d; }
.flow-big { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; }
.flow-big { flex-wrap: nowrap; }
.flow-big .fnode { background: #fff; border: 1px solid #dee2e6; border-radius: .6rem; padding: .7rem; display: flex; flex-direction: column; align-items: center; text-align: center; gap: .35rem; flex: 1 1 0; min-width: 0; align-self: stretch; justify-content: center; }
.flow-big .fnode > div { min-width: 0; }
.flow-big .farrow { color: #6c757d; font-size: .7rem; text-align: center; flex: 0 0 56px; }
@media (max-width: 575px) { .flow-big { flex-direction: column; align-items: stretch; } .flow-big .farrow { flex-basis: auto; } .flow-big .farrow i { transform: rotate(90deg); } }
.flow-big .farrow i { font-size: 1.1rem; display: block; color: #adb5bd; }

.health-banner { border-radius: .6rem; padding: .9rem 1.1rem; display: flex; align-items: center; gap: .9rem; }
.health-banner .hb-icon { font-size: 1.8rem; line-height: 1; }
.health-ok { background: #e8f6ee; color: #146c43; }
.health-warn { background: #fff4d6; color: #7a5200; }
.health-error { background: #fde8ea; color: #b02a37; }
.kpi { display: block; color: inherit; text-decoration: none; }
.kpi .stat { font-size: 2rem; }
.stage-bar { display: flex; gap: .4rem; flex-wrap: wrap; }
.stage-bar a { flex: 1 1 120px; text-decoration: none; color: inherit; background: #f8f9fa; border-radius: .5rem; padding: .6rem .75rem; border-left: 4px solid var(--c, #adb5bd); }
.stage-bar a:hover { background: #eef1f4; }
.stage-bar .n { font-size: 1.35rem; font-weight: 600; line-height: 1.1; }
.todo-row { display: flex; gap: .75rem; align-items: center; padding: .55rem .9rem; border-bottom: 1px solid #f0f1f3; }
.todo-row:last-child { border-bottom: 0; }
.mini-conn { display: flex; align-items: center; gap: .6rem; padding: .45rem .9rem; border-bottom: 1px solid #f0f1f3; color: inherit; text-decoration: none; }
.mini-conn:hover { background: #f8f9fa; color: inherit; }
.mini-conn:last-child { border-bottom: 0; }
.mini-conn .type-icon { width: 1.8rem; height: 1.8rem; font-size: .9rem; border-radius: .45rem; }

/* ---------- หน้าเข้าสู่ระบบ ---------- */
.login-page { background: #0b1220; min-height: 100vh; margin: 0; }
.login-shell { display: flex; min-height: 100vh; }
@media (min-width: 992px) { .login-page { overflow: hidden; } .login-shell { height: 100vh; min-height: 0; } }
.login-brand { flex: 1 1 55%; position: relative; overflow: hidden; color: #e6ebf5; display: flex; align-items: center; padding: 2rem clamp(1.75rem, 4vw, 4.5rem); overflow: hidden;
    background: radial-gradient(1200px 600px at -10% -20%, rgba(79,70,229,.45), transparent 60%), radial-gradient(800px 500px at 110% 120%, rgba(20,184,166,.30), transparent 60%), linear-gradient(160deg, #0b1220 0%, #111a2e 100%); }
.login-brand::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.04) 1px, transparent 1px); background-size: 32px 32px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); pointer-events: none; }
.login-brand-inner { position: relative; z-index: 1; width: 100%; max-width: 660px; }
.login-logo { display: inline-flex; align-items: center; gap: .6rem; font-weight: 700; font-size: 1.35rem; letter-spacing: .02em; margin-bottom: 2.5rem; }
.login-mark { width: 2.4rem; height: 2.4rem; border-radius: .7rem; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, #0d6efd, #20c997); color: #fff; font-size: 1.2rem; box-shadow: 0 6px 20px rgba(13,110,253,.35); }
.login-headline { font-size: clamp(1.55rem, 2.2vw, 2.1rem); font-weight: 700; line-height: 1.3; margin-bottom: .75rem; color: #fff; }
.login-sub { color: #9fb0cc; font-size: .95rem; margin-bottom: 1.25rem; }
.login-logo-img { display: block; height: 48px; width: auto; margin-bottom: 1.75rem; }
img.login-logo-sm { height: 44px; margin-bottom: 1.5rem; }
.login-form-wrap { flex: 1 1 45%; background: #f5f6f8; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 2rem 1.25rem; }
.login-card { width: 100%; max-width: 400px; background: #fff; border-radius: 1rem; padding: 2.25rem 2rem; box-shadow: 0 10px 40px rgba(16,24,40,.08), 0 1px 2px rgba(16,24,40,.06); }
.login-logo-sm { color: #0b1220; margin-bottom: 1.5rem; font-size: 1.2rem; }
.login-field { position: relative; }
.login-field > i { position: absolute; left: .9rem; top: 50%; transform: translateY(-50%); color: #adb5bd; pointer-events: none; z-index: 5; }
.login-field .form-control { padding-left: 2.6rem; font-size: 1rem; border-radius: .6rem; background: #f8f9fb; border-color: #e3e6ea; }
.login-field .form-control:focus { background: #fff; }
.login-field:focus-within > i { color: #0d6efd; }
.login-field .form-control.is-invalid { background-image: none; }
.login-eye { position: absolute; right: .35rem; top: 50%; transform: translateY(-50%); border: 0; background: transparent; color: #6c757d; width: 2.4rem; height: 2.4rem; border-radius: .5rem; z-index: 5; }
.login-eye:hover { background: #eef1f4; color: #212529; }
.login-field .form-control[type=password], .login-field .form-control#password { padding-right: 3rem; }
.login-btn { border-radius: .6rem; font-size: 1rem; font-weight: 600; display: inline-flex; align-items: center; justify-content: center; gap: .5rem; }
.login-btn i { transition: transform .15s; } .login-btn:hover i { transform: translateX(3px); }
.login-foot { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid #f0f1f3; }
.login-copy { color: #adb5bd; margin-top: 1.25rem; text-align: center; }
@media (max-width: 991.98px) {
    .login-shell { flex-direction: column; }
    .login-brand { display: none; }
    .login-form-wrap { min-height: 100vh; background: radial-gradient(900px 400px at 50% -10%, rgba(13,110,253,.18), transparent 70%), #f5f6f8; }
}
/* ฉากเคลื่อนไหวหน้าเข้าสู่ระบบ */
.flow-scene { width: 100%; height: auto; max-height: 40vh; display: block; margin: -.25rem 0 .9rem; font-family: var(--bs-body-font-family); overflow: visible; }
.flow-scene .fs-node rect { transition: fill-opacity .2s; }
.flow-feed { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.09); border-radius: .9rem; padding: .7rem .9rem .4rem; margin-bottom: .9rem; backdrop-filter: blur(6px); }
.ff-head { font-size: .72rem; letter-spacing: .06em; text-transform: uppercase; color: #8fa3c4; display: flex; align-items: center; gap: .45rem; margin-bottom: .35rem; }
.ff-dot { width: .5rem; height: .5rem; border-radius: 50%; background: #34d399; box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: ff-ping 1.6s infinite; }
@keyframes ff-ping { 70% { box-shadow: 0 0 0 7px rgba(52,211,153,0); } 100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); } }
#flowFeed { list-style: none; margin: 0; padding: 0; height: 6.4rem; overflow: hidden; }
#flowFeed li { display: flex; align-items: center; gap: .6rem; padding: .35rem 0; font-size: .82rem; color: #cfd8ea; border-bottom: 1px solid rgba(255,255,255,.05); opacity: 0; transform: translateY(-10px); transition: opacity .45s, transform .45s; }
#flowFeed li.in { opacity: 1; transform: none; }
#flowFeed li.in:nth-child(2) { opacity: .75; } #flowFeed li.in:nth-child(3) { opacity: .45; }
.ff-ic { flex: none; width: 1.55rem; height: 1.55rem; border-radius: .45rem; display: inline-flex; align-items: center; justify-content: center; font-size: .8rem; }
.ff-tx { flex: 1 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ff-tm { flex: none; font-size: .7rem; color: #6b7f9f; font-variant-numeric: tabular-nums; }
.ff-order .ff-ic { background: rgba(245,158,11,.18); color: #fcd34d; } .ff-map .ff-ic { background: rgba(129,140,248,.2); color: #a5b4fc; }
.ff-wms .ff-ic { background: rgba(255,255,255,.12); color: #fff; } .ff-track .ff-ic, .ff-status .ff-ic { background: rgba(16,185,129,.18); color: #6ee7b7; }
.ff-stock .ff-ic { background: rgba(34,211,238,.16); color: #67e8f9; } .ff-cancel .ff-ic { background: rgba(244,63,94,.18); color: #fda4af; }
.flow-legend { display: flex; flex-wrap: wrap; gap: .35rem .9rem; font-size: .74rem; color: #8fa3c4; }
.flow-legend span { display: inline-flex; align-items: center; gap: .35rem; }
.flow-legend svg { width: 1.05rem; height: .95rem; }
@media (prefers-reduced-motion: reduce) { .ff-dot { animation: none; } #flowFeed li { transition: none; } }
/* จอเตี้ย: ย่อ/ซ่อนส่วนรองทีละขั้น ไม่ให้มีแถบเลื่อน */
@media (max-height: 800px) { .login-logo-img { height: 42px; margin-bottom: 1.1rem; } .login-sub { margin-bottom: .9rem; } #flowFeed { height: 4.3rem; } }
@media (max-height: 700px) { .flow-legend { display: none; } .flow-scene { max-height: 36vh; } }
@media (max-height: 600px) { .flow-feed, .login-sub { display: none; } .flow-scene { max-height: 44vh; } }
@media (max-height: 640px) and (min-width: 992px) { .login-card { padding: 1.5rem 1.75rem; } .login-foot { margin-top: 1rem; padding-top: .75rem; } .login-copy { display: none; } }