/* ============================================================ theme.css — единый источник дизайн-токенов (RU/UA ticket system) Объединяет палитры style.css + modern-ui.css. Dark — по умолчанию; Light — через . Подключается ПЕРВЫМ, чтобы задать переменные до остальных CSS. ============================================================ */ :root, :root[data-theme="dark"] { /* Фоны */ --bg-primary: #0a0c10; --bg-secondary: #13151d; --bg-tertiary: #1c1f2b; --bg-quaternary: #252936; --bg-hover: #252936; /* Текст */ --text-primary: #ffffff; --text-secondary: #a0a0ab; --text-tertiary: #6b6b76; /* Границы */ --border: rgba(255, 255, 255, 0.08); --border-hover: rgba(139, 92, 246, 0.35); /* Акцент */ --primary: #8b5cf6; --primary-hover: #7c3aed; --primary-light: rgba(139, 92, 246, 0.12); /* Статусы */ --success: #10b981; --warning: #f59e0b; --danger: #ef4444; --info: #3b82f6; /* Градиенты */ --gradient-primary: linear-gradient(135deg, #8b5cf6 0%, #7c3aed 50%, #6d28d9 100%); --gradient-accent: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%); --gradient-success: linear-gradient(135deg, #10b981 0%, #059669 100%); --gradient-warm: linear-gradient(135deg, #f59e0b 0%, #d97706 100%); /* Тени */ --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.2); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.3); --shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.4); --shadow-glow-purple: 0 8px 32px rgba(139, 92, 246, 0.25); --shadow-glow-blue: 0 8px 32px rgba(59, 130, 246, 0.25); /* Радиусы */ --radius: 12px; --radius-lg: 16px; color-scheme: dark; } /* ===================== СВЕТЛАЯ ТЕМА ===================== */ :root[data-theme="light"] { --bg-primary: #f5f6fa; --bg-secondary: #ffffff; --bg-tertiary: #eef0f5; --bg-quaternary: #e4e7ef; --bg-hover: #eef0f5; --text-primary: #1a1d29; --text-secondary: #5b6172; --text-tertiary: #8b90a0; --border: rgba(0, 0, 0, 0.10); --border-hover: rgba(124, 58, 237, 0.35); --primary: #7c3aed; --primary-hover: #6d28d9; --primary-light: rgba(124, 58, 237, 0.10); --success: #059669; --warning: #d97706; --danger: #dc2626; --info: #2563eb; --shadow-sm: 0 2px 8px rgba(16, 24, 40, 0.06); --shadow-md: 0 8px 24px rgba(16, 24, 40, 0.10); --shadow-lg: 0 16px 48px rgba(16, 24, 40, 0.14); --shadow-glow-purple: 0 8px 32px rgba(124, 58, 237, 0.18); --shadow-glow-blue: 0 8px 32px rgba(37, 99, 235, 0.18); color-scheme: light; } /* Плавный переход ТОЛЬКО при ручной смене темы (класс ставится JS после загрузки). На начальной загрузке/навигации перехода нет — это убирает мерцание (FOUC). */ :root.theme-anim body, :root.theme-anim .sidebar, :root.theme-anim .main, :root.theme-anim .topbar, :root.theme-anim .card, :root.theme-anim .stat-card, :root.theme-anim .table-container, :root.theme-anim .period-tab, :root.theme-anim .lang-btn, :root.theme-anim input, :root.theme-anim select, :root.theme-anim textarea, :root.theme-anim .btn, :root.theme-anim .btn-secondary { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* В светлой теме приглушаем тяжёлый анимированный фон, если он есть */ :root[data-theme="light"] .animated-background, :root[data-theme="light"] #animated-bg, :root[data-theme="light"] .bg-animation { opacity: 0.35; } /* ============================================================ FIX: светлый фон в светлой теме — перекрываем тёмный градиент из animated-background.css (body::before). ============================================================ */ :root[data-theme="light"] body::before { background: radial-gradient(ellipse at 20% 30%, rgba(124, 58, 237, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 80% 70%, rgba(37, 99, 235, 0.06) 0%, transparent 50%), radial-gradient(ellipse at 50% 50%, rgba(16, 185, 129, 0.04) 0%, transparent 50%), linear-gradient(135deg, #f5f6fa 0%, #eef0f5 50%, #e9ebf2 100%) !important; } /* Сетка почти незаметна на светлом */ :root[data-theme="light"] .animated-grid { background-image: linear-gradient(rgba(124, 58, 237, 0.12) 1px, transparent 1px), linear-gradient(90deg, rgba(124, 58, 237, 0.12) 1px, transparent 1px) !important; opacity: 0.04; } /* Базовый фон body на случай, если что-то просвечивает */ :root[data-theme="light"] body { background-color: var(--bg-primary); } /* Заголовки страниц иногда заданы градиентным/светлым текстом — в светлой теме делаем их тёмными и читаемыми. */ :root[data-theme="light"] .page-title { background: none !important; -webkit-text-fill-color: var(--text-primary) !important; color: var(--text-primary) !important; } /* Поля ввода/поиска в светлой теме */ :root[data-theme="light"] input, :root[data-theme="light"] select, :root[data-theme="light"] textarea { background: var(--bg-tertiary); color: var(--text-primary); border-color: var(--border); } :root[data-theme="light"] input::placeholder { color: var(--text-tertiary); } /* ============================================================ FIX: читаемость кнопок и текста (обе темы + светлая). ============================================================ */ /* Главная кнопка с цветным/градиентным фоном — текст ВСЕГДА белый, независимо от темы (фон фиолетовый в обеих). */ .btn, .btn-primary, button.btn, a.btn { color: #ffffff !important; } .btn *, .btn-primary * { color: #ffffff !important; } /* Светлая тема: читаемость второстепенных элементов */ :root[data-theme="light"] .period-tab, :root[data-theme="light"] .lang-btn, :root[data-theme="light"] .nav-item, :root[data-theme="light"] .btn-secondary { color: var(--text-primary); } :root[data-theme="light"] .period-tab { color: var(--text-secondary); } :root[data-theme="light"] .period-tab.active { color: var(--primary); background: var(--primary-light); border-color: var(--primary); } /* Активная вкладка языка/таба — контрастная */ :root[data-theme="light"] .lang-btn.active { background: var(--primary-light); color: var(--primary); border-color: var(--primary); } /* Кнопка выхода — оставляем красной, текст читаемый */ :root[data-theme="light"] .logout-btn { color: var(--danger); } /* Кнопка темы в светлой теме */ :root[data-theme="light"] .theme-toggle { background: var(--bg-secondary); color: var(--text-primary); border-color: var(--border); } /* Сайдбар-ссылки в светлой теме */ :root[data-theme="light"] .nav-item, :root[data-theme="light"] .nav-item span { color: var(--text-secondary); } :root[data-theme="light"] .nav-item:hover, :root[data-theme="light"] .nav-item.active, :root[data-theme="light"] .nav-item.active span { color: var(--text-primary); } :root[data-theme="light"] .nav-label { color: var(--text-tertiary); } /* ============================================================ PREMIUM / GLASS дизайн-слой + унификация лого и переключателя. Единый источник, работает в обеих темах, на всех страницах. ============================================================ */ /* ---------- ЛОГО: единый стиль везде (градиентный текст) ---------- */ .logo-name { background: var(--gradient-primary) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; font-weight: 700 !important; letter-spacing: -0.3px; } .logo-box, .logo { display: flex; align-items: center; gap: 12px; } .logo-box img, .logo img, .logo-icon img { width: 38px; height: 38px; border-radius: 10px; } /* ---------- ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА: реагирует на тему ---------- */ .language-switcher { background: var(--bg-secondary) !important; border: 1px solid var(--border) !important; box-shadow: var(--shadow-sm) !important; backdrop-filter: blur(16px); } .language-switcher:hover { border-color: var(--border-hover) !important; box-shadow: var(--shadow-glow-purple) !important; } .lang-btn { color: var(--text-secondary) !important; } .lang-btn:hover { color: var(--text-primary) !important; } .lang-btn.active { background: var(--gradient-primary) !important; color: #ffffff !important; } /* ---------- GLASS-КАРТОЧКИ ---------- */ .card, .stat-card, .table-container, .chart-card, .modal-content, .user-card, .glass { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); backdrop-filter: blur(12px) saturate(1.1); -webkit-backdrop-filter: blur(12px) saturate(1.1); position: relative; transition: transform .25s cubic-bezier(.4,0,.2,1), box-shadow .25s ease, border-color .25s ease; } /* тонкая верхняя подсветка-стекло */ .card::before, .stat-card::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(180deg, rgba(255,255,255,.10), transparent 40%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } /* hover-глубина */ .stat-card:hover, .card:hover, .user-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg), var(--shadow-glow-purple); border-color: var(--border-hover); } /* ---------- STAT-КАРТОЧКИ: акцентная цифра ---------- */ .stat-card .stat-value, .stat-value, .stat-number { background: var(--gradient-primary); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-weight: 800; } /* ---------- КНОПКИ: премиальные ---------- */ .btn, a.btn, button.btn { background: var(--gradient-primary) !important; color: #fff !important; border: none; border-radius: var(--radius); box-shadow: 0 6px 20px rgba(139,92,246,.35); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn:hover { transform: translateY(-2px); box-shadow: 0 10px 28px rgba(139,92,246,.45); filter: brightness(1.05); } .btn:active { transform: translateY(0); } /* ---------- ТАБЛИЦЫ: мягче строки, hover ---------- */ table tbody tr { transition: background .15s ease; } table tbody tr:hover { background: var(--primary-light); } table thead th { text-transform: uppercase; letter-spacing: .5px; font-size: 11px; color: var(--text-tertiary); } /* ---------- САЙДБАР: glass ---------- */ .sidebar { background: linear-gradient(180deg, var(--bg-secondary), var(--bg-tertiary)) !important; border-right: 1px solid var(--border); backdrop-filter: blur(16px); } .nav-item { border-radius: var(--radius); transition: all .2s ease; } .nav-item.active { background: var(--primary-light); box-shadow: inset 3px 0 0 var(--primary); } .nav-item:hover { background: var(--bg-hover); } /* ---------- ВКЛАДКИ / period-tab ---------- */ .period-tab, .status-tab { border-radius: var(--radius); transition: all .2s ease; } .period-tab.active { background: var(--gradient-primary) !important; color: #fff !important; border: none !important; box-shadow: 0 4px 14px rgba(139,92,246,.35); } /* ---------- СКРОЛЛБАР ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--bg-quaternary); border-radius: 8px; border: 2px solid transparent; background-clip: content-box; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: content-box; } /* ============================================================ PREMIUM BOOST v2 — более заметный «новый» вид. ============================================================ */ /* Более выразительные карточки: крупнее радиус, заметная тень, стекло */ .card, .stat-card, .table-container, .chart-card, .modal-content, .user-card { border-radius: 20px !important; background: linear-gradient(180deg, rgba(255,255,255,.04), transparent 30%), var(--bg-secondary) !important; box-shadow: var(--shadow-lg) !important; } /* Stat-карточки: цветная подложка-аура + крупная цифра */ .stat-card { overflow: hidden; } .stat-card::after { content:""; position:absolute; top:-40%; right:-20%; width:180px; height:180px; border-radius:50%; background: radial-gradient(circle, var(--primary), transparent 70%); opacity:.18; pointer-events:none; filter: blur(8px); } .stat-value, .stat-number { font-size: clamp(28px, 4vw, 40px) !important; } /* Заголовок страницы — крупный, сплошной цвет (без градиент-clip, чтобы не было прозрачной полосы на блочных

). */ .page-title { font-weight: 800 !important; letter-spacing: -0.5px; font-size: clamp(26px, 3vw, 34px); } /* Кнопки крупнее и сочнее */ .btn, a.btn, button.btn { padding: 12px 24px !important; font-weight: 700 !important; border-radius: 14px !important; letter-spacing: .2px; } /* Таблица: больше воздуха */ table td, table th { padding: 16px 18px !important; } table tbody tr:hover { background: var(--primary-light) !important; box-shadow: inset 3px 0 0 var(--primary); } /* Сайдбар-пункты крупнее, активный — с градиентной заливкой */ .nav-item { padding: 12px 16px !important; margin: 2px 12px !important; font-weight: 600; } .nav-item.active { background: var(--gradient-primary) !important; color: #fff !important; box-shadow: 0 6px 18px rgba(139,92,246,.4) !important; } .nav-item.active span, .nav-item.active svg { color:#fff !important; } /* Бейджи статусов/приоритетов — pill с лёгким свечением */ .badge, .status-badge, [class*="badge-"] { border-radius: 999px !important; font-weight: 700 !important; letter-spacing: .3px; padding: 5px 12px !important; } /* ============================================================ UI KIT v1 — тосты, бейджи, skeleton, пустые состояния. ============================================================ */ /* ---------- ТОСТЫ ---------- */ .ui-toast { display:flex; align-items:center; gap:10px; min-width:260px; max-width:380px; padding:13px 16px; border-radius:14px; background: var(--bg-secondary); border:1px solid var(--border); box-shadow: var(--shadow-lg); backdrop-filter: blur(14px); color: var(--text-primary); font-size:14px; font-weight:600; transform: translateX(120%); opacity:0; transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease; } .ui-toast--show { transform: translateX(0); opacity:1; } .ui-toast__icon { flex:0 0 22px; width:22px; height:22px; border-radius:50%; display:inline-flex; align-items:center; justify-content:center; font-size:13px; font-weight:800; color:#fff; } .ui-toast--success { border-left:3px solid var(--success); } .ui-toast--success .ui-toast__icon { background: var(--success); } .ui-toast--error { border-left:3px solid var(--danger); } .ui-toast--error .ui-toast__icon { background: var(--danger); } .ui-toast--warning { border-left:3px solid var(--warning); } .ui-toast--warning .ui-toast__icon { background: var(--warning); color:#1a1d29; } .ui-toast--info { border-left:3px solid var(--info); } .ui-toast--info .ui-toast__icon { background: var(--info); } /* ---------- БЕЙДЖИ (единые) ---------- */ .ui-badge { display:inline-flex; align-items:center; gap:6px; padding:5px 12px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.3px; line-height:1; white-space:nowrap; } .ui-badge::before { content:""; width:7px; height:7px; border-radius:50%; background:currentColor; } .ui-badge--success { color: var(--success); background: color-mix(in srgb, var(--success) 14%, transparent); } .ui-badge--warning { color: var(--warning); background: color-mix(in srgb, var(--warning) 14%, transparent); } .ui-badge--error { color: var(--danger); background: color-mix(in srgb, var(--danger) 14%, transparent); } .ui-badge--info { color: var(--info); background: color-mix(in srgb, var(--info) 14%, transparent); } /* ---------- SKELETON ---------- */ .ui-skeleton { display:block; height:14px; width:80%; border-radius:7px; background: linear-gradient(90deg, var(--bg-tertiary) 25%, var(--bg-quaternary) 37%, var(--bg-tertiary) 63%); background-size:400% 100%; animation: ui-shimmer 1.3s ease-in-out infinite; } @keyframes ui-shimmer { 0%{background-position:100% 0} 100%{background-position:-100% 0} } /* ---------- ПУСТЫЕ СОСТОЯНИЯ ---------- */ .empty, .empty-state { text-align:center; padding:48px 20px; color: var(--text-secondary); } .empty-state__icon { font-size:42px; opacity:.5; margin-bottom:12px; display:block; } .empty-state__title { font-size:16px; font-weight:700; color: var(--text-primary); margin-bottom:6px; } .empty-state__hint { font-size:13px; color: var(--text-tertiary); } /* ============================================================ FIX v3: заголовок страницы — надёжная видимость в обеих темах. Проблема: gradient-clip text давал прозрачную фиолетовую полосу на светлой теме (текст невидим). Делаем сплошной цвет. ============================================================ */ .page-title { background: none !important; -webkit-background-clip: border-box !important; background-clip: border-box !important; -webkit-text-fill-color: currentColor !important; color: var(--primary) !important; display: inline-block; } :root[data-theme="light"] .page-title { color: var(--primary) !important; } :root[data-theme="dark"] .page-title { color: #ffffff !important; } /* ============================================================ FIX: плавное появление страницы при смене языка (без мерцания). ============================================================ */ @keyframes ui-page-fade-in { from { opacity: 0; } to { opacity: 1; } } body.lang-fade-in { animation: ui-page-fade-in .28s ease both; } /* ============================================================ TICKETS TABLE polish — моно-номер, аватары исполнителей. ============================================================ */ .ticket-num { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; font-weight: 600; color: var(--text-secondary); background: var(--bg-tertiary); padding: 3px 8px; border-radius: 6px; white-space: nowrap; } .person { display: inline-flex; align-items: center; gap: 8px; } .person-ava { flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: #fff; background: linear-gradient(135deg, #8b5cf6, #6d28d9); } .person-ava--alt { background: linear-gradient(135deg, #3b82f6, #2563eb); } /* строки таблицы — чуть больше воздуха уже задано; усилим hover-курсор */ #ticketsTable tbody tr { transition: background .15s ease; } #ticketsTable tbody tr:hover { background: var(--primary-light); } /* поиск — фокус-стиль */ .search input:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 3px var(--primary-light); } /* ============================================================ TICKET-CREATE form polish (только стиль, без смены структуры). ============================================================ */ /* Секции формы — заголовок с акцентной полоской слева */ .section-title { position: relative; padding-left: 14px; margin-top: 8px; color: var(--text-primary); } .section-title::before { content: ""; position: absolute; left: 0; top: 2px; bottom: 2px; width: 4px; border-radius: 4px; background: var(--gradient-primary); } /* Метки обязательных полей: подсветим звёздочку */ .form-group label { letter-spacing: .1px; } /* Инпуты/селекты — мягче и крупнее радиус, аккуратный фокус */ .card input, .card select, .card textarea { border-radius: 12px !important; transition: border-color .2s ease, box-shadow .2s ease, background .2s ease; } .card input:hover:not(:focus), .card select:hover:not(:focus), .card textarea:hover:not(:focus) { border-color: var(--border-hover); } /* Чекбоксы-карточки: при выборе подсвечиваем рамкой акцента */ .checkbox-item { transition: all .18s ease; } .checkbox-item:has(input:checked) { border-color: var(--primary) !important; background: var(--primary-light) !important; box-shadow: inset 0 0 0 1px var(--primary); } .checkbox-item input[type="checkbox"] { accent-color: var(--primary); } /* Карточка формы — больше воздуха, мягкая тень */ .content .card { box-shadow: var(--shadow-md); border-radius: 18px !important; } /* Футер действий (кнопки Создать/Отмена) — отделить и выровнять */ .card .btn, .card .btn-secondary { vertical-align: middle; } /* Подпись-плейсхолдеры приглушены */ .card input::placeholder, .card textarea::placeholder { color: var(--text-tertiary); } /* file-label как dashed drop-zone — современнее */ .file-label { border-style: dashed !important; border-radius: 12px !important; } .file-label:hover { border-color: var(--primary) !important; background: var(--primary-light) !important; } /* ============================================================ TICKET-CREATE form BOOST — заметно новый вид формы. ============================================================ */ /* Карточка формы — крупный радиус, заметная тень, верхняя подсветка */ .content > .card { border-radius: 20px !important; padding: 36px !important; box-shadow: var(--shadow-lg) !important; position: relative; } /* Поля — выше, мягче, с заметным фокус-кольцом */ .card input:not([type="checkbox"]), .card select, .card textarea { padding: 14px 16px !important; border-radius: 14px !important; border: 1.5px solid var(--border) !important; font-size: 15px !important; } .card input:focus, .card select:focus, .card textarea:focus { border-color: var(--primary) !important; box-shadow: 0 0 0 4px var(--primary-light) !important; } /* Метки — крупнее, с акцентной звёздочкой для обязательных */ .card label { font-size: 13px !important; text-transform: none; } /* Секции — оформляем как вложенные блоки-карточки */ .card .section-title { font-size: 16px !important; padding: 14px 16px !important; margin: 28px 0 18px !important; background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 12px; border-left: 4px solid var(--primary) !important; } .card .section-title::before { display: none; } /* Чекбоксы — крупные карточки, акцент при выборе */ .card .checkbox-item { padding: 14px 16px !important; border-radius: 12px !important; border: 1.5px solid var(--border) !important; } .card .checkbox-item:has(input:checked) { border-color: var(--primary) !important; background: var(--primary-light) !important; } /* Кнопки формы — крупные, футер с разделителем */ .card form > .btn, .card form > .btn-secondary, .card .btn, .card .btn-secondary { padding: 14px 30px !important; border-radius: 14px !important; font-size: 15px !important; } /* file drop-zone — крупнее, пунктир, по центру */ .card .file-label { padding: 16px 24px !important; border: 2px dashed var(--border) !important; border-radius: 14px !important; width: 100%; justify-content: center; } .card .file-label:hover { border-color: var(--primary) !important; background: var(--primary-light) !important; } /* ============================================================ TICKETS toolbar — вкладки статусов + админ-фильтры на одной линии. ============================================================ */ .tickets-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; } .tickets-toolbar .status-tabs { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .tickets-toolbar .admin-filters { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-left: auto; /* прижимаем фильтры вправо, на той же линии */ } .tickets-toolbar .filter-select { padding: 9px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-size: 13px; font-weight: 600; cursor: pointer; outline: none; min-width: 170px; transition: border-color .2s ease, box-shadow .2s ease; } .tickets-toolbar .filter-select:hover { border-color: var(--border-hover); } .tickets-toolbar .filter-select:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } /* активный фильтр (выбрано не «все») — подсветим */ .tickets-toolbar .filter-select:not([data-default="1"]) { } @media (max-width: 900px) { .tickets-toolbar { flex-direction: column; align-items: stretch; } .tickets-toolbar .admin-filters { margin-left: 0; } .tickets-toolbar .filter-select { flex: 1; min-width: 0; } } /* ============================================================ NEW SVG LOGO display — корректное отображение билета-лого. ============================================================ */ .logo-box img, .logo img, .logo-icon img, img[src$="logo.svg"] { width: 40px !important; height: 40px !important; border-radius: 0 !important; /* SVG уже со своей формой */ object-fit: contain !important; background: transparent !important; } /* немного крупнее на странице логина, где лого по центру */ .logo-icon img { width: 56px !important; height: 56px !important; } /* ============================================================ UI-SELECT — красивый кастомный дропдаун (как референс). ============================================================ */ .uisel { position: relative; display: inline-block; } .uisel__native { position: absolute !important; opacity: 0 !important; width: 0 !important; height: 0 !important; pointer-events: none !important; } .uisel__trigger { display: inline-flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 180px; padding: 10px 14px; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; color: var(--text-primary); font-size: 14px; font-weight: 600; cursor: pointer; transition: border-color .2s ease, box-shadow .2s ease; } .uisel__trigger:hover { border-color: var(--border-hover); } .uisel.is-open .uisel__trigger { border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); } .uisel__arrow { font-size: 11px; color: var(--text-secondary); transition: transform .2s ease; } .uisel.is-open .uisel__arrow { transform: rotate(180deg); } .uisel__menu { position: absolute; top: calc(100% + 6px); left: 0; z-index: 1000; min-width: 100%; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-lg); padding: 6px; max-height: 320px; overflow-y: auto; opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .16s ease, transform .16s ease; } .uisel.is-open .uisel__menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .uisel__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 12px; border-radius: 8px; font-size: 14px; color: var(--text-secondary); cursor: pointer; transition: background .12s ease, color .12s ease; white-space: nowrap; } .uisel__item:hover { background: var(--bg-hover); color: var(--text-primary); } .uisel__item.is-active { color: var(--text-primary); font-weight: 700; background: var(--bg-tertiary); } .uisel__check { color: var(--primary); font-weight: 800; } .tickets-toolbar .period-filter { margin-left: 12px; } @media(max-width:900px){ .tickets-toolbar .period-filter{ margin-left:0; width:100%; } .tickets-toolbar .period-filter .uisel, .tickets-toolbar .period-filter .uisel__trigger{ width:100%; } } /* ============================================================ FIX: единые аккуратные стрелки у нативных селектов на тикетах. ============================================================ */ .tickets-toolbar .filter-select, #pageSize { -webkit-appearance: none !important; -moz-appearance: none !important; appearance: none !important; /* кастомная стрелка ▾ (SVG, цвет вторичного текста) */ background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%239a9aa2' stroke-width='1.6' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; background-repeat: no-repeat !important; background-position: right 12px center !important; background-size: 12px !important; padding-right: 34px !important; } /* стрелка темнее при фокусе/наведении в фиолетовый акцент */ .tickets-toolbar .filter-select:focus, #pageSize:focus { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4l4 4 4-4' stroke='%238b5cf6' stroke-width='1.8' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") !important; } /* убрать дефолтную стрелку в IE/Edge старых */ .tickets-toolbar .filter-select::-ms-expand, #pageSize::-ms-expand { display: none; } /* ============================================================ FIX: team picker rows (роль Тимлидер) — чекбокс слева, имя в строку. ============================================================ */ #teamList { display: flex; flex-direction: column; gap: 8px; } #teamList .checkbox-item { display: flex !important; flex-direction: row !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; padding: 12px 14px !important; border: 1px solid var(--border) !important; border-radius: 10px !important; background: var(--bg-tertiary) !important; cursor: pointer; margin: 0 !important; transition: border-color .15s ease, background .15s ease; } #teamList .checkbox-item:hover { border-color: var(--border-hover) !important; } #teamList .checkbox-item:has(input:checked) { border-color: var(--primary) !important; background: var(--primary-light) !important; } #teamList .checkbox-item input[type="checkbox"] { flex: 0 0 18px !important; width: 18px !important; height: 18px !important; margin: 0 !important; accent-color: var(--primary); cursor: pointer; } #teamList .checkbox-item span { flex: 1 1 auto; font-size: 14px; font-weight: 500; color: var(--text-primary); text-align: left; } /* ============================================================ DRAG & DROP file zone highlight. ============================================================ */ #dropZone { transition: background .15s ease, border-color .15s ease, transform .1s ease; } #dropZone.drag-over { border-color: var(--primary) !important; background: var(--primary-light) !important; border-style: dashed !important; box-shadow: 0 0 0 3px var(--primary-light); } /* ============================================================ NOTIFICATION BELL ============================================================ */ .notif-bell { position: relative; width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-primary); font-size: 17px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: border-color .2s ease; } .notif-bell:hover { border-color: var(--primary); } .notif-badge { position: absolute; top: -6px; right: -6px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; align-items: center; justify-content: center; display: flex; line-height: 1; box-shadow: 0 0 0 2px var(--bg-secondary); } .notif-menu { position: absolute; top: calc(100% + 8px); right: 0; z-index: 1000; width: 340px; max-width: 90vw; background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-lg); opacity: 0; transform: translateY(-6px) scale(.98); pointer-events: none; transition: opacity .16s ease, transform .16s ease; overflow: hidden; } .notif-bell-wrap.is-open .notif-menu { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; } .notif-menu__head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px; border-bottom: 1px solid var(--border); font-weight: 700; color: var(--text-primary); font-size: 14px; } .notif-readall { background: none; border: none; color: var(--primary); font-size: 12px; font-weight: 600; cursor: pointer; } .notif-list { max-height: 380px; overflow-y: auto; } .notif-empty { padding: 28px 16px; text-align: center; color: var(--text-tertiary); font-size: 13px; } .notif-item { padding: 12px 16px; border-bottom: 1px solid var(--border); transition: background .12s ease; } .notif-item:hover { background: var(--bg-hover); } .notif-item.is-unread { background: var(--primary-light); } .notif-item__title { font-weight: 700; font-size: 13px; color: var(--text-primary); margin-bottom: 3px; } .notif-item__msg { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; } .notif-item__time { font-size: 11px; color: var(--text-tertiary); } /* ============================================================ VIEW TOGGLE + KANBAN BOARD ============================================================ */ .view-btn { padding: 9px 16px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg-secondary); color: var(--text-secondary); font-size: 13px; font-weight: 600; cursor: pointer; transition: all .2s ease; } .view-btn:hover { border-color: var(--border-hover); color: var(--text-primary); } .view-btn.is-active { background: var(--gradient-primary); color: #fff; border: none; } .kanban-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; } .kanban-col { background: var(--bg-tertiary); border: 1px solid var(--border); border-radius: 14px; padding: 12px; min-height: 200px; transition: background .15s ease, border-color .15s ease; } .kanban-col.drag-over { border-color: var(--primary); background: var(--primary-light); } .kanban-col__head { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--text-primary); font-size: 14px; padding: 4px 6px 12px; } .kanban-col__count { background: var(--bg-quaternary); color: var(--text-secondary); border-radius: 20px; padding: 1px 9px; font-size: 12px; font-weight: 700; } .kanban-col__body { display: flex; flex-direction: column; gap: 10px; } .kanban-card { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; cursor: grab; box-shadow: var(--shadow-sm); transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease; } .kanban-card:hover { border-color: var(--border-hover); box-shadow: var(--shadow-md); transform: translateY(-2px); } .kanban-card.dragging { opacity: .5; } .kanban-card__num { font-family: ui-monospace, monospace; font-size: 11px; font-weight: 600; color: var(--text-tertiary); margin-bottom: 6px; } .kanban-card__title { font-weight: 600; color: var(--text-primary); font-size: 14px; margin-bottom: 10px; } .kanban-card__meta { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .kanban-card__person { font-size: 12px; color: var(--text-secondary); } .kanban-empty { color: var(--text-tertiary); text-align: center; padding: 20px; font-size: 13px; } @media (max-width: 900px) { .kanban-board { grid-template-columns: 1fr; } } /* ============================================================ PASSWORD show/hide eye ============================================================ */ .pw-wrap { position: relative; display: block; width: 100%; } .pw-wrap > input { width: 100%; padding-right: 44px !important; } .pw-eye { position: absolute; top: 50%; right: 10px; transform: translateY(-50%); background: none; border: none; cursor: pointer; font-size: 16px; line-height: 1; padding: 4px; opacity: .75; transition: opacity .15s ease; z-index: 2; } .pw-eye:hover { opacity: 1; }