/*
 * BoxBMS Design System — reskin Bootstrap 5 (giữ nguyên class, chỉ đổi giao diện).
 * Chỉ dùng token trong ds-tokens.css / ds-colors.css.
 * Mục tiêu: markup Bootstrap 5 đang có trong BoxBMS hiển thị theo chuẩn mới mà không cần sửa HTML/JS.
 */

/* ================= Base ================= */
html { -webkit-text-size-adjust: 100%; }
body {
  font: var(--ds-font-body);
  color: var(--ds-text);
  background-color: var(--ds-surface-sunken);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

h1, .h1 { font: var(--ds-font-heading-xlarge); }
h2, .h2 { font: var(--ds-font-heading-large); }
h3, .h3 { font: var(--ds-font-heading-medium); }
h4, .h4 { font: var(--ds-font-heading-small); }
h5, .h5 { font: var(--ds-font-heading-xsmall); }
h6, .h6 { font: var(--ds-font-heading-xxsmall); text-transform: none; }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--ds-text);
  margin-bottom: var(--ds-space-100);
  letter-spacing: -0.01em;
}
.display-4 { font: var(--ds-font-heading-xxlarge); letter-spacing: -0.02em; }
.lead { font: var(--ds-font-body-large); color: var(--ds-text-subtle); }
small, .small { font-size: 0.75rem; line-height: 1.125rem; }
p { margin-bottom: var(--ds-space-150); }

a { color: var(--ds-link); text-decoration: none; }
a:hover { color: var(--ds-link); text-decoration: underline; }
a:active { color: var(--ds-link-pressed); }

hr { border-color: var(--ds-border); opacity: 1; }
::selection { background: var(--ds-brand-200); color: var(--ds-text); }

code, kbd, pre { font: var(--ds-font-code); }
code { color: var(--ds-text); background: var(--ds-background-neutral); padding: 0 var(--ds-space-050); border-radius: var(--ds-radius-small); }

/* Số liệu: dùng cho cột tiền, số lượng, KPI để các chữ số thẳng cột. */
.ds-num, .table td.text-end, .table th.text-end { font-variant-numeric: tabular-nums; }

/* Viền focus thống nhất cho mọi phần tử tương tác (chỉ hiện khi dùng bàn phím). */
:focus { outline: none; }
:focus-visible {
  outline: var(--ds-border-width-focused) solid var(--ds-border-focused);
  outline-offset: 2px;
}

/* Màu tiện ích Bootstrap → token */
.text-primary { color: var(--ds-text-brand) !important; }
.text-success { color: var(--ds-text-success) !important; }
.text-danger { color: var(--ds-text-danger) !important; }
.text-warning { color: var(--ds-text-warning) !important; }
.text-info { color: var(--ds-text-information) !important; }
.text-muted { color: var(--ds-text-subtlest) !important; }
.text-body { color: var(--ds-text) !important; }
.text-secondary { color: var(--ds-text-subtle) !important; }
.bg-primary { background-color: var(--ds-background-brand-bold) !important; }
.bg-light { background-color: var(--ds-surface-sunken) !important; }
.bg-white { background-color: var(--ds-surface) !important; }
.border { border-color: var(--ds-border) !important; }
.border-top, .border-bottom, .border-start, .border-end { border-color: var(--ds-border) !important; }
.rounded { border-radius: var(--ds-radius-medium) !important; }
.rounded-3 { border-radius: var(--ds-radius-large) !important; }
.shadow-sm { box-shadow: var(--ds-shadow-raised) !important; }
.shadow { box-shadow: var(--ds-shadow-overlay) !important; }

/* ================= Button ================= */
.btn {
  --ds-btn-bg: var(--ds-background-neutral);
  --ds-btn-bg-hover: var(--ds-background-neutral-hovered);
  --ds-btn-bg-active: var(--ds-background-neutral-pressed);
  --ds-btn-color: var(--ds-text-subtle);
  --ds-btn-border: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--ds-space-075);
  min-height: var(--ds-control-height);
  padding: 0 var(--ds-space-150);
  font: var(--ds-font-body);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-btn-color);
  background-color: var(--ds-btn-bg);
  border: var(--ds-border-width) solid var(--ds-btn-border);
  border-radius: var(--ds-radius-medium);
  box-shadow: none;
  white-space: nowrap;
  transition: background-color var(--ds-duration-fast) var(--ds-easing),
              border-color var(--ds-duration-fast) var(--ds-easing),
              color var(--ds-duration-fast) var(--ds-easing);
}
.btn:hover { color: var(--ds-btn-color); background-color: var(--ds-btn-bg-hover); text-decoration: none; }
.btn:active, .btn.active, .show > .btn.dropdown-toggle { color: var(--ds-btn-color); background-color: var(--ds-btn-bg-active); }
.btn:focus { box-shadow: none; }
.btn:focus-visible { outline: var(--ds-border-width-focused) solid var(--ds-border-focused); outline-offset: 2px; box-shadow: none; }
.btn:disabled, .btn.disabled, fieldset:disabled .btn {
  color: var(--ds-text-disabled);
  background-color: var(--ds-background-disabled);
  border-color: transparent;
  opacity: 1;
  cursor: not-allowed;
  pointer-events: auto;
}
.btn > .bi, .btn > i { font-size: 1rem; line-height: 1; }

