/* ============================================================
   BACFUTURES CRM V2.0 — components.css
   Tất cả component (Digi-system mục 3)
   BEM strict — 1 class = 1 thuộc tính
   ============================================================ */

/* ── 3.1 Button ── */
.bac-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--bac-space-2);
  padding: var(--bac-space-2) var(--bac-space-4);
  min-height: 40px;
  font-family: var(--bac-font-sans);
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-medium);
  line-height: var(--bac-lh-snug);
  white-space: nowrap;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--bac-radius-md);
  color: var(--bac-text-primary);
  cursor: pointer;
  transition: background var(--bac-transition-fast),
    border-color var(--bac-transition-fast),
    box-shadow var(--bac-transition-fast),
    color var(--bac-duration-instant) var(--bac-ease-standard);
}

.bac-btn--primary {
  background: var(--bac-brand);
  color: #ffffff;
}

.bac-btn--primary:hover {
  background: var(--bac-brand-hover);
  box-shadow: var(--bac-elevation-1);
}

.bac-btn--primary:active {
  background: var(--bac-brand-active);
  transform: scale(0.98);
}

.bac-btn--secondary {
  background: var(--bac-surface-1);
  border-color: var(--bac-outline);
  color: var(--bac-text-primary);
}

.bac-btn--secondary:hover {
  background: var(--bac-surface-3);
  border-color: var(--bac-outline-variant);
}

.bac-btn--danger {
  background: var(--bac-danger);
  color: #ffffff;
}

.bac-btn--danger:hover {
  filter: brightness(1.1);
  box-shadow: var(--bac-elevation-1);
}

.bac-btn--ghost {
  background: transparent;
  color: var(--bac-text-secondary);
}

.bac-btn--ghost:hover {
  background: var(--bac-surface-3);
  color: var(--bac-text-primary);
}

.bac-btn--sm {
  padding: var(--bac-space-1) var(--bac-space-3);
  min-height: 32px;
  font-size: var(--bac-text-xs);
}

.bac-btn--lg {
  padding: var(--bac-space-3) var(--bac-space-6);
  min-height: 48px;
  font-size: var(--bac-text-base);
}

.bac-btn:focus-visible {
  outline: none;
  box-shadow: var(--bac-glow-focus);
}

.bac-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  pointer-events: none;
}

/* ── 3.2 Card ── */
.bac-card {
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-lg);
  padding: var(--bac-space-5);
  box-shadow: var(--bac-elevation-1);
  overflow: hidden;
}

.bac-card--flat {
  box-shadow: none;
}

.bac-card--interactive {
  cursor: pointer;
  transition: box-shadow var(--bac-transition-fast),
    border-color var(--bac-transition-fast);
}

.bac-card--interactive:hover {
  box-shadow: var(--bac-elevation-2);
  border-color: var(--bac-outline-variant);
}

.bac-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--bac-space-4);
}

.bac-card__title {
  font-size: var(--bac-text-md);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-primary);
  line-height: var(--bac-lh-snug);
}

.bac-card__body {
  overflow-x: hidden;
}

.bac-card__footer {
  margin-top: var(--bac-space-4);
  padding-top: var(--bac-space-4);
  border-top: 1px solid var(--bac-outline);
}

/* ── 3.3 Table ── */
.bac-table-wrap {
  overflow-x: auto;
  border-radius: var(--bac-radius-lg);
  border: 1px solid var(--bac-outline);
}

.bac-table {
  width: 100%;
  min-width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

.bac-table thead th {
  text-align: left;
  padding: var(--bac-space-3) var(--bac-space-4);
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--bac-ls-wider);
  background: var(--bac-surface-1);
  border-bottom: 1px solid var(--bac-outline);
  position: sticky;
  top: 0;
  z-index: var(--bac-z-sticky);
  white-space: nowrap;
}

/* Full Name column (first column) — auto rộng, hiển thị đầy đủ */
.bac-table thead th:first-child {
  width: auto;
  min-width: 200px;
  white-space: nowrap;
}

.bac-table tbody td {
  padding: var(--bac-space-3) var(--bac-space-4);
  font-size: var(--bac-text-sm);
  color: var(--bac-text-primary);
  border-bottom: 1px solid var(--bac-outline);
  white-space: normal;
  vertical-align: middle;
}

/* First column — nowrap (không wrap cho mọi cột đầu) */
.bac-table tbody td:first-child {
  white-space: nowrap;
  font-weight: var(--bac-fw-medium);
}

/* Full Name column — không bao giờ wrap, hiển thị đủ trên 1 dòng */
.bac-table .bac-cell--name {
  white-space: nowrap;
  min-width: 200px;
  font-weight: var(--bac-fw-medium);
}

/* Phone column — không wrap, giữ nguyên định dạng */
.bac-table .bac-cell--phone {
  white-space: nowrap;
}

