/* Homelab Setup Tool — page-specific styles */
/* Builds on retro-style.css + retro-pages.css */

/* Section navigation */
.section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 2px;
    padding: 6px;
    background: #c0c0c0;
    border: 2px inset #c0c0c0;
    position: sticky;
    top: 0;
    z-index: 10;
}

.section-nav a {
    display: inline-block;
    padding: 3px 10px;
    background: #e0e0e0;
    border: 2px outset #c0c0c0;
    text-decoration: none;
    color: #000;
    font-size: 11px;
    font-weight: bold;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.section-nav a:hover {
    background: #d0d0d0;
    border-style: inset;
}

.section-nav a:visited {
    color: #000;
}

/* Form layout */
.setup-form {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 16px;
    padding: 4px 0;
}

.form-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.form-group.full-width {
    grid-column: 1 / -1;
}

.form-group label {
    font-weight: bold;
    font-size: 11px;
    color: #333;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.form-group input,
.form-group select {
    padding: 3px 5px;
    font-size: 12px;
    font-family: 'Courier New', monospace;
    border: 2px inset #ccc;
    background: #fff;
    width: 100%;
    box-sizing: border-box;
}

.form-group select {
    font-family: Arial, sans-serif;
}

.form-hint {
    font-size: 10px;
    color: #666;
    font-style: italic;
}

/* Password toggle */
.password-wrap {
    display: flex;
    gap: 4px;
}

.password-wrap input {
    flex: 1;
}

.password-wrap button {
    font-size: 10px;
    padding: 2px 6px;
    white-space: nowrap;
}

/* Code output blocks */
.compose-output {
    position: relative;
    margin: 8px 0;
}

.compose-output pre {
    background: #1a1a2e;
    color: #e0e0e0;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 12px;
    line-height: 1.4;
    padding: 12px;
    border: 2px inset #333;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
    max-height: 500px;
}

/* Syntax-ish coloring via spans */
.compose-output pre .comment {
    color: #6a9955;
}

.compose-output pre .key {
    color: #9cdcfe;
}

.compose-output pre .value {
    color: #ce9178;
}

/* Copy button */
.copy-btn {
    position: absolute;
    top: 4px;
    right: 4px;
    padding: 3px 10px;
    font-size: 11px;
    font-weight: bold;
    background: #e0e0e0;
    border: 2px outset #c0c0c0;
    cursor: pointer;
    font-family: 'Trebuchet MS', Arial, sans-serif;
    z-index: 2;
}

.copy-btn:active {
    border-style: inset;
}

.copy-btn.copied {
    background: #90ee90;
    border-color: #4caf50;
}

/* Copyable command blocks (non-compose) */
.cmd-block {
    position: relative;
    margin: 8px 0;
}

.cmd-block pre {
    background: #0c0c0c;
    color: #00ff00;
    font-family: 'Courier New', 'Lucida Console', monospace;
    font-size: 12px;
    line-height: 1.4;
    padding: 10px;
    border: 2px inset #333;
    overflow-x: auto;
    white-space: pre;
    margin: 0;
}

/* Service explanation text */
.service-info {
    font-size: 12px;
    line-height: 1.5;
    margin-bottom: 8px;
    color: #333;
}

.service-info strong {
    color: #000;
}

/* Post-deploy notes */
.deploy-notes {
    background: #fffff0;
    border: 1px solid #e6e6c8;
    padding: 8px;
    margin-top: 8px;
    font-size: 11px;
    line-height: 1.5;
}

.deploy-notes p {
    margin: 4px 0;
}

.deploy-notes code {
    background: #e8e8e0;
    padding: 1px 4px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
}

/* Collapsible cheatsheet sections */
.cheatsheet-section {
    margin-bottom: 6px;
}

.cheatsheet-section summary {
    cursor: pointer;
    font-weight: bold;
    font-size: 13px;
    padding: 4px 8px;
    background: #e8e8e8;
    border: 1px solid #999;
    font-family: 'Trebuchet MS', Arial, sans-serif;
}

.cheatsheet-section summary:hover {
    background: #d8d8d8;
}

.cheatsheet-section[open] summary {
    border-bottom: none;
}

.cheatsheet-content {
    padding: 8px;
    border: 1px solid #999;
    border-top: none;
    background: #fafafa;
}

/* Cheatsheet tables */
.cmd-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: 6px 0;
}

.cmd-table th {
    text-align: left;
    padding: 4px 8px;
    background: #d0d0d0;
    border: 1px solid #999;
    font-size: 11px;
}

.cmd-table td {
    padding: 3px 8px;
    border: 1px solid #ccc;
    vertical-align: top;
}

.cmd-table code {
    background: #e8e8e8;
    padding: 1px 3px;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    white-space: nowrap;
}

.cmd-table tr:nth-child(even) {
    background: #f5f5f5;
}

/* Section headers inside windows */
.section-heading {
    font-family: 'Impact', 'Arial Black', sans-serif;
    font-size: 14px;
    margin: 12px 0 6px 0;
    color: #333;
    border-bottom: 1px solid #ccc;
    padding-bottom: 3px;
}

.section-heading:first-child {
    margin-top: 0;
}

/* Architecture diagram */
.arch-diagram {
    background: #1a1a2e;
    color: #e0e0e0;
    font-family: 'Courier New', monospace;
    font-size: 11px;
    line-height: 1.3;
    padding: 10px;
    border: 2px inset #333;
    overflow-x: auto;
    white-space: pre;
    margin: 8px 0;
}

/* Responsive */
@media (max-width: 600px) {
    .setup-form {
        grid-template-columns: 1fr;
    }

    .section-nav {
        position: static;
    }

    .page-container {
        padding: 10px;
    }
}