.btn-sm { min-height: var(--ds-control-height-small); padding: 0 var(--ds-space-100); font-size: 0.8125rem; border-radius: var(--ds-radius-medium); }
.btn-lg { min-height: var(--ds-control-height-large); padding: 0 var(--ds-space-250); font-size: 1rem; border-radius: var(--ds-radius-large); }

/* Primary — màu chủ đạo, mỗi khu vực chỉ nên có 1 nút primary. */
.btn-primary {
  --ds-btn-bg: var(--ds-background-brand-bold);
  --ds-btn-bg-hover: var(--ds-background-brand-bold-hovered);
  --ds-btn-bg-active: var(--ds-background-brand-bold-pressed);
  --ds-btn-color: var(--ds-text-inverse);
}
/* Secondary / default — nút thường dùng nhất. */
.btn-secondary, .btn-default { /* dùng giá trị mặc định của .btn */ }
/* Subtle — nút trong toolbar, hành động phụ. */
.btn-light, .btn-subtle {
  --ds-btn-bg: var(--ds-background-neutral-subtle);
  --ds-btn-bg-hover: var(--ds-background-neutral-subtle-hovered);
  --ds-btn-bg-active: var(--ds-background-neutral-subtle-pressed);
}
.btn-success {
  --ds-btn-bg: var(--ds-background-success-bold);
  --ds-btn-bg-hover: var(--ds-background-success-bold-hovered);
  --ds-btn-bg-active: var(--ds-background-success-bold-pressed);
  --ds-btn-color: var(--ds-text-inverse);
}
.btn-danger {
  --ds-btn-bg: var(--ds-background-danger-bold);
  --ds-btn-bg-hover: var(--ds-background-danger-bold-hovered);
  --ds-btn-bg-active: var(--ds-background-danger-bold-pressed);
  --ds-btn-color: var(--ds-text-inverse);
}
.btn-warning {
  --ds-btn-bg: var(--ds-background-warning-bold);
  --ds-btn-bg-hover: var(--ds-background-warning-bold-hovered);
  --ds-btn-bg-active: var(--ds-background-warning-bold-pressed);
  --ds-btn-color: var(--ds-text-warning-inverse);
}
.btn-info {
  --ds-btn-bg: var(--ds-background-information-bold);
  --ds-btn-bg-hover: var(--ds-background-information-bold-hovered);
  --ds-btn-bg-active: var(--ds-background-information-bold-pressed);
  --ds-btn-color: var(--ds-text-inverse);
}
.btn-dark {
  --ds-btn-bg: var(--ds-background-neutral-bold);
  --ds-btn-bg-hover: var(--ds-background-neutral-bold-hovered);
  --ds-btn-bg-active: var(--ds-background-neutral-bold-pressed);
  --ds-btn-color: var(--ds-text-inverse);
}

/* Outline */
[class*="btn-outline-"] {
  --ds-btn-bg: transparent;
  --ds-btn-bg-hover: var(--ds-background-neutral-subtle-hovered);
  --ds-btn-bg-active: var(--ds-background-neutral-subtle-pressed);
  --ds-btn-border: var(--ds-border);
}
.btn-outline-primary {
  --ds-btn-color: var(--ds-text-brand);
  --ds-btn-border: var(--ds-border-brand);
  --ds-btn-bg-hover: var(--ds-background-brand-subtlest);
  --ds-btn-bg-active: var(--ds-background-brand-subtlest-hovered);
}
.btn-outline-secondary { --ds-btn-color: var(--ds-text-subtle); }
.btn-outline-danger { --ds-btn-color: var(--ds-text-danger); --ds-btn-border: var(--ds-border-danger); --ds-btn-bg-hover: var(--ds-background-danger); }
.btn-outline-success { --ds-btn-color: var(--ds-text-success); --ds-btn-border: var(--ds-border-success); --ds-btn-bg-hover: var(--ds-background-success); }
.btn-outline-warning { --ds-btn-color: var(--ds-text-warning); --ds-btn-border: var(--ds-border-warning); --ds-btn-bg-hover: var(--ds-background-warning); }
.btn-outline-info { --ds-btn-color: var(--ds-text-information); --ds-btn-border: var(--ds-border-information); --ds-btn-bg-hover: var(--ds-background-information); }

