/* ============================================
   Bootstrap SVG Icon System
   Custom icon styling for {% icon %} template tag
   ============================================ */

/* Base Icon Styles */
.icon-svg {
    display: inline-block;
    vertical-align: -.125em;
    /* Size inheritance - override inline width/height attributes */
    width: 1em !important;
    height: 1em !important;
    /* Default: inherit parent text color */
    filter: brightness(0) saturate(100%);
    opacity: 0.85;
    margin-right: 6px;
    transition: opacity 0.2s ease;
}

/* Icon Size Variants */
.icon-svg-lg {
    width: 1.5em !important;
    height: 1.5em !important;
}

.icon-svg-xl {
    width: 2em !important;
    height: 2em !important;
}

/* ============================================
   Sidebar & Navigation Icons (White)
   ============================================ */
.sidebar-toggle .icon-svg,
.sidebar-nav a .icon-svg,
.sidebar-user .icon-svg,
.top-bar .icon-svg {
    filter: brightness(0) saturate(100%) invert(1) !important;
    opacity: 1 !important;
}

/* Sidebar nav icon spacing */
.sidebar-nav a .icon-svg {
    margin-right: 12px;
}

/* Remove margin when sidebar collapsed */
.sidebar.collapsed .sidebar-nav a .icon-svg {
    margin-right: 0 !important;
}

/* ============================================
   Button Icons (Match Button Colors)
   ============================================ */

/* Solid buttons - white icons */
.btn-primary .icon-svg,
.btn-success .icon-svg,
.btn-danger .icon-svg,
.btn-info .icon-svg,
.btn-secondary .icon-svg,
.btn-dark .icon-svg,
.btn-light .icon-svg {
    filter: brightness(0) saturate(100%) invert(1) !important;
    opacity: 1 !important;
}

/* Outline buttons - colored icons to match text */

/* Primary/Blue outline buttons */
.btn-outline-primary .icon-svg {
    filter: brightness(0) saturate(100%) invert(39%) sepia(57%) saturate(1476%) hue-rotate(183deg) brightness(91%) contrast(88%) !important;
    opacity: 1 !important;
}

/* Danger/Red outline buttons */
.btn-outline-danger .icon-svg {
    filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(3283%) hue-rotate(345deg) brightness(95%) contrast(94%) !important;
    opacity: 1 !important;
}

/* Success/Green outline buttons */
.btn-outline-success .icon-svg {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(444%) hue-rotate(84deg) brightness(95%) contrast(89%) !important;
    opacity: 1 !important;
}

/* Info outline buttons */
.btn-outline-info .icon-svg {
    filter: brightness(0) saturate(100%) invert(57%) sepia(93%) saturate(3411%) hue-rotate(167deg) brightness(91%) contrast(91%) !important;
    opacity: 1 !important;
}

/* Warning outline buttons - dark icons for yellow background */
.btn-warning .icon-svg,
.btn-outline-warning .icon-svg {
    filter: brightness(0) saturate(100%) !important;
    opacity: 0.8 !important;
}

/* Secondary/Dark outline buttons */
.btn-outline-secondary .icon-svg,
.btn-outline-dark .icon-svg {
    filter: brightness(0) saturate(100%) !important;
    opacity: 0.8 !important;
}

/* Light outline buttons - keep icons dark */
.btn-outline-light .icon-svg {
    filter: brightness(0) saturate(100%) !important;
    opacity: 0.8 !important;
}

/* Exception: Sidebar light outline buttons start with white icons */
.sidebar .btn-outline-light .icon-svg {
    filter: brightness(0) saturate(100%) invert(1) !important;
    opacity: 1 !important;
}

/* On hover, turn dark for light background */
.sidebar .btn-outline-light:hover .icon-svg {
    filter: brightness(0) saturate(100%) !important;
    opacity: 0.8 !important;
}

/* Outline buttons on hover - icons turn white */
.btn-outline-primary:hover .icon-svg,
.btn-outline-danger:hover .icon-svg,
.btn-outline-success:hover .icon-svg,
.btn-outline-info:hover .icon-svg,
.btn-outline-secondary:hover .icon-svg,
.btn-outline-dark:hover .icon-svg,
.btn-outline-warning:hover .icon-svg {
    filter: brightness(0) saturate(100%) invert(1) !important;
    opacity: 1 !important;
}

/* ============================================
   Text Color Classes (for non-button icons)
   ============================================ */

/* Blue text icons */
.text-primary .icon-svg,
a.text-primary .icon-svg {
    filter: brightness(0) saturate(100%) invert(39%) sepia(57%) saturate(1476%) hue-rotate(183deg) brightness(91%) contrast(88%) !important;
    opacity: 1 !important;
}

/* Red text icons */
.text-danger .icon-svg,
a.text-danger .icon-svg {
    filter: brightness(0) saturate(100%) invert(28%) sepia(93%) saturate(3283%) hue-rotate(345deg) brightness(95%) contrast(94%) !important;
    opacity: 1 !important;
}

/* Green text icons */
.text-success .icon-svg,
a.text-success .icon-svg {
    filter: brightness(0) saturate(100%) invert(48%) sepia(79%) saturate(444%) hue-rotate(84deg) brightness(95%) contrast(89%) !important;
    opacity: 1 !important;
}

/* ============================================
   Hover & Active States
   ============================================ */

/* Increase opacity on hover */
a:hover .icon-svg,
button:hover .icon-svg,
.btn:hover .icon-svg {
    opacity: 1 !important;
}

/* Active/selected states */
a.active .icon-svg,
.active .icon-svg {
    opacity: 1 !important;
}

/* ============================================
   Special Cases
   ============================================ */

/* Icon selector - selected icon should be white */
.icon-option.selected .icon-svg,
.icon-option.selected img.icon-svg {
    filter: brightness(0) saturate(100%) invert(1) !important;
    opacity: 1 !important;
}

/* Icon selector - larger icons */
.icon-option {
    font-size: 28px;
}

.icon-option .icon-svg {
    margin-right: 0;
}

/* Icons without right margin (when needed) */
.icon-svg.no-margin,
.icon-svg:last-child {
    margin-right: 0;
}

/* Centered icons */
.icon-svg.centered {
    display: block;
    margin: 0 auto;
}