/* JES shared design system: one semantic palette for every role and page. */
:root,
[data-bs-theme="light"] {
    --app-bg: #f4f7f9;
    --app-surface: #ffffff;
    --app-surface-soft: #f7fafb;
    --app-surface-hover: #edf5f4;
    --app-text: #172033;
    --app-text-muted: #667085;
    --app-border: #dfe7ec;
    --app-border-strong: #c9d6de;
    --app-primary: #176b67;
    --app-primary-hover: #115753;
    --app-primary-soft: #e5f3f1;
    --app-primary-contrast: #ffffff;
    --app-header-start: #0f4c5c;
    --app-header-end: #176b67;
    --app-focus: rgba(23, 107, 103, .24);
    --app-shadow-sm: 0 2px 8px rgba(25, 45, 65, .06);
    --app-shadow-md: 0 8px 24px rgba(25, 45, 65, .08);
    --app-shadow-lg: 0 16px 42px rgba(20, 45, 65, .12);
    --app-radius-sm: 10px;
    --app-radius-md: 14px;
    --app-radius-lg: 18px;
    --app-success-bg: #dff5e8;
    --app-success-text: #126b3a;
    --app-success-border: #a9ddbd;
    --app-danger-bg: #fbe3e3;
    --app-danger-text: #9a3030;
    --app-danger-border: #efbaba;
    --app-warning-bg: #fff1d6;
    --app-warning-text: #805600;
    --app-warning-border: #efd18d;
    --app-info-bg: #e3f1fb;
    --app-info-text: #175c84;
    --app-info-border: #afd3e8;
    --app-neutral-bg: #e9eef2;
    --app-neutral-text: #4b596a;
    --app-neutral-border: #cbd5dc;
    --app-goal-self-bg: #e9ecef;
    --app-goal-technical-bg: #cfe2ff;
    --app-goal-administrative-bg: #d1e7dd;
    --app-goal-yearly-bg: #fff3cd;

    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-tertiary-bg: var(--app-surface-soft);
    --bs-border-color: var(--app-border);
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 23, 107, 103;
    --bs-link-color: var(--app-primary);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-emphasis-color: var(--app-text);

    --bb-primary-color: var(--app-primary);
    --bb-primary-color-rgb: 23, 107, 103;
    --bb-border-focus-color: var(--app-primary);
    --bb-border-hover-color: var(--app-primary);
    --bb-shadow: var(--app-shadow-sm);
    --bb-hover-shadow: var(--app-shadow-md);
    --bb-layout-header-background: var(--app-header-start);
    --bb-layout-header-color: #ffffff;
    --bb-layout-header-border-color: transparent;
    --bb-layout-sidebar-background: var(--app-surface);
    --bb-layout-sidebar-banner-background: var(--app-surface);
    --bb-layout-sidebar-color: var(--app-text);
    --bb-layout-banner-border-color: var(--app-border);
    --bb-layout-logo-bg: var(--app-surface);
    --bb-layout-logo-border-color: var(--app-border);
    --bb-layout-menu-item-hover-bg: var(--app-primary-soft);
    --bb-layout-footer-background: var(--app-surface);
    --bb-layout-footer-color: var(--app-text-muted);
}

