/*
 * Opt-in "Neo-Brutalist" dark theme: hard edges, thick borders,
 * offset drop-shadows, monospace type, one loud accent color.
 * Scoped under html.theme-brutalist.
 */

html.theme-brutalist {
    --br-bg: #0a0a0a;
    --br-surface: #111111;
    --br-text: #f5f5f5;
    --br-text-dim: #a3a3a3;
    --br-accent: #d7ff3d;
    --br-border: #f5f5f5;
}

html.theme-brutalist body {
    background: var(--br-bg);
    color: var(--br-text);
    font-family: 'JetBrains Mono', 'Courier New', monospace;
}

/* Header / nav */
html.theme-brutalist header {
    background: #000000 !important;
    border-bottom: 3px solid var(--br-border);
    box-shadow: none;
}

html.theme-brutalist header nav {
    background: transparent !important;
}

html.theme-brutalist header span,
html.theme-brutalist header a {
    color: var(--br-text) !important;
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

html.theme-brutalist header a:hover {
    color: var(--br-accent) !important;
}

html.theme-brutalist header svg {
    fill: var(--br-text);
}

html.theme-brutalist header button.border {
    border: 2px solid var(--br-border);
    border-radius: 0;
    color: var(--br-text);
}

html.theme-brutalist header input#searchQuery {
    background: var(--br-surface);
    color: var(--br-text);
    border: 2px solid var(--br-border);
    border-radius: 0;
}

html.theme-brutalist header input#searchQuery::placeholder {
    color: var(--br-text-dim);
}

html.theme-brutalist header button[type="submit"] {
    background: var(--br-accent) !important;
    color: #0a0a0a !important;
    border: 2px solid var(--br-border);
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
}

html.theme-brutalist header button[type="submit"]:hover {
    background: var(--br-text) !important;
}

/* Quote / conversation cards */
html.theme-brutalist .quote-container {
    background: var(--br-surface);
    color: var(--br-text);
    border: 3px solid var(--br-border);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--br-accent);
    max-width: 640px;
    margin: 32px auto;
}

html.theme-brutalist .quote {
    font-family: 'JetBrains Mono', monospace;
    font-weight: 400;
    color: var(--br-text);
}

html.theme-brutalist .author {
    display: inline-block;
    margin-top: 10px;
    padding: 4px 10px;
    border: 2px solid var(--br-accent);
    color: var(--br-accent);
    text-transform: uppercase;
    font-size: 0.85em;
    letter-spacing: 0.04em;
}

html.theme-brutalist .author a {
    text-decoration: none;
    color: inherit;
}

html.theme-brutalist .quote-btn {
    background: var(--br-text);
    color: #0a0a0a;
    border: 2px solid var(--br-border);
    border-radius: 0;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    box-shadow: 3px 3px 0 var(--br-accent);
    transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out;
}

html.theme-brutalist .quote-btn:hover {
    background: var(--br-accent);
    transform: translate(3px, 3px);
    box-shadow: 0 0 0 var(--br-accent);
}

html.theme-brutalist .author-title {
    text-shadow: none;
    color: var(--br-text);
    text-transform: uppercase;
}

html.theme-brutalist .chat-title {
    color: var(--br-text);
    text-transform: uppercase;
}

/* Conversations */
html.theme-brutalist .chat-container {
    background: var(--br-surface);
    border: 3px solid var(--br-border);
    border-radius: 0;
    box-shadow: 6px 6px 0 var(--br-accent);
}

html.theme-brutalist .message {
    color: var(--br-text);
}

html.theme-brutalist .message:nth-child(even) {
    background-color: rgba(255, 255, 255, 0.05);
}

html.theme-brutalist .message-username {
    color: var(--br-accent) !important;
}

/* Settings bar / dropdowns */
html.theme-brutalist .quotes-settings label,
html.theme-brutalist .quotes-settings select,
html.theme-brutalist select.form-select,
html.theme-brutalist select.quote-dropdown {
    color: var(--br-text);
    background: var(--br-surface);
    border: 2px solid var(--br-border);
    border-radius: 0;
}

/* Popup image preview */
html.theme-brutalist .popup {
    border: 3px solid var(--br-border);
    box-shadow: 6px 6px 0 var(--br-accent);
    border-radius: 0;
}

/* Pagination */
html.theme-brutalist .pagination a,
html.theme-brutalist .pagination span {
    color: var(--br-text);
}

/* Theme picker control */
html.theme-brutalist .theme-switch-label {
    color: var(--br-text);
    text-transform: uppercase;
}

html.theme-brutalist #theme-picker {
    background: var(--br-surface);
    color: var(--br-text);
    border: 2px solid var(--br-border);
    border-radius: 0;
}