/* ============================================================================
   ui-bootstrap-bridge.css — สะพานเชื่อม Bootstrap 5 เข้ากับ token กลาง
   ----------------------------------------------------------------------------
   ทำไมต้องมีไฟล์นี้

   มี 59 หน้าที่เขียนด้วยคลาส Bootstrap (.btn-primary, .card, .badge, .alert,
   .table, .form-control ...) การจะไล่แก้ body ของทุกหน้าให้เป็นคลาส .u-*
   คือการแก้หลายพันบรรทัดพร้อมกัน = เสี่ยงพังสูงมากบนเว็บที่มีคนใช้จริง

   ไฟล์นี้แก้ปัญหาอีกทาง: แทนที่จะเปลี่ยน HTML เราเปลี่ยนความหมายของคลาส
   Bootstrap ให้ชี้มาที่ token กลางแทน ผลคือหน้าเดิมทั้ง 59 หน้า
   "เปลี่ยนหน้าตาเป็นดีไซน์ใหม่ทันที" โดยไม่ต้องแตะ markup เลยแม้แต่บรรทัดเดียว

   ลำดับการโหลดสำคัญมาก — ต้องเป็น:
       bootstrap.min.css  →  ui.css  →  ui-bootstrap-bridge.css
   (inc/layout/page.php จัดลำดับนี้ให้อัตโนมัติแล้ว)

   ไฟล์นี้คือสิ่งชั่วคราวโดยเจตนา ทุกครั้งที่ย้ายหน้าไปใช้คลาส .u-*
   ได้จริง ให้ลบกฎที่ไม่มีใครใช้แล้วออกจากไฟล์นี้ทีละส่วน
   ========================================================================= */

/* ── ตัวแปรของ Bootstrap เอง ─────────────────────────────────────────────
   Bootstrap 5.3 อ่านค่าจาก --bs-* ของตัวเอง การ map ตรงนี้จุดเดียว
   ทำให้คอมโพเนนต์ Bootstrap ส่วนใหญ่เปลี่ยนตามโดยไม่ต้องเขียนกฎเพิ่ม   */
:root {
  --bs-primary: var(--u-brand-600);
  --bs-primary-rgb: 15, 107, 98;
  --bs-secondary: var(--u-muted);
  --bs-success: var(--u-ok-600);
  --bs-danger:  var(--u-danger-600);
  --bs-warning: var(--u-warn-600);
  --bs-info:    var(--u-info-600);
  --bs-light:   var(--u-surface-2);
  --bs-dark:    var(--u-brand-900);

  --bs-body-color: var(--u-ink);
  --bs-body-bg: var(--u-canvas);
  --bs-body-font-family: var(--u-font);
  --bs-body-font-size: var(--u-fs-base);
  --bs-body-line-height: var(--u-lh-body);
  --bs-border-color: var(--u-line);
  --bs-border-radius: var(--u-r-md);
  --bs-border-radius-sm: var(--u-r-sm);
  --bs-border-radius-lg: var(--u-r-lg);
  --bs-link-color: var(--u-brand-600);
  --bs-link-hover-color: var(--u-brand-700);
  --bs-emphasis-color: var(--u-ink);
  --bs-secondary-color: var(--u-muted);
  --bs-tertiary-bg: var(--u-surface-2);
}

/* ── พื้นฐานเอกสาร ──────────────────────────────────────────────────────── */
body {
  font-family: var(--u-font);
  background: var(--u-canvas);
  color: var(--u-ink);
  line-height: var(--u-lh-body);
}
/* .bg-light กับ .bg-white ถูกใช้เป็นพื้นหน้าในหลายหน้า ให้เป็นสีของระบบ */
body.bg-light { background: var(--u-canvas) !important; }
.bg-light { background-color: var(--u-surface-2) !important; }
.bg-white { background-color: var(--u-surface) !important; }
.bg-body,
.bg-body-tertiary { background-color: var(--u-surface-2) !important; }

.text-muted,
.text-body-secondary { color: var(--u-muted) !important; }
.text-primary { color: var(--u-brand-600) !important; }
.text-success { color: var(--u-ok-600) !important; }
.text-danger  { color: var(--u-danger-600) !important; }
.text-warning { color: var(--u-warn-600) !important; }
.text-info    { color: var(--u-info-600) !important; }
.text-dark    { color: var(--u-ink) !important; }

.border, .border-top, .border-bottom, .border-start, .border-end {
  border-color: var(--u-line) !important;
}

/* ── ปุ่ม ────────────────────────────────────────────────────────────────
   ยกระดับเป้าแตะเป็น 44px ให้เท่ากับ .u-btn ทั้งระบบ                     */
.btn {
  min-height: 44px;
  display: inline-flex; align-items: center; justify-content: center; gap: var(--u-2);
  border-radius: var(--u-r-md);
  font-weight: 600;
  font-size: var(--u-fs-md);
  line-height: 1.2;
  transition: background var(--u-t-fast), border-color var(--u-t-fast),
              color var(--u-t-fast), box-shadow var(--u-t-fast);
}
.btn:active { transform: translateY(1px); }
.btn-sm { min-height: 36px; font-size: var(--u-fs-sm); border-radius: var(--u-r-sm); }
.btn-lg { min-height: 52px; font-size: var(--u-fs-lg); }