[data-bs-theme="dark"] {
    --app-bg: #0b1220;
    --app-surface: #111b2d;
    --app-surface-soft: #172338;
    --app-surface-hover: #1b3340;
    --app-text: #e7edf5;
    --app-text-muted: #a8b4c5;
    --app-border: #2b3a50;
    --app-border-strong: #3c4d65;
    --app-primary: #56bdb4;
    --app-primary-hover: #72d0c8;
    --app-primary-soft: #173b3d;
    --app-primary-contrast: #071917;
    --app-header-start: #092f3a;
    --app-header-end: #124f4c;
    --app-focus: rgba(86, 189, 180, .28);
    --app-shadow-sm: 0 2px 9px rgba(0, 0, 0, .24);
    --app-shadow-md: 0 10px 28px rgba(0, 0, 0, .3);
    --app-shadow-lg: 0 18px 48px rgba(0, 0, 0, .38);
    --app-success-bg: #123a29;
    --app-success-text: #8de0ad;
    --app-success-border: #286444;
    --app-danger-bg: #402329;
    --app-danger-text: #ffabb3;
    --app-danger-border: #70404a;
    --app-warning-bg: #3d321a;
    --app-warning-text: #f4ce73;
    --app-warning-border: #705d2d;
    --app-info-bg: #17354a;
    --app-info-text: #95d2f5;
    --app-info-border: #315f78;
    --app-neutral-bg: #263244;
    --app-neutral-text: #c4cfdd;
    --app-neutral-border: #405168;
    --app-goal-self-bg: #263244;
    --app-goal-technical-bg: #173a61;
    --app-goal-administrative-bg: #1d463a;
    --app-goal-yearly-bg: #493d1c;

    --bs-body-bg: var(--app-bg);
    --bs-body-color: var(--app-text);
    --bs-secondary-color: var(--app-text-muted);
    --bs-tertiary-bg: var(--app-surface-soft);
    --bs-border-color: var(--app-border);
    --bs-primary: var(--app-primary);
    --bs-primary-rgb: 86, 189, 180;
    --bs-link-color: var(--app-primary);
    --bs-link-hover-color: var(--app-primary-hover);
    --bs-emphasis-color: var(--app-text);

    --bb-primary-color: var(--app-primary);
    --bb-primary-color-rgb: 86, 189, 180;
    --bb-border-focus-color: var(--app-primary);
    --bb-border-hover-color: var(--app-primary);
    --bb-shadow: var(--app-shadow-sm);
    --bb-hover-shadow: var(--app-shadow-md);
}

html,
body {
    min-height: 100%;
    background: var(--app-bg);
    color: var(--app-text);
}

body,
.layout,
.layout-main,
.layout-side,
.layout-header,
.layout-footer,
.card,
.modal-content,
.dropdown-menu,
.offcanvas,
.form-control,
.form-select,
.input-group-text,
.table {
    transition: background-color .18s ease, border-color .18s ease, color .18s ease, box-shadow .18s ease;
}

h1, h2, h3, h4, h5, h6,
p,
label,
.form-label,
.card-title,
.modal-title {
    color: inherit;
}

p,
.text-muted {
    color: var(--app-text-muted) !important;
}

a {
    color: var(--app-primary);
}

a:hover {
    color: var(--app-primary-hover);
}

.layout-main {
    background: var(--app-bg);
}

.layout-side,
.layout-sidebar,
.layout-banner {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.app-title {
    color: #ffffff;
    font-size: clamp(1rem, 1.8vw, 1.25rem);
    letter-spacing: .02em;
}

.language-switch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    min-width: 40px;
    min-height: 40px;
    margin: 0;
    padding: .4rem .7rem;
    border: 1px solid rgba(255, 255, 255, .34);
    border-radius: var(--app-radius-sm);
    background: rgba(255, 255, 255, .06);
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    line-height: 1;
}

.language-switch:hover,
.language-switch:focus-visible {
    border-color: rgba(255, 255, 255, .62);
    background: rgba(255, 255, 255, .15);
    color: #ffffff;
}

.language-switch:focus-visible,
.btn:focus-visible,
.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    outline: 0;
    box-shadow: 0 0 0 .22rem var(--app-focus);
}

.layout-header .bb-theme-mode .dropdown-toggle {
    --bs-btn-color: #ffffff;
    --bs-btn-bg: rgba(255, 255, 255, .06);
    --bs-btn-border-color: rgba(255, 255, 255, .34);
    --bs-btn-hover-color: #ffffff;
    --bs-btn-hover-bg: rgba(255, 255, 255, .15);
    --bs-btn-hover-border-color: rgba(255, 255, 255, .62);
    --bs-btn-active-color: #ffffff;
    --bs-btn-active-bg: rgba(255, 255, 255, .18);
    --bs-btn-active-border-color: rgba(255, 255, 255, .68);
    min-width: 38px;
    min-height: 38px;
    border-radius: var(--app-radius-sm);
}

