/* Custom Purple Color for ANPR Exit Widget */

/* Purple color scheme */
:root {
    --purple: #9b7dd4;
    --purple-rgb: 155, 125, 212;
}

/* Purple subtle background */
.bg-purple-subtle {
    background-color: rgba(var(--purple-rgb), 0.1) !important;
}

/* Purple background */
.bg-purple {
    background-color: var(--purple) !important;
}

/* Purple text */
.text-purple {
    color: var(--purple) !important;
}

/* Purple border */
.border-purple {
    border-color: var(--purple) !important;
}

/* Purple badge */
.badge.bg-purple {
    color: #fff;
    background-color: var(--purple) !important;
}

/* Purple button */
.btn-purple {
    color: #fff;
    background-color: var(--purple);
    border-color: var(--purple);
}

.btn-purple:hover {
    color: #fff;
    background-color: #8366c7;
    border-color: #8366c7;
}

/* Soft purple button */
.btn-soft-purple {
    color: var(--purple);
    background-color: rgba(var(--purple-rgb), 0.1);
    border-color: transparent;
}

.btn-soft-purple:hover {
    color: #fff;
    background-color: var(--purple);
    border-color: var(--purple);
}

/* Sidebar Minimization Fixes */
.minimized-menu-header {
    display: none;
    /* Hide by default on full sidebar */
}

/* Force hide menu text when sidebar is small - TARGETING HOME SPECIFICALLY & GLOBALLY */
@media (min-width: 768px) {

    /* Show our custom header ONLY when sidebar is minimized */
    /* =========================================
       SIDEBAR INTERACTION FIXES - FINAL
       ========================================= */

    /* 1. HOME LINK TEXT HIDDEN (Naked Node Logic) */
    /* Use font-size: 0 on parent to hide text node, then restore icon size */
    html[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link[data-key="t-home"] {
        font-size: 0 !important;
    }

    html[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-link[data-key="t-home"] i {
        font-size: 22px !important;
        /* Restore Icon Size */
        margin-right: 0 !important;
        text-align: center;
        width: 100%;
        display: block !important;
    }

    /* Restore Text on Hover */
    html[data-sidebar-size="sm-hover"] .navbar-menu .navbar-nav .nav-link[data-key="t-home"],
    html[data-sidebar-size="sm-hover-active"] .navbar-menu .navbar-nav .nav-link[data-key="t-home"] {
        font-size: 15px !important;
        /* Restore text size */
    }

    /* 2. POPUP MENU BORDER RADIUS */
    /* UPDATED: Applied ONLY to UL (inner list) to avoid breaking .menu-dropdown collapse state */
    html[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item .menu-dropdown>ul,
    html[data-sidebar-size="sm-hover"] .navbar-menu .navbar-nav .nav-item .menu-dropdown>ul {
        border-radius: 8px !important;
        overflow: hidden !important;
        background-color: #405189 !important;
        /* Ensure background matches */
    }

    /* Ensure no inner items override radius */
    html[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item .menu-dropdown .nav-link,
    html[data-sidebar-size="sm-hover"] .navbar-menu .navbar-nav .nav-item .menu-dropdown .nav-link {
        border-radius: 0 !important;
    }

    /* Force top/bottom corners on first/last items just in case */
    html[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item .menu-dropdown>ul>li:first-child .nav-link,
    html[data-sidebar-size="sm-hover"] .navbar-menu .navbar-nav .nav-item .menu-dropdown>ul>li:first-child .nav-link {
        border-top-left-radius: 8px !important;
        border-top-right-radius: 8px !important;
    }

    html[data-sidebar-size="sm"] .navbar-menu .navbar-nav .nav-item .menu-dropdown>ul>li:last-child .nav-link,
    html[data-sidebar-size="sm-hover"] .navbar-menu .navbar-nav .nav-item .menu-dropdown>ul>li:last-child .nav-link {
        border-bottom-left-radius: 8px !important;
        border-bottom-right-radius: 8px !important;
    }

    /* Ensure default icons are centered in SM mode */
    html[data-sidebar-size="sm"] .navbar-menu .navbar-nav>.nav-item>.nav-link>i {
        margin-right: 0 !important;
        text-align: center;
        width: 100%;
        display: block !important;
        font-size: 22px !important;
    }
}
/* ============================================
   AI Mode Toggle Styles
   ============================================ */

/* AI Mode Toggle - Same base style as other topbar icons */
.ai-mode-toggle {
    /* Uses same classes as dark mode toggle: btn btn-icon btn-topbar btn-ghost-secondary rounded-circle */
    transition: all 0.3s ease;
}

/* AI Mode ON - Active state with purple color */
.ai-mode-toggle.active {
    color: #e879f9 !important;
}

.ai-mode-toggle.active:hover {
    opacity: 0.8;
    color: #d946ef !important;
}

/* Pulse Animation for AI Icon when ON */
.ai-mode-toggle.active .ai-icon-pulse {
    animation: ai-pulse 2s ease-in-out infinite;
    display: inline-block;
}

@keyframes ai-pulse {
    0%, 100% {
        opacity: 1;
        transform: scale(1);
    }
    50% {
        opacity: 0.7;
        transform: scale(1.15);
    }
}

/* AI Mode OFF - Star icon styling (using native ri-star-off-line icon) */
/* Styling removed - using default icon appearance */