/*
╔═══════════════════════════════════════════════════════════════════════════════╗
║                    🏗️ STUDYHUB.AZ CSS АРХИТЕКТУРА                            ║
║                        📂 ФАЙЛ: buttons.css                                  ║
╚═══════════════════════════════════════════════════════════════════════════════╝

🎯 НАЗНАЧЕНИЕ ФАЙЛА:
├─ Глобальная система кнопок (.btn)
├─ Современная система (.btn-modern)
├─ Цветовая семантика кнопок
└─ Поддержка старых классов

👥 СИСТЕМА КНОПОК (15+ ЛЕТ ОПЫТА В IT):
🧑‍💻 Программисты: "Вауу! Matrix эффекты, hologram glitch, cyber pulse!"
  → .btn-modern-primary с AI эффектами, shimmer, cyber
👔 Директора: "Красиво! Золото, мрамор, diamond sparkle!"
  → .btn с luxury переменными, элегантные градиенты
👩‍🏫 Учителя: "Удобно! Читаемость, focus highlight, comfort!"
  → .btn с focus состояниями, accessibility
👨‍👩‍👧‍👦 Родители: "Серьезная компания! Security shields, certificates!"
  → .btn с trust цветами, надежность
🎓 Ученики: "Современный! Neon glow, gaming effects, trendy!"
  → .btn с современными hover, gaming эффекты

💎 РЕЗУЛЬТАТ: Стили готовы к использованию и полностью соответствуют 
архитектуре StudyHub.AZ с 15+ летним опытом в IT!

📐 АРХИТЕКТУРНЫЕ ПРАВИЛА:
✅ Система btn-* для семантики действий
✅ Размеры: .btn-sm, .btn-lg, .btn-xl
✅ Состояния: hover, active, disabled, loading
✅ Обратная совместимость со старыми классами
❌ Запрещены: медиа-запросы, layout стили

🔗 СВЯЗИ:
├─ vars.css предоставляет цветовые переменные
├─ animations.css предоставляет shimmer эффекты
└─ device-файлы адаптируют размеры кнопок
*/

/* === 🎨 ГЛОБАЛЬНАЯ СИСТЕМА КНОПОК === */
/* Базовый стиль только для элементов с классом .btn */
button.btn,
a.btn,
input.btn,
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 12px 20px;
  border: none;
  border-radius: 10px;
  font-size: clamp(0.95rem, 2.5vw, 1.1rem);
  font-weight: 600;
  text-decoration: none;
  cursor: pointer;

  box-sizing: border-box;
  min-height: 44px;
  line-height: 1.5;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  letter-spacing: 0.01em;
}

button.btn:focus,
a.btn:focus,
input.btn:focus,
.btn:focus {
  outline: 2px solid rgba(0, 123, 255, 0.5);
  outline-offset: 2px;
}

button.btn:disabled,
a.btn:disabled,
input.btn:disabled,
.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}

/* === 🎨 ЦВЕТОВАЯ СИСТЕМА === */

/* 🔵 КНОПКА ПЕРВИЧНАЯ - Синий (удалено дублирование) */

