/*
 * StudyHub.AZ
 * Filename: base.css   
 * Author: Ostwind by Dr.FC
 * Reset, body и глобальные настройки
 */

/*
╔═══════════════════════════════════════════════════════════════════════════════╗
║                    🏗️ STUDYHUB.AZ CSS АРХИТЕКТУРА                            ║
║                    📚 Полная структура: 46 CSS файлов                        ║
║         Детальная документация: docs/01-architecture/11-styles-architecture.md ║
╚═══════════════════════════════════════════════════════════════════════════════╝

┌─────────────────────────────────────────────────────────────────────────────┐
│                    🔧 БАЗОВЫЕ СТИЛИ (5 файлов)                              │
└─────────────────────────────────────────────────────────────────────────────┘

├─ vars.css         ✅ CSS переменные и константы (цвета, размеры, отступы)
├─ base.css         ✅ Базовые стили системы, reset стили, глобальные настройки
├─ style.css        ✅ Основные стили приложения, общие правила
├─ typography.css   ✅ Типографика и шрифты, заголовки, параграфы
└─ utilities.css    ✅ Утилитарные классы (.d-flex, .mt-4, .text-center)

Порядок загрузки: vars.css → base.css → style.css → typography.css → utilities.css

┌─────────────────────────────────────────────────────────────────────────────┐
│                 🧩 КОМПОНЕНТЫ И МАКЕТ (7 файлов)                            │
└─────────────────────────────────────────────────────────────────────────────┘

├─ components.css   ✅ Стили компонентов (модальные окна, формы, карточки)
├─ layout.css       ✅ Макет страниц, контейнеры, сетки, секции
├─ forms.css        ✅ Стили форм, input, textarea, select, валидация
├─ tables.css       ✅ Стили таблиц, сортировка, пагинация
├─ buttons.css      ✅ Стили кнопок (btn-modern, старые классы)
├─ cards.css        ✅ Стили карточек (stat-card, feature-card, department-cards)
└─ header.css       ✅ Стили заголовка, навигации, меню

┌─────────────────────────────────────────────────────────────────────────────┐
│                  🎨 ТЕМЫ ДЛЯ РОЛЕЙ (6 файлов)                               │
└─────────────────────────────────────────────────────────────────────────────┘

├─ themes-executives.css  ✅ Тема для исполнительных панелей (директор, оператор)
├─ themes-teachers.css    ✅ Тема для преподавателей
├─ themes-students.css    ✅ Тема для студентов
├─ themes-programmers.css ✅ Тема для программистов
├─ themes-parents.css     ✅ Тема для родителей
└─ theme-loader.css       ✅ Загрузчик тем, автоматическое переключение

┌─────────────────────────────────────────────────────────────────────────────┐
│                    📱 АДАПТИВНОСТЬ (4 файла)                                │
└─────────────────────────────────────────────────────────────────────────────┘

├─ responsive.css    ✅ Общие адаптивные стили, медиа-запросы
├─ mobile.css        ✅ Стили для мобильных устройств (≤767px)
├─ tablet.css         ✅ Стили для планшетов (768px-1024px)
└─ desktop.css       ✅ Стили для десктопов (≥1025px)

Breakpoints: Mobile ≤767px | Tablet 768-1024px | Desktop ≥1025px

┌─────────────────────────────────────────────────────────────────────────────┐
│            💼 СПЕЦИАЛИЗИРОВАННЫЕ МОДУЛИ (14 файлов)                         │
└─────────────────────────────────────────────────────────────────────────────┘

📊 Отчеты (3 файла):
├─ accounting_report.css      ✅ Стили для бухгалтерских отчетов
├─ financial_report.css       ✅ Стили для финансовых отчетов
└─ print_accounting_report.css ✅ Стили для печати бухгалтерских отчетов

👔 Исполнительные панели (2 файла):
├─ executive-dashboard-styles.css ✅ Стили дашборда исполнительных панелей
└─ executive-payment-cards.css    ✅ Стили платежных карт для исполнительных панелей

🛡️ Администрирование (1 файл):
└─ super-admin-components.css     ✅ Компоненты для супер-администратора

🏢 Компании: стили в forms.css, components.css, cards.css, layout.css, mobile.css

🌍 Обучение (1 файл):
└─ abroad_education.css      ✅ Стили для модуля обучения за рубежом

📅 Расписание (1 файл):
└─ schedule_conflicts.css    ✅ Стили конфликтов расписания
(Стили расписания в layout.css, cards.css, components.css, mobile.css, tablet.css, responsive.css)

💰 Финансы (4 файла):
├─ monthly_expense.css       ✅ Стили месячных расходов
├─ monthly_profit.css        ✅ Стили месячной прибыли
├─ monthly_profit.min.css    ✅ Минифицированная версия стилей прибыли
└─ monthly-pages.css         ✅ Стили месячных страниц

📄 Документы (1 файл):
└─ pdf-generator.css         ✅ Стили для генератора PDF

┌─────────────────────────────────────────────────────────────────────────────┐
│              ⚡ AJAX И ВАЛИДАЦИЯ (1 файл)                                   │
└─────────────────────────────────────────────────────────────────────────────┘

└─ ajax-validation.css       ✅ Стили валидации AJAX, индикаторы загрузки

┌─────────────────────────────────────────────────────────────────────────────┐
│           🎬 АНИМАЦИИ И ЭФФЕКТЫ (1 файл)                                   │
└─────────────────────────────────────────────────────────────────────────────┘

└─ animations.css            ✅ Анимации и переходы, keyframes, эффекты

┌─────────────────────────────────────────────────────────────────────────────┐
│         🛠️ УТИЛИТЫ И СПЕЦИАЛЬНЫЕ (10 файлов)                              │
└─────────────────────────────────────────────────────────────────────────────┘

├─ otp-styles.css            ✅ Стили для OTP (одноразовых паролей)
├─ icon-picker.css           ✅ Стили выбора иконок
├─ javascript-check.css      ✅ Стили проверки JavaScript
├─ global-loading.css        ✅ Стили глобальной загрузки
├─ welcome-message.css       ✅ Стили приветственного сообщения
├─ scroll-to-top.css         ✅ Стили кнопки прокрутки вверх
├─ maintenance.css           ✅ Стили страницы обслуживания
└─ zoom.css                  ✅ Стили масштабирования

┌─────────────────────────────────────────────────────────────────────────────┐
│                    📊 ИТОГО: 46 CSS ФАЙЛОВ                                  │
└─────────────────────────────────────────────────────────────────────────────┘

Базовые: 5 | Компоненты: 7 | Темы: 6 | Адаптивность: 4 | Модули: 14 | 
AJAX: 1 | Анимации: 1 | Утилиты: 8 = 46 файлов

┌─────────────────────────────────────────────────────────────────────────────┐
│                       🎯 ПРАВИЛА АДАПТИВНОСТИ                              │
└─────────────────────────────────────────────────────────────────────────────┘

📱 МОБИЛЬНЫЕ (≤ 480px):
   • Компактная 2-колоночная сетка
   • Уменьшенные отступы: padding 16px
   • Touch-friendly элементы: min-height 44px
   • Вертикальная раскладка компонентов

📲 ПЛАНШЕТЫ (768-1024px):
   • Сбалансированные размеры: padding 24px
   • Auto-fit grid с minmax(200px)
   • Средние размеры шрифтов
   • Оптимизированная навигация

🖥️ ДЕСКТОП (≥ 1025px):
   • Полные размеры: padding до 40px
   • Все AI эффекты и анимации
   • Hover-состояния и интерактивность
   • Clamp() для адаптивных размеров

┌─────────────────────────────────────────────────────────────────────────────┐
│                      ⚡ АРХИТЕКТУРНЫЕ ПРИНЦИПЫ                             │
└─────────────────────────────────────────────────────────────────────────────┘

✅ МОДУЛЬНОСТЬ:
   • Каждый файл отвечает за свою область
   • Четкое разделение ответственности
   • Переиспользуемые компоненты

✅ ПРОИЗВОДИТЕЛЬНОСТЬ:
   • Минимальное дублирование кода
   • Оптимизированные селекторы
   • Загрузка только необходимых стилей

✅ ПОДДЕРЖКА:
   • Понятная структура файлов
   • Подробная документация
   • Консистентная методология

┌─────────────────────────────────────────────────────────────────────────────┐
│                          🚫 ОГРАНИЧЕНИЯ                                    │
└─────────────────────────────────────────────────────────────────────────────┘

❌ ЗАПРЕЩЕНО:
   • Media queries в основных файлах
   • Дублирование переменных
   • Адаптивные стили в components.css
   • Смешивание логики разных модулей

✅ РАЗРЕШЕНО:
   • Использование CSS-переменных
   • Модульная архитектура
   • Семантические названия классов
   • BEM-методология для компонентов

┌─────────────────────────────────────────────────────────────────────────────┐
│                        📋 ПОРЯДОК ПОДКЛЮЧЕНИЯ                              │
└─────────────────────────────────────────────────────────────────────────────┘

1. vars.css         → Переменные и константы
2. base.css         → Сброс стилей и основа
3. layout.css       → Базовые контейнеры
4. components.css   → Компоненты интерфейса
5. style.css        → Общие стили
6. [device].css     → Адаптивные стили для устройства

╔═══════════════════════════════════════════════════════════════════════════════╗
║  🎯 ФАЙЛ (style.css) - БАЗОВАЯ ОСНОВА ДЛЯ ВСЕХ УСТРОЙСТВ               ║
║  Содержит универсальные стили без привязки к размерам экрана                ║  
║  Адаптивность реализуется через подключение соответствующих device-файлов   ║
╚═══════════════════════════════════════════════════════════════════════════════╝
*/