.btn-primary {
  --bs-btn-bg: var(--u-brand-600);
  --bs-btn-border-color: var(--u-brand-600);
  --bs-btn-hover-bg: var(--u-brand-700);
  --bs-btn-hover-border-color: var(--u-brand-700);
  --bs-btn-active-bg: var(--u-brand-800);
  --bs-btn-active-border-color: var(--u-brand-800);
  --bs-btn-disabled-bg: var(--u-brand-600);
  --bs-btn-disabled-border-color: var(--u-brand-600);
}
.btn-outline-primary {
  --bs-btn-color: var(--u-brand-700);
  --bs-btn-border-color: var(--u-line-strong);
  --bs-btn-hover-bg: var(--u-brand-100);
  --bs-btn-hover-border-color: var(--u-brand-200);
  --bs-btn-hover-color: var(--u-brand-700);
  --bs-btn-active-bg: var(--u-brand-200);
  --bs-btn-active-color: var(--u-brand-900);
}
.btn-success {
  --bs-btn-bg: var(--u-ok-600); --bs-btn-border-color: var(--u-ok-600);
  --bs-btn-hover-bg: #10603f;   --bs-btn-hover-border-color: #10603f;
}
.btn-danger {
  --bs-btn-bg: var(--u-danger-600); --bs-btn-border-color: var(--u-danger-600);
  --bs-btn-hover-bg: #97201a;       --bs-btn-hover-border-color: #97201a;
}
.btn-warning {
  --bs-btn-bg: var(--u-warn-600); --bs-btn-border-color: var(--u-warn-600);
  --bs-btn-color: #fff;           --bs-btn-hover-color: #fff;
  --bs-btn-hover-bg: #714a00;     --bs-btn-hover-border-color: #714a00;
}
.btn-outline-secondary {
  --bs-btn-color: var(--u-ink-2);
  --bs-btn-border-color: var(--u-line-strong);
  --bs-btn-hover-bg: var(--u-surface-2);
  --bs-btn-hover-border-color: var(--u-line-strong);
  --bs-btn-hover-color: var(--u-ink);
}
.btn-outline-danger {
  --bs-btn-color: var(--u-danger-600);
  --bs-btn-border-color: var(--u-danger-600);
  --bs-btn-hover-bg: var(--u-danger-100);
  --bs-btn-hover-color: var(--u-danger-600);
  --bs-btn-hover-border-color: var(--u-danger-600);
}
.btn-dark {
  --bs-btn-bg: var(--u-brand-900); --bs-btn-border-color: var(--u-brand-900);
  --bs-btn-hover-bg: var(--u-brand-800); --bs-btn-hover-border-color: var(--u-brand-800);
}
.btn-link { --bs-btn-color: var(--u-brand-600); --bs-btn-hover-color: var(--u-brand-700); }

/* ── การ์ด ──────────────────────────────────────────────────────────────── */
.card {
  border-color: var(--u-line);
  border-radius: var(--u-r-lg);
  box-shadow: var(--u-shadow-sm);
  background: var(--u-surface);
}
.card-header {
  background: var(--u-surface-2);
  border-bottom-color: var(--u-line);
  font-weight: 700;
  color: var(--u-ink);
}
.card-footer { background: var(--u-surface-2); border-top-color: var(--u-line); }
.card-title { color: var(--u-ink); font-weight: 700; }
.card-subtitle, .card-text small { color: var(--u-muted); }

/* ── ฟอร์ม ──────────────────────────────────────────────────────────────── */
.form-control, .form-select {
  min-height: 44px;
  border-color: var(--u-line-strong);
  border-radius: var(--u-r-md);
  background-color: var(--u-surface);
  color: var(--u-ink);
  font-size: var(--u-fs-base);   /* กัน iOS ซูมตอนโฟกัส input */
}
.form-control:focus, .form-select:focus {
  border-color: var(--u-brand-600);
  box-shadow: var(--u-ring);
}
.form-control::placeholder { color: var(--u-muted); opacity: 1; }
.form-label { font-weight: 600; color: var(--u-ink); margin-bottom: var(--u-1); }
.form-text  { color: var(--u-muted); font-size: var(--u-fs-sm); }
.form-check-input:checked { background-color: var(--u-brand-600); border-color: var(--u-brand-600); }
.form-check-input:focus { border-color: var(--u-brand-600); box-shadow: var(--u-ring); }
.input-group-text { background: var(--u-surface-2); border-color: var(--u-line-strong); color: var(--u-ink-2); }

