/* Telegram тема для DisciplineBot Web App */

/* Адаптация под темы Telegram */
body.telegram-theme {
    /* Переменные будут обновляться из JavaScript */
    --tg-bg-color: var(--background-color);
    --tg-text-color: var(--text-primary);
    --tg-hint-color: var(--text-secondary);
    --tg-link-color: var(--primary-color);
    --tg-button-color: var(--primary-color);
    --tg-button-text-color: #FFFFFF;
    --tg-secondary-bg-color: var(--surface-color);
}

/* Темная тема Telegram */
body.telegram-dark {
    --background-color: #1C1C1E;
    --surface-color: #2C2C2E;
    --card-color: #2C2C2E;

    --text-primary: #FFFFFF;
    --text-secondary: #8E8E93;
    --text-tertiary: #48484A;

    --border-color: #38383A;
    --shadow-color: rgba(0, 0, 0, 0.3);

    --primary-color: #007AFF;
    --secondary-color: #5856D6;
    --success-color: #30D158;
    --warning-color: #FF9F0A;
    --error-color: #FF453A;
}

/* Светлая тема Telegram */
body.telegram-light {
    --background-color: #FFFFFF;
    --surface-color: #F2F2F7;
    --card-color: #FFFFFF;

    --text-primary: #000000;
    --text-secondary: #8E8E93;
    --text-tertiary: #C7C7CC;

    --border-color: #C6C6C8;
    --shadow-color: rgba(0, 0, 0, 0.1);

    --primary-color: #007AFF;
    --secondary-color: #5856D6;
    --success-color: #34C759;
    --warning-color: #FF9500;
    --error-color: #FF3B30;
}

/* Интеграция с Telegram UI элементами */
.telegram-main-button {
    /* Стили для главной кнопки Telegram будут применяться автоматически */
    display: none;
    /* Скрываем обычную кнопку когда активна MainButton */
}

.telegram-back-button-active .app-header {
    /* Когда активна BackButton, уменьшаем отступ сверху */
    padding-top: 0;
}

/* Адаптация цветов под тему Telegram */
body.telegram-theme .btn-primary {
    background-color: var(--tg-button-color, var(--primary-color));
    color: var(--tg-button-text-color, #FFFFFF);
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.3);
}

body.telegram-theme .btn-primary:hover {
    background-color: var(--tg-button-color, var(--primary-color));
    opacity: 0.9;
}

body.telegram-theme .search-input:focus {
    border-color: var(--tg-link-color, var(--primary-color));
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.1);
}

body.telegram-theme .program-card:hover {
    border-color: var(--tg-link-color, var(--primary-color));
}

body.telegram-theme .app-header h1 {
    color: var(--tg-text-color, var(--text-primary));
}

body.telegram-theme .program-header h3 {
    color: var(--tg-text-color, var(--text-primary));
}

body.telegram-theme .program-info span {
    background-color: var(--tg-secondary-bg-color, var(--surface-color));
    color: var(--tg-hint-color, var(--text-secondary));
}

body.telegram-theme .search-input {
    background-color: var(--tg-secondary-bg-color, var(--card-color));
    color: var(--tg-text-color, var(--text-primary));
    border-color: var(--border-color);
}

body.telegram-theme .filter-select {
    background-color: var(--tg-secondary-bg-color, var(--card-color));
    color: var(--tg-text-color, var(--text-primary));
    border-color: var(--border-color);
}

body.telegram-theme .program-card {
    background-color: var(--tg-secondary-bg-color, var(--card-color));
    border-color: var(--border-color);
}

body.telegram-theme .modal-content {
    background-color: var(--tg-bg-color, var(--card-color));
}

body.telegram-theme .modal-header {
    border-bottom-color: var(--border-color);
}

body.telegram-theme .modal-header h2 {
    color: var(--tg-text-color, var(--text-primary));
}

body.telegram-theme .modal-close {
    color: var(--tg-hint-color, var(--text-secondary));
}

body.telegram-theme .modal-close:hover {
    background-color: var(--tg-secondary-bg-color, var(--surface-color));
}

