:root,
[data-bs-theme=light] {
    --bs-primary: #5AB400;
    --bs-primary-rgb: 90, 180, 0;
    --bs-link-color: #5AB400;
    --bs-link-color-rgb: 90, 180, 0;
    --bs-link-hover-color: #4a9400;
    --bs-link-hover-color-rgb: 74, 148, 0;
    --bs-primary-bg-subtle: #f0f9e6;
    --bs-primary-border-subtle: #d2eeb3;
    --bs-primary-text-emphasis: #244800;

    --bs-success: #5AB400;
    --bs-success-rgb: 90, 180, 0;
    --bs-success-bg-subtle: #f0f9e6;
    --bs-success-border-subtle: #d2eeb3;

    /* Navy Blue for headings and certain backgrounds */
    --bs-heading-color: #284669;
    --bs-dark: #284669;
    --bs-dark-rgb: 40, 70, 105;
    --bs-info: #284669;
    --bs-info-rgb: 40, 70, 105;

    --premium-gradient: linear-gradient(135deg, #5AB400 0%, #4a9400 100%);
    --premium-navy-gradient: linear-gradient(135deg, #284669 0%, #1a3352 100%);
}

[data-bs-theme=dark] {
    --bs-primary: #5AB400;
    --bs-primary-rgb: 90, 180, 0;
    --bs-primary-bg-subtle: #1a3300;
    --bs-link-color: #5AB400;
    --bs-success: #5AB400;
    --bs-info: #284669;
}

/* Global Button Styling */
.btn-primary {
    background: var(--premium-gradient) !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(90, 180, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
}

.btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 15px rgba(90, 180, 0, 0.4) !important;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Sidebar / Menu Styling */
.bg-menu-theme {
    background: var(--premium-navy-gradient) !important;
    color: #fff !important;
}

.bg-menu-theme .menu-link,
.bg-menu-theme .menu-header {
    color: rgba(255, 255, 255, 0.8) !important;
    transition: all 0.2s ease;
}

.bg-menu-theme .menu-link:hover {
    color: #fff !important;
    background: rgba(255, 255, 255, 0.1) !important;
}

.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle) {
    background: var(--premium-gradient) !important;
    color: #fff !important;
    box-shadow: 0 4px 12px rgba(90, 180, 0, 0.4);
    font-weight: 600;
}

/* Active Menu Item Indicator */
.bg-menu-theme .menu-item.active>.menu-link:not(.menu-toggle)::before {
    content: '';
    position: absolute;
    left: 0;
    top: 20%;
    height: 60%;
    width: 4px;
    background: #fff;
    border-radius: 0 4px 4px 0;
}

/* POS Specific Overrides */
.pos-register-btn,
.pos-add-btn,
.pos-category-item.active,
.pos-total-label,
.pos-total-value,
.pos-summary-input:focus,
.pos-toggle-btn.active {
    background: var(--premium-gradient) !important;
    border-color: #5AB400 !important;
    color: #fff !important;
}

.pos-total-label,
.pos-total-value {
    background: transparent !important;
    color: #5AB400 !important;
}

#pos-autocomplete .suggestion-item i,
.pos-products-grid .item-card:hover,
.pos-products-list .item-card-list:hover,
.pos-products-list .item-card-list.active,
.pos-products-grid .item-card.active {
    color: #5AB400 !important;
    border-color: #5AB400 !important;
}

.pos-header {
    background: var(--premium-navy-gradient) !important;
    color: #fff !important;
}

.pos-header .text-heading,
.pos-header .btn-text-secondary {
    color: #fff !important;
}

/* Dashboard Cards and Widgets */
.card {
    border: none !important;
    box-shadow: 0 0.125rem 0.25rem rgba(165, 163, 174, 0.3) !important;
    border-radius: 0.75rem !important;
}

.card-title {
    color: var(--bs-heading-color) !important;
    font-weight: 600 !important;
}

/* Custom Profile styles */
.user-profile .icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 15px;
    border: 1px solid transparent;
}

.user-profile:hover .icon {
    border: 1px dashed;
    transition: 0.8 all ease;
}

.user-profile .title {
    font-size: 16px;
    font-weight: 500;
    color: var(--bs-card-title-color);
}

.user-profile .icon i {
    width: 20px;
    height: 20px;
}

.user-profile .purple {
    background-color: rgba(139, 92, 246, 0.1);
    color: #8b5cf6;
}

.user-profile .success {
    background-color: rgba(90, 180, 0, 0.15);
    color: #5AB400;
}

.user-profile .blue {
    background-color: #7eeefe57;
    color: #01A1B9;
}

.user-profile .danger {
    background-color: rgba(220, 53, 69, 0.1);
    color: #DC3545;
}

.purple-wrap:hover .title {
    color: #8b5cf6;
}

.success-wrap:hover .title {
    color: #5AB400;
}

.blue-wrap:hover .title {
    color: #01A1B9;
}

.danger-wrap:hover .title {
    color: #DC3545;
}

.h-40 {
    height: 40px;
}

.site-logo-sidebar img {
    max-height: 55px;
    max-width: 200px;
}

/* Forms and Inputs */
.form-control:focus,
.form-select:focus {
    border-color: #5AB400 !important;
    box-shadow: 0 0 0 0.25rem rgba(90, 180, 0, 0.25) !important;
}

/* Template Specific Overrides */
.card-border-shadow-primary {
    border-bottom: 2px solid #5AB400 !important;
}

.card-border-shadow-primary:hover {
    border-bottom-color: #4a9400 !important;
}

.bg-label-primary {
    background-color: #f0f9e6 !important;
    color: #5AB400 !important;
}

.bg-primary {
    background: var(--premium-gradient) !important;
}

.text-primary {
    color: #5AB400 !important;
}

.avatar-initial.bg-label-primary {
    background: #f0f9e6 !important;
    color: #5AB400 !important;
}

/* For other colors to fit the theme if needed, but keeping them mostly as is or slightly tinted */
.card-border-shadow-info {
    border-bottom: 2px solid #284669 !important;
}

.bg-label-info {
    background-color: rgba(40, 70, 105, 0.1) !important;
    color: #284669 !important;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.card {
    animation: fadeIn 0.5s ease-out;
}

/* Active State for Table Rows or List Items */
.table.datatables-basic tbody tr:hover {
    background-color: rgba(90, 180, 0, 0.05) !important;
}

/* Login Page Specific Overrides */
.authentication-wrapper.authentication-basic .authentication-inner::before {
    background: #5AB400 !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='238' height='233' viewBox='0 0 238 233' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='88.5605' y='0.700195' width='149' height='149' rx='19.5' stroke='%235AB400' stroke-opacity='0.16'/%3E%3Crect x='0.621094' y='33.761' width='200' height='200' rx='10' fill='%235AB400' fill-opacity='0.08'/%3E%3C/svg%3E") !important;
}

.authentication-wrapper.authentication-basic .authentication-inner::after {
    background: #5AB400 !important;
    mask-image: url("data:image/svg+xml,%3Csvg width='180' height='180' viewBox='0 0 180 180' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Crect x='1.30469' y='1.44312' width='178' height='178' rx='19' stroke='%235AB400' stroke-opacity='0.16' stroke-width='2' stroke-dasharray='8 8'/%3E%3Crect x='22.8047' y='22.9431' width='135' height='135' rx='10' fill='%235AB400' fill-opacity='0.08'/%3E%3C/svg%3E") !important;
}

.authentication-wrapper .authentication-inner .card {
    border-top: 4px solid #5AB400 !important;
}

/* Hide Install App Button */
@media (max-width: 991.98px) {
    #installApp {
        display: none !important;
    }
}