/* webapp/css/themes/theme-default.css */

body.theme-default {
    --theme-bg-primary: #121212;
    --theme-bg-secondary: #1e1e1e;
    --theme-bg-content: #282828;
    --theme-text-primary: #e0e0e0;
    --theme-text-secondary: #a0a0b0;
    --theme-text-placeholder: #828282;
    --theme-border-color: #383838;
    --theme-accent-primary: #ff8c00;
    --theme-accent-secondary: #ffa500;
    --theme-accent-alt1: #4A90E2;
    --theme-accent-alt2: #50E3C2;
    --theme-button-text-on-accent: #ffffff;
    --theme-button-text-on-normal: var(--theme-text-primary);
    --theme-success-color: #22c55e;
    --theme-error-color: #ef4444;
    --theme-warning-color: #f59e0b;
    --theme-focus-ring-color: rgba(255, 140, 0, 0.5);
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --theme-srs-bar-short: #fbbf24;
    --theme-srs-bar-medium: #ff8c00;
    --theme-srs-bar-long: #e65100;
    --theme-srs-bar-learned: #22c55e;
    --theme-srs-segment-inactive-bg: var(--theme-border-color);
    --theme-grammar-feedback-correct-bg: rgba(34, 197, 94, 0.1);
    --theme-grammar-feedback-correct-border: var(--theme-success-color);
    --theme-grammar-feedback-correct-text: var(--theme-success-color);
    --theme-grammar-feedback-incorrect-bg: rgba(239, 68, 68, 0.1);
    --theme-grammar-feedback-incorrect-border: var(--theme-error-color);
    --theme-grammar-feedback-incorrect-text: var(--theme-error-color);
    --theme-grammar-ai-explanation-bg: var(--theme-bg-content);
    --theme-grammar-ai-explanation-border: var(--theme-border-color);
    --theme-grammar-ai-explanation-text: var(--theme-text-primary);
    --theme-grammar-chat-bg: var(--theme-bg-secondary);
    --theme-grammar-chat-user-msg-bg: var(--theme-accent-primary);
    --theme-grammar-chat-user-msg-text: var(--theme-button-text-on-accent);
    --theme-grammar-chat-ai-msg-bg: var(--theme-bg-content);
    --theme-grammar-chat-ai-msg-text: var(--theme-text-primary);
    --mode-mc-bg: #ff8c00;
    --mode-mc-text: #fff;
    --mode-audition-bg: #232323;
    --mode-audition-text: #fff;
    --mode-dictation-bg: #4A90E2;
    --mode-dictation-text: #fff;
    --mode-phrase-translation-bg: #50E3C2;
    --mode-phrase-translation-text: #232323;
    --mode-phrase-audition-bg: #7e57c2;
    --mode-phrase-audition-text: #fff;
    --mode-input-bg: #22c55e;
    --mode-input-text: #fff;
    --theme-gold: #ffeb3b;
}

body.theme-default {
    background-color: var(--theme-bg-primary);
    color: var(--theme-text-primary);
}

body.theme-default #header-title-logo h1 { color: var(--theme-text-primary); }
body.theme-default #header-title-logo .header-logo-en-accent { color: var(--theme-accent-primary); }
body.theme-default #header-title-logo .app-logo-icon { fill: var(--theme-accent-primary); color: var(--theme-accent-primary); }

body.theme-default #bottom-nav {
    background-color: var(--theme-bg-secondary);
    border-top: 1px solid var(--theme-border-color);
}
body.theme-default .nav-item { color: var(--theme-text-secondary); }
body.theme-default .nav-item:hover { color: var(--theme-accent-primary); }
body.theme-default .nav-item.active { color: var(--theme-accent-primary); }

body.theme-default #floating-action-buttons #theme-toggle-button {
    background-color: var(--theme-accent-secondary);
    color: var(--theme-button-text-on-accent);
}
body.theme-default #floating-action-buttons #theme-toggle-button:hover,
body.theme-default #floating-action-buttons #theme-toggle-button:focus {
    background-color: color-mix(in srgb, var(--theme-accent-secondary) 85%, black);
    border-color: var(--theme-accent-primary);
}
body.theme-default #floating-action-buttons #floating-settings-button {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-primary);
}
body.theme-default #floating-action-buttons #floating-settings-button:hover,
body.theme-default #floating-action-buttons #floating-settings-button:focus {
    background-color: color-mix(in srgb, var(--theme-bg-content) 85%, var(--theme-text-primary) 5%);
    border-color: var(--theme-accent-primary);
}

