/* ══════════════════════════════════════════════════════
   FW-BO GLASS THEME SYSTEM
   Prefix: fw-bo-
   Scope: Financial/Banking Dark Glass UI
   ══════════════════════════════════════════════════════ */

:root {
  /* ── Core Palette ── */
  --fw-bo-bg-deep: #0c0a09;
  --fw-bo-bg-charcoal: #1c1917;
  --fw-bo-bg-warm: #292524;
  --fw-bo-glass-bg: rgba(41, 37, 36, 0.4);
  --fw-bo-glass-bg-dark: rgba(0, 0, 0, 0.3);
  --fw-bo-glass-bg-hover: rgba(255, 255, 255, 0.03);
  --fw-bo-glass-border: rgba(255, 255, 255, 0.08);
  --fw-bo-glass-border-light: rgba(255, 255, 255, 0.04);

  /* ── Accents ── */
  --fw-bo-orange: #f97316;
  --fw-bo-orange-dark: #ea580c;
  --fw-bo-orange-glow: rgba(249, 115, 22, 0.3);
  --fw-bo-orange-subtle: rgba(249, 115, 22, 0.1);
  --fw-bo-amber: #fbbf24;
  --fw-bo-copper: #b45309;

  /* ── Semantic ── */
  --fw-bo-success: #10b981;
  --fw-bo-success-light: #34d399;
  --fw-bo-success-bg: rgba(16, 185, 129, 0.1);
  --fw-bo-success-border: rgba(16, 185, 129, 0.2);
  --fw-bo-danger: #ef4444;
  --fw-bo-danger-light: #f87171;
  --fw-bo-danger-bg: rgba(239, 68, 68, 0.1);
  --fw-bo-danger-border: rgba(239, 68, 68, 0.2);
  --fw-bo-warning: #f59e0b;
  --fw-bo-warning-light: #fbbf24;
  --fw-bo-warning-bg: rgba(245, 158, 11, 0.1);
  --fw-bo-warning-border: rgba(245, 158, 11, 0.2);
  --fw-bo-info: #3b82f6;
  --fw-bo-info-light: #60a5fa;
  --fw-bo-info-bg: rgba(59, 130, 246, 0.1);
  --fw-bo-info-border: rgba(59, 130, 246, 0.2);

  /* ── Text ── */
  --fw-bo-text-primary: #fafaf9;
  --fw-bo-text-secondary: #d6d3d1;
  --fw-bo-text-muted: #a8a29e;
  --fw-bo-text-dim: #78716c;
  --fw-bo-text-ghost: #57534e;

  /* ── Typography ── */
  --fw-bo-font-serif: var(--fw-bo-font-sans);
  --fw-bo-font-sans: 'Outfit', system-ui, -apple-system, sans-serif;
  --fw-bo-font-mono: 'JetBrains Mono', monospace;

  /* ── Typography Scale ── */
  --fw-bo-text-xs:   0.75rem;    /* 12px @ 16px base — badges, hints */
  --fw-bo-text-sm:   0.8125rem;  /* 13px — table cells, meta */
  --fw-bo-text-base: 0.9375rem;  /* 15px — body, labels, inputs */
  --fw-bo-text-md:   1rem;       /* 16px — emphasized body */
  --fw-bo-text-lg:   1.125rem;   /* 18px — card subtitles */
  --fw-bo-text-xl:   1.375rem;   /* 22px — section headings */
  --fw-bo-text-2xl:  1.75rem;    /* 28px — page titles */
  --fw-bo-text-3xl:  2rem;       /* 32px — stat values, hero numbers */

  /* ── Letter Spacing ── */
  --fw-bo-tracking-tight:   -0.02em;
  --fw-bo-tracking-normal:   0em;
  --fw-bo-tracking-semi-wide:  0.025em;  /* between normal and wide */
  --fw-bo-tracking-wide:     0.04em;
  --fw-bo-tracking-widest:   0.08em;

  /* ── Line Height ── */
  --fw-bo-leading-none:    1;
  --fw-bo-leading-tight:   1.25;
  --fw-bo-leading-snug:    1.375;
  --fw-bo-leading-normal:  1.5;
  --fw-bo-leading-relaxed: 1.625;
  --fw-bo-leading-loose:   2;

  /* ── Spacing ── */
  --fw-bo-space-xs: 4px;
  --fw-bo-space-sm: 8px;
  --fw-bo-space-md: 16px;
  --fw-bo-space-lg: 24px;
  --fw-bo-space-xl: 32px;
  --fw-bo-space-2xl: 48px;

  /* ── Radius ── */
  --fw-bo-radius-sm: 8px;
  --fw-bo-radius-md: 12px;
  --fw-bo-radius-lg: 16px;
  --fw-bo-radius-xl: 24px;
  --fw-bo-radius-full: 9999px;

  /* ── Overlay / Semi-transparent ── */
  --fw-bo-overlay-light: rgba(255, 255, 255, 0.05);
  --fw-bo-overlay-lighter: rgba(255, 255, 255, 0.03);
  --fw-bo-overlay-lightest: rgba(255, 255, 255, 0.02);
  --fw-bo-overlay-medium: rgba(255, 255, 255, 0.06);
  --fw-bo-overlay-strong: rgba(255, 255, 255, 0.1);
  --fw-bo-overlay-dark: rgba(0, 0, 0, 0.2);
  --fw-bo-overlay-darker: rgba(0, 0, 0, 0.3);
  --fw-bo-overlay-modal: rgba(0, 0, 0, 0.8);
  --fw-bo-border-subtle: rgba(255, 255, 255, 0.1);
  --fw-bo-border-faint: rgba(255, 255, 255, 0.05);
  --fw-bo-border-hairline: rgba(255, 255, 255, 0.06);
  --fw-bo-border-light: rgba(255, 255, 255, 0.08);

  /* ── Extended Surface Tokens ── */
  --fw-bo-surface-dark: #1e293b;
  --fw-bo-surface: rgba(255, 255, 255, 0.06);
  --fw-bo-shadow-md: rgba(0, 0, 0, 0.3);
  --fw-bo-overlay: rgba(0, 0, 0, 0.5);
  --fw-bo-orange-hover: rgba(249, 115, 22, 0.2);
  --fw-bo-glass-bg-light: rgba(255, 255, 255, 0.05);
  --fw-bo-glass-border-alt: rgba(255, 255, 255, 0.1);
  --fw-bo-success-subtle: rgba(16, 185, 129, 0.15);
  --fw-bo-danger-subtle: rgba(239, 68, 68, 0.15);
  --fw-bo-warning-subtle: rgba(245, 158, 11, 0.15);

  /* ── Component Surfaces ── */
  --fw-bo-input-bg: rgba(12, 10, 9, 0.6);
  --fw-bo-accent-text: #fb923c;
  --fw-bo-tbody-bg: rgba(41, 37, 36, 0.2);
  --fw-bo-footer-bg: rgba(0, 0, 0, 0.1);
  --fw-bo-pagination-bg: rgba(0, 0, 0, 0.2);
  --fw-bo-fee-item-bg: rgba(0, 0, 0, 0.2);
  --fw-bo-skeleton-from: rgba(255, 255, 255, 0.03);
  --fw-bo-skeleton-to: rgba(255, 255, 255, 0.06);
  --fw-bo-ambient-primary: rgba(249, 115, 22, 0.08);
  --fw-bo-ambient-secondary: rgba(251, 191, 36, 0.05);
  --fw-bo-badge-neutral-bg: rgba(120, 113, 108, 0.1);
  --fw-bo-badge-neutral-border: rgba(120, 113, 108, 0.2);
  --fw-bo-card-bg: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%);
  --fw-bo-modal-bg: linear-gradient(135deg, var(--fw-bo-bg-warm) 0%, var(--fw-bo-bg-charcoal) 100%);

  /* ── Shadows ── */
  --fw-bo-shadow-glass: 0 8px 32px 0 rgba(0, 0, 0, 0.3);
  --fw-bo-shadow-inner: inset 0 1px 0 0 rgba(255, 255, 255, 0.05);
  --fw-bo-shadow-glow: 0 0 20px rgba(249, 115, 22, 0.3);
  --fw-bo-shadow-glow-strong: 0 8px 30px rgba(249, 115, 22, 0.4);
  --fw-bo-shadow-modal: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

  /* ── Transitions ── */
  --fw-bo-ease: cubic-bezier(0.4, 0, 0.2, 1);
  --fw-bo-dur: 0.3s;
  --fw-bo-dur-fast: 0.15s;
}

/* ── RTL Support ── */
[dir="rtl"] {
  --fw-bo-dir: rtl;
}

/* ── Responsive Type Base — Desktop First ── */

/* Extra Large: 1920px+ (32" screens — default, no query needed) */
html {
  font-size: 16px;
}

/* Large Desktop: up to 1919px */
@media (max-width: 1919px) {
  html { font-size: 15px; }
  :root {
    --fw-bo-text-2xl: 1.625rem;
    --fw-bo-text-3xl: 1.75rem;
  }
}

/* Small Desktop / Large Tablet: up to 1200px */
@media (max-width: 1200px) {
  html { font-size: 14px; }
  :root {
    --fw-bo-text-xl:  1.25rem;
    --fw-bo-text-2xl: 1.5rem;
    --fw-bo-text-3xl: 1.625rem;
  }
}

/* Tablet / Mobile: up to 768px */
@media (max-width: 768px) {
  html { font-size: 14px; }
  :root {
    --fw-bo-text-lg:  1rem;
    --fw-bo-text-xl:  1.125rem;
    --fw-bo-text-2xl: 1.375rem;
    --fw-bo-text-3xl: 1.5rem;
  }
}


/* ══════════════════════════════════════════════════════
   GLASS BASE COMPONENT
   ══════════════════════════════════════════════════════ */

.fw-bo-glass {
  background: var(--fw-bo-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--fw-bo-glass-border);
  box-shadow: var(--fw-bo-shadow-glass), var(--fw-bo-shadow-inner);
}

.fw-bo-glass-accent {
  border-color: var(--fw-bo-orange-hover);
}


/* ══════════════════════════════════════════════════════
   AMBIENT BACKGROUND
   ══════════════════════════════════════════════════════ */

.fw-bo-ambient-bg {
  position: fixed;
  inset: 0;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.fw-bo-ambient-bg::before {
  content: '';
  position: absolute;
  top: -10%;
  left: 20%;
  width: 600px;
  height: 600px;
  background: var(--fw-bo-ambient-primary);
  border-radius: 50%;
  filter: blur(100px);
}

.fw-bo-ambient-bg::after {
  content: '';
  position: absolute;
  bottom: -10%;
  right: 20%;
  width: 500px;
  height: 500px;
  background: var(--fw-bo-ambient-secondary);
  border-radius: 50%;
  filter: blur(100px);
}


/* ══════════════════════════════════════════════════════
   CONTENT CONTAINER — Single source of truth
   ══════════════════════════════════════════════════════ */

.fw-bo-content {
  margin: 0 auto;
  padding: var(--sp-10) var(--sp-6) var(--sp-8);
  position: relative;
  z-index: 10;
}

/* Narrow variant for forms and detail pages */
.fw-bo-content--narrow {
  max-width: 1200px;
}

@media (max-width: 1200px) {
  .fw-bo-content {
    padding: var(--sp-8) var(--sp-5) var(--sp-5);
  }
}

@media (max-width: 768px) {
  .fw-bo-content {
    padding: var(--sp-6) var(--sp-4) var(--sp-4);
  }
}

@media (max-width: 640px) {
  .fw-bo-content {
    padding: var(--sp-6) var(--sp-2) var(--sp-4);
  }
}


/* ══════════════════════════════════════════════════════
   PAGE HEADER
   ══════════════════════════════════════════════════════ */

.fw-bo-header {
  border-radius: var(--fw-bo-radius-xl);
  padding: var(--fw-bo-space-xl);
  margin-bottom: var(--fw-bo-space-lg);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fw-bo-header-meta {
  color: var(--fw-bo-accent-text);
  font-size: var(--fw-bo-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--fw-bo-tracking-widest);
  font-weight: 600;
}

.fw-bo-header-title {
  font-family: var(--fw-bo-font-sans);
  font-size: var(--fw-bo-text-2xl);
  color: var(--fw-bo-text-primary);
  font-weight: 700;
  letter-spacing: var(--fw-bo-tracking-tight);
  margin-top: var(--fw-bo-space-sm);
  line-height: 1.2;
}


/* ══════════════════════════════════════════════════════
   STATS ROW
   ══════════════════════════════════════════════════════ */

.fw-bo-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fw-bo-space-lg);
  margin-bottom: var(--fw-bo-space-lg);
}

.fw-bo-stat-card {
  border-radius: 20px;
  padding: var(--fw-bo-space-lg);
  position: relative;
  overflow: hidden;
}

.fw-bo-stat-card::before {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100px;
  height: 100px;
  background: radial-gradient(circle, var(--fw-bo-orange-subtle) 0%, transparent 70%);
  border-radius: 50%;
  transform: translate(30%, -30%);
}

