/*
 * StudyHub.AZ Desktop Styles
 * Filename: desktop.css
 * Author: Ostwind by Dr.FC
 * Медиа-стили для устройств от 1025px
 */

@media (min-width: 1025px) {
  /* === LAYOUT ADJUSTMENTS === */
  .container {
    padding: 40px 30px;
    max-width: 1440px;
  }
  
  /* === 📐 АДАПТИВНАЯ ШИРИНА БЛОКА ДОБАВЛЕНИЯ КУРСА - ДЕСКТОП (≥ 1025px) === */
  /* Десктоп: clamp(800px, 75%, 1400px) с padding 40px с каждой стороны */
  /* Расчеты:
   * 1025px: (1025px - 80px) * 0.85 = 803px
   * 1440px: (1440px - 80px) * 0.85 = 1156px
   * 1920px: min((1920px - 80px) * 0.75, 1400px) = 1380px → ограничено до 1400px
   */
  .course-add-form-container {
    width: clamp(800px, 75%, 1400px);
    max-width: 1400px;
    padding: 0 40px;
    margin: 0 auto;
  }
  
  /* === 📊 ТАБЛИЦА КУРСОВ - ДЕСКТОП (≥1025px) === */
  /* Десктоп: Оптимальные ширины для больших экранов */
  .courses-table .col-course-name {
    width: clamp(200px, 30%, 400px);
  }
  
  .courses-table .col-price {
    width: clamp(120px, 12%, 150px);
  }
  
  .courses-table .col-teacher {
    width: clamp(140px, 18%, 220px);
  }
  
  .courses-table .col-room {
    width: clamp(120px, 15%, 180px);
  }
  
  .courses-table .col-max-students {
    width: clamp(80px, 10%, 120px);
  }
  
  .courses-table .col-status {
    width: clamp(100px, 10%, 140px);
  }
  
  /* Действия: 2 кнопки по 40px + gap 8px + padding 24px = 112px минимум, оптимально 120-160px */
  .courses-table .col-actions {
    width: clamp(120px, 12%, 160px);
    min-width: 120px;
  }
  
  /* === Settings Form Grid - 3 колонки на десктопе === */
  /* Расчет: (1600px - 48px gap) / 3 = 517px на блок */
  .settings-form-grid {
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: start;
    max-width: 1600px;
    margin-left: 0;
    margin-right: 0;
  }
  
  .settings-form-grid .settings-form-block {
    width: 100%;
    min-width: 0;
  }
  
  .settings-form-grid .executive-form-actions {
    grid-column: 1 / -1;
  }

  .main-login,
  .main-welcome {
    padding: 30px;
    min-height: 90vh;
  }

  .main-login.flex-center {
    width: 100%;
  }

  .welcome-container {
    max-width: 900px;
    padding: 0;
  }

  /* === 🎯 АДАПТИВНЫЕ РАЗМЕРЫ ИЗОБРАЖЕНИЯ ДЛЯ ДЕСКТОПОВ === */
  .studyhub-image {
    max-width: 500px;        /* 500px в пикселях */
    max-height: 400px;       /* 400px в пикселях */
    width: 70%;              /* 70% от ширины контейнера */
    height: auto;
  }

  /* === ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ ДЛЯ ДЕСКТОПОВ === */
  .section-top.container {
    flex-direction: row !important;
    gap: 3rem !important;
    text-align: left !important;
  }
  
  .features-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important; /* Адаптивная ширина от 280px до 1fr */
    gap: 1.875rem !important;
    padding: 0 1.25rem !important;
    max-width: 90% !important;
    margin: 3rem auto 0 !important;
    justify-content: center !important; /* Центрирование */
  }
  
  .feature-item {
    /* === АДАПТИВНЫЕ РАЗМЕРЫ ДЛЯ ДЕСКТОПОВ === */
    width: 100% !important;
    min-width: 280px !important;
    max-width: 400px !important;
    height: auto !important;
    min-height: 320px !important;
    max-height: none !important;
    
    text-align: center !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    margin: 0 auto !important; /* Центрирование */
  }

  /* === 🎯 БОЛЬШИЕ ЭКРАНЫ (≥ 1440px) === */
  @media (min-width: 1440px) {
    .studyhub-image {
      max-width: 600px;        /* 600px в пикселях */
      max-height: 450px;       /* 450px в пикселях */
      width: 60%;              /* 60% от ширины контейнера */
      height: auto;
    }
  }

  .executive-dashboard-luxury {
    width: 90%;
    margin: 0 auto;
    padding: 50px;
    border-radius: 30px;
  }

  .executive-header-premium {
    padding: 40px;
    margin-bottom: 50px;
  }

  .executive-main-title {
    font-size: 4rem;
  }

  .luxury-stats-grid {
    /* Математический расчет для 4 карточек в одну строку:
     * - Максимальная ширина контейнера: 1600px
     * - Padding контейнера: 20px * 2 = 40px
     * - Gap между карточками: 24px
     * - Количество карточек: 4
     * - Количество промежутков: 3 (между 4 карточками)
     * - Общая ширина промежутков: 3 * 24px = 72px
     * - Рабочая ширина для карточек: 1600px - 40px - 72px = 1488px
     * - Ширина одной карточки: 1488px / 4 = 372px
     * Используем calc() для точного расчета: (100% - 40px - 72px) / 4
     */
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    margin-bottom: 50px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    padding: 20px;
    width: 100%;
    box-sizing: border-box;
  }

  .luxury-stats-grid .luxury-stat-card,
  .luxury-stats-grid .executive-card-luxury {
    max-width: 100%;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
    /* Ширина рассчитывается автоматически: (1600px - 40px - 72px) / 4 = 372px */
  }

  .enterprise-grid-premium {
    grid-template-columns: repeat(3, 1fr);
    gap: 28px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }

  .enterprise-grid-premium .executive-card-luxury {
    max-width: 100%;
    width: 100%;
  }

  .luxury-icon {
    width: 100px;
    height: 100px;
  }

  .luxury-icon-medium {
    font-size: 40px !important;
  }

  .luxury-icon-large {
    font-size: 50px !important;
  }

  .luxury-value {
    font-size: 4rem;
  }

  .button-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 16px;
  }

  .welcome-box {
    padding: 50px;
    margin: 20px;
  }

  .welcome-box h1 {
    font-size: 2.6rem;
  }

  .welcome-box p {
    font-size: 1.15rem;
  }

  /* === TYPOGRAPHY ADJUSTMENTS === */
  h1 { font-size: 2.8rem; }
  h2 { font-size: 2.4rem; }
  h3 { font-size: 2rem; }
  h4 { font-size: 1.8rem; }
  h5 { font-size: 1.6rem; }
  h6 { font-size: 1.4rem; }

  /* === FORM ADJUSTMENTS === */
  .form-block {
    padding: 50px;
    margin: 20px;
  }

  .form-login {
    padding: 50px 35px;
    margin: 40px auto;
    min-width: 40%;
    max-width: 300px;
  }

  .form-login h2 {
    font-size: 1.4rem;
  }

  /* === INPUT WITH ICON - DESKTOP ONLY === */
  .form-login .input-with-icon input,
  .main-login .input-with-icon input,
  .input-with-icon input,
  .form-login .input-with-icon input[type="text"],
  .main-login .input-with-icon input[type="text"],
  .input-with-icon input[type="text"],
  .form-login .input-with-icon input[name="login"],
  .main-login .input-with-icon input[name="login"],
  .input-with-icon input[name="login"],
  #login {
    padding-left: 35px !important;
    padding-right: 16px !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
  }

  .form-login .input-with-icon.password-field input,
  .main-login .input-with-icon.password-field input,
  .input-with-icon.password-field input,
  .form-login .input-with-icon input[type="password"],
  .main-login .input-with-icon input[type="password"],
  .input-with-icon input[type="password"],
  .form-login .input-with-icon input[name="password"],
  .main-login .input-with-icon input[name="password"],
  .input-with-icon input[name="password"],
  #password {
    padding-left: 35px !important;
    padding-right: 50px !important;
    text-indent: 0 !important;
    box-sizing: border-box !important;
  }

  .form-login .input-with-icon input:focus,
  .main-login .input-with-icon input:focus,
  .input-with-icon input:focus,
  .form-login .input-with-icon input[type="text"]:focus,
  .main-login .input-with-icon input[type="text"]:focus,
  .input-with-icon input[type="text"]:focus,
  .form-login .input-with-icon input[name="login"]:focus,
  .main-login .input-with-icon input[name="login"]:focus,
  .input-with-icon input[name="login"]:focus,
  #login:focus,
  .form-login .input-with-icon input:not(:placeholder-shown),
  .main-login .input-with-icon input:not(:placeholder-shown),
  .input-with-icon input:not(:placeholder-shown),
  .form-login .input-with-icon input[type="text"]:not(:placeholder-shown),
  .main-login .input-with-icon input[type="text"]:not(:placeholder-shown),
  .input-with-icon input[type="text"]:not(:placeholder-shown),
  .form-login .input-with-icon input[name="login"]:not(:placeholder-shown),
  .main-login .input-with-icon input[name="login"]:not(:placeholder-shown),
  .input-with-icon input[name="login"]:not(:placeholder-shown),
  #login:not(:placeholder-shown) {
    padding-left: 35px !important;
  }

  .form-login .input-with-icon.password-field input:focus,
  .main-login .input-with-icon.password-field input:focus,
  .input-with-icon.password-field input:focus,
  .form-login .input-with-icon input[type="password"]:focus,
  .main-login .input-with-icon input[type="password"]:focus,
  .input-with-icon input[type="password"]:focus,
  .form-login .input-with-icon input[name="password"]:focus,
  .main-login .input-with-icon input[name="password"]:focus,
  .input-with-icon input[name="password"]:focus,
  #password:focus,
  .form-login .input-with-icon.password-field input:not(:placeholder-shown),
  .main-login .input-with-icon.password-field input:not(:placeholder-shown),
  .input-with-icon.password-field input:not(:placeholder-shown),
  .form-login .input-with-icon input[type="password"]:not(:placeholder-shown),
  .main-login .input-with-icon input[type="password"]:not(:placeholder-shown),
  .input-with-icon input[type="password"]:not(:placeholder-shown),
  .form-login .input-with-icon input[name="password"]:not(:placeholder-shown),
  .main-login .input-with-icon input[name="password"]:not(:placeholder-shown),
  .input-with-icon input[name="password"]:not(:placeholder-shown),
  #password:not(:placeholder-shown) {
    padding-left: 35px !important;
    padding-right: 50px !important;
  }

  .form-login .input-with-icon i:not(.toggle-password),
  .main-login .input-with-icon i:not(.toggle-password),
  .input-with-icon i:not(.toggle-password),
  .form-login .input-with-icon input:focus ~ i:not(.toggle-password),
  .main-login .input-with-icon input:focus ~ i:not(.toggle-password),
  .input-with-icon input:focus ~ i:not(.toggle-password),
  .form-login .input-with-icon:focus-within i:not(.toggle-password),
  .main-login .input-with-icon:focus-within i:not(.toggle-password),
  .input-with-icon:focus-within i:not(.toggle-password) {
    left: 15px !important;
    top: 40% !important;
    transform: translateY(-50%) !important;
  }

  .form-login .input-with-icon .toggle-password,
  .main-login .input-with-icon .toggle-password,
  .input-with-icon .toggle-password {
    right: 16px !important;
    font-size: 1.1rem !important;
    pointer-events: auto !important;
    display: flex !important;
    visibility: visible !important;
    z-index: 15 !important;
    cursor: pointer !important;
  }

  /* === BUTTON ADJUSTMENTS === */
  button, .button, .welcome-button {
    padding: 16px 30px;
    font-size: 1.1rem;
  }

  .main-button {
    padding: 14px 28px;
    font-size: 1.2rem;
  }

  /* === LAYOUT FLEXIBILITY === */
  .section-top.container {
    flex-direction: row;
    gap: 3rem;
  }

  .top-text, .top-image {
    flex: 1 1 50%;
    min-width: 400px;
  }

  .features-wrapper {
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .tariff-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    justify-items: center;
    gap: 30px;
    align-items: stretch;
  }

  .tariff-card {
    width: 100%;
    max-width: 320px;
    height: 100%;
  }

  /* === MAINTENANCE AUTO-CHECK INDICATOR === */
  .auto-check-indicator {
    bottom: var(--space-lg);
    min-width: 300px;
    padding: var(--space-md);
  }
  
  .check-status {
    font-size: 0.9rem;
  }
  
  .check-timer {
    font-size: 0.85rem;
  }

  /* === LOGO ADJUSTMENTS === */
  .logos-container {
    flex-direction: row;
    align-items: center;
    padding: 25px;
  }

  .logo-image {
    width: 280px;
  }

  .company-title {
    font-size: 2.6rem;
  }

  /* === TABLE ADJUSTMENTS === */
  table {
    font-size: 1rem;
  }

  th, td {
    padding: 18px 28px;
  }

  /* === MODAL ADJUSTMENTS === */
  .modal-content {
    padding: 50px;
    margin: 30px;
    max-width: 700px;
    width: 80%;
  }

  .modal-title {
    font-size: 2rem;
  }

  /* === GLOBAL DEPARTMENTS ADJUSTMENTS === */
  .global-departments-list {
    grid-template-columns: repeat(3, 1fr);
  }
  
  .global-dept-item {
    flex-direction: row;
    align-items: center;
  }
  
  .global-dept-item .button-link {
    align-self: center;
    margin-top: 0;
  }

  /* === VERIFY DEVICE BOX ADJUSTMENTS === */
  .verify-device-box {
    width: 500px;
    padding: 40px;
    margin: 40px auto;
  }

  .verification-input {
    width: 55px;
    height: 65px;
    font-size: 26px;
  }

  /* === SETTINGS BOX ADJUSTMENTS === */
  .settings-box {
    margin: 40px auto;
    padding: 40px;
  }

  /* === ALERT ADJUSTMENTS === */
  .alert {
    min-width: 400px;
    max-width: 70vw;
    padding: 18px 24px;
    font-size: 1rem;
  }

  /* === NOTIFICATION ADJUSTMENTS === */
  .notification {
    min-width: 300px;
    max-width: 80vw;
    padding: 18px 24px;
    font-size: 1rem;
  }

  /* === FOOTER ADJUSTMENTS === */
  .footer-text {
    padding: 40px 30px;
    font-size: 1rem;
  }

  /* === ENHANCED HOVER EFFECTS === */
  .form-block input:not([type="radio"]):not([type="checkbox"]):hover,
  .form-block select:hover,
  .form-block textarea:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px rgba(12, 60, 120, 0.15);
  }

  button:hover, .button:hover, .welcome-button:hover {
    transform: translateY(-3px) scale(1.05);
    box-shadow: 0 12px 30px rgba(0, 0, 0, 0.25);
  }

  .main-button:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
  }

  .feature-item:hover {
    transform: translateY(-10px) scale(1.02);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
  }

  .tariff-card:hover {
    transform: translateY(-12px) scale(1.03);
    box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
  }

  .logo-image:hover {
    transform: scale(1.08) rotate(-2deg);
  }

  /* === FEATURE ITEM DESKTOP IMPROVEMENTS === */
  .feature-item .button-link,
  .feature-item .main-button {
    padding: 12px 20px !important;
    font-size: 1rem !important;
    min-height: 52px !important;
    font-weight: 500;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    text-align: left !important;
    justify-content: flex-start !important;
  }

  .feature-button-wrapper {
    gap: 16px !important;
    margin-bottom: 20px !important;
  }

  .feature-item .sub-links {
    gap: 12px !important;
    margin-top: 20px !important;
  }

  .feature-button-wrapper h3 {
    font-size: 1.3rem !important;
    margin: 10px 0 !important;
  }

  .feature-item {
    padding: 30px 25px !important;
    max-width: 320px;
  }

  .feature-item .button-link:hover,
  .feature-item .main-button:hover {
    transform: translateY(-3px) scale(1.02);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  }



  /* === DESKTOP SPECIFIC LAYOUTS === */
  .desktop-three-column {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
  }

  .desktop-four-column {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
  }

  /* === LARGE SCREEN OPTIMIZATIONS === */
  @media (min-width: 1440px) {
    .container {
      max-width: 1600px;
      padding: 50px 40px;
    }

    .welcome-container {
      max-width: 1000px;
    }

    .form-block {
      width: 100%;
    }

    .modal-content {
      max-width: 800px;
    }

    .features-wrapper {
      gap: 50px;
    }

    .tariff-grid {
      gap: 40px;
    }

    /* Feature items for large screens */
    .feature-item {
      padding: 40px 35px !important;
      max-width: 380px;
    }

    .feature-item .button-link,
    .feature-item .main-button {
      padding: 16px 28px !important;
      font-size: 1.2rem !important;
      min-height: 58px !important;
    }
  }

  /* === ULTRA WIDE SCREEN OPTIMIZATIONS === */
  @media (min-width: 1920px) {
    .container {
      max-width: 1800px;
      padding: 60px 50px;
    }

    .welcome-container {
      max-width: 1200px;
    }

    .form-block {
      width: 100%;
    }

    .modal-content {
      max-width: 900px;
    }

    h1 { font-size: 3.2rem; }
    h2 { font-size: 2.8rem; }
    h3 { font-size: 2.4rem; }
    h4 { font-size: 2rem; }
    h5 { font-size: 1.8rem; }
    h6 { font-size: 1.6rem; }

    /* Feature items for ultra-wide screens */
    .feature-item {
      padding: 45px 40px !important;
      max-width: 420px;
    }

    .feature-item .button-link,
    .feature-item .main-button {
      padding: 18px 32px !important;
      font-size: 1.3rem !important;
      min-height: 60px !important;
    }

    .feature-button-wrapper h3 {
      font-size: 1.6rem !important;
    }
  }

  /* === MODERN ADMIN DESKTOP ОПТИМИЗАЦИЯ === */
  .admin-container-modern {
    padding: clamp(24px, 4vw, 40px);
  }
  
  .stats-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 24px;
  }
  
  .features-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
    gap: 32px;
  }
  
  .hero-section-modern {
    padding: clamp(32px, 6vw, 48px);
  }
  
  .stat-card-modern {
    padding: 28px;
  }
  
  .feature-card-modern {
    padding: 32px;
  }
  
  .btn-modern {
    padding: 14px 20px;
    font-size: 0.95rem;
  }

  .stat-value-modern {
    font-size: 2.8rem;
  }

  .feature-title-modern {
    font-size: 1.5rem;
  }

  /* === HOVER ЭФФЕКТЫ ТОЛЬКО НА DESKTOP === */
  .stat-card-modern:hover .stat-icon-modern {
    animation: iconSpin 0.5s ease-in-out;
  }

  .feature-card-modern:hover .feature-icon-modern {
    animation: iconSpin 0.6s ease-in-out;
  }
  
  /* === АДАПТИВНЫЕ СТИЛИ ДЛЯ СТРАНИЦЫ ЛОГОВ === */
  .hero-actions {
    gap: 25px;
  }
  
  .hero-actions .btn {
    padding: 15px 30px;
    font-size: 1.1rem;
  }
  
  .hero-actions .btn:hover {
    transform: translateY(-3px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.2);
  }
  
  .debug-info {
    margin: 30px 0;
    padding: 25px;
  }
  
  .debug-info pre {
    font-size: 12px;
    max-height: 250px;
  }
  
  .filters-section {
    gap: 30px;
  }
  
  .filter-row {
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 25px;
  }
  
  .filter-actions {
    gap: 20px;
  }
  
  .log-message {
    max-width: 400px;
  }
  
  /* === МОДАЛЬНЫЕ ОКНА: МАТЕМАТИЧЕСКИЕ РАСЧЕТЫ ДЛЯ ДЕСКТОПОВ === */
  /* Расчеты основаны на золотом сечении и оптимальных размерах для больших экранов */
  
  #logDetailsModal .modal-dialog {
    /* Ширина: соответствует требованиям (min 800px, max 1200px) */
    min-width: 800px !important;
    max-width: 1200px !important;
    width: clamp(800px, 75vw, 1200px);
    /* Отступы: пропорционально размеру экрана (2.5-4% от высоты viewport) */
    margin: clamp(2.5rem, 4vh, 3.5rem) auto;
  }
  
  #logDetailsModal .modal-body {
    /* Внутренние отступы: 5px согласно архитектуре */
    padding: 5px !important;
  }
  
  #loggingSettingsModal.modal .modal-dialog.modal-lg,
  #loggingSettingsModal .modal-dialog.modal-lg {
    /* Математический расчет: 100vw - отступы (5px слева + 5px справа = 10px) */
    width: calc(100vw - 10px) !important;
    min-width: 800px !important;
    max-width: 1200px !important; /* Исправлено: было 1000px, должно быть 1200px */
    /* Отступы: 5px слева и справа для красивого вида */
    margin: clamp(2.5rem, 4vh, 3.5rem) 5px !important;
    box-sizing: border-box !important;
  }
  
  /* Ширина header равна ширине модального окна (100% от modal-dialog) */
  #loggingSettingsModal .modal-header {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
  }
  
  #loggingSettingsModal .modal-body {
    /* Внутренние отступы: 5px согласно архитектуре */
    padding: 5px !important;
  }
  
  #loggingSettingsModal .modal-footer {
    /* Внутренние отступы: 5px согласно архитектуре */
    padding: 5px !important;
  }
  
  #loggingSettingsModal .modal-footer .d-flex {
    /* Отступ между группами кнопок: минимум 20px, максимум 2.5vw */
    gap: clamp(20px, 2.5vw, 30px);
  }
  
  #loggingSettingsModal .modal-footer .btn {
    /* Внутренние отступы: 5px 10px согласно архитектуре */
    padding: 5px 10px !important;
    /* Размер шрифта: адаптивный для десктопа */
    font-size: clamp(1rem, 1.3vw, 1.15rem);
    /* Минимальная высота для удобства: 2.75rem */
    min-height: 2.75rem;
  }
  
  #loggingSettingsModal .modal-footer .btn:hover {
    /* Эффект поднятия: пропорционально размеру кнопки */
    transform: translateY(clamp(-2px, -0.3vh, -3px));
    /* Тень: глубина пропорциональна размеру */
    box-shadow: 0 clamp(4px, 0.6vh, 6px) clamp(15px, 2vh, 20px) rgba(0, 0, 0, 0.2);
  }
  
  /* Размеры для alert блока в модальном окне настроек */
  #loggingSettingsModal .modal-body .alert {
    /* Внутренние отступы: 5px согласно архитектуре */
    padding: 5px !important;
    /* Отступ снизу: минимум 1.25rem, максимум 1.75rem */
    margin-bottom: clamp(1.25rem, 2.5vh, 1.75rem);
    /* Радиус: пропорционально размеру окна */
    border-radius: clamp(0.5rem, 1vw, 0.75rem);
  }
  
  #loggingSettingsModal .modal-body .alert .d-flex {
    /* Отступ между элементами: увеличенный для десктопа */
    gap: clamp(1rem, 1.5vw, 1.25rem);
  }
  
  #loggingSettingsModal .modal-body .alert small {
    /* Размер шрифта: адаптивный для десктопа */
    font-size: clamp(0.85rem, 1vw, 0.95rem);
  }
  
  /* Математические расчеты для внутренних элементов на десктопе */
  #loggingSettingsModal .modal-body .row {
    /* Отступ между колонками: увеличенный для десктопа */
    margin-left: calc(-1 * clamp(1rem, 2vw, 1.5rem));
    margin-right: calc(-1 * clamp(1rem, 2vw, 1.5rem));
  }
  
  #loggingSettingsModal .modal-body .row > [class*="col-"] {
    /* Отступ внутри колонок: увеличенный для десктопа */
    padding-left: clamp(1rem, 2vw, 1.5rem);
    padding-right: clamp(1rem, 2vw, 1.5rem);
  }
  
  #loggingSettingsModal .modal-body .form-control,
  #loggingSettingsModal .modal-body .form-select {
    /* Высота поля: увеличенная для удобства на десктопе */
    min-height: clamp(2.75rem, 5.5vh, 3.25rem);
    /* Размер шрифта: адаптивный */
    font-size: clamp(1rem, 1.3vw, 1.15rem);
  }
  
  /* === 📱 CARDS.CSS DESKTOP STYLES === */
  /* Стили перенесены из cards.css для соблюдения архитектуры */
  
  /* Luxury Stats Grid для больших экранов */
  .luxury-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 400px));
    justify-content: center;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
  
  .luxury-stats-grid .executive-card-luxury {
    max-width: 400px;
    width: 100%;
  }
  
  .enterprise-grid-premium {
    grid-template-columns: repeat(3, 1fr);
    justify-content: center;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
    gap: 28px;
  }
  
  .enterprise-grid-premium .executive-card-luxury {
    max-width: 100%;
    width: 100%;
  }
}

