/* ═══════════════════════════════════════════════════════════════════════════
   BeautyPro UI Components v2.0
   Unified component library — uses tokens from beautypro-tokens.css
   Naming: bp-{component}  /  bp-{component}--{variant}
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================
   0. Base / Reset Layer
   Minimal global resets that DON'T override Bootstrap aggressively.
   ============================================ */
html {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-sans);
    color: var(--color-text-primary);
    background: var(--color-bg-body);
}

/* ============================================
   1. Cards — bp-card
   ============================================ */
.bp-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    overflow: hidden;
}

.bp-card:hover {
    box-shadow: var(--card-shadow-hover);
}

.bp-card-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--card-header-border);
    color: var(--card-header-color);
    padding: var(--card-padding);
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

.bp-card-header i,
.bp-card-header .bi {
    color: var(--color-accent);
}

.bp-card-body {
    padding: var(--card-padding);
}

.bp-card-footer {
    background: var(--color-bg-secondary);
    border-top: 1px solid var(--color-border-light);
    padding: var(--card-padding-sm) var(--card-padding);
}

/* ── Card: Accent header (solid teal) ── */
.bp-card-header--accent {
    background: var(--gradient-accent);
    color: var(--white);
    border-bottom: none;
}

.bp-card-header--accent i,
.bp-card-header--accent .bi {
    color: var(--white);
}

/* ── Card: Lift on hover ── */
.bp-card--hover:hover {
    transform: translateY(-2px);
}

/* ── Card: Glass / Frosted ── */
.bp-card--glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ── Card: Flush (no padding) ── */
.bp-card--flush .bp-card-body {
    padding: 0;
}

/* ============================================
   2. Stat Cards — bp-stat
   ============================================ */
.bp-stat {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    padding: var(--card-padding);
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
    position: relative;
    overflow: hidden;
}

.bp-stat:hover {
    box-shadow: var(--card-shadow-hover);
    transform: translateY(-2px);
}

.bp-stat::before {
    content: '';
    position: absolute;
    top: 0;
    inset-inline-end: 0;
    width: 100px;
    height: 100px;
    background: var(--gradient-accent);
    opacity: 0.07;
    border-radius: 50%;
    transform: translate(30%, -30%);
    pointer-events: none;
}

.bp-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    background: var(--color-accent-subtle);
    color: var(--color-accent);
    margin-bottom: var(--space-3);
}

.bp-stat-icon--success { background: var(--color-success-subtle); color: var(--color-success); }
.bp-stat-icon--warning { background: var(--color-warning-subtle); color: var(--color-warning); }
.bp-stat-icon--danger  { background: var(--color-danger-subtle);  color: var(--color-danger); }
.bp-stat-icon--info    { background: var(--color-info-subtle);    color: var(--color-info); }

.bp-stat-value {
    font-size: var(--text-2xl);
    font-weight: var(--font-bold);
    color: var(--color-text-primary);
    line-height: var(--leading-tight);
    margin-bottom: var(--space-1);
}

.bp-stat-label {
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-medium);
}

.bp-stat-change {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    font-size: var(--text-xs);
    font-weight: var(--font-semibold);
    padding: var(--space-1) var(--space-2-5);
    border-radius: var(--radius-full);
    margin-top: var(--space-2);
}

.bp-stat-change--up   { background: var(--color-success-muted); color: var(--color-success-text); }
.bp-stat-change--down { background: var(--color-danger-muted);  color: var(--color-danger-text); }

/* ============================================
   3. Buttons — bp-btn
   ============================================ */
.bp-btn {
    font-family: var(--font-sans);
    font-weight: var(--btn-font-weight);
    font-size: var(--text-sm);
    border-radius: var(--btn-radius);
    padding: var(--btn-padding-y) var(--btn-padding-x);
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    text-decoration: none;
    transition: all var(--transition-base);
    line-height: var(--leading-normal);
    white-space: nowrap;
}

.bp-btn:hover {
    transform: translateY(-1px);
}

.bp-btn:active {
    transform: translateY(0);
}

.bp-btn:disabled,
.bp-btn.disabled {
    opacity: 0.55;
    pointer-events: none;
}

/* ── Primary (filled accent) ── */
.bp-btn--primary {
    background: var(--gradient-accent);
    color: var(--color-text-on-accent);
    border-color: transparent;
    box-shadow: var(--btn-shadow);
}

.bp-btn--primary:hover {
    background: var(--gradient-accent-bold);
    box-shadow: var(--btn-shadow-hover);
    color: var(--color-text-on-accent);
}

/* ── Secondary (neutral) ── */
.bp-btn--secondary {
    background: var(--color-bg-primary);
    color: var(--color-text-primary);
    border-color: var(--color-border-medium);
}

.bp-btn--secondary:hover {
    background: var(--color-bg-secondary);
    border-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

/* ── Success ── */
.bp-btn--success {
    background: var(--gradient-success);
    color: var(--white);
    border-color: transparent;
}

.bp-btn--success:hover {
    background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%);
    color: var(--white);
}

/* ── Warning ── */
.bp-btn--warning {
    background: var(--gradient-warning);
    color: var(--white);
    border-color: transparent;
}