body.theme-default .content-section {
    background-color: var(--theme-bg-secondary);
    box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
}
body.theme-default .content-card-bg { background-color: var(--theme-bg-content); }

body.theme-default .input-field, body.theme-default select.input-field {
    background-color: var(--theme-bg-content);
    border: 1px solid var(--theme-border-color);
    color: var(--theme-text-primary);
}
body.theme-default .input-field::placeholder { color: var(--theme-text-placeholder); }
body.theme-default .input-field:focus, body.theme-default select.input-field:focus {
    border-color: var(--theme-accent-primary);
    box-shadow: 0 0 0 2px var(--theme-focus-ring-color);
}
body.theme-default .input-field[readonly] { background-color: var(--theme-bg-secondary); }
body.theme-default .clear-input-btn { color: var(--theme-text-secondary); }
body.theme-default .clear-input-btn:hover { color: var(--theme-accent-primary); }

body.theme-default #daily-reward-section h3 .material-symbols-rounded {
    color: var(--theme-gold);
}

/* Кнопки */
body.theme-default .button:disabled, body.theme-default .button.disabled {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-secondary);
    border: 1px solid var(--theme-border-color);
}
body.theme-default .button:focus, body.theme-default .button:focus-visible {
    box-shadow: 0 0 0 2px var(--theme-focus-ring-color);
}

body.theme-default .button-primary {
    background-color: var(--theme-accent-primary);
    color: var(--theme-button-text-on-accent);
    border: 1px solid var(--theme-accent-primary);
}
body.theme-default .button-primary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-accent-primary) 85%, black);
}

body.theme-default .button-secondary {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-primary);
    border: 1px solid var(--theme-border-color);
}
body.theme-default .button-secondary:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--theme-bg-content) 85%, var(--theme-text-primary) 15%);
    border-color: var(--theme-accent-primary);
}

/* Стили для тумблеров в основной теме */
.toggle-button {
    background-color: var(--theme-bg-content);
    border: 1px solid var(--theme-border-color);
}

.toggle-button-slider {
    background-color: var(--theme-text-secondary);
}

.toggle-button.active {
    background-color: var(--theme-accent-primary);
}

.toggle-button.active .toggle-button-slider {
    background-color: var(--theme-button-text-on-accent);
}

/* Исправление видимости текста в настройках */
.content-section {
    color: var(--theme-text-primary);
}

.content-section label {
    color: var(--theme-text-primary);
}

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

/* --- Главная страница (прогресс-бар) --- */
body.theme-default .progress-svg-container {
    width: 150px;
    height: 150px;
    position: relative;
}

body.theme-default .progress-svg {
    width: 100%;
    height: 100%;
    transform: rotate(-90deg);
}

body.theme-default .progress-svg__background-circle {
    fill: none;
    stroke: var(--theme-bg-content);
    stroke-width: 10;
}

body.theme-default .progress-svg__bar-circle {
    fill: none;
    stroke: var(--theme-accent-primary);
    stroke-width: 10;
    stroke-linecap: round;
    stroke-dasharray: 339.292;
    stroke-dashoffset: 339.292;
    transition: stroke-dashoffset 0.5s ease-out;
}

body.theme-default .progress-svg__text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 2rem;
    font-weight: bold;
    color: var(--theme-text-primary);
}

/* Стили скроллбара для основной темы */
body.theme-default ::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}
body.theme-default ::-webkit-scrollbar-track {
    background: var(--theme-bg-secondary);
    border-radius: 4px;
}
body.theme-default ::-webkit-scrollbar-thumb {
    background: var(--theme-accent-primary);
    border-radius: 4px;
}
body.theme-default ::-webkit-scrollbar-thumb:hover {
    background: var(--theme-accent-primary);
    opacity: 0.8;
}
/* Firefox scrollbar */
body.theme-default {
    scrollbar-color: var(--theme-accent-primary) var(--theme-bg-secondary);
    scrollbar-width: thin;
}