/* Cột dữ liệu đặc thù giữ nowrap — email, phone, mã, số */
.bac-table tbody td.bac-cell--mono,
.bac-table tbody td.bac-u-text-mono,
.bac-table tbody td.bac-u-text-mono.bac-u-text-sm {
  white-space: nowrap;
}

.bac-table tbody tr {
  transition: background var(--bac-duration-instant) var(--bac-ease-standard);
}

.bac-table tbody tr:hover {
  background: var(--bac-surface-3);
}

.bac-table tbody tr:last-child td {
  border-bottom: none;
}

.bac-table tbody tr.bac-table__row--selected {
  background: var(--bac-brand-light);
}

/* ── 3.4 Badge ── */
.bac-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--bac-space-1);
  padding: var(--bac-space-1) var(--bac-space-2);
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-medium);
  line-height: 1.4;
  border-radius: var(--bac-radius-full);
  white-space: nowrap;
}

.bac-badge--success {
  background: var(--bac-success-container);
  color: var(--bac-success);
}

.bac-badge--warning {
  background: var(--bac-warning-container);
  color: var(--bac-warning);
}

.bac-badge--danger {
  background: var(--bac-danger-container);
  color: var(--bac-danger);
}

.bac-badge--info {
  background: var(--bac-info-container);
  color: var(--bac-info);
}

.bac-badge--neutral {
  background: var(--bac-neutral-container);
  color: var(--bac-neutral);
}

/* ── 3.5 Input / Select / Textarea ── */
.bac-input,
.bac-select,
.bac-textarea {
  width: 100%;
  padding: var(--bac-space-2) var(--bac-space-3);
  min-height: 40px;
  background: var(--bac-surface-input);
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-sm);
  color: var(--bac-text-primary);
  font-size: var(--bac-text-sm);
  font-family: var(--bac-font-sans);
  line-height: var(--bac-lh-snug);
  transition: border-color var(--bac-transition-fast),
    box-shadow var(--bac-transition-fast);
}

.bac-textarea {
  min-height: 80px;
  resize: vertical;
  line-height: var(--bac-lh-normal);
}

.bac-input::placeholder,
.bac-textarea::placeholder {
  color: var(--bac-text-disabled);
}

.bac-input:hover:not(:focus),
.bac-select:hover:not(:focus),
.bac-textarea:hover:not(:focus) {
  border-color: var(--bac-outline-variant);
}

.bac-input:focus-visible,
.bac-select:focus-visible,
.bac-textarea:focus-visible {
  outline: none;
  border-color: var(--bac-brand);
  box-shadow: var(--bac-glow-focus);
}

.bac-input:disabled,
.bac-select:disabled,
.bac-textarea:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

.bac-label {
  display: block;
  margin-bottom: var(--bac-space-1);
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-secondary);
}

.bac-field {
  margin-bottom: var(--bac-space-4);
}

.bac-field__hint {
  margin-top: var(--bac-space-1);
  font-size: var(--bac-text-xs);
  color: var(--bac-text-tertiary);
}

.bac-field__error {
  margin-top: var(--bac-space-1);
  font-size: var(--bac-text-xs);
  color: var(--bac-danger);
}

/* ── 3.6 Modal ── */
.bac-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.65);
  backdrop-filter: blur(4px);
  z-index: var(--bac-z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--bac-space-4);
  animation: bac-fade-in var(--bac-duration-normal) var(--bac-ease-decelerated);
}

.bac-modal {
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-xl);
  box-shadow: var(--bac-elevation-4);
  max-width: 600px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  z-index: var(--bac-z-modal);
  animation: bac-slide-up var(--bac-duration-normal) var(--bac-ease-decelerated);
}

.bac-modal--sm {
  max-width: 400px;
}

.bac-modal--lg {
  max-width: 800px;
}

.bac-modal--xl {
  max-width: 1200px;
}

.bac-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bac-space-5);
  border-bottom: 1px solid var(--bac-outline);
}

.bac-modal__title {
  font-size: var(--bac-text-lg);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-primary);
}

.bac-modal__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--bac-radius-md);
  color: var(--bac-text-tertiary);
  cursor: pointer;
  transition: background var(--bac-transition-fast),
    color var(--bac-duration-instant) var(--bac-ease-standard);
}

.bac-modal__close:hover {
  background: var(--bac-surface-3);
  color: var(--bac-text-primary);
}

.bac-modal__body {
  padding: var(--bac-space-5);
}

.bac-modal__footer {
  display: flex;
  justify-content: flex-end;
  gap: var(--bac-space-2);
  padding: var(--bac-space-5);
  border-top: 1px solid var(--bac-outline);
}

@keyframes bac-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes bac-slide-up {
  from { opacity: 0; transform: translateY(16px); }
  to { opacity: 1; transform: translateY(0); }
}