.layout-header .bb-theme-mode .dropdown-menu {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.layout-footer,
.page-layout-demo-footer-link {
    color: var(--app-text-muted);
}

.card,
.modal-content,
.dropdown-menu,
.popover,
.offcanvas,
.table-container,
.dashboard-container,
.superadmin-section,
.employee-section,
.authorized-section,
.not-authorized-section {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
    box-shadow: var(--app-shadow-sm);
}

.card,
.modal-content,
.dropdown-menu,
.popover,
.offcanvas {
    border-radius: var(--app-radius-md);
}

.card-header,
.card-footer,
.modal-header,
.modal-footer,
.dropdown-divider {
    background: var(--app-surface-soft);
    color: var(--app-text);
    border-color: var(--app-border);
}

.list-group-item,
.accordion-item,
.accordion-button {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.list-group-item-action:hover,
.accordion-button:not(.collapsed) {
    background-color: var(--app-surface-hover);
    color: var(--app-text);
}

.progress {
    background-color: var(--app-neutral-bg);
}

.form-control,
.form-select,
.input-group-text,
.dropdown-toggle,
.form-check-input {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border-strong);
}

.form-control::placeholder {
    color: var(--app-text-muted);
    opacity: .78;
}

.form-control:focus,
.form-select:focus,
.form-check-input:focus {
    background-color: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-primary);
}

.form-control:disabled,
.form-select:disabled,
.form-control[readonly] {
    background-color: var(--app-surface-soft);
    color: var(--app-text-muted);
}

.btn {
    border-radius: var(--app-radius-sm);
    font-weight: 650;
}

.btn-primary {
    --bs-btn-bg: var(--app-primary);
    --bs-btn-border-color: var(--app-primary);
    --bs-btn-hover-bg: var(--app-primary-hover);
    --bs-btn-hover-border-color: var(--app-primary-hover);
    --bs-btn-active-bg: var(--app-primary-hover);
    --bs-btn-active-border-color: var(--app-primary-hover);
    --bs-btn-color: var(--app-primary-contrast);
    --bs-btn-hover-color: var(--app-primary-contrast);
}

.table {
    --bs-table-bg: var(--app-surface);
    --bs-table-color: var(--app-text);
    --bs-table-border-color: var(--app-border);
    --bs-table-striped-bg: var(--app-surface-soft);
    --bs-table-striped-color: var(--app-text);
    --bs-table-hover-bg: var(--app-surface-hover);
    --bs-table-hover-color: var(--app-text);
    margin-bottom: 0;
}

.table > :not(caption) > * > * {
    padding-block: .72rem;
    vertical-align: middle;
}

.table thead th,
.table-header,
.fixed-table-header {
    background: var(--app-surface-soft);
    color: var(--app-text-muted);
    border-color: var(--app-border);
    font-weight: 750;
}

.pagination,
.page-link {
    --bs-pagination-bg: var(--app-surface);
    --bs-pagination-color: var(--app-text);
    --bs-pagination-border-color: var(--app-border);
    --bs-pagination-hover-bg: var(--app-primary-soft);
    --bs-pagination-hover-color: var(--app-primary);
    --bs-pagination-active-bg: var(--app-primary);
    --bs-pagination-active-border-color: var(--app-primary);
}

.tabs,
.tabs-header,
.nav-tabs {
    background: var(--app-surface);
    color: var(--app-text);
    border-color: var(--app-border);
}

.nav-tabs .nav-link {
    color: var(--app-text-muted);
}

.nav-tabs .nav-link.active {
    background: var(--app-surface);
    color: var(--app-primary);
    border-color: var(--app-border) var(--app-border) var(--app-surface);
}

.alert,
.badge,
.toast {
    border-radius: var(--app-radius-sm);
}

.empty,
.empty-state,
.task-empty,
.report-empty {
    color: var(--app-text-muted) !important;
}

/* Semantic states keep the existing business meaning in both themes. */
.table-row-accepted,
.goal-status-approved,
.goal-status-completed,
tr.table-success {
    --bs-table-bg: var(--app-success-bg) !important;
    --bs-table-striped-bg: var(--app-success-bg) !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--app-success-bg) 86%, var(--app-success-text)) !important;
    --bs-table-color: var(--app-success-text) !important;
    --bs-table-border-color: var(--app-success-border) !important;
    background-color: var(--app-success-bg) !important;
    color: var(--app-success-text) !important;
}

.table-row-rejected,
.goal-status-rejected,
tr.table-danger {
    --bs-table-bg: var(--app-danger-bg) !important;
    --bs-table-striped-bg: var(--app-danger-bg) !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--app-danger-bg) 86%, var(--app-danger-text)) !important;
    --bs-table-color: var(--app-danger-text) !important;
    --bs-table-border-color: var(--app-danger-border) !important;
    background-color: var(--app-danger-bg) !important;
    color: var(--app-danger-text) !important;
}

