/* ============================================
   BUSINESS COMPUTER - COMPONENT LIBRARY
   Version: 3.11

   Reusable, theme-aware component classes.
   Framework-agnostic — works with or without
   Bootstrap / Tailwind.

   Requires: bc-tokens.css loaded BEFORE this file.

   Load order:
     1. bc-tokens.css
     2. [bootstrap.min.css → bc-bootstrap-adapter.css]
     3. bc-components.css (this file)
     4. bc-table.js (optional, for interactivity)
   ============================================ */


/* ── Tables ── */

.table-bc {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--bc-text-sm);
  color: var(--bc-text-primary);
}

.table-bc thead th {
  background-color: var(--bc-table-header-bg);
  color: var(--bc-table-header-text);
  font-weight: var(--bc-font-weight-semibold);
  padding: var(--bc-space-3) var(--bc-space-4);
  text-align: left;
  border-bottom: none;
  white-space: nowrap;
}

.table-bc tbody td {
  background-color: var(--bc-surface-raised);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: 1px solid var(--bc-table-border);
  transition: background-color var(--bc-transition-fast);
}

.table-bc-striped tbody tr:nth-child(even) td {
  background-color: var(--bc-table-stripe-bg);
}

.table-bc-hover tbody tr:hover td {
  background-color: var(--bc-table-row-hover-bg);
}

.table-bc-compact thead th,
.table-bc-compact tbody td {
  padding: var(--bc-space-2) var(--bc-space-3);
}

.table-bc-bordered thead th,
.table-bc-bordered tbody td {
  border: 1px solid var(--bc-table-border);
}

.table-bc-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Sortable headers */
th[data-bc-sortable] {
  cursor: pointer;
  user-select: none;
  position: relative;
  padding-right: var(--bc-space-6);
}

th[data-bc-sortable]::after {
  content: '\2195';
  position: absolute;
  right: var(--bc-space-2);
  opacity: 0.4;
  font-size: var(--bc-text-xs);
}

th[data-bc-sort="asc"]::after {
  content: '\2191';
  opacity: 1;
}

th[data-bc-sort="desc"]::after {
  content: '\2193';
  opacity: 1;
}

/* Selected row */
tr[data-bc-selected] td {
  background-color: var(--bc-table-row-selected-bg);
}

/* Empty state */
.table-bc-empty {
  text-align: center;
  padding: var(--bc-space-10) var(--bc-space-4);
  color: var(--bc-text-muted);
  font-size: var(--bc-text-sm);
}

/* Search input */
.table-bc-search {
  width: 100%;
  max-width: 280px;
  padding: var(--bc-space-2) var(--bc-space-3);
  font-size: var(--bc-text-sm);
  color: var(--bc-text-primary);
  background-color: var(--bc-surface-raised);
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-md);
  transition: border-color var(--bc-transition-fast), box-shadow var(--bc-transition-fast);
  font-family: var(--bc-font-family);
}

.table-bc-search::placeholder {
  color: var(--bc-text-muted);
}

.table-bc-search:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  border-color: var(--bc-blue);
  box-shadow: var(--bc-focus-ring-info);
}

/* Toolbar (search + controls above table) */
.table-bc-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--bc-space-3);
  margin-bottom: var(--bc-space-3);
  flex-wrap: wrap;
}

/* Footer / pagination area */
.table-bc-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bc-space-3) 0;
  font-size: var(--bc-text-xs);
  color: var(--bc-text-muted);
  flex-wrap: wrap;
  gap: var(--bc-space-2);
}

.table-bc-footer .table-bc-page-info {
  font-variant-numeric: tabular-nums;
}

.table-bc-footer .table-bc-page-controls {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
}

.table-bc-footer .table-bc-page-btn {
  padding: var(--bc-space-1) var(--bc-space-3);
  font-size: var(--bc-text-xs);
  font-weight: var(--bc-font-weight-medium);
  font-family: var(--bc-font-family);
  color: var(--bc-text-secondary);
  background-color: var(--bc-surface-raised);
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-sm);
  cursor: pointer;
  transition: all var(--bc-transition-fast);
}

.table-bc-footer .table-bc-page-btn:hover {
  background-color: var(--bc-surface-hover);
}

.table-bc-footer .table-bc-page-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ── Table Actions ── */

.table-bc-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bc-space-1);
}

