/**
 * =============================================================================
 * CUSTOMIZABLE THEME CONFIGURATION (theme.css)
 * =============================================================================
 * Use this file to easily change the global accent color and sidebar (navigation) 
 * colors of the administration portal.
 * 
 * To customize a color, simply update the corresponding variable in the :root selector.
 * =============================================================================
 */

:root {
    /* -------------------------------------------------------------------------
       1. GLOBAL ACCENT / PRIMARY COLOR
       ------------------------------------------------------------------------- */
    /* The main primary color used for buttons, links, active states, and highlights */
    --theme-accent-color: #3A9BE6;
    --theme-accent-hover: #3A9BE6; 
    
    --theme-accent-rgb: 0, 168, 107;

    /* -------------------------------------------------------------------------
       2. SIDEBAR (NAVIGATION MENU) COLORS
       ------------------------------------------------------------------------- */
    /* Background color of the entire left sidebar */
    --theme-sidebar-bg: #FFFFFF;            
    
    /* Idle/unselected menu item text & icon color */
    --theme-sidebar-item-color: rgb(73, 73, 73); 
    
    /* Hovered menu item text & icon color */
    --theme-sidebar-item-hover-color: #3A9BE6;
    
    /* Active (currently selected) menu item text & icon color */
    --theme-sidebar-item-active-color: #FFFFFF;
    
    /* Active menu item background pill color */
    --theme-sidebar-item-active-bg: #3A9BE6; 
    
    /* Sidebar borders and separator lines */
    --theme-sidebar-border: rgba(99, 99, 99, 0.06);

    /* Sidebar brand/logo and user section divider backgrounds */
    --theme-sidebar-brand-bg: var(--theme-sidebar-bg);
    --theme-sidebar-user-bg: rgba(255, 255, 255, 0.02);

    /* -------------------------------------------------------------------------
       3. BRAND LOGOS (PATH RELATIVE TO THIS CSS FILE)
       ------------------------------------------------------------------------- */
    /* Large logo for light background layout modes */
    --theme-logo-light: url('../images/logo.png');
    /* Large logo for dark background layout modes */
    --theme-logo-dark: url('../images/logo-dark.png');
    /* Small logo / icon (collapsed sidebar layout mode) */
    --theme-logo-sm: url('../images/logo-sm.png');
    
}
















/* =============================================================================
   DO NOT MODIFY BEYOND THIS LINE (Automated Mappings to Dashboard Engine)
   ============================================================================= */

/* 1. MAP ACCENT COLOR TO BOOTSTRAP ENGINE */
html, :root {
    --ct-primary: var(--theme-accent-color) !important;
    --ct-primary-rgb: var(--theme-accent-rgb) !important;
    --ct-link-color: var(--theme-accent-color) !important;
    --ct-link-hover-color: var(--theme-accent-hover) !important;

}

/* 2. MAP SIDEBAR COLORS TO SIDEBAR ENGINE */
html,
html[data-menu-color="light"],
html[data-menu-color="dark"] {
    --ct-menu-bg: var(--theme-sidebar-bg) !important;
    --ct-menu-item-color: var(--theme-sidebar-item-color) !important;
    --ct-menu-item-hover-color: var(--theme-sidebar-item-hover-color) !important;
    --ct-menu-item-active-color: var(--theme-sidebar-item-active-color) !important;
    --ct-menu-item-active-bg: var(--theme-sidebar-item-active-bg) !important;
}

/* 3. SIDEBAR ELEMENT SPECIFIC OVERRIDES */
.sidenav-menu {
    background: var(--theme-sidebar-bg) !important;
    border-right: 1px solid var(--theme-sidebar-border) !important;
}

/* Toggle sidenav button */
.sidenav-menu .sidenav-toggle-button {
    background-color: var(--theme-sidebar-bg) !important;
    color: var(--theme-sidebar-item-color) !important;
    border-color: var(--ct-body-bg) !important;
}
.sidenav-menu .sidenav-toggle-button:hover {
    color: var(--theme-sidebar-item-hover-color) !important;
}

/* Logo container styling */
.sidenav-menu .logo {
    background: var(--theme-sidebar-brand-bg) !important;
    border-bottom: 1px solid var(--theme-sidebar-border) !important;
}

/* Sidenav user profile widget styling */
.sidenav-user {
    background-color: var(--theme-sidebar-user-bg) !important;
    border-top: 1px solid var(--theme-sidebar-border) !important;
    border-bottom: 1px solid var(--theme-sidebar-border) !important;
}
.sidenav-user .sidenav-user-name span {
    color: var(--theme-sidebar-item-hover-color) !important;
}
.sidenav-user .sidenav-user-name p {
    color: var(--theme-sidebar-item-color) !important;
}
.sidenav-user .sidenav-user-arrow {
    color: var(--theme-sidebar-item-color) !important;
}