/* ── 3.7 Alert / Banner ── */
.bac-alert {
  display: flex;
  align-items: flex-start;
  gap: var(--bac-space-3);
  padding: var(--bac-space-4);
  border-radius: var(--bac-radius-lg);
  border: 1px solid;
}

.bac-alert__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.bac-alert__content {
  flex: 1;
}

.bac-alert__title {
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-semibold);
  margin-bottom: var(--bac-space-1);
}

.bac-alert__message {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-secondary);
}

.bac-alert--info {
  background: var(--bac-info-container);
  border-color: rgba(59, 130, 246, 0.3);
}

.bac-alert--success {
  background: var(--bac-success-container);
  border-color: rgba(0, 168, 89, 0.3);
}

.bac-alert--warning {
  background: var(--bac-warning-container);
  border-color: rgba(245, 166, 35, 0.3);
}

.bac-alert--danger {
  background: var(--bac-danger-container);
  border-color: rgba(239, 68, 68, 0.3);
}

/* ── 3.8 Tabs ── */
.bac-tabs {
  display: flex;
  gap: var(--bac-space-1);
  border-bottom: 1px solid var(--bac-outline);
  overflow-x: auto;
  scrollbar-width: none;
}

.bac-tabs::-webkit-scrollbar {
  display: none;
}

.bac-tab {
  display: flex;
  align-items: center;
  gap: var(--bac-space-2);
  padding: var(--bac-space-3) var(--bac-space-4);
  min-height: 40px;
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-tertiary);
  border-bottom: 2px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  transition: color var(--bac-duration-instant) var(--bac-ease-standard),
    border-color var(--bac-transition-fast);
}

.bac-tab:hover {
  color: var(--bac-text-secondary);
}

.bac-tab--active {
  color: var(--bac-brand);
  border-bottom-color: var(--bac-brand);
}

.bac-tab:focus-visible {
  outline: none;
  box-shadow: var(--bac-glow-focus);
  border-radius: var(--bac-radius-sm);
}

.bac-tab__count {
  display: inline-flex;
  align-items: center;
  padding: 0 var(--bac-space-1);
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-semibold);
  background: var(--bac-surface-3);
  color: var(--bac-text-tertiary);
  border-radius: var(--bac-radius-full);
  min-width: 20px;
  justify-content: center;
}

/* ── 3.9 Toggle Switch ── */
.bac-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  background: var(--bac-outline-variant);
  border-radius: var(--bac-radius-full);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--bac-transition-fast);
}

.bac-toggle--active {
  background: var(--bac-brand);
}

.bac-toggle__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: #ffffff;
  border-radius: 50%;
  box-shadow: var(--bac-elevation-1);
  transition: transform var(--bac-transition-fast);
}

.bac-toggle--active .bac-toggle__thumb {
  transform: translateX(20px);
}

.bac-toggle:focus-visible {
  outline: none;
  box-shadow: var(--bac-glow-focus);
}

/* ── 3.10 Progress Bar ── */
.bac-progress {
  width: 100%;
  height: 8px;
  background: var(--bac-surface-input);
  border-radius: var(--bac-radius-full);
  overflow: hidden;
}

.bac-progress__fill {
  height: 100%;
  border-radius: var(--bac-radius-full);
  transition: width var(--bac-duration-normal) var(--bac-ease-decelerated);
}

.bac-progress__fill--brand {
  background: var(--bac-brand);
}

.bac-progress__fill--success {
  background: var(--bac-success);
}

.bac-progress__fill--warning {
  background: var(--bac-warning);
}

.bac-progress__fill--danger {
  background: var(--bac-danger);
}

/* ── 3.11 Empty State ── */
.bac-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: var(--bac-space-9) var(--bac-space-5);
  text-align: center;
}

.bac-empty-state__icon {
  width: 48px;
  height: 48px;
  color: var(--bac-text-disabled);
  margin-bottom: var(--bac-space-4);
  opacity: 0.5;
}

.bac-empty-state__title {
  font-size: var(--bac-text-md);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-secondary);
  margin-bottom: var(--bac-space-2);
}

.bac-empty-state__hint {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-tertiary);
  margin-bottom: var(--bac-space-5);
  max-width: 400px;
}

/* ── 3.12 Stat Card ── */
.bac-stat-card {
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-lg);
  padding: var(--bac-space-5);
  box-shadow: var(--bac-elevation-1);
}

.bac-stat-card__label {
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--bac-ls-wider);
  margin-bottom: var(--bac-space-1);
}

.bac-stat-card__value {
  font-size: var(--bac-text-2xl);
  font-weight: var(--bac-fw-bold);
  color: var(--bac-text-primary);
  line-height: var(--bac-lh-tight);
  letter-spacing: var(--bac-ls-tight);
}

.bac-stat-card__trend {
  display: inline-flex;
  align-items: center;
  gap: var(--bac-space-1);
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-medium);
  margin-top: var(--bac-space-2);
}

.bac-stat-card__trend--up {
  color: var(--bac-success);
}