/* Стили для полей ввода и выбора */
input[type="text"],
input[type="number"],
select,
.input-field,
textarea {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-primary) !important;
    border: 1px solid var(--theme-border-color);
    border-radius: 4px;
    padding: 8px 12px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    outline: none !important;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

/* Эффект наведения и фокуса с акцентным цветом */
input[type="text"]:hover,
input[type="number"]:hover,
select:hover,
.input-field:hover,
textarea:hover,
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
.input-field:focus,
textarea:focus {
    border-color: var(--theme-accent-primary) !important;
    box-shadow: 0 0 0 1px var(--theme-accent-primary) !important;
    outline: none !important;
}

/* Стили для плейсхолдеров */
::placeholder {
    color: var(--theme-text-placeholder) !important;
    opacity: 1;
}

/* Стили для выпадающих списков */
select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: var(--theme-bg-content);
    color: var(--theme-text-primary);
    padding: 8px 12px;
    border-radius: 4px;
    border: 1px solid var(--theme-border-color);
}

select option {
    background-color: var(--theme-bg-content);
    color: var(--theme-text-primary);
    padding: 8px 12px;
}

/* Переопределение системных цветов выделения */
select option:checked,
select option:focus,
select option:active,
select option:hover {
    background-color: var(--theme-accent-primary) !important;
    color: var(--theme-button-text-on-accent) !important;
    -webkit-text-fill-color: var(--theme-button-text-on-accent) !important;
}

/* Стиль для выбранного option */
select option:checked,
select option:focus,
select option:active,
select option:hover {
    background-color: var(--theme-accent-primary) !important;
    color: var(--theme-button-text-on-accent) !important;
}

/* Для WebKit браузеров (Chrome, Safari) */
select option:checked:not(:disabled) {
    background: linear-gradient(var(--theme-accent-primary), var(--theme-accent-primary));
    color: var(--theme-button-text-on-accent) !important;
}

/* Для Firefox */
@-moz-document url-prefix() {
    select option:checked,
    select option:focus,
    select option:active {
        background: var(--theme-accent-primary) !important;
        color: var(--theme-button-text-on-accent) !important;
    }
}

/* === КНОПКИ РЕЖИМОВ ИЗУЧЕНИЯ === */
body.theme-default #study-mode-mc-button {
    background-color: var(--mode-mc-bg);
    color: var(--mode-mc-text);
    border: 1px solid var(--mode-mc-bg);
}

body.theme-default #study-mode-mc-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--mode-mc-bg) 85%, black);
    transform: translateY(-1px);
}

body.theme-default #study-mode-input-button {
    background-color: var(--mode-input-bg);
    color: var(--mode-input-text);
    border: 1px solid var(--mode-input-bg);
}

body.theme-default #study-mode-input-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--mode-input-bg) 85%, black);
    transform: translateY(-1px);
}

body.theme-default #study-mode-audition-button {
    background-color: var(--mode-audition-bg);
    color: var(--mode-audition-text);
    border: 1px solid var(--mode-audition-bg);
}

body.theme-default #study-mode-audition-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--mode-audition-bg) 85%, white);
    transform: translateY(-1px);
}

body.theme-default #study-mode-dictation-button {
    background-color: var(--mode-dictation-bg);
    color: var(--mode-dictation-text);
    border: 1px solid var(--mode-dictation-bg);
}

body.theme-default #study-mode-dictation-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--mode-dictation-bg) 85%, black);
    transform: translateY(-1px);
}

body.theme-default #study-mode-phrase-translation-button {
    background-color: var(--mode-phrase-translation-bg);
    color: var(--mode-phrase-translation-text);
    border: 1px solid var(--mode-phrase-translation-bg);
}

body.theme-default #study-mode-phrase-translation-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--mode-phrase-translation-bg) 85%, black);
    transform: translateY(-1px);
}

body.theme-default #study-mode-phrase-audition-button {
    background-color: var(--mode-phrase-audition-bg);
    color: var(--mode-phrase-audition-text);
    border: 1px solid var(--mode-phrase-audition-bg);
}

body.theme-default #study-mode-phrase-audition-button:hover:not(:disabled) {
    background-color: color-mix(in srgb, var(--mode-phrase-audition-bg) 85%, black);
    transform: translateY(-1px);
}

/* При наведении на кнопки и интерактивные элементы */
body.theme-default button:hover {
    opacity: 0.9;
}