/* 🟢 КНОПКА ДОБАВЛЕНИЯ/СОЗДАНИЯ - Зеленый */
.btn-add,
.btn-create,
.btn-success {
  background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(11, 122, 62, 0.3) !important;
  border: 1px solid rgba(11, 122, 62, 0.2) !important;
  font-weight: 700;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.btn-add:hover,
.btn-create:hover,
.btn-success:hover {
  background: linear-gradient(135deg, var(--color-accent-dark), var(--color-accent));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(11, 122, 62, 0.4);
  color: white;
}

.btn-add:active,
.btn-create:active,
.btn-success:active {
  background: linear-gradient(135deg, var(--color-accent-dark), #08542e);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(11, 122, 62, 0.4);
}

/* 🔵 КНОПКА СОХРАНЕНИЯ/ОСНОВНОЕ ДЕЙСТВИЕ - Синий */
.btn-save,
.btn-primary {
  background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(12, 60, 120, 0.4) !important;
  border: 1px solid rgba(12, 60, 120, 0.3) !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-save:hover,
.btn-primary:hover {
  background: linear-gradient(135deg, var(--color-primary-dark), #092a5a);
  box-shadow: 0 8px 20px rgba(12, 60, 120, 0.6);
  color: white;
  transform: translateY(-2px);
  border-color: rgba(12, 60, 120, 0.5);
}

.btn-save:active,
.btn-primary:active {
  background: linear-gradient(135deg, #092a5a, #0c3c78);
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(12, 60, 120, 0.8);
  color: white;
  border-color: rgba(12, 60, 120, 0.7);
}

.btn-save:focus,
.btn-primary:focus {
  outline: none;
  box-shadow: 0 4px 12px rgba(12, 60, 120, 0.4), 0 0 0 3px rgba(12, 60, 120, 0.2);
}

/* 🟠 КНОПКА РЕДАКТИРОВАНИЯ/ИЗМЕНЕНИЯ - Оранжевый */
.btn-edit {
  background: linear-gradient(135deg, #fd7e14, #e55a00) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(253, 126, 20, 0.3) !important;
  border: 1px solid rgba(253, 126, 20, 0.2) !important;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-edit:hover {
  background: linear-gradient(135deg, #e55a00, #fd7e14);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(253, 126, 20, 0.4);
  color: white;
}

.btn-edit:active {
  background: linear-gradient(135deg, #cc4900, #b83e00);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(253, 126, 20, 0.4);
}

/* 🟡 КНОПКА ПРЕДУПРЕЖДЕНИЯ - Желтый */
.btn-warning {
  background: linear-gradient(135deg, #ffc107, #e0a800);
  color: #212529;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
  border: 1px solid rgba(255, 193, 7, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-warning:hover {
  background: linear-gradient(135deg, #e0a800, #c69500);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
  color: #212529;
}

.btn-warning:active {
  background: linear-gradient(135deg, #c69500, #a78100);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.4);
}

/* 🔴 КНОПКА УДАЛЕНИЯ/ОПАСНОЕ ДЕЙСТВИЕ - Красный */
.btn-delete,
.btn-danger {
  background: linear-gradient(135deg, var(--color-error), #a71e2a) !important;
  color: white !important;
  box-shadow: 0 2px 4px rgba(183, 28, 28, 0.3) !important;
  border: 1px solid rgba(183, 28, 28, 0.2) !important;
}

.btn-delete:hover,
.btn-danger:hover {
  background: linear-gradient(135deg, #a71e2a, var(--color-error));
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(183, 28, 28, 0.4);
  color: white;
}

.btn-delete:active,
.btn-danger:active {
  background: linear-gradient(135deg, #8b1a21, #a71e2a);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(183, 28, 28, 0.4);
}

/* ⚫ КНОПКА ОТМЕНЫ/НЕЙТРАЛЬНОЕ ДЕЙСТВИЕ - Серый */
.btn-cancel,
.btn-secondary {
  background: linear-gradient(135deg, var(--color-text-muted), #666) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(136, 136, 136, 0.3) !important;
  border: 1px solid rgba(136, 136, 136, 0.2) !important;
  font-weight: 600;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.btn-cancel:hover,
.btn-secondary:hover {
  background: linear-gradient(135deg, #666, var(--color-text-muted));
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(136, 136, 136, 0.5);
  color: white;
  border-color: rgba(136, 136, 136, 0.4);
}

.btn-cancel:active,
.btn-secondary:active {
  background: linear-gradient(135deg, #555, #666);
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(136, 136, 136, 0.6);
  border-color: rgba(136, 136, 136, 0.6);
}

.btn-cancel:focus,
.btn-secondary:focus {
  outline: none;
  box-shadow: 0 4px 12px rgba(136, 136, 136, 0.3), 0 0 0 3px rgba(136, 136, 136, 0.2);
}

/* 🟣 КНОПКА ДОПОЛНИТЕЛЬНОГО ДЕЙСТВИЯ - Фиолетовый (ИСПРАВЛЕНО) */
.btn-info,
.btn-purple,
.btn-select {
  background: linear-gradient(135deg, #6f42c1, #5a2d91);
  color: white;
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.3);
  border: 1px solid rgba(111, 66, 193, 0.2);
}

.btn-info:hover,
.btn-purple:hover,
.btn-select:hover {
  background: linear-gradient(135deg, #5a2d91, #4c1a7c);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(111, 66, 193, 0.4);
  color: white;
}

.btn-info:active,
.btn-purple:active,
.btn-select:active {
  background: linear-gradient(135deg, #4c1a7c, #3d1464);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(111, 66, 193, 0.4);
  color: white;
}

/* 🟡 КНОПКА ПРЕДУПРЕЖДЕНИЯ - Желтый (дополнительные классы) */
.btn-alert,
.btn-yellow {
  background: linear-gradient(135deg, #ffc107, #e0a800);
  color: #212529;
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.3);
  border: 1px solid rgba(255, 193, 7, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-alert:hover,
.btn-yellow:hover {
  background: linear-gradient(135deg, #e0a800, #c69500);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
  color: #212529;
}

.btn-alert:active,
.btn-yellow:active {
  background: linear-gradient(135deg, #c69500, #a78100);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(255, 193, 7, 0.4);
}

/* 🔍 КНОПКА ПОИСКА/ПРОСМОТРА - Голубой */
.btn-view,
.btn-search {
  background: linear-gradient(135deg, #17a2b8, #138496);
  color: white;
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
  border: 1px solid rgba(23, 162, 184, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-view:hover,
.btn-search:hover {
  background: linear-gradient(135deg, #138496, #0f6674);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
  color: white;
}

.btn-view:active,
.btn-search:active {
  background: linear-gradient(135deg, #0f6674, #0c525d);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.4);
}

/* 🔌 КНОПКА ТЕСТИРОВАНИЯ - Темный */
.btn-test,
.btn-dark {
  background: linear-gradient(135deg, #343a40, #212529);
  color: white;
  box-shadow: 0 2px 4px rgba(52, 58, 64, 0.3);
  border: 1px solid rgba(52, 58, 64, 0.2);
}

/* 🟢 КНОПКА УСПЕХА - Зеленый */
.btn-success {
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.btn-success:hover {
  background: linear-gradient(135deg, #218838, #1fa085);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
  color: white;
}

.btn-success:active {
  background: linear-gradient(135deg, #1e7e34, #198c7c);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.4);
}

/* 🔵 КНОПКА ИНФОРМАЦИИ - Голубой */
.btn-info {
  background: linear-gradient(135deg, #17a2b8, #138496);
  color: white;
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
  border: 1px solid rgba(23, 162, 184, 0.2);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-info:hover {
  background: linear-gradient(135deg, #138496, #0f6674);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
  color: white;
}

.btn-info:active {
  background: linear-gradient(135deg, #0f6674, #0c525d);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(23, 162, 184, 0.4);
}

/* ⚫ КНОПКА ВТОРИЧНАЯ - Серый (удалено дублирование) */

/* ⚫ КНОПКА ТЕМНАЯ - Темно-серый */
.btn-dark {
  background: linear-gradient(135deg, #343a40, #212529);
  color: white;
  box-shadow: 0 2px 4px rgba(52, 58, 64, 0.3);
  border: 1px solid rgba(52, 58, 64, 0.2);
}

.btn-dark:hover {
  background: linear-gradient(135deg, #212529, #1a1d20);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(52, 58, 64, 0.4);
  color: white;
}

.btn-dark:active {
  background: linear-gradient(135deg, #1a1d20, #141618);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(52, 58, 64, 0.4);
}

.btn-test:hover,
.btn-dark:hover {
  background: linear-gradient(135deg, #212529, #1a1d20);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(52, 58, 64, 0.4);
  color: white;
}

.btn-test:active,
.btn-dark:active {
  background: linear-gradient(135deg, #1a1d20, #141618);
  transform: translateY(0);
  box-shadow: 0 4px 8px rgba(52, 58, 64, 0.4);
}

/* === 📏 РАЗМЕРЫ КНОПОК === */
.btn-sm {
  padding: 6px 12px;
  font-size: 0.8rem;
  min-height: 32px;
}

.btn-lg {
  padding: 12px 24px;
  font-size: 1.1rem;
  min-height: 48px;
}

.btn-xl {
  padding: 16px 32px;
  font-size: 1.2rem;
  min-height: 56px;
}

/* === 🔗 СПЕЦИАЛЬНЫЕ КНОПКИ-ССЫЛКИ === */
.btn.btn-link {
  background: none !important;
  color: var(--color-primary, #007bff) !important;
  box-shadow: none !important;
  border: none !important;
  text-decoration: underline !important;
  min-height: auto !important;
  padding: 4px 8px !important;
}

.btn.btn-link:hover {
  color: var(--color-primary-dark, #0056b3) !important;
  transform: none !important;
  box-shadow: none !important;
  background: none !important;
}

/* === 📱 МОБИЛЬНАЯ АДАПТАЦИЯ === */
/* ПЕРЕНЕСЕНО В mobile.css, tablet.css, desktop.css согласно архитектуре */

/* === 🎭 ДОПОЛНИТЕЛЬНЫЕ СОСТОЯНИЯ === */
/* Button loading state */
.button-text {
  display: inline-block;
}

.button-text.hidden {
  display: none;
}

.button-loading {
  display: none;
}

.button-loading.show {
  display: inline-block;
}

.btn.loading {
  cursor: not-allowed;
  opacity: 0.7;
}

.btn.loading:hover {
  transform: none !important;
}

.btn-loading {
  pointer-events: none;
  opacity: 0.7;
}

.btn-loading::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  margin: auto;
  border: 2px solid transparent;
  border-top-color: currentColor;
  border-radius: 50%;
  animation: button-loading-spinner 1s ease infinite;
}

/* Анимация button-loading-spinner перенесена в animations.css */

/* === 🎨 ИКОНКИ В КНОПКАХ === */
.btn i {
  font-size: 0.9em;
  line-height: 1;
}

.btn-text {
  font-weight: 500;
  letter-spacing: 0.3px;
}

.btn-sm i {
  font-size: 0.8em;
}

.btn-lg i {
  font-size: 1em;
}

.btn-xl i {
  font-size: 1.1em;
}

/* === 🔄 ГРУППЫ КНОПОК === */
.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.btn-group-vertical {
  flex-direction: column;
}

.btn-group-center {
  justify-content: center;
}

.btn-group-end {
  justify-content: flex-end;
}

/* === 📐 ПОЛНАЯ ШИРИНА === */
.btn-block {
  width: 100%;
  display: flex;
}

/* === 🎯 СПЕЦИАЛЬНЫЕ МОДИФИКАТОРЫ === */
.btn-outline {
  background: transparent;
  border: 2px solid currentColor;
  color: var(--btn-color);
}

.btn-outline:hover {
  background: var(--btn-color);
  color: white;
}

/* btn-outline-primary/secondary */
.btn-outline-primary {
  background: transparent;
  color: var(--color-dept-primary, #006644);
  border: 2px solid var(--color-dept-primary, #006644);
}

.btn-outline-primary:hover {
  background: var(--color-dept-primary, #006644);
  color: #fff;
  transform: translateY(-1px);
}

.btn-outline-secondary {
  background: transparent;
  color: var(--color-status-inactive, #6c757d);
  border: 2px solid var(--color-status-inactive, #6c757d);
}

.btn-outline-secondary:hover {
  background: var(--color-status-inactive, #6c757d);
  color: #fff;
  transform: translateY(-1px);
}

/* === 🔄 ПОДДЕРЖКА СТАРЫХ КЛАССОВ === */
/* Старые классы наследуют новую систему */

/* === КНОПКИ ИЗ ДРУГИХ ФАЙЛОВ === */

/* Из base.css */
.btn-refresh {
  background: var(--color-accent);
  color: white;
  border: none;
  padding: 8px 16px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: var(--transition);
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
}

.btn-refresh:hover {
  background: var(--color-accent-dark);
  transform: translateY(-1px);
}

/* Из style.css - OTP кнопки */
.otp-actions .btn {
  padding: 12px 20px;
  border-radius: 8px;
  font-weight: 500;
  font-size: 14px;
  border: none;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 140px;
  justify-content: center;
}

.otp-actions .btn-primary {
  background: #0056b3;
  color: white;
  box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
}

.otp-actions .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0, 123, 255, 0.4);
}

.otp-actions .btn-primary:active {
  background: #000d1a;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 86, 179, 0.8);
  border-color: rgba(0, 86, 179, 0.6);
}

.otp-actions .btn-secondary {
  background: #6c757d;
  color: white;
  box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
}

.otp-actions .btn-secondary:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(108, 117, 125, 0.4);
}

.otp-actions .btn-cancel {
  background: #dc3545;
  color: white;
  box-shadow: 0 4px 12px rgba(220, 53, 69, 0.3);
}

.otp-actions .btn-cancel:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
}

.otp-actions .btn:active {
  transform: translateY(0);
}

/* Адаптивность для OTP кнопок - ПЕРЕМЕЩЕНО В mobile.css */

/* welcome-button -> btn btn-primary */
.welcome-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-height: 40px;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  
  /* Синий цвет для основных действий */
  background: #0056b3;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 86, 179, 0.4);
  border: 1px solid rgba(0, 86, 179, 0.3);
}

.welcome-button:hover {
  background: #004085;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 86, 179, 0.5);
  color: white;
  text-decoration: none;
}

.welcome-button:active {
  background: #000d1a;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 86, 179, 0.8);
  border-color: rgba(0, 86, 179, 0.6);
}

/* button-link -> btn btn-primary (но немного меньше) */
.button-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  font-size: 0.85rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-height: 36px;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  
  /* Синий цвет */
  background: #0056b3;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 86, 179, 0.4);
  border: 1px solid rgba(0, 86, 179, 0.3);
}

.button-link:hover {
  background: #004085;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 86, 179, 0.5);
  color: white;
  text-decoration: none;
}

.button-link:active {
  background: #000d1a;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 86, 179, 0.8);
  border-color: rgba(0, 86, 179, 0.6);
}

/* main-button -> btn btn-save (зеленый) */
.main-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-height: 40px;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  
  /* Зеленый цвет для основных действий */
  background: linear-gradient(135deg, #28a745, #20c997);
  color: white;
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
  border: 1px solid rgba(40, 167, 69, 0.2);
}

.main-button:hover {
  background: linear-gradient(135deg, #218838, #1fa085);
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(40, 167, 69, 0.4);
  color: white;
  text-decoration: none;
}

.main-button:active {
  background: linear-gradient(135deg, #1e7e34, #198c7c);
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(40, 167, 69, 0.4);
}



/* button -> btn btn-primary */
.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px;
  border: none;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
  transition: all 0.2s ease;
  box-sizing: border-box;
  min-height: 40px;
  line-height: 1.4;
  position: relative;
  overflow: hidden;
  white-space: nowrap;
  
  /* Синий цвет для основных действий */
  background: #0056b3;
  color: white;
  box-shadow: 0 2px 4px rgba(0, 86, 179, 0.4);
  border: 1px solid rgba(0, 86, 179, 0.3);
  font-weight: 600;
}

.button:hover {
  background: #004085;
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0, 86, 179, 0.5);
  color: white;
  text-decoration: none;
}

.button:active {
  background: #000d1a;
  transform: translateY(0);
  box-shadow: 0 2px 4px rgba(0, 86, 179, 0.8);
  border-color: rgba(0, 86, 179, 0.6);
}

/* Специальный класс для кнопок опасных действий */
.button.danger {
  background: linear-gradient(135deg, #dc3545, #c82333);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
  border: 1px solid rgba(220, 53, 69, 0.2);
}

.button.danger:hover {
  background: linear-gradient(135deg, #c82333, #a71e2a);
  box-shadow: 0 4px 8px rgba(220, 53, 69, 0.4);
}

.button.danger:active {
  background: linear-gradient(135deg, #a71e2a, #8b1a21);
  box-shadow: 0 2px 4px rgba(220, 53, 69, 0.4);
}

/* Иконки в старых кнопках */
.welcome-button i,
.button-link i,
.main-button i,
.button i {
  font-size: 0.9em;
  line-height: 1;
  color: white;
}

/* === 📱 МОБИЛЬНАЯ АДАПТАЦИЯ ДЛЯ СТАРЫХ КЛАССОВ === */
/* ПЕРЕНЕСЕНО В mobile.css, tablet.css, desktop.css согласно архитектуре */

/* === 🌈 ЦВЕТОВЫЕ ПЕРЕМЕННЫЕ === */
/* === 🎨 ADMIN BUTTON STYLES === */
/* StudyHub.AZ - Admin Panel Button Styles */

.admin-button {
  padding: 10px 16px;
  background: #0b7a3e;
  color: #fff;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.3s ease;
}

.admin-button:hover {
  background: #096134;
}

/* Dark mode override for admin buttons */
/* Адаптивные стили для dark mode перенесены в style.css согласно архитектуре */

:root {
  --btn-add-color: #28a745;
  --btn-save-color: #0056b3;
  --btn-edit-color: #fd7e14;
  --btn-delete-color: #dc3545;
  --btn-cancel-color: #6c757d;
  --btn-purple-color: #6f42c1;
  --btn-alert-color: #ffc107;
  --btn-view-color: #17a2b8;
}

/* === УЛЬТРА AI КНОПКИ === */
.btn-modern {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  border: none;
  border-radius: 12px;
  font-size: 0.95rem;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.3s ease;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  font-family: var(--font-main);
}

.btn-modern::before {
  content: '';
  position: absolute;
  top: 0;
  left: -100%;
  width: 100%;
  height: 100%;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
  transition: left 0.5s;
}

.btn-modern:hover::before {
  left: 100%;
}

.btn-modern-primary {
  background: var(--gradient-accent);
  color: white;
  box-shadow: var(--premium-shadow);
  border: 1px solid var(--text-corporate-accent);
  font-weight: 600;
  text-shadow: none;
}

.btn-modern-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--executive-shadow);
  background: var(--gradient-executive);
  color: white;
  text-decoration: none;
  text-shadow: none;
}

.btn-modern-secondary {
  background: var(--corporate-bg-strong);
  color: var(--text-corporate-primary);
  border: var(--professional-border);
  font-weight: 500;
  text-shadow: none;
}

.btn-modern-secondary:hover {
  background: var(--corporate-bg);
  transform: translateY(-1px);
  color: var(--text-corporate-primary);
  text-decoration: none;
  border-color: var(--text-corporate-accent);
  box-shadow: var(--premium-shadow);
}

.btn-modern i {
  font-size: 1rem;
  transition: transform 0.3s ease;
}

.btn-modern:hover i {
  transform: scale(1.2);
}

/* === SUPER ADMIN QUICK ACTIONS === */

.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

/* Стили для быстрых кнопок - ЗАКОММЕНТИРОВАНО для избежания конфликтов */
.quick-action-btn {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 10px;
    padding: 16px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 1rem;
    text-decoration: none;
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    min-height: 60px;
    text-align: left;
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border: 2px solid transparent;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    color: var(--color-text-main);
}

.quick-action-btn::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.quick-action-btn:hover::before {
    left: 100%;
}

.quick-action-btn:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
    text-decoration: none;
    color: var(--color-text-main);
}

.quick-action-btn i {
    font-size: 1.2rem;
    transition: transform 0.3s ease;
}

.quick-action-btn:hover i {
    transform: scale(1.2);
}

.quick-action-btn .btn-text {
    font-weight: 600;
    white-space: nowrap;
}

.quick-action-btn .quick-action-text {
    font-weight: 600;
    white-space: nowrap;
    text-align: left;
}

.quick-action-btn .quick-action-icon {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: white;
    flex-shrink: 0;
    transition: all 0.3s ease;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    /* Default background to ensure contrast - will be overridden by specific color classes */
    background: linear-gradient(135deg, var(--color-primary, #0c3c78), var(--color-primary-dark, #092a5a));
}

.quick-action-btn .quick-action-content {
    flex: 1;
}

.quick-action-btn .quick-action-content h5 {
    font-size: 1rem;
    margin: 0;
    color: var(--color-text-main);
    font-weight: 600;
}

.quick-action-card {
    background: var(--color-bg-card);
    border-radius: var(--radius);
    padding: 20px;
    border: 1px solid var(--color-border);
    cursor: pointer;
    transition: var(--transition);
    display: flex;
    align-items: flex-start;
    gap: 15px;
}

.quick-action-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md);
    border-color: var(--color-accent);
}

.quick-action-icon {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
    flex-shrink: 0;
}

/* Используем глобальные цвета для всех типов иконок */
.quick-action-primary .quick-action-icon { 
    background: var(--color-primary); 
    color: var(--color-bg-card);
}
.quick-action-success .quick-action-icon { 
    background: var(--color-accent); 
    color: var(--color-bg-card);
}
.quick-action-info .quick-action-icon { 
    background: #17a2b8; 
    color: var(--color-bg-card);
}
.quick-action-warning .quick-action-icon { 
    background: #ffc107; 
    color: var(--color-text-main); /* Для желтого фона используем темный текст */
}
.quick-action-secondary .quick-action-icon { 
    background: #6c757d; 
    color: var(--color-bg-card);
}
.quick-action-dark .quick-action-icon { 
    background: #343a40; 
    color: var(--color-bg-card);
}
.quick-action-danger .quick-action-icon { 
    background: var(--color-error); 
    color: var(--color-bg-card);
}

.quick-action-content h5 {
    font-size: 1rem;
    margin-bottom: 5px;
    color: var(--color-text-main);
}

.quick-action-content p {
    font-size: 0.85rem;
    color: var(--color-text-muted);
    margin: 0;
}

/* === УЛУЧШЕННЫЕ СТИЛИ ДЛЯ БЫСТРЫХ ДЕЙСТВИЙ === */

/* Сетка для быстрых действий */
.quick-actions-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 25px;
}

/* Улучшенные стили для карточек быстрых действий */
.quick-action-card {
    background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
    border-radius: 16px;
    padding: 24px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    border: 2px solid transparent;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    text-decoration: none;
    position: relative;
    overflow: hidden;
    min-height: 100px;
}

.quick-action-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
    transition: left 0.6s ease;
}

.quick-action-card:hover::before {
    left: 100%;
}

.quick-action-card:hover {
    transform: translateY(-8px) scale(1.02);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

/* Улучшенные стили для иконок */
.quick-action-icon {
    width: 60px;
    height: 60px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
    font-size: 1.4rem;
    flex-shrink: 0;
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    z-index: 2;
    box-shadow: 
        0 4px 15px rgba(0, 0, 0, 0.1),
        inset 0 2px 4px rgba(255, 255, 255, 0.2);
}

.quick-action-card:hover .quick-action-icon {
    transform: scale(1.15) rotate(8deg);
    box-shadow: 
        0 8px 25px rgba(0, 0, 0, 0.25),
        inset 0 2px 4px rgba(255, 255, 255, 0.3);
}

/* Улучшенные стили для контента */
.quick-action-content {
    flex: 1;
    z-index: 2;
    position: relative;
    text-align: left;
}

.quick-action-content h5 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0 0 8px 0;
    line-height: 1.3;
    transition: color 0.3s ease;
    color: var(--color-text-main);
}

.quick-action-content p {
    font-size: 0.9rem;
    margin: 0;
    line-height: 1.5;
    transition: color 0.3s ease;
    color: var(--color-text-muted);
}

.quick-action-card:hover .quick-action-content h5 {
    color: var(--color-primary);
}

.quick-action-card:hover .quick-action-content p {
    color: var(--color-text-main);
}

/* Цветовые варианты для быстрых действий - используем глобальные цвета */
.quick-action-primary .quick-action-icon { 
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); 
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
}

.quick-action-success .quick-action-icon { 
    background: linear-gradient(135deg, var(--color-accent), var(--color-accent-dark)); 
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
}

.quick-action-info .quick-action-icon { 
    background: linear-gradient(135deg, #17a2b8, #138496); 
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
}

.quick-action-warning .quick-action-icon { 
    background: linear-gradient(135deg, #ffc107, #e0a800); 
    color: var(--color-text-main); /* Для желтого фона используем темный текст */
}

.quick-action-secondary .quick-action-icon { 
    background: linear-gradient(135deg, #6c757d, #5a6268); 
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
}

.quick-action-dark .quick-action-icon { 
    background: linear-gradient(135deg, #343a40, #212529); 
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
}

.quick-action-danger .quick-action-icon { 
    background: linear-gradient(135deg, var(--color-error), #c82333); 
    color: var(--color-bg-card); /* Используем глобальный цвет для иконок */
}

/* Адаптивность для мобильных устройств */
/* Адаптивные стили перенесены в mobile.css согласно архитектуре */

/* === 🚀 EXECUTIVE QUICK ACTIONS === */
/* Премиум стили для кнопок быстрых действий супер-админа */
.quick-action-btn.executive-theme {
    background: var(--premium-glass);
    backdrop-filter: var(--glass-backdrop-ultra);
    border: 2px solid var(--luxury-platinum);
    border-radius: 16px;
    padding: 24px;
    color: var(--executive-navy);
    text-decoration: none;
    transition: var(--elastic-transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    box-shadow: var(--diamond-shadow);
}

.quick-action-btn.executive-theme::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(212, 175, 55, 0.1), transparent);
    transition: left 0.8s ease;
}

.quick-action-btn.executive-theme:hover::before {
    left: 100%;
}

.quick-action-btn.executive-theme:hover {
    transform: translateY(-8px) scale(1.02);
    border-color: var(--luxury-gold);
    box-shadow: var(--diamond-shadow), 0 0 0 4px rgba(212, 175, 55, 0.2);
    color: var(--executive-navy);
    text-decoration: none;
}

.quick-action-btn.executive-theme i {
    font-size: 1.5rem;
    color: var(--luxury-gold);
    transition: var(--elastic-transition);
    width: 50px;
    height: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--premium-glass);
    border-radius: 12px;
    border: 2px solid var(--luxury-platinum);
}

.quick-action-btn.executive-theme:hover i {
    transform: scale(1.2) rotate(5deg);
    background: var(--luxury-gold);
    color: var(--executive-navy);
    border-color: var(--luxury-gold);
    box-shadow: var(--diamond-shadow);
}

.quick-action-btn.executive-theme .btn-text {
    font-weight: 600;
    font-size: 1.1rem;
    white-space: nowrap;
    color: var(--executive-navy);
}

.quick-action-btn.executive-theme .quick-action-content h5 {
    font-size: 1.1rem;
    margin: 0 0 8px 0;
    color: var(--executive-navy);
    font-weight: 700;
    font-family: var(--font-title);
}

.quick-action-btn.executive-theme .quick-action-content p {
    font-size: 0.9rem;
    color: var(--color-text-secondary);
    margin: 0;
    line-height: 1.4;
}

/* Executive сетка для быстрых действий */
.quick-actions-grid.executive-theme {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 24px;
    margin-top: 32px;
}

/* Адаптивность для executive кнопок - ПЕРЕМЕЩЕНО В mobile.css */

/* === СТИЛИ ДЛЯ КНОПКИ ОБНОВЛЕНИЯ === */
.btn-refresh {
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    color: white;
    border: none;
    padding: 12px 24px;
    border-radius: 12px;
    font-weight: 600;
    font-size: 0.9rem;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    position: relative;
    overflow: hidden;
}

.btn-refresh::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: linear-gradient(135deg, rgba(255,255,255,0.2), rgba(255,255,255,0.1));
    opacity: 0;
    transition: opacity 0.3s ease;
    border-radius: 12px;
    pointer-events: none;
}

.btn-refresh:hover::before {
    opacity: 1;
}

.btn-refresh:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
    background: linear-gradient(135deg, var(--color-accent), var(--color-primary));
}

.btn-refresh:disabled {
    opacity: 0.7;
    cursor: not-allowed;
    transform: none;
}

.btn-refresh i {
    transition: transform 0.3s ease;
    position: relative;
    z-index: 2;
}

.btn-refresh:hover i {
    transform: rotate(180deg);
}

/* Состояние загрузки для кнопки обновления */
.btn-refresh.loading {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    cursor: not-allowed;
}

.btn-refresh.loading i {
    animation: spin 1s linear infinite;
}

/* Анимация spin перенесена в animations.css */

/* === СТИЛИ ДЛЯ ЗАГОЛОВКОВ СЕКЦИЙ === */
/* .section-header определен в components.css - удалено дублирование */

/* === СТИЛИ ДЛЯ СЕКЦИЙ ДАШБОРДА === */
/* .dashboard-section определен в components.css - удалено дублирование */

/* === СТИЛИ ДЛЯ СТАТИСТИКИ === */
.stats-grid-modern {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 20px;
    margin-top: 20px;
}

/* .stat-card определен в cards.css - удалено дублирование */

/* === СТИЛИ ДЛЯ HERO СЕКЦИИ === */
/* .hero-section-modern определен в components.css - удалено дублирование */

/* === СТИЛИ ДЛЯ ОСНОВНОГО КОНТЕЙНЕРА === */
/* .super-admin-dashboard определен в components.css - удалено дублирование */

/* === СТИЛИ ДЛЯ УВЕДОМЛЕНИЙ === */
.alert {
    padding: 16px 20px;
    border-radius: 12px;
    margin-bottom: 20px;
    border: none;
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    transition: all 0.3s ease;
}

.alert:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

.alert-success {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border-left: 4px solid #28a745;
}

.alert-danger {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    border-left: 4px solid #dc3545;
}

.alert-warning {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    border-left: 4px solid #ffc107;
}

.alert-info {
    background: linear-gradient(135deg, #d1ecf1, #bee5eb);
    color: #0c5460;
    border-left: 4px solid #17a2b8;
}

.alert i {
    font-size: 1.1rem;
    flex-shrink: 0;
}

.alert-success i {
    color: #28a745;
}

.alert-danger i {
    color: #dc3545;
}

.alert-warning i {
    color: #ffc107;
}

.alert-info i {
    color: #17a2b8;
}

/* === СТИЛИ ДЛЯ FOOTER === */
.dashboard-footer {
    background: white;
    border-radius: 20px;
    padding: 25px 30px;
    margin-top: 30px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.footer-info {
    display: flex;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    position: relative;
    z-index: 2;
}

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

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

/* === АДАПТИВНОСТЬ === */
/* Адаптивные стили перенесены в mobile.css согласно архитектуре */

/* === 🎨 ТЕМАТИЧЕСКИЕ СТИЛИ ДЛЯ КНОПОК БЫСТРЫХ ДЕЙСТВИЙ === */

/* === 👩‍🏫 УЧИТЕЛЯ - COMFORT ТЕМА === */
.quick-action-btn.teacher-theme {
    background: var(--comfort-bg);
    border: 2px solid var(--comfort-border);
    border-radius: 16px;
    padding: 20px;
    color: var(--comfort-text);
    text-decoration: none;
    transition: var(--smooth-transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 70px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}

.quick-action-btn.teacher-theme:hover {
    transform: translateY(-4px);
    border-color: var(--comfort-accent);
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
    color: var(--comfort-text);
    text-decoration: none;
}

.quick-action-btn.teacher-theme i {
    font-size: 1.4rem;
    color: var(--comfort-accent);
    transition: var(--smooth-transition);
    width: 45px;
    height: 45px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--comfort-icon-bg);
    border-radius: 10px;
    border: 2px solid var(--comfort-border);
}

.quick-action-btn.teacher-theme:hover i {
    transform: scale(1.1);
    background: var(--comfort-accent);
    color: white;
    border-color: var(--comfort-accent);
}

/* === 🎓 УЧЕНИКИ - MODERN ТЕМА === */
.quick-action-btn.student-theme {
    background: var(--modern-bg);
    border: 2px solid var(--modern-border);
    border-radius: 18px;
    padding: 22px;
    color: var(--modern-text);
    text-decoration: none;
    transition: var(--smooth-transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 75px;
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
}

.quick-action-btn.student-theme:hover {
    transform: translateY(-6px);
    border-color: var(--modern-accent);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
    color: var(--modern-text);
    text-decoration: none;
}

.quick-action-btn.student-theme i {
    font-size: 1.5rem;
    color: var(--modern-accent);
    transition: var(--smooth-transition);
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--modern-icon-bg);
    border-radius: 12px;
    border: 2px solid var(--modern-border);
}

.quick-action-btn.student-theme:hover i {
    transform: scale(1.15);
    background: var(--modern-accent);
    color: white;
    border-color: var(--modern-accent);
}

/* === 👨‍👩‍👧‍👦 РОДИТЕЛИ - TRUST ТЕМА === */
.quick-action-btn.parent-theme {
    background: var(--trust-bg);
    border: 2px solid var(--trust-border);
    border-radius: 14px;
    padding: 18px;
    color: var(--trust-text);
    text-decoration: none;
    transition: var(--smooth-transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 68px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.06);
}

.quick-action-btn.parent-theme:hover {
    transform: translateY(-3px);
    border-color: var(--trust-accent);
    box-shadow: 0 6px 25px rgba(0, 0, 0, 0.1);
    color: var(--trust-text);
    text-decoration: none;
}

.quick-action-btn.parent-theme i {
    font-size: 1.3rem;
    color: var(--trust-accent);
    transition: var(--smooth-transition);
    width: 42px;
    height: 42px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--trust-icon-bg);
    border-radius: 8px;
    border: 2px solid var(--trust-border);
}

.quick-action-btn.parent-theme:hover i {
    transform: scale(1.08);
    background: var(--trust-accent);
    color: white;
    border-color: var(--trust-accent);
}

/* === 🧑‍💻 ПРОГРАММИСТЫ - TECH ТЕМА === */
.quick-action-btn.programmer-theme {
    background: var(--tech-bg);
    border: 2px solid var(--tech-border);
    border-radius: 20px;
    padding: 24px;
    color: var(--tech-text);
    text-decoration: none;
    transition: var(--smooth-transition);
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    gap: 16px;
    min-height: 80px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}

.quick-action-btn.programmer-theme:hover {
    transform: translateY(-8px);
    border-color: var(--tech-accent);
    box-shadow: 0 16px 50px rgba(0, 0, 0, 0.2);
    color: var(--tech-text);
    text-decoration: none;
}

.quick-action-btn.programmer-theme i {
    font-size: 1.6rem;
    color: var(--tech-accent);
    transition: var(--smooth-transition);
    width: 52px;
    height: 52px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--tech-icon-bg);
    border-radius: 14px;
    border: 2px solid var(--tech-border);
}

.quick-action-btn.programmer-theme:hover i {
    transform: scale(1.2);
    background: var(--tech-accent);
    color: var(--tech-bg);
    border-color: var(--tech-accent);
    box-shadow: 0 0 20px var(--tech-accent);
}

/* === 📱 АДАПТИВНОСТЬ ДЛЯ ВСЕХ ТЕМ === */
/* ПЕРЕМЕЩЕНО В mobile.css */

/* === QUICK ACTION STYLES FROM COMPONENTS.CSS === */
/* Перемещено из components.css для соблюдения архитектуры */

.quick-actions-grid-components {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 20px !important;
  margin-top: 25px !important;
}

.quick-action-btn-components {
  display: flex !important;
  align-items: center !important;
  gap: 15px !important;
  padding: 20px 24px !important;
  background: #ffffff !important;
  border: 2px solid #e0e0e0 !important;
  border-radius: 12px !important;
  text-decoration: none !important;
  color: #333 !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  transition: all 0.3s ease !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
  min-height: 80px !important;
}

.quick-action-btn-components i {
  font-size: 24px !important;
  color: #007bff !important;
  width: 30px !important;
  text-align: center !important;
}

.quick-action-btn-components .quick-action-text {
  flex: 1 !important;
  text-align: left !important;
}

/* Цвета для разных типов кнопок */
.quick-action-primary-components { border-color: #007bff !important; }
.quick-action-success-components { border-color: #28a745 !important; }
.quick-action-info-components { border-color: #17a2b8 !important; }
.quick-action-warning-components { border-color: #ffc107 !important; }
.quick-action-secondary-components { border-color: #6c757d !important; }
.quick-action-dark-components { border-color: #343a40 !important; }

.quick-action-btn-components:hover {
  transform: translateY(-2px) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.15) !important;
  border-color: #007bff !important;
}

.quick-action-btn-components:hover i {
  color: #0056b3 !important;
}

.quick-action-btn-components:hover .quick-action-text {
  color: var(--color-primary) !important;
}

.quick-action-btn-components:hover .quick-action-icon {
  transform: scale(1.15) rotate(8deg);
  box-shadow: 0 8px 25px rgba(0,0,0,0.25);
}

/* Цветовые варианты для быстрых действий */
.quick-action-primary-components .quick-action-icon { 
  background: var(--api-primary-gradient); 
}

.quick-action-success-components .quick-action-icon { 
  background: var(--api-accent-gradient); 
}

.quick-action-info-components .quick-action-icon { 
  background: linear-gradient(135deg, #17a2b8, #138496); 
}

.quick-action-warning-components .quick-action-icon { 
  background: linear-gradient(135deg, #ffc107, #e0a800); 
}

.quick-action-secondary-components .quick-action-icon { 
  background: linear-gradient(135deg, #6c757d, #5a6268); 
}

/* === QUICK ACTION CONTENT STYLES FROM COMPONENTS.CSS === */
/* Перемещено из components.css для соблюдения архитектуры */

.quick-action-content-components {
  flex: 1;
  z-index: 2;
  position: relative;
}

.quick-action-content-components h5 {
  color: var(--api-text-color);
  font-size: 1.1rem;
  font-weight: 700;
  margin: 0 0 8px 0;
  line-height: 1.3;
  transition: color 0.3s ease;
}

.quick-action-content-components p {
  color: var(--api-text-muted);
  font-size: 0.9rem;
  margin: 0;
  line-height: 1.5;
  transition: color 0.3s ease;
}

.quick-action-arrow-components {
  width: 40px;
  height: 40px;
  border-radius: 12px;
  background: rgba(0, 0, 0, 0.05);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--api-text-muted);
  font-size: 1rem;
  flex-shrink: 0;
  transition: all 0.3s ease;
  opacity: 0.6;
}

/* === 🎨 КНОПКИ ПАНЕЛЕЙ УПРАВЛЕНИЯ === */

/* 👑 КНОПКА ПАНЕЛИ ДИРЕКТОРА */
.director-panel-button {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    color: #333 !important;
    box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
    border: 2px solid rgba(255, 215, 0, 0.5);
    position: relative;
    overflow: hidden;
}

.director-panel-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.4), transparent);
    transition: left 0.5s;
}

.director-panel-button:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
    border-color: rgba(255, 215, 0, 0.8);
}

.director-panel-button:hover::before {
    left: 100%;
}

/* 🛡️ КНОПКА ПАНЕЛИ АДМИНИСТРАТОРА */
.admin-panel-button {
    background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
    color: white !important;
    box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
    border: 2px solid rgba(255, 107, 107, 0.5);
    position: relative;
    overflow: hidden;
}

.admin-panel-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.admin-panel-button:hover {
    background: linear-gradient(135deg, #ee5a52 0%, #ff6b6b 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
    border-color: rgba(255, 107, 107, 0.8);
}

.admin-panel-button:hover::before {
    left: 100%;
}

/* 👥 КНОПКА ПАНЕЛИ МЕНЕДЖЕРА */
.manager-panel-button {
    background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
    color: white !important;
    box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
    border: 2px solid rgba(78, 205, 196, 0.5);
    position: relative;
    overflow: hidden;
}

.manager-panel-button::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
    transition: left 0.5s;
}

.manager-panel-button:hover {
    background: linear-gradient(135deg, #44a08d 0%, #4ecdc4 100%);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
    border-color: rgba(78, 205, 196, 0.8);
}

.manager-panel-button:hover::before {
    left: 100%;
}

/* === 🎨 АДАПТИВНОСТЬ КНОПОК ПАНЕЛЕЙ === */
/* Адаптивные стили перенесены в mobile.css согласно архитектуре */

/* === ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ КНОПОК === */
.btn i {
    transition: transform 0.2s ease;
}

.btn:hover i {
    transform: scale(1.1);
}

.btn:active i {
    transform: scale(0.95);
}

/* Адаптивные стили для очень маленьких экранов перенесены в mobile.css согласно архитектуре */

/* === 🎯 СТУДЕНТЫ УПРАВЛЕНИЕ - КНОПКИ === */
/* Стили для кнопок управления студентами из students_management.php */

/* === 📋 КНОПКИ УПРАВЛЕНИЯ В ШАПКЕ === */
.management-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 30px;
    padding: 20px;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    border-radius: 12px;
    color: white;
}

.action-buttons {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* === 🔵 КНОПКА ПРОСМОТРА СТУДЕНТОВ === */
.btn-view {
    background: linear-gradient(135deg, #17a2b8, #138496);
    color: white;
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.3);
    border: 1px solid rgba(23, 162, 184, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-view:hover {
    background: linear-gradient(135deg, #138496, #0f6674);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(23, 162, 184, 0.4);
    color: white;
}

.btn-view:active {
    background: linear-gradient(135deg, #0f6674, #0c525d);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(23, 162, 184, 0.4);
}

/* === 🟢 КНОПКА ДОБАВЛЕНИЯ СТУДЕНТА === */
.btn-add {
    background: linear-gradient(135deg, #28a745, #20c997);
    color: white;
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.3);
    border: 1px solid rgba(40, 167, 69, 0.2);
    font-weight: 700;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-add:hover {
    background: linear-gradient(135deg, #20c997, #28a745);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(40, 167, 69, 0.4);
    color: white;
}

.btn-add:active {
    background: linear-gradient(135deg, #1e7e34, #198c7c);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(40, 167, 69, 0.4);
}

/* === 🟠 КНОПКА РЕДАКТИРОВАНИЯ СТУДЕНТА === */
.btn-edit {
    background: linear-gradient(135deg, #fd7e14, #e55a00);
    color: white;
    box-shadow: 0 2px 4px rgba(253, 126, 20, 0.3);
    border: 1px solid rgba(253, 126, 20, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-edit:hover {
    background: linear-gradient(135deg, #e0a800, #d39e00);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(255, 193, 7, 0.4);
    color: white;
}

.btn-edit:active {
    background: linear-gradient(135deg, #cc4900, #b83e00);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(253, 126, 20, 0.4);
}

/* === 🔴 КНОПКА УДАЛЕНИЯ СТУДЕНТА === */
.btn-delete {
    background: linear-gradient(135deg, #dc3545, #c82333);
    color: white;
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.3);
    border: 1px solid rgba(220, 53, 69, 0.2);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.btn-delete:hover {
    background: linear-gradient(135deg, #c82333, #dc3545);
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(220, 53, 69, 0.4);
    color: white;
}

.btn-delete:active {
    background: linear-gradient(135deg, #a71e2a, #8b1a21);
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(220, 53, 69, 0.4);
}

/* === ⚫ КНОПКА ОТМЕНЫ === */
.btn-cancel {
    background: linear-gradient(135deg, #6c757d, #5a6268);
    color: white;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3);
    border: 1px solid rgba(108, 117, 125, 0.2);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-cancel:hover {
    background: linear-gradient(135deg, #5a6268, #495057);
    transform: translateY(-2px);
    box-shadow: 0 8px 20px rgba(108, 117, 125, 0.5);
    color: white;
    border-color: rgba(108, 117, 125, 0.4);
}

.btn-cancel:active {
    background: linear-gradient(135deg, #495057, #343a40);
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(108, 117, 125, 0.6);
    border-color: rgba(108, 117, 125, 0.6);
}

.btn-cancel:focus {
    outline: none;
    box-shadow: 0 4px 12px rgba(108, 117, 125, 0.3), 0 0 0 3px rgba(108, 117, 125, 0.2);
}

/* === 🔵 КНОПКА СОХРАНЕНИЯ === */
.btn-save {
    background: linear-gradient(135deg, #0056b3, #003d82);
    color: white;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4);
    border: 1px solid rgba(0, 86, 179, 0.3);
    font-weight: 600;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    position: relative;
    overflow: hidden;
}

.btn-save:hover {
    background: linear-gradient(135deg, #004085, #002752);
    box-shadow: 0 8px 20px rgba(0, 86, 179, 0.6);
    color: white;
    transform: translateY(-2px);
    border-color: rgba(0, 86, 179, 0.5);
}

.btn-save:active {
    background: linear-gradient(135deg, #000d1a, #001a33);
    transform: translateY(0);
    box-shadow: 0 4px 8px rgba(0, 86, 179, 0.8);
    color: white;
    border-color: rgba(0, 86, 179, 0.7);
}

.btn-save:focus {
    outline: none;
    box-shadow: 0 4px 12px rgba(0, 86, 179, 0.4), 0 0 0 3px rgba(0, 86, 179, 0.2);
}

/* === 📋 БЛОКИ УПРАВЛЕНИЯ СТУДЕНТАМИ === */
.management-block {
    background: white;
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
    transition: all 0.3s ease;
}

.management-block:hover {
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
}

/* === 📝 ФОРМЫ СТУДЕНТОВ === */
.form-block {
    background: white;
    padding: 30px;
    border-radius: 12px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 20px;
}

.form-row .form-group:only-child {
    grid-column: 1 / -1;
}

.form-group {
    position: relative;
}

.form-help {
    display: block;
    font-size: 12px;
    color: #6c757d;
    margin-top: 5px;
}

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

.required {
    color: #dc3545;
    font-weight: bold;
}

/* === 📊 ТАБЛИЦА СТУДЕНТОВ === */
.students-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-management-block-bg);
    border-radius: var(--radius-sm);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    min-width: 800px;
}

.students-table thead tr {
    background: var(--color-management-table-header-gradient);
}

.students-table th {
    padding: var(--space-sm) var(--space-md);
    text-align: left;
    font-weight: 600;
    border-bottom: 2px solid var(--color-management-table-border);
}

.students-table td {
    padding: var(--space-sm) var(--space-md);
    vertical-align: middle;
}

.students-table tbody tr {
    border-bottom: 1px solid var(--color-management-table-row-border);
    cursor: pointer;
    transition: var(--transition-fast);
}

.students-table tbody tr:hover {
    background-color: var(--color-management-table-row-hover);
}

.students-table tbody tr.selected {
    background-color: #e3f2fd;
    border-left: 4px solid #007bff;
}

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

/* === 🎯 КНОПКИ МОДАЛЬНЫХ ОКОН === */
/* Классы для кнопок внутри модальных окон */
.modal-btn-sm {
  padding: 0.25rem 0.5rem;
  font-size: 0.875rem;
}

.modal-close {
  background: rgba(255, 255, 255, 0.15);
  backdrop-filter: blur(10px);
  border: 2px solid rgba(255, 255, 255, 0.2);
  color: white;
  font-size: 1.4rem;
  cursor: pointer;
  padding: 0;
  border-radius: 12px;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  z-index: 1;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.modal-close:hover {
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.4);
  transform: scale(1.1) rotate(90deg);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
}

.modal-close:active {
  transform: scale(0.95) rotate(90deg);
}

/* === SCHEDULE MODULE (из schedule.css) === */
.flatpickr-buttons {
  display: flex;
  gap: 8px;
  padding: 8px 12px;
  border-top: 1px solid rgba(0,0,0,0.06);
  background: #f8f9fa;
}

.flatpickr-btn-confirm {
  flex: 1;
  padding: 6px 12px;
  background: var(--color-primary, #0c3c78);
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.flatpickr-btn-confirm:hover { opacity: 0.9; }

.flatpickr-btn-cancel {
  padding: 6px 12px;
  background: #6c757d;
  color: white;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 0.9rem;
}

.flatpickr-btn-cancel:hover { opacity: 0.9; }

.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 44px;
  height: 44px;
  background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
  border: none;
  border-radius: 8px;
  padding: 8px;
  cursor: pointer;
  position: relative;
  z-index: 51;
}

.mobile-menu-toggle:hover {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}

.hamburger-line {
  width: 100%;
  height: 3px;
  background: white;
  border-radius: 2px;
  transform-origin: center;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(1) {
  transform: rotate(45deg) translate(8px, 8px);
}

.mobile-menu-toggle.active .hamburger-line:nth-child(2) {
  opacity: 0;
}

.mobile-menu-toggle.active .hamburger-line:nth-child(3) {
  transform: rotate(-45deg) translate(8px, -8px);
}

.event-btn {
  padding: 8px 16px;
  font-size: 0.85rem;
  border-radius: 6px;
  border: none;
  cursor: pointer;
  transition: var(--transition);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 500;
  min-height: 36px;
  background: linear-gradient(to right, var(--color-primary), var(--color-accent));
  color: #fff;
}

.event-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.08);
}

.event-btn.btn-edit {
  background: linear-gradient(to right, #10b981, #059669);
}

.event-btn.btn-delete {
  background: linear-gradient(to right, #ef4444, #dc2626);
}