.bac-stat-card__trend--down {
  color: var(--bac-danger);
}

.bac-stat-card__trend--flat {
  color: var(--bac-text-tertiary);
}

/* ── 3.13 Sparkline ── */
.bac-sparkline {
  display: block;
}

.bac-sparkline__line {
  fill: none;
  stroke: var(--bac-brand);
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.bac-sparkline__area {
  fill: var(--bac-brand-glow);
  opacity: 0.3;
}

/* ── 3.16 Action Bar ── */
.bac-action-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bac-space-4);
  padding: var(--bac-space-4) var(--bac-space-6);
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-lg);
  margin-bottom: var(--bac-space-7);
  box-shadow: var(--bac-elevation-1);
}

.bac-action-bar__info {
  display: flex;
  align-items: center;
  gap: var(--bac-space-3);
  min-width: 0;
}

.bac-action-bar__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--bac-brand);
}

.bac-action-bar__text {
  min-width: 0;
}

.bac-action-bar__title {
  font-size: var(--bac-text-xl);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-primary);
  line-height: var(--bac-lh-tight);
  letter-spacing: var(--bac-ls-tight);
}

.bac-action-bar__subtitle {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-tertiary);
  margin-top: var(--bac-space-1);
}

.bac-action-bar__actions {
  display: flex;
  gap: var(--bac-space-2);
  flex-shrink: 0;
}

/* ── 3.17 Next Action Panel ── */
.bac-next-action {
  display: flex;
  align-items: center;
  gap: var(--bac-space-3);
  padding: var(--bac-space-4);
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline);
  border-left: 3px solid var(--bac-brand);
  border-radius: var(--bac-radius-lg);
  box-shadow: var(--bac-elevation-1);
}

.bac-next-action--ready {
  border-left-color: var(--bac-success);
}

.bac-next-action--enrich {
  border-left-color: var(--bac-info);
}

.bac-next-action--stale {
  border-left-color: var(--bac-warning);
}

.bac-next-action--wait {
  border-left-color: var(--bac-neutral);
}

.bac-next-action__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.bac-next-action__icon--ready {
  color: var(--bac-success);
}

.bac-next-action__icon--stale {
  color: var(--bac-warning);
}

.bac-next-action__icon--enrich {
  color: var(--bac-info);
}

.bac-next-action__icon--wait {
  color: var(--bac-text-muted);
}

.bac-next-action__label {
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--bac-ls-wider);
}

.bac-next-action__text {
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-primary);
}

/* ── 3.18 Bottleneck Alert ── */
.bac-bottleneck {
  display: flex;
  align-items: center;
  gap: var(--bac-space-3);
  padding: var(--bac-space-3) var(--bac-space-4);
  background: var(--bac-warning-container);
  border: 1px solid rgba(245, 166, 35, 0.3);
  border-radius: var(--bac-radius-md);
  color: var(--bac-warning);
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-medium);
}

/* ── 3.19 Queue (Follow-up) ── */
.bac-queue {
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-lg);
  overflow: hidden;
}

.bac-queue__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bac-space-3) var(--bac-space-4);
  background: var(--bac-surface-1);
  cursor: pointer;
  transition: background var(--bac-duration-instant) var(--bac-ease-standard);
}

.bac-queue__header:hover {
  background: var(--bac-surface-3);
}

.bac-queue__body {
  padding: var(--bac-space-2);
}

.bac-queue__item {
  display: flex;
  align-items: center;
  gap: var(--bac-space-3);
  padding: var(--bac-space-3);
  border-radius: var(--bac-radius-md);
  cursor: pointer;
  transition: background var(--bac-duration-instant) var(--bac-ease-standard);
}

.bac-queue__item:hover {
  background: var(--bac-surface-3);
}

/* ── 3.23 KV Pair ── */
.bac-kv-pair {
  display: flex;
  flex-direction: column;
  gap: var(--bac-space-1);
}

.bac-kv-pair__key {
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--bac-ls-wider);
}

.bac-kv-pair__value {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-primary);
  font-weight: var(--bac-fw-medium);
}

.bac-kv-pair__value--mono {
  font-family: var(--bac-font-mono);
  font-weight: var(--bac-fw-normal);
}

/* ── 3.24 Score Breakdown ── */
.bac-score-breakdown__row {
  display: flex;
  align-items: center;
  gap: var(--bac-space-3);
  padding: var(--bac-space-2) 0;
}

.bac-score-breakdown__label {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-secondary);
  flex-shrink: 0;
  width: 120px;
}

.bac-score-breakdown__bar {
  flex: 1;
  height: 8px;
  background: var(--bac-surface-input);
  border-radius: var(--bac-radius-full);
  overflow: hidden;
}

.bac-score-breakdown__fill {
  height: 100%;
  border-radius: var(--bac-radius-full);
  transition: width var(--bac-duration-normal) var(--bac-ease-decelerated);
}