/* === ОЧЕНЬ БОЛЬШИЕ ЭКРАНЫ (≥1600px) === */
@media (min-width: 1600px) {
  .luxury-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(350px, 450px));
    max-width: 1600px;
  }
  
  .luxury-stats-grid .executive-card-luxury {
    max-width: 450px;
  }
  
  .enterprise-grid-premium {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1600px;
    gap: 32px;
  }
  
  .enterprise-grid-premium .executive-card-luxury {
    max-width: 100%;
    width: 100%;
  }
}

/* === ULTRA WIDE ЭКРАНЫ (≥1920px) === */
@media (min-width: 1920px) {
  .luxury-stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(380px, 500px));
    max-width: 1800px;
  }
  
  .luxury-stats-grid .executive-card-luxury {
    max-width: 500px;
  }
  
  .enterprise-grid-premium {
    grid-template-columns: repeat(3, 1fr);
    max-width: 1800px;
    gap: 36px;
  }
  
  .enterprise-grid-premium .executive-card-luxury {
    max-width: 100%;
    width: 100%;
  }
}

/* === SMALL LAPTOP SCREENS (1024px-1366px) === */
@media (min-width: 1024px) and (max-width: 1366px) {
  .features-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    padding: 0 15px !important;
    max-width: 900px !important;
  }
  
  .feature-item {
    max-width: 260px !important;
    padding: 20px 16px !important;
  }
  
  .feature-item h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
  
  .feature-item p {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }
  
  .section-features {
    padding: 0 20px !important;
  }
}

