/**
 * Bootstrap Icons Centering Fix
 *
 * Bootstrap Icons have alignment issues because they use inline SVG
 * This file contains universal fixes for proper icon centering
 *
 * Usage: Include this after Bootstrap Icons CSS
 */

/* ============================================
   GLOBAL BOOTSTRAP ICON CENTERING FIX
   ============================================ */

/**
 * Fix Bootstrap Icons vertical alignment
 * Icons naturally have extra space below due to inline nature
 */
.bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/**
 * When icon is the only child in a flex container
 * Force perfect centering
 */
.d-flex > .bi:only-child,
.d-inline-flex > .bi:only-child {
    margin: auto;
}

/* ============================================
   ICON CONTAINERS - Perfect Centering
   ============================================ */

/**
 * Stats Icon Containers
 * Used in dashboard cards and stat displays
 */
.stats-icon-modern,
.icon-container,
.icon-box,
.icon-circle,
.icon-square {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

.stats-icon-modern > .bi,
.icon-container > .bi,
.icon-box > .bi,
.icon-circle > .bi,
.icon-square > .bi {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    transform: translateY(-0.5px); /* Micro-adjustment for optical centering */
}

/* ============================================
   BUTTON ICONS - Alignment Fix
   ============================================ */

/**
 * Icons inside buttons need special handling
 * Bootstrap buttons have padding that affects alignment
 */
.btn .bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* Icon-only buttons - perfect centering */
.btn > .bi:only-child {
    transform: translateY(-1px); /* Optical adjustment for button padding */
}

/* ============================================
   CARD HEADER ICONS
   ============================================ */

/**
 * Icons in card headers (h4, h5, h6)
 * Need inline-flex for proper alignment with text
 */
.card-header h4 .bi,
.card-header h5 .bi,
.card-header h6 .bi {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* ============================================
   BADGE ICONS
   ============================================ */

/**
 * Icons inside badges need vertical centering
 */
.badge .bi,
.badge-jenjang .bi,
[class*="badge-"] .bi {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
    transform: translateY(-1px); /* Optical centering for badge padding */
}

/* ============================================
   EMPTY STATE ICONS
   ============================================ */

/**
 * Large decorative icons in empty states
 * These should be block-level and centered
 */
.empty-state-icon,
.map-icon,
[style*="font-size: 48px"],
[style*="font-size: 64px"],
[style*="font-size: 80px"] {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ============================================
   QUICK ACTION CARDS
   ============================================ */

/**
 * Icons in action cards (usually large and centered)
 */
.quick-action-card > .bi,
.action-card > .bi {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1 !important;
}

/* ============================================
   TABLE ICONS
   ============================================ */

/**
 * Icons in table cells
 */
table .bi,
.table .bi {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* ============================================
   NAVBAR ICONS
   ============================================ */

/**
 * Icons in navigation
 */
.navbar .bi,
.nav .bi,
.sidebar .bi {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* ============================================
   INPUT GROUP ICONS
   ============================================ */

/**
 * Icons in input groups (search, etc)
 */
.input-group-text .bi {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    line-height: 1 !important;
}

/* ============================================
   ALERT ICONS
   ============================================ */

/**
 * Icons in alerts and notifications
 */
.alert .bi {
    display: inline-flex !important;
    align-items: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

/* ============================================
   SIZE-SPECIFIC ADJUSTMENTS
   ============================================ */

/**
 * Different icon sizes need different micro-adjustments
 * for optical centering
 */

/* Small icons (12-16px) */
.bi[style*="font-size: 12px"],
.bi[style*="font-size: 13px"],
.bi[style*="font-size: 14px"],
.bi[style*="font-size: 15px"],
.bi[style*="font-size: 16px"] {
    transform: translateY(-0.5px);
}

/* Medium icons (18-28px) */
.bi[style*="font-size: 18px"],
.bi[style*="font-size: 20px"],
.bi[style*="font-size: 24px"],
.bi[style*="font-size: 28px"] {
    transform: translateY(-1px);
}

/* Large icons (32px+) */
.bi[style*="font-size: 32px"],
.bi[style*="font-size: 40px"],
.bi[style*="font-size: 48px"] {
    transform: translateY(-2px);
}

/* Extra large icons (64px+) */
.bi[style*="font-size: 64px"],
.bi[style*="font-size: 80px"] {
    transform: translateY(-3px);
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/**
 * Manual centering utilities
 * Use when automatic centering doesn't work
 */
.bi-center {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    vertical-align: middle !important;
    line-height: 1 !important;
}

.bi-block-center {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-left: auto !important;
    margin-right: auto !important;
    line-height: 1 !important;
}

/**
 * Remove transform if it causes issues
 */
.bi-no-transform {
    transform: none !important;
}

/* ============================================
   DARK MODE COMPATIBILITY
   ============================================ */

/**
 * Ensure all fixes work in dark mode
 * (No color changes, just ensuring compatibility)
 */
[data-bs-theme="dark"] .bi {
    /* All centering rules above apply in dark mode */
}