/* SkillForge — custom styles on top of Pico CSS */

:root {
    --sf-green: #22c55e;
    --sf-yellow: #eab308;
    --sf-red: #ef4444;
    --sf-blue: #3b82f6;
    --sf-muted: #6b7280;
    --pico-font-family: "Exo 2", system-ui, sans-serif;
    --pico-font-family-monospace: "JetBrains Mono", ui-monospace, monospace;
}

/* Nav */
.btn-logout {
    padding: 0.25rem 0.75rem;
    font-size: 0.85rem;
    margin: 0;
}

/* Stat cards on dashboard */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}
.stats-grid .stat-hero {
    grid-column: span 2;
}
@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .stats-grid .stat-hero {
        grid-column: span 2;
    }
}
@media (max-width: 480px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }
    .stats-grid .stat-hero {
        grid-column: span 1;
    }
}

.stat-large {
    font-size: 2rem;
    font-weight: 700;
    margin: 0.25rem 0;
    font-family: var(--pico-font-family-monospace);
}

/* Skills grid */
.skills-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
    gap: 1rem;
}

/* Skill cards */
.skill-card {
    text-decoration: none;
    color: inherit;
    display: block;
}
.skill-card article {
    height: 100%;
    margin: 0;
    transition: transform 0.15s ease;
}
.skill-card:hover article {
    transform: translateY(-2px);
}

/* Title cards */
.title-card {
    text-align: center;
    padding: 1rem;
}
.title-icon {
    font-size: 2rem;
    display: block;
    margin-bottom: 0.25rem;
}

/* Skill summary */
.skill-summary {
    margin-bottom: 2rem;
}
.skill-summary-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}
.skill-summary-stats {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    flex-wrap: wrap;
}

/* Topic timeline */
.topic-timeline {
    position: relative;
    padding-left: 0;
}
.tl-item {
    display: flex;
    gap: 1rem;
    position: relative;
}
.tl-item:not(:last-child) {
    padding-bottom: 0.5rem;
}
.tl-track {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-shrink: 0;
    width: 2.5rem;
    position: relative;
}
.tl-item:not(:last-child) .tl-track::after {
    content: "";
    position: absolute;
    top: 2.5rem;
    bottom: -0.5rem;
    width: 2px;
    background: var(--pico-muted-border-color, #374151);
}
.tl-item--done:not(:last-child) .tl-track::after {
    background: var(--sf-green);
}
.tl-marker {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
    flex-shrink: 0;
    z-index: 1;
    border: 2px solid var(--pico-muted-border-color, #374151);
    background: var(--pico-background-color, #11191f);
    color: var(--sf-muted);
}
.tl-item--done .tl-marker {
    background: var(--sf-green);
    border-color: var(--sf-green);
    color: #fff;
}
.tl-item--current .tl-marker {
    border-color: var(--sf-blue);
    color: var(--sf-blue);
    box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
    animation: tl-pulse 2s ease-in-out infinite;
}
@keyframes tl-pulse {
    0%, 100% { box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2); }
    50% { box-shadow: 0 0 0 8px rgba(59, 130, 246, 0.1); }
}
.tl-content {
    flex: 1;
    text-decoration: none;
    color: inherit;
    display: block;
    min-width: 0;
}
.tl-content article {
    margin: 0;
    transition: transform 0.15s ease, border-color 0.15s ease;
}
.tl-content:hover article {
    transform: translateY(-2px);
}
.tl-item--done .tl-content article {
    border-left: 3px solid var(--sf-green);
}
.tl-item--current .tl-content article {
    border-left: 3px solid var(--sf-blue);
}
.tl-item--upcoming .tl-content article {
    opacity: 0.6;
}
.tl-item--upcoming:hover .tl-content article {
    opacity: 1;
}

/* Topic card internals */
.tl-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    margin-bottom: 0.5rem;
}
.tl-label {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.15rem 0.6rem;
    border-radius: 100px;
    white-space: nowrap;
    flex-shrink: 0;
}
.tl-label--done {
    background: rgba(34, 197, 94, 0.15);
    color: var(--sf-green);
}
.tl-label--current {
    background: rgba(59, 130, 246, 0.15);
    color: var(--sf-blue);
}
.tl-description {
    color: var(--sf-muted);
    font-size: 0.9rem;
    margin: 0 0 0.75rem;
}
.tl-card-footer {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.tl-bar {
    flex: 1;
    height: 6px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.08);
    overflow: hidden;
}
.tl-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 0.3s ease;
    background: var(--sf-muted);
}
.tl-item--done .tl-bar-fill {
    background: var(--sf-green);
}
.tl-item--current .tl-bar-fill {
    background: var(--sf-blue);
}
.tl-stat {
    color: var(--sf-muted);
    white-space: nowrap;
    font-size: 0.8rem;
    font-family: var(--pico-font-family-monospace);
}