/* === RESET === */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  /* Универсальный запрет переноса слов для всего проекта */
  word-break: keep-all !important;
  word-wrap: normal !important;
  overflow-wrap: normal !important;
  hyphens: none !important;
}

body {
  font-family: var(--font-main);
  font-size: 16px;
  line-height: 1.6;
  background: linear-gradient(135deg, var(--color-bg-light), var(--color-bg-main));
  color: var(--color-text-main);
  overflow-x: hidden;
}

/* === COMPONENT ENHANCEMENT === */
.bg-animated::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 20% 80%, rgba(11, 122, 62, 0.1), transparent 50%),
              radial-gradient(circle at 80% 20%, rgba(12, 60, 120, 0.1), transparent 50%);
  animation: backgroundShift 20s ease-in-out infinite;
  pointer-events: none;
  z-index: 0;
}

/* Отключение анимаций фона на мобильных - перенесено в mobile.css */

/* === ACCESSIBILITY & THEME SUPPORT === */

/* === REDUCED MOTION === */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .logos-container::before,
  .welcome-box::before,
  .form-login::before,
  .form-block::before {
    animation: none;
  }
}

/* === HIGH CONTRAST MODE === */
@media (prefers-contrast: high) {
  :root {
    --color-border: #000;
    --color-text-main: #000;
    --color-bg-main: #fff;
  }
  
  button,
  .button,
  .welcome-button,
  .button-link {
    border: 2px solid #000;
  }
}