/* ── ป้าย / alert ───────────────────────────────────────────────────────── */
.badge {
  border-radius: var(--u-r-pill);
  font-weight: 700;
  font-size: var(--u-fs-xs);
  padding: 4px 9px;
}
.badge.bg-primary   { background: var(--u-brand-100) !important; color: var(--u-brand-700) !important; }
.badge.bg-success   { background: var(--u-ok-100) !important;    color: var(--u-ok-600) !important; }
.badge.bg-danger    { background: var(--u-danger-100) !important;color: var(--u-danger-600) !important; }
.badge.bg-warning   { background: var(--u-warn-100) !important;  color: var(--u-warn-600) !important; }
.badge.bg-info      { background: var(--u-info-100) !important;  color: var(--u-info-600) !important; }
.badge.bg-secondary { background: var(--u-surface-2) !important; color: var(--u-ink-2) !important; }

.alert {
  border-radius: var(--u-r-md);
  border-width: 1px;
  border-left-width: 4px;
  font-size: var(--u-fs-md);
}
.alert-success { background: var(--u-ok-100);     border-color: var(--u-ok-600);     color: var(--u-ok-600); }
.alert-danger  { background: var(--u-danger-100); border-color: var(--u-danger-600); color: var(--u-danger-600); }
.alert-warning { background: var(--u-warn-100);   border-color: var(--u-warn-600);   color: var(--u-warn-600); }
.alert-info    { background: var(--u-info-100);   border-color: var(--u-info-600);   color: var(--u-info-600); }
.alert-primary { background: var(--u-brand-100);  border-color: var(--u-brand-600);  color: var(--u-brand-700); }

/* ── ตาราง ──────────────────────────────────────────────────────────────── */
.table {
  --bs-table-color: var(--u-ink);
  --bs-table-border-color: var(--u-line);
  --bs-table-striped-bg: var(--u-surface-2);
  --bs-table-hover-bg: var(--u-surface-2);
  font-size: var(--u-fs-md);
}
.table > thead {
  background: var(--u-surface-2);
  color: var(--u-ink-2);
}
.table > thead th { font-weight: 700; border-bottom-color: var(--u-line-strong); }
.table-responsive { -webkit-overflow-scrolling: touch; }

/* ── navbar เดิม (inc/navbar.php) ────────────────────────────────────────
   ยังมีหน้าที่ include navbar ตัวเก่าอยู่ระหว่างการย้าย
   ปรับให้หน้าตาเข้าชุดกับ .u-header เพื่อไม่ให้สลับหน้าแล้วรู้สึกคนละเว็บ */
.navbar.bg-white, .navbar.navbar-light {
  background: var(--u-surface) !important;
  border-bottom: 1px solid var(--u-line) !important;
}
.navbar-brand { font-weight: 800; color: var(--u-ink) !important; }
.navbar .nav-link { color: var(--u-ink-2); font-weight: 600; border-radius: var(--u-r-sm); }
.navbar .nav-link:hover { color: var(--u-ink); background: var(--u-surface-2); }
.navbar .nav-link.active { color: var(--u-brand-700) !important; background: var(--u-brand-100); }
.dropdown-menu {
  border-color: var(--u-line);
  border-radius: var(--u-r-md);
  box-shadow: var(--u-shadow-lg);
  padding: var(--u-1);
}
.dropdown-item { border-radius: var(--u-r-sm); font-size: var(--u-fs-md); padding: var(--u-2) var(--u-3); }
.dropdown-item:hover, .dropdown-item:focus { background: var(--u-surface-2); color: var(--u-ink); }
.dropdown-item.active, .dropdown-item:active { background: var(--u-brand-100); color: var(--u-brand-700); }

/* bottom nav ของ navbar เดิม — ให้ใช้สีแบรนด์แทนน้ำเงิน Bootstrap */
.btm-nav { background: var(--u-surface) !important; border-top-color: var(--u-line) !important; }
.btm-nav a, .btm-nav button { color: var(--u-muted); }
.btm-nav a.active, .btm-nav button.active { color: var(--u-brand-600); }

/* ── list group / progress / pagination ─────────────────────────────────── */
.list-group-item { border-color: var(--u-line); color: var(--u-ink); background: var(--u-surface); }
.list-group-item-action:hover { background: var(--u-surface-2); }
.list-group-item.active { background: var(--u-brand-600); border-color: var(--u-brand-600); }

.progress { background: var(--u-line); border-radius: var(--u-r-pill); height: 8px; }
.progress-bar { background: var(--u-brand-600); }

.page-link { color: var(--u-brand-600); border-color: var(--u-line); }
.page-item.active .page-link { background: var(--u-brand-600); border-color: var(--u-brand-600); }

.modal-content { border-radius: var(--u-r-lg); border-color: var(--u-line); }
.offcanvas { background: var(--u-surface); color: var(--u-ink); }

/* โฟกัสต้องเห็นชัดทุกที่ ไม่ว่าจะเป็นคอมโพเนนต์ของใคร */
.btn:focus-visible, .form-control:focus-visible, .form-select:focus-visible,
.nav-link:focus-visible, .dropdown-item:focus-visible, .page-link:focus-visible {
  outline: 2px solid var(--u-brand-600);
  outline-offset: 2px;
}