.bp-btn--warning:hover {
    background: linear-gradient(135deg, var(--yellow-500) 0%, var(--yellow-600) 100%);
    color: var(--white);
}

/* ── Danger ── */
.bp-btn--danger {
    background: var(--gradient-danger);
    color: var(--white);
    border-color: transparent;
}

.bp-btn--danger:hover {
    background: linear-gradient(135deg, var(--red-500) 0%, var(--red-600) 100%);
    color: var(--white);
}

/* ── Info ── */
.bp-btn--info {
    background: var(--gradient-info);
    color: var(--white);
    border-color: transparent;
}

.bp-btn--info:hover {
    background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%);
    color: var(--white);
}

/* ── Ghost (text-only) ── */
.bp-btn--ghost {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: transparent;
}

.bp-btn--ghost:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
}

/* ── Outline variants ── */
.bp-btn--outline-primary {
    background: transparent;
    color: var(--color-accent);
    border-color: var(--color-accent);
}

.bp-btn--outline-primary:hover {
    background: var(--gradient-accent);
    color: var(--white);
    border-color: transparent;
}

.bp-btn--outline-danger {
    background: transparent;
    color: var(--color-danger);
    border-color: var(--color-danger);
}

.bp-btn--outline-danger:hover {
    background: var(--gradient-danger);
    color: var(--white);
    border-color: transparent;
}

.bp-btn--outline-success {
    background: transparent;
    color: var(--color-success);
    border-color: var(--color-success);
}

.bp-btn--outline-success:hover {
    background: var(--gradient-success);
    color: var(--white);
    border-color: transparent;
}

.bp-btn--outline-secondary {
    background: transparent;
    color: var(--color-text-secondary);
    border-color: var(--color-border-medium);
}

.bp-btn--outline-secondary:hover {
    background: var(--color-bg-secondary);
    color: var(--color-text-primary);
    border-color: var(--color-border-dark);
}

/* ── Sizes ── */
.bp-btn--sm {
    padding: var(--btn-padding-y-sm) var(--btn-padding-x-sm);
    font-size: var(--text-xs);
    border-radius: var(--radius-md);
}

.bp-btn--lg {
    padding: var(--btn-padding-y-lg) var(--btn-padding-x-lg);
    font-size: var(--text-base);
}

.bp-btn--xl {
    padding: 1.125rem 2.5rem;
    font-size: var(--text-lg);
}

/* ── Icon-only (circle) ── */
.bp-btn--icon {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    border-radius: var(--radius-full);
}

.bp-btn--icon.bp-btn--sm {
    width: 2rem;
    height: 2rem;
}

.bp-btn--icon.bp-btn--lg {
    width: 3rem;
    height: 3rem;
}

/* ── Pill shape ── */
.bp-btn--pill {
    border-radius: var(--btn-radius-pill);
}

/* ── Loading state ── */
.bp-btn.is-loading {
    position: relative;
    pointer-events: none;
    opacity: 0.75;
}

.bp-btn.is-loading .bp-btn-text {
    visibility: hidden;
}

.bp-btn.is-loading::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 18px;
    height: 18px;
    margin-top: -9px;
    margin-left: -9px;
    border: 2px solid currentColor;
    border-inline-end-color: transparent;
    border-radius: 50%;
    animation: bp-spin 0.6s linear infinite;
}

/* ============================================
   4. Badges — bp-badge
   ============================================ */
.bp-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-1);
    padding: var(--badge-padding-y) var(--badge-padding-x);
    border-radius: var(--badge-radius);
    font-size: var(--badge-font-size);
    font-weight: var(--badge-font-weight);
    line-height: 1;
    white-space: nowrap;
    vertical-align: middle;
}

.bp-badge--primary  { background: var(--color-accent-muted);  color: var(--brand-700); }
.bp-badge--success  { background: var(--color-success-muted); color: var(--color-success-text); }
.bp-badge--warning  { background: var(--color-warning-muted); color: var(--color-warning-text); }
.bp-badge--danger   { background: var(--color-danger-muted);  color: var(--color-danger-text); }
.bp-badge--info     { background: var(--color-info-muted);    color: var(--color-info-text); }
.bp-badge--neutral  { background: var(--color-bg-tertiary);   color: var(--color-text-secondary); }

/* Solid variants */
.bp-badge--solid-primary { background: var(--gradient-accent);  color: var(--white); }
.bp-badge--solid-success { background: var(--gradient-success); color: var(--white); }
.bp-badge--solid-warning { background: var(--gradient-warning); color: var(--dark-200); }
.bp-badge--solid-danger  { background: var(--gradient-danger);  color: var(--white); }
.bp-badge--solid-info    { background: var(--gradient-info);    color: var(--white); }

/* Pill badge */
.bp-badge--pill {
    border-radius: var(--radius-full);
    padding: var(--space-1) var(--space-3);
}

/* Count badge (small circle) */
.bp-badge--count {
    min-width: 1.375rem;
    height: 1.375rem;
    padding: 0 var(--space-1-5);
    border-radius: var(--radius-full);
    font-size: var(--text-xs);
    justify-content: center;
}