.fw-bo-stat-label {
  font-size: var(--fw-bo-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--fw-bo-tracking-widest);
  color: var(--fw-bo-text-muted);
  margin-bottom: var(--fw-bo-space-sm);
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-stat-value {
  font-family: var(--fw-bo-font-sans);
  font-size: var(--fw-bo-text-3xl);
  color: var(--fw-bo-text-primary);
  font-weight: 700;
  letter-spacing: var(--fw-bo-tracking-tight);
  font-feature-settings: "tnum" 1, "zero" 1;
  position: relative;
}

.fw-bo-stat-value--sm {
  font-size: 18px;
  margin-top: var(--fw-bo-space-sm);
}


/* ══════════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════════ */

.fw-bo-filters {
  border-radius: var(--fw-bo-radius-xl);
  padding: var(--fw-bo-space-lg);
  margin-bottom: var(--fw-bo-space-lg);
}

.fw-bo-filters-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr auto;
  gap: var(--fw-bo-space-md);
  align-items: end;
}

.fw-bo-form-group {
  display: flex;
  flex-direction: column;
  gap: var(--fw-bo-space-sm);
}

.fw-bo-label {
  font-size: var(--fw-bo-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--fw-bo-tracking-wide);
  color: var(--fw-bo-accent-text);
  font-weight: 600;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-input {
  background: var(--fw-bo-input-bg);
  border: 1px solid var(--fw-bo-border-subtle);
  color: var(--fw-bo-text-primary);
  padding: 12px 16px;
  border-radius: var(--fw-bo-radius-md);
  font-size: var(--fw-bo-text-base);
  font-family: var(--fw-bo-font-sans);
  width: 100%;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-input::placeholder {
  color: var(--fw-bo-text-dim);
}

.fw-bo-input:focus {
  border-color: var(--fw-bo-orange);
  box-shadow: 0 0 0 3px var(--fw-bo-orange-subtle);
  outline: none;
}

.fw-bo-input--error {
  border-color: var(--fw-bo-danger);
  box-shadow: 0 0 0 3px var(--fw-bo-danger-bg);
}

.fw-bo-select {
  appearance: none;
  background-color: var(--fw-bo-input-bg);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%23a8a29e'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 16px;
  border: 1px solid var(--fw-bo-border-subtle);
  color: var(--fw-bo-text-primary);
  padding: 12px 40px 12px 16px;
  border-radius: var(--fw-bo-radius-md);
  font-size: 14px;
  font-family: var(--fw-bo-font-sans);
  width: 100%;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  cursor: pointer;
}

.fw-bo-select:focus {
  border-color: var(--fw-bo-orange);
  box-shadow: 0 0 0 3px var(--fw-bo-orange-subtle);
  outline: none;
}

.fw-bo-select option {
  background: var(--fw-bo-bg-warm);
  color: var(--fw-bo-text-primary);
}

/* ── FwBoSearchableSelect (custom dropdown) ── */

div.fw-bo-select {
  position: relative;
  width: 100%;
  /* Reset native select styles when used as custom component container */
  appearance: unset;
  background-image: none;
  padding: 0;
  border: none;
  cursor: default;
}

.fw-bo-select__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: var(--fw-bo-input-bg);
  border: 1px solid var(--fw-bo-border-subtle);
  color: var(--fw-bo-text-primary);
  padding: 12px 16px;
  border-radius: var(--fw-bo-radius-md);
  font-size: 14px;
  font-family: var(--fw-bo-font-sans);
  cursor: pointer;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  text-align: start;
  gap: 8px;
  min-height: 46px;
}

.fw-bo-select__trigger:hover {
  border-color: var(--fw-bo-text-muted);
}

.fw-bo-select__trigger:focus {
  outline: none;
  border-color: var(--fw-bo-orange);
  box-shadow: 0 0 0 3px var(--fw-bo-orange-subtle);
}

.fw-bo-select--open .fw-bo-select__trigger {
  border-color: var(--fw-bo-orange);
  box-shadow: 0 0 0 3px var(--fw-bo-orange-subtle);
}

.fw-bo-select--disabled .fw-bo-select__trigger {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

.fw-bo-select__selected-text {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--fw-bo-text-primary);
}

.fw-bo-select__placeholder {
  flex: 1;
  color: var(--fw-bo-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.fw-bo-select__chevron {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  color: var(--fw-bo-text-muted);
  transition: transform var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-select--open .fw-bo-select__chevron {
  transform: rotate(180deg);
}

/* Overlay (click-outside backdrop) */
.fw-bo-select__overlay {
  position: fixed;
  inset: 0;
  z-index: 998;
}

/* Dropdown panel */
.fw-bo-select__dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: 999;
  background: var(--fw-bo-bg-warm);
  border: 1px solid var(--fw-bo-glass-border);
  border-radius: var(--fw-bo-radius-md);
  box-shadow:
    0 8px 32px var(--fw-bo-overlay-darker),
    0 2px 8px rgba(0, 0, 0, 0.2);
  overflow: hidden;
  animation: fw-bo-select-enter 0.15s var(--fw-bo-ease);
}

.fw-bo-select__dropdown[hidden] {
  display: none;
}

@keyframes fw-bo-select-enter {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Search input inside dropdown */
.fw-bo-select__search {
  position: relative;
  padding: 8px;
  border-bottom: 1px solid var(--fw-bo-glass-border);
}

.fw-bo-select__search input {
  width: 100%;
  background: var(--fw-bo-input-bg);
  border: 1px solid var(--fw-bo-border-subtle);
  color: var(--fw-bo-text-primary);
  padding: 8px 12px 8px 36px;
  border-radius: var(--fw-bo-radius-sm);
  font-size: 13px;
  font-family: var(--fw-bo-font-sans);
  outline: none;
  transition: border-color var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-select__search input:focus {
  border-color: var(--fw-bo-orange);
}

.fw-bo-select__search input::placeholder {
  color: var(--fw-bo-text-muted);
}

.fw-bo-select__search-icon {
  position: absolute;
  left: 18px;
  top: 50%;
  transform: translateY(-50%);
  width: 16px;
  height: 16px;
  color: var(--fw-bo-text-muted);
  pointer-events: none;
}

/* Options list */
.fw-bo-select__options {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 0;
  scrollbar-width: thin;
  scrollbar-color: var(--fw-bo-glass-border) transparent;
}

.fw-bo-select__option {
  padding: 10px 16px;
  font-size: 14px;
  font-family: var(--fw-bo-font-sans);
  color: var(--fw-bo-text-primary);
  cursor: pointer;
  transition: background var(--fw-bo-dur) var(--fw-bo-ease);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.fw-bo-select__option:hover,
.fw-bo-select__option--active {
  background: var(--fw-bo-glass-bg-hover);
}

.fw-bo-select__option--selected {
  color: var(--fw-bo-orange);
  font-weight: 500;
  background: var(--fw-bo-orange-subtle);
}

.fw-bo-select__option--selected:hover,
.fw-bo-select__option--selected.fw-bo-select__option--active {
  background: var(--fw-bo-orange-subtle);
}

.fw-bo-select__no-results {
  padding: 16px;
  text-align: center;
  color: var(--fw-bo-text-muted);
  font-size: 13px;
  font-style: italic;
}

.fw-bo-textarea {
  resize: vertical;
  min-height: 80px;
}

.fw-bo-search-wrapper {
  position: relative;
}

.fw-bo-search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--fw-bo-text-dim);
  pointer-events: none;
}

[dir="rtl"] .fw-bo-search-icon {
  left: auto;
  right: 16px;
}

.fw-bo-input-search {
  padding-left: 44px;
}

[dir="rtl"] .fw-bo-input-search {
  padding-left: 16px;
  padding-right: 44px;
}


/* ══════════════════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════════════════ */

.fw-bo-btn-primary {
  background: linear-gradient(135deg, var(--fw-bo-orange-dark) 0%, #d97706 100%);
  color: white;
  border: none;
  padding: 16px 28px;
  border-radius: var(--fw-bo-radius-lg);
  font-weight: 600;
  font-size: var(--fw-bo-text-sm);
  letter-spacing: var(--fw-bo-tracking-wide);
  font-family: var(--fw-bo-font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--fw-bo-shadow-glow);
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  white-space: nowrap;
}

.fw-bo-btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--fw-bo-shadow-glow-strong);
}

.fw-bo-btn-primary:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}

.fw-bo-btn-secondary {
  background: var(--fw-bo-overlay-light);
  color: var(--fw-bo-text-muted);
  border: 1px solid var(--fw-bo-border-subtle);
  padding: 12px 20px;
  border-radius: var(--fw-bo-radius-md);
  font-weight: 500;
  font-size: 13px;
  font-family: var(--fw-bo-font-sans);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  white-space: nowrap;
}

.fw-bo-btn-secondary:hover {
  background: var(--fw-bo-overlay-strong);
  color: var(--fw-bo-text-secondary);
}

.fw-bo-btn-danger {
  background: var(--fw-bo-danger-bg);
  color: var(--fw-bo-danger-light);
  border: 1px solid var(--fw-bo-danger-border);
  padding: 12px 20px;
  border-radius: var(--fw-bo-radius-md);
  font-weight: 500;
  font-size: 13px;
  font-family: var(--fw-bo-font-sans);
  cursor: pointer;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-btn-danger:hover {
  background: rgba(239, 68, 68, 0.2);
}

.fw-bo-btn-cancel {
  background: var(--fw-bo-overlay-light);
  color: var(--fw-bo-text-muted);
  border: 1px solid var(--fw-bo-border-subtle);
  padding: 14px 28px;
  border-radius: var(--fw-bo-radius-md);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--fw-bo-font-sans);
  cursor: pointer;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-btn-cancel:hover {
  background: var(--fw-bo-overlay-strong);
  color: var(--fw-bo-text-secondary);
}

/* Outline action button — text-based actions (investigate, merge, etc.) */
.fw-bo-btn-outline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  color: var(--fw-bo-text-secondary);
  border: 1.5px solid var(--fw-bo-border-subtle);
  padding: 8px 20px;
  border-radius: var(--fw-bo-radius-md);
  font-weight: 600;
  font-size: var(--text-sm);
  letter-spacing: 0.02em;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.fw-bo-btn-outline:hover {
  background: var(--fw-bo-orange-subtle);
  border-color: var(--fw-bo-orange-glow);
  color: var(--fw-bo-accent-text);
  transform: translateY(-1px);
}

.fw-bo-btn-outline:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

a.fw-bo-btn-outline {
  text-decoration: none;
}

.fw-bo-btn-action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
  transform: none;
}

a.fw-bo-btn-action {
  text-decoration: none;
}

.fw-bo-btn-save {
  background: linear-gradient(135deg, var(--fw-bo-orange-dark) 0%, #d97706 100%);
  color: white;
  border: none;
  padding: 14px 32px;
  border-radius: var(--fw-bo-radius-md);
  font-weight: 600;
  font-size: 14px;
  font-family: var(--fw-bo-font-sans);
  cursor: pointer;
  box-shadow: var(--fw-bo-shadow-glow);
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  display: inline-flex;
  align-items: center;
  gap: var(--fw-bo-space-sm);
}

.fw-bo-btn-save:hover {
  transform: translateY(-2px);
  box-shadow: var(--fw-bo-shadow-glow-strong);
}

.fw-bo-btn-save:disabled {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none;
}

.fw-bo-btn-icon {
  width: 20px;
  height: 20px;
}

.fw-bo-btn-back {
  width: 40px;
  height: 40px;
  border-radius: var(--fw-bo-radius-md);
  background: var(--fw-bo-overlay-light);
  border: 1px solid var(--fw-bo-glass-border);
  color: var(--fw-bo-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-btn-back:hover {
  background: var(--fw-bo-orange-subtle);
  border-color: var(--fw-bo-orange-glow);
  color: var(--fw-bo-accent-text);
}


/* ══════════════════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════════════════ */

.fw-bo-table-container {
  border-radius: var(--fw-bo-radius-xl);
  overflow: hidden;
}

.fw-bo-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
}

.fw-bo-thead {
  background: var(--fw-bo-glass-bg-dark);
}

.fw-bo-th {
  padding: 20px 24px;
  text-align: left;
  font-size: var(--fw-bo-text-xs);
  text-transform: uppercase;
  letter-spacing: var(--fw-bo-tracking-wide);
  color: var(--fw-bo-accent-text);
  font-weight: 700;
  font-family: var(--fw-bo-font-sans);
  border-bottom: 1px solid var(--fw-bo-glass-border);
  white-space: nowrap;
}

[dir="rtl"] .fw-bo-th {
  text-align: right;
}

.fw-bo-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-th-sortable:hover {
  color: var(--fw-bo-amber);
}

.fw-bo-th-right {
  text-align: right;
}

[dir="rtl"] .fw-bo-th-right {
  text-align: left;
}

.fw-bo-th-center {
  text-align: center;
}

.fw-bo-tbody {
  background: var(--fw-bo-tbody-bg);
}

.fw-bo-tr {
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  border-bottom: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-tr:hover {
  background: var(--fw-bo-glass-bg-hover);
}

.fw-bo-td {
  padding: 20px 24px;
  font-size: var(--fw-bo-text-sm);
  color: var(--fw-bo-text-secondary);
  border-bottom: 1px solid var(--fw-bo-glass-border-light);
  vertical-align: middle;
  font-family: var(--fw-bo-font-sans);
  font-feature-settings: "tnum" 1, "zero" 1;
}

.fw-bo-td-right {
  text-align: right;
}

[dir="rtl"] .fw-bo-td-right {
  text-align: left;
}

.fw-bo-td-center {
  text-align: center;
}

.fw-bo-td-mono {
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
  color: var(--fw-bo-text-muted);
}

.fw-bo-cell-primary {
  color: var(--fw-bo-text-primary);
  font-weight: 600;
  font-size: 15px;
}

.fw-bo-cell-secondary {
  color: var(--fw-bo-text-dim);
  font-size: 12px;
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════════════════ */

.fw-bo-badge {
  display: inline-flex;
  align-items: center;
  padding: 6px 12px;
  border-radius: 20px;
  font-size: var(--fw-bo-text-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--fw-bo-tracking-wide);
  border: 1px solid;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-badge-active {
  background: var(--fw-bo-success-bg);
  color: var(--fw-bo-success-light);
  border-color: var(--fw-bo-success-border);
}

.fw-bo-badge-inactive {
  background: var(--fw-bo-danger-bg);
  color: var(--fw-bo-danger-light);
  border-color: var(--fw-bo-danger-border);
}

.fw-bo-badge-pending {
  background: var(--fw-bo-warning-bg);
  color: var(--fw-bo-warning-light);
  border-color: var(--fw-bo-warning-border);
}

.fw-bo-badge-suspended {
  background: var(--fw-bo-info-bg);
  color: var(--fw-bo-info-light);
  border-color: var(--fw-bo-info-border);
}

.fw-bo-badge-neutral {
  background: var(--fw-bo-badge-neutral-bg);
  color: var(--fw-bo-text-dim);
  border-color: var(--fw-bo-badge-neutral-border);
}

.fw-bo-uid-badge {
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--fw-bo-text-muted);
  background: var(--fw-bo-overlay-lightest);
  padding: 4px 10px;
  border-radius: 6px;
  border: 1px solid var(--fw-bo-glass-border);
  letter-spacing: 0.05em;
}


/* ══════════════════════════════════════════════════════
   SCOPE LOCKED FIELD (partner context — institution / distributor)
   Used by ConfigurationPackForm, ProductTypeForm, UserForm
   ══════════════════════════════════════════════════════ */
.fw-bo-scope-locked-field {
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-sm);
  padding: var(--fw-bo-space-xs) var(--fw-bo-space-md);
  background: var(--fw-bo-orange-subtle);
  color: var(--fw-bo-amber);
  border-radius: var(--fw-bo-radius-md);
  border: 1px solid var(--fw-bo-orange-hover);
  font-size: var(--fw-bo-text-sm);
  font-weight: 600;
  min-height: 38px;
}

/* ══════════════════════════════════════════════════════
   ROW ACTIONS
   ══════════════════════════════════════════════════════ */

.fw-bo-actions {
  display: flex;
  gap: var(--fw-bo-space-sm);
  justify-content: flex-end;
  opacity: 0;
  transition: opacity var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-tr:hover .fw-bo-actions {
  opacity: 1;
}

.fw-bo-btn-action {
  width: 32px;
  height: 32px;
  border-radius: var(--fw-bo-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--fw-bo-border-subtle);
  color: var(--fw-bo-text-muted);
  cursor: pointer;
  transition: all 0.2s var(--fw-bo-ease);
}

.fw-bo-btn-action:hover {
  background: var(--fw-bo-orange-subtle);
  border-color: var(--fw-bo-orange-glow);
  color: var(--fw-bo-accent-text);
}

.fw-bo-btn-delete:hover {
  background: var(--fw-bo-danger-bg);
  border-color: rgba(239, 68, 68, 0.3);
  color: var(--fw-bo-danger-light);
}

.fw-bo-icon-small {
  width: 16px;
  height: 16px;
}

.fw-bo-icon {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

.fw-bo-icon--xs {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.fw-bo-icon--sm {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════
   EMPTY STATE
   ══════════════════════════════════════════════════════ */

.fw-bo-empty {
  padding: 80px 40px;
  text-align: center;
  border-top: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-empty-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto 24px;
  background: var(--fw-bo-overlay-lighter);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fw-bo-text-ghost);
}

.fw-bo-empty-title {
  font-family: var(--fw-bo-font-serif);
  font-size: 24px;
  color: var(--fw-bo-text-primary);
  margin-bottom: var(--fw-bo-space-sm);
}

.fw-bo-empty-text {
  color: var(--fw-bo-text-dim);
  font-size: 14px;
}


/* ══════════════════════════════════════════════════════
   PAGINATION
   ══════════════════════════════════════════════════════ */

.fw-bo-pagination {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fw-bo-space-lg);
  border-top: 1px solid var(--fw-bo-glass-border);
  background: var(--fw-bo-pagination-bg);
}

.fw-bo-page-info {
  color: var(--fw-bo-text-dim);
  font-size: var(--fw-bo-text-sm);
}

.fw-bo-page-buttons {
  display: flex;
  gap: var(--fw-bo-space-sm);
}

.fw-bo-page-btn {
  width: 36px;
  height: 36px;
  border-radius: 10px;
  border: 1px solid var(--fw-bo-border-subtle);
  background: var(--fw-bo-overlay-lighter);
  color: var(--fw-bo-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  font-family: var(--fw-bo-font-sans);
  font-size: 13px;
}

.fw-bo-page-btn:hover:not(:disabled) {
  background: var(--fw-bo-orange-subtle);
  border-color: var(--fw-bo-orange-glow);
  color: var(--fw-bo-accent-text);
}

.fw-bo-page-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.fw-bo-page-btn-active {
  background: var(--fw-bo-orange-hover);
  border-color: rgba(249, 115, 22, 0.5);
  color: var(--fw-bo-accent-text);
}


/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */

.fw-bo-modal-overlay {
  position: fixed;
  inset: 0;
  background: var(--fw-bo-overlay-modal);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--fw-bo-space-lg);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-modal-overlay--open {
  opacity: 1;
  pointer-events: all;
}

.fw-bo-modal {
  background: var(--fw-bo-modal-bg);
  border: 1px solid var(--fw-bo-orange-hover);
  border-radius: var(--fw-bo-radius-xl);
  width: 100%;
  max-width: 600px;
  max-height: 90vh;
  overflow: auto;
  box-shadow: var(--fw-bo-shadow-modal);
  transform: scale(0.95);
  transition: transform var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-modal-overlay--open .fw-bo-modal {
  transform: scale(1);
}

.fw-bo-modal-header {
  padding: var(--fw-bo-space-xl);
  border-bottom: 1px solid var(--fw-bo-glass-border);
  background: linear-gradient(135deg, var(--fw-bo-orange-subtle) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.fw-bo-modal-title {
  font-family: var(--fw-bo-font-sans);
  font-size: var(--fw-bo-text-xl);
  color: var(--fw-bo-text-primary);
  font-weight: 700;
  letter-spacing: var(--fw-bo-tracking-tight);
}

.fw-bo-modal-subtitle {
  color: var(--fw-bo-text-muted);
  font-size: 14px;
  margin-top: var(--fw-bo-space-xs);
}

.fw-bo-modal-close {
  width: 40px;
  height: 40px;
  border-radius: var(--fw-bo-radius-md);
  background: var(--fw-bo-overlay-light);
  border: 1px solid var(--fw-bo-border-subtle);
  color: var(--fw-bo-text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  flex-shrink: 0;
}

.fw-bo-modal-close:hover {
  background: var(--fw-bo-overlay-strong);
  color: var(--fw-bo-text-primary);
}

.fw-bo-modal-body {
  padding: var(--fw-bo-space-xl);
}

.fw-bo-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

.fw-bo-form-full {
  grid-column: 1 / -1;
}

.fw-bo-form-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  margin-top: var(--fw-bo-space-xl);
  padding-top: var(--fw-bo-space-lg);
  border-top: 1px solid var(--fw-bo-glass-border);
}

.fw-bo-field-error {
  font-size: 12px;
  color: var(--fw-bo-danger-light);
  margin-top: var(--fw-bo-space-xs);
}


/* ══════════════════════════════════════════════════════
   DETAIL VIEW
   ══════════════════════════════════════════════════════ */

.fw-bo-detail-card {
  border-radius: var(--fw-bo-radius-xl);
  overflow: visible;
}

.fw-bo-detail-card-header {
  padding: var(--fw-bo-space-md) var(--fw-bo-space-lg);
  border-bottom: 1px solid var(--fw-bo-glass-border);
  background: linear-gradient(135deg, var(--fw-bo-orange-subtle) 0%, transparent 100%);
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-radius: var(--fw-bo-radius-xl) var(--fw-bo-radius-xl) 0 0;
}

.fw-bo-detail-card-title {
    display: flex;
    align-items: center;
    gap: var(--fw-bo-space-sm);
    font-family: var(--fw-bo-font-sans);
    font-size: var(--fw-bo-text-2xl);
    font-weight: 600;
    color: var(--fw-bo-text-primary);
    letter-spacing: var(--fw-bo-tracking-tight);
}

.fw-bo-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  padding: 0;
}

.fw-bo-detail-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--fw-bo-space-sm) var(--fw-bo-space-lg);
  border-bottom: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-detail-field:nth-child(odd) {
  border-right: 1px solid var(--fw-bo-glass-border-light);
}

[dir="rtl"] .fw-bo-detail-field:nth-child(odd) {
  border-right: none;
  border-left: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-detail-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fw-bo-accent-text);
  font-weight: 600;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-detail-value {
  color: var(--fw-bo-text-primary);
  font-size: 15px;
  font-weight: 500;
}

.fw-bo-detail-footer {
  padding: var(--fw-bo-space-sm) var(--fw-bo-space-lg);
  border-top: 1px solid var(--fw-bo-glass-border);
  background: var(--fw-bo-footer-bg);
}


/* ══════════════════════════════════════════════════════
   META ROW
   ══════════════════════════════════════════════════════ */

.fw-bo-meta-row {
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-sm);
  font-size: 12px;
  color: var(--fw-bo-text-ghost);
  margin-top: var(--fw-bo-space-xs);
}

.fw-bo-meta-dot {
  width: 4px;
  height: 4px;
  background: var(--fw-bo-text-ghost);
  border-radius: 50%;
  flex-shrink: 0;
}


/* ══════════════════════════════════════════════════════
   SKELETON LOADING (glass variant)
   ══════════════════════════════════════════════════════ */

.fw-bo-skeleton {
  background: linear-gradient(90deg, var(--fw-bo-skeleton-from) 25%, var(--fw-bo-skeleton-to) 50%, var(--fw-bo-skeleton-from) 75%);
  background-size: 200% 100%;
  animation: fw-bo-shimmer 1.5s infinite;
  border-radius: var(--fw-bo-radius-sm);
}

.fw-bo-skeleton-text {
  height: 14px;
  width: 80%;
}

.fw-bo-skeleton-badge {
  height: 28px;
  width: 72px;
  border-radius: 20px;
}

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


/* ══════════════════════════════════════════════════════
   TOAST (glass variant)
   ══════════════════════════════════════════════════════ */

.fw-bo-toast-container {
  position: fixed;
  top: var(--fw-bo-space-lg);
  right: var(--fw-bo-space-lg);
  z-index: 2000;
  display: flex;
  flex-direction: column;
  gap: var(--fw-bo-space-sm);
}

[dir="rtl"] .fw-bo-toast-container {
  right: auto;
  left: var(--fw-bo-space-lg);
}

.fw-bo-toast {
  padding: var(--fw-bo-space-md) var(--fw-bo-space-lg);
  border-radius: var(--fw-bo-radius-lg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--fw-bo-glass-border);
  box-shadow: var(--fw-bo-shadow-glass);
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-md);
  min-width: 300px;
  animation: fw-bo-slide-in 0.3s var(--fw-bo-ease);
  font-family: var(--fw-bo-font-sans);
  font-size: 14px;
}

.fw-bo-toast--success {
  background: var(--fw-bo-success-subtle);
  border-color: var(--fw-bo-success-border);
  color: var(--fw-bo-success-light);
}

.fw-bo-toast--error {
  background: var(--fw-bo-danger-subtle);
  border-color: var(--fw-bo-danger-border);
  color: var(--fw-bo-danger-light);
}


/* ══════════════════════════════════════════════════════
   ANIMATIONS
   ══════════════════════════════════════════════════════ */

.fw-bo-transition {
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-fade-in {
  animation: fw-bo-fade 0.3s ease-in;
}

@keyframes fw-bo-fade {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes fw-bo-slide-in {
  from { opacity: 0; transform: translateX(100px); }
  to { opacity: 1; transform: translateX(0); }
}

[dir="rtl"] .fw-bo-slide-in {
  animation-name: fw-bo-slide-in-rtl;
}

@keyframes fw-bo-slide-in-rtl {
  from { opacity: 0; transform: translateX(-100px); }
  to { opacity: 1; transform: translateX(0); }
}

.fw-bo-stagger-1 { animation-delay: 0.05s; }
.fw-bo-stagger-2 { animation-delay: 0.1s; }
.fw-bo-stagger-3 { animation-delay: 0.15s; }
.fw-bo-stagger-4 { animation-delay: 0.2s; }


/* ══════════════════════════════════════════════════════
   SPINNER
   ══════════════════════════════════════════════════════ */

.fw-bo-spinner {
  width: 20px;
  height: 20px;
  border: 2px solid var(--fw-bo-glass-border);
  border-top-color: var(--fw-bo-orange);
  border-radius: 50%;
  animation: fw-bo-spin 0.6s linear infinite;
}

.fw-bo-spinner--sm {
  width: 14px;
  height: 14px;
  border-width: 2px;
}

.fw-bo-spinner--lg {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

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


/* ══════════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .fw-bo-filters-grid {
    grid-template-columns: 1fr 1fr;
  }

  .fw-bo-stats {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .fw-bo-filters-grid {
    grid-template-columns: 1fr;
  }

  .fw-bo-stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .fw-bo-form-grid {
    grid-template-columns: 1fr;
  }

  .fw-bo-header {
    flex-direction: column;
    gap: var(--fw-bo-space-md);
  }

  .fw-bo-header-title {
    font-size: 28px;
  }

  .fw-bo-detail-grid {
    grid-template-columns: 1fr;
  }

  .fw-bo-detail-field:nth-child(odd) {
    border-right: none;
  }

  .fw-bo-td,
  .fw-bo-th {
    padding: 12px 16px;
  }

  .fw-bo-actions {
    opacity: 1;
  }
}

@media (max-width: 480px) {
  .fw-bo-stats {
    grid-template-columns: 1fr;
  }

  .fw-bo-stat-value {
    font-size: 24px;
  }

  .fw-bo-modal {
    margin: var(--fw-bo-space-md);
    max-width: calc(100vw - var(--fw-bo-space-xl));
  }
}

/* ══════════════════════════════════════════════════════════
   ConfigPack Design System Extensions
   ══════════════════════════════════════════════════════════ */

/* ── Headings ── */
.fw-bo-heading-1 {
  font-family: var(--fw-bo-font-serif);
  font-size: 36px;
  color: var(--fw-bo-text-primary);
  font-weight: 700;
}

.fw-bo-heading-2 {
  font-family: var(--fw-bo-font-serif);
  font-size: 28px;
  color: var(--fw-bo-text-primary);
  font-weight: 600;
}

.fw-bo-heading-3 {
  font-size: 20px;
  color: var(--fw-bo-text-primary);
  font-weight: 600;
}

.fw-bo-text-muted {
  color: var(--fw-bo-text-muted);
  font-size: 13px;
}

.fw-bo-mono {
  font-family: var(--fw-bo-font-mono);
  font-size: var(--fw-bo-text-sm);
  font-feature-settings: "tnum" 1, "zero" 1, "ss01" 1;
}

/* ── Card ── */
.fw-bo-card {
  background: var(--fw-bo-card-bg);
  backdrop-filter: blur(20px);
  border: 1px solid var(--fw-bo-border-light);
  border-radius: 20px;
  padding: 24px;
  transition: all 0.3s ease;
}

.fw-bo-card-hover:hover {
  border-color: rgba(249, 115, 22, 0.3);
  box-shadow: 0 8px 32px var(--fw-bo-orange-subtle);
}

/* ── Grids ── */
.fw-bo-grid-2 {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.fw-bo-grid-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.fw-bo-grid-4 {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

@media (max-width: 1200px) {
  .fw-bo-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .fw-bo-grid-4 {
    grid-template-columns: 1fr;
  }
}

/* ── Stat Cards ── */
.fw-bo-stat-card {
  padding: 24px;
  border-radius: 16px;
  text-align: center;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.fw-bo-stat-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
}

.fw-bo-stat-value {
  font-size: 36px;
  font-weight: 700;
  color: var(--fw-bo-orange);
  margin-bottom: 4px;
}

.fw-bo-stat-label {
  font-size: 13px;
  color: var(--fw-bo-text-muted);
  text-transform: lowercase;
}

/* ── Detail Page Layout ── */
.fw-bo-detail-section {
  margin-bottom: 16px;
}

.fw-bo-detail-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  padding: 12px 16px;
  background: var(--fw-bo-overlay-dark);
  border-radius: 12px;
}

.fw-bo-channel-badge {
  background: var(--fw-bo-orange-subtle);
  color: var(--fw-bo-orange);
  padding: 4px 12px;
  border-radius: 8px;
  font-weight: 600;
  font-size: 12px;
}

.fw-bo-service-name {
  font-weight: 600;
  color: var(--fw-bo-text-primary);
}

.fw-bo-fee-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 12px;
  padding-left: 16px;
}

.fw-bo-fee-card {
  padding: 16px;
  background: var(--fw-bo-overlay-darker);
  border-radius: 12px;
  border: 1px solid var(--fw-bo-border-faint);
  transition: transform 0.2s ease, border-color 0.2s ease;
}

.fw-bo-fee-card:hover {
  transform: translateY(-2px);
  border-color: var(--fw-bo-glass-border);
}

.fw-bo-fee-type {
  margin-bottom: 8px;
}

.fw-bo-fee-value {
  font-family: var(--fw-bo-font-mono);
  font-size: 14px;
  color: var(--fw-bo-text-primary);
}

.fw-bo-fee-max {
  font-size: 11px;
  color: var(--fw-bo-text-dim);
  margin-top: 4px;
}

.fw-bo-limit-card {
  border-left: 3px solid;
}

.fw-bo-limit-1t { border-left-color: #a8a29e; }
.fw-bo-limit-1d { border-left-color: #3b82f6; }
.fw-bo-limit-1w { border-left-color: #10b981; }
.fw-bo-limit-1m { border-left-color: #f97316; }

/* ══════════════════════════════════════════════════════
   RESPONSIVE: Detail Page
   ══════════════════════════════════════════════════════ */

/* Large Desktop (> 1400px) */
@media (min-width: 1400px) {
  .fw-bo-fee-grid {
    grid-template-columns: repeat(5, 1fr);
  }
}

/* Desktop (1200px - 1400px) */
@media (max-width: 1400px) {
  .fw-bo-fee-grid {
    grid-template-columns: repeat(4, 1fr);
  }
}

/* Tablet Landscape (1024px - 1200px) */
@media (max-width: 1200px) {
  .fw-bo-grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .fw-bo-fee-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .fw-bo-stat-value {
    font-size: 32px;
  }
}

/* Tablet Portrait (768px - 1024px) */
@media (max-width: 1024px) {
  .fw-bo-fee-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .fw-bo-detail-header {
    flex-wrap: wrap;
  }
}

/* Mobile Large (480px - 768px) */
@media (max-width: 768px) {
  .fw-bo-grid-4 {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .fw-bo-stat-card {
    padding: 20px;
  }
  
  .fw-bo-stat-value {
    font-size: 28px;
  }
  
  .fw-bo-fee-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
    padding-left: 0;
  }
  
  .fw-bo-fee-card {
    padding: 12px;
  }
  
  .fw-bo-detail-section {
    margin-bottom: 20px;
  }
  
  .fw-bo-detail-header {
    padding: 10px 12px;
    gap: 8px;
  }
  
  .fw-bo-channel-badge {
    font-size: 11px;
    padding: 3px 10px;
  }
  
  .fw-bo-service-name {
    font-size: 14px;
  }
  
  /* Table responsive */
  .fw-bo-table {
    font-size: 13px;
  }
  
  .fw-bo-table th,
  .fw-bo-table td {
    padding: 12px 8px;
  }
}

/* Mobile Small (< 480px) */
@media (max-width: 480px) {
  .fw-bo-stat-value {
    font-size: 24px;
  }
  
  .fw-bo-stat-label {
    font-size: 12px;
  }
  
  .fw-bo-fee-grid {
    grid-template-columns: 1fr;
  }
  
  .fw-bo-fee-card {
    padding: 14px;
  }
  
  .fw-bo-fee-value {
    font-size: 15px;
  }
  
  .fw-bo-detail-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }
  
  /* Table card view on mobile */
  .fw-bo-table thead {
    display: none;
  }
  
  .fw-bo-table tbody tr {
    display: block;
    margin-bottom: 12px;
    padding: 12px;
    background: var(--fw-bo-overlay-dark);
    border-radius: 12px;
    border: 1px solid var(--fw-bo-border-faint);
  }
  
  .fw-bo-table td {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px solid var(--fw-bo-border-faint);
  }
  
  .fw-bo-table td:last-child {
    border-bottom: none;
  }
  
  .fw-bo-table td::before {
    content: attr(data-label);
    font-weight: 600;
    color: var(--fw-bo-text-muted);
    font-size: 12px;
    text-transform: uppercase;
  }
}

/* ── Button Small ── */
.fw-bo-btn-sm {
  padding: 8px 16px;
  font-size: 12px;
  border-radius: 10px;
}

/* ── Icon Button (prototype pattern) ── */
.fw-bo-icon-btn {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--fw-bo-overlay-light);
  border: 1px solid var(--fw-bo-border-subtle);
  color: var(--fw-bo-text-secondary);
  cursor: pointer;
  transition: all 0.2s;
}

.fw-bo-icon-btn:hover {
  background: var(--fw-bo-orange-subtle);
  border-color: rgba(249, 115, 22, 0.3);
  color: var(--fw-bo-orange);
}

.fw-bo-icon-btn-delete:hover {
  background: rgba(239, 68, 68, 0.1);
  border-color: rgba(239, 68, 68, 0.3);
  color: #ef4444;
}

/* ── Fee/Limit Type Badges ── */
.fw-bo-badge-com {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}

.fw-bo-badge-tva {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.2);
}

.fw-bo-badge-ddt {
  background: rgba(107, 114, 128, 0.1);
  color: #9ca3af;
  border-color: rgba(107, 114, 128, 0.2);
}

.fw-bo-badge-pl {
  background: var(--fw-bo-orange-subtle);
  color: #fb923c;
  border-color: var(--fw-bo-orange-hover);
}

.fw-bo-badge-tx {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.2);
}

.fw-bo-badge-1t {
  background: rgba(168, 162, 158, 0.1);
  color: #d6d3d1;
  border-color: rgba(168, 162, 158, 0.2);
}

.fw-bo-badge-1d {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}

.fw-bo-badge-1w {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.2);
}

.fw-bo-badge-1m {
  background: rgba(249, 115, 22, 0.1);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.2);
}

/* ── Steps (Wizard) ── */
.fw-bo-steps {
  display: flex;
  align-items: center;
  gap: 16px;
}

.fw-bo-step {
  display: flex;
  align-items: center;
  gap: 12px;
  opacity: 0.4;
  transition: all 0.3s;
}

.fw-bo-step-active {
  opacity: 1;
}

.fw-bo-step-completed {
  opacity: 1;
}

.fw-bo-step-number {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--fw-bo-overlay-strong);
  border: 1px solid rgba(255, 255, 255, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
}

.fw-bo-step-active .fw-bo-step-number {
  background: var(--fw-bo-orange);
  border-color: var(--fw-bo-orange);
  color: white;
  box-shadow: 0 0 20px rgba(249, 115, 22, 0.4);
}

.fw-bo-step-completed .fw-bo-step-number {
  background: #10b981;
  border-color: #10b981;
  color: white;
}

.fw-bo-step-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--fw-bo-text-primary);
}

.fw-bo-step-line {
  width: 40px;
  height: 1px;
  background: var(--fw-bo-border-subtle);
}

/* ── Tabs (pill/contained style) ── */
.fw-bo-tabs {
  display: flex;
  gap: 4px;
  padding: 4px;
  background: rgba(255, 255, 255, 0.03);
  border-radius: var(--fw-bo-radius-sm);
  margin-bottom: var(--fw-bo-space-lg);
  overflow-x: auto;
  border: 1px solid var(--fw-bo-glass-border);
}

.fw-bo-tab {
  padding: 12px 24px;
  background: transparent;
  border: none;
  font-size: 14px;
  font-weight: 500;
  color: var(--fw-bo-text-muted);
  cursor: pointer;
  border-radius: calc(var(--fw-bo-radius-sm) - 2px);
  white-space: nowrap;
  transition: all 0.2s var(--fw-bo-ease);
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-tab:hover {
  color: var(--fw-bo-text-secondary);
  background: var(--fw-bo-overlay-light);
}

.fw-bo-tab--active {
  background: var(--fw-bo-glass-bg);
  color: var(--fw-bo-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--fw-bo-glass-border);
}

.fw-bo-tab-active {
  background: var(--fw-bo-glass-bg);
  color: var(--fw-bo-orange);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
  border: 1px solid var(--fw-bo-glass-border);
}

.fw-bo-tab-badge {
  background: var(--fw-bo-orange);
  color: white;
  padding: 2px 8px;
  border-radius: var(--fw-bo-radius-full);
  font-size: 12px;
  font-weight: 600;
}

.fw-bo-tab-content {
  padding: var(--fw-bo-space-xl);
  min-height: 400px;
}

/* ── Config Card ── */
.fw-bo-config-card {
  border: 1px solid var(--fw-bo-border-hairline);
  border-radius: 16px;
  overflow: hidden;
  transition: all 0.3s ease;
}

.fw-bo-config-card:hover {
  border-color: var(--fw-bo-orange-hover);
}

/* ── Fee/Limit Items ── */
.fw-bo-fee-item {
  display: grid;
  grid-template-columns: 100px 1fr 120px 120px 40px;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--fw-bo-fee-item-bg);
  border: 1px solid var(--fw-bo-border-faint);
  border-radius: 12px;
  margin-bottom: 12px;
}

.fw-bo-limit-item {
  display: grid;
  grid-template-columns: 100px 1fr 1fr 120px 40px;
  gap: 16px;
  align-items: center;
  padding: 16px;
  background: var(--fw-bo-fee-item-bg);
  border: 1px solid var(--fw-bo-border-faint);
  border-radius: 12px;
  margin-bottom: 12px;
}

/* ── Alerts ── */
.fw-bo-alert {
  padding: 16px 20px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 16px;
  font-size: 14px;
}

.fw-bo-alert-error {
  background: rgba(239, 68, 68, 0.1);
  border: 1px solid rgba(239, 68, 68, 0.2);
  color: #fca5a5;
}

.fw-bo-alert-success {
  background: rgba(16, 185, 129, 0.1);
  border: 1px solid rgba(16, 185, 129, 0.2);
  color: #34d399;
}

.fw-bo-alert-warning {
  background: rgba(245, 158, 11, 0.1);
  border: 1px solid rgba(245, 158, 11, 0.2);
  color: #fcd34d;
}

.fw-bo-alert-critical {
  background: rgba(220, 38, 38, 0.15);
  border: 1px solid rgba(220, 38, 38, 0.4);
  color: #fca5a5;
  box-shadow: 0 0 16px rgba(220, 38, 38, 0.25);
}

.fw-bo-stat-card--warning {
  border: 1px solid rgba(245, 158, 11, 0.35);
  box-shadow: 0 0 12px rgba(245, 158, 11, 0.15);
}

.fw-bo-stat-card--critical {
  border: 1px solid rgba(220, 38, 38, 0.45);
  box-shadow: 0 0 14px rgba(220, 38, 38, 0.2);
}

/* Clignotement encadré par WCAG 2.3.1 : 1 cycle/2s (bien sous la limite 3Hz), */
/* et désactivé pour les utilisateurs qui préfèrent reduced motion. */
@keyframes fw-bo-blink-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.55; }
}

.fw-bo-blink {
  animation: fw-bo-blink-pulse 2s ease-in-out infinite;
}

@media (prefers-reduced-motion: reduce) {
  .fw-bo-blink {
    animation: none;
  }
}

/* ══════════════════════════════════════════════════════
   BREADCRUMB
   ══════════════════════════════════════════════════════ */

.fw-bo-breadcrumb {
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-sm);
  margin-bottom: var(--fw-bo-space-md);
  font-size: 14px;
  color: var(--fw-bo-text-muted);
}

.fw-bo-breadcrumb a {
  color: var(--fw-bo-orange);
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-sm);
}

.fw-bo-breadcrumb a:hover {
  text-decoration: underline;
}


/* ══════════════════════════════════════════════════════
   NAME CELL (table row with avatar)
   ══════════════════════════════════════════════════════ */

.fw-bo-name-cell {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fw-bo-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--fw-bo-orange), var(--fw-bo-warning));
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-name {
  font-weight: 500;
  color: var(--fw-bo-text-primary);
}


/* ══════════════════════════════════════════════════════
   FORM FIELD (detail view)
   ══════════════════════════════════════════════════════ */

.fw-bo-form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding-bottom: var(--fw-bo-space-md);
  border-bottom: 1px solid var(--fw-bo-glass-border);
}

