/* 
 * Bootstrap 5.3 Compatibility Layer for Sorum Var v2
 * Adds missing utility classes from Bootstrap 5.3 to work with Bootstrap 5.1.3
 * Uses Apple Theme variables for consistent coloring
 */

/* Background Subtles */
.bg-primary-subtle {
    background-color: rgba(0, 122, 255, 0.1) !important;
    color: var(--apple-blue-dark) !important;
}

.bg-secondary-subtle {
    background-color: rgba(142, 142, 147, 0.1) !important;
    color: var(--apple-secondary-label) !important;
}

.bg-success-subtle {
    background-color: rgba(52, 199, 89, 0.1) !important;
    color: var(--apple-green-dark) !important;
}

.bg-info-subtle {
    background-color: rgba(90, 200, 250, 0.1) !important;
    color: var(--apple-blue-dark) !important;
}

.bg-warning-subtle {
    background-color: rgba(255, 149, 0, 0.1) !important;
    color: #B36B00 !important; /* Darker orange for text */
}

.bg-danger-subtle {
    background-color: rgba(255, 59, 48, 0.1) !important;
    color: var(--apple-red-dark) !important;
}

.bg-light-subtle {
    background-color: rgba(242, 242, 247, 0.5) !important;
    color: var(--apple-label) !important;
}

.bg-dark-subtle {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: var(--apple-label) !important;
}

/* Text Emphasis */
.text-primary-emphasis {
    color: var(--apple-blue-dark) !important;
}

.text-success-emphasis {
    color: var(--apple-green-dark) !important;
}

.text-danger-emphasis {
    color: var(--apple-red-dark) !important;
}

.text-warning-emphasis {
    color: #B36B00 !important;
}

.text-info-emphasis {
    color: #007AFF !important;
}

/* Border Subtles */
.border-primary-subtle {
    border-color: rgba(0, 122, 255, 0.2) !important;
}

.border-success-subtle {
    border-color: rgba(52, 199, 89, 0.2) !important;
}

.border-warning-subtle {
    border-color: rgba(255, 149, 0, 0.2) !important;
}

.border-danger-subtle {
    border-color: rgba(255, 59, 48, 0.2) !important;
}

/* Icon Circle Helper (Global) */
.icon-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    width: 48px;
    height: 48px;
    transition: all 0.2s ease;
}

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

.icon-circle.lg {
    width: 64px;
    height: 64px;
    font-size: 1.5rem;
}

/* Avatar Circle Helper */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: var(--apple-gray-6);
    color: var(--apple-secondary-label);
}

/* Rounded Utilities */
.rounded-4 {
    border-radius: var(--radius-xl) !important;
}

.rounded-5 {
    border-radius: var(--radius-2xl) !important;
}

.rounded-top-4 {
    border-top-left-radius: var(--radius-xl) !important;
    border-top-right-radius: var(--radius-xl) !important;
}

.rounded-bottom-4 {
    border-bottom-left-radius: var(--radius-xl) !important;
    border-bottom-right-radius: var(--radius-xl) !important;
}