/* 
   Custom CSS overrides for SK Realtors Dashboard
   Primary color: #09223d (Navy)
   Accent/Success variant: #e9d481 (Gold)
   Light variant: #faf5dc (Light Gold/Cream)
*/

:root,
[data-bs-theme=light] {
    --bs-primary: #09223d !important;
    --bs-primary-rgb: 9, 34, 61 !important;
    --bs-primary-text-emphasis: #051425 !important;
    --bs-primary-bg-subtle: #f6edcc !important;
    --bs-primary-border-subtle: #ebdca2 !important;
    
    --bs-success: #e9d481 !important;
    --bs-success-rgb: 233, 212, 129 !important;
    --bs-success-bg-subtle: #f6edcc !important;
    --bs-success-border-subtle: #ebdca2 !important;
    --bs-success-text-emphasis: #75621e !important;

    --bs-link-color: #09223d !important;
    --bs-link-hover-color: #e9d481 !important;
    --bs-link-color-rgb: 9, 34, 61 !important;
    --bs-link-hover-color-rgb: 233, 212, 129 !important;

    --bs-header-bg-dark: #09223d !important;
    --bs-header-bg: #fff !important;
}

[data-bs-theme=dark] {
    --bs-primary: #e9d481 !important;
    --bs-primary-rgb: 233, 212, 129 !important;
    --bs-primary-text-emphasis: #f3e8bf !important;
    --bs-primary-bg-subtle: #0d1e33 !important;
    --bs-primary-border-subtle: #19385c !important;
    
    --bs-success: #e9d481 !important;
    --bs-success-rgb: 233, 212, 129 !important;
    --bs-success-bg-subtle: #0d1e33 !important;
    --bs-success-border-subtle: #19385c !important;
    --bs-success-text-emphasis: #f3e8bf !important;

    --bs-link-color: #e9d481 !important;
    --bs-link-hover-color: #f0e2ac !important;
    --bs-link-color-rgb: 233, 212, 129 !important;
    --bs-link-hover-color-rgb: 240, 226, 172 !important;
}

/* Header Topbar brand box styling */
[data-topbar=dark] .navbar-brand-box {
    background-color: #09223d !important;
    border-right: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 70px !important;
}

/* Perfect alignment and centering for the logo image */
.logo {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100% !important;
    width: 100% !important;
}

.logo img {
    max-height: 60px !important;
    height: 60px !important;
    max-width: 90% !important;
    width: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* Fix double logo display by ensuring inactive logo theme is hidden */
[data-topbar=dark] .logo-dark {
    display: none !important;
}
[data-topbar=light] .logo-light {
    display: none !important;
}

/* Ensure hamburger menu toggle is always visible */
#vertical-menu-btn {
    display: block !important;
}

/* Make hamburger menu toggle button white, as the topbar and brand box are both navy #09223d */
body[data-sidebar-size=sm] #vertical-menu-btn,
body:not([data-sidebar-size=sm]) #vertical-menu-btn {
    color: #ffffff !important;
}

/* =========================================================
   Sidebar Custom Sizing and Alignments
   ========================================================= */

/* 1. Expanded Sidebar Sizing (Default width: 250px -> 290px) */
.vertical-menu {
    width: 290px !important;
}
.main-content {
    margin-left: 290px !important;
}
.navbar-brand-box {
    width: 290px !important;
}
.footer {
    left: 290px !important;
}
body[data-layout-size=boxed] .footer {
    max-width: calc(1300px - 290px) !important;
}

/* 2. Collapsed Sidebar Sizing (Default width: 70px -> 100px) */
body[data-sidebar-size=sm] .vertical-menu {
    width: 100px !important;
}
body[data-sidebar-size=sm] .main-content {
    margin-left: 100px !important;
}
body[data-sidebar-size=sm] .navbar-brand-box {
    width: 100px !important;
}
body[data-sidebar-size=sm] .footer {
    left: 100px !important;
}
body[data-layout-size=boxed][data-sidebar-size=sm] .footer {
    max-width: calc(1300px - 100px) !important;
}

/* Adjust hover state width for collapsed sidebar items and menus */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    width: calc(190px + 100px) !important;
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > ul {
    left: 100px !important;
}

/* 3. Center Collapsed Sidebar Icons */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li > a {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 15px 0 !important; /* Remove horizontal padding, center icons vertically and horizontally */
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li > a i,
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li > a svg {
    margin: 0 !important; /* Reset icon offset margins to center perfectly */
}

/* Revert alignment rules for the hover/expanded state in collapsed mode without moving the icon */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    display: flex !important;
    justify-content: flex-start !important;
    align-items: center !important;
    padding: 15px 0 15px 41px !important; /* Keeps icon center at 50px (41px left + 9px half-width of 18px icon) */
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i,
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a svg {
    margin: 0 !important; /* Keeps icon margin at 0 so it stays exactly at 41px left */
}
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a span {
    padding-left: 15px !important; /* Clean text spacing from the icon */
}

/* Sidebar hover state in collapsed mode (show white background and navy text for section name popups) */
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a {
    background-color: #ffffff !important;
    color: #09223d !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a span {
    color: #09223d !important;
    font-weight: 600 !important;
}

body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a i,
body[data-sidebar-size=sm] .vertical-menu #sidebar-menu > ul > li:hover > a svg {
    color: #09223d !important;
}