/* ============================================
   5. Tables — bp-table
   ============================================ */
.bp-table {
    width: 100%;
    background: var(--card-bg);
    border-radius: var(--table-radius);
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}

.bp-table thead {
    background: var(--table-header-bg);
}

.bp-table thead th {
    padding: var(--space-4) var(--space-5);
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--table-header-color);
    border-bottom: 2px solid var(--table-header-border);
    text-align: inherit;
    white-space: nowrap;
}

.bp-table tbody tr {
    transition: background var(--transition-fast);
    border-bottom: 1px solid var(--table-border);
}

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

.bp-table tbody tr:hover {
    background: var(--table-row-hover);
}

.bp-table tbody td {
    padding: var(--space-4) var(--space-5);
    vertical-align: middle;
    color: var(--color-text-primary);
    font-size: var(--text-sm);
}

/* Compact variant */
.bp-table--compact thead th,
.bp-table--compact tbody td {
    padding: var(--space-2-5) var(--space-3);
}

/* Striped */
.bp-table--striped tbody tr:nth-child(even) {
    background: var(--color-bg-secondary);
}

/* ============================================
   6. Forms — bp-input, bp-select, bp-label
   ============================================ */
.bp-label {
    display: block;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.bp-label--required::after {
    content: ' *';
    color: var(--color-danger);
}

.bp-input,
.bp-select,
.bp-textarea {
    width: 100%;
    background: var(--input-bg);
    border: 2px solid var(--input-border);
    border-radius: var(--input-radius);
    padding: var(--input-padding-y) var(--input-padding-x);
    font-family: var(--font-sans);
    font-size: var(--text-sm);
    color: var(--color-text-primary);
    transition: border-color var(--transition-base), box-shadow var(--transition-base);
}

.bp-input::placeholder,
.bp-textarea::placeholder {
    color: var(--input-placeholder);
}

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

.bp-input:disabled,
.bp-select:disabled,
.bp-textarea:disabled {
    background: var(--color-bg-secondary);
    opacity: 0.7;
    cursor: not-allowed;
}

/* Validation states */
.bp-input--error,
.bp-select--error {
    border-color: var(--color-danger);
}

.bp-input--error:focus,
.bp-select--error:focus {
    box-shadow: var(--color-focus-ring-danger);
}

.bp-input--success {
    border-color: var(--color-success);
}

/* Sizes */
.bp-input--sm { padding: var(--space-1-5) var(--space-3); font-size: var(--text-xs); }
.bp-input--lg { padding: var(--space-4) var(--space-5); font-size: var(--text-base); border-radius: var(--radius-lg); }

/* Input group */
.bp-input-group {
    display: flex;
    align-items: stretch;
}

.bp-input-group .bp-input {
    border-radius: 0;
}

.bp-input-group .bp-input:first-child { border-start-start-radius: var(--input-radius); border-end-start-radius: var(--input-radius); }
.bp-input-group .bp-input:last-child  { border-start-end-radius: var(--input-radius);   border-end-end-radius: var(--input-radius); }

.bp-input-addon {
    display: flex;
    align-items: center;
    padding: 0 var(--space-4);
    background: var(--color-bg-secondary);
    border: 2px solid var(--input-border);
    font-weight: var(--font-medium);
    color: var(--color-text-tertiary);
    font-size: var(--text-sm);
    white-space: nowrap;
}

.bp-input-addon:first-child { border-start-start-radius: var(--input-radius); border-end-start-radius: var(--input-radius); border-inline-end: none; }
.bp-input-addon:last-child  { border-start-end-radius: var(--input-radius);   border-end-end-radius: var(--input-radius);   border-inline-start: none; }

/* Checkbox / Switch */
.bp-switch {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    cursor: pointer;
}

.bp-switch input[type="checkbox"] {
    width: 2.5rem;
    height: 1.25rem;
    appearance: none;
    -webkit-appearance: none;
    background: var(--color-border-medium);
    border-radius: var(--radius-full);
    cursor: pointer;
    transition: background var(--transition-base);
    position: relative;
}

.bp-switch input[type="checkbox"]::after {
    content: '';
    position: absolute;
    top: 2px;
    inset-inline-start: 2px;
    width: 16px;
    height: 16px;
    background: var(--white);
    border-radius: 50%;
    transition: transform var(--transition-base);
    box-shadow: var(--shadow-xs);
}

.bp-switch input[type="checkbox"]:checked {
    background: var(--color-accent);
}

.bp-switch input[type="checkbox"]:checked::after {
    transform: translateX(1.25rem);
}

[dir="rtl"] .bp-switch input[type="checkbox"]:checked::after {
    transform: translateX(-1.25rem);
}

/* ============================================
   7. Alerts — bp-alert
   ============================================ */
.bp-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-3);
    border-radius: var(--alert-radius);
    padding: var(--alert-padding);
    border: none;
    border-inline-start: var(--alert-border-width) solid;
    font-size: var(--text-sm);
}

.bp-alert-icon {
    flex-shrink: 0;
    font-size: var(--text-lg);
    line-height: 1;
    margin-top: 2px;
}