/* === MEDIUM LAPTOP SCREENS (1367px-1440px) === */
@media (min-width: 1367px) and (max-width: 1440px) {
  .features-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    padding: 0 20px !important;
    max-width: 1100px !important;
  }
  
  .feature-item {
    max-width: 300px !important;
    padding: 24px 20px !important;
  }
  
  .feature-item h3 {
    font-size: 1.15rem !important;
  }
  
  .feature-item p {
    font-size: 0.9rem !important;
  }
}

/* === LARGE LAPTOP SCREENS (1441px+) === */
@media (min-width: 1441px) {
  .features-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    padding: 0 25px !important;
    max-width: 1200px !important;
  }
  
  .feature-item {
    max-width: 320px !important;
    padding: 26px 22px !important;
  }
  
  .feature-item h3 {
    font-size: 1.2rem !important;
  }
  
  .feature-item p {
    font-size: 0.95rem !important;
  }
}

/* === MACBOOK И APPLE УСТРОЙСТВА === */
/* Специальные стили для исправления min-width на MacBook */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  /* MacBook Pro 13" (1280x800) */
  @media (min-width: 1280px) and (max-width: 1440px) {
    .features-wrapper {
      grid-template-columns: repeat(2, 1fr) !important;
      gap: 28px !important;
      padding: 0 20px !important;
      max-width: 1000px !important;
    }
    
    .feature-item {
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      padding: 22px 18px !important;
      box-sizing: border-box !important;
      flex-shrink: 1 !important;
      flex-basis: auto !important;
    }
    
    .feature-item h3 {
      font-size: 1.1rem !important;
      line-height: 1.3 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
    
    .feature-item p {
      font-size: 0.9rem !important;
      line-height: 1.4 !important;
      word-wrap: break-word !important;
      overflow-wrap: break-word !important;
    }
  }

  /* MacBook Air 13" (1440x900) */
  @media (min-width: 1440px) and (max-width: 1680px) {
    .features-wrapper {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 30px !important;
      padding: 0 25px !important;
      max-width: 1200px !important;
    }
    
    .feature-item {
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      padding: 24px 20px !important;
    }
  }

  /* MacBook Pro 16" (1792x1120) */
  @media (min-width: 1792px) {
    .features-wrapper {
      grid-template-columns: repeat(3, 1fr) !important;
      gap: 32px !important;
      padding: 0 30px !important;
      max-width: 1400px !important;
    }
    
    .feature-item {
      max-width: 100% !important;
      width: 100% !important;
      min-width: 0 !important;
      padding: 26px 22px !important;
    }
  }
}