.btn-link {
  --ds-btn-bg: transparent;
  --ds-btn-bg-hover: transparent;
  --ds-btn-bg-active: transparent;
  --ds-btn-color: var(--ds-link);
  font-weight: var(--ds-font-weight-medium);
}
.btn-link:hover { text-decoration: underline; }

/* Nút chỉ có icon (vuông) */
.btn-icon-only { width: var(--ds-control-height); padding: 0; }
.btn-icon-only.btn-sm { width: var(--ds-control-height-small); }
.btn-icon-only.btn-lg { width: var(--ds-control-height-large); }

.btn-group > .btn:not(:last-child):not(.dropdown-toggle) { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.btn-group > .btn:not(:first-child) { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: 1px; }
.btn-close { width: 1rem; height: 1rem; opacity: 0.6; border-radius: var(--ds-radius-medium); }
.btn-close:hover { opacity: 1; }
.btn-close:focus { box-shadow: none; }

/* ================= Form ================= */
.form-label, .col-form-label {
  font: var(--ds-font-heading-xxsmall);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-subtle);
  margin-bottom: var(--ds-space-050);
}
.form-text { font: var(--ds-font-body-small); color: var(--ds-text-subtlest); margin-top: var(--ds-space-050); }

.form-control, .form-select {
  min-height: var(--ds-control-height);
  padding: var(--ds-space-075) var(--ds-space-100);
  font: var(--ds-font-body);
  color: var(--ds-text);
  background-color: var(--ds-background-input);
  border: var(--ds-border-width) solid var(--ds-border-input);
  border-radius: var(--ds-radius-medium);
  box-shadow: none;
  transition: background-color var(--ds-duration-fast) var(--ds-easing),
              border-color var(--ds-duration-fast) var(--ds-easing),
              box-shadow var(--ds-duration-fast) var(--ds-easing);
}
.form-control::placeholder { color: var(--ds-text-subtlest); opacity: 1; }
.form-control:hover, .form-select:hover { background-color: var(--ds-background-input-hovered); }
.form-control:focus, .form-select:focus {
  color: var(--ds-text);
  background-color: var(--ds-background-input-pressed);
  border-color: var(--ds-border-focused);
  box-shadow: inset 0 0 0 1px var(--ds-border-focused);
  outline: none;
}
.form-control:disabled, .form-control[readonly]:disabled, .form-select:disabled {
  color: var(--ds-text-disabled);
  background-color: var(--ds-background-disabled);
  border-color: var(--ds-border-disabled);
  cursor: not-allowed;
}
.form-control[readonly]:not(:disabled) { background-color: var(--ds-surface-sunken); }
.form-control-sm, .form-select-sm { min-height: var(--ds-control-height-small); padding: var(--ds-space-025) var(--ds-space-100); font-size: 0.8125rem; border-radius: var(--ds-radius-medium); }
.form-control-lg, .form-select-lg { min-height: var(--ds-control-height-large); padding: var(--ds-space-100) var(--ds-space-150); font-size: 1rem; border-radius: var(--ds-radius-large); }
textarea.form-control { min-height: calc(var(--ds-control-height) * 2); }

.form-select {
  padding-right: var(--ds-space-400);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%2344546F' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.6' d='M4 6l4 4 4-4'/%3e%3c/svg%3e");
  background-position: right var(--ds-space-100) center;
  background-size: 16px 16px;
}

/* Validation */
.form-control.is-invalid, .form-select.is-invalid, .was-validated .form-control:invalid {
  border-color: var(--ds-border-danger);
  background-image: none;
  padding-right: var(--ds-space-100);
}
.form-control.is-invalid:focus, .form-select.is-invalid:focus { border-color: var(--ds-border-danger); box-shadow: inset 0 0 0 1px var(--ds-border-danger); }
.form-control.is-valid, .form-select.is-valid { border-color: var(--ds-border-success); background-image: none; padding-right: var(--ds-space-100); }
.form-control.is-valid:focus { box-shadow: inset 0 0 0 1px var(--ds-border-success); }
.invalid-feedback, .valid-feedback { font: var(--ds-font-body-small); margin-top: var(--ds-space-050); }
.invalid-feedback { color: var(--ds-text-danger); }
.valid-feedback { color: var(--ds-text-success); }