.bp-alert-content {
    flex: 1;
    min-width: 0;
}

.bp-alert-title {
    font-weight: var(--font-semibold);
    margin-bottom: var(--space-1);
}

.bp-alert--success {
    background: var(--color-success-subtle);
    border-inline-start-color: var(--color-success);
    color: var(--color-success-text);
}

.bp-alert--warning {
    background: var(--color-warning-subtle);
    border-inline-start-color: var(--color-warning);
    color: var(--color-warning-text);
}

.bp-alert--danger {
    background: var(--color-danger-subtle);
    border-inline-start-color: var(--color-danger);
    color: var(--color-danger-text);
}

.bp-alert--info {
    background: var(--color-info-subtle);
    border-inline-start-color: var(--color-info);
    color: var(--color-info-text);
}

.bp-alert--neutral {
    background: var(--color-bg-secondary);
    border-inline-start-color: var(--color-border-dark);
    color: var(--color-text-primary);
}

/* ============================================
   8. Modals — bp-modal
   ============================================ */
.bp-modal .modal-content {
    border: none;
    border-radius: var(--modal-radius);
    box-shadow: var(--modal-shadow);
    overflow: hidden;
}

.bp-modal-header {
    background: var(--modal-header-bg);
    color: var(--modal-header-color);
    padding: var(--space-6) var(--space-7);
    border: none;
}

.bp-modal-header .modal-title {
    font-weight: var(--font-semibold);
    font-size: var(--text-lg);
}

.bp-modal-header .btn-close {
    filter: invert(1);
    opacity: 0.9;
}

.bp-modal-header .btn-close:hover {
    opacity: 1;
}

.bp-modal-body {
    padding: var(--modal-body-padding);
}

.bp-modal-footer {
    background: var(--modal-footer-bg);
    border-top: 1px solid var(--color-border-light);
    padding: var(--space-4) var(--space-7);
}

/* ============================================
   9. Progress — bp-progress
   ============================================ */
.bp-progress {
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-bg-tertiary);
    overflow: hidden;
    box-shadow: var(--shadow-inner);
}

.bp-progress-bar {
    height: 100%;
    border-radius: var(--radius-full);
    background: var(--gradient-accent);
    transition: width 0.6s ease;
}

.bp-progress-bar--success { background: var(--gradient-success); }
.bp-progress-bar--warning { background: var(--gradient-warning); }
.bp-progress-bar--danger  { background: var(--gradient-danger); }

/* Slim variant */
.bp-progress--slim { height: 6px; }
.bp-progress--thick { height: 14px; }

/* ============================================
   10. Avatar — bp-avatar
   ============================================ */
.bp-avatar {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: var(--font-semibold);
    font-size: var(--text-sm);
    color: var(--white);
    background: var(--gradient-accent);
    box-shadow: var(--shadow-accent);
    flex-shrink: 0;
    overflow: hidden;
}

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

.bp-avatar--sm { width: 2rem;   height: 2rem;   font-size: var(--text-xs); }
.bp-avatar--lg { width: 3.5rem; height: 3.5rem; font-size: var(--text-lg); }
.bp-avatar--xl { width: 5rem;   height: 5rem;   font-size: var(--text-2xl); }

/* ============================================
   11. Divider — bp-divider
   ============================================ */
.bp-divider {
    border: none;
    height: 1px;
    background: var(--color-border-light);
    margin: var(--space-4) 0;
}

.bp-divider--accent {
    background: linear-gradient(90deg, transparent, var(--color-border-accent), transparent);
}

.bp-divider--thick {
    height: 2px;
}

/* ============================================
   12. Empty State — bp-empty
   ============================================ */
.bp-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: var(--space-12) var(--space-6);
    color: var(--color-text-muted);
}

.bp-empty-icon {
    font-size: 3rem;
    margin-bottom: var(--space-4);
    opacity: 0.4;
}

.bp-empty-title {
    font-size: var(--text-lg);
    font-weight: var(--font-semibold);
    color: var(--color-text-secondary);
    margin-bottom: var(--space-2);
}

.bp-empty-text {
    font-size: var(--text-sm);
    max-width: 320px;
}

/* ============================================
   13. Skeleton Loading — bp-skeleton
   ============================================ */
.bp-skeleton {
    background: linear-gradient(90deg, var(--color-bg-secondary) 25%, var(--color-bg-tertiary) 50%, var(--color-bg-secondary) 75%);
    background-size: 200% 100%;
    animation: bp-skeleton-pulse 1.5s infinite;
    border-radius: var(--radius-md);
}

.bp-skeleton--text   { height: 16px; margin-bottom: var(--space-2); }
.bp-skeleton--title  { height: 24px; width: 60%; margin-bottom: var(--space-3); }
.bp-skeleton--avatar { width: 48px; height: 48px; border-radius: 50%; }
.bp-skeleton--card   { height: 120px; border-radius: var(--card-radius); }

/* ============================================
   14. Loading Spinner — bp-spinner
   ============================================ */
