/* EKS Dashboard — Status-Dot und Badge Overrides */
.status-dot {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
}
.status-online { background-color: #22c55e; }
.status-offline { background-color: #ef4444; }
.status-degraded { background-color: #eab308; }

.badge-event-active {
    background-color: #1b7f3a;
    color: #ffffff;
    padding: 2px 8px;
    border-radius: 4px;
    font-size: 14px;
}

/* Fleet grid responsive */
.fleet-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 24px;
}

/* Phase 20 — Detail Page */

/* Tab Navigation */
.detail-tabs {
    display: flex;
    gap: 0;
    border-bottom: 2px solid var(--pico-muted-border-color);
    margin-bottom: 24px;
}
.detail-tabs a {
    padding: 8px 16px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    color: var(--pico-muted-color);
}
.detail-tabs a.active {
    border-bottom-color: #1b7f3a;
    color: var(--pico-color);
    font-weight: 700;
}

/* Log Viewer */
.log-viewer {
    background: var(--pico-code-background-color);
    border-radius: 4px;
    padding: 16px;
    max-height: 500px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
}
.log-viewer .log-line {
    padding: 4px 0;
}

/* Action Button Group */
.action-bar {
    display: flex;
    justify-content: flex-end;
    gap: 16px;
    align-items: center;
    flex-wrap: wrap;
}
.action-bar button {
    min-width: 140px;
}

/* Result Badge */
.result-badge {
    display: inline-block;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 14px;
}
.result-badge-success {
    background-color: #22c55e;
    color: #ffffff;
}
.result-badge-error {
    background-color: #ef4444;
    color: #ffffff;
}
.result-badge-pending {
    background-color: #eab308;
    color: #000000;
}

/* Spinner (HTMX indicator) */
.htmx-indicator {
    display: none;
}
.htmx-request .htmx-indicator {
    display: inline-block;
}
.spinner {
    display: inline-block;
    width: 16px;
    height: 16px;
    border: 2px solid var(--pico-muted-color);
    border-top-color: #1b7f3a;
    border-radius: 50%;
    animation: spin 0.8s linear infinite;
    margin-left: 8px;
    vertical-align: middle;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Scroll-to-bottom button for log viewer */
.scroll-to-bottom-btn {
    position: relative;
    margin-top: 8px;
    padding: 4px 12px;
    font-size: 14px;
}

/* Diagnostics grid */
.diagnostics-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 16px;
    margin-bottom: 16px;
}

/* Column card link (fleet grid clickable) */
.column-card-link {
    text-decoration: none;
    color: inherit;
    display: block;
}
.column-card-link article {
    transition: border-color 0.2s;
    cursor: pointer;
}
.column-card-link:hover article {
    border-color: var(--pico-primary-focus);
}

/* Responsive adjustments for detail page */
@media (max-width: 768px) {
    .action-bar {
        justify-content: stretch;
        width: 100%;
    }
    .action-bar form {
        width: 100%;
    }
    .action-bar button {
        width: 100%;
    }
    .log-viewer {
        max-height: 300px;
    }
}

/* Phase 21 — Update Modal, Diff-Preview, Progress Tracker */

/* Update Modal */
#update-modal {
    max-width: 600px;
    width: 90vw;
}
#update-modal header {
    padding: 24px 24px 16px;
}
#update-modal header h2 {
    margin-bottom: 0;
}
#update-modal .modal-body {
    padding: 0 24px 16px;
}
#update-modal footer {
    padding: 16px 24px 24px;
    display: flex;
    justify-content: flex-end;
    gap: 16px;
}

/* Diff Preview */
.diff-preview {
    background: var(--pico-code-background-color);
    border-radius: 4px;
    padding: 16px;
    max-height: 300px;
    overflow-y: auto;
    font-family: monospace;
    font-size: 14px;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-all;
    margin-bottom: 16px;
}
.diff-preview .commit-line {
    padding: 4px 0;
    border-bottom: 1px solid var(--pico-muted-border-color);
}
.diff-preview .commit-hash {
    color: #1b7f3a;
    font-weight: 700;
}
.diff-preview .commit-msg {
    color: var(--pico-color);
}
.diff-preview .commit-date {
    color: var(--pico-muted-color);
    font-size: 14px;
}

/* Hostname Confirmation Input */
.hostname-confirm {
    margin-top: 16px;
}
.hostname-confirm label {
    font-weight: 700;
    margin-bottom: 8px;
    display: block;
}
.hostname-confirm input {
    font-family: monospace;
    font-size: 16px;
}
.hostname-confirm .hostname-hint {
    font-size: 14px;
    color: var(--pico-muted-color);
    margin-top: 4px;
}

/* Update Progress Tracker */
.update-progress {
    margin-top: 16px;
    padding: 16px;
    border-radius: 4px;
    background: var(--pico-card-background-color);
}
.update-progress .progress-title {
    font-weight: 700;
    margin-bottom: 8px;
}
.update-progress .progress-steps {
    list-style: none;
    padding: 0;
    margin: 0;
}
.update-progress .progress-step {
    padding: 8px 0;
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--pico-muted-color);
}
.update-progress .progress-step.active {
    color: var(--pico-color);
    font-weight: 700;
}
.update-progress .progress-step.completed {
    color: #22c55e;
}
.update-progress .progress-step.failed {
    color: #ef4444;
}
.update-progress .step-indicator {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--pico-muted-color);
    flex-shrink: 0;
}
.update-progress .step-indicator.active {
    background-color: #1b7f3a;
    animation: pulse 1.5s ease-in-out infinite;
}
.update-progress .step-indicator.completed {
    background-color: #22c55e;
}
.update-progress .step-indicator.failed {
    background-color: #ef4444;
}
@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}

/* Event-Active Warning */
.event-active-warning {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 4px;
    background-color: #eab308;
    color: #000000;
    font-size: 14px;
    margin-left: 8px;
}

/* Warning badge (yellow, consistent with pending but distinct class) */
.result-badge-warning {
    background-color: #eab308;
    color: #000000;
}

/* Responsive adjustments for update modal and diff preview */
@media (max-width: 768px) {
    #update-modal {
        max-width: 95vw;
        margin: 16px;
    }
    .diff-preview {
        max-height: 200px;
    }
}