/* Modern Minimal Design */
:root {
    --primary-color: #2563eb;
    --primary-hover: #1d4ed8;
    --secondary-color: #64748b;
    --background: #ffffff;
    --surface: #f8fafc;
    --border: #e2e8f0;
    --text: #1e293b;
    --text-light: #64748b;
    --success: #10b981;
    --success-hover: #059669;
    --error: #ef4444;
    --warning: #f59e0b;
    --shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
    --radius: 0.5rem;
    --spacing: 1rem;
    --student-color: #48bb78;
    --student-hover: #38a169;
}

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

body {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    line-height: 1.6;
    color: var(--text);
    background: var(--surface);
    padding: var(--spacing);
    padding-bottom: 100px; /* Space for sticky footer */
}

.container {
    max-width: 900px;
    margin: 0 auto;
    background: var(--background);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

header {
    background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-hover) 100%);
    color: white;
    padding: 1.5rem 2rem;
}

.header-content {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 100%;
}

.header-title {
    text-align: left;
    display: flex;
    align-items: center;
    gap: 1rem;
}

.header-logo {
    height: 2.5rem;
    width: auto;
    object-fit: contain;
}

header h1 {
    font-size: 1.75rem;
    font-weight: 700;
    margin-bottom: 0.25rem;
}

.subtitle {
    opacity: 0.9;
    font-size: 0.875rem;
}

.header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-btn,
.logout-btn {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    color: white;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s;
}

.header-btn:hover,
.logout-btn:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.logout-icon,
.header-btn .btn-icon {
    font-size: 1rem;
}

.header-btn .btn-text {
    white-space: nowrap;
}

/* Header Dropdown Menu */
.header-dropdown {
    position: relative;
}

.header-dropdown-toggle {
    cursor: pointer;
    background: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.3);
    border-radius: var(--radius);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    padding: 0.5rem 1rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s;
}

.header-dropdown-toggle:hover {
    background: rgba(255, 255, 255, 0.25);
    border-color: rgba(255, 255, 255, 0.5);
}

.dropdown-arrow {
    font-size: 0.7rem;
    transition: transform 0.2s;
}

.header-dropdown.open .dropdown-arrow {
    transform: rotate(180deg);
}

.header-dropdown-menu {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    margin-top: 0.35rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-lg);
    min-width: 180px;
    z-index: 100;
    overflow: hidden;
}

.header-dropdown.open .header-dropdown-menu {
    display: block;
}

.header-dropdown-item {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.625rem 1rem;
    color: var(--text);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s;
    white-space: nowrap;
}

.header-dropdown-item:hover {
    background: var(--surface);
    color: var(--primary-color);
}

.header-dropdown-item .btn-icon {
    font-size: 1rem;
}

@media (max-width: 480px) {
    .logout-text,
    .header-btn .btn-text,
    .header-dropdown-toggle .btn-text {
        display: none;
    }
    
    .logout-btn,
    .header-btn,
    .header-dropdown-toggle {
        padding: 0.5rem;
    }

    .dropdown-arrow {
        display: none;
    }
}

main {
    padding: 2rem;
}

/* ============================================
   WIZARD STYLES
   ============================================ */

/* Progress Indicator */
.wizard-progress {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 2rem;
    padding: 1rem;
    background: var(--surface);
    border-radius: var(--radius);
    position: relative;
}

.wizard-progress::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 2rem;
    right: 2rem;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.progress-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    z-index: 1;
    transition: all 0.3s ease;
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--background);
    border: 2px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    color: var(--text-light);
    transition: all 0.3s ease;
}

.step-label {
    margin-top: 0.5rem;
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    transition: all 0.3s ease;
}

.progress-step.active .step-number {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    transform: scale(1.1);
}

.progress-step.active .step-label {
    color: var(--primary-color);
    font-weight: 600;
}

.progress-step.completed .step-number {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.progress-step.completed .step-number::after {
    content: '✓';
    font-size: 1rem;
}

.progress-step.completed .step-number span {
    display: none;
}

.progress-step:hover:not(.active) .step-number {
    border-color: var(--primary-color);
    transform: scale(1.05);
}

/* Wizard Steps */
.wizard-step {
    display: none;
    animation: fadeIn 0.3s ease;
}

.wizard-step.active {
    display: block;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translateX(20px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.step-header {
    margin-bottom: 2rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid var(--border);
}

.step-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--text);
}

.step-content {
    min-height: 200px;
}

.subsection-title {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--text);
    margin-top: 1.5rem;
    margin-bottom: 1rem;
    padding-top: 1rem;
    border-top: 1px dashed var(--border);
}

/* Create New Infrastructure path: EasyLab builds the cluster from scratch, so
   nothing can already be installed on it. Anything that presupposes a
   pre-existing cluster is hidden — reusing an ingress controller or
   cert-manager, and node selectors, which have only one node pool to point at.
   Driven by a class on #lab-form so template rows added after load are covered
   too. The hidden inputs inside these blocks still submit their defaults. */
.new-infra .byok-only,
.new-infra .template-nodeselector-section {
    display: none;
}

/* States what EasyLab will install now that the choice is gone. Mirrors the
   small.name-preview "here is what gets created" treatment used on steps 2 and 3. */
.install-note {
    margin: 1.5rem 0;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-left: 3px solid var(--primary-color);
    border-radius: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.install-note strong {
    color: var(--text);
    font-weight: 600;
}

/* "Detect from cluster" on step 4 (existing cluster only).
   The result is an inspection readout, not a set of cards: one row per thing we
   looked for, aligned into label / value / outcome so the eye can run down the
   value column. Values are monospace because they are real object names the
   admin can paste after `kubectl get` — prose never goes in that column.
   Only a row that could not be checked is marked, so attention lands on the one
   thing needing a decision instead of on a badge per row. Colour never carries
   the meaning alone: every row states its outcome in words. */
.cluster-detect {
    margin-bottom: 1.5rem;
}

.cluster-detect-prompt {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem 1rem;
}

.cluster-detect-lede {
    flex: 1 1 18rem;
    margin: 0;
    color: var(--text-light);
    font-size: 0.875rem;
}

.cluster-detect-result {
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    font-size: 0.875rem;
    color: var(--text);
    overflow: hidden;
}

.cluster-detect-header {
    display: flex;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    justify-content: space-between;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
}

.cluster-detect-title {
    font-weight: 600;
}

.cluster-detect-meta {
    color: var(--text-light);
}

.cluster-detect-findings {
    list-style: none;
    margin: 0;
    padding: 0;
}

.finding {
    display: grid;
    grid-template-columns: minmax(8rem, 12rem) minmax(0, 1fr) auto;
    align-items: baseline;
    gap: 0.25rem 1rem;
    padding: 0.5rem 1rem;
    border-top: 1px solid var(--border);
    /* Matched by the attention state below, so rows never shift by 3px. */
    border-left: 3px solid transparent;
}

.cluster-detect-findings .finding:first-child {
    border-top: 0;
}

.finding-label {
    color: var(--text-light);
}

.finding-value {
    font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
    font-size: 0.8125rem;
    word-break: break-all;
}

.finding-value-plain {
    font-family: inherit;
    font-size: inherit;
    word-break: normal;
}

.finding-value-empty {
    color: var(--text-light);
}

.finding-state {
    color: var(--text-light);
    text-align: right;
    white-space: nowrap;
}

/* The one marked state: a probe that was denied or failed says nothing about the
   cluster, and is the only outcome the admin may need to act on. */
.finding-unknown {
    border-left-color: var(--warning);
    background: color-mix(in srgb, var(--warning) 6%, transparent);
}

.finding-unknown .finding-state {
    color: #b45309;
}

.cluster-detect-actions {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
    padding: 0.75rem 1rem;
    border-top: 1px solid var(--border);
    background: var(--surface);
}

.cluster-detect-result .warning-message,
.cluster-detect-result > .hint-text,
.cluster-detect-result > .detect-variables-status {
    margin: 0.75rem 1rem;
}

/* Marks a field the scan filled in, until the admin edits it. */
.field-detected {
    box-shadow: inset 3px 0 0 var(--success);
}

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

    .finding-label {
        grid-column: 1 / -1;
    }

    .finding-state {
        text-align: right;
    }
}

/* Sticky Footer */
.wizard-footer {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: var(--background);
    border-top: 1px solid var(--border);
    box-shadow: 0 -4px 6px -1px rgba(0, 0, 0, 0.1);
    z-index: 1000;
}