/* Checkbox / radio / switch */
.form-check { min-height: 1.375rem; padding-left: 1.625rem; margin-bottom: var(--ds-space-050); }
.form-check-input {
  width: 1rem;
  height: 1rem;
  margin-top: 0.1875rem;
  background-color: var(--ds-background-input);
  border: 2px solid var(--ds-border-input);
  transition: background-color var(--ds-duration-fast) var(--ds-easing), border-color var(--ds-duration-fast) var(--ds-easing);
}
.form-check .form-check-input { margin-left: -1.625rem; }
td > .form-check-input, th > .form-check-input { margin: 0; vertical-align: middle; }
.form-check-input[type="checkbox"] { border-radius: var(--ds-radius-xsmall); }
.form-check-input:hover { border-color: var(--ds-border-bold); background-color: var(--ds-background-input-hovered); }
.form-check-input:focus { box-shadow: none; border-color: var(--ds-border-input); }
.form-check-input:focus-visible { outline: var(--ds-border-width-focused) solid var(--ds-border-focused); outline-offset: 2px; }
.form-check-input:checked { background-color: var(--ds-background-brand-bold); border-color: var(--ds-background-brand-bold); }
.form-check-input:checked:hover { background-color: var(--ds-background-brand-bold-hovered); border-color: var(--ds-background-brand-bold-hovered); }
.form-check-input[type="checkbox"]:indeterminate { background-color: var(--ds-background-brand-bold); border-color: var(--ds-background-brand-bold); }
.form-check-input:disabled { opacity: 1; background-color: var(--ds-background-disabled); border-color: var(--ds-border-disabled); }
.form-check-input:disabled ~ .form-check-label { opacity: 1; color: var(--ds-text-disabled); }
.form-check-label { color: var(--ds-text); }

.form-switch { padding-left: 2.75rem; }
.form-switch .form-check-input {
  width: 2.25rem;
  height: 1.25rem;
  margin-top: 0.0625rem;
  margin-left: -2.75rem;
  border: none;
  background-color: var(--ds-neutral-500);
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e");
  border-radius: var(--ds-radius-full);
}
.form-switch .form-check-input:hover { background-color: var(--ds-neutral-600); }
.form-switch .form-check-input:focus { background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='%23fff'/%3e%3c/svg%3e"); }
.form-switch .form-check-input:checked { background-color: var(--ds-background-success-bold); }
.form-switch .form-check-input:checked:hover { background-color: var(--ds-background-success-bold-hovered); }

/* Input group */
.input-group-text {
  padding: 0 var(--ds-space-100);
  font: var(--ds-font-body);
  color: var(--ds-text-subtle);
  background-color: var(--ds-surface-sunken);
  border: var(--ds-border-width) solid var(--ds-border-input);
  border-radius: var(--ds-radius-medium);
}
.input-group > .form-control:focus, .input-group > .form-select:focus { z-index: 3; }

/* ================= Card ================= */
.card {
  background-color: var(--ds-surface-raised);
  border: none;
  border-radius: var(--ds-radius-large);
  box-shadow: var(--ds-shadow-raised);
}
.card-header, .card-footer { padding: var(--ds-space-150) var(--ds-space-200); background: transparent; border-color: var(--ds-border); }
.card-header:first-child { border-radius: var(--ds-radius-large) var(--ds-radius-large) 0 0; }
.card-footer:last-child { border-radius: 0 0 var(--ds-radius-large) var(--ds-radius-large); }
.card-body { padding: var(--ds-space-200); }
.card-title { font: var(--ds-font-heading-small); color: var(--ds-text); margin-bottom: var(--ds-space-100); }
.card-subtitle { font: var(--ds-font-body-small); color: var(--ds-text-subtlest); }
.card-text { color: var(--ds-text-subtle); }

/* ================= Badge (lozenge) ================= */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--ds-space-050);
  padding: 0 var(--ds-space-075);
  min-height: 1.25rem;
  font: var(--ds-font-heading-xxsmall);
  font-weight: var(--ds-font-weight-semibold);
  border-radius: var(--ds-radius-small);
  color: var(--ds-text-subtle);
  background-color: var(--ds-background-neutral);
}
.badge.bg-primary { color: var(--ds-text-inverse); background-color: var(--ds-background-brand-bold) !important; }
.badge.bg-secondary { color: var(--ds-text-subtle); background-color: var(--ds-background-neutral) !important; }
.badge.bg-success { color: var(--ds-text-inverse); background-color: var(--ds-background-success-bold) !important; }
.badge.bg-danger { color: var(--ds-text-inverse); background-color: var(--ds-background-danger-bold) !important; }
.badge.bg-warning { color: var(--ds-text-warning-inverse); background-color: var(--ds-background-warning-bold) !important; }
.badge.bg-info { color: var(--ds-text-inverse); background-color: var(--ds-background-information-bold) !important; }
.badge.bg-light { color: var(--ds-text-subtle); background-color: var(--ds-background-neutral) !important; }
.badge.bg-dark { color: var(--ds-text-inverse); background-color: var(--ds-background-neutral-bold) !important; }
.badge.rounded-pill { border-radius: var(--ds-radius-full); }
/* Badge nhạt (subtle) — dùng cho trạng thái trong bảng */
.badge-subtle-primary { color: var(--ds-text-brand); background-color: var(--ds-background-brand-subtlest); }
.badge-subtle-success { color: var(--ds-text-success); background-color: var(--ds-background-success); }
.badge-subtle-danger { color: var(--ds-text-danger); background-color: var(--ds-background-danger); }
.badge-subtle-warning { color: var(--ds-text-warning); background-color: var(--ds-background-warning); }
.badge-subtle-info { color: var(--ds-text-information); background-color: var(--ds-background-information); }
.badge-subtle-discovery { color: var(--ds-text-discovery); background-color: var(--ds-background-discovery); }

