/* Color Palette Variables */
:root {
    --sandy-yellow: #F4EE7A !important;
    --pale-olive-green: #AED68C !important;
    --vanilla-ice: #FFF !important;
    --dark-cyan: #007C77 !important;
    --sandy-yellow-dark: #E6D96A !important;
    --pale-olive-dark: #9BC47C !important;
    --dark-cyan-light: #00A699 !important;
    --text-dark: #2c3e50 !important;
    --text-light: #ffffff !important;
}

html {
    font-size: 14px;
}

@media (min-width: 768px) {
    html {
        font-size: 16px;
    }
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem var(--dark-cyan) !important;
}

html {
    position: relative;
    min-height: 100%;
}

body {
    margin-bottom: 60px;
    color: var(--text-dark) !important;
}

/* FORCE Header/Navigation Styling */
.navbar.navbar-dark,
.main-nav.navbar.navbar-expand-lg.hover-navbar.dark-to-light.fixed-top.navbar-dark {
    background: linear-gradient(135deg, var(--dark-cyan) 0%, #005a56 100%) !important;
}

.navbar-brand,
.navbar-nav .nav-link {
    color: var(--text-light) !important;
}

    .navbar-nav .nav-link:hover {
        color: var(--sandy-yellow) !important;
        transition: color 0.3s ease !important;
    }

.dropdown-menu {
    background-color: var(--vanilla-ice) !important;
    border: 1px solid var(--pale-olive-green) !important;
}

.dropdown-item {
    color: var(--text-dark) !important;
}

    .dropdown-item:hover,
    .dropdown-item:focus {
        background-color: var(--pale-olive-green) !important;
        color: var(--text-dark) !important;
    }

/* FORCE Hero Section */
#hero {
    background: linear-gradient(135deg, var(--dark-cyan) 0%, #005a56 50%, var(--pale-olive-green) 100%) !important;
}

    #hero .overlay.bg-primary {
        background: linear-gradient(135deg, var(--dark-cyan) 0%, rgba(0, 124, 119, 0.8) 100%) !important;
    }

/* FORCE Button Styling */
.btn-primary {
    background-color: var(--dark-cyan) !important;
    border-color: var(--dark-cyan) !important;
    color: var(--text-light) !important;
}

    .btn-primary:hover,
    .btn-primary:focus,
    .btn-primary:active {
        background-color: var(--dark-cyan-light) !important;
        border-color: var(--dark-cyan-light) !important;
        color: var(--text-light) !important;
        transform: translateY(-2px) !important;
        transition: all 0.3s ease !important;
    }

.btn-warning {
    background-color: var(--dark-cyan) !important;
    border-color: var(--dark-cyan-light) !important;
    color: var(--vanilla-ice) !important;
}

    .btn-warning:hover,
    .btn-warning:focus,
    .btn-warning:active {
/*        background-color: var(--dark-cyan) !important;
        border-color: var(--sandy-yellow-dark) !important;*/
/*        color: var(--text-dark) !important;*/
        transform: translateY(-2px) !important;
        transition: all 0.3s ease !important;
    }

.btn-secondary {
    background-color: var(--pale-olive-green) !important;
    border-color: var(--pale-olive-green) !important;
    color: var(--text-dark) !important;
}

    .btn-secondary:hover,
    .btn-secondary:focus,
    .btn-secondary:active {
        background-color: var(--pale-olive-dark) !important;
        border-color: var(--pale-olive-dark) !important;
        color: var(--text-dark) !important;
    }

/* FORCE Form Styling */
.form-control {
    border: 2px solid var(--pale-olive-green) !important;
    border-radius: 8px !important;
    transition: border-color 0.3s ease !important;
}

    .form-control:focus {
        border-color: var(--dark-cyan) !important;
        box-shadow: 0 0 0 0.2rem rgba(0, 124, 119, 0.25) !important;
    }

/* FORCE Card/Background Styling */
.bg-white {
    background-color: var(--vanilla-ice) !important;
}

.shadow-sm {
    box-shadow: 0 0.125rem 0.5rem rgba(0, 124, 119, 0.15) !important;
}

.bg-light {
    background-color: var(--vanilla-ice) !important;
}

.bg-secondary {
    background-color: var(--dark-cyan) !important;
}

/* FORCE Text Colors */
.text-primary {
    color: var(--dark-cyan) !important;
}

.text-warning {
    color: var(--sandy-yellow-dark) !important;
}

/* FORCE Border Colors */
.border-warning {
    border-color: var(--sandy-yellow) !important;
}

.bg-warning {
    background-color: var(--sandy-yellow) !important;
}

.divider.bg-warning {
    background-color: var(--sandy-yellow) !important;
}

/* FORCE Footer Styling */
footer.bg-secondary,
footer.bg-secondary .footer-dark {
    background: linear-gradient(135deg, var(--dark-cyan) 0%, #005a56 100%) !important;
    color: var(--text-light) !important;
}

footer h4,
footer p,
footer address,
footer .widget-content {
    color: var(--text-light) !important;
}

footer a {
    color: var(--sandy-yellow) !important;
    transition: color 0.3s ease !important;
}

    footer a:hover {
        color: var(--pale-olive-green) !important;
    }

/* FORCE QR Scanner Styling */
#qr-reader__dashboard_section_csr span button,
#qr-reader__dashboard_section_csr div button {
    background-color: var(--sandy-yellow) !important;
    color: var(--text-dark) !important;
    border: 1px solid var(--sandy-yellow-dark) !important;
}

    #qr-reader__dashboard_section_csr span button:hover,
    #qr-reader__dashboard_section_csr div button:hover {
        background-color: var(--sandy-yellow-dark) !important;
    }

#qr-reader__dashboard_section_swaplink {
    color: var(--dark-cyan) !important;
}

    #qr-reader__dashboard_section_swaplink:hover {
        color: var(--sandy-yellow-dark) !important;
    }

/* FORCE Table Styling */
.table {
    background-color: var(--vanilla-ice) !important;
}

    .table th {
        background-color: var(--pale-olive-green) !important;
        color: var(--text-dark) !important;
        border-color: var(--pale-olive-dark) !important;
    }

    .table td {
        border-color: var(--pale-olive-green) !important;
    }

/* FORCE Social Icons */
.social-icon a {
    color: var(--sandy-yellow) !important;
    transition: color 0.3s ease !important;
}

    .social-icon a:hover {
        color: var(--pale-olive-green) !important;
        transform: scale(1.1) !important;
        transition: all 0.3s ease !important;
    }

/* Additional specific overrides for your theme */
.main-nav {
    background: linear-gradient(135deg, var(--dark-cyan) 0%, #005a56 100%) !important;
}

/* Override any remaining primary colors */
.bg-primary {
    background-color: var(--dark-cyan) !important;
}

/* Override text colors that might be set by theme */
.text-light {
    color: var(--text-light) !important;
}

.bg-gradient-primary{
    background-image:none !important;
    background-color: var(--dark-cyan);
}

.summary-header {
    font-size: 1.3rem;
    font-weight: bold;
    margin-bottom: 15px;
    color: var(--dark-cyan);
}