.bp-spinner {
    display: inline-block;
    width: 40px;
    height: 40px;
    border: 4px solid var(--color-accent-muted);
    border-top-color: var(--color-accent);
    border-radius: 50%;
    animation: bp-spin 0.8s linear infinite;
}

.bp-spinner--sm { width: 24px; height: 24px; border-width: 3px; }
.bp-spinner--lg { width: 56px; height: 56px; border-width: 5px; }

.bp-loading-overlay {
    position: fixed;
    inset: 0;
    background: var(--color-bg-overlay-light);
    backdrop-filter: blur(2px);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: var(--z-loading);
}

.bp-loading-text {
    margin-top: var(--space-4);
    font-size: var(--text-sm);
    color: var(--color-text-tertiary);
    font-weight: var(--font-medium);
}

/* ============================================
   15. Tooltip — bp-tooltip
   ============================================ */
.bp-tooltip {
    position: relative;
}

.bp-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) scale(0.9);
    background: var(--dark-200);
    color: var(--white);
    padding: var(--space-1-5) var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-xs);
    font-weight: var(--font-medium);
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--transition-fast), transform var(--transition-fast);
    z-index: var(--z-tooltip);
}

.bp-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) scale(1);
}

/* ============================================
   16. Animations (shared keyframes)
   ============================================ */
@keyframes bp-spin {
    to { transform: rotate(360deg); }
}

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

@keyframes bp-slide-in-start {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes bp-slide-in-end {
    from { opacity: 0; transform: translateX(20px); }
    to   { opacity: 1; transform: translateX(0); }
}

@keyframes bp-scale-in {
    from { opacity: 0; transform: scale(0.95); }
    to   { opacity: 1; transform: scale(1); }
}

@keyframes bp-skeleton-pulse {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.bp-animate-fade     { animation: bp-fade-in var(--transition-slow); }
.bp-animate-slide    { animation: bp-slide-in-start var(--transition-slow); }
.bp-animate-scale    { animation: bp-scale-in var(--transition-base); }

[dir="rtl"] .bp-animate-slide {
    animation: bp-slide-in-end var(--transition-slow);
}

/* ============================================
   17. Utility Classes — Text
   ============================================ */
.bp-text-primary   { color: var(--color-text-primary) !important; }
.bp-text-secondary { color: var(--color-text-secondary) !important; }
.bp-text-tertiary  { color: var(--color-text-tertiary) !important; }
.bp-text-muted     { color: var(--color-text-muted) !important; }
.bp-text-inverse   { color: var(--color-text-inverse) !important; }
.bp-text-accent    { color: var(--color-accent) !important; }
.bp-text-success   { color: var(--color-success) !important; }
.bp-text-warning   { color: var(--color-warning) !important; }
.bp-text-danger    { color: var(--color-danger) !important; }
.bp-text-info      { color: var(--color-info) !important; }

.bp-text-gradient {
    background: var(--gradient-accent);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* ============================================
   18. Utility Classes — Background
   ============================================ */
.bp-bg-body      { background: var(--color-bg-body) !important; }
.bp-bg-primary   { background: var(--color-bg-primary) !important; }
.bp-bg-secondary { background: var(--color-bg-secondary) !important; }
.bp-bg-tertiary  { background: var(--color-bg-tertiary) !important; }
.bp-bg-accent    { background: var(--color-accent-subtle) !important; }
.bp-bg-success   { background: var(--color-success-subtle) !important; }
.bp-bg-warning   { background: var(--color-warning-subtle) !important; }
.bp-bg-danger    { background: var(--color-danger-subtle) !important; }
.bp-bg-info      { background: var(--color-info-subtle) !important; }

/* ============================================
   19. Utility Classes — Shadows & Effects
   ============================================ */
.bp-shadow-none { box-shadow: var(--shadow-none) !important; }
.bp-shadow-sm   { box-shadow: var(--shadow-sm) !important; }
.bp-shadow-md   { box-shadow: var(--shadow-md) !important; }
.bp-shadow-lg   { box-shadow: var(--shadow-lg) !important; }
.bp-shadow-xl   { box-shadow: var(--shadow-xl) !important; }

.bp-glass {
    background: rgba(255, 255, 255, 0.8);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255, 255, 255, 0.2);
}

/* ============================================
   20. Utility Classes — Spacing Gaps
   ============================================ */
.bp-gap-1  { gap: var(--space-1) !important; }
.bp-gap-2  { gap: var(--space-2) !important; }
.bp-gap-3  { gap: var(--space-3) !important; }
.bp-gap-4  { gap: var(--space-4) !important; }
.bp-gap-5  { gap: var(--space-5) !important; }
.bp-gap-6  { gap: var(--space-6) !important; }
.bp-gap-8  { gap: var(--space-8) !important; }

/* ============================================
   21. Bootstrap Harmony Layer
   Gentle overrides that apply token values to Bootstrap
   components WITHOUT breaking their structure.
   Only affects visual look — not layout or behavior.
   ============================================ */

/* Cards */
.card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    transition: box-shadow var(--transition-base), transform var(--transition-base);
}

.card:hover {
    box-shadow: var(--card-shadow-hover);
}

.card-header {
    background: var(--card-header-bg);
    border-bottom: 1px solid var(--card-header-border);
    color: var(--card-header-color);
    font-weight: var(--font-semibold);
}

/* Buttons */
.btn-primary {
    background: var(--gradient-accent);
    border-color: transparent;
    color: var(--white);
    box-shadow: var(--btn-shadow);
}

.btn-primary:hover,
.btn-primary:focus {
    background: var(--gradient-accent-bold);
    border-color: transparent;
    box-shadow: var(--btn-shadow-hover);
    color: var(--white);
}

.btn-outline-primary {
    border-color: var(--color-accent);
    color: var(--color-accent);
}

.btn-outline-primary:hover,
.btn-outline-primary:focus {
    background: var(--gradient-accent);
    border-color: transparent;
    color: var(--white);
}

.btn-success {
    background: var(--gradient-success);
    border-color: transparent;
}

.btn-success:hover { background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%); border-color: transparent; }

