/* Keep the admin panel at a compact, standard desktop scale. */
html {
    font-size: 90%;
}

.opsflow-required-toggle {
    align-self: center;
}

.opsflow-result-ok .fi-section-header-heading {
    color: #16a34a;
}

.opsflow-result-ko .fi-section-header-heading {
    color: #dc2626;
}

.opsflow-result-warning .fi-section-header-heading {
    color: #ea580c;
}

/* Make each service parameter easy to distinguish inside the repeater. */
.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 1) {
    background-color: #f7fbff;
    border-color: #dbeafe;
    --tw-ring-color: #dbeafe;
}

.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 2) {
    background-color: #f7fcf8;
    border-color: #dcfce7;
    --tw-ring-color: #dcfce7;
}

.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 3) {
    background-color: #fffdf5;
    border-color: #fef3c7;
    --tw-ring-color: #fef3c7;
}

.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 4) {
    background-color: #fcf9ff;
    border-color: #f3e8ff;
    --tw-ring-color: #f3e8ff;
}

.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 1) .fi-fo-repeater-item-header {
    background-color: #eff6ff;
}

.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 2) .fi-fo-repeater-item-header {
    background-color: #f0fdf4;
}

.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 3) .fi-fo-repeater-item-header {
    background-color: #fffbeb;
}

.fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 4) .fi-fo-repeater-item-header {
    background-color: #faf5ff;
}

@media (prefers-color-scheme: dark) {
    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 1) {
        background-color: #172554;
        border-color: #1d4ed8;
        --tw-ring-color: #1d4ed8;
    }

    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 2) {
        background-color: #052e16;
        border-color: #15803d;
        --tw-ring-color: #15803d;
    }

    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 3) {
        background-color: #451a03;
        border-color: #b45309;
        --tw-ring-color: #b45309;
    }

    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 4) {
        background-color: #3b0764;
        border-color: #9333ea;
        --tw-ring-color: #9333ea;
    }

    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 1) .fi-fo-repeater-item-header {
        background-color: #1e3a8a;
    }

    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 2) .fi-fo-repeater-item-header {
        background-color: #166534;
    }

    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 3) .fi-fo-repeater-item-header {
        background-color: #92400e;
    }

    .fi-fo-repeater .fi-fo-repeater-item:nth-child(4n + 4) .fi-fo-repeater-item-header {
        background-color: #6b21a8;
    }
}

@media (prefers-color-scheme: dark) {
    .opsflow-result-ok .fi-section-header-heading {
        color: #4ade80;
    }

    .opsflow-result-ko .fi-section-header-heading {
        color: #f87171;
    }

    .opsflow-result-warning .fi-section-header-heading {
        color: #fb923c;
    }
}

