/**
 * Brand Color Overrides
 * Ensures all legacy color references use the new brand palette
 */

/* Override any remaining legacy color references */
* {
    /* Replace any hardcoded blue colors with brand teal */
    --legacy-blue: var(--brand-teal);
    --legacy-purple: var(--brand-blue);
    --legacy-green: var(--brand-green);
    --legacy-orange: var(--brand-orange);
}

/* Specific overrides for common elements */
button:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.theme-toggle):not(.sticky-header-button),
input[type="button"]:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success),
input[type="submit"]:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success) {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-blue) 100%) !important;
    color: white !important;
}

/* CRITICAL: Override for sticky header buttons - MUST come after global button rule */
button.sticky-header-button,
thead.sticky-header-clone button,
.sticky-header-clone button,
thead.sticky-header-clone th button,
.sticky-header-clone th button {
    background: #f2f2f2 !important;
    background-image: none !important;
    color: #333333 !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 4px !important;
    font-weight: bold !important;
}

/* Extra specificity to override .btn-primary color rule */
.sticky-header-clone button.sticky-header-button,
thead.sticky-header-clone th button.sticky-header-button {
    color: #333333 !important;
}

[data-theme="dark"] button.sticky-header-button,
[data-theme="dark"] thead.sticky-header-clone button,
[data-theme="dark"] .sticky-header-clone button,
[data-theme="dark"] thead.sticky-header-clone th button,
[data-theme="dark"] .sticky-header-clone th button {
    background: var(--theme-table-header-bg, #2d3748) !important;
    background-image: none !important;
    color: var(--theme-text-primary) !important;
}

button:hover:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success):not(.theme-toggle),
input[type="button"]:hover:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success),
input[type="submit"]:hover:not(.btn-secondary):not(.btn-danger):not(.btn-warning):not(.btn-success) {
    box-shadow: 0 4px 12px rgba(31, 95, 122, 0.4) !important;
}

/* Override focus states */
*:focus {
    outline-color: var(--brand-teal) !important;
}

input:focus,
select:focus,
textarea:focus {
    border-color: var(--brand-teal) !important;
    box-shadow: 0 0 0 3px rgba(31, 95, 122, 0.1) !important;
}

/* Override link colors - but exclude table links */
a:not(.btn):not(table a):not(td a):not(th a):not(div.sectionlink a):not(h2.navitem a) {
    color: var(--brand-teal) !important;
}

a:not(.btn):not(table a):not(td a):not(th a):hover {
    color: var(--brand-teal-dark) !important;
}

/* Specific override for table links to use standard black */
table a,
td a,
th a,
.table a,
/* Specific override for plans page tables */
#mainbody table a,
.mainbodyitems table a,
/* Very specific override for plans table */
table#plans a,
#plans a,
table#plans td a,
table#plans th a {
    color: var(--text-primary, #333333) !important;
}

table a:hover,
td a:hover,
th a:hover,
.table a:hover,
/* Specific override for plans page table hovers */
#mainbody table a:hover,
.mainbodyitems table a:hover,
/* Very specific override for plans table hovers */
table#plans a:hover,
#plans a:hover,
table#plans td a:hover,
table#plans th a:hover {
    color: var(--text-secondary, #555555) !important;
    text-decoration: underline;
}


/* Override any remaining gradient backgrounds */
.bg-gradient,
.gradient-bg {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-blue) 100%) !important;
}

/* Override table header colors that might still use old colors */
.table-primary th,
th.primary {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-blue) 100%) !important;
    color: white !important;
}

.table-primary th *,
th.primary * {
    color: white !important;
}

/* Override any remaining border colors */
.border-primary {
    border-color: var(--brand-teal) !important;
}

/* Override progress bars and loading indicators */
.progress-bar,
.loader {
    border-top-color: var(--brand-teal) !important;
}

/* Override any remaining shadow colors */
.shadow-primary {
    box-shadow: 0 4px 12px rgba(31, 95, 122, 0.4) !important;
}

/* Success states should use brand green */
.success,
.alert-success,
.text-success,
.bg-success {
    color: var(--brand-green) !important;
}

.bg-success {
    background-color: rgba(164, 198, 57, 0.15) !important;
}

/* Warning states should use brand orange */
.warning,
.alert-warning,
.text-warning,
.bg-warning {
    color: var(--brand-orange) !important;
}

.bg-warning {
    background-color: rgba(255, 153, 102, 0.15) !important;
}

/* Info states should use brand blue */
.info,
.alert-info,
.text-info,
.bg-info {
    color: var(--brand-blue) !important;
}

.bg-info {
    background-color: rgba(102, 153, 204, 0.15) !important;
}

/* Ensure brand consistency in navigation */
.navbar,
.nav-header,
.header-nav {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-blue) 100%) !important;
    color: white !important;
}

.navbar *,
.nav-header *,
.header-nav * {
    color: white !important;
}

/* Override any remaining card headers */
.card-header.bg-primary,
.card-header-primary {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-blue) 100%) !important;
    color: white !important;
}

