/*
 * MarketPawns Board - shared standalone theme layer.
 *
 * These pages are rendered outside the main layout, so they do not inherit
 * the same theme bootstrapping sequence as the primary site shell. This file
 * bridges that gap by:
 * 1. Defining semantic aliases that legacy Board templates expect.
 * 2. Applying a dark visual treatment that matches the main site's tokens.
 * 3. Overriding page-local CSS with a single consistent surface model.
 *
 * The rules are intentionally scoped to the Board entry points only.
 */

:root {
  /* Legacy aliases used by older Board templates. */
  --neutral-tertiary: var(--surface-sunken);
  --neutral-quaternary: var(--border-light);
  --border-radius-sm: 6px;
  --border-radius-md: 10px;
  --font-weight-medium: 500;
  --font-weight-semibold: 600;
  --spacing-2: var(--space-2);
  --spacing-4: var(--space-4);
  --color-text-primary: var(--text-primary);
  --accent-dark: var(--accent-primary-hover);
  --warning-primary: var(--accent-warning);
  --success-primary: var(--accent-success);
  --error-primary: var(--accent-danger);
  --brand-primary-rgb: 44, 46, 97;
  --warning-light: rgba(245, 185, 66, 0.14);
  --warning-dark: #8f6510;
  --success-light: rgba(40, 167, 69, 0.14);
  --success-dark: #1f7a3f;
  --error-light: rgba(220, 53, 69, 0.12);
  --error-dark: #a92a38;
}

html[data-theme="dark"] {
  /* Dark aliases aligned with the main site's dark token set. */
  --neutral-tertiary: #202430;
  --neutral-quaternary: #303544;
  --brand-primary-rgb: 140, 144, 232;
  --warning-light: rgba(255, 182, 72, 0.16);
  --warning-dark: #ffd48d;
  --success-light: rgba(52, 199, 89, 0.16);
  --success-dark: #8fe2a7;
  --error-light: rgba(255, 107, 107, 0.14);
  --error-dark: #ffb0b0;
}

