/* ===========================================
   Board - Theme System

   Theme colors are loaded from the database at /theme/{id}.css
   The :root variables below serve as a fallback if theme CSS
   fails to load.
   =========================================== */

:root {
    /* ===== LIGHT THEME (Default) ===== */

    /* Backgrounds */
    --bg: #faf8f8;
    --bg-secondary: #f5f0f0;
    --bg-tertiary: #efe8e8;
    --surface: #ffffff;

    /* Text */
    --text: #2d2325;
    --text-secondary: #5c4a4e;
    --text-muted: #8a7a7e;

    /* Borders */
    --border: #e0d0d4;
    --border-subtle: #ebe3e5;

    /* Accent (primary brand color) */
    --accent: #d65d8a;
    --accent-hover: #c44a78;
    --accent-subtle: #fdf0f4;

    /* Links */
    --link: #c44a78;
    --link-hover: #a83a65;

    /* Buttons - Primary */
    --btn-primary-bg: #d65d8a;
    --btn-primary-text: #ffffff;
    --btn-primary-hover: #c44a78;

    /* Buttons - Secondary */
    --btn-secondary-bg: #f5f0f0;
    --btn-secondary-text: #2d2325;
    --btn-secondary-border: #e0d0d4;
    --btn-secondary-hover: #efe8e8;

    /* Buttons - Danger */
    --btn-danger-bg: #d64545;
    --btn-danger-text: #ffffff;
    --btn-danger-hover: #c03030;

    /* Buttons - Warning */
    --btn-warning-bg: #e6a23c;
    --btn-warning-text: #2d2325;
    --btn-warning-hover: #d4922e;

    /* Status colors */
    --status-success: #4a9d5b;
    --status-error: #d64545;
    --status-warning: #e6a23c;
    --status-info: #5b8dd6;

    /* Messages - Success */
    --msg-success-bg: #eef7f0;
    --msg-success-border: #4a9d5b;
    --msg-success-text: #2d5a35;

    /* Messages - Error */
    --msg-error-bg: #fdf0f0;
    --msg-error-border: #d64545;
    --msg-error-text: #8b2020;

    /* Messages - Info */
    --msg-info-bg: #f0f5fd;
    --msg-info-border: #5b8dd6;
    --msg-info-text: #2a4a70;

    /* Messages - Warning */
    --msg-warning-bg: #fdf8f0;
    --msg-warning-border: #e6a23c;
    --msg-warning-text: #6b4a15;

    /* Admin highlight */
    --admin-bg: #d65d8a;
    --admin-text: #ffffff;

    /* Table rows */
    --row-even: #fdfcfc;
    --row-odd: #faf8f8;
    --row-hover: #fdf0f4;

    /* Shadows */
    --shadow: rgba(45, 35, 37, 0.08);
    --shadow-medium: rgba(45, 35, 37, 0.12);
    --shadow-strong: rgba(45, 35, 37, 0.16);

    /* Misc */
    --code-bg: #f5f0f0;
    --highlight: #fdf0f4;

    /* Layout constants */
    --border-radius: 8px;
    --border-radius-small: 6px;
    --border-radius-large: 12px;
    --transition: 150ms ease;
}

/* ===========================================
   BASE STYLES
   =========================================== */

* {
    box-sizing: border-box;
}

body {
    background-color: var(--bg);
    color: var(--text);
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
    font-size: 16px;
    line-height: 1.6;
    margin: 0;
    padding: 1rem;
}

/* Typography */
h1, h2, h3, h4, h5, h6 {
    color: var(--text);
    margin-top: 0;
    margin-bottom: 0.75rem;
    font-weight: 600;
}

h1 { font-size: 1.75rem; }
h2 { font-size: 1.5rem; }
h3 { font-size: 1.25rem; }
h4 { font-size: 1.125rem; }
h5 { font-size: 1rem; }
h6 { font-size: 0.875rem; }

/* Links */
a {
    color: var(--link);
    text-decoration: none;
    transition: color var(--transition);
}

a:hover {
    color: var(--link-hover);
    text-decoration: underline;
}