.bac-score-breakdown__value {
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-primary);
  flex-shrink: 0;
  width: 40px;
  text-align: right;
  font-family: var(--bac-font-mono);
}

/* ── 3.25 Avatar ── */
.bac-avatar {
  border-radius: var(--bac-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bac-surface-3);
}

.bac-avatar--xs {
  width: 24px;
  height: 24px;
}

.bac-avatar--sm {
  width: 32px;
  height: 32px;
}

.bac-avatar--md {
  width: 40px;
  height: 40px;
}

.bac-avatar--lg {
  width: 56px;
  height: 56px;
}

.bac-avatar--xl {
  width: 80px;
  height: 80px;
}

/* ── 3.26 Toast (Nielsen #1: Feedback) ── */
.bac-toast-container {
  position: fixed;
  top: var(--bac-space-5);
  right: var(--bac-space-5);
  z-index: var(--bac-z-toast);
  display: flex;
  flex-direction: column;
  gap: var(--bac-space-2);
  pointer-events: none;
}

.bac-toast {
  display: flex;
  align-items: flex-start;
  gap: var(--bac-space-3);
  padding: var(--bac-space-4);
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-lg);
  box-shadow: var(--bac-elevation-5);
  min-width: 320px;
  max-width: 480px;
  pointer-events: auto;
  animation: bac-toast-in var(--bac-duration-normal) var(--bac-ease-decelerated);
}

.bac-toast--success {
  border-left: 3px solid var(--bac-success);
}

.bac-toast--warning {
  border-left: 3px solid var(--bac-warning);
}

.bac-toast--danger {
  border-left: 3px solid var(--bac-danger);
}

.bac-toast--info {
  border-left: 3px solid var(--bac-info);
}

.bac-toast__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
}

.bac-toast__content {
  flex: 1;
}

.bac-toast__title {
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-primary);
}

.bac-toast__message {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-secondary);
  margin-top: var(--bac-space-1);
}

.bac-toast__close {
  flex-shrink: 0;
  color: var(--bac-text-tertiary);
  cursor: pointer;
}

@keyframes bac-toast-in {
  from { opacity: 0; transform: translateX(100%); }
  to { opacity: 1; transform: translateX(0); }
}

/* ── 3.27 Tooltip ── */
.bac-tooltip {
  position: absolute;
  padding: var(--bac-space-1) var(--bac-space-2);
  background: var(--bac-surface-3);
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-sm);
  font-size: var(--bac-text-xs);
  color: var(--bac-text-primary);
  white-space: nowrap;
  z-index: var(--bac-z-tooltip);
  box-shadow: var(--bac-elevation-3);
  pointer-events: none;
  animation: bac-fade-in var(--bac-duration-fast) var(--bac-ease-decelerated);
}

/* ── 3.35 Icon Size Scale ── */
.bac-icon-xs {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.bac-icon-sm {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.bac-icon-md {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.bac-icon-lg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
}

.bac-icon-xl {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.bac-icon-2xl {
  width: 24px;
  height: 24px;
  flex-shrink: 0;
}

/* ── 3.36 Table Action Column ── */
.bac-table__actions {
  width: 80px;
  padding: var(--bac-space-3);
  white-space: nowrap;
  text-align: right;
}

.bac-table__actions--100 {
  width: 100px;
}

.bac-table__actions--120 {
  width: 120px;
}

.bac-table__actions .bac-btn {
  margin-left: var(--bac-space-1);
}

/* ── 3.37 Login Layout ── */
.bac-login {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: var(--bac-space-5);
}

.bac-login__card {
  max-width: 440px;
  width: 100%;
}

/* ── 3.38 Brand Footer Links ── */
.bac-brand-footer__link {
  color: inherit;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
}

.bac-brand-footer__link:hover {
  color: inherit;
  text-decoration: none;
}

.bac-brand-footer__social {
  display: flex;
  gap: var(--bac-space-3);
}

/* ── 3.39 Info Card (docs/rules) ── */
.bac-info-card {
  display: flex;
  align-items: center;
  gap: var(--bac-space-3);
  padding: var(--bac-space-3);
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-md);
}

.bac-info-card__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  color: var(--bac-brand);
}

.bac-info-card__body {
  flex: 1;
}

.bac-info-card__title {
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-primary);
}

.bac-info-card__desc {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-tertiary);
}

/* ── 3.40 Rules Section ── */
.bac-rules-section {
  margin-bottom: var(--bac-space-3);
  padding: var(--bac-space-3);
  font-size: var(--bac-text-sm);
  color: var(--bac-text-secondary);
}

.bac-rules-section p {
  margin-bottom: var(--bac-space-2);
  line-height: var(--bac-lh-relaxed);
}

.bac-rules-section p:last-child {
  margin-bottom: 0;
}

.bac-rules-section strong {
  color: var(--bac-text-primary);
  font-weight: var(--bac-fw-semibold);
}