.btn-warning {
    background: var(--gradient-warning);
    border-color: transparent;
}

.btn-warning:hover { background: linear-gradient(135deg, var(--yellow-500) 0%, var(--yellow-600) 100%); border-color: transparent; }

.btn-danger {
    background: var(--gradient-danger);
    border-color: transparent;
}

.btn-danger:hover { background: linear-gradient(135deg, var(--red-500) 0%, var(--red-600) 100%); border-color: transparent; }

.btn-info {
    background: var(--gradient-info);
    border-color: transparent;
    color: var(--white);
}

.btn-info:hover { background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%); border-color: transparent; color: var(--white); }

/* Forms */
.form-control:focus,
.form-select:focus {
    border-color: var(--input-border-focus);
    box-shadow: var(--input-shadow-focus);
}

.form-check-input:checked {
    background-color: var(--color-accent);
    border-color: var(--color-accent);
}

/* Tables */
.table thead th {
    background: var(--table-header-bg);
    border-bottom: 2px solid var(--table-header-border);
    color: var(--table-header-color);
    font-weight: var(--font-semibold);
}

.table tbody tr:hover {
    background: var(--table-row-hover);
}

/* Badges */
.badge.bg-primary { background: var(--gradient-accent) !important; }
.badge.bg-success { background: var(--gradient-success) !important; }
.badge.bg-warning { background: var(--gradient-warning) !important; color: var(--dark-200) !important; }
.badge.bg-danger  { background: var(--gradient-danger) !important; }
.badge.bg-info    { background: var(--gradient-info) !important; color: var(--white) !important; }

/* Alerts */
.alert-success {
    background: var(--color-success-subtle);
    border-color: rgba(56, 161, 105, 0.3);
    color: var(--color-success-text);
}

.alert-danger {
    background: var(--color-danger-subtle);
    border-color: rgba(229, 62, 62, 0.3);
    color: var(--color-danger-text);
}

.alert-warning {
    background: var(--color-warning-subtle);
    border-color: rgba(214, 158, 46, 0.3);
    color: var(--color-warning-text);
}

.alert-info {
    background: var(--color-info-subtle);
    border-color: rgba(49, 130, 206, 0.3);
    color: var(--color-info-text);
}

/* Dropdowns */
.dropdown-menu {
    border: 1px solid var(--dropdown-border);
    box-shadow: var(--dropdown-shadow);
    border-radius: var(--dropdown-radius);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--dropdown-hover);
    color: var(--dropdown-active-color);
}

/* Pagination */
.pagination .page-link {
    color: var(--pagination-color);
    border-color: var(--pagination-border);
}

.pagination .page-item.active .page-link {
    background: var(--pagination-active-bg);
    border-color: var(--pagination-active-border);
    color: var(--white);
}

/* Nav Tabs */
.nav-tabs .nav-link.active {
    color: var(--tab-active-color);
    border-color: var(--tab-active-border) var(--tab-active-border) transparent;
}

.nav-tabs .nav-link:hover {
    border-color: var(--tab-hover-border);
}

/* ============================================
   22. Old-Name Compatibility Layer
   Maps legacy class names → bp-* styles.
   Gradually remove as views are updated.
   ============================================ */

/* Card aliases */
.card-professional         { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; }
.card-professional:hover   { box-shadow: var(--card-shadow-hover); }
.card-modern               { background: var(--card-bg); border: none; border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; transition: all var(--transition-base); }
.card-modern:hover         { box-shadow: var(--card-shadow-hover); transform: translateY(-4px); }
.card-modern .card-header  { background: var(--gradient-accent); color: var(--white); border: none; padding: 20px 24px; font-weight: 600; font-size: 18px; }
.card-modern .card-body    { padding: 24px; }

/* Dashboard section card */
.dashboard-section-card         { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: var(--card-radius); box-shadow: var(--card-shadow); overflow: hidden; }
.dashboard-section-card:hover   { box-shadow: var(--card-shadow-hover); }
.dashboard-section-card-header  { background: var(--card-header-bg); border-bottom: 1px solid var(--card-header-border); color: var(--card-header-color); padding: var(--card-padding); font-weight: var(--font-semibold); }
.dashboard-section-card-header i { color: var(--color-accent); }
.dashboard-section-card-body    { padding: var(--card-padding); }

