/* The directory uses the same dropdowns as Programs/Services. Let Popper place
   them within the viewport, and keep button icons on the organization's palette. */
body .obs-shell:has(.obs-org-directory) { overflow-x: visible; }
body .obs-shell .obs-org-directory .btn i { color: inherit !important; }

/* 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 and a neutral border. */
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: 1px solid var(--obs-surface-line) !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;
    }
}
/* Dashboard choice cards use the same validated appearance as their saved board. */
.board-choice-themed{--choice-ink:var(--board-text);background:var(--board-bg)!important;color:var(--choice-ink)!important;font-family:var(--board-family)!important;font-size:var(--board-font)!important;border-radius:var(--board-radius)!important;border-color:color-mix(in srgb,var(--choice-ink) 22%,transparent)!important;min-width:0}
.board-choice-themed .dashboard-card__open{font-family:var(--board-family)!important;font-size:var(--board-font)!important;background:transparent!important;color:inherit!important}
.board-choice-themed :is(.dashboard-card__type,.dashboard-card__description,.dashboard-card__code,.dashboard-card__footer,.dashboard-card__footer>span:last-child,.journey-status),.journey-boards .board-choice-themed>span,.journey-boards .board-choice-themed>small,.journey-boards .board-choice-themed>b{color:var(--choice-ink)!important;font-family:inherit!important;font-size:.85em!important;line-height:1.8}
.board-choice-themed .dashboard-card__description{min-height:0;white-space:normal}.board-choice-themed .dashboard-card__title{font-family:inherit;color:var(--choice-ink)!important;font-size:1.12em;white-space:normal;overflow-wrap:anywhere}.board-choice-themed .dashboard-card__footer{border-color:color-mix(in srgb,var(--choice-ink) 22%,transparent)}
.board-choice-themed .dashboard-card__type-icon{background:var(--board-primary);color:var(--board-header-ink);font-size:.85em}
.board-choice-themed .dashboard-card__stats>span{background:var(--board-surface);color:var(--board-ink);border-color:color-mix(in srgb,var(--board-ink) 20%,transparent);border-radius:var(--board-radius);font-family:inherit;font-size:.72em}.board-choice-themed .dashboard-card__stats b{color:var(--board-ink);font-family:inherit;font-size:1.2em}
.board-choice-themed :is(.journey-status,.dashboard-card__organizations>span){background:var(--board-surface)!important;color:var(--board-ink)!important;border-radius:var(--board-radius);font-family:inherit;font-size:.8em}.board-choice-themed .organization-identity__type{background:transparent!important;color:inherit!important;border-color:currentColor;font-family:inherit;font-size:.8em}.board-choice-themed .organization-identity__parent{color:inherit!important;font-family:inherit;font-size:.85em}
.board-choice-themed:hover,.board-choice-themed:focus-within{border-color:var(--board-primary)!important}.board-choice-themed:focus-visible,.board-choice-themed button:focus-visible{outline:3px solid var(--choice-ink)!important;outline-offset:3px}
.board-choice-shadow{box-shadow:0 6px 22px #0002!important}.board-choice-flat{box-shadow:none!important}.board-choice-top{border-top:5px solid var(--board-primary)!important}.board-choice-side{border-inline-start:5px solid var(--board-primary)!important}.board-choice-frame{border:2px solid var(--board-secondary)!important}.board-choice-glass{box-shadow:0 8px 28px #0002!important;backdrop-filter:blur(8px)}.board-choice-filled{--choice-ink:var(--board-accent-ink);background:var(--board-primary)!important}
.journey-boards .board-choice-themed{padding:var(--board-padding)!important;gap:var(--board-gap)!important}
.board-choice-themed .dashboard-card__open{padding:var(--board-padding)!important;gap:var(--board-gap)!important}
.board-choice-header .board-choice-heading-simple{padding:12px;background:var(--board-primary);color:var(--board-header-ink)!important}
.journey-boards .board-choice-themed>.board-choice-heading{font-size:1em!important;color:var(--choice-ink)!important}
.journey-boards .board-choice-themed>.board-choice-heading-band{color:var(--board-header-ink)!important}
.journey-boards .board-choice-themed>.board-choice-heading-cover{color:#fff!important}
.journey-boards .board-choice-header>.board-choice-heading-simple{color:var(--board-header-ink)!important}
.board-choice-themed .board-choice-heading{font-family:var(--board-family)!important;font-size:1em!important;white-space:normal!important}
.board-choice-themed .board-choice-heading strong{font-family:var(--board-family)!important;font-size:1.12em!important}
/* Beat the general shell and scoped catalog rules only inside themed choices. */
body :is(.obs-shell,.dashboard-viewer) :is(button,article).board-choice-themed[class]{border-color:color-mix(in srgb,var(--choice-ink) 22%,transparent)!important}
body :is(.obs-shell,.dashboard-viewer) :is(button,article).board-choice-themed.board-choice-top{border-top:5px solid var(--board-primary)!important}
body :is(.obs-shell,.dashboard-viewer) :is(button,article).board-choice-themed.board-choice-side{border-inline-start:5px solid var(--board-primary)!important}
body :is(.obs-shell,.dashboard-viewer) :is(button,article).board-choice-themed.board-choice-frame{border:2px solid var(--board-secondary)!important}
.board-choice-themed .dashboard-card__type-icon{background:var(--board-primary)!important;color:var(--board-header-ink)!important}
.board-choice-themed .dashboard-card__stats>span{background:var(--board-surface)!important;color:var(--board-ink)!important;border-color:color-mix(in srgb,var(--board-ink) 20%,transparent)!important;border-radius:var(--board-radius)!important;font-family:var(--board-family)!important;font-size:.72em!important}
.board-choice-themed .dashboard-card__stats b{color:var(--board-ink)!important;font-family:var(--board-family)!important;font-size:1.2em!important}
.board-choice-themed .dashboard-card__organizations .organization-identity{background:var(--board-surface)!important;color:var(--board-ink)!important;font-family:var(--board-family)!important;font-size:.8em!important;line-height:1.8}

/* Board font choices use local assets and load only when selected. */
@font-face{font-family:BoardTajawal;src:url("../plugins/global/fonts/Tajawal/Tajawal-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BoardTajawal;src:url("../plugins/global/fonts/Tajawal/Tajawal-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:BoardKufi;src:url("NotoKufi-Variable.ttf") format("truetype");font-weight:100 900;font-style:normal;font-display:swap}
@font-face{font-family:BoardNaskh;src:url("../plugins/global/fonts/Noto_Naskh_Arabic/NotoNaskhArabic-VariableFont_wght.ttf") format("truetype");font-weight:400 700;font-style:normal;font-display:swap}
@font-face{font-family:BoardAmiri;src:url("../plugins/global/fonts/Amiri/Amiri-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:BoardAmiri;src:url("../plugins/global/fonts/Amiri/Amiri-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:BoardChanga;src:url("../plugins/global/fonts/Changa/Changa-VariableFont_wght.ttf") format("truetype");font-weight:200 800;font-style:normal;font-display:swap}
@font-face{font-family:BoardReadex;src:url("../plugins/global/fonts/Readex_Pro/ReadexPro-VariableFont_HEXP-wght.ttf") format("truetype");font-weight:160 700;font-style:normal;font-display:swap}