/* ── 3.41 Scrollable message list (tickets) ── */
.bac-message-list {
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: var(--bac-space-3);
}

.bac-message-item {
  margin-bottom: var(--bac-space-3);
  padding: var(--bac-space-3);
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-md);
}

.bac-message-item--admin {
  background: var(--bac-surface-2);
}

.bac-message-item--user {
  background: var(--bac-surface-1);
}

/* ── 3.42 IB Tree indent (dynamic — used in JS) ── */
.bac-tree-row {
  display: flex;
  align-items: center;
  gap: var(--bac-space-2);
  padding-left: 0;
  padding-top: var(--bac-space-2);
  padding-bottom: var(--bac-space-2);
  border-bottom: 1px solid var(--bac-outline);
}

.bac-tree-row[data-depth="1"] { padding-left: 24px; }
.bac-tree-row[data-depth="2"] { padding-left: 48px; }
.bac-tree-row[data-depth="3"] { padding-left: 72px; }
.bac-tree-row[data-depth="4"] { padding-left: 96px; }
.bac-tree-row[data-depth="5"] { padding-left: 120px; }
.bac-tree-row[data-depth="6"] { padding-left: 144px; }

/* ── 3.43 Filter bar (search + selects in list pages) ── */
.bac-filter-bar {
  display: flex;
  gap: var(--bac-space-3);
  flex-wrap: wrap;
  align-items: center;
  margin-bottom: var(--bac-space-3);
}

.bac-filter-bar__search {
  flex: 1;
  min-width: 200px;
}

.bac-filter-bar__select {
  width: auto;
}

/* ── 3.28 Skeleton (Loading state) ── */
.bac-skeleton {
  background: linear-gradient(
    90deg,
    var(--bac-surface-2) 0%,
    var(--bac-surface-3) 50%,
    var(--bac-surface-2) 100%
  );
  background-size: 200% 100%;
  animation: bac-skeleton-shimmer 1.5s infinite linear;
  border-radius: var(--bac-radius-sm);
}

@keyframes bac-skeleton-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.bac-skeleton--text {
  height: 14px;
  margin-bottom: var(--bac-space-1);
}

.bac-skeleton--title {
  height: 20px;
  width: 60%;
  margin-bottom: var(--bac-space-2);
}

.bac-skeleton--avatar {
  width: 40px;
  height: 40px;
  border-radius: var(--bac-radius-full);
}

.bac-skeleton--card {
  height: 120px;
  border-radius: var(--bac-radius-lg);
}

/* ── 3.29 Profile Header ── */
.bac-profile-header {
  display: flex;
  align-items: flex-start;
  gap: var(--bac-space-5);
  padding: var(--bac-space-6);
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-lg);
}

.bac-profile-header__avatar {
  width: 80px;
  height: 80px;
  border-radius: var(--bac-radius-full);
  object-fit: cover;
  flex-shrink: 0;
  background: var(--bac-surface-3);
}

.bac-profile-header__info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--bac-space-2);
  min-width: 0;
}

.bac-profile-header__name {
  font-size: var(--bac-text-xl);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-primary);
  line-height: var(--bac-lh-tight);
}

.bac-profile-header__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bac-space-2);
}

.bac-profile-header__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bac-space-3);
  font-size: var(--bac-text-sm);
  color: var(--bac-text-tertiary);
}

.bac-profile-header__meta-item {
  display: flex;
  align-items: center;
  gap: var(--bac-space-1);
}

.bac-profile-header__actions {
  display: flex;
  gap: var(--bac-space-2);
  flex-shrink: 0;
}

@media (max-width: 768px) {
  .bac-profile-header {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  .bac-profile-header__badges,
  .bac-profile-header__meta {
    justify-content: center;
  }
  .bac-profile-header__actions {
    width: 100%;
    justify-content: center;
  }
}

/* ── 3.30 Field Grid ── */
.bac-field-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--bac-space-4) var(--bac-space-6);
}

.bac-field-grid--2col {
  grid-template-columns: repeat(2, 1fr);
}

@media (max-width: 1024px) {
  .bac-field-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .bac-field-grid,
  .bac-field-grid--2col { grid-template-columns: 1fr; }
}

/* ── 3.31 Section Toggle ── */
.bac-section-toggle {
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-lg);
  overflow: hidden;
  background: var(--bac-surface-2);
}

.bac-section-toggle + .bac-section-toggle {
  margin-top: var(--bac-space-4);
}

.bac-section-toggle__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bac-space-4) var(--bac-space-5);
  cursor: pointer;
  user-select: none;
  background: var(--bac-surface-2);
  transition: background var(--bac-duration-fast) var(--bac-ease-standard);
}

.bac-section-toggle__header:hover {
  background: var(--bac-surface-3);
}