.btn-bc-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: var(--bc-radius-md);
  border: 1px solid var(--bc-border-default);
  background: var(--bc-surface-raised);
  color: var(--bc-text-secondary);
  cursor: pointer;
  font-size: var(--bc-text-base, 1rem);
  font-family: inherit;
  padding: 0;
  transition: background-color var(--bc-transition-fast, 150ms ease),
              color var(--bc-transition-fast, 150ms ease),
              border-color var(--bc-transition-fast, 150ms ease);
}

.btn-bc-icon:hover {
  background: var(--bc-surface-hover);
}

.btn-bc-icon:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.btn-bc-icon:disabled,
.btn-bc-icon[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.btn-bc-icon-primary { color: var(--bc-red); }
.btn-bc-icon-danger  { color: var(--bc-crimson); }
.btn-bc-icon-ghost {
  border-color: transparent;
  background: transparent;
}
.btn-bc-icon-ghost:hover {
  background: var(--bc-surface-hover);
}

/* ── Action Overflow Menu ── */

.action-bc-overflow-wrap {
  position: relative;
}

.action-bc-menu {
  position: absolute;
  right: 0;
  top: 100%;
  margin-top: var(--bc-space-1);
  min-width: 160px;
  background: var(--bc-surface-raised);
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-lg);
  z-index: var(--bc-z-dropdown);
  padding: var(--bc-space-1) 0;
  display: none;
}

.action-bc-menu.action-bc-menu-open {
  display: block;
}

.action-bc-menu-item {
  display: flex;
  align-items: center;
  gap: var(--bc-space-2);
  width: 100%;
  padding: var(--bc-space-2) var(--bc-space-3);
  border: none;
  background: none;
  color: var(--bc-text-primary);
  font-size: var(--bc-text-sm, 0.875rem);
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: background-color var(--bc-transition-fast, 150ms ease);
}

.action-bc-menu-item:hover {
  background: var(--bc-surface-hover);
}

.action-bc-menu-item:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.action-bc-menu-item-danger {
  color: var(--bc-crimson);
}

.action-bc-menu-divider {
  border: none;
  border-top: 1px solid var(--bc-border-default);
  margin: var(--bc-space-1) 0;
}

/* ── Table Actions Responsive ── */

/* bc-md (768px) — tablet: show max 3 action buttons */
@media (max-width: 768px) {
  .table-bc-actions-auto > .btn-bc-icon:nth-child(n+4) {
    display: none;
  }
}

/* bc-sm (576px) — mobile: collapse all to overflow menu */
@media (max-width: 576px) {
  .table-bc-actions-auto > .btn-bc-icon {
    display: none;
  }
  .table-bc-actions-auto > .action-bc-overflow-wrap {
    display: block;
  }
}


/* ── Cards ── */

.card-bc {
  background-color: var(--bc-card-bg);
  border: 1px solid var(--bc-card-border);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-shadow-sm);
  transition: background-color var(--bc-transition-slow), border-color var(--bc-transition-slow);
}

.card-bc-header {
  background-color: var(--bc-card-header-bg);
  padding: var(--bc-space-3) var(--bc-space-4);
  border-bottom: 1px solid var(--bc-card-border);
  font-weight: var(--bc-font-weight-semibold);
  font-size: var(--bc-text-sm);
}

.card-bc-body {
  padding: var(--bc-space-4);
}

.card-bc-footer {
  padding: var(--bc-space-3) var(--bc-space-4);
  border-top: 1px solid var(--bc-card-border);
}

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

.card-bc-interactive {
  cursor: pointer;
  transition: box-shadow var(--bc-transition-base), border-color var(--bc-transition-base), background-color var(--bc-transition-slow);
}

.card-bc-interactive:hover {
  box-shadow: var(--bc-shadow-md);
  border-color: var(--bc-border-strong);
}


/* ── KPI Widgets ── */

.kpi-bc {
  background-color: var(--bc-card-bg);
  border: 1px solid var(--bc-card-border);
  border-radius: var(--bc-radius-md);
  padding: var(--bc-space-3) var(--bc-space-4);
  transition: background-color var(--bc-transition-slow), border-color var(--bc-transition-slow);
}