/* === RETINA DISPLAY FIXES === */
/* Дополнительные исправления для Retina дисплеев */
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .feature-item {
    /* Принудительно исправляем min-width для Retina */
    min-width: 0 !important;
    max-width: none !important;
    width: 100% !important;
    box-sizing: border-box !important;
    
    /* Flexbox исправления для MacBook */
    flex: 1 1 auto !important;
    flex-shrink: 1 !important;
    flex-basis: auto !important;
    
    /* Grid исправления */
    justify-self: stretch !important;
    align-self: start !important;
  }
  
  .features-wrapper {
    /* Принудительно исправляем grid для Retina */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* === DESKTOP STYLES === */
/* Стили для десктопов и больших экранов */

/* === FEATURES WRAPPER НА ДЕСКТОПАХ === */
.features-wrapper {
  /* === ДЕСКТОПНАЯ ЛОГИКА === */
  /* На десктопах сохраняем текущую логику с несколькими колонками */
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
  gap: 30px !important;
  padding: 0 20px !important;
  max-width: 1200px !important;
  margin: 20px auto 0 !important;
}

/* === FEATURE ITEMS НА ДЕСКТОПАХ === */
.feature-item {
  max-width: 280px !important;
  width: 100% !important;
  padding: 24px 20px !important;
  margin: 0 !important;
  box-sizing: border-box !important;
  min-width: 0 !important;
  
  /* === ДЕСКТОПНАЯ СЕТКА === */
  justify-self: center !important;
  align-self: start !important;
}

.feature-item h3 {
  font-size: 1.2rem !important;
  line-height: 1.3 !important;
  margin-bottom: 12px !important;
  text-align: center !important;
}

.feature-item p {
  font-size: 0.95rem !important;
  line-height: 1.4 !important;
  text-align: center !important;
  margin-bottom: 0 !important;
}

/* === ДЕСКТОПНЫЕ ИКОНКИ === */
.feature-item i {
  display: block !important;
  text-align: center !important;
  margin-bottom: 14px !important;
  font-size: 2.4rem !important;
}

/* === БОЛЬШИЕ ЭКРАНЫ (≥ 1024px) === */
/* Сохраняем текущую логику с несколькими колонками */
@media (min-width: 1024px) {
  .features-wrapper {
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 30px !important;
    padding: 0 20px !important;
    max-width: 1200px !important;
  }
  
  .feature-item {
    max-width: 280px !important;
    padding: 24px 20px !important;
  }
  
  .feature-item h3 {
    font-size: 1.2rem !important;
  }
  
  .feature-item p {
    font-size: 0.95rem !important;
  }
}

/* === СРЕДНИЕ ДЕСКТОПЫ (1024px-1366px) === */
@media (min-width: 1024px) and (max-width: 1366px) {
  .features-wrapper {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 24px !important;
    padding: 0 15px !important;
    max-width: 900px !important;
  }
  
  .feature-item {
    max-width: 260px !important;
    padding: 20px 16px !important;
  }
  
  .feature-item h3 {
    font-size: 1.1rem !important;
    line-height: 1.3 !important;
  }
  
  .feature-item p {
    font-size: 0.88rem !important;
    line-height: 1.4 !important;
  }
  
  .section-features {
    padding: 0 20px !important;
  }
}

/* === БОЛЬШИЕ ДЕСКТОПЫ (1367px-1440px) === */
@media (min-width: 1367px) and (max-width: 1440px) {
  .features-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 28px !important;
    padding: 0 20px !important;
    max-width: 1200px !important;
  }
  
  .feature-item {
    max-width: 300px !important;
    padding: 24px 20px !important;
  }
}