/* Анимации при смене темы */
body.telegram-theme,
body.telegram-theme .program-card,
body.telegram-theme .btn,
body.telegram-theme .search-input,
body.telegram-theme .filter-select,
body.telegram-theme .modal-content {
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Специальные стили для полноэкранного режима */
body.telegram-expanded {
    /* Когда Web App развернуто на весь экран */
    min-height: 100vh;
}

body.telegram-expanded .app-container {
    min-height: 100vh;
    padding-bottom: var(--spacing-xl);
    /* Дополнительный отступ снизу */
}

/* Стили для статус-бара на iOS */
@supports (padding-top: env(safe-area-inset-top)) {
    body.telegram-expanded .app-container {
        padding-top: calc(var(--spacing-md) + env(safe-area-inset-top));
        padding-bottom: calc(var(--spacing-xl) + env(safe-area-inset-bottom));
    }
}

/* Адаптация под системные шрифты Telegram */
body.telegram-theme {
    font-family:
        -apple-system,
        BlinkMacSystemFont,
        'SF Pro Display',
        'SF Pro Text',
        'Segoe UI',
        Roboto,
        'Helvetica Neue',
        Helvetica,
        Arial,
        sans-serif;
}

/* Скрытие элементов при активном MainButton */
body.telegram-main-button-active #createProgramBtn {
    display: none;
}

body.telegram-main-button-active .program-footer .btn-primary {
    display: none;
}

/* Стили для Haptic Feedback индикации */
.haptic-light {
    animation: hapticLight 0.1s ease;
}

.haptic-medium {
    animation: hapticMedium 0.15s ease;
}

.haptic-heavy {
    animation: hapticHeavy 0.2s ease;
}

@keyframes hapticLight {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.02);
    }
}

@keyframes hapticMedium {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.05);
    }
}

@keyframes hapticHeavy {

    0%,
    100% {
        transform: scale(1);
    }

    50% {
        transform: scale(1.08);
    }
}

/* Стили для уведомлений */
.telegram-notification {
    position: fixed;
    top: var(--spacing-md);
    left: 50%;
    transform: translateX(-50%);
    background-color: var(--tg-secondary-bg-color, var(--surface-color));
    color: var(--tg-text-color, var(--text-primary));
    padding: var(--spacing-sm) var(--spacing-md);
    border-radius: var(--border-radius);
    box-shadow: 0 4px 16px var(--shadow-color);
    z-index: 1001;
    max-width: 90vw;
    text-align: center;
    font-size: var(--font-size-sm);
    opacity: 0;
    transform: translateX(-50%) translateY(-20px);
    transition: all 0.3s ease;
}

.telegram-notification.show {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
}

.telegram-notification.success {
    background-color: var(--success-color);
    color: white;
}

.telegram-notification.error {
    background-color: var(--error-color);
    color: white;
}

.telegram-notification.warning {
    background-color: var(--warning-color);
    color: white;
}

/* ================================
   СТАРТОВАЯ СТРАНИЦА TELEGRAM THEME
   ================================ */

/* Адаптация стартовой страницы под темы Telegram */
body.telegram-theme .welcome-section {
    background: linear-gradient(135deg, var(--tg-secondary-bg-color, var(--surface-color)) 0%, rgba(44, 44, 46, 0.5) 100%);
    border: 1px solid rgba(255, 255, 255, 0.1);
}

