/* ========================================
   SIDEBAR.CSS
   Article, Project & Notes sidebar styles
   ======================================== */

/* ----------------------------------------
   TWO-COLUMN LAYOUT
   ---------------------------------------- */

.content-with-sidebar {
    display: grid;
    grid-template-columns: 1fr 280px;
    gap: 2.5rem;
    align-items: start;
}

.content-main {
    min-width: 0;
}

.content-sidebar {
    position: sticky;
    top: calc(60px + 1.5rem);
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    margin-bottom: 2rem;
}

/* ----------------------------------------
   SIDEBAR CARD (base)
   ---------------------------------------- */

.sidebar-card {
    background: var(--card-bg);
    border: 1px solid var(--card-border);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.2s ease;
}

.sidebar-card:hover {
    border-color: var(--accent);
    box-shadow: 0 4px 12px var(--card-hover-shadow);
}

[data-theme="dark"] .sidebar-card:hover {
    border-color: #40e0d0;
}

.sidebar-card-header {
    font-size: 0.65rem;
    font-family: "SF Mono", "Fira Code", Menlo, monospace;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

/* ----------------------------------------
   TABLE OF CONTENTS
   ---------------------------------------- */

.sidebar-toc-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
    list-style: none;
}

.sidebar-toc-link {
    display: block;
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    padding-left: 0.75rem;
    border-left: 2px solid transparent;
    transition: all 0.15s ease;
    line-height: 1.4;
}

.sidebar-toc-link:hover {
    color: var(--text-primary);
    border-left-color: var(--card-border);
}

.sidebar-toc-link.active {
    color: var(--accent);
    border-left-color: var(--accent);
}

[data-theme="dark"] .sidebar-toc-link.active {
    color: #40e0d0;
    border-left-color: #40e0d0;
}

/* ----------------------------------------
   PROJECT CARD
   ---------------------------------------- */

.sidebar-project-preview {
    background: var(--section-bg);
    border: 1px solid var(--card-border);
    border-radius: 8px;
    padding: 1.25rem;
    text-align: center;
    margin-bottom: 1rem;
}

.sidebar-project-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sidebar-project-tagline {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
}

.sidebar-project-meta {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 0.75rem;
}

.sidebar-project-status {
    font-size: 0.65rem;
    font-weight: 600;
    color: #10b981;
    background: rgba(16, 185, 129, 0.1);
    padding: 0.2rem 0.5rem;
    border-radius: 4px;
}

[data-theme="dark"] .sidebar-project-status {
    color: #40e0d0;
    background: rgba(64, 224, 208, 0.15);
}

.sidebar-project-date {
    font-size: 0.75rem;
    color: var(--text-secondary);
}

.sidebar-project-tech {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: 1rem;
}

.sidebar-project-tech .tech-badge {
    font-size: 0.65rem;
    padding: 0.15rem 0.4rem;
}

.sidebar-project-link {
    display: block;
    text-align: center;
    padding: 0.6rem;
    background: var(--section-bg);
    border-radius: 8px;
    color: var(--text-primary);
    text-decoration: none;
    font-size: 0.85rem;
    font-weight: 500;
    transition: all 0.2s ease;
}

.sidebar-project-link:hover {
    background: var(--card-border);
}

/* ----------------------------------------
   BUILD STATS
   ---------------------------------------- */