.kpi-bc-label {
  font-size: var(--bc-text-xs);
  font-weight: var(--bc-font-weight-medium);
  color: var(--bc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.kpi-bc-value {
  font-size: var(--bc-text-2xl);
  font-weight: var(--bc-font-weight-bold);
  line-height: var(--bc-leading-tight);
  font-variant-numeric: tabular-nums;
  margin-top: var(--bc-space-1);
  color: var(--bc-text-primary);
}

.kpi-bc-trend {
  display: inline-flex;
  align-items: center;
  gap: var(--bc-space-1);
  font-size: var(--bc-text-xs);
  font-weight: var(--bc-font-weight-semibold);
  margin-top: var(--bc-space-1);
}

.kpi-bc-trend-up {
  color: var(--bc-kpi-trend-up);
}

.kpi-bc-trend-up::before {
  content: '\2191';
}

.kpi-bc-trend-down {
  color: var(--bc-kpi-trend-down);
}

.kpi-bc-trend-down::before {
  content: '\2193';
}

.kpi-bc-trend-neutral {
  color: var(--bc-kpi-trend-neutral);
}

.kpi-bc-trend-neutral::before {
  content: '\2192';
}


/* ── Alerts ── */

.alert-bc {
  padding: var(--bc-space-3) var(--bc-space-4);
  border-radius: var(--bc-radius-md);
  border-left: 4px solid var(--bc-border-default);
  font-size: var(--bc-text-sm);
  line-height: var(--bc-leading-normal);
  margin-bottom: var(--bc-space-3);
}

.alert-bc-success {
  border-left-color: var(--bc-green);
  background-color: var(--bc-tint-green);
  color: var(--bc-text-primary);
}

.alert-bc-warning {
  border-left-color: var(--bc-orange);
  background-color: var(--bc-tint-orange);
  color: var(--bc-text-primary);
}

.alert-bc-danger {
  border-left-color: var(--bc-crimson);
  background-color: var(--bc-tint-crimson);
  color: var(--bc-text-primary);
}

.alert-bc-info {
  border-left-color: var(--bc-blue);
  background-color: var(--bc-tint-blue);
  color: var(--bc-text-primary);
}

.alert-bc-dismissible {
  position: relative;
  padding-right: var(--bc-space-10);
}

.alert-bc-dismissible .alert-bc-close {
  position: absolute;
  top: var(--bc-space-3);
  right: var(--bc-space-3);
  background: none;
  border: none;
  font-size: var(--bc-text-lg);
  cursor: pointer;
  color: var(--bc-text-muted);
  line-height: 1;
  padding: 0;
  transition: color var(--bc-transition-fast);
}

.alert-bc-dismissible .alert-bc-close:hover {
  color: var(--bc-text-primary);
}


/* ── Toasts ── */

.toast-bc {
  background-color: var(--bc-surface-overlay);
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-lg);
  box-shadow: var(--bc-toast-shadow);
  padding: var(--bc-space-3) var(--bc-space-4);
  min-width: 280px;
  max-width: 420px;
  font-size: var(--bc-text-sm);
  transition: background-color var(--bc-transition-slow), border-color var(--bc-transition-slow);
}

.toast-bc-container {
  position: fixed;
  display: flex;
  flex-direction: column;
  gap: var(--bc-space-2);
  z-index: var(--bc-z-toast);
  pointer-events: none;
}

.toast-bc-container > * {
  pointer-events: auto;
}

.toast-bc-container-tr {
  top: var(--bc-space-4);
  right: var(--bc-space-4);
}

.toast-bc-container-tl {
  top: var(--bc-space-4);
  left: var(--bc-space-4);
}

.toast-bc-container-br {
  bottom: var(--bc-space-4);
  right: var(--bc-space-4);
}

.toast-bc-container-bl {
  bottom: var(--bc-space-4);
  left: var(--bc-space-4);
}

/* Toast severity variants */
.toast-bc-success {
  border-left: 4px solid var(--bc-green);
}

.toast-bc-warning {
  border-left: 4px solid var(--bc-orange);
}

.toast-bc-danger {
  border-left: 4px solid var(--bc-crimson);
}

.toast-bc-info {
  border-left: 4px solid var(--bc-blue);
}


/* ── Spinners ── */

@keyframes bc-spin {
  to { transform: rotate(360deg); }
}

.spinner-bc {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--bc-border-default);
  border-top-color: var(--bc-color-primary);
  border-radius: var(--bc-radius-full);
  animation: bc-spin var(--bc-spin-speed) linear infinite;
}