/* Primary Sidebar Navigation Items */
.side-nav .side-nav-item .side-nav-link {
    color: var(--theme-sidebar-item-color) !important;
}
.side-nav .side-nav-item .side-nav-link:hover,
.side-nav .side-nav-item .side-nav-link:focus,
.side-nav .side-nav-item .side-nav-link:active {
    color: var(--theme-sidebar-item-hover-color) !important;
}

/* Active Pill Overrides */
.side-nav > .side-nav-item.active > .side-nav-link {
    color: var(--theme-sidebar-item-active-color) !important;
    background: var(--theme-sidebar-item-active-bg) !important;
}
.side-nav > .side-nav-item.active > .side-nav-link .menu-icon i,
.side-nav > .side-nav-item.active > .side-nav-link .menu-icon svg {
    color: #FFFFFF !important;
}

/* Submenu layout overrides */
.side-nav .sub-menu {
    background: transparent !important;
}
.side-nav .sub-menu .side-nav-item .side-nav-link {
    color: var(--theme-sidebar-item-color) !important;
}
.side-nav .sub-menu .side-nav-item .side-nav-link:hover {
    color: var(--theme-sidebar-item-hover-color) !important;
}
.side-nav .sub-menu .side-nav-item.active > .side-nav-link {
    color: var(--theme-sidebar-item-active-color) !important;
}

/* Sidenav Title header spacing and colors */
.side-nav .side-nav-title {
    color: var(--theme-sidebar-item-color) !important;
    opacity: 0.65 !important;
}

/* 4. LAYOUT RESPONSIVENESS AND COLLAPSED STATE SUPPORT */
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .logo {
    background: var(--theme-sidebar-brand-bg) !important;
}
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav > .side-nav-item:hover > .side-nav-link {
    color: var(--theme-sidebar-item-active-color) !important;
    background-color: var(--theme-sidebar-item-active-bg) !important;
}
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav .side-nav-item:hover > .collapse > .sub-menu,
html[data-sidenav-size="condensed"]:not([data-layout="topnav"]) .sidenav-menu .side-nav .side-nav-item:hover > .collapsing > .sub-menu {
    background-color: var(--theme-sidebar-bg) !important;
    border: 1px solid var(--theme-sidebar-border) !important;
}

/* 5. FORM AND ELEMENT-SPECIFIC BEAUTIFICATION FOR ACCENT COLORS */
/* Custom buttons */
.btn-primary {
    background-color: var(--theme-accent-color) !important;
    border-color: var(--theme-accent-color) !important;
}
.btn-primary:hover, .btn-primary:focus, .btn-primary:active {
    background-color: var(--theme-accent-hover) !important;
    border-color: var(--theme-accent-hover) !important;
}

/* Custom text and badge utilities */
.text-primary {
    color: var(--theme-accent-color) !important;
}
.bg-primary {
    background-color: var(--theme-accent-color) !important;
}

/* Active breadcrumb items */
.breadcrumb-item.active {
    color: var(--theme-accent-color) !important;
}

/* Focus and control glow */
.form-control:focus, .form-select:focus {
    border-color: rgba(var(--theme-accent-rgb), 0.5) !important;
    box-shadow: 0 0 0 0.15rem rgba(var(--theme-accent-rgb), 0.15) !important;
}
.form-check-input:checked {
    background-color: var(--theme-accent-color) !important;
    border-color: var(--theme-accent-color) !important;
}

/* SweetAlert buttons styling matching accent */
.swal2-styled.swal2-confirm {
    background-color: var(--theme-accent-color) !important;
}
.swal2-styled.swal2-confirm:hover {
    background-color: var(--theme-accent-hover) !important;
}

/* 6. BRAND LOGO STYLING OVERRIDES (OPTION B) */
.logo-img {
    background-repeat: no-repeat;
    background-size: contain;
    background-position: center;
    display: inline-block;
    height: 24px;         /* Optimal header/sidebar height */
    width: 120px;         /* Standard branding horizontal width */
    vertical-align: middle;
    transition: all 0.2s ease-in-out;
}

.logo-img-lg-light {
    background-image: var(--theme-logo-light);
}

.logo-img-lg-dark {
    background-image: var(--theme-logo-dark);
}

.logo-img-sm {
    background-image: var(--theme-logo-sm);
    width: 24px;          /* Square layout profile shape for collapsed sidebar */
    height: 24px;
}

.btn:hover {
  color: var(--ct-btn-hover-color);
  background-color: var(--theme-accent-hover);
  border-color: var(--theme-accent-hover);
}