/* Code */
code {
    background-color: var(--code-bg);
    padding: 0.2rem 0.4rem;
    border-radius: var(--border-radius-small);
    font-size: 0.875rem;
}

pre {
    background-color: var(--code-bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.875rem;
}

pre code {
    background: none;
    padding: 0;
}

/* ===========================================
   LAYOUT
   =========================================== */

#container {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-large);
    box-shadow: 0 2px 8px var(--shadow);
    margin: 0 auto;
    max-width: 1600px;
    overflow: hidden;
}

#header {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--accent);
    padding: 0.75rem;
    text-align: center;
}

#header h1 {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
}

/* Sidebar + Main content layout */
#layout {
    display: flex;
    min-height: 400px;
}

#main {
    flex: 1;
    min-width: 0; /* Prevent flex item overflow */
}

.content {
    padding: 1rem 1.5rem;
}

/* Section headings inside main */
#main > h3,
#main > h4 {
    margin: 1.5rem 1.5rem 0.75rem 1.5rem;
}

#main > h3:first-of-type {
    margin-top: 1rem;
}

#main > p {
    margin: 0.75rem 1.5rem;
}

/* ===========================================
   NAVIGATION
   =========================================== */

/* Sidebar navigation */
#menu {
    background-color: var(--bg-secondary);
    border-right: 2px solid var(--accent);
    border-bottom: 2px solid var(--accent);
    border-bottom-right-radius: var(--border-radius);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1rem 0.75rem;
    width: 160px;
    flex-shrink: 0;
}

#menu a,
#menu .menu-logout-btn {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-small);
    color: var(--text);
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    text-decoration: none;
    transition: background-color var(--transition), border-color var(--transition);
    cursor: pointer;
    font-family: inherit;
    text-align: left;
    width: 100%;
}

#menu a:hover,
#menu .menu-logout-btn:hover {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
    text-decoration: none;
}

#menu .menu-logout-form {
    margin: 0;
    padding: 0;
}

#menu .menu-user {
    margin-top: auto; /* Push user info and logout to bottom */
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    color: var(--text-primary);
    border-top: 1px solid var(--border-subtle);
    text-decoration: none;
}

#menu .menu-user:hover {
    color: var(--accent);
}

#menu .admin-link {
    background-color: var(--admin-bg);
    color: var(--admin-text);
    border-color: var(--admin-bg);
}

#menu .admin-link:hover {
    background-color: var(--accent-hover);
    border-color: var(--accent-hover);
}

/* Profile sub-navigation */
.profile-subnav {
    background-color: var(--bg-secondary);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    flex-wrap: wrap;
    margin: 0.75rem 1.5rem;
}

.profile-subnav a {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-small);
    color: var(--text);
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    transition: background-color var(--transition), border-color var(--transition);
}

.profile-subnav a:hover {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
    text-decoration: none;
}

/* Theme switcher */
.theme-switcher {
    margin-left: auto;
    display: flex;
    gap: 0.25rem;
    background-color: var(--surface);
    padding: 0.25rem;
    border-radius: var(--border-radius-large);
    border: 1px solid var(--border);
    flex-shrink: 0;
}

.theme-btn {
    background-color: transparent;
    border: 1px solid transparent;
    border-radius: var(--border-radius-small);
    color: var(--text-muted);
    padding: 0.5rem;
    font-size: 1.25rem;
    cursor: pointer;
    transition: background-color var(--transition), color var(--transition);
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
}

.theme-btn:hover {
    background-color: var(--accent-subtle);
    color: var(--accent);
}

.theme-btn.active {
    background-color: var(--accent);
    color: var(--btn-primary-text);
    border-color: var(--accent);
}

/* ===========================================
   BUTTONS
   =========================================== */

button,
input[type="submit"],
input[type="button"],
.btn {
    background-color: var(--btn-primary-bg);
    border: 1px solid var(--btn-primary-bg);
    border-radius: var(--border-radius-small);
    color: var(--btn-primary-text);
    cursor: pointer;
    font-size: 1rem;
    font-weight: 500;
    font-family: inherit;
    padding: 0.5rem 1.5rem;
    transition: background-color var(--transition), border-color var(--transition);
    display: inline-block;
    text-align: center;
    text-decoration: none;
}