.spinner-bc-sm {
  width: 0.875rem;
  height: 0.875rem;
  border-width: 1.5px;
}

.spinner-bc-lg {
  width: 2rem;
  height: 2rem;
  border-width: 3px;
}

.spinner-bc-light {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #FFFFFF;
}

.spinner-bc-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.05);
  border-radius: inherit;
  z-index: 1;
}

[data-bc-theme="dark"] .spinner-bc-overlay {
  background-color: rgba(0, 0, 0, 0.2);
}


/* ── Modals ── */

.modal-bc-backdrop {
  position: fixed;
  inset: 0;
  background-color: var(--bc-modal-backdrop);
  z-index: var(--bc-z-modal-backdrop);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--bc-transition-base), visibility var(--bc-transition-base);
}

.modal-bc-backdrop.modal-bc-open {
  opacity: 1;
  visibility: visible;
}

.modal-bc {
  background-color: var(--bc-surface-overlay);
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-xl);
  box-shadow: var(--bc-shadow-xl);
  width: 100%;
  max-width: 32rem;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  transform: translateY(16px) scale(0.98);
  transition: transform var(--bc-transition-base);
  color: var(--bc-text-primary);
}

.modal-bc-backdrop.modal-bc-open .modal-bc {
  transform: translateY(0) scale(1);
}

.modal-bc-sm { max-width: 24rem; }
.modal-bc-lg { max-width: 48rem; }
.modal-bc-xl { max-width: 64rem; }

.modal-bc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bc-space-4) var(--bc-space-6);
  border-bottom: 1px solid var(--bc-border-default);
}

.modal-bc-header h2,
.modal-bc-header h3 {
  font-size: var(--bc-text-lg);
  font-weight: var(--bc-font-weight-semibold);
  margin: 0;
}

.modal-bc-close {
  background: none;
  border: none;
  font-size: var(--bc-text-xl);
  cursor: pointer;
  color: var(--bc-text-muted);
  padding: var(--bc-space-1);
  line-height: 1;
  transition: color var(--bc-transition-fast);
}

.modal-bc-close:hover {
  color: var(--bc-text-primary);
}

.modal-bc-body {
  padding: var(--bc-space-6);
  overflow-y: auto;
  flex: 1;
  font-size: var(--bc-text-sm);
  line-height: var(--bc-leading-normal);
}

.modal-bc-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--bc-space-2);
  padding: var(--bc-space-4) var(--bc-space-6);
  border-top: 1px solid var(--bc-border-default);
}


/* ── Tabs ── */

.tabs-bc {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--bc-border-default);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.tab-bc {
  padding: var(--bc-space-3) var(--bc-space-5);
  font-size: var(--bc-text-sm);
  font-weight: var(--bc-font-weight-medium);
  color: var(--bc-text-secondary);
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  font-family: var(--bc-font-family);
  transition: color var(--bc-transition-fast), border-color var(--bc-transition-fast);
}

.tab-bc:hover {
  color: var(--bc-text-primary);
}

.tab-bc-active,
.tab-bc.active {
  color: var(--bc-color-primary);
  border-bottom-color: var(--bc-color-primary);
  font-weight: var(--bc-font-weight-semibold);
}

.tab-bc-panel {
  display: none;
}

.tab-bc-panel.active {
  display: block;
}


/* ── Skeleton / Placeholder Loading ── */

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

.skeleton-bc {
  background: linear-gradient(
    90deg,
    var(--bc-surface-muted) 25%,
    var(--bc-surface-hover) 50%,
    var(--bc-surface-muted) 75%
  );
  background-size: 200% 100%;
  animation: bc-shimmer var(--bc-shimmer-speed) ease-in-out infinite;
  border-radius: var(--bc-radius-md);
}

.skeleton-bc-text {
  height: 0.875rem;
  margin-bottom: var(--bc-space-2);
  border-radius: var(--bc-radius-sm);
}

.skeleton-bc-text:last-child {
  width: 60%;
}

.skeleton-bc-circle {
  width: var(--bc-avatar-md);
  height: var(--bc-avatar-md);
  border-radius: var(--bc-radius-full);
}

.skeleton-bc-card {
  height: 8rem;
  border-radius: var(--bc-radius-lg);
}


/* ── Avatars ── */