/* === LANGUAGE SELECTOR CENTERING === */
.lang-selector {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  margin-top: 10px;
}

.flag-container {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
  margin: 0 auto !important;
}

.footer-text a {
  color: var(--color-primary);
  text-decoration: none;
  transition: color 0.3s ease;
}

.footer-text a:hover {
  color: var(--color-primary-dark);
  text-decoration: underline;
}

/* === DARK THEME SUPPORT === */
@media (prefers-color-scheme: dark) {
  .footer-text {
    background: linear-gradient(90deg, #1c1c1c, #2a2a2a);
    color: #ccc;
    border-top-color: #333;
  }

  .footer-text a {
    color: var(--color-accent);
  }
}

/* === PRINT STYLES === */
@media print {
  *,
  *::before,
  *::after {
    background: transparent !important;
    color: var(--color-text-main) !important;
    box-shadow: none !important;
    text-shadow: none !important;
  }

  .logos-container,
  .welcome-button,
  .button,
  button {
    display: none;
  }

  body {
    background: #ffffff;
    font-size: 12pt;
    line-height: 1.6;
    font-family: var(--font-main);
    color: var(--color-text-main);
  }

  h1, h2, h3, h4, h5, h6 {
  color: #1c1c1e !important;
    font-family: var(--font-title);
    font-weight: bold;
    break-inside: avoid;
    page-break-after: avoid;
  }

  table {
    page-break-inside: auto;
    border-collapse: collapse !important;
    width: 100%;
  }

  th, td {
    border: 1px solid var(--color-border);
    padding: 8px;
  }

  a {
    text-decoration: underline;
    color: var(--color-primary);
  }
} 

/* === SUPER ADMIN DASHBOARD BASE STYLES === */
/* .super-admin-dashboard определен в components.css - удалено дублирование */

/* Progress Bar */
.progress-bar {
    flex: 1;
    height: 8px;
    background: var(--color-bg-light);
    border-radius: 4px;
    overflow: hidden;
}

.progress-fill {
    height: 100%;
    transition: width 0.3s ease;
}

.progress-fill.success { background: var(--color-accent); }
.progress-fill.warning { background: #ffc107; }
.progress-fill.danger { background: var(--color-error); }

/* System Info */
.system-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.info-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.info-label {
    color: var(--color-text-secondary);
    font-size: 0.85rem;
}

.info-value {
    color: var(--color-text-main);
    font-weight: 600;
}

/* Activity List */
.activity-list {
    max-height: 300px;
    overflow-y: auto;
}

.activity-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 15px;
    border-bottom: 1px solid var(--color-border);
    transition: var(--transition);
}

.activity-item:hover {
    background: var(--color-bg-light);
}

.activity-item:last-child {
    border-bottom: none;
}

.activity-icon {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-accent);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 1rem;
    flex-shrink: 0;
}

.activity-content {
    flex: 1;
}

