/*
 * Opt-in "modern" look for the public pages: a flat, Material-style
 * dark theme (Google's own dark surface/elevation palette + Roboto).
 * Everything here is scoped under html.theme-material so the classic
 * theme (quote.css / conversations.css) stays the default and is
 * completely untouched when the switch is off.
 */

html.theme-material {
    --md-bg: #121212;
    --md-surface-1: #1e1e1e;   /* elevation 1dp: cards */
    --md-surface-2: #232323;   /* elevation 4dp: app bar */
    --md-surface-3: #282828;   /* elevation 8dp: popovers */
    --md-outline: rgba(255, 255, 255, 0.12);
    --md-text-primary: rgba(255, 255, 255, 0.87);
    --md-text-secondary: rgba(255, 255, 255, 0.60);
    --md-primary: #8ab4f8;     /* Google's dark-mode blue */
    --md-primary-on: #202124;  /* dark text on primary */
    --md-primary-tonal: rgba(138, 180, 248, 0.16);
}

html.theme-material body {
    background: var(--md-bg);
    color: var(--md-text-primary);
    font-family: 'Roboto', 'Figtree', sans-serif;
}

/* Header / nav (app bar) */
html.theme-material header {
    background: var(--md-surface-2) !important;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    border-bottom: none;
}

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

html.theme-material header span,
html.theme-material header a {
    color: var(--md-text-primary) !important;
}

html.theme-material header a:hover {
    color: var(--md-primary) !important;
}

html.theme-material header svg {
    fill: var(--md-text-primary);
}

html.theme-material header button.border {
    border-color: var(--md-outline);
    color: var(--md-text-primary);
}

html.theme-material header input#searchQuery {
    background: var(--md-surface-3);
    color: var(--md-text-primary);
    border: 1px solid var(--md-outline);
}

html.theme-material header input#searchQuery::placeholder {
    color: var(--md-text-secondary);
}

html.theme-material header button[type="submit"] {
    background: var(--md-primary) !important;
    color: var(--md-primary-on) !important;
    font-weight: 500;
}

html.theme-material header button[type="submit"]:hover {
    background: #aecbfa !important;
}

/* Quote / conversation cards */
html.theme-material .quote-container {
    background: var(--md-surface-1);
    color: var(--md-text-primary);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    border-radius: 8px;
    border: 1px solid var(--md-outline);
    max-width: 640px;
    margin: 24px auto;
}

html.theme-material .quote {
    font-family: 'Roboto', sans-serif;
    font-style: normal;
    font-weight: 400;
    color: var(--md-text-primary);
}

html.theme-material .author {
    display: inline-block;
    margin-top: 8px;
    padding: 4px 12px;
    border-radius: 16px;
    background: var(--md-primary-tonal);
    color: var(--md-primary);
    opacity: 1;
}

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

html.theme-material .quote-btn {
    background: var(--md-primary);
    color: var(--md-primary-on);
    border-radius: 4px;
    font-weight: 500;
    letter-spacing: 0.02em;
    box-shadow: none;
    transition: background-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}

html.theme-material .quote-btn:hover {
    background: #aecbfa;
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 2px 6px rgba(0, 0, 0, 0.3);
    transform: none;
}

html.theme-material .author-title {
    text-shadow: none;
    color: var(--md-text-primary);
}

html.theme-material .chat-title {
    color: var(--md-text-primary);
}

/* Conversations */
html.theme-material .chat-container {
    background: var(--md-surface-1);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 3px rgba(0, 0, 0, 0.3);
    border: 1px solid var(--md-outline);
}

html.theme-material .message {
    color: var(--md-text-primary);
}

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

html.theme-material .message-username {
    color: var(--md-primary) !important;
}

/* Settings bar / dropdowns */
html.theme-material .quotes-settings label,
html.theme-material .quotes-settings select,
html.theme-material select.form-select,
html.theme-material select.quote-dropdown {
    color: var(--md-text-primary);
    background: var(--md-surface-3);
    border: 1px solid var(--md-outline);
    border-radius: 4px;
}

/* Popup image preview */
html.theme-material .popup {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.5);
    border-radius: 8px;
    overflow: hidden;
}

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

/* Theme picker control (used regardless of active theme) */
.theme-switch-label {
    color: #ffffff;
}

html.theme-material .theme-switch-label {
    color: var(--md-text-primary);
}

html.theme-material #theme-picker {
    background: var(--md-surface-3);
    color: var(--md-text-primary);
    border: 1px solid var(--md-outline);
}