.avatar-bc {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--bc-avatar-md);
  height: var(--bc-avatar-md);
  border-radius: var(--bc-radius-full);
  background-color: var(--bc-color-primary);
  color: var(--bc-text-on-primary);
  font-weight: var(--bc-font-weight-semibold);
  font-size: var(--bc-text-sm);
  overflow: hidden;
  flex-shrink: 0;
}

.avatar-bc img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.avatar-bc-sm {
  width: var(--bc-avatar-sm);
  height: var(--bc-avatar-sm);
  font-size: var(--bc-text-xs);
}

.avatar-bc-lg {
  width: var(--bc-avatar-lg);
  height: var(--bc-avatar-lg);
  font-size: var(--bc-text-base);
}

.avatar-bc-xl {
  width: var(--bc-avatar-xl);
  height: var(--bc-avatar-xl);
  font-size: var(--bc-text-lg);
}

.avatar-bc-group {
  display: flex;
  flex-direction: row-reverse;
  justify-content: flex-end;
}

.avatar-bc-group .avatar-bc {
  border: 2px solid var(--bc-surface-base);
  margin-left: -0.5rem;
}

.avatar-bc-group .avatar-bc:last-child {
  margin-left: 0;
}


/* ── Progress Bar (standalone) ── */

.progress-bc {
  width: 100%;
  height: var(--bc-progress-md);
  background-color: var(--bc-surface-muted);
  border-radius: var(--bc-radius-full);
  overflow: hidden;
}

.progress-bc-bar {
  height: 100%;
  background-color: var(--bc-color-primary);
  border-radius: var(--bc-radius-full);
  transition: width var(--bc-transition-base);
}

.progress-bc-sm { height: var(--bc-progress-sm); }
.progress-bc-lg { height: var(--bc-progress-lg); }

.progress-bc-success .progress-bc-bar { background-color: var(--bc-color-success); }
.progress-bc-warning .progress-bc-bar { background-color: var(--bc-color-warning); }
.progress-bc-danger .progress-bc-bar  { background-color: var(--bc-color-danger); }

.progress-bc-striped .progress-bc-bar {
  background-image: linear-gradient(
    45deg,
    rgba(255, 255, 255, 0.15) 25%,
    transparent 25%,
    transparent 50%,
    rgba(255, 255, 255, 0.15) 50%,
    rgba(255, 255, 255, 0.15) 75%,
    transparent 75%,
    transparent
  );
  background-size: 1rem 1rem;
}

@keyframes bc-progress-stripes {
  0% { background-position: 1rem 0; }
  100% { background-position: 0 0; }
}

.progress-bc-animated .progress-bc-bar {
  animation: bc-progress-stripes 1s linear infinite;
}


/* ── Accordion / Collapsible ── */

.accordion-bc {
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-lg);
  overflow: hidden;
}

.accordion-bc-item {
  border-bottom: 1px solid var(--bc-border-default);
}

.accordion-bc-item:last-child {
  border-bottom: none;
}

.accordion-bc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: var(--bc-space-3) var(--bc-space-4);
  font-size: var(--bc-text-sm);
  font-weight: var(--bc-font-weight-semibold);
  font-family: var(--bc-font-family);
  color: var(--bc-text-primary);
  background-color: var(--bc-surface-raised);
  border: none;
  cursor: pointer;
  transition: background-color var(--bc-transition-fast);
  text-align: left;
}

.accordion-bc-header:hover {
  background-color: var(--bc-surface-hover);
}

.accordion-bc-header::after {
  content: '\276F';
  font-size: var(--bc-text-xs);
  transition: transform var(--bc-transition-fast);
  flex-shrink: 0;
  margin-left: var(--bc-space-2);
}

.accordion-bc-open > .accordion-bc-header::after {
  transform: rotate(90deg);
}

.accordion-bc-body {
  padding: var(--bc-space-3) var(--bc-space-4);
  font-size: var(--bc-text-sm);
  line-height: var(--bc-leading-normal);
  color: var(--bc-text-secondary);
  background-color: var(--bc-surface-raised);
  display: none;
}

.accordion-bc-open > .accordion-bc-body {
  display: block;
}

/* CSS-only accordion using <details>/<summary> */
details.accordion-bc-item {
  border-bottom: 1px solid var(--bc-border-default);
}

details.accordion-bc-item:last-child {
  border-bottom: none;
}

