/* Observatory panels retain their own surface palette in either application theme.
   Let unstyled headings follow that surface's text; explicit hero/board colors win. */
:where(.obs-shell, .obs-operations, .dashboard-viewer, .shared-dashboard-root,
       .obs-request-preview, .organization-details, .quick-organization,
       .obs-review-success, .recycle-preview, .duplicate-release-dialog,
       .manual-dialog, .design-dialog, .fixed-visual-picker, .template-files-dialog,
       .observatory-home-dashboard, .journey-start) :is(h1, h2, h3, h4, h5, h6) {
    color: inherit;
}

/* These components have fixed light surfaces, including when hosted in a request dialog. */
:where(.fixed-file-details, .fixed-upload, .indicator-upload, .indicator-builder,
       .board-period-picker, .manual-dialog, .fixed-display-settings,
       .organization-additional, .static-templates, .board-input) {
    color: #203d45;
}
/* Form labels sit outside the controls, on these light panels. */
:where(.fixed-file-details, .fixed-upload, .indicator-upload, .indicator-builder,
       .manual-dialog, .fixed-display-settings, .download-panel, .template-detail)
       .form-label { color: inherit; }
.indicator-upload .text-muted { color: #557168 !important; }

/* The home introduction is directly on the app background, outside the white cards. */
[data-theme=dark] .observatory-home-dashboard .home-heading h1 { color: #e4efec; }
[data-theme=dark] .observatory-home-dashboard .home-heading p { color: #b6cbc4; }
/* Shared Observatory surfaces, including previews hosted outside the page shell. */
:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) {
    --obs-surface-line: #aebdc8;
    --obs-detail-line: #d3dde5;
    --obs-surface-heading: #eef3f7;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .obs-panel, .template-detail, .axis-content, .field-info, .axis-section,
    .settings-section, .content-section, .fixed-upload, .fixed-file-details,
    .fixed-version-history, .home-panel, .builder-tools, .builder-preview,
    .builder-selection, .builder-source-summary, .builder-audience,
    .permission-group, .governance-panel, .access-editor, .capability-editor,
    .scope-directory, .scope-user-card, .quality-run-panel, .quality-rule-card,
    .comparison-source-card, .comparison-history-card, .comparison-row-details,
    .smart-rule-card, .obs-governance-card, .obs-governance-panel, .obs-layout-row,
    .obs-optional-section, .obs-axis-accordion__item, .obs-template-generator__axis,
    .obs-widget, .shared-widget, .dashboard-card, .journey-panel, .request-details,
    .capability-details-dialog__section, .quality-score-card, .comparison-summary__card,
    .obs-dashboard-source-card-shell, .obs-audience-choice-card, .obs-upload-details__issues,
    .obs-page-card, .obs-widget-card-preview, .fixed-template-grid > article,
    .builder-list > article) {
    border: 1px solid var(--obs-surface-line) !important;
    border-radius: 12px;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .obs-panel__header, .section-heading, .obs-card-heading,
    .settings-section > h4, .field-info > h4, .axis-section > h4) {
    color: #203c4b !important;
    background: var(--obs-surface-heading) !important;
    border-bottom: 1px solid var(--obs-surface-line) !important;
}

.obs-shell .template-card-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    align-items: center;
}

.obs-shell .template-card-actions > .obs-action:not(.obs-action--icon) {
    flex: 1 1 100%;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(
    .template-detail, .fixed-file-details, .fixed-version-history, .home-panel,
    .builder-tools, .builder-preview, .builder-selection, .permission-group,
    .governance-panel, .quality-rule-card, .comparison-history-card,
    .dashboard-card, .obs-governance-card, .obs-page-card) > header {
    border-bottom: 1px solid var(--obs-detail-line);
    padding-block-end: 12px;
    margin-block-end: 12px;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) details {
    border: 1px solid var(--obs-surface-line);
    border-radius: 8px;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) details > summary {
    padding: 10px 12px;
    color: #203c4b;
    background: var(--obs-surface-heading);
    border-radius: 7px;
    overflow-wrap: anywhere;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) details[open] > summary {
    border-bottom: 1px solid var(--obs-surface-line);
    border-end-start-radius: 0;
    border-end-end-radius: 0;
    margin-block-end: 12px;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) dl > div {
    min-width: 0;
    padding: 10px 12px;
    border: 1px solid var(--obs-detail-line);
    border-radius: 8px;
    background: #f8fafc;
    color: #203c4b;
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) tbody > tr > :is(td, th) {
    border-bottom: 1px solid var(--obs-detail-line);
}

:is(.obs-shell, .shared-dashboard-root, .obs-request-preview, .organization-details) :is(.monitoring-row, .obs-org-row) + :is(.monitoring-row, .obs-org-row) {
    border-top: 1px solid var(--obs-detail-line);
}

/* Action colors deliberately do not inherit organization branding. */
.obs-toolbar {
    display: flex;
    align-items: end;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-block: 0 18px;
    direction: rtl;
}
.obs-toolbar__search { display: grid; gap: 6px; flex: 1 1 280px; max-width: 36rem; min-width: 0; }
.obs-toolbar__search input { width: 100%; }
.obs-help-card { padding: 16px; margin-block: 16px; border: 1px solid #bed8d0; border-radius: 10px; background: #edf6f2; color: #244b43; line-height: 1.8; }
.obs-review-success { position: fixed; width: min(92vw, 26rem); max-width: 92vw; box-sizing: border-box; padding: 32px 28px 24px; border: 1px solid #ccdcd6; border-radius: 14px; color: #17383b; background: #fff; text-align: center; }
.obs-review-success-icon { display: grid; place-items: center; width: 54px; height: 54px; margin: 0 auto 18px; border-radius: 50%; background: #e1f3ec; color: #218365; font-size: 28px; }
.obs-review-success-close { position: absolute; inset-block-start: 6px; inset-inline-end: 8px; border: 0; background: transparent; color: #526a70; font-size: 24px; width: 36px; height: 36px; }
.obs-review-success > .obs-action { width: 100%; justify-content: center; background: #27896f; color: #fff; border-color: #27896f; }
.obs-review-success::backdrop { background: #102a3880; }
.obs-review-success h2 { font-size: 1.3rem; }
.obs-review-success p { line-height: 1.9; margin-block: 16px 24px; }
.obs-table-wrap { width: 100%; overflow-x: auto; }
.obs-table { width: 100%; border-collapse: collapse; }
.obs-table th, .obs-table td { padding: 14px 12px; text-align: start; vertical-align: middle; line-height: 1.8; }
.obs-table td { overflow-wrap: anywhere; }
.obs-table thead { background: #edf4f2; }
.obs-table tr.is-selected { background: #edf6f2; }
.obs-table td small { display: block; color: #526b66; }
.files-name { min-width: 220px; max-width: 380px; }
.files-name small { direction: ltr; text-align: right; unicode-bidi: plaintext; }
.files-period { white-space: nowrap; min-width: 120px; }
.obs-upload-row-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-start; }
.obs-org-directory .obs-table th, .obs-org-directory .obs-table td { min-width: 110px; }
.obs-org-directory .obs-table td:first-child { min-width: 180px; }
.obs-upload-filters.obs-toolbar { display: flex; width: 100%; }
.obs-upload-filters.obs-toolbar > input { flex: 1 1 260px; min-width: 180px; }
.obs-upload-filters.obs-toolbar > select { flex: 0 1 170px; }
.template-selection-toolbar { padding: 12px 16px; }
@media (max-width: 600px) {
    .obs-toolbar__search { flex-basis: 100%; max-width: none; }
    .obs-upload-filters.obs-toolbar > select { flex: 1 1 140px; }
    .obs-table th, .obs-table td { padding: 10px; }
}
.obs-action[data-obs-action] { --obs-action-bg: #475569; }
.obs-action:is([data-obs-action="back"], [data-obs-action="previous"], [data-obs-action="next"], [data-obs-action="forward"]) { --obs-action-bg: #1d4ed8; }
.obs-action:is([data-obs-action="search"], [data-obs-action="refresh"]) { --obs-action-bg: #334e8a; }
.obs-action:is([data-obs-action="add"], [data-obs-action="upload"]) { --obs-action-bg: #0f766e; }
.obs-action:is([data-obs-action="save"], [data-obs-action="publish"], [data-obs-action="submit"]) { --obs-action-bg: #166534; }
.obs-action[data-obs-action="download"] { --obs-action-bg: #0e7490; }
.obs-action:is([data-obs-action="edit"], [data-obs-action="clear"]) { --obs-action-bg: #8a4b0a; }
.obs-action:is([data-obs-action="share"], [data-obs-action="verify"]) { --obs-action-bg: #6d28a5; }
.obs-action[data-obs-action="delete"] { --obs-action-bg: #b42336; }
.obs-action[data-obs-action="pause"] { --obs-action-bg: #8a4b0a; }
.obs-action[data-obs-action="enable"] { --obs-action-bg: #166534; }

body .obs-action[data-obs-action][title][aria-label] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: 44px;
    padding: 10px 14px !important;
    border: 1px solid var(--obs-action-bg) !important;
    border-radius: 8px !important;
    background: var(--obs-action-bg) !important;
    color: #fff !important;
    box-shadow: none !important;
    text-decoration: none !important;
    line-height: 1.4;
    white-space: normal;
    vertical-align: middle;
    cursor: pointer;
}

body .obs-action.obs-action--icon[data-obs-action][title][aria-label] {
    width: 44px !important;
    min-width: 44px !important;
    max-width: 44px !important;
    height: 44px !important;
    flex: 0 0 44px !important;
    padding: 0 !important;
}

body .obs-action[data-obs-action][title][aria-label] > i {
    color: inherit !important;
    font-size: 18px;
    padding: 0;
    margin: 0;
    flex-shrink: 0;
}

body .obs-action[data-obs-action][title][aria-label]:is(:hover, :active):not(:disabled):not([aria-disabled="true"]) {
    filter: brightness(.88);
}

body .obs-action[data-obs-action][title][aria-label]:focus-visible {
    outline: 3px solid #2563eb !important;
    outline-offset: 3px;
}

body .obs-action[data-obs-action][title][aria-label]:is(:disabled, [aria-disabled="true"]) {
    opacity: .55;
    cursor: default;
    filter: none;
}

/* Shared text actions for indicator editing, filters and reader pagination. */
body button.obs-text-button[class] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 44px;
    max-width: 100%;
    padding: .65rem 1rem;
    border: 1px solid #c8dad3;
    border-radius: 12px;
    background: #fff;
    color: #244e43;
    font: inherit;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    overflow-wrap: anywhere;
    cursor: pointer;
    box-shadow: 0 1px 2px #183d3808;
    transition: background-color .15s ease, border-color .15s ease, box-shadow .15s ease;
}

body button.obs-text-button[class]:hover:not(:disabled) {
    background: #edf6f1;
    border-color: #6e9c89;
    box-shadow: 0 2px 6px #183d3810;
}

body button.obs-text-button[class]:is([aria-pressed="true"], [aria-current="step"]) {
    background: #245f50;
    border-color: #245f50;
    color: #fff;
}

body button.obs-text-button[class]:is([aria-pressed="true"], [aria-current="step"]):hover:not(:disabled) {
    background: #1b4b3f;
}

body button.obs-text-button.obs-text-button--warning {
    color: #80501d;
    background: #fffaf0;
    border-color: #e2c795;
}

body button.obs-text-button.obs-text-button--warning:hover:not(:disabled) {
    background: #fff1d6;
    border-color: #b98a44;
}

body button.obs-text-button.obs-text-button--danger {
    color: #a12e3b;
    background: #fff8f8;
    border-color: #ebc8ce;
}

body button.obs-text-button.obs-text-button--danger:hover:not(:disabled) {
    background: #ffecef;
    border-color: #cc8691;
}

body button.obs-text-button[class]:focus-visible,
.manual-dialog .manual-type:focus-visible {
    outline: 3px solid #287e72;
    outline-offset: 3px;
}

body button.obs-text-button[class]:disabled {
    color: #75817c;
    background: #eef2f0;
    border-color: #dce3df;
    box-shadow: none;
    opacity: .65;
    cursor: not-allowed;
}

.builder-unsaved,
.obs-button-pagination {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: .75rem;
    margin-block: 1rem;
}

.builder-unsaved {
    padding: .85rem 1rem;
    border: 1px solid #ead9b8;
    border-radius: 14px;
    background: #fffcf5;
    color: #795327;
}

.builder-unsaved > span {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
}

.obs-button-pagination { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
    body button.obs-text-button[class] { transition: none; }
}

@media print {
    body.obs-print-dashboard * {
        visibility: hidden !important;
    }

    body.obs-print-dashboard #observatory-print-area,
    body.obs-print-dashboard #observatory-print-area * {
        visibility: visible !important;
    }

    body.obs-print-dashboard #observatory-print-area {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        border: 0 !important;
        box-shadow: none !important;
    }
}