/* assets/css/style.css */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); /* ================================================================== ТЕМЫ CRM. По умолчанию — СВЕТЛАЯ (фирменный красный акцент). Тёмная включается классом .dark на (переключатель в шапке). Палитра tailwind «slate» объявлена через CSS-переменные (index.html), поэтому весь интерфейс перекрашивается мгновенно. ================================================================== */ :root { /* ☀️ СВЕТЛАЯ ТЕМА: шкала slate инверитирована (900 = белый фон) */ --sl-50: 15 23 42; /* самый тёмный → текст */ --sl-100: 30 41 59; --sl-200: 51 65 85; --sl-300: 71 85 105; /* второстепенный текст */ --sl-400: 100 116 139; --sl-500: 148 163 184; --sl-600: 203 213 225; --sl-700: 226 232 240; /* рамки */ --sl-800: 232 236 242; --sl-850: 246 248 251; --sl-900: 255 255 255; /* карточки */ --sl-950: 238 241 247; /* фон страницы */ color-scheme: light; /* легаси-переменные компонентов */ --bg-main: #EEF1F7; --bg-card: #FFFFFF; --bg-hover: #E2E8F0; --border-color: #E2E8F0; --text-primary: #1E293B; --text-secondary: #64748B; --accent-blue: #DC2626; --accent-light-blue: #E11D48; --success: #16A34A; --warning: #D97706; --danger: #DC2626; --info: #0891B2; } html.dark { /* 🌙 ТЁМНАЯ ТЕМА (как раньше) */ --sl-50: 248 250 252; --sl-100: 241 245 249; --sl-200: 226 232 240; --sl-300: 203 213 225; --sl-400: 148 163 184; --sl-500: 100 116 139; --sl-600: 71 85 105; --sl-700: 51 65 85; --sl-800: 30 41 59; --sl-850: 21 32 51; --sl-900: 15 23 42; --sl-950: 8 14 26; color-scheme: dark; --bg-main: #0F172A; --bg-card: #1E293B; --bg-hover: #334155; --border-color: #334155; --text-primary: #F8FAFC; --text-secondary: #94A3B8; --accent-blue: #3B82F6; --accent-light-blue: #60A5FA; } * { box-sizing: border-box; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background-color: var(--bg-main); color: var(--text-primary); margin: 0; padding: 0; overflow-x: hidden; line-height: 1.5; } /* Белый текст в СВЕТЛОЙ теме становится тёмным, КРОМЕ цветных кнопок/бейджей */ html:not(.dark) .text-white { color: #1E293B !important; } html:not(.dark) :is(button, a, select).text-white, html:not(.dark) .text-white[class*="from-"], html:not(.dark) .text-white[class*="bg-blue-"], html:not(.dark) .text-white[class*="bg-indigo-"], html:not(.dark) .text-white[class*="bg-sky-"], html:not(.dark) .text-white[class*="bg-cyan-"], html:not(.dark) .text-white[class*="bg-emerald-"], html:not(.dark) .text-white[class*="bg-teal-"], html:not(.dark) .text-white[class*="bg-green-"], html:not(.dark) .text-white[class*="bg-amber-"], html:not(.dark) .text-white[class*="bg-orange-"], html:not(.dark) .text-white[class*="bg-red-"], html:not(.dark) .text-white[class*="bg-rose-"], html:not(.dark) .text-white[class*="bg-pink-"], html:not(.dark) .text-white[class*="bg-fuchsia-"], html:not(.dark) .text-white[class*="bg-purple-"], html:not(.dark) .text-white[class*="bg-violet-"], html:not(.dark) .text-white[class*="bg-yellow-"] { color: #FFFFFF !important; } /* Тени мягче на светлом фоне */ html:not(.dark) .shadow, html:not(.dark) .shadow-md, html:not(.dark) .shadow-lg, html:not(.dark) .shadow-xl, html:not(.dark) .shadow-2xl { box-shadow: 0 6px 18px -6px rgb(15 23 42 / 0.10), 0 2px 6px -2px rgb(15 23 42 / 0.05) !important; } /* Логотип компании: свой вариант под каждую тему */ .logo-dark-only { display: none !important; } html.dark .logo-dark-only { display: inline-block !important; } html.dark .logo-light-only { display: none !important; } /* Кнопки компактных карточек производства */ .prod-btn-primary { display: inline-flex; align-items: center; gap: 4px; padding: 5px 10px; border-radius: 9px; font-size: 11px; font-weight: 700; color: #fff; white-space: nowrap; background: linear-gradient(to right, #DC2626, #E11D48); box-shadow: 0 2px 8px -2px rgb(220 38 38 / .45); transition: filter .15s, transform .1s; } .prod-btn-primary:hover { filter: brightness(1.08); } .prod-btn-primary:active { transform: scale(.97); } .prod-btn-primary:disabled { background: rgb(var(--sl-800)); color: rgb(var(--sl-500)); box-shadow: none; cursor: not-allowed; } .prod-btn-ghost { display: inline-flex; align-items: center; padding: 5px 8px; border-radius: 9px; font-size: 12px; color: rgb(var(--sl-300)); background: rgb(var(--sl-700) / .55); transition: background .15s; } .prod-btn-ghost:hover { background: rgb(var(--sl-700) / .9); } /* Glassmorphism */ .glass-card { background: rgba(30, 41, 59, 0.75); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1px solid rgba(51, 65, 85, 0.6); border-radius: 14px; box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.25); transition: all 0.25s ease; } html:not(.dark) .glass-card { background: rgba(255, 255, 255, 0.92); border: 1px solid #E2E8F0; box-shadow: 0 12px 32px -10px rgb(15 23 42 / 0.18); } .glass-card:hover { border-color: rgba(220, 38, 38, 0.45); } html.dark .glass-card:hover { border-color: rgba(96, 165, 250, 0.4); } .glass-panel { background: rgba(15, 23, 42, 0.85); backdrop-filter: blur(16px); border: 1px solid rgba(51, 65, 85, 0.5); } html:not(.dark) .glass-panel { background: rgba(255, 255, 255, 0.9); border: 1px solid #E2E8F0; } /* Custom Scrollbar */ ::-webkit-scrollbar { width: 8px; height: 8px; } ::-webkit-scrollbar-track { background: rgb(var(--sl-950)); } ::-webkit-scrollbar-thumb { background: rgb(var(--sl-600)); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: rgb(var(--sl-500)); } /* Animations */ @keyframes fadeIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .animate-fade-in { animation: fadeIn 0.25s ease-out forwards; } /* Drag and Drop Kanban */ .kanban-column { min-height: 400px; max-height: calc(100vh - 230px); overflow-y: auto; } .kanban-card { cursor: grab; user-select: none; } .kanban-card:active { cursor: grabbing; } .kanban-card.dragging { opacity: 0.5; transform: scale(0.98); } .kanban-column.drag-over { background: rgba(220, 38, 38, 0.08); border: 2px dashed rgba(220, 38, 38, 0.5); } html.dark .kanban-column.drag-over { background: rgba(59, 130, 246, 0.1); border: 2px dashed rgba(59, 130, 246, 0.5); } /* Pipeline Tracker */ .pipeline-step { position: relative; transition: all 0.3s ease; } .pipeline-step.completed { background: rgba(34, 197, 94, 0.15); border-color: #22C55E; color: #16A34A; } html.dark .pipeline-step.completed { color: #22C55E; } .pipeline-step.current { background: rgba(220, 38, 38, 0.12); border-color: #DC2626; color: #DC2626; box-shadow: 0 0 15px rgba(220, 38, 38, 0.3); } html.dark .pipeline-step.current { background: rgba(59, 130, 246, 0.2); border-color: #3B82F6; color: #60A5FA; box-shadow: 0 0 15px rgba(59, 130, 246, 0.4); } .pipeline-step.pending { background: rgb(var(--sl-800) / .5); border-color: rgb(var(--sl-700) / .6); color: rgb(var(--sl-400)); } .pipeline-step.rejected { background: rgba(239, 68, 68, 0.15); border-color: #EF4444; color: #EF4444; } .pipeline-step.skipped { background: rgba(100, 116, 139, 0.12); border-color: rgba(100, 116, 139, 0.45); color: rgb(var(--sl-400)); text-decoration: line-through; } /* Modal backdrop */ .modal-backdrop { background: rgba(15, 23, 42, 0.8); backdrop-filter: blur(6px); } html:not(.dark) .modal-backdrop { background: rgba(30, 41, 59, 0.45); } /* Table styles */ .custom-table th { text-align: left; padding: 12px 16px; color: var(--text-secondary); font-weight: 600; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; border-bottom: 1px solid var(--border-color); } .custom-table td { padding: 14px 16px; border-bottom: 1px solid rgb(var(--sl-700) / .5); font-size: 0.875rem; color: var(--text-primary); } .custom-table tr:hover { background-color: rgb(var(--sl-700) / .35); } /* Toast notifications */ .toast-container { position: fixed; bottom: 24px; right: 24px; z-index: 9999; display: flex; flex-direction: column; gap: 10px; } .toast { padding: 12px 18px; border-radius: 10px; background: var(--bg-card); color: var(--text-primary); border-left: 4px solid var(--accent-blue); box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5); display: flex; align-items: center; gap: 12px; animation: fadeIn 0.3s ease; font-size: 0.875rem; } html:not(.dark) .toast { box-shadow: 0 10px 25px rgb(15 23 42 / 0.18); border: 1px solid #E2E8F0; border-left: 4px solid var(--accent-blue); } .toast.success { border-left-color: #22C55E; } .toast.error { border-left-color: #EF4444; } .toast.warning { border-left-color: #F59E0B; }