/* =====================================================================
   BuildTrack — bootstrap-reskin.css
   โหลดหลัง bootstrap.min.css เสมอ
   ธีม: "Steel & Safety" — เหล็กโครงสร้าง + สีเซฟตี้หน้างาน
   ---------------------------------------------------------------------
   แก้สีเฉพาะ SECTION 1 เท่านั้น ส่วนอื่นอ้างอิงตัวแปรทั้งหมด
   ===================================================================== */

/* =====================================================================
   SECTION 1 — COLOR TOKENS  (แก้เฉพาะบล็อกนี้ต่อโปรเจกต์)
   ===================================================================== */
:root {
  /* พื้นหลัง / พื้นผิว — เทาอมน้ำเงินแบบคอนกรีตบ่ม */
  --bt-bg:            oklch(0.980 0.004 250);
  --bt-bg-sunken:     oklch(0.960 0.006 250);
  --bt-surface:       oklch(1 0 0);
  --bt-surface-alt:   oklch(0.975 0.005 250);

  /* ตัวอักษร */
  --bt-ink:           oklch(0.245 0.022 255);
  --bt-ink-soft:      oklch(0.450 0.020 255);
  --bt-ink-muted:     oklch(0.605 0.016 255);
  --bt-ink-invert:    oklch(0.985 0.003 250);

  /* เส้น */
  --bt-line:          oklch(0.905 0.008 250);
  --bt-line-strong:   oklch(0.840 0.012 250);

  /* สีหลัก — steel blue */
  --bt-primary:       oklch(0.450 0.128 252);
  --bt-primary-hover: oklch(0.398 0.130 252);
  --bt-primary-soft:  oklch(0.945 0.028 252);
  --bt-primary-ink:   oklch(0.335 0.115 252);

  /* สีรอง — deep navy (sidebar) */
  --bt-navy:          oklch(0.268 0.052 258);
  --bt-navy-2:        oklch(0.232 0.048 258);
  --bt-navy-line:     oklch(0.355 0.045 258);

  /* accent — safety amber (ใช้เน้นจุดเดียวเท่านั้น) */
  --bt-accent:        oklch(0.782 0.158 76);
  --bt-accent-hover:  oklch(0.735 0.155 72);
  --bt-accent-ink:    oklch(0.400 0.105 70);
  --bt-accent-soft:   oklch(0.960 0.045 82);

  /* semantic — ผูกกับสถานะโครงการ */
  --bt-ok:            oklch(0.620 0.148 152);
  --bt-ok-soft:       oklch(0.950 0.045 152);
  --bt-ok-ink:        oklch(0.420 0.120 152);

  --bt-warn:          oklch(0.780 0.148 74);
  --bt-warn-soft:     oklch(0.960 0.052 80);
  --bt-warn-ink:      oklch(0.470 0.110 66);

  --bt-bad:           oklch(0.575 0.198 27);
  --bt-bad-soft:      oklch(0.955 0.030 27);
  --bt-bad-ink:       oklch(0.455 0.175 27);

  --bt-info:          oklch(0.600 0.115 232);
  --bt-info-soft:     oklch(0.955 0.030 232);

  /* รูปทรง / เงา */
  --bt-radius:        10px;
  --bt-radius-sm:     7px;
  --bt-radius-lg:     14px;
  --bt-shadow-sm:     0 1px 2px oklch(0.245 0.022 255 / 0.06);
  --bt-shadow:        0 1px 3px oklch(0.245 0.022 255 / 0.08), 0 6px 16px -8px oklch(0.245 0.022 255 / 0.14);
  --bt-shadow-lg:     0 12px 40px -12px oklch(0.245 0.022 255 / 0.28);

  /* ฟอนต์ */
  --bt-font-display:  'Anuphan', 'IBM Plex Sans Thai', system-ui, sans-serif;
  --bt-font-body:     'IBM Plex Sans Thai', 'Anuphan', system-ui, sans-serif;
  --bt-font-mono:     'IBM Plex Mono', 'Courier New', monospace;

  /* ขนาด shell */
  --bt-sidebar-w:     248px;
  --bt-topbar-h:      62px;
}

/* map เข้าตัวแปรของ Bootstrap */
:root {
  --bs-body-bg:           var(--bt-bg);
  --bs-body-color:        var(--bt-ink);
  --bs-body-font-family:  var(--bt-font-body);
  --bs-body-font-size:    0.9375rem;
  --bs-body-line-height:  1.62;
  --bs-border-color:      var(--bt-line);
  --bs-border-radius:     var(--bt-radius);
  --bs-border-radius-sm:  var(--bt-radius-sm);
  --bs-border-radius-lg:  var(--bt-radius-lg);
  --bs-link-color:        var(--bt-primary);
  --bs-link-hover-color:  var(--bt-primary-hover);
  --bs-primary:           var(--bt-primary);
  --bs-secondary:         var(--bt-ink-soft);
  --bs-success:           var(--bt-ok);
  --bs-warning:           var(--bt-warn);
  --bs-danger:            var(--bt-bad);
  --bs-info:              var(--bt-info);
  --bs-primary-rgb:       47, 85, 138;
  --bs-focus-ring-color:  oklch(0.450 0.128 252 / 0.22);
  --bs-focus-ring-width:  3px;
}