button:hover,
input[type="submit"]:hover,
input[type="button"]:hover,
.btn:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
    text-decoration: none;
}

/* Button variants */
.btn-primary {
    background-color: var(--btn-primary-bg);
    border-color: var(--btn-primary-bg);
    color: var(--btn-primary-text);
}

.btn-primary:hover {
    background-color: var(--btn-primary-hover);
    border-color: var(--btn-primary-hover);
}

.btn-secondary {
    background-color: var(--btn-secondary-bg);
    border-color: var(--btn-secondary-border);
    color: var(--btn-secondary-text);
}

.btn-secondary:hover {
    background-color: var(--btn-secondary-hover);
    border-color: var(--accent);
}

.btn-danger {
    background-color: var(--btn-danger-bg);
    border-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
}

.btn-danger:hover {
    background-color: var(--btn-danger-hover);
    border-color: var(--btn-danger-hover);
}

.btn-warning {
    background-color: var(--btn-warning-bg);
    border-color: var(--btn-warning-bg);
    color: var(--btn-warning-text);
}

.btn-warning:hover {
    background-color: var(--btn-warning-hover);
    border-color: var(--btn-warning-hover);
}

.btn-small {
    font-size: 0.8125rem;
    padding: 0.3rem 0.75rem;
}

/* Link styled as button */
a.btn {
    display: inline-block;
}

/* ===========================================
   FORMS
   =========================================== */

form {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-large);
    padding: 1.25rem;
    margin: 1rem 1.5rem;
    box-shadow: 0 2px 4px var(--shadow);
}

/* Inline forms (no box styling) */
.inline-form,
form.inline-form {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0;
    box-shadow: none;
    display: inline-block;
}

.form-container {
    margin: 1rem 1.5rem;
}

.form-group {
    margin-bottom: 1rem;
}

label {
    color: var(--text-secondary);
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: 0.5rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

input[type="text"],
input[type="email"],
input[type="password"],
input[type="url"],
input[type="number"],
textarea,
select {
    background-color: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-small);
    color: var(--text);
    font-size: 1rem;
    font-family: inherit;
    padding: 0.5rem 0.75rem;
    width: 100%;
    transition: border-color var(--transition);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
    border-color: var(--accent);
    outline: none;
}

small {
    display: block;
    color: var(--text-muted);
    font-size: 0.8125rem;
    margin-top: 0.25rem;
}

/* ===========================================
   TABLES
   =========================================== */

table {
    background-color: var(--surface);
    border-collapse: separate;
    border-spacing: 0;
    border-radius: var(--border-radius);
    overflow: hidden;
    width: calc(100% - 3rem);
    margin: 1rem 1.5rem;
    border: 1px solid var(--border);
}

th {
    background-color: var(--bg-secondary);
    border-bottom: 2px solid var(--border);
    color: var(--text);
    font-weight: 600;
    padding: 0.5rem 0.75rem;
    text-align: left;
    font-size: 0.875rem;
}

td {
    border-bottom: 1px solid var(--border-subtle);
    padding: 0.5rem 0.75rem;
    vertical-align: middle;
}

tr:last-child td {
    border-bottom: none;
}

tr:nth-child(even) {
    background-color: var(--row-even);
}

tr:nth-child(odd) {
    background-color: var(--row-odd);
}

tr:hover {
    background-color: var(--row-hover);
}

/* Table variants */
.keys-table,
.sessions-table,
.invite-table,
.data-table {
    width: calc(100% - 3rem);
    margin: 0.5rem 1.5rem;
}

.sessions-table .current-session,
tr.current-session {
    background-color: var(--highlight);
    border-left: 3px solid var(--accent);
}

/* ===========================================
   PAGINATION
   =========================================== */

.pagination {
    display: flex;
    gap: 1rem;
    justify-content: center;
    margin: 1rem 1.5rem;
    padding: 0.75rem 0;
}

.pagination a {
    color: var(--link);
    text-decoration: none;
    padding: 0.5rem 1rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    background-color: var(--surface);
    transition: all 0.2s ease;
}

