/*
 * «پایش سلامت عکس‌ها» (تسک ۱۴۰۵/۰۷/۲۱/۱۶) — the card and the management.
 *
 * Four colours and no fifth: green for what a check confirmed, yellow for
 * what is waiting, red for what is wrong, grey for what is not known. The
 * tokens are the panel's own.
 */
.ph-card,
.ph-plan,
.ph-box {
    font-family: Vazirmatn, sans-serif;
    font-weight: 400;
}

.ph-card {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200);
    border-inline-start: 4px solid var(--std-color-gray-400);
    background-color: var(--std-color-color-white);
    min-width: 0;
}

.dark .ph-card {
    border-color: var(--std-color-gray-700);
    border-inline-start-color: var(--std-color-gray-500);
    background-color: var(--std-color-gray-900);
}

.ph-card[data-verdict="healthy"],
.dark .ph-card[data-verdict="healthy"] {
    border-inline-start-color: var(--std-color-success-400);
}

.ph-card[data-verdict="problem"],
.dark .ph-card[data-verdict="problem"] {
    border-inline-start-color: var(--std-color-danger-400);
}

.ph-card[data-verdict="pending"],
.dark .ph-card[data-verdict="pending"] {
    border-inline-start-color: var(--std-color-warning-500);
}

.ph-head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.ph-dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 9999px;
    flex: none;
    background-color: var(--std-color-gray-400);
}

.ph-card[data-verdict="healthy"] .ph-dot { background-color: var(--std-color-success-400); }
.ph-card[data-verdict="problem"] .ph-dot { background-color: var(--std-color-danger-400); }
.ph-card[data-verdict="pending"] .ph-dot { background-color: var(--std-color-warning-500); }

.ph-title {
    font-weight: 700;
    color: var(--std-color-gray-900);
}

.dark .ph-title { color: var(--std-color-gray-100); }

.ph-verdict {
    margin-inline-start: auto;
    font-weight: 500;
    font-size: 0.8125rem;
    color: var(--std-color-gray-600);
}

.dark .ph-verdict { color: var(--std-color-gray-300); }

.ph-figures {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 0.5rem;
}

@media (min-width: 640px) {
    .ph-figures { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

.ph-figure {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    padding: 0.5rem 0.625rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-200);
    min-width: 0;
    text-decoration: none;
}

.dark .ph-figure { border-color: var(--std-color-gray-700); }

a.ph-figure:hover,
a.ph-figure:focus-visible {
    border-color: var(--std-color-gray-400);
}

.ph-figure-value {
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--std-color-gray-900);
    overflow-wrap: anywhere;
}

.dark .ph-figure-value { color: var(--std-color-gray-100); }

.ph-figure-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500);
}

.dark .ph-figure-label { color: var(--std-color-gray-400); }

.ph-figure-healthy .ph-figure-value { color: var(--std-color-success-600); }
.dark .ph-figure-healthy .ph-figure-value { color: var(--std-color-success-400); }
.ph-figure-problem .ph-figure-value { color: var(--std-color-danger-600); }
.dark .ph-figure-problem .ph-figure-value { color: var(--std-color-danger-400); }
.ph-figure-waiting .ph-figure-value { color: var(--std-color-warning-600); }
.dark .ph-figure-waiting .ph-figure-value { color: var(--std-color-warning-400); }
.ph-figure-unknown .ph-figure-value,
.ph-figure-unchecked .ph-figure-value { color: var(--std-color-gray-500); }
.dark .ph-figure-unknown .ph-figure-value,
.dark .ph-figure-unchecked .ph-figure-value { color: var(--std-color-gray-400); }

/* A figure that is zero is not shouted in its colour. */
.ph-figure[data-value="0"] .ph-figure-value,
.dark .ph-figure[data-value="0"] .ph-figure-value { color: var(--std-color-gray-500); }

.ph-note,
.ph-meta {
    font-size: 0.75rem;
    color: var(--std-color-gray-500);
    margin: 0;
}

.dark .ph-note,
.dark .ph-meta { color: var(--std-color-gray-400); }

.ph-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
}

.ph-muted { font-weight: 600; }