details.accordion-bc-item > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--bc-space-3) var(--bc-space-4);
  font-size: var(--bc-text-sm);
  font-weight: var(--bc-font-weight-semibold);
  color: var(--bc-text-primary);
  background-color: var(--bc-surface-raised);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--bc-transition-fast);
}

details.accordion-bc-item > summary::-webkit-details-marker {
  display: none;
}

details.accordion-bc-item > summary::after {
  content: '\276F';
  font-size: var(--bc-text-xs);
  transition: transform var(--bc-transition-fast);
}

details.accordion-bc-item[open] > summary::after {
  transform: rotate(90deg);
}

details.accordion-bc-item > summary:hover {
  background-color: var(--bc-surface-hover);
}

details.accordion-bc-item > .accordion-bc-body {
  display: block;
}


/* ── Tooltip (CSS-only) ── */

.tooltip-bc {
  position: relative;
  display: inline-block;
}

.tooltip-bc::after {
  content: attr(data-bc-tooltip);
  position: absolute;
  left: 50%;
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
  padding: var(--bc-space-1) var(--bc-space-2);
  font-size: var(--bc-text-xs);
  font-weight: var(--bc-font-weight-medium);
  line-height: var(--bc-leading-tight);
  color: var(--bc-text-inverse);
  background-color: var(--bc-gray);
  border-radius: var(--bc-radius-sm);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--bc-transition-fast);
  z-index: var(--bc-z-tooltip);
}

[data-bc-theme="dark"] .tooltip-bc::after {
  background-color: var(--bc-surface-overlay);
  color: var(--bc-text-primary);
}

.tooltip-bc:hover::after,
.tooltip-bc:focus::after,
.tooltip-bc:focus-within::after {
  opacity: 1;
}

/* Tooltip positions */
.tooltip-bc-bottom::after {
  bottom: auto;
  top: calc(100% + 6px);
}

.tooltip-bc-left::after {
  left: auto;
  right: calc(100% + 6px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}

.tooltip-bc-right::after {
  left: calc(100% + 6px);
  bottom: auto;
  top: 50%;
  transform: translateY(-50%);
}


/* ── Breadcrumb (standalone) ── */

.breadcrumb-bc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  padding: 0;
  margin: 0;
  font-size: var(--bc-text-sm);
}

.breadcrumb-bc-item {
  display: inline-flex;
  align-items: center;
  color: var(--bc-text-secondary);
}

.breadcrumb-bc-item a {
  color: var(--bc-text-secondary);
  text-decoration: none;
  transition: color var(--bc-transition-fast);
}

.breadcrumb-bc-item a:hover {
  color: var(--bc-color-primary);
}

.breadcrumb-bc-item + .breadcrumb-bc-item::before {
  content: '/';
  padding: 0 var(--bc-space-2);
  color: var(--bc-text-muted);
}

.breadcrumb-bc-active {
  color: var(--bc-text-primary);
  font-weight: var(--bc-font-weight-medium);
}


/* ── Pagination (standalone) ── */

.pagination-bc {
  display: flex;
  align-items: center;
  gap: var(--bc-space-1);
  list-style: none;
  padding: 0;
  margin: 0;
}

.pagination-bc-item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2rem;
  height: 2rem;
  padding: 0 var(--bc-space-2);
  font-size: var(--bc-text-sm);
  font-weight: var(--bc-font-weight-medium);
  color: var(--bc-text-primary);
  background-color: var(--bc-surface-raised);
  border: 1px solid var(--bc-border-default);
  border-radius: var(--bc-radius-md);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--bc-transition-fast);
}

.pagination-bc-item:hover {
  background-color: var(--bc-surface-hover);
  border-color: var(--bc-border-strong);
}

.pagination-bc-active,
.pagination-bc-item.active {
  background-color: var(--bc-color-primary);
  border-color: var(--bc-color-primary);
  color: var(--bc-text-on-primary);
}

.pagination-bc-active:hover,
.pagination-bc-item.active:hover {
  background-color: var(--bc-color-primary-hover);
  border-color: var(--bc-color-primary-hover);
}