/* Monitoring dashboard widgets rendered outside the Vite bundle. */
.opsflow-muted { color: #6b7280; font-size: 0.8125rem; }
.opsflow-strong { color: #111827; font-weight: 600; }
.opsflow-block { display: block; }
.opsflow-nowrap { white-space: nowrap; }
.opsflow-wrap { white-space: normal; min-width: 14rem; }
.opsflow-footnote { margin-top: 0.75rem; }

.opsflow-empty {
    border: 1px dashed #d1d5db;
    border-radius: 0.5rem;
    padding: 1.5rem 1rem;
    color: #6b7280;
    font-size: 0.875rem;
    text-align: center;
}

.opsflow-all-clear {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.875rem 1.25rem;
    border: 1px solid #bbf7d0;
    border-radius: 0.75rem;
    background: #f0fdf4;
}

.opsflow-all-clear-icon { width: 1.75rem; height: 1.75rem; color: #16a34a; flex-shrink: 0; }
.opsflow-all-clear-title { color: #166534; font-weight: 600; font-size: 0.9375rem; }

.opsflow-problems { border-left: 4px solid #ef4444; }

.opsflow-table-wrapper { overflow-x: auto; }

.opsflow-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
}

.opsflow-table th {
    padding: 0.5rem 0.625rem;
    border-bottom: 1px solid #e5e7eb;
    color: #6b7280;
    font-size: 0.75rem;
    font-weight: 600;
    text-align: left;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

.opsflow-table td {
    padding: 0.625rem;
    border-bottom: 1px solid #f3f4f6;
    color: #374151;
    vertical-align: middle;
}

.opsflow-table tbody tr:last-child td { border-bottom: 0; }
.opsflow-table tbody tr:hover { background: #f9fafb; }

.opsflow-actions { white-space: nowrap; text-align: right; width: 1%; }
.opsflow-actions > * { display: inline-flex; }

.opsflow-badges { display: flex; flex-wrap: wrap; gap: 0.25rem; }
/* Filament truncates badge labels; status pills in dashboard tables must stay readable. */
.opsflow-table .fi-badge.fi-badge,
.opsflow-table .fi-badge .fi-badge-label-ctn,
.opsflow-table .fi-badge .fi-badge-label { max-width: none; overflow: visible; text-overflow: clip; white-space: nowrap; }

.opsflow-matrix {
    display: grid;
    gap: 1rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 21rem), 1fr));
}

.opsflow-matrix .fi-section-header-after-ctn { display: flex; gap: 0.25rem; }

.opsflow-meter-list,
.opsflow-timeline-list,
.opsflow-agent-list { display: grid; gap: 0.75rem; }

.opsflow-agent-list { gap: 1.25rem; }

.opsflow-meter-grid {
    column-gap: 2rem;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}

.opsflow-meter-label {
    display: flex;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.3rem;
    font-size: 0.8125rem;
}

.opsflow-meter {
    flex: 1;
    height: 0.4rem;
    border-radius: 9999px;
    background: #f3f4f6;
    overflow: hidden;
}

.opsflow-meter-fill { height: 100%; border-radius: 9999px; }
.opsflow-fill-success { background: #22c55e; }
.opsflow-fill-warning { background: #f59e0b; }
.opsflow-fill-danger { background: #ef4444; }
.opsflow-fill-gray { background: #9ca3af; }

.opsflow-metric-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.3rem;
}

.opsflow-metric-row > .opsflow-muted { width: 2.75rem; font-size: 0.75rem; }
.opsflow-metric-value { width: 2.5rem; text-align: right; font-size: 0.75rem; color: #374151; }

.opsflow-dot {
    display: inline-block;
    width: 0.5rem;
    height: 0.5rem;
    margin-right: 0.35rem;
    border-radius: 9999px;
    vertical-align: middle;
}

.opsflow-dot-success { background: #22c55e; }
.opsflow-dot-gray { background: #9ca3af; }

.opsflow-timeline { display: flex; gap: 2px; height: 0.875rem; }
.opsflow-slot { flex: 1; border-radius: 2px; }
.opsflow-slot-up { background: #22c55e; }
.opsflow-slot-degraded { background: #f59e0b; }
.opsflow-slot-down { background: #ef4444; }
.opsflow-slot-empty { background: #e5e7eb; }

.dark .opsflow-muted,
.dark .opsflow-table th,
.dark .opsflow-empty { color: #9ca3af; }
.dark .opsflow-strong { color: #f9fafb; }
.dark .opsflow-table td,
.dark .opsflow-metric-value { color: #d1d5db; }
.dark .opsflow-table th,
.dark .opsflow-table td { border-color: #374151; }
.dark .opsflow-table tbody tr:hover { background: #1f2937; }
.dark .opsflow-empty { border-color: #4b5563; }
.dark .opsflow-meter,
.dark .opsflow-slot-empty { background: #374151; }
.dark .opsflow-all-clear { background: #052e16; border-color: #166534; }
.dark .opsflow-all-clear-title { color: #bbf7d0; }

/* Audit log: one row per changed field, the old value in red and the new one in green. */
.opsflow-diff {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    table-layout: fixed;
}

.opsflow-diff th,
.opsflow-diff td {
    padding: 0.625rem 0.75rem;
    border-bottom: 1px solid #e5e7eb;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.opsflow-diff thead th {
    color: #6b7280;
    font-weight: 600;
}

.opsflow-diff thead th:first-child,
.opsflow-diff tbody th {
    width: 12rem;
}

.opsflow-diff tbody th code {
    font-size: 0.8125rem;
    font-weight: 500;
}

.opsflow-diff-old { background-color: #fef2f2; }
.opsflow-diff-new { background-color: #f0fdf4; }

.opsflow-diff-old del {
    background-color: #fecaca;
    color: #991b1b;
    text-decoration: line-through;
}

.opsflow-diff-new ins {
    background-color: #bbf7d0;
    color: #166534;
    text-decoration: none;
}

.opsflow-diff-text { white-space: pre-wrap; }

.opsflow-diff-json {
    margin: 0;
    white-space: pre-wrap;
    font-size: 0.8125rem;
}

.opsflow-diff-list {
    margin: 0;
    padding-left: 1.25rem;
    list-style: disc;
}

.opsflow-diff-html ul { list-style: disc; padding-left: 1.25rem; }
.opsflow-diff-html ol { list-style: decimal; padding-left: 1.25rem; }
.opsflow-diff-html p + p,
.opsflow-diff-html p + ul,
.opsflow-diff-html ul + p { margin-top: 0.5rem; }

.opsflow-diff-empty { color: #9ca3af; }

.dark .opsflow-diff th,
.dark .opsflow-diff td { border-color: rgba(255, 255, 255, 0.1); }
.dark .opsflow-diff thead th { color: #9ca3af; }
.dark .opsflow-diff-old { background-color: rgba(239, 68, 68, 0.1); }
.dark .opsflow-diff-new { background-color: rgba(34, 197, 94, 0.1); }
.dark .opsflow-diff-old del { background-color: rgba(239, 68, 68, 0.3); color: #fecaca; }
.dark .opsflow-diff-new ins { background-color: rgba(34, 197, 94, 0.3); color: #bbf7d0; }

.opsflow-subject-link {
    color: #d97706;
    text-decoration: underline;
}

.dark .opsflow-subject-link { color: #fbbf24; }

.fi-sidebar-item.fi-academy-enrollments-navigation-item {
    margin-top: 0.75rem;
    padding-top: 0.75rem;
    border-top: 1px solid rgb(226 232 240);
}

.dark .fi-sidebar-item.fi-academy-enrollments-navigation-item {
    border-top-color: rgb(51 65 85);
}

/*
 * Pagination of the tables: Filament only shows the page numbers and «Mostrando X a Y de Z» when the table is 56rem
 * wide, which the tables of the areas with a sub-navigation menu never are. Show them from 36rem instead.
 */
@supports (container-type: inline-size) {
    @container (min-width: 36rem) {
        .fi-pagination .fi-pagination-overview {
            display: inline;
        }

        .fi-pagination .fi-pagination-items {
            display: flex;
        }

        .fi-pagination:not(.fi-simple) .fi-pagination-previous-btn,
        .fi-pagination:not(.fi-simple) .fi-pagination-next-btn {
            display: none;
        }
    }
}

/*
 * Tinted sections of the monograph tabs (texts and pathologies of a medication): the wrapper of each section gets a
 * hue through --section-tint, so the headings are told apart at a glance.
 */
.fi-sc-section[style*='--section-tint'] > .fi-section {
    background-color: oklch(0.985 0.012 var(--section-tint));
    border-inline-start: 3px solid oklch(0.85 0.06 var(--section-tint));
}

.dark .fi-sc-section[style*='--section-tint'] > .fi-section {
    background-color: oklch(0.26 0.02 var(--section-tint));
    border-inline-start-color: oklch(0.45 0.05 var(--section-tint));
}

/* SSH security dashboard. */
.opsflow-mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.opsflow-ssh-sources { display: grid; gap: 1rem; }
.opsflow-ssh-source { display: grid; gap: 0.5rem; padding-bottom: 1rem; border-bottom: 1px solid #f3f4f6; }
.opsflow-ssh-source:last-child { padding-bottom: 0; border-bottom: 0; }
.opsflow-ssh-source-header { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem; }
.opsflow-ssh-ips { margin-top: 0.375rem; }
.opsflow-ssh-ips .fi-badge-label { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }
.opsflow-hint {
    padding: 0.5rem 0.75rem;
    border-left: 3px solid #f59e0b;
    border-radius: 0.375rem;
    background: #fffbeb;
    color: #92400e;
    font-size: 0.8125rem;
}
.dark .opsflow-ssh-source { border-color: #374151; }
.dark .opsflow-hint { background: rgba(245, 158, 11, 0.1); color: #fcd34d; }

.opsflow-link { color: var(--primary-600); text-decoration: underline; text-underline-offset: 2px; }
.dark .opsflow-link { color: var(--primary-400); }