/*================================================================================
	Item Name: Vuexy - Vuejs, HTML & Laravel Admin Dashboard Template
	Version: 2.0
	Author: PIXINVENT
	Author URL: http://www.themeforest.net/user/pixinvent
================================================================================

NOTE:
------
PLACE HERE YOUR OWN SCSS CODES AND IF NEEDED, OVERRIDE THE STYLES FROM THE OTHER STYLESHEETS.
WE WILL RELEASE FUTURE UPDATES SO IN ORDER TO NOT OVERWRITE YOUR STYLES IT'S BETTER LIKE THIS.  */

/* ============================================
   BKUC Custom Theme Colors
   Primary: #455e48 (Green)
   Accent: #da251c (Red)
   Gold: #bda751 (Gold)
============================================ */

:root {
    --bkuc-primary: #455e48;
    --bkuc-primary-light: #5a7a5d;
    --bkuc-primary-dark: #2f4032;
    --bkuc-red: #da251c;
    --bkuc-accent: #a03609;
    --bkuc-gold: #a03609;
    --bkuc-white: #fff;
}

/* Sidebar Background */
.main-menu.menu-light {
    /* background: linear-gradient(
        180deg,
        var(--bkuc-primary) 0%,
        var(--bkuc-primary-dark) 100%
    ); */
}

/* Sidebar Menu Items */
.main-menu.menu-light .navigation > li > a {
    /* color: rgba(255, 255, 255, 0.9) !important; */
}

.main-menu.menu-light .navigation > li > a:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    /* color: #fff !important; */
}