.pagination a:hover {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
    color: var(--accent-hover);
}

/* ===========================================
   MESSAGES & ALERTS
   =========================================== */

.success-message {
    background-color: var(--msg-success-bg);
    border: 1px solid var(--msg-success-border);
    border-radius: var(--border-radius);
    color: var(--msg-success-text);
    padding: 1rem;
    margin: 0 1.5rem 1rem 1.5rem;
}

.error-message {
    background-color: var(--msg-error-bg);
    border: 1px solid var(--msg-error-border);
    border-radius: var(--border-radius);
    color: var(--msg-error-text);
    padding: 1rem;
    margin: 0 1.5rem 1rem 1.5rem;
}

.info-message {
    background-color: var(--msg-info-bg);
    border: 1px solid var(--msg-info-border);
    border-radius: var(--border-radius);
    color: var(--msg-info-text);
    padding: 1rem;
    margin-bottom: 1rem;
}

.alert {
    padding: 1rem;
    margin: 1rem 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid;
}

.alert-info {
    background-color: var(--msg-info-bg);
    border-color: var(--msg-info-border);
    color: var(--msg-info-text);
}

.alert-warning {
    background-color: var(--msg-warning-bg);
    border-color: var(--msg-warning-border);
    color: var(--msg-warning-text);
}

/* ===========================================
   NOTICES
   =========================================== */

/* Banner notices (top of page, outside container) */
.notice-banner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    margin: 0 auto 0.5rem auto;
    max-width: 1200px;
    border-radius: var(--border-radius);
}

/* Inline notices (inside content area) */
.notice-inline {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.5rem 1rem;
    margin: 1rem 1.5rem;
    border-radius: var(--border-radius);
    border: 1px solid;
}

.notice-content {
    flex: 1;
}

.notice-title {
    display: inline;
    font-weight: 600;
}

.notice-body {
    display: inline;
    margin-left: 0.5rem;
}

/* Notice type colors */
.notice-info {
    background-color: var(--msg-info-bg);
    border-color: var(--msg-info-border);
    color: var(--msg-info-text);
}

.notice-warning {
    background-color: var(--msg-warning-bg);
    border-color: var(--msg-warning-border);
    color: var(--msg-warning-text);
}

.notice-action {
    background-color: var(--msg-error-bg);
    border-color: var(--msg-error-border);
    color: var(--msg-error-text);
}

.notice-maintenance {
    background-color: #2d2325;
    border-color: #2d2325;
    color: #ffffff;
}

.notice-maintenance .notice-title {
    color: #ffffff;
}

/* Dismiss button */
.notice-dismiss-form {
    background: transparent;
    border: none;
    padding: 0;
    margin: 0 0 0 1rem;
    box-shadow: none;
    flex-shrink: 0;
}

.notice-dismiss-btn {
    background: transparent;
    border: none;
    color: inherit;
    font-size: 1.25rem;
    line-height: 1;
    padding: 0;
    cursor: pointer;
    opacity: 0.7;
    transition: opacity var(--transition);
    width: auto;
}

.notice-dismiss-btn:hover {
    opacity: 1;
    background: transparent;
}

/* Notice type badges for admin */
.notice-type-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: var(--border-radius);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.notice-type-info {
    background-color: var(--msg-info-bg);
    color: var(--msg-info-text);
}

.notice-type-warning {
    background-color: var(--msg-warning-bg);
    color: var(--msg-warning-text);
}

.notice-type-action {
    background-color: var(--msg-error-bg);
    color: var(--msg-error-text);
}

.notice-type-maintenance {
    background-color: #2d2325;
    color: #ffffff;
}

/* ===========================================
   STATUS BADGES
   =========================================== */

.status-active {
    color: var(--status-success);
    font-weight: 500;
}

.status-deprecated {
    color: var(--status-warning);
    font-weight: 500;
}

.status-retired {
    color: var(--text-muted);
    font-weight: 500;
}

/* ===========================================
   AUTH PAGES
   =========================================== */