.footer-content {
    max-width: 900px;
    margin: 0 auto;
    padding: 1rem 2rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.step-indicator {
    font-size: 0.875rem;
    color: var(--text-light);
    font-weight: 500;
}

/* ============================================
   FORM STYLES
   ============================================ */

.form-section {
    margin-bottom: 2.5rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
    border-bottom: none;
}

.form-section h2 {
    font-size: 1.5rem;
    font-weight: 600;
    margin-bottom: 1rem;
    color: var(--text);
}

.section-description {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.form-group {
    margin-bottom: 1.5rem;
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-size: 0.875rem;
}

.form-group input,
.form-group select,
.form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: all 0.2s;
    background: var(--background);
    color: var(--text);
}

.form-group textarea {
    resize: vertical;
}

.form-group textarea.monospace {
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.85rem;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

.form-group input[type="password"] {
    font-family: monospace;
}

.input-with-action {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.input-with-action input {
    flex: 1;
    min-width: 0;
}

.input-with-action .btn-generate-password,
.input-with-action .btn-copy-value {
    flex-shrink: 0;
    white-space: nowrap;
}

.lifetime-input {
    display: flex;
    gap: 0.5rem;
    align-items: stretch;
}

.lifetime-input input[type="number"] {
    flex: 0 0 5rem;
    width: 5rem;
}

.lifetime-input select {
    flex: 1;
    width: auto;
}

.lifetime-input-unit {
    align-self: center;
    color: var(--text-secondary, #6b7280);
    font-size: 0.875rem;
}

/* File Upload Styling */
.file-upload-wrapper {
    position: relative;
    margin-bottom: 0.5rem;
}

.file-input {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border-width: 0;
}

.file-upload-label {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border: 2px dashed var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    cursor: pointer;
    transition: all 0.2s ease;
    gap: 0.75rem;
}

.file-upload-label:hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.05);
}

.file-upload-label:active {
    transform: scale(0.98);
}

.file-input:focus + .file-upload-label {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-color: var(--primary-color);
}

.file-upload-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.file-upload-text {
    flex: 1;
    color: var(--text);
    font-size: 0.9375rem;
}

.file-upload-button {
    padding: 0.5rem 1rem;
    background: var(--primary-color);
    color: white;
    border-radius: calc(var(--radius) - 0.125rem);
    font-size: 0.875rem;
    font-weight: 500;
    transition: all 0.2s ease;
    flex-shrink: 0;
}

.file-upload-label:hover .file-upload-button {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.file-name-display {
    display: none;
    margin-top: 0.75rem;
    padding: 0.75rem 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    border-left: 3px solid var(--primary-color);
    font-size: 0.875rem;
    color: var(--text);
    font-weight: 500;
}

.file-name-display::before {
    content: '✓ ';
    color: var(--success);
    margin-right: 0.5rem;
}

.form-group small {
    display: block;
    margin-top: 0.25rem;
    color: var(--text-light);
    font-size: 0.75rem;
}

.form-group small.name-preview {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background: var(--surface);
    border-left: 3px solid var(--primary-color);
    border-radius: 0.25rem;
    font-size: 0.8125rem;
}

.calculated-info {
    margin-top: 0.75rem;
    padding: 0.75rem;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
    font-size: 0.875rem;
    color: var(--text);
}

.calculated-info strong {
    color: var(--text);
    font-weight: 600;
}

.form-group small.name-preview .preview-value {
    font-family: monospace;
    font-weight: 600;
    color: var(--primary-color);
    background: rgba(37, 99, 235, 0.1);
    padding: 0.125rem 0.375rem;
    border-radius: 0.25rem;
}

.form-row {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1rem;
}

.template-row {
    margin-bottom: 1.5rem;
    padding: 1rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.template-row-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.template-row-title {
    font-size: 1rem;
    font-weight: 600;
    margin: 0;
}

.template-resources {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

.template-resources .form-group {
    flex: 1;
    min-width: 8rem;
}

.template-variables-section {
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.template-variables-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.5rem;
}

.template-variables-header label {
    font-weight: 600;
}

.template-variables-actions {
    display: flex;
    gap: 0.5rem;
}

.template-variables-actions .btn {
    padding: 0.35rem 0.75rem;
    font-size: 0.85rem;
}

.template-variable-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.template-variable-row .sidecar-privileged {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    white-space: nowrap;
    flex-shrink: 0;
}

.template-variable-row input,
.template-variable-row select {
    flex: 1;
    min-width: 6rem;
}

.template-variable-row .btn-remove-variable {
    padding: 0.35rem 0.5rem;
    font-size: 0.85rem;
    flex-shrink: 0;
    align-self: flex-end;
    margin-bottom: 0.25rem;
}

.template-variable-row .variable-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.template-variable-row .variable-info small {
    color: var(--text-secondary);
}

.template-variables-container:empty + .template-variables-empty,
.template-variables-empty {
    color: var(--text-secondary);
    font-style: italic;
    font-size: 0.9rem;
    padding: 0.5rem 0;
}

.detect-variables-status {
    font-size: 0.85rem;
    margin-top: 0.25rem;
}

/* Step 6 templates: numbered essentials reuse the .ut-step look from the labs
   "Add Template" drawer; give stacked inputs inside a step some breathing room. */
.template-row .ut-step-body > .ut-name-input + .ut-name-input,
.template-row .ut-step-body > .ut-name-input + .form-row,
.template-row .ut-step-body > .form-row {
    margin-top: 0.5rem;
}

/* A checkbox directly in a step (e.g. "Shallow clone" under the git repo): keep
   the box inline with its text rather than stretched by the generic input width,
   same fix as .form-checkboxes .checkbox-label below. */
.ut-step-body > .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-top: 0.5rem;
    font-size: 0.875rem;
}

.ut-step-body > .checkbox-label input[type="checkbox"] {
    width: auto;
    flex: none;
    margin: 0;
}

/* Collapsible "Advanced options" (per template) and "Credentials" disclosures.
   Everything past the essentials lives here so the step opens calm, not crowded. */
.template-advanced {
    margin-top: 1rem;
    border-top: 1px solid var(--border);
}

.template-advanced-body {
    padding-top: 0.5rem;
}

.template-advanced > summary {
    padding: 0.75rem 0 0.25rem;
    font-size: 0.875rem;
}

.template-advanced > summary,
.wizard-credentials > summary {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 600;
    color: var(--text);
    list-style: none;
}

.wizard-credentials > summary {
    font-size: 1rem;
    flex-wrap: wrap;
}

.template-advanced > summary::-webkit-details-marker,
.wizard-credentials > summary::-webkit-details-marker {
    display: none;
}

.template-advanced > summary::before,
.wizard-credentials > summary::before {
    content: "\25B8";
    color: var(--text-light);
    transition: transform 0.15s ease;
}

.template-advanced[open] > summary::before,
.wizard-credentials[open] > summary::before {
    transform: rotate(90deg);
}

@media (prefers-reduced-motion: reduce) {
    .template-advanced > summary::before,
    .wizard-credentials > summary::before {
        transition: none;
    }
}

.form-actions {
    display: flex;
    gap: 1rem;
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--border);
}

/* ============================================
   BUTTON STYLES
   ============================================ */

.btn,
a.btn {
    text-decoration: none;
}

.btn {
    padding: 0.75rem 1.5rem;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 500;
    cursor: pointer;
    transition: all 0.2s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
}

.btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

.btn-icon {
    font-size: 1.1rem;
}

.btn-primary {
    background: var(--primary-color);
    color: white;
}

.btn-primary:hover:not(:disabled) {
    background: var(--primary-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-secondary {
    background: var(--surface);
    color: var(--text);
    border: 1px solid var(--border);
}

.btn-secondary:hover:not(:disabled) {
    background: var(--border);
}

/* The strongest button weight, for the one action a panel most wants pressed.
   Deliberately ink rather than --primary-color: the wizard's own Next button is
   already blue and is the page's primary action, so a second blue fill competes
   with it. Ink reads as weight rather than hue, which also leaves a panel's
   colour free to carry meaning (see the cluster-detect readout, where amber is
   reserved for the one row that needs attention). */
.btn-strong {
    background: var(--text);
    color: #ffffff;
    border: 1px solid var(--text);
}

.btn-strong:hover:not(:disabled) {
    background: color-mix(in srgb, var(--text) 88%, #ffffff);
    border-color: color-mix(in srgb, var(--text) 88%, #ffffff);
}

.btn-success {
    background: var(--success);
    color: white;
}

.btn-success:hover:not(:disabled) {
    background: var(--success-hover);
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-danger {
    background: var(--error);
    color: white;
}

.btn-danger:hover:not(:disabled) {
    background: #dc2626;
    transform: translateY(-1px);
    box-shadow: var(--shadow-lg);
}

.btn-download {
    background: linear-gradient(135deg, #059669 0%, #047857 100%);
    color: white;
    text-decoration: none;
    margin-left: 1rem;
    padding: 0.75rem 1.5rem;
    border-radius: var(--radius);
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: all 0.2s ease;
    box-shadow: var(--shadow);
}

.btn-download:hover {
    background: linear-gradient(135deg, #047857 0%, #065f46 100%);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.btn-download .btn-icon {
    font-size: 1.1rem;
}

.btn-info {
    background: #0ea5e9;
    color: white;
    border: none;
}

.btn-info:hover:not(:disabled) {
    background: #0284c7;
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

/* ============================================
   HTMX INDICATORS
   ============================================ */

.htmx-indicator {
    display: none;
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

.htmx-request .htmx-indicator {
    display: block;
}

.spinner {
    border: 3px solid var(--border);
    border-top: 3px solid var(--primary-color);
    border-radius: 50%;
    width: 40px;
    height: 40px;
    animation: spin 1s linear infinite;
    margin: 0 auto 1rem;
}

@keyframes spin {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

/* ============================================
   JOB STATUS
   ============================================ */

.job-status-container {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.job-status-container:empty {
    display: none;
}

.job-status {
    padding: 1rem;
}

/* Actions rendered next to the status badge (launch, retry, kubeconfig). */
.job-status-action {
    display: inline-block;
    margin-left: 1rem;
}

.status-badge {
    display: inline-block;
    padding: 0.5rem 1rem;
    border-radius: var(--radius);
    font-weight: 600;
    font-size: 0.875rem;
    text-transform: uppercase;
    margin-bottom: 1rem;
}

.status-pending {
    background: #fef3c7;
    color: #92400e;
}

.status-running {
    background: #dbeafe;
    color: #1e40af;
}

.status-completed {
    background: #d1fae5;
    color: #065f46;
}

.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.status-dry-run-completed {
    background: #dbeafe;
    color: #1e40af;
}

.status-idle {
    background: var(--surface);
    color: var(--text-light);
}

.status-destroyed {
    background: #f3f4f6;
    color: #6b7280;
}

.error-message {
    padding: 1rem;
    background: #fee2e2;
    color: #991b1b;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border-left: 4px solid var(--error);
}

.success-message {
    padding: 1rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border-left: 4px solid var(--success);
}

.warning-message {
    padding: 1rem;
    background: #fef3c7;
    color: #92400e;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    border-left: 4px solid var(--warning);
}

.warning-message h3 {
    margin: 0 0 0.5rem;
    font-size: 0.95rem;
}

.warning-message p,
.warning-message ul {
    margin: 0 0 0.5rem;
    font-size: 0.875rem;
}

.warning-message ul {
    padding-left: 1.25rem;
}

.warning-message :last-child {
    margin-bottom: 0;
}

.warning-message code {
    background: rgba(146, 64, 14, 0.12);
    padding: 0.1rem 0.3rem;
    border-radius: 3px;
}

.warning-message a:not(.btn) {
    color: inherit;
    font-weight: 600;
    text-decoration: underline;
}

.output-container {
    margin-top: 1rem;
}

.output {
    background: #1e293b;
    color: #e2e8f0;
    padding: 1rem;
    border-radius: var(--radius);
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.5;
    overflow-x: auto;
    max-height: 400px;
    overflow-y: auto;
    white-space: pre-wrap;
    word-wrap: break-word;
}

/* Form Response */
#form-response {
    margin-bottom: 1rem;
}

/* Job Created */
.job-created {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1rem;
}

.job-created h3 {
    margin: 0 0 1rem 0;
    color: var(--primary-color);
}

/* ============================================
   RESPONSIVE DESIGN
   ============================================ */

@media (max-width: 768px) {
    body {
        padding: 0.5rem;
        padding-bottom: 120px;
    }

    header {
        padding: 1.5rem;
    }

    header h1 {
        font-size: 1.5rem;
    }

    main {
        padding: 1rem;
    }

    /* Progress indicator - smaller on mobile */
    .wizard-progress {
        padding: 0.75rem;
        overflow-x: auto;
    }

    .step-number {
        width: 32px;
        height: 32px;
        font-size: 0.875rem;
    }

    .step-label {
        font-size: 0.65rem;
        display: none;
    }

    .progress-step.active .step-label {
        display: block;
    }

    .footer-content {
        padding: 1rem;
        flex-wrap: wrap;
        flex-direction: column;
        align-items: stretch;
    }

    body {
        padding-bottom: 140px;
    }

    .btn {
        padding: 0.625rem 1rem;
        font-size: 0.875rem;
    }

    .step-indicator {
        order: -1;
        width: 100%;
        text-align: center;
        margin-bottom: 0.5rem;
    }

    .form-row {
        grid-template-columns: 1fr;
    }

    .form-actions {
        flex-direction: column;
    }

    /* File upload responsive */
    .file-upload-label {
        flex-direction: column;
        align-items: stretch;
        gap: 0.5rem;
    }

    .file-upload-text {
        text-align: center;
    }

    .file-upload-button {
        width: 100%;
    }
}

/* ============================================
   CREDENTIALS PAGE
   ============================================ */

.info-box {
    padding: 1.5rem;
    background: #eff6ff;
    border: 1px solid #bfdbfe;
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.info-box h3 {
    margin-top: 0;
    margin-bottom: 0.75rem;
    color: #1e40af;
    font-size: 1.125rem;
}

.info-box p {
    margin-bottom: 0.75rem;
    color: #1e3a8a;
}

.info-box p:last-child {
    margin-bottom: 0;
}

.info-box-actions {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

.credentials-info--populated {
    margin-bottom: 1.5rem;
}

.credentials-container {
    padding: 2rem;
}

.form-section {
    margin-bottom: 2rem;
}

.status-container {
    margin-top: 2rem;
    padding: 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    border: 1px solid var(--border);
}

.provider-section-link {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border);
}

.status-container h3 {
    margin-top: 0;
    margin-bottom: 1rem;
}

.header-actions {
    display: flex;
    gap: 1rem;
    align-items: center;
}

/* ============================================
   ACCESSIBILITY
   ============================================ */

input:required,
select:required {
    border-left: 3px solid var(--primary-color);
}

input:invalid:not(:placeholder-shown) {
    border-color: var(--error);
}

/* Focus visible for keyboard navigation */
.btn:focus-visible,
input:focus-visible,
select:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.progress-step:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
    border-radius: var(--radius);
}

/* ============================================
   BUTTON GROUP / SOURCE SELECTION
   ============================================ */

.button-group {
    display: flex;
    gap: 1rem;
    margin-top: 0.5rem;
}

.source-button {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: var(--background);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    font-family: inherit;
    box-shadow: var(--shadow);
}

.source-button:hover {
    border-color: var(--primary-color);
    background: var(--surface);
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.source-button.selected {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.source-button.selected:hover {
    background: var(--primary-hover);
    border-color: var(--primary-hover);
    transform: translateY(-2px);
}

.source-icon {
    font-size: 2rem;
    line-height: 1;
    flex-shrink: 0;
}

.source-content {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    flex: 1;
}

.source-title {
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.2;
}

.badge-recommended {
    display: inline-block;
    margin-left: 0.4rem;
    padding: 0.15rem 0.5rem;
    font-size: 0.7rem;
    font-weight: 600;
    line-height: 1.4;
    color: white;
    background: var(--success);
    border-radius: 999px;
    vertical-align: middle;
    text-transform: uppercase;
    letter-spacing: 0.02em;
}

.source-description {
    font-size: 0.875rem;
    opacity: 0.8;
    line-height: 1.3;
}

.source-button.selected .source-description {
    opacity: 0.9;
}

.source-button:active {
    transform: translateY(0);
}

/* Responsive design for button group */
@media (max-width: 640px) {
    .button-group {
        flex-direction: column;
    }
    
    .source-button {
        width: 100%;
    }
}

/* Smooth transitions - but respect reduced motion preference */
@media (prefers-reduced-motion: no-preference) {
    * {
        transition: background-color 0.2s, border-color 0.2s, color 0.2s, transform 0.2s, opacity 0.2s;
    }
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition: none !important;
        animation: none !important;
    }
}

/* ============================================
   HOME PAGE STYLES — Mission Control
   ============================================ */

body.home-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #080d14;
    font-family: 'Inter', sans-serif;
    overflow: hidden;
}

.home-canvas {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 0;
}

.home-scene {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    gap: 3rem;
    animation: home-scene-in 0.8s ease both;
}

@keyframes home-scene-in {
    from { opacity: 0; transform: translateY(16px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Brand */
.home-brand {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    padding: 1.25rem 2rem 1.25rem 1.5rem;
    border-radius: 18px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(0, 220, 210, 0.12);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    box-shadow: 0 0 60px -10px rgba(0, 200, 190, 0.15), inset 0 1px 0 rgba(255,255,255,0.06);
    animation: home-fade-up 0.7s 0.1s ease both;
}

@keyframes home-fade-up {
    from { opacity: 0; transform: translateY(12px); }
    to   { opacity: 1; transform: translateY(0); }
}

.home-brand-logo {
    height: 4rem;
    width: auto;
    object-fit: contain;
    filter: drop-shadow(0 0 18px rgba(0, 220, 210, 0.5));
}

.home-brand-text {
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.home-wordmark {
    font-family: 'Syne', sans-serif;
    font-size: 3.6rem;
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1;
    background: linear-gradient(120deg, #ffffff 0%, #a8f0ec 45%, #00dcc8 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    filter: drop-shadow(0 0 20px rgba(0, 220, 210, 0.4));
}

.home-tagline {
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.72rem;
    font-weight: 400;
    color: #5a9aaa;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Cards */
.home-cards {
    display: grid;
    grid-template-columns: repeat(2, 340px);
    gap: 1.5rem;
}

.home-card {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    padding: 2rem 1.75rem;
    border-radius: 14px;
    border: 1px solid rgba(255, 255, 255, 0.07);
    background: rgba(255, 255, 255, 0.03);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    text-decoration: none;
    overflow: hidden;
    transition: transform 0.28s ease, border-color 0.28s ease, box-shadow 0.28s ease;
    cursor: pointer;
}

.home-card--student {
    animation: home-fade-up 0.7s 0.25s ease both;
    --card-accent: #00dcc8;
    --card-glow: rgba(0, 220, 200, 0.18);
}

.home-card--admin {
    animation: home-fade-up 0.7s 0.4s ease both;
    --card-accent: #f59e0b;
    --card-glow: rgba(245, 158, 11, 0.18);
}

.home-card-glow {
    position: absolute;
    inset: 0;
    border-radius: inherit;
    background: radial-gradient(ellipse at 30% 40%, var(--card-glow) 0%, transparent 65%);
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.home-card:hover {
    transform: translateY(-5px);
    border-color: var(--card-accent);
    box-shadow: 0 0 0 1px var(--card-accent), 0 20px 50px -10px var(--card-glow), 0 0 30px -5px var(--card-glow);
}

.home-card:hover .home-card-glow {
    opacity: 1;
}

.home-card-icon {
    width: 52px;
    height: 52px;
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent);
    transition: background 0.25s ease;
}

.home-card-icon svg {
    width: 28px;
    height: 28px;
}

.home-card:hover .home-card-icon {
    background: rgba(255, 255, 255, 0.09);
}

.home-card-body {
    flex: 1;
}

.home-card-title {
    font-family: 'Syne', sans-serif;
    font-size: 1.2rem;
    font-weight: 700;
    color: #ddeaf0;
    margin-bottom: 0.5rem;
    letter-spacing: -0.01em;
}

.home-card-desc {
    font-size: 0.875rem;
    line-height: 1.6;
    color: #5a8090;
}

.home-card-arrow {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--card-accent);
    align-self: flex-end;
    transition: transform 0.25s ease, border-color 0.25s ease;
    opacity: 0.6;
}

.home-card-arrow svg {
    width: 16px;
    height: 16px;
}

.home-card:hover .home-card-arrow {
    transform: translateX(4px);
    border-color: var(--card-accent);
    opacity: 1;
}

/* Footer credits */
.home-footer-credits {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-family: 'JetBrains Mono', monospace;
    font-size: 0.7rem;
    color: #2e4a58;
    letter-spacing: 0.04em;
    animation: home-fade-up 0.7s 0.55s ease both;
}

.home-credit-pill {
    color: #3d6070;
}

.home-credit-pill a {
    color: #7ba8bd;
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color 0.2s ease, border-color 0.2s ease;
}

.home-credit-pill a:hover,
.home-credit-pill a:focus-visible {
    color: #00dcc8;
    border-bottom-color: currentColor;
}

.home-credit-sep {
    color: #1e3040;
}

/* Responsive */
@media (max-width: 768px) {
    body.home-page {
        overflow-y: auto;
    }

    .home-scene {
        min-height: 100dvh;
        gap: 2rem;
        padding: 2.5rem 1rem;
    }

    .home-brand {
        flex-direction: column;
        text-align: center;
        gap: 0.75rem;
        padding: 1.25rem 1.5rem;
    }

    .home-brand-logo {
        height: 3rem;
    }

    .home-wordmark {
        font-size: 2.8rem;
    }

    .home-cards {
        grid-template-columns: 1fr;
        width: 100%;
        max-width: 360px;
    }

    .home-card {
        flex-direction: row;
        align-items: flex-start;
        gap: 1rem;
        padding: 1.5rem;
    }

    .home-card-icon {
        flex-shrink: 0;
    }

    .home-card-body {
        flex: 1;
    }

    .home-card-arrow {
        align-self: center;
    }
}

/* Theme toggle (home page) */
.home-theme-toggle {
    position: fixed;
    top: 1.25rem;
    right: 1.25rem;
    z-index: 2;
    width: 40px;
    height: 40px;
    padding: 0;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(255, 255, 255, 0.04);
    color: #7ba8bd;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}

.home-theme-toggle:hover {
    color: #00dcc8;
    border-color: #00dcc8;
}

.home-theme-toggle:focus-visible {
    outline: 2px solid #00dcc8;
    outline-offset: 3px;
}

.home-theme-icon {
    width: 18px;
    height: 18px;
}

.home-theme-icon--moon {
    display: none;
}

/* Home page — light theme (set by home-theme.js on <html data-theme="light">) */
[data-theme="light"] body.home-page {
    background: #edf2f1;
    color-scheme: light;
}

[data-theme="light"] .home-theme-toggle {
    border-color: rgba(12, 37, 48, 0.16);
    background: rgba(255, 255, 255, 0.7);
    color: #4c6670;
}

[data-theme="light"] .home-theme-toggle:hover {
    color: #007d74;
    border-color: #007d74;
}

[data-theme="light"] .home-theme-toggle:focus-visible {
    outline-color: #007d74;
}

[data-theme="light"] .home-theme-icon--sun {
    display: none;
}

[data-theme="light"] .home-theme-icon--moon {
    display: block;
}

[data-theme="light"] .home-brand {
    background: rgba(255, 255, 255, 0.72);
    border-color: rgba(0, 125, 116, 0.18);
    box-shadow: 0 24px 60px -28px rgba(0, 95, 88, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}

[data-theme="light"] .home-brand-logo {
    border-radius: 12px;
    filter: drop-shadow(0 6px 14px rgba(12, 37, 48, 0.22));
}

[data-theme="light"] .home-wordmark {
    background: linear-gradient(120deg, #0c2530 0%, #0b5a5c 50%, #00a396 100%);
    -webkit-background-clip: text;
    background-clip: text;
    filter: none;
}

[data-theme="light"] .home-tagline {
    color: #4c6670;
}

[data-theme="light"] .home-card {
    border-color: rgba(12, 37, 48, 0.1);
    background: rgba(255, 255, 255, 0.78);
    box-shadow: 0 1px 2px rgba(12, 37, 48, 0.05);
}

[data-theme="light"] .home-card--student {
    --card-accent: #007d74;
    --card-glow: rgba(0, 125, 116, 0.14);
}

[data-theme="light"] .home-card--admin {
    --card-accent: #b45309;
    --card-glow: rgba(180, 83, 9, 0.14);
}

[data-theme="light"] .home-card:hover {
    border-color: var(--card-accent);
    box-shadow: 0 0 0 1px var(--card-accent), 0 22px 44px -18px var(--card-glow), 0 8px 18px -10px rgba(12, 37, 48, 0.18);
}

[data-theme="light"] .home-card-icon,
[data-theme="light"] .home-card:hover .home-card-icon {
    background: var(--card-glow);
    border-color: transparent;
}

[data-theme="light"] .home-card-title {
    color: #0c2530;
}

[data-theme="light"] .home-card-desc {
    color: #4c6670;
}

[data-theme="light"] .home-card-arrow {
    border-color: rgba(12, 37, 48, 0.16);
    opacity: 0.8;
}

[data-theme="light"] .home-card:hover .home-card-arrow {
    border-color: var(--card-accent);
    opacity: 1;
}

[data-theme="light"] .home-footer-credits,
[data-theme="light"] .home-credit-pill {
    color: #5d7680;
}

[data-theme="light"] .home-credit-pill a {
    color: #2f5b68;
}

[data-theme="light"] .home-credit-pill a:hover,
[data-theme="light"] .home-credit-pill a:focus-visible {
    color: #007d74;
}

/* ============================================
   LOGIN PAGE STYLES — Mission Control
   ============================================ */

body.login-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #080d14;
    overflow: hidden;
    --login-accent: #f59e0b;
    --login-glow: rgba(245, 158, 11, 0.18);
}

body.student-login-page {
    margin: 0;
    padding: 0;
    min-height: 100vh;
    background: #080d14;
    overflow: auto;
    --login-accent: #00dcc8;
    --login-glow: rgba(0, 220, 200, 0.18);
}

.login-scene {
    position: relative;
    z-index: 1;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 2rem 1.5rem;
    gap: 2rem;
    animation: home-scene-in 0.8s ease both;
}

.login-container {
    width: 100%;
    max-width: 420px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.07);
    border-radius: 14px;
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    box-shadow: 0 0 50px -10px var(--login-glow), 0 20px 60px -15px rgba(0, 0, 0, 0.5);
    overflow: visible;
    animation: home-fade-up 0.7s 0.25s ease both;
}

.login-context-label {
    font-family: 'Syne', sans-serif;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--login-accent);
    padding: 1.5rem 1.75rem 0;
    letter-spacing: -0.01em;
}

.login-context-sub {
    font-size: 0.8rem;
    color: #4a7a90;
    padding: 0.3rem 1.75rem 0;
    line-height: 1.5;
}

.login-context {
    margin-bottom: 0.25rem;
}

.login-form {
    padding: 1.25rem 1.75rem 1.75rem;
}

.login-form .form-group {
    margin-bottom: 1.25rem;
}

.login-form label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    margin-bottom: 0.4rem;
    color: #7a9ab0;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

.login-form input[type="password"],
.login-form input[type="email"] {
    width: 100%;
    padding: 0.8rem 1rem;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    font-size: 0.9375rem;
    font-family: inherit;
    color: #ddeaf0;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.login-form input[type="password"]::placeholder,
.login-form input[type="email"]::placeholder {
    color: #2e4a58;
}

.login-form input[type="password"]:focus,
.login-form input[type="email"]:focus {
    outline: none;
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 15%, transparent);
}

.login-form .btn {
    width: 100%;
    padding: 0.875rem;
    font-size: 0.9375rem;
    font-weight: 600;
    background: var(--login-accent);
    color: #080d14;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    transition: opacity 0.2s, transform 0.15s;
}

.login-form .btn:hover {
    opacity: 0.88;
    transform: translateY(-1px);
}

.login-form .btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    transform: none;
}

.error-alert {
    background: rgba(239, 68, 68, 0.12);
    border: 1px solid rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    padding: 0.75rem 1rem;
    border-radius: 8px;
    margin-bottom: 1.25rem;
    font-size: 0.875rem;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.error-alert::before {
    content: '⚠️';
}

.login-footer {
    text-align: center;
    padding: 0.75rem 1.75rem 1.5rem;
    color: #2e4a58;
    font-size: 0.8rem;
}

.secure-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    font-size: 0.72rem;
    color: #2a6a5a;
    margin-top: 0.4rem;
}

/* student-login-form uses .login-form styles via shared class */
.student-login-form input[type="password"]:focus,
.student-login-form input[type="email"]:focus {
    border-color: var(--login-accent);
}

.student-login-form .btn {
    background: var(--login-accent);
    color: #080d14;
}

.login-social {
    padding: 1.25rem 1.75rem 0;
}

.login-social-only {
    padding-bottom: 1.75rem;
}

.login-divider {
    display: flex;
    align-items: center;
    text-align: center;
    margin-top: 1.25rem;
    color: #2e4a58;
    font-size: 0.75rem;
}

.login-divider::before,
.login-divider::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
}

.login-divider span {
    padding: 0 0.75rem;
    white-space: nowrap;
}

.btn-azure {
    display: block;
    width: 215px;
    margin: 0 auto;
    text-decoration: none;
    border-radius: 2px;
    transition: box-shadow 0.15s ease, opacity 0.15s ease;
    line-height: 0;
}

.btn-azure svg {
    display: block;
    width: 100%;
    height: auto;
}

.btn-azure:hover {
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    opacity: 0.92;
}

.login-alert {
    padding: 1.25rem 1.75rem 0;
}

.login-alert .error-alert {
    margin-bottom: 0;
}

.login-social-buttons {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
}

.btn-azure-full,
.btn-github-full,
.btn-gitlab-full {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.75rem;
    padding: 0.8rem 1rem;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.06);
    font-size: 0.9375rem;
    font-weight: 500;
    color: #c0d8e0;
    text-decoration: none;
    transition: all 0.2s;
}

.btn-azure-full:hover,
.btn-github-full:hover,
.btn-gitlab-full:hover {
    border-color: rgba(255, 255, 255, 0.2);
    background: rgba(255, 255, 255, 0.1);
}

.btn-github-full:focus-visible,
.btn-gitlab-full:focus-visible {
    outline: 2px solid var(--login-accent);
    outline-offset: 2px;
}

.btn-azure-full svg,
.btn-github-full svg,
.btn-gitlab-full svg {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
}

.welcome-tagline {
    font-size: 0.9rem;
    opacity: 0.85;
    margin-top: 0.375rem;
}

.login-form input[type="email"] {
    width: 100%;
    padding: 0.875rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    transition: all 0.2s;
}

.login-form input[type="email"]:focus {
    outline: none;
    border-color: var(--student-color);
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
}

/* Login pages — light theme (set by home-theme.js on <html data-theme="light">) */
[data-theme="light"] body.login-page,
[data-theme="light"] body.student-login-page {
    background: #edf2f1;
    color-scheme: light;
}

[data-theme="light"] body.login-page {
    --login-accent: #b45309;
    --login-glow: rgba(180, 83, 9, 0.14);
}

[data-theme="light"] body.student-login-page {
    --login-accent: #007d74;
    --login-glow: rgba(0, 125, 116, 0.14);
}

[data-theme="light"] .login-container {
    background: rgba(255, 255, 255, 0.78);
    border-color: rgba(12, 37, 48, 0.1);
    box-shadow: 0 22px 44px -18px var(--login-glow), 0 8px 18px -10px rgba(12, 37, 48, 0.18);
}

[data-theme="light"] .login-context-sub,
[data-theme="light"] .login-form label {
    color: #4c6670;
}

[data-theme="light"] .login-form input[type="password"],
[data-theme="light"] .login-form input[type="email"] {
    background: #ffffff;
    border-color: rgba(12, 37, 48, 0.18);
    color: #0c2530;
}

[data-theme="light"] .login-form input[type="password"]::placeholder,
[data-theme="light"] .login-form input[type="email"]::placeholder {
    color: #6b848d;
}

[data-theme="light"] .login-form input[type="password"]:focus,
[data-theme="light"] .login-form input[type="email"]:focus {
    border-color: var(--login-accent);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--login-accent) 15%, transparent);
}

[data-theme="light"] .login-form .btn {
    color: #ffffff;
}

[data-theme="light"] .login-container .error-alert {
    background: rgba(220, 38, 38, 0.08);
    border-color: rgba(220, 38, 38, 0.3);
    color: #b91c1c;
}

[data-theme="light"] .login-footer,
[data-theme="light"] .login-divider {
    color: #5d7680;
}

[data-theme="light"] .login-divider::before,
[data-theme="light"] .login-divider::after {
    border-bottom-color: rgba(12, 37, 48, 0.12);
}

[data-theme="light"] .btn-azure-full,
[data-theme="light"] .btn-github-full,
[data-theme="light"] .btn-gitlab-full {
    background: #ffffff;
    border-color: rgba(12, 37, 48, 0.16);
    color: #0c2530;
}

[data-theme="light"] .btn-azure-full:hover,
[data-theme="light"] .btn-github-full:hover,
[data-theme="light"] .btn-gitlab-full:hover {
    background: #f4f8f7;
    border-color: rgba(12, 37, 48, 0.3);
}

/* ============================================
   STUDENT DASHBOARD STYLES
   ============================================ */

body.student-dashboard-page {
    background: linear-gradient(160deg, #f0fdf4 0%, #dcfce7 40%, #ecfdf5 100%);
    min-height: 100vh;
}

.student-dashboard-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem;
}

.student-dashboard-container main {
    padding: 0;
}

.student-footer {
    margin-top: 2rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-light);
}

.student-dashboard-header {
    background: var(--background);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.08);
    border-top: 3px solid var(--student-color);
}

/* Brand (logo + app name) */
.header-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.header-app-name {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text);
    letter-spacing: -0.01em;
}

/* Right-side user + actions group */
.header-user-actions {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

/* User identity chip: avatar + email */
.student-user-chip {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.3125rem 0.75rem 0.3125rem 0.3125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 9999px;
}

.student-avatar {
    width: 1.75rem;
    height: 1.75rem;
    border-radius: 50%;
    background: var(--student-color);
    color: white;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    text-transform: uppercase;
}

.student-user-email {
    font-size: 0.8125rem;
    color: var(--text-light);
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Ghost action button (Feedback / Dashboard) */
.student-header-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.5rem 0.875rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--secondary-color);
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
}

.student-header-btn:hover {
    border-color: var(--student-color);
    color: var(--student-color);
    background: #f0fdf4;
}

/* Icon-only logout button */
.student-header-icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.25rem;
    height: 2.25rem;
    border: 1px solid #cbd5e1;
    border-radius: var(--radius);
    background: var(--surface);
    color: var(--secondary-color);
    text-decoration: none;
    transition: border-color 0.15s, color 0.15s, background 0.15s;
    flex-shrink: 0;
}

.student-header-icon-btn:hover {
    border-color: #ef4444;
    color: #ef4444;
    background: #fef2f2;
}

.student-header-icon {
    width: 1rem;
    height: 1rem;
}

@media (max-width: 640px) {
    .student-user-email {
        display: none;
    }

    .student-header-btn span:last-child {
        display: none;
    }

    .student-header-btn {
        padding: 0.5rem;
    }
}

.student-card {
    background: var(--background);
    border-radius: var(--radius);
    padding: 2rem;
    margin-bottom: 2rem;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

.student-card h2 {
    margin-top: 0;
    color: var(--text);
    font-size: 1.5rem;
}

.student-form-group {
    margin-bottom: 1.5rem;
}

.student-form-group label {
    display: block;
    margin-bottom: 0.5rem;
    font-weight: 600;
    color: var(--text);
}

.student-form-group small {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.form-value-display {
    font-weight: 500;
    color: #374151;
    margin: 0;
    padding: 0.5rem 0;
}

.feedback-submitter-email {
    font-size: 0.9rem;
    color: #6b7280;
    margin-bottom: 1rem;
}

.student-form-group input,
.student-form-group select {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    transition: border-color 0.2s;
}

.student-form-group input:focus,
.student-form-group select:focus {
    outline: none;
    border-color: var(--student-color);
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
}

.student-form-group textarea {
    width: 100%;
    padding: 0.75rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    font-size: 1rem;
    font-family: inherit;
    line-height: 1.6;
    resize: vertical;
    min-height: 140px;
    transition: border-color 0.2s;
}

.student-form-group textarea:focus {
    outline: none;
    border-color: var(--student-color);
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
}

.char-counter {
    display: block;
    text-align: right;
    font-size: 0.8rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

.char-counter.near-limit {
    color: var(--warning);
    font-weight: 600;
}

.recommend-group {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

.recommend-option {
    flex: 1;
}

.recommend-option input {
    display: none;
}

.recommend-option label {
    display: block;
    text-align: center;
    padding: 0.6rem 0.5rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.9rem;
    transition: all 0.15s;
}

.recommend-option input:checked + label {
    border-color: var(--student-color);
    background: #f0fdf4;
    color: #166534;
    font-weight: 600;
}

.recommend-option label:hover {
    border-color: var(--student-color);
}

.student-btn {
    padding: 0.75rem 1.5rem;
    background: var(--student-color);
    color: white;
    border: none;
    border-radius: var(--radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
}

.student-btn:hover {
    background: var(--student-hover);
}

.student-btn:disabled {
    opacity: 0.7;
    cursor: not-allowed;
}


/* Step progress indicator */
.workspace-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    margin-bottom: 1.5rem;
}

.workspace-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.375rem;
}

.step-num {
    width: 2rem;
    height: 2rem;
    border-radius: 50%;
    background: var(--border);
    color: var(--text-light);
    font-size: 0.875rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
}

.step-label {
    font-size: 0.75rem;
    color: var(--text-light);
    font-weight: 500;
    white-space: nowrap;
    transition: color 0.3s;
}

.workspace-step.active .step-num {
    background: var(--student-color);
    color: white;
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.25);
}

.workspace-step.active .step-label {
    color: var(--student-color);
    font-weight: 600;
}

.workspace-step.completed .step-num {
    background: var(--success);
    color: white;
}

.workspace-step.completed .step-label {
    color: var(--success);
}

.workspace-step-divider {
    flex: 1;
    height: 2px;
    background: var(--border);
    min-width: 3rem;
    max-width: 6rem;
    margin: 0 0.5rem;
    margin-bottom: 1.25rem;
    transition: background 0.3s;
}

.workspace-step-divider.completed {
    background: var(--success);
}

/* Workspace response slide-in animation */
#workspace-response:not(:empty) {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 2px solid var(--border);
    animation: fadeSlideIn 0.3s ease;
}

@keyframes fadeSlideIn {
    from { opacity: 0; transform: translateY(8px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Hidden template group (CSS-only, replaces inline style="display:none") */
.template-group-hidden {
    display: none;
}

/* Student template picker — selectable tiles (replaces the template dropdown).
   Each tile reads like an environment label: a monospace name, the description,
   and a quiet meta row (IDE / resources / repo). */
.template-picker-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.template-picker-head label {
    margin-bottom: 0;
}

.template-picker-count {
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.78rem;
    color: var(--text-light);
}

.template-tiles {
    display: grid;
    gap: 0.7rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
}

.template-tiles-status {
    grid-column: 1 / -1;
    margin: 0;
    padding: 0.85rem 0;
    font-size: 0.9rem;
    color: var(--text-light);
}

.template-tiles-status--error {
    color: var(--error);
}

.template-tile {
    position: relative;
    display: block;
    cursor: pointer;
    margin: 0;
    background: var(--surface);
    border: 2px solid var(--border);
    border-radius: var(--radius);
    padding: 0.9rem 1rem;
    transition: border-color 0.15s ease, background 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}

.template-tile:hover {
    border-color: var(--student-color);
    transform: translateY(-1px);
    box-shadow: var(--shadow);
}

.template-tile input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.template-tile-name {
    display: block;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.92rem;
    font-weight: 600;
    color: var(--text);
    padding-right: 1.75rem;
    word-break: break-word;
}

.template-tile-desc {
    display: block;
    margin-top: 0.35rem;
    font-size: 0.85rem;
    color: var(--text-light);
    line-height: 1.45;
}

.template-tile-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-top: 0.6rem;
}

.template-tile-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.7rem;
    color: var(--text-light);
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 6px;
    padding: 0.2rem 0.5rem;
    font-variant-numeric: tabular-nums;
}

.template-tile-chip-key {
    color: var(--secondary-color);
}

.template-tile-check {
    position: absolute;
    top: 0.85rem;
    right: 0.85rem;
    width: 1.2rem;
    height: 1.2rem;
    border-radius: 50%;
    border: 2px solid var(--border);
    background: var(--background);
    display: grid;
    place-items: center;
    color: #fff;
    transition: background 0.15s ease, border-color 0.15s ease;
}

.template-tile-check svg {
    width: 0.7rem;
    height: 0.7rem;
    opacity: 0;
    transform: scale(0.6);
    transition: opacity 0.15s ease, transform 0.15s ease;
}

.template-tile.is-selected,
.template-tile:has(input:checked) {
    border-color: var(--student-color);
    background: rgba(72, 187, 120, 0.1);
}

.template-tile.is-selected .template-tile-check,
.template-tile:has(input:checked) .template-tile-check {
    background: var(--student-color);
    border-color: var(--student-color);
}

.template-tile.is-selected .template-tile-check svg,
.template-tile:has(input:checked) .template-tile-check svg {
    opacity: 1;
    transform: scale(1);
}

.template-tile:has(input:focus-visible) {
    border-color: var(--student-color);
    box-shadow: 0 0 0 3px rgba(72, 187, 120, 0.1);
}

@media (prefers-reduced-motion: reduce) {
    .template-tile,
    .template-tile-check,
    .template-tile-check svg {
        transition: none;
    }
    .template-tile:hover {
        transform: none;
    }
}

/* Lab select loading shimmer */
select.loading {
    color: transparent;
    background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
    background-size: 200% 100%;
    animation: shimmer 1.2s infinite;
    pointer-events: none;
}

@keyframes shimmer {
    0%   { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}

.labs-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.lab-item {
    padding: 1rem;
    border: 2px solid var(--border);
    border-radius: var(--radius);
    margin-bottom: 1rem;
    background: var(--background);
}

.lab-item:hover {
    border-color: var(--student-color);
}

.lab-item strong {
    color: var(--text);
    display: block;
    margin-bottom: 0.5rem;
}

.lab-item .lab-meta {
    color: var(--text-light);
    font-size: 0.875rem;
}

.student-credentials-box {
    background: #f0f9ff;
    border: 2px solid var(--student-color);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-top: 1.5rem;
}

.student-credentials-box h3 {
    margin-top: 0;
    color: var(--student-color);
}

.student-credential-item {
    margin-bottom: 1rem;
}

.student-credential-item label {
    font-weight: 600;
    color: var(--text);
    display: block;
    margin-bottom: 0.25rem;
}

.student-credential-item .value,
.student-credential-item-value {
    font-family: monospace;
    background: white;
    padding: 0.5rem;
    border-radius: var(--radius);
    word-break: break-all;
}

.student-credential-item-value a {
    color: #2563eb;
    text-decoration: underline;
}

.student-credential-item-value a:hover {
    color: #1d4ed8;
}

.student-credential-item-value em {
    font-style: italic;
    color: var(--text-light);
}

.student-loading {
    text-align: center;
    padding: 2rem;
    color: var(--text-light);
}

.student-credentials-box-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.student-credentials-box-header h3 {
    margin: 0;
}

.student-btn-danger {
    background: #e53e3e;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

.student-btn-small {
    margin-top: 0.5rem;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* Workspace list styles (student multi-workspace) */
.workspaces-list-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 1rem;
}

.workspaces-list-header h2 {
    margin: 0;
}

#workspaces-list-container .workspace-card {
    background: #f0f9ff;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
}

#workspaces-list-container .workspace-card:last-child {
    margin-bottom: 0;
}

/* Header row: click to expand/collapse. Name + lab/template chips on the left,
   the primary open action and a chevron on the right. */
.workspace-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75rem;
    flex-wrap: wrap;
    cursor: pointer;
    user-select: none;
}

.workspace-card-heading {
    min-width: 0;
}

.workspace-card-title {
    margin: 0;
    font-size: 1.0625rem;
    color: var(--text);
    word-break: break-all;
}

.workspace-card-subtitle {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.375rem;
}

.workspace-card-chip {
    display: inline-flex;
    align-items: baseline;
    gap: 0.3rem;
    padding: 0.15rem 0.55rem;
    background: #fff;
    border: 1px solid var(--border);
    border-radius: 999px;
    font-size: 0.75rem;
    color: var(--text);
    word-break: break-all;
}

.workspace-card-chip-key {
    font-size: 0.625rem;
    font-weight: 700;
    letter-spacing: 0.03em;
    text-transform: uppercase;
    color: var(--text-light);
}

.workspace-card-header-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.workspace-card-open {
    margin-top: 0;
    flex-shrink: 0;
}

.workspace-card .collapsible-toggle {
    background: none;
    border: none;
    padding: 0.25rem;
    cursor: pointer;
    color: var(--text-light);
    display: inline-flex;
    align-items: center;
}

.workspace-card .collapsible-toggle .chevron-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.28s ease;
}

.workspace-card:not(.collapsed) .collapsible-toggle .chevron-icon {
    transform: rotate(180deg);
}

/* Signature element: amber auto-deletion pill (reuses the site deletion motif) */
.workspace-expiry-pill {
    display: inline-flex;
    align-items: center;
    /* The card is a column flexbox; opt out of stretch so the pill hugs its text. */
    align-self: flex-start;
    max-width: 100%;
    /* On narrow screens the label and date wrap as whole units, not mid-word. */
    flex-wrap: wrap;
    gap: 0.375rem;
    margin-top: 0.75rem;
    padding: 0.35rem 0.625rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.workspace-expiry-icon {
    width: 0.95rem;
    height: 0.95rem;
    flex-shrink: 0;
    color: #d97706;
}

.workspace-expiry-label {
    font-weight: 600;
    color: #92400e;
    white-space: nowrap;
}

.workspace-expiry-date {
    color: #92400e;
    font-weight: 500;
    white-space: nowrap;
}

/* Note telling the student a teacher opened their workspace. */
.workspace-teacher-access-note {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    color: var(--text-light);
}

/* Collapsible body: animates open/closed with a grid-rows transition that works
   regardless of the content's height. */
.workspace-card-collapsible {
    display: grid;
    grid-template-rows: 1fr;
    transition: grid-template-rows 0.28s ease;
}

.workspace-card.collapsed .workspace-card-collapsible {
    grid-template-rows: 0fr;
}

.workspace-card-collapsible-inner {
    overflow: hidden;
    min-height: 0;
}

.workspace-card-details {
    margin-top: 0.875rem;
    display: grid;
    gap: 0.75rem;
}

.workspace-card-details .student-credential-item {
    margin-bottom: 0;
}

/* Secondary actions, revealed with the rest of the details */
.workspace-card-footer-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-end;
    flex-wrap: wrap;
    margin-top: 0.875rem;
    padding-top: 0.75rem;
    border-top: 1px solid var(--border);
}

.workspace-card-footer-actions .student-btn-small {
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .workspace-card-collapsible,
    .workspace-card .collapsible-toggle .chevron-icon {
        transition: none;
    }
}

/* My Workspaces page: header row (title + count on the left, actions on the right) */
.student-workspaces-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 1.25rem;
}

.student-workspaces-head-titles {
    display: flex;
    align-items: baseline;
    gap: 0.625rem;
    flex-wrap: wrap;
}

.student-workspaces-head-titles h2 {
    margin: 0;
}

.student-workspaces-sub {
    font-size: 0.8125rem;
    color: var(--text-light);
    font-weight: 500;
}

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

.student-workspaces-head-actions .student-btn {
    margin-top: 0;
}

/* Empty state shown on the My Workspaces page when nothing has been saved yet */
.student-empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: 2.5rem 1.5rem;
    gap: 0.5rem;
}

.student-empty-icon {
    width: 3rem;
    height: 3rem;
    color: var(--student-color);
    margin-bottom: 0.25rem;
}

.student-empty-state h3 {
    margin: 0;
    color: var(--text);
    font-size: 1.125rem;
}

.student-empty-state p {
    margin: 0 0 0.75rem;
    color: var(--text-light);
    max-width: 30rem;
}

/* "View my workspaces" link shown after a workspace is created on the request page */
.workspace-view-all-link {
    display: inline-block;
    margin-top: 1rem;
}

/* Collapsible card styles */
.collapsible-card {
    overflow: hidden;
}

.collapsible-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
    user-select: none;
    padding: 0;
    margin-bottom: 0;
    transition: background-color 0.2s;
    border-radius: var(--radius);
    padding: 0.5rem;
    margin: -0.5rem -0.5rem 0 -0.5rem;
}

.collapsible-header:hover {
    background: var(--surface);
}

.collapsible-header h2 {
    margin: 0;
    flex: 1;
    padding: 0;
}

.collapsible-toggle {
    background: none;
    border: none;
    padding: 0.5rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-light);
    transition: color 0.2s, transform 0.2s;
    border-radius: var(--radius);
}

.collapsible-toggle:hover {
    color: var(--text);
    background: var(--surface);
}

.chevron-icon {
    width: 1.25rem;
    height: 1.25rem;
    transition: transform 0.3s ease;
    transform: rotate(0deg);
}

.collapsible-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-out, margin-top 0.3s ease-out;
    margin-top: 1.5rem;
}

.collapsible-card.collapsed .collapsible-content {
    margin-top: 0;
}

.collapsible-card.collapsed .chevron-icon {
    transform: rotate(-90deg);
}

/* Copy button styles */
.credential-with-copy {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    position: relative;
}

.credential-with-copy > a,
.credential-with-copy > span {
    flex: 1;
    min-width: 0;
}

.copy-btn {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.375rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s;
    flex-shrink: 0;
    color: var(--text-light);
}

.copy-btn:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: white;
}

.copy-btn.copied {
    background: var(--success);
    border-color: var(--success);
    color: white;
}

.copy-icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

.password-value {
    font-family: monospace;
}

/* ============================================
   JOBS LIST PAGE STYLES
   ============================================ */

.jobs-page-container,
.labs-page-container {
    max-width: 1400px;
}

.jobs-table-wrapper {
    overflow-x: auto;
    margin-top: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.jobs-table {
    width: 100%;
    min-width: 1200px;
    border-collapse: collapse;
    background: var(--background);
}

.jobs-table thead {
    background: var(--surface);
}

.jobs-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.jobs-table th:nth-child(1) {
    width: 200px;
    min-width: 200px;
}

.jobs-table th:nth-child(2) {
    width: 150px;
    min-width: 150px;
}

.jobs-table th:nth-child(3) {
    width: 120px;
    min-width: 120px;
}

.jobs-table th:nth-child(4) {
    width: 140px;
    min-width: 140px;
}

.jobs-table th:nth-child(5) {
    width: 180px;
    min-width: 180px;
}

.jobs-table th:nth-child(6) {
    width: 180px;
    min-width: 180px;
}

.jobs-table th:nth-child(7) {
    width: 120px;
    min-width: 120px;
}

.jobs-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.jobs-table tbody tr:hover {
    background: var(--surface);
}

.jobs-table tbody tr:last-child td {
    border-bottom: none;
}

.job-id {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--primary-color);
    word-break: break-all;
}

.job-id a {
    color: var(--primary-color);
    text-decoration: none;
}

.job-id a:hover {
    text-decoration: underline;
}

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

.job-type-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.job-type-dry-run {
    background: #dbeafe;
    color: #1e40af;
}

.job-type-real {
    background: #d1fae5;
    color: #065f46;
}

.empty-state {
    text-align: center;
    padding: 3rem 2rem;
    color: var(--text-light);
}

.empty-state-icon {
    font-size: 3rem;
    margin-bottom: 1rem;
}

.stats-bar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.5rem;
    background: var(--surface);
    border-radius: var(--radius);
    margin-bottom: 1.5rem;
}

.stats-item {
    display: flex;
    flex-direction: column;
}

.stats-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--primary-color);
}

