/* TestLink Pro — global theme extensions (marketing navy + teal) */

/* Bootstrap component alignment — primary actions are teal on navy text */
.btn-primary {
    --bs-btn-color: var(--navy-900);
    --bs-btn-bg: var(--teal-500);
    --bs-btn-border-color: var(--teal-500);
    --bs-btn-hover-color: var(--navy-900);
    --bs-btn-hover-bg: var(--teal-400);
    --bs-btn-hover-border-color: var(--teal-400);
    --bs-btn-active-color: var(--navy-900);
    --bs-btn-active-bg: var(--teal-700);
    --bs-btn-active-border-color: var(--teal-700);
    color: var(--navy-900);
}

.btn-outline-primary {
    --bs-btn-color: var(--navy-800);
    --bs-btn-border-color: var(--navy-800);
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: var(--navy-800);
    --bs-btn-hover-border-color: var(--navy-800);
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: var(--navy-700);
    --bs-btn-active-border-color: var(--navy-700);
}

.bg-primary {
    --bs-bg-opacity: 1;
    background-color: rgba(var(--primary-rgb), var(--bs-bg-opacity)) !important;
    color: var(--navy-900) !important;
}

.text-primary {
    color: var(--teal-700) !important;
}

.border-primary {
    border-color: var(--teal-500) !important;
}

a {
    color: var(--teal-700);
}

a:hover {
    color: var(--navy-700);
}

/* Shared page hero pattern (dashboard, project list, etc.) */
.page-header-hero,
.dashboard-hero,
.page-hero {
    background: var(--primary-gradient) !important;
    position: relative;
    overflow: hidden;
}

.page-header-hero::before,
.dashboard-hero::before,
.page-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    background:
        radial-gradient(ellipse at 85% 0%, rgba(44, 193, 201, 0.18) 0%, transparent 55%),
        linear-gradient(rgba(255, 255, 255, 0.035) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, 0.035) 1px, transparent 1px);
    background-size: auto, 40px 40px, 40px 40px;
    pointer-events: none;
}

/* Cards with accent top stripe */
.card-accent-top {
    border-top: 4px solid var(--teal-500);
}

/* Filter bars and toolbars */
.filter-bar,
.toolbar-panel {
    background: var(--card-bg);
    border: 1px solid var(--border-color);
    border-radius: var(--radius);
    box-shadow: var(--shadow-sm);
}

/* Progress bars */
.progress-bar {
    background: var(--teal-500);
}

/* Pagination */
.page-link {
    color: var(--teal-700);
}

.page-item.active .page-link {
    background-color: var(--teal-500);
    border-color: var(--teal-500);
    color: var(--navy-900);
}

/* Nav tabs */
.nav-tabs .nav-link.active {
    color: var(--navy-800);
    border-bottom-color: var(--teal-500);
}

.nav-pills .nav-link.active {
    background: var(--teal-500);
    color: var(--navy-900);
}

/* Dropdown active items */
.dropdown-item.active,
.dropdown-item:active {
    background-color: var(--teal-500);
    color: var(--navy-900);
}

/* List group active */
.list-group-item.active {
    background-color: var(--teal-500);
    border-color: var(--teal-500);
    color: var(--navy-900);
}

/* Table row selection highlight */
.table-primary {
    --bs-table-bg: rgba(var(--primary-rgb), 0.08);
    --bs-table-border-color: rgba(var(--primary-rgb), 0.16);
    --bs-table-color: var(--ink);
}

/* Modal header accent */
.modal-header.theme-accent {
    border-top: 4px solid var(--teal-500);
}

/* Spinner */
.spinner-border.text-primary {
    color: var(--teal-500) !important;
}

/* Legacy auth fallback (non-split pages) */
.auth-container:not(.login-page) {
    background: var(--hero-gradient);
}

/* Status badges using theme */
.badge.bg-primary {
    background: var(--teal-500) !important;
    color: var(--navy-900) !important;
}

/* Focus ring consistency */
.form-check-input:checked {
    background-color: var(--teal-500);
    border-color: var(--teal-500);
}

.form-check-input:focus {
    border-color: var(--teal-500);
    box-shadow: 0 0 0 0.2rem var(--input-focus-ring);
}

[data-theme="dark"] a {
    color: var(--teal-300);
}

[data-theme="dark"] a:hover {
    color: var(--teal-400);
}

[data-theme="dark"] .text-primary {
    color: var(--teal-300) !important;
}