.auth-container {
    max-width: 500px;
    margin: 0 auto;
    padding: 1.5rem;
}

.auth-container h2 {
    margin-bottom: 0.5rem;
}

.auth-form {
    background-color: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--border-radius-large);
    padding: 1.5rem;
    margin-top: 1rem;
    box-shadow: 0 2px 8px var(--shadow);
}

.auth-form hr {
    border: none;
    border-top: 1px solid var(--border-subtle);
    margin: 1.5rem 0;
}

.auth-links {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
    text-align: center;
}

.auth-links a {
    font-size: 0.875rem;
}

.setup-intro {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.form-section {
    margin-bottom: 1.5rem;
}

.form-section h3 {
    margin-bottom: 0.5rem;
    font-size: 1.125rem;
}

/* ===========================================
   ADMIN PAGES
   =========================================== */

.board-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 1rem;
    margin: 1rem 1.5rem;
}

.board-stats-item {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 1rem;
    text-align: center;
}

.board-stats-label {
    color: var(--text-secondary);
    display: block;
    font-size: 0.875rem;
    text-transform: uppercase;
    letter-spacing: 0.025em;
}

.board-stats-value {
    color: var(--accent);
    display: block;
    font-size: 2rem;
    font-weight: 700;
}

.admin-links {
    margin: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.key-actions {
    margin: 1rem 1.5rem;
}

.help-text {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin: 0.25rem 0 0.75rem 0;
}

p.help-text {
    margin-left: 1.5rem;
    margin-right: 1.5rem;
}

/* ===========================================
   MEMBER PROFILE
   =========================================== */

.member-profile-container {
    padding: 1.5rem;
}

.member-profile-card {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-large);
    padding: 2rem;
    box-shadow: 0 2px 4px var(--shadow);
}

.member-profile-header {
    display: flex;
    align-items: flex-start;
    gap: 2rem;
    margin-bottom: 2rem;
    padding-bottom: 2rem;
    border-bottom: 1px solid var(--border-subtle);
}

.profile-photo {
    flex-shrink: 0;
    width: 150px;
    height: 150px;
    border-radius: var(--border-radius);
    overflow: hidden;
    background-color: var(--bg);
    display: flex;
    align-items: center;
    justify-content: center;
    border: 2px solid var(--border);
    color: var(--text-muted);
    font-size: 0.875rem;
}

.profile-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.profile-info {
    flex: 1;
}

.profile-name {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--text);
    margin-bottom: 0.5rem;
}

.banned-badge {
    display: inline-block;
    background-color: var(--btn-danger-bg);
    color: var(--btn-danger-text);
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.15rem 0.5rem;
    border-radius: 3px;
    vertical-align: middle;
    margin-left: 0.5rem;
    letter-spacing: 0.05em;
}

.ban-info {
    margin-top: 1rem;
    padding: 0.75rem;
    background-color: var(--msg-error-bg);
    border: 1px solid var(--msg-error-border);
    border-radius: var(--border-radius);
}

.ban-reason {
    color: var(--msg-error-text);
}

.admin-actions {
    margin-top: 1.5rem;
    padding-top: 1rem;
    border-top: 1px solid var(--border-subtle);
}

.admin-action-form {
    display: inline-block;
}

.ban-form {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
    max-width: 400px;
}

