/* css/main.css (УПРОЩЕННЫЙ) */

/* ==========================================================================
   THEMES & CSS VARIABLES
   ========================================================================== */
:root {
    /* ----- Colors (Dark Theme - idc. Style) ----- */
    --bg-primary: #101010;
    --bg-secondary: #1C1C1C;
    --bg-tertiary: #2A2A2A;
    --bg-overlay: rgba(16, 16, 16, 0.8);
    --text-primary: #F5F5F7;
    --text-secondary: #A0A0A5;
    --text-disabled: #505055;
    --text-on-accent: #FFFFFF;
    --accent-primary: #FF3B30;
    --accent-secondary: #0A84FF;
    --border-primary: #38383A;
    
    /* ----- Layout & Spacing ----- */
    --header-height: 56px;
    --footer-height: 50px;
    /* --panel-width: 300px; /* УДАЛЕНО - ширина панелей теперь 100% или определяется в components.css */
    --base-padding: 16px;
    --compact-padding: 8px;
    --border-radius-small: 6px;
    --border-radius-medium: 10px;
    --border-radius-large: 14px;

    /* ----- Fonts ----- */
    --font-main: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    --font-display: monospace;
    --font-size-small: 0.75rem;
    --font-size-base: 0.9375rem;
    --font-size-medium: 1rem;
    --font-size-large: 1.25rem;
    --font-size-xlarge: 1.5rem;

    /* ----- Shadows ----- */
    --shadow-soft: 0 1px 2px rgba(0, 0, 0, 0.25);
    --shadow-medium: 0 4px 10px rgba(0, 0, 0, 0.3);

    /* ----- Transitions ----- */
    --transition-speed-fast: 0.18s;
    --transition-speed-normal: 0.28s;
    --transition-easing: cubic-bezier(0.4, 0, 0.2, 1); 
}

body.theme-light {
    --bg-primary: #F2F2F7; 
    --bg-secondary: #FFFFFF; 
    --bg-tertiary: #E5E5EA; 
    --text-primary: #000000;
    --text-secondary: #3C3C43; 
    --text-disabled: #AEAEB2; 
    --border-primary: #C6C6C8;
    --shadow-soft: 0 0.5px 1px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 2px 6px rgba(0, 0, 0, 0.12);
}

/* ==========================================================================
   BASE STYLES & RESETS
   ========================================================================== */
*, *::before, *::after {
  box-sizing: border-box; margin: 0; padding: 0;
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  -webkit-tap-highlight-color: transparent; 
}

html, body {
    /* Предотвращаем "отскок" и "pull-to-refresh" на уровне документа */
    overscroll-behavior-y: contain; /* Запрещает передачу скролла родителю по вертикали */
    overscroll-behavior-x: none;    /* Запрещает по горизонтали (на всякий случай) */
    /* Дополнительно для iOS можно попробовать (но может мешать скроллу внутри элементов): */
    -webkit-overflow-scrolling: touch;
}

html { font-size: 16px; line-height: 1.4; -webkit-text-size-adjust: 100%; }
body {
    font-family: var(--font-main); font-size: var(--font-size-base);
    background-color: var(--bg-primary); color: var(--text-primary);
    margin: 0; /* Убираем дефолтные отступы body */
    width: 100%;
	position: relative;
    height: 100vh; /* или 100dvh для лучшей работы на мобильных с учетом UI браузера */
    display: flex; /* Чтобы .app-main-container мог занять всю высоту */
    flex-direction: column; /* Если .app-main-container единственный прямой потомок body */
    overflow: hidden; /* Предотвращаем скролл на body */
    overscroll-behavior-y: none; 
    padding: env(safe-area-inset-top) env(safe-area-inset-right) env(safe-area-inset-bottom) env(safe-area-inset-left);
    user-select: none; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none;
}

a { color: var(--accent-secondary); text-decoration: none; }
a:hover { text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-weight: 600; line-height: 1.3; margin-bottom: 0.5em; }

/* ==========================================================================
   HELPER CLASSES
   ========================================================================== */
.is-hidden { display: none !important; }
.is-invisible { visibility: hidden !important; }
.is-visually-hidden { 
    position: absolute !important; height: 1px; width: 1px; 
    overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; 
}
/* .is-active { } /* Маркер, стилизуется по месту */
.full-width { width: 100%; }

/* ==========================================================================
   ICONS & BUTTONS
   ========================================================================== */
.material-symbols-outlined {
    font-family: 'Material Symbols Outlined'; font-weight: normal; font-style: normal;
    font-size: 22px; line-height: 1; vertical-align: middle; display: inline-block;
    color: currentColor; flex-shrink: 0;
    font-variation-settings: 'wght' 400; font-feature-settings: 'liga'; 
    text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased;
    transition: color var(--transition-speed-fast);
}
.material-symbols-outlined.small-icon { font-size: 18px; }
.material-symbols-outlined.large-icon { font-size: 32px; }