.fw-bo-field-label {
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fw-bo-text-muted);
  font-weight: 600;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-field-value {
  font-size: 15px;
  color: var(--fw-bo-text-primary);
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════
   AMOUNT FORMATTING
   ══════════════════════════════════════════════════════ */

.fw-bo-amount-credit {
  color: var(--fw-bo-success);
  font-weight: 600;
}

.fw-bo-amount-debit {
  color: var(--fw-bo-danger);
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════
   CLICKABLE ROW
   ══════════════════════════════════════════════════════ */

.fw-bo-tr-clickable {
  cursor: pointer;
}


/* ══════════════════════════════════════════════════════
   HEADER ACTIONS
   ══════════════════════════════════════════════════════ */

.fw-bo-header-actions {
  display: flex;
  gap: 12px;
  align-items: center;
}


/* ══════════════════════════════════════════════════════
   TOAST — additional variants
   ══════════════════════════════════════════════════════ */

.fw-bo-toast--warning {
  background: var(--fw-bo-warning-subtle);
  border-color: var(--fw-bo-warning-border);
  color: var(--fw-bo-warning-light);
}

.fw-bo-toast--info {
  background: rgba(59, 130, 246, 0.15);
  border-color: var(--fw-bo-info-border);
  color: var(--fw-bo-info-light);
}

.fw-bo-toast__message {
  flex: 1;
}

.fw-bo-toast__close {
  background: none;
  border: none;
  color: inherit;
  cursor: pointer;
  opacity: 0.6;
  transition: opacity var(--fw-bo-dur-fast) var(--fw-bo-ease);
  display: flex;
  align-items: center;
  padding: 0;
}

.fw-bo-toast__close:hover {
  opacity: 1;
}


/* ══════════════════════════════════════════════════════
   OFFLINE BANNER
   ══════════════════════════════════════════════════════ */

.fw-bo-offline-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1500;
  padding: var(--fw-bo-space-sm) var(--fw-bo-space-lg);
  background: var(--fw-bo-danger-subtle);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--fw-bo-danger-border);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--fw-bo-space-sm);
  color: var(--fw-bo-danger-light);
  font-size: 14px;
  font-weight: 500;
  font-family: var(--fw-bo-font-sans);
  animation: fw-bo-slide-up 0.3s var(--fw-bo-ease);
}

