* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --color-accent: #ff5500;
    --color-healthy: #22C55D;
    --color-unhealthy: #ff5500;
    --color-warning: #ff8c00;
    --color-text-primary: #333;
    --color-text-secondary: rgba(0, 0, 0, 0.6);
    --color-text-muted: rgba(0, 0, 0, 0.4);
    --color-text-faint: #999;
    --color-text-meta: #666;
    --color-bg: #fafafa;
    --color-bg-card: white;
    --color-bg-hover: #f5f5f5;
    --color-border: #e0e0e0;
    --color-border-hover: #d0d0d0;
    --color-border-light: #f0f0f0;
    --color-error-bg: #f8d7da;
    --color-error-text: #721c24;
    --color-error-inline: #dc2626;
    --color-badge-healthy-bg: #d4edda;
    --color-badge-healthy-text: #155724;
    --color-badge-unhealthy-bg: #f8d7da;
    --color-badge-unhealthy-text: #721c24;
    --color-badge-unknown-bg: #fff3cd;
    --color-badge-unknown-text: #856404;
}

body {
    font-family: "DM Mono", monospace;
    background-color: var(--color-bg);
    color: var(--color-text-muted);
    font-weight: 500;
    letter-spacing: -0.04em;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

.container {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 60px 20px 0;
}

.header {
    margin-bottom: 40px;
}

.logo {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-direction: column;
}

.logo-icon {
    width: 37px;
    height: 37px;
    background-image: url('/assets/favicon.ico');
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}

.logo-text {
    font-size: 24px;
    color: var(--color-text-primary);
}


.main-content {
    width: 100%;
    max-width: 1400px;
    padding: 0 20px;
}

.form-title {
    font-size: 28px;
    font-weight: 500;
    color: var(--color-text-primary);
    text-align: center;
    margin-bottom: 32px;
    letter-spacing: -0.02em;
}

.button {
    font-family: "DM Mono", monospace;
    font-weight: 500;
    letter-spacing: -0.02em;
    font-size: 16px;
    width: 100%;
    height: 48px;
    border: 1px solid var(--color-border);
    background-color: var(--color-bg-card);
    color: var(--color-accent);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    transition: all 0.2s;
}

.button:hover {
    background-color: #eeeeee;
    border-color: var(--color-border-hover);
}

.button-icon {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

.note {
    text-align: center;
    font-size: 12px;
    margin-top: 24px;
}

.highlight {
    color: var(--color-accent);
}

.loader {
    width: 60px;
    height: 60px;
    border: 3px solid var(--color-accent);
    border-bottom-color: transparent;
    border-radius: 50%;
    display: inline-block;
    box-sizing: border-box;
    animation: spin 2s linear infinite;
}

.footer {
    margin-top: auto;
    width: 100%;
    position: relative;
}

.footer-content {
    color: var(--color-text-muted);
    padding: 30px 24px;
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    font-size: 14px;
    font-weight: 500;
}

.footer-line {
    height: 17px;
    background-color: var(--color-accent);
    width: 100%;
}

.footer-section {
    display: flex;
    flex-direction: column;
}

.footer-label {
    margin-bottom: 4px;
}

.footer-value {
    color: var(--color-text-muted);
    font-weight: 400;
    font-size: 12px;
}

.footer-center {
    text-align: center;
}

.tokens-section {
    text-align: right;
}

.error-message {
    background-color: var(--color-error-bg);
    color: var(--color-error-text);
    padding: 12px 16px;
    border-radius: 6px;
    margin-top: 16px;
    font-size: 12px;
    white-space: pre-wrap;
    /* Errors can contain full response bodies without spaces. Wrap them inside the card and limit
       the height so that the card stays readable. */
    overflow-wrap: anywhere;
    max-height: 160px;
    overflow-y: auto;
    z-index: 2;
    grid-column: 1 / -1; /* Span the full width of the grid when in grid context */
}

/* Network Monitor Styles */
.service-card {
    background: var(--color-bg-card);
    border: 0.5px solid var(--color-border);
    border-radius: 8px;
    padding: 20px;
    transition: all 0.2s;
    display: flex;
    flex-direction: column;
    /* Without this, a grid column with an `auto` minimum grows to the width of the longest
       single-line value, and the card overflows narrow screens. */
    min-width: 0;
}

.service-card:hover {
    border-color: var(--color-border-hover);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.service-card.healthy {
    border-left: 4px solid var(--color-healthy);
}

.service-card.unhealthy {
    border-left: 4px solid var(--color-accent);
}

.service-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    flex-shrink: 0;
}

.service-name {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-primary);
}

.service-status {
    font-size: 14px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.service-status.healthy {
    color: var(--color-healthy);
}

.service-status.unhealthy {
    color: var(--color-unhealthy);
}

.service-status.unknown {
    color: var(--color-text-secondary);
}

.service-content {
    flex: 1;
    margin-bottom: 8px;
}

.validators-card {
    grid-column: 1 / -1;
}

.validators-card.unknown {
    border-left: 4px solid var(--color-text-secondary);
}

.validator-summary {
    text-transform: none;
}

.validators-table {
    width: 100%;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 12px;
}

.validators-table th,
.validators-table td {
    padding: 12px 8px;
    text-align: left;
    vertical-align: top;
    overflow-wrap: anywhere;
}

.validators-table thead th {
    color: var(--color-text-secondary);
    font-weight: 500;
}

.validators-table th:first-child {
    width: 30%;
}

.validators-table tbody {
    border-top: 1px solid var(--color-border-light);
}

.validators-table .service-status {
    font-size: 12px;
}

.validator-meta {
    margin-top: 6px;
    color: var(--color-text-faint);
    font-size: 11px;
    font-weight: 400;
}

.validator-error-row td {
    padding-top: 0;
}

.validator-error summary {
    cursor: pointer;
    color: var(--color-unhealthy);
}

.validator-error .error-message {
    margin-top: 8px;
}


.service-details {
    margin: 12px 0;
    font-size: 12px;
    color: var(--color-text-secondary);
}

.detail-item {
    margin-bottom: 4px;
    display: flex;
    align-items: center;
}

.detail-item strong {
    color: var(--color-text-primary);
    margin-right: 8px;
    min-width: 80px;
}

.genesis-value {
    font-size: 11px;
    color: var(--color-text-meta);
    margin-right: 8px;
}

.copy-button {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px;
    border-radius: 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    color: var(--color-text-faint);
    flex-shrink: 0;
}

.copy-button:hover {
    background-color: var(--color-bg-hover);
    color: var(--color-accent);
}

.copy-icon {
    width: 14px;
    height: 14px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.nested-status {
    margin-top: 8px;
    padding-left: 12px;
    border-left: 2px solid var(--color-border);
    font-size: 11px;
}

.service-timestamp {
    font-size: 11px;
    color: var(--color-text-faint);
    margin-top: auto;
    padding-top: 8px;
    font-style: italic;
    flex-shrink: 0;
    border-top: 1px solid var(--color-border-light);
}

#status-container {
    min-height: 200px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 16px;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
}

.loading-section {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 200px;
    grid-column: 1 / -1; /* Span the full width of the grid when in grid context */
}

.worker-status {
    margin: 4px 0;
    padding: 4px 8px;
    background: rgba(0, 0, 0, 0.05);
    border-radius: 4px;
    font-size: 12px;
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}

.worker-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.worker-version {
    color: var(--color-text-meta);
}

.worker-status-badge {
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 10px;
    font-weight: 500;
    text-transform: uppercase;
}

.worker-status-badge.healthy {
    background: var(--color-badge-healthy-bg);
    color: var(--color-badge-healthy-text);
}

.worker-status-badge.unhealthy {
    background: var(--color-badge-unhealthy-bg);
    color: var(--color-badge-unhealthy-text);
}

.worker-status-badge.unknown {
    background: var(--color-badge-unknown-bg);
    color: var(--color-badge-unknown-text);
}

/* Transaction Prover Test Styles */
.test-metrics {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
}

.test-metrics.healthy {
    background: rgba(34, 197, 93, 0.05);
    border-left: 3px solid var(--color-healthy);
}

.test-metrics.unhealthy {
    background: rgba(255, 85, 0, 0.05);
    border-left: 3px solid var(--color-accent);
}

.metric-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 4px 0;
    font-size: 12px;
}

.metric-label {
    color: var(--color-text-primary);
    font-weight: 500;
    white-space: nowrap;
}

.metric-value {
    font-weight: 500;
}

/* A long value is a flex row, so the value and its copy button stay on the same line.
   `min-width: 0` and `max-width: 100%` let the row shrink to the width of the card. The
   `.value-text` inside it then cuts the value with an ellipsis. The left margin keeps the shrunk
   value apart from its label. */
.metric-value:has(.value-text) {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    min-width: 0;
    max-width: 100%;
    margin-left: 8px;
}

/* A long value (URL, commitment, ID) stays on one line. When there is not sufficient width, the
   value ends with an ellipsis. The tooltip and the copy button give the full value. */
.value-text {
    min-width: 0;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.metric-value.warning-delta,
.warning-text {
    color: var(--color-warning);
    font-weight: 500;
    font-size: 12px;
}

.warning-banner {
    margin-top: 8px;
    padding: 8px 12px;
    border-radius: 4px;
    background: rgba(255, 85, 0, 0.08);
    border-left: 3px solid var(--color-warning);
}

.test-metrics.healthy .metric-value {
    color: var(--color-healthy);
}

.test-metrics.unhealthy .metric-value {
    color: var(--color-accent);
}

/* Refresh button container */
.refresh-button-container {
    grid-column: 1 / -1; /* Span the full width of the grid */
    margin-top: 20px;
}

/* Additional responsive breakpoints */
@media (max-width: 480px) {
    #status-container {
        grid-template-columns: 1fr;
        gap: 12px;
    }

    .service-card {
        padding: 16px;
    }
}

@media (min-width: 769px) and (max-width: 1024px) {
    #status-container {
        grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    }
}