.icon-btn {
    background: none; border: none; padding: 6px; cursor: pointer;
    color: var(--text-secondary); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    width: 38px; height: 38px;
    transition: background-color var(--transition-speed-fast) var(--transition-easing), 
                color var(--transition-speed-fast) var(--transition-easing),
                transform var(--transition-speed-fast) var(--transition-easing);
}
.icon-btn .material-symbols-outlined { font-size: 20px; }
.icon-btn:hover, .icon-btn:focus-visible { background-color: var(--bg-tertiary); color: var(--text-primary); }
.icon-btn:active { transform: scale(0.90); }

.action-button {
    background-color: var(--accent-primary); color: var(--text-on-accent); border: none;
    padding: 8px 16px; font-family: var(--font-main); font-size: 0.9rem; font-weight: 500;
    border-radius: var(--border-radius-medium); cursor: pointer; display: inline-flex;
    align-items: center; justify-content: center; text-align: center; text-decoration: none;
    transition: background-color var(--transition-speed-normal) var(--transition-easing), 
                transform var(--transition-speed-fast) var(--transition-easing),
                box-shadow var(--transition-speed-normal) var(--transition-easing);
    box-shadow: 0 1px 1px rgba(0,0,0,0.1);
}
.action-button:hover, .action-button:focus-visible {
    background-color: color-mix(in srgb, var(--accent-primary) 88%, black);
    box-shadow: 0 2px 4px rgba(0,0,0,0.15);
}
.action-button:active {
    transform: scale(0.97); box-shadow: inset 0 1px 1px rgba(0,0,0,0.1);
    background-color: color-mix(in srgb, var(--accent-primary) 80%, black);
}
.action-button .material-symbols-outlined.button-icon { margin-right: 6px; font-size: 18px; }
.action-button.compact { padding: 6px 12px; font-size: 0.8rem; min-height: 32px; }

/* ==========================================================================
   MAIN APPLICATION LAYOUT
   ========================================================================== */
.app-main-container {
    display: flex; 
    flex-direction: column;
    height: 100%; /* Занимает всю высоту body */
    width: 100%;
    overflow: hidden; /* Запрещаем скролл на самом контейнере приложения */
    position: relative; 
    background-color: var(--bg-primary);
    overscroll-behavior-y: contain; 	
}

.app-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 0 var(--compact-padding) 0 var(--base-padding);
    height: var(--header-height);
    background-color: var(--bg-primary); 
    border-bottom: 1px solid var(--border-primary);
    flex-shrink: 0; position: relative; z-index: 100; /* z-index для header */
}
/* Стили для .month-year-select-trigger и .header-actions остаются здесь */
.month-year-select-trigger {
    background: none; border: none; padding: 6px 8px; 
    cursor: pointer; display: flex; align-items: center;
    font-family: var(--font-display); font-size: 1.3rem; 
    font-weight: 500; color: var(--text-primary);
    border-radius: var(--border-radius-medium);
    transition: background-color var(--transition-speed-fast);
}
.month-year-select-trigger:hover { background-color: var(--bg-tertiary); }
.month-year-select-trigger #current-month-year-display { margin-right: 6px; }
.month-year-select-trigger .dropdown-arrow {
    font-size: 20px; color: var(--text-secondary); margin-left: 4px;
    transition: transform var(--transition-speed-normal);
}
.month-year-select-trigger.is-open .dropdown-arrow { transform: rotate(180deg); }
.app-header .header-actions { display: flex; align-items: center; }
.app-header .header-actions .icon-btn { margin-left: 4px; }


.app-footer {
    display: flex; justify-content: space-between; align-items: center;
    height: var(--footer-height); background-color: var(--bg-primary);
    border-top: 1px solid var(--border-primary);
    padding: 0 var(--base-padding);
    flex-shrink: 0; position: relative; z-index: 100; /* z-index для footer */
}
.app-footer .footer-icon-btn {
     width: 40px; height: 40px;
}
.app-footer .footer-icon-btn .material-symbols-outlined { font-size: 24px; }
/* Кнопка "Сегодня" .action-button.compact уже описана выше */

/* ==========================================================================
   PWA BLOCKER & ONBOARDING OVERLAYS
   ========================================================================== */