@keyframes fw-bo-slide-up {
  from { transform: translateY(100%); }
  to { transform: translateY(0); }
}

.fw-bo-offline-banner--server {
  background: rgba(249, 115, 22, 0.12);
  border-top-color: rgba(249, 115, 22, 0.25);
  color: var(--fw-bo-orange);
}


/* ══════════════════════════════════════════════════════
   ERROR CARD
   ══════════════════════════════════════════════════════ */

.fw-bo-error-card {
  max-width: 420px;
  margin: 80px auto;
  text-align: center;
  padding: var(--fw-bo-space-2xl) var(--fw-bo-space-xl);
  background: var(--fw-bo-glass-bg);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--fw-bo-danger-border);
  border-radius: var(--fw-bo-radius-xl);
  box-shadow: var(--fw-bo-shadow-glass);
}

.fw-bo-error-card__icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--fw-bo-space-lg);
  background: var(--fw-bo-danger-bg);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--fw-bo-danger-light);
}

.fw-bo-error-card__title {
  font-family: var(--fw-bo-font-serif);
  font-size: 24px;
  color: var(--fw-bo-text-primary);
  margin-bottom: var(--fw-bo-space-sm);
}

.fw-bo-error-card__message {
  color: var(--fw-bo-text-muted);
  font-size: 14px;
  margin-bottom: var(--fw-bo-space-lg);
  line-height: var(--fw-bo-leading-normal);
}


