/* RealRadio Noticeboard — integrated content styles
 *
 * All rules are scoped to `.nb-shell` / `#nb-app` so they only affect the
 * noticeboard surface inside the main site's layout. Colors, borders and
 * spacing derive from the selected site theme via CSS custom properties
 * (see /css/site.css and the site.<theme>.css variants).
 */

/* Legacy --nb-* aliases so inline-style strings (e.g. nb.preview.mjs)
 * still resolve without rebuilding the bundle. Prefer site vars directly
 * in new code. */
.nb-shell,
.nb-toast-container {
    --nb-bg: var(--bg);
    --nb-surface: var(--surface, var(--card-bg, rgba(0, 0, 0, 0.25)));
    --nb-card: var(--card-bg, var(--surface, rgba(0, 0, 0, 0.15)));
    --nb-accent: var(--accent-color);
    --nb-text: var(--fg);
    --nb-muted: var(--muted);
    --nb-border: var(--border);
    --nb-green: #22c55e;
    --nb-blue: var(--link);
    --nb-amber: #f59e0b;
    --nb-radius: var(--radius, 8px);
    --nb-mono: 'JetBrains Mono', 'Consolas', monospace;
}

/* ─── Shell & inner tab strip ──────────────────────────────────────────── */
.nb-shell {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.nb-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
    padding: 8px 12px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    background: var(--nb-surface);
}
.nb-tabs__link {
    padding: 6px 14px;
    border-radius: var(--nb-radius);
    color: var(--nb-muted);
    font-size: 14px;
    font-weight: 500;
    text-decoration: none;
    transition: background 0.15s, color 0.15s;
}
.nb-tabs__link:hover {
    background: rgba(255, 255, 255, 0.06);
    color: var(--nb-text);
    text-decoration: none;
}
.nb-tabs__link.nb-nav__link--active,
.nb-tabs__link--active {
    color: var(--nb-text);
    background: var(--accent-weak, rgba(255, 255, 255, 0.08));
}
.nb-tabs__spacer { flex: 1; }
.nb-tabs__user { font-size: 13px; color: var(--nb-muted); }
.nb-tabs__signin {
    padding: 6px 14px;
    border-radius: var(--nb-radius);
    border: 1px solid var(--nb-border);
    background: var(--nb-surface);
    color: var(--nb-text);
    font-size: 13px;
    font-weight: 500;
    text-decoration: none;
}
.nb-tabs__signin:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }

/* ─── App mount point ──────────────────────────────────────────────────── */
.nb-app { min-height: 200px; }

/* ─── Cards / grid ─────────────────────────────────────────────────────── */
#nb-app .nb-card {
    background: var(--nb-card);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    padding: 20px;
    margin-bottom: 16px;
}
#nb-app .nb-card:hover { border-color: var(--accent-color); }
#nb-app .nb-card__title {
    font-size: 18px;
    font-weight: 600;
    margin-bottom: 8px;
    color: var(--fg);
}
#nb-app .nb-card__meta {
    font-size: 13px;
    color: var(--nb-muted);
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

#nb-app .nb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

/* ─── Buttons ──────────────────────────────────────────────────────────── */
#nb-app .nb-btn {
    display: inline-flex;
    align-items: center;
    padding: 8px 18px;
    border-radius: var(--nb-radius);
    border: 1px solid var(--nb-border);
    background: var(--nb-surface);
    color: var(--nb-text);
    font-size: 14px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
    text-decoration: none;
}
#nb-app .nb-btn:hover { background: rgba(255, 255, 255, 0.08); text-decoration: none; }
#nb-app .nb-btn--primary {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}
#nb-app .nb-btn--primary:hover { background: var(--accent-strong, var(--link-hover, var(--accent-color))); }
#nb-app .nb-btn--sm { padding: 4px 12px; font-size: 13px; }
#nb-app .nb-btn--danger { border-color: #ef4444; color: #ef4444; }
#nb-app .nb-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ─── Forms ────────────────────────────────────────────────────────────── */
#nb-app .nb-form { margin: 20px 0; }
#nb-app .nb-field { margin-bottom: 12px; }
#nb-app .nb-field label {
    display: block;
    font-size: 13px;
    font-weight: 500;
    color: var(--nb-muted);
    margin-bottom: 4px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}