/* === ОЧЕНЬ БОЛЬШИЕ ДЕСКТОПЫ (1441px+) === */
@media (min-width: 1441px) {
  .features-wrapper {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 30px !important;
    padding: 0 25px !important;
    max-width: 1400px !important;
  }
  
  .feature-item {
    max-width: 320px !important;
    padding: 26px 22px !important;
  }
}

/* === 🖥️ СТУДЕНТЫ УПРАВЛЕНИЕ - ДЕСКТОПНЫЕ СТИЛИ === */
/* Адаптивные стили для управления студентами на десктопах */

@media (min-width: 1025px) {
  .management-header {
    flex-direction: row !important;
    gap: 30px !important;
    padding: 25px 30px !important;
    text-align: left !important;
  }
  
  .management-header h1 {
    font-size: 2rem !important;
    margin: 0 !important;
  }
  
  .action-buttons {
    flex-wrap: nowrap !important;
    justify-content: flex-end !important;
    gap: 15px !important;
  }
  
  .action-buttons .btn {
    padding: 12px 20px !important;
    font-size: 1rem !important;
    min-width: 160px !important;
    max-width: 180px !important;
  }
  
  .management-block {
    padding: 30px !important;
    margin-bottom: 25px !important;
  }
  
  .management-block h2 {
    font-size: 1.8rem !important;
    margin-bottom: 25px !important;
    text-align: left;
  }
  
  .form-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 25px !important;
  }
  
  .form-group label {
    font-size: 1rem !important;
    margin-bottom: 10px !important;
  }
  
  .form-group input,
  .form-group select {
    padding: 14px !important;
    font-size: 1rem !important;
  }
  
  .form-actions {
    flex-direction: row !important;
    gap: 20px !important;
    justify-content: flex-start !important;
  }
  
  .form-actions button {
    width: auto !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    min-width: 160px !important;
  }
  
  .button {
    width: auto !important;
    justify-content: center !important;
    padding: 14px 28px !important;
    font-size: 1rem !important;
    min-width: 160px !important;
  }
  
  .credential-row {
    flex-direction: row !important;
    align-items: center !important;
    gap: 20px !important;
    padding: 15px 0 !important;
  }
  
  .student-credentials {
    padding: 25px !important;
    font-size: 1rem !important;
  }
  
  .management-block .fas.fa-3x {
    font-size: 3rem !important;
  }
  
  .management-block h3 {
    font-size: 1.5rem !important;
  }
  
  .management-block p {
    font-size: 1.1rem !important;
  }
  
  .students-table {
    font-size: 1rem !important;
  }
  
  .students-table th,
  .students-table td {
    padding: 15px !important;
  }
  
  .notification {
    top: 30px !important;
    right: 30px !important;
    left: auto !important;
    min-width: 350px !important;
    max-width: 450px !important;
  }
}

