/* NCSU Colors */
:root {
    --wolfpack-red: #CC0000;
    --wolfpack-black: #000000;
    --wolfpack-white: #FFFFFF;
    --reynolds-red: #990000;
    --pyroman-flame: #D14905;
    --hunt-yellow: #FDD100;
    --genomic-green: #4F868E;
    --carmichael-aqua: #427E93;
    --innovation-blue: #4156A1;
    --bio-indigo: #4E2A84;

    /* Override Bootstrap variables with important flag */
    --bs-primary: #CC0000 !important;
    --bs-primary-rgb: 204, 0, 0 !important;
    --bs-progress-bar-bg: var(--hunt-yellow) !important;
    --bs-link-hover-color: var(--reynolds-red) !important;
    --bs-link-color: var(--wolfpack-red) !important;
}

/* Global Bootstrap overrides with max specificity */
html body .bg-primary,
html body.bg-primary,
html body div.bg-primary,
html body div[class*="bg-primary"],
html body .navbar-dark,
html body .card-header.bg-primary,
html body header.bg-primary,
html body nav.bg-primary,
html body .dropdown-menu .active,
html body .page-item.active .page-link {
    background-color: var(--wolfpack-red) !important;
    border-color: var(--wolfpack-red) !important;
    --bs-bg-opacity: 1 !important;
}

/* Override navbar-dark to use NCSU colors */
html body .navbar-dark.bg-dark,
html body nav.navbar-dark.bg-dark,
html body .navbar-dark.bg-dark .navbar-nav,
html body .navbar-dark .navbar-nav {
    background-color: var(--wolfpack-red) !important;
    border-color: var(--wolfpack-red) !important;
}

/* Ensure text in primary elements is readable */
html body .bg-primary,
html body div.bg-primary,
html body .text-bg-primary {
    color: var(--wolfpack-white) !important;
}

/* Button styling with enhanced specificity */
html body .btn-primary,
html body button.btn-primary,
html body a.btn-primary,
html body input.btn-primary,
html body .btn-primary:not(:disabled):not(.disabled) {
    background-color: var(--wolfpack-red) !important;
    border-color: var(--wolfpack-red) !important;
    color: var(--wolfpack-white) !important;
}

/* Outline button styling in navbar */
html body .btn-outline-light,
html body a.btn-outline-light,
html body button.btn-outline-light {
    color: var(--wolfpack-white) !important;
    border-color: var(--wolfpack-white) !important;
}

html body .btn-outline-light:hover,
html body a.btn-outline-light:hover,
html body button.btn-outline-light:hover {
    background-color: var(--wolfpack-white) !important;
    color: var(--wolfpack-red) !important;
}

html body .btn-primary:hover,
html body .btn-primary:focus,
html body .btn-primary:active,
html body .btn-primary.active,
html body .show>.btn-primary.dropdown-toggle {
    background-color: var(--reynolds-red) !important;
    border-color: var(--reynolds-red) !important;
    color: var(--wolfpack-white) !important;
}

/* Link styling */
html body a,
html body .nav-link,
html body .page-link {
    color: var(--wolfpack-red);
}

html body a:hover,
html body .nav-link:hover,
html body .page-link:hover {
    color: var(--reynolds-red);
}

/* Navigation styling */
html body .navbar-dark .navbar-nav .nav-link {
    color: var(--wolfpack-white);
}

html body .navbar-dark .navbar-nav .nav-link:hover {
    color: var(--hunt-yellow);
}

/* Progress bar styling - with increased specificity */
html body .progress-bar,
html body div.progress-bar,
html body div.progress .progress-bar,
html body div.progress div.progress-bar,
html body *[class^="progress"] *[class^="progress-bar"] {
    background-color: var(--hunt-yellow) !important;
    color: var(--wolfpack-black) !important;
    background-image: none !important;
}

/* Lesson completion button styling */
.lesson-completion-status {
    position: fixed;
    bottom: 20px;
    right: 20px;
    z-index: 1000;
    display: flex;
    align-items: center;
    gap: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 5px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Hide elements with d-none class */
.d-none {
    display: none !important;
}

/* Account pages styling */
.account-pages .card-header,
.socialaccount-providers .card-header,
body[class*="accounts"] .card-header,
#account_logout .card-header,
#account_email .card-header {
    background-color: var(--wolfpack-red) !important;
    color: var(--wolfpack-white) !important;
    border-color: var(--wolfpack-red) !important;
}

/* Account-specific buttons */
.account-pages .btn-primary,
body[class*="accounts"] .btn-primary,
#account_logout .btn-primary,
#account_email .btn-primary,
.btn-danger {
    background-color: var(--wolfpack-red) !important;
    border-color: var(--wolfpack-red) !important;
    color: var(--wolfpack-white) !important;
}

/* Account form styling */
.account-pages .form-control:focus,
body[class*="accounts"] .form-control:focus,
#account_logout .form-control:focus,
#account_email .form-control:focus {
    border-color: var(--wolfpack-red) !important;
    box-shadow: 0 0 0 0.25rem rgba(204, 0, 0, 0.25) !important;
}

/* Email list styling */
.email-list .email {
    border-left: 3px solid var(--wolfpack-red) !important;
    padding-left: 10px;
    margin-bottom: 10px;
}

/* Email verification badge */
.verified {
    color: var(--genomic-green) !important;
}

.unverified {
    color: var(--pyroman-flame) !important;
}

/* Account page tables */
.account-pages table,
#account_email table {
    border-collapse: collapse;
    width: 100%;
}

.account-pages th, .account-pages td,
#account_email th, #account_email td {
    border: 1px solid #ddd;
    padding: 8px;
}

.account-pages tr:nth-child(even),
#account_email tr:nth-child(even) {
    background-color: #f2f2f2;
}

.account-pages tr:hover,
#account_email tr:hover {
    background-color: #ddd;
}

.account-pages th,
#account_email th {
    padding-top: 12px;
    padding-bottom: 12px;
    text-align: left;
    background-color: var(--wolfpack-red);
    color: white;
}