/* ══════════════════════════════════════════════════════
   DATE RANGE PICKER
   ══════════════════════════════════════════════════════ */

.fw-bo-date-range {
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-md);
  flex-wrap: wrap;
}

.fw-bo-date-range__presets {
  display: flex;
  gap: var(--fw-bo-space-xs);
  flex-wrap: wrap;
}

.fw-bo-date-range__preset {
  padding: 6px 14px;
  border-radius: var(--fw-bo-radius-full);
  border: 1px solid var(--fw-bo-border-subtle);
  background: var(--fw-bo-overlay-lighter);
  color: var(--fw-bo-text-muted);
  font-size: 12px;
  font-weight: 500;
  font-family: var(--fw-bo-font-sans);
  cursor: pointer;
  transition: all var(--fw-bo-dur-fast) var(--fw-bo-ease);
  white-space: nowrap;
}

.fw-bo-date-range__preset:hover {
  background: var(--fw-bo-orange-subtle);
  border-color: var(--fw-bo-orange-glow);
  color: var(--fw-bo-accent-text);
}

.fw-bo-date-range__preset--active {
  background: var(--fw-bo-orange-hover);
  border-color: rgba(249, 115, 22, 0.5);
  color: var(--fw-bo-accent-text);
}

.fw-bo-date-range__preset--clear {
  border-color: var(--fw-bo-danger-border);
  color: var(--fw-bo-danger-light);
}

.fw-bo-date-range__preset--clear:hover {
  background: var(--fw-bo-danger-bg);
  border-color: var(--fw-bo-danger-border);
  color: var(--fw-bo-danger-light);
}

.fw-bo-date-range__inputs {
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-sm);
}

.fw-bo-date-range__input {
  max-width: 160px;
}

.fw-bo-date-range__separator {
  color: var(--fw-bo-text-dim);
}


/* ══════════════════════════════════════════════════════
   FILTER TOOLBAR
   ══════════════════════════════════════════════════════ */

.fw-bo-filter-toolbar {
  border-radius: var(--fw-bo-radius-xl);
  padding: var(--fw-bo-space-lg);
  margin-bottom: var(--fw-bo-space-lg);
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-md);
  flex-wrap: wrap;
}

.fw-bo-filter-toolbar__search {
  position: relative;
  flex: 1;
  min-width: 200px;
}

.fw-bo-filter-toolbar__search-icon {
  position: absolute;
  left: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  color: var(--fw-bo-text-dim);
  pointer-events: none;
}

[dir="rtl"] .fw-bo-filter-toolbar__search-icon {
  left: auto;
  right: 16px;
}

.fw-bo-filter-toolbar__search-input {
  padding-left: 44px;
  width: 100%;
}

[dir="rtl"] .fw-bo-filter-toolbar__search-input {
  padding-left: 16px;
  padding-right: 44px;
}

.fw-bo-filter-toolbar__search-clear {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--fw-bo-text-dim);
  padding: 4px;
  display: flex;
  align-items: center;
  transition: color var(--fw-bo-dur-fast) var(--fw-bo-ease);
}

[dir="rtl"] .fw-bo-filter-toolbar__search-clear {
  right: auto;
  left: 12px;
}

.fw-bo-filter-toolbar__search-clear:hover {
  color: var(--fw-bo-danger-light);
}

.fw-bo-filter-toolbar__search-clear svg {
  width: 16px;
  height: 16px;
}

.fw-bo-filter-toolbar__filters {
  display: flex;
  gap: var(--fw-bo-space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.fw-bo-filter-toolbar__actions {
  display: flex;
  gap: var(--fw-bo-space-sm);
  align-items: center;
}


/* ══════════════════════════════════════════════════════
   SKELETON — additional shapes
   ══════════════════════════════════════════════════════ */

.fw-bo-skeleton-heading {
  height: 28px;
  width: 40%;
  margin-bottom: var(--fw-bo-space-lg);
}

.fw-bo-skeleton-stat-label {
  height: 10px;
  width: 50%;
}

.fw-bo-skeleton-stat-value {
  height: 32px;
  width: 40%;
  margin-top: var(--fw-bo-space-sm);
}

.fw-bo-skeleton-cell {
  height: 14px;
}


/* ── Responsive: ConfigPack ── */
@media (max-width: 1024px) {
  .fw-bo-grid-2,
  .fw-bo-grid-3 {
    grid-template-columns: 1fr;
  }

  .fw-bo-fee-item,
  .fw-bo-limit-item {
    grid-template-columns: 1fr;
    gap: 12px;
  }

  .fw-bo-step-title {
    display: none;
  }
}


/* ══════════════════════════════════════════════════════
   CHECKBOX
   ══════════════════════════════════════════════════════ */

.fw-bo-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
  font-size: 14px;
  color: var(--fw-bo-text-primary);
  user-select: none;
}

.fw-bo-checkbox {
  appearance: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--fw-bo-border-subtle);
  border-radius: 4px;
  background: var(--fw-bo-input-bg);
  cursor: pointer;
  position: relative;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
  flex-shrink: 0;
}

.fw-bo-checkbox:checked {
  background: var(--fw-bo-orange);
  border-color: var(--fw-bo-orange);
}

.fw-bo-checkbox:checked::after {
  content: '';
  position: absolute;
  left: 5px;
  top: 2px;
  width: 5px;
  height: 9px;
  border: solid white;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.fw-bo-checkbox:focus-visible {
  box-shadow: 0 0 0 3px var(--fw-bo-orange-subtle);
  outline: none;
}


/* ══════════════════════════════════════════════════════
   COMING SOON / EMPTY STATE
   ══════════════════════════════════════════════════════ */

.fw-bo-coming-soon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 80px 40px;
  text-align: center;
}

.fw-bo-coming-soon__icon {
  width: 64px;
  height: 64px;
  color: var(--fw-bo-text-dim);
  margin-bottom: var(--fw-bo-space-lg);
  opacity: 0.5;
}

.fw-bo-coming-soon__text {
  font-size: 16px;
  color: var(--fw-bo-text-muted);
  font-weight: 500;
}


/* ══════════════════════════════════════════════════════
   PERMISSION GRID
   ══════════════════════════════════════════════════════ */

.fw-bo-permission-grid {
  display: flex;
  flex-direction: column;
  gap: var(--fw-bo-space-md);
}

.fw-bo-permission-card {
  background: var(--fw-bo-glass-bg-dark);
  border: 1px solid var(--fw-bo-glass-border);
  border-radius: var(--fw-bo-radius-lg);
  padding: var(--fw-bo-space-lg);
}

.fw-bo-permission-card__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fw-bo-space-md);
}

.fw-bo-permission-card__perms {
  display: flex;
  flex-wrap: wrap;
  gap: var(--fw-bo-space-md);
}