body.telegram-dark .welcome-section {
    background: linear-gradient(135deg, #2C2C2E 0%, rgba(44, 44, 46, 0.8) 100%);
    border: 1px solid rgba(255, 255, 255, 0.08);
}

body.telegram-theme .welcome-text p {
    color: var(--tg-hint-color, var(--text-secondary));
}

/* Адаптация кнопок под тему Telegram */
body.telegram-theme .buttons-grid .btn.btn-primary {
    background: linear-gradient(135deg, var(--tg-button-color, var(--primary-color)) 0%, var(--tg-button-color, #0056CC) 100%);
    color: var(--tg-button-text-color, white);
    box-shadow:
        0 4px 20px rgba(0, 122, 255, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.1);
}

body.telegram-dark .buttons-grid .btn.btn-success {
    background: linear-gradient(135deg, #30D158 0%, #28A745 100%);
    box-shadow:
        0 4px 20px rgba(48, 209, 88, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

body.telegram-dark .buttons-grid .btn.btn-warning {
    background: linear-gradient(135deg, #FF9F0A 0%, #E8930A 100%);
    box-shadow:
        0 4px 20px rgba(255, 159, 10, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

body.telegram-dark .buttons-grid .btn.btn-danger {
    background: linear-gradient(135deg, #FF453A 0%, #D32F2F 100%);
    box-shadow:
        0 4px 20px rgba(255, 69, 58, 0.25),
        0 1px 3px rgba(0, 0, 0, 0.2);
}

/* Эффект анимации для темной темы */
body.telegram-dark .buttons-grid .btn:before {
    background: linear-gradient(90deg,
            transparent,
            rgba(255, 255, 255, 0.1),
            transparent);
}

/* Анимация появления для стартовой страницы */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeIn {
    from {
        opacity: 0;
    }

    to {
        opacity: 1;
    }
}

body.telegram-theme .welcome-section {
    animation: fadeIn 0.6s ease-out;
}

body.telegram-theme .buttons-grid .btn {
    animation: fadeInUp 0.8s ease-out backwards;
}

body.telegram-theme .buttons-grid .btn:nth-child(1) {
    animation-delay: 0.1s;
}

body.telegram-theme .buttons-grid .btn:nth-child(2) {
    animation-delay: 0.2s;
}

body.telegram-theme .buttons-grid .btn:nth-child(3) {
    animation-delay: 0.3s;
}

body.telegram-theme .buttons-grid .btn:nth-child(4) {
    animation-delay: 0.4s;
}

/* ================================
   СПИСОК ПРОГРАММ TELEGRAM THEME
   ================================ */

/* Адаптация списка программ под темы Telegram */
body.telegram-theme .programs-list-header h2 {
    color: var(--tg-text-color, var(--text-primary));
}

body.telegram-theme .btn-back {
    background: var(--tg-secondary-bg-color, var(--surface-color));
    color: var(--tg-text-color, var(--text-primary));
    border-color: var(--tg-secondary-bg-color, var(--border-color));
}

body.telegram-theme .program-item {
    background: var(--tg-secondary-bg-color, var(--card-color));
    border-color: var(--tg-secondary-bg-color, var(--border-color));
}

body.telegram-theme .program-item:hover {
    border-color: var(--tg-link-color, var(--primary-color));
}

body.telegram-theme .program-info h3 {
    color: var(--tg-text-color, var(--text-primary));
}

body.telegram-theme .program-info p {
    color: var(--tg-hint-color, var(--text-secondary));
}

body.telegram-theme .btn-view-program {
    background: var(--tg-button-color, var(--primary-color));
    color: var(--tg-button-text-color, white);
}

body.telegram-dark .program-item {
    background: #2C2C2E;
    border-color: #38383A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.telegram-dark .program-item:hover {
    box-shadow: 0 2px 8px rgba(0, 122, 255, 0.2);
}

body.telegram-dark .program-stats span {
    background: #38383A;
    color: #8E8E93;
}

/* ================================
   УПРАЖНЕНИЯ ТРЕНИРОВКИ (THEME)
   ================================ */
body.telegram-theme .workout-exercises {
    /* Убираем серый фон вокруг карточек упражнений */
    background-color: transparent !important;
    border-color: transparent;
}

/* Карточки упражнений: как у программ/тренировок */
body.telegram-theme .exercise-card {
    background: var(--tg-secondary-bg-color, var(--surface-color));
    border: 1px solid var(--border-color);
    box-shadow: 0 1px 3px var(--shadow-color);
}

body.telegram-dark .exercise-card {
    background: #2C2C2E;
    border-color: #38383A;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

body.telegram-theme .exercise-name-input,
body.telegram-theme .exercise-plan-input,
body.telegram-theme .exercise-comment-input {
    background-color: var(--tg-secondary-bg-color, var(--surface-color));
    color: var(--tg-text-color, var(--text-primary));
    border-color: var(--border-color);
}

body.telegram-theme .exercise-name-input:focus,
body.telegram-theme .exercise-plan-input:focus,
body.telegram-theme .exercise-comment-input:focus {
    background-color: var(--tg-bg-color, var(--card-color));
    border-color: var(--tg-link-color, var(--primary-color));
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

body.telegram-dark .exercise-row {
    border-top-color: #38383A;
}

/* Убираем любой фон у строки действий (кнопка Сохранить) под списком упражнений */
body.telegram-theme .workout-exercises .form-actions {
    background-color: transparent !important;
    box-shadow: none;
}