/* === 🖥️ БОЛЬШИЕ ДЕСКТОПЫ (1200px+) === */
@media (min-width: 1200px) {
  .management-header {
    padding: 30px 40px !important;
  }
  
  .management-header h1 {
    font-size: 2.2rem !important;
  }
  
  .action-buttons .btn {
    padding: 14px 24px !important;
    font-size: 1.1rem !important;
    min-width: 180px !important;
    max-width: 200px !important;
  }
  
  .management-block {
    padding: 40px !important;
  }
  
  .management-block h2 {
    font-size: 2rem !important;
  }
  
  .form-row {
    gap: 30px !important;
  }
  
  .form-group input,
  .form-group select {
    padding: 16px !important;
    font-size: 1.1rem !important;
  }
  
  .form-actions button {
    padding: 16px 32px !important;
    font-size: 1.1rem !important;
    min-width: 180px !important;
  }
  
  .students-table {
    font-size: 1.1rem !important;
  }
  
  .students-table th,
  .students-table td {
    padding: 18px !important;
  }
}

/* === 🖥️ ОЧЕНЬ БОЛЬШИЕ ДЕСКТОПЫ (1440px+) === */
@media (min-width: 1440px) {
  .management-header {
    padding: 40px 50px !important;
  }
  
  .management-header h1 {
    font-size: 2.5rem !important;
  }
  
  .action-buttons .btn {
    padding: 16px 28px !important;
    font-size: 1.2rem !important;
    min-width: 200px !important;
    max-width: 220px !important;
  }
  
  .management-block {
    padding: 50px !important;
  }
  
  .management-block h2 {
    font-size: 2.2rem !important;
  }
  
  .form-row {
    gap: 35px !important;
  }
  
  .form-group input,
  .form-group select {
    padding: 18px !important;
    font-size: 1.2rem !important;
  }
  
  .form-actions button {
    padding: 18px 36px !important;
    font-size: 1.2rem !important;
    min-width: 200px !important;
  }
  
  .students-table {
    font-size: 1.2rem !important;
  }
  
  .students-table th,
  .students-table td {
    padding: 20px !important;
  }

  /* === 🖥️ JAVASCRIPT CHECK DASHBOARD - DESKTOP STYLES (≥ 1025px) === */
  
  .super-admin-dashboard {
    padding: 20px;
  }
  
  .hero-section-modern {
    padding: 40px;
    border-radius: 15px;
    margin-bottom: 30px;
  }
  
  .hero-stats {
    margin-top: 30px;
  }
  
  .hero-stat {
    margin: 10px;
  }
  
  .stat-number {
    font-size: 2.5em;
    margin-bottom: 5px;
  }
  
  .stat-label {
    font-size: 1.1em;
  }
  
  .dashboard-grid {
    grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
    gap: 20px;
    margin-bottom: 30px;
  }
  
  .dashboard-section {
    border-radius: 10px;
    padding: 20px;
  }
  
  .section-header {
    margin-bottom: 20px;
    padding-bottom: 15px;
  }
  
  .section-actions {
    gap: 10px;
  }
  
  .btn {
    padding: 8px 16px;
    font-size: 14px;
    gap: 8px;
  }
  
  .btn-sm {
    padding: 5px 10px;
    font-size: 12px;
  }
  
  .stats-grid-modern {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 20px;
  }
  
  .stat-card {
    border-radius: 15px;
    padding: 25px;
  }
  
  .stat-icon {
    font-size: 2.5em;
    margin-bottom: 15px;
  }
  
  .stat-content h3 {
    font-size: 2em;
  }
  
  .stat-content p {
    font-size: 1.1em;
  }
  
  .js-files-grid {
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 15px;
  }
  
  .js-file-card {
    border-radius: 8px;
    padding: 15px;
  }
  
  .js-file-header i {
    font-size: 1.5em;
    margin-right: 10px;
  }
  
  .js-file-size {
    padding: 2px 8px;
    font-size: 12px;
  }
  
  .js-file-content p {
    font-size: 14px;
  }
  
  .js-file-actions {
    gap: 5px;
    margin-top: 10px;
  }
  
  .js-tools-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
  }
  
  .js-tool-card {
    border-radius: 8px;
    padding: 15px;
  }
  
  .tool-header i {
    font-size: 1.2em;
    margin-right: 10px;
  }
  
  .tool-content p {
    margin: 0 0 15px 0;
    font-size: 14px;
  }
  
  .js-errors-list {
    max-height: 400px;
  }
  
  .js-error-item {
    border-radius: 5px;
    padding: 15px;
    margin-bottom: 10px;
  }
  
  .error-time {
    font-size: 12px;
  }
  
  .error-type {
    padding: 2px 8px;
    font-size: 12px;
  }
  
  .error-message {
    font-size: 14px;
  }
  
  .error-location {
    font-size: 12px;
  }
  
  .error-stack {
    border-radius: 5px;
    padding: 10px;
    font-size: 0.8em;
    max-height: 200px;
  }
  
  .no-data {
    padding: 40px;
  }
  
  .no-data i {
    font-size: 3em;
    margin-bottom: 15px;
  }
  
  .debug-info {
    border-radius: 8px;
    padding: 15px;
    margin: 20px 0;
    font-size: 0.9em;
  }
  
  .modal-content {
    width: 80%;
    max-width: 600px;
    margin: 5% auto;
    border-radius: 10px;
  }
  
  .modal-header {
    padding: 5px !important; /* Исправлено: было 20px, должно быть 5px согласно архитектуре */
  }
  
  .modal-header h3 {
    font-size: 1.3em;
  }
  
  .close {
    font-size: 28px;
  }
  
  .modal-body {
    padding: 5px !important; /* Исправлено: было 20px, должно быть 5px согласно архитектуре */
  }
  
  .console-output {
    padding: 15px;
    max-height: 300px;
    font-size: 0.9em;
  }
  
  .console-input {
    gap: 10px;
  }
  
  .console-input input {
    padding: 8px;
    font-size: 14px;
  }
  
  .dashboard-footer {
    padding: 20px;
    border-radius: 10px;
  }
  
  .footer-info p {
    font-size: 14px;
    margin: 5px 0;
  }
  
  .js-file-modified {
    font-size: 12px;
  }
  
  .js-file-path {
    font-size: 12px;
  }

  /* ============================================
     PRIVACY POLICY - DESKTOP РАЗМЕРЫ (≥1025px)
     ============================================ */
  
  main.privacy-policy-container {
    max-width: 1000px;
    padding: 60px 40px;
    min-height: calc(100vh - 200px);
  }
  
  main.privacy-policy-container .privacy-policy-header {
    margin-bottom: 50px;
    padding-bottom: 30px;
  }
  
  main.privacy-policy-container .privacy-policy-header h1 {
    font-size: 2.8em;
    margin-bottom: 15px;
  }
  
  main.privacy-policy-container .privacy-policy-header .last-updated {
    font-size: 0.95em;
    margin-top: 10px;
  }
  
  main.privacy-policy-container .privacy-section {
    margin-bottom: 35px;
    padding: 35px;
  }
  
  main.privacy-policy-container .privacy-section h2 {
    font-size: 1.9em;
    margin-bottom: 25px;
    padding-left: 20px;
  }
  
  main.privacy-policy-container .privacy-section h3 {
    font-size: 1.5em;
    margin-top: 25px;
    margin-bottom: 15px;
  }
  
  main.privacy-policy-container .privacy-section h4 {
    font-size: 1.25em;
    margin-top: 20px;
    margin-bottom: 12px;
  }
  
  main.privacy-policy-container .privacy-section ul {
    margin-left: 25px;
    margin-bottom: 20px;
    padding-left: 10px;
  }
  
  main.privacy-policy-container .privacy-section ul li {
    margin-bottom: 12px;
    padding-left: 5px;
  }
  
  main.privacy-policy-container .privacy-section ol {
    margin-left: 25px;
    margin-bottom: 20px;
    padding-left: 10px;
  }
  
  main.privacy-policy-container .privacy-section ol li {
    margin-bottom: 12px;
    padding-left: 5px;
  }
  
  main.privacy-policy-container .privacy-section p {
    margin-bottom: 18px;
    font-size: 1.05em;
  }
  
  main.privacy-policy-container .back-to-home {
    margin-top: 60px;
    padding-top: 30px;
  }
  
  main.privacy-policy-container .back-to-home a {
    padding: 14px 35px;
    font-size: 1.05em;
  }
  
  main.privacy-policy-container .back-to-home a i {
    font-size: 1.1em;
  }
  
  /* Большие планшеты и маленькие десктопы (1024px - 1199px) */
  @media (min-width: 1025px) and (max-width: 1199px) {
    main.privacy-policy-container {
      max-width: 900px;
      padding: 50px 35px;
    }
    
    main.privacy-policy-container .privacy-policy-header h1 {
      font-size: 2.5em;
    }
  }
  
  /* Высокие экраны (для лучшего использования пространства) */
  @media (min-height: 900px) and (min-width: 1200px) {
    main.privacy-policy-container {
      padding: 70px 50px;
    }
  }
  
  /* === SUPER ADMIN COMPONENTS DESKTOP STYLES === */
  .super-admin-dashboard {
    padding: 30px;
    max-width: 1400px;
  }
  
  .hero-section-modern {
    padding: 50px 40px;
  }
  
  .hero-content h1 {
    font-size: 2.8rem;
  }
  
  .hero-stats {
    gap: 25px;
    justify-content: flex-start;
  }
  
  .hero-stat {
    min-width: 180px;
  }
  
  .stat-number {
    font-size: 2.5rem;
  }
  
  .api-config-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
  }
  
  .bot-status-grid {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 25px;
  }
  
  .quick-actions-grid {
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 25px;
  }
  
  .notification {
    min-width: 320px;
    max-width: 450px;
  }
  
  .config-card {
    padding: 25px;
  }
  
  .dashboard-section {
    padding: 30px;
  }
  
  .form-block {
    padding: 30px;
  }

  /* === ОБЩИЕ МЕДИА-ЗАПРОСЫ ДЛЯ МОДАЛЬНЫХ ОКОН (≥1025px) === */
  /* КРИТИЧНО: Обеспечиваем центрирование модальных окон на десктопе */
  .modal {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Все варианты модальных окон для десктопа: min 800px, max 1200px */
  .modal-dialog {
    min-width: 800px !important;
    max-width: 1200px !important;
    max-height: 90vh !important;
    margin: 0 auto !important; /* Горизонтальное центрирование */
    align-self: center !important; /* Вертикальное центрирование */
  }
  .modal-dialog.modal-sm {
    min-width: 800px !important;
    max-width: 1200px !important;
    max-height: 80vh !important;
  }
  .modal-dialog.modal-lg {
    min-width: 800px !important;
    max-width: 1200px !important;
    max-height: 95vh !important;
  }
  .modal-dialog.modal-xl {
    min-width: 800px !important;
    max-width: 1200px !important;
    max-height: 95vh !important;
  }
  /* ОПТИМИЗАЦИЯ ДЛЯ ДЕСКТОПА (≥1025px) */
  /* Все варианты модальных окон для десктопа: min 800px, max 1200px */
  .modal-dialog {
    min-width: 800px !important; /* Минимальная ширина для десктопа */
    max-width: 1200px !important; /* Максимальная ширина для десктопа */
    max-height: 90vh !important; /* Ограничение высоты */
  }
  .modal-dialog.modal-sm {
    min-width: 800px !important; /* Исправлено: было 500px */
    max-width: 1200px !important; /* Исправлено: было 500px */
    max-height: 80vh !important;
  }
  .modal-dialog.modal-lg {
    min-width: 800px !important; /* Исправлено: было 1000px */
    max-width: 1200px !important; /* Максимальная ширина для десктопа */
    max-height: 95vh !important;
  }
  .modal-dialog.modal-xl {
    min-width: 800px !important; /* Исправлено: было 1200px */
    max-width: 1200px !important; /* Исправлено: было 1600px */
    max-height: 95vh !important;
  }
  .modal-content {
    max-height: 90vh !important; /* Ограничение высоты контента */
    overflow-y: auto !important; /* Прокрутка при необходимости */
  }
  .modal-body {
    max-height: calc(90vh - 120px) !important; /* Высота минус header и footer */
    overflow-y: auto !important;
  }
  /* КРИТИЧНО: Переопределяем padding для всех модальных окон на десктопе */
  /* Это гарантирует, что стили из mobile.css не применяются на десктопе */
  .modal-header {
    padding: 5px !important; /* Переопределяет mobile.css и другие конфликты */
    margin: 0 !important;
    min-height: auto !important;
    color: #ffffff !important; /* Устанавливаем белый цвет для всего header */
  }
  /* Все элементы внутри modal-header наследуют белый цвет */
  .modal-header * {
    color: #ffffff !important;
  }
  
  /* КРИТИЧНО: Переопределяем цвет для кнопки закрытия - синий X на белом фоне */
  /* Используем максимальную специфичность для гарантированного переопределения */
  .modal .modal-dialog .modal-content .modal-header .btn-close,
  .modal.fade .modal-dialog .modal-content .modal-header .btn-close,
  .modal.active .modal-dialog .modal-content .modal-header .btn-close,
  .modal.show .modal-dialog .modal-content .modal-header .btn-close,
  .modal-header .btn-close,
  .modal-header * .btn-close,
  .modal-header button.btn-close,
  button.modal-header .btn-close {
    position: absolute !important; /* Абсолютное позиционирование */
    top: 0.5rem !important; /* Отступ сверху */
    right: 0.5rem !important; /* Отступ справа - в самом правом верхнем углу */
    margin: 0 !important; /* Убираем margin */
    color: #0c3c78 !important; /* Синий цвет X - как у кнопок */
    -webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
    -webkit-background-clip: unset !important; /* Убираем градиентный фон */
    background-clip: unset !important; /* Убираем градиентный фон */
    background: #ffffff !important; /* Белый круглый фон */
    border-radius: 50% !important; /* Круглый фон */
    filter: none !important; /* Убираем любые фильтры */
    opacity: 1 !important;
    font-weight: 700 !important; /* Жирный шрифт для видимости */
    z-index: 10 !important; /* Поверх других элементов */
  }
  
  .modal .modal-dialog .modal-content .modal-header .btn-close:hover,
  .modal-header .btn-close:hover {
    color: #0c3c78 !important; /* Синий цвет X - как у кнопок */
    -webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
    background: #f8f9fa !important; /* Светло-серый фон при наведении */
    opacity: 1 !important;
    font-weight: 700 !important; /* Жирный шрифт для видимости */
  }
  .modal-body {
    padding: 5px !important; /* Переопределяет mobile.css и другие конфликты */
    margin: 0 !important;
  }
  .modal-footer {
    padding: 5px !important; /* Переопределяет mobile.css и другие конфликты */
    margin: 0 !important;
  }
  /* Внутренние отступы 5px для элементов внутри модальных окон */
  .modal-header > *,
  .modal-body > *,
  .modal-footer > * {
    padding: 5px !important;
    margin: 0 !important;
  }
  /* КРИТИЧНО: Переопределение typography.css для белого текста в заголовках */
  .modal-header .modal-title {
    padding: 5px !important;
    margin: 0 !important;
    /* КРИТИЧНО: Переопределяем свойства из typography.css */
    -webkit-text-fill-color: #ffffff !important; /* Переопределяет transparent */
    -webkit-background-clip: unset !important; /* Убирает градиентный фон текста */
    background-clip: unset !important; /* Убирает градиентный фон текста */
    background: none !important; /* Убирает градиент */
    color: #ffffff !important; /* Обычный цвет текста */
  }
  /* Для иконок внутри заголовков */
  .modal-header .modal-title i,
  .modal-header i {
    -webkit-text-fill-color: #ffffff !important; /* Переопределяет transparent для иконок */
    color: #ffffff !important;
  }
  /* КРИТИЧНО: Переопределение псевдоэлемента ::before из typography.css */
  .modal-header .modal-title::before {
    -webkit-text-fill-color: #ffffff !important; /* Переопределяет var(--color-accent) */
    color: #ffffff !important; /* Переопределяет var(--color-accent) */
    background: none !important; /* Убирает фон если есть */
  }
  /* Дополнительная специфичность для всех элементов внутри modal-header с градиентом */
  .modal-header[style*="gradient"] .modal-title,
  .modal-header[style*="gradient"] .modal-title *,
  .modal-header[style*="gradient"] * {
    -webkit-text-fill-color: #ffffff !important; /* Переопределяет transparent */
    -webkit-background-clip: unset !important; /* Убирает градиентный фон текста */
    background-clip: unset !important; /* Убирает градиентный фон текста */
    background: none !important; /* Убирает градиент */
    color: #ffffff !important;
  }
  
  /* КРИТИЧНО: Исключение для кнопки закрытия в градиентных заголовках */
  .modal .modal-dialog .modal-content .modal-header[style*="gradient"] .btn-close,
  .modal-header[style*="gradient"] .btn-close,
  .modal-header[style*="gradient"] * .btn-close {
    color: #0c3c78 !important; /* Синий цвет X */
    -webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
    -webkit-background-clip: unset !important; /* Убираем градиентный фон */
    background-clip: unset !important; /* Убираем градиентный фон */
    background: #ffffff !important; /* Белый круглый фон */
    border-radius: 50% !important; /* Круглый фон */
    filter: none !important; /* Убираем любые фильтры */
  }
  /* Внутренние отступы 5px для форм и элементов */
  .modal-body .form-group {
    margin-bottom: 0 !important;
    padding: 5px !important;
  }
  .modal-body .alert {
    margin-top: 0 !important;
    margin-bottom: 0 !important;
    padding: 5px !important;
  }
  .modal-body .text-center {
    padding: 5px !important;
  }
  .modal-body table {
    margin-bottom: 0 !important;
  }
  .modal-body table thead th {
    padding: 5px !important;
  }
  .modal-body table tbody td {
    padding: 5px !important;
  }
  .modal-body p,
  .modal-body div,
  .modal-body form > * {
    padding: 5px !important;
    margin: 0 !important;
  }
  .modal-body .mb-3 {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 5px !important;
  }
  .modal-body p {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding: 5px !important;
  }
  .modal-body ul, .modal-body ol {
    margin-bottom: 0 !important;
    margin-top: 0 !important;
    padding-left: 1.5rem;
    padding-top: 5px !important;
    padding-bottom: 5px !important;
  }
  .modal-footer button {
    margin: 0 !important;
    padding: 5px 10px !important;
  }
  
  /* === APPLICATION MODAL - DESKTOP === */
  .application-modal-content {
    min-width: 500px;
    max-width: 600px;
    padding: 24px;
  }
  
  .application-modal-header h3 {
    font-size: 1.5rem;
  }
  
  .application-modal-actions {
    gap: 8px;
  }
  
  /* === EXECUTIVE PAGINATION - DESKTOP === */
  .executive-pagination {
    padding: 20px;
  }
  
  .executive-pagination-info {
    font-size: 1rem;
  }
}

/* === cards.css: luxury-stats-grid 4 колонки на десктопе === */
@media (min-width: 1025px) {
  .luxury-stats-grid {
    grid-template-columns: repeat(4, 1fr);
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    gap: 24px;
  }

  .luxury-stats-grid .luxury-stat-card {
    width: 100%;
    max-width: 100%;
    min-width: 0;
  }
}