.card-header.bg-primary *,
.card-header-primary * {
    color: white !important;
}

/* Override modal headers */
.modal-header {
    background: linear-gradient(135deg, var(--brand-teal) 0%, var(--brand-blue) 100%) !important;
    color: white !important;
}

.modal-header * {
    color: white !important;
}

/* Override any remaining spinner colors */
.spinner,
.loading-spinner {
    border-top-color: var(--brand-teal) !important;
}

/* Override any remaining accent colors */
.accent,
.highlight {
    color: var(--brand-green) !important;
}

.accent-bg,
.highlight-bg {
    background-color: rgba(164, 198, 57, 0.15) !important;
}

/* High-specificity override for plans table links - MUST be black, not white */
body #mainbody .mainbodyitems table#plans a,
body #mainbody .mainbodyitems table#plans td a,
body #mainbody .mainbodyitems table#plans th a,
body #mainbody section.mainbodyitems table#plans a {
    color: #333333 !important;
    text-decoration: none !important;
}

body #mainbody .mainbodyitems table#plans a:hover,
body #mainbody .mainbodyitems table#plans td a:hover,
body #mainbody .mainbodyitems table#plans th a:hover,
body #mainbody section.mainbodyitems table#plans a:hover {
    color: #555555 !important;
    text-decoration: underline !important;
}

/* Override sortable table header buttons to have no background and black text */
table.sortable th button,
table.sortable thead th button,
#plans th button,
.sortable th button {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--text-primary, #333333) !important;
    border: none !important;
    font-weight: bold !important;
    text-align: left !important;
    cursor: pointer !important;
    padding: 4px !important;
    margin: 1px !important;
}

/* Override sortable table header button hover/focus states */
table.sortable th button:hover,
table.sortable th button:focus,
table.sortable thead th button:hover,
table.sortable thead th button:focus,
#plans th button:hover,
#plans th button:focus,
.sortable th button:hover,
.sortable th button:focus {
    background: transparent !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    color: var(--text-primary, #333333) !important;
    border: 1px solid var(--border-medium, #dee2e6) !important;
    padding: 3px !important;
}

/* Ensure button text and icons use proper colors */
table.sortable th button span,
#plans th button span,
.sortable th button span {
    color: var(--text-secondary, #555555) !important;
}

/* High-specificity override to ensure table header buttons are NOT styled like regular buttons */
body table.sortable th button,
body #mainbody table.sortable th button,
body #mainbody .mainbodyitems table.sortable th button,
body #mainbody section.mainbodyitems table.sortable th button,
body table#plans th button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--text-primary, #333333) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: bold !important;
    text-align: left !important;
    cursor: pointer !important;
    padding: 4px !important;
    margin: 1px !important;
    transform: none !important;
}

/* High-specificity override for table header button hover/focus states */
body table.sortable th button:hover,
body table.sortable th button:focus,
body #mainbody table.sortable th button:hover,
body #mainbody table.sortable th button:focus,
body #mainbody .mainbodyitems table.sortable th button:hover,
body #mainbody .mainbodyitems table.sortable th button:focus,
body table#plans th button:hover,
body table#plans th button:focus {
    background: rgba(0, 0, 0, 0.05) !important;
    background-color: rgba(0, 0, 0, 0.05) !important;
    background-image: none !important;
    color: var(--text-primary, #333333) !important;
    border: 1px solid var(--border-medium, #dee2e6) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 3px !important;
    transform: none !important;
}

/* Dark mode specific overrides for sortable table buttons */
[data-theme="dark"] body table.sortable th button,
[data-theme="dark"] body #mainbody table.sortable th button,
[data-theme="dark"] body #mainbody .mainbodyitems table.sortable th button,
[data-theme="dark"] body #mainbody section.mainbodyitems table.sortable th button,
[data-theme="dark"] body table#plans th button {
    background: transparent !important;
    background-color: transparent !important;
    background-image: none !important;
    color: var(--theme-text-primary) !important;
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-weight: bold !important;
    text-align: left !important;
    cursor: pointer !important;
    padding: 4px !important;
    margin: 1px !important;
    transform: none !important;
}

/* Dark mode hover/focus states for sortable table buttons */
[data-theme="dark"] body table.sortable th button:hover,
[data-theme="dark"] body table.sortable th button:focus,
[data-theme="dark"] body #mainbody table.sortable th button:hover,
[data-theme="dark"] body #mainbody table.sortable th button:focus,
[data-theme="dark"] body #mainbody .mainbodyitems table.sortable th button:hover,
[data-theme="dark"] body #mainbody .mainbodyitems table.sortable th button:focus,
[data-theme="dark"] body table#plans th button:hover,
[data-theme="dark"] body table#plans th button:focus {
    background: var(--theme-bg-hover) !important;
    background-color: var(--theme-bg-hover) !important;
    background-image: none !important;
    color: var(--theme-text-primary) !important;
    border: 1px solid var(--theme-border-medium) !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 3px !important;
    transform: none !important;
}