.stats-label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.pagination {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 1rem;
    padding: 1rem 0;
}

.pagination-info {
    font-size: 0.875rem;
    color: var(--text-light);
}

.pagination-disabled {
    opacity: 0.5;
    pointer-events: none;
}

.timestamp {
    font-size: 0.875rem;
    color: var(--text-light);
    white-space: nowrap;
}

.actions-cell {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    align-items: center;
}

.labs-table .actions-cell .status-badge {
    margin-right: 0.25rem;
}

.actions-cell .btn {
    white-space: nowrap;
    padding: 0.5rem;
    min-width: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.actions-cell .btn-icon-only {
    padding: 0.5rem;
    min-width: 2.5rem;
    height: 2.5rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.actions-cell .btn-icon-only svg {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

.actions-cell .btn-icon-only:hover svg {
    stroke-width: 2.5;
}

@media (max-width: 1400px) {
    .jobs-page-container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .jobs-table {
        font-size: 0.875rem;
        min-width: 1000px;
    }

    .jobs-table th,
    .jobs-table td {
        padding: 0.75rem 1rem;
    }

    .stats-bar {
        flex-direction: column;
        gap: 1rem;
        align-items: flex-start;
    }

    .actions-cell {
        flex-direction: column;
    }

    .actions-cell .btn {
        width: 100%;
    }
}

/* ============================================
   WORKSPACES PAGE STYLES
   ============================================ */

.workspaces-page-container {
    max-width: 1400px;
}

/* Active Workspaces / History tabs */
.workspaces-tabs {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 1rem;
    border-bottom: 1px solid var(--border);
    margin: 1.5rem 0 1.25rem;
}

.workspaces-tabs-list {
    display: flex;
    gap: 1.75rem;
}

.workspaces-tabs-refresh {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    flex-shrink: 0;
    position: relative;
    margin-bottom: 0.5rem;
}

.workspaces-tabs-refresh .icon {
    width: 1.125rem;
    height: 1.125rem;
    stroke-width: 2;
}

.workspaces-tab {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0 0 0.75rem;
    margin-bottom: -1px;
    border: none;
    border-bottom: 2px solid transparent;
    background: none;
    font: inherit;
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
}

.workspaces-tab:hover {
    color: var(--text);
}

.workspaces-tab.is-active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
}

.workspaces-tab-count {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    background: var(--background);
    border: 1px solid var(--border);
    color: var(--text-light);
}

.workspaces-tab.is-active .workspaces-tab-count {
    background: color-mix(in srgb, var(--primary-color) 12%, transparent);
    border-color: transparent;
    color: var(--primary-color);
}

.workspaces-table-toolbar {
    display: flex;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.workspaces-table-toolbar .btn-icon-only {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.workspaces-table-toolbar .btn-icon-only .icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

/* Filters and pager shared by the Active Workspaces and History lists */
.workspaces-filters {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-right: auto;
}

.workspaces-filter-input {
    height: 2.5rem;
    padding: 0 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: inherit;
    font: inherit;
    font-size: 0.875rem;
}

.workspaces-filter-search {
    width: 16rem;
    max-width: 100%;
}

.workspaces-pagination {
    flex-wrap: wrap;
    gap: 0.75rem;
}

.workspaces-no-match {
    margin: 0;
    padding: 1.5rem 0;
    text-align: center;
    font-size: 0.875rem;
    color: var(--text-light);
}

.message-container {
    margin-top: 1.5rem;
    padding: 0 1.5rem;
}

.message {
    padding: 1rem 1.25rem;
    border-radius: var(--radius);
    margin-bottom: 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.message-success {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #a7f3d0;
}

.message-error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.labs-table-wrapper {
    overflow-x: auto;
    margin-top: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.labs-table {
    width: 100%;
    min-width: 900px;
    border-collapse: collapse;
    background: var(--background);
}

.labs-table thead {
    background: var(--surface);
}

.labs-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.labs-table th:first-child {
    width: 220px;
    min-width: 220px;
    text-align: left;
}

.labs-table th:nth-child(2) {
    width: 150px;
    min-width: 150px;
}

.labs-table th:nth-child(3) {
    width: 150px;
    min-width: 150px;
}

.labs-table th:nth-child(4) {
    width: 120px;
    min-width: 120px;
}

.labs-table th:nth-child(5) {
    width: 180px;
    min-width: 180px;
}

.labs-table th:nth-child(6) {
    width: 180px;
    min-width: 180px;
}

.labs-table th:nth-child(7) {
    width: 120px;
    min-width: 120px;
}

.labs-table td {
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
}

.labs-table tbody tr:hover {
    background: var(--surface);
}

.labs-table tbody tr:last-child td {
    border-bottom: none;
}

.labs-table td:first-child {
    text-align: center;
}

.labs-table input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--primary-color);
}

/* Workspace list (table) */
.workspace-table-wrapper {
    overflow-x: auto;
    margin-top: 1.5rem;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.workspace-table {
    width: 100%;
    min-width: 1024px;
    border-collapse: collapse;
    background: var(--background);
    table-layout: fixed;
}

.workspace-table thead {
    background: var(--surface);
}

.workspace-table th {
    padding: 1rem 1.25rem;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-table td {
    padding: 0.85rem 1.25rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    vertical-align: middle;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workspace-table tbody tr:hover {
    background: var(--surface);
}

.workspace-table tbody tr:last-child td {
    border-bottom: none;
}

.workspace-table th.col-checkbox,
.workspace-table td.col-checkbox {
    width: 2.75rem;
    padding-left: 0.75rem;
    padding-right: 0.5rem;
    text-align: center;
}

.workspace-table th.col-status,
.workspace-table td.col-status {
    width: 4.75rem;
    padding-left: 0.5rem;
    padding-right: 0.5rem;
    text-align: center;
}

.workspace-table th.col-actions,
.workspace-table td.col-actions {
    width: 6.5rem;
    padding-left: 0.5rem;
    padding-right: 0.75rem;
    text-align: right;
}

/* Cells clip their content to ellipsize long text; the actions cell holds buttons
   whose tooltips sit above them, outside the cell, so it must not clip. */
.workspace-table td.col-actions {
    overflow: visible;
}

.workspace-table th:nth-child(3),
.workspace-table td:nth-child(3) {
    width: 14rem;
}

.workspace-table th:nth-child(4),
.workspace-table td:nth-child(4) {
    width: 11rem;
}

.workspace-table th:nth-child(5),
.workspace-table td:nth-child(5),
.workspace-table th:nth-child(6),
.workspace-table td:nth-child(6) {
    width: 12.5rem;
}

.workspace-table input[type="checkbox"] {
    width: 1.25rem;
    height: 1.25rem;
    cursor: pointer;
    accent-color: var(--primary-color);
}

.workspace-table .workspace-status-badge {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
}

.workspace-owner-cell {
    color: var(--text-light);
}

.workspace-date-cell {
    color: var(--text-light);
    font-size: 0.875rem;
}

.workspace-row-status-running td.col-status { border-left: 3px solid var(--success); }
.workspace-row-status-stopped td.col-status { border-left: 3px solid var(--border); }
.workspace-row-status-starting td.col-status,
.workspace-row-status-stopping td.col-status { border-left: 3px solid var(--primary-color); }
.workspace-row-status-failed td.col-status { border-left: 3px solid var(--error); }

.workspace-table .btn-icon-only {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    position: relative;
}

.workspace-table .btn-icon-only .icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* The "open workspace" action is a form (it POSTs to a new tab); keep it on the
   same line as the delete button next to it. */
.workspace-open-form {
    display: inline-block;
    margin: 0 0.25rem 0 0;
}

.checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    cursor: pointer;
    font-weight: 500;
}

.form-checkboxes {
    margin-bottom: 1.5rem;
}

.form-checkboxes > span {
    display: block;
    font-weight: 500;
    margin-bottom: 0.5rem;
    color: var(--text);
    font-size: 0.875rem;
}

.form-checkboxes .checkbox-stack {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

/* The workspace template editor renders these inside a .form-group, whose
   `label { display: block }` and `input { width: 100% }` both out-specify the
   base .checkbox-label rule — stacking the box above its text and stretching it
   across the row. Re-assert the inline layout at a specificity that survives it. */
.form-checkboxes .checkbox-label {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.form-checkboxes .checkbox-label input[type="checkbox"] {
    width: auto;
    flex: none;
    margin: 0;
}

.form-checkboxes small {
    display: block;
    margin-top: 0.5rem;
    color: var(--text-light);
    font-size: 0.8rem;
}

.workspace-status-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1;
}

.workspace-status-badge.status-running {
    background: #d1fae5;
    color: #065f46;
}

.workspace-status-badge.status-stopped {
    background: #e5e7eb;
    color: #374151;
}

.workspace-status-badge.status-starting,
.workspace-status-badge.status-stopping {
    background: #dbeafe;
    color: #1e40af;
}

.workspace-status-badge.status-failed {
    background: #fee2e2;
    color: #991b1b;
}

.workspace-name {
    font-weight: 600;
    color: var(--text);
    font-family: monospace;
    font-size: 0.9375rem;
    word-break: break-word;
    line-height: 1.4;
}

.lab-type-badge {
    display: inline-block;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.lab-type-dry-run {
    background: #dbeafe;
    color: #1e40af;
}

.lab-type-real {
    background: #d1fae5;
    color: #065f46;
}

.lab-id {
    font-family: monospace;
    font-size: 0.8125rem;
    color: var(--primary-color);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    max-width: 100%;
}

.lab-type-icon {
    font-size: 1rem;
    flex-shrink: 0;
    display: inline-block;
}

.lab-id-link {
    color: var(--primary-color);
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.lab-id-link:hover {
    text-decoration: underline;
}

.labs-table .status-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;
    border-radius: 0.25rem;
    font-weight: 600;
    min-width: 2rem;
    height: 2rem;
    font-size: 1.1rem;
    line-height: 1;
    margin-bottom: 0;
}

@media (max-width: 1400px) {
    .workspaces-page-container {
        max-width: 100%;
    }
}

@media (max-width: 768px) {
    .workspaces-tabs {
        gap: 1.25rem;
    }

    .workspace-table {
        font-size: 0.875rem;
    }

    .workspace-table th,
    .workspace-table td {
        padding: 0.65rem 0.85rem;
    }

    .labs-table {
        font-size: 0.875rem;
        min-width: 700px;
    }
    
    .lab-id-link {
        font-size: 0.75rem;
    }

    .labs-table th,
    .labs-table td {
        padding: 0.75rem 1rem;
    }
}

/* ============================================
   LABS CARD GRID LAYOUT
   ============================================ */

.labs-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 1.5rem;
    margin-top: 1.5rem;
}

.lab-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0;
    transition: all 0.3s ease;
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.lab-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--primary-color);
}

.lab-card-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    gap: 0.75rem;
}

.lab-header-left {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex: 1;
    min-width: 0;
}

.lab-card-header .status-badge {
    flex-shrink: 0;
    margin-bottom: 0;
    font-size: 1rem;
    min-width: 2rem;
    height: 2rem;
}

.lab-type-badge {
    font-size: 1rem;
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: 0.25rem;
    background: rgba(37, 99, 235, 0.1);
}

.lab-id-short {
    font-family: monospace;
    font-size: 0.8125rem;
    color: var(--text-light);
    font-weight: 500;
    flex-shrink: 0;
    text-align: right;
    white-space: nowrap;
}

.lab-card-body {
    padding: 1.25rem;
    flex: 1;
}

.lab-stack-name {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 0.75rem;
    word-break: break-word;
}

.lab-stack-name .no-stack-name {
    color: var(--text-light);
    font-weight: 400;
    font-style: italic;
}

.lab-meta {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

.lab-meta-label {
    font-weight: 500;
}

.lab-meta-value {
    color: var(--text);
}

.lab-meta-muted {
    color: var(--text-light);
    font-style: italic;
}

.lab-deletion-info {
    display: flex;
    align-items: center;
    gap: 0.375rem;
    margin-top: 0.625rem;
    padding: 0.4rem 0.625rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    border-radius: 0.375rem;
    font-size: 0.8125rem;
}

.lab-deletion-icon {
    width: 0.9rem;
    height: 0.9rem;
    flex-shrink: 0;
    color: #d97706;
    stroke: #d97706;
}

.lab-deletion-label {
    font-weight: 600;
    color: #92400e;
}

.lab-deletion-date {
    color: #92400e;
    font-weight: 500;
}

.lab-card-status-completed {
    border-left: 3px solid var(--success);
}

.lab-card-status-running {
    border-left: 3px solid var(--primary-color);
}

.lab-card-status-pending {
    border-left: 3px solid var(--warning);
}

.lab-card-status-failed {
    border-left: 3px solid var(--error);
}

.lab-card-status-destroyed {
    border-left: 3px solid var(--border);
}

.lab-card-status-dry-run-completed {
    border-left: 3px solid var(--secondary-color);
}

.lab-card-footer {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
    gap: 0.5rem;
    flex-wrap: wrap;
}

.lab-card-footer .btn-icon-only {
    width: 2.5rem;
    height: 2.5rem;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.lab-card-footer .btn-icon-only .icon {
    width: 1.25rem;
    height: 1.25rem;
    stroke-width: 2;
}

.tooltip-trigger {
    position: relative;
}

.tooltip {
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5rem;
    padding: 0.5rem 0.75rem;
    background: rgba(0, 0, 0, 0.9);
    color: white;
    font-size: 0.75rem;
    white-space: nowrap;
    border-radius: 0.25rem;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.2s;
    z-index: 1000;
    font-weight: 500;
}

.tooltip-trigger:hover .tooltip {
    opacity: 1;
}

.tooltip::after {
    content: '';
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%);
    border: 4px solid transparent;
    border-top-color: rgba(0, 0, 0, 0.9);
}

/* Responsive adjustments for card grid */
@media (max-width: 1024px) {
    .labs-grid {
        grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
        gap: 1.25rem;
    }
}

@media (max-width: 768px) {
    .labs-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }

    .lab-card-header {
        flex-wrap: wrap;
    }

    .lab-id-short {
        width: 100%;
        text-align: left;
        margin-top: 0.5rem;
        padding-top: 0.5rem;
        border-top: 1px solid var(--border);
    }

    .lab-card-footer {
        justify-content: center;
    }
}

/* Credentials modal */
.credentials-modal-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 2000;
    background: rgba(0, 0, 0, 0.5);
    align-items: center;
    justify-content: center;
    padding: 1rem;
}

@supports (backdrop-filter: blur(4px)) {
    .credentials-modal-overlay {
        backdrop-filter: blur(4px);
        background: rgba(0, 0, 0, 0.35);
    }
}

.credentials-modal-overlay.visible {
    display: flex;
}

.credentials-modal {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);
    max-width: 28rem;
    width: 100%;
    max-height: 90vh;
    overflow: auto;
}

.credentials-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid var(--border);
}

.credentials-modal-header h3 {
    margin: 0;
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
}

.credentials-modal-close {
    background: none;
    border: none;
    font-size: 1.5rem;
    line-height: 1;
    color: var(--text-light);
    cursor: pointer;
    padding: 0.25rem;
}

.credentials-modal-close:hover {
    color: var(--text);
}

.credentials-modal-body {
    padding: 1.25rem;
}

.credentials-modal-loading,
.credentials-modal-error {
    color: var(--text-light);
}

.credentials-modal-error {
    color: #b91c1c;
}

.credentials-modal-fields {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.credentials-modal-row label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text);
    margin-bottom: 0.375rem;
}