/* =====================================================================
   SECTION 2 — TYPOGRAPHY
   ===================================================================== */
body {
  font-family: var(--bt-font-body);
  background: var(--bt-bg);
  color: var(--bt-ink);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--bt-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--bt-ink);
}

.text-muted { color: var(--bt-ink-muted) !important; }
.text-soft  { color: var(--bt-ink-soft) !important; }

/* ตัวเลข รหัส เลขที่เอกสาร ปริมาณ */
.mono, .doc-no, .num {
  font-family: var(--bt-font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* =====================================================================
   SECTION 3 — BUTTONS
   ===================================================================== */
.btn {
  --bs-btn-font-weight: 500;
  --bs-btn-padding-y: 0.44rem;
  --bs-btn-padding-x: 0.95rem;
  border-radius: var(--bt-radius-sm);
  transition: background-color .15s ease, border-color .15s ease, transform .06s ease;
}
.btn:active { transform: translateY(1px); }

.btn-primary {
  --bs-btn-bg: var(--bt-primary);
  --bs-btn-border-color: var(--bt-primary);
  --bs-btn-hover-bg: var(--bt-primary-hover);
  --bs-btn-hover-border-color: var(--bt-primary-hover);
  --bs-btn-active-bg: var(--bt-primary-hover);
  --bs-btn-active-border-color: var(--bt-primary-hover);
  --bs-btn-disabled-bg: var(--bt-primary);
  --bs-btn-disabled-border-color: var(--bt-primary);
}

.btn-outline-primary {
  --bs-btn-color: var(--bt-primary-ink);
  --bs-btn-border-color: var(--bt-line-strong);
  --bs-btn-hover-bg: var(--bt-primary-soft);
  --bs-btn-hover-border-color: var(--bt-primary);
  --bs-btn-hover-color: var(--bt-primary-ink);
  --bs-btn-active-bg: var(--bt-primary-soft);
  --bs-btn-active-color: var(--bt-primary-ink);
  --bs-btn-active-border-color: var(--bt-primary);
}

/* ปุ่มเน้นจุดเดียวของทั้งระบบ: ปุ่ม action หลักหน้างาน */
.btn-accent {
  --bs-btn-color: var(--bt-accent-ink);
  --bs-btn-bg: var(--bt-accent);
  --bs-btn-border-color: var(--bt-accent);
  --bs-btn-hover-color: var(--bt-accent-ink);
  --bs-btn-hover-bg: var(--bt-accent-hover);
  --bs-btn-hover-border-color: var(--bt-accent-hover);
  --bs-btn-active-bg: var(--bt-accent-hover);
  --bs-btn-active-border-color: var(--bt-accent-hover);
  font-weight: 600;
}

.btn-light {
  --bs-btn-bg: var(--bt-surface);
  --bs-btn-border-color: var(--bt-line);
  --bs-btn-color: var(--bt-ink-soft);
  --bs-btn-hover-bg: var(--bt-surface-alt);
  --bs-btn-hover-border-color: var(--bt-line-strong);
  --bs-btn-hover-color: var(--bt-ink);
}

.btn-success { --bs-btn-bg: var(--bt-ok); --bs-btn-border-color: var(--bt-ok); }
.btn-danger  { --bs-btn-bg: var(--bt-bad); --bs-btn-border-color: var(--bt-bad); }

.btn-icon {
  width: 34px;
  height: 34px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* =====================================================================
   SECTION 4 — FORMS
   ===================================================================== */
.form-label {
  font-size: 0.8125rem;
  font-weight: 500;
  color: var(--bt-ink-soft);
  margin-bottom: 0.3rem;
}
.form-label .req { color: var(--bt-bad); }

.form-control, .form-select {
  border-color: var(--bt-line-strong);
  border-radius: var(--bt-radius-sm);
  padding: 0.46rem 0.75rem;
  color: var(--bt-ink);
  background-color: var(--bt-surface);
}
.form-control:focus, .form-select:focus {
  border-color: var(--bt-primary);
  box-shadow: 0 0 0 3px var(--bs-focus-ring-color);
}
.form-control::placeholder { color: var(--bt-ink-muted); }
.form-control:disabled, .form-select:disabled { background-color: var(--bt-bg-sunken); }

.form-control.is-invalid, .form-select.is-invalid { border-color: var(--bt-bad); }
.invalid-feedback { color: var(--bt-bad-ink); font-size: 0.8125rem; }

.form-check-input:checked {
  background-color: var(--bt-primary);
  border-color: var(--bt-primary);
}
.form-switch .form-check-input:checked { background-color: var(--bt-ok); border-color: var(--bt-ok); }

.input-group-text {
  background: var(--bt-surface-alt);
  border-color: var(--bt-line-strong);
  color: var(--bt-ink-muted);
}

/* =====================================================================
   SECTION 5 — CARD / MODAL / DROPDOWN
   ===================================================================== */
.card {
  --bs-card-bg: var(--bt-surface);
  --bs-card-border-color: var(--bt-line);
  --bs-card-border-radius: var(--bt-radius);
  --bs-card-spacer-x: 1.15rem;
  --bs-card-spacer-y: 1.05rem;
  box-shadow: var(--bt-shadow-sm);
}
.card-header {
  background: transparent;
  border-bottom-color: var(--bt-line);
  font-family: var(--bt-font-display);
  font-weight: 600;
  padding: 0.85rem 1.15rem;
}

.modal-content {
  border: none;
  border-radius: var(--bt-radius-lg);
  box-shadow: var(--bt-shadow-lg);
}
.modal-header {
  border-bottom-color: var(--bt-line);
  padding: 1rem 1.25rem;
}
.modal-title { font-family: var(--bt-font-display); font-weight: 600; font-size: 1.0625rem; }
.modal-body   { padding: 1.25rem; }
.modal-footer { border-top-color: var(--bt-line); padding: 0.85rem 1.25rem; }

.dropdown-menu {
  border-color: var(--bt-line);
  border-radius: var(--bt-radius);
  box-shadow: var(--bt-shadow);
  padding: 0.35rem;
  font-size: 0.9rem;
}
.dropdown-item { border-radius: var(--bt-radius-sm); padding: 0.45rem 0.7rem; }
.dropdown-item:hover, .dropdown-item:focus { background: var(--bt-primary-soft); color: var(--bt-primary-ink); }
.dropdown-item.text-danger:hover { background: var(--bt-bad-soft); color: var(--bt-bad-ink) !important; }

/* =====================================================================
   SECTION 6 — TABLE
   ===================================================================== */
.table {
  --bs-table-color: var(--bt-ink);
  --bs-table-border-color: var(--bt-line);
  --bs-table-hover-bg: var(--bt-primary-soft);
  margin-bottom: 0;
}
.table > thead > tr > th {
  background: var(--bt-surface-alt);
  color: var(--bt-ink-muted);
  font-family: var(--bt-font-body);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  text-transform: none;
  border-bottom-width: 1px;
  padding: 0.65rem 0.85rem;
  white-space: nowrap;
}
.table > tbody > tr > td {
  padding: 0.7rem 0.85rem;
  vertical-align: middle;
  border-color: var(--bt-line);
}
.table-hover > tbody > tr:hover > * { --bs-table-accent-bg: var(--bt-primary-soft); }

/* =====================================================================
   SECTION 7 — BADGE / ALERT / PAGINATION
   ===================================================================== */
.badge {
  font-weight: 600;
  font-size: 0.75rem;
  padding: 0.32em 0.62em;
  border-radius: 999px;
}
.badge-ok     { background: var(--bt-ok-soft);      color: var(--bt-ok-ink); }
.badge-warn   { background: var(--bt-warn-soft);    color: var(--bt-warn-ink); }
.badge-bad    { background: var(--bt-bad-soft);     color: var(--bt-bad-ink); }
.badge-info   { background: var(--bt-info-soft);    color: var(--bt-primary-ink); }
.badge-muted  { background: var(--bt-bg-sunken);    color: var(--bt-ink-muted); }
.badge-accent { background: var(--bt-accent-soft);  color: var(--bt-accent-ink); }

.alert {
  border: 1px solid var(--bt-line);
  border-radius: var(--bt-radius);
  padding: 0.75rem 1rem;
}
.alert-success { background: var(--bt-ok-soft);   border-color: var(--bt-ok);   color: var(--bt-ok-ink); }
.alert-danger  { background: var(--bt-bad-soft);  border-color: var(--bt-bad);  color: var(--bt-bad-ink); }
.alert-warning { background: var(--bt-warn-soft); border-color: var(--bt-warn); color: var(--bt-warn-ink); }
.alert-info    { background: var(--bt-info-soft); border-color: var(--bt-info); color: var(--bt-primary-ink); }

.pagination {
  --bs-pagination-color: var(--bt-ink-soft);
  --bs-pagination-border-color: var(--bt-line);
  --bs-pagination-hover-bg: var(--bt-primary-soft);
  --bs-pagination-hover-color: var(--bt-primary-ink);
  --bs-pagination-active-bg: var(--bt-primary);
  --bs-pagination-active-border-color: var(--bt-primary);
  --bs-pagination-border-radius: var(--bt-radius-sm);
  font-size: 0.9rem;
}

.progress {
  background: var(--bt-bg-sunken);
  border-radius: 999px;
  height: 7px;
}
.progress-bar { background: var(--bt-primary); border-radius: 999px; }

.nav-tabs {
  --bs-nav-tabs-border-color: var(--bt-line);
  --bs-nav-tabs-link-active-color: var(--bt-primary-ink);
  --bs-nav-tabs-link-active-border-color: var(--bt-line) var(--bt-line) var(--bt-surface);
  font-weight: 500;
}

.form-control:focus-visible,
.btn:focus-visible,
a:focus-visible {
  outline: 2px solid var(--bt-primary);
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}