/* Sidebar Menu active state overrides */
#sidebar-menu ul li.mm-active > a,
#sidebar-menu ul li a.active {
    color: #09223d !important;
    background-color: #ffeb9c !important;
    font-weight: 600;
}

#sidebar-menu ul li.mm-active > a i,
#sidebar-menu ul li.mm-active > a svg,
#sidebar-menu ul li a.active i,
#sidebar-menu ul li a.active svg {
    color: #09223d !important;
}

/* Sidebar Menu hover state overrides */
#sidebar-menu ul li a:hover {
    color: #09223d !important;
    background-color: rgba(233, 212, 129, 0.15) !important;
}

#sidebar-menu ul li a:hover i,
#sidebar-menu ul li a:hover svg {
    color: #09223d !important;
}

/* =========================================================
   Force Navy (#09223d) and Gold (#e9d481) on elements
   ========================================================= */

/* Primary button */
.btn-primary {
    background-color: #09223d !important;
    border-color: #09223d !important;
    color: #fff !important;
}
.btn-primary:hover,
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    background-color: #ffeb9c !important;
    border-color: #ffeb9c !important;
    color: #09223d !important;
}
.btn-primary:disabled,
.btn-primary.disabled {
    background-color: #09223d !important;
    border-color: #09223d !important;
}

/* Outline primary button */
.btn-outline-primary {
    color: #09223d !important;
    border-color: #09223d !important;
    background-color: transparent !important;
}
.btn-outline-primary:hover,
.btn-outline-primary:focus,
.btn-outline-primary:active {
    background-color: #09223d !important;
    border-color: #09223d !important;
    color: #fff !important;
}

/* Soft primary button */
.btn-soft-primary {
    background-color: #ffeb9c !important;
    border-color: #ffeb9c !important;
    color: #09223d !important;
}
.btn-soft-primary:hover,
.btn-soft-primary:focus {
    background-color: #09223d !important;
    color: #fff !important;
}

/* Soft danger/delete button overrides to match edit button colors */
.btn-soft-danger {
    background-color: #ffeb9c !important;
    border-color: #ffeb9c !important;
    color: #09223d !important;
}
.btn-soft-danger:hover,
.btn-soft-danger:focus,
.btn-soft-danger:active {
    background-color: #09223d !important;
    border-color: #09223d !important;
    color: #fff !important;
}

/* Pagination active page */
.page-item.active .page-link {
    background-color: #09223d !important;
    border-color: #09223d !important;
    color: #fff !important;
}

/* Pagination links (hover / focus) */
.page-link {
    color: #09223d !important;
}
.page-link:hover,
.page-link:focus {
    color: #e9d481 !important;
    background-color: #09223d !important;
    border-color: #09223d !important;
}

/* Badge primary */
.badge.bg-primary,
.badge-primary {
    background-color: #09223d !important;
    color: #fff !important;
}

/* Breadcrumb active link */
.breadcrumb-item a {
    color: #09223d !important;
}

/* Form focus ring */
.form-control:focus,
.form-select:focus {
    border-color: #e9d481 !important;
    box-shadow: 0 0 0 0.15rem rgba(233, 212, 129, 0.25) !important;
}

/* Input group addon */
.input-group-text {
    color: #09223d !important;
}

/* Primary border utility */
.border-primary {
    border-color: #09223d !important;
}

/* Text primary */
.text-primary {
    color: #09223d !important;
}

/* Background primary */
.bg-primary {
    background-color: #09223d !important;
}

/* Alert primary */
.alert-primary {
    background-color: #f6edcc !important;
    border-color: #ebdca2 !important;
    color: #051425 !important;
}

/* Card border primary subtle */
.border-primary-subtle {
    border-color: #ebdca2 !important;
}

/* Card header bg-primary-subtle */
.bg-primary-subtle {
    background-color: #ffeb9c !important;
}

/* Topbar dark background */
[data-topbar=dark] .navbar-header {
    background-color: #09223d !important;
}

/* Spinner / preloader accent */
.spinner-border.text-primary,
.spinner-grow.text-primary {
    color: #09223d !important;
}

/* =========================================================
   Collapse Add Button and Count Badge Overrides
   ========================================================= */

/* Collapse toggle button styles (Add New Banner, Add New Category, etc.) */
.page-content .btn-primary[data-bs-toggle="collapse"] {
    background-color: #09223d !important;
    /* border-color: #f6edcc !important; */
    color: #fff !important;
    font-weight: 500 !important;
}

.page-content .btn-primary[data-bs-toggle="collapse"]:hover,
.page-content .btn-primary[data-bs-toggle="collapse"]:focus,
.page-content .btn-primary[data-bs-toggle="collapse"]:active {
    background-color: #ffeb9c !important;
    /* border-color: #e9d481 !important; */
    color: #09223d !important;
}

/* Success-subtle badge overrides (Total Banners, Total Categories, etc.) */
.badge.bg-success-subtle.text-success {
    background-color: #ffeb9c !important;
    color: #09223d !important;
    /* border: 1px solid rgba(233, 212, 129, 0.3) !important; */
}

/* Remove box shadow / border shadow globally from all buttons */
.btn, 
.btn:focus, 
.btn:active, 
.btn:hover, 
.btn.active {
    box-shadow: none !important;
    outline: none !important;
}

/* Reset button hover customization */
button[type="reset"]:hover,
.btn-outline-secondary:hover {
    background-color: #ffeb9c !important;
    border-color: #ffeb9c !important;
    color: #09223d !important;
}