.pwa-blocker-overlay {
    position: fixed; 
    inset: 0; 
    background-color: var(--bg-overlay);
    display: flex; 
    align-items: center;
    justify-content: center;
    z-index: 9999; 
    padding: var(--base-padding);
    text-align: center;
    backdrop-filter: blur(5px); 
    opacity: 0; 
    visibility: hidden;
    transition: opacity 0.3s var(--transition-easing), visibility 0s 0.3s;
}
.pwa-blocker-overlay:not(.is-hidden) { 
    opacity: 1;
    visibility: visible;
    transition-delay: 0s;
}

.pwa-blocker-content {
    background-color: var(--bg-secondary);
    padding: 30px 25px;
    border-radius: var(--border-radius-large);
    box-shadow: var(--shadow-medium);
    max-width: 400px; 
    /* Убираем animation, если используем transition для overlay */
}

/* Состояния проверки */
.pwa-check-state { /* Общий контейнер для loading и result */
     /* Стили для центрирования содержимого внутри */
     display: flex;
     flex-direction: column;
     align-items: center;
     gap: 10px;
}

/* Состояние Загрузки */
#pwa-check-loading p {
    color: var(--text-secondary);
    font-size: 0.9rem;
}
.pwa-loading-spinner {
    width: 30px;
    height: 30px;
    border: 3px solid var(--border-primary); /* Серый круг */
    border-top-color: var(--accent-secondary); /* Синяя дуга */
    border-radius: 50%;
    animation: pwa-spinner 0.8s linear infinite;
    margin-bottom: 10px; /* Отступ от текста */
}
@keyframes pwa-spinner {
    to { transform: rotate(360deg); }
}

/* Состояние Результата */
#pwa-check-result .large-icon { /* Иконка статуса (check_circle или error) */
    font-size: 48px; /* Крупнее */
    margin-bottom: 5px;
}
#pwa-check-result p { /* Текст статуса */
    font-size: 1rem;
    font-weight: 500;
    color: var(--text-primary);
}
#pwa-check-result.supported #pwa-status-icon {
    color: var(--accent-secondary); /* Синий для успеха */
}
#pwa-check-result.not-supported #pwa-status-icon {
    color: var(--accent-primary); /* Красный для неудачи */
}

/* Блок с инструкциями */
#pwa-install-instructions { 
    margin-top: 20px; /* Отступ после статуса */
}
#pwa-install-instructions .logo-placeholder { /* Стили лого */
    font-family: var(--font-display); 
    font-size: 2.5rem; /* Чуть меньше */
    color: var(--accent-primary);
    margin-bottom: 15px; 
    line-height: 1;
}
#pwa-install-instructions h1 { /* Заголовок инструкций */
    font-family: var(--font-display); 
    margin-bottom: 12px; 
    font-size: 1.3rem; /* Чуть меньше */
}
#pwa-install-instructions p { /* Тексты инструкций */
    color: var(--text-secondary); 
    line-height: 1.6; 
    font-size: 0.9rem; 
    margin-top: 10px; 
}

/* Скрытие/показ инструкций */
#pwa-install-instructions .ios-instructions, 
#pwa-install-instructions .android-instructions, 
#pwa-install-instructions .desktop-instructions {
    display: none; 
}
#pwa-install-instructions .ios-instructions.is-visible, 
#pwa-install-instructions .android-instructions.is-visible, 
#pwa-install-instructions .desktop-instructions.is-visible {
    display: block; 
}

.onboarding-container { /* Это оверлей для всего процесса онбординга */
    position: fixed; inset: 0; background-color: var(--bg-primary);
    display: flex; align-items: center; justify-content: center;
    z-index: 9990; opacity: 0; visibility: hidden;
    transition: opacity var(--transition-speed-normal) var(--transition-easing), 
                visibility 0s var(--transition-speed-normal); /* Быстрое скрытие/показ */
}
.onboarding-container.is-active {
    opacity: 1; visibility: visible; transition-delay: 0s;
}
/* Стили для конкретных шагов онбординга остаются в onboarding.css */

@keyframes fadeInScale { /* Используется PWA Blocker и модалками */
    from { opacity: 0; transform: scale(0.9); }
    to { opacity: 1; transform: scale(1); }
}

/* Стили для .progress-bar и .progress (используются в onboarding и updater) */
.progress-bar {
    width: 80%; /* Или 100% в зависимости от контекста */
    height: 8px;
    background-color: var(--bg-tertiary);
    border-radius: 4px; /* Или половина высоты */
    overflow: hidden;
    margin: 10px auto; /* Пример центрирования и отступов */
}
.progress-bar .progress {
    width: 0%; 
    height: 100%;
    background-color: var(--accent-primary);
    border-radius: 4px; /* Должен совпадать с родителем */
    transition: width 0.5s cubic-bezier(0.65, 0, 0.35, 1); /* Общая анимация для прогресса */
}