.ph-open {
    align-self: flex-start;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.3rem 0.875rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    color: var(--std-color-gray-800);
    text-decoration: none;
}

.dark .ph-open {
    border-color: var(--std-color-gray-600);
    color: var(--std-color-gray-100);
}

/* ─── the management ─────────────────────────────────────────────────────── */

.ph-tabs-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ph-box {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    padding: 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-gray-200);
    background-color: var(--std-color-color-white);
    min-width: 0;
}

.dark .ph-box {
    border-color: var(--std-color-gray-700);
    background-color: var(--std-color-gray-900);
}

.ph-box-title {
    font-weight: 700;
    margin: 0;
    color: var(--std-color-gray-900);
}

.dark .ph-box-title { color: var(--std-color-gray-100); }

.ph-status {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
}

@media (min-width: 768px) {
    .ph-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ph-status-item {
    display: flex;
    flex-direction: column;
    gap: 0.125rem;
    min-width: 0;
}

.ph-status-label {
    font-size: 0.75rem;
    color: var(--std-color-gray-500);
}

.dark .ph-status-label { color: var(--std-color-gray-400); }

.ph-status-value {
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--std-color-gray-900);
    overflow-wrap: anywhere;
}

.dark .ph-status-value { color: var(--std-color-gray-100); }

.ph-switch-state {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    font-weight: 700;
}

.ph-switch-state[data-on="0"] { color: var(--std-color-gray-500); }
.ph-switch-state[data-on="1"] { color: var(--std-color-success-600); }
.dark .ph-switch-state[data-on="1"] { color: var(--std-color-success-400); }
.ph-switch-state[data-on="paused"] { color: var(--std-color-warning-600); }
.dark .ph-switch-state[data-on="paused"] { color: var(--std-color-warning-400); }

.ph-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.ph-button {
    font-family: inherit;
    font-weight: 600;
    font-size: 0.8125rem;
    padding: 0.4rem 0.9rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    background: transparent;
    color: var(--std-color-gray-800);
    cursor: pointer;
}

.dark .ph-button {
    border-color: var(--std-color-gray-600);
    color: var(--std-color-gray-100);
}

.ph-button-go {
    border-color: var(--std-color-success-600);
    color: var(--std-color-success-700);
}

.dark .ph-button-go {
    border-color: var(--std-color-success-400);
    color: var(--std-color-success-400);
}

.ph-button-stop {
    border-color: var(--std-color-danger-400);
    color: var(--std-color-danger-600);
}

.dark .ph-button-stop { color: var(--std-color-danger-400); }

.ph-plan {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.75rem 1rem;
}

@media (min-width: 768px) {
    .ph-plan { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

.ph-field {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    min-width: 0;
}

.ph-field-wide { grid-column: 1 / -1; }

.ph-field label,
.ph-field legend {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--std-color-gray-700);
}

.dark .ph-field label,
.dark .ph-field legend { color: var(--std-color-gray-300); }

.ph-field input[type="time"],
.ph-field input[type="number"] {
    font-family: inherit;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-300);
    background-color: var(--std-color-color-white);
    color: var(--std-color-gray-900);
    min-width: 0;
}

.dark .ph-field input[type="time"],
.dark .ph-field input[type="number"] {
    border-color: var(--std-color-gray-600);
    background-color: var(--std-color-gray-800);
    color: var(--std-color-gray-100);
}

.ph-field input:disabled { opacity: 0.6; }

.ph-days {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1rem;
    border: 0;
    padding: 0;
    margin: 0;
}

.ph-days label,
.ph-check {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-weight: 400;
}

.ph-error {
    font-size: 0.75rem;
    color: var(--std-color-danger-600);
}

.dark .ph-error { color: var(--std-color-danger-400); }

.ph-hint {
    font-size: 0.75rem;
    color: var(--std-color-gray-500);
    margin: 0;
}

.dark .ph-hint { color: var(--std-color-gray-400); }

.ph-detail {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 0.5rem 1.25rem;
    font-family: Vazirmatn, sans-serif;
}