.ban-form .form-group {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.ban-form label {
    font-size: 0.875rem;
    color: var(--text-secondary);
}

.ban-form input[type="text"] {
    padding: 0.5rem;
    border: 1px solid var(--border);
    border-radius: var(--border-radius);
    font-size: 0.875rem;
}

.btn-success {
    background-color: var(--status-success);
    color: #ffffff;
    border: none;
    padding: 0.5rem 1rem;
    border-radius: var(--border-radius);
    cursor: pointer;
    font-weight: 500;
}

.btn-success:hover {
    background-color: #3d8a4d;
}

.profile-field {
    margin-bottom: 1rem;
}

.profile-field-label {
    color: var(--text-muted);
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: 0.25rem;
    font-weight: 600;
}

.profile-field-value {
    color: var(--text);
}

.profile-bio {
    margin-top: 1.5rem;
    padding-top: 1.5rem;
    border-top: 1px solid var(--border-subtle);
}

.profile-posts {
    margin-top: 2rem;
}

.profile-posts-header {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 1rem;
}

.no-posts {
    text-align: center;
    color: var(--text-muted);
    padding: 2rem;
    background-color: var(--bg);
    border-radius: var(--border-radius);
    border: 1px dashed var(--border);
}

.empty-state {
    text-align: center;
    color: var(--text-muted);
    padding: 3rem 2rem;
    margin: 1.5rem;
    background-color: var(--bg);
    border-radius: var(--border-radius);
    border: 1px dashed var(--border);
}

.empty-state p {
    margin: 0;
    font-size: 1.125rem;
}

/* ===========================================
   THREADS & POSTS
   =========================================== */

.subject {
    display: block;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--text);
    margin: 1rem 1.5rem 0.5rem 1.5rem;
}

.threadpost-bubble {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-left: 3px solid var(--accent);
    border-radius: var(--border-radius);
    margin: 0.75rem 1.5rem;
    padding: 1rem;
}

.threadpost-header {
    color: var(--text-secondary);
    font-size: 0.875rem;
    margin-bottom: 0.5rem;
}

.threadpost-body {
    color: var(--text);
    line-height: 1.6;
}

.threadpost-body blockquote {
    margin: 0.5rem 0;
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--border);
    background-color: var(--bg);
    border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
    color: var(--text-secondary);
}

.threadpost-body blockquote p {
    margin: 0;
}

.threadpost-body pre {
    background-color: var(--code-bg);
    border: 1px solid var(--border);
    border-left: 3px solid var(--accent);
    border-radius: var(--border-radius-small);
    padding: 1rem;
    overflow-x: auto;
    font-size: 0.875rem;
}

.permalink {
    color: var(--text-muted);
}

.permalink:hover {
    color: var(--accent);
}

.col-user {
    width: 12%;
    white-space: nowrap;
    text-align: left;
}

.col-subject {
    font-weight: 500;
    width: auto;
    text-align: left;
}

.col-subject p {
    display: inline;
    margin: 0;
}

.col-posts {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.col-lastuser {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.col-date {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

/* ===========================================
   BACK LINK
   =========================================== */

.back-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    color: var(--link);
    padding: 0.5rem 1rem;
    margin: 1rem 1.5rem;
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-small);
    background-color: var(--surface);
    font-size: 0.875rem;
    transition: background-color var(--transition), border-color var(--transition);
}

.back-link:before {
    content: "←";
    font-size: 1.125rem;
}

.back-link:hover {
    background-color: var(--accent-subtle);
    border-color: var(--accent);
    text-decoration: none;
}

/* ===========================================
   PAGE TITLES
   =========================================== */

.page-title {
    margin: 1rem 1.5rem 0.5rem 1.5rem;
}

/* ===========================================
   FOOTER
   =========================================== */

#footer {
    color: var(--text-muted);
    font-size: 0.875rem;
    margin-top: 2rem;
    padding: 1rem;
    text-align: center;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
}

.github-link {
    color: var(--text-muted);
    transition: color var(--transition);
}

.github-link:hover {
    color: var(--text);
}

/* ===========================================
   FORMATTING GUIDE
   =========================================== */

.formatting-guide {
    padding: 1rem 1.5rem;
}

.formatting-section {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius);
    padding: 1.5rem;
    margin-bottom: 1.5rem;
}

.formatting-section h4 {
    margin: 0 0 0.5rem 0;
    font-size: 1.25rem;
}

.formatting-section h5 {
    margin: 1.5rem 0 0.75rem 0;
    color: var(--text-secondary);
    font-size: 1rem;
    border-bottom: 1px solid var(--border-subtle);
    padding-bottom: 0.5rem;
}

.section-description {
    color: var(--text-secondary);
    margin-bottom: 1rem;
}

.formatting-tip {
    font-size: 0.875rem;
    color: var(--text-muted);
    background-color: var(--bg);
    padding: 0.5rem 0.75rem;
    border-left: 3px solid var(--accent);
    border-radius: 0 var(--border-radius-small) var(--border-radius-small) 0;
    margin: 1rem 0;
}