#nb-app .nb-input,
#nb-app .nb-textarea,
#nb-app .nb-select {
    width: 100%;
    padding: 10px 14px;
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    color: var(--nb-text);
    font-family: inherit;
    font-size: 14px;
}
#nb-app .nb-input:focus,
#nb-app .nb-textarea:focus,
#nb-app .nb-select:focus {
    outline: none;
    border-color: var(--accent-color);
}
#nb-app .nb-textarea { min-height: 120px; resize: vertical; font-family: var(--nb-mono); }

/* ─── Chips / labels ───────────────────────────────────────────────────── */
#nb-app .nb-chip {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 600;
    color: #fff;
}

/* ─── Markdown content ─────────────────────────────────────────────────── */
#nb-app .nb-markdown { line-height: 1.7; color: var(--fg); }
#nb-app .nb-markdown h1 { font-size: 24px; margin: 24px 0 12px; }
#nb-app .nb-markdown h2 {
    font-size: 20px;
    margin: 20px 0 10px;
    border-bottom: 1px solid var(--nb-border);
    padding-bottom: 6px;
}
#nb-app .nb-markdown h3 { font-size: 17px; margin: 16px 0 8px; }
#nb-app .nb-markdown p { margin: 8px 0; }
#nb-app .nb-markdown ul,
#nb-app .nb-markdown ol { padding-left: 24px; margin: 8px 0; }
#nb-app .nb-markdown code {
    background: rgba(0, 0, 0, 0.4);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: var(--nb-mono);
    font-size: 13px;
}
#nb-app .nb-markdown pre {
    background: rgba(0, 0, 0, 0.4);
    padding: 16px;
    border-radius: var(--nb-radius);
    overflow-x: auto;
    margin: 12px 0;
}
#nb-app .nb-markdown pre code { background: none; padding: 0; }
#nb-app .nb-markdown blockquote {
    border-left: 3px solid var(--accent-color);
    padding-left: 16px;
    margin: 12px 0;
    color: var(--nb-muted);
}
#nb-app .nb-markdown a { color: var(--link); }

/* ─── Feature / download cards ─────────────────────────────────────────── */
#nb-app .nb-feature-card { text-align: center; }
#nb-app .nb-feature-card .nb-card__title { margin-top: 8px; }
#nb-app .nb-feature-icon { font-size: 36px; line-height: 1; }
#nb-app .nb-download-card {
    background: linear-gradient(135deg, var(--nb-card), var(--accent-weak, var(--nb-card)));
    border-color: var(--accent-color);
}

/* ─── Utility ──────────────────────────────────────────────────────────── */
#nb-app .nb-loading { text-align: center; padding: 60px; color: var(--nb-muted); }
#nb-app .nb-error { text-align: center; padding: 40px; color: var(--accent-color); }
#nb-app .nb-empty { text-align: center; padding: 40px; color: var(--nb-muted); font-style: italic; }
#nb-app .nb-row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
#nb-app .nb-spacer { flex: 1; }
#nb-app .nb-mb { margin-bottom: 20px; }
#nb-app .nb-mt { margin-top: 20px; }

/* ─── Hero / landing ───────────────────────────────────────────────────── */
#nb-app .nb-hero { text-align: center; padding: 60px 20px; }
#nb-app .nb-hero__title {
    font-size: 36px;
    font-weight: 700;
    margin-bottom: 12px;
    color: var(--fg);
}
#nb-app .nb-hero__sub {
    font-size: 18px;
    color: var(--nb-muted);
    max-width: 600px;
    margin: 0 auto 32px;
}

/* ─── Thread list ──────────────────────────────────────────────────────── */
#nb-app .nb-thread-item {
    display: block;
    padding: 12px 16px;
    margin-bottom: 8px;
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    cursor: pointer;
    transition: border-color 0.1s, background 0.1s;
}
#nb-app .nb-thread-item:hover {
    background: rgba(255, 255, 255, 0.04);
    border-color: var(--accent-color);
}
#nb-app .nb-thread-item__row1 {
    display: flex;
    align-items: center;
    gap: 12px;
}
#nb-app .nb-thread-item__row2 {
    margin-top: 2px;
    font-size: 12px;
    color: var(--nb-muted);
}
#nb-app .nb-thread-item__title { font-weight: 500; flex: 1; color: var(--fg); }
#nb-app .nb-thread-item__replies {
    font-size: 12px;
    color: var(--nb-muted);
    background: rgba(255, 255, 255, 0.06);
    padding: 2px 10px;
    border-radius: 10px;
    white-space: nowrap;
}