html[data-theme="dark"] body {
  /*
   * Layered background keeps Board visually tied to the main site's dark
   * sections instead of looking like a flat dark rectangle.
   */
  background:
    radial-gradient(circle at top left, rgba(214, 181, 108, 0.09), transparent 26%),
    radial-gradient(circle at top right, rgba(140, 144, 232, 0.12), transparent 32%),
    linear-gradient(180deg, #0f1117 0%, var(--neutral-primary) 100%) !important;
  background-attachment: fixed;
  min-height: 100vh;
}

html[data-theme="dark"] .board-container,
html[data-theme="dark"] .topic-container,
html[data-theme="dark"] .admin-container {
  position: relative;
}

html[data-theme="dark"] .board-header,
html[data-theme="dark"] .admin-header,
html[data-theme="dark"] .topic-header {
  background:
    linear-gradient(135deg, rgba(214, 181, 108, 0.16), rgba(140, 144, 232, 0.08)),
    linear-gradient(135deg, rgba(19, 21, 28, 0.96), rgba(28, 31, 41, 0.98)) !important;
  border: 1px solid rgba(214, 181, 108, 0.24) !important;
  box-shadow:
    0 18px 34px rgba(0, 0, 0, 0.34),
    inset 0 1px 0 rgba(255, 255, 255, 0.04) !important;
}

html[data-theme="dark"] .board-title,
html[data-theme="dark"] .admin-title,
html[data-theme="dark"] .topic-title {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

html[data-theme="dark"] .board-subtitle,
html[data-theme="dark"] .welcome-text,
html[data-theme="dark"] .topic-meta,
html[data-theme="dark"] .breadcrumb,
html[data-theme="dark"] .section-description,
html[data-theme="dark"] .form-text,
html[data-theme="dark"] .help-text,
html[data-theme="dark"] .format-help,
html[data-theme="dark"] .guidelines-list li,
html[data-theme="dark"] .empty-state,
html[data-theme="dark"] .text-muted {
  color: var(--text-secondary) !important;
}

html[data-theme="dark"] .board-icon {
  color: var(--interactive-bg) !important;
}

html[data-theme="dark"] .board-card,
html[data-theme="dark"] .form-card,
html[data-theme="dark"] .sidebar-card,
html[data-theme="dark"] .message-card,
html[data-theme="dark"] .reply-form,
html[data-theme="dark"] .modal-content,
html[data-theme="dark"] .dropdown-menu,
html[data-theme="dark"] .sections-table,
html[data-theme="dark"] .diagnostic-card,
html[data-theme="dark"] .card.diagnostic-card {
  background: linear-gradient(180deg, rgba(34, 37, 47, 0.98), rgba(27, 30, 40, 0.98)) !important;
  border: 1px solid var(--border-medium) !important;
  box-shadow:
    0 12px 30px rgba(0, 0, 0, 0.26),
    inset 0 1px 0 rgba(255, 255, 255, 0.03) !important;
}

html[data-theme="dark"] .board-card-header,
html[data-theme="dark"] .form-card-header,
html[data-theme="dark"] .sidebar-card-header,
html[data-theme="dark"] .message-header,
html[data-theme="dark"] .modal-header,
html[data-theme="dark"] .sections-table th,
html[data-theme="dark"] .card-header {
  background:
    linear-gradient(180deg, rgba(214, 181, 108, 0.16), rgba(214, 181, 108, 0.05)),
    linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(0, 0, 0, 0)),
    var(--neutral-secondary) !important;
  border-bottom: 1px solid rgba(214, 181, 108, 0.2) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .section-item,
html[data-theme="dark"] .topic-item,
html[data-theme="dark"] .topic-row,
html[data-theme="dark"] .sections-table td {
  border-color: rgba(255, 255, 255, 0.06) !important;
}

html[data-theme="dark"] .topic-item:hover,
html[data-theme="dark"] .topic-row:hover,
html[data-theme="dark"] .dropdown-item:hover {
  background-color: rgba(214, 181, 108, 0.11) !important;
}

html[data-theme="dark"] .section-link,
html[data-theme="dark"] .topic-title,
html[data-theme="dark"] .message-author,
html[data-theme="dark"] .breadcrumb a,
html[data-theme="dark"] .back-to-main-ibox {
  color: var(--brand-primary) !important;
}

html[data-theme="dark"] .section-link:hover,
html[data-theme="dark"] .topic-title:hover,
html[data-theme="dark"] .breadcrumb a:hover,
html[data-theme="dark"] .back-to-main-ibox:hover {
  color: var(--accent-primary) !important;
}

html[data-theme="dark"] .btn-board,
html[data-theme="dark"] .btn-admin,
html[data-theme="dark"] .btn-primary {
  background: linear-gradient(135deg, var(--brand-primary-dark), var(--brand-primary)) !important;
  border-color: rgba(140, 144, 232, 0.45) !important;
  color: #ffffff !important;
  box-shadow: 0 10px 20px rgba(93, 97, 201, 0.22);
}

html[data-theme="dark"] .btn-board:hover,
html[data-theme="dark"] .btn-admin:hover,
html[data-theme="dark"] .btn-primary:hover {
  background: linear-gradient(135deg, var(--brand-primary), var(--brand-primary-light)) !important;
  border-color: rgba(177, 180, 239, 0.55) !important;
  color: #ffffff !important;
}

html[data-theme="dark"] .btn-board-outline,
html[data-theme="dark"] .btn-board-outline.btn-small,
html[data-theme="dark"] .dropdown-toggle {
  background: rgba(255, 255, 255, 0.02) !important;
  border-color: rgba(214, 181, 108, 0.24) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn-board-outline:hover,
html[data-theme="dark"] .dropdown-toggle:hover {
  background: rgba(214, 181, 108, 0.12) !important;
  border-color: rgba(214, 181, 108, 0.4) !important;
}

html[data-theme="dark"] .form-control,
html[data-theme="dark"] .form-input,
html[data-theme="dark"] .form-textarea,
html[data-theme="dark"] textarea.form-control {
  background: var(--surface-sunken) !important;
  border-color: var(--border-medium) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .form-control:focus,
html[data-theme="dark"] .form-input:focus,
html[data-theme="dark"] .form-textarea:focus,
html[data-theme="dark"] textarea.form-control:focus {
  background: var(--surface-sunken) !important;
  border-color: var(--brand-primary) !important;
  box-shadow: var(--focus-ring-brand) !important;
}

html[data-theme="dark"] .form-control::placeholder,
html[data-theme="dark"] .form-input::placeholder,
html[data-theme="dark"] .form-textarea::placeholder {
  color: var(--text-muted) !important;
}

html[data-theme="dark"] .auth-panel,
html[data-theme="dark"] .recaptcha-container,
html[data-theme="dark"] .sections-table td code,
html[data-theme="dark"] .info-section,
html[data-theme="dark"] .test-result {
  background: rgba(255, 255, 255, 0.03) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .alert,
html[data-theme="dark"] .status-success,
html[data-theme="dark"] .status-error,
html[data-theme="dark"] .status-warning {
  border-width: 1px !important;
  border-style: solid !important;
}

html[data-theme="dark"] .alert-info,
html[data-theme="dark"] .info-section {
  background: rgba(53, 194, 224, 0.12) !important;
  border-color: rgba(53, 194, 224, 0.3) !important;
  color: #9ee8f5 !important;
}

html[data-theme="dark"] .alert-warning,
html[data-theme="dark"] .access-admin,
html[data-theme="dark"] .badge-pinned,
html[data-theme="dark"] .pinned-badge,
html[data-theme="dark"] .status-warning {
  background: var(--warning-light) !important;
  border-color: rgba(255, 182, 72, 0.28) !important;
  color: var(--warning-dark) !important;
}

html[data-theme="dark"] .alert-success,
html[data-theme="dark"] .access-all,
html[data-theme="dark"] .status-success {
  background: var(--success-light) !important;
  border-color: rgba(52, 199, 89, 0.28) !important;
  color: var(--success-dark) !important;
}

html[data-theme="dark"] .alert-danger,
html[data-theme="dark"] .alert-error,
html[data-theme="dark"] .badge-locked,
html[data-theme="dark"] .status-error {
  background: var(--error-light) !important;
  border-color: rgba(255, 107, 107, 0.28) !important;
  color: var(--error-dark) !important;
}

html[data-theme="dark"] .locked-badge,
html[data-theme="dark"] .section-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .admin-controls {
  background: rgba(214, 181, 108, 0.1) !important;
  border: 1px solid rgba(214, 181, 108, 0.25) !important;
}

html[data-theme="dark"] .admin-controls h4 {
  color: var(--warning-dark) !important;
}

html[data-theme="dark"] .admin-panel,
html[data-theme="dark"] .success-panel,
html[data-theme="dark"] .admin-posting-notice,
html[data-theme="dark"] .edit-window-notice,
html[data-theme="dark"] .edit-window-expired {
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25) !important;
}

html[data-theme="dark"] .modal-body {
  background: linear-gradient(180deg, rgba(34, 37, 47, 0.98), rgba(27, 30, 40, 0.98)) !important;
}

html[data-theme="dark"] .modal-title,
html[data-theme="dark"] .form-label,
html[data-theme="dark"] .diagnostic-card h4,
html[data-theme="dark"] .card-header h4 {
  color: var(--text-primary) !important;
}

html[data-theme="dark"] .btn-close {
  filter: invert(1) grayscale(100%) brightness(180%);
}

html[data-theme="dark"] .test-result {
  border-style: dashed !important;
}