.credentials-modal-value-wrap {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.credentials-modal-input {
    flex: 1;
    min-width: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
    color: var(--text);
}

.credentials-copy-btn,
.credentials-toggle-password {
    flex-shrink: 0;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
}

/* ============================================
   UPLOAD TEMPLATE DRAWER
   ============================================ */

/* Backdrop */
.ut-drawer-overlay {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.35);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
}

@supports (backdrop-filter: blur(3px)) {
    .ut-drawer-overlay {
        backdrop-filter: blur(3px);
        background: rgba(15, 23, 42, 0.25);
    }
}

.ut-drawer-overlay.visible {
    opacity: 1;
    pointer-events: auto;
}

/* Drawer panel — slides in from the right */
.ut-panel {
    position: fixed;
    top: 0;
    right: 0;
    height: 100dvh;
    width: 40rem;
    max-width: 100vw;
    background: var(--background);
    border-left: 1px solid var(--border);
    box-shadow: -12px 0 40px rgba(0, 0, 0, 0.12);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transform: translateX(100%);
    transition: transform 0.28s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 1001;
}

.ut-drawer-overlay.visible .ut-panel {
    transform: translateX(0);
}

/* Lab context bar */
.ut-drawer-context {
    padding: 0.5rem 1.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    font-size: 0.8125rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-shrink: 0;
}