.formatting-examples {
    margin-top: 1rem;
}

.formatting-grid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.formatting-item {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bg);
    border-radius: var(--border-radius-small);
}

.formatting-item code {
    background-color: var(--surface);
    border: 1px solid var(--border-subtle);
}

.formatting-item .arrow {
    color: var(--text-muted);
    flex-shrink: 0;
}

.example {
    background-color: var(--bg);
    border: 1px solid var(--border-subtle);
    border-radius: var(--border-radius-small);
    margin-bottom: 1rem;
    overflow: hidden;
}

.example-input,
.example-output {
    padding: 1rem;
}

.example-input {
    border-bottom: 1px solid var(--border-subtle);
}

.example-input pre,
.example-output pre {
    margin: 0.5rem 0 0 0;
    padding: 0.75rem;
    background-color: var(--surface);
    border-radius: var(--border-radius-small);
}

.rendered {
    margin-top: 0.5rem;
    padding: 0.75rem;
    background-color: var(--surface);
    border-radius: var(--border-radius-small);
}

.not-allowed {
    background-color: var(--msg-error-bg);
    border: 1px solid var(--msg-error-border);
    border-radius: var(--border-radius-small);
    padding: 1rem;
}

.not-allowed p {
    margin: 0 0 0.75rem 0;
    color: var(--text-secondary);
}

.not-allowed .formatting-item {
    background-color: var(--surface);
}

/* Form help links */
.form-help-link {
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--text-muted);
    margin-left: 0.5rem;
}

.form-help-link:hover {
    color: var(--link);
}

/* ===========================================
   UTILITY CLASSES
   =========================================== */

.text-muted {
    color: var(--text-muted);
}

.text-secondary {
    color: var(--text-secondary);
}

.hidden {
    display: none;
}

/* ===========================================
   RESPONSIVE
   =========================================== */

@media (max-width: 768px) {
    body {
        padding: 0.5rem;
    }

    #container {
        border-radius: var(--border-radius);
    }

    /* Collapse sidebar to horizontal on tablet/mobile */
    #layout {
        flex-direction: column;
    }

    #menu {
        flex-direction: row;
        flex-wrap: wrap;
        width: 100%;
        border-right: none;
        border-bottom: 2px solid var(--accent);
        padding: 0.5rem;
        gap: 0.5rem;
    }

    #menu a,
    #menu .menu-logout-btn {
        width: auto;
        padding: 0.375rem 0.75rem;
    }

    #menu .menu-logout-form {
        margin-top: 0;
    }

    #menu .menu-user {
        margin-top: 0;
        border-top: none;
        border-left: 1px solid var(--border-subtle);
        padding: 0.375rem 0.75rem;
    }

    form {
        margin: 1rem;
        padding: 1rem;
    }

    table {
        width: calc(100% - 2rem);
        margin: 1rem;
        font-size: 0.875rem;
    }

    th, td {
        padding: 0.375rem 0.5rem;
    }

    .member-profile-header {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .profile-photo {
        width: 120px;
        height: 120px;
    }

    .board-stats {
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem;
        margin: 1rem;
    }

    .threadpost-bubble {
        margin: 0.75rem 1rem;
    }

    .subject {
        margin: 1rem;
    }
}

@media (max-width: 480px) {
    body {
        padding: 0;
        font-size: 15px;
    }

    #container {
        border-radius: 0;
        border-left: none;
        border-right: none;
    }

    #menu {
        flex-wrap: wrap;
        gap: 0.25rem;
    }

    .theme-switcher {
        margin-left: 0;
        margin-top: 0.5rem;
        width: 100%;
        justify-content: center;
    }

    .theme-btn {
        flex: 1;
    }

    /* Prevent iOS zoom on inputs */
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="url"],
    textarea,
    select {
        font-size: 16px;
    }

    button,
    input[type="submit"] {
        width: 100%;
        padding: 0.75rem;
    }

    .auth-container {
        padding: 1rem;
    }

    .auth-form {
        padding: 1rem;
    }
}