/**
 * @file: light-theme.css
 * @description: Принудительная светлая тема для Mini App
 * @created: 2025-12-12
 */

/* ========== LIGHT THEME OVERRIDE ========== */
:root {
    /* КРИТИЧНО: Указываем браузеру использовать только светлую схему */
    color-scheme: light only !important;
    
    /* Основные цвета - светлая тема */
    --tg-theme-bg-color: #ffffff !important;
    --tg-theme-text-color: #000000 !important;
    --tg-theme-hint-color: #999999 !important;
    --tg-theme-link-color: #2481cc !important;
    --tg-theme-button-color: #2481cc !important;
    --tg-theme-button-text-color: #ffffff !important;
    --tg-theme-secondary-bg-color: #f4f4f5 !important;
    
    /* Дополнительные цвета */
    --primary-color: #2481cc;
    --success-color: #4caf50;
    --warning-color: #ff9800;
    --danger-color: #f44336;
    --info-color: #2196f3;
}

/* Принудительная светлая тема для HTML и BODY */
html {
    color-scheme: light only !important;
}

html, body {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ========== RAILWAY DROPDOWN (CUSTOM) ========== */
.railway-dropdown-wrapper {
    position: relative;
    cursor: pointer !important;
}

.railway-dropdown-input[readonly] {
    cursor: pointer !important;
}

.railway-dropdown-results {
    width: 100% !important;
    left: 0 !important;
    top: calc(100% + 6px) !important;
    z-index: 999999 !important;
}

/* ========== BODY ========== */
body {
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* ========== TABS ========== */
.tabs-container {
    background-color: #ffffff !important;
    border-bottom: 2px solid #f4f4f5 !important;
}

.tab-button {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #f4f4f5 !important;
}

.tab-button:hover {
    background-color: #f4f4f5 !important;
}

.tab-button.active {
    background-color: #2481cc !important;
    color: #ffffff !important;
    border-color: #2481cc !important;
}

/* ========== FORM INPUTS ========== */
.form-input,
.form-select,
.form-textarea,
select,
input[type="text"],
input[type="number"],
textarea {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #e0e0e0 !important;
}

/* Readonly inputs для дорог - курсор pointer */
.form-input[readonly] {
    cursor: pointer !important;
}

/* НЕ убираем appearance для select на Android - это ломает нативный picker */
input[type="text"],
input[type="number"],
textarea {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus,
select:focus,
input:focus,
textarea:focus {
    border-color: #2481cc !important;
    box-shadow: 0 0 0 3px rgba(36, 129, 204, 0.1) !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.form-input::placeholder {
    color: #999999 !important;
}

.form-input:disabled,
.form-select:disabled,
.form-textarea:disabled {
    background-color: #f4f4f5 !important;
    color: #999999 !important;
}

/* Стили для option элементов */
option {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Для Android: оставляем нативный вид select */
@supports (-webkit-touch-callout: none) {
    /* iOS */
    select {
        -webkit-appearance: none;
        appearance: none;
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23000000' d='M6 9L1 4h10z'/%3E%3C/svg%3E") !important;
        background-repeat: no-repeat !important;
        background-position: right 12px center !important;
        background-size: 12px !important;
        padding-right: 36px !important;
    }
}

/* ========== TELEGRAM BOTTOM SHEET (Android) ========== */
/* Telegram на Android показывает select в Bottom Sheet */
/* Нужно переопределить стили для этого Bottom Sheet */

/* Telegram WebView Bottom Sheet */
:root {
    --tg-bottom-sheet-bg-color: #ffffff !important;
    --tg-bottom-sheet-item-bg-color: #ffffff !important;
}

/* Если Telegram использует классы для Bottom Sheet */
.bottom-sheet,
.tg-bottom-sheet,
.tgme_page_action_bottom_sheet {
    background: #ffffff !important;
    background-color: #ffffff !important;
}

.bottom-sheet-item,
.tg-bottom-sheet-item {
    background: #ffffff !important;
    background-color: #ffffff !important;
    color: #000000 !important;
}

/* Android WebView стили для select dropdown */
select::-webkit-calendar-picker-indicator {
    filter: invert(0); /* Темная стрелка на светлом фоне */
}

/* Android select overlay */
select:-internal-list-box {
    background-color: #ffffff !important;
    color: #000000 !important;
}

select:-internal-list-box option {
    background-color: #ffffff !important;
    color: #000000 !important;
}

select:-internal-list-box option:checked {
    background-color: rgba(36, 129, 204, 0.1) !important;
    color: #000000 !important;
}

/* ========== AUTOCOMPLETE ========== */
.autocomplete-results {
    position: absolute !important;
    background: #ffffff !important;
    background-color: #ffffff !important;
    border: 2px solid #2481cc !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
    z-index: 999999 !important;
    max-height: 300px !important;
    overflow-y: auto !important;
    display: none !important;
}

.autocomplete-results.active {
    display: block !important;
}

/* Портальный dropdown (для Telegram WebView): позиционируется фиксированно поверх всего */
.autocomplete-results.raily-portal {
    position: fixed !important;
}

/* ========== RAILWAY MODAL (POPUP) ========== */
.railway-modal-content {
    max-width: 600px !important;
    width: 92% !important;
    text-align: left !important;
    padding: 16px !important;
    /* Растягиваем по высоте (верх/низ), но оставляем отступы по ширине */
    height: calc(100vh - 24px) !important;
    max-height: calc(100vh - 24px) !important;
    display: flex !important;
    flex-direction: column !important;
}

.railway-modal-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    gap: 12px !important;
    margin-bottom: 12px !important;
}

.railway-modal-title {
    margin: 0 !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    color: #2481cc !important;
    /* Запрещаем выделение текста в заголовке модалки (Android/Telegram WebView) */
    -webkit-user-select: none !important;
    user-select: none !important;
    -webkit-tap-highlight-color: transparent;
}

.railway-modal-close {
    width: 48px !important;
    height: 48px !important;
    border-radius: 12px !important;
    border: 2px solid var(--tg-theme-secondary-bg-color) !important;
    background: var(--tg-theme-bg-color) !important;
    color: var(--tg-theme-text-color) !important;
    cursor: pointer !important;
    font-size: 18px !important;
    line-height: 1 !important;
}

.railway-modal-close:active {
    transform: scale(0.98) !important;
}

.railway-modal-list {
    margin-top: 12px !important;
    /* Список занимает всю оставшуюся высоту */
    flex: 1 1 auto !important;
    min-height: 0 !important;
    max-height: none !important;
    overflow-y: auto !important;
    border: 2px solid var(--tg-theme-secondary-bg-color) !important;
    border-radius: 12px !important;
    background: var(--tg-theme-bg-color) !important;
}

.railway-modal-list .autocomplete-item {
    padding: 12px !important;
}

.autocomplete-item {
    background-color: #ffffff !important;
    border-bottom: 1px solid #f4f4f5 !important;
}

.autocomplete-item:hover {
    background-color: #f4f4f5 !important;
}

.autocomplete-item.selected {
    background-color: rgba(36, 129, 204, 0.1) !important;
}

/* Эффект прожатия в списках (Telegram/Android): синий фон + белый текст */
.autocomplete-item:active,
.autocomplete-item.is-pressed {
    background-color: #2481cc !important;
    color: #ffffff !important;
}

.autocomplete-item:active .autocomplete-item-title,
.autocomplete-item:active .autocomplete-item-subtitle,
.autocomplete-item:active .autocomplete-item-title svg,
.autocomplete-item:active .autocomplete-item-title path,
.autocomplete-item.is-pressed .autocomplete-item-title,
.autocomplete-item.is-pressed .autocomplete-item-subtitle,
.autocomplete-item.is-pressed .autocomplete-item-title svg,
.autocomplete-item.is-pressed .autocomplete-item-title path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

.autocomplete-item-title {
    color: #2481cc !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
    line-height: 1.5 !important;
}

.autocomplete-item-title svg {
    display: block !important;
    width: 18px !important;
    height: 18px !important;
    fill: #2481cc !important;
    color: #2481cc !important;
    flex-shrink: 0 !important;
}

.autocomplete-item-subtitle {
    color: #666666 !important;
}

/* ---- FORCE PRESS EFFECT (OVERRIDE) ----
 * На телефонах :hover может "залипать" и перебивать :active/.is-pressed.
 * Делаем максимально специфичные правила с !important, чтобы прожатие всегда было #2481CC.
 */
.railway-modal-list .autocomplete-item.is-pressed,
.railway-modal-list .autocomplete-item.is-pressed:hover,
.railway-modal-list .autocomplete-item:active,
.railway-modal-list .autocomplete-item:active:hover,
.autocomplete-results .autocomplete-item.is-pressed,
.autocomplete-results .autocomplete-item.is-pressed:hover,
.autocomplete-results .autocomplete-item:active,
.autocomplete-results .autocomplete-item:active:hover {
    background-color: #2481cc !important;
    color: #ffffff !important;
}

.railway-modal-list .autocomplete-item.is-pressed .autocomplete-item-title,
.railway-modal-list .autocomplete-item.is-pressed .autocomplete-item-subtitle,
.railway-modal-list .autocomplete-item.is-pressed .autocomplete-item-title svg,
.railway-modal-list .autocomplete-item.is-pressed .autocomplete-item-title path,
.railway-modal-list .autocomplete-item:active .autocomplete-item-title,
.railway-modal-list .autocomplete-item:active .autocomplete-item-subtitle,
.railway-modal-list .autocomplete-item:active .autocomplete-item-title svg,
.railway-modal-list .autocomplete-item:active .autocomplete-item-title path,
.autocomplete-results .autocomplete-item.is-pressed .autocomplete-item-title,
.autocomplete-results .autocomplete-item.is-pressed .autocomplete-item-subtitle,
.autocomplete-results .autocomplete-item.is-pressed .autocomplete-item-title svg,
.autocomplete-results .autocomplete-item.is-pressed .autocomplete-item-title path,
.autocomplete-results .autocomplete-item:active .autocomplete-item-title,
.autocomplete-results .autocomplete-item:active .autocomplete-item-subtitle,
.autocomplete-results .autocomplete-item:active .autocomplete-item-title svg,
.autocomplete-results .autocomplete-item:active .autocomplete-item-title path {
    color: #ffffff !important;
    fill: #ffffff !important;
}

/* ========== CHIPS ========== */
.chip {
    background-color: #ffffff !important;
    color: #2481cc !important;
    border: 2px solid #2481cc !important;
}

.chip:hover {
    background-color: rgba(36, 129, 204, 0.1) !important;
}

.chip.active {
    background-color: #2481cc !important;
    color: #ffffff !important;
}

/* ========== BUTTONS ========== */
.btn {
    background-color: #2481cc !important;
    color: #ffffff !important;
    border: none !important;
}

.btn:hover {
    background-color: #1d6ba8 !important;
}

.btn:disabled {
    background-color: #e0e0e0 !important;
    color: #999999 !important;
}

/* ========== LOADER ========== */
.loader-overlay {
    background-color: rgba(255, 255, 255, 0.95) !important;
}

.loader-text {
    color: #000000 !important;
}

/* ========== NOTIFICATIONS ========== */
.notification {
    background-color: #ffffff !important;
    color: #000000 !important;
    border: 2px solid #e0e0e0 !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.notification.success {
    border-color: #4caf50 !important;
    background-color: #f1f8f4 !important;
}

.notification.error {
    border-color: #f44336 !important;
    background-color: #fef1f0 !important;
}

.notification.info {
    border-color: #2196f3 !important;
    background-color: #f0f7ff !important;
}

.notification.warning {
    border-color: #ff9800 !important;
    background-color: #fff8f0 !important;
}

/* ========== SECTION HEADERS ========== */
.section-header {
    color: #2481cc !important;
    border-bottom: 2px solid #f4f4f5 !important;
}

/* Сворачиваемая секция */
.collapsible-header {
    cursor: pointer !important;
    user-select: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 12px 16px !important;
    margin: 16px 0 0 0 !important;
    background-color: #f8f9fa !important;
    border-radius: 8px !important;
    transition: background-color 0.2s ease !important;
}

.collapsible-header:hover {
    background-color: #e9ecef !important;
}

.collapsible-header .toggle-icon {
    font-size: 14px !important;
    color: #2481cc !important;
    transition: transform 0.3s ease !important;
    margin-left: auto !important;
    padding-left: 12px !important;
}

.collapsible-header.expanded .toggle-icon {
    transform: rotate(180deg) !important;
}

.collapsible-content {
    margin-top: 8px !important;
    animation: slideDown 0.3s ease !important;
}

@keyframes slideDown {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* ========== HELPER TEXT ========== */
.helper-text {
    color: #666666 !important;
}

.helper-text.success {
    color: #4caf50 !important;
}

.helper-text.error {
    color: #f44336 !important;
}

.helper-text.warning {
    color: #ff9800 !important;
}

.helper-text.info {
    color: #2196f3 !important;
}

/* ========== AUTO-FILLED FIELDS ========== */
.form-input.auto-filled,
.form-select.auto-filled {
    background-color: rgba(76, 175, 80, 0.05) !important;
    border-color: #4caf50 !important;
}

/* ========== VALIDATION STATES ========== */
.form-input.valid,
.form-select.valid {
    border-color: #4caf50 !important;
}

.form-input.invalid,
.form-select.invalid {
    border-color: #f44336 !important;
}

/* ========== LOADING STATE ========== */
.form-input.loading,
.form-select.loading {
    background-image: linear-gradient(
        90deg,
        #f4f4f5 0%,
        #ffffff 50%,
        #f4f4f5 100%
    ) !important;
}

/* ========== SCROLLBAR ========== */
.autocomplete-results::-webkit-scrollbar {
    width: 8px;
}

.autocomplete-results::-webkit-scrollbar-track {
    background: #f4f4f5;
    border-radius: 4px;
}

.autocomplete-results::-webkit-scrollbar-thumb {
    background: #cccccc;
    border-radius: 4px;
}

.autocomplete-results::-webkit-scrollbar-thumb:hover {
    background: #999999;
}

/* ========== DISABLE DARK MODE ========== */
@media (prefers-color-scheme: dark) {
    body,
    .tabs-container,
    .tab-button,
    .form-input,
    .form-select,
    .form-textarea,
    .autocomplete-results,
    .autocomplete-item,
    .chip,
    .btn,
    .notification {
        background-color: #ffffff !important;
        color: #000000 !important;
    }
    
    .autocomplete-results {
        border-color: #2481cc !important;
    }
    
    .autocomplete-item {
        border-bottom-color: #f4f4f5 !important;
    }
    
    .autocomplete-item:hover {
        background-color: #f4f4f5 !important;
    }
}