/* Beacon — app-specific styles only. Base styles in ecosystem-base.css */

/* ── Layout: .container in ecosystem-base.css, .content-narrow in ecosystem-components.css ── */

/* Hero: see ecosystem-components.css */

/* Button variants: see ecosystem-components.css */

/* Beacon override: 2px solid brand border (components uses 1px solid --border) */
.btn-outline {
    background: transparent;
    border: 2px solid var(--brand-primary);
    color: var(--brand-primary);
}
.btn-outline:hover { background: var(--brand-primary); color: var(--text-inverse); }

/* Card grid/header/title: see ecosystem-components.css */

/* ── Stat Cards: see ecosystem-components.css (.eco-stat-*) ──── */

/* ── Dashboard ────────────────────────────────────────────────── */
.dashboard-welcome {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-left: 3px solid var(--brand-primary);
    border-radius: var(--radius);
    padding: 24px 28px;
    margin-bottom: 24px;
    box-shadow: var(--shadow);
}

.dashboard-welcome h1 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: 4px;
}

.dashboard-welcome p {
    color: var(--text-secondary);
    font-size: 0.95rem;
    margin: 0;
}

.dashboard-content {
    display: grid;
    grid-template-columns: 3fr 2fr;
    gap: 24px;
    margin-bottom: 24px;
}

.dashboard-section {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 20px;
    box-shadow: var(--shadow);
}

.dashboard-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.dashboard-section-header h2 {
    font-size: 1.1rem;
    font-weight: 600;
    margin: 0;
}

.dashboard-post-compact {
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
}

.dashboard-post-compact:last-child {
    border-bottom: none;
    padding-bottom: 0;
}

.dashboard-post-compact .post-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.dashboard-post-compact .post-title {
    font-size: 0.95rem;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}

.dashboard-post-compact .post-title a {
    color: var(--text-primary);
    text-decoration: none;
}

.dashboard-post-compact .post-title a:hover {
    color: var(--brand-primary);
}

.dashboard-post-compact .post-excerpt {
    font-size: 0.85rem;
    color: var(--text-secondary);
    margin: 0;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dashboard-post-compact .post-stats {
    display: flex;
    gap: 12px;
    margin-top: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
}

.dashboard-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Category + status badges: see ecosystem-components.css */

/* Forms: see ecosystem-components.css */

/* ── Alerts: see ecosystem-components.css ─────────────────────── */

/* Tables: see ecosystem-components.css */

/* ── table-actions, Data Table: see ecosystem-components.css ──── */

/* ── User cells, Permission tags, Action buttons, Empty state,
      Eco-pagination: see ecosystem-components.css ────────────── */

/* Post Cards: see ecosystem-components.css */

/* News Cards: see ecosystem-components.css */

/* Profile Card: see ecosystem-components.css */

/* Profile View: see ecosystem-components.css */

/* Comments: see ecosystem-components.css */

/* Like Button: see ecosystem-components.css */

/* ── Pagination ───────────────────────────────────────────────── */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-top: 32px;
}

.pagination a,
.pagination span {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    color: var(--text-secondary);
    text-decoration: none;
    transition: all 0.2s;
}

.pagination a:hover {
    background: var(--bg-hover);
    border-color: var(--brand-primary);
    color: var(--brand-primary);
}

.pagination .active {
    background: var(--brand-primary);
    color: var(--text-inverse);
    border-color: var(--brand-primary);
    font-weight: 600;
}

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

/* Filter bar: see ecosystem-components.css */

/* ── Footer ───────────────────────────────────────────────────── */
/* Footer styles in ecosystem-components.css */

/* Auth Pages: see ecosystem-components.css */

/* ── Post Detail Card ─────────────────────────────────────────── */
.post-detail-card {
    background: var(--bg-card);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 24px;
    margin-bottom: 24px;
}

/* Article / Post Body: see ecosystem-components.css */

/* Info Sections: see ecosystem-components.css */

/* Pinned indicator: see ecosystem-components.css */

/* Tags: see ecosystem-components.css */

/* Empty State: see ecosystem-components.css */

/* =================================================================
   Theme-Specific Enhancements
   ================================================================= */

/* Gradient borders + cyber-neon glow: see ecosystem-components.css */

/* ── Neon Spectrum / Spectrum-Holo stat-card colors: see ecosystem-components.css (.eco-stat-*) ── */

/* ── Responsive (beacon-specific only; component responsive in ecosystem-components.css) ── */
@media (max-width: 768px) {
    .dashboard-content { grid-template-columns: 1fr; }
}