/*
    urhema_forum.css — Forum listing (Phase 6)

    Full redesign, not a patch — the original was inline <style> in Forum.cshtml with retired
    --color-* tokens and NO fallback values at all (worse than the plans/auth/search cases,
    which at least had fallbacks). Moved to its own file, loaded via @section Styles, matching
    every other page-CSS file's convention.

    Layout is a genuine restructure from the original (horizontal pill tabs + plain <table> ->
    sidebar + card-wrapped table), built against a supplied reference image, not guessed at
    from nothing. See chat/WIRING for the two property names this design assumes but couldn't
    confirm (per-category counts, topic author name).

    Conventions (matches urhema_studies.css / urhema_plans.css):
      - Page-scoped .ub-forum__* names (house .ub- prefix).
      - Tokens only — no raw hex, no font stacks.
      - .ub-forum__panel composes .ub-card rather than redeclaring background/border/radius/
        shadow, same reasoning used throughout this project for every other card surface.
*/

.ub-forum {
    max-width: var(--ub-width-shell);
    margin-inline: auto;
    padding-block: var(--ub-space-7) var(--ub-space-9);
    padding-inline: var(--ub-gutter);
}

/* ---- Top bar: title/lede + "Start a thread" -------------------------- */

.ub-forum__topbar {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--ub-space-4);
    margin-bottom: var(--ub-space-6);
}
.ub-forum__intro {
    flex: 1 1 20rem;
}
.ub-forum__title {
    margin: 0 0 var(--ub-space-2);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-2xl);
    line-height: var(--ub-leading-tight);
    letter-spacing: var(--ub-tracking-tight);
    color: var(--ub-ink);
}
.ub-forum__lede {
    margin: 0;
    max-width: var(--ub-width-reading);
    color: var(--ub-ink-soft);
    font-size: var(--ub-text-md);
    line-height: var(--ub-leading-body);
}

/* The <details>/<summary> disclosure itself is a flex item alongside .ub-forum__intro above —
   closed, it's just the button-styled summary at its natural width, sitting neatly next to
   the title. [open] forces it onto its own full-width row (flex-basis: 100% is a standard,
   well-supported flex-wrap trick for exactly this), so the revealed form gets real room
   instead of being squeezed into a narrow column. No JS needed either way. */
.ub-forum__new-topic {
    flex: 0 0 auto;
}
.ub-forum__new-topic[open] {
    flex-basis: 100%;
}
.ub-forum__new-topic-toggle {
    display: inline-flex;
    align-items: center;
    gap: var(--ub-space-2);
    padding: var(--ub-space-3) var(--ub-space-5);
    border: 1px solid var(--ub-accent-500);
    border-radius: var(--ub-radius-sm);
    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    cursor: pointer;
    list-style: none;
    transition: background var(--ub-duration-fast) var(--ub-ease),
                border-color var(--ub-duration-fast) var(--ub-ease);
}
/* Two different browsers, two different ways to hide the native disclosure triangle. */
.ub-forum__new-topic-toggle::-webkit-details-marker { display: none; }
.ub-forum__new-topic-toggle::marker { content: ""; }
.ub-forum__new-topic-toggle:hover {
    background: var(--ub-accent-700);
    border-color: var(--ub-accent-700);
}

.ub-forum__new-topic-panel {
    margin-top: var(--ub-space-4);
    padding: var(--ub-space-5);
    background: var(--ub-paper-raised);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-md);
}
.ub-forum__new-topic-panel form {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-4);
}
.ub-forum__new-topic-panel label {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-1);
    color: var(--ub-ink-muted);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
}
/* Matches .au-input's own recessed-field treatment exactly, for consistency with every
   other text input on the site rather than a third, page-specific input style. */
.ub-forum__new-topic-panel input,
.ub-forum__new-topic-panel select,
.ub-forum__new-topic-panel textarea {
    padding: 0.625rem 0.75rem;
    background: var(--ub-paper-sunken);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-sm);
    color: var(--ub-ink);
    font: inherit;
    font-size: var(--ub-text-base);
}
.ub-forum__new-topic-panel input:focus,
.ub-forum__new-topic-panel select:focus,
.ub-forum__new-topic-panel textarea:focus {
    outline: none;
    border-color: var(--ub-accent-500);
    box-shadow: var(--ub-focus-ring);
}
/* Shared button pair — used by "Post topic" here, and by "Post reply"/"Submit report" on
   ForumTopic.cshtml. Consolidated into one shared class rather than each page defining its
   own identically-styled submit button under a different name (this file originally had
   .ub-forum__new-topic-submit doing the exact same job .forum-topic__reply-box's button did
   under yet another name, before this pass). .ub-forum__btn is the neutral outline base
   (matches .au-btn's own outline treatment); --primary is the solid accent fill. */