/* ── Toggle Switch ── */
.fw-bo-toggle {
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-sm);
  cursor: pointer;
  user-select: none;
}

.fw-bo-toggle__track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--fw-bo-border-subtle);
  border-radius: 10px;
  transition: background var(--fw-bo-dur) var(--fw-bo-ease);
  flex-shrink: 0;
}

.fw-bo-toggle__track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: var(--fw-bo-text-dim);
  border-radius: 50%;
  transition: all var(--fw-bo-dur) var(--fw-bo-ease);
}

.fw-bo-toggle input {
  display: none;
}

.fw-bo-toggle input:checked + .fw-bo-toggle__track {
  background: var(--fw-bo-orange);
}

.fw-bo-toggle input:checked + .fw-bo-toggle__track::after {
  left: 18px;
  background: #fff;
}

.fw-bo-toggle__label {
  font-size: 13px;
  color: var(--fw-bo-text-secondary);
  font-family: var(--fw-bo-font-sans);
  white-space: nowrap;
}


/* ══════════════════════════════════════════════════════
   LIFECYCLE BADGES
   Color-coded pills for OperationLifecycle enum
   ══════════════════════════════════════════════════════ */

.fw-bo-lifecycle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 4px 10px;
  border-radius: var(--fw-bo-radius-full);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border: 1px solid;
  font-family: var(--fw-bo-font-sans);
  white-space: nowrap;
}

.fw-bo-lifecycle--lg {
  padding: 6px 14px;
  font-size: 12px;
  gap: 6px;
}

.fw-bo-lifecycle::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}

.fw-bo-lifecycle--completed {
  background: rgba(16, 185, 129, 0.1);
  color: #34d399;
  border-color: rgba(16, 185, 129, 0.25);
}
.fw-bo-lifecycle--completed::before { background: #10b981; }

.fw-bo-lifecycle--simulated {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.25);
}
.fw-bo-lifecycle--simulated::before { background: #3b82f6; }

.fw-bo-lifecycle--rejected-sim {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}
.fw-bo-lifecycle--rejected-sim::before { background: #ef4444; }

.fw-bo-lifecycle--reversed {
  background: var(--fw-bo-orange-subtle);
  color: #fb923c;
  border-color: rgba(249, 115, 22, 0.25);
}
.fw-bo-lifecycle--reversed::before { background: #f97316; }

.fw-bo-lifecycle--reversed-next {
  background: rgba(234, 88, 12, 0.1);
  color: #f97316;
  border-color: rgba(234, 88, 12, 0.25);
}
.fw-bo-lifecycle--reversed-next::before { background: #ea580c; }

.fw-bo-lifecycle--partial {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border-color: rgba(251, 191, 36, 0.25);
}
.fw-bo-lifecycle--partial::before { background: #fbbf24; }

.fw-bo-lifecycle--rejected {
  background: rgba(239, 68, 68, 0.1);
  color: #f87171;
  border-color: rgba(239, 68, 68, 0.25);
}
.fw-bo-lifecycle--rejected::before { background: #ef4444; }

.fw-bo-lifecycle--refunded {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.25);
}
.fw-bo-lifecycle--refunded::before { background: #8b5cf6; }

.fw-bo-lifecycle--processing {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.25);
}
.fw-bo-lifecycle--processing::before { background: #3b82f6; }

.fw-bo-lifecycle--douteuse {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.25);
}
.fw-bo-lifecycle--douteuse::before { background: #f59e0b; }

.fw-bo-lifecycle--batch {
  background: rgba(20, 184, 166, 0.1);
  color: #2dd4bf;
  border-color: rgba(20, 184, 166, 0.25);
}
.fw-bo-lifecycle--batch::before { background: #14b8a6; }

.fw-bo-lifecycle--unknown {
  background: rgba(120, 113, 108, 0.1);
  color: #a8a29e;
  border-color: rgba(120, 113, 108, 0.25);
}
.fw-bo-lifecycle--unknown::before { background: #78716c; }


/* ══════════════════════════════════════════════════════
   STATUS BADGES (Transaction-specific)
   ══════════════════════════════════════════════════════ */

.fw-bo-badge-success {
  background: var(--fw-bo-success-bg);
  color: var(--fw-bo-success-light);
  border-color: var(--fw-bo-success-border);
}

.fw-bo-badge-cancelled-j0 {
  background: var(--fw-bo-orange-subtle);
  color: #fb923c;
  border-color: var(--fw-bo-orange-hover);
}

.fw-bo-badge-cancelled-j1 {
  background: rgba(234, 88, 12, 0.1);
  color: #f97316;
  border-color: rgba(234, 88, 12, 0.2);
}

.fw-bo-badge-simulation {
  background: rgba(59, 130, 246, 0.1);
  color: #60a5fa;
  border-color: rgba(59, 130, 246, 0.2);
}

.fw-bo-badge-douteuse {
  background: rgba(245, 158, 11, 0.1);
  color: #fbbf24;
  border-color: rgba(245, 158, 11, 0.2);
}

.fw-bo-badge-reversed {
  background: rgba(139, 92, 246, 0.1);
  color: #a78bfa;
  border-color: rgba(139, 92, 246, 0.2);
}

.fw-bo-badge-processing {
  background: rgba(59, 130, 246, 0.1);
  color: #93c5fd;
  border-color: rgba(59, 130, 246, 0.2);
}

.fw-bo-badge-rejected {
  background: var(--fw-bo-danger-bg);
  color: var(--fw-bo-danger-light);
  border-color: var(--fw-bo-danger-border);
}


/* ══════════════════════════════════════════════════════
   TRANSACTION TABLE ENRICHMENTS
   Balance flow, reversal indicators, expanded rows
   ══════════════════════════════════════════════════════ */

/* Expand/Collapse Icon */
.fw-bo-expand-icon {
  transition: transform var(--fw-bo-dur) var(--fw-bo-ease);
  color: var(--fw-bo-text-dim);
}

.fw-bo-expand-icon--open {
  transform: rotate(90deg);
  color: var(--fw-bo-orange);
}

/* Operation Row Variants */
.fw-bo-tr--operation {
  cursor: pointer;
}

.fw-bo-tr--expanded {
  background: var(--fw-bo-glass-bg-hover);
}

/* Child Row Styles */
.fw-bo-tr--child {
  background: rgba(0, 0, 0, 0.15);
  border-left: 3px solid var(--fw-bo-glass-border);
}

.fw-bo-tr--child-fee {
  border-left-color: var(--fw-bo-amber);
}

.fw-bo-tr--child .fw-bo-td {
  padding-top: 12px;
  padding-bottom: 12px;
  font-size: 13px;
}

/* Phone Number */
.fw-bo-phone {
  font-family: var(--fw-bo-font-mono);
  font-size: 13px;
  letter-spacing: 0.02em;
}

/* Arrow Icon */
.fw-bo-arrow-icon {
  color: var(--fw-bo-text-ghost);
  text-align: center;
}

/* Fee Label */
.fw-bo-fee-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--fw-bo-amber);
  font-size: 12px;
  font-weight: 500;
}

/* Fees Amount */
.fw-bo-fees-amount {
  font-family: var(--fw-bo-font-mono);
  font-size: 13px;
  color: var(--fw-bo-text-secondary);
}

/* Fee Applied Side Badge */
.fw-bo-fee-applied {
  display: inline-block;
  font-size: 10px;
  padding: 2px 6px;
  border-radius: var(--fw-bo-radius-full);
  background: var(--fw-bo-overlay-light);
  border: 1px solid var(--fw-bo-glass-border);
  color: var(--fw-bo-text-muted);
  margin-left: 4px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}

/* Child Client Name */
.fw-bo-child-client {
  color: var(--fw-bo-text-muted);
  font-size: 12px;
  margin-left: 8px;
}

/* Child Meta Info */
.fw-bo-child-meta {
  font-size: 11px;
  color: var(--fw-bo-text-ghost);
  margin-top: 2px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

/* Douteuse Warning Indicator */
.fw-bo-douteuse-indicator {
  display: inline-flex;
  align-items: center;
  margin-left: 4px;
  color: var(--fw-bo-warning);
  vertical-align: middle;
}

/* Balance Flow (Before → After) */
.fw-bo-balance-flow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
}

.fw-bo-balance-flow__before {
  color: var(--fw-bo-text-muted);
}

.fw-bo-balance-flow__arrow {
  color: var(--fw-bo-text-ghost);
  font-size: 10px;
}

.fw-bo-balance-flow__after {
  color: var(--fw-bo-text-primary);
  font-weight: 600;
}

.fw-bo-balance-flow__delta {
  font-size: 11px;
  font-weight: 600;
  padding: 1px 5px;
  border-radius: var(--fw-bo-radius-full);
}

.fw-bo-balance-flow__delta--positive {
  color: var(--fw-bo-success);
  background: var(--fw-bo-success-bg);
}

.fw-bo-balance-flow__delta--negative {
  color: var(--fw-bo-danger);
  background: var(--fw-bo-danger-bg);
}

/* Reversed Transaction */
.fw-bo-reversed {
  text-decoration: line-through;
  opacity: 0.6;
}

/* Kept Fee Badge */
.fw-bo-kept-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 6px;
  border-radius: var(--fw-bo-radius-full);
  background: rgba(251, 191, 36, 0.12);
  border: 1px solid rgba(251, 191, 36, 0.25);
  color: #fbbf24;
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

/* Approval Speed */
.fw-bo-approval-speed {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--fw-bo-font-mono);
  font-size: 11px;
  color: var(--fw-bo-text-muted);
}


/* ══════════════════════════════════════════════════════
   PARTICIPANT CARD
   Source/Destination display with balance deltas
   ══════════════════════════════════════════════════════ */

.fw-bo-participant {
  padding: var(--fw-bo-space-lg);
  border-radius: var(--fw-bo-radius-lg);
  background: var(--fw-bo-glass-bg-dark);
  border: 1px solid var(--fw-bo-glass-border);
}

.fw-bo-participant__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--fw-bo-space-md);
}

.fw-bo-participant__label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--fw-bo-accent-text);
  font-weight: 700;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-participant__identity {
  display: flex;
  align-items: center;
  gap: 12px;
}

.fw-bo-participant__avatar {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 16px;
  color: white;
  flex-shrink: 0;
  font-family: var(--fw-bo-font-sans);
}

.fw-bo-participant__avatar--source {
  background: linear-gradient(135deg, var(--fw-bo-danger), #dc2626);
}

.fw-bo-participant__avatar--dest {
  background: linear-gradient(135deg, var(--fw-bo-success), #059669);
}

.fw-bo-participant__phone {
  font-family: var(--fw-bo-font-mono);
  font-size: 18px;
  font-weight: 600;
  color: var(--fw-bo-text-primary);
  letter-spacing: 0.03em;
}

.fw-bo-participant__name {
  font-size: 14px;
  color: var(--fw-bo-text-secondary);
  margin-top: 2px;
}

.fw-bo-participant__contract {
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
  color: var(--fw-bo-text-muted);
  margin-top: 4px;
}

.fw-bo-participant__ids {
  display: flex;
  gap: var(--fw-bo-space-lg);
  margin-top: var(--fw-bo-space-sm);
}

.fw-bo-participant__id-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fw-bo-participant__id-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fw-bo-text-dim);
}

.fw-bo-participant__id-value {
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
  color: var(--fw-bo-orange);
  font-weight: 500;
}

.fw-bo-participant__balance {
  display: flex;
  align-items: center;
  gap: var(--fw-bo-space-md);
  margin-top: var(--fw-bo-space-md);
  padding-top: var(--fw-bo-space-md);
  border-top: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-participant__balance-item {
  flex: 1;
}

.fw-bo-participant__balance-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fw-bo-text-dim);
  margin-bottom: 4px;
}

.fw-bo-participant__balance-value {
  font-family: var(--fw-bo-font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--fw-bo-text-primary);
}

.fw-bo-participant__balance-arrow {
  color: var(--fw-bo-text-ghost);
  font-size: 18px;
  flex-shrink: 0;
}

.fw-bo-participant__balance-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-family: var(--fw-bo-font-mono);
  font-size: 13px;
  font-weight: 600;
  padding: 4px 8px;
  border-radius: var(--fw-bo-radius-sm);
}

.fw-bo-participant__balance-delta--up {
  color: var(--fw-bo-success);
  background: var(--fw-bo-success-bg);
}

.fw-bo-participant__balance-delta--down {
  color: var(--fw-bo-danger);
  background: var(--fw-bo-danger-bg);
}

.fw-bo-participant__client-name {
  font-size: 16px;
  font-weight: 600;
  color: var(--fw-bo-text-primary);
}

.fw-bo-participant__balance-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.fw-bo-participant__balance-curr {
  font-size: 12px;
  color: var(--fw-bo-text-muted);
  font-weight: 400;
}

.fw-bo-participant__balance-delta-inline {
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
  font-weight: 600;
  margin-top: 2px;
}


/* ══════════════════════════════════════════════════════
   FINANCIAL SUMMARY CARD
   ══════════════════════════════════════════════════════ */

.fw-bo-financial {
  padding: var(--fw-bo-space-lg);
}

.fw-bo-financial__amount {
  font-family: var(--fw-bo-font-mono);
  font-size: 28px;
  font-weight: 700;
  color: var(--fw-bo-text-primary);
}

.fw-bo-financial__currency {
  font-size: 14px;
  color: var(--fw-bo-text-muted);
  margin-left: 4px;
  font-weight: 400;
}