.bac-section-toggle__title {
  display: flex;
  align-items: center;
  gap: var(--bac-space-2);
  font-size: var(--bac-text-sm);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-primary);
  text-transform: uppercase;
  letter-spacing: var(--bac-ls-wider);
}

.bac-section-toggle__chevron {
  width: 16px;
  height: 16px;
  color: var(--bac-text-tertiary);
  transition: transform var(--bac-duration-normal) var(--bac-ease-decelerated);
}

.bac-section-toggle--open .bac-section-toggle__chevron {
  transform: rotate(90deg);
}

.bac-section-toggle__actions {
  display: flex;
  gap: var(--bac-space-2);
}

.bac-section-toggle__body {
  padding: 0 var(--bac-space-5) var(--bac-space-5);
  border-top: 1px solid var(--bac-outline-variant);
}

.bac-section-toggle:not(.bac-section-toggle--open) .bac-section-toggle__body {
  display: none;
}

/* ── 3.32 Empty State (merged into 3.11) ── */

.bac-empty-state__message {
  font-size: var(--bac-text-sm);
  color: var(--bac-text-tertiary);
  max-width: 400px;
}

/* ── 3.33 Column Toggle (Feature) ── */
.bac-col-toggle-trigger {
  display: inline-flex;
  align-items: center;
  gap: var(--bac-space-1);
  padding: var(--bac-space-2) var(--bac-space-3);
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-secondary);
  background: transparent;
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-md);
  cursor: pointer;
  transition: all var(--bac-duration-fast) var(--bac-ease-standard);
}

.bac-col-toggle-trigger:hover {
  background: var(--bac-surface-3);
  color: var(--bac-text-primary);
  border-color: var(--bac-outline);
}

.bac-col-toggle-trigger__icon {
  width: 14px;
  height: 14px;
}

.bac-col-toggle-trigger--active {
  color: var(--bac-primary);
  border-color: var(--bac-primary);
}

.bac-col-toggle {
  position: absolute;
  top: calc(100% + var(--bac-space-2));
  right: 0;
  z-index: var(--bac-z-dropdown);
  width: 280px;
  max-height: 400px;
  overflow-y: auto;
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-lg);
  box-shadow: var(--bac-elevation-5);
  padding: var(--bac-space-3);
}

.bac-col-toggle__group-label {
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-semibold);
  color: var(--bac-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--bac-ls-wider);
  padding: var(--bac-space-2) var(--bac-space-1);
  margin-top: var(--bac-space-1);
}

.bac-col-toggle__group-label:first-child {
  margin-top: 0;
}

.bac-col-toggle__item {
  display: flex;
  align-items: center;
  gap: var(--bac-space-2);
  padding: var(--bac-space-1) var(--bac-space-1);
  font-size: var(--bac-text-sm);
  color: var(--bac-text-secondary);
  cursor: pointer;
  border-radius: var(--bac-radius-sm);
  transition: background var(--bac-duration-fast) var(--bac-ease-standard);
}

.bac-col-toggle__item:hover {
  background: var(--bac-surface-3);
}

.bac-col-toggle__item--locked {
  opacity: 0.4;
  cursor: not-allowed;
}

.bac-col-toggle__item--locked:hover {
  background: transparent;
}

.bac-col-toggle__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--bac-primary);
  cursor: pointer;
}

.bac-col-toggle__item--locked .bac-col-toggle__checkbox {
  cursor: not-allowed;
}

.bac-col-toggle__actions {
  display: flex;
  gap: var(--bac-space-2);
  padding-top: var(--bac-space-3);
  margin-top: var(--bac-space-2);
  border-top: 1px solid var(--bac-outline-variant);
}

/* ── 3.34 Column Filter (Feature — Excel style) ── */
.bac-col-filter-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  margin-left: var(--bac-space-1);
  color: var(--bac-text-tertiary);
  cursor: pointer;
  border-radius: var(--bac-radius-sm);
  transition: all var(--bac-duration-fast) var(--bac-ease-standard);
}

.bac-col-filter-trigger:hover {
  background: var(--bac-surface-3);
  color: var(--bac-text-secondary);
}

.bac-col-filter-trigger__icon {
  width: 14px;
  height: 14px;
}

.bac-col-filter-trigger--active {
  color: var(--bac-primary);
}

.bac-col-filter-trigger--active::after {
  content: '';
  position: absolute;
  width: 6px;
  height: 6px;
  border-radius: var(--bac-radius-full);
  background: var(--bac-primary);
  top: 0;
  right: 0;
}

.bac-col-filter {
  position: absolute;
  top: calc(100% + var(--bac-space-1));
  left: 0;
  z-index: var(--bac-z-dropdown);
  min-width: 220px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-lg);
  box-shadow: var(--bac-elevation-5);
  padding: var(--bac-space-2);
}