/* Button aliases */
.btn-professional               { font-weight: var(--btn-font-weight); border-radius: var(--btn-radius); transition: all var(--transition-base); }
.btn-professional.btn-primary   { background: var(--gradient-accent); color: var(--white); border-color: transparent; box-shadow: var(--btn-shadow); }
.btn-professional.btn-primary:hover { background: var(--gradient-accent-bold); box-shadow: var(--btn-shadow-hover); }
.btn-professional.btn-secondary { background: var(--color-bg-primary); color: var(--color-text-primary); border-color: var(--color-border-medium); }
.btn-professional.btn-secondary:hover { background: var(--color-bg-secondary); border-color: var(--color-border-dark); }
.btn-professional.btn-success   { background: var(--gradient-success); color: var(--white); border-color: transparent; }
.btn-professional.btn-success:hover { background: linear-gradient(135deg, var(--green-500) 0%, var(--green-600) 100%); }
.btn-professional.btn-danger    { background: var(--gradient-danger); color: var(--white); border-color: transparent; }
.btn-professional.btn-danger:hover { background: linear-gradient(135deg, var(--red-500) 0%, var(--red-600) 100%); }
.btn-professional.btn-warning   { background: var(--gradient-warning); color: var(--white); border-color: transparent; }
.btn-professional.btn-warning:hover { background: linear-gradient(135deg, var(--yellow-500) 0%, var(--yellow-600) 100%); }
.btn-professional.btn-info      { background: var(--gradient-info); color: var(--white); border-color: transparent; }
.btn-professional.btn-info:hover { background: linear-gradient(135deg, var(--blue-500) 0%, var(--blue-600) 100%); }

.btn-pro-primary { background: var(--gradient-accent); color: var(--white); border: none; border-radius: var(--btn-radius); font-weight: var(--btn-font-weight); box-shadow: var(--btn-shadow); transition: all var(--transition-base); }
.btn-pro-primary:hover { background: var(--gradient-accent-bold); box-shadow: var(--btn-shadow-hover); color: var(--white); transform: translateY(-1px); }
.btn-pro-outline { background: transparent; color: var(--color-accent); border: 2px solid var(--color-accent); border-radius: var(--btn-radius); font-weight: var(--btn-font-weight); transition: all var(--transition-base); }
.btn-pro-outline:hover { background: var(--gradient-accent); color: var(--white); border-color: transparent; }

/* Badge aliases */
.badge-professional { font-weight: var(--badge-font-weight); border-radius: var(--badge-radius); padding: var(--badge-padding-y) var(--badge-padding-x); font-size: var(--badge-font-size); }
.badge-modern { padding: 6px 14px; border-radius: var(--badge-radius); font-weight: var(--badge-font-weight); font-size: 12px; display: inline-flex; align-items: center; gap: 6px; }
.badge-modern.badge-success   { background: var(--color-success-muted); color: var(--color-success-text); }
.badge-modern.badge-warning   { background: var(--color-warning-muted); color: var(--color-warning-text); }
.badge-modern.badge-danger    { background: var(--color-danger-muted); color: var(--color-danger-text); }
.badge-modern.badge-info      { background: var(--color-info-muted); color: var(--color-info-text); }
.badge-modern.badge-secondary { background: var(--color-bg-tertiary); color: var(--color-text-secondary); }

/* Table aliases */
.table-professional { border-radius: var(--table-radius); overflow: hidden; }
.table-modern { background: var(--white); border-radius: var(--table-radius); overflow: hidden; box-shadow: var(--shadow-sm); }
.table-modern thead { background: var(--table-header-bg); }
.table-modern thead th { border: none; padding: 16px 20px; font-weight: var(--font-bold); font-size: 13px; color: var(--color-text-secondary); text-transform: uppercase; letter-spacing: 0.5px; }
.table-modern tbody tr { border-bottom: 1px solid var(--color-border-light); transition: all var(--transition-fast); }
.table-modern tbody tr:hover { background: var(--table-row-hover); }
.table-modern tbody td { padding: 16px 20px; vertical-align: middle; color: var(--color-text-primary); font-size: 14px; }

/* Text utility aliases */
.text-primary-pro   { color: var(--color-accent) !important; }
.text-secondary-pro { color: var(--color-text-secondary) !important; }
.text-success-pro   { color: var(--color-success) !important; }
.text-warning-pro   { color: var(--color-warning) !important; }
.text-danger-pro    { color: var(--color-danger) !important; }
.text-info-pro      { color: var(--color-info) !important; }
.text-muted-pro     { color: var(--color-text-muted) !important; }

/* Background utility aliases */
.bg-accent-subtle-pro { background: var(--color-accent-subtle) !important; }
.bg-success-subtle    { background: var(--color-success-subtle) !important; }
.bg-warning-subtle    { background: var(--color-warning-subtle) !important; }
.bg-danger-subtle     { background: var(--color-danger-subtle) !important; }
.bg-info-subtle-pro   { background: var(--color-info-subtle) !important; }

