/* --- 1. VARIABLES.CSS --- */
/* ===== VARIABLE.CSS ===== */ /* ===== CSS ПЕРЕМЕННЫЕ ===== */ :root{ /* Цветовая палитра Аккред */ --primary-color: #4B0082;--secondary-color: #6A0DAD;--accent-color: #9D4EDD;--accent-light: #E0AAFF;--success-color: #27ae60;--warning-color: #f39c12;--danger-color: #e74c3c;--info-color: #17a2b8;/* Текст */ --text-color: #2c3e50;--text-light: #7f8c8d;--text-white: #ffffff;--text-muted: #999999;/* Фоны */ --bg-color: #f8f9fa;--card-bg: #ffffff;--header-bg: rgba(255, 255, 255, 0.95);--footer-bg: rgba(255, 255, 255, 0.1);--hover-bg: #f8f9fa;/* Градиенты */ --gradient-primary: linear-gradient(135deg, #6A0DAD 0%, #9D4EDD 100%);--gradient-secondary: linear-gradient(135deg, var(--secondary-color), var(--primary-color));--gradient-accent: linear-gradient(90deg, var(--accent-color), var(--accent-light));--gradient-purple: linear-gradient(135deg, #4B0082, #6A0DAD, #9D4EDD);/* Тени */ --shadow: 0 4px 6px rgba(106, 13, 173, 0.1);--shadow-hover: 0 8px 15px rgba(106, 13, 173, 0.15);--shadow-large: 0 10px 25px rgba(106, 13, 173, 0.2);/* Скругления */ --border-radius: 12px;--border-radius-sm: 8px;--border-radius-lg: 16px;--border-radius-pill: 25px;/* Границы */ --border-color: #e9ecef;--border-color-light: #f1f3f4;--border-color-dark: #495057;/* Анимации */ --transition: all 0.3s ease;--transition-fast: all 0.15s ease;--transition-slow: all 0.5s ease;/* Уведомления */ --notification-success-bg: rgba(39, 174, 96, 0.9);--notification-error-bg: rgba(231, 76, 60, 0.9);--notification-warning-bg: rgba(243, 156, 18, 0.9);--notification-info-bg: rgba(52, 152, 219, 0.9);/* Анимации уведомлений */ --animation-duration: 0.3s;--animation-timing: ease-out;} /* ===== ТЕМНАЯ ТЕМА (СИСТЕМНАЯ) ===== */ @media (prefers-color-scheme: dark){ :root{ --primary-color: #9D4EDD;--secondary-color: #6A0DAD;--accent-color: #4B0082;--accent-light: #3A0066;--text-color: #ffffff;--text-light: #cccccc;--text-muted: #999999;--bg-color: #0f0f1a;--card-bg: #1a1a2e;--header-bg: rgba(26, 26, 46, 0.95);--footer-bg: rgba(26, 26, 46, 0.1);--hover-bg: #2a2a3e;--gradient-primary: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);--shadow: 0 4px 6px rgba(0, 0, 0, 0.5);--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.7);--border-color: #495057;--border-color-light: #343a40;--border-color-dark: #212529;/* Уведомления для темной темы */ --notification-success-bg: rgba(46, 204, 113, 0.9);--notification-error-bg: rgba(231, 76, 60, 0.9);--notification-warning-bg: rgba(241, 196, 15, 0.9);--notification-info-bg: rgba(52, 152, 219, 0.9);} } /* ===== СВЕТЛАЯ ТЕМА (ПРИНУДИТЕЛЬНАЯ) ===== */ body.theme-light{ --primary-color: #4B0082;--secondary-color: #6A0DAD;--accent-color: #9D4EDD;--accent-light: #E0AAFF;--text-color: #2c3e50;--text-light: #7f8c8d;--text-white: #ffffff;--text-muted: #999999;--bg-color: #f8f9fa;--card-bg: #ffffff;--header-bg: rgba(255, 255, 255, 0.95);--footer-bg: rgba(255, 255, 255, 0.1);--hover-bg: #f8f9fa;--gradient-primary: linear-gradient(135deg, #6A0DAD 0%, #9D4EDD 100%);--shadow: 0 4px 6px rgba(106, 13, 173, 0.1);--shadow-hover: 0 8px 15px rgba(106, 13, 173, 0.15);--border-color: #e9ecef;--border-color-light: #f1f3f4;--border-color-dark: #495057;/* Уведомления для светлой темы */ --notification-success-bg: rgba(39, 174, 96, 0.9);--notification-error-bg: rgba(231, 76, 60, 0.9);--notification-warning-bg: rgba(243, 156, 18, 0.9);--notification-info-bg: rgba(52, 152, 219, 0.9);} /* ===== ТЕМНАЯ ТЕМА (ПРИНУДИТЕЛЬНАЯ) ===== */ body.theme-dark{ --primary-color: #9D4EDD;--secondary-color: #6A0DAD;--accent-color: #4B0082;--accent-light: #3A0066;--text-color: #ffffff;--text-light: #cccccc;--text-muted: #999999;--bg-color: #0f0f1a;--card-bg: #1a1a2e;--header-bg: rgba(26, 26, 46, 0.95);--footer-bg: rgba(26, 26, 46, 0.1);--hover-bg: #2a2a3e;--gradient-primary: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%);--shadow: 0 4px 6px rgba(0, 0, 0, 0.5);--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.7);--border-color: #495057;--border-color-light: #343a40;--border-color-dark: #212529;/* Уведомления для темной темы */ --notification-success-bg: rgba(46, 204, 113, 0.9);--notification-error-bg: rgba(231, 76, 60, 0.9);--notification-warning-bg: rgba(241, 196, 15, 0.9);--notification-info-bg: rgba(52, 152, 219, 0.9);}

/* --- 2. RESET.CSS --- */
/* ===== RESET.CSS ===== */ /* ===== СБРОС СТИЛЕЙ ===== */ *, *::before, *::after{ margin: 0;padding: 0;box-sizing: border-box;} html{ font-size: 16px;scroll-behavior: smooth;-webkit-text-size-adjust: 100%;-webkit-tap-highlight-color: transparent;} body{ font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;background: var(--gradient-primary);min-height: 100vh;color: var(--text-color);line-height: 1.6;-webkit-font-smoothing: antialiased;-moz-osx-font-smoothing: grayscale;text-rendering: optimizeLegibility;} img, picture, video, canvas, svg{ display: block;max-width: 100%;height: auto;} input, button, textarea, select{ font: inherit;color: inherit;} button{ cursor: pointer;background: none;border: none;} a{ color: inherit;text-decoration: none;} ul, ol{ list-style: none;} table{ border-collapse: collapse;border-spacing: 0;}

/* --- 3. TYPOGRAPHY.CSS --- */
/* ===== TYPOGRAPHY.CSS ===== */ /* ===== ТИПОГРАФИЯ ===== */ h1, h2, h3, h4, h5, h6{ font-weight: 600;line-height: 1.3;margin-bottom: 1rem;color: var(--text-color);} h1{ font-size: 2.5rem;} h2{ font-size: 2rem;} h3{ font-size: 1.75rem;} h4{ font-size: 1.5rem;} h5{ font-size: 1.25rem;} h6{ font-size: 1rem;} p{ margin-bottom: 1rem;color: var(--text-color);} a{ color: var(--secondary-color);text-decoration: none;transition: var(--transition);} a:hover{ color: var(--primary-color);} /* Гарантируем контрастность текста */ span, div{ color: var(--text-color);} /* Фикс для информационных панелей */ .info-panel, .stats-summary, .filters-panel{ color: var(--text-color);}

/* --- 4. LAYOUT.CSS --- */
/* ===== LAYOUT.CSS ===== */ /* ===== ОСНОВНОЙ МАКЕТ ===== */ .container{ min-height: 100vh;display: flex;flex-direction: column;width: 100%;max-width: 100%;margin: 0 auto;padding: 0;} .content-wrapper{ flex: 1;display: flex;flex-direction: column;max-width: 100%;margin: 0 auto;padding: 0 20px;width: 100%;} /* ===== ОБЛАСТЬ СОДЕРЖАНИЯ ===== */ .main-content{ flex: 1;background: var(--card-bg);border-radius: var(--border-radius);box-shadow: var(--shadow);/*padding: 2rem;*/ /*margin-bottom: 2rem;*/ } .page-header{ text-align: center;margin-bottom: 2rem;} .page-header h1{ font-size: 2.5rem;margin-bottom: 0.5rem;font-weight: 700;color: var(--text-color);} .page-header p{ color: var(--text-light);font-size: 1.2rem;opacity: 0.9;} /* ===== ШАПКА ===== */ .header{ background: var(--header-bg);backdrop-filter: blur(10px);border-radius: 0 0 var(--border-radius) var(--border-radius);box-shadow: var(--shadow);margin-bottom: 2rem;} .header-content{ display: flex;justify-content: space-between;align-items: center;padding: 1.5rem 0.5rem;} /* Контейнер логотипа */ .logo-container{ display: flex;align-items: center;gap: 1rem;cursor: pointer;transition: var(--transition);padding: 0.5rem;border-radius: var(--border-radius);text-decoration: none;} .logo-container:hover{ background: rgba(106, 13, 173, 0.1);transform: translateY(-2px);} .logo-icon{ width: 48px;height: 48px;border-radius: 12px;box-shadow: var(--shadow);transition: var(--transition);flex-shrink: 0;} .logo-container:hover .logo-icon{ transform: scale(1.05) rotate(5deg);box-shadow: var(--shadow-hover);} .logo{ font-size: 2.2rem;font-weight: 800;background: var(--gradient-purple);-webkit-background-clip: text;-webkit-text-fill-color: transparent;background-clip: text;transition: var(--transition);margin: 0;line-height: 1.2;letter-spacing: -0.5px;} .logo-container:hover .logo{ background: linear-gradient(135deg, #E0AAFF, #9D4EDD, #6A0DAD);-webkit-background-clip: text;-webkit-text-fill-color: transparent;} /* Информация пользователя */ .user-info{ display: flex;align-items: center;gap: 1.5rem;flex-wrap: wrap;} .user-name{ font-weight: 600;color: var(--text-color);background: rgba(255, 255, 255, 0.8);padding: 0.5rem 1rem;border-radius: 25px;backdrop-filter: blur(10px);} .logout-form{ margin: 0;} /* ===== ПОДВАЛ ===== */ .footer{ text-align: center;padding: 2rem 0;color: rgba(255, 255, 255, 0.8);margin-top: 2rem;border-top: 1px solid rgba(255, 255, 255, 0.2);} .debug-info{ display: inline-block;margin-top: 0.5rem;padding: 0.25rem 0.75rem;background: var(--accent-color);color: var(--text-white);border-radius: 15px;font-size: 0.8rem;font-weight: 600;}

/* --- 5. COMPONENTS.CSS --- */
/* ===== COMPONENTS.CSS ===== */ /* ===== КНОПКИ ===== */ .btn{ display: inline-flex;align-items: center;justify-content: center;gap: 0.5rem;padding: 0.75rem 1.5rem;border: none;border-radius: var(--border-radius-pill);font-weight: 600;cursor: pointer;transition: var(--transition);text-decoration: none;white-space: nowrap;font-size: 1rem;min-height: 50px;color: var(--text-white);} .btn-primary{ background: var(--success-color);} .btn-primary:hover:not(:disabled){ background: #219a52;transform: translateY(-2px);box-shadow: var(--shadow-hover);} .btn-secondary{ background: var(--secondary-color);} .btn-secondary:hover:not(:disabled){ background: #2980b9;transform: translateY(-2px);box-shadow: var(--shadow-hover);} .btn-accent{ background: var(--accent-color);} .btn-accent:hover:not(:disabled){ background: #c0392b;transform: translateY(-2px);box-shadow: var(--shadow-hover);} .btn-outline{ background: transparent;color: var(--text-color);border: 2px solid var(--secondary-color);} .btn-outline:hover:not(:disabled){ background: var(--secondary-color);color: var(--text-white);transform: translateY(-2px);} .btn:disabled{ background: var(--text-light);cursor: not-allowed;transform: none;opacity: 0.6;} /* ===== ФОРМЫ ===== */ .form-group{ display: flex;flex-direction: column;gap: 0.5rem;margin-bottom: 1rem;} .form-group label{ font-weight: 600;color: var(--text-color);} .form-control{ padding: 0.75rem 1rem;border: 2px solid #e9ecef;border-radius: var(--border-radius);font-size: 1rem;transition: var(--transition);background: var(--card-bg);color: var(--text-color);} .form-control:focus{ outline: none;border-color: var(--secondary-color);box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);} .form-control::placeholder{ color: var(--text-light);} /* Поля даты с календарем */ .form-control[type="date"]{ position: relative;padding-right: 2.5rem;} .form-control[type="date"]::-webkit-calendar-picker-indicator{ background: transparent;bottom: 0;color: transparent;cursor: pointer;height: auto;left: 0;position: absolute;right: 0;top: 0;width: auto;} .form-control[type="date"]::after{ content: '📅';position: absolute;right: 0.75rem;top: 50%;transform: translateY(-50%);pointer-events: none;} /* Селекты */ .form-select{ padding: 0.75rem 2.5rem 0.75rem 1rem;border: 2px solid #e9ecef;border-radius: var(--border-radius);font-size: 1rem;transition: var(--transition);background: var(--card-bg) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%232c3e50' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 0.75rem center;background-size: 16px;color: var(--text-color);appearance: none;cursor: pointer;} .form-select:focus{ outline: none;border-color: var(--secondary-color);box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.1);} /* ===== КАРТОЧКИ ===== */ .card{ background: var(--card-bg);border-radius: var(--border-radius);padding: 2rem;box-shadow: var(--shadow);transition: var(--transition);position: relative;overflow: hidden;} .card::before{ content: '';position: absolute;top: 0;left: 0;right: 0;height: 4px;background: var(--gradient-secondary);} .card:hover{ transform: translateY(-5px);box-shadow: var(--shadow-hover);} .card-header{ margin-bottom: 1.5rem;} .card-body{ margin-bottom: 1.5rem;} .card-footer{ text-align: center;} /* ===== ТАБЛИЦЫ ===== */ .table-container{ overflow-x: auto;margin-bottom: 1.5rem;border-radius: var(--border-radius);box-shadow: var(--shadow);} .table{ width: 100%;border-collapse: collapse;background: var(--card-bg);border-radius: var(--border-radius);overflow: hidden;} .table th, .table td{ padding: 1rem;text-align: left;border-bottom: 1px solid #e9ecef;} .table th{ background: var(--primary-color);color: var(--text-white);font-weight: 600;position: sticky;top: 0;} .table tr:last-child td{ border-bottom: none;} .table tr:hover{ background: var(--hover-bg);} .table .total-row{ background: rgba(39, 174, 96, 0.1);font-weight: 700;} .table .total-row td:first-child{ color: var(--success-color);} /* ===== БЕЙДЖИ ===== */ .badge{ display: inline-block;padding: 0.25rem 0.75rem;border-radius: 20px;font-size: 0.8rem;font-weight: 600;} .badge-primary{ background: var(--primary-color);color: var(--text-white);} .badge-secondary{ background: var(--secondary-color);color: var(--text-white);} .badge-success{ background: var(--success-color);color: var(--text-white);} .badge-warning{ background: var(--warning-color);color: var(--text-white);} .badge-danger{ background: var(--danger-color);color: var(--text-white);} .badge-info{ background: var(--info-color);color: var(--text-white);} /* ===== СООБЩЕНИЯ И УВЕДОМЛЕНИЯ ===== */ /* ===== СООБЩЕНИЯ И УВЕДОМЛЕНИЯ ===== */ /* Старые alert (для обратной совместимости) */ .alert{ padding: 1rem 1.5rem;border-radius: var(--border-radius);margin-bottom: 1rem;display: flex;align-items: center;gap: 1rem;position: relative;overflow: hidden;} .alert-success{ background: var(--notification-success-bg);color: white !important;border-left: 4px solid var(--success-color);} .alert-warning{ background: var(--notification-warning-bg);color: white !important;border-left: 4px solid var(--warning-color);} .alert-danger{ background: var(--notification-error-bg);color: white !important;border-left: 4px solid var(--danger-color);} .alert-info{ background: var(--notification-info-bg);color: white !important;border-left: 4px solid var(--info-color);} /* Иконки для старых alert */ .alert::before{ content: '';font-size: 1.2rem;flex-shrink: 0;} .alert-success::before{ content: '✅';} .alert-warning::before{ content: '⚠️';} .alert-danger::before{ content: '❌';} .alert-info::before{ content: 'ℹ️';} /* ===== ИНДИКАТОР ЗАГРУЗКИ ===== */ .loading{ text-align: center;padding: 3rem;color: var(--text-light);} .spinner{ border: 4px solid #f3f3f3;border-top: 4px solid var(--secondary-color);border-radius: 50%;width: 50px;height: 50px;animation: spin 1s linear infinite;margin: 0 auto 1rem;} @keyframes spin{ 0%{ transform: rotate(0deg);} 100%{ transform: rotate(360deg);} } /* ===== УВЕДОМЛЕНИЯ (NOTIFICATIONS) ===== */ #notifications-container{ position: fixed;top: 20px;right: 20px;z-index: 9999;display: flex;flex-direction: column;gap: 10px;max-width: min(400px, 90vw);} .notification{ padding: 1rem 1.5rem;border-radius: var(--border-radius);background: var(--card-bg);color: var(--text-color);backdrop-filter: blur(10px);box-shadow: var(--shadow-large);animation: notificationSlideIn var(--animation-duration) var(--animation-timing);cursor: pointer;transition: var(--transition);border-left: 4px solid currentColor;user-select: none;transform-origin: right center;will-change: transform, opacity;} .notification:hover{ transform: translateY(-2px) scale(1.02);box-shadow: var(--shadow-hover);} .notification-content{ display: flex;align-items: center;gap: 0.75rem;justify-content: space-between;} .notification-icon{ font-size: 1.2rem;flex-shrink: 0;} .notification-message{ flex: 1;font-size: 0.95rem;line-height: 1.4;} .notification-close-btn{ background: none;border: none;color: inherit;cursor: pointer;font-size: 1.5rem;opacity: 0.7;padding: 0 0.25rem;flex-shrink: 0;transition: var(--transition-fast);line-height: 1;} .notification-close-btn:hover{ opacity: 1;transform: scale(1.2);} /* Типы уведомлений */ .notification-success{ background: var(--notification-success-bg);color: white;border-left-color: var(--success-color);} .notification-error{ background: var(--notification-error-bg);color: white;border-left-color: var(--danger-color);} .notification-warning{ background: var(--notification-warning-bg);color: white;border-left-color: var(--warning-color);} .notification-info{ background: var(--notification-info-bg);color: white;border-left-color: var(--info-color);} /* Анимации уведомлений */ @keyframes notificationSlideIn{ from{ transform: translateX(100%) scale(0.9);opacity: 0;} to{ transform: translateX(0) scale(1);opacity: 1;} } @keyframes notificationSlideOut{ from{ transform: translateX(0) scale(1);opacity: 1;} to{ transform: translateX(100%) scale(0.9);opacity: 0;} } .notification-slide-out{ animation: notificationSlideOut var(--animation-duration) var(--animation-timing) forwards;} /* Прогресс-бар для уведомлений с таймером */ .notification-progress{ position: absolute;bottom: 0;left: 0;width: 100%;height: 3px;background: rgba(255, 255, 255, 0.2);overflow: hidden;border-radius: 0 0 var(--border-radius) var(--border-radius);} .notification-progress-bar{ height: 100%;background: rgba(255, 255, 255, 0.5);width: 100%;transform-origin: left center;animation: notificationProgress linear forwards;transition: width 0.1s linear;} .notification-progress-bar.alternative{ animation: none;width: 100%;} @keyframes notificationProgress{ from{ transform: scaleX(1);} to{ transform: scaleX(0);} }

/* --- 6. THEME-SWITCHER.CSS --- */
/* ===== THEME-SWITCHER.CSS ===== */ /* ===== ПЕРЕКЛЮЧАТЕЛЬ ТЕМЫ ===== */ .theme-toggle-btn{ background: transparent;border: none;cursor: pointer;padding: 0;margin: 0;display: flex;align-items: center;transition: var(--transition);} .theme-toggle-container{ display: flex;align-items: center;gap: 0.75rem;padding: 0.5rem 0.75rem;border-radius: 25px;background: rgba(255, 255, 255, 0.1);border: 1px solid rgba(255, 255, 255, 0.2);backdrop-filter: blur(10px);transition: var(--transition);} .theme-toggle-btn:hover .theme-toggle-container{ background: rgba(255, 255, 255, 0.2);border-color: var(--secondary-color);transform: translateY(-1px);} /* Трек переключателя */ .theme-toggle-track{ position: relative;width: 52px;height: 26px;border-radius: 13px;background: linear-gradient(90deg, #ffd700 0%, #ffd700 33%, #94a3b8 33%, #94a3b8 66%, #4a5568 66%, #4a5568 100%);border: 2px solid rgba(0, 0, 0, 0.2);cursor: pointer;transition: var(--transition);overflow: hidden;} .theme-toggle-btn:hover .theme-toggle-track{ transform: scale(1.05);} /* Ползунок */ .theme-toggle-thumb{ position: absolute;top: 2px;left: 2px;width: 22px;height: 22px;border-radius: 50%;background: white;box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);display: flex;align-items: center;justify-content: center;transition: var(--transition);} /* Текст */ .theme-toggle-label{ font-size: 0.9rem;font-weight: 600;color: var(--text-color);white-space: nowrap;} /* Иконки */ .theme-icon-light, .theme-icon-dark{ width: 14px;height: 14px;} /* Системная тема (по умолчанию) */ .theme-toggle-thumb{ left: 2px;background: linear-gradient(135deg, #fbbf24, #f59e0b);} .theme-icon-light{ display: block;color: #92400e;} .theme-icon-dark{ display: none;} /* Светлая тема */ body.theme-light .theme-toggle-track{ background: linear-gradient(90deg, #fbbf24 0%, #fbbf24 50%, #e2e8f0 50%, #e2e8f0 100%);} body.theme-light .theme-toggle-thumb{ left: 2px;background: linear-gradient(135deg, #fbbf24, #f59e0b);} body.theme-light .theme-icon-light{ display: block;color: #92400e;} body.theme-light .theme-icon-dark{ display: none;} /* Темная тема */ body.theme-dark .theme-toggle-track{ background: linear-gradient(90deg, #e2e8f0 0%, #e2e8f0 50%, #4a5568 50%, #4a5568 100%);} body.theme-dark .theme-toggle-thumb{ left: calc(100% - 24px);background: linear-gradient(135deg, #4a5568, #2d3748);} body.theme-dark .theme-icon-light{ display: none;} body.theme-dark .theme-icon-dark{ display: block;color: #cbd5e0;}

/* --- 7. UTILITIES.CSS --- */
/* ===== UTILITIES.CSS ===== */ /* ===== УТИЛИТАРНЫЕ КЛАССЫ ===== */ /* Выравнивание текста */ .text-center{ text-align: center;} .text-right{ text-align: right;} .text-left{ text-align: left;} /* Отступы */ .mt-1{ margin-top: 0.5rem;} .mt-2{ margin-top: 1rem;} .mt-3{ margin-top: 1.5rem;} .mt-4{ margin-top: 2rem;} .mb-1{ margin-bottom: 0.5rem;} .mb-2{ margin-bottom: 1rem;} .mb-3{ margin-bottom: 1.5rem;} .mb-4{ margin-bottom: 2rem;} .pt-1{ padding-top: 0.5rem;} .pt-2{ padding-top: 1rem;} .pt-3{ padding-top: 1.5rem;} .pt-4{ padding-top: 2rem;} .pb-1{ padding-bottom: 0.5rem;} .pb-2{ padding-bottom: 1rem;} .pb-3{ padding-bottom: 1.5rem;} .pb-4{ padding-bottom: 2rem;} /* Display */ .d-flex{ display: flex;} .d-grid{ display: grid;} .d-block{ display: block;} .d-inline{ display: inline;} .d-inline-block{ display: inline-block;} .d-none{ display: none;} /* Flexbox */ .flex-column{ flex-direction: column;} .flex-row{ flex-direction: row;} .flex-wrap{ flex-wrap: wrap;} .flex-nowrap{ flex-wrap: nowrap;} .justify-start{ justify-content: flex-start;} .justify-end{ justify-content: flex-end;} .justify-center{ justify-content: center;} .justify-between{ justify-content: space-between;} .justify-around{ justify-content: space-around;} .align-start{ align-items: flex-start;} .align-end{ align-items: flex-end;} .align-center{ align-items: center;} .align-baseline{ align-items: baseline;} .align-stretch{ align-items: stretch;} /* Grid */ .gap-1{ gap: 0.5rem;} .gap-2{ gap: 1rem;} .gap-3{ gap: 1.5rem;} .gap-4{ gap: 2rem;} /* Ширина */ .w-100{ width: 100%;} .w-auto{ width: auto;} .w-50{ width: 50%;} .w-75{ width: 75%;} .w-25{ width: 25%;} /* Видимость */ .visible{ visibility: visible;} .invisible{ visibility: hidden;} /* Анимации */ .fade-in-up{ animation: fadeInUp 0.6s ease-out;} @keyframes fadeInUp{ from{ opacity: 0;transform: translateY(30px);} to{ opacity: 1;transform: translateY(0);} } /* Для печати */ @media print{ .no-print{ display: none !important;} body{ background: white !important;color: black !important;} .header, .footer, .btn{ display: none !important;} .main-content{ box-shadow: none !important;padding: 0 !important;} .table{ border: 1px solid #000;} .table th{ background: #ddd !important;color: black !important;} }

/* --- 8. RESPONSIVE.CSS --- */
/* ===== RESPONSIVE.CSS ===== */ /* ===== АДАПТИВНЫЕ СТИЛИ ===== */ /* Десктопные устройства (большие экраны) */ @media (min-width: 1200px){ .content-wrapper{ max-width: 1600px;padding: 0 40px;} } @media (min-width: 1400px){ .content-wrapper{ max-width: 1800px;padding: 0 50px;} } @media (min-width: 1920px){ .content-wrapper{ max-width: 2000px;padding: 0 60px;} } /* Планшеты и маленькие десктопы */ @media (max-width: 1199px){ .container{ padding: 0 30px;} } @media (max-width: 991px){ .container{ padding: 0 25px;} .main-content{ padding: 1.5rem;} .logo{ font-size: 2rem;} .page-header h1{ font-size: 2.2rem;} } /* Планшеты (портретная ориентация) и телефоны */ @media (max-width: 768px){ html{ font-size: 15px;} .container{ padding: 0 15px;} /* Шапка */ .header-content{ flex-direction: column;gap: 1rem;text-align: center;} .logo-container{ justify-content: center;flex-direction: column;gap: 0.5rem;} .logo-icon{ width: 40px;height: 40px;} .logo{ font-size: 1.8rem;} /* Пользовательская информация */ .user-info{ flex-direction: column;gap: 1rem;width: 100%;} .user-info .btn, .logout-form .btn{ width: 100%;justify-content: center;} .logout-form{ width: 100%;} /* Основной контент */ .main-content{ padding: 1rem;} .page-header h1{ font-size: 2rem;} .page-header p{ font-size: 1.1rem;} /* Таблицы */ .table th, .table td{ padding: 0.75rem 0.5rem;} /* Переключатель темы */ .theme-toggle-container{ padding: 0.4rem 0.6rem;gap: 0.5rem;} .theme-toggle-track{ width: 46px;height: 24px;} .theme-toggle-thumb{ width: 20px;height: 20px;} .theme-toggle-label{ font-size: 0.85rem;} } /* Маленькие телефоны */ @media (max-width: 480px){ html{ font-size: 14px;} .container{ padding: 0 10px;} .logo{ font-size: 1.5rem;} .page-header h1{ font-size: 1.75rem;} .page-header p{ font-size: 1rem;} .btn{ padding: 0.6rem 1.2rem;min-height: 45px;font-size: 0.9rem;} .theme-toggle-label{ display: none;} .theme-toggle-container{ padding: 0.5rem;} } /* Очень маленькие телефоны */ @media (max-width: 360px){ .logo{ font-size: 1.3rem;} .page-header h1{ font-size: 1.5rem;} .btn{ padding: 0.5rem 1rem;font-size: 0.85rem;} } /* ===== АДАПТИВНЫЕ СТИЛИ ДЛЯ УВЕДОМЛЕНИЙ ===== */ @media (max-width: 768px){ #notifications-container{ top: 10px;right: 10px;left: 10px;max-width: none;align-items: center;} .notification{ width: 100%;max-width: 400px;padding: 0.875rem 1.25rem;} .notification-message{ font-size: 0.9rem;} } @media (max-width: 480px){ #notifications-container{ top: 5px;right: 5px;left: 5px;} .notification{ padding: 0.75rem 1rem;} .notification-icon{ font-size: 1.1rem;} .notification-message{ font-size: 0.85rem;} .notification-close-btn{ font-size: 1.3rem;} } /* Для печати скрываем уведомления */ @media print{ #notifications-container{ display: none !important;} }

/* --- 9. SYSTEM_THEME_REDEFINITION.CSS --- */
/* ===== SYSTEM_THEME_REDEFINITION.CSS ===== */ /* ===== ГАРАНТИРОВАННОЕ ПЕРЕОПРЕДЕЛЕНИЕ СИСТЕМНЫХ НАСТРОЕК ===== */ /* Для светлой темы всегда используем светлые переменные */ body.theme-light{ --primary-color: #4B0082 !important;--secondary-color: #6A0DAD !important;--accent-color: #9D4EDD !important;--accent-light: #E0AAFF !important;--text-color: #2c3e50 !important;--text-light: #7f8c8d !important;--text-white: #ffffff !important;--text-muted: #999999 !important;--bg-color: #f8f9fa !important;--card-bg: #ffffff !important;--header-bg: rgba(255, 255, 255, 0.95) !important;--footer-bg: rgba(255, 255, 255, 0.1) !important;--hover-bg: #f8f9fa !important;--gradient-primary: linear-gradient(135deg, #6A0DAD 0%, #9D4EDD 100%) !important;--shadow: 0 4px 6px rgba(106, 13, 173, 0.1) !important;--shadow-hover: 0 8px 15px rgba(106, 13, 173, 0.15) !important;} /* Для темной темы всегда используем темные переменные */ body.theme-dark{ --primary-color: #9D4EDD !important;--secondary-color: #6A0DAD !important;--accent-color: #4B0082 !important;--accent-light: #3A0066 !important;--text-color: #ffffff !important;--text-light: #cccccc !important;--text-muted: #999999 !important;--bg-color: #0f0f1a !important;--card-bg: #1a1a2e !important;--header-bg: rgba(26, 26, 46, 0.95) !important;--footer-bg: rgba(26, 26, 46, 0.1) !important;--hover-bg: #2a2a3e !important;--gradient-primary: linear-gradient(135deg, #0f0f1a 0%, #1a1a2e 100%) !important;--shadow: 0 4px 6px rgba(0, 0, 0, 0.5) !important;--shadow-hover: 0 8px 15px rgba(0, 0, 0, 0.7) !important;}

/* --- 10. HEADER.CSS --- */
/* ===== HEADER.CSS ===== */ /* ===== ШАПКА С ПАНЕЛЬЮ ===== */ .accred-header{ display: flex;align-items: center;justify-content: space-between;padding: 0 2rem;height: 70px;background: var(--card-bg);border-bottom: 1px solid var(--border-color);box-shadow: var(--shadow);position: sticky;top: 0;z-index: 100;flex-shrink: 0;} .header-left, .header-right{ flex: 0 0 auto;display: flex;align-items: center;gap: 1rem;} .header-center{ flex: 1;text-align: center;min-width: 0;} .accred-header h1{ font-size: 1.5rem;margin: 0;font-weight: 700;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} .accred-header .subtitle{ margin: 0.25rem 0 0;color: var(--text-light);font-size: 0.9rem;white-space: nowrap;overflow: hidden;text-overflow: ellipsis;} /*Кнопка возвращения домой*/ .back-home-btn{ display: inline-flex;align-items: center;gap: 0.5rem;padding: 0.75rem 1.25rem;background: var(--secondary-color);color: white;border: none;border-radius: var(--border-radius-pill);font-weight: 600;cursor: pointer;transition: var(--transition);text-decoration: none;} .back-home-btn:hover{ background: #2980b9;transform: translateY(-2px);box-shadow: var(--shadow-hover);} .back-home-btn:disabled{ background: var(--text-light);cursor: not-allowed;transform: none;opacity: 0.6;} .back-home-btn svg{ flex-shrink: 0;} /* Статус принтера */ .printer-status{ display: flex;align-items: center;gap: 0.5rem;padding: 0.5rem 1rem;background: var(--bg-color);border-radius: var(--border-radius);border: 1px solid var(--border-color);} .status-dot{ width: 8px;height: 8px;border-radius: 50%;background: var(--warning-color);transition: var(--transition);} .printer-status.connected .status-dot{ background: var(--success-color);} .status-text{ font-size: 0.85rem;font-weight: 500;} /* Контейнер для контента с шапкой */ .accred-container{ min-height: calc(100vh - 70px);display: flex;flex-direction: column;} .accred-content{ flex: 1;padding: 2rem;overflow-y: auto;} /* Адаптивность */ @media (max-width: 768px){ .accred-header{ padding: 0 1rem;height: auto;min-height: 70px;flex-wrap: wrap;gap: 0.5rem;} .header-left, .header-right{ order: 1;} .header-center{ order: 2;flex-basis: 100%;margin-top: 0.5rem;} .accred-content{ padding: 1rem;} }