.ut-drawer-lab-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    padding: 0.1875rem 0.625rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
    font-size: 0.8125rem;
    color: var(--text);
    font-weight: 500;
}

/* The names already on the lab, shown under the target chip so a duplicate name
   is visible before it is submitted. */
.ut-drawer-context {
    flex-wrap: wrap;
}

.ut-drawer-existing {
    flex-basis: 100%;
    color: var(--text-light);
}

/* The create-lab Step 6 choice cards are laid out for full page width. Stacking
   them in the drawer costs about a third of the panel before a single field, and
   the drawer now carries everything the wizard step does — so here they collapse
   to one compact row. The three labels say enough on their own: the admin got
   here by clicking "Add Template", so the descriptions are answering a question
   they have already asked. */
.ut-panel .button-group {
    gap: 0.5rem;
}

.ut-panel .source-button {
    flex: 1 1 0;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
    padding: 0.75rem 0.875rem;
}

.ut-panel .source-icon {
    font-size: 1.375rem;
}

.ut-panel .source-title {
    font-size: 0.8125rem;
}

.ut-panel .source-description {
    display: none;
}

/* The lift on hover reads as noise in a panel this dense, and shifts a card out
   from under the cursor on a short pointer travel. */
.ut-panel .source-button:hover,
.ut-panel .source-button.selected:hover {
    transform: none;
}

.ut-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1.125rem 1.5rem;
    border-bottom: 1px solid var(--border);
    flex-shrink: 0;
    background: var(--background);
}

.ut-panel-title-group {
    display: flex;
    align-items: center;
    gap: 0.625rem;
}

.ut-panel-icon {
    width: 1.25rem;
    height: 1.25rem;
    color: var(--primary-color);
    flex-shrink: 0;
}

.ut-panel-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    letter-spacing: -0.01em;
}

.ut-panel-close {
    background: none;
    border: none;
    cursor: pointer;
    padding: 0.375rem;
    border-radius: 0.375rem;
    color: var(--text-light);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.15s, color 0.15s;
}

.ut-panel-close svg {
    width: 1.125rem;
    height: 1.125rem;
}

.ut-panel-close:hover {
    background: var(--surface);
    color: var(--text);
}

.ut-panel-body {
    padding: 1.25rem 1.5rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    overflow-y: auto;
    overscroll-behavior: contain;
}

/* Alerts */
.ut-alert {
    display: flex;
    align-items: flex-start;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: 0.5rem;
    font-size: 0.875rem;
    line-height: 1.5;
    margin-bottom: 1rem;
}

.ut-alert--error {
    background: #fef2f2;
    border: 1px solid #fecaca;
    color: #b91c1c;
}

.ut-alert--success {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    color: #166534;
}

/* Steps */
.ut-step {
    display: flex;
    flex-direction: column;
    gap: 0;
    padding: 1rem 0;
    border-bottom: 1px solid var(--border);
}

.ut-step:last-of-type {
    border-bottom: none;
}

.ut-step-header {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    margin-bottom: 0.875rem;
}

.ut-step-number {
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 50%;
    background: var(--primary-color);
    color: #fff;
    font-size: 0.75rem;
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    letter-spacing: 0;
}

.ut-step-label {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.ut-step-hint {
    font-size: 0.75rem;
    color: var(--text-light);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.25rem;
    padding: 0.125rem 0.5rem;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.ut-optional-badge {
    font-size: 0.7rem;
    font-weight: 500;
    color: var(--text-light);
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.75rem;
    padding: 0.125rem 0.5rem;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.ut-step-actions {
    margin-left: auto;
    display: flex;
    gap: 0.375rem;
}

.ut-step-body {
    padding-left: 2.125rem;
}

/* Name input */
.ut-name-input {
    width: 100%;
    padding: 0.625rem 0.875rem;
    font-size: 0.9375rem;
    border: 1.5px solid var(--border);
    border-radius: 0.5rem;
    background: var(--background);
    color: var(--text);
    transition: border-color 0.15s, box-shadow 0.15s;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.ut-name-input::placeholder {
    color: var(--text-light);
    font-family: inherit;
}

.ut-name-input:focus {
    outline: none;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1);
}

/* Drop zone */
.ut-dropzone {
    position: relative;
    border-radius: 0.625rem;
    border: 2px dashed var(--border);
    transition: border-color 0.2s, background 0.2s;
    overflow: hidden;
}

.ut-dropzone:hover,
.ut-dropzone--hover {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.03);
}

.ut-dropzone--active {
    border-style: solid;
    border-color: var(--success);
    background: rgba(16, 185, 129, 0.04);
}

.ut-dropzone--dragging {
    border-color: var(--primary-color);
    background: rgba(37, 99, 235, 0.06);
    box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.12);
}

.ut-dropzone-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1.5rem;
    cursor: pointer;
    text-align: center;
    min-height: 9rem;
}

.ut-dropzone--active .ut-dropzone-label {
    padding: 1.5rem;
}

.ut-dropzone-icon-wrap {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 0.625rem;
    background: var(--surface);
    border: 1px solid var(--border);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-color);
    transition: background 0.15s, border-color 0.15s, transform 0.15s;
    flex-shrink: 0;
}

.ut-dropzone-icon-wrap svg {
    width: 1.25rem;
    height: 1.25rem;
}

.ut-dropzone--active .ut-dropzone-icon-wrap {
    background: #d1fae5;
    border-color: #6ee7b7;
    color: #065f46;
}

.ut-dropzone:hover .ut-dropzone-icon-wrap {
    background: #dbeafe;
    border-color: #93c5fd;
    transform: translateY(-2px);
}

.ut-dropzone-primary {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--text);
    max-width: 24ch;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.ut-dropzone--active .ut-dropzone-primary::before {
    content: '✓ ';
    color: var(--success);
}

.ut-dropzone-secondary {
    font-size: 0.8125rem;
    color: var(--text-light);
}

.ut-dropzone--active .ut-dropzone-secondary {
    display: none;
}

/* Action buttons (Detect / Add) */
.ut-action-btn {
    display: inline-flex;
    align-items: center;
    gap: 0.3rem;
    padding: 0.3125rem 0.75rem;
    font-size: 0.8125rem;
    font-weight: 500;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--background);
    color: var(--text);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.ut-action-btn svg {
    width: 0.875rem;
    height: 0.875rem;
    flex-shrink: 0;
}

.ut-action-btn:hover {
    background: var(--surface);
    border-color: var(--secondary-color);
    color: var(--text);
}

