/*
* StudyHub.AZ Component Styles
* Filename: components.css
* Author: Ostwind by Dr.FC
* Дополнительные компоненты
*/
/*
╔═══════════════════════════════════════════════════════════════════════════════╗
║ 🏗️ STUDYHUB.AZ CSS АРХИТЕКТУРА ║
║ 📂 ФАЙЛ: components.css ║
╚═══════════════════════════════════════════════════════════════════════════════╝
🎯 НАЗНАЧЕНИЕ ФАЙЛА:
├─ Компоненты интерфейса и контейнеры
├─ Сетки и layout системы
├─ Формы, модальные окна, утилиты
└─ Специализированные dashboard'ы
👥 ЦЕЛЕВЫЕ ГРУППЫ (15+ ЛЕТ ОПЫТА В IT):
🧑💻 Программисты: "Вауу! Matrix эффекты, hologram glitch, cyber pulse!"
→ .tech-dashboard-wow (matrix bg, cyber effects)
👔 Директора: "Красиво! Золото, мрамор, diamond sparkle!"
→ .executive-dashboard-luxury (premium marble, gold)
👩🏫 Учителя: "Удобно! Читаемость, focus highlight, comfort!"
→ .teacher-workspace-comfort (focus, productivity)
👨👩👧👦 Родители: "Серьезная компания! Security shields, certificates!"
→ .parent-dashboard-trust (security, verification)
🎓 Ученики: "Современный! Neon glow, gaming effects, trendy!"
→ .student-hub-modern (glass, gaming panels)
💎 РЕЗУЛЬТАТ: Стили готовы к использованию и полностью соответствуют
архитектуре StudyHub.AZ с 15+ летним опытом в IT!
📐 АРХИТЕКТУРНЫЕ ПРАВИЛА:
✅ Только контейнеры и сетки
✅ Формы и интерактивные элементы
✅ Модальные окна и панели
✅ Использование CSS Grid и Flexbox
❌ Запрещены: медиа-запросы, кнопки, карточки
✅ АРХИТЕКТУРА СОБЛЮДЕНА:
• Все media queries перенесены в mobile.css, tablet.css, desktop.css
• Компоненты содержат только базовые стили без адаптивности
• Логика работы сохранена полностью
🔗 СВЯЗИ:
├─ vars.css предоставляет spacing и colors
├─ animations.css предоставляет эффекты
├─ cards.css встраивается в контейнеры
└─ device-файлы адаптируют grid и spacing
*/
/* === SCHEDULE MODULE (из schedule.css) === */
.flatpickr-calendar {
z-index: 100001 !important;
}
.flatpickr-calendar.open {
z-index: 100001 !important;
}
.events-container {
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
z-index: 1;
}
/* === teams/company_director/schedule.php === */
.schedule-event {
--event-color: #3b82f6;
background: var(--event-color);
background: color-mix(in srgb, var(--event-color) 8%, transparent);
font-size: 0.75rem;
padding: 0.25rem 0.375rem;
margin-bottom: 0.1875rem;
border-radius: 6px;
border-left: 3px solid var(--event-color);
color: var(--event-color);
cursor: pointer;
transition: transform var(--schedule-transition), box-shadow var(--schedule-transition);
}
.schedule-event:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}
.schedule-event:focus-visible {
outline: 2px solid var(--luxury-gold);
outline-offset: 2px;
}
.schedule-event-time { font-weight: 600; font-size: 0.65rem; }
.schedule-event-title { font-size: 0.6rem; line-height: 1.2; }
.schedule-event-location { font-size: 0.55rem; opacity: 0.8; margin-top: 1px; }
.schedule-event-desc { font-size: 0.55rem; opacity: 0.8; margin-top: 2px; }
.schedule-view-modal-actions { display: flex; align-items: center; gap: 0.5rem; }
.btn-edit-icon {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
padding: 0.5rem 0.75rem;
border-radius: 8px;
cursor: pointer;
transition: background var(--schedule-transition);
}
.btn-edit-icon:hover { background: rgba(255, 255, 255, 0.35); }
.btn-edit-icon:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
.schedule-view-body {
padding: 1.25rem 1.5rem;
}
.schedule-view-field {
margin-bottom: 1rem;
}
.schedule-view-field--last { margin-bottom: 0; }
.schedule-view-value {
font-size: 0.95rem;
color: #6b7280;
}
.schedule-view-value--title {
font-size: 1.1rem;
font-weight: 600;
color: #374151;
}
.schedule-view-value--desc { white-space: pre-wrap; }
.schedule-view-color-block {
display: flex;
align-items: center;
gap: 0.5rem;
margin-top: 4px;
}
.view-color-dot {
width: 24px;
height: 24px;
border-radius: 6px;
}
/* Schedule modal (director) - no modal-dialog */
#schedule-admin-modal.modal,
#schedule-view-modal.modal {
display: none;
position: fixed;
z-index: 1000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.45);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity var(--schedule-transition);
}
#schedule-admin-modal.modal.active,
#schedule-view-modal.modal.active {
opacity: 1;
display: flex;
}
#schedule-admin-modal .modal-content,
#schedule-view-modal .modal-content {
background: white;
border-radius: var(--schedule-radius-lg);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2), 0 8px 24px rgba(0, 0, 0, 0.08);
width: 90%;
max-width: 600px;
max-height: 95vh;
overflow-y: auto;
animation: modalSlideIn 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
position: relative;
margin: 20px;
}
#schedule-admin-modal .modal-header,
#schedule-view-modal .modal-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: 1.25rem 1.5rem 1rem;
border-bottom: 1px solid #e5e7eb;
background: linear-gradient(135deg, #d97706, #b45309);
border-radius: var(--schedule-radius-lg) var(--schedule-radius-lg) 0 0;
color: white;
}
#schedule-admin-modal .modal-title,
#schedule-view-modal .modal-title { margin: 0; font-size: 1.25rem; font-weight: 700; }
#schedule-admin-modal .modal-title i,
#schedule-view-modal .modal-title i { margin-right: 0.5rem; }
#schedule-admin-modal .modal-close,
#schedule-view-modal .modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
padding: 0.375rem 0.5rem;
border-radius: 8px;
cursor: pointer;
transition: background var(--schedule-transition);
}
#schedule-admin-modal .modal-close:hover,
#schedule-view-modal .modal-close:hover { background: rgba(255, 255, 255, 0.35); }
#schedule-admin-modal .modal-close:focus-visible,
#schedule-view-modal .modal-close:focus-visible {
outline: 2px solid white;
outline-offset: 2px;
}
/* teams/operator/schedule.php - Event Modal */
.schedule-operator-modal {
display: flex;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
align-items: center;
justify-content: center;
}
.schedule-operator-modal-content {
position: relative;
background: white;
padding: 24px;
border-radius: var(--schedule-radius, 12px);
min-width: 420px;
max-width: 95vw;
max-height: 90vh;
overflow-y: auto;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.2);
}
.schedule-operator-modal-title {
margin: 0 0 1rem 0;
font-size: 1.25rem;
font-weight: 700;
}
.schedule-operator-modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
margin-top: 1rem;
}
#eventModal .form-group {
margin-bottom: 1rem;
}
#eventModal .form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #374151;
}
#eventModal .form-input {
width: 100%;
padding: 0.75rem 0.875rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
box-sizing: border-box;
}
#eventModal .form-textarea {
min-height: 80px;
resize: vertical;
}
.schedule-error-block {
color: #dc2626;
font-weight: 600;
padding: 16px;
background: rgba(239, 68, 68, 0.1);
border-radius: 8px;
}
.schedule-error-block small {
color: #6b7280;
margin-top: 8px;
display: block;
}
.schedule-info-block {
color: #f59e0b;
font-weight: 600;
padding: 16px;
background: rgba(245, 158, 11, 0.1);
border-radius: 8px;
}
/* Schedule modal form styles (teams/company_director/schedule.php) */
#schedule-admin-modal .form-group {
margin-bottom: 1.25rem;
padding: 0 1.5rem;
}
#schedule-admin-modal .form-group:first-of-type { padding-top: 1rem; }
#schedule-admin-modal .form-group:last-child { padding-bottom: 1.5rem; margin-bottom: 0; }
#schedule-admin-modal .form-label {
display: block;
margin-bottom: 0.5rem;
font-weight: 600;
color: #374151;
font-size: 0.95rem;
}
#schedule-admin-modal .form-input {
width: 100%;
padding: 0.75rem 0.875rem;
border: 2px solid #e5e7eb;
border-radius: 8px;
font-size: 15px;
transition: border-color var(--schedule-transition), box-shadow var(--schedule-transition);
box-sizing: border-box;
background: #ffffff;
}
#schedule-admin-modal .form-input:focus {
outline: none;
border-color: var(--luxury-gold);
box-shadow: 0 0 0 3px rgba(212, 175, 55, 0.15);
}
#schedule-admin-modal .form-input:focus-visible {
outline: 2px solid var(--luxury-gold);
outline-offset: 2px;
}
#schedule-admin-modal .form-input:hover { border-color: #d1d5db; }
#schedule-admin-modal .form-textarea { min-height: 80px; resize: vertical; }
#schedule-admin-modal .form-checkbox { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 14px; }
#schedule-admin-modal .color-picker-group { display: flex; gap: 0.5rem; flex-wrap: wrap; }
#schedule-admin-modal .color-square {
width: 40px;
height: 40px;
border-radius: 8px;
cursor: pointer;
border: 3px solid transparent;
transition: transform var(--schedule-transition), box-shadow var(--schedule-transition);
position: relative;
}
#schedule-admin-modal .color-square:hover {
transform: scale(1.1);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
#schedule-admin-modal .color-square:focus-visible {
outline: 2px solid var(--luxury-gold);
outline-offset: 2px;
}
#schedule-admin-modal .color-square.active::after {
content: '✓';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-weight: bold;
font-size: 16px;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
}
#schedule-admin-modal .field-error { color: #dc2626; font-size: 0.8rem; margin-top: 4px; }
#schedule-admin-modal .form-input.error { border-color: #dc2626; }
.conflict-note { color: #6b7280; font-style: italic; }
#schedule-admin-modal .schedule-select-bg { background-color: white !important; color: #333 !important; }
#schedule-admin-modal .schedule-submit-fullwidth { width: 100%; padding: 12px; font-size: 1rem; }
.schedule-loading { text-align: center; padding: 40px; }
.schedule-loading i { font-size: 2rem; color: #d97706; }
.schedule-loading p { margin-top: 16px; }
.schedule-view-error { color: #dc2626; padding: 24px; text-align: center; }
/* === FORM SECTION === */
.form-section {
position: relative;
margin-bottom: 40px;
}
.form-section .section-header {
position: relative;
margin-bottom: 30px;
padding: 0;
border: none;
background: transparent;
}
.form-section .section-header h3 {
position: relative;
display: inline-flex;
align-items: center;
gap: 14px;
font-size: 1.5rem;
font-weight: 700;
color: var(--color-text-main);
margin: 0;
padding: 16px 24px;
background: var(--color-bg-card);
border-radius: var(--radius);
border: 1px solid var(--color-border);
transition: var(--transition);
box-shadow: var(--shadow-sm);
}
.form-section .section-header:hover h3 {
transform: translateY(-2px);
box-shadow: var(--shadow-md);
border-color: var(--color-primary);
}
.form-section .section-header h3 i {
display: inline-flex;
align-items: center;
justify-content: center;
width: 44px;
height: 44px;
background: var(--color-primary);
color: white;
border-radius: var(--radius-sm);
font-size: 1.2rem;
box-shadow: var(--shadow-sm);
transition: var(--transition);
flex-shrink: 0;
z-index: 1;
}
.form-section .section-header:hover h3 i {
background: var(--color-accent);
transform: scale(1.05);
box-shadow: var(--shadow-md);
}
.form-section .section-header {
animation: sectionHeaderFadeIn 0.6s ease-out;
}
.form-section:nth-child(1) .section-header {
animation-delay: 0.1s;
}
.form-section:nth-child(2) .section-header {
animation-delay: 0.2s;
}
.form-section:nth-child(3) .section-header {
animation-delay: 0.3s;
}
/* === Status badges, toggle, control-buttons === */
.button-checkbox-group {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 15px;
}
.luxury-icon-with-status {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.luxury-icon-with-status .luxury-icon {
flex-shrink: 0;
}
.status-badges-row {
display: flex;
flex-wrap: wrap;
gap: 6px;
align-items: center;
}
.status-badge-active {
background: var(--color-status-active);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
display: inline-block;
}
.status-badge-inactive {
background: var(--color-status-inactive);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
display: inline-block;
}
.status-badge-linked {
background: var(--color-status-active);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
display: inline-block;
}
.status-badge-own {
background: var(--color-status-own);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
display: inline-block;
}
.status-badge-not-linked {
background: var(--color-status-not-linked);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
display: inline-block;
}
.status-badge-global {
background: var(--color-status-global);
color: white;
padding: 4px 8px;
border-radius: 12px;
font-size: 10px;
font-weight: 600;
display: inline-block;
}
.toggle-dept-wrapper {
position: relative;
display: inline-block;
}
.toggle-dept-btn {
position: relative;
background: #fff;
color: var(--color-dept-primary);
border: 2px solid var(--color-dept-primary);
padding: 12px 16px;
border-radius: 12px;
font-weight: 500;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
display: inline-flex;
align-items: center;
gap: 8px;
min-height: 44px;
user-select: none;
}
.toggle-dept-btn:hover {
background: #e6fff1;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.toggle-dept-btn.active {
background: var(--color-dept-primary);
color: #fff;
box-shadow: 0 4px 12px rgba(0, 102, 68, 0.3);
transform: translateY(-1px);
}
.toggle-dept-btn .dept-name {
flex: 1;
}
.toggle-dept-btn .check-icon {
background: #fff;
color: var(--color-dept-primary);
border: 2px solid var(--color-dept-primary);
border-radius: 50%;
font-size: 11px;
font-weight: bold;
width: 20px;
height: 20px;
display: none;
align-items: center;
justify-content: center;
margin-left: 6px;
flex-shrink: 0;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}
.toggle-dept-btn.active .check-icon {
display: flex !important;
animation: checkAppear 0.2s ease-out;
}
.control-buttons {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.control-buttons .btn-sm {
padding: 8px 16px;
font-size: 0.9rem;
border-radius: 8px;
font-weight: 500;
display: inline-flex;
align-items: center;
gap: 6px;
transition: all 0.2s ease;
}
#selectedCount {
font-size: 1rem;
padding: 8px 12px;
background: rgba(0, 102, 68, 0.1);
border-radius: 8px;
border-left: 4px solid var(--color-dept-primary);
}
#selectedCount:not(:empty) {
animation: sectionHeaderFadeIn 0.3s ease-in;
}
/* === BACKGROUND ANIMATIONS === */
.main-login::before,
.main-welcome::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 80%, rgba(11, 122, 62, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(12, 60, 120, 0.1) 0%, transparent 50%);
animation: backgroundShift 20s ease-in-out infinite;
pointer-events: none;
z-index: 0;
}
/* === STUDYHUB IMAGE === */
.studyhub-image {
max-width: 600px; /* Увеличиваем максимальную ширину */
max-height: 500px; /* Увеличиваем максимальную высоту */
width: auto; /* Автоматическая ширина */
height: auto; /* Автоматическая высота */
border-radius: 12px;
box-shadow: 0 12px 25px rgba(0, 0, 0, 0.1);
object-fit: contain; /* Сохранять пропорции */
}
/* === TOP IMAGE CONTAINER === */
.top-image {
display: flex !important;
align-items: center;
justify-content: center;
max-width: 600px; /* Увеличиваем размер контейнера */
margin: 0 auto; /* Центрируем контейнер */
opacity: 1 !important;
visibility: visible !important;
}
.studyhub-image {
display: block !important;
max-width: 100% !important;
height: auto !important;
opacity: 1 !important;
visibility: visible !important;
}
/* === ИСПРАВЛЕНИЯ ВИДИМОСТИ ЭЛЕМЕНТОВ === */
.feature-item,
.section-features h2,
.section-top .top-text,
.section-top .top-image,
.main-button {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.animate__animated {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
.animate__animated.animate__fadeInLeft,
.animate__animated.animate__fadeInRight,
.animate__animated.animate__fadeInUp,
.animate__animated.animate__fadeInDown,
.animate__animated.animate__zoomIn {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
}
/* === ДОПОЛНИТЕЛЬНЫЕ ИСПРАВЛЕНИЯ ДЛЯ ИЗОБРАЖЕНИЯ === */
.section-top .top-image .studyhub-image {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
display: block !important;
max-width: 100% !important;
height: auto !important;
width: auto !important;
object-fit: contain !important;
}
.section-top .top-image {
opacity: 1 !important;
visibility: visible !important;
transform: none !important;
display: flex !important;
}
.icon-colored {
color: var(--color-accent);
margin-bottom: 12px;
}
/* === RESOURCE MAP TREE === */
.resource-list {
list-style: none;
padding-left: 20px;
}
.resource-list li {
margin: 6px 0;
font-size: 1rem;
color: var(--color-text-main);
position: relative;
}
.resource-list .folder > label {
font-weight: bold;
color: var(--color-primary);
}
.resource-list .file {
padding-left: 24px;
}
.resource-list input[type="checkbox"] {
margin-right: 8px;
transform: scale(1.1);
vertical-align: middle;
}
.resource-list label:hover {
cursor: pointer;
text-decoration: underline;
}
/* === INPUT WITH VALIDATION === */
/* Стили перенесены в forms.css для единообразия */
/* Оставляем только специфичные стили для validation-icon */
.input-with-validation .validation-icon {
position: absolute;
top: 30%;
right: 14px;
transform: translateY(-50%);
font-size: 1.3rem;
display: none; /* По умолчанию скрыты */
align-items: center;
justify-content: center;
pointer-events: none;
width: 24px;
height: 24px;
}
.validation-icon.valid {
color: var(--color-success);
display: flex !important; /* Показываем при успехе */
}
.validation-icon.invalid {
color: var(--color-error);
display: flex !important; /* Показываем при ошибке */
}
input.valid {
border-color: var(--color-success);
}
input.invalid {
border-color: var(--color-error);
}
.error-message {
color: #e53935;
font-size: 0.875rem;
margin-top: 4px;
display: none;
}
/* === ACTIVITY ITEMS === */
.activity-item {
display: flex;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid var(--color-border);
}
.activity-icon {
margin-right: 15px;
font-size: 1.2rem;
}
.activity-content {
flex: 1;
}
.activity-content p {
margin-bottom: 5px;
}
.activity-content small {
color: #666;
font-size: 0.85rem;
}
.no-activities {
text-align: center;
color: #666;
padding: 20px 0;
}
/* === ACTION BUTTONS === */
.action-buttons {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.action-button {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
padding: 15px;
}
.action-button i {
font-size: 1.5rem;
}
.mt-2 {
display: flex;
gap: 16px;
}
/* === COLOR PICKER === */
.color-picker-group {
display: flex;
gap: 10px;
margin-top: 10px;
}
.color-square {
display: inline-block;
width: 36px;
height: 36px;
border-radius: 8px;
border: 2px solid transparent;
cursor: pointer;
transition: all 0.2s ease;
background-color: transparent;
}
.color-square--selectable {
cursor: pointer;
transition: transform 0.2s ease;
}
.color-square--selectable:hover {
transform: scale(1.1);
}
.color-square.active,
.color-square--selectable.active {
border-color: var(--color-accent);
box-shadow: 0 0 6px rgba(11, 122, 62, 0.4);
transform: scale(1.1);
}
/* Без фокуса и нажатий */
.color-square:focus,
.color-square--selectable:focus,
.color-square:focus-visible,
.color-square--selectable:focus-visible,
.color-square:active,
.color-square--selectable:active {
outline: none;
box-shadow: none;
background: none;
}
/* === УНИВЕРСАЛЬНЫЕ СОВРЕМЕННЫЕ АДМИН КОМПОНЕНТЫ === */
/* 🎯 Современный контейнер админ-панели */
.admin-container-modern {
max-width: 1600px;
margin: 0 auto;
padding: clamp(16px, 4vw, 40px);
position: relative;
z-index: 1;
min-height: 100vh;
}
.admin-container-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
radial-gradient(circle at 20% 30%, rgba(102, 126, 234, 0.08) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(79, 172, 254, 0.06) 0%, transparent 50%),
radial-gradient(circle at 40% 80%, rgba(67, 233, 123, 0.04) 0%, transparent 50%);
animation: backgroundFloat 30s ease-in-out infinite;
pointer-events: none;
z-index: -1;
}
/* 🏢 Корпоративная Hero секция */
.hero-section-modern {
background: var(--corporate-bg-strong);
border: var(--professional-border);
border-radius: 16px;
padding: clamp(24px, 6vw, 48px);
margin-bottom: 32px;
position: relative;
overflow: hidden;
box-shadow: var(--corporate-shadow);
transition: all 0.3s ease;
}
.hero-section-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--gradient-executive);
}
.hero-section-modern h1 {
font-size: clamp(2rem, 5vw, 3.2rem);
font-weight: 700;
color: var(--text-corporate-primary);
margin-bottom: 16px;
letter-spacing: -0.01em;
line-height: 1.3;
text-shadow: none;
}
.hero-section-modern p {
font-size: clamp(1rem, 2.5vw, 1.2rem);
color: var(--text-corporate-secondary);
margin: 0;
font-weight: 400;
line-height: 1.6;
text-shadow: none;
}
/* 📊 Современная сетка статистики */
.stats-grid-modern {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
gap: 20px;
margin-top: 20px;
margin-bottom: 30px;
max-width: 1200px;
margin-left: auto;
margin-right: auto;
}
/* 🎯 Современная сетка функций */
.features-grid-modern {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
gap: 32px;
position: relative;
z-index: 1;
}
/* 🔘 Современная система кнопок внутри карточек */
.button-grid-modern {
display: grid;
gap: 12px;
}
/* === 🧑💻 КОМПОНЕНТЫ ДЛЯ ПРОГРАММИСТОВ - "ВАУУ!" === */
.tech-dashboard-wow {
background: var(--code-syntax-bg);
border-radius: 20px;
padding: clamp(20px, 4vw, 40px);
position: relative;
overflow: hidden;
border: var(--cyber-border);
box-shadow: 0 12px 48px rgba(0, 212, 255, 0.2);
}
.tech-dashboard-wow::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 20% 30%, rgba(0, 212, 255, 0.1), transparent 50%),
radial-gradient(circle at 80% 70%, rgba(168, 85, 247, 0.1), transparent 50%);
animation: matrixRain 10s linear infinite;
pointer-events: none;
}
.tech-stats-grid-wow {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
position: relative;
z-index: 1;
}
.code-preview-panel {
background: rgba(15, 23, 42, 0.9);
border: 1px solid var(--tech-neon-blue);
border-radius: 12px;
padding: 16px;
font-family: 'Monaco', 'Menlo', monospace;
color: var(--tech-matrix-green);
font-size: 0.85rem;
line-height: 1.4;
overflow-x: auto;
position: relative;
}
.code-preview-panel::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: var(--hologram-gradient);
animation: codeScroll 3s ease-in-out infinite;
}
/* === 👔 КОМПОНЕНТЫ ДЛЯ ДИРЕКТОРОВ - "КРАСИВО" === */
.executive-dashboard-luxury {
background: var(--premium-marble);
border-radius: 24px;
padding: clamp(24px, 6vw, 48px);
position: relative;
overflow: hidden;
border: 2px solid var(--luxury-platinum);
box-shadow: var(--diamond-shadow);
}
.executive-dashboard-luxury::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: var(--gold-accent);
background-size: 200% 100%;
animation: goldShimmer 4s ease-in-out infinite;
}
/* .luxury-stats-grid определен в cards.css - удалено дублирование */
.executive-header-premium {
display: flex;
align-items: center;
gap: clamp(16px, 3vw, 24px);
margin-bottom: clamp(24px, 4vw, 32px);
padding-bottom: clamp(16px, 3vw, 24px);
border-bottom: 1px solid var(--luxury-platinum);
background: linear-gradient(135deg, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0.05));
border-radius: 16px;
padding: clamp(20px, 4vw, 28px);
backdrop-filter: blur(10px);
}
.executive-logo-crown {
width: 60px;
height: 60px;
background: var(--royal-gradient);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
position: relative;
box-shadow: var(--diamond-shadow);
transition: all 0.3s ease;
}
.executive-logo-crown:hover {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(212, 175, 55, 0.4);
}
.executive-logo-crown::after {
content: '♔';
font-size: 24px;
color: var(--icon-primary);
animation: diamondSparkle 3s ease-in-out infinite;
}
/* === 👩🏫 КОМПОНЕНТЫ ДЛЯ УЧИТЕЛЕЙ - "УДОБНО" === */
.teacher-workspace-comfort {
background: var(--teacher-soft-bg);
border-radius: 16px;
padding: var(--comfort-spacing);
border: var(--gentle-border);
box-shadow: 0 6px 20px rgba(116, 185, 255, 0.1);
transition: all 0.3s ease;
}
.teacher-workspace-comfort:focus-within {
animation: focusHighlight 1.5s ease-in-out;
box-shadow: 0 8px 32px rgba(116, 185, 255, 0.2);
}
.comfort-toolbar {
display: flex;
align-items: center;
gap: 12px;
margin-bottom: 20px;
padding: 12px;
background: rgba(116, 185, 255, 0.05);
border-radius: 8px;
border: 1px solid rgba(116, 185, 255, 0.1);
}
.teacher-quick-actions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
gap: 12px;
margin-top: 16px;
}
.comfort-notification {
background: rgba(126, 211, 33, 0.1);
border-left: 4px solid var(--teacher-warm-green);
border-radius: 8px;
padding: 12px 16px;
margin: 12px 0;
color: var(--readable-contrast);
font-size: 0.95rem;
font-weight: 500;
}
/* === 👨👩👧👦 КОМПОНЕНТЫ ДЛЯ РОДИТЕЛЕЙ - "ДОВЕРИЕ" === */
.parent-dashboard-trust {
background: var(--institutional-bg);
border-radius: 18px;
padding: clamp(20px, 5vw, 32px);
border: var(--certificate-border);
box-shadow: var(--authority-shadow);
position: relative;
}
.parent-dashboard-trust::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: var(--security-shield);
}
.trust-verification-panel {
display: flex;
align-items: center;
gap: 16px;
padding: 16px;
background: rgba(12, 60, 120, 0.03);
border-radius: 12px;
border: 1px solid rgba(12, 60, 120, 0.1);
margin: 16px 0;
}
.trust-seal {
width: 60px;
height: 60px;
background: var(--security-shield);
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: bold;
font-size: 14px;
position: relative;
}
.trust-seal::after {
content: '✓';
font-size: 24px;
animation: certificateStamp 1s ease-out;
}
.security-badges {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-top: 12px;
}
.security-badge {
padding: 4px 12px;
background: rgba(11, 122, 62, 0.1);
border: 1px solid rgba(11, 122, 62, 0.2);
border-radius: 20px;
font-size: 0.8rem;
color: var(--trust-forest-green);
font-weight: 600;
}
/* === 🎓 КОМПОНЕНТЫ ДЛЯ УЧЕНИКОВ - "СОВРЕМЕННЫЙ" === */
.student-hub-modern {
background: var(--trendy-glass);
backdrop-filter: var(--glass-backdrop);
border-radius: 24px;
padding: clamp(20px, 4vw, 32px);
border: 1px solid rgba(139, 92, 246, 0.2);
position: relative;
overflow: hidden;
}
.student-hub-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: var(--gen-z-gradient);
opacity: 0.05;
animation: modernWave 4s ease-in-out infinite;
pointer-events: none;
}
.trendy-nav-pills {
display: flex;
gap: 8px;
flex-wrap: wrap;
margin-bottom: 24px;
}
.nav-pill-modern {
padding: 8px 16px;
background: rgba(139, 92, 246, 0.1);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 25px;
color: var(--student-vibrant-purple);
font-size: 0.9rem;
font-weight: 600;
cursor: pointer;
transition: all 0.3s var(--interactive-bounce);
position: relative;
overflow: hidden;
}
.nav-pill-modern:hover {
background: rgba(139, 92, 246, 0.2);
transform: translateY(-2px);
box-shadow: var(--modern-neon);
animation: gamingEffect 0.8s ease-in-out;
}
.nav-pill-modern.active {
background: var(--gen-z-gradient);
color: white;
animation: neonGlow 2s ease-in-out infinite;
}
.gaming-achievement-panel {
background: rgba(139, 92, 246, 0.05);
border: 1px solid rgba(139, 92, 246, 0.2);
border-radius: 16px;
padding: 16px;
margin: 16px 0;
position: relative;
overflow: hidden;
}
.gaming-achievement-panel::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 2px;
background: var(--gen-z-gradient);
animation: dataFlow 2s ease-in-out infinite;
}
/* === 💎 ПРЕМИУМ КОНТЕЙНЕРЫ === */
.morphism-container {
background: var(--morphism-bg);
backdrop-filter: var(--glass-backdrop);
border: var(--morphism-border);
border-radius: 20px;
padding: clamp(24px, 5vw, 40px);
box-shadow: var(--morphism-shadow);
position: relative;
overflow: hidden;
}
.morphism-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1), transparent 50%);
animation: morphismFloat 6s ease-in-out infinite;
pointer-events: none;
}
.enterprise-grid-premium {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(285px, 1fr));
gap: clamp(16px, 4vw, 32px);
position: relative;
z-index: 1;
}
/* === EXECUTIVE FORM STYLES === */
.executive-form-container {
max-width: 900px;
margin: 0 auto;
}
.executive-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 24px;
align-items: start;
}
/* === 🎯 Settings Form Grid - 3 колонки === */
/* Расчет: ширина контейнера - 2 gap (24px * 2 = 48px) / 3 блока */
/* Пример: (1600px - 48px) / 3 = 517px на блок */
.settings-form-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px;
align-items: start !important;
max-width: 1600px;
margin-left: 0;
margin-right: 0;
width: 100%;
box-sizing: border-box;
}
.settings-form-grid .settings-form-block {
display: flex;
flex-direction: column;
align-self: start;
justify-content: flex-start;
min-width: 0;
}
/* Гарантированное начало контента с верха — перекрывает все конфликты */
.settings-form-grid .executive-card-luxury.settings-form-block {
padding-top: 20px !important;
padding-right: 24px;
padding-bottom: 24px;
padding-left: 24px;
box-sizing: border-box;
}
.settings-form-grid .settings-form-block > .luxury-title:first-child {
margin-top: 0 !important;
margin-bottom: 20px !important;
}
.settings-form-grid .settings-form-block .luxury-form-group {
margin-bottom: 20px;
}
.settings-form-grid .settings-form-block .luxury-form-group:last-child {
margin-bottom: 0;
}
.settings-form-grid .executive-form-actions {
grid-column: 1 / -1;
margin-top: 24px;
}
/* API Token Block — одинаковая ширина с другими блоками, без горизонтальной прокрутки */
.settings-form-grid .api-token-block {
max-width: 100%;
min-width: 0;
overflow-x: hidden;
overflow-wrap: break-word;
word-break: break-all;
box-sizing: border-box;
}
.settings-form-grid .api-token-block .input-group {
min-width: 0;
overflow: hidden;
}
.settings-form-grid .api-token-block #api-token-value {
word-break: break-all;
}
/* === 🎯 Секции формы === */
.form-section-header {
grid-column: 1 / -1;
margin-bottom: 16px;
padding-bottom: 12px;
border-bottom: 2px solid var(--luxury-platinum);
}
.section-title {
font-size: 1.2rem;
font-weight: 700;
color: var(--executive-navy);
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.section-title i {
color: var(--executive-gold);
font-size: 18px;
}
/* === 📅 Компактные поля дат === */
.date-range-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 16px;
}
.date-input-group {
display: flex;
flex-direction: column;
gap: 8px;
}
.date-label {
font-size: 0.9rem;
font-weight: 600;
color: var(--executive-navy);
margin: 0;
}
.date-input {
padding: 12px 16px;
font-size: 1rem;
}
/* === 🕐 Компактное расписание === */
.schedule-container-compact {
background: rgba(255, 215, 0, 0.03);
border: 1px solid rgba(255, 215, 0, 0.1);
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
min-height: 120px;
}
.schedule-row-compact {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(255, 255, 255, 0.85));
border: 2px solid rgba(255, 215, 0, 0.25);
border-radius: 12px;
padding: 20px;
margin-bottom: 16px;
box-shadow: 0 4px 16px rgba(255, 215, 0, 0.08);
position: relative;
overflow: hidden;
}
.schedule-row-compact::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 3px;
background: linear-gradient(90deg, var(--executive-gold), var(--luxury-platinum), var(--executive-gold));
background-size: 200% 100%;
}
.schedule-row-compact:hover {
background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
border-color: rgba(255, 215, 0, 0.4);
box-shadow: 0 6px 24px rgba(255, 215, 0, 0.15);
}
.schedule-row-content {
display: grid;
grid-template-columns: 2fr 3fr 1fr;
gap: 16px;
align-items: center;
}
.schedule-day-select {
min-width: 140px;
}
.schedule-time-inputs {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 12px;
}
.time-input-group {
display: flex;
flex-direction: column;
gap: 4px;
}
.time-label {
font-size: 0.85rem;
font-weight: 700;
color: var(--executive-navy);
margin: 0 0 6px 0;
text-align: center;
text-transform: uppercase;
letter-spacing: 0.5px;
background: linear-gradient(135deg, var(--executive-gold), var(--luxury-platinum));
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.schedule-actions {
display: flex;
justify-content: center;
}
.compact-select,
.compact-time {
padding: 12px 16px;
font-size: 0.95rem;
border: 2px solid var(--luxury-platinum);
border-radius: 8px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.9), rgba(255, 255, 255, 0.7));
color: var(--executive-navy);
font-weight: 600;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
backdrop-filter: blur(10px);
}
.compact-select:focus,
.compact-time:focus {
border-color: var(--executive-gold);
box-shadow: 0 0 0 3px rgba(255, 215, 0, 0.15), 0 4px 16px rgba(255, 215, 0, 0.1);
outline: none;
background: linear-gradient(135deg, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.9));
}
.schedule-controls {
display: flex;
align-items: center;
gap: 20px;
margin-top: 20px;
padding: 16px;
background: linear-gradient(135deg, rgba(255, 215, 0, 0.05), rgba(255, 215, 0, 0.02));
border-radius: 10px;
border: 1px solid rgba(255, 215, 0, 0.1);
}
.schedule-help-text {
font-size: 0.9rem;
color: var(--executive-navy);
font-weight: 500;
padding: 8px 16px;
background: rgba(255, 255, 255, 0.8);
border-radius: 6px;
border-left: 3px solid var(--executive-gold);
}
/* === 📱 Адаптивность === */
/* Адаптивные стили перенесены в mobile.css согласно архитектуре */
.luxury-form-group {
display: flex;
flex-direction: column;
}
.luxury-form-label {
display: flex;
align-items: center;
gap: 12px;
font-size: 1.1rem;
font-weight: 700;
color: var(--executive-navy);
margin-bottom: 12px;
}
.luxury-form-label i {
color: var(--icon-primary);
font-size: 20px;
}
/* === Form visibility classes === */
.add-form-hidden {
display: none;
}
.add-form-visible {
display: block;
}
/* === Country code select spacing === */
.country-code-select {
margin-bottom: 10px;
}
.luxury-form-textarea {
resize: vertical;
font-family: inherit;
line-height: 1.6;
}
.luxury-form-select {
cursor: pointer;
}
.executive-form-actions {
display: flex;
gap: 16px;
justify-content: center;
padding-top: 24px;
border-top: 2px solid var(--luxury-platinum);
}
/* === 🎨 MODERN 2025 OTP VERIFICATION BLOCK === */
/*
* Математический расчет ширины блока:
* - Целевая ширина контейнера: 800px
* - Внутренние отступы карточки: 48px * 2 = 96px
* - Максимальная рабочая ширина: 800px
*/
.executive-form-container {
max-width: 800px;
margin: 32px auto;
position: relative;
}
/* OTP Card Container - Modern Glass Morphism */
.executive-form-container.executive-card-luxury,
.executive-form-container {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.95) 0%,
rgba(248, 250, 252, 0.98) 100%);
border: 2px solid rgba(255, 215, 0, 0.4);
border-radius: 24px;
padding: 48px 40px;
position: relative;
overflow: hidden;
box-shadow:
0 20px 60px rgba(0, 0, 0, 0.12),
0 8px 32px rgba(0, 0, 0, 0.08),
inset 0 1px 0 rgba(255, 255, 255, 0.9),
0 0 0 1px rgba(255, 215, 0, 0.1);
backdrop-filter: blur(20px) saturate(180%);
-webkit-backdrop-filter: blur(20px) saturate(180%);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.executive-form-container.executive-card-luxury::before,
.executive-form-container::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
rgba(255, 215, 0, 0.8) 0%,
rgba(255, 223, 0, 1) 50%,
rgba(255, 215, 0, 0.8) 100%);
background-size: 200% 100%;
animation: shimmer 3s ease-in-out infinite;
}
@keyframes shimmer {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
.executive-form-container.executive-card-luxury::after,
.executive-form-container::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle,
rgba(255, 215, 0, 0.08) 0%,
transparent 70%);
opacity: 0;
transition: opacity 0.6s ease;
pointer-events: none;
}
.executive-form-container.executive-card-luxury:hover,
.executive-form-container:hover {
border-color: rgba(255, 215, 0, 0.6);
box-shadow:
0 24px 72px rgba(0, 0, 0, 0.16),
0 12px 40px rgba(0, 0, 0, 0.12),
inset 0 1px 0 rgba(255, 255, 255, 1),
0 0 0 1px rgba(255, 215, 0, 0.2);
transform: translateY(-2px);
}
.executive-form-container.executive-card-luxury:hover::after,
.executive-form-container:hover::after {
opacity: 1;
}
/* OTP Title - Modern Typography */
.executive-form-container .luxury-title {
font-size: clamp(1.75rem, 4vw, 2.25rem);
font-weight: 800;
color: var(--executive-navy);
margin-bottom: 16px;
text-align: center;
letter-spacing: -0.02em;
line-height: 1.2;
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
}
.executive-form-container .luxury-title i {
color: rgba(255, 215, 0, 0.9);
font-size: 1.2em;
filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}
/* OTP Description */
.executive-form-container .luxury-description {
font-size: 1rem;
color: var(--executive-navy);
opacity: 0.75;
text-align: center;
margin-bottom: 32px;
line-height: 1.6;
font-weight: 500;
}
.executive-form-container .luxury-description strong {
color: var(--executive-navy);
opacity: 1;
font-weight: 700;
background: linear-gradient(135deg,
rgba(255, 215, 0, 0.15) 0%,
rgba(255, 223, 0, 0.1) 100%);
padding: 2px 8px;
border-radius: 6px;
}
/* OTP Form Grid - Single Column */
.executive-form-container .executive-form-grid {
display: flex;
flex-direction: column;
gap: 0;
grid-template-columns: 1fr;
}
/* OTP Form Group - Enhanced */
/* КРИТИЧЕСКИ ВАЖНО: Flex контейнер с вертикальным направлением для правильного расположения элементов */
.executive-form-container .luxury-form-group {
margin-bottom: 32px;
width: 100%;
display: flex !important;
flex-direction: column !important;
align-items: center !important;
/* Гарантируем что дочерние элементы начинаются с новой строки */
flex-wrap: nowrap !important;
}
.executive-form-container .luxury-form-label {
font-size: 1.1rem;
font-weight: 700;
color: var(--executive-navy);
margin-bottom: 16px;
display: flex;
align-items: center;
gap: 12px;
justify-content: center;
}
.executive-form-container .luxury-form-label i {
color: rgba(255, 215, 0, 0.9);
font-size: 1.2em;
filter: drop-shadow(0 2px 4px rgba(255, 215, 0, 0.3));
}
/* OTP Input Container - 6 Separate Cells */
/*
* Математический расчет контейнера ячеек:
* - Ширина контейнера: 800px
* - Padding карточки: 48px * 2 = 96px
* - Рабочая ширина: 800px - 96px = 704px
* - Padding контейнера ячеек: 12px * 2 = 24px
* - Рабочая ширина для ячеек: 704px - 24px = 680px
* - Количество ячеек: 6
* - Gap между ячейками: 16px
* - Количество промежутков: 5 (между 6 ячейками)
* - Общая ширина gap: 5 * 16px = 80px
* - Ширина для ячеек: 680px - 80px = 600px
* - Ширина одной ячейки: 600px / 6 = 100px → изменено на 90px
* - Margin ячеек (слева и справа): 8px * 2 = 16px на ячейку
* - Итого: 6 ячеек * (90px + 16px margin) + 5 * 16px gap = 636px + 80px = 716px
* - Проверка: 716px < 680px + 24px padding = 704px ✓
*/
.executive-form-container .otp-input-container {
display: flex;
gap: 16px;
justify-content: center;
align-items: center;
margin: 0 auto;
max-width: 716px;
padding: 12px;
width: 100%;
flex-shrink: 0;
flex-grow: 0;
flex-basis: auto;
}
/* OTP Input Field - Modern 2025 Style - Individual Cells */
/*
* Математический расчет размера ячеек:
* - Ширина одной ячейки: 90px
* - Высота ячейки (пропорция 1:1.1): 90px * 1.1 = 99px
* - Margin слева и справа: 8px * 2 = 16px
* - Размер шрифта пропорционален: 90px / 36 = 2.5rem
* - Border radius: 90px / 5.625 = 16px
*/
/* Отключаем стандартные сообщения валидации браузера */
.executive-form-container .otp-digit::-webkit-validation-bubble,
.executive-form-container .otp-digit::-webkit-validation-bubble-message,
.executive-form-container .otp-digit::-webkit-validation-bubble-arrow {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
}
.executive-form-container .otp-digit {
width: 90px !important;
height: 99px !important;
min-width: 90px !important;
min-height: 99px !important;
max-width: 90px !important;
max-height: 99px !important;
margin: 0 8px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
font-size: 2.5rem !important;
font-weight: 800 !important;
letter-spacing: 0 !important;
text-align: center !important;
border: 2px solid rgba(255, 215, 0, 0.3) !important;
border-radius: 16px !important;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%) !important;
color: var(--executive-navy) !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.08),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
0 0 0 1px rgba(255, 215, 0, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
line-height: 1 !important;
box-sizing: border-box !important;
}
.executive-form-container .otp-digit:focus {
outline: none !important;
border-color: rgba(255, 215, 0, 0.8) !important;
box-shadow:
0 8px 24px rgba(255, 215, 0, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 1),
0 0 0 4px rgba(255, 215, 0, 0.15) !important;
transform: translateY(-2px) scale(1.05) !important;
background: linear-gradient(135deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.98) 100%) !important;
z-index: 10 !important;
position: relative !important;
}
.executive-form-container .otp-digit:hover {
border-color: rgba(255, 215, 0, 0.5) !important;
box-shadow:
0 6px 20px rgba(255, 215, 0, 0.15),
inset 0 2px 4px rgba(255, 255, 255, 0.95),
0 0 0 1px rgba(255, 215, 0, 0.15) !important;
}
.executive-form-container .otp-digit:valid {
border-color: rgba(34, 197, 94, 0.6) !important;
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.05) 0%,
rgba(255, 255, 255, 0.98) 100%) !important;
}
.executive-form-container .otp-digit::placeholder {
color: transparent !important;
}
/* OTP Error Message - Отображение ошибки валидации */
/*
* КРИТИЧЕСКИ ВАЖНО: Элемент должен начинаться с новой строки
* - display: block - блочный элемент, начинается с новой строки
* - clear: both - очищает float элементы
* - width: 100% - занимает всю ширину родителя
* - flex-basis: 100% - в flex контейнере занимает всю ширину
* - order: 10 - всегда в конце (после всех элементов)
* - align-self: stretch - растягивается на всю ширину в flex контейнере
*/
.executive-form-container .otp-error-message {
display: none !important;
width: 100% !important;
max-width: 716px !important;
margin: 16px auto 0 auto !important;
padding: 16px 24px !important;
background: linear-gradient(135deg,
rgba(239, 68, 68, 0.15) 0%,
rgba(239, 68, 68, 0.1) 50%,
rgba(220, 38, 38, 0.12) 100%) !important;
border: 2px solid rgba(239, 68, 68, 0.5) !important;
border-radius: 14px !important;
color: #991b1b !important;
font-size: 1rem !important;
font-weight: 700 !important;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif !important;
text-align: center !important;
line-height: 1.6 !important;
letter-spacing: 0.01em !important;
box-shadow:
0 6px 20px rgba(239, 68, 68, 0.15),
0 2px 8px rgba(239, 68, 68, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.4),
inset 0 -1px 0 rgba(220, 38, 38, 0.1) !important;
animation: slideDown 0.3s ease-out !important;
clear: both !important;
box-sizing: border-box !important;
/* Flex свойства для правильного позиционирования в flex-контейнере */
order: 10 !important;
flex-basis: 100% !important;
flex-shrink: 0 !important;
flex-grow: 0 !important;
align-self: stretch !important;
text-shadow: 0 1px 2px rgba(255, 255, 255, 0.8) !important;
backdrop-filter: blur(8px) !important;
-webkit-backdrop-filter: blur(8px) !important;
/* Гарантируем начало с новой строки */
float: none !important;
position: relative !important;
/* Z-index для отображения поверх других элементов */
z-index: 100 !important;
/* Принудительный перенос на новую строку */
break-after: always !important;
page-break-after: always !important;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.executive-form-container .otp-error-message::before {
content: '⚠';
display: block;
margin-bottom: 8px;
font-size: 1.3em;
text-align: center;
}
/* Текст ошибки в отдельном div - начинается с новой строки */
/* КРИТИЧЕСКИ ВАЖНО: Текст должен начинаться с новой строки после иконки */
.executive-form-container .otp-error-text {
display: block !important;
width: 100% !important;
text-align: center !important;
line-height: 1.6 !important;
word-wrap: break-word !important;
overflow-wrap: break-word !important;
margin-top: 0 !important;
padding-top: 0 !important;
/* Гарантируем начало с новой строки */
clear: both !important;
float: none !important;
position: relative !important;
}
/* Убеждаемся что сообщение об ошибке отображается как block при показе */
/* КРИТИЧЕСКИ ВАЖНО: При показе элемент должен быть block для начала с новой строки */
.executive-form-container .otp-error-message[style*="display: block"],
.executive-form-container .otp-error-message.show,
.executive-form-container .otp-error-message:not([style*="display: none"]) {
display: block !important;
/* Дополнительные гарантии для начала с новой строки */
clear: both !important;
float: none !important;
position: relative !important;
width: 100% !important;
max-width: 716px !important;
margin-left: auto !important;
margin-right: auto !important;
/* Z-index для отображения поверх других элементов при показе */
z-index: 100 !important;
/* Flex свойства для правильного позиционирования */
flex-basis: 100% !important;
align-self: stretch !important;
order: 10 !important;
/* Принудительный перенос на новую строку */
break-after: always !important;
page-break-after: always !important;
}
/* Legacy support for single input (if needed) */
.executive-form-container #otp:not(.otp-digit),
.executive-form-container input[name="otp"]:not(.otp-digit),
.executive-form-container #otp.luxury-form-input:not(.otp-digit),
.executive-form-container input[name="otp"].luxury-form-input:not(.otp-digit) {
width: 100% !important;
max-width: 400px !important;
margin: 0 auto !important;
display: block !important;
padding: 20px 24px !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
letter-spacing: 0.2em !important;
text-align: center !important;
border: 2px solid rgba(255, 215, 0, 0.3) !important;
border-radius: 16px !important;
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(248, 250, 252, 0.95) 100%) !important;
color: var(--executive-navy) !important;
box-shadow:
0 4px 16px rgba(0, 0, 0, 0.08),
inset 0 2px 4px rgba(255, 255, 255, 0.9),
0 0 0 1px rgba(255, 215, 0, 0.1) !important;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
height: 72px !important;
min-height: 72px !important;
max-height: 72px !important;
line-height: 1 !important;
}
/* Legacy focus styles */
.executive-form-container #otp:not(.otp-digit):focus,
.executive-form-container input[name="otp"]:not(.otp-digit):focus,
.executive-form-container #otp.luxury-form-input:not(.otp-digit):focus,
.executive-form-container input[name="otp"].luxury-form-input:not(.otp-digit):focus {
outline: none !important;
border-color: rgba(255, 215, 0, 0.8) !important;
box-shadow:
0 8px 24px rgba(255, 215, 0, 0.25),
inset 0 2px 4px rgba(255, 255, 255, 1),
0 0 0 4px rgba(255, 215, 0, 0.15) !important;
transform: translateY(-2px) !important;
background: linear-gradient(135deg,
rgba(255, 255, 255, 1) 0%,
rgba(255, 255, 255, 0.98) 100%) !important;
}
.executive-form-container #otp:not(.otp-digit)::placeholder,
.executive-form-container input[name="otp"]:not(.otp-digit)::placeholder,
.executive-form-container #otp.luxury-form-input:not(.otp-digit)::placeholder,
.executive-form-container input[name="otp"].luxury-form-input:not(.otp-digit)::placeholder {
color: rgba(30, 43, 79, 0.4) !important;
font-weight: 500 !important;
letter-spacing: 0.1em !important;
opacity: 0.6 !important;
}
.executive-form-container #otp:not(.otp-digit):hover,
.executive-form-container input[name="otp"]:not(.otp-digit):hover,
.executive-form-container #otp.luxury-form-input:not(.otp-digit):hover,
.executive-form-container input[name="otp"].luxury-form-input:not(.otp-digit):hover {
border-color: rgba(255, 215, 0, 0.5) !important;
box-shadow:
0 6px 20px rgba(255, 215, 0, 0.15),
inset 0 2px 4px rgba(255, 255, 255, 0.95),
0 0 0 1px rgba(255, 215, 0, 0.15) !important;
}
/* OTP Form Actions - Modern Button Layout - Horizontal Row */
/*
* Кнопки центрированы по горизонтали
* - justify-content: center - центрирует все кнопки
* - flex-wrap: nowrap - кнопки в одном ряду
* - width: 100% - занимает всю ширину контейнера для центрирования
*/
.executive-form-container .executive-form-actions {
display: flex;
flex-direction: row;
flex-wrap: nowrap;
gap: 12px;
justify-content: center;
align-items: center;
padding-top: 32px;
border-top: 1px solid rgba(255, 215, 0, 0.2);
margin-top: 8px;
width: 100%;
}
/* Стили для форм внутри executive-form-actions (для кнопок отмены и повторной отправки) */
.executive-form-container .executive-form-actions form {
display: inline-block;
margin: 0;
padding: 0;
}
/* Modern OTP Buttons - Увеличенный размер */
.executive-form-container .executive-form-actions .btn {
flex: 1 1 auto;
min-width: 180px;
max-width: 240px;
padding: 18px 28px;
font-size: 1.05rem;
font-weight: 700;
border-radius: 14px;
border: 2px solid transparent;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
display: inline-flex;
align-items: center;
justify-content: center;
gap: 10px;
position: relative;
overflow: hidden;
text-transform: none;
letter-spacing: 0.02em;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
white-space: nowrap;
min-height: 56px;
line-height: 1.4;
}
.executive-form-container .executive-form-actions .btn::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 ease;
}
.executive-form-container .executive-form-actions .btn:hover::before {
left: 100%;
}
/* Confirm Code Button - Primary */
.executive-form-container .executive-form-actions .btn-primary {
background: linear-gradient(135deg,
#2563eb 0%,
#1d4ed8 100%);
color: #ffffff;
border-color: rgba(37, 99, 235, 0.3);
box-shadow:
0 6px 20px rgba(37, 99, 235, 0.3),
0 2px 8px rgba(37, 99, 235, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.executive-form-container .executive-form-actions .btn-primary:hover {
background: linear-gradient(135deg,
#1d4ed8 0%,
#1e40af 100%);
border-color: rgba(37, 99, 235, 0.5);
box-shadow:
0 8px 24px rgba(37, 99, 235, 0.4),
0 4px 12px rgba(37, 99, 235, 0.3),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.executive-form-container .executive-form-actions .btn-primary:active {
transform: translateY(0);
box-shadow:
0 4px 12px rgba(37, 99, 235, 0.3),
inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.executive-form-container .executive-form-actions .btn-primary i {
font-size: 1.1em;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
/* Request/Cancel Buttons - Secondary */
.executive-form-container .executive-form-actions .btn-secondary {
background: linear-gradient(135deg,
rgba(148, 163, 184, 0.95) 0%,
rgba(100, 116, 139, 0.95) 100%);
color: #ffffff;
border-color: rgba(148, 163, 184, 0.3);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.2);
}
.executive-form-container .executive-form-actions .btn-secondary:hover {
background: linear-gradient(135deg,
rgba(100, 116, 139, 0.95) 0%,
rgba(71, 85, 105, 0.95) 100%);
border-color: rgba(148, 163, 184, 0.5);
box-shadow:
0 6px 16px rgba(0, 0, 0, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.3);
transform: translateY(-2px);
}
.executive-form-container .executive-form-actions .btn-secondary:active {
transform: translateY(0);
box-shadow:
0 2px 8px rgba(0, 0, 0, 0.1),
inset 0 2px 4px rgba(0, 0, 0, 0.1);
}
.executive-form-container .executive-form-actions .btn-secondary i {
font-size: 1.1em;
filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.2));
}
/* Responsive adjustments for OTP block */
/* Медиа-запросы перенесены в mobile.css согласно архитектуре */
/* OTP Form States - Состояния формы OTP */
.executive-form-container #otp-form.loading .otp-digit,
.executive-form-container #otp-form.loading .btn-primary {
opacity: 0.7;
cursor: wait !important;
pointer-events: none;
}
.executive-form-container #otp-form.loading .btn-primary {
position: relative;
}
.executive-form-container #otp-form.loading .btn-primary::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px;
height: 20px;
margin: -10px 0 0 -10px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: rgba(255, 255, 255, 0.9);
border-radius: 50%;
animation: otp-spin 0.6s linear infinite;
}
@keyframes otp-spin {
to { transform: rotate(360deg); }
}
.executive-form-container #otp-form.error-shake {
animation: otp-shake 0.5s ease-in-out;
}
@keyframes otp-shake {
0%, 100% { transform: translateX(0); }
10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
20%, 40%, 60%, 80% { transform: translateX(5px); }
}
.executive-form-container #otp-form.success {
animation: otp-success-pulse 0.6s ease-in-out;
}
@keyframes otp-success-pulse {
0% { transform: scale(1); }
50% { transform: scale(1.02); }
100% { transform: scale(1); }
}
.executive-form-container #otp-form.success .otp-digit {
border-color: rgba(34, 197, 94, 0.6) !important;
background: linear-gradient(135deg,
rgba(34, 197, 94, 0.1) 0%,
rgba(255, 255, 255, 0.98) 100%) !important;
}
.executive-form-container .otp-digit:disabled {
opacity: 0.6 !important;
cursor: not-allowed !important;
background: rgba(0, 0, 0, 0.05) !important;
}
.executive-form-container .btn-primary:disabled {
opacity: 0.7 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* ARIA Live Region для screen readers */
.executive-form-container .otp-input-container[role="group"] {
position: relative;
}
.executive-form-container .otp-digit[aria-invalid="true"] {
border-color: rgba(239, 68, 68, 0.8) !important;
box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.2) !important;
}
/* Анимация при вводе цифры */
@keyframes digitPop {
0% { transform: scale(1); }
50% { transform: scale(1.1); }
100% { transform: scale(1); }
}
.executive-form-container .otp-digit.filled {
animation: digitPop 0.2s ease;
}
/* Таймер истечения кода */
.executive-form-container .otp-timer {
text-align: center;
font-size: 14px;
margin-top: 10px;
font-weight: 600;
color: #6b7280;
transition: color 0.3s ease;
}
/* Счетчик попыток */
.executive-form-container .otp-attempts {
text-align: center;
font-size: 12px;
margin-top: 5px;
font-weight: 500;
transition: color 0.3s ease;
}
/* Прогресс-бар заполнения */
.executive-form-container .otp-progress {
margin: 10px 0;
background: #e5e7eb;
height: 4px;
border-radius: 2px;
overflow: hidden;
position: relative;
}
.executive-form-container .otp-progress-bar {
height: 100%;
background: #3b82f6;
transition: width 0.3s ease, background-color 0.3s ease;
border-radius: 2px;
}
.executive-form-container .otp-progress-text {
display: block;
text-align: center;
font-size: 11px;
color: #6b7280;
margin-top: 4px;
font-weight: 500;
}
/* Кнопка очистки */
.executive-form-container .otp-clear-btn {
position: absolute;
right: -35px;
top: 50%;
transform: translateY(-50%);
background: none;
border: none;
color: #6b7280;
cursor: pointer;
font-size: 16px;
padding: 4px 8px;
border-radius: 4px;
transition: all 0.2s ease;
opacity: 0.7;
}
.executive-form-container .otp-clear-btn:hover {
color: #ef4444;
opacity: 1;
background: rgba(239, 68, 68, 0.1);
}
.executive-form-container .otp-clear-btn:focus {
outline: 2px solid rgba(239, 68, 68, 0.5);
outline-offset: 2px;
}
.executive-form-container .otp-input-container {
position: relative;
}
/* Медиа-запросы для .executive-form-container перенесены в mobile.css согласно архитектуре */
.luxury-form-highlight {
background: rgba(37, 99, 235, 0.1);
border-left: 4px solid var(--primary-bg);
border-radius: 12px;
padding: 20px;
}
.luxury-icon-preview {
display: flex;
align-items: center;
gap: 12px;
padding: 16px 20px;
background: var(--premium-marble);
border: 2px solid var(--luxury-platinum);
border-radius: 12px;
min-width: 180px;
}
.luxury-icon-preview i {
color: var(--icon-primary);
font-size: 24px;
}
.luxury-icon-preview span {
color: var(--executive-navy);
font-weight: 600;
}
.luxury-radio-group {
display: flex;
gap: 16px;
flex-wrap: wrap;
}
.luxury-radio-label {
display: flex;
align-items: center;
gap: 8px;
padding: 8px 16px;
background: var(--corporate-bg-strong);
border: 2px solid var(--luxury-platinum);
border-radius: 8px;
cursor: pointer;
transition: all 0.3s ease;
color: var(--executive-navy);
font-weight: 500;
}
.luxury-radio-label:hover {
border-color: var(--primary-bg);
}
.luxury-radio-label input[type="radio"] {
accent-color: var(--luxury-gold);
}
/* === FORM UTILITY CLASSES === */
.luxury-checkbox {
width: 20px;
height: 20px;
accent-color: var(--luxury-gold);
}
.luxury-required {
color: #ef4444;
}
.luxury-icon-row {
display: flex;
gap: 16px;
align-items: center;
flex-wrap: wrap;
}
.luxury-translation-options {
display: none;
margin-top: 16px;
}
.luxury-translation-fields {
display: none;
margin-top: 20px;
}
.luxury-translation-label {
font-size: 1rem;
font-weight: 600;
color: var(--executive-navy);
margin-bottom: 12px;
}
.neural-data-flow {
position: relative;
padding: 2px;
border-radius: 12px;
background: linear-gradient(45deg, var(--tech-neon-blue), var(--tech-neon-purple));
overflow: hidden;
}
.neural-data-flow::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: neuralNetwork 3s ease-in-out infinite;
}
.neural-data-flow .content {
background: var(--corporate-bg-strong);
border-radius: 10px;
padding: 16px;
position: relative;
z-index: 1;
}
/* === ПРАВИЛЬНАЯ АРХИТЕКТУРА === */
/*
✅ В этом файле только компоненты, контейнеры и сетки
✅ Никаких media queries - все адаптивные стили в device-файлах:
- mobile.css для устройств до 767px
- tablet.css для устройств 768-1024px
- desktop.css для устройств от 1025px
✅ Соблюдается модульность архитектуры
*/
/* ===================================================================
📊 MONTHLY PROFIT REPORT COMPONENTS
📋 Компоненты для ежемесячных отчетов по прибыли
⚡ Перенесено из /teams/admin/monthly_profit.php согласно архитектуре
=================================================================== */
/* 📅 Header period info */
.period-info-container {
margin-left: auto;
}
.period-info-box {
padding: 16px 24px;
border-radius: 12px;
}
.period-info-label {
color: var(--text-body-secondary);
font-size: 0.9rem;
font-weight: 600;
margin-bottom: 4px;
}
.period-info-value {
color: var(--executive-navy);
font-size: 1.1rem;
font-weight: 700;
}
/* 🔄 Period selection and export */
.period-export-container {
display: flex;
gap: 24px;
margin-top: 32px;
align-items: start;
flex-wrap: wrap;
}
.period-form-container {
flex: 1;
min-width: 300px;
max-width: 500px;
}
.period-form-grid {
grid-template-columns: 1fr;
}
.export-container {
flex: 0 0 auto;
}
.export-title {
margin-bottom: 16px;
text-align: center;
}
.export-icon {
margin-right: 8px;
}
/* 📊 Financial summary section */
.financial-summary-container {
margin-top: 48px;
}
.financial-summary-border {
border-bottom: 2px solid var(--luxury-platinum);
margin-bottom: 32px;
padding-bottom: 16px;
}
.financial-summary-title {
margin: 0;
display: flex;
align-items: center;
gap: 12px;
}
.financial-summary-icon {
color: var(--icon-primary);
}
/* 💰 Income card */
.income-card {
background: linear-gradient(135deg, rgba(34, 197, 94, 0.1), rgba(255, 255, 255, 0.05));
}
.income-icon {
color: #059669;
}
.income-title {
color: #059669;
}
.income-amount-box {
margin: 24px 0;
padding: 24px;
background: rgba(34, 197, 94, 0.1);
border-radius: 16px;
border: 2px solid #059669;
}
.income-amount {
font-size: 2.2rem;
font-weight: 900;
color: #059669;
margin-bottom: 8px;
}
.income-currency {
font-size: 1.1rem;
font-weight: 700;
color: #047857;
margin-top: 4px;
}
/* 💸 Expenses card */
.expenses-card {
background: linear-gradient(135deg, rgba(239, 68, 68, 0.1), rgba(255, 255, 255, 0.05));
}
.expenses-icon {
color: #dc2626;
}
.expenses-title {
color: #dc2626;
}
.expenses-amount-box {
margin: 24px 0;
padding: 24px;
background: rgba(239, 68, 68, 0.1);
border-radius: 16px;
border: 2px solid #dc2626;
}
.expenses-amount {
font-size: 2.2rem;
font-weight: 900;
color: #dc2626;
margin-bottom: 8px;
}
.expenses-currency {
font-size: 1.1rem;
font-weight: 700;
color: #b91c1c;
margin-top: 4px;
}
/* 📈 Profit card */
.profit-card-positive {
background: linear-gradient(135deg, rgba(255, 215, 0, 0.1), rgba(255, 255, 255, 0.05));
}
.profit-card-negative {
background: linear-gradient(135deg, rgba(251, 146, 60, 0.1), rgba(255, 255, 255, 0.05));
}
.profit-icon-positive {
color: var(--text-success);
}
.profit-icon-negative {
color: #f97316;
}
.profit-title-positive {
color: var(--text-success);
}
.profit-title-negative {
color: #f97316;
}
.profit-amount-box-positive {
margin: 24px 0;
padding: 24px;
background: rgba(6, 95, 70, 0.1);
border-radius: 16px;
border: 2px solid var(--text-success);
}
.profit-amount-box-negative {
margin: 24px 0;
padding: 24px;
background: rgba(251, 146, 60, 0.1);
border-radius: 16px;
border: 2px solid #f97316;
}
.profit-amount-container {
display: flex;
align-items: center;
justify-content: center;
gap: 12px;
margin-bottom: 8px;
}
.profit-arrow-positive {
color: var(--text-success);
font-size: 1.5rem;
}
.profit-arrow-negative {
color: #f97316;
font-size: 1.5rem;
}
.profit-amount-positive {
font-size: 2.2rem;
font-weight: 900;
color: var(--text-success);
}
.profit-amount-negative {
font-size: 2.2rem;
font-weight: 900;
color: #f97316;
}
.profit-currency-positive {
font-size: 1.1rem;
font-weight: 700;
color: #b45309;
margin-top: 4px;
}
.profit-currency-negative {
font-size: 1.1rem;
font-weight: 700;
color: #ea580c;
margin-top: 4px;
}
/* 📊 Profit margin card */
.margin-icon {
color: var(--executive-navy);
}
.margin-container {
display: flex;
align-items: center;
gap: 12px;
}
.margin-calculator-icon {
color: var(--icon-primary);
font-size: 18px;
}
.margin-label {
font-size: 0.9rem;
color: var(--executive-navy);
font-weight: 500;
}
.margin-value {
font-size: 1.8rem;
color: var(--executive-navy);
font-weight: 900;
}
/* 📋 Detail tables */
.income-section-title {
color: #1b5e20;
margin-bottom: 20px;
}
.income-amount-cell {
color: #1b5e20;
font-weight: 600;
}
.income-total-row {
background: rgba(27, 94, 32, 0.1);
}
.income-total-cell {
color: #1b5e20;
font-weight: 700;
}
.expenses-section-title {
color: #b71c1c;
margin-bottom: 20px;
}
.expenses-amount-cell {
color: #b71c1c;
font-weight: 600;
}
.expenses-total-row {
background: rgba(183, 28, 28, 0.1);
}
.expenses-total-cell {
color: #b71c1c;
font-weight: 700;
}
/* 📊 Financial overview */
.comparison-span {
font-weight: 600;
margin-left: 10px;
}
/* 📊 Financial overview (compact) */
.comparison-main {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 16px;
margin: 10px 0;
}
.comparison-item {
text-align: center;
padding: 12px;
background: #f8f9fa;
border: 1px solid #dee2e6;
border-radius: 8px;
}
.comparison-label {
font-size: 12px;
color: #6c757d;
margin-bottom: 6px;
text-transform: uppercase;
font-weight: 500;
}
.comparison-value { font-size: 16px; font-weight: 700; color: #2c3e50; }
.comparison-value.positive { color: #28a745; }
.comparison-value.negative { color: #dc3545; }
.comparison-stats { display: none; }
.comparison-stats.is-open {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 16px;
margin-top: 12px;
}
.stat-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
background: white;
border: 1px solid #dee2e6;
border-radius: 8px;
}
.stat-icon { font-size: 20px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; background: #f8f9fa; border-radius: 50%; }
.stat-title { font-size: 12px; color: #6c757d; margin-bottom: 4px; text-transform: uppercase; font-weight: 500; }
.stat-value { font-size: 14px; font-weight: 600; color: #2c3e50; line-height: 1.3; }
/* 📈 Charts */
.chart-container {
width: 100%;
height: 300px;
position: relative;
}
/* 🔧 Main container padding fix */
.main-welcome-no-padding {
padding-top: 0;
}
/* 📐 Блоки 100% ширины */
.section-top.container {
width: 100% !important;
max-width: 100% !important;
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
align-items: stretch; /* Выравнивание высоты блоков */
}
.form-block.u-shadow.u-radius,
.form-block.u-shadow.u-radius.u-glass {
width: 95% !important;
max-width: 95% !important;
margin: 0 auto 20px auto;
display: flex;
flex-direction: column;
}
/* Для одиночных блоков */
.form-block.u-shadow.u-radius:not(.u-glass) {
grid-column: 1 / -1;
}
/* 📊 Выравнивание высоты графиков */
.form-block.u-glass {
min-height: 400px; /* Минимальная высота для блоков графиков */
}
.form-block.u-glass .chart-container {
flex: 1; /* Заполнение доступного пространства */
min-height: 300px;
}
/* 📏 Выравнивание высоты карточек финансовой сводки */
/* Styles moved to themes-executives.css to avoid conflicts */
/* Hover effects moved to themes-executives.css to avoid conflicts */
/* Icon styles moved to themes-executives.css to avoid conflicts */
/* All icon styles moved to themes-executives.css to avoid conflicts */
/* Title styles moved to themes-executives.css to avoid conflicts */
/* Value and trust-guarantee styles moved to themes-executives.css to avoid conflicts */
/* Grid title styles moved to themes-executives.css to avoid conflicts */
.luxury-stats-grid .income-amount-box,
.luxury-stats-grid .expenses-amount-box,
.luxury-stats-grid .profit-amount-box-positive,
.luxury-stats-grid .profit-amount-box-negative {
flex: 1; /* Растягиваем блоки с суммами */
display: flex;
flex-direction: column;
justify-content: center;
align-items: center; /* Центрируем содержимое */
min-height: 80px; /* Уменьшенная высота для компактности */
text-align: center; /* Центрируем текст */
}
/* Grid trust-guarantee styles moved to themes-executives.css to avoid conflicts */
/* 📊 Стили для маржи прибыли */
.margin-label {
font-size: 0.9rem;
color: var(--executive-navy);
font-weight: 500;
margin-bottom: 4px;
}
.margin-value {
font-size: 1.8rem;
color: var(--executive-navy);
font-weight: 900;
text-align: center;
}
/* 📊 Стили для statistics_dashboard.php */
/* Информационная панель о доступе */
.access-info {
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
border-radius: var(--radius);
padding: 25px;
margin-bottom: 30px;
color: white;
text-align: center;
box-shadow: var(--shadow-md);
}
.access-info h3 {
margin: 0 0 10px 0;
font-size: 1.4rem;
font-weight: 600;
}
.access-info p {
margin: 0;
font-size: 1rem;
opacity: 0.9;
}
/* Современные таблицы */
.modern-table {
width: 100%;
border-collapse: collapse;
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.modern-table thead {
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: white;
}
.modern-table thead th {
padding: 18px 20px;
font-weight: 600;
text-align: left;
font-size: 0.95rem;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.modern-table tbody tr {
background: var(--color-bg-light);
transition: var(--transition);
}
.modern-table tbody tr:nth-child(even) {
background: var(--color-bg-card);
}
.modern-table tbody tr:hover {
background: rgba(var(--color-primary-rgb), 0.05);
transform: translateX(5px);
}
.modern-table tbody td {
padding: 16px 20px;
border-bottom: 1px solid var(--color-border);
font-size: 0.95rem;
color: var(--color-text-main);
}
.modern-table tbody td:last-child {
text-align: right;
font-weight: 600;
}
/* Иконки отделов */
.department-icon {
width: 40px;
height: 40px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
margin-right: 15px;
font-size: 1.2rem;
color: white;
}
.dept-course { background: linear-gradient(135deg, #4CAF50, #45a049); }
.dept-abroad { background: linear-gradient(135deg, #2196F3, #1976D2); }
.dept-marketing { background: linear-gradient(135deg, #FF9800, #F57C00); }
.dept-service { background: linear-gradient(135deg, #9C27B0, #7B1FA2); }
/* Адаптация существующих классов */
.table-section {
background: var(--color-bg-card);
border-radius: var(--radius);
padding: 30px;
margin-bottom: 30px;
border: 1px solid var(--color-border);
box-shadow: var(--shadow-sm);
width: 100%; /* Обеспечиваем 100% ширину */
}
.table-section h3 {
margin: 0 0 25px 0;
color: var(--color-primary);
font-size: 1.5rem;
font-weight: 600;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
}
/* Стили для inline замен */
.department-flex {
display: flex;
align-items: center;
}
.text-capitalize {
text-transform: capitalize;
}
.company-details {
color: var(--color-text-secondary);
}
/* Стили для цветных иконок */
.icon-gold {
color: #FFD700;
}
.icon-green {
color: #4CAF50;
}
.icon-blue {
color: #2196F3;
}
.icon-orange {
color: #FF9800;
}
.icon-purple {
color: #9C27B0;
}
.icon-gray {
color: #607D8B;
}
/* === 🔧 API ADMIN COMPONENTS === */
.action-buttons {
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.stats-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-bottom: 30px;
}
/* .info-box определен в cards.css - удалено дублирование */
.settings-form {
margin-top: 20px;
}
.form-section {
background: var(--api-light-bg);
border-radius: var(--api-border-radius);
padding: 20px;
margin-bottom: 20px;
border: 1px solid var(--api-border-color);
}
.form-section h3 {
color: var(--api-text-color);
font-size: 1.2rem;
font-weight: 600;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.form-section h3 i {
margin-right: 8px;
color: var(--api-primary-color);
}
.form-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-bottom: 15px;
}
.form-group {
margin-bottom: 15px;
}
.form-group label {
display: block;
color: var(--api-text-color);
font-weight: 500;
margin-bottom: 5px;
font-size: 0.9rem;
}
.dashboard-overview {
margin-bottom: 30px;
}
.api-status-indicator {
display: inline-flex;
align-items: center;
padding: 8px 12px;
border-radius: var(--api-border-radius);
font-size: 0.9rem;
font-weight: 500;
}
.api-status-online {
background: rgba(40, 167, 69, 0.1);
color: var(--api-success-color);
border: 1px solid rgba(40, 167, 69, 0.2);
}
.api-status-offline {
background: rgba(220, 53, 69, 0.1);
color: var(--api-danger-color);
border: 1px solid rgba(220, 53, 69, 0.2);
}
.login-form-container {
background: white;
border-radius: var(--api-border-radius-lg);
padding: 30px;
box-shadow: var(--api-shadow-medium);
max-width: 400px;
margin: 0 auto;
}
/* .quick-action-* определены в buttons.css - удалено дублирование */
/* .quick-action-* определены в buttons.css - удалено дублирование */
/* .quick-action-* определены в buttons.css - удалено дублирование */
/* .quick-action-content и .quick-action-arrow определены в buttons.css - удалено дублирование */
/* Стили для заголовков секций */
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid rgba(0, 0, 0, 0.05);
}
.section-header h2 {
color: var(--api-text-color);
font-size: 1.5rem;
font-weight: 700;
margin: 0;
display: flex;
align-items: center;
gap: 12px;
position: relative;
overflow: hidden;
}
.section-header h2 i {
color: var(--api-primary-color);
font-size: 1.3rem;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--api-primary-color);
transition: width 0.3s ease;
}
.section-header:hover h2::after {
width: 100%;
}
/* Основной контейнер дашборда */
.super-admin-dashboard {
width: 95%;
margin: 0 auto;
padding: 20px;
}
.dashboard-grid {
display: grid;
gap: 30px;
}
/* Стили для hero секции */
.hero-section-modern {
background: linear-gradient(135deg, var(--api-primary-color) 0%, var(--api-accent-color) 100%);
border-radius: 24px;
padding: 40px;
margin-bottom: 30px;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-section-modern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 2;
}
.hero-section-modern h1 {
font-size: 2.5rem;
font-weight: 800;
margin: 0 0 15px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
}
.hero-section-modern p {
font-size: 1.2rem;
margin: 0 0 30px 0;
opacity: 0.9;
font-weight: 400;
}
.hero-stats {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
background: rgba(255, 255, 255, 0.15);
padding: 20px;
border-radius: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 800;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
font-weight: 500;
}
/* Стили для статистики */
.stats-grid-modern {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 20px;
margin-top: 20px;
}
/* .stat-card определен в cards.css - удалено дублирование */
/* Стили для состояния системы */
.system-health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
margin-top: 20px;
}
.health-card {
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.health-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.health-header {
display: flex;
align-items: flex-start;
gap: 12px;
margin-bottom: 20px;
}
.health-header i {
color: var(--api-primary-color);
font-size: 1.3rem;
}
.health-header h4 {
margin: 0;
color: var(--api-text-color);
font-size: 1.1rem;
font-weight: 600;
text-align: left;
}
.health-progress {
display: flex;
align-items: flex-start;
gap: 15px;
margin-bottom: 15px;
}
.progress-bar {
flex: 1;
height: 8px;
background: rgba(0, 0, 0, 0.1);
border-radius: 4px;
overflow: hidden;
}
.progress-fill {
height: 100%;
background: var(--api-primary-gradient);
border-radius: 4px;
transition: all 0.3s ease;
}
.progress-fill.success {
background: linear-gradient(90deg, #28a745, #20c997);
}
.progress-fill.warning {
background: linear-gradient(90deg, #ffc107, #e0a800);
}
.progress-fill.danger {
background: linear-gradient(90deg, #dc3545, #c82333);
}
.health-value {
font-weight: 700;
color: var(--api-text-color);
font-size: 1.1rem;
}
.health-card small {
color: var(--api-text-muted);
font-size: 0.85rem;
text-align: left;
display: block;
}
.system-info {
display: flex;
flex-direction: column;
gap: 8px;
}
.info-item {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.info-label {
color: var(--api-text-muted);
font-size: 0.9rem;
text-align: left;
}
.info-value {
color: var(--api-text-color);
font-weight: 600;
font-size: 0.9rem;
text-align: right;
}
/* Стили для активности */
.activity-section {
margin-top: 20px;
}
.activity-group {
margin-bottom: 25px;
}
.activity-group h4 {
color: var(--api-text-color);
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 15px 0;
display: flex;
align-items: center;
gap: 10px;
}
.activity-group h4 i {
color: var(--api-primary-color);
}
.activity-list {
background: white;
border-radius: 16px;
padding: 20px;
max-height: 400px;
overflow-y: auto;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
}
.activity-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
}
.activity-item:hover {
background: rgba(0, 0, 0, 0.02);
margin: 0 -20px;
padding: 15px 20px;
border-radius: 12px;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--api-primary-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
flex-shrink: 0;
}
.activity-content {
flex: 1;
}
.activity-content h5 {
color: var(--api-text-color);
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 3px 0;
}
.activity-content p {
color: var(--api-text-muted);
font-size: 0.85rem;
margin: 0 0 3px 0;
}
.activity-content small {
color: var(--api-text-muted);
font-size: 0.75rem;
}
.no-activity {
text-align: center;
padding: 40px 20px;
color: var(--api-text-muted);
}
.no-activity i {
font-size: 2rem;
margin-bottom: 15px;
opacity: 0.5;
}
.no-activity p {
margin: 0;
font-size: 1rem;
}
/* Стили для инлайн-алертов на странице (формы, валидация).
НЕ применяется к message-container и notification-toast — их стили в notifications.css */
.alert:not(.notification-toast) {
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:not(.notification-toast):hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}
.notifications-grid {
display: grid;
gap: 15px;
margin-top: 20px;
}
.notification {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.notification:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.notification-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 10px;
}
.notification-header h4 {
margin: 0;
color: var(--api-text-color);
font-size: 1.1rem;
font-weight: 600;
}
.notification-time {
color: var(--api-text-muted);
font-size: 0.85rem;
}
.notification-body p {
margin: 0;
color: var(--api-text-muted);
font-size: 0.9rem;
line-height: 1.5;
}
/* Цветовые варианты для уведомлений */
.notification-info {
border-left-color: #17a2b8;
}
.notification-info .notification-header h4 {
color: #17a2b8;
}
.notification-success {
border-left-color: #28a745;
}
.notification-success .notification-header h4 {
color: #28a745;
}
.notification-warning {
border-left-color: #ffc107;
}
.notification-warning .notification-header h4 {
color: #ffc107;
}
.notification-danger {
border-left-color: #dc3545;
}
.notification-danger .notification-header h4 {
color: #dc3545;
}
/* Стили для обычных инлайн-алертов (не notification-toast, не message-container) */
.alert-success:not(.notification-toast),
.alert.alert-success {
background: var(--color-alert-success-bg);
color: var(--color-alert-success-text);
border: 1px solid var(--color-alert-success-border);
border-radius: var(--radius);
padding: var(--space-md);
margin: var(--space-lg) 0;
}
.alert-danger:not(.notification-toast),
.alert.alert-error {
background: var(--color-alert-error-bg);
color: var(--color-alert-error-text);
border: 1px solid var(--color-alert-error-border);
border-radius: var(--radius);
padding: var(--space-md);
margin: var(--space-lg) 0;
}
.alert-warning:not(.notification-toast),
.alert.alert-warning {
background: var(--color-alert-warning-bg);
color: var(--color-alert-warning-text);
border: 1px solid var(--color-alert-warning-border);
border-radius: var(--radius);
padding: var(--space-md);
margin: var(--space-lg) 0;
}
.alert-info:not(.notification-toast) {
background: linear-gradient(135deg, #d1ecf1, #bee5eb);
color: #0c5460;
border-left: 4px solid #17a2b8;
}
/* Дополнительные стили для alert (исключаем notification-toast) */
.alert:not(.notification-toast) i {
font-size: 1.1rem;
flex-shrink: 0;
}
.alert-success:not(.notification-toast) i {
color: #28a745;
}
.alert-danger:not(.notification-toast) i {
color: #dc3545;
}
.alert-warning:not(.notification-toast) i {
color: #ffc107;
}
.alert-info:not(.notification-toast) i {
color: #17a2b8;
}
/* Стили для уведомлений system-logs (справа, как в других модулях) */
.system-logs-notification {
position: fixed !important;
top: 20px !important;
right: 20px !important;
left: auto !important;
bottom: auto !important;
z-index: 10000 !important;
min-width: 300px;
max-width: 500px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
border-radius: 4px !important;
padding: 12px 40px 12px 16px !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
animation: slideInRight 0.3s ease-out;
opacity: 0;
transition: top 0.3s ease-out, opacity 0.3s ease-out, transform 0.3s ease-in;
margin: 0 !important;
margin-bottom: 0 !important;
float: none !important;
border: 1px solid transparent !important;
}
.system-logs-notification.show {
opacity: 1;
transform: translateX(0);
}
.system-logs-notification.hide {
opacity: 0;
transform: translateX(100%);
}
.system-logs-notification .btn-close {
margin-left: auto;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.system-logs-notification .btn-close:hover {
opacity: 1;
}
/* Анимации перенесены в animations.css */
/* Применение анимаций */
.dashboard-section {
animation: fadeInUp 0.6s ease-out;
}
/* === LUXURY ALERT STYLES === */
.luxury-alert-danger {
background: linear-gradient(135deg, #ff6b6b, #ee5a52);
color: white;
padding: 16px 20px;
border-radius: 12px;
margin: 20px 0;
border: none;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
}
.luxury-alert-success {
background: linear-gradient(135deg, #51cf66, #40c057);
color: white;
padding: 16px 20px;
border-radius: 12px;
margin: 20px 0;
border: none;
box-shadow: 0 4px 15px rgba(51, 207, 102, 0.3);
display: flex;
align-items: center;
gap: 12px;
font-weight: 500;
}
/* === BUTTON GRID MODERN === */
.button-grid-modern {
display: flex;
gap: 12px;
margin-top: 16px;
}
/* === LUXURY ICON MEDIUM === */
.luxury-icon-medium {
font-size: 1.5rem;
color: var(--luxury-gold);
margin-right: 12px;
}
/* Удалено для избежания конфликтов - дублирующие стили */
/* Стили .dashboard-section из buttons.css */
.dashboard-section {
padding: 20px;
border-radius: 16px;
}
/* Параллельное размещение блоков путей к логам */
.log-paths-container {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.log-paths-container > div {
flex: 1 1 30%;
min-width: 280px;
}
/* Улучшенные стили для hero секции */
.hero-section-modern::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
opacity: 0;
transition: opacity 0.3s ease;
pointer-events: none;
}
.hero-section-modern:hover::after {
opacity: 1;
}
/* Улучшенные стили для hero статистики */
.hero-stat {
position: relative;
overflow: hidden;
}
.hero-stat::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 ease;
}
.hero-stat:hover::before {
left: 100%;
}
.hero-stat:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
/* Улучшенные стили для dashboard секций */
.dashboard-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 20px;
pointer-events: none;
}
.dashboard-section:hover::before {
opacity: 1;
}
/* Улучшенные стили для кнопки обновления */
.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;
}
/* Улучшенные стили для статистики */
.stat-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 16px;
pointer-events: none;
}
.stat-card:hover::before {
opacity: 1;
}
/* Улучшенные стили для footer */
.dashboard-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 20px;
pointer-events: none;
}
.dashboard-footer:hover::before {
opacity: 1;
}
/* Улучшенные стили для уведомлений */
.notification::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 16px;
pointer-events: none;
}
.notification:hover::before {
opacity: 1;
}
/* Улучшенные стили для активности */
.activity-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 12px;
pointer-events: none;
}
.activity-item:hover::before {
opacity: 1;
}
/* Улучшенные стили для состояния системы */
.health-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 16px;
pointer-events: none;
}
.health-card:hover::before {
opacity: 1;
}
/* Улучшенные стили для прогресс-баров */
.progress-fill {
position: relative;
overflow: hidden;
}
.progress-fill::after {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
animation: shimmer 2s infinite;
}
/* Анимация shimmer уже есть в animations.css */
/* Улучшенные стили для иконок в статистике */
.stat-icon {
position: relative;
overflow: hidden;
}
.stat-icon::after {
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: 16px;
}
.stat-card:hover .stat-icon::after {
opacity: 1;
}
/* Улучшенные стили для заголовков секций */
.section-header h2 {
position: relative;
overflow: hidden;
}
.section-header h2::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: var(--api-primary-gradient);
transition: width 0.3s ease;
}
.section-header:hover h2::after {
width: 100%;
}
/* Улучшенные стили для hero заголовка */
.hero-section-modern h1 {
position: relative;
overflow: hidden;
}
.hero-section-modern h1::after {
content: '';
position: absolute;
bottom: -5px;
left: 50%;
width: 0;
height: 3px;
background: rgba(255, 255, 255, 0.5);
transition: all 0.3s ease;
transform: translateX(-50%);
}
.hero-section-modern:hover h1::after {
width: 100px;
}
/* Улучшенные стили для hero описания */
.hero-section-modern p {
position: relative;
overflow: hidden;
}
.hero-section-modern p::after {
content: '';
position: absolute;
bottom: -2px;
left: 50%;
width: 0;
height: 1px;
background: rgba(255, 255, 255, 0.3);
transition: width 0.3s ease;
transform: translateX(-50%);
}
.hero-section-modern:hover p::after {
width: 200px;
}
/* Улучшенные стили для hero статистики */
.hero-stat {
position: relative;
overflow: hidden;
}
.hero-stat::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255,255,255,0.1), rgba(255,255,255,0.05));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 16px;
}
.hero-stat:hover::after {
opacity: 1;
}
/* Улучшенные стили для чисел в hero статистике */
.stat-number {
position: relative;
overflow: hidden;
}
.stat-number::after {
content: '';
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background: rgba(255, 255, 255, 0.5);
transition: width 0.3s ease;
}
.hero-stat:hover .stat-number::after {
width: 100%;
}
/* Улучшенные стили для меток в hero статистике */
.stat-label {
position: relative;
overflow: hidden;
}
.stat-label::after {
content: '';
position: absolute;
bottom: -1px;
left: 0;
width: 0;
height: 1px;
background: rgba(255, 255, 255, 0.3);
transition: width 0.3s ease;
}
.hero-stat:hover .stat-label::after {
width: 100%;
}
/* Улучшенные стили для кнопки обновления */
.btn-refresh {
position: relative;
overflow: hidden;
}
.btn-refresh::after {
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::after {
opacity: 1;
}
/* Улучшенные стили для иконки в кнопке обновления */
.btn-refresh i {
position: relative;
z-index: 2;
}
/* Улучшенные стили для текста в кнопке обновления */
.btn-refresh {
position: relative;
z-index: 2;
}
/* Улучшенные стили для состояния disabled */
.btn-refresh:disabled {
position: relative;
z-index: 1;
}
.btn-refresh:disabled::after {
opacity: 0.3;
}
/* Улучшенные стили для состояния loading */
.btn-refresh.loading {
background: linear-gradient(135deg, #6c757d, #5a6268);
cursor: not-allowed;
}
.btn-refresh.loading i {
animation: spin 1s linear infinite;
}
/* Анимация spin уже есть в animations.css */
/* Удалено - дублирующие стили */
/* Улучшенные стили для hero секции */
.hero-section-modern {
position: relative;
z-index: 1;
}
.hero-section-modern::before {
z-index: 0;
}
.hero-section-modern::after {
z-index: 0;
}
.hero-content {
position: relative;
z-index: 2;
}
/* Улучшенные стили для dashboard секций */
.dashboard-section {
position: relative;
z-index: 1;
}
.dashboard-section::before {
z-index: 0;
}
.section-header {
position: relative;
z-index: 2;
}
.section-header h2 {
position: relative;
z-index: 2;
}
.section-header h2::after {
z-index: 1;
}
.btn-refresh {
position: relative;
z-index: 2;
}
/* Стили для 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;
}
.footer-info {
display: flex;
justify-content: center;
gap: 30px;
flex-wrap: wrap;
}
.footer-info p {
margin: 0;
color: var(--api-text-muted);
font-size: 0.9rem;
display: flex;
align-items: center;
gap: 8px;
}
.footer-info i {
color: var(--api-primary-color);
}
/* Стили для секций дашборда */
.dashboard-section {
background: white;
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
}
.dashboard-section:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* Стили для кнопки обновления */
.btn-refresh {
background: linear-gradient(135deg, var(--api-primary-color), var(--api-accent-color));
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);
}
.btn-refresh:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, var(--api-accent-color), var(--api-primary-color));
}
.btn-refresh:disabled {
opacity: 0.7;
cursor: not-allowed;
transform: none;
}
.btn-refresh i {
transition: transform 0.3s ease;
}
.btn-refresh:hover i {
transform: rotate(180deg);
}
.quick-action-btn:hover .quick-action-arrow {
background: var(--api-primary-color);
color: white;
transform: translateX(5px);
opacity: 1;
}
.activity-list {
background: white;
border-radius: var(--api-border-radius);
padding: 20px;
max-height: 400px;
overflow-y: auto;
}
.activity-item {
display: flex;
align-items: center;
gap: 15px;
padding: 15px 0;
border-bottom: 1px solid var(--api-border-color);
transition: var(--api-transition);
}
.activity-item:hover {
background: var(--api-light-bg);
margin: 0 -20px;
padding: 15px 20px;
}
.activity-item:last-child {
border-bottom: none;
}
.activity-icon {
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--api-primary-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
flex-shrink: 0;
}
.activity-content {
flex: 1;
}
.activity-content h5 {
color: var(--api-text-color);
font-size: 0.95rem;
font-weight: 600;
margin: 0 0 3px 0;
}
.activity-content p {
color: var(--api-text-muted);
font-size: 0.85rem;
margin: 0 0 3px 0;
}
.activity-content small {
color: var(--api-text-muted);
font-size: 0.75rem;
}
.activity-status {
font-size: 0.8rem;
font-weight: 500;
}
.assistants-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
.assistant-card {
background: white;
border-radius: var(--api-border-radius);
padding: 20px;
box-shadow: var(--api-shadow-light);
border: 1px solid var(--api-border-color);
transition: var(--api-transition);
position: relative;
}
.assistant-card:hover {
box-shadow: var(--api-shadow-medium);
transform: translateY(-2px);
border-color: var(--api-primary-color);
}
.assistant-avatar {
width: 60px;
height: 60px;
border-radius: 50%;
background: var(--api-primary-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.5rem;
margin-bottom: 15px;
}
.assistant-rank {
position: absolute;
top: 15px;
right: 15px;
width: 30px;
height: 30px;
border-radius: 50%;
background: var(--api-primary-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 0.9rem;
font-weight: 600;
}
.assistant-info {
margin-bottom: 15px;
}
.assistant-info h5 {
color: var(--api-text-color);
font-size: 1.1rem;
font-weight: 600;
margin: 0 0 5px 0;
}
.assistant-info p {
color: var(--api-text-muted);
font-size: 0.9rem;
margin: 0;
line-height: 1.4;
}
.assistant-stats {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 15px;
border-top: 1px solid var(--api-border-color);
}
.assistant-actions {
display: flex;
gap: 10px;
align-items: center;
}
.assistant-actions small {
color: var(--api-text-muted);
font-size: 0.8rem;
}
.health-check-list {
background: white;
border-radius: var(--api-border-radius);
padding: 20px;
margin-top: 20px;
}
.health-check-item {
display: flex;
justify-content: space-between;
align-items: center;
padding: 12px 0;
border-bottom: 1px solid var(--api-border-color);
transition: var(--api-transition);
}
.health-check-item:hover {
background: var(--api-light-bg);
margin: 0 -20px;
padding: 12px 20px;
}
.health-check-name {
color: var(--api-text-color);
font-weight: 500;
}
.health-check-status {
font-size: 0.9rem;
font-weight: 500;
}
.badge {
display: inline-flex;
align-items: center;
padding: 4px 8px;
border-radius: 12px;
font-size: 0.75rem;
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.badge-success {
background: rgba(40, 167, 69, 0.1);
color: var(--api-success-color);
border: 1px solid rgba(40, 167, 69, 0.2);
}
.badge-secondary {
background: rgba(108, 117, 125, 0.1);
color: var(--api-text-muted);
border: 1px solid rgba(108, 117, 125, 0.2);
}
.badge-danger {
background: rgba(220, 53, 69, 0.1);
color: var(--api-danger-color);
border: 1px solid rgba(220, 53, 69, 0.2);
}
.badge-warning {
background: rgba(255, 193, 7, 0.1);
color: var(--api-warning-color);
border: 1px solid rgba(255, 193, 7, 0.2);
}
.badge-info {
background: rgba(0, 123, 255, 0.1);
color: var(--api-info-color);
border: 1px solid rgba(0, 123, 255, 0.2);
}
.badge i {
margin-right: 4px;
}
.info-display-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.info-label {
color: var(--api-text-muted);
font-size: 0.85rem;
font-weight: 500;
}
.info-value {
color: var(--api-text-color);
font-weight: 600;
}
.spinner-small {
width: 16px;
height: 16px;
border: 2px solid var(--api-border-color);
border-top: 2px solid var(--api-primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.spinner-medium {
width: 24px;
height: 24px;
border: 3px solid var(--api-border-color);
border-top: 3px solid var(--api-primary-color);
border-radius: 50%;
animation: spin 1s linear infinite;
}
.tooltip {
position: relative;
cursor: help;
}
.tooltip::after {
content: attr(data-tooltip);
position: absolute;
bottom: 100%;
left: 50%;
transform: translateX(-50%);
background: rgba(0, 0, 0, 0.8);
color: white;
padding: 8px 12px;
border-radius: var(--api-border-radius);
font-size: 0.8rem;
white-space: nowrap;
opacity: 0;
visibility: hidden;
transition: var(--api-transition);
z-index: 1000;
}
.tooltip:hover::after {
opacity: 1;
visibility: visible;
}
.progress-bar {
width: 100%;
height: 8px;
background: var(--api-border-color);
border-radius: 4px;
overflow: hidden;
margin: 10px 0;
}
.progress-fill {
height: 100%;
background: var(--api-primary-gradient);
transition: width 0.3s ease;
}
.progress-fill.success {
background: var(--api-success-color);
}
.progress-fill.warning {
background: var(--api-warning-color);
}
.progress-fill.danger {
background: var(--api-danger-color);
}
.code-block {
background: var(--api-light-bg);
border: 1px solid var(--api-border-color);
border-radius: var(--api-border-radius);
padding: 15px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
overflow-x: auto;
margin: 10px 0;
}
.code-inline {
background: var(--api-light-bg);
border: 1px solid var(--api-border-color);
border-radius: 4px;
padding: 2px 6px;
font-family: 'Courier New', monospace;
font-size: 0.85rem;
color: var(--api-text-color);
}
/* === 🔧 API ADMIN MODAL STYLES === */
.modal {
position: fixed !important;
top: 0 !important;
left: 0 !important;
width: 100% !important;
height: 100% !important;
background: rgba(0, 0, 0, 0.5);
display: none;
/* КРИТИЧНО: Обеспечиваем вертикальное и горизонтальное центрирование через flexbox */
align-items: center !important;
justify-content: center !important;
z-index: 1055 !important;
opacity: 0;
visibility: hidden;
transition: opacity 0.15s linear, visibility 0.15s linear;
overflow-x: hidden;
overflow-y: auto;
}
.modal.active,
.modal.show {
opacity: 1 !important;
visibility: visible !important;
display: flex !important; /* Flexbox для центрирования */
align-items: center !important; /* Вертикальное центрирование */
justify-content: center !important; /* Горизонтальное центрирование */
}
.modal.fade {
opacity: 0;
visibility: hidden;
transition: opacity 0.15s linear, visibility 0.15s linear;
/* КРИТИЧНО: Обеспечиваем центрирование даже когда скрыто */
align-items: center !important;
justify-content: center !important;
}
.modal.fade.show,
.modal.fade.active {
opacity: 1 !important;
visibility: visible !important;
display: flex !important; /* Flexbox для центрирования */
align-items: center !important; /* Вертикальное центрирование */
justify-content: center !important; /* Горизонтальное центрирование */
}
/* === 🎯 МОДАЛЬНЫЕ ОКНА С МАТЕМАТИЧЕСКИМИ РАСЧЕТАМИ === */
/*
* Математические принципы:
* - Золотое сечение (φ = 1.618) для пропорций
* - Оптимальная ширина строки: 45-75 символов (ch units)
* - Viewport-based sizing: clamp(min, preferred, max)
* - Пропорциональные отступы: padding = width * 0.05-0.08
* - Высота окна: min(90vh, content + padding)
*/
/* Базовые стили для мобильных и планшетов (до 1025px) */
.modal-dialog {
position: relative;
width: auto;
margin: 0 auto !important; /* Горизонтальное центрирование */
min-height: auto !important;
max-width: 95vw !important; /* Адаптивная ширина для мобильных и планшетов */
pointer-events: none;
display: flex;
align-items: center;
/* КРИТИЧНО: Обеспечиваем центрирование модального окна */
align-self: center !important; /* Центрирование по вертикали внутри flex-контейнера */
justify-self: center !important; /* Центрирование по горизонтали внутри flex-контейнера */
}
.modal-dialog.modal-sm {
margin: 0 auto !important;
max-width: 95vw !important; /* Адаптивная ширина */
width: auto !important;
}
.modal-dialog.modal-lg {
margin: 0 auto !important;
max-width: 95vw !important; /* Адаптивная ширина */
width: auto !important;
}
.modal-dialog.modal-xl {
margin: 0 auto !important;
max-width: 95vw !important; /* Адаптивная ширина */
width: auto !important;
}
/* Исключение для #loggingSettingsModal - размеры задаются в адаптивных файлах */
#loggingSettingsModal.modal .modal-dialog.modal-lg {
/* Размеры переопределяются в desktop.css, tablet.css, mobile.css */
max-width: none;
width: auto;
}
.modal-content {
position: relative;
display: flex;
flex-direction: column;
width: 100%;
pointer-events: auto;
background-color: #fff;
background-clip: padding-box;
border: 1px solid rgba(0, 0, 0, 0.2);
padding: 0 !important;
border-radius: 12px !important;
margin: 0 auto !important; /* КРИТИЧНО: Горизонтальное центрирование контента */
overflow: hidden !important;
outline: 0;
max-width: 100%;
box-shadow: var(--api-shadow-heavy, 0 clamp(0.5rem, 1vw, 1.5rem) clamp(1rem, 2vw, 3rem) rgba(0, 0, 0, 0.15));
transform: scale(0.9);
transition: transform 0.15s ease-out;
/* КРИТИЧНО: Обеспечиваем центрирование контента внутри dialog */
align-self: center !important;
}
.modal.active .modal-content,
.modal.show .modal-content {
transform: scale(1);
}
.modal-header {
display: flex;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
position: relative; /* Для абсолютного позиционирования кнопки закрытия */
/* Убеждаемся что header на всю ширину modal-content */
width: 100%;
box-sizing: border-box;
margin: 0;
/* Внутренние отступы: 5px согласно архитектуре */
padding: 5px !important;
/* Минимальная высота: auto для компактного отображения */
min-height: auto;
border-bottom: 1px solid rgba(0, 0, 0, 0.125);
/* Радиус: соответствует modal-content минус 1px для визуального соответствия */
border-top-left-radius: calc(clamp(0.5rem, 1.5vw, 1rem) - 1px);
border-top-right-radius: calc(clamp(0.5rem, 1.5vw, 1rem) - 1px);
background: var(--api-primary-gradient, linear-gradient(135deg, #0c3c78 0%, #0b7a3e 100%));
color: white;
}
.modal-header .btn-close {
position: absolute !important; /* Абсолютное позиционирование */
top: 0.5rem !important; /* Отступ сверху */
right: 0.5rem !important; /* Отступ справа - в самом правом верхнем углу */
padding: 0.5rem !important;
margin: 0 !important; /* Убираем margin, используем position */
width: 2rem !important;
height: 2rem !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
background: #ffffff !important; /* Белый круглый фон */
border: 0 !important;
border-radius: 50% !important; /* Круглый фон */
cursor: pointer !important;
font-size: 1.25rem !important;
font-weight: 700 !important;
line-height: 1 !important;
color: #0c3c78 !important; /* Синий цвет X - как у кнопок */
-webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
-webkit-background-clip: unset !important; /* Убираем градиентный фон */
background-clip: unset !important; /* Убираем градиентный фон */
filter: none !important; /* Убираем инверсию */
opacity: 1 !important;
text-shadow: none !important;
transition: all 0.2s ease-in-out !important;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
z-index: 10 !important; /* Поверх других элементов */
}
/* Генерация символа × для кнопки закрытия, если не указан в HTML */
.modal-header .btn-close:empty::before {
content: "×";
display: block;
font-size: 1.5rem;
line-height: 1;
font-weight: 700;
color: #0c3c78 !important;
-webkit-text-fill-color: #0c3c78 !important;
}
.modal-header .btn-close:hover {
background: #f8f9fa !important; /* Светло-серый фон при наведении */
color: #0c3c78 !important; /* Синий цвет X */
-webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
opacity: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transform: scale(1.05);
}
.modal-header .btn-close:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(12, 60, 120, 0.25) !important; /* Синий фокус */
background: #ffffff !important;
}
.modal-title {
margin: 0;
padding: 5px;
/* Оптимальная высота строки: 1.5 для читаемости */
line-height: 1.5;
/* Размер шрифта: пропорционально размеру окна (1.3rem базовый, адаптивный) */
font-size: clamp(1.25rem, calc(1.3rem + 0.5vw), 1.75rem);
font-weight: 600;
color: inherit;
/* Максимальная ширина: 80% от ширины header для кнопки закрытия */
max-width: calc(100% - 3rem);
}
/* Переопределение для белого текста в заголовках модальных окон */
/* Переопределяет стили из typography.css, которые делают текст прозрачным */
.modal-header .modal-title {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
-webkit-background-clip: unset !important;
background-clip: unset !important;
background: none !important;
}
.modal-header .modal-title i,
.modal-header .modal-title::before {
color: #ffffff !important;
-webkit-text-fill-color: #ffffff !important;
background: none !important;
}
.modal-header * {
color: #ffffff !important;
}
/* КРИТИЧНО: Переопределяем цвет для кнопки закрытия - синий X на белом фоне */
/* Используем максимальную специфичность для гарантированного переопределения */
/* Это правило должно быть ПОСЛЕ .modal-header * для правильного каскада */
/* Синий цвет #0c3c78 - как у основных кнопок проекта */
.modal-header .btn-close,
.modal-header * .btn-close,
.modal-header button.btn-close,
.modal-header button[class*="btn-close"],
.modal-header [class*="btn-close"],
button.modal-header .btn-close,
.modal.fade .modal-dialog .modal-content .modal-header .btn-close,
.modal .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 {
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;
}
/* Внутренние отступы для прямых дочерних элементов модальных окон */
.modal-header > *,
.modal-body > *,
.modal-footer > * {
padding: 5px;
margin: 0;
}
.modal-body {
position: relative;
flex: 1 1 auto;
/* Внутренние отступы: 5px согласно архитектуре */
padding: 5px !important;
margin: 0;
overflow-y: auto;
/* Высота: 90vh минус высота header (clamp(3.5rem, 6vh, 5rem)) и footer (clamp(4rem, 7vh, 6rem)) */
max-height: calc(90vh - clamp(3.5rem, 6vh, 5rem) - clamp(4rem, 7vh, 6rem));
color: #212529;
/* Оптимальная ширина строки для чтения: 45-75 символов */
max-width: 75ch;
margin: 0 auto;
}
/* Стили для элементов внутри .modal-body с отступами 5px */
.modal-body .mb-3 {
margin-bottom: 0;
margin-top: 0;
padding: 5px;
}
.modal-body p {
margin-bottom: 0;
margin-top: 0;
padding: 5px;
}
.modal-body ul,
.modal-body ol {
margin-bottom: 0;
margin-top: 0;
padding-left: 1.5rem;
padding-top: 5px;
padding-bottom: 5px;
}
.modal-body .form-group {
margin-bottom: 0;
padding: 5px;
}
.modal-body .alert {
margin-top: 0;
margin-bottom: 0;
padding: 5px !important;
}
.modal-body .text-center {
padding: 5px;
}
.modal-body table {
margin-bottom: 0;
}
.modal-body table thead th {
padding: 5px;
}
.modal-body table tbody td {
padding: 5px;
}
.modal-body p,
.modal-body div,
.modal-body form > * {
padding: 5px;
margin: 0;
}
/* === TABS COMPONENT === */
/* Классы для вкладок в модальных окнах и других компонентах */
.tabs-container {
width: 100%;
display: flex;
flex-direction: column;
}
.tabs-nav {
display: flex;
gap: 0;
border-bottom: 2px solid var(--color-border, #e9ecef);
margin: 0;
padding: 0;
list-style: none;
}
.tab-btn {
padding: 0.5rem 1rem;
border: none;
background: transparent;
border-bottom: 3px solid transparent;
color: var(--color-text-secondary, #666);
cursor: pointer;
font-weight: 500;
font-size: 0.95rem;
transition: var(--transition, all 0.3s ease);
position: relative;
display: flex;
align-items: center;
gap: 0.5rem;
}
.tab-btn:hover {
color: var(--color-primary, #0c3c78);
background-color: rgba(12, 60, 120, 0.05);
}
.tab-btn.active {
color: var(--color-primary, #0c3c78);
border-bottom-color: var(--color-primary, #0c3c78);
font-weight: 600;
}
.tab-btn i {
font-size: 0.9rem;
}
.tabs-content {
width: 100%;
padding: 1rem 0;
}
.tab-pane {
display: none;
width: 100%;
animation: fadeIn 0.3s ease-in-out;
}
.tab-pane.active {
display: block;
}
/* === МОДАЛЬНЫЕ ОКНА: КЛАССЫ С ПРЕФИКСОМ .modal- === */
/* Специфичные классы для модальных окон с префиксом .modal- */
.modal-tabs-nav-container {
display: flex;
gap: 0;
border-bottom: 2px solid #e9ecef;
margin: 0;
}
.modal-tab-btn-active {
padding: 0.25rem 0.5rem;
border: none;
background: transparent;
border-bottom: 3px solid #0c3c78;
color: #0c3c78;
cursor: pointer;
font-weight: 500;
}
.modal-tab-btn-inactive {
padding: 0.25rem 0.5rem;
border: none;
background: transparent;
border-bottom: 3px solid transparent;
color: #666;
cursor: pointer;
font-weight: 500;
}
.modal-tab-pane-hidden {
display: none !important;
}
/* Заголовки модальных окон с градиентами */
.modal-header-primary {
background: linear-gradient(135deg, #0c3c78 0%, #0b7a3e 100%);
}
.modal-header-warning {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
}
.modal-header-success {
background: linear-gradient(135deg, #0b7a3e 0%, #28a745 100%);
}
.modal-header-danger {
background: linear-gradient(135deg, #dc3545 0%, #c82333 100%);
}
.modal-body-scrollable {
max-height: 60vh;
overflow-y: auto;
}
.modal-body-center {
text-align: center;
padding: 0;
}
.modal-footer-center {
justify-content: center;
}
.modal-body .form-control:not(select):focus,
.modal-body input.form-control:focus,
.modal-body textarea.form-control:focus {
color: #000000 !important; /* Используем значения из глобальных стилей */
background-color: #ffffff !important;
border-color: #667eea !important; /* Используем значения из глобальных стилей */
outline: none !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important; /* Используем значения из глобальных стилей */
background-image: none !important; /* ВАЖНО: Убираем background-image для input */
}
.modal-body .form-select:focus,
.modal-body select.form-control:focus {
color: #000000 !important; /* Используем значения из глобальных стилей */
background-color: #ffffff !important;
border-color: #667eea !important; /* Используем значения из глобальных стилей */
outline: none !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important; /* Используем значения из глобальных стилей */
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}
.modal-footer {
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
justify-content: flex-end;
/* Убеждаемся что footer на всю ширину modal-content */
width: 100%;
box-sizing: border-box;
margin: 0;
/* Внутренние отступы: 5px согласно архитектуре */
padding: 5px !important;
/* Минимальная высота: auto для компактного отображения */
min-height: auto;
border-top: 1px solid rgba(0, 0, 0, 0.125);
/* Радиус: соответствует modal-content минус 1px */
border-bottom-right-radius: calc(clamp(0.5rem, 1.5vw, 1rem) - 1px);
border-bottom-left-radius: calc(clamp(0.5rem, 1.5vw, 1rem) - 1px);
background-color: #f8f9fa;
/* Отступ между элементами: пропорционально размеру окна */
gap: clamp(0.5rem, 1vw, 1rem);
}
.modal-footer > * {
/* Внутренние отступы: 5px согласно архитектуре */
padding: 5px;
margin: 0;
}
.modal-footer button {
margin: 0;
padding: 5px 10px !important;
}
/* Стили для flex контейнера в footer с правильным выравниванием */
.modal-footer .d-flex {
display: flex;
width: 100%;
box-sizing: border-box;
}
.modal-footer .d-flex.justify-content-between {
justify-content: space-between;
align-items: center;
/* Правильный отступ между группами кнопок */
gap: clamp(1rem, 2vw, 1.5rem);
}
/* Группы кнопок в footer */
.modal-footer .d-flex > div {
display: flex;
align-items: center;
/* Отступ между кнопками в группе */
gap: clamp(0.5rem, 1vw, 0.75rem);
flex-wrap: wrap;
}
.modal-footer .btn {
padding: 0.5rem 1rem;
font-size: 1rem;
line-height: 1.5;
border-radius: 0.375rem;
transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
}
.modal-footer .btn-secondary {
color: #fff;
background-color: #6c757d;
border-color: #6c757d;
}
.modal-footer .btn-secondary:hover {
color: #fff;
background-color: #5c636a;
border-color: #565e64;
}
.modal-footer .btn-primary {
color: #fff;
background-color: #0d6efd;
border-color: #0d6efd;
}
.modal-footer .btn-primary:hover {
color: #fff;
background-color: #0b5ed7;
border-color: #0a58ca;
}
.alert {
padding: 15px 20px;
border-radius: var(--api-border-radius);
margin-bottom: 20px;
border: 1px solid transparent;
display: flex;
align-items: center;
gap: 10px;
}
/* Стили notification-toast и message-container — в notifications.css */
/* Цвета для инлайн-алертов (не message-container, не notification-toast) */
.alert:not(.notification-toast) i {
font-size: 1.1rem;
flex-shrink: 0;
}
.alert:not(.notification-toast).alert-success {
background: linear-gradient(135deg, #d4edda, #c3e6cb);
color: #155724;
border-left: 4px solid #28a745;
}
.alert:not(.notification-toast).alert-danger {
background: linear-gradient(135deg, #f8d7da, #f5c6cb);
color: #721c24;
border-left: 4px solid #dc3545;
}
.alert:not(.notification-toast).alert-warning {
background: linear-gradient(135deg, #fff3cd, #ffeaa7);
color: #856404;
border-left: 4px solid #ffc107;
}
.alert:not(.notification-toast).alert-info {
background: linear-gradient(135deg, #d1ecf1, #bee5eb);
color: #0c5460;
border-left: 4px solid #17a2b8;
}
/* === SUPER ADMIN DASHBOARD COMPONENTS === */
/* Dashboard Grid */
.dashboard-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
gap: 30px;
margin-bottom: 30px;
}
.dashboard-section {
background: var(--color-bg-card);
border-radius: var(--radius);
padding: 25px;
box-shadow: var(--shadow-md);
border: 1px solid var(--color-border);
}
.section-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 2px solid var(--color-bg-light);
}
.section-header h2 {
font-size: 1.3rem;
color: var(--color-text-main);
margin: 0;
}
.section-header h2 i {
color: var(--color-accent);
margin-right: 10px;
}
.section-header h3 {
font-size: 1.1rem;
color: var(--color-text-main);
margin: 0;
}
.section-header h3 i {
color: var(--color-accent);
margin-right: 10px;
}
.section-header-content {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
}
.section-actions {
display: flex;
gap: 10px;
}
/* Stats Grid Modern */
.stats-grid-modern {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
/* System Health Grid */
.system-health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 20px;
}
.health-card {
background: var(--color-bg-card);
border-radius: var(--radius);
padding: 20px;
border: 1px solid var(--color-border);
}
.health-header {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 15px;
}
.health-header i {
font-size: 1.2rem;
color: var(--color-accent);
}
.health-header h4 {
margin: 0;
font-size: 1rem;
color: var(--color-text-main);
text-align: left;
}
.health-progress {
display: flex;
align-items: flex-start;
gap: 10px;
margin-bottom: 10px;
}
.health-value {
font-weight: 600;
color: var(--color-text-main);
min-width: 40px;
}
.health-card small {
color: var(--color-text-muted);
text-align: left;
display: block;
font-size: 0.8rem;
}
/* Results Container */
.results-container {
max-height: 400px;
overflow-y: auto;
padding: 1rem;
background: var(--color-bg-light);
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
.result-item {
background: var(--color-bg-card);
border-radius: var(--radius);
padding: 1rem;
margin-bottom: 1rem;
border-left: 4px solid var(--color-primary);
box-shadow: var(--shadow-sm);
animation: fadeIn 0.3s ease;
}
.result-item.success {
border-left-color: var(--color-accent);
}
.result-item.error {
border-left-color: var(--color-error);
}
.result-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 0.5rem;
}
.result-title {
font-weight: 600;
color: var(--color-text-main);
}
.result-time {
font-size: 0.8rem;
color: var(--color-text-secondary);
}
.result-status {
font-weight: 500;
margin-bottom: 0.5rem;
}
.result-status.success {
color: var(--color-accent);
}
.result-status.error {
color: var(--color-error);
}
.result-message {
color: var(--color-text-secondary);
margin-bottom: 0.5rem;
}
.result-data {
background: var(--color-bg-light);
border-radius: var(--radius-sm);
padding: 0.5rem;
font-family: 'Courier New', monospace;
font-size: 0.8rem;
overflow-x: auto;
border: 1px solid var(--color-border);
}
/* Table Container */
.table-container {
overflow-x: auto;
border-radius: var(--radius);
border: 1px solid var(--color-border);
}
/* Data Table */
.data-table {
width: 100%;
border-collapse: collapse;
background: var(--color-bg-card);
border-radius: var(--radius);
overflow: hidden;
box-shadow: var(--shadow-sm);
}
.data-table th,
.data-table td {
padding: 1rem;
text-align: left;
border-bottom: 1px solid var(--color-border);
}
.data-table th {
background: var(--color-bg-light);
font-weight: 600;
color: var(--color-text-main);
}
.data-table td {
color: var(--color-text-secondary);
}
.data-table code {
background: var(--color-bg-light);
padding: 0.2rem 0.4rem;
border-radius: var(--radius-sm);
font-family: 'Courier New', monospace;
border: 1px solid var(--color-border);
}
/* Animation for Results */
/* Анимация fadeIn уже есть в animations.css */
/* Responsive Design for Super Admin */
/* Адаптивные стили перенесены в mobile.css согласно архитектуре */
/* === АДАПТИВНЫЕ СТИЛИ ДЛЯ ТАБЛИЦЫ МЕНЕДЖЕРОВ === */
/* Преобразование таблицы в карточки на мобильных устройствах */
/* Адаптивные стили для планшетов перенесены в tablet.css согласно архитектуре */
/* Адаптивные стили для таблицы менеджеров перенесены в mobile.css и tablet.css согласно архитектуре */
/* === СТИЛИ ДЛЯ ТАБЛИЦЫ КОМПАНИЙ === */
.dashboard-section .table-container {
max-width: 100%;
overflow-x: visible;
}
.companies-table {
width: 100%;
table-layout: auto;
max-width: 100%;
}
.companies-table .col-id {
width: 50px;
min-width: 50px;
}
.companies-table .col-identifier-domain {
width: 16%;
min-width: 140px;
}
.companies-table .col-name {
width: 18%;
min-width: 150px;
}
.companies-table .col-email {
width: 18%;
min-width: 150px;
}
.companies-table .col-tariff {
width: 10%;
min-width: 90px;
}
.companies-table .col-date-status {
width: 15%;
min-width: 140px;
}
.companies-table .col-actions {
width: 19%;
min-width: 120px;
}
.companies-table td {
overflow: hidden;
text-overflow: ellipsis;
}
.companies-table .col-name .company-name,
.companies-table .col-email a {
display: inline-block;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* Стили для объединенной ячейки Идентификатор и Домен */
.companies-table .identifier-domain-cell {
display: flex;
flex-direction: column;
gap: 6px;
}
.companies-table .identifier-domain-cell .identifier-part {
display: flex;
align-items: center;
}
.companies-table .identifier-domain-cell .identifier-part .slug-code {
font-weight: 600;
color: var(--color-text-main);
background: var(--color-bg-light);
padding: 0.25rem 0.5rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
}
.companies-table .identifier-domain-cell .domain-part {
display: flex;
align-items: center;
}
.companies-table .identifier-domain-cell .domain-part .domain-link {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: 100%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 0.9rem;
color: var(--color-primary);
text-decoration: none;
}
.companies-table .identifier-domain-cell .domain-part .domain-link:hover {
text-decoration: underline;
}
/* Стили для объединенной ячейки Дата и Статус */
.companies-table .date-status-cell {
display: flex;
flex-direction: column;
gap: 6px;
}
.companies-table .date-status-cell .date-part {
font-size: 0.9rem;
color: var(--color-text-secondary);
}
.companies-table .date-status-cell .status-part {
display: flex;
align-items: center;
}
/* Стили для информации о компании */
.companies-table .company-info {
display: flex;
align-items: center;
gap: 10px;
}
.companies-table .company-logo {
width: 32px;
height: 32px;
border-radius: var(--radius-sm);
object-fit: cover;
border: 1px solid var(--color-border);
flex-shrink: 0;
}
.companies-table .company-name {
font-weight: 600;
color: var(--color-text-main);
line-height: 1.4;
}
/* Стили для идентификатора компании */
.companies-table .slug-code {
font-family: 'Courier New', 'Monaco', monospace;
background: linear-gradient(135deg, var(--color-bg-light), var(--color-bg-card));
border: 1px solid var(--color-border);
padding: 0.35rem 0.65rem;
border-radius: var(--radius-sm);
font-size: 0.85rem;
font-weight: 600;
color: var(--color-primary);
display: inline-block;
transition: all 0.2s ease;
}
.companies-table .slug-code:hover {
background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
color: white;
border-color: var(--color-primary);
transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
/* Стили для ссылок */
.companies-table .domain-link {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
transition: all 0.2s ease;
padding: 2px 4px;
border-radius: var(--radius-sm);
}
.companies-table .domain-link:hover {
color: var(--color-accent);
background: var(--color-bg-light);
text-decoration: none;
}
.companies-table .domain-link .external-link-icon {
font-size: 0.75rem;
opacity: 0.7;
transition: opacity 0.2s ease;
}
.companies-table .domain-link:hover .external-link-icon {
opacity: 1;
}
.companies-table .email-link {
color: var(--color-text-secondary);
text-decoration: none;
transition: all 0.2s ease;
padding: 2px 4px;
border-radius: var(--radius-sm);
display: inline-block;
}
.companies-table .email-link:hover {
color: var(--color-primary);
background: var(--color-bg-light);
text-decoration: none;
}
/* Стили для бейджей */
.companies-table .tariff-badge {
display: inline-block;
padding: 0.4rem 0.75rem;
background: linear-gradient(135deg, #17a2b8, #007bff);
color: #ffffff !important;
border-radius: var(--radius-sm);
font-size: 0.85rem;
font-weight: 600;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.2);
min-width: 60px;
text-align: center;
white-space: nowrap;
}
.companies-table .tariff-badge:empty,
.companies-table .tariff-badge:empty::before {
content: attr(data-placeholder);
opacity: 0.7;
}
.companies-table .tariff-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
background: linear-gradient(135deg, #138496, #0056b3);
opacity: 1;
}
.companies-table .status-badge {
display: inline-block;
padding: 0.35rem 0.7rem;
border-radius: var(--radius-sm);
font-size: 0.8rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
transition: all 0.2s ease;
border: 1px solid rgba(255, 255, 255, 0.3);
}
.companies-table .status-badge.status-active {
background: linear-gradient(135deg, #28a745, #20c997) !important;
color: #ffffff !important;
}
.companies-table .status-badge.status-inactive {
background: linear-gradient(135deg, #ffc107, #fd7e14) !important;
color: #212529 !important;
}
.companies-table .status-badge:hover {
transform: translateY(-1px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
/* Стили для даты */
.companies-table .date-info {
color: var(--color-text-secondary);
font-size: 0.9rem;
font-weight: 500;
}
/* Улучшенные стили для строк таблицы */
.companies-table .table-row {
transition: all 0.2s ease;
border-left: 3px solid transparent;
}
.companies-table .table-row:hover {
background: var(--color-bg-light);
border-left-color: var(--color-primary);
transform: translateX(2px);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}
/* === COMPANY DETAILS MODAL === */
.company-details-modal {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.65);
backdrop-filter: blur(8px) saturate(180%);
-webkit-backdrop-filter: blur(8px) saturate(180%);
display: flex;
align-items: center;
justify-content: center;
z-index: 10000;
animation: fadeIn 0.3s ease-out;
padding: 20px;
}
@keyframes fadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
.company-details-modal-content {
max-width: 750px;
width: 100%;
max-height: 90vh;
display: flex;
flex-direction: column;
background: linear-gradient(145deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 20px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
overflow: hidden;
transform: scale(0.95) translateY(20px);
opacity: 0;
transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1),
opacity 0.4s ease-out,
box-shadow 0.3s ease;
position: relative;
}
.company-details-modal-content::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg,
#667eea 0%,
#764ba2 25%,
#f093fb 50%,
#4facfe 75%,
#00f2fe 100%);
background-size: 200% 100%;
animation: gradientShift 3s ease infinite;
}
@keyframes gradientShift {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Форма внутри модального окна должна использовать flex */
.company-details-modal-content form {
display: flex;
flex-direction: column;
flex: 1;
min-height: 0;
overflow: hidden;
}
.company-details-modal.show .company-details-modal-content,
.company-details-modal-content.show,
.company-details-modal[style*="display: block"] .company-details-modal-content,
.company-details-modal:not([style*="display: none"]) .company-details-modal-content {
transform: scale(1) translateY(0);
opacity: 1;
box-shadow: 0 25px 70px rgba(0, 0, 0, 0.35),
0 0 0 1px rgba(255, 255, 255, 0.1) inset;
}
.company-details-header {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 28px 32px;
display: flex;
justify-content: space-between;
align-items: center;
border-radius: 0;
flex-shrink: 0;
position: relative;
overflow: hidden;
box-shadow: 0 4px 20px rgba(102, 126, 234, 0.3);
}
.company-details-header::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
animation: rotate 20s linear infinite;
}
@keyframes rotate {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
.modal-header-content {
display: flex;
align-items: center;
gap: 16px;
}
.modal-icon {
width: 56px;
height: 56px;
background: rgba(255, 255, 255, 0.25);
backdrop-filter: blur(10px);
border-radius: 16px;
display: flex;
align-items: center;
justify-content: center;
font-size: 26px;
box-shadow: 0 8px 16px rgba(0, 0, 0, 0.15),
0 0 0 1px rgba(255, 255, 255, 0.2) inset;
transition: all 0.3s ease;
position: relative;
z-index: 1;
}
.modal-icon:hover {
transform: scale(1.1) rotate(5deg);
background: rgba(255, 255, 255, 0.35);
box-shadow: 0 12px 24px rgba(0, 0, 0, 0.2),
0 0 0 1px rgba(255, 255, 255, 0.3) inset;
}
.company-details-header h3 {
margin: 0;
font-size: 1.5rem;
font-weight: 600;
color: white;
}
.modal-subtitle {
margin: 4px 0 0 0;
font-size: 0.875rem;
opacity: 0.9;
color: white;
}
.company-details-body {
padding: 32px;
overflow-y: auto;
flex: 1;
min-height: 0;
max-height: calc(90vh - 200px);
background: #ffffff;
position: relative;
}
.company-details-body::-webkit-scrollbar {
width: 8px;
}
.company-details-body::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
.company-details-body::-webkit-scrollbar-thumb {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 10px;
}
.company-details-body::-webkit-scrollbar-thumb:hover {
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
/* Улучшенные стили для форм внутри модального окна */
.company-details-body .form-group {
margin-bottom: 24px;
position: relative;
animation: slideInUp 0.4s ease-out;
animation-fill-mode: both;
}
/* Убеждаемся, что нет лишних псевдоэлементов */
.company-details-body .form-group::before,
.company-details-body .form-group::after {
display: none !important;
content: none !important;
}
.company-details-body .form-group:nth-child(1) { animation-delay: 0.05s; }
.company-details-body .form-group:nth-child(2) { animation-delay: 0.1s; }
.company-details-body .form-group:nth-child(3) { animation-delay: 0.15s; }
.company-details-body .form-group:nth-child(4) { animation-delay: 0.2s; }
.company-details-body .form-group:nth-child(5) { animation-delay: 0.25s; }
.company-details-body .form-group:nth-child(6) { animation-delay: 0.3s; }
/* Выравнивание полей формы в одной строке по высоте */
.company-details-body .row {
display: flex;
align-items: flex-start;
}
.company-details-body .row .col-md-6 {
display: flex;
flex-direction: column;
}
.company-details-body .row .col-md-6 .form-group {
display: flex;
flex-direction: column;
flex: 1;
margin-bottom: 0;
}
.company-details-body .row .col-md-6 .form-group label {
margin-bottom: 5px;
margin-top: 0;
flex-shrink: 0;
}
/* Выравнивание инпутов на одном уровне */
.company-details-body .row .col-md-6 .form-group .form-control,
.company-details-body .row .col-md-6 .form-group .input-group {
height: 38px;
min-height: 38px;
max-height: 38px;
margin-top: 0;
margin-bottom: 0;
}
.company-details-body .row .col-md-6 .form-group select.form-control {
height: 38px;
line-height: 38px;
padding-top: 0;
padding-bottom: 0;
}
.company-details-body .row .col-md-6 .form-group .input-group .form-control {
height: 38px;
line-height: 38px;
padding-top: 0;
padding-bottom: 0;
}
.company-details-body .row .col-md-6 .form-group .input-group .input-group-text {
height: 38px;
line-height: 38px;
padding-top: 0;
padding-bottom: 0;
display: flex;
align-items: center;
justify-content: center;
}
@keyframes slideInUp {
from {
opacity: 0;
transform: translateY(15px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.company-details-body .form-group label {
display: block;
margin-bottom: 10px;
font-weight: 600;
color: #2d3748;
font-size: 0.95rem;
letter-spacing: 0.3px;
transition: color 0.2s ease;
position: relative;
padding-left: 4px;
}
/* Псевдоэлемент для label - показывается только при фокусе */
.company-details-body .form-group label::before {
content: '';
position: absolute;
left: -4px;
top: 50%;
transform: translateY(-50%);
width: 0;
height: 0;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
transition: height 0.3s ease, opacity 0.3s ease, width 0.3s ease;
opacity: 0;
pointer-events: none;
overflow: hidden;
}
.company-details-body .form-group:focus-within label {
color: #667eea;
}
/* Показываем псевдоэлемент только при фокусе */
.company-details-body .form-group:focus-within label::before {
width: 3px;
height: 18px;
opacity: 1;
}
/* Убираем псевдоэлемент для полей паролей и телефона полностью */
/* Используем более специфичные селекторы для совместимости */
.company-details-body .form-group:has(input[type="password"]) label::before,
.company-details-body .form-group:has(input[type="tel"]) label::before,
.company-details-body .form-group label[for*="password"]::before,
.company-details-body .form-group label[for*="phone"]::before,
.company-details-body .form-group label[for="edit-manager-password"]::before,
.company-details-body .form-group label[for="edit-manager-password-confirm"]::before,
.company-details-body .form-group label[for="edit-manager-phone"]::before,
.company-details-body .form-group label[for="manager-password"]::before,
.company-details-body .form-group label[for="manager-password-confirm"]::before,
.company-details-body .form-group label[for="manager-phone"]::before {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* ВАЖНО: .form-control применяется ТОЛЬКО к input и textarea, НЕ к select */
.company-details-body .form-control:not(select),
.company-details-body input.form-control,
.company-details-body textarea.form-control {
width: 100%;
padding: 14px 18px;
border: 2px solid #e2e8f0;
border-radius: 12px;
font-size: 0.95rem;
line-height: 1.5;
background: #ffffff;
color: #2d3748;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.02);
vertical-align: middle;
/* ВАЖНО: Убираем background-image для input элементов */
background-image: none !important;
background-repeat: no-repeat !important;
background-position: initial !important;
background-size: initial !important;
}
/* Исключаем select из общего правила, так как у него свои стили */
.company-details-body .form-control:not(select) {
display: block;
}
/* ВАЖНО: Убираем box-shadow из общего правила для select, чтобы не было визуальной полосы */
.company-details-body select.form-control {
box-shadow: none !important;
}
/* ВАЖНО: Hover и Focus стили ТОЛЬКО для input и textarea, НЕ для select */
.company-details-body .form-control:not(select):hover,
.company-details-body input.form-control:hover,
.company-details-body textarea.form-control:hover {
border-color: #cbd5e0;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.04);
transform: translateY(-1px);
/* ВАЖНО: Убираем background-image для input элементов */
background-image: none !important;
}
.company-details-body .form-control:not(select):focus,
.company-details-body input.form-control:focus,
.company-details-body textarea.form-control:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1),
0 4px 12px rgba(102, 126, 234, 0.15);
transform: translateY(-2px);
background: #ffffff;
color: #2d3748;
/* ВАЖНО: Убираем background-image для input элементов */
background-image: none !important;
}
/* Убираем box-shadow для select, чтобы не было визуальной полосы */
.company-details-body select.form-control:hover {
box-shadow: none !important;
transform: none !important;
}
.company-details-body select.form-control:focus {
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1) !important;
transform: none !important;
}
/* Специальные стили для select при focus */
.company-details-body select.form-control:focus {
color: #2d3748 !important;
background-color: #ffffff !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='3' stroke-linecap='round' stroke-linecap='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
}
/* Стили ТОЛЬКО для select элементов */
.company-details-body select.form-control {
cursor: pointer;
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
/* ВАЖНО: Убираем background-image, чтобы не было конфликтов с текстом */
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='3' stroke-linecap='round' stroke-linecap='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e");
background-repeat: no-repeat;
background-position: right 16px center;
background-size: 20px;
padding-right: 48px;
/* ВАЖНО: Правильное выравнивание текста - текст должен начинаться сразу внутри инпута */
padding-top: 10px !important;
padding-bottom: 10px !important;
padding-left: 18px !important;
line-height: 1.3 !important;
height: auto !important;
min-height: 48px !important;
/* ВАЖНО: Используем display: block для правильного отображения текста */
display: block !important;
box-sizing: border-box !important;
/* ВАЖНО: Убираем любые отступы, которые могут смещать текст */
margin: 0 !important;
/* ВАЖНО: Цвет текста для выбранного значения */
color: #2d3748 !important;
background-color: #ffffff !important;
/* ВАЖНО: Убираем любые псевдоэлементы, которые могут закрывать текст */
position: relative !important;
z-index: 1 !important;
/* ВАЖНО: Убираем любые тени, которые могут создавать полосу */
box-shadow: none !important;
/* ВАЖНО: Убираем любые внутренние отступы от браузера */
-webkit-padding-start: 18px !important;
-webkit-padding-end: 48px !important;
/* ВАЖНО: Убираем любые внутренние границы браузера */
-webkit-border-start: none !important;
-webkit-border-end: none !important;
/* ВАЖНО: Убираем любые псевдоэлементы браузера */
-webkit-appearance: none !important;
-moz-appearance: none !important;
appearance: none !important;
/* ВАЖНО: Убираем любые внутренние overlay элементы браузера */
-webkit-user-select: text !important;
-moz-user-select: text !important;
user-select: text !important;
/* ВАЖНО: Убираем любые внутренние градиенты или полосы */
background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
background-origin: padding-box !important;
-webkit-background-origin: padding-box !important;
}
/* Убираем псевдоэлементы для select */
.company-details-body select.form-control::before,
.company-details-body select.form-control::after {
display: none !important;
content: none !important;
}
/* Убираем псевдоэлементы для form-group с select */
.company-details-body .form-group:has(select)::before,
.company-details-body .form-group:has(select)::after {
display: none !important;
content: none !important;
}
/* Убираем псевдоэлементы для label, когда form-group содержит select */
.company-details-body .form-group:has(select) label::before {
display: none !important;
content: none !important;
width: 0 !important;
height: 0 !important;
opacity: 0 !important;
visibility: hidden !important;
pointer-events: none !important;
}
/* Дополнительные стили для правильного отображения текста в select */
.company-details-body select.form-control option {
padding: 10px 18px !important;
line-height: 1.5 !important;
color: #2d3748 !important;
background-color: #ffffff !important;
}
/* Убеждаемся, что выбранный текст виден и правильно выровнен */
.company-details-body select.form-control:not([multiple]) {
padding-top: 10px !important;
padding-bottom: 10px !important;
padding-left: 18px !important;
padding-right: 48px !important;
line-height: 1.3 !important;
height: auto !important;
min-height: 48px !important;
/* ВАЖНО: Убираем любые overlay элементы */
overflow: visible !important;
text-overflow: clip !important;
/* ВАЖНО: Убираем любые внутренние границы или полосы браузера */
border: 2px solid #e2e8f0 !important;
background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
/* ВАЖНО: Убираем box-shadow полностью, чтобы не было визуальной полосы */
box-shadow: none !important;
/* ВАЖНО: Убираем любые внутренние градиенты или полосы браузера */
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23667eea' stroke-width='3' stroke-linecap='round' stroke-linecap='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 16px center !important;
background-size: 20px !important;
background-color: #ffffff !important;
}
/* Стили для option элементов в select */
.company-details-body select.form-control option {
color: #2d3748 !important;
background-color: #ffffff !important;
padding: 10px 18px !important;
}
/* Стили для выбранного option */
.company-details-body select.form-control option:checked,
.company-details-body select.form-control option[selected] {
color: #2d3748 !important;
background-color: #f7fafc !important;
font-weight: 600 !important;
}
/* Стили для select когда есть выбранное значение */
.company-details-body select.form-control:not([value=""]) {
color: #2d3748 !important;
}
.company-details-body select.form-control:invalid {
color: #a0aec0 !important; /* Серый цвет для placeholder */
}
.company-details-body select.form-control:valid {
color: #2d3748 !important; /* Темный цвет для выбранного значения */
}
/* ВАЖНО: Убеждаемся, что цвет текста виден во всех состояниях */
.company-details-body select.form-control,
.company-details-body select.form-control:hover,
.company-details-body select.form-control:focus,
.company-details-body select.form-control:active,
.company-details-body select.form-control:not(:invalid) {
color: #2d3748 !important;
background-color: #ffffff !important;
-webkit-text-fill-color: #2d3748 !important; /* Для WebKit браузеров */
}
/* Специальные стили для select с выбранным значением */
.company-details-body select.form-control option:checked {
color: #2d3748 !important;
background-color: #ffffff !important;
-webkit-text-fill-color: #2d3748 !important;
}
/* Убеждаемся, что текст в select всегда виден */
.company-details-body select.form-control option {
color: #2d3748 !important;
background-color: #ffffff !important;
-webkit-text-fill-color: #2d3748 !important;
}
/* Стили для disabled состояния */
.company-details-body select.form-control:disabled {
color: #a0aec0 !important;
background-color: #f7fafc !important;
cursor: not-allowed !important;
-webkit-text-fill-color: #a0aec0 !important;
}
/* Стили для placeholder (когда ничего не выбрано) */
.company-details-body select.form-control:invalid,
.company-details-body select.form-control option[value=""] {
color: #a0aec0 !important;
-webkit-text-fill-color: #a0aec0 !important;
}
/* УБИРАЕМ background-image для input элементов */
.company-details-body input.form-control,
.company-details-body input[type="text"].form-control,
.company-details-body input[type="email"].form-control,
.company-details-body input[type="tel"].form-control,
.company-details-body input[type="password"].form-control {
background-image: none !important;
appearance: auto !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
}
.company-details-body input[type="password"].form-control {
letter-spacing: 2px;
font-family: 'Courier New', monospace;
padding-right: 48px; /* Место для иконки глаза */
}
/* Контейнер для полей пароля с иконкой */
.company-details-body .password-input-container {
position: relative !important;
display: inline-block;
width: 100%;
z-index: 1;
}
.company-details-body .password-input-container .form-control {
width: 100%;
padding-right: 48px !important; /* Место для иконки глаза */
position: relative;
z-index: 1;
}
/* Иконка переключения видимости пароля - ВСЕГДА ВИДИМА */
/* ВАЖНО: top будет установлен через JavaScript для точного позиционирования */
.company-details-body .toggle-password,
.company-details-body .password-input-container .toggle-password,
.company-details-body .password-input-container .fa-eye,
.company-details-body .password-input-container .fa-eye-slash,
.company-details-body .form-group .toggle-password,
.company-details-body .form-group .fa-eye,
.company-details-body .form-group .fa-eye-slash,
.company-details-body .form-group i.toggle-password,
.company-details-body .form-group i.fa-eye,
.company-details-body .form-group i.fa-eye-slash,
.company-details-body .password-input-container i.toggle-password,
.company-details-body .password-input-container i.fa-eye,
.company-details-body .password-input-container i.fa-eye-slash {
position: absolute !important;
right: 16px !important;
/* top будет установлен через JavaScript */
transform: translateY(-50%) !important;
cursor: pointer !important;
color: #667eea !important;
font-size: 1.1rem !important;
z-index: 9999 !important;
transition: color 0.2s ease, opacity 0.2s ease !important;
opacity: 1 !important;
pointer-events: auto !important;
display: inline-block !important;
visibility: visible !important;
width: auto !important;
height: auto !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
line-height: 1 !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
-webkit-font-smoothing: antialiased !important;
-moz-osx-font-smoothing: grayscale !important;
}
/* ВАЖНО: Убеждаемся, что input не перекрывает иконку */
.company-details-body input[type="password"] {
position: relative !important;
z-index: 1 !important;
}
/* ВАЖНО: Убеждаемся, что form-group имеет position: relative для правильного позиционирования иконки */
.company-details-body .form-group {
position: relative !important;
}
/* ВАЖНО: Убеждаемся, что password-input-container также имеет position: relative */
.company-details-body .password-input-container {
position: relative !important;
}
/* Когда password-input-container создан модулем */
.company-details-body .password-input-container {
position: relative;
width: 100%;
display: block;
/* Контейнер должен иметь ту же высоту что и input */
min-height: 48px; /* Примерная высота input: padding 14px*2 + line-height ~20px */
}
/* Иконка ВНУТРИ контейнера, который имеет ту же высоту что и input */
/* Контейнер создается модулем password-toggle и содержит input и иконку */
.company-details-body .password-input-container {
position: relative !important;
display: block !important;
width: 100% !important;
}
.company-details-body .password-input-container input[type="password"] {
padding-right: 48px !important;
width: 100% !important;
position: relative !important;
}
/* Иконка позиционируется относительно контейнера, который имеет ту же высоту что и input */
.company-details-body .password-input-container .toggle-password,
.company-details-body .password-input-container .fa-eye,
.company-details-body .password-input-container .fa-eye-slash,
.company-details-body .password-input-container i.toggle-password,
.company-details-body .password-input-container i.fa-eye,
.company-details-body .password-input-container i.fa-eye-slash {
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
opacity: 1 !important;
display: inline-block !important;
visibility: visible !important;
color: #667eea !important;
font-size: 1.1rem !important;
cursor: pointer !important;
pointer-events: auto !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
line-height: 1 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Когда контейнер не создан, но иконка есть в form-group - позиционируем относительно input */
.company-details-body .form-group {
position: relative;
}
.company-details-body .form-group input[type="password"] {
position: relative;
padding-right: 48px !important; /* Место для иконки глаза */
width: 100%;
}
/* Иконка позиционируется относительно form-group, но ВНУТРИ input справа по центру */
/* Используем более точный расчет на основе реальных размеров */
.company-details-body .form-group input[type="password"] ~ .toggle-password,
.company-details-body .form-group input[type="password"] ~ .fa-eye,
.company-details-body .form-group input[type="password"] ~ .fa-eye-slash,
.company-details-body .form-group input[type="password"] ~ i.toggle-password,
.company-details-body .form-group input[type="password"] ~ i.fa-eye,
.company-details-body .form-group input[type="password"] ~ i.fa-eye-slash,
.company-details-body .form-group .toggle-password,
.company-details-body .form-group .fa-eye,
.company-details-body .form-group .fa-eye-slash,
.company-details-body .form-group i.toggle-password,
.company-details-body .form-group i.fa-eye,
.company-details-body .form-group i.fa-eye-slash {
position: absolute !important;
right: 16px !important;
/* Позиционирование ВНУТРИ input по центру вертикально */
/* Label: margin-bottom 10px + высота label (line-height ~1.2 * font-size 0.95rem ≈ 22px) = 32px */
/* Input: начинается на 32px, padding-top 14px, высота input ~48px (14px + 20px + 14px), центр = 14px + 24px = 38px от начала input */
/* Итого: 32px (label) + 38px (центр input) = 70px от верха form-group */
top: calc(10px + 22px + 14px + 24px) !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
opacity: 1 !important;
display: inline-block !important;
visibility: visible !important;
color: #667eea !important;
font-size: 1.1rem !important;
cursor: pointer !important;
pointer-events: auto !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
line-height: 1 !important;
}
.company-details-body .toggle-password:hover,
.company-details-body .password-input-container .toggle-password:hover,
.company-details-body .password-input-container .fa-eye:hover,
.company-details-body .password-input-container .fa-eye-slash:hover,
.company-details-body .form-group .toggle-password:hover,
.company-details-body .form-group .fa-eye:hover,
.company-details-body .form-group .fa-eye-slash:hover {
color: #764ba2 !important;
opacity: 1 !important;
}
/* УНИВЕРСАЛЬНОЕ ПРАВИЛО - иконка глаза ВСЕГДА видима в модальном окне */
/* Для password-input-container - позиционирование относительно контейнера */
.company-details-modal .password-input-container i,
.company-details-modal .password-input-container i.toggle-password,
.company-details-modal .password-input-container i.fa-eye,
.company-details-modal .password-input-container i.fa-eye-slash {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
right: 16px !important;
top: 50% !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
color: #667eea !important;
font-size: 1.1rem !important;
cursor: pointer !important;
pointer-events: auto !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
}
/* Для form-group - позиционирование ВНУТРИ input справа по центру */
/* Используем более точный расчет на основе реальных размеров элементов */
.company-details-modal .form-group input[type="password"] + i,
.company-details-modal .form-group input[type="password"] ~ i,
.company-details-modal .form-group i.toggle-password,
.company-details-modal .form-group i.fa-eye,
.company-details-modal .form-group i.fa-eye-slash {
display: inline-block !important;
visibility: visible !important;
opacity: 1 !important;
position: absolute !important;
right: 16px !important;
/* Позиционирование ВНУТРИ input по центру вертикально */
/* Label: margin-bottom 10px + высота label (line-height ~1.2 * font-size 0.95rem ≈ 22px) = 32px */
/* Input: начинается на 32px, padding-top 14px, высота input ~48px, центр = 14px + 24px = 38px от начала input */
/* Итого: 32px (label) + 38px (центр input) = 70px от верха form-group */
top: calc(10px + 22px + 14px + 24px) !important;
transform: translateY(-50%) !important;
z-index: 20 !important;
color: #667eea !important;
font-size: 1.1rem !important;
cursor: pointer !important;
pointer-events: auto !important;
font-family: "Font Awesome 6 Free" !important;
font-weight: 900 !important;
background: transparent !important;
border: none !important;
padding: 0 !important;
margin: 0 !important;
width: auto !important;
height: auto !important;
line-height: 1 !important;
}
/* Убираем псевдоэлемент label для полей с password-input-container */
.company-details-body .form-group:has(.password-input-container) label::before {
display: none !important;
content: none !important;
}
.company-details-body .row {
display: flex;
gap: 20px;
margin-bottom: 0;
}
.company-details-body .row .col-md-6 {
flex: 1;
min-width: 0;
}
.company-details-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
}
.detail-card {
background: var(--color-bg-light);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 20px;
display: flex;
align-items: flex-start;
gap: 16px;
transition: all 0.2s ease;
}
.detail-card:hover {
background: white;
border-color: var(--color-primary);
box-shadow: 0 4px 12px rgba(12, 60, 120, 0.1);
transform: translateY(-2px);
}
.detail-card-full {
grid-column: 1 / -1;
}
.detail-icon {
width: 40px;
height: 40px;
background: var(--api-primary-gradient);
border-radius: 10px;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
flex-shrink: 0;
}
.detail-content {
flex: 1;
min-width: 0;
}
.detail-label {
display: block;
font-size: 0.75rem;
font-weight: 600;
color: var(--color-text-secondary);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
}
.detail-value {
display: block;
font-size: 1rem;
color: var(--color-text-main);
font-weight: 500;
word-break: break-word;
}
.detail-code {
display: inline-block;
background: var(--color-bg-light);
padding: 6px 12px;
border-radius: 6px;
font-family: 'Courier New', monospace;
font-size: 0.9rem;
color: var(--color-primary);
font-weight: 600;
}
.detail-link {
display: inline-flex;
align-items: center;
gap: 8px;
color: var(--color-primary);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.detail-link:hover {
color: var(--color-accent);
text-decoration: underline;
}
.detail-link i {
font-size: 0.875rem;
}
.detail-subtext {
margin-top: 6px;
font-size: 0.875rem;
color: var(--color-text-secondary);
}
.company-details-footer {
padding: 24px 32px;
border-top: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
justify-content: flex-end;
gap: 16px;
background: linear-gradient(180deg, #f8f9fa 0%, #ffffff 100%);
flex-shrink: 0;
margin-top: auto;
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.03);
position: relative;
}
.company-details-footer::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(102, 126, 234, 0.3) 50%,
transparent 100%);
}
/* Улучшенные стили для кнопок в модальном окне */
.company-details-footer .btn {
padding: 14px 28px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
border: none;
}
.company-details-footer .btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.company-details-footer .btn:hover::before {
width: 300px;
height: 300px;
}
.company-details-footer .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}
.company-details-footer .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
.company-details-footer .btn-primary:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.company-details-footer .btn-secondary {
background: #ffffff;
border: 2px solid #e2e8f0;
color: #4a5568;
}
.company-details-footer .btn-secondary:hover {
background: #f7fafc;
border-color: #cbd5e0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
color: #2d3748;
}
.company-details-footer .btn i {
margin-right: 8px;
transition: transform 0.3s ease;
}
.company-details-footer .btn:hover i {
transform: scale(1.1);
}
/* Адаптивные стили company-details-modal перенесены в mobile.css согласно архитектуре */
/* Улучшенные стили для кнопок в модальном окне */
.company-details-footer .btn {
padding: 14px 28px;
font-size: 0.95rem;
font-weight: 600;
border-radius: 12px;
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
letter-spacing: 0.3px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}
.company-details-footer .btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.company-details-footer .btn:hover::before {
width: 300px;
height: 300px;
}
.company-details-footer .btn-primary {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
box-shadow: 0 4px 16px rgba(102, 126, 234, 0.4);
}
.company-details-footer .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(102, 126, 234, 0.5);
background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
}
.company-details-footer .btn-primary:active {
transform: translateY(0);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.4);
}
.company-details-footer .btn-secondary {
background: #ffffff;
border: 2px solid #e2e8f0;
color: #4a5568;
}
.company-details-footer .btn-secondary:hover {
background: #f7fafc;
border-color: #cbd5e0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
color: #2d3748;
}
.company-details-footer .btn i {
margin-right: 8px;
transition: transform 0.3s ease;
}
.company-details-footer .btn:hover i {
transform: scale(1.1);
}
.companies-table .table-row:hover .table-cell {
color: var(--color-text-main) !important;
}
.companies-table .table-row:hover .table-cell a {
color: var(--color-primary) !important;
}
/* Улучшенные стили для заголовков */
.companies-table thead th {
background: linear-gradient(135deg, var(--color-bg-light), var(--color-bg-card));
font-weight: 700;
text-transform: uppercase;
font-size: 0.75rem;
letter-spacing: 0.5px;
color: var(--color-text-main);
border-bottom: 2px solid var(--color-primary);
padding: 1rem 0.75rem;
}
/* Стили для ячеек */
.companies-table .table-cell {
padding: 1rem 0.75rem;
vertical-align: middle;
transition: all 0.2s ease;
color: var(--color-text-main);
}
.companies-table .col-id .table-cell {
font-weight: 700;
color: #007bff !important;
text-align: center;
font-size: 1rem;
background: rgba(0, 123, 255, 0.05);
border-radius: var(--radius-sm);
}
.companies-table .table-cell a {
color: inherit;
}
.companies-table .table-cell code {
color: inherit;
}
/* Улучшенные стили для кнопок действий */
.companies-table .action-buttons {
display: flex;
gap: 6px;
flex-wrap: nowrap;
justify-content: center;
align-items: center;
}
.companies-table .action-buttons .btn {
padding: 6px 10px;
font-size: 0.875rem;
min-width: 36px;
height: 36px;
flex-shrink: 0;
border-radius: var(--radius-sm);
display: inline-flex;
align-items: center;
justify-content: center;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
border: none;
cursor: pointer;
}
.companies-table .action-buttons .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}
.companies-table .action-buttons .btn.btn-primary {
background: linear-gradient(135deg, #007bff, #0056b3) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.companies-table .action-buttons .btn.btn-primary:hover {
background: linear-gradient(135deg, #0056b3, #004085) !important;
color: #ffffff !important;
}
.companies-table .action-buttons .btn.btn-info {
background: linear-gradient(135deg, #17a2b8, #138496) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.companies-table .action-buttons .btn.btn-info:hover {
background: linear-gradient(135deg, #138496, #117a8b) !important;
color: #ffffff !important;
}
.companies-table .action-buttons .btn.btn-success {
background: linear-gradient(135deg, #28a745, #20c997) !important;
color: #ffffff !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
.companies-table .action-buttons .btn.btn-success:hover {
background: linear-gradient(135deg, #218838, #1e9e85) !important;
color: #ffffff !important;
}
.companies-table .action-buttons .btn.btn-warning {
background: linear-gradient(135deg, #ffc107, #ff9800) !important;
color: #212529 !important;
border: 1px solid rgba(0, 0, 0, 0.1) !important;
font-weight: 600;
}
.companies-table .action-buttons .btn.btn-warning:hover {
background: linear-gradient(135deg, #e0a800, #e68900) !important;
color: #212529 !important;
}
.companies-table .action-buttons .btn i {
color: inherit !important;
}
/* Адаптивность для companies-table перенесена в mobile.css согласно архитектуре */
/* === FALLBACK МОДАЛЬНЫЕ ОКНА (без Bootstrap) === */
/* Стили для модальных окон в fallback режиме */
#loggingSettingsModal.fallback {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.5);
z-index: 9999;
}
#loggingSettingsModal.fallback .modal-dialog {
position: relative;
margin: 50px auto;
max-width: 800px;
background: white;
border-radius: 8px;
box-shadow: 0 4px 20px rgba(0,0,0,0.3);
}
#loggingSettingsModal.fallback .modal-content {
border: none;
border-radius: 8px;
}
#loggingSettingsModal.fallback .modal-header {
background: #f8f9fa;
border-bottom: 1px solid #dee2e6;
border-radius: 8px 8px 0 0;
padding: 1rem;
}
#loggingSettingsModal.fallback .modal-body {
padding: 5px;
}
#loggingSettingsModal.fallback .modal-footer {
padding: 5px;
border-top: 1px solid #e9ecef;
}
/* === МОДАЛЬНОЕ ОКНО ДЕТАЛЕЙ ЛОГА === */
/* Математические расчеты для окна деталей лога */
#logDetailsModal .modal-dialog {
/* Ширина: оптимальная для чтения (65-80% viewport, минимум 500px, максимум 800px) */
max-width: clamp(500px, 75vw, 800px);
/* Используем оптимальную ширину строки для чтения: 60-70 символов */
width: clamp(60ch, 70vw, 70ch);
}
#logDetailsModal .modal-body {
/* Внутренние отступы: 5px согласно архитектуре */
padding: 5px;
}
/* === МОДАЛЬНОЕ ОКНО НАСТРОЕК ЛОГИРОВАНИЯ === */
/* Базовые стили без размеров - размеры только в desktop.css, tablet.css, mobile.css */
#loggingSettingsModal .modal-dialog {
/* Размеры определяются в адаптивных файлах согласно архитектуре */
}
#loggingSettingsModal .modal-header {
background: var(--color-primary, #0c3c78) !important;
/* Чистый белый цвет для максимального контраста на темно-синем фоне */
color: #ffffff !important;
/* Тень текста для лучшей читаемости на темном фоне (WCAG AA контраст 4.5:1+) */
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
border-bottom: none !important;
/* Убеждаемся что header на всю ширину */
width: 100% !important;
margin: 0 !important;
/* Убираем отрицательные margin для правильной ширины */
box-sizing: border-box !important;
}
/* Стили для иконок в header модального окна настроек */
#loggingSettingsModal .modal-header i,
#loggingSettingsModal .modal-header .fas,
#loggingSettingsModal .modal-header .fa,
#loggingSettingsModal .modal-header i.fas,
#loggingSettingsModal .modal-header i.fa-cogs {
color: #ffffff !important;
/* Тень для иконок для лучшей видимости */
filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.3)) !important;
}
/* Стили для заголовка в header */
#loggingSettingsModal .modal-header .modal-title,
#loggingSettingsModal .modal-header h5.modal-title {
color: #ffffff !important;
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3) !important;
font-weight: 600 !important;
}
/* Математические расчеты для внутренних блоков настроек */
#loggingSettingsModal .modal-body .row {
/* Отступ между колонками: пропорционально размеру окна */
margin-left: calc(-1 * clamp(0.75rem, 1.5vw, 1.5rem));
margin-right: calc(-1 * clamp(0.75rem, 1.5vw, 1.5rem));
}
#loggingSettingsModal .modal-body .row > [class*="col-"] {
/* Отступ внутри колонок: пропорционально размеру окна */
padding-left: clamp(0.75rem, 1.5vw, 1.5rem);
padding-right: clamp(0.75rem, 1.5vw, 1.5rem);
}
#loggingSettingsModal .modal-body .mb-3 {
/* Внутренние отступы: 5px согласно архитектуре */
margin-bottom: 0;
margin-top: 0;
padding: 5px;
}
#loggingSettingsModal .modal-body .form-label {
/* Размер шрифта метки: адаптивный */
font-size: clamp(0.9rem, 1.2vw, 1.1rem);
/* Отступ снизу: пропорционально размеру шрифта */
margin-bottom: clamp(0.5rem, 0.8vh, 0.75rem);
}
#loggingSettingsModal .modal-body .form-control,
#loggingSettingsModal .modal-body .form-select {
/* Высота поля ввода: минимум 2.5rem для удобства, максимум 3rem */
min-height: clamp(2.5rem, 5vh, 3rem);
/* Размер шрифта: адаптивный */
font-size: clamp(0.95rem, 1.3vw, 1.1rem);
/* Отступ внутри поля: пропорционально высоте */
padding: clamp(0.5rem, 1vh, 0.75rem) clamp(0.75rem, 1.5vw, 1.25rem);
}
/* Базовые стили для alert блоков внутри модальных окон */
/* Размеры определяются в адаптивных файлах (desktop.css, tablet.css, mobile.css) согласно архитектуре */
.modal-body .alert {
/* Базовые стили без размеров */
}
.modal-body .alert .d-flex {
/* Отступ между элементами в flex контейнере */
gap: clamp(0.75rem, 1.5vw, 1rem);
}
.modal-body .alert small {
/* Размер шрифта для small текста: адаптивный */
font-size: clamp(0.8rem, 1vw, 0.9rem);
/* Отступ сверху: пропорционально размеру шрифта */
margin-top: clamp(0.25rem, 0.5vh, 0.5rem);
}
/* Математические расчеты для кнопок в модальных окнах */
.modal-footer .btn {
/* Отступы внутри кнопки: пропорционально размеру окна */
padding: clamp(0.5rem, 1.2vh, 0.75rem) clamp(1rem, 2vw, 1.5rem);
/* Размер шрифта: адаптивный */
font-size: clamp(0.9rem, 1.2vw, 1rem);
/* Минимальная высота для удобства нажатия: 2.5rem */
min-height: clamp(2.5rem, 5vh, 3rem);
/* Радиус: пропорционально размеру кнопки */
border-radius: clamp(0.375rem, 0.8vw, 0.5rem);
}
/* Математические расчеты для групп кнопок */
.modal-footer .d-flex {
display: flex;
width: 100%;
box-sizing: border-box;
/* Отступ между группами кнопок: пропорционально размеру окна */
gap: clamp(1rem, 2vw, 1.5rem);
}
.modal-footer .d-flex.justify-content-between {
justify-content: space-between;
align-items: center;
}
.modal-footer .d-flex > div {
display: flex;
align-items: center;
/* Отступ между кнопками в группе */
gap: clamp(0.5rem, 1vw, 0.75rem);
flex-wrap: wrap;
}
#loggingSettingsModal .modal-header .btn-close {
/* Синий X на белом круглом фоне */
padding: 0.5rem;
width: 2rem;
height: 2rem;
display: flex;
align-items: center;
justify-content: center;
background: #ffffff !important; /* Белый круглый фон */
border: 0;
border-radius: 50% !important; /* Круглый фон */
color: #0c3c78 !important; /* Синий цвет X */
-webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
-webkit-background-clip: unset !important; /* Убираем градиентный фон */
background-clip: unset !important; /* Убираем градиентный фон */
filter: none !important;
opacity: 1;
transition: all 0.2s ease;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}
#loggingSettingsModal .modal-header .btn-close:hover {
background: #f8f9fa !important; /* Светло-серый фон при наведении */
color: #0c3c78 !important; /* Синий цвет X */
-webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
opacity: 1;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
transform: scale(1.05);
}
#loggingSettingsModal .modal-header .btn-close:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(12, 60, 120, 0.25) !important; /* Синий фокус */
background: #ffffff !important;
color: #0c3c78 !important; /* Синий цвет X */
-webkit-text-fill-color: #0c3c78 !important; /* Синий цвет X для WebKit */
}
/* === FORM CHECK STYLES === */
#loggingSettingsModal .form-check {
display: flex;
align-items: center;
gap: 0.5rem;
}
#loggingSettingsModal .form-check-input {
margin: 0;
margin-right: 0.5rem;
flex-shrink: 0;
}
#loggingSettingsModal .form-check-label {
display: flex;
align-items: center;
margin: 0;
cursor: pointer;
}
#loggingSettingsModal .form-check-label i {
margin-right: 0.5rem;
}
#loggingSettingsModal .form-check-input:checked {
background-color: var(--color-primary, #007bff);
border-color: var(--color-primary, #007bff);
}
/* === HERO SECTION ДЕЙСТВИЯ === */
.hero-actions {
display: flex;
gap: 15px;
justify-content: center;
flex-wrap: wrap;
}
.hero-actions .btn {
padding: 10px 20px;
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
}
.hero-actions .btn:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* === ОТЛАДОЧНАЯ ИНФОРМАЦИЯ === */
.debug-info {
border: 1px solid #dee2e6;
background: #f8f9fa;
}
.debug-info pre {
background: #e9ecef;
padding: 10px;
border-radius: 4px;
font-size: 11px;
max-height: 200px;
overflow-y: auto;
}
/* === ФИЛЬТРЫ И ПОИСК === */
.filters-section {
display: flex;
flex-direction: column;
gap: 20px;
}
.filter-row {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
align-items: end;
}
.filter-group {
display: flex;
flex-direction: column;
gap: 5px;
}
.filter-actions {
display: flex;
gap: 10px;
align-items: end;
}
/* === ТАБЛИЦА ЛОГОВ === */
.log-message {
max-width: 300px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.log-row.log-level-error {
background-color: rgba(220, 53, 69, 0.05);
}
.log-row.log-level-warning {
background-color: rgba(255, 193, 7, 0.05);
}
.log-row.log-level-info {
background-color: rgba(0, 123, 255, 0.05);
}
.log-row.log-level-debug {
background-color: rgba(108, 117, 125, 0.05);
}
/* === ДОПОЛНИТЕЛЬНЫЕ СТИЛИ ДЛЯ СУПЕР-АДМИН ДАШБОРДА === */
/* Улучшенные стили для статистики */
/* .stat-card определен в cards.css - удалено дублирование */
/* Улучшенные стили для состояния системы */
.health-card {
position: relative;
z-index: 1;
}
.health-card::before {
z-index: 0;
}
.health-header {
position: relative;
z-index: 2;
}
.health-progress {
position: relative;
z-index: 2;
}
.progress-bar {
position: relative;
z-index: 2;
}
.progress-fill {
position: relative;
z-index: 2;
}
.progress-fill::after {
z-index: 1;
}
.health-value {
position: relative;
z-index: 2;
}
.health-card small {
position: relative;
z-index: 2;
}
.system-info {
position: relative;
z-index: 2;
}
.info-item {
position: relative;
z-index: 2;
}
.info-label {
position: relative;
z-index: 2;
}
.info-value {
position: relative;
z-index: 2;
}
/* Улучшенные стили для активности */
.activity-item {
position: relative;
z-index: 1;
}
.activity-item::before {
z-index: 0;
}
.activity-icon {
position: relative;
z-index: 2;
}
.activity-content {
position: relative;
z-index: 2;
}
/* Улучшенные стили для уведомлений */
.notification {
position: relative;
z-index: 1;
}
.notification::before {
z-index: 0;
}
.notification-header {
position: relative;
z-index: 2;
}
.notification-body {
position: relative;
z-index: 2;
}
/* Улучшенные стили для footer */
.dashboard-footer {
position: relative;
z-index: 1;
}
.dashboard-footer::before {
z-index: 0;
}
.footer-info {
position: relative;
z-index: 2;
}
/* Финальные улучшения для производительности */
* {
box-sizing: border-box;
}
.quick-action-btn,
.dashboard-section,
.hero-section-modern,
.stat-card,
.health-card,
.activity-item,
.notification,
.dashboard-footer {
will-change: transform, box-shadow, opacity;
}
/* Оптимизация для мобильных устройств перенесена в mobile.css согласно архитектуре */
/* === 🧪 СТИЛИ ДЛЯ СТРАНИЦЫ ПРОВЕРКИ JAVASCRIPT === */
/* Сетка инструментов JavaScript */
.js-tools-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: 20px;
margin-top: 20px;
}
/* Карточки инструментов JavaScript */
.js-tool-card {
background: white;
border-radius: 16px;
padding: 24px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
cursor: pointer;
}
.js-tool-card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
border-color: var(--api-primary-color);
}
.js-tool-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 20px;
}
.js-tool-header i {
width: 50px;
height: 50px;
border-radius: 12px;
background: var(--api-primary-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1.2rem;
}
.js-tool-header h4 {
font-size: 1.1rem;
font-weight: 600;
color: var(--api-text-color);
margin: 0;
}
.js-tool-content p {
color: var(--api-text-muted);
margin: 0 0 20px 0;
line-height: 1.5;
}
/* Сетка файлов JavaScript */
.js-files-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
margin-top: 20px;
}
/* Карточки файлов JavaScript */
.js-file-card {
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
border: 2px solid transparent;
transition: all 0.3s ease;
}
.js-file-card:hover {
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 0, 0, 0.12);
border-color: var(--api-primary-color);
}
.js-file-header {
display: flex;
align-items: center;
gap: 15px;
margin-bottom: 15px;
}
.js-file-header i {
width: 40px;
height: 40px;
border-radius: 10px;
background: var(--api-primary-gradient);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 1rem;
}
.js-file-header h4 {
font-size: 1rem;
font-weight: 600;
color: var(--api-text-color);
margin: 0;
flex: 1;
}
.js-file-size {
background: var(--api-accent-color);
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
}
.js-file-content {
margin-bottom: 15px;
}
.js-file-path {
color: var(--api-text-muted);
font-size: 0.9rem;
margin: 0 0 8px 0;
font-family: monospace;
}
.js-file-modified {
color: var(--api-text-muted);
font-size: 0.8rem;
margin: 0;
}
.js-file-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
/* Список ошибок JavaScript */
.js-errors-list {
margin-top: 20px;
}
.js-error-item {
background: white;
border-radius: 12px;
padding: 20px;
margin-bottom: 15px;
box-shadow: 0 2px 15px rgba(0, 0, 0, 0.08);
border-left: 4px solid var(--api-danger-color);
}
.error-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 15px;
}
.error-time {
background: var(--api-danger-color);
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
}
.error-type {
background: var(--api-warning-color);
color: white;
padding: 4px 8px;
border-radius: 6px;
font-size: 0.8rem;
font-weight: 500;
}
.error-content .error-message {
color: var(--api-text-color);
font-weight: 500;
margin: 0 0 8px 0;
}
.error-content .error-location {
color: var(--api-text-muted);
font-size: 0.9rem;
margin: 0;
font-family: monospace;
}
/* Модальные окна для JavaScript проверки */
/* Дублирующие стили удалены - используются основные стили выше */
.close {
color: var(--api-text-muted);
float: right;
font-size: 28px;
font-weight: bold;
cursor: pointer;
line-height: 1;
}
.close:hover {
color: var(--api-text-color);
}
/* Анимация появления модального окна */
/* @keyframes modalSlideIn определен в animations.css - удалено дублирование */
/* Стили для информации о статусе загрузчика */
.loader-status-info,
.page-config-info {
background: var(--api-light-bg);
border-radius: 12px;
padding: 20px;
}
.status-grid,
.config-details {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 15px;
margin-top: 15px;
}
.status-item,
.config-item {
background: white;
padding: 15px;
border-radius: 8px;
border: 1px solid var(--api-border-color);
}
.status-item strong,
.config-item strong {
color: var(--api-primary-color);
display: block;
margin-bottom: 5px;
}
/* Адаптивность для js-tools-grid перенесена в mobile.css согласно архитектуре */
/* === HERO SECTION STYLES FROM CARDS.CSS === */
/* Перемещено из cards.css для соблюдения архитектуры */
.hero-section-modern-cards {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
border-radius: var(--radius-lg);
padding: 40px;
margin-bottom: 30px;
color: white;
position: relative;
overflow: hidden;
}
.hero-section-modern-cards::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-content {
position: relative;
z-index: 1;
}
.hero-content h1 {
font-size: 2.5rem;
margin-bottom: 10px;
font-weight: 700;
}
.hero-content p {
font-size: 1.2rem;
margin-bottom: 30px;
opacity: 0.9;
}
.hero-stats {
display: flex;
gap: 30px;
flex-wrap: wrap;
}
.hero-stat {
text-align: center;
}
.stat-number {
display: block;
font-size: 2rem;
font-weight: 700;
margin-bottom: 5px;
}
.stat-label {
font-size: 0.9rem;
opacity: 0.8;
}
/* === HERO SECTION STYLES FROM BUTTONS.CSS === */
/* Перемещено из buttons.css для соблюдения архитектуры */
.hero-section-modern-buttons {
background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%);
border-radius: 24px;
padding: 40px;
margin-bottom: 30px;
color: white;
text-align: center;
position: relative;
overflow: hidden;
}
.hero-section-modern-buttons::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
opacity: 0.3;
}
.hero-section-modern-buttons h1 {
font-size: 2.5rem;
font-weight: 800;
margin: 0 0 15px 0;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
position: relative;
overflow: hidden;
}
.hero-section-modern-buttons p {
font-size: 1.2rem;
margin: 0 0 30px 0;
opacity: 0.9;
font-weight: 400;
position: relative;
overflow: hidden;
}
.hero-stats-buttons {
display: flex;
justify-content: center;
gap: 40px;
flex-wrap: wrap;
}
.hero-stat-buttons {
text-align: center;
background: rgba(255, 255, 255, 0.15);
padding: 20px;
border-radius: 16px;
backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.2);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.hero-stat-buttons:hover {
transform: translateY(-2px) scale(1.02);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
}
.stat-number-buttons {
display: block;
font-size: 2rem;
font-weight: 800;
margin-bottom: 5px;
position: relative;
overflow: hidden;
}
.stat-label-buttons {
font-size: 0.9rem;
opacity: 0.8;
font-weight: 500;
position: relative;
overflow: hidden;
}
/* === DASHBOARD SECTION STYLES FROM BUTTONS.CSS === */
/* Перемещено из buttons.css для соблюдения архитектуры */
.dashboard-section-buttons {
background: white;
border-radius: 20px;
padding: 30px;
margin-bottom: 30px;
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.06);
border: 1px solid rgba(0, 0, 0, 0.03);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.dashboard-section-buttons::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.01));
opacity: 0;
transition: opacity 0.3s ease;
border-radius: 20px;
pointer-events: none;
}
.dashboard-section-buttons:hover::before {
opacity: 1;
}
.dashboard-section-buttons:hover {
box-shadow: 0 12px 40px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
/* ===== USER NAVIGATION PANEL ===== */
.user-navigation-panel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.user-nav-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.user-info {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
font-size: 16px;
}
.user-info i {
font-size: 24px;
color: #ffd700;
}
.user-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.user-actions .btn {
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
cursor: pointer;
}
.user-actions .btn-primary {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
color: #333;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.user-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}
.user-actions .btn-danger {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
color: white;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.3);
}
.user-actions .btn-danger:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.4);
}
.user-actions .btn-secondary {
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
color: white;
box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}
.user-actions .btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}
.user-actions .btn-outline-secondary {
background: transparent;
color: white;
border: 2px solid rgba(255, 255, 255, 0.3);
backdrop-filter: blur(10px);
}
.user-actions .btn-outline-secondary:hover {
background: rgba(255, 255, 255, 0.1);
border-color: rgba(255, 255, 255, 0.5);
transform: translateY(-2px);
}
/* Responsive Design для user-nav перенесено в mobile.css согласно архитектуре */
/* ===== GUEST NAVIGATION PANEL ===== */
.guest-navigation-panel {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 15px 0;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
position: sticky;
top: 0;
z-index: 1000;
backdrop-filter: blur(10px);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.guest-nav-content {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 20px;
}
.guest-info {
display: flex;
align-items: center;
gap: 10px;
font-weight: 500;
font-size: 16px;
}
.guest-info i {
font-size: 24px;
color: #ffd700;
}
.guest-actions {
display: flex;
gap: 10px;
flex-wrap: wrap;
}
.guest-actions .btn {
padding: 8px 16px;
border-radius: 8px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 8px;
border: none;
cursor: pointer;
}
.guest-actions .btn-primary {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
color: #333;
box-shadow: 0 4px 15px rgba(255, 215, 0, 0.3);
}
.guest-actions .btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 215, 0, 0.4);
}
.guest-actions .btn-secondary {
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
color: white;
box-shadow: 0 4px 15px rgba(78, 205, 196, 0.3);
}
.guest-actions .btn-secondary:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(78, 205, 196, 0.4);
}
/* Responsive Design для guest-nav перенесено в mobile.css согласно архитектуре */
/* ===== FOOTER MANAGEMENT PANELS ===== */
.management-panels {
margin: 20px 0;
padding: 15px 0;
border-top: 1px solid rgba(255, 255, 255, 0.1);
border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.panel-links {
margin: 0;
text-align: center;
}
.panel-link {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 20px;
margin: 5px;
border-radius: 25px;
text-decoration: none;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
.panel-link:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}
.director-link {
background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
color: #333;
}
.director-link:hover {
background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}
.admin-link {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a52 100%);
color: white;
}
.admin-link:hover {
background: linear-gradient(135deg, #ee5a52 0%, #ff6b6b 100%);
}
.manager-link {
background: linear-gradient(135deg, #4ecdc4 0%, #44a08d 100%);
color: white;
}
.manager-link:hover {
background: linear-gradient(135deg, #44a08d 0%, #4ecdc4 100%);
}
/* Responsive Design для panel-links перенесено в mobile.css согласно архитектуре */
/* === STATUS FIELD LAYOUT === */
.status-field {
flex-direction: row !important;
align-items: center !important;
gap: 20px !important;
}
.status-field .luxury-form-label {
margin-bottom: 0 !important;
min-width: 80px !important;
flex-shrink: 0 !important;
}
.status-field .luxury-toggle-container {
flex: 1 !important;
justify-content: flex-start !important;
}
/* === SETTINGS STATUS CARD === */
.settings-status {
margin-bottom: 30px;
}
.status-card {
display: flex;
align-items: center;
gap: 20px;
padding: 24px;
border-radius: 12px;
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 2px solid transparent;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.status-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
}
.status-card.status-locked {
border-color: #ffc107;
background: linear-gradient(135deg, #fff3cd 0%, #ffe69c 100%);
}
.status-card.status-unlocked {
border-color: #28a745;
background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
}
.status-icon {
flex-shrink: 0;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
font-size: 24px;
color: white;
}
.status-card.status-locked .status-icon {
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
}
.status-card.status-unlocked .status-icon {
background: linear-gradient(135deg, #28a745 0%, #20c997 100%);
box-shadow: 0 4px 15px rgba(40, 167, 69, 0.4);
}
.status-content {
flex: 1;
}
.status-content h3 {
margin: 0 0 8px 0;
font-size: 1.3rem;
font-weight: 700;
color: var(--color-text-main);
}
.status-content p {
margin: 0;
color: var(--color-text-muted);
font-size: 0.95rem;
}
.status-actions {
flex-shrink: 0;
}
/* === SETTINGS DISPLAY GRID === */
.settings-display {
margin-top: 20px;
}
.settings-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 20px;
}
.setting-item {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border: 1px solid var(--color-border);
border-radius: 12px;
padding: 20px;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.setting-item::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 4px;
height: 100%;
background: linear-gradient(180deg, var(--color-accent) 0%, var(--color-primary) 100%);
transition: width 0.3s ease;
}
.setting-item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
border-color: var(--color-accent);
}
.setting-item:hover::before {
width: 6px;
}
.setting-label {
font-size: 0.85rem;
font-weight: 600;
color: var(--color-text-muted);
text-transform: uppercase;
letter-spacing: 0.5px;
margin-bottom: 8px;
display: flex;
align-items: center;
gap: 8px;
}
.setting-label i {
color: var(--color-accent);
font-size: 0.9rem;
width: 18px;
text-align: center;
}
.setting-label::before {
content: '';
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--color-accent);
flex-shrink: 0;
}
.setting-value {
font-size: 1.1rem;
font-weight: 600;
color: var(--color-text-main);
word-break: break-word;
line-height: 1.5;
}
.setting-value:empty::after {
content: 'Не указано';
color: var(--color-text-muted);
font-weight: 400;
font-style: italic;
}
.setting-value a {
color: var(--color-primary);
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 5px;
}
.setting-value a:hover {
color: var(--color-accent);
text-decoration: underline;
}
.setting-value code {
font-family: 'Courier New', Courier, monospace;
background: #f5f5f5;
padding: 4px 8px;
border-radius: 4px;
font-size: 0.9em;
color: var(--color-text-main);
border: 1px solid #e0e0e0;
}
/* === FORM ACTIONS === */
.form-actions {
display: flex;
gap: 15px;
margin-top: 30px;
padding-top: 30px;
border-top: 2px solid var(--color-border);
flex-wrap: wrap;
}
.form-actions .btn {
min-width: 150px;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
}
/* === ENHANCED FORM SECTIONS === */
.form-section {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
border-radius: 12px;
padding: 30px;
margin-bottom: 30px;
border: 1px solid var(--color-border);
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.form-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 4px;
background: linear-gradient(90deg, var(--color-accent) 0%, var(--color-primary) 100%);
}
.form-section:hover {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transform: translateY(-2px);
}
.form-section h3 {
color: var(--color-primary);
font-size: 1.3rem;
font-weight: 700;
margin-bottom: 25px;
padding-bottom: 15px;
border-bottom: 2px solid var(--color-border);
display: flex;
align-items: center;
gap: 12px;
}
.form-section h3 i {
color: var(--color-accent);
font-size: 1.2rem;
}
.form-section .form-group {
margin-bottom: 20px;
}
.form-section .form-group:last-child {
margin-bottom: 0;
}
.form-section .form-group label {
display: block;
margin-bottom: 8px;
font-weight: 600;
color: var(--color-text-main);
font-size: 0.95rem;
}
.form-section .form-control {
width: 100% !important;
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
padding: 12px 16px !important;
border: 2px solid #e9ecef !important;
border-radius: 8px !important;
font-size: 14px !important;
line-height: 1.4 !important;
transition: border-color 0.3s ease !important;
background: white !important;
color: #000000 !important;
box-sizing: border-box !important;
}
.form-section .form-control:focus {
outline: none !important;
border-color: #667eea !important;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1) !important;
}
.form-section .form-control:disabled {
background: #f5f5f5 !important;
cursor: not-allowed !important;
opacity: 0.7 !important;
}
.form-section select.form-control {
cursor: pointer !important;
appearance: none !important;
-webkit-appearance: none !important;
-moz-appearance: none !important;
background-image: url("data:image/svg+xml;charset=UTF-8,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3e%3cpolyline points='6,9 12,15 18,9'%3e%3c/polyline%3e%3c/svg%3e") !important;
background-repeat: no-repeat !important;
background-position: right 12px center !important;
background-size: 16px !important;
padding-right: 40px !important;
padding-left: 16px !important; /* Исправлено: текст должен начинаться сразу */
padding-top: 12px !important; /* Исправлено: одинаковые отступы сверху и снизу */
padding-bottom: 12px !important; /* Исправлено: одинаковые отступы сверху и снизу */
height: 48px !important;
min-height: 48px !important;
max-height: 48px !important;
line-height: 1.3 !important; /* Исправлено: уменьшен для правильного отображения */
/* ВАЖНО: Убираем белую полосу внизу */
box-shadow: none !important;
background-clip: padding-box !important;
-webkit-background-clip: padding-box !important;
background-origin: padding-box !important;
-webkit-background-origin: padding-box !important;
display: block !important;
/* vertical-align не используется с display: block - удалено для устранения конфликта */
margin: 0 !important;
}
/* === RESPONSIVE ADJUSTMENTS === */
/* Адаптивные стили для status-card перенесены в mobile.css согласно архитектуре */
/* Стили student-notification перенесены в notifications.css */
/* === ГЛОБАЛЬНЫЕ СТИЛИ ДЛЯ СУПЕР-АДМИНА === */
/* Стили для замены inline стилей в PHP файлах */
/* Footer супер-админа */
.super-admin-footer {
background: var(--color-text-main, #333);
color: var(--color-bg-card, white);
text-align: center;
padding: 20px;
margin-top: 40px;
border-radius: 10px;
box-shadow: 0 -4px 15px rgba(0, 0, 0, 0.1);
}
.super-admin-footer p {
margin: 0.5rem 0;
}
.super-admin-footer p:last-child {
font-size: 0.9em;
opacity: 0.7;
}
/* Разделители */
hr.section-divider {
margin: 2rem 0;
border-color: var(--color-border, #e0e0e0);
border-width: 1px;
border-style: solid;
border-top: none;
border-left: none;
border-right: none;
}
/* Заголовки секций */
h3.section-title {
margin-bottom: 1.5rem;
color: var(--color-text-secondary, #333);
}
/* Конфигурационные карточки */
.api-config-grid {
margin-top: 2rem;
}
.config-card {
border-left: 4px solid var(--color-primary);
padding: 1rem;
margin-bottom: 1rem;
background: var(--color-bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.config-card.success {
border-left-color: var(--color-accent, #28a745);
}
.config-card.warning {
border-left-color: #ff9800;
}
.config-card.info {
border-left-color: #17a2b8;
}
.config-card.danger {
border-left-color: var(--color-error, #dc3545);
}
.config-item {
margin-top: 1rem;
padding-top: 1rem;
border-top: 1px solid var(--color-border, #e0e0e0);
}
.config-value {
color: var(--color-text-main);
}
.config-value.warning {
color: #ff9800;
}
/* Детали бота */
.bot-details {
margin-top: 1rem;
}
.detail-value {
display: block;
font-size: 1rem;
color: var(--color-text-main);
font-weight: 500;
word-break: break-word;
}
.detail-value.small {
font-size: 0.85em;
word-break: break-all;
}
/* Карточки проверки */
.check-card {
border-left: 4px solid var(--color-primary);
padding: 1rem;
margin-bottom: 1rem;
background: var(--color-bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.check-card.success {
border-left-color: var(--color-accent, #28a745);
}
.check-card .score {
font-size: 2rem;
font-weight: 700;
color: var(--color-accent, #28a745);
}
/* Карточки статуса */
.status-card {
border-left: 4px solid var(--color-primary);
padding: 1rem;
margin-bottom: 1rem;
background: var(--color-bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.status-card.success {
border-left-color: var(--color-accent, #28a745);
}
.status-card .score {
font-size: 2rem;
font-weight: 700;
color: var(--color-accent, #28a745);
}
/* Элементы результатов */
.result-item {
border-left: 4px solid var(--color-primary);
padding: 1rem;
margin-bottom: 1rem;
background: var(--color-bg-card);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.result-item.success {
border-left-color: var(--color-accent, #28a745);
}
.result-item .score {
font-size: 2rem;
font-weight: 700;
color: var(--color-accent, #28a745);
}
/* Прогресс-бары */
.progress-bar {
width: 100%;
height: 20px;
background: var(--color-gray, #e0e0e0);
border-radius: 10px;
overflow: hidden;
position: relative;
}
.progress-bar-dynamic {
height: 100%;
background: var(--color-accent, #28a745);
border-radius: 10px;
transition: width 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
color: var(--color-bg-card, white);
font-size: 0.85rem;
font-weight: 600;
}
.progress-fill {
height: 100%;
background: var(--color-accent, #28a745);
border-radius: 4px;
transition: width 0.3s ease;
}
.progress-fill.success {
background: var(--color-accent, #28a745);
}
.progress-fill.warning {
background: #ffc107;
}
.progress-fill.danger {
background: var(--color-error, #dc3545);
}
.progress-fill.full {
width: 96%;
}
/* Текст с центрированием */
.text-center {
text-align: center;
margin-top: 10px;
color: var(--color-text-muted, #666);
}
/* Модальные окна */
.modal-overlay {
display: none;
}
.modal-overlay.show {
display: flex;
}
/* Скрытые элементы */
.hidden {
display: none !important;
}
/* Элементы с отступами */
.mt-3 {
margin-top: 1rem;
}
/* Inline элементы */
.inline-form {
display: inline;
}
/* Дополнительные утилиты для API админа */
.alert-spacing {
margin-bottom: 20px;
}
.section-spacing {
margin-top: 30px;
}
.center-spacing {
text-align: center;
margin-top: 30px;
}
.list-spacing {
margin: 10px 0;
padding-left: 20px;
color: var(--color-text-secondary);
}
.modal-content-responsive {
max-width: 90%;
max-height: 80%;
}
.center-padding {
text-align: center;
padding: 20px;
}
.spinner-large {
font-size: 2rem;
color: var(--color-primary);
}
.code-block {
background: #2d3748;
color: #e2e8f0;
padding: 15px;
border-radius: 8px;
overflow-x: auto;
max-height: 400px;
}
.info-block {
background: #f8f9fa;
padding: 15px;
border-radius: 8px;
margin-bottom: 15px;
}
.flex-center-wrap {
display: flex;
align-items: center;
gap: 15px;
margin-top: 15px;
flex-wrap: wrap;
}
.icon-large {
font-size: 2rem;
}
.icon-danger {
color: var(--color-error, #dc3545);
}
.icon-warning {
color: var(--color-warning, #ffc107);
}
/* Стили для токенов и статусов */
.token-status-active {
color: var(--color-success, #28a745);
font-weight: bold;
}
.token-status-inactive {
color: var(--color-error, #dc3545);
font-weight: bold;
}
.token-display-container {
position: relative;
}
.token-textarea {
font-family: monospace;
font-size: 12px;
resize: vertical;
min-height: 120px;
padding-right: 120px;
border-radius: 8px;
border: 2px solid #e9ecef;
}
.token-actions {
position: absolute;
top: 8px;
right: 8px;
display: flex;
gap: 8px;
}
.btn-sm-rounded {
border-radius: 6px;
padding: 6px 10px;
}
/* Дополнительные стили для config-value */
.config-value.warning {
color: #ff9800;
}
/* ============================================
PRIVACY POLICY - ОБЩИЕ СТИЛИ
(одинаковые для всех размеров экрана)
============================================ */
/* Основной контейнер */
main.privacy-policy-container {
margin: 0 auto;
line-height: 1.75;
color: var(--color-text-main, #1c1c1e);
font-family: var(--font-main, 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif);
background: var(--color-bg-card, #ffffff);
}
/* Заголовок страницы */
main.privacy-policy-container .privacy-policy-header {
text-align: center;
border-bottom: 3px solid var(--color-primary, #0c3c78);
position: relative;
}
main.privacy-policy-container .privacy-policy-header::after {
content: '';
position: absolute;
bottom: -3px;
left: 50%;
transform: translateX(-50%);
width: 100px;
height: 3px;
background: var(--color-primary, #0c3c78);
}
main.privacy-policy-container .privacy-policy-header h1 {
color: var(--color-primary, #0c3c78);
font-weight: 700;
letter-spacing: -0.5px;
line-height: 1.2;
}
main.privacy-policy-container .privacy-policy-header .last-updated {
color: var(--color-text-muted, #888);
font-style: italic;
display: block;
}
/* Секции политики */
main.privacy-policy-container .privacy-section {
background: var(--color-bg-light, #e3f2fd);
border-radius: var(--radius, 0.75rem);
box-shadow: var(--shadow-md, 0 0.375rem 1.25rem rgba(0, 0, 0, 0.08));
border: 1px solid var(--color-border, #e0e0e0);
transition: var(--transition, all 0.3s ease);
}
main.privacy-policy-container .privacy-section:hover {
box-shadow: var(--shadow-lg, 0 0.625rem 2rem rgba(0, 0, 0, 0.12));
transform: translateY(-2px);
}
main.privacy-policy-container .privacy-section h2 {
color: var(--color-primary, #0c3c78);
border-left: 5px solid var(--color-primary, #0c3c78);
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.3px;
}
main.privacy-policy-container .privacy-section h3 {
color: var(--color-text-main, #1c1c1e);
font-weight: 600;
line-height: 1.4;
}
main.privacy-policy-container .privacy-section h4 {
color: var(--color-text-secondary, #333);
font-weight: 600;
line-height: 1.4;
}
main.privacy-policy-container .privacy-section ul li {
line-height: 1.7;
color: var(--color-text-secondary, #333);
position: relative;
}
main.privacy-policy-container .privacy-section ul li::marker {
color: var(--color-primary, #0c3c78);
font-weight: bold;
}
main.privacy-policy-container .privacy-section ol li {
line-height: 1.7;
color: var(--color-text-secondary, #333);
}
main.privacy-policy-container .privacy-section p {
text-align: justify;
color: var(--color-text-secondary, #333);
line-height: 1.8;
}
main.privacy-policy-container .privacy-section p:last-child {
margin-bottom: 0;
}
main.privacy-policy-container .privacy-section a {
color: var(--color-primary, #0c3c78);
text-decoration: none;
border-bottom: 1px solid transparent;
transition: var(--transition-fast, all 0.2s ease-in-out);
font-weight: 500;
}
main.privacy-policy-container .privacy-section a:hover {
color: var(--color-primary-dark, #092a5a);
border-bottom-color: var(--color-primary-dark, #092a5a);
}
main.privacy-policy-container .privacy-section a:focus {
outline: 2px solid var(--color-primary, #0c3c78);
outline-offset: 2px;
border-radius: 2px;
}
main.privacy-policy-container .privacy-section strong {
color: var(--color-text-main, #1c1c1e);
font-weight: 600;
}
main.privacy-policy-container .privacy-content {
color: var(--color-text-secondary, #333);
}
/* Кнопка возврата */
main.privacy-policy-container .back-to-home {
text-align: center;
border-top: 2px solid var(--color-border, #e0e0e0);
}
main.privacy-policy-container .back-to-home a {
display: inline-flex;
align-items: center;
gap: 10px;
background: var(--primary-button-background, linear-gradient(to right, var(--color-primary, #0c3c78), var(--color-accent, #0b7a3e)));
color: var(--primary-button-color, #ffffff);
text-decoration: none;
border-radius: var(--radius, 0.75rem);
transition: var(--transition, all 0.3s ease);
font-weight: 600;
box-shadow: var(--shadow-md, 0 0.375rem 1.25rem rgba(0, 0, 0, 0.08));
}
main.privacy-policy-container .back-to-home a:hover {
background: linear-gradient(to right, var(--color-primary-dark, #092a5a), var(--color-accent-dark, #08542e));
transform: translateY(-2px);
box-shadow: var(--shadow-lg, 0 0.625rem 2rem rgba(0, 0, 0, 0.12));
}
main.privacy-policy-container .back-to-home a:active {
transform: translateY(0);
}
/* ============================================ */
/* КРИТИЧНО: ГЛОБАЛЬНОЕ ПЕРЕОПРЕДЕЛЕНИЕ КНОПКИ ЗАКРЫТИЯ */
/* Размещено в конце файла для максимальной специфичности */
/* Это правило имеет максимальный приоритет в каскаде */
/* ============================================ */
html body .modal .modal-dialog .modal-content .modal-header .btn-close,
html body .modal.fade .modal-dialog .modal-content .modal-header .btn-close,
html body .modal.active .modal-dialog .modal-content .modal-header .btn-close,
html body .modal.show .modal-dialog .modal-content .modal-header .btn-close,
html body .modal-header .btn-close,
html body .modal-header * .btn-close,
html body .modal-header button.btn-close,
html body button.modal-header .btn-close,
.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; /* Поверх других элементов */
}
html body .modal .modal-dialog .modal-content .modal-header .btn-close:hover,
html body .modal.fade .modal-dialog .modal-content .modal-header .btn-close:hover,
html body .modal.active .modal-dialog .modal-content .modal-header .btn-close:hover,
html body .modal.show .modal-dialog .modal-content .modal-header .btn-close:hover,
html body .modal-header .btn-close:hover,
.modal .modal-dialog .modal-content .modal-header .btn-close:hover,
.modal.fade .modal-dialog .modal-content .modal-header .btn-close:hover,
.modal.active .modal-dialog .modal-content .modal-header .btn-close:hover,
.modal.show .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; /* Жирный шрифт для видимости */
}
html body .modal .modal-dialog .modal-content .modal-header .btn-close:focus,
html body .modal.fade .modal-dialog .modal-content .modal-header .btn-close:focus,
html body .modal.active .modal-dialog .modal-content .modal-header .btn-close:focus,
html body .modal.show .modal-dialog .modal-content .modal-header .btn-close:focus,
html body .modal-header .btn-close:focus,
.modal .modal-dialog .modal-content .modal-header .btn-close:focus,
.modal.fade .modal-dialog .modal-content .modal-header .btn-close:focus,
.modal.active .modal-dialog .modal-content .modal-header .btn-close:focus,
.modal.show .modal-dialog .modal-content .modal-header .btn-close:focus,
.modal-header .btn-close:focus {
color: var(--color-primary) !important;
-webkit-text-fill-color: var(--color-primary) !important;
background: var(--color-bg-card) !important;
box-shadow: 0 0 0 3px rgba(12, 60, 120, 0.25) !important;
}
/* === MANAGEMENT COMPONENTS === */
/* Empty state для management блоков */
.management-empty-state {
text-align: center;
padding: var(--space-xl) var(--space-lg);
color: var(--color-management-empty-text);
border: 2px dashed var(--color-management-empty-border);
border-radius: var(--radius-sm);
}
.management-empty-state-icon {
color: var(--color-management-empty-icon);
margin-bottom: var(--space-lg);
font-size: 3rem;
}
.management-empty-state h3 {
margin-bottom: var(--space-sm);
}
.management-empty-state p {
margin-bottom: var(--space-lg);
max-width: 500px;
margin-left: auto;
margin-right: auto;
}
/* Placeholder для edit/delete блоков */
.management-placeholder {
text-align: center;
padding: var(--space-xl) var(--space-lg);
color: var(--color-management-empty-text);
}
.management-placeholder-icon {
color: var(--color-management-empty-icon);
margin-bottom: var(--space-lg);
font-size: 3rem;
}
/* Management table wrapper */
.management-table-wrapper {
overflow-x: auto;
}
/* Management block header */
.management-block-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: var(--space-lg);
}
.management-block-header h2 {
margin: 0;
}
.management-block-header-count {
font-weight: normal;
color: var(--color-text-muted);
}
/* Status badges */
.status-badge {
padding: var(--space-xs) var(--space-sm);
border-radius: 20px;
font-size: 0.75rem;
font-weight: 600;
display: inline-block;
}
.status-badge-active {
background: var(--color-management-status-active-bg);
color: var(--color-management-status-active-text);
}
.status-badge-inactive {
background: var(--color-management-status-inactive-bg);
color: var(--color-management-status-inactive-text);
}
/* Management actions container */
.management-actions {
display: flex;
gap: var(--space-md);
margin-top: var(--space-xl);
}
/* Management form grid */
.management-form-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-lg);
margin-bottom: var(--space-lg);
}
.management-form-grid-full {
grid-column: 1 / -1;
}
/* Management form label */
.management-form-label {
display: block;
margin-bottom: var(--space-sm);
font-weight: 500;
}
.management-form-label-required {
color: var(--color-management-required);
}
/* Management form input */
.management-form-input {
width: 100%;
padding: var(--space-sm);
border: 2px solid var(--color-management-empty-border);
border-radius: var(--radius-sm);
}
/* Management confirmation block */
.management-confirmation {
background: var(--color-alert-warning-bg);
border: 1px solid var(--color-alert-warning-border);
border-radius: var(--radius-sm);
padding: var(--space-lg);
margin-bottom: var(--space-lg);
}
.management-confirmation-icon {
color: var(--color-alert-warning-text);
font-size: var(--space-xl);
margin-bottom: var(--space-md);
}
.management-confirmation-title {
color: var(--color-alert-warning-text);
margin: 0 0 var(--space-sm) 0;
}
.management-confirmation-info {
background: var(--color-management-block-bg);
border-radius: var(--radius-sm);
padding: var(--space-md);
margin-top: var(--space-md);
}
/* === 📄 APPLICATION MODAL STYLES === */
/* Модальное окно для редактирования заявок */
.application-modal {
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.5);
z-index: 10000;
}
.application-modal.show {
display: block;
}
.application-modal-loader {
display: none;
}
.application-modal-loader.show {
display: inline;
}
.application-modal-content {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background: white;
padding: 24px;
border-radius: 12px;
min-width: 500px;
max-width: 90%;
max-height: 90%;
overflow-y: auto;
}
.application-modal-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
}
.application-modal-header h3 {
margin: 0;
}
.application-modal-close {
background: none;
border: none;
font-size: 24px;
cursor: pointer;
color: #666;
padding: 0;
line-height: 1;
}
.application-modal-close:hover {
color: #333;
}
.application-modal-error {
display: none;
padding: 12px;
margin-bottom: 16px;
background: #fee;
border: 1px solid #fcc;
border-radius: 4px;
color: #c33;
}
.application-modal-error.show {
display: block;
}
.application-modal-success {
display: none;
padding: 12px;
margin-bottom: 16px;
background: #efe;
border: 1px solid #cfc;
border-radius: 4px;
color: #3c3;
}
.application-modal-success.show {
display: block;
}
.application-modal-form-group {
margin-bottom: 16px;
}
.application-modal-actions {
display: flex;
gap: 8px;
justify-content: flex-end;
}
.application-modal-loader {
display: none;
}
.application-modal-loader.show {
display: inline;
}
/* === 📄 EXECUTIVE PAGINATION STYLES === */
.executive-pagination {
display: flex;
justify-content: center;
align-items: center;
gap: 8px;
padding: 20px;
}
.executive-pagination-info {
padding: 0 16px;
}