.ub-forum__btn {
    display: inline-flex;
    align-items: center;
    gap: var(--ub-space-2);
    align-self: flex-start;
    padding: var(--ub-space-3) var(--ub-space-5);
    border: var(--ub-rule-strong);
    border-radius: var(--ub-radius-sm);
    background: transparent;
    color: var(--ub-ink);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    cursor: pointer;
    transition: background var(--ub-duration-fast) var(--ub-ease),
                border-color var(--ub-duration-fast) var(--ub-ease),
                color var(--ub-duration-fast) var(--ub-ease);
}
.ub-forum__btn:hover {
    border-color: var(--ub-ink);
}
.ub-forum__btn--primary {
    border-color: var(--ub-accent-500);
    background: var(--ub-accent-500);
    color: var(--ub-accent-contrast);
}
.ub-forum__btn--primary:hover {
    background: var(--ub-accent-700);
    border-color: var(--ub-accent-700);
}

.ub-forum__signin-prompt {
    margin: 0 0 var(--ub-space-6);
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-sm);
}
.ub-forum__signin-prompt a {
    color: var(--ub-accent-700);
}

/* ---- Layout: sidebar + content -------------------------------------- */

.ub-forum__layout {
    display: grid;
    grid-template-columns: 15rem 1fr;
    gap: var(--ub-space-7);
    align-items: start;
}
@media (max-width: 48rem) {
    .ub-forum__layout {
        grid-template-columns: 1fr;
    }
}

/* ---- Sidebar ----------------------------------------------------------- */

.ub-forum__sidebar-title {
    margin: 0 0 var(--ub-space-3);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    letter-spacing: var(--ub-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ub-ink-muted);
}
.ub-forum__categories {
    margin: 0;
    padding: 0;
    list-style: none;
}
.ub-forum__category {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--ub-space-3);
    padding: var(--ub-space-3) 0;
    border-bottom: var(--ub-rule);
    text-decoration: none;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    color: var(--ub-ink);
    transition: color var(--ub-duration-fast) var(--ub-ease);
}
.ub-forum__categories li:last-child .ub-forum__category {
    border-bottom: none;
}
.ub-forum__category:hover {
    color: var(--ub-accent-700);
}
.ub-forum__category.is-active {
    color: var(--ub-accent-700);
}
.ub-forum__category-count {
    flex: 0 0 auto;
    padding: 0.15rem 0.55rem;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-paper-sunken);
    color: var(--ub-ink-muted);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 600;
}

/* ---- Content panel + table --------------------------------------------- */

.ub-forum__panel {
    /* Background/border/radius/shadow come from .ub-card, composed in the view. This rule is
       layout-only. */
    overflow: hidden;
}

.ub-forum__table {
    width: 100%;
    border-collapse: collapse;
}
.ub-forum__table th {
    padding: var(--ub-space-4) var(--ub-space-5);
    border-bottom: var(--ub-rule-strong);
    text-align: left;
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    letter-spacing: var(--ub-tracking-eyebrow);
    text-transform: uppercase;
    color: var(--ub-ink-muted);
}
.ub-forum__table td {
    padding: var(--ub-space-4) var(--ub-space-5);
    border-bottom: var(--ub-rule);
    color: var(--ub-ink);
}
.ub-forum__table tbody tr:last-child td {
    border-bottom: none;
}
.ub-forum__table tbody tr {
    transition: background var(--ub-duration-fast) var(--ub-ease);
}
.ub-forum__table tbody tr:hover {
    background: var(--ub-paper-sunken);
}

.ub-forum__col-replies,
.ub-forum__col-activity {
    text-align: right;
    white-space: nowrap;
}
.ub-forum__col-replies {
    font-weight: 700;
}
.ub-forum__col-activity {
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-sm);
}