.ut-action-btn--add:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.ut-action-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* Variables container */
.ut-vars-container {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.ut-vars-container .template-variable-row {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 0.5rem;
    padding: 0.5rem 0.625rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-bottom: 0;
}

.ut-vars-container .template-variable-row input {
    padding: 0.375rem 0.625rem;
    font-size: 0.875rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--background);
    color: var(--text);
    font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.ut-vars-container .template-variable-row input:focus {
    outline: none;
    border-color: var(--primary-color);
}

.ut-vars-container .template-variable-row .btn-remove-variable {
    width: 1.625rem;
    height: 1.625rem;
    padding: 0;
    font-size: 0.8125rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--background);
    color: var(--text-light);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    margin-bottom: 0;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.ut-vars-container .template-variable-row .btn-remove-variable:hover {
    background: #fef2f2;
    border-color: #fecaca;
    color: #b91c1c;
}

.ut-vars-container .detect-variables-status {
    font-size: 0.8125rem;
    color: var(--text-light);
    padding: 0.5rem 0;
    font-style: italic;
}

.ut-vars-container .detect-variables-status.error-message {
    color: #b91c1c;
    font-style: normal;
}

/* Footer / Submit */
.ut-footer {
    padding-top: 1.25rem;
}

.ut-submit-btn {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 0.75rem 1rem;
    font-size: 0.9375rem;
    font-weight: 600;
    border: none;
    border-radius: 0.5rem;
    background: var(--primary-color);
    color: #fff;
    cursor: pointer;
    transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
    letter-spacing: -0.01em;
}

.ut-submit-btn svg {
    width: 1rem;
    height: 1rem;
    flex-shrink: 0;
}

.ut-submit-btn:hover:not(:disabled) {
    background: var(--primary-hover);
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
    transform: translateY(-1px);
}

.ut-submit-btn:active:not(:disabled) {
    transform: translateY(0);
    box-shadow: none;
}

.ut-submit-btn:disabled {
    opacity: 0.6;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Responsive — full-width drawer on small screens */
@media (max-width: 640px) {
    .ut-panel {
        width: 100vw;
        border-left: none;
        border-top: 1px solid var(--border);
        border-radius: 0.75rem 0.75rem 0 0;
        top: auto;
        bottom: 0;
        height: 92dvh;
        transform: translateY(100%);
    }
    .ut-drawer-overlay.visible .ut-panel {
        transform: translateY(0);
    }
    .ut-panel-body {
        padding: 1rem;
    }
    .ut-step-body {
        padding-left: 0;
    }
    .ut-dropzone-label {
        padding: 1.5rem 1rem;
        min-height: 7rem;
    }
}

/* ============================================
   WORKSPACE READINESS STATUS
   ============================================ */

.workspace-ready-status {
    display: flex;
    align-items: center;
    gap: 0.625rem;
    padding: 0.75rem 1rem;
    border-radius: var(--radius);
    font-size: 0.9375rem;
    font-weight: 500;
    margin: 0.75rem 0 1rem;
}

.workspace-ready-status--starting {
    background: #dbeafe;
    color: #1e40af;
    border: 1px solid #93c5fd;
}

.workspace-ready-status--ready {
    background: #d1fae5;
    color: #065f46;
    border: 1px solid #6ee7b7;
    flex-direction: column;
    align-items: flex-start;
}

.workspace-ready-status--ready .btn-workspace-connect {
    margin-left: 0;
    margin-top: 0.5rem;
    align-self: stretch;
    text-align: center;
}

.workspace-ready-status--error {
    background: #fee2e2;
    color: #991b1b;
    border: 1px solid #fca5a5;
}

.workspace-ready-status--paused {
    background: #fef3c7;
    color: #92400e;
    border: 1px solid #fcd34d;
}

.btn-workspace-resume {
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: #92400e;
}

.btn-workspace-resume:hover {
    background: #78350f;
}

.btn-workspace-resume:disabled {
    opacity: 0.6;
    cursor: wait;
}

.workspace-card-chip--paused {
    background: #fef3c7;
    color: #92400e;
}

.btn-workspace-connect {
    margin-left: auto;
    padding: 0.375rem 0.875rem;
    background: #065f46;
    color: white;
    border-radius: var(--radius);
    font-size: 0.875rem;
    font-weight: 600;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s;
}

.btn-workspace-connect:hover {
    background: #047857;
}

.workspace-status-spinner {
    display: inline-block;
    width: 1rem;
    height: 1rem;
    border: 2px solid currentColor;
    border-top-color: transparent;
    border-radius: 50%;
    flex-shrink: 0;
    animation: spin 0.8s linear infinite;
}

/* ============================================
   COLLAPSIBLE CREDENTIALS BOX
   ============================================ */

details.credentials-box {
    background: #f0f9ff;
    border: 2px solid var(--student-color);
    border-radius: var(--radius);
    padding: 0;
    margin-top: 1rem;
}

details.credentials-box summary {
    padding: 0.875rem 1.25rem;
    font-weight: 600;
    font-size: 1rem;
    color: #065f46;
    cursor: pointer;
    user-select: none;
    list-style: none;
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

details.credentials-box summary::-webkit-details-marker {
    display: none;
}

details.credentials-box summary::before {
    content: '▶';
    font-size: 0.75rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

details.credentials-box[open] summary::before {
    transform: rotate(90deg);
}

details.credentials-box summary:hover {
    background: #e6f7f0;
    border-radius: var(--radius);
}

details.credentials-box > :not(summary) {
    padding: 0 1.25rem;
}

details.credentials-box > :last-child {
    padding-bottom: 1.25rem;
}

.credential-item {
    margin-bottom: 0.875rem;
}

.credential-item label {
    font-weight: 600;
    color: var(--text);
    display: block;
    margin-bottom: 0.25rem;
    font-size: 0.875rem;
}

.credential-item .value {
    font-family: monospace;
    background: white;
    padding: 0.5rem;
    border-radius: var(--radius);
    word-break: break-all;
    border: 1px solid var(--border);
}

.credential-item .value a {
    color: #2563eb;
    text-decoration: underline;
}

/* Provider page tabs */
.provider-tabs {
    display: flex;
    border-bottom: 2px solid var(--border);
    margin-bottom: 2rem;
    gap: 0;
}

.provider-tab {
    padding: 0.75rem 1.5rem;
    background: none;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
}

.provider-tab:hover {
    color: var(--text);
}

.provider-tab.active {
    color: var(--primary-color);
    border-bottom-color: var(--primary-color);
    font-weight: 600;
}

.provider-tab-panel {
    display: none;
}

.provider-tab-panel.active {
    display: block;
}

/* Active item in header provider dropdown */
.header-dropdown-item.active {
    background: var(--surface);
    color: var(--primary-color);
    font-weight: 600;
}

/* ============================================
   UTILITY CLASSES
   ============================================ */

/* JS visibility toggle — use classList instead of .style.display */
.is-hidden {
    display: none !important;
}

/* Rotation toggle for chevron/arrow icons */
.rotate-up {
    transform: rotate(180deg);
}

/* Button size variants */
.btn-sm {
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}

.btn-xs {
    font-size: 0.75rem;
    padding: 0.2rem 0.5rem;
}

/* Inline spinner inside buttons */
.spinner-sm {
    width: 1.25rem;
    height: 1.25rem;
    margin: 0;
}

/* Adds gap to .btn when paired with a spinner child */
.btn-with-spinner {
    gap: 0.5rem;
}

/* Narrow number input (e.g. CPU/RAM filters) */
.input-narrow {
    width: 2.75rem;
    padding: 0.25rem 0.35rem;
    font-size: 0.875rem;
}

/* Small label variant */
.label-sm {
    font-size: 0.875rem;
}

/* Inline descriptive/hint text */
.hint-text {
    color: var(--text-light);
    font-size: 0.875rem;
}

/* Zero-margin-bottom modifier for .form-group */
.form-group--inline {
    margin-bottom: 0;
}

/* Large-margin-bottom modifier for .form-group */
.form-group--mb-lg {
    margin-bottom: 2rem;
}

/* Lighter background for header dropdown toggle (used in credentials page) */
.header-dropdown-toggle--light {
    background: rgba(255, 255, 255, 0.3);
}

/* Flex row for compact filter inputs */
.form-filter-row {
    display: flex;
    gap: 0.75rem;
    flex-wrap: wrap;
    align-items: flex-end;
}

/* Section heading + action button in a row */
.section-header-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.section-header-row h2 {
    margin: 0;
}

/* Page-level action toolbar */
.action-toolbar {
    display: flex;
    gap: 1rem;
    margin-bottom: 2rem;
    align-items: center;
    flex-wrap: wrap;
}

/* ============================================
   FLAVOR FILTERS PANEL
   ============================================ */

.flavor-filters-panel {
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.flavor-filters-header {
    padding: 0.5rem 0.75rem;
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
    cursor: pointer;
}

.flavor-filters-header-title {
    font-weight: 600;
    font-size: 0.9375rem;
}

.flavor-filters-body {
    padding: 0.75rem;
    border-top: 1px solid var(--border);
}

.flavor-filters-toggle,
.region-flavors-toggle {
    display: inline-block;
    transition: transform 0.2s;
    cursor: pointer;
}

/* ============================================
   REGION / FLAVOR COLLAPSIBLE SECTIONS
   ============================================ */

.region-flavors-section {
    margin-bottom: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.region-flavors-header {
    padding: 0.75rem 1rem;
    background: var(--surface);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.region-flavors-header-label {
    font-weight: 600;
    cursor: pointer;
    flex: 1;
}

.region-flavors-body {
    padding: 0.5rem;
}

/* ============================================
   OPTIONS TABLE (regions / flavors)
   ============================================ */

.options-table {
    width: 100%;
    border-collapse: collapse;
}

.options-table th {
    padding: 0.75rem;
    border-bottom: 2px solid var(--border);
    text-align: left;
    font-size: 0.875rem;
}

.options-table td {
    padding: 0.75rem;
    border-bottom: 1px solid var(--border);
}

.options-table .col-center {
    text-align: center;
    width: 100px;
}

.options-table .col-name {
    font-weight: 500;
}

.options-table .col-name-mono {
    font-weight: 500;
    font-family: monospace;
}

.options-table--compact th {
    padding: 0.5rem;
    border-bottom-width: 1px;
    font-size: 0.875rem;
}

.options-table--compact td {
    padding: 0.5rem;
}

.options-table--compact .col-name-mono {
    font-family: monospace;
    font-weight: 700;
}

/* Empty state action button spacing */
.empty-state-action {
    margin-top: 1.5rem;
}

/* "Add Template" button spacing in wizard */
.btn-add-template {
    margin-top: 0.5rem;
}

/* Workspace status badge row */
.workspace-badge-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

/* ============================================
   FEEDBACK PAGE (admin-feedback.html)
   ============================================ */

.feedback-page-container {
    max-width: 900px;
    margin: 0 auto;
    padding: 2rem 1rem;
}

.feedback-stats {
    display: flex;
    gap: 1.5rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.feedback-stat-card {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.75rem;
    flex: 1;
    min-width: 140px;
    text-align: center;
}

.feedback-stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: #4f46e5;
}

.feedback-stat-label {
    font-size: 0.85rem;
    color: var(--text-light);
    margin-top: 0.25rem;
}

.feedback-entry {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1rem;
}

.feedback-entry-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.feedback-entry-header-left {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.feedback-stars {
    color: var(--warning);
    font-size: 1.25rem;
    letter-spacing: 2px;
}

.feedback-difficulty {
    display: inline-block;
    padding: 0.2rem 0.75rem;
    border-radius: 999px;
    font-size: 0.8rem;
    font-weight: 600;
}

.diff-too-easy {
    background: #d1fae5;
    color: #065f46;
}

.diff-just-right {
    background: #dbeafe;
    color: #1e40af;
}

.diff-too-hard {
    background: #fee2e2;
    color: #991b1b;
}

.feedback-comment {
    color: var(--text);
    font-style: italic;
    margin-top: 0.5rem;
    white-space: pre-wrap;
}

.feedback-comment--empty {
    color: #9ca3af;
    font-style: normal;
}

.feedback-section-title {
    margin-bottom: 1rem;
    font-size: 1.1rem;
    color: var(--text);
}

.feedback-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
    margin-bottom: 1rem;
}

.feedback-section-header .feedback-section-title {
    margin-bottom: 0;
}

.audit-log-note {
    color: var(--text-light);
    font-size: 0.875rem;
    margin-bottom: 1.5rem;
}

.audit-table-wrapper {
    overflow-x: auto;
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.audit-table {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    background: var(--background);
}

.audit-table thead {
    background: var(--surface);
}

.audit-table th {
    padding: 0.75rem 1rem;
    text-align: left;
    font-weight: 600;
    color: var(--text);
    border-bottom: 2px solid var(--border);
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    white-space: nowrap;
}

.audit-table td {
    padding: 0.75rem 1rem;
    border-bottom: 1px solid var(--border);
    color: var(--text);
    font-size: 0.875rem;
}

.audit-table tbody tr:hover {
    background: var(--surface);
}

.audit-table tbody tr:last-child td {
    border-bottom: none;
}

.audit-role-badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: capitalize;
}

.audit-role-admin {
    background: var(--primary-color);
    color: #fff;
}

.audit-role-student {
    background: var(--secondary-color);
    color: #fff;
}

.audit-role-system {
    background: var(--border);
    color: var(--text);
}

.feedback-date {
    font-size: 0.8rem;
    color: #9ca3af;
}

.empty-state {
    text-align: center;
    padding: 3rem 1rem;
    color: var(--text-light);
}

.empty-state-icon {
    font-size: 3rem;
    display: block;
    margin-bottom: 1rem;
}

.lab-selector-form {
    display: flex;
    gap: 0.75rem;
    align-items: flex-end;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}

.lab-selector-form label {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text);
    display: block;
    margin-bottom: 0.3rem;
}

.lab-selector-form select {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    font-size: 0.95rem;
    min-width: 260px;
}

.lab-selector-form button {
    padding: 0.5rem 1.25rem;
    background: #4f46e5;
    color: #fff;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 0.95rem;
}

.lab-selector-form button:hover {
    background: #4338ca;
}

/* ============================================
   STATS PAGE (admin-stats.html)
   ============================================ */

.admin-content-narrow.stats-page {
    max-width: 1000px;
}

.stats-filters {
    display: flex;
    align-items: center;
    gap: 0.5rem 1rem;
    flex-wrap: wrap;
}

.stats-filter {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stats-filters label {
    font-size: 0.875rem;
    color: var(--text-light);
}

.stats-filters select {
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--border);
    border-radius: 6px;
    background: var(--background);
    color: var(--text);
    font: inherit;
    font-size: 0.875rem;
    max-width: 14rem;
}

.stats-filters select:focus-visible,
.stats-table a:focus-visible {
    outline: 2px solid var(--primary-color);
    outline-offset: 2px;
}

.stats-loading,
.stats-empty {
    color: var(--text-light);
}

.stats-section {
    margin-bottom: 2.5rem;
}

.stats-heading {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--text-light);
    margin: 0 0 0.75rem;
}

.stats-section-note {
    font-size: 0.875rem;
    color: var(--text-light);
    margin: -0.25rem 0 0.75rem;
    max-width: 70ch;
}

/* Right now: one sentence, set large — the answer before any chart. */
.stats-now-line {
    font-size: 1.75rem;
    line-height: 1.3;
    letter-spacing: -0.02em;
    color: var(--text);
    margin: 0;
}

.stats-now-line strong {
    font-weight: 700;
    font-variant-numeric: tabular-nums;
}

.stats-now-alert {
    margin: 0.75rem 0 0;
    padding: 0.625rem 0.875rem;
    border-left: 3px solid var(--error);
    background: #fee2e2;
    color: #991b1b;
    font-size: 0.9375rem;
    border-radius: 0 6px 6px 0;
}

/* Period figures: one panel split by dividers rather than separate cards,
   so the four numbers read as one answer. */
.stats-figures {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin: 0 0 1rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.stats-figure {
    padding: 1.125rem 1.25rem;
    border-left: 1px solid var(--border);
}

.stats-figure:first-child {
    border-left: none;
}

.stats-figure dt {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
}

.stats-figure dd {
    margin: 0;
}

.stats-figure-value {
    font-size: 2rem;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.02em;
    font-variant-numeric: tabular-nums;
    color: var(--text);
    margin: 0.25rem 0;
}

.stats-figure-help {
    font-size: 0.8125rem;
    line-height: 1.4;
    color: var(--text-light);
}

.stats-chart {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
}

.stats-chart-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text);
    margin: 0 0 1rem;
}

.stats-chart-canvas {
    position: relative;
    height: 220px;
}

.stats-chart .stats-empty {
    margin: 0;
}

.stats-table-wrapper {
    overflow-x: auto;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: 10px;
}

.stats-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9375rem;
}

.stats-table th,
.stats-table td {
    padding: 0.625rem 0.875rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}

.stats-table th {
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text-light);
}

.stats-table tbody tr:last-child td {
    border-bottom: none;
}

.stats-table a {
    color: var(--primary-color);
    text-decoration: none;
    font-weight: 500;
}

.stats-table a:hover {
    text-decoration: underline;
}

.stats-table .stats-col-num {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.stats-table .stats-col-date {
    color: var(--text-light);
    font-variant-numeric: tabular-nums;
}

.stats-status {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 999px;
    font-size: 0.8125rem;
    font-weight: 600;
    background: #f3f4f6;
    color: #4b5563;
}

.stats-status-completed {
    background: #d1fae5;
    color: #065f46;
}

.stats-status-failed {
    background: #fee2e2;
    color: #991b1b;
}

@media (max-width: 900px) {
    .stats-figures {
        grid-template-columns: repeat(2, 1fr);
    }

    .stats-figure:nth-child(odd) {
        border-left: none;
    }

    .stats-figure:nth-child(n+3) {
        border-top: 1px solid var(--border);
    }
}

@media (max-width: 640px) {
    .stats-now-line {
        font-size: 1.375rem;
    }
}

/* ============================================
   STUDENT FEEDBACK PAGE (student-feedback.html)
   ============================================ */

.star-rating {
    display: flex;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 0.25rem;
}

.star-rating input {
    display: none;
}

.star-rating label {
    font-size: 2.5rem;
    cursor: pointer;
    color: #ccc;
    transition: color 0.15s, transform 0.1s;
}

.star-rating label:hover {
    transform: scale(1.15);
}

.star-rating-wrapper {
    display: flex;
    flex-direction: column;
    gap: 0.375rem;
}

.star-rating-label {
    font-size: 0.875rem;
    color: var(--text-light);
    font-style: italic;
    min-height: 1.25rem;
}

.star-rating input:checked ~ label,
.star-rating label:hover,
.star-rating label:hover ~ label {
    color: var(--warning);
}

.difficulty-group {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 0.5rem;
}

.difficulty-option {
    flex: 1;
    min-width: 80px;
}

.difficulty-option input {
    display: none;
}

.difficulty-option label {
    display: block;
    text-align: center;
    padding: 0.6rem 0.4rem;
    border: 2px solid var(--border);
    border-radius: 8px;
    cursor: pointer;
    font-size: 0.85rem;
    transition: all 0.15s;
}

.difficulty-option input:checked + label {
    border-color: #6366f1;
    background: #eef2ff;
    color: #4338ca;
    font-weight: 600;
}

.difficulty-option label:hover {
    border-color: #6366f1;
}

@media (max-width: 480px) {
    .difficulty-group {
        grid-template-columns: repeat(3, 1fr);
    }
}

@keyframes toastIn {
    from { opacity: 0; transform: translateY(-12px); }
    to   { opacity: 1; transform: translateY(0); }
}

@keyframes toastOut {
    0%, 70% { opacity: 1; }
    100%     { opacity: 0; pointer-events: none; }
}

.toast {
    position: fixed;
    top: 1.5rem;
    right: 1.5rem;
    z-index: 9999;
    min-width: 280px;
    max-width: 380px;
    border-radius: 10px;
    padding: 1rem 1.25rem;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    display: flex;
    align-items: center;
    gap: 0.75rem;
    font-size: 0.95rem;
    font-weight: 500;
    animation: toastIn 0.25s ease, toastOut 3.5s 0.5s forwards;
}

/* Server-side rendered toast (non-animated, inline) */
.toast--inline {
    position: static;
    animation: none;
    margin-bottom: 1rem;
}

.toast-success {
    background: #d1fae5;
    border: 1px solid #6ee7b7;
    color: #065f46;
}

.toast-error {
    background: #fee2e2;
    border: 1px solid #fca5a5;
    color: #991b1b;
}

.toast-icon {
    font-size: 1.4rem;
    flex-shrink: 0;
}

/* ============================================
   WORKSPACE TEMPLATES YAML EDITOR
   ============================================ */

.templates-yaml-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.5rem;
}

.templates-yaml-actions {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

.templates-yaml-validation:empty {
    display: none;
}

/* Validation results must stay put and readable while the admin fixes the YAML;
   the default toast is fixed-position and self-dismissing. */
.templates-yaml-validation .toast {
    position: static;
    animation: none;
    max-width: none;
    margin-top: 0.75rem;
}

/* ============================================
   DEVCONTAINER IMPORT
   ============================================ */

.devcontainer-import {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 1.25rem;
    margin-bottom: 1rem;
    background: var(--surface);
}

.devcontainer-import-intro {
    margin: 0 0 1rem;
    font-size: 0.9rem;
    color: var(--text-light);
    line-height: 1.5;
}

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

/* Calls out that Import gates the wizard, so the admin does not fill the fields
   and click Next expecting to have moved on. */
.devcontainer-import-hint {
    margin: 0.5rem 0 0;
    font-size: 0.85rem;
    color: var(--text-light);
}

.devcontainer-import-result:empty {
    display: none;
}

.devcontainer-import-result .toast {
    position: static;
    animation: none;
    max-width: none;
    margin-top: 0.75rem;
}

.devcontainer-import-note {
    margin: 0.75rem 0 0.25rem;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* The warnings are the reason to import rather than hand-write: they must read as
   a checklist, not as decoration. */
.devcontainer-import-warnings {
    margin: 0;
    padding-left: 1.25rem;
    font-size: 0.85rem;
    color: #92400e;
    line-height: 1.6;
}

.devcontainer-import-warnings code,
.devcontainer-import-note code,
.devcontainer-import-intro code {
    background: var(--border);
    border-radius: 4px;
    padding: 0.1rem 0.3rem;
    font-size: 0.9em;
}

/* ============================================
   UTILITY
   ============================================ */

.label-invisible {
    visibility: hidden;
}

.file-input-hidden {
    display: none;
}

/* ============================================
   ADMIN SIDEBAR LAYOUT
   ============================================ */

:root {
    --sidebar-width: 220px;
}

body.admin-page {
    padding: 0;
    padding-bottom: 0;
    background: var(--surface);
    display: flex;
    min-height: 100vh;
}

.admin-layout {
    display: flex;
    width: 100%;
    min-height: 100vh;
}

.admin-sidebar {
    width: var(--sidebar-width);
    background: #0f172a;
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    z-index: 200;
    border-right: 1px solid rgba(255, 255, 255, 0.06);
}

.admin-sidebar-brand {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.125rem 1rem;
    text-decoration: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
    flex-shrink: 0;
}

.admin-sidebar-logo {
    width: 1.75rem;
    height: 1.75rem;
    object-fit: contain;
    flex-shrink: 0;
}

.admin-sidebar-name {
    font-size: 0.9375rem;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: -0.02em;
    white-space: nowrap;
}

.admin-sidebar-nav {
    flex: 1;
    padding: 0.625rem 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
}

.admin-nav-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5625rem 1rem;
    color: #94a3b8;
    text-decoration: none;
    font-size: 0.875rem;
    font-weight: 500;
    transition: background 0.15s, color 0.15s, border-color 0.15s;
    border-left: 3px solid transparent;
    background: none;
    border-top: none;
    border-right: none;
    border-bottom: none;
    width: 100%;
    text-align: left;
    font-family: inherit;
    line-height: 1.5;
    cursor: pointer;
}

.admin-nav-item:hover {
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    border-left-color: rgba(59, 130, 246, 0.4);
}

.admin-nav-item.active {
    background: rgba(59, 130, 246, 0.12);
    color: #ffffff;
    font-weight: 600;
    border-left-color: #3b82f6;
}

.admin-nav-icon {
    font-size: 1rem;
    flex-shrink: 0;
    width: 1.25rem;
    text-align: center;
    line-height: 1;
}

.admin-nav-label {
    flex: 1;
    white-space: nowrap;
}

.admin-nav-divider {
    height: 1px;
    background: rgba(255, 255, 255, 0.06);
    margin: 0.375rem 0;
    flex-shrink: 0;
}

.admin-nav-group-label {
    padding: 0.5rem 1rem 0.125rem;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #475569;
}

.admin-nav-sub-item {
    padding-left: 2.25rem;
    font-size: 0.8125rem;
}

.admin-sidebar-footer {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding: 0.5rem 0;
    flex-shrink: 0;
}

.admin-sidebar-copyright {
    padding: 0.25rem 1rem 0.5rem;
    font-size: 0.6875rem;
    color: #475569;
    white-space: nowrap;
}

.admin-sidebar-footer .admin-nav-item:hover {
    color: #fca5a5;
    background: rgba(239, 68, 68, 0.08);
    border-left-color: rgba(239, 68, 68, 0.4);
}

/* Main content area */
.admin-main {
    margin-left: var(--sidebar-width);
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    min-width: 0;
}

.admin-page-header {
    background: var(--background);
    border-bottom: 1px solid var(--border);
    padding: 1rem 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    position: sticky;
    top: 0;
    z-index: 100;
    flex-shrink: 0;
}

.admin-page-header h1 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.admin-page-header-actions {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

/* Wizard progress embedded in the page header — compact, no background */
.admin-page-header .wizard-progress {
    background: transparent;
    border: none;
    margin: 0;
    padding: 0 0.5rem;
    flex: 1;
    max-width: 640px;
}

.admin-page-header .wizard-progress::before {
    top: 50%;
    transform: translateY(-50%);
    left: 0.75rem;
    right: 0.75rem;
}

.admin-page-header .step-number {
    width: 30px;
    height: 30px;
    font-size: 0.8rem;
}

.admin-page-header .step-label {
    font-size: 0.65rem;
    margin-top: 0.3rem;
}

.admin-page-body {
    flex: 1;
    padding: 2rem;
    padding-bottom: 100px;
    background: var(--surface);
}

.admin-content-narrow {
    max-width: 860px;
    margin: 0 auto;
}

/* Fix wizard sticky footer when sidebar is present */
body.admin-page .wizard-footer {
    left: var(--sidebar-width);
}

/* Collapsed sidebar at medium width */
@media (max-width: 1024px) {
    :root {
        --sidebar-width: 60px;
    }

    .admin-sidebar-name,
    .admin-nav-label,
    .admin-sidebar-copyright {
        display: none;
    }

    .admin-sidebar-brand {
        justify-content: center;
        padding: 1rem;
    }

    .admin-nav-item {
        justify-content: center;
        padding: 0.625rem;
        border-left: none;
        border-radius: 0.375rem;
        margin: 0 0.25rem;
        width: calc(100% - 0.5rem);
    }

    .admin-nav-item:hover {
        border-left-color: transparent;
    }

    .admin-nav-item.active {
        border-left-color: transparent;
        background: rgba(59, 130, 246, 0.2);
    }

    .admin-nav-icon {
        width: auto;
        font-size: 1.125rem;
    }

    .admin-nav-divider {
        margin: 0.25rem 0.5rem;
    }

    .admin-page-header {
        padding: 1rem 1.5rem;
    }

    .admin-page-body {
        padding: 1.5rem;
    }
}

/* Mobile: hide sidebar, full-width content */
@media (max-width: 640px) {
    :root {
        --sidebar-width: 0px;
    }

    .admin-sidebar {
        display: none;
    }

    .admin-main {
        margin-left: 0;
    }

    body.admin-page .wizard-footer {
        left: 0;
    }

    .admin-page-header {
        padding: 0.875rem 1rem;
        flex-wrap: wrap;
        gap: 0.5rem;
    }

    .admin-page-header .wizard-progress {
        max-width: 100%;
        flex-basis: 100%;
        padding: 0;
    }

    .admin-page-header .step-label {
        display: none;
    }

    .admin-page-body {
        padding: 1rem;
    }
}

/* ============================================
   ADVANCED COLLAPSIBLE SECTION (wizard)
   ============================================ */

.advanced-section {
    margin-top: 1.5rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}

.advanced-section > summary {
    padding: 0.625rem 1rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-light);
    cursor: pointer;
    user-select: none;
    list-style: none;
    background: var(--surface);
    display: flex;
    align-items: center;
    gap: 0.5rem;
    transition: background 0.15s, color 0.15s;
}

.advanced-section > summary::-webkit-details-marker {
    display: none;
}

.advanced-section > summary::before {
    content: '▶';
    font-size: 0.625rem;
    transition: transform 0.2s;
    flex-shrink: 0;
}

.advanced-section[open] > summary::before {
    transform: rotate(90deg);
}

.advanced-section > summary:hover {
    background: var(--border);
    color: var(--text);
}

.advanced-section-body {
    padding: 1.25rem;
    border-top: 1px solid var(--border);
}

/* ============================================
   LABS LIST TABLE OVERRIDES (labs-list.html)
   ============================================ */

/* Override column widths for the 7-column labs list layout */
.labs-page-container .labs-table {
    min-width: 780px;
}

.labs-page-container .labs-table th:first-child,
.labs-page-container .labs-table td:first-child {
    width: 110px;
    min-width: 110px;
    text-align: left;
}

.labs-page-container .labs-table th:nth-child(2),
.labs-page-container .labs-table td:nth-child(2) {
    width: auto;
    min-width: 120px;
}

.labs-page-container .labs-table th:nth-child(3),
.labs-page-container .labs-table td:nth-child(3) {
    width: 160px;
    min-width: 160px;
}

.labs-page-container .labs-table th:nth-child(4),
.labs-page-container .labs-table td:nth-child(4) {
    width: 80px;
    min-width: 80px;
}

.labs-page-container .labs-table th:nth-child(5),
.labs-page-container .labs-table td:nth-child(5) {
    width: 160px;
    min-width: 160px;
}

.labs-page-container .labs-table th:nth-child(6),
.labs-page-container .labs-table td:nth-child(6) {
    width: 160px;
    min-width: 160px;
    text-align: right;
}

/* Row status left-border accent */
.labs-table .lab-row-status-completed td:first-child { border-left: 3px solid var(--success); }
.labs-table .lab-row-status-running td:first-child    { border-left: 3px solid var(--primary-color); }
.labs-table .lab-row-status-pending td:first-child    { border-left: 3px solid var(--warning); }
.labs-table .lab-row-status-failed td:first-child     { border-left: 3px solid var(--error); }
.labs-table .lab-row-status-destroyed td:first-child  { border-left: 3px solid var(--border); }
.labs-table .lab-row-status-dry-run-completed td:first-child { border-left: 3px solid var(--secondary-color); }

/* Compact status + type badges in table row */
.lab-row-badges {
    display: flex;
    align-items: center;
    gap: 0.375rem;
}

.labs-page-container .labs-table .status-badge {
    padding: 0.2rem 0.4rem;
    font-size: 0.875rem;
    min-width: 1.75rem;
    height: 1.75rem;
    line-height: 1;
    margin-bottom: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.labs-page-container .labs-table .lab-type-badge {
    width: 1.75rem;
    height: 1.75rem;
    font-size: 0.875rem;
}

/* Name column */
.lab-name {
    font-weight: 500;
    color: var(--text);
}

.lab-name-empty {
    color: var(--text-light);
}

.lab-description {
    display: block;
    margin-top: 0.25rem;
    font-size: 0.8125rem;
    color: var(--text-light);
    max-width: 22rem;
    white-space: normal;
    overflow-wrap: anywhere;
}

/* Date column */
.lab-col-date {
    white-space: nowrap;
    font-size: 0.875rem;
    color: var(--text-light);
}

/* Cleanup pill */
.lab-cleanup-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: #d1fae5;
    color: #065f46;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 600;
}

/* Deletion date pill (compact, table variant) */
.lab-deletion-badge-sm {
    display: inline-flex;
    align-items: center;
    padding: 0.2rem 0.5rem;
    background: #fffbeb;
    border: 1px solid #fde68a;
    color: #92400e;
    border-radius: 0.25rem;
    font-size: 0.75rem;
    font-weight: 500;
    white-space: nowrap;
}

/* Actions cell */
.lab-col-actions-cell {
    text-align: right;
    padding-right: 1rem;
}

.col-actions-header {
    text-align: right;
}

/* Inline icon buttons in Actions column */
.lab-row-actions-inline {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.375rem;
    flex-wrap: nowrap;
}

.lab-row-actions-inline .btn-icon-only {
    width: 2.25rem;
    height: 2.25rem;
    padding: 0;
    flex-shrink: 0;
    position: relative;
}

.lab-row-actions-inline .btn-icon-only .icon {
    width: 1.125rem;
    height: 1.125rem;
}

/* Lab credentials panel (registry / git tokens) */
.secrets-section {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1rem 1.5rem;
    margin-bottom: 1.5rem;
}

.secrets-summary {
    cursor: pointer;
    display: flex;
    align-items: baseline;
    gap: 0.75rem;
    font-weight: 600;
    list-style: none;
}

.secrets-summary::-webkit-details-marker {
    display: none;
}

.secrets-summary::after {
    content: "▸";
    margin-left: auto;
    align-self: center;
    font-size: 0.75rem;
    color: var(--text-light);
}

details[open] > .secrets-summary::after {
    content: "▾";
}

.secrets-summary-title {
    font-size: 1rem;
}

.secrets-summary-hint {
    font-weight: 400;
    font-size: 0.85rem;
    opacity: 0.7;
}

.secrets-intro {
    font-size: 0.85rem;
    opacity: 0.8;
    margin: 1rem 0;
    max-width: 70ch;
    line-height: 1.5;
}

.secrets-intro code {
    background: var(--background);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.secrets-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.secrets-empty {
    font-size: 0.85rem;
    opacity: 0.7;
    margin: 0.5rem 0 1rem;
}

.secret-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 0.6rem 0.9rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.secret-name {
    font-weight: 600;
}

.secret-kind {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    padding: 0.1rem 0.5rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    opacity: 0.8;
}

.secret-servers,
.secret-username {
    font-size: 0.85rem;
    opacity: 0.75;
}

/* The reference an admin copies into their template. */
.secret-ref {
    margin-left: auto;
    font-size: 0.8rem;
    background: var(--surface);
    border: 1px solid var(--border);
    padding: 0.15rem 0.45rem;
    border-radius: 4px;
    white-space: nowrap;
}

.secrets-form {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border);
}

.secrets-form-row {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.secrets-form-row label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    opacity: 0.7;
}

.secrets-form-row input,
.secrets-form-row select {
    padding: 0.45rem 0.6rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
    color: inherit;
    font-size: 0.9rem;
}

/* Wizard credentials (registry / git tokens entered during lab creation) */
.wizard-credentials {
    margin: 1.5rem 0;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.wizard-credentials-title {
    font-weight: 600;
}

.wizard-credentials-hint {
    font-size: 0.8rem;
    color: var(--text-light);
    font-weight: 400;
}

.wizard-credentials-intro {
    font-size: 0.85rem;
    opacity: 0.8;
    max-width: 70ch;
    line-height: 1.5;
    margin: 0.5rem 0 1rem;
}

.wizard-credentials-intro code {
    background: var(--background);
    padding: 0.1rem 0.35rem;
    border-radius: 4px;
}

.credential-row {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: 0.75rem;
    padding: 0.9rem;
    margin-bottom: 0.75rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.credential-row .form-group {
    margin-bottom: 0;
}

/* Recreate prompt rows: the credential name is a title, its fields stacked below. */
.credential-row-stacked {
    flex-direction: column;
    align-items: stretch;
}

.credential-row-title {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.25rem;
}

.credential-row-stacked .form-group input {
    width: 100%;
}

/* Explanatory note for the recreate prompt's reschedule-deletion section */
.recreate-deletion-note {
    font-size: 0.8rem;
    opacity: 0.8;
    line-height: 1.5;
    margin: 0 0 0.75rem;
}

/* Pending credentials banner in the lab secrets panel */
.secrets-pending {
    padding: 0.6rem 0.9rem;
    margin-bottom: 1rem;
    border-radius: var(--radius);
    background: color-mix(in srgb, var(--error) 12%, transparent);
    border: 1px solid var(--error);
    font-size: 0.85rem;
}

/* Recreate credential prompt actions */
.credentials-modal-actions {
    display: flex;
    gap: 0.75rem;
    margin-top: 1rem;
}

/* Templates on this lab panel (workspaces page) */
.templates-panel {
    margin: 1.25rem 0;
    padding: 1rem 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.templates-panel-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.75rem;
}

.templates-panel-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
    margin: 0;
}

.templates-panel-hint {
    font-size: 0.8rem;
    color: var(--text-light);
}

.templates-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 0.75rem;
}

.template-status-card {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.85rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.template-status-main {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.template-bake-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.template-bake-status .status-badge {
    margin-bottom: 0;
    padding: 0.2rem 0.55rem;
    font-size: 0.75rem;
}

.template-status-info {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.template-status-name {
    font-weight: 600;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-status-description {
    font-size: 0.8rem;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-status-meta {
    font-size: 0.78rem;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.template-run-badge {
    flex-shrink: 0;
    padding: 0.2rem 0.55rem;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.template-run-badge.is-running {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success-hover);
}

.template-run-badge.is-idle {
    background: var(--surface);
    color: var(--text-light);
    border: 1px solid var(--border);
}

/* Remove a template: a quiet button that opens a confirmation inside the card,
   which also turns the card's border red while it's open. */
.template-remove-row {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 0.5rem;
    margin-top: auto; /* stays at the bottom when grid rows stretch the card */
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
}

.template-remove-confirm {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--error);
    background: color-mix(in srgb, var(--error) 6%, transparent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.template-status-card.is-confirming {
    border-color: var(--error);
}

/* An open confirmation makes its card tall; don't stretch its neighbours to match. */
.templates-grid:has(.is-confirming) {
    align-items: start;
}

.template-status-card.is-confirming .template-remove-row {
    display: none;
}

.template-status-card.is-confirming .template-remove-confirm {
    display: flex;
}

.template-remove-text {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text);
}

.template-remove-owners {
    margin: 0;
    padding-left: 1.1rem;
    font-size: 0.8rem;
    color: var(--text-light);
    max-height: 7.5rem;
    overflow-y: auto;
    overflow-wrap: anywhere;
}

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

@media (prefers-reduced-motion: no-preference) {
    .template-status-card.is-confirming .template-remove-confirm {
        animation: template-remove-reveal 160ms ease-out;
    }
}

@keyframes template-remove-reveal {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: translateY(0); }
}

/* Promote a template to another lab: the same in-card panel as the remove
   confirmation, in the primary colour since nothing is deleted. */
.template-promote-panel {
    display: none;
    flex-direction: column;
    gap: 0.5rem;
    padding: 0.6rem 0.75rem;
    border-left: 3px solid var(--primary-color);
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    border-radius: 0 var(--radius) var(--radius) 0;
}

.template-status-card.is-promoting {
    border-color: var(--primary-color);
}

.templates-grid:has(.is-promoting) {
    align-items: start;
}

.template-status-card.is-promoting .template-remove-row {
    display: none;
}

.template-status-card.is-promoting .template-promote-panel {
    display: flex;
}

.template-promote-panel .secrets-form-row label {
    display: flex;
    flex-direction: column;
    gap: 0.3rem;
}

.template-promote-panel .secrets-form-row input,
.template-promote-panel .secrets-form-row select {
    width: 100%;
    text-transform: none;
    letter-spacing: normal;
}

.template-promote-bake {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    font-size: 0.82rem;
    color: var(--text);
}

.template-promote-result {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.template-promote-result > div {
    margin-bottom: 0;
    padding: 0.5rem 0.7rem;
    font-size: 0.82rem;
    overflow-wrap: anywhere;
}

.template-promote-result h3 {
    margin: 0 0 0.25rem;
    font-size: 0.85rem;
}

.template-promote-result p {
    margin: 0;
}

/* Closed to new students: a dashed outline is the one sign for "closed", on the
   lab badge, the lab strip, the template card and the student picker tile. It
   stays clear of amber (pending, expiring) and grey fill (destroyed); a closed
   template's running count keeps its green because those workspaces are alive. */
.lab-closed-badge,
.template-closed-badge {
    display: inline-block;
    flex-shrink: 0;
    padding: 0.15rem 0.55rem;
    border: 1px dashed var(--secondary-color);
    border-radius: 999px;
    background: var(--background);
    color: var(--text-light);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
    vertical-align: middle;
}

.lab-name + .lab-closed-badge {
    margin-left: 0.4rem;
}

.template-status-card.is-closed {
    border-style: dashed;
    border-color: var(--secondary-color);
    background: var(--surface);
}

.template-status-card.is-closed .template-status-name {
    color: var(--text-light);
}

.template-status-card.is-closed .template-status-main {
    flex-wrap: wrap;
}

.template-closed-note {
    margin: 0;
    font-size: 0.8rem;
    color: var(--text-light);
}

.lab-access-strip {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 1rem;
    padding: 0.75rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--background);
}

/* is-off is the same look for a strip whose feature is simply not in use (a lab
   without its own student portal), kept apart from is-closed, which means
   closed to new students. */
.lab-access-strip.is-closed,
.lab-access-strip.is-off {
    border-style: dashed;
    border-color: var(--secondary-color);
    background: var(--surface);
}

.lab-access-text {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    min-width: 0;
}

.lab-access-state {
    font-weight: 600;
    color: var(--text);
}

.lab-access-hint {
    font-size: 0.82rem;
    color: var(--text-light);
}

/* On the Overview tab the strip follows the config grid, which ends flush. */
.lab-detail-config-grid + .lab-access-strip {
    margin-top: 1.25rem;
}

/* Several actions on one strip (the student portal's redeploy / remove). */
.lab-access-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.template-tile.is-closed {
    border-style: dashed;
}

.template-tile-closed-note {
    font-size: 0.8rem;
    color: var(--text-light);
}

.templates-unattributed-note {
    margin: 0.75rem 0 0;
    font-size: 0.8rem;
    color: var(--text-light);
}

.workspace-history-toolbar {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.workspace-history-toolbar .icon {
    width: 1rem;
    height: 1rem;
    stroke-width: 2;
}

.workspace-history-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-height: 24rem;
    overflow-y: auto;
}

.workspace-history-row {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.6rem 0.85rem;
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
}

.workspace-history-badge {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 0.9rem;
    line-height: 1;
}

.workspace-history-badge.is-created {
    background: color-mix(in srgb, var(--success) 15%, transparent);
    color: var(--success-hover);
}

.workspace-history-badge.is-deleted {
    background: color-mix(in srgb, var(--error) 12%, transparent);
    color: var(--error);
}

.workspace-history-main {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}

.workspace-history-name {
    font-weight: 600;
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-history-meta {
    font-size: 0.78rem;
    color: var(--text-light);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workspace-history-action {
    flex-shrink: 0;
    width: 4.5rem;
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-light);
}

.workspace-history-time {
    flex-shrink: 0;
    font-size: 0.78rem;
    color: var(--text-light);
    white-space: nowrap;
}

@media (max-width: 640px) {
    .workspace-history-row {
        flex-wrap: wrap;
    }

    .workspace-history-action,
    .workspace-history-time {
        width: auto;
    }
}

/* ============================================
   LAB DETAIL PAGE (lab-detail.html)
   ============================================ */

.lab-detail-container {
    max-width: 1400px;
}

.lab-detail-description {
    display: block;
    margin-top: 0.375rem;
    font-size: 0.9375rem;
    color: var(--text-light);
    font-weight: 400;
}

.lab-detail-header-badges {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    margin-left: 0.75rem;
    vertical-align: middle;
}

/* Lifecycle strip: a small horizontal timeline of created -> running ->
   completed -> cleanup sweeps -> scheduled/actual destruction. */
.lab-lifecycle-strip {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin: 1.5rem 0 2rem;
    padding: 1.25rem 1.5rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow-x: auto;
}

.lab-lifecycle-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex: 1;
    min-width: 7rem;
    position: relative;
}

.lab-lifecycle-point::before {
    content: "";
    position: absolute;
    top: 0.5rem;
    left: -50%;
    width: 100%;
    height: 2px;
    background: var(--border);
    z-index: 0;
}

.lab-lifecycle-point:first-child::before {
    display: none;
}

.lab-lifecycle-dot {
    width: 1.125rem;
    height: 1.125rem;
    border-radius: 50%;
    background: var(--border);
    border: 2px solid var(--surface);
    box-shadow: 0 0 0 2px var(--border);
    z-index: 1;
}

.lab-lifecycle-point.is-done .lab-lifecycle-dot {
    background: var(--success);
    box-shadow: 0 0 0 2px var(--success);
}

.lab-lifecycle-point.is-current .lab-lifecycle-dot {
    background: var(--primary-color);
    box-shadow: 0 0 0 2px var(--primary-color);
}

.lab-lifecycle-point.is-danger .lab-lifecycle-dot {
    background: var(--error);
    box-shadow: 0 0 0 2px var(--error);
}

.lab-lifecycle-label {
    margin-top: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--text);
    text-align: center;
}

.lab-lifecycle-time {
    margin-top: 0.125rem;
    font-size: 0.75rem;
    color: var(--text-light);
    text-align: center;
    white-space: nowrap;
}

/* Page-level tabs (Overview / Progress / Workspaces & Templates / Feedback /
   Lifecycle & Cleanup / Activity / Danger Zone) — a segmented-control style
   pill group, echoing the icon+label vocabulary already used in the admin
   sidebar (admin-nav-icon/admin-nav-label). Danger Zone sits after a hairline
   divider inside the same group, so it reads as deliberately set apart
   rather than an unexplained gap in the row. */
.lab-detail-tabs {
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    gap: 0.125rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 0.3rem;
    margin-bottom: 1.5rem;
}

.lab-detail-tab {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.875rem;
    border: none;
    border-radius: calc(var(--radius) - 0.15rem);
    background: transparent;
    font: inherit;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--text-light);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    white-space: nowrap;
}

.lab-detail-tab-icon {
    font-size: 1rem;
    line-height: 1;
}

.lab-detail-tab:hover {
    color: var(--text);
    background: rgba(37, 99, 235, 0.08);
}

.lab-detail-tab.is-active {
    color: var(--primary-color);
    background: var(--background);
    box-shadow: var(--shadow);
}

.lab-detail-tabs-divider {
    width: 1px;
    align-self: stretch;
    margin: 0.25rem 0.25rem 0.25rem auto;
    background: var(--border);
}

.lab-detail-tab.is-danger {
    color: var(--error);
}

.lab-detail-tab.is-danger:hover {
    color: var(--error);
    background: #fef2f2;
}

.lab-detail-tab.is-danger.is-active {
    color: var(--error);
    background: #fef2f2;
    box-shadow: var(--shadow);
}

/* Section cards */
.lab-detail-section {
    background: var(--background);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
    scroll-margin-top: 1rem;
}

.lab-detail-section-title {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--text);
    margin-bottom: 1rem;
}

.lab-detail-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1rem;
}

.lab-detail-section-header .lab-detail-section-title {
    margin-bottom: 0;
}

.lab-detail-section--danger {
    border-color: #fecaca;
    background: #fffafa;
}

.lab-detail-section--danger .lab-detail-section-title {
    color: var(--error);
}

.lab-detail-danger-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

/* Overview config grid */
.lab-detail-config-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
    gap: 1rem;
}

.lab-detail-config-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.lab-detail-config-label {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: var(--text-light);
}

.lab-detail-config-value {
    font-size: 0.9375rem;
    color: var(--text);
    word-break: break-word;
}

.lab-detail-config-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1.25rem;
    margin-bottom: 1.5rem;
}

/* Lifecycle & Cleanup / Activity history tables */
.lab-detail-history-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.875rem;
    margin-top: 0.75rem;
}

.lab-detail-history-table th,
.lab-detail-history-table td {
    padding: 0.5rem 0.75rem;
    text-align: left;
    border-bottom: 1px solid var(--border);
}

.lab-detail-history-table th {
    color: var(--text-light);
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}

/* Feedback summary */
.lab-detail-feedback-summary {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-bottom: 1rem;
}

.lab-detail-feedback-rating {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
}

.lab-detail-feedback-count {
    font-size: 0.875rem;
    color: var(--text-light);
}

.lab-detail-feedback-entry {
    padding: 0.75rem 0;
    border-bottom: 1px solid var(--border);
}

.lab-detail-feedback-entry:last-child {
    border-bottom: none;
}

.lab-detail-feedback-stars {
    color: #f59e0b;
    letter-spacing: 0.1em;
}

@media (max-width: 640px) {
    .lab-lifecycle-strip {
        flex-direction: column;
        gap: 1.5rem;
    }

    .lab-lifecycle-point::before {
        display: none;
    }
}

/* DNS profiles page: Edit / Delete side by side in a table cell */
.options-table .col-actions {
    text-align: center;
    width: 170px;
}

.dns-profile-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.dns-profile-actions form {
    margin: 0;
}

/* Cluster profiles page: same Edit / Delete pairing */
.cluster-profile-actions {
    display: flex;
    gap: 0.5rem;
    justify-content: center;
    align-items: center;
}

.cluster-profile-actions form {
    margin: 0;
}

/* Credential storage card: stacked forms need breathing room */
.credential-storage form + form,
.credential-storage details {
    margin-top: 1rem;
}

/* Workspace handoff page (OpenChamber): the password is shown for the student to
   copy, since EasyLab cannot post it to a login endpoint the way it does for
   code-server. Served standalone by OpenWorkspace, outside the base template. */
.workspace-handoff {
    max-width: 32rem;
    margin: 4rem auto;
    padding: 0 1rem;
}

.workspace-handoff-token {
    width: 100%;
    font-family: 'JetBrains Mono', 'Monaco', 'Menlo', monospace;
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: 0.375rem;
    background: var(--surface);
    color: var(--text);
}

.workspace-handoff-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 1rem;
}