.table-row-pending,
.goal-status-pending,
tr.table-warning {
    --bs-table-bg: var(--app-warning-bg) !important;
    --bs-table-striped-bg: var(--app-warning-bg) !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--app-warning-bg) 86%, var(--app-warning-text)) !important;
    --bs-table-color: var(--app-warning-text) !important;
    --bs-table-border-color: var(--app-warning-border) !important;
    background-color: var(--app-warning-bg) !important;
    color: var(--app-warning-text) !important;
}

.goal-status-finalized,
tr.table-secondary {
    --bs-table-bg: var(--app-neutral-bg) !important;
    --bs-table-color: var(--app-neutral-text) !important;
    --bs-table-border-color: var(--app-neutral-border) !important;
    background-color: var(--app-neutral-bg) !important;
    color: var(--app-neutral-text) !important;
}

tr.table-self,
.goal-type-self {
    --bs-table-bg: var(--app-goal-self-bg) !important;
    --bs-table-striped-bg: var(--app-goal-self-bg) !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--app-goal-self-bg) 84%, var(--app-text)) !important;
    --bs-table-color: var(--app-text) !important;
    --bs-table-striped-color: var(--app-text) !important;
    --bs-table-hover-color: var(--app-text) !important;
    background-color: var(--app-goal-self-bg) !important;
    color: var(--app-text) !important;
}

tr.table-technical,
.goal-type-technical {
    --bs-table-bg: var(--app-goal-technical-bg) !important;
    --bs-table-striped-bg: var(--app-goal-technical-bg) !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--app-goal-technical-bg) 84%, var(--app-text)) !important;
    --bs-table-color: var(--app-text) !important;
    --bs-table-striped-color: var(--app-text) !important;
    --bs-table-hover-color: var(--app-text) !important;
    background-color: var(--app-goal-technical-bg) !important;
    color: var(--app-text) !important;
}

tr.table-administrative,
.goal-type-administrative {
    --bs-table-bg: var(--app-goal-administrative-bg) !important;
    --bs-table-striped-bg: var(--app-goal-administrative-bg) !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--app-goal-administrative-bg) 84%, var(--app-text)) !important;
    --bs-table-color: var(--app-text) !important;
    --bs-table-striped-color: var(--app-text) !important;
    --bs-table-hover-color: var(--app-text) !important;
    background-color: var(--app-goal-administrative-bg) !important;
    color: var(--app-text) !important;
}

tr.table-yearly,
.goal-type-yearly {
    --bs-table-bg: var(--app-goal-yearly-bg) !important;
    --bs-table-striped-bg: var(--app-goal-yearly-bg) !important;
    --bs-table-hover-bg: color-mix(in srgb, var(--app-goal-yearly-bg) 84%, var(--app-text)) !important;
    --bs-table-color: var(--app-text) !important;
    --bs-table-striped-color: var(--app-text) !important;
    --bs-table-hover-color: var(--app-text) !important;
    background-color: var(--app-goal-yearly-bg) !important;
    color: var(--app-text) !important;
}

.color-box,
.color-border {
    border-color: var(--app-border-strong);
}

#blazor-error-ui {
    background: var(--app-warning-bg);
    color: var(--app-warning-text);
    border-top: 1px solid var(--app-warning-border);
}

@media (max-width: 767.98px) {
    .app-title {
        display: none;
    }

    .language-switch {
        min-width: 36px;
        min-height: 36px;
        padding-inline: .45rem;
        border-radius: 9px;
    }

    .layout-main {
        padding-inline: .35rem;
    }

    .card-body,
    .modal-body {
        padding: .85rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        scroll-behavior: auto !important;
        transition-duration: .01ms !important;
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
    }
}

@media print {
    :root,
    [data-bs-theme="dark"] {
        color-scheme: light;
        --app-bg: #ffffff;
        --app-surface: #ffffff;
        --app-text: #000000;
        --app-text-muted: #333333;
        --app-border: #cccccc;
    }

    .bb-theme-mode,
    .language-switch {
        display: none !important;
    }
}