/* Stat card aliases */
.stat-card-enhanced { background: var(--card-bg); border-radius: var(--card-radius); padding: var(--card-padding); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.stat-card-enhanced:hover { box-shadow: var(--card-shadow-hover); transform: translateY(-2px); }

.stat-card { background: var(--card-bg); border-radius: var(--card-radius); padding: var(--card-padding); border: 1px solid var(--card-border); box-shadow: var(--card-shadow); }
.stat-card .stat-icon { width: 56px; height: 56px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: var(--color-accent-subtle); color: var(--color-accent); font-size: 1.5rem; }
.stat-card .stat-value { font-size: 1.75rem; font-weight: var(--font-bold); color: var(--color-text-primary); }
.stat-card .stat-label { color: var(--color-text-tertiary); font-size: var(--text-sm); }

/* Alert aliases */
.alert-modern { border: none; border-radius: var(--alert-radius); padding: 16px 20px; display: flex; align-items: flex-start; gap: 12px; box-shadow: var(--shadow-sm); }
.alert-modern.alert-success { background: var(--color-success-subtle); color: var(--color-success-text); border-inline-start: var(--alert-border-width) solid var(--color-success); }
.alert-modern.alert-warning { background: var(--color-warning-subtle); color: var(--color-warning-text); border-inline-start: var(--alert-border-width) solid var(--color-warning); }
.alert-modern.alert-danger  { background: var(--color-danger-subtle);  color: var(--color-danger-text);  border-inline-start: var(--alert-border-width) solid var(--color-danger); }
.alert-modern.alert-info    { background: var(--color-info-subtle);    color: var(--color-info-text);    border-inline-start: var(--alert-border-width) solid var(--color-info); }

/* Form aliases */
.form-control-modern { border: 2px solid var(--input-border); border-radius: var(--input-radius); padding: 12px 16px; font-size: 14px; transition: all var(--transition-base); background: var(--input-bg); }
.form-control-modern:focus { border-color: var(--input-border-focus); box-shadow: var(--input-shadow-focus); outline: none; }
.form-control-modern::placeholder { color: var(--input-placeholder); }
.form-label-modern { font-weight: var(--font-semibold); color: var(--color-text-secondary); margin-bottom: 8px; font-size: 14px; }

.form-control-professional { border: 2px solid var(--input-border); border-radius: var(--input-radius); transition: all var(--transition-base); }
.form-control-professional:focus { border-color: var(--input-border-focus); box-shadow: var(--input-shadow-focus); }

/* Modal aliases */
.modal-modern .modal-content { border: none; border-radius: var(--modal-radius); box-shadow: var(--modal-shadow); }
.modal-modern .modal-header { background: var(--modal-header-bg); color: var(--modal-header-color); border: none; padding: 24px 28px; border-radius: var(--modal-radius) var(--modal-radius) 0 0; }
.modal-modern .modal-header .btn-close { filter: invert(1); opacity: 1; }
.modal-modern .modal-body { padding: 28px; }
.modal-modern .modal-footer { border: none; padding: 20px 28px; background: var(--modal-footer-bg); }

.dashboard-modal-header { background: var(--modal-header-bg); color: var(--modal-header-color); border: none; }

/* Progress aliases */
.progress-modern { height: 12px; border-radius: 10px; background: var(--color-bg-tertiary); overflow: hidden; box-shadow: var(--shadow-inner); }
.progress-modern .progress-bar { border-radius: 10px; background: var(--gradient-accent); transition: width 0.6s ease; }

/* Loading aliases */
.loading-spinner { display: inline-block; width: 40px; height: 40px; border: 4px solid var(--color-accent-muted); border-top-color: var(--color-accent); border-radius: 50%; animation: bp-spin 1s linear infinite; }

/* Gradient background aliases */
.bg-gradient-primary { background: var(--gradient-accent) !important; }
.bg-gradient-success { background: var(--gradient-success) !important; }
.bg-gradient-warning { background: var(--gradient-warning) !important; }
.bg-gradient-danger  { background: var(--gradient-danger) !important; }

.text-gradient { background: var(--gradient-accent); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }

/* Shadow aliases */
.shadow-modern    { box-shadow: var(--shadow-md) !important; }
.shadow-modern-lg { box-shadow: var(--shadow-lg) !important; }

/* ============================================
   23. Responsive
   ============================================ */
@media (max-width: 768px) {
    .bp-card-body   { padding: var(--card-padding-sm); }
    .bp-card-header { padding: var(--card-padding-sm); font-size: var(--text-base); }
    .bp-stat        { padding: var(--card-padding-sm); }
    .bp-stat-value  { font-size: var(--text-xl); }
    .bp-stat-icon   { width: 44px; height: 44px; font-size: 1.25rem; }
}

/* ============================================
   24. Print
   ============================================ */
@media print {
    body { background: var(--white) !important; }

    .bp-card,
    .card {
        box-shadow: none !important;
        border: 1px solid var(--color-border-medium) !important;
    }

    .bp-btn,
    .btn,
    .bp-loading-overlay,
    #globalLoadingOverlay {
        display: none !important;
    }

    .table-responsive { overflow: visible !important; }
    .sticky-top { position: static !important; }
}