.activity-content h5 {
    margin: 0 0 5px 0;
    color: var(--color-text-main);
    font-size: 0.9rem;
}

.activity-content p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

.activity-content small {
    color: var(--color-text-muted);
    font-size: 0.75rem;
}

.activity-status {
    color: var(--color-accent);
    font-size: 0.8rem;
}

/* Notifications */
.notification-item {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    padding: 15px;
    border-radius: var(--radius);
    margin-bottom: 10px;
    border-left: 4px solid var(--color-accent);
}

.notification-icon {
    font-size: 1.2rem;
    color: var(--color-accent);
    margin-top: 2px;
}

.notification-content h4 {
    margin: 0 0 5px 0;
    color: var(--color-text-main);
    font-size: 0.9rem;
}

.notification-content p {
    margin: 0;
    color: var(--color-text-secondary);
    font-size: 0.8rem;
}

/* Footer */
.footer-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-info p {
    margin: 0;
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    display: flex;
    align-items: center;
    gap: 8px;
}

.footer-info i {
    color: var(--color-accent);
}

/* === DASHBOARD SECTIONS === */
/* .dashboard-section определен в components.css и animations.css - удалено дублирование */

/* === 🔒 ПРИНУДИТЕЛЬНАЯ ВИДИМОСТЬ ЭЛЕМЕНТОВ === */
/* Предотвращаем исчезновение элементов после анимации */
/* === БАЗОВАЯ ВИДИМОСТЬ ЭЛЕМЕНТОВ === */
/* Примечание: Используем !important только для критичных случаев видимости */
.feature-item,
.section-features h2,
.section-top .top-text,
.section-top .top-image,
.section-top h1,
.section-top p,
.section-top .main-button {
  opacity: 1;
  visibility: visible;
  transform: none;
  display: block;
}

/* === MACBOOK MIN-WIDTH FIX === */
/* Принудительно исправляем min-width для MacBook и других устройств */
.feature-item {
  min-width: 0 !important;
  max-width: none !important;
  width: 100% !important;
  box-sizing: border-box !important;
  
  /* Flexbox исправления */
  flex: 1 1 auto !important;
  flex-shrink: 1 !important;
  flex-basis: auto !important;
  
  /* Grid исправления */
  justify-self: stretch !important;
  align-self: start !important;
  
  /* Принудительно исправляем размеры */
  overflow: visible !important;
  /* Перенос слов отключен глобально в * селекторе */
}

/* === FEATURES WRAPPER FIX === */
/* Принудительно исправляем grid для всех устройств */
  .features-wrapper {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr)) !important; /* 280px -> 17.5rem */
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    
    /* Принудительно исправляем grid */
    grid-auto-flow: row !important;
    grid-auto-rows: auto !important;
  }

/* Retina/High-DPI fixes - перенесено в responsive.css */

/* === MACBOOK И ПЛАНШЕТ СПЕЦИАЛЬНЫЕ ПРАВИЛА === */
/* Перенесено в responsive.css согласно архитектуре */

/* === ПРИНУДИТЕЛЬНОЕ ИСПРАВЛЕНИЕ ДЛЯ MACBOOK === */
/* Перенесено в responsive.css согласно архитектуре */

/* === ANIMATE.CSS FALLBACK СТИЛИ === */
/* Если анимации не работают, элементы должны быть видимыми */
.feature-item:not(.animate__fadeInUp),
.section-features h2:not(.animate__fadeInDown),
.section-top h1:not(.animate__fadeInLeft),
.section-top p:not(.animate__fadeInUp),
.section-top .main-button:not(.animate__zoomIn),
.section-top .top-image:not(.animate__fadeInRight) {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
}

/* === ОБЕСПЕЧЕНИЕ ВИДИМОСТИ ПОСЛЕ АНИМАЦИИ === */
/* Все элементы с анимациями должны оставаться видимыми */
.animate__animated {
  animation-fill-mode: forwards !important;
}

/* === БЕЗОПАСНЫЕ АНИМАЦИИ === */
/* Анимации, которые не скрывают элементы */
@keyframes fadeInUpSafe {
  from { 
    opacity: 0; 
    transform: translateY(20px); 
  }
  to { 
    opacity: 1; 
    transform: translateY(0); 
  }
}

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

@keyframes fadeInLeftSafe {
  from { 
    opacity: 0; 
    transform: translateX(-30px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

@keyframes fadeInRightSafe {
  from { 
    opacity: 0; 
    transform: translateX(30px); 
  }
  to { 
    opacity: 1; 
    transform: translateX(0); 
  }
}

@keyframes zoomInSafe {
  from { 
    opacity: 0; 
    transform: scale(0.8); 
  }
  to { 
    opacity: 1; 
    transform: scale(1); 
  }
}