.ub-forum__topic-link {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--ub-space-3);
    text-decoration: none;
    color: inherit;
}
.ub-forum__topic-title {
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-base);
    font-weight: 600;
    color: var(--ub-ink);
    transition: color var(--ub-duration-fast) var(--ub-ease);
}
.ub-forum__topic-link:hover .ub-forum__topic-title {
    color: var(--ub-accent-700);
}

/* Currently unused — the markup that references this is commented out pending confirmation
   of topic.AuthorDisplayName (see Forum.cshtml). Styled now so uncommenting it later just
   works, without a second round-trip back for styling. */
.ub-forum__topic-author {
    margin: var(--ub-space-1) 0 0;
    color: var(--ub-ink-muted);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
}

/* Category badge inline with the title. Lesson threads get the accent treatment (matching
   .ub-chip--accent's exact real pair — see urhema_search.css's own note on why a purpose-built
   per-theme token beats an ad-hoc color for a solid fill); every other shown category gets the
   plain neutral chip treatment, same background .ub-chip itself uses. Only shown at all when
   it's NOT redundant with the sidebar's own active filter — see the Razor for that rule. */
.ub-forum__topic-badge {
    flex: 0 0 auto;
    padding: 0.15rem 0.55rem;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-paper-sunken);
    color: var(--ub-ink-muted);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    white-space: nowrap;
}
.ub-forum__topic-badge--lesson {
    background: var(--ub-accent-100);
    color: var(--ub-accent-700);
}

.ub-forum__lock-icon {
    flex: 0 0 auto;
    width: 0.9em;
    height: 0.9em;
    color: var(--ub-ink-muted);
}

.ub-forum__empty {
    padding: var(--ub-space-9) var(--ub-space-5);
    color: var(--ub-ink-muted);
    text-align: center;
}

/* ---- Pagination ---------------------------------------------------------- */

.ub-forum__pagination {
    display: flex;
    justify-content: space-between;
    margin-top: var(--ub-space-5);
}
.ub-forum__pagination a {
    color: var(--ub-accent-700);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    text-decoration: none;
}
.ub-forum__pagination a:hover {
    text-decoration: underline;
}

/* =========================================================================
   ForumTopic.cshtml — single thread view. Same file, since it's the same
   forum feature — matches how urhema_plans.css covers both Plans and
   GroupPlansBand rather than splitting into two files for one feature.

   Structure here is close to the original — no reference image demanded a
   different layout the way the listing page's did, so this is fixes +
   .ub-card composition + the shared button pair above, not a rebuild.
   ========================================================================= */

.ub-forum-topic {
    max-width: var(--ub-width-reading);
    margin-inline: auto;
    padding-block: var(--ub-space-7) var(--ub-space-9);
    padding-inline: var(--ub-gutter);
}

.ub-forum-topic__back {
    display: inline-block;
    margin-bottom: var(--ub-space-4);
    color: var(--ub-accent-700);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
    font-weight: 600;
    text-decoration: none;
}
.ub-forum-topic__back:hover {
    text-decoration: underline;
}

.ub-forum-topic__header h1 {
    margin: 0 0 var(--ub-space-2);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-xl);
    line-height: var(--ub-leading-tight);
    color: var(--ub-ink);
}
.ub-forum-topic__locked {
    display: flex;
    align-items: center;
    gap: var(--ub-space-2);
    margin: 0;
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-sm);
}

/* Rate-limit notice — a soft "slow down", not a hard error. Kept accent-toned rather than
   using --ub-danger-*: those tokens exist for genuine validation failures (see
   urhema_auth.css), and reusing them here would read as more alarming than "please wait a
   moment" actually is. */
.ub-forum-topic__flash {
    margin: var(--ub-space-4) 0;
    padding: var(--ub-space-3) var(--ub-space-4);
    background: var(--ub-paper-sunken);
    border: var(--ub-rule-strong);
    border-radius: var(--ub-radius-sm);
    color: var(--ub-accent-700);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-sm);
}

.ub-forum-topic__posts {
    display: flex;
    flex-direction: column;
    gap: var(--ub-space-4);
    margin: var(--ub-space-6) 0;
    padding: 0;
    list-style: none;
}

/* Background/border/radius/shadow come from .ub-card, composed in the view — this rule is
   layout-only, same pattern as .ub-plan-card / .ub-forum__panel elsewhere in this project. */