.sidebar-stats-list {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-stat-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.sidebar-stat-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sidebar-stat-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

.sidebar-stat-value.status-live {
    color: #10b981;
}

[data-theme="dark"] .sidebar-stat-value.status-live {
    color: #40e0d0;
}

/* ----------------------------------------
   RELATED PROJECTS
   ---------------------------------------- */

.sidebar-related-list {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.sidebar-related-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem;
    background: var(--section-bg);
    border-radius: 8px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.sidebar-related-item:hover {
    background: var(--card-border);
}

.sidebar-related-thumb {
    width: 40px;
    height: 28px;
    object-fit: cover;
    border-radius: 4px;
    border: 1px solid var(--card-border);
    flex-shrink: 0;
}

.sidebar-related-info {
    flex: 1;
    min-width: 0;
}

.sidebar-related-name {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    line-height: 1.2;
}

.sidebar-related-tagline {
    font-size: 0.7rem;
    color: var(--text-secondary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ----------------------------------------
   STATS TOTAL (Notes & Projects overview)
   ---------------------------------------- */

.sidebar-stats-total {
    margin-bottom: 1.25rem;
}

.stats-total-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--text-primary);
    line-height: 1.2;
    margin-bottom: 0.25rem;
}

.stats-total-label {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

/* ----------------------------------------
   STATS BY TAG
   ---------------------------------------- */

.sidebar-stats-tags {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-stat-tag {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.stat-tag-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Notes tags */
.stat-tag-building {
    background: #f59e0b;
}

.stat-tag-reading {
    background: #3b82f6;
}

.stat-tag-thoughts {
    background: #8b5cf6;
}

/* Projects tags */
.stat-tag-live {
    background: #10b981;
}

.stat-tag-coming {
    background: #f59e0b;
}

.stat-tag-tech {
    background: #6366f1;
}

.stat-tag-name {
    flex: 1;
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.stat-tag-count {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
}

/* ----------------------------------------
   ARCHIVE
   ---------------------------------------- */

.sidebar-archive {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.sidebar-archive-year {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.archive-year-label {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-primary);
}

.archive-months {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding-left: 0.75rem;
}

.archive-month-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.archive-month-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
    cursor: pointer;
    transition: color 0.2s ease;
}

.archive-month-name:hover {
    color: var(--accent);
}

[data-theme="dark"] .archive-month-name:hover {
    color: #40e0d0;
}

.archive-month-count {
    font-size: 0.8rem;
    color: var(--text-secondary);
    opacity: 0.6;
}

/* ----------------------------------------
   THIS WEEK
   ---------------------------------------- */

.sidebar-this-week {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.this-week-number {
    font-size: 1.5rem;
    font-weight: 700;
    color: #10b981;
}

[data-theme="dark"] .this-week-number {
    color: #40e0d0;
}

.this-week-label {
    font-size: 0.85rem;
    color: var(--text-secondary);
}

/* ----------------------------------------
   LATEST PROJECT
   ---------------------------------------- */

.sidebar-latest-project {
    display: block;
    text-decoration: none;
    padding: 0.75rem;
    background: var(--section-bg);
    border-radius: 8px;
    transition: all 0.2s ease;
}

.sidebar-latest-project:hover {
    background: var(--card-border);
}

.sidebar-latest-project .sidebar-project-name {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: 0.25rem;
}

.sidebar-latest-project .sidebar-project-tagline {
    font-size: 0.75rem;
    color: var(--text-secondary);
    line-height: 1.4;
    margin-bottom: 0.5rem;
}

.sidebar-latest-project .sidebar-project-date {
    font-size: 0.7rem;
    font-family: "SF Mono", "Fira Code", Menlo, monospace;
    color: var(--text-secondary);
    opacity: 0.7;
}

/* ----------------------------------------
   TECH STACK LIST
   ---------------------------------------- */

.sidebar-tech-list {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.sidebar-tech-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.35rem 0;
}

.sidebar-tech-name {
    font-size: 0.8rem;
    color: var(--text-secondary);
}

.sidebar-tech-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-primary);
    background: var(--section-bg);
    padding: 0.15rem 0.5rem;
    border-radius: 4px;
}

/* ----------------------------------------
   RESPONSIVE
   ---------------------------------------- */

@media (max-width: 900px) {
    .content-with-sidebar {
        grid-template-columns: 1fr;
    }

    .content-sidebar {
        position: static;
        order: -1;
        display: grid;
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 1rem;
    }

    .sidebar-toc {
        display: none;
    }
}

@media (max-width: 480px) {
    .content-sidebar {
        grid-template-columns: 1fr;
    }
}