/*
 * Shared components used across pages. Page files only add what differs.
 * Selectors keep the specificity of the page-scoped rules they replaced,
 * so page overrides and plugin styles cascade exactly as before.
 */

/* Page container (<main class="page …">); pages may override max-width. */
.page { max-width: var(--page-width); margin: 0 auto; padding: 0 1rem 2rem; }
.page--narrow { max-width: var(--page-width-narrow); }

/* _breadcrumb.html.twig */
.page .breadcrumb { font-size: 0.9rem; margin-bottom: 1rem; color: var(--text-muted); }
.page .breadcrumb a { color: var(--link); }
.page .breadcrumb a:hover { color: var(--link-hover); }

/* Bordered listing tables (forums, threads, members, …) */
.data-table { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.data-table th,
.data-table td { border: 1px solid var(--border); padding: 0.5rem 0.75rem; text-align: left; vertical-align: top; }
.data-table thead th { background: var(--thead); font-weight: 600; }
.page .empty-cell { color: var(--text-faint); font-style: italic; }

/* Stacked forms (new thread, reply, edit, report, moderation) */
.form-stack form label { display: block; font-weight: 600; margin-top: 0.75rem; }
.form-stack form input[type="text"],
.form-stack form textarea,
.form-stack form input[type="file"] { width: 100%; max-width: 100%; margin-top: 0.25rem; padding: 0.35rem 0.5rem; font: inherit; background: var(--input-bg); color: var(--text); border: 1px solid var(--input-border); border-radius: var(--radius); }
.form-stack form .form-text { font-size: 0.88rem; color: var(--text-muted); margin-top: 0.25rem; }
.form-stack form textarea.post-body-input { min-height: 14rem; resize: vertical; }
.form-stack .form-error { color: var(--error); font-size: 0.9rem; margin-top: 0.25rem; }
.form-stack button[type="submit"] { padding: 0.4rem 0.9rem; font: inherit; cursor: pointer; background: var(--button-bg); color: var(--text); border: 1px solid var(--button-border); border-radius: var(--radius); }
.form-stack form > button[type="submit"] { margin-top: 1rem; }
.form-stack .actions { margin-top: 1rem; display: flex; gap: 1rem; align-items: center; }

/* Link styled as a button (e.g. Reply / Report thread) */
.action-button { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.75rem; font: inherit; color: var(--text); text-decoration: none; background: var(--button-bg); border: 1px solid var(--button-border); border-radius: var(--radius); }
a.action-button:hover { color: var(--text); border-color: var(--text-muted); }
/* Action the user may not use yet (e.g. unconfirmed email): not clickable, explains why on hover/focus */
.action-button-locked { position: relative; cursor: not-allowed; }
.action-button-locked:hover,
.action-button-locked:focus { color: var(--error); border-color: var(--error); background: var(--flash-error-bg); }
.action-button-hint { display: none; position: absolute; top: calc(100% + 0.3rem); left: 0; z-index: 10; padding: 0.25rem 0.5rem; font-size: 0.85rem; font-weight: normal; white-space: nowrap; background: var(--flash-error-bg); color: var(--flash-error-text); border: 1px solid var(--error); border-radius: var(--radius); }
.action-button-locked:hover .action-button-hint,
.action-button-locked:focus .action-button-hint { display: block; }

/* User signature under posts and private messages */
.signature {
    margin-top: 0.75rem;
    padding-top: 0.5rem;
    border-top: 1px solid var(--border);
    color: var(--text-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    word-break: break-word;
}
.signature .bbcode-img { max-width: 100%; }

/* BBCode lists sit in the text flow: each line break is one line, no extra space around lists. */
.bbcode-list { margin: 0; }