.bac-col-filter__search {
  width: 100%;
  padding: var(--bac-space-2) var(--bac-space-2);
  font-size: var(--bac-text-sm);
  color: var(--bac-text-primary);
  background: var(--bac-surface-input);
  border: 1px solid var(--bac-outline-variant);
  border-radius: var(--bac-radius-md);
  margin-bottom: var(--bac-space-2);
}

.bac-col-filter__search:focus {
  outline: none;
  border-color: var(--bac-primary);
  box-shadow: 0 0 0 3px var(--bac-primary-container);
}

.bac-col-filter__list {
  display: flex;
  flex-direction: column;
  gap: var(--bac-space-1);
  max-height: 200px;
  overflow-y: auto;
}

.bac-col-filter__item {
  display: flex;
  align-items: center;
  gap: var(--bac-space-2);
  padding: var(--bac-space-1) var(--bac-space-2);
  font-size: var(--bac-text-sm);
  color: var(--bac-text-secondary);
  cursor: pointer;
  border-radius: var(--bac-radius-sm);
  transition: background var(--bac-duration-fast) var(--bac-ease-standard);
}

.bac-col-filter__item:hover {
  background: var(--bac-surface-3);
}

.bac-col-filter__checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--bac-primary);
  cursor: pointer;
}

.bac-col-filter__actions {
  display: flex;
  gap: var(--bac-space-2);
  padding-top: var(--bac-space-2);
  margin-top: var(--bac-space-1);
  border-top: 1px solid var(--bac-outline-variant);
}

/* Filter chips */
.bac-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--bac-space-2);
}

.bac-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--bac-space-1);
  padding: var(--bac-space-1) var(--bac-space-2);
  font-size: var(--bac-text-xs);
  font-weight: var(--bac-fw-medium);
  color: var(--bac-text-secondary);
  background: var(--bac-primary-container);
  border-radius: var(--bac-radius-full);
  cursor: default;
}

.bac-filter-chip__remove {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  color: var(--bac-text-tertiary);
  cursor: pointer;
  border-radius: var(--bac-radius-full);
  transition: all var(--bac-duration-fast) var(--bac-ease-standard);
}

.bac-filter-chip__remove:hover {
  color: var(--bac-danger);
  background: var(--bac-error-container);
}

/* ── 3.15 Health Score Ring ── */
.bac-health-score {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--bac-space-2);
}

.bac-health-score__ring {
  position: relative;
  width: 80px;
  height: 80px;
}

.bac-health-score__ring svg {
  transform: rotate(-90deg);
}

.bac-health-score__ring-track {
  fill: none;
  stroke: var(--bac-surface-input);
  stroke-width: 6;
}

.bac-health-score__ring-fill {
  fill: none;
  stroke: var(--bac-brand);
  stroke-width: 6;
  stroke-linecap: round;
  transition: stroke-dashoffset var(--bac-duration-slow) var(--bac-ease-decelerated);
}

.bac-health-score__value {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--bac-text-lg);
  font-weight: var(--bac-fw-bold);
  color: var(--bac-text-primary);
}

.bac-health-score__label {
  font-size: var(--bac-text-xs);
  color: var(--bac-text-tertiary);
  text-transform: uppercase;
  letter-spacing: var(--bac-ls-wider);
}

/* ── 3.14 Funnel ── */
.bac-funnel__step {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bac-space-3) var(--bac-space-4);
  background: var(--bac-surface-2);
  border: 1px solid var(--bac-outline);
  border-radius: var(--bac-radius-md);
  margin-bottom: var(--bac-space-2);
}

.bac-funnel__step:last-child {
  margin-bottom: 0;
}

.bac-funnel__bar {
  height: 8px;
  border-radius: var(--bac-radius-full);
  background: var(--bac-brand);
  margin-top: var(--bac-space-2);
  transition: width var(--bac-duration-normal) var(--bac-ease-decelerated);
}

/* ── Focus-visible global (WCAG 2.2 — 2.4.7) ── */
.bac-btn:focus-visible,
.bac-nav-item:focus-visible,
.bac-tab:focus-visible,
.bac-input:focus-visible,
.bac-select:focus-visible,
.bac-textarea:focus-visible,
.bac-toggle:focus-visible,
.bac-header__toolbar-btn:focus-visible,
.bac-modal__close:focus-visible,
.bac-sidebar__collapse:focus-visible {
  outline: none;
  box-shadow: var(--bac-glow-focus);
}

/* ── Responsive grid (Digi-system 9) ── */
@media (max-width: 1023px) {
  .bac-u-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .bac-u-grid-3 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 639px) {
  .bac-u-grid-4,
  .bac-u-grid-3,
  .bac-u-grid-2 {
    grid-template-columns: 1fr;
  }

  .bac-action-bar {
    flex-direction: column;
    align-items: stretch;
    gap: var(--bac-space-3);
  }

  .bac-action-bar__actions {
    width: 100%;
  }

  .bac-action-bar__actions .bac-btn {
    flex: 1;
  }
}