/* ================= Alert ================= */
.alert {
  display: flex;
  gap: var(--ds-space-150);
  padding: var(--ds-space-150) var(--ds-space-200);
  font: var(--ds-font-body);
  color: var(--ds-text);
  border: none;
  border-radius: var(--ds-radius-large);
}
.alert-primary, .alert-info { background-color: var(--ds-background-information); }
.alert-primary > .bi:first-child, .alert-info > .bi:first-child { color: var(--ds-icon-information); }
.alert-success { background-color: var(--ds-background-success); }
.alert-success > .bi:first-child { color: var(--ds-icon-success); }
.alert-danger { background-color: var(--ds-background-danger); }
.alert-danger > .bi:first-child { color: var(--ds-icon-danger); }
.alert-warning { background-color: var(--ds-background-warning); }
.alert-warning > .bi:first-child { color: var(--ds-icon-warning); }
.alert-secondary, .alert-light { background-color: var(--ds-background-neutral); }
.alert > .bi:first-child { font-size: 1.25rem; line-height: 1.375rem; flex-shrink: 0; }
.alert-heading { font: var(--ds-font-heading-xsmall); color: var(--ds-text); margin-bottom: var(--ds-space-025); }
.alert-link { color: var(--ds-link); font-weight: var(--ds-font-weight-semibold); }

/* ================= Table ================= */
.table {
  --bs-table-bg: transparent;
  --bs-table-hover-bg: rgba(var(--ds-brand-bold-rgb), 0.08);
  --bs-table-striped-bg: var(--ds-surface-sunken);
  --bs-table-active-bg: var(--ds-background-selected);
  color: var(--ds-text);
  border-color: var(--ds-border);
  margin-bottom: 0;
}
.table > :not(caption) > * > * { padding: var(--ds-space-100) var(--ds-space-150); border-bottom-color: var(--ds-border); vertical-align: middle; }
.table > thead > tr > th {
  font: var(--ds-font-heading-xxsmall);
  font-weight: var(--ds-font-weight-semibold);
  color: var(--ds-text-subtlest);
  white-space: nowrap;
  border-bottom-width: 2px;
}
.table > :not(:first-child) { border-top: none; }
.table > :not(:last-child) > :last-child > * { border-bottom-color: var(--ds-border); }
.table:not(.table-bordered) > tbody:last-child > tr:last-child > *,
.table:not(.table-bordered) > tfoot:last-child > tr:last-child > * { border-bottom-width: 0; }
.table-hover > tbody > tr:hover { --bs-table-accent-bg: var(--bs-table-hover-bg); color: var(--ds-text); }
/* Touch and reflow layouts keep the normal row background, even after a tap. */
@media (max-width: 1024px), (hover: none), (pointer: coarse), (pointer: none) {
  .table-hover > tbody > tr:hover { --bs-table-accent-bg: transparent; color: inherit; }
  .table-hover.table-striped > tbody > tr:nth-of-type(odd):hover { --bs-table-accent-bg: var(--bs-table-striped-bg); color: inherit; }
  .table-hover > tbody > tr.table-active:hover { --bs-table-accent-bg: var(--ds-background-selected); color: var(--bs-table-active-color); }
  .table-hover > tbody > tr.is-selected:hover { --bs-table-accent-bg: var(--ds-background-selected); color: inherit; }
}
.table-sm > :not(caption) > * > * { padding: var(--ds-space-050) var(--ds-space-100); }
.table tr.table-active, .table tr.is-selected { --bs-table-accent-bg: var(--ds-background-selected); }

