/* ============================================================ NS CRM Lite — Design System Чистый CSS, без зависимостей. Светлая + тёмная тема. Тема переключается атрибутом data-theme на . ============================================================ */ /* ---------- 1. ТОКЕНЫ ---------- */ :root, [data-theme="light"] { /* поверхности */ --bg:#eef1f5; --surface:#ffffff; --surface-2:#f8fafc; --surface-3:#f1f5f9; --inset:#f8fafc; --kanban-col:#f4f6f9; /* границы */ --border:#e3e8ee; --border-2:#e2e8f0; --border-3:#eef1f5; --border-soft:#f5f7f9; --track:#eef1f5; --dash:#d8dee6; /* текст */ --text:#0f172a; --text-2:#64748b; --text-3:#94a3b8; --heading:#334155; --label:#475569; --bar-bg:rgba(255,255,255,.82); /* бренд */ --brand:#2563eb; --brand-hover:#1d4ed8; --on-brand:#ffffff; --brand-soft:#eff6ff; --brand-soft-border:#dbeafe; --brand-soft-strong-border:#bfdbfe; --accent-bar:#bfdbfe; /* семантика */ --success:#16a34a; --success-soft:#f0fdf4; --success-border:#bbf7d0; --warn:#d97706; --warn-soft:#fffbeb; --warn-border:#fde68a; --warn-dot:#f59e0b; --danger:#dc2626; --danger-soft:#fef2f2; --danger-border:#fecaca; --idea:#7c3aed; --idea-soft:#f5f3ff; --idea-border:#ddd6fe; --teal:#0d9488; --teal-soft:#f0fdfa; /* баннер «подтвердите email» */ --banner-bg:#fffbeb; --banner-border:#fef3c7; --banner-text:#92400e; --banner-link:#b45309; /* прочее */ --star:#f59e0b; --star-off:#d1d8e0; --check-off-border:#cbd5e1; --today-bg:#eef4ff; --shadow-sm:0 1px 2px rgba(15,23,42,.04); --shadow-md:0 4px 12px rgba(15,23,42,.08); --shadow-card:0 4px 16px rgba(15,23,42,.06); --shadow-lg:0 24px 60px rgba(15,23,42,.28); --overlay:rgba(15,23,42,.34); --ring-focus:rgba(37,99,235,.32); /* типографика */ --font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif; --mono:ui-monospace,SFMono-Regular,Menlo,monospace; /* радиусы */ --r-sm:8px; --r:10px; --r-md:12px; --r-lg:16px; --r-pill:999px; /* отступы */ --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px; --sp-5:24px; --sp-6:32px; } [data-theme="dark"] { --bg:#0e1320; --surface:#161d2b; --surface-2:#1c2433; --surface-3:#222b3b; --inset:#1a2230; --kanban-col:#131a26; --border:#2a3344; --border-2:#313c50; --border-3:#222b3a; --border-soft:#222b3a; --track:#2a3344; --dash:#3a4458; --text:#e9eef6; --text-2:#9aa6b8; --text-3:#6c7a90; --heading:#cdd6e3; --label:#9aa6b8; --bar-bg:rgba(16,21,33,.82); --brand:#3b82f6; --brand-hover:#2563eb; --on-brand:#ffffff; --brand-soft:rgba(59,130,246,.15); --brand-soft-border:rgba(59,130,246,.32); --brand-soft-strong-border:rgba(59,130,246,.42); --accent-bar:rgba(59,130,246,.5); --success:#34d399; --success-soft:rgba(52,211,153,.14); --success-border:rgba(52,211,153,.30); --warn:#fbbf24; --warn-soft:rgba(251,191,36,.14); --warn-border:rgba(251,191,36,.30); --warn-dot:#fbbf24; --danger:#f87171; --danger-soft:rgba(248,113,113,.14); --danger-border:rgba(248,113,113,.30); --idea:#a78bfa; --idea-soft:rgba(167,139,250,.16); --idea-border:rgba(167,139,250,.32); --teal:#2dd4bf; --teal-soft:rgba(45,212,191,.13); --banner-bg:rgba(251,191,36,.12); --banner-border:rgba(251,191,36,.26); --banner-text:#fcd34d; --banner-link:#fbbf24; --star:#fbbf24; --star-off:#3a4458; --check-off-border:#3f4a5e; --today-bg:rgba(59,130,246,.10); --shadow-sm:0 1px 2px rgba(0,0,0,.3); --shadow-md:0 4px 14px rgba(0,0,0,.42); --shadow-card:0 6px 20px rgba(0,0,0,.45); --shadow-lg:0 24px 60px rgba(0,0,0,.6); --overlay:rgba(0,0,0,.6); --ring-focus:rgba(59,130,246,.45); } /* ---------- 2. БАЗА ---------- */ *{box-sizing:border-box} html,body{margin:0;padding:0} body{ font-family:var(--font); background:var(--bg); color:var(--text); -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; font-size:15px; line-height:1.5; } a{color:var(--brand);text-decoration:none} a:hover{text-decoration:none;opacity:.75} ::selection{background:var(--brand);color:#fff} *{transition:background-color .18s ease,border-color .18s ease,color .18s ease,box-shadow .18s ease} :focus-visible{outline:none;box-shadow:0 0 0 3px var(--ring-focus)} /* ---------- 3. РАСКЛАДКА ---------- */ .page{max-width:1180px;margin:0 auto;padding:28px} .page-title{margin:0 0 20px;font-size:26px;font-weight:700;letter-spacing:-.02em} .card{ background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);box-shadow:var(--shadow-sm);padding:18px 20px; } /* ---------- 4. ШАПКА ---------- */ .app-header{ position:sticky;top:0;z-index:40; display:flex;align-items:center;gap:22px; height:58px;padding:0 22px; background:var(--bar-bg);backdrop-filter:blur(12px); border-bottom:1px solid var(--border); } .app-header .brand{font-weight:700;font-size:16px;color:var(--brand);letter-spacing:-.01em;white-space:nowrap} .app-nav{display:flex;gap:2px} .app-nav a{ padding:7px 11px;border-radius:var(--r-sm); font-size:13.5px;font-weight:500;color:var(--text-2);text-decoration:none; } .app-nav a:hover{background:var(--surface-3);color:var(--text);text-decoration:none;opacity:1} .app-nav a.active{color:var(--brand);background:var(--brand-soft);font-weight:600} .header-user{margin-left:auto;display:flex;align-items:center;gap:14px} .user-email{font-size:13px;color:var(--text-2)} .user-email:hover{color:var(--brand)} .nav-toggle{ display:none;margin-left:auto;width:38px;height:38px;border-radius:var(--r-sm); border:1px solid var(--border-2);background:var(--surface);color:var(--text); cursor:pointer;align-items:center;justify-content:center;font-size:18px; } /* баннер «подтвердите email» */ .app-banner{ display:flex;align-items:center;gap:10px; padding:9px 22px;font-size:13px; background:var(--banner-bg);color:var(--banner-text); border-bottom:1px solid var(--banner-border); } .app-banner .dot{width:18px;height:18px;border-radius:50%;background:var(--warn-dot);color:#fff; display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex:none} .app-banner a{color:var(--banner-link);font-weight:600;text-decoration:underline} /* ---------- 5. КНОПКИ ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:7px; font-size:13.5px;font-weight:600;line-height:1; padding:9px 16px;border-radius:var(--r);cursor:pointer; border:1px solid var(--border-2);background:var(--surface);color:var(--heading); transition:.15s;white-space:nowrap; } .btn:hover{background:var(--surface-2);border-color:var(--check-off-border)} .btn-primary{background:var(--brand);border-color:var(--brand);color:var(--on-brand);box-shadow:0 1px 2px rgba(37,99,235,.3)} .btn-primary:hover{background:var(--brand-hover);border-color:var(--brand-hover)} .btn-ghost{background:transparent;border-color:transparent;color:var(--text-2)} .btn-ghost:hover{background:var(--surface-3);color:var(--text)} .btn-danger{background:var(--surface);border-color:var(--danger-border);color:var(--danger)} .btn-danger:hover{background:var(--danger-soft)} .btn-block{width:100%} .btn:disabled,.btn.is-disabled{background:var(--surface-2);border-color:var(--border-3);color:var(--text-3);cursor:not-allowed;box-shadow:none} .btn-sm{padding:5px 11px;font-size:12.5px;border-radius:var(--r-sm)} /* иконка-кнопка ✎ 🗑 ★ ✓ ↩ */ .btn-icon{ width:32px;height:32px;padding:0;border-radius:var(--r-sm); border:1px solid var(--border-2);background:var(--surface);color:var(--text-2); display:inline-flex;align-items:center;justify-content:center;cursor:pointer;font-size:13px;transition:.15s; } .btn-icon:hover{background:var(--surface-2);color:var(--brand)} .btn-icon.danger:hover{background:var(--danger-soft);color:var(--danger);border-color:var(--danger-border)} .btn-icon.star:hover{background:var(--warn-soft);color:var(--warn);border-color:var(--warn-border)} .btn-icon.ok{color:var(--success);background:var(--success-soft);border-color:var(--success-border)} /* ---------- 6. ПОЛЯ ---------- */ .form-label{display:block;font-size:12px;font-weight:600;color:var(--label);margin-bottom:6px} .form-input,.form-select,.form-textarea{touch-action:manipulation} .form-input,.form-select,.form-textarea{ width:100%;font-size:14px;font-family:inherit;color:var(--text); background:var(--surface);border:1px solid var(--border-2);border-radius:var(--r); padding:10px 12px;outline:none;transition:.15s; } .form-textarea{resize:vertical;min-height:70px} .form-select{cursor:pointer} .form-input:focus,.form-select:focus,.form-textarea:focus{ border-color:var(--brand);box-shadow:0 0 0 3px var(--ring-focus); } .form-input::placeholder,.form-textarea::placeholder{color:var(--text-3)} /* строка с чекбоксом «показывать в Сегодня» */ .checkbox-row{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--heading);cursor:pointer} .checkbox-row input[type="checkbox"]{ appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none; border:1.5px solid var(--check-off-border);border-radius:5px;background:var(--surface);cursor:pointer; display:grid;place-items:center;transition:.15s; } .checkbox-row input[type="checkbox"]:checked{background:var(--brand);border-color:var(--brand)} .checkbox-row input[type="checkbox"]:checked::after{content:"✓";color:#fff;font-size:11px;line-height:1} /* выбор цвета категории */ .color-dots{display:flex;gap:9px;flex-wrap:wrap} .color-dot{width:26px;height:26px;border-radius:var(--r-sm);cursor:pointer;border:none;padding:0} .color-dot.selected{box-shadow:0 0 0 2px var(--surface),0 0 0 4px currentColor} /* ---------- 7. БЕЙДЖИ ---------- */ .badge{display:inline-flex;align-items:center;gap:5px;font-size:12px;font-weight:600; padding:4px 11px;border-radius:var(--r-pill);border:1px solid var(--border-2); background:var(--surface-2);color:var(--text-2)} .badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor} .badge-success{color:var(--success);background:var(--success-soft);border-color:var(--success-border)} .badge-warn{color:var(--warn);background:var(--warn-soft);border-color:var(--warn-border)} .badge-danger{color:var(--danger);background:var(--danger-soft);border-color:var(--danger-border)} .badge-info,.badge-admin{color:var(--brand);background:var(--brand-soft);border-color:var(--brand-soft-strong-border)} .badge-manager{color:var(--idea);background:var(--idea-soft);border-color:var(--idea-border)} .badge-muted{color:var(--label);background:var(--surface-3);border-color:var(--border-2)} /* ---------- 8. АВТОРИЗАЦИЯ ---------- */ .auth-body{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:40px; background:linear-gradient(135deg,#1e3a8a 0%,#2563eb 55%,#3b82f6 100%)} .login-container{width:100%;max-width:380px} .login-card{background:var(--surface);border-radius:18px;box-shadow:var(--shadow-lg);padding:32px 30px} .login-logo{width:46px;height:46px;margin:0 auto 12px;border-radius:13px; background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff; display:flex;align-items:center;justify-content:center;font-weight:700;font-size:17px; box-shadow:0 6px 16px rgba(37,99,235,.4)} .login-card h1{text-align:center;margin:0;font-size:19px;font-weight:700;letter-spacing:-.01em} .login-card .subtitle{text-align:center;font-size:13px;color:var(--text-3);margin:2px 0 22px} .auth-tabs{display:flex;background:var(--surface-3);border-radius:11px;padding:4px;margin-bottom:20px} .auth-tab{flex:1;text-align:center;font-size:13.5px;font-weight:600;padding:9px;border-radius:var(--r-sm); color:var(--text-3);cursor:pointer;border:none;background:transparent;transition:.15s} .auth-tab.active{color:var(--text);background:var(--surface);box-shadow:var(--shadow-sm)} .auth-form{display:flex;flex-direction:column;gap:13px} .auth-form .row-between{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px} .auth-error{font-size:12.5px;color:var(--danger);background:var(--danger-soft); border:1px solid var(--danger-border);border-radius:var(--r-sm);padding:8px 11px} /* ---------- 9. МОДАЛКА ---------- */ .modal-overlay{position:fixed;inset:0;z-index:60;background:var(--overlay);backdrop-filter:blur(2px); display:flex;align-items:center;justify-content:center;padding:20px} .modal{width:100%;max-width:420px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-lg);box-shadow:var(--shadow-lg);overflow:hidden; animation:modal-in .16s ease} @keyframes modal-in{from{opacity:0;transform:translateY(8px) scale(.98)}to{opacity:1;transform:none}} .modal-header{display:flex;align-items:center;justify-content:space-between; padding:18px 20px;border-bottom:1px solid var(--border-3)} .modal-title{font-size:16px;font-weight:650} .modal-close{width:28px;height:28px;border:none;background:transparent;color:var(--text-3); border-radius:var(--r-sm);cursor:pointer;font-size:15px;display:grid;place-items:center} .modal-close:hover{background:var(--surface-3);color:var(--text)} .modal-body{padding:18px 20px;display:flex;flex-direction:column;gap:12px} .modal-row{display:flex;flex-direction:column;gap:6px} .modal-footer{display:flex;justify-content:flex-end;gap:10px; padding:14px 20px;background:var(--surface-2);border-top:1px solid var(--border-3)} /* ---------- 10. МОДУЛЬНЫЕ СТРАНИЦЫ ---------- */ .module-toolbar{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:24px} /* категория-секция */ .cl-category{margin-bottom:26px} .cl-cat-head{display:flex;align-items:center;gap:8px;margin-bottom:14px} .cl-cat-dot{width:9px;height:9px;border-radius:50%;background:var(--cl-col,var(--brand));flex:none} .cl-cat-title{font-size:15px;font-weight:650} .cl-cat-count{font-size:12px;color:var(--text-3);background:var(--surface-3);padding:2px 8px;border-radius:var(--r-pill)} .cl-cat-actions{margin-left:auto;display:flex;gap:6px} .cl-empty{border:1.5px dashed var(--dash);border-radius:var(--r-md);padding:26px;text-align:center; color:var(--text-3);font-size:13.5px;background:var(--surface)} /* адаптивная сетка карточек */ .cl-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:16px} /* карточка чек-листа / проекта. Категорийный цвет задаётся через --cl-col (НЕ полоской слева, а ярлыком + кольцом). */ .cl-card{background:var(--surface);border:1px solid var(--border);border-radius:13px; padding:15px 16px 12px;box-shadow:var(--shadow-sm)} .cl-card-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:10px} .cl-tag{display:inline-flex;align-items:center;gap:6px;margin-bottom:8px; padding:3px 9px 3px 7px;border-radius:var(--r-pill); font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em; color:var(--cl-col,var(--brand));background:color-mix(in srgb,var(--cl-col,var(--brand)) 13%,transparent)} .cl-tag-dot{width:6px;height:6px;border-radius:50%;background:var(--cl-col,var(--brand))} .cl-card-title{font-size:15px;font-weight:650} .cl-progress{width:40px;height:40px;flex:none;border-radius:50%;display:grid;place-items:center; background:conic-gradient(var(--cl-col,var(--brand)) var(--cl-pct,0%),var(--track) 0)} .cl-progress span{width:30px;height:30px;border-radius:50%;background:var(--surface); display:grid;place-items:center;font-size:10.5px;font-weight:700;color:var(--cl-col,var(--brand))} /* строка-чеклист: чекбокс + текст + ★ + удалить */ .cl-items{list-style:none;margin:0;padding:0} .cl-item{display:flex;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--border-soft)} .cl-check{appearance:none;-webkit-appearance:none;width:18px;height:18px;flex:none;cursor:pointer; border:1.5px solid var(--check-off-border);border-radius:6px;background:var(--surface); display:grid;place-items:center;transition:.15s} .cl-check:checked{background:var(--brand);border-color:var(--brand)} .cl-check:checked::after{content:"✓";color:#fff;font-size:11px;line-height:1} .cl-item-text{flex:1;font-size:13.5px;color:var(--heading)} .cl-check:checked + .cl-item-text{color:var(--text-3);text-decoration:line-through} .cl-star{border:none;background:none;cursor:pointer;font-size:14px;color:var(--star-off);padding:0} .cl-star.on{color:var(--star)} .cl-del{border:none;background:none;cursor:pointer;font-size:13px;color:var(--check-off-border);padding:0} .cl-del:hover{color:var(--danger)} .cl-add{margin-top:10px;font-size:13px;background:var(--inset);border:1px solid var(--border-3); border-radius:var(--r-sm);padding:8px 11px} .cl-add:focus{background:var(--surface);border-color:var(--brand);box-shadow:0 0 0 3px var(--ring-focus)} /* ---------- 11. КАРТОЧКИ ЗАПИСОК / ИДЕЙ ---------- */ .card-note{background:var(--surface);border:1px solid var(--border);border-radius:14px; padding:16px 18px;box-shadow:var(--shadow-sm)} .card-note-inner{display:flex;flex-direction:column} .card-note-title{font-size:14.5px;font-weight:650;margin-bottom:6px} .card-note-body{font-size:13px;color:var(--text-2);line-height:1.55} /* акцент идей задаётся тем же --cl-col на .cl-tag внутри карточки */ /* ---------- 12. КАНБАН ---------- */ .kanban{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:14px} .kanban-col{background:var(--kanban-col);border:1px solid var(--border);border-radius:13px;padding:12px} .kanban-col-head{display:flex;align-items:center;gap:8px;margin-bottom:11px;padding:0 2px} .kanban-col-dot{width:8px;height:8px;border-radius:50%;background:var(--cl-col,var(--text-3))} .kanban-col-title{font-size:13px;font-weight:650} .kanban-col-count{margin-left:auto;font-size:11px;color:var(--text-3); background:var(--surface);border:1px solid var(--border);padding:1px 7px;border-radius:var(--r-pill)} .kanban-cards{display:flex;flex-direction:column;gap:9px} .task-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r); padding:11px 12px;box-shadow:var(--shadow-sm);cursor:grab} .task-card-top{display:flex;align-items:flex-start;gap:9px} .task-card .cl-check{width:17px;height:17px;margin-top:1px} .task-title{font-size:13px;line-height:1.4;color:var(--heading)} .task-tags{display:flex;gap:6px;margin-top:9px;padding-left:26px;flex-wrap:wrap} .task-tag{font-size:10.5px;font-weight:600;padding:2px 8px;border-radius:var(--r-pill); color:var(--cl-col,var(--brand));background:color-mix(in srgb,var(--cl-col,var(--brand)) 14%,transparent)} .kanban-add{font-size:12.5px;font-weight:600;color:var(--text-3);background:transparent; border:1px dashed var(--dash);border-radius:var(--r-sm);padding:8px;cursor:pointer;width:100%} .kanban-add:hover{color:var(--brand);border-color:var(--brand-soft-strong-border);background:var(--surface)} /* ---------- 13. ТАБЛИЦА ДАННЫХ ---------- */ .data-table-wrap{border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;background:var(--surface)} .data-table{width:100%;border-collapse:collapse;font-size:13.5px} .data-table thead th{text-align:left;font-size:11px;font-weight:600;text-transform:uppercase; letter-spacing:.04em;color:var(--text-3);background:var(--surface-2); padding:11px 16px;border-bottom:1px solid var(--border-2)} .data-table td{padding:12px 16px;border-bottom:1px solid var(--border-3);color:var(--heading)} .data-table tbody tr:last-child td{border-bottom:none} .data-table tbody tr:hover{background:var(--surface-2)} .data-table .col-actions{display:flex;gap:6px} /* метрики-плитки (админка) */ .metric-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:24px} .metric-tile{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-md); padding:18px 20px;box-shadow:var(--shadow-sm)} .metric-value{font-size:30px;font-weight:700;letter-spacing:-.02em} .metric-label{font-size:12.5px;color:var(--text-3);margin-top:2px} /* ---------- 14. СТРОКА КОНТАКТА / СОТРУДНИК ---------- */ .staff-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px} .contact-card{display:flex;gap:13px;background:var(--surface);border:1px solid var(--border); border-radius:var(--r-md);padding:14px 16px;box-shadow:var(--shadow-sm)} .contact-avatar{width:44px;height:44px;flex:none;border-radius:var(--r);display:grid;place-items:center; font-weight:700;font-size:15px;color:var(--on-brand);background:var(--cl-col,var(--brand))} .contact-name{font-size:14.5px;font-weight:650} .contact-role{font-size:12.5px;color:var(--text-3);margin-bottom:6px} .contact-meta{font-size:12.5px;color:var(--text-2);line-height:1.5} .contact-meta a{color:var(--brand)} /* ---------- 15. КАЛЕНДАРЬ (оформление FullCalendar v6) ---------- */ .fc{--fc-border-color:var(--border-2);--fc-today-bg-color:var(--today-bg); --fc-neutral-bg-color:var(--surface-2);--fc-page-bg-color:var(--surface); font-family:var(--font)} .fc .fc-toolbar.fc-header-toolbar{margin-bottom:14px;flex-wrap:wrap;gap:10px} .fc .fc-toolbar-title{font-size:18px;font-weight:700;letter-spacing:-.01em;color:var(--text)} .fc .fc-button{background:var(--brand);border:1px solid var(--brand);color:#fff; font-weight:600;font-size:13px;border-radius:var(--r-sm);padding:7px 12px;box-shadow:none; text-transform:capitalize} .fc .fc-button:hover{background:var(--brand-hover);border-color:var(--brand-hover)} .fc .fc-button:focus{box-shadow:0 0 0 3px var(--ring-focus)} .fc .fc-button-primary:not(:disabled).fc-button-active, .fc .fc-button-primary:not(:disabled):active{background:var(--brand-hover);border-color:var(--brand-hover)} .fc .fc-button .fc-icon{font-size:1.1em} /* кнопка today — вторичная */ .fc .fc-today-button{background:var(--brand-soft);border-color:var(--brand-soft-border);color:var(--brand)} .fc .fc-today-button:hover:not(:disabled){background:var(--brand-soft);border-color:var(--brand-soft-strong-border)} .fc .fc-today-button:disabled{background:var(--surface-2);border-color:var(--border-2);color:var(--text-3);opacity:1} /* группа month/week/day */ .fc .fc-button-group .fc-button{background:var(--surface);border-color:var(--border-2);color:var(--text-2)} .fc .fc-button-group .fc-button.fc-button-active{background:var(--brand);border-color:var(--brand);color:#fff} /* сетка */ .fc .fc-scrollgrid{border-color:var(--border-2);border-radius:var(--r);overflow:hidden} .fc .fc-col-header-cell{background:var(--surface-2)} .fc .fc-col-header-cell-cushion{padding:8px;font-size:12px;font-weight:600;color:var(--brand);text-decoration:none} .fc .fc-daygrid-day-number{padding:6px 8px;font-size:12.5px;font-weight:600;color:var(--text-2);text-decoration:none} .fc .fc-daygrid-day.fc-day-today{background:var(--today-bg)} .fc .fc-day-today .fc-daygrid-day-number{color:var(--brand)} .fc .fc-day-other .fc-daygrid-day-number{color:var(--text-3)} .fc .fc-timegrid-slot{height:44px} .fc .fc-timegrid-axis-cushion,.fc .fc-timegrid-slot-label-cushion{font-size:11px;color:var(--text-3)} /* события — мягкая плашка с акцентом слева */ .fc .fc-event,.fc .fc-daygrid-event{ background:color-mix(in srgb,var(--fc-event-color,var(--brand)) 14%,transparent); border:1px solid color-mix(in srgb,var(--fc-event-color,var(--brand)) 30%,transparent); border-left:3px solid var(--fc-event-color,var(--brand)); border-radius:6px;padding:1px 6px;box-shadow:none} .fc .fc-event-title,.fc .fc-event-time{color:var(--fc-event-color,var(--brand));font-weight:600;font-size:11px} .fc .fc-daygrid-event-dot{border-color:var(--fc-event-color,var(--brand))} /* линия текущего времени */ .fc .fc-timegrid-now-indicator-line{border-color:var(--danger)} .fc .fc-timegrid-now-indicator-arrow{border-color:var(--danger);background:var(--danger)} /* ---------- 16. УТИЛИТЫ ---------- */ .row{display:flex;align-items:center;gap:10px} .muted{color:var(--text-2)} .section-label{font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.08em;color:var(--text-3)} /* ---------- 17. АДАПТИВ ---------- */ @media (max-width:860px){ .page{padding:18px} .nav-toggle{display:flex} .app-nav{ position:absolute;top:58px;left:0;right:0;flex-direction:column;gap:2px; padding:8px;background:var(--surface);border-bottom:1px solid var(--border); box-shadow:var(--shadow-md);display:none; } .app-nav.open{display:flex} .app-nav a{padding:11px 12px} .header-user .user-email{display:none} .cl-grid,.kanban,.staff-grid{grid-template-columns:1fr} .data-table thead{display:none} .data-table tbody tr{display:grid;gap:4px;padding:12px 14px;border-bottom:1px solid var(--border-3)} .data-table td{padding:0;border:none} .data-table td::before{content:attr(data-label);font-size:11px;color:var(--text-3);margin-right:6px} } @media (max-width:520px){ .page-title{font-size:22px} .module-toolbar{flex-direction:column} .module-toolbar .btn{width:100%} } /* пустой блок ошибки не показываем */ .auth-error:empty{display:none} .form-msg{font-size:12.5px;min-height:16px} /* служебное: скрытие элементов (модалки и т.п.) */ .hidden{display:none !important} /* Заголовок страницы + кнопки действий в одну строку */ .page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-bottom:24px} .page-head .page-title{margin:0} .page-head .module-toolbar{margin:0} /* Компактные действия категории (иконки рядом с названием) */ .cl-cat-actions{margin-left:6px;display:flex;gap:2px} .cl-cat-act{border:none;background:none;cursor:pointer;color:var(--text-3);font-size:13px;line-height:1;padding:4px;border-radius:6px} .cl-cat-act:hover{background:var(--surface-3);color:var(--text)} .cl-cat-act.danger:hover{color:var(--danger);background:var(--danger-soft)} /* Аватар ответственного на задаче проекта */ .cl-asg{border:none;background:var(--surface-3);color:var(--text-3);cursor:pointer;font-size:10px;font-weight:700; width:22px;height:22px;border-radius:50%;display:inline-grid;place-items:center;flex:none;padding:0} .cl-asg:hover{background:var(--brand-soft);color:var(--brand)} .cl-asg.on{background:var(--brand);color:#fff} /* ---------- ФИКСИРОВАННАЯ ВЫСОТА (десктоп): скролл внутри страницы ---------- */ @media (min-width: 861px) { html, body:not(.auth-body) { height: 100%; } body:not(.auth-body) { overflow: hidden; display: flex; flex-direction: column; } body:not(.auth-body) .page { flex: 1; min-height: 0; width: 100%; margin: 0 auto; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--border-2) transparent; } body:not(.auth-body) .page::-webkit-scrollbar { width: 8px; } body:not(.auth-body) .page::-webkit-scrollbar-thumb { background: var(--border-2); border-radius: 8px; } body:not(.auth-body) .page::-webkit-scrollbar-thumb:hover { background: var(--text-3); } body:not(.auth-body) .page::-webkit-scrollbar-track { background: transparent; } /* верх страницы остаётся на месте, прокручивается только контент */ .page-head { position: sticky; top: 0; z-index: 5; background: var(--bg); } .page-top { position: sticky; top: 0; z-index: 5; background: var(--bg); } .page-top .page-head { position: static; } } /* ---------- ПАНЕЛЬ ФИЛЬТРА ПО КАТЕГОРИЯМ (чипы) ---------- */ .filter-bar { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 18px; padding-bottom: 2px; } .filter-bar:empty { display: none; } .chip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px; border-radius: var(--r-pill); border: 1px solid var(--border-2); background: var(--surface); color: var(--text-2); font-size: 13px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: .15s; } .chip:hover { background: var(--surface-2); color: var(--text); } .chip.active { background: var(--brand-soft); border-color: var(--brand-soft-strong-border); color: var(--brand); } .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } /* ---------- АВТОРИЗАЦИЯ: тёмный анимированный фон ---------- */ .auth-body { background: #070b16; position: relative; overflow-x: hidden; } .auth-bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none; } .auth-bg .orb { position: absolute; border-radius: 50%; filter: blur(70px); opacity: .55; mix-blend-mode: screen; will-change: transform; animation-name: orbFloat; animation-timing-function: ease-in-out; animation-iteration-count: infinite; } @keyframes orbFloat { 0% { transform: translate(0,0) scale(1); } 33% { transform: translate(48px,-34px) scale(1.18); } 66% { transform: translate(-34px,30px) scale(.88); } 100% { transform: translate(0,0) scale(1); } } .auth-stars { position: absolute; inset: 0; } .auth-stars .star { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #fff; animation: twinkle linear infinite; } @keyframes twinkle { 0%,100% { opacity: .12; } 50% { opacity: .85; } } /* форма поверх фона */ .auth-body .login-container { position: relative; z-index: 1; } /* ---------- USER DROPDOWN ---------- */ .user-menu { position: relative; } .user-menu-btn { display: flex; align-items: center; gap: 7px; padding: 5px 10px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface-2); color: var(--text); font-size: 13px; font-weight: 500; cursor: pointer; max-width: 200px; white-space: nowrap; } .user-menu-btn .u-email { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .user-menu-btn:hover { background: var(--surface-3); } .u-inv-dot { min-width: 18px; height: 18px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; } .dd-arrow { font-size: 9px; color: var(--text-3); flex-shrink: 0; } .user-dropdown { position: absolute; right: 0; top: calc(100% + 6px); min-width: 210px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow-md); z-index: 300; display: none; flex-direction: column; padding: 5px; } .user-dropdown.open { display: flex; } .dd-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: var(--r-sm); font-size: 14px; color: var(--text); cursor: pointer; border: none; background: none; text-align: left; text-decoration: none; width: 100%; } .dd-item:hover { background: var(--surface-2); text-decoration: none; color: var(--text); opacity:1; } .dd-icon { width: 18px; text-align: center; flex-shrink: 0; font-style: normal; } .dd-badge { margin-left: auto; } .dd-divider { height: 1px; background: var(--border-3); margin: 4px 0; } .dd-item.dd-danger { color: var(--danger); } .dd-item.dd-danger:hover { background: var(--danger-soft); } /* ---------- СТРАНИЦА НАСТРОЕК (табы) ---------- */ .settings-tabs { display: flex; gap: 2px; border-bottom: 2px solid var(--border-3); margin-bottom: 24px; overflow-x: auto; scrollbar-width: none; } .settings-tabs::-webkit-scrollbar { display: none; } .settings-tab { padding: 10px 18px; font-size: 14px; font-weight: 600; color: var(--text-3); cursor: pointer; border: none; background: none; border-bottom: 2px solid transparent; margin-bottom: -2px; white-space: nowrap; flex-shrink: 0; } .settings-tab:hover { color: var(--text); } .settings-tab.active { color: var(--brand); border-bottom-color: var(--brand); } .settings-section { display: none; } .settings-section.active { display: block; } /* ---------- Поле пароля: кнопка «показать» ---------- */ .pwd-wrap { position: relative; display: flex; } .pwd-wrap .form-input { padding-right: 42px; } .pwd-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; border: none; background: none; cursor: pointer; color: var(--text-3); display: grid; place-items: center; padding: 0; } .pwd-eye:hover { color: var(--text-2); } .pwd-eye.on { color: var(--brand); } .pwd-eye svg { width: 19px; height: 19px; }