.ub-forum-topic__post {
    padding: var(--ub-space-5);
}
/* Color only, layered on top of .ub-card's own border shorthand — same technique
   .ub-plan-card--featured and .ub-studies__card.is-premium both already use. */
.ub-forum-topic__post--opening {
    border-color: var(--ub-accent-500);
}

.ub-forum-topic__post-meta {
    display: flex;
    align-items: center;
    gap: var(--ub-space-3);
    margin-bottom: var(--ub-space-3);
    font-size: var(--ub-text-sm);
}
.ub-forum-topic__author {
    font-family: var(--ub-font-ui);
    font-weight: 600;
    color: var(--ub-ink);
}
/* Same light-tint treatment as .ub-forum__topic-badge--lesson — an informational tag, not
   an action, so it gets the tint pair rather than the solid button fill. */
.ub-forum-topic__op-badge {
    padding: 0.1rem 0.5rem;
    border-radius: var(--ub-radius-pill);
    background: var(--ub-accent-100);
    color: var(--ub-accent-700);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
    font-weight: 700;
}
.ub-forum-topic__timestamp {
    margin-left: auto;
    color: var(--ub-ink-muted);
    font-family: var(--ub-font-ui);
    font-size: var(--ub-text-xs);
}

.ub-forum-topic__body {
    color: var(--ub-ink);
    line-height: var(--ub-leading-body);
}

.ub-forum-topic__post-actions {
    display: flex;
    align-items: center;
    gap: var(--ub-space-4);
    margin-top: var(--ub-space-4);
}

.ub-forum-topic__reaction {
    display: inline-flex;
    align-items: center;
    gap: var(--ub-space-1);
    padding: var(--ub-space-1) var(--ub-space-3);
    border: var(--ub-rule-strong);
    border-radius: var(--ub-radius-pill);
    background: transparent;
    color: var(--ub-ink-muted);
    font: inherit;
    font-size: var(--ub-text-sm);
    cursor: pointer;
    transition: border-color var(--ub-duration-fast) var(--ub-ease),
                color var(--ub-duration-fast) var(--ub-ease);
}
.ub-forum-topic__reaction:hover {
    border-color: var(--ub-ink);
    color: var(--ub-ink);
}
.ub-forum-topic__reaction--active {
    border-color: var(--ub-accent-500);
    color: var(--ub-accent-700);
}
.ub-forum-topic__reaction-count {
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-sm);
}

.ub-forum-topic__report {
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-sm);
}
.ub-forum-topic__report summary {
    cursor: pointer;
}
.ub-forum-topic__report form {
    display: flex;
    gap: var(--ub-space-2);
    margin-top: var(--ub-space-2);
}
.ub-forum-topic__report input[type="text"] {
    flex: 1;
    padding: 0.4rem 0.65rem;
    background: var(--ub-paper-sunken);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-sm);
    color: var(--ub-ink);
    font: inherit;
    font-size: var(--ub-text-sm);
}
.ub-forum-topic__report input[type="text"]:focus {
    outline: none;
    border-color: var(--ub-accent-500);
    box-shadow: var(--ub-focus-ring);
}

.ub-forum-topic__reply-box {
    margin-top: var(--ub-space-6);
}
.ub-forum-topic__reply-box h2 {
    margin: 0 0 var(--ub-space-3);
    color: var(--ub-ink);
    font-family: var(--ub-font-heading);
    font-size: var(--ub-text-lg);
}
.ub-forum-topic__reply-box textarea {
    display: block;
    width: 100%;
    margin-bottom: var(--ub-space-3);
    padding: 0.625rem 0.75rem;
    background: var(--ub-paper-sunken);
    border: var(--ub-rule);
    border-radius: var(--ub-radius-sm);
    color: var(--ub-ink);
    font: inherit;
    font-size: var(--ub-text-base);
    resize: vertical;
}
.ub-forum-topic__reply-box textarea:focus {
    outline: none;
    border-color: var(--ub-accent-500);
    box-shadow: var(--ub-focus-ring);
}

.ub-forum-topic__signin-prompt {
    margin-top: var(--ub-space-6);
    color: var(--ub-ink-muted);
    font-size: var(--ub-text-sm);
}
.ub-forum-topic__signin-prompt a {
    color: var(--ub-accent-700);
}