/* ================= Nav / Tabs ================= */
.nav-link { color: var(--ds-text-subtle); font-weight: var(--ds-font-weight-medium); padding: var(--ds-space-100) var(--ds-space-150); }
.nav-link:hover { color: var(--ds-text); text-decoration: none; }
.nav-tabs { border-bottom: 2px solid var(--ds-border); gap: var(--ds-space-050); }
.nav-tabs .nav-link {
  margin-bottom: -2px;
  border: none;
  border-bottom: 2px solid transparent;
  border-radius: 0;
  color: var(--ds-text-subtle);
}
.nav-tabs .nav-link:hover { border-bottom-color: var(--ds-border-bold); color: var(--ds-text); }
.nav-tabs .nav-link.active, .nav-tabs .nav-item.show .nav-link {
  color: var(--ds-text-selected);
  background: transparent;
  border-bottom-color: var(--ds-border-selected);
}
.nav-pills .nav-link { border-radius: var(--ds-radius-medium); }
.nav-pills .nav-link:hover { background-color: var(--ds-background-neutral-subtle-hovered); }
.nav-pills .nav-link.active, .nav-pills .show > .nav-link { color: var(--ds-text-selected); background-color: var(--ds-background-selected); }

/* ================= Dropdown ================= */
.dropdown-menu {
  min-width: 12rem;
  padding: var(--ds-space-075) 0;
  font: var(--ds-font-body);
  color: var(--ds-text);
  background-color: var(--ds-surface-overlay);
  border: none;
  border-radius: var(--ds-radius-large);
  box-shadow: var(--ds-shadow-overlay);
}
.dropdown-item {
  display: flex;
  align-items: center;
  gap: var(--ds-space-100);
  padding: var(--ds-space-075) var(--ds-space-200);
  color: var(--ds-text);
  border-left: 2px solid transparent;
}
.dropdown-item:hover, .dropdown-item:focus { color: var(--ds-text); background-color: var(--ds-background-neutral-subtle-hovered); text-decoration: none; }
.dropdown-item.active, .dropdown-item:active {
  color: var(--ds-text-selected);
  background-color: var(--ds-background-selected);
  border-left-color: var(--ds-border-selected);
}
.dropdown-item.disabled, .dropdown-item:disabled { color: var(--ds-text-disabled); }
.dropdown-header { font: var(--ds-font-heading-xxsmall); color: var(--ds-text-subtlest); padding: var(--ds-space-100) var(--ds-space-200) var(--ds-space-050); }
.dropdown-divider { border-color: var(--ds-border); margin: var(--ds-space-075) 0; }

/* ================= Modal ================= */
.modal-backdrop.show { background-color: var(--ds-blanket); opacity: 1; }
.modal-content {
  background-color: var(--ds-surface-overlay);
  border: none;
  border-radius: var(--ds-radius-xlarge);
  box-shadow: var(--ds-shadow-modal);
}
.modal-header,
.modal-footer { background-color: var(--ds-surface-overlay); }
.modal-header { padding: var(--ds-space-150) var(--ds-space-250); border-bottom: var(--ds-border-width) solid var(--ds-border); gap: var(--ds-space-150); }
.modal-title { font: var(--ds-font-heading-small); font-weight: var(--ds-font-weight-semibold); color: var(--ds-text); margin: 0; min-width: 0; overflow-wrap: anywhere; }
.modal-body { padding: var(--ds-space-250); }
.modal-footer { padding: var(--ds-space-150) var(--ds-space-250); border-top: var(--ds-border-width) solid var(--ds-border); gap: var(--ds-space-100); }
.modal-footer > * { margin: 0; }
.modal-header { border-top-left-radius: inherit; border-top-right-radius: inherit; }
.modal-footer { border-bottom-left-radius: inherit; border-bottom-right-radius: inherit; }

/* ================= Pagination ================= */
.pagination { gap: var(--ds-space-050); }
.page-link {
  min-width: var(--ds-control-height-small);
  height: var(--ds-control-height-small);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 var(--ds-space-075);
  font-weight: var(--ds-font-weight-medium);
  color: var(--ds-text-subtle);
  background: transparent;
  border: none;
  border-radius: var(--ds-radius-medium) !important;
}
.page-link:hover { color: var(--ds-text); background-color: var(--ds-background-neutral-subtle-hovered); text-decoration: none; }
.page-link:focus { box-shadow: none; }
.page-item.active .page-link { color: var(--ds-text-inverse); background-color: var(--ds-background-brand-bold); }
.page-item.disabled .page-link { color: var(--ds-text-disabled); background: transparent; }

