/* Keep chart values readable regardless of slice colors or the surrounding theme. */
[data-observatory-chart="apex"] .apexcharts-tooltip {
    background: #193e36 !important;
    color: #fff !important;
    border: 1px solid #557168 !important;
}
[data-observatory-chart="apex"] .apexcharts-tooltip .apexcharts-tooltip-title,
[data-observatory-chart="apex"] .apexcharts-tooltip .apexcharts-tooltip-series-group {
    background: transparent !important;
}
[data-observatory-chart="apex"] .apexcharts-tooltip :is(div, span) {
    color: #fff !important;
}

/* Shared Observatory hierarchy. Explicit roots also cover standalone readers
   and request dialogs without leaking styles into the rest of the application. */
:is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) {
    --obs-surface-line: #bdd1c9;
    --obs-detail-line: #e0e9e4;
    --obs-surface-heading: #edf4ef;
    --obs-theme-ink: #193e36;
    --obs-theme-muted: #557168;
    --obs-theme-accent: #286956;
    --obs-theme-gold: #b49b6d;
    --obs-theme-ease: cubic-bezier(.22, .7, .25, 1);
    --obs-theme-banner: url('../media/observatory/branch.svg'), linear-gradient(110deg, #faf8f1 0%, #f4f8f4 44%, #e5f0e9 100%);
    --obs-theme-shadow: 0 3px 12px #183e3107, 0 1px 2px #183e3106;
}

/* Primary headings: quiet artwork, one gold edge, generous but compact spacing. */
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .obs-shell__page-header, .obs-panel__header, .obs-card-heading, .section-heading,
    .governance-panel__header, .dashboard-page-heading, .obs-operations__hero,
    .dashboard-card-catalog__head, .shared-dashboard-toolbar, .otd-command,
    .dashboard-viewer__toolbar, .obs-org-heading, .static-templates > header,
    .obs-request-preview__header, .files-workspace-heading, .quality-section-heading,
    .obs-template-generator__hero, .capability-details-dialog__header,
    .indicator-builder > header, .indicator-workspace > header, .manual-editor > header,
    .manual-dialog > header, .fixed-editor-heading, .fixed-upload > header,
    .fixed-file-details > header, .fixed-version-history > header, .home-panel > header,
    .permission-group > header, .scope-directory > header, .scope-user-card > header,
    .template-detail > header, .fixed-builder > .builder-heading, .organization-details__header,
    .settings-section > h4, .axis-section > h4, .field-info > h4) {
    background-color: #edf4ef !important;
    background-image: var(--obs-theme-banner) !important;
    background-repeat: no-repeat !important;
    background-position: left center, center !important;
    background-size: 235px auto, cover !important;
    color: var(--obs-theme-ink) !important;
    border: 1px solid var(--obs-surface-line) !important;
    border-inline-start: 3px solid var(--obs-theme-gold) !important;
    border-radius: 14px;
    padding: clamp(12px, 1.4vw, 20px);
    box-shadow: inset 0 1px 0 #ffffffc9;
    gap: .8rem;
}

body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .obs-shell__page-header, .obs-panel__header, .obs-card-heading, .section-heading,
    .governance-panel__header, .dashboard-page-heading, .obs-operations__hero,
    .indicator-builder > header, .indicator-workspace > header, .manual-editor > header,
    .manual-dialog > header, .fixed-editor-heading, .permission-group > header,
    .scope-directory > header, .scope-user-card > header, .otd-command,
    .static-templates > header, .obs-org-heading, .obs-template-generator__hero,
    .files-workspace-heading, .quality-section-heading, .obs-request-preview__header) :is(h1, h2, h3, h4, h5) {
    color: var(--obs-theme-ink) !important;
    line-height: 1.55;
    text-wrap: pretty;
}
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .obs-shell__page-header, .obs-panel__header, .governance-panel__header,
    .dashboard-page-heading, .obs-operations__hero, .indicator-builder > header,
    .indicator-workspace > header, .fixed-editor-heading, .manual-dialog > header) p {
    color: var(--obs-theme-muted) !important;
    margin-block: .25rem 0;
    white-space: normal;
}