@media (min-width: 640px) {
    .ph-detail { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.ph-detail-wide { grid-column: 1 / -1; }

/* The three parts of a file's details (تسک ۱۶_۰۵، PHM16F-06): each opens with its title on a band of its own. */
.ph-detail-section {
    margin-top: 0.5rem;
    padding: 0.4rem 0.6rem;
    border-radius: 0.5rem;
    background: var(--std-color-gray-100, #f3f4f6);
    font-size: 0.95rem;
}

.dark .ph-detail-section { background: var(--std-color-gray-800, #1f2937); }

.ph-detail-section:first-of-type { margin-top: 0; }

.ph-history {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.75rem;
    font-family: Vazirmatn, sans-serif;
}

.ph-history-row {
    padding: 0.5rem 0.75rem;
    border-radius: 0.5rem;
    border: 1px solid var(--std-color-gray-200);
    font-size: 0.8125rem;
}

.ph-history-row:nth-child(even) { background-color: var(--std-color-gray-50); }

.dark .ph-history-row { border-color: var(--std-color-gray-700); }
.dark .ph-history-row:nth-child(even) { background-color: var(--std-color-gray-800); }

/* ─── «مانیتورینگ سرور»، the unified page ───────────────────────────────── */

.sm-section-title {
    font-family: Vazirmatn, sans-serif;
    font-weight: 700;
    margin: 0;
    color: var(--std-color-gray-900);
}

.dark .sm-section-title { color: var(--std-color-gray-100); }

.sm-stack {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    min-width: 0;
}

.sm-alerts {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
    padding: 0.75rem 1rem;
    border-radius: 0.75rem;
    border: 1px solid var(--std-color-warning-400);
    font-family: Vazirmatn, sans-serif;
    font-size: 0.8125rem;
}

.sm-alert[data-level="danger"] { color: var(--std-color-danger-600); }
.dark .sm-alert[data-level="danger"] { color: var(--std-color-danger-400); }
.sm-alert[data-level="warning"] { color: var(--std-color-warning-600); }
.dark .sm-alert[data-level="warning"] { color: var(--std-color-warning-400); }

.sm-volume {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.sm-volume-row {
    display: grid;
    grid-template-columns: minmax(0, 11rem) minmax(0, 1fr) minmax(0, 7rem);
    align-items: center;
    gap: 0.5rem;
    font-family: Vazirmatn, sans-serif;
    font-size: 0.8125rem;
}

@media (max-width: 640px) {
    .sm-volume-row { grid-template-columns: minmax(0, 1fr); }
}

.sm-volume-track {
    height: 0.75rem;
    border-radius: 9999px;
    background-color: var(--std-color-gray-200);
    overflow: hidden;
}

.dark .sm-volume-track { background-color: var(--std-color-gray-700); }

.sm-volume-bar {
    height: 100%;
    border-radius: 9999px;
    background-color: var(--std-color-danger-400);
}

.sm-legacy-label {
    display: inline-block;
    font-family: Vazirmatn, sans-serif;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.1rem 0.6rem;
    border-radius: 9999px;
    border: 1px solid var(--std-color-gray-400);
    color: var(--std-color-gray-600);
}

.dark .sm-legacy-label { color: var(--std-color-gray-300); }

.sm-checks {
    width: 100%;
    border-collapse: collapse;
    font-family: Vazirmatn, sans-serif;
    font-size: 0.8125rem;
}

.sm-checks th,
.sm-checks td {
    padding: 0.45rem 0.6rem;
    text-align: start;
    border-bottom: 1px solid var(--std-color-gray-200);
    vertical-align: top;
}

.dark .sm-checks th,
.dark .sm-checks td { border-bottom-color: var(--std-color-gray-700); }

.sm-checks tbody tr:nth-child(even) { background-color: var(--std-color-gray-50); }
.dark .sm-checks tbody tr:nth-child(even) { background-color: var(--std-color-gray-800); }

.sm-checks-scroll { overflow-x: auto; }

.sm-state[data-ok="1"] { color: var(--std-color-success-600); font-weight: 600; }
.dark .sm-state[data-ok="1"] { color: var(--std-color-success-400); }
.sm-state[data-ok="0"] { color: var(--std-color-danger-600); font-weight: 600; }
.dark .sm-state[data-ok="0"] { color: var(--std-color-danger-400); }
.sm-state[data-ok=""] { color: var(--std-color-gray-500); font-weight: 600; }

/*
 * A page that carries a table is as wide as its widest content
 * (agency-tables.css), and scrolls sideways as a whole. A block of cards or
 * prose above the table must neither stretch that page to the length of its
 * own longest line nor be stretched to the table's width — on a phone that
 * would put most of a card off the screen. So these blocks ask for no width
 * of their own and are held to the width of the screen.
 */
.sm-stack,
.ph-tabs-row,
[data-photo-health-page],
.fi-page-content > .ph-box {
    width: 0;
    min-width: min(100%, calc(100vw - 2rem));
    max-width: calc(100vw - 2rem);
}

@media (min-width: 1024px) {
    .sm-stack,
    .ph-tabs-row,
    [data-photo-health-page],
    .fi-page-content > .ph-box {
        min-width: min(100%, calc(100vw - 4rem));
        max-width: calc(100vw - 4rem);
    }
}

/* The passes by depth (تسک ۱۴۰۵/۰۷/۲۱/۱۶_۰۳، PHM22-02): one line under the
   figures, each depth its own chip, wrapping on a narrow screen. */
.ph-depths {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: .375rem .5rem;
    margin-top: .75rem;
    font-size: .8125rem;
}

.ph-depths-title { color: var(--std-color-gray-600); }
.dark .ph-depths-title { color: var(--std-color-gray-400); }

.ph-depth {
    display: inline-flex;
    align-items: center;
    gap: .25rem;
    padding: .2rem .6rem;
    border-radius: 999px;
    border: 1px solid var(--std-color-gray-200);
    color: inherit;
    text-decoration: none;
    white-space: nowrap;
}

.dark .ph-depth { border-color: var(--std-color-gray-700); }
a.ph-depth:hover { background: var(--std-color-gray-50); }
.dark a.ph-depth:hover { background: var(--std-color-gray-800); }
.ph-depth-full strong { color: var(--std-color-success-600); }
.ph-depth-limited strong,
.ph-depth-destination strong { color: var(--std-color-info-600, var(--std-color-primary-600)); }
.ph-depth-unproven strong { color: var(--std-color-gray-600); }

/*
 * A wide table scrolls inside its own box (تسک ۱۴۰۵/۰۷/۲۱/۱۶_۰۳، PHM22-07).
 *
 * The panel's standard for a page with a table is that the page grows to the
 * table and the page area scrolls sideways as a whole. These two pages are
 * mostly cards and charts with a table under them, and on a phone that made
 * everything above the table travel sideways with it. Here the page keeps the
 * width of the screen and the table's own box carries the scrollbar.
 */
.fi-body .fi-page.fi-page-own-table-scroll {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
}

.fi-body .fi-page.fi-page-own-table-scroll .fi-ta-ctn {
    max-width: 100%;
    min-width: 0;
}

.fi-body .fi-page.fi-page-own-table-scroll .fi-ta-content-ctn:has(.fi-ta-table) {
    overflow-x: auto !important;
    width: auto !important;
    min-width: 0 !important;
    max-width: 100%;
}

/*
 * The occupancy chart on a phone (تسک ۱۴۰۵/۰۷/۲۱/۱۶_۰۳، PHM22-07). Three
 * columns of a fixed nine rems are wider than the screen, and centred in a
 * scrolling row the first of them could not be reached at all. Under 640
 * pixels the three share the width of their card instead.
 */
@media (max-width: 640px) {
    [data-server-chart="occupancy"] .fi-storage-compare {
        gap: 0.5rem;
        justify-content: space-between;
        overflow-x: visible;
    }

    [data-server-chart="occupancy"] .fi-storage-compare-slot {
        flex: 1 1 0;
        width: auto;
        min-width: 0;
    }

    [data-server-chart="occupancy"] .fi-storage-compare-label,
    [data-server-chart="occupancy"] .fi-storage-compare-sub {
        text-align: center;
        overflow-wrap: anywhere;
        font-size: 0.6875rem;
    }
}