/* ============================================
   STUDENT NOTIFICATIONS (admin → student messages)
   ============================================ */

/* The bell in the student header asks for desktop-notification permission and
   shows whether it was granted. */
.student-notify-bell {
    cursor: pointer;
    background: none;
    border: none;
}

.student-notify-bell--granted {
    color: var(--student-color);
}

.student-notify-bell--denied,
.student-notify-bell.is-unavailable {
    opacity: 0.45;
}

/* The on-page banners, stacked under the header. Hidden by JS while empty. */
.student-notifications {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    max-width: 1100px;
    margin: 1rem auto 0;
    padding: 0 1rem;
}

.student-notification {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-radius: var(--radius);
    padding: 0.85rem 1.1rem;
    font-size: 0.95rem;
    background: #dbeafe;
    border: 1px solid #93c5fd;
    color: #1e3a8a;
}

.student-notification--warning {
    background: #fef3c7;
    border-color: #fcd34d;
    color: #92400e;
}

.student-notification-icon {
    font-size: 1.25rem;
    flex-shrink: 0;
}

.student-notification-text {
    line-height: 1.45;
}

/* ============================================
   LAB DETAIL — NOTIFY TAB
   ============================================ */

.lab-notify-intro {
    color: var(--text-light);
    font-size: 0.9rem;
    line-height: 1.6;
    margin-bottom: 1.25rem;
    max-width: 70ch;
}

.lab-notify-form {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.25rem;
    margin-bottom: 1.75rem;
}

.lab-notify-form textarea {
    width: 100%;
    font-family: inherit;
    font-size: 0.95rem;
    padding: 0.6rem 0.75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    resize: vertical;
}

.lab-notify-form-row {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.lab-notify-form-row .form-group {
    flex: 1 1 200px;
}

.lab-notify-list-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: 0.75rem;
}

.lab-notify-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.lab-notify-empty {
    color: var(--text-light);
    font-size: 0.9rem;
}

.lab-notify-item {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 0.35rem 1rem;
    align-items: center;
    border: 1px solid var(--border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius);
    padding: 0.85rem 1rem;
    background: var(--background);
}

.lab-notify-item--warning {
    border-left-color: var(--warning);
}

.lab-notify-item-message {
    font-size: 0.95rem;
    line-height: 1.5;
    word-break: break-word;
}

.lab-notify-item-meta {
    grid-column: 1;
    display: flex;
    gap: 0.75rem;
    color: var(--text-light);
    font-size: 0.8rem;
}

.lab-notify-item-action {
    grid-column: 2;
    grid-row: 1 / span 2;
}