/* ─── Post ─────────────────────────────────────────────────────────────── */
#nb-app .nb-post {
    padding: 16px 0;
    border-bottom: 1px solid var(--nb-border);
}
#nb-app .nb-post--op {
    border-left: 3px solid var(--accent-color);
    padding-left: 16px;
}
#nb-app .nb-post__header {
    display: flex;
    gap: 12px;
    align-items: center;
    margin-bottom: 8px;
    font-size: 13px;
    color: var(--nb-muted);
}
#nb-app .nb-post__author { font-weight: 600; color: var(--fg); }

/* ─── Section heading (breadcrumb/toolbar row above lists) ─────────────── */
#nb-app .nb-section-head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
}
#nb-app .nb-section-head__title {
    flex: 1;
    margin: 0;
    font-size: 20px;
    font-weight: 600;
    color: var(--fg);
}

/* ─── Category chips ───────────────────────────────────────────────────── */
#nb-app .nb-category-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
#nb-app .nb-category-chip {
    padding: 6px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 500;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    cursor: pointer;
    color: var(--nb-text);
    text-decoration: none;
}
#nb-app .nb-category-chip:hover { border-color: var(--accent-color); text-decoration: none; }
#nb-app .nb-category-chip--active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* ─── Filter bar ───────────────────────────────────────────────────────── */
#nb-app .nb-filter-bar {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    margin-bottom: 20px;
    align-items: center;
}
#nb-app .nb-filter-bar__label {
    font-size: 13px;
    color: var(--nb-muted);
    font-weight: 500;
    margin-right: 4px;
}
#nb-app .nb-filter-chip {
    padding: 4px 12px;
    border-radius: 14px;
    font-size: 12px;
    font-weight: 600;
    background: var(--nb-surface);
    border: 1px solid var(--nb-border);
    cursor: pointer;
    color: var(--nb-text);
    transition: border-color 0.15s, background 0.15s;
}
#nb-app .nb-filter-chip:hover { border-color: var(--accent-color); }
#nb-app .nb-filter-chip--active {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: #fff;
}

/* ─── Status pills ─────────────────────────────────────────────────────── */
#nb-app .nb-status { font-size: 12px; font-weight: 600; padding: 2px 10px; border-radius: 12px; }
#nb-app .nb-status--open { background: rgba(34, 197, 94, 0.2); color: #22c55e; }
#nb-app .nb-status--closed { background: rgba(156, 163, 175, 0.2); color: #9ca3af; }
#nb-app .nb-status--resolved { background: rgba(59, 130, 246, 0.2); color: #3b82f6; }

/* ─── Markdown preview ─────────────────────────────────────────────────── */
#nb-app .nb-preview-toggle {
    display: inline-flex;
    gap: 0;
    margin-bottom: 8px;
    border-radius: var(--nb-radius);
    overflow: hidden;
    border: 1px solid var(--nb-border);
}
#nb-app .nb-preview-toggle__btn {
    padding: 4px 14px;
    font-size: 13px;
    font-weight: 500;
    background: transparent;
    border: none;
    color: var(--nb-muted);
    cursor: pointer;
}
#nb-app .nb-preview-toggle__btn--active {
    background: var(--nb-surface);
    color: var(--nb-text);
}
#nb-app .nb-preview-pane {
    background: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--nb-border);
    border-radius: var(--nb-radius);
    padding: 12px 14px;
    min-height: 120px;
}

/* ─── Pagination ───────────────────────────────────────────────────────── */
#nb-app .nb-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-top: 20px;
    font-size: 13px;
    color: var(--nb-muted);
}

/* ─── Toasts (top-level, not #nb-app scoped) ───────────────────────────── */
.nb-toast-container {
    position: fixed;
    top: 16px;
    right: 16px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    gap: 8px;
    pointer-events: none;
}
.nb-toast {
    padding: 10px 20px;
    border-radius: var(--nb-radius);
    font-size: 14px;
    font-weight: 500;
    color: #fff;
    opacity: 0;
    transform: translateX(40px);
    transition: opacity 0.25s, transform 0.25s;
    pointer-events: auto;
    max-width: 380px;
}
.nb-toast--visible { opacity: 1; transform: translateX(0); }
.nb-toast--success { background: #16a34a; }
.nb-toast--error { background: #dc2626; }

/* ─── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {
    #nb-app .nb-hero__title { font-size: 28px; }
    #nb-app .nb-grid { grid-template-columns: 1fr; }
}