.fw-bo-financial__row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--fw-bo-space-sm) 0;
  border-bottom: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-financial__row:last-child {
  border-bottom: none;
}

.fw-bo-financial__label {
  font-size: 13px;
  color: var(--fw-bo-text-muted);
}

.fw-bo-financial__value {
  font-family: var(--fw-bo-font-mono);
  font-size: 14px;
  color: var(--fw-bo-text-primary);
  font-weight: 500;
}

/* Principal amount section */
.fw-bo-financial__principal {
  margin-bottom: var(--fw-bo-space-lg);
  padding-bottom: var(--fw-bo-space-md);
  border-bottom: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-financial__principal .fw-bo-detail-label {
  margin-bottom: 4px;
}

/* Total row styling */
.fw-bo-financial__row--total {
  margin-top: var(--fw-bo-space-sm);
  padding-top: var(--fw-bo-space-sm);
  border-top: 1px solid var(--fw-bo-glass-border-light);
}

/* Reversal stat boxes */
.fw-bo-financial__stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--fw-bo-space-sm);
  margin-top: var(--fw-bo-space-lg);
  padding-top: var(--fw-bo-space-md);
  border-top: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-financial__stat-box {
  text-align: center;
  padding: var(--fw-bo-space-md) var(--fw-bo-space-sm);
  border-radius: var(--fw-bo-radius-md);
  background: var(--fw-bo-overlay-light);
}

.fw-bo-financial__stat-value {
  font-family: var(--fw-bo-font-mono);
  font-size: 16px;
  font-weight: 700;
  color: var(--fw-bo-text-primary);
  margin-bottom: 4px;
}

.fw-bo-financial__stat-value--danger {
  color: var(--fw-bo-danger);
}

.fw-bo-financial__stat-value--warning {
  color: var(--fw-bo-warning);
}

.fw-bo-financial__stat-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--fw-bo-text-dim);
}

/* Bold detail values */
.fw-bo-detail-value--bold {
  font-weight: 600;
}


/* ══════════════════════════════════════════════════════
   TIMELINE (vertical dots + lines)
   ══════════════════════════════════════════════════════ */

.fw-bo-timeline {
  padding: 0 var(--fw-bo-space-xl) var(--fw-bo-space-md);
}

.fw-bo-timeline__item {
  position: relative;
  padding-left: 28px;
  padding-bottom: var(--fw-bo-space-lg);
}

.fw-bo-timeline__item--last {
  padding-bottom: 0;
}

.fw-bo-timeline__dot {
  position: absolute;
  left: 0;
  top: 4px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
}

.fw-bo-timeline__dot--orange {
  background: var(--fw-bo-orange);
  box-shadow: 0 0 8px rgba(249, 115, 22, 0.4);
}

.fw-bo-timeline__line {
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: 0;
  width: 2px;
  background: var(--fw-bo-glass-border-light);
}

.fw-bo-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.fw-bo-timeline__label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--fw-bo-text-dim);
}

.fw-bo-timeline__date {
  font-family: var(--fw-bo-font-mono);
  font-size: 15px;
  font-weight: 600;
  color: var(--fw-bo-text-primary);
}

.fw-bo-timeline__desc {
  font-size: 12px;
  color: var(--fw-bo-text-muted);
  font-style: italic;
}

.fw-bo-timeline__speed {
  padding: var(--fw-bo-space-md) var(--fw-bo-space-xl) var(--fw-bo-space-lg);
  border-top: 1px solid var(--fw-bo-glass-border-light);
}

.fw-bo-timeline__speed-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--fw-bo-space-sm);
}

.fw-bo-timeline__speed-label {
  font-size: 12px;
  color: var(--fw-bo-text-muted);
}

.fw-bo-timeline__speed-value {
  font-family: var(--fw-bo-font-mono);
  font-size: 13px;
  font-weight: 600;
}

.fw-bo-timeline__speed-scale {
  font-size: 11px;
  color: var(--fw-bo-text-ghost);
  margin-top: 6px;
}

/* Fee breakdown line items */
.fw-bo-financial__breakdown {
  margin-top: var(--fw-bo-space-sm);
  padding-top: var(--fw-bo-space-sm);
  border-top: 1px dashed var(--fw-bo-glass-border-light);
}

.fw-bo-financial__breakdown-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 3px 0 3px var(--fw-bo-space-md);
  font-size: 12px;
}

.fw-bo-financial__breakdown-label {
  color: var(--fw-bo-text-dim);
  display: flex;
  align-items: center;
  gap: 6px;
}

.fw-bo-financial__breakdown-label::before {
  content: '';
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--fw-bo-text-ghost);
}

.fw-bo-financial__breakdown-value {
  font-family: var(--fw-bo-font-mono);
  color: var(--fw-bo-text-muted);
  font-weight: 500;
}

/* Operation ID accent style */
.fw-bo-op-id {
  font-family: var(--fw-bo-font-mono);
  font-size: 20px;
  font-weight: 700;
  color: var(--fw-bo-orange);
  letter-spacing: 0.03em;
}

/* Composed status badge (code + label) */
.fw-bo-status-composed {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.fw-bo-status-composed__code {
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: var(--fw-bo-radius-sm);
  background: var(--fw-bo-glass-bg);
  border: 1px solid var(--fw-bo-glass-border-light);
  color: var(--fw-bo-text-primary);
}

.fw-bo-status-composed__label {
  font-size: 13px;
  font-weight: 500;
  color: var(--fw-bo-text-secondary);
}

/* Bottom cards side-by-side */
.fw-bo-bottom-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--fw-bo-space-lg);
  margin-top: var(--fw-bo-space-lg);
}

@media (max-width: 1024px) {
  .fw-bo-bottom-grid {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════
   OPERATION DETAIL — RESPONSIVE BREAKPOINTS
   ══════════════════════════════════════════════════════ */

/* Tablet (≤ 768px) — stack participant balance, shrink fonts */
@media (max-width: 768px) {
  .fw-bo-participant__balance {
    flex-wrap: wrap;
    gap: var(--fw-bo-space-sm);
  }

  .fw-bo-participant__balance-item {
    flex: 1 1 40%;
    min-width: 120px;
  }

  .fw-bo-participant__balance-arrow {
    display: none;
  }

  .fw-bo-participant__balance-delta {
    flex-basis: 100%;
    justify-content: center;
  }

  .fw-bo-participant__phone {
    font-size: 16px;
  }

  .fw-bo-participant__balance-value {
    font-size: 14px;
  }

  .fw-bo-op-id {
    font-size: 16px;
  }

  .fw-bo-financial__amount {
    font-size: 22px;
  }

  .fw-bo-participant__ids {
    flex-wrap: wrap;
    gap: var(--fw-bo-space-sm);
  }

  .fw-bo-status-composed {
    flex-wrap: wrap;
  }

  .fw-bo-financial__stats {
    grid-template-columns: repeat(2, 1fr);
  }

  .fw-bo-timeline {
    padding: 0 var(--fw-bo-space-md) var(--fw-bo-space-md);
  }

  .fw-bo-timeline__date {
    font-size: 13px;
  }

  .fw-bo-timeline__speed {
    padding: var(--fw-bo-space-md);
  }

  .fw-bo-participant__balance-icon svg {
    width: 16px;
    height: 16px;
  }
}

/* Mobile (≤ 480px) — compact everything */
@media (max-width: 480px) {
  .fw-bo-participant {
    padding: var(--fw-bo-space-md);
  }

  .fw-bo-participant__identity {
    gap: 8px;
  }

  .fw-bo-participant__avatar {
    width: 32px;
    height: 32px;
    font-size: 13px;
  }

  .fw-bo-participant__phone {
    font-size: 14px;
  }

  .fw-bo-participant__name {
    font-size: 12px;
  }

  .fw-bo-participant__balance-value {
    font-size: 13px;
  }

  .fw-bo-participant__balance-label {
    font-size: 9px;
  }

  .fw-bo-op-id {
    font-size: 14px;
  }

  .fw-bo-financial__amount {
    font-size: 18px;
  }

  .fw-bo-financial__breakdown-row {
    font-size: 11px;
  }

  .fw-bo-speed-gauge__label {
    flex-direction: column;
    align-items: flex-start;
    gap: 2px;
  }

  .fw-bo-detail-grid {
    grid-template-columns: 1fr !important;
  }

  .fw-bo-lifecycle--lg {
    font-size: 9px;
    padding: 3px 8px;
  }

  .fw-bo-breadcrumb {
    flex-wrap: wrap;
    gap: 4px;
  }

  .fw-bo-financial__stats {
    grid-template-columns: repeat(2, 1fr);
    gap: 6px;
  }

  .fw-bo-financial__stat-box {
    padding: var(--fw-bo-space-sm);
  }

  .fw-bo-financial__stat-value {
    font-size: 14px;
  }

  .fw-bo-financial__stat-label {
    font-size: 9px;
  }

  .fw-bo-timeline__item {
    padding-left: 22px;
    padding-bottom: var(--fw-bo-space-md);
  }

  .fw-bo-timeline__dot {
    width: 10px;
    height: 10px;
  }

  .fw-bo-timeline__line {
    left: 4px;
    top: 14px;
  }

  .fw-bo-timeline__date {
    font-size: 12px;
  }

  .fw-bo-timeline__speed-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }

  .fw-bo-participant__client-name {
    font-size: 14px;
  }
}


/* ══════════════════════════════════════════════════════
   APPROVAL SPEED GAUGE
   ══════════════════════════════════════════════════════ */

.fw-bo-speed-gauge {
  display: flex;
  flex-direction: column;
  gap: var(--fw-bo-space-sm);
  padding: var(--fw-bo-space-md) 0;
}

.fw-bo-speed-gauge__bar {
  height: 6px;
  border-radius: 3px;
  background: var(--fw-bo-overlay-light);
  position: relative;
  overflow: hidden;
}

.fw-bo-speed-gauge__fill {
  height: 100%;
  border-radius: 3px;
  transition: width 0.6s var(--fw-bo-ease);
}

.fw-bo-speed-gauge__label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 12px;
}

.fw-bo-speed-gauge__time {
  font-family: var(--fw-bo-font-mono);
  font-weight: 600;
}

.fw-bo-speed-gauge__tier {
  font-size: 11px;
  color: var(--fw-bo-text-muted);
}

/* Speed tier colors */
.fw-bo-speed--instant { color: var(--fw-bo-success); }
.fw-bo-speed--fast { color: var(--fw-bo-success-light); }
.fw-bo-speed--normal { color: var(--fw-bo-info); }
.fw-bo-speed--moderate { color: var(--fw-bo-info-light); }
.fw-bo-speed--slow { color: var(--fw-bo-warning); }
.fw-bo-speed--very-slow { color: var(--fw-bo-danger); }

.fw-bo-speed-fill--instant { background: var(--fw-bo-success); width: 8%; }
.fw-bo-speed-fill--fast { background: var(--fw-bo-success-light); width: 20%; }
.fw-bo-speed-fill--normal { background: var(--fw-bo-info); width: 40%; }
.fw-bo-speed-fill--moderate { background: var(--fw-bo-info-light); width: 60%; }
.fw-bo-speed-fill--slow { background: var(--fw-bo-warning); width: 80%; }
.fw-bo-speed-fill--very-slow { background: var(--fw-bo-danger); width: 100%; }


/* ══════════════════════════════════════════════════════
   REVERSAL INDICATORS
   ══════════════════════════════════════════════════════ */

.fw-bo-reversal-row {
  display: flex;
  gap: var(--fw-bo-space-sm);
  flex-wrap: wrap;
}

.fw-bo-reversal-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 8px;
  border-radius: var(--fw-bo-radius-full);
  font-size: 11px;
  font-weight: 600;
}

.fw-bo-reversal-tag--reversed {
  background: var(--fw-bo-orange-subtle);
  color: #fb923c;
  border: 1px solid var(--fw-bo-orange-hover);
}

.fw-bo-reversal-tag--partial {
  background: rgba(251, 191, 36, 0.1);
  color: #fbbf24;
  border: 1px solid rgba(251, 191, 36, 0.2);
}

.fw-bo-reversal-tag--count {
  background: var(--fw-bo-overlay-light);
  color: var(--fw-bo-text-muted);
  border: 1px solid var(--fw-bo-glass-border);
}


/* ══════════════════════════════════════════════════════
   TABLE SCROLL (horizontal overflow)
   ══════════════════════════════════════════════════════ */

.fw-bo-table-scroll {
  overflow-x: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fw-bo-glass-border) transparent;
}

.fw-bo-table-scroll::-webkit-scrollbar {
  height: 6px;
}

.fw-bo-table-scroll::-webkit-scrollbar-track {
  background: transparent;
}

.fw-bo-table-scroll::-webkit-scrollbar-thumb {
  background: var(--fw-bo-glass-border);
  border-radius: 3px;
}


/* ══════════════════════════════════════════════════════
   RADIO BUTTONS (inline)
   ══════════════════════════════════════════════════════ */

.fw-bo-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12px;
  color: var(--fw-bo-text-secondary);
  cursor: pointer;
}

.fw-bo-radio-inline {
  white-space: nowrap;
}

.fw-bo-radio-label input[type="radio"] {
  accent-color: var(--fw-bo-orange);
}