/* gRPC-Web Probe Styles */
.probe-section {
    margin-top: 12px;
    padding-top: 8px;
    border-top: 1px dashed var(--color-border);
}

.probe-spinner {
    width: 12px;
    height: 12px;
    border: 2px solid #ccc;
    border-top-color: var(--color-text-meta);
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
}

@keyframes spin {
    to { transform: rotate(360deg); }
}

.probe-result {
    margin-top: 8px;
    padding: 6px 10px;
    border-radius: 4px;
    font-size: 11px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

.probe-result.probe-ok {
    background-color: rgba(34, 197, 93, 0.1);
    border-left: 3px solid var(--color-healthy);
}

.probe-result.probe-failed {
    background-color: rgba(255, 85, 0, 0.1);
    border-left: 3px solid var(--color-accent);
}

.probe-result.probe-pending {
    background-color: rgba(150, 150, 150, 0.1);
    border-left: 3px solid var(--color-text-faint);
}

.probe-pending .probe-status-badge {
    color: var(--color-text-meta);
    text-transform: none;
}

.probe-status-badge {
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.probe-ok .probe-status-badge {
    color: var(--color-healthy);
}

.probe-failed .probe-status-badge {
    color: var(--color-accent);
}

.probe-latency {
    color: var(--color-text-meta);
}

.probe-error {
    color: var(--color-error-inline);
    font-size: 10px;
    max-width: 200px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.probe-time {
    color: var(--color-text-faint);
    font-size: 10px;
    margin-left: auto;
}

/* Responsive: 768px and below */
@media (max-width: 768px) {
    .validators-table,
    .validators-table tbody,
    .validators-table tr {
        display: block;
    }

    .validators-table thead {
        display: none;
    }

    .validators-table tbody {
        padding: 12px 0;
    }

    .validators-table th:first-child {
        display: block;
        width: auto;
        padding: 0 0 8px;
        font-size: 14px;
    }

    .validators-table td {
        display: flex;
        justify-content: space-between;
        gap: 12px;
        padding: 6px 0;
    }

    .validators-table td[data-label]::before {
        content: attr(data-label);
        color: var(--color-text-secondary);
    }

    .validators-table .validator-error-row td {
        display: block;
    }

    .container {
        padding: 40px 16px 0;
    }

    .footer-content {
        flex-direction: column;
        gap: 16px;
        text-align: center;
        align-items: center;
    }

    .tokens-section {
        text-align: center;
    }

    .service-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }

    .service-status {
        align-self: flex-end;
    }

    .detail-item {
        flex-direction: column;
        align-items: flex-start;
    }

    .detail-item strong {
        margin-bottom: 2px;
    }

    .metric-row {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .metric-value:has(.value-text) {
        margin-left: 0;
    }

    #status-container {
        grid-template-columns: 1fr;
    }

    .main-content {
        padding: 0 16px;
    }

    .probe-result {
        flex-direction: column;
        align-items: flex-start;
        gap: 4px;
    }

    .probe-time {
        margin-left: 0;
    }
}