/* ================= Progress ================= */
.progress { height: 0.375rem; background-color: var(--ds-background-neutral); border-radius: var(--ds-radius-full); }
.progress-bar { background-color: var(--ds-background-brand-bold); border-radius: var(--ds-radius-full); }
.progress-bar.bg-success { background-color: var(--ds-background-success-bold) !important; }
.progress-bar.bg-danger { background-color: var(--ds-background-danger-bold) !important; }
.progress-bar.bg-warning { background-color: var(--ds-background-warning-bold) !important; }

/* ================= List group ================= */
.list-group { border-radius: var(--ds-radius-large); }
.list-group-item { padding: var(--ds-space-150) var(--ds-space-200); color: var(--ds-text); border-color: var(--ds-border); }
.list-group-item-action:hover { background-color: var(--ds-background-neutral-subtle-hovered); }
.list-group-item.active { color: var(--ds-text-selected); background-color: var(--ds-background-selected); border-color: var(--ds-border); }

/* ================= Tooltip / Popover / Toast ================= */
.tooltip { font: var(--ds-font-body-small); }
.tooltip-inner { padding: var(--ds-space-025) var(--ds-space-075); background-color: var(--ds-background-neutral-bold-pressed); border-radius: var(--ds-radius-small); }
.popover { font: var(--ds-font-body); border: none; border-radius: var(--ds-radius-large); box-shadow: var(--ds-shadow-overlay); }
.popover-header { font: var(--ds-font-heading-xsmall); background: transparent; border-bottom-color: var(--ds-border); }
.toast { font: var(--ds-font-body); background-color: var(--ds-surface-overlay); border: none; border-radius: var(--ds-radius-large); box-shadow: var(--ds-shadow-overlay); }
.toast-header { color: var(--ds-text); background: transparent; border-bottom-color: var(--ds-border); }

/* ================= Breadcrumb ================= */
.breadcrumb { font: var(--ds-font-body); margin-bottom: var(--ds-space-050); }
.breadcrumb-item a { color: var(--ds-text-subtlest); }
.breadcrumb-item a:hover { color: var(--ds-text-subtle); }
.breadcrumb-item.active { color: var(--ds-text-subtle); }
.breadcrumb-item + .breadcrumb-item::before { color: var(--ds-text-subtlest); }

/* ================= Spinner ================= */
.spinner-border { width: 1.5rem; height: 1.5rem; border-width: 2.5px; color: var(--ds-icon-brand); }
.spinner-border-sm { width: 1rem; height: 1rem; border-width: 2px; }
.spinner-border.text-primary { color: var(--ds-icon-brand) !important; }
.btn .spinner-border { width: 1rem; height: 1rem; border-width: 2px; color: currentColor; }
/* Nút đang xử lý AJAX: giữ kích thước, ẩn nội dung, hiện spinner (BoxBMS: setButtonLoading()). */
.btn.btn-loading { position: relative; color: transparent !important; pointer-events: none; }
.btn.btn-loading > * { visibility: hidden; }
.btn.btn-loading::after {
  content: '';
  position: absolute;
  width: 1rem;
  height: 1rem;
  border: 2px solid var(--ds-btn-color);
  border-right-color: transparent;
  border-radius: 50%;
  animation: spinner-border 0.75s linear infinite;
}

/* ================= Accordion ================= */
.accordion-item { background: var(--ds-surface); border-color: var(--ds-border); }
.accordion-item:first-of-type { border-top-left-radius: var(--ds-radius-large); border-top-right-radius: var(--ds-radius-large); }
.accordion-item:last-of-type { border-bottom-left-radius: var(--ds-radius-large); border-bottom-right-radius: var(--ds-radius-large); }
.accordion-button { padding: var(--ds-space-150) var(--ds-space-200); font: var(--ds-font-heading-xsmall); color: var(--ds-text); background: transparent; }
.accordion-button:not(.collapsed) { color: var(--ds-text); background: var(--ds-surface-sunken); box-shadow: inset 0 -1px 0 var(--ds-border); }
.accordion-button:focus { box-shadow: none; border-color: transparent; }
.accordion-button:focus-visible { outline: var(--ds-border-width-focused) solid var(--ds-border-focused); outline-offset: -2px; }
.accordion-body { padding: var(--ds-space-200); color: var(--ds-text-subtle); }

/* ================= Offcanvas (drawer) ================= */
.offcanvas { background: var(--ds-surface-overlay); border: none !important; box-shadow: var(--ds-shadow-modal); }
.offcanvas-end { width: 30rem; max-width: 100%; }
.offcanvas-start { width: 20rem; }
.offcanvas-header { padding: var(--ds-space-300) var(--ds-space-300) var(--ds-space-150); }
.offcanvas-title { font: var(--ds-font-heading-medium); color: var(--ds-text); }
.offcanvas-body { padding: var(--ds-space-100) var(--ds-space-300) var(--ds-space-300); }
.offcanvas-backdrop.show { background: var(--ds-blanket); opacity: 1; }

