/* High-contrast light theme: keep secondary copy readable across the system. */

html:not([data-theme='dark']) body,
html:not([data-theme='dark']) .app-shell {
    color: #17211c;
}

html:not([data-theme='dark']) :where(input, textarea)::placeholder {
    color: #59655f;
    opacity: 1;
}

html:not([data-theme='dark']) :where(.ag-theme-quartz, .grid-wrap, .mvc-grid, .settings-grid) {
    --ag-foreground-color: #1c2822;
    --ag-header-foreground-color: #2f3d36;
    --ag-header-text-color: #2f3d36;
    --ag-secondary-foreground-color: #45524b;
}

html:not([data-theme='dark']) .module-main .settings-page-title p {
    color: var(--on-brand-muted) !important;
    font-weight: 500;
}

html:not([data-theme='dark'])
    .sidebar
    :where(.brand span, .profile-area span, .evaluation-subnav a, .evaluation-subnav a > i),
html:not([data-theme='dark']) .profile-menu__identity span {
    color: var(--primary) !important;
}

html:not([data-theme='dark']) .profile-menu :where(.profile-link, .language-switch, .profile-menu-action) {
    color: var(--primary);
}

/* Complete dark surfaces: cards and page heroes must follow the selected theme. */

html[data-theme='dark']
    :where(
        .settings-content,
        .workspace-card,
        .evaluation-grid-card,
        .question-summary article,
        .question-filters,
        .evaluation-filters,
        .evaluation-metrics article
    ) {
    color: var(--text) !important;
    background: var(--surface) !important;
    border-color: var(--line) !important;
    box-shadow: var(--shadow-card) !important;
}

html[data-theme='dark']
    :where(
        .module-page > .page-title,
        #pageHost > .page-title,
        .settings-page-title,
        .evaluation-header,
        .dashboard-hero
    ) {
    color: var(--on-brand) !important;
    background: var(--brand-purple) !important;
    border-color: var(--line) !important;
    box-shadow: none !important;
}

html[data-theme='dark']
    :where(
        .module-page > .page-title,
        #pageHost > .page-title,
        .settings-page-title,
        .evaluation-header,
        .dashboard-hero
    )
    :where(h1, h2, h3, strong) {
    color: var(--on-brand) !important;
}

html[data-theme='dark']
    :where(
        .module-page > .page-title,
        #pageHost > .page-title,
        .settings-page-title,
        .evaluation-header,
        .dashboard-hero
    )
    :where(p, span:not(.page-eyebrow)) {
    color: var(--on-brand-muted) !important;
}

#pageHost
    :is(
        .page-heading,
        .dashboard-hero,
        .evaluation-header,
        .evaluation-hero,
        .transaction-hero,
        .employee-without-heading
    ) {
    min-height: 0;
    padding: 14px 20px;
    margin-bottom: 14px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
}

#pageHost
    :is(.page-heading, .dashboard-hero, .evaluation-header, .evaluation-hero, .transaction-hero)
    :is(h1, h2) {
    font-size: clamp(18px, 1.5vw, 23px);
    line-height: 1.6;
    margin: 0;
}

#pageHost :is(.page-heading, .dashboard-hero, .evaluation-header, .evaluation-hero, .transaction-hero) p {
    font-size: 12px;
    margin: 3px 0 0;
}

#pageHost :is(.page-heading, .dashboard-hero) .eyebrow {
    display: none;
}

#pageHost :is(.transaction-form, .record-editor-page) .modal-actions {
    border-end-start-radius: 24px;
    border-end-end-radius: 24px;
}

@media (max-width: 760px) {
    #pageHost :is(.page-heading, .dashboard-hero, .evaluation-hero) {
        flex-wrap: wrap;
        padding: 12px;
    }
}

html[data-theme='dark'] #app .workspace-card {
    background: var(--surface) !important;
    color: var(--text) !important;
    border-color: var(--line) !important;
}