/* ═══════════════════════════════════════════════════════════════════════════
   base.css — Базовые стили frontend-приложения Svyazi
   
   [РЕАЛИЗОВАНО В: task-2026-05-29-006]
   [ОБНОВЛЕНО В: task-2026-05-31-005] — добавлены CSS-переменные для header
   
   Цветовая схема, типографика, общие стили.
   Стили хедера вынесены в header.css (gradient, hover, glassmorphism, mobile).
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Цветовая схема ────────────────────────────────────────────── */
:root {
    --green-primary: #4caf50;
    --green-dark: #388e3c;
    --green-light: #a5d6a7;
    /* RGB-представления для rgba() в community.css (единый источник) */
    --green-primary-rgb: 76, 175, 80;
    --green-dark-rgb: 56, 142, 60;
    --text-primary: #1a1a2e;
    --text-secondary: #555;
    --bg-light: #f5f5f5;
    --bg-light-rgb: 245, 245, 245;
    --bg-white: #ffffff;
    --border-light: #e0e0e0;

    /* ── Типографическая шкала (design tokens) ─────────────────── */
    --text-display: clamp(2rem, 5vw, 3rem);        /* Hero-заголовок */
    --text-heading: clamp(1.3rem, 3.5vw, 1.75rem); /* Заголовки секций */
    --text-subheading: 1.125rem;                     /* Подзаголовки */
    --text-body: 1rem;                               /* Основной текст */
    --text-caption: 0.875rem;                        /* Подписи, мета */
    --text-small: 0.75rem;                           /* Мелкий текст */
    --text-xs: 0.68rem;                              /* Badge, примечания */

    /* ── Spacing шкала (design tokens) ─────────────────────────── */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;

    /* ── Shadow шкала (design tokens) ──────────────────────────── */
    --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08);
    --shadow-md: 0 4px 12px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.15);
    --shadow-xl: 0 12px 32px rgba(0, 0, 0, 0.2);

    /* Header-specific (см. header.css для полного набора) */
    /* [ОБНОВЛЕНО В: task-2026-06-11-mobile-header-visual-v1] — градиент Material Green 600→800, glass-bg 0.78 */
    --header-gradient: linear-gradient(135deg, #43a047, #2e7d32);
    --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
    --header-height: 48px;
    --header-height-mobile: 36px;
    --header-hover-glow: 0 0 12px rgba(255, 255, 255, 0.3);
    --header-divider-color: rgba(255, 255, 255, 0.3);
    --header-glass-bg: rgba(76, 175, 80, 0.78);
    --header-transition: all 0.2s ease;

    /* Footer-specific (см. footer.css для полного набора стилей) */
    --footer-gradient: linear-gradient(135deg, #4caf50, #388e3c);
    --footer-hover-glow: 0 0 12px rgba(255, 255, 255, 0.3);
    --footer-icon-size: 20px;
    --footer-icon-size-mobile: 14px;
    --footer-transition: all 0.2s ease;

    /* Glassmorphism (см. task-2026-05-31-015) */
    /* [УСИЛЕНО В: task-2026-06-05-013] — с 0.85→0.6, blur 4px→8px для всех карточек */
    --card-glass: rgba(255, 255, 255, 0.6);
    --card-glass-heavy: rgba(255, 255, 255, 0.92);
    --glass-blur: 8px;
    --glass-blur-md: 10px;

    /* Badge цвета для community.css */
    --badge-orange: #ff9800;
    --badge-orange-rgb: 255, 152, 0;
    --badge-purple: #9c27b0;
    --badge-purple-rgb: 156, 39, 176;

    /* ── CTA-градиенты (для community.css CTA-карточек) ───────── */
    --cta-tg-start: #0088cc;
    --cta-tg-end: #006699;
    --cta-chat-start: #00a86b;
    --cta-chat-end: #007a4d;
    --cta-labs-start: #2e7d32;
    --cta-labs-end: #1b5e20;
    --cta-boosty-start: #e65100;
    --cta-boosty-end: #bf360c;

    /* ── Дизайн-токены: общие эффекты (для переиспользования в компонентах) ── */
    --effect-hover-lift: translateY(-3px);
    --effect-hover-lift-sm: translateY(-2px);
    --effect-glow-green: 0 8px 24px rgba(var(--green-primary-rgb), 0.15);
    --effect-glow-green-strong: 0 12px 32px rgba(var(--green-primary-rgb), 0.2);
    --transition-smooth: 0.25s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-smooth-duration: 0.4s;
    --transition-fast: 0.15s cubic-bezier(0.4, 0, 0.2, 1);

    /* ── Responsive брейкпоинты (стандарт для всех CSS-файлов) ────────── */
    --bp-mobile: 480px;   /* Small mobile */
    --bp-tablet: 768px;   /* Tablet / large phone */
}

/* ── Глобальный reset для ссылок — без подчёркиваний ────────── */
/* Исключение: .ps-md-content a (markdown-ссылки) и mailto: */
/* [ДОБАВЛЕНО В: task-2026-06-16-visual-refactor-content] */
a:not(.ps-md-content a):not([href^="mailto:"]) {
    text-decoration: none;
}
a:not(.ps-md-content a):not([href^="mailto:"]):hover {
    text-decoration: none;
}

/* ── Тёмная тема (селектор body.body--dark для совместимости с Quasar Dark Plugin) ──── */
body.body--dark {
    --text-primary: #e0e0e0;
    --text-secondary: #a0a0a0;
    --bg-light: #121212;
    --bg-white: #1e1e1e;
    --border-light: #333333;
    --card-glass: rgba(30, 30, 30, 0.6);
    --card-glass-heavy: rgba(40, 40, 40, 0.92);
    --header-gradient: linear-gradient(135deg, #1b5e20, #2e7d32);
    --header-shadow: 0 4px 20px rgba(0, 0, 0, 0.4);
    --header-height: 48px;
    --header-height-mobile: 36px;
    --header-glass-bg: rgba(27, 94, 32, 0.78);

    /* Footer — тёмная тема */
    --footer-gradient: linear-gradient(135deg, #1b5e20, #2e7d32);

    /* Badge цвета для тёмной темы */
    --badge-orange: #ffb74d;
    --badge-purple: #ce93d8;

    /* CTA-градиенты для тёмной темы — затемнённые версии */
    --cta-tg-start: #0077b3;
    --cta-tg-end: #005580;
    --cta-chat-start: #008f5a;
    --cta-chat-end: #00663d;
    --cta-labs-start: #256b28;
    --cta-labs-end: #144d16;
    --cta-boosty-start: #cc4500;
    --cta-boosty-end: #a33000;

    /* ── Dark mode: hover-эффекты (более мягкое свечение на тёмном фоне) ── */
    --effect-glow-green: 0 8px 24px rgba(76, 175, 80, 0.2);
    --effect-glow-green-strong: 0 12px 32px rgba(76, 175, 80, 0.3);
}

/* ── Типографика ───────────────────────────────────────────────── */
body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
        'Helvetica Neue', Arial, sans-serif;
    color: var(--text-primary);
    background-color: var(--bg-light);
    overflow-x: hidden;
}

/* ── Общие утилиты ─────────────────────────────────────────────── */
.text-green-primary {
    color: var(--green-primary) !important;
}

.bg-green-primary {
    background-color: var(--green-primary) !important;
}

/* ── Admin Panel ──────────────────────────────────────────────── */
.admin-card {
    display: flex;
    flex-direction: column;
    background: var(--card-glass) !important;
    backdrop-filter: blur(var(--glass-blur)) !important;
}

/* ── AI Profile Layout ────────────────────────────────────────── */
.ai-profile-row {
    flex-wrap: nowrap !important;
}

.ai-profile-col-left {
    width: 67%;
    min-width: 350px;
    flex-shrink: 0;
}

.ai-profile-col-right {
    width: 33%;
    min-width: 280px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .ai-profile-col-left,
    .ai-profile-col-right {
        width: 100% !important;
        min-width: 0 !important;
    }
}

/* ── Responsive: .nicegui-content на мобильных ────────────────── */
@media (max-width: 768px) {
    .nicegui-content {
        max-width: 100% !important;
        padding-left: 0.5rem !important;
        padding-right: 0.5rem !important;
    }
}

/* ── Search bar: mobile fine-tune ──────────────────────────────── */
@media (max-width: 480px) {
    .search-bar-select {
        width: 100% !important;
    }
    .search-bar-btn {
        width: 100%;
    }
}

/* ── Общий класс .responsive-table для таблиц с горизонтальным скроллом ── */
.responsive-table {
    overflow-x: auto;
    display: block;
    width: 100%;
    -webkit-overflow-scrolling: touch;
}
.responsive-table table {
    min-width: 600px;
    width: 100%;
    border-collapse: collapse;
}

/* ── Keyboard focus styles (WCAG 2.4.7) ───────────────────────── */
:focus-visible {
    outline: 2px solid var(--green-primary);
    outline-offset: 2px;
    border-radius: 4px;
}
/* Для Quasar-кнопок — они уже имеют свои focus-стили, не переопределяем */

/* ═══════════════════════════════════════════════════════════════════════════
   MOBILE ENHANCEMENTS BLOCK — Mobile Visual Polish
   
   [РЕАЛИЗОВАНО В: task-2026-06-10-007]
   [ОБНОВЛЕНО В: task-2026-06-11-mobile-header-visual-v1] — tap-highlight-color
   
   Все mobile-specific правила собраны здесь для централизованного управления.
   Используют `@media (pointer: coarse)` для тач-устройств, `safe-area-inset`
   для устройств с notch, touch-target минимумы по WCAG 2.5.5.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── P0: Глобальное отключение серого оверлея при тапе на iOS Safari ──── */
* {
    -webkit-tap-highlight-color: transparent;
}

/* ── P1.1: Отключение sticky hover на тач-устройствах (pointer: coarse) ── */
/* Все интерактивные элементы: отключаем transform/shadow при hover на таче */
@media (pointer: coarse) {
    .ps-card-interactive:hover,
    .ps-stat:hover,
    .ps-benefit:hover,
    .ps-glass-card:hover,
    .ps-glass-card.ps-target-card:hover,
    .vote-card:hover,
    .cal-event:hover,
    .ps-faq-item:hover,
    .ps-cta-card:hover,
    .ps-cta-card--featured:hover,
    .ps-path-card--featured:hover,
    .ps-article-card:hover,
    .ps-hero img:hover,
    .scroll-to-top-btn:hover,
    .auth-modal-benefit:hover,
    .vote-card__img:hover,
    .cal-link:hover,
    .cal-link--ghost:hover,
    .ps-hero-cta:hover,
    .footer-social-link:hover,
    .footer-link:hover::after,
    .header-btn:hover,
    .header-link:hover::after,
    .header-link:hover,
    .header-logo:hover,
    .user-avatar:hover,
    .mobile-nav-btn:hover,
    .side-hover-nav-item:hover,
    .cc-gauge-card:hover,
    .cc-community-card:hover,
    .cc-nav-sticky .q-btn:hover,
    .ps-stat.cursor-pointer:hover,
    .profile-btn-save:hover,
    .profile-btn-save-ai:hover,
    .copy-btn:hover,
    .article-md-content .copy-btn:hover,
    .article-md-content .codehilite:hover .copy-btn {
        transform: none !important;
        box-shadow: none !important;
        animation: none !important;
        background: transparent !important;
        border-color: inherit !important;
        opacity: inherit !important;
    }
    /* Сброс ::after псевдоэлементов underline */
    .header-link::after,
    .footer-link::after {
        width: 0 !important;
    }
    /* Сброс inline SVG hover */
    .footer-link:hover {
        opacity: 1 !important;
    }
    .footer-social-link:hover {
        background: transparent !important;
    }
    /* Сброс glow-пульсаций */
    .ps-hero-cta {
        animation: none !important;
    }
    .profile-btn-save-ai {
        animation: none !important;
    }
}

/* ── P5.1 + P1.1: Замена hover на active с scale(0.97) для тач-устройств ── */
@media (hover: none) and (pointer: coarse) {
    .ps-card-interactive:active,
    .ps-stat:active,
    .ps-benefit:active,
    .ps-glass-card:active,
    .ps-glass-card.ps-target-card:active,
    .vote-card:active,
    .cal-event:active,
    .ps-faq-item:active,
    .ps-cta-card:active,
    .ps-path-card--featured:active,
    .ps-article-card:active,
    .header-btn:active,
    .header-link:active,
    .user-avatar:active,
    .footer-social-link:active,
    .profile-btn-save:active,
    .cc-gauge-card:active,
    .cc-community-card:active,
    .cc-nav-sticky .q-btn:active,
    .ps-stat.cursor-pointer:active {
        transform: scale(0.97) !important;
        transition: transform 0.1s ease !important;
    }
}

/* ── P1.3: Safe-area-inset для устройств с notch (iPhone X+, Pixel 4+) ── */
/* [ОБНОВЛЕНО В: task-2026-06-11-mobile-header-visual-v1] — padding-top для header */
@supports (padding: env(safe-area-inset-top)) {
    body {
        padding-top: env(safe-area-inset-top);
        padding-bottom: env(safe-area-inset-bottom);
        padding-left: env(safe-area-inset-left);
        padding-right: env(safe-area-inset-right);
    }
    .nicegui-header,
    .q-header {
        padding-top: env(safe-area-inset-top) !important;
        padding-left: calc(env(safe-area-inset-left) + 6px) !important;
        padding-right: calc(env(safe-area-inset-right) + 6px) !important;
    }
    .nicegui-footer {
        padding-bottom: calc(env(safe-area-inset-bottom) + 4px) !important;
        padding-left: calc(env(safe-area-inset-left) + 8px) !important;
        padding-right: calc(env(safe-area-inset-right) + 8px) !important;
    }
}

/* ── P1.2: Touch-target минимум 44×44px (WCAG 2.5.5) ──────────────────── */
@media (pointer: coarse) {
    button,
    a,
    .q-btn,
    .q-item,
    .footer-social-link,
    .header-btn,
    .header-link,
    .user-avatar,
    .mobile-nav-btn,
    .side-hover-nav-item,
    .cal-link,
    .cal-link--ghost {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ── P3.2: iOS input font-size fix (предотвращает авто-zoom на iOS Safari) ── */
@media (max-width: 768px) {
    input,
    textarea,
    select {
        font-size: 16px !important;
    }
}

/* ── P2.4: Mobile line-height оптимизация ───────────────────────────────── */
@media (max-width: 480px) {
    body {
        line-height: 1.5;
    }
    h1, h2, h3 {
        line-height: 1.2;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SHARED ANIMATIONS (@keyframes)
   
   [РЕАЛИЗОВАНО В: task-2026-06-21-ui-profile-analysis]
   
   ЕДИНЫЙ ИСТОЧНИК всех анимаций проекта. Page-specific CSS ТОЛЬКО
   применяет анимации через animation: <name>, но НЕ определяет @keyframes.
   
   Перенесено из: community-hero.css, profile.css, career-compass.css
   ═══════════════════════════════════════════════════════════════════════════ */

/* Entrance: появление снизу (унифицировано: 20px — меньше motion) */
@keyframes fadeInUp {
    from { opacity: 0; transform: translateY(20px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Entrance: появление с масштабированием */
@keyframes fadeInScale {
    from { opacity: 0; transform: scale(0.9); }
    to   { opacity: 1; transform: scale(1); }
}

/* Entrance: простое появление */
@keyframes fadeIn {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* Entrance: выезд слева */
@keyframes slideInLeft {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}

/* Пульсация glow (унифицированная, 2s) */
@keyframes pulseGlow {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--green-primary-rgb), 0.3); }
    50%      { box-shadow: 0 0 20px rgba(var(--green-primary-rgb), 0.6); }
}

/* Пульсация glow — оранжевая (для career-compass-btn) */
@keyframes pulseGlowOrange {
    0%, 100% { box-shadow: 0 4px 16px rgba(255, 111, 0, 0.35); }
    50%      { box-shadow: 0 4px 24px rgba(255, 111, 0, 0.6), 0 0 32px rgba(255, 111, 0, 0.2); }
}

/* Пульсация glow — мульти-градиент (для cc-top-refresh-btn) */
@keyframes pulseGlowMulti {
    0%, 100% { box-shadow: 0 0 5px rgba(59, 130, 246, 0.2); }
    50%      { box-shadow: 0 0 20px rgba(59, 130, 246, 0.5), 0 0 40px rgba(168, 85, 247, 0.25); }
}

/* SvyaziIcon: появление checkmark */
@keyframes svyaziCheckmarkIn {
    0%   { opacity: 0; transform: scale(0); }
    60%  { opacity: 1; transform: scale(1.15); }
    100% { opacity: 1; transform: scale(1); }
}

/* SvyaziIcon: скрытие checkmark */
@keyframes svyaziCheckmarkOut {
    0%   { opacity: 1; transform: scale(1); }
    100% { opacity: 0; transform: scale(0.8); }
}

/* Парение (для deco-элементов) */
@keyframes float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-8px); }
}

/* Мерцание (для градиентных полосок) */
@keyframes shimmer {
    0%   { background-position: -200% center; }
    100% { background-position: 200% center; }
}

/* Подсветка (glow-пульсация сильная) */
@keyframes glow {
    0%, 100% { box-shadow: 0 0 8px rgba(var(--green-primary-rgb), 0.3); }
    50%      { box-shadow: 0 0 24px rgba(var(--green-primary-rgb), 0.6); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   STAGGERED ANIMATION PATTERN (.animate-section)
   
   [РЕАЛИЗОВАНО В: task-2026-06-21-ui-profile-analysis]
   
   Единый класс для последовательного появления секций.
   Заменяет page-specific .profile-section и .cc-section animation rules.
   ═══════════════════════════════════════════════════════════════════════════ */

.animate-section {
    animation: fadeInUp 0.4s ease-out both;
}
.animate-section:nth-child(1) { animation-delay: 0.05s; }
.animate-section:nth-child(2) { animation-delay: 0.10s; }
.animate-section:nth-child(3) { animation-delay: 0.15s; }
.animate-section:nth-child(4) { animation-delay: 0.20s; }
.animate-section:nth-child(5) { animation-delay: 0.25s; }
.animate-section:nth-child(6) { animation-delay: 0.30s; }
.animate-section:nth-child(7) { animation-delay: 0.35s; }
.animate-section:nth-child(8) { animation-delay: 0.40s; }

/* ═══════════════════════════════════════════════════════════════════════════
   GLOBAL prefers-reduced-motion (WCAG 2.3.3)
   
   [РЕАЛИЗОВАНО В: task-2026-06-21-ui-profile-analysis]
   
   Отключает ВСЕ анимации для пользователей с vestibular disorders.
   Page-specific блоки @media (prefers-reduced-motion) больше не нужны.
   ═══════════════════════════════════════════════════════════════════════════ */
@media (prefers-reduced-motion: reduce) {
    /* Все staggered-секции */
    .animate-section,
    .profile-section,
    .cc-section {
        animation: none !important;
    }
    /* Карточки с entrance-анимациями */
    .profile-identity-card,
    .skills-preview,
    .profile-empty-state {
        animation: none !important;
    }
    /* Кнопки с pulse-анимациями */
    .profile-btn-save-ai,
    .career-compass-btn,
    .cc-top-refresh-btn {
        animation: none !important;
    }
    /* Hover-переходы для карточек */
    .cc-gauge-card,
    .cc-community-card,
    .cc-gauge-card:hover,
    .cc-community-card:hover {
        transition: none !important;
        transform: none !important;
    }
    /* SvyaziIcon checkmark */
    .svyazi-icon__checkmark.show,
    .svyazi-icon__checkmark.hide {
        animation: none !important;
    }
}

/* ── Глобальный reset ссылок: убираем браузерные подчёркивания ────── */
/* [ДОБАВЛЕНО В: task-2026-06-16-visual-refactor-content] */
/* Исключение: markdown-контент (md-content) и mailto: ссылки */
a:not(.ps-md-content a):not([href^="mailto:"]) {
    text-decoration: none;
}