/* Cards keep their content styles and chart colors, gaining consistent edges. */
body :is(.obs-shell, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .obs-panel, .template-detail, .home-panel, .fixed-upload, .fixed-file-details,
    .fixed-version-history, .permission-group, .governance-panel, .access-editor,
    .capability-editor, .scope-directory, .scope-user-card, .obs-widget, .shared-widget,
    .dashboard-card, .indicator-card, .manual-card, .board-input, .fixed-display-settings,
    .builder-audience, .builder-year, .otd-meta, .quality-rule-card, .comparison-history-card,
    .obs-page-card, .fixed-template-grid > article, .builder-list > article,
    .static-templates .template-grid > article, .download-panel) {
    border: 1px solid var(--obs-surface-line) !important;
    border-radius: 16px;
    box-shadow: var(--obs-theme-shadow);
    min-width: 0;
}
body :is(.obs-shell, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .indicator-card, .board-input, .manual-card, .fixed-display-settings, .builder-audience) { background-color: #fff; }

/* Secondary headings are quieter, to avoid giving every detail equal weight. */
body :is(.obs-shell, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .board-year, .map-axis > h5, .fixed-editor-layout nav > strong, .builder-year > legend,
    .indicator-board > h4, .fixed-editor-selection > h4) {
    color: var(--obs-theme-ink);
    background: linear-gradient(270deg, #edf4ee, #f9fbf9);
    border: 1px solid var(--obs-detail-line);
    border-inline-start: 3px solid #91b3a0;
    border-radius: 9px;
    padding: .65rem .85rem;
    margin-block: .65rem;
    width: auto;
    font-weight: 700;
}
body :is(.obs-shell, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) details > summary {
    background: linear-gradient(110deg, #f9faf5, #edf4ef);
    color: var(--obs-theme-ink);
    cursor: pointer;
}

/* Local feedback: no layout movement, timers, or global mutation observers. */
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
    :is(button, a.btn, [role=tab], summary, .form-control, .form-select, .input-choice,
        .component, .builder-source, .audience-option, .manual-type) {
    transition: background-color 180ms ease, border-color 180ms ease,
        box-shadow 180ms ease, color 180ms ease, transform 180ms var(--obs-theme-ease);
}
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
    :is(button, a.btn):active:not(:disabled):not([aria-disabled=true]) { transform: scale(.985); }
@media (hover: hover) and (pointer: fine) {
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
        :is(.obs-text-button, .manual-type, .indicator-card > button, .quarter-chip):hover:not(:disabled) {
        transform: translateY(-2px);
        box-shadow: 0 5px 12px #19493614;
    }
}
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
    :is(button[aria-pressed=true], button[aria-selected=true], button[aria-current=step]) {
    box-shadow: 0 0 0 2px #fff, 0 0 0 4px #6c9d883d;
}
body :is(.obs-shell, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
    :is(.input-choice.chosen, .builder-source:has(input:checked), .component:has(input:checked), .fixed-visibility:has(input:checked)) {
    border-color: #74a48d;
    background-color: #edf6f0;
    box-shadow: inset -3px 0 0 #378366;
}
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
    input:is([type=checkbox], [type=radio]) {
    accent-color: var(--obs-theme-accent);
    transition: box-shadow 160ms ease, transform 160ms ease;
}
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
    input:is([type=checkbox], [type=radio]):checked { animation: obs-check-in 220ms var(--obs-theme-ease); }

/* Only newly mounted sections fade. No persistent transforms on ancestors:
   fixed dialogs and chart tooltips keep their normal containing block. */
body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .obs-shell__content > *, .obs-operations__workspace > *, .indicator-workspace,
    .indicator-upload, .fixed-display-editor, .fixed-editor-selection, .manual-editor,
    .builder-fields, .governance-panel, .template-detail, .manual-dialog,
    .organization-details-dialog, .fixed-file-details, .fixed-version-history,
    .static-templates > .template-grid, .download-panel, .obs-org-branches) {
    animation: obs-content-in 240ms var(--obs-theme-ease);
}
body :is(.obs-shell, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
    details[open] > :not(summary) { animation: obs-content-in 180ms ease; }
@keyframes obs-content-in { from { opacity: .3; } to { opacity: 1; } }
@keyframes obs-check-in { 0% { transform: scale(.85); } 65% { transform: scale(1.1); } 100% { transform: scale(1); } }

@media (max-width: 700px) {
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
        .obs-shell__page-header, .obs-panel__header, .governance-panel__header, .fixed-editor-heading,
        .indicator-builder > header, .indicator-workspace > header, .manual-dialog > header) {
        background-size: 160px auto, cover !important;
        flex-wrap: wrap;
        padding: 12px;
    }
}
@media (prefers-reduced-motion: reduce) {
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details),
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) *,
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) *::before,
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) *::after {
        animation: none !important;
        transition: none !important;
        scroll-behavior: auto !important;
    }
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details)
        :is(button, a.btn):is(:hover, :active) { transform: none !important; }
}
@media print {
    :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) {
        --obs-theme-banner: none;
        --obs-theme-shadow: none;
    }
    body :is(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root, .obs-request-preview, .organization-details) * {
        animation: none !important;
        transition: none !important;
        box-shadow: none !important;
    }
}