/* ══════════════════════════════════════════════════════
   ERROR MESSAGE
   ══════════════════════════════════════════════════════ */

.fw-bo-error-message {
  font-size: 12px;
  color: var(--fw-bo-danger-light);
  margin-top: 4px;
}


/* ══════════════════════════════════════════════════════
   CODE BLOCK (UserData JSON display)
   ══════════════════════════════════════════════════════ */

.fw-bo-code-block {
  background: var(--fw-bo-overlay-darker);
  border: 1px solid var(--fw-bo-glass-border);
  border-radius: var(--fw-bo-radius-md);
  padding: var(--fw-bo-space-md);
  font-family: var(--fw-bo-font-mono);
  font-size: 12px;
  color: var(--fw-bo-text-secondary);
  white-space: pre-wrap;
  word-break: break-all;
  max-height: 300px;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--fw-bo-glass-border) transparent;
}


/* ══════════════════════════════════════════════════════
   BUTTON SPINNER (inline)
   ══════════════════════════════════════════════════════ */

.btn-spinner {
  width: 16px;
  height: 16px;
  border: 2px solid rgba(255, 255, 255, 0.3);
  border-top-color: white;
  border-radius: 50%;
  animation: fw-bo-spin 0.6s linear infinite;
  display: inline-block;
}

/* ══════════════════════════════════════════════════════
   Correction Type Colors & Badges
   ══════════════════════════════════════════════════════ */

/* Badge Type Variants */
.fw-bo-badge--refund  { background: var(--color-type-refund);  border-color: var(--color-type-refund);  color: white; }
.fw-bo-badge--confirm { background: var(--color-type-confirm); border-color: var(--color-type-confirm); color: white; }
.fw-bo-badge--merge   { background: var(--color-type-merge);   border-color: var(--color-type-merge);   color: white; }
.fw-bo-badge--bulk    { background: var(--color-type-bulk);    border-color: var(--color-type-bulk);    color: white; }
.fw-bo-badge--force   { background: var(--color-type-force);   border-color: var(--color-type-force);   color: #1a1a2e; }
.fw-bo-badge--extourne { background: var(--color-type-extourne); border-color: var(--color-type-extourne); color: white; }

/* Border-Left Accents */
.fw-bo-border-left--refund    { border-left: 3px solid var(--color-type-refund); }
.fw-bo-border-left--confirm   { border-left: 3px solid var(--color-type-confirm); }
.fw-bo-border-left--merge     { border-left: 3px solid var(--color-type-merge); }
.fw-bo-border-left--bulk      { border-left: 3px solid var(--color-type-bulk); }
.fw-bo-border-left--extourne  { border-left: 4px solid var(--color-type-extourne); }
.fw-bo-border-left--success   { border-left: 3px solid var(--color-success); }
.fw-bo-border-left--error     { border-left: 3px solid var(--color-error); }
.fw-bo-border-left--warning   { border-left: 3px solid var(--color-warning); }

/* Limit Type Classes (replaces GetLimitColor()) */
.fw-bo-limit-1t { border-left: 3px solid var(--color-text-tertiary, #a8a29e); }
.fw-bo-limit-1d { border-left: 3px solid var(--color-info); }
.fw-bo-limit-1w { border-left: 3px solid var(--color-success); }
.fw-bo-limit-1m { border-left: 3px solid var(--color-type-refund); }

/* Table Responsive */
.fw-bo-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }

/* Focus Visible (all buttons) */
.fw-bo-btn-primary:focus-visible,
.fw-bo-btn-secondary:focus-visible,
.fw-bo-btn-danger:focus-visible,
.fw-bo-btn-cancel:focus-visible,
.fw-bo-btn-action:focus-visible,
.fw-bo-btn-save:focus-visible,
.fw-bo-btn-outline:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

/* Global Typography */
h1 { font-size: var(--text-3xl); font-weight: 700; line-height: 1.2; margin-bottom: var(--sp-4); color: var(--fw-bo-text-primary); }
h2 { font-size: var(--text-2xl); font-weight: 700; line-height: var(--fw-bo-leading-tight); margin-bottom: var(--sp-3); color: var(--fw-bo-text-primary); }
h3 { font-size: var(--text-xl);  font-weight: 600; line-height: 1.3;  margin-bottom: var(--sp-3); color: var(--fw-bo-text-primary); }
h4 { font-size: var(--text-lg);  font-weight: 600; line-height: 1.35; margin-bottom: var(--sp-2); color: var(--fw-bo-text-primary); }
h5 { font-size: var(--text-base);font-weight: 600; line-height: var(--fw-bo-leading-snug);  margin-bottom: var(--sp-2); color: var(--fw-bo-text-primary); }
h6 { font-size: var(--text-sm);  font-weight: 600; line-height: var(--fw-bo-leading-snug);  margin-bottom: var(--sp-2); color: var(--fw-bo-text-secondary); }

.extourne-banner {
    border-radius: var(--fw-bo-radius-xl);
    padding: var(--fw-bo-space-md) var(--fw-bo-space-lg);
    margin-bottom: var(--fw-bo-space-lg);
    display: flex;
    align-items: center;
    gap: var(--fw-bo-space-md);
    flex-wrap: wrap;
}

.extourne-banner__link {
    margin-left: auto;
    font-size: 0.85rem;
    color: var(--color-type-extourne);
    font-weight: 600;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.extourne-banner__link:hover {
    text-decoration: underline;
}

.extourne-banner__description {
    font-size: 0.85rem;
    color: var(--fw-bo-text-secondary);
}

.force-refund-panel {
    border-radius: var(--fw-bo-radius-xl);
    margin-top: var(--fw-bo-space-lg);
}

.force-refund-panel__warning {
    font-size: 0.85rem;
    margin-bottom: var(--fw-bo-space-md);
}

.force-refund-panel__scope {
    display: flex;
    gap: var(--fw-bo-space-lg);
    margin-top: var(--fw-bo-space-xs);
}

.force-refund-panel__actions {
    display: flex;
    gap: var(--fw-bo-space-sm);
    margin-top: var(--fw-bo-space-md);
}

.force-refund-panel__counter {
    font-size: 0.75rem;
}

@media (max-width: 768px) {
    .force-refund-panel__scope {
        flex-direction: column;
        gap: var(--fw-bo-space-sm);
    }

    .extourne-banner {
        flex-direction: column;
        align-items: flex-start;
    }

    .extourne-banner__link {
        margin-left: 0;
    }
}

/* ══════════════════════════════════════════════════════════
   Config Pack Detail — RenderTreeBuilder-generated elements
   (must be global; scoped CSS doesn't apply to these)
   ══════════════════════════════════════════════════════════ */

/* ── No-item placeholder ─────────────────────────────────── */
.cpd-no-item {
    font-size: var(--fw-bo-text-xs);
    color: var(--fw-bo-text-ghost);
    font-style: italic;
}

/* ── Fee Chips ───────────────────────────────────────────── */
.cpd-fee-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    margin-bottom: var(--fw-bo-space-sm);
}

.cpd-fee-chip {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    font-size: var(--fw-bo-text-xs);
}

.cpd-fc-type {
    font-family: var(--fw-bo-font-mono);
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
}

.cpd-fc-val {
    font-family: var(--fw-bo-font-mono);
    font-size: var(--fw-bo-text-xs);
    font-weight: 600;
    color: var(--fw-bo-text-primary);
}

.cpd-fee-chip--com { background: var(--fw-bo-info-bg); border-color: var(--fw-bo-info-border); }
.cpd-fee-chip--com .cpd-fc-type { background: rgba(59,130,246,.15); color: var(--fw-bo-info); }

.cpd-fee-chip--tva { background: var(--fw-bo-success-bg); border-color: var(--fw-bo-success-border); }
.cpd-fee-chip--tva .cpd-fc-type { background: rgba(16,185,129,.15); color: var(--fw-bo-success); }

.cpd-fee-chip--ddt { background: rgba(120,113,108,.08); border-color: rgba(120,113,108,.2); }
.cpd-fee-chip--ddt .cpd-fc-type { background: rgba(120,113,108,.15); color: var(--fw-bo-text-dim); }

/* ── Slab Table ──────────────────────────────────────────── */
.cpd-slab-table {
    width: 100%;
    border-collapse: collapse;
    margin-bottom: var(--fw-bo-space-xs);
    font-size: var(--fw-bo-text-xs);
}

.cpd-slab-table th {
    color: var(--fw-bo-text-dim);
    font-weight: 600;
    text-align: left;
    padding: 2px 6px 4px;
    font-size: 8.5px;
    text-transform: uppercase;
    letter-spacing: 0.07em;
}

.cpd-slab-table td {
    padding: 3px 6px;
    border-top: 1px solid var(--fw-bo-glass-border-light);
}

.cpd-slab-table tr:first-child td { border-top: none; }

.cpd-slab-range {
    color: var(--fw-bo-text-secondary);
    font-family: var(--fw-bo-font-mono);
    font-size: 9.5px;
}

.cpd-slab-fee {
    color: var(--fw-bo-warning);
    font-family: var(--fw-bo-font-mono);
    font-size: 9.5px;
    font-weight: 600;
}

.cpd-slab-badge {
    font-size: 8px;
    font-weight: 700;
    padding: 1px 5px;
    border-radius: 3px;
    background: var(--fw-bo-warning-bg);
    color: var(--fw-bo-warning);
    border: 1px solid var(--fw-bo-warning-border);
    font-family: var(--fw-bo-font-mono);
}

/* ── TX Pills ────────────────────────────────────────────── */
.cpd-tx-row {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--fw-bo-space-xs);
}

.cpd-tx-pill {
    font-size: 9.5px;
    padding: 2px 8px;
    border-radius: var(--fw-bo-radius-full);
    background: rgba(139,92,246,.10);
    color: #8B5CF6;
    border: 1px solid rgba(139,92,246,.25);
    font-family: var(--fw-bo-font-mono);
    font-weight: 600;
}

/* ── Limit Cards ─────────────────────────────────────────── */
.cpd-lim-cards {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.cpd-lim-card {
    display: flex;
    align-items: flex-start;
    gap: var(--fw-bo-space-sm);
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--fw-bo-overlay-lightest);
    border: 1px solid var(--fw-bo-glass-border-light);
    border-left-width: 3px;
}

.cpd-lim--1t { border-left-color: var(--fw-bo-info); }
.cpd-lim--1d { border-left-color: var(--fw-bo-success); }
.cpd-lim--1w { border-left-color: var(--fw-bo-warning); }
.cpd-lim--1m { border-left-color: #8B5CF6; }

.cpd-lim-period {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    min-width: 90px;
}

.cpd-lim-pname {
    font-size: var(--fw-bo-text-xs);
    font-weight: 700;
    color: var(--fw-bo-text-primary);
}

.cpd-lim-pcode {
    font-size: 8px;
    color: var(--fw-bo-text-dim);
    font-family: var(--fw-bo-font-mono);
    margin-top: 1px;
}

.cpd-lim-right { flex: 1; min-width: 0; }

.cpd-lim-range {
    font-family: var(--fw-bo-font-mono);
    font-size: var(--fw-bo-text-xs);
    color: var(--fw-bo-text-secondary);
    display: block;
}

.cpd-lim-range--unlim {
    color: var(--fw-bo-text-dim);
    font-style: italic;
}

.cpd-lim-count {
    display: inline-block;
    font-size: 8.5px;
    font-weight: 700;
    padding: 1px 6px;
    border-radius: var(--fw-bo-radius-full);
    margin-top: 3px;
}

.cpd-lim--1t .cpd-lim-count { background: var(--fw-bo-info-bg);    color: var(--fw-bo-info); }
.cpd-lim--1d .cpd-lim-count { background: var(--fw-bo-success-bg); color: var(--fw-bo-success); }
.cpd-lim--1w .cpd-lim-count { background: var(--fw-bo-warning-bg); color: var(--fw-bo-warning); }
.cpd-lim--1m .cpd-lim-count { background: rgba(139,92,246,.12);    color: #8B5CF6; }

/* ── Click-to-Copy ────────────────────────────────────────
   Add data-copy="value" to any element.
   Shows clipboard icon via ::after, swaps to checkmark on copy.
   ─────────────────────────────────────────────────────── */

[data-copy] {
    position: relative;
    cursor: pointer;
    padding-right: 22px;
    transition: color var(--fw-bo-dur-fast) var(--fw-bo-ease);
}

[data-copy]::after {
    content: '';
    position: absolute;
    right: 2px;
    top: 50%;
    transform: translateY(-50%);
    width: 13px;
    height: 13px;
    opacity: 0.4;
    background-color: var(--fw-bo-text-muted);
    transition: opacity var(--fw-bo-dur-fast) var(--fw-bo-ease),
                background-color var(--fw-bo-dur-fast) var(--fw-bo-ease);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
    mask-repeat: no-repeat;
    mask-size: contain;
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='9' y='9' width='13' height='13' rx='2' ry='2'%3E%3C/rect%3E%3Cpath d='M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1'%3E%3C/path%3E%3C/svg%3E");
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: contain;
}

[data-copy]:hover::after {
    opacity: 0.85;
}

[data-copy].fw-copied {
    color: var(--fw-bo-success);
}

[data-copy].fw-copied::after {
    opacity: 1;
    background-color: var(--fw-bo-success);
    mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
    -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'%3E%3C/polyline%3E%3C/svg%3E");
}