/* Active Menu Item */
.main-menu.menu-light .navigation > li.active > a {
    background: linear-gradient(135deg, #da251c, #a03609) !important;
    /* box-shadow: 0 0 15px 1px rgba(218, 37, 28, 0.6) !important; */
    box-shadow: 0 0 15px 1px rgb(218 37 28 / 8%) !important;

    color: var(--bkuc-white) !important;
}

.main-menu.menu-light .navigation > li.active > a svg,
.main-menu.menu-light .navigation > li.active > a i {
    color: var(--bkuc-white) !important;
}

/* Submenu Background */
.main-menu.menu-light .navigation > li ul {
    background-color: rgba(0, 0, 0, 0.15) !important;
}

.main-menu.menu-light .navigation > li ul a {
    color: rgba(255, 255, 255, 0.85) !important;
}

/* Brand Logo Text */
.main-menu .navbar-header .navbar-brand p {
    color: var(--bkuc-white) !important;
}

/* Navigation Icons */
.main-menu .navigation svg,
.main-menu .navigation i:not(.toggle-icon) {
    color: rgba(255, 255, 255, 0.85) !important;
}

.main-menu.menu-light .navigation li.active svg,
.main-menu.menu-light .navigation li.active i {
    color: var(--bkuc-white) !important;
}

/* Navigation Header Text */
.main-menu .navigation-header {
    padding: 0.8rem 1.5rem;
    margin-top: 0.5rem;
}

.main-menu .navigation-header span {
    color: #6e6b7b !important;
    font-size: 0.857rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.main-menu.menu-light .navigation-header span {
    color: #6e6b7b !important;
}

.main-menu .navigation-header svg,
.main-menu .navigation-header i {
    color: #6e6b7b !important;
}

/* Primary Buttons */
.btn-primary,
.apply-button {
    background: linear-gradient(135deg, var(--bkuc-red), var(--bkuc-gold));
    color: var(--bkuc-white);
    border: none;
    box-shadow: 0 0 10px 1px rgba(218, 37, 28, 0.3);
}

.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.apply-button:hover {
    background: linear-gradient(135deg, #b01d15, #a08d3e);
    color: var(--bkuc-white);
    border: none;
    box-shadow: 0 0 15px 1px rgba(218, 37, 28, 0.5);
}

/* Success/Gold Buttons */
.btn-success {
    background: linear-gradient(135deg, var(--bkuc-gold), #d4c176);
    border: none;
}

.btn-success:hover {
    background: linear-gradient(135deg, #a08d3e, var(--bkuc-gold));
    border: none;
}

/* Danger/Accent Buttons */
.btn-danger {
    background: linear-gradient(135deg, var(--bkuc-red), #e54639);
    border: none;
}

.btn-danger:hover {
    background: linear-gradient(135deg, #b01d15, var(--bkuc-red));
    border: none;
}

/* Links */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--bkuc-primary);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--bkuc-primary-dark);
}

/* Header nav links – ensure visible on hover/active over dark backgrounds */
.nav-link.nav-link-white {
    color: rgba(255, 255, 255, 0.8);
}

.nav-link.nav-link-white:hover,
.nav-link.nav-link-white:focus,
.nav-link.nav-link-white:active {
    color: #fbbf24 !important; /* warm amber for contrast */
}

/* Admin Navbar Styling */
.header-navbar {
    background: linear-gradient(135deg, #da251c, #a03609) !important;
}

/* Form Focus */
.form-control:focus,
.custom-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--bkuc-gold) !important;
    box-shadow: 0 3px 10px 0 rgba(189, 167, 81, 0.3) !important;
    outline: none !important;
}

/* Remove default blue/green outline */
*:focus {
    outline: none !important;
}

/* Links Hover */
a:not(.btn):not(.nav-link):not(.dropdown-item) {
    color: var(--bkuc-red);
}

a:not(.btn):not(.nav-link):not(.dropdown-item):hover {
    color: var(--bkuc-gold);
}

/* Pagination Active */
.page-item.active .page-link {
    background: linear-gradient(
        135deg,
        var(--bkuc-red),
        var(--bkuc-gold)
    ) !important;
    border-color: var(--bkuc-red) !important;
}

.page-link:hover {
    color: var(--bkuc-red) !important;
    background-color: rgba(218, 37, 28, 0.1) !important;
}

.page-link:focus {
    box-shadow: 0 0 0 0.2rem rgba(218, 37, 28, 0.25) !important;
}

/* Checkbox and Radio Focus/Checked */
.custom-control-input:checked ~ .custom-control-label::before,
input[type="checkbox"]:checked,
input[type="radio"]:checked {
    background-color: var(--bkuc-red) !important;
    border-color: var(--bkuc-red) !important;
}

.custom-control-input:focus ~ .custom-control-label::before {
    box-shadow: 0 0 0 0.2rem rgba(218, 37, 28, 0.25) !important;
}

/* Button Focus */
.btn:focus,
.btn:active:focus {
    box-shadow: 0 0 0 0.2rem rgba(218, 37, 28, 0.25) !important;
}

/* Dropdown Hover */
.dropdown-item:hover,
.dropdown-item:focus {
    background-color: rgba(218, 37, 28, 0.1) !important;
    color: var(--bkuc-red) !important;
}

.dropdown-item.active,
.dropdown-item:active {
    background: linear-gradient(
        135deg,
        var(--bkuc-red),
        var(--bkuc-gold)
    ) !important;
    color: var(--bkuc-white) !important;
}

/* Nav Pills */
.nav-pills .nav-link.active {
    background: linear-gradient(
        135deg,
        var(--bkuc-red),
        var(--bkuc-gold)
    ) !important;
}

/* Table Hover */
.table-hover tbody tr:hover {
    background-color: rgba(218, 37, 28, 0.05) !important;
}

/* Switch/Toggle */
.custom-switch .custom-control-input:checked ~ .custom-control-label::before {
    background-color: var(--bkuc-red) !important;
    border-color: var(--bkuc-red) !important;
}

/* Header Navbar */
.header-navbar.navbar-light.bg-primary,
.header-navbar.bg-primary {
    background: linear-gradient(
        135deg,
        var(--bkuc-red),
        var(--bkuc-gold)
    ) !important;
}

.header-navbar .navbar-container {
    background: transparent !important;
}

/* Navbar Text and Icons */
.header-navbar .nav-link,
.header-navbar .navbar-nav .nav-item a {
    color: var(--bkuc-white) !important;
}

.header-navbar .nav-link:hover {
    color: rgba(255, 255, 255, 0.8) !important;
}

.header-navbar svg,
.header-navbar i {
    color: var(--bkuc-white) !important;
}

/* Navbar Dropdown */
.header-navbar .dropdown-menu {
    border: none;
    box-shadow: 0 4px 24px 0 rgba(34, 41, 47, 0.1);
}

/* Override Core Theme Colors */
:root {
    --purple: var(--bkuc-red) !important;
    --primary: var(--bkuc-red) !important;
}

/* Replace all purple/blue theme colors with red-gold */
.bg-light-primary,
.badge-light-primary {
    background-color: rgba(218, 37, 28, 0.12) !important;
    color: var(--bkuc-red) !important;
}

.text-primary,
.link-primary {
    color: var(--bkuc-red) !important;
}

.border-primary {
    border-color: var(--bkuc-red) !important;
}

/* Badges */
.badge-primary {
    background: linear-gradient(
        135deg,
        var(--bkuc-red),
        var(--bkuc-gold)
    ) !important;
    color: var(--bkuc-white) !important;
}

/* Progress Bar */
.progress-bar-primary,
.progress-bar {
    background: linear-gradient(
        135deg,
        var(--bkuc-red),
        var(--bkuc-gold)
    ) !important;
}

/* Alerts */
.alert-primary {
    background-color: rgba(218, 37, 28, 0.12) !important;
    border-color: rgba(218, 37, 28, 0.3) !important;
    color: var(--bkuc-red) !important;
}

/* List Group */
.list-group-item.active {
    background-color: var(--bkuc-red) !important;
    border-color: var(--bkuc-red) !important;
}

/* Breadcrumb */
.breadcrumb-item.active {
    color: var(--bkuc-red) !important;
}

.breadcrumb-item a {
    color: var(--bkuc-red) !important;
}

/* Card Headers with bg-primary */
.card-header.bg-primary,
.bg-primary {
    background: linear-gradient(
        135deg,
        var(--bkuc-red),
        var(--bkuc-gold)
    ) !important;
    color: var(--bkuc-white) !important;
}

/* Dividers */
.divider.divider-primary .divider-text:before,
.divider.divider-primary .divider-text:after {
    border-color: var(--bkuc-red) !important;
}

/* Fix Navbar Header Logo Visibility */
.main-menu .navbar-header {
    position: relative;
    z-index: 10;
    padding: 1.5rem 1rem;
    min-height: 160px;
    display: flex;
    align-items: center;
}

.main-menu .navbar-header .navbar-nav {
    width: 100%;
}

.main-menu .navbar-header .navbar-brand {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    text-align: center;
}

.main-menu .navbar-header .brand-logo {
    flex-shrink: 0;
}

.main-menu .navbar-header .brand-logo img {
    display: block;
    max-width: 100px;
    height: auto;
    object-fit: contain;
}

.main-menu .navbar-header .brand-text {
    font-size: 0.95rem;
    line-height: 1.2;
    margin: 0;
    word-wrap: break-word;
    max-width: 100%;
}

.main-menu .navbar-header .nav-toggle {
    position: absolute;
    right: 1rem;
    top: 1rem;
}
.main-menu .navbar-header .navbar-brand .brand-logo img {
    max-width: 80px !important;
}