/* ================= Table — bổ sung ================= */
.table-bordered > :not(caption) > * { border-color: var(--ds-border); }
.table-bordered > :not(caption) > * > * { border-color: var(--ds-border); }
.table-striped > tbody > tr:nth-of-type(odd) { --bs-table-accent-bg: var(--ds-surface-sunken); color: var(--ds-text); }
.table-responsive { border-radius: inherit; }

/* ================= Alert — bổ sung ================= */
.alert-dismissible { padding-right: var(--ds-space-500); }
.alert-dismissible .btn-close { padding: 0; top: var(--ds-space-150); right: var(--ds-space-150); width: 1.5rem; height: 1.5rem; background-size: 0.625rem; }

/* ================= Modal — bổ sung ================= */
.modal-sm { max-width: 25rem; }
.modal-md { max-width: 37.5rem; }
.modal-lg { max-width: 50rem; }
.modal-xl { max-width: 72rem; }
.modal-header .btn-close { margin: 0 0 0 auto; padding: 0; flex-shrink: 0; width: var(--ds-space-400); height: var(--ds-space-400); border-radius: var(--ds-radius-medium); background-size: var(--ds-space-150); }
.modal-header .btn-close:hover { background-color: var(--ds-background-neutral-subtle-hovered); }
@media (max-width: 575.98px) {
  .modal-fullscreen-sm-down .modal-content { border-radius: 0; }
}

/* ================= Tương thích class Acorn đang dùng trong BoxBMS ================= */
.btn-icon { gap: var(--ds-space-075); }
.btn-icon > i, .btn-icon > .bi { margin: 0 !important; }
.btn-icon-start > i:first-child, .btn-icon-end > i:last-child { margin: 0 !important; }
.btn-icon.btn-icon-only, .btn.btn-icon-only { width: var(--ds-control-height); padding: 0; flex-shrink: 0; }
.btn-sm.btn-icon-only { width: var(--ds-control-height-small); }
.text-small { font-size: 0.75rem !important; line-height: 1.125rem; font-weight: var(--ds-font-weight-regular) !important; }
.text-medium { font-size: 0.8125rem !important; }
.input-sm { min-height: var(--ds-control-height-small); padding-top: var(--ds-space-025); padding-bottom: var(--ds-space-025); font-size: 0.8125rem; }

/* ================= Button — chặn style trạng thái mặc định của Bootstrap ================= */
/* Bootstrap đặt border/box-shadow riêng cho :hover/:focus/:active của từng variant; ép về token. */
.btn.btn:hover, .btn.btn:focus, .btn.btn:active, .btn.btn.active { border-color: var(--ds-btn-border); box-shadow: none; }
.btn-check + .btn, .btn-check:focus + .btn, .btn-check:checked + .btn { box-shadow: none !important; }
.btn-check:focus-visible + .btn { outline: var(--ds-border-width-focused) solid var(--ds-border-focused); outline-offset: 2px; }
/* Nút bật/tắt đang bật (aria-pressed) → kiểu "selected" của Atlassian. */
.btn.active[aria-pressed="true"], .btn-check:checked + .btn:not(.ds-segmented *) {
  color: var(--ds-text-selected);
  background-color: var(--ds-background-selected);
  border-color: transparent;
}
.btn.active[aria-pressed="true"]:hover { background-color: var(--ds-background-selected-hovered); }

/* Dấu * trường bắt buộc — BoxBMS tự gắn class này qua public/js/common.js */
.boxbms-required-label::after { content: ' *'; color: var(--ds-text-danger); font-weight: var(--ds-font-weight-semibold); }
.form-switch .form-check-input:disabled { opacity: 0.45; }

/* Bảng nằm sát mép card: cột đầu/cuối thẳng hàng với nội dung card (16px) */
.card > .table-responsive > .table > :not(caption) > * > :first-child,
.card > .table > :not(caption) > * > :first-child { padding-left: var(--ds-space-200); }
.card > .table-responsive > .table > :not(caption) > * > :last-child,
.card > .table > :not(caption) > * > :last-child { padding-right: var(--ds-space-200); }
/* Tabs cuộn ngang trên màn nhỏ thay vì rớt dòng */
@media (max-width: 767.98px) {
  .nav-tabs { flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
  .nav-tabs::-webkit-scrollbar { display: none; }
  .nav-tabs .nav-link { white-space: nowrap; }
}