/* Difficulty badges */
.badge {
    display: inline-block;
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
    font-size: 0.8rem;
    font-weight: 600;
    text-transform: capitalize;
}
.badge-easy {
    background: var(--sf-green);
    color: #fff;
}
.badge-medium {
    background: var(--sf-yellow);
    color: #000;
}
.badge-hard {
    background: var(--sf-red);
    color: #fff;
}

/* Status badges */
.badge-solved {
    background: var(--sf-green);
    color: #fff;
}
.badge-attempted {
    background: var(--sf-yellow);
    color: #000;
}
.badge-locked {
    background: var(--sf-muted);
    color: #fff;
}
.badge-not-started {
    background: transparent;
}
.badge-title {
    background: #a855f7;
    color: #fff;
    margin: 0.25rem;
}

/* Exercise list rows */
.exercise-row {
    padding: 0.75rem 1rem;
}
.exercise-row-inner {
    display: flex;
    align-items: center;
    gap: 1rem;
}
.exercise-locked {
    opacity: 0.5;
}
.exercise-status-badge {
    font-size: 1.2rem;
    flex-shrink: 0;
}
.muted {
    color: var(--sf-muted);
}

/* Code editor */
.editor-section {
    margin-bottom: 1.5rem;
}
#editor-wrapper {
    border: 1px solid var(--pico-muted-border-color, #374151);
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
#editor-wrapper .CodeMirror {
    height: 300px;
    font-size: 14px;
}
#editor-footer {
    display: flex;
    justify-content: flex-end;
    padding: 0.2rem 0.75rem;
    background: #1e1f29;
    border: 1px solid var(--pico-muted-border-color, #374151);
    border-top: none;
    border-radius: 0 0 4px 4px;
    font-family: var(--pico-font-family-monospace);
    font-size: 0.75rem;
    color: var(--sf-muted);
}
.editor-actions {
    display: flex;
    gap: 0.5rem;
    align-items: center;
    margin-top: 0.75rem;
}
.shortcut-hint {
    font-size: 0.7rem;
    padding: 0.15rem 0.4rem;
    border-radius: 3px;
    border: 1px solid var(--pico-muted-border-color, #374151);
    color: var(--sf-muted);
    background: transparent;
    font-family: var(--pico-font-family-monospace);
}

/* Run button spinner */
.run-label { display: inline; }
.run-spinner-inline { display: none !important; gap: 0.35rem; align-items: center; }
.htmx-request .run-label { display: none; }
.htmx-request .run-spinner-inline { display: inline-flex !important; }
.spinner {
    display: inline-block;
    width: 0.9em;
    height: 0.9em;
    border: 2px solid rgba(255,255,255,0.3);
    border-top-color: #fff;
    border-radius: 50%;
    animation: spin 0.6s linear infinite;
}
@keyframes spin {
    to { transform: rotate(360deg); }
}

/* Output section (inside editor block) */
.output-section {
    margin-top: 1.25rem;
}
.output-label {
    display: block;
    color: var(--sf-muted);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.35rem;
    font-size: 0.75rem;
}

/* Code output */
.code-output pre {
    padding: 1rem;
    border-radius: 4px;
    overflow-x: auto;
    white-space: pre-wrap;
    word-break: break-word;
    margin: 0;
}
.output-stdout {
    background: #0d1117;
    color: #7ee787;
    border-left: 3px solid var(--sf-green);
}
.output-stderr {
    background: #1a0000;
    color: #fca5a5;
    border-left: 3px solid var(--sf-red);
}
.output-timeout {
    padding: 1rem;
    background: #1a0a00;
    color: var(--sf-yellow);
    border-radius: 4px;
    border-left: 3px solid var(--sf-yellow);
}
.output-empty {
    color: var(--sf-muted);
    background: transparent;
}
.output-placeholder {
    color: var(--sf-muted);
    background: transparent;
    font-style: italic;
}
.output-exit {
    color: var(--sf-muted);
}

/* Exercise status response */
.status-badge {
    margin-top: 1rem;
}
.status-solved {
    border-left: 3px solid var(--sf-green);
}
.status-already-solved {
    border-left: 3px solid var(--sf-blue);
}
.status-error {
    border-left: 3px solid var(--sf-red);
}
.new-titles {
    margin-top: 0.5rem;
}

/* Exercise description */
.exercise-description {
    line-height: 1.7;
    margin-bottom: 1.5rem;
}

/* Hints */
.hints-section h3 { margin-bottom: 0.5rem; }
.hint-item {
    border-left: 2px solid var(--pico-muted-border-color, #374151);
    padding-left: 0.75rem;
    margin-bottom: 0.25rem;
}
.hint-item[open] {
    border-left-color: var(--sf-yellow);
}
.hint-item summary {
    font-weight: 600;
    cursor: pointer;
}

/* Expected output */
.expected-output-details {
    border: 1px solid var(--pico-muted-border-color, #374151);
    border-radius: 4px;
    padding: 0.75rem 1rem;
    background: rgba(255, 255, 255, 0.02);
}
.expected-output-details summary {
    font-weight: 600;
    cursor: pointer;
}
.expected-output-details pre {
    margin: 0.5rem 0 0;
    padding: 0.75rem;
    background: #0d1117;
    border-radius: 4px;
    border-left: 3px solid var(--sf-blue);
    font-size: 0.9rem;
}

/* Graph container */
#graph-container {
    height: 80vh;
    border: 1px solid var(--pico-muted-border-color, #374151);
    border-radius: 4px;
}

/* Heatmap */
#heatmap-container {
    overflow-x: auto;
    padding: 1rem 0;
}
.heatmap-grid {
    display: flex;
    gap: 3px;
}
.heatmap-week {
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.heatmap-day {
    width: 14px;
    height: 14px;
    border-radius: 2px;
    background: rgba(255, 255, 255, 0.07);
}
.heatmap-day[data-level="1"] { background: #0e4429; }
.heatmap-day[data-level="2"] { background: #006d32; }
.heatmap-day[data-level="3"] { background: #26a641; }
.heatmap-day[data-level="4"] { background: #39d353; }
.heatmap-day:hover {
    outline: 1px solid #fff;
    outline-offset: -1px;
}
.heatmap-wrapper {
    display: inline-block;
}
.heatmap-months-row {
    position: relative;
    height: 16px;
    margin-bottom: 2px;
}
.heatmap-month-label {
    position: absolute;
    font-size: 0.65rem;
    color: var(--sf-muted);
    white-space: nowrap;
}
.heatmap-legend {
    display: flex;
    align-items: center;
    gap: 3px;
    margin-top: 4px;
    font-size: 0.65rem;
    color: var(--sf-muted);
    justify-content: flex-end;
}
.heatmap-months {
    display: flex;
    font-size: 0.7rem;
    color: var(--sf-muted);
    margin-bottom: 4px;
}
.streak-body {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    margin-top: 0.25rem;
}
.streak-stat {
    flex-shrink: 0;
}
.heatmap-mini {
    flex: 1;
    overflow-x: auto;
    min-width: 0;
}

/* Error message on login */
.error-message {
    color: var(--sf-red);
    font-weight: 600;
}

/* Admin inline action buttons */
.admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.25rem;
}
.admin-actions form {
    margin: 0;
}
.admin-actions button {
    width: auto;
    padding: 0.15rem 0.5rem;
    font-size: 0.8rem;
    margin: 0;
    border: none;
}

/* Code textareas in admin forms */
.code-textarea {
    font-family: monospace;
    font-size: 0.9rem;
}

/* Topic bottom navigation (prev / next) */
.topic-nav {
    margin-top: 2.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--pico-muted-border-color, #374151);
}
.topic-nav-inner {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 1rem;
    align-items: start;
}
.topic-nav-link {
    display: flex;
    flex-direction: column;
    text-decoration: none;
    padding: 0.5rem 0.75rem;
    border-radius: 6px;
    transition: background 0.15s ease;
}
.topic-nav-link:hover {
    background: var(--pico-card-background-color, #1e2530);
}
.topic-nav-link small {
    color: var(--sf-muted);
    font-size: 0.8rem;
}
.topic-nav-link span {
    font-weight: 600;
}
.topic-nav-prev { text-align: left; }
.topic-nav-up { text-align: center; }
.topic-nav-next { text-align: right; justify-self: end; }

/* Breadcrumb — override Pico v2 divider */
nav[aria-label="breadcrumb"] {
    --pico-nav-breadcrumb-divider: "›";
}

/* Glossary */
.glossary-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0.5rem;
}
.tag-btn {
    padding: 0.2rem 0.6rem;
    font-size: 0.8rem;
    border-radius: 1rem;
    border: 1px solid var(--sf-muted);
    background: transparent;
    color: var(--pico-color);
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
    margin: 0;
    width: auto;
}
.tag-btn:hover {
    border-color: var(--sf-blue);
    color: var(--sf-blue);
}
.tag-btn.active {
    background: var(--sf-blue);
    border-color: var(--sf-blue);
    color: #fff;
}
.glossary-count {
    color: var(--sf-muted);
    font-size: 0.85rem;
}
.glossary-card {
    margin-bottom: 1rem;
}
.glossary-card header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 0.5rem;
}
.glossary-card-tags {
    display: flex;
    gap: 0.3rem;
    flex-wrap: wrap;
}
.tag-label {
    padding: 0.1rem 0.45rem;
    border-radius: 0.75rem;
    background: var(--pico-card-background-color, #1e2530);
    color: var(--sf-muted);
    font-size: 0.75rem;
}
.glossary-definition pre {
    margin: 0.5rem 0;
}
.glossary-empty {
    color: var(--sf-muted);
    text-align: center;
    margin-top: 2rem;
}