/*
 * BRANDING.CSS
 * Dynamic branding styles for Panel
 * 
 * USAGE:
 * - Colors are set via CSS custom properties from IBrandingService
 * - Variables are set in _Layout.cshtml on document root
 * 
 * VARIABLES:
 * - --panel-primary-color: Company primary brand color
 * - --panel-secondary-color: Company secondary brand color
 * - --panel-primary-rgb: RGB values for primary color (for rgba() usage)
 * 
 * Last Updated: January 2026
 */

/* ===========================
   COLOR VARIABLES (set dynamically)
   =========================== */

:root {
    /* Default fallback colors (Sparkus dark navy) */
    --panel-primary-color: #0f2438;
    --panel-secondary-color: #3d6f94;
    --panel-primary-rgb: 15, 36, 56;
}

/* ===========================
   BOOTSTRAP OVERRIDES
   =========================== */

/* Override Bootstrap primary color with brand color */
:root {
    --bs-primary: var(--panel-primary-color);
    --bs-primary-rgb: var(--panel-primary-rgb);
}

/* ===========================
   METRONIC COMPONENT BRANDING
   =========================== */

/* Apply branding to key Metronic elements */
.app-sidebar-logo .app-sidebar-logo-default {
    color: var(--panel-primary-color);
}

.menu-link.active {
    color: var(--panel-primary-color);
}

/* btn-primary gradient is handled by sparkus-metronic-bridge.css
   Only override if tenant has custom branding color */

/* ===========================
   LIGHT SIDEBAR THEME
   =========================== */

[data-kt-app-layout="light-sidebar"] .app-sidebar {
    background-color: #ffffff;
}

[data-kt-app-layout="light-sidebar"] .menu-link.active {
    background-color: rgba(var(--panel-primary-rgb), 0.06);
    color: var(--panel-primary-color);
    font-weight: 600;
}

[data-kt-app-layout="light-sidebar"] .menu-link:hover:not(.active) {
    background-color: rgba(var(--panel-primary-rgb), 0.03);
}

/* ===========================
   RESPONSIVE DESIGN
   =========================== */

@media (max-width: 991.98px) {
    /* Mobile sidebar adjustments */
    [data-kt-app-layout="light-sidebar"] .app-sidebar {
        box-shadow: 0 0 20px rgba(0, 0, 0, 0.1);
    }
}