/* ═══════════════════════════════════════════════════════════════════════════
   BeautyPro Utility Classes v1.0
   Reusable utility classes to replace inline styles.
   Uses tokens from beautypro-tokens.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* ============================================
   1. Text Colors
   ============================================ */
.bp-text-primary   { color: var(--color-text-primary, #1A202C) !important; }
.bp-text-secondary { color: var(--color-text-secondary, #4A5568) !important; }
.bp-text-muted     { color: var(--color-text-muted, #718096) !important; }
.bp-text-light     { color: var(--color-text-tertiary, #A0AEC0) !important; }
.bp-text-inverse   { color: var(--color-text-inverse, #FFFFFF) !important; }
.bp-text-accent    { color: var(--color-accent, #D4A5A5) !important; }
.bp-text-success   { color: var(--color-success, #38A169) !important; }
.bp-text-warning   { color: var(--color-warning, #D69E2E) !important; }
.bp-text-danger    { color: var(--color-danger, #E53E3E) !important; }
.bp-text-info      { color: var(--color-info, #3182CE) !important; }

/* ============================================
   2. Background Colors
   ============================================ */
.bp-bg-body        { background: var(--color-bg-body, #F7FAFC) !important; }
.bp-bg-primary     { background: var(--color-bg-primary, #FFFFFF) !important; }
.bp-bg-secondary   { background: var(--color-bg-secondary, #EDF2F7) !important; }
.bp-bg-tertiary    { background: var(--color-bg-tertiary, #E2E8F0) !important; }
.bp-bg-inverse     { background: var(--color-bg-inverse, #2C3E50) !important; }
.bp-bg-accent      { background: var(--color-accent, #D4A5A5) !important; }
.bp-bg-accent-subtle { background: var(--color-accent-subtle, #E8F4F4) !important; }
.bp-bg-success     { background: var(--color-success, #38A169) !important; }
.bp-bg-success-subtle { background: var(--color-success-subtle, #F0FFF4) !important; }
.bp-bg-warning     { background: var(--color-warning, #D69E2E) !important; }
.bp-bg-warning-subtle { background: var(--color-warning-subtle, #FFFFF0) !important; }
.bp-bg-danger      { background: var(--color-danger, #E53E3E) !important; }
.bp-bg-danger-subtle { background: var(--color-danger-subtle, #FFF5F5) !important; }
.bp-bg-info        { background: var(--color-info, #3182CE) !important; }
.bp-bg-info-subtle { background: var(--color-info-subtle, #EBF8FF) !important; }

/* Gradient backgrounds */
.bp-bg-gradient-accent { background: var(--gradient-accent) !important; }
.bp-bg-gradient-success { background: var(--gradient-success) !important; }
.bp-bg-gradient-warning { background: var(--gradient-warning) !important; }
.bp-bg-gradient-danger { background: var(--gradient-danger) !important; }
.bp-bg-gradient-info { background: var(--gradient-info) !important; }
.bp-bg-gradient-dark { background: var(--gradient-dark) !important; }

/* ============================================
   3. Border Colors
   ============================================ */
.bp-border         { border: 1px solid var(--color-border, #E2E8F0) !important; }
.bp-border-light   { border: 1px solid var(--color-border-light, #EDF2F7) !important; }
.bp-border-medium  { border: 1px solid var(--color-border-medium, #CBD5E0) !important; }
.bp-border-accent  { border: 1px solid var(--color-border-accent, rgba(45, 139, 139, 0.25)) !important; }
.bp-border-success { border: 1px solid var(--color-success, #38A169) !important; }
.bp-border-warning { border: 1px solid var(--color-warning, #D69E2E) !important; }
.bp-border-danger  { border: 1px solid var(--color-danger, #E53E3E) !important; }
.bp-border-info    { border: 1px solid var(--color-info, #3182CE) !important; }

/* Border directions */
.bp-border-top     { border-top: 1px solid var(--color-border) !important; }
.bp-border-bottom  { border-bottom: 1px solid var(--color-border) !important; }
.bp-border-start   { border-inline-start: 1px solid var(--color-border) !important; }
.bp-border-end     { border-inline-end: 1px solid var(--color-border) !important; }

/* ============================================
   4. Border Radius
   ============================================ */
.bp-rounded-none   { border-radius: 0 !important; }
.bp-rounded-sm     { border-radius: var(--radius-sm, 6px) !important; }
.bp-rounded-md     { border-radius: var(--radius-md, 8px) !important; }
.bp-rounded-lg     { border-radius: var(--radius-lg, 12px) !important; }
.bp-rounded-xl     { border-radius: var(--radius-xl, 16px) !important; }
.bp-rounded-2xl    { border-radius: var(--radius-2xl, 24px) !important; }
.bp-rounded-full   { border-radius: var(--radius-full, 9999px) !important; }

/* ============================================
   5. Shadows
   ============================================ */
.bp-shadow-none    { box-shadow: none !important; }
.bp-shadow-xs      { box-shadow: var(--shadow-xs) !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-shadow-accent  { box-shadow: var(--shadow-accent) !important; }

/* ============================================
   6. Font Sizes
   ============================================ */
.bp-text-xs   { font-size: var(--text-xs, 0.75rem) !important; }
.bp-text-sm   { font-size: var(--text-sm, 0.875rem) !important; }
.bp-text-base { font-size: var(--text-base, 1rem) !important; }
.bp-text-lg   { font-size: var(--text-lg, 1.125rem) !important; }
.bp-text-xl   { font-size: var(--text-xl, 1.25rem) !important; }
.bp-text-2xl  { font-size: var(--text-2xl, 1.5rem) !important; }
.bp-text-3xl  { font-size: var(--text-3xl, 1.875rem) !important; }
.bp-text-4xl  { font-size: var(--text-4xl, 2.25rem) !important; }

/* ============================================
   7. Font Weights
   ============================================ */
.bp-font-light     { font-weight: var(--font-light, 300) !important; }
.bp-font-normal    { font-weight: var(--font-normal, 400) !important; }
.bp-font-medium    { font-weight: var(--font-medium, 500) !important; }
.bp-font-semibold  { font-weight: var(--font-semibold, 600) !important; }
.bp-font-bold      { font-weight: var(--font-bold, 700) !important; }
.bp-font-extrabold { font-weight: var(--font-extrabold, 800) !important; }

/* ============================================
   8. Spacing (Margin & Padding)
   ============================================ */
/* Padding */
.bp-p-0   { padding: 0 !important; }
.bp-p-1   { padding: var(--space-1, 0.25rem) !important; }
.bp-p-2   { padding: var(--space-2, 0.5rem) !important; }
.bp-p-3   { padding: var(--space-3, 0.75rem) !important; }
.bp-p-4   { padding: var(--space-4, 1rem) !important; }
.bp-p-5   { padding: var(--space-5, 1.25rem) !important; }
.bp-p-6   { padding: var(--space-6, 1.5rem) !important; }
.bp-p-8   { padding: var(--space-8, 2rem) !important; }

.bp-px-0  { padding-inline: 0 !important; }
.bp-px-2  { padding-inline: var(--space-2) !important; }
.bp-px-3  { padding-inline: var(--space-3) !important; }
.bp-px-4  { padding-inline: var(--space-4) !important; }
.bp-px-5  { padding-inline: var(--space-5) !important; }
.bp-px-6  { padding-inline: var(--space-6) !important; }

.bp-py-0  { padding-block: 0 !important; }
.bp-py-2  { padding-block: var(--space-2) !important; }
.bp-py-3  { padding-block: var(--space-3) !important; }
.bp-py-4  { padding-block: var(--space-4) !important; }
.bp-py-5  { padding-block: var(--space-5) !important; }
.bp-py-6  { padding-block: var(--space-6) !important; }

/* Margin */
.bp-m-0   { margin: 0 !important; }
.bp-m-1   { margin: var(--space-1) !important; }
.bp-m-2   { margin: var(--space-2) !important; }
.bp-m-3   { margin: var(--space-3) !important; }
.bp-m-4   { margin: var(--space-4) !important; }
.bp-m-auto { margin: auto !important; }

.bp-mx-auto { margin-inline: auto !important; }
.bp-my-0   { margin-block: 0 !important; }
.bp-my-2   { margin-block: var(--space-2) !important; }
.bp-my-3   { margin-block: var(--space-3) !important; }
.bp-my-4   { margin-block: var(--space-4) !important; }

.bp-mb-0  { margin-bottom: 0 !important; }
.bp-mb-1  { margin-bottom: var(--space-1) !important; }
.bp-mb-2  { margin-bottom: var(--space-2) !important; }
.bp-mb-3  { margin-bottom: var(--space-3) !important; }
.bp-mb-4  { margin-bottom: var(--space-4) !important; }
.bp-mb-5  { margin-bottom: var(--space-5) !important; }
.bp-mb-6  { margin-bottom: var(--space-6) !important; }

.bp-mt-0  { margin-top: 0 !important; }
.bp-mt-2  { margin-top: var(--space-2) !important; }
.bp-mt-3  { margin-top: var(--space-3) !important; }
.bp-mt-4  { margin-top: var(--space-4) !important; }

.bp-ms-0  { margin-inline-start: 0 !important; }
.bp-ms-2  { margin-inline-start: var(--space-2) !important; }
.bp-ms-3  { margin-inline-start: var(--space-3) !important; }
.bp-ms-auto { margin-inline-start: auto !important; }

.bp-me-0  { margin-inline-end: 0 !important; }
.bp-me-2  { margin-inline-end: var(--space-2) !important; }
.bp-me-3  { margin-inline-end: var(--space-3) !important; }
.bp-me-auto { margin-inline-end: auto !important; }

/* ============================================
   9. Gap (Flexbox/Grid)
   ============================================ */
.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; }

/* ============================================
   10. Width & Height
   ============================================ */
.bp-w-full   { width: 100% !important; }
.bp-w-auto   { width: auto !important; }
.bp-w-fit    { width: fit-content !important; }
.bp-h-full   { height: 100% !important; }
.bp-h-auto   { height: auto !important; }
.bp-h-screen { height: 100vh !important; }
.bp-min-h-screen { min-height: 100vh !important; }

/* ============================================
   11. Display Utilities
   ============================================ */
.bp-flex { display: flex !important; }
.bp-inline-flex { display: inline-flex !important; }
.bp-grid { display: grid !important; }
.bp-block { display: block !important; }
.bp-inline-block { display: inline-block !important; }
.bp-hidden { display: none !important; }

/* Flexbox direction */
.bp-flex-row { flex-direction: row !important; }
.bp-flex-col { flex-direction: column !important; }
.bp-flex-wrap { flex-wrap: wrap !important; }

/* Flexbox alignment */
.bp-items-start { align-items: flex-start !important; }
.bp-items-center { align-items: center !important; }
.bp-items-end { align-items: flex-end !important; }
.bp-items-stretch { align-items: stretch !important; }

.bp-justify-start { justify-content: flex-start !important; }
.bp-justify-center { justify-content: center !important; }
.bp-justify-end { justify-content: flex-end !important; }
.bp-justify-between { justify-content: space-between !important; }
.bp-justify-around { justify-content: space-around !important; }

.bp-flex-1 { flex: 1 1 0% !important; }
.bp-flex-auto { flex: 1 1 auto !important; }
.bp-flex-none { flex: none !important; }
.bp-flex-shrink-0 { flex-shrink: 0 !important; }
.bp-flex-grow { flex-grow: 1 !important; }

/* ============================================
   12. Text Alignment
   ============================================ */
.bp-text-start { text-align: start !important; }
.bp-text-center { text-align: center !important; }
.bp-text-end { text-align: end !important; }

/* ============================================
   13. Overflow
   ============================================ */
.bp-overflow-hidden { overflow: hidden !important; }
.bp-overflow-auto { overflow: auto !important; }
.bp-overflow-x-auto { overflow-x: auto !important; }
.bp-overflow-y-auto { overflow-y: auto !important; }

/* ============================================
   14. Position
   ============================================ */
.bp-relative { position: relative !important; }
.bp-absolute { position: absolute !important; }
.bp-fixed { position: fixed !important; }
.bp-sticky { position: sticky !important; }

.bp-inset-0 { inset: 0 !important; }
.bp-top-0 { top: 0 !important; }
.bp-bottom-0 { bottom: 0 !important; }
.bp-start-0 { inset-inline-start: 0 !important; }
.bp-end-0 { inset-inline-end: 0 !important; }

/* ============================================
   15. Z-Index
   ============================================ */
.bp-z-0 { z-index: 0 !important; }
.bp-z-10 { z-index: 10 !important; }
.bp-z-20 { z-index: 20 !important; }
.bp-z-50 { z-index: 50 !important; }
.bp-z-dropdown { z-index: var(--z-dropdown) !important; }
.bp-z-modal { z-index: var(--z-modal) !important; }
.bp-z-tooltip { z-index: var(--z-tooltip) !important; }

/* ============================================
   16. Cursor
   ============================================ */
.bp-cursor-pointer { cursor: pointer !important; }
.bp-cursor-default { cursor: default !important; }
.bp-cursor-not-allowed { cursor: not-allowed !important; }
.bp-cursor-move { cursor: move !important; }

/* ============================================
   17. Opacity
   ============================================ */
.bp-opacity-0 { opacity: 0 !important; }
.bp-opacity-25 { opacity: 0.25 !important; }
.bp-opacity-50 { opacity: 0.5 !important; }
.bp-opacity-75 { opacity: 0.75 !important; }
.bp-opacity-100 { opacity: 1 !important; }

/* ============================================
   18. Transitions
   ============================================ */
.bp-transition { transition: all var(--transition-base) !important; }
.bp-transition-fast { transition: all var(--transition-fast) !important; }
.bp-transition-slow { transition: all var(--transition-slow) !important; }
.bp-transition-none { transition: none !important; }

/* ============================================
   19. Icon Containers
   ============================================ */
.bp-icon-box {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    flex-shrink: 0;
}

.bp-icon-box-sm {
    width: 32px;
    height: 32px;
    font-size: 0.875rem;
}

.bp-icon-box-md {
    width: 44px;
    height: 44px;
    font-size: 1.125rem;
}

.bp-icon-box-lg {
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

.bp-icon-box-xl {
    width: 72px;
    height: 72px;
    font-size: 2rem;
}

/* Icon box variants */
.bp-icon-box-accent {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

.bp-icon-box-success {
    background: var(--color-success-subtle);
    color: var(--color-success);
}

.bp-icon-box-warning {
    background: var(--color-warning-subtle);
    color: var(--color-warning);
}

.bp-icon-box-danger {
    background: var(--color-danger-subtle);
    color: var(--color-danger);
}

.bp-icon-box-info {
    background: var(--color-info-subtle);
    color: var(--color-info);
}

.bp-icon-box-neutral {
    background: var(--color-bg-tertiary);
    color: var(--color-text-secondary);
}

/* ============================================
   20. Status Indicators
   ============================================ */
.bp-status-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    flex-shrink: 0;
}

.bp-status-dot-lg {
    width: 12px;
    height: 12px;
}

.bp-status-dot-active   { background: var(--color-success); }
.bp-status-dot-pending  { background: var(--color-warning); }
.bp-status-dot-inactive { background: var(--color-text-muted); }
.bp-status-dot-error    { background: var(--color-danger); }
.bp-status-dot-info     { background: var(--color-info); }

/* Pulsing animation for active status */
.bp-status-dot-pulse {
    animation: bp-pulse 2s infinite;
}

@keyframes bp-pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

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

.bp-divider-vertical {
    width: 1px;
    height: 100%;
    background: var(--color-border);
    margin: 0 var(--space-3);
}

/* ============================================
   22. Truncation
   ============================================ */
.bp-truncate {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bp-line-clamp-2 {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.bp-line-clamp-3 {
    display: -webkit-box;
    -webkit-line-clamp: 3;
    line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* ============================================
   23. Whitespace
   ============================================ */
.bp-whitespace-nowrap { white-space: nowrap !important; }
.bp-whitespace-normal { white-space: normal !important; }
.bp-whitespace-pre { white-space: pre !important; }
.bp-whitespace-pre-wrap { white-space: pre-wrap !important; }

/* ============================================
   24. Pointer Events
   ============================================ */
.bp-pointer-events-none { pointer-events: none !important; }
.bp-pointer-events-auto { pointer-events: auto !important; }

/* ============================================
   25. User Select
   ============================================ */
.bp-select-none { user-select: none !important; }
.bp-select-all { user-select: all !important; }
.bp-select-text { user-select: text !important; }

/* ============================================
   26. Visibility
   ============================================ */
.bp-visible { visibility: visible !important; }
.bp-invisible { visibility: hidden !important; }

/* ============================================
   27. Print Utilities
   ============================================ */
@media print {
    .bp-print-hidden { display: none !important; }
    .bp-print-only { display: block !important; }
}

@media screen {
    .bp-print-only { display: none !important; }
}

/* ============================================
   28. Screen Reader Only
   ============================================ */
.bp-sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
}

/* ============================================
   29. Interactive States
   ============================================ */
.bp-hover-lift {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
}

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

.bp-hover-bg:hover {
    background: var(--color-bg-secondary);
}

.bp-hover-accent:hover {
    background: var(--color-accent-subtle);
    color: var(--color-accent);
}

/* ============================================
   30. Card Variants (Quick Apply)
   ============================================ */
.bp-card-accent {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border-accent);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
}

.bp-card-flat {
    background: var(--color-bg-primary);
    border: 1px solid var(--color-border);
    border-radius: var(--card-radius);
    box-shadow: none;
}

.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);
    border-radius: var(--card-radius);
}