.pagination-bc-disabled,
.pagination-bc-item:disabled,
.pagination-bc-item[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.pagination-bc-prev,
.pagination-bc-next {
  font-weight: var(--bc-font-weight-semibold);
}


/* ── Divider ── */

.divider-bc {
  border: none;
  border-top: 1px solid var(--bc-border-default);
  margin: var(--bc-space-4) 0;
}

.divider-bc-vertical {
  display: inline-block;
  width: 1px;
  height: 1em;
  background-color: var(--bc-border-default);
  margin: 0 var(--bc-space-3);
  vertical-align: middle;
}

.divider-bc-label {
  display: flex;
  align-items: center;
  gap: var(--bc-space-3);
  margin: var(--bc-space-4) 0;
  font-size: var(--bc-text-xs);
  color: var(--bc-text-muted);
}

.divider-bc-label::before,
.divider-bc-label::after {
  content: '';
  flex: 1;
  height: 1px;
  background-color: var(--bc-border-default);
}


/* ============================================
   ACCESSIBILITY UTILITIES (v3.9)
   WCAG 2.1 AA compliant utilities
   ============================================ */

/* ── Screen Reader Only ── */

.bc-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.bc-sr-only-focusable:focus {
  position: static;
  width: auto;
  height: auto;
  padding: inherit;
  margin: 0;
  overflow: visible;
  clip: auto;
  white-space: normal;
}

/* ── Skip Link ── */

.bc-skip-link {
  position: absolute;
  top: -100%;
  left: var(--bc-space-4);
  z-index: var(--bc-z-toast);
  padding: var(--bc-space-2) var(--bc-space-4);
  background-color: var(--bc-color-primary);
  color: var(--bc-text-on-primary);
  font-weight: var(--bc-font-weight-semibold);
  font-size: var(--bc-text-sm);
  border-radius: 0 0 var(--bc-radius-md) var(--bc-radius-md);
  text-decoration: none;
  transition: top var(--bc-transition-fast);
}

.bc-skip-link:focus {
  top: 0;
}


/* ============================================
   FOCUS-VISIBLE STYLES (v3.9)
   Keyboard-only focus rings for all interactives
   ============================================ */

.table-bc-page-btn:focus-visible,
th[data-bc-sortable]:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.accordion-bc-header:focus-visible,
details.accordion-bc-item > summary:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.tab-bc:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.modal-bc-close:focus-visible,
.alert-bc-close:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.card-bc-interactive:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.pagination-bc-item:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}

.pill-bc:focus-visible,
.input-bc:focus-visible,
.select-bc:focus-visible {
  outline: 2px solid var(--bc-color-primary);
  outline-offset: var(--bc-focus-ring-offset);
  box-shadow: var(--bc-focus-ring);
}


/* ── Accordion aria-expanded hook ── */

.accordion-bc-header[aria-expanded="true"]::after {
  transform: rotate(90deg);
}


/* ============================================
   REDUCED MOTION GUARD (v3.9)
   ============================================ */

@media (prefers-reduced-motion: reduce) {
  .skeleton-bc,
  .spinner-bc,
  .progress-bc-animated .progress-bc-bar {
    animation: none;
  }

  .modal-bc-backdrop,
  .modal-bc,
  .table-bc tbody td,
  .tab-bc,
  .accordion-bc-header,
  .accordion-bc-header::after,
  details.accordion-bc-item > summary::after,
  .card-bc,
  .card-bc-interactive,
  .tooltip-bc::after,
  .progress-bc-bar,
  .alert-bc-dismissible .alert-bc-close,
  .toast-bc,
  .bc-skip-link,
  .btn-bc-icon,
  .action-bc-menu-item {
    transition: none;
  }
}


/* ============================================
   FORCED COLORS / HIGH CONTRAST (v3.9)
   ============================================ */

@media (forced-colors: active) {
  .tab-bc-active,
  .tab-bc.active {
    border-bottom: 3px solid LinkText;
  }

  .pagination-bc-active,
  .pagination-bc-item.active {
    border: 2px solid LinkText;
  }

  .table-bc thead th {
    border-bottom: 2px solid CanvasText;
  }

  .modal-bc {
    border: 2px solid CanvasText;
  }

  .accordion-bc-header {
    border-bottom: 1px solid CanvasText;
  }

  .card-bc-interactive:focus-visible {
    border: 2px solid LinkText;
  }

  .btn-bc-icon {
    border: 1px solid ButtonText;
  }

  .action-bc-menu {
    border: 2px solid CanvasText;
  }
}