/* CRM — visual language cloned from Twenty (Linear/Notion-style minimalism). Light + dark themes via [data-theme]. Accent: Twenty blue. PRIVACY: no external resources — no web fonts, no CDNs, no trackers. Uses locally-installed Inter if present, else the system UI font. */ :root { --font: 'Inter', 'Inter var', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; /* light theme (default) */ --bg: #ffffff; --bg-secondary: #fbfbfb; --bg-tertiary: #f4f4f4; --bg-hover: #f1f1f0; --bg-selected: #ecf2ff; --border: rgba(0, 0, 0, 0.07); --border-strong: rgba(0, 0, 0, 0.12); --text: #1b1b18; --text-secondary: #6b6b68; --text-tertiary: #a8a8a5; --accent: #1961ed; --accent-hover: #1354d1; --accent-soft: #ecf2ff; --danger: #e5484d; --shadow: 0 2px 4px rgba(0, 0, 0, 0.04), 0 8px 24px rgba(0, 0, 0, 0.08); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06); --radius: 8px; --radius-sm: 4px; --sidebar-w: 240px; } [data-theme="dark"] { --bg: #191919; --bg-secondary: #141414; --bg-tertiary: #1f1f1f; --bg-hover: #262626; --bg-selected: #1e2a44; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --text: #ededed; --text-secondary: #9e9e9c; --text-tertiary: #6e6e6c; --accent: #4f8bff; --accent-hover: #6b9dff; --accent-soft: #1e2a44; --danger: #f2555a; --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); } /* «Как в системе»: атрибута на нет — цвета берём у самой системы. Те же переменные, что и в тёмной теме, просто включаются иначе */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([data-theme="dark"]) { --bg: #191919; --bg-secondary: #141414; --bg-tertiary: #1f1f1f; --bg-hover: #262626; --bg-selected: #1e2a44; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.15); --text: #ededed; --text-secondary: #9e9e9c; --text-tertiary: #6e6e6c; --accent: #4f8bff; --accent-hover: #6b9dff; --accent-soft: #1e2a44; --danger: #f2555a; --shadow: 0 2px 4px rgba(0, 0, 0, 0.3), 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); } } * { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; font-family: var(--font); font-size: 13px; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; } button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } input, select, textarea { font-family: inherit; font-size: 13px; color: var(--text); } a { color: inherit; text-decoration: none; } .app { display: flex; height: 100vh; overflow: hidden; } /* ------------------------------------------------------------------ sidebar */ .sidebar { width: var(--sidebar-w); min-width: var(--sidebar-w); background: var(--bg-secondary); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: 8px; } .workspace { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: var(--radius-sm); cursor: pointer; margin-bottom: 8px; } .workspace:hover { background: var(--bg-hover); } .workspace .logo { width: 22px; height: 22px; border-radius: 6px; background: linear-gradient(135deg, var(--accent), #7a5cff); color: #fff; font-weight: 700; font-size: 12px; display: flex; align-items: center; justify-content: center; } .workspace .name { font-weight: 600; font-size: 13px; flex: 1; } .workspace .chev { color: var(--text-tertiary); } .search-btn { display: flex; align-items: center; gap: 8px; width: 100%; padding: 6px 8px; margin-bottom: 12px; border-radius: var(--radius-sm); color: var(--text-secondary); } .search-btn:hover { background: var(--bg-hover); } .search-btn .kbd { margin-left: auto; font-size: 11px; color: var(--text-tertiary); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; } .nav-section { margin-bottom: 4px; } .nav-label { font-size: 11px; font-weight: 600; color: var(--text-tertiary); padding: 6px 8px 4px; text-transform: none; } .nav-item { display: flex; align-items: center; gap: 10px; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; width: 100%; text-align: left; } .nav-item .ico { width: 16px; height: 16px; color: var(--text-tertiary); flex-shrink: 0; } .nav-item:hover { background: var(--bg-hover); } .nav-item.active { background: var(--bg-hover); color: var(--text); } .nav-item.active .ico { color: var(--text); } .nav-item .count { margin-left: auto; color: var(--text-tertiary); font-size: 11px; } .sidebar-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; margin: 0 -4px; padding: 0 4px; } .sidebar-scroll::-webkit-scrollbar { width: 6px; } .sidebar-scroll::-webkit-scrollbar-thumb { background: var(--border); border-radius: 3px; } /* collapsible nav group — tuck overflow inside instead of removing it */ .nav-group { margin-bottom: 2px; } .nav-group-hd { display: flex; align-items: center; gap: 6px; width: 100%; padding: 6px 8px; border-radius: var(--radius-sm); color: var(--text-tertiary); font-size: 11px; font-weight: 600; text-align: left; } .nav-group-hd:hover { background: var(--bg-hover); } .nav-group-hd .ico { width: 14px; height: 14px; flex-shrink: 0; transition: transform .15s; transform: rotate(-90deg); } .nav-group.open > .nav-group-hd .ico { transform: rotate(0deg); } .nav-group-hd > span:first-of-type { flex: 1; } .nav-group-hd .grp-count { margin-left: auto; background: var(--bg-hover); color: var(--text-tertiary); border-radius: 8px; padding: 0 6px; font-size: 10px; font-weight: 600; } .nav-group-body { display: none; padding-top: 2px; } .nav-group.open > .nav-group-body { display: block; } .sidebar-footer { margin-top: auto; padding-top: 4px; } /* ------------------------------------------------------------------ main */ .main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--bg); } .topbar { display: flex; align-items: center; gap: 10px; padding: 12px 20px; border-bottom: 1px solid var(--border); } .topbar .obj-icon { width: 26px; height: 26px; border-radius: 6px; background: var(--bg-tertiary); color: var(--text-secondary); display: flex; align-items: center; justify-content: center; } .topbar h1 { font-size: 15px; font-weight: 600; } .topbar .rec-count { color: var(--text-tertiary); font-size: 12px; margin-left: 2px; } .topbar .spacer { flex: 1; } .toolbar { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-bottom: 1px solid var(--border); } .view-tabs { display: flex; gap: 2px; } .view-tab { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; } .view-tab:hover { background: var(--bg-hover); } .view-tab.active { background: var(--bg-hover); color: var(--text); } .tool-btn { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; } .tool-btn:hover { background: var(--bg-hover); } .tool-btn.ai { color: #7a5cff; font-weight: 600; } .tool-btn.ai:hover { background: #f0eafe; } [data-theme="dark"] .tool-btn.ai:hover { background: #271b45; } .tool-btn:disabled { opacity: .6; cursor: default; } .tool-search { display: flex; align-items: center; gap: 6px; padding: 5px 10px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--bg); } .tool-search input { border: none; outline: none; background: none; width: 150px; } .btn-primary { display: flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: var(--radius-sm); background: var(--accent); color: #fff; font-weight: 600; } .btn-primary:hover { background: var(--accent-hover); } /* заблокированная кнопка должна выглядеть заблокированной: синяя «Далее» на экране ознакомления звала нажать, хотя галочка ещё не стояла */ .btn-primary:disabled, .btn-primary[disabled] { background: var(--bg-tertiary); color: var(--text-tertiary); border-color: var(--border); cursor: not-allowed; } .content { flex: 1; overflow: auto; } /* ------------------------------------------------------------------ table */ table.grid { width: 100%; border-collapse: collapse; } table.grid thead th { position: sticky; top: 0; z-index: 1; background: var(--bg); text-align: left; font-weight: 500; color: var(--text-secondary); padding: 8px 12px; border-bottom: 1px solid var(--border); white-space: nowrap; font-size: 12px; } table.grid tbody td { padding: 0 12px; height: 40px; border-bottom: 1px solid var(--border); vertical-align: middle; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 320px; } table.grid tbody tr { cursor: pointer; } table.grid tbody tr:hover { background: var(--bg-hover); } table.grid td.identifier { font-weight: 600; } .cell-ident { display: flex; align-items: center; gap: 8px; } .avatar { width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 600; color: #fff; } .avatar.square { border-radius: 6px; } /* chips / tags */ .chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 6px; font-size: 12px; font-weight: 500; background: var(--bg-tertiary); color: var(--text-secondary); } .chip.blue { background: #e5efff; color: #1961ed; } .chip.green { background: #e3f6ec; color: #1a7f4b; } .chip.orange { background: #fdf0e3; color: #b76a10; } .chip.red { background: #fde8e8; color: #c0342b; } .chip.purple { background: #f0eafe; color: #6d3ee0; } .chip.gray { background: var(--bg-tertiary); color: var(--text-secondary); } [data-theme="dark"] .chip.blue { background: #17284a; color: #7aa5ff; } [data-theme="dark"] .chip.green { background: #123526; color: #5cd196; } [data-theme="dark"] .chip.orange { background: #3a2a12; color: #e0a35a; } [data-theme="dark"] .chip.red { background: #3a1c1c; color: #f08a86; } [data-theme="dark"] .chip.purple { background: #271b45; color: #a98bff; } .link-cell { color: var(--text-secondary); } .link-cell:hover { color: var(--accent); text-decoration: underline; } .muted { color: var(--text-tertiary); } /* ------------------------------------------------------------------ kanban */ .kanban { display: flex; gap: 12px; padding: 16px 20px; align-items: stretch; min-height: 100%; } .kanban-col { width: 280px; min-width: 280px; min-height: calc(100vh - 160px); border-radius: var(--radius); padding: 4px; } /* Цветная полоса над колонкой — навигация по доске: этап узнаётся по цвету раньше, чем прочитано название. Цвет в воронке уникален, поэтому полоса работает как метка, а не как украшение */ /* Шапка колонки не уезжает при прокрутке вниз: на длинной колонке иначе не видно, к какому этапу относятся карточки под рукой */ .kanban-col-head { display: flex; align-items: center; gap: 8px; padding: 8px 6px 10px; border-top: 3px solid var(--st, var(--border)); position: sticky; top: 0; z-index: 2; background: var(--bg-secondary); } /* доску возят мышью — курсор должен об этом говорить */ .content.panning, .content.panning * { cursor: grabbing !important; user-select: none; } .kanban-col-head .dot { width: 8px; height: 8px; border-radius: 50%; } .kanban-col-head .title { font-weight: 600; } .kanban-col-head .num { color: var(--text-tertiary); } .kanban-col-head .sum { margin-left: auto; color: var(--text-tertiary); font-size: 12px; } .kanban-card { background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow-sm); cursor: pointer; } .kanban-card:hover { border-color: var(--border-strong); } .kanban-card .kc-name { font-weight: 600; margin-bottom: 6px; } .kanban-card .kc-meta { display: flex; align-items: center; gap: 6px; color: var(--text-secondary); font-size: 12px; } .kanban-card .kc-amount { font-weight: 600; color: var(--text); } .kanban-col.dragover { outline: 2px dashed var(--accent); outline-offset: 2px; border-radius: var(--radius); } /* Сотрудники: отделов много, а людей в каждом мало. Обычной лентой колонки уезжали за правый край — половину было видно только мышью, а под ними пустовал весь экран. Здесь колонки встают сеткой и переносятся на следующую строку, каждая в своей рамке */ .kanban.staff-grid { display: grid; align-items: start; align-content: start; grid-template-columns: repeat(auto-fill, minmax(min(270px, 100%), 1fr)); } .kanban.staff-grid .kanban-col { width: auto; min-width: 0; min-height: 96px; padding: 8px; background: var(--bg-secondary); border: 1px solid var(--border); } .kanban.staff-grid .kanban-col-head { padding: 2px 4px 8px; } .kanban.staff-grid .kanban-col-head .title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kanban.staff-grid .kanban-col-head .num { margin-left: auto; } .kanban.staff-grid .kanban-card:last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ detail */ .overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.28); display: flex; justify-content: flex-end; z-index: 50; opacity: 0; pointer-events: none; transition: opacity 0.15s; } .overlay.open { opacity: 1; pointer-events: auto; } .panel { /* Три колонки: анкета, лента, связанные записи. В 720 точек они не помещаются — карточка становится щелью, и лента в ней не читается */ width: 1180px; max-width: 96vw; height: 100%; background: var(--bg); display: flex; flex-direction: column; transform: translateX(30px); transition: transform 0.18s ease; box-shadow: -8px 0 40px rgba(0, 0, 0, 0.12); } .overlay.open .panel { transform: translateX(0); } .panel-head { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .panel-head .p-avatar { width: 34px; height: 34px; } .panel-head .p-title { font-size: 17px; font-weight: 600; flex: 1; outline: none; } .icon-btn { padding: 6px; border-radius: var(--radius-sm); color: var(--text-secondary); } .icon-btn:hover { background: var(--bg-hover); } .icon-btn.danger:hover { background: #fde8e8; color: var(--danger); } [data-theme="dark"] .icon-btn.danger:hover { background: #3a1c1c; } .panel-body { flex: 1; overflow: auto; display: flex; } .panel-fields { width: 300px; min-width: 300px; border-right: 1px solid var(--border); padding: 16px; overflow-y: auto; } /* Лента событий — середина карточки, как в привычных CRM: слева анкета, в центре что происходило, справа связанные записи. */ .panel-feed { flex: 1; min-width: 0; display: flex; flex-direction: column; border-right: 1px solid var(--border); } .feed-list { flex: 1; overflow-y: auto; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; } .feed-item { display: flex; gap: 9px; padding: 6px 4px; border-radius: var(--radius-sm); } .feed-item:hover { background: var(--bg-hover); } .feed-mark { width: 22px; min-width: 22px; height: 22px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 11px; background: var(--bg-secondary); color: var(--text-secondary); margin-top: 1px; } .feed-mark.in { background: #e8f1ff; color: #1961ed; } .feed-mark.out { background: #e7f6ed; color: #1a7f4b; } .feed-mark.warn { background: #fdeeee; color: #c0342b; } .feed-body { flex: 1; min-width: 0; font-size: 13px; line-height: 1.45; word-break: break-word; } .feed-when { color: var(--text-tertiary); font-size: 11px; white-space: nowrap; } .feed-who { font-weight: 600; } .feed-day { margin: 10px 0 2px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .feed-quote { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 7px 10px; margin-top: 3px; white-space: pre-wrap; } .feed-composer { border-top: 1px solid var(--border); padding: 9px 14px 12px; } .feed-tabs { display: flex; gap: 4px; margin-bottom: 7px; } .feed-tab { padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--text-secondary); } .feed-tab.active { background: var(--bg-hover); color: var(--text); font-weight: 600; } .feed-composer textarea, .feed-composer input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); color: var(--text); font-size: 13px; resize: none; } .panel-side { width: 330px; min-width: 300px; padding: 16px 18px; overflow-y: auto; } @media (max-width: 1180px) { .panel-body { flex-direction: column; } .panel-fields, .panel-feed, .panel-side { width: auto; min-width: 0; border-right: none; } .feed-list { max-height: 50vh; } } .field-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; border-radius: var(--radius-sm); min-height: 32px; } .field-row:hover { background: var(--bg-hover); } .field-row .f-label { width: 108px; min-width: 108px; color: var(--text-secondary); font-size: 12px; display: flex; align-items: center; gap: 6px; } .field-row .f-value { flex: 1; } .field-row .f-value input, .field-row .f-value select, .field-row .f-value textarea { width: 100%; border: none; background: none; outline: none; padding: 2px 0; } .field-row .f-value input:focus, .field-row .f-value select:focus { border-bottom: 1px solid var(--accent); } .section-title { font-weight: 600; font-size: 12px; color: var(--text-secondary); margin: 8px 0 6px; } /* вкладок в карточке стало больше, чем помещается в строку: переносим, иначе последние уезжают за край панели и до них не добраться */ .side-tabs { display: flex; flex-wrap: wrap; gap: 4px; border-bottom: 1px solid var(--border); margin-bottom: 12px; } .side-tab { padding: 6px 10px; color: var(--text-secondary); font-weight: 500; border-bottom: 2px solid transparent; } .side-tab.active { color: var(--text); border-bottom-color: var(--accent); } .activity-item { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; background: var(--bg-secondary); } .activity-item .ai-title { font-weight: 600; margin-bottom: 3px; } .activity-item .ai-body { color: var(--text-secondary); white-space: pre-wrap; } .activity-item .ai-meta { color: var(--text-tertiary); font-size: 11px; margin-top: 6px; display: flex; gap: 8px; } .add-activity { display: flex; align-items: center; gap: 6px; color: var(--accent); font-weight: 500; padding: 8px 0; } /* ------------------------------------------------------------------ modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; z-index: 60; opacity: 0; pointer-events: none; transition: opacity 0.12s; } .modal-backdrop.open { opacity: 1; pointer-events: auto; } .modal { width: 560px; max-width: 92vw; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .modal-head { padding: 16px 20px; border-bottom: 1px solid var(--border); font-weight: 600; font-size: 15px; } .modal-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow: auto; } .modal-foot { padding: 12px 20px; border-top: 1px solid var(--border); display: flex; justify-content: flex-end; gap: 8px; } .form-field { display: flex; flex-direction: column; gap: 4px; } .form-field label { font-size: 12px; color: var(--text-secondary); font-weight: 500; } .form-field input, .form-field select, .form-field textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg); outline: none; } .form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--accent); } .btn-ghost { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; } .btn-ghost:hover { background: var(--bg-hover); } /* command palette */ .cmd-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.3); display: flex; align-items: flex-start; justify-content: center; padding-top: 15vh; z-index: 70; opacity: 0; pointer-events: none; transition: opacity 0.1s; } .cmd-backdrop.open { opacity: 1; pointer-events: auto; } .cmd { width: 560px; max-width: 92vw; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; } .cmd-input { width: 100%; padding: 16px 18px; border: none; outline: none; font-size: 15px; background: none; border-bottom: 1px solid var(--border); } .cmd-results { max-height: 400px; overflow: auto; padding: 6px; } .cmd-group-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 600; color: var(--text-tertiary); } .cmd-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; } .cmd-item:hover, .cmd-item.active { background: var(--bg-hover); } .empty { padding: 60px 20px; text-align: center; color: var(--text-tertiary); } .empty .big { font-size: 15px; color: var(--text-secondary); margin-bottom: 6px; } .toast { position: fixed; bottom: 20px; left: 50%; transform: translateX(-50%); background: var(--text); color: var(--bg); padding: 10px 16px; border-radius: 8px; font-weight: 500; box-shadow: var(--shadow); z-index: 100; opacity: 0; transition: opacity 0.2s; } .toast.show { opacity: 1; } .checkbox { width: 16px; height: 16px; cursor: pointer; accent-color: var(--accent); } td.done, .kc-name.done { text-decoration: line-through; color: var(--text-tertiary); } /* filter chips in toolbar */ .filter-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 8px; border-radius: var(--radius-sm); font-weight: 500; background: var(--accent-soft); color: var(--accent); border: 1px solid transparent; } .filter-chip:hover { border-color: var(--accent); } .filter-chip svg { width: 12px; height: 12px; } /* popover (filters) */ .popover { position: fixed; z-index: 80; min-width: 200px; max-height: 340px; overflow: auto; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: var(--shadow); padding: 6px; } /* kanban add-column button */ .kanban-addcol { width: 180px; min-width: 180px; align-self: flex-start; margin-top: 2px; display: flex; align-items: center; gap: 6px; justify-content: center; padding: 10px; border: 1px dashed var(--border-strong); border-radius: var(--radius); color: var(--text-secondary); font-weight: 500; } .kanban-addcol:hover { background: var(--bg-hover); color: var(--text); } /* pipeline editor rows */ .stage-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; } .stage-row .stage-name { flex: 1; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px 8px; background: var(--bg); } .stage-row .stage-color { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 6px; background: var(--bg); } .stage-row .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } /* ------------------------------------------------------------------ dashboard */ .dash { padding: 20px; display: flex; flex-direction: column; gap: 16px; max-width: 1100px; } .dash-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg-secondary); } .tile .t-lbl { color: var(--text-secondary); font-size: 12px; margin-bottom: 6px; } .tile .t-num { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; } .tile .t-num.accent { color: var(--accent); } .dash-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; background: var(--bg); } .dash-h { font-weight: 600; margin-bottom: 12px; } .dash-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .bar-row { display: flex; align-items: center; gap: 12px; padding: 6px 0; } .bar-label { width: 120px; min-width: 120px; display: flex; align-items: center; gap: 8px; color: var(--text-secondary); } .bar-label .dot { width: 8px; height: 8px; border-radius: 50%; } .bar-track { flex: 1; height: 10px; background: var(--bg-tertiary); border-radius: 6px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 6px; min-width: 2px; } .bar-fill.blue { background: #1961ed; } .bar-fill.green { background: #1a7f4b; } .bar-fill.orange { background: #b76a10; } .bar-fill.red { background: #c0342b; } .bar-fill.purple { background: #6d3ee0; } .bar-fill.gray { background: #a8a8a5; } .bar-val { width: 130px; min-width: 130px; text-align: right; } .dash-item { display: flex; align-items: center; gap: 10px; padding: 8px 6px; border-radius: var(--radius-sm); cursor: pointer; } .dash-item:hover { background: var(--bg-hover); } .dash-item .di-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dash-item .di-amt { font-weight: 600; } .count-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .count-tile { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; text-align: center; cursor: pointer; } .count-tile:hover { background: var(--bg-hover); } .count-tile .ct-num { font-size: 20px; font-weight: 700; } .count-tile .ct-lbl { color: var(--text-secondary); font-size: 12px; margin-top: 2px; } @media (max-width: 900px) { .dash-tiles { grid-template-columns: repeat(2, 1fr); } .dash-row { grid-template-columns: 1fr; } } /* ------------------------------------------------------------------ login */ .login-screen { position: fixed; inset: 0; z-index: 200; display: flex; align-items: center; justify-content: center; background: var(--bg-secondary); } .login-card { width: 360px; max-width: 92vw; background: var(--bg); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow); padding: 32px 28px; display: flex; flex-direction: column; gap: 12px; text-align: center; } .login-logo { width: 44px; height: 44px; border-radius: 12px; margin: 0 auto 4px; background: linear-gradient(135deg, var(--accent), #7a5cff); color: #fff; font-weight: 700; font-size: 22px; display: flex; align-items: center; justify-content: center; } .login-card h1 { font-size: 18px; font-weight: 700; } .login-sub { color: var(--text-secondary); font-size: 13px; margin-top: -6px; } .login-input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 10px 12px; background: var(--bg); outline: none; } .login-input:focus { border-color: var(--accent); } .login-btn { background: var(--accent); color: #fff; font-weight: 600; padding: 10px; border-radius: var(--radius-sm); margin-top: 4px; } .login-btn:hover { background: var(--accent-hover); } .login-err { background: #fde8e8; color: #c0342b; padding: 8px; border-radius: var(--radius-sm); font-size: 13px; } [data-theme="dark"] .login-err { background: #3a1c1c; color: #f08a86; } .login-demo { color: var(--text-tertiary); font-size: 11px; margin-top: 6px; line-height: 1.6; } /* language switcher */ .lang-switch { display: flex; gap: 4px; padding: 6px 8px; } .lang-btn { flex: 1; padding: 5px; border-radius: var(--radius-sm); border: 1px solid var(--border); color: var(--text-secondary); font-size: 11px; font-weight: 600; } .lang-btn:hover { background: var(--bg-hover); } .lang-btn.active { background: var(--accent); color: #fff; border-color: var(--accent); } /* user box in sidebar */ .user-box { display: flex; align-items: center; gap: 8px; padding: 8px; margin-top: 4px; border-top: 1px solid var(--border); } .user-box .ub-info { flex: 1; min-width: 0; } .user-box .ub-name { font-weight: 600; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .user-box .ub-role { font-size: 11px; color: var(--text-tertiary); } /* members modal */ .member-row { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border); } .member-row .member-role { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; background: var(--bg); } .add-member { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: center; } .add-member input, .add-member select { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg); outline: none; } .add-member button { grid-column: 1 / -1; } /* workflow builder */ .wf-form { display: flex; flex-direction: column; gap: 10px; } .wf-form input, .wf-form select, .wf-form textarea { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg); outline: none; } .wf-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .wf-line b { font-size: 11px; color: var(--text-tertiary); width: 44px; } #wfActionCfg { display: flex; flex-direction: column; gap: 8px; } .switch input { width: 34px; height: 18px; accent-color: var(--accent); } /* billing plans */ .plan-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .plan-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 16px; display: flex; flex-direction: column; gap: 8px; } .plan-card.current { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; } .plan-name { font-weight: 700; font-size: 15px; } .plan-price { font-size: 22px; font-weight: 700; } .plan-price span { font-size: 12px; font-weight: 400; color: var(--text-secondary); } .plan-feat { list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 12px; color: var(--text-secondary); flex: 1; } .plan-feat li::before { content: "✓ "; color: var(--accent); font-weight: 700; } .plan-current { text-align: center; color: var(--accent); font-weight: 600; font-size: 12px; padding: 6px; } @media (max-width: 700px) { .plan-grid { grid-template-columns: 1fr; } } /* calendar */ .calendar { padding: 16px 20px; } .cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .cal-head { margin-bottom: 6px; } .cal-head div { text-align: center; font-size: 12px; color: var(--text-secondary); font-weight: 600; } .cal-cell { min-height: 100px; border: 1px solid var(--border); border-radius: var(--radius); padding: 6px; cursor: pointer; overflow: hidden; } .cal-cell.empty { border: none; background: transparent; cursor: default; } .cal-cell:hover:not(.empty) { border-color: var(--border-strong); background: var(--bg-hover); } .cal-cell.today { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .cal-num { font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } /* production-calendar day colouring */ .cal-cell.holiday { background: #fde3e3; border-color: #f3b6b6; } .cal-cell.preholiday { background: #fdeeee; border-color: #f3cccc; } .cal-cell.weekend { background: #f1f1f0; border-color: var(--border); } .cal-cell.friday { background: #eaf5ee; border-color: #bfe0cb; } .cal-cell.friday:hover { background: #ddeee3; } .cal-friday { font-size: 10px; color: #1a7f4b; font-weight: 600; margin-bottom: 3px; } .cal-legend i.lg.friday { background: #eaf5ee; border-color: #bfe0cb; } :root[data-theme="dark"] .cal-cell.friday { background: #17291f; border-color: #2f5a3f; } :root[data-theme="dark"] .cal-friday { color: #7fe0a0; } .cal-cell.holiday .cal-num, .cal-cell.preholiday .cal-num { color: #c0342b; font-weight: 700; } .cal-cell.holiday:hover, .cal-cell.preholiday:hover { background: #fbd5d5; } .cal-cell.weekend:hover { background: #e9e9e8; } .cal-holiday { font-size: 10px; line-height: 1.2; color: #c0342b; font-weight: 600; margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* collapsible org-structure tree (staff) */ .org-controls { display: flex; gap: 8px; padding: 12px 20px 0; } .orgtree { padding: 12px 20px 20px; display: flex; flex-direction: column; gap: 8px; } .org-node { border: 1px solid var(--border); border-radius: 10px; background: var(--bg-secondary); overflow: hidden; transition: box-shadow .15s; } .org-node:hover { box-shadow: 0 1px 6px rgba(0,0,0,.06); } .org-node-head { display: flex; align-items: center; gap: 9px; padding: 12px 14px; cursor: pointer; user-select: none; } .org-node-head:hover { background: var(--bg-hover); } .org-chev { display: inline-flex; color: var(--text-tertiary); transition: transform .18s; } .org-node.open > .org-node-head .org-chev { transform: rotate(90deg); } .org-node-title { font-size: 14px; } .org-head-chip { font-size: 11px; font-weight: 600; color: #1961ed; background: #eaf1ff; border-radius: 8px; padding: 2px 8px; } .org-head-chip.empty { color: var(--text-tertiary); background: var(--bg); border: 1px dashed var(--border); font-weight: 400; } .org-summary { margin-left: auto; font-size: 12px; color: var(--text-tertiary); white-space: nowrap; } .org-node-body { display: none; padding: 0 14px 12px 34px; } .org-node.open > .org-node-body { display: block; } .org-members { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px; } .org-emp { display: flex; align-items: center; gap: 9px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); cursor: pointer; transition: border-color .12s; } .org-emp:hover { border-color: var(--accent); background: var(--bg-hover); } .org-emp.head { border-color: #cddcff; background: #f5f8ff; } .org-emp-info { flex: 1; min-width: 0; } .org-emp-name { font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: flex; align-items: center; gap: 6px; } .org-head-badge { font-size: 9px; font-weight: 700; color: #1961ed; background: #eaf1ff; border-radius: 6px; padding: 1px 5px; } .org-empty { font-size: 12px; padding: 6px 2px; } /* nested sub-divisions — indented with a connector line */ .org-subs { margin: 10px 0 0; padding-left: 14px; border-left: 2px solid var(--border); display: flex; flex-direction: column; gap: 8px; } .org-node.service { background: var(--bg); } .org-node.service > .org-node-head .org-node-title { font-weight: 500; } /* employee documents block */ .doc-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 6px; } :root[data-theme="dark"] .org-head-chip, :root[data-theme="dark"] .org-head-badge { color: #9bbcff; background: #1e2a44; } :root[data-theme="dark"] .org-emp.head { border-color: #2f4372; background: #1a2540; } .cal-pick { cursor: pointer; text-transform: capitalize; user-select: none; } .cal-pick:hover { background: var(--bg-hover); } /* month/year picker */ .mp-year { display: flex; align-items: center; justify-content: center; gap: 16px; margin-bottom: 12px; } .mp-year b { font-size: 18px; min-width: 64px; text-align: center; } .mp-grid { display: flex; flex-direction: column; gap: 8px; } .mp-q { display: flex; align-items: center; gap: 10px; } .mp-q-name { flex: 0 0 34px; font-size: 11px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .mp-q-months { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .mp-month { padding: 10px 0; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 13px; cursor: pointer; text-transform: capitalize; } .mp-month:hover { background: var(--bg-hover); border-color: var(--border-strong); } .mp-month.active { background: var(--accent); color: #fff; border-color: transparent; } .cal-legend { display: flex; gap: 16px; margin-bottom: 10px; font-size: 12px; color: var(--text-secondary); } .cal-legend i.lg { display: inline-block; width: 12px; height: 12px; border-radius: 3px; vertical-align: middle; margin-right: 4px; border: 1px solid var(--border); } .cal-legend i.lg.holiday { background: #fde3e3; border-color: #f3b6b6; } .cal-legend i.lg.preholiday { background: #fdeeee; border-color: #f3cccc; } .cal-legend i.lg.weekend { background: #f1f1f0; } :root[data-theme="dark"] .cal-cell.holiday { background: #3a2020; border-color: #6b3535; } :root[data-theme="dark"] .cal-cell.preholiday { background: #2e1e1e; border-color: #513131; } :root[data-theme="dark"] .cal-cell.weekend { background: #26262a; } :root[data-theme="dark"] .cal-cell.holiday .cal-num, :root[data-theme="dark"] .cal-cell.preholiday .cal-num, :root[data-theme="dark"] .cal-holiday { color: #ff9a9a; } .cal-item { font-size: 11px; padding: 2px 6px; border-radius: 4px; margin-bottom: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-item.done { text-decoration: line-through; opacity: .6; } .cal-item.blue { background: #e5efff; color: #1961ed; } .cal-item.green { background: #e3f6ec; color: #1a7f4b; } .cal-item.orange { background: #fdf0e3; color: #b76a10; } .cal-item.red { background: #fde8e8; color: #c0342b; } .cal-item.purple { background: #f0eafe; color: #6d3ee0; } .cal-item.gray { background: var(--bg-tertiary); color: var(--text-secondary); } [data-theme="dark"] .cal-item.blue { background: #17284a; color: #7aa5ff; } [data-theme="dark"] .cal-item.green { background: #123526; color: #5cd196; } [data-theme="dark"] .cal-item.orange { background: #3a2a12; color: #e0a35a; } [data-theme="dark"] .cal-item.red { background: #3a1c1c; color: #f08a86; } [data-theme="dark"] .cal-item.purple { background: #271b45; color: #a98bff; } /* attachments / files */ .file-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); margin-bottom: 6px; } .file-item .file-ico { font-size: 18px; } .file-item .file-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--accent); font-weight: 500; } .file-item .file-name:hover { text-decoration: underline; } .file-item .file-size { font-size: 11px; } .proj-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; padding: 16px 20px; } .proj-card { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; cursor: pointer; background: var(--bg); } .proj-card:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); } .emp-photo { border-radius: 50%; object-fit: cover; display: inline-block; vertical-align: middle; } .emp-card { cursor: pointer; } .rel-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); background: var(--bg-secondary); margin-bottom: 6px; cursor: pointer; } .rel-item:hover { border-color: var(--border-strong); background: var(--bg-hover); } .file-actions { display: flex; gap: 14px; margin-top: 6px; } .file-actions .add-activity { padding: 6px 0; } /* ------------------------------------------------------------------ support chat widget */ .support-fab { position: fixed; right: 22px; bottom: 22px; z-index: 60; width: 52px; height: 52px; border-radius: 50%; background: var(--accent); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: transform .12s; } .support-fab:hover { transform: scale(1.06); } .support-fab.has-reply::after { content: ''; position: absolute; top: 8px; right: 8px; width: 12px; height: 12px; border-radius: 50%; background: #ff4757; border: 2px solid var(--accent); } .support-panel { position: fixed; right: 22px; bottom: 84px; z-index: 60; width: 340px; max-width: calc(100vw - 44px); height: 460px; max-height: calc(100vh - 120px); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 12px 40px rgba(0,0,0,.28); display: none; flex-direction: column; overflow: hidden; } .support-panel.open { display: flex; } .support-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; font-weight: 600; font-size: 14px; background: var(--accent); color: #fff; } .support-head .icon-btn { color: #fff; } .support-msgs { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; } .sup-empty { color: var(--text-tertiary); font-size: 13px; text-align: center; margin: auto; padding: 20px; } .sup-msg { display: flex; flex-direction: column; max-width: 82%; } .sup-msg.client { align-self: flex-end; align-items: flex-end; } .sup-msg.support { align-self: flex-start; align-items: flex-start; } .sup-bubble { padding: 8px 11px; border-radius: 12px; font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .sup-msg.client .sup-bubble { background: var(--accent); color: #fff; border-bottom-right-radius: 3px; } .sup-msg.support .sup-bubble { background: var(--bg-hover); color: var(--text); border-bottom-left-radius: 3px; } .sup-meta { font-size: 10px; color: var(--text-tertiary); margin-top: 2px; } .support-input { display: flex; gap: 6px; padding: 10px; border-top: 1px solid var(--border); } .support-input input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } .support-input .btn-primary { padding: 8px 10px; display: flex; align-items: center; } /* ------------------------------------------------------------------ team chat */ .chat-wrap { display: flex; height: 100%; } .chat-side { width: 220px; min-width: 200px; border-right: 1px solid var(--border); padding: 10px; overflow-y: auto; } .chat-side-h { font-size: 11px; font-weight: 600; color: var(--text-tertiary); padding: 4px 8px 6px; } .chat-chan { display: flex; align-items: center; gap: 8px; width: 100%; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; text-align: left; } .chat-chan span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-chan:hover { background: var(--bg-hover); } .chat-chan.active { background: var(--bg-hover); color: var(--text); } .chat-main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .chat-msgs { flex: 1; overflow-y: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } .chat-msg { display: flex; gap: 8px; align-items: flex-end; max-width: 70%; } .chat-msg.mine { align-self: flex-end; flex-direction: row-reverse; } .chat-bubble { background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 8px 12px; } .chat-msg.mine .chat-bubble { background: var(--accent); color: #fff; border-color: transparent; } .cb-name { font-size: 11px; font-weight: 600; color: var(--accent); margin-bottom: 2px; } .cb-text { font-size: 13px; line-height: 1.4; white-space: pre-wrap; word-break: break-word; } .cb-time { font-size: 10px; opacity: .6; margin-top: 3px; text-align: right; } .chat-input { display: flex; gap: 8px; padding: 12px 20px; border-top: 1px solid var(--border); align-items: center; } .chat-input input { flex: 1; padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); } .chat-input .btn-primary { padding: 9px 12px; } /* header bar */ .chat-head-bar { display: flex; align-items: center; gap: 8px; padding: 10px 20px; border-bottom: 1px solid var(--border); font-size: 14px; color: var(--text); } .chat-head-bar svg { color: var(--text-tertiary); } /* announce toggle */ .chat-announce-btn { padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); font-size: 15px; line-height: 1; } .chat-announce-btn.on { background: #fff4d6; border-color: #e0b84a; } .chat-attach-btn { padding: 7px 9px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text-secondary); display: inline-flex; } .chat-attach-btn:hover { background: var(--bg-hover); color: var(--text); } /* chat attachments */ .cb-img { display: block; margin: 2px 0 4px; } .cb-img img { max-width: 240px; max-height: 240px; border-radius: 8px; display: block; } .cb-video { max-width: 280px; max-height: 240px; border-radius: 8px; margin: 2px 0 4px; display: block; background: #000; } .cb-file { display: flex; align-items: center; gap: 8px; margin: 2px 0 4px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); max-width: 260px; } .cb-file:hover { background: var(--bg-hover); } .cb-file-info { display: flex; flex-direction: column; min-width: 0; flex: 1; } .cb-file-name { font-size: 12px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cb-file-size { font-size: 10px; color: var(--text-tertiary); } .chat-msg.mine .cb-file { background: rgba(255,255,255,.15); border-color: rgba(255,255,255,.3); color: #fff; } .chat-msg.mine .cb-file-size { color: rgba(255,255,255,.75); } /* reply bar */ .chat-reply-bar { display: flex; align-items: center; gap: 10px; padding: 8px 20px; border-top: 1px solid var(--border); background: var(--bg-secondary); } .chat-reply-bar .cb-quote-text { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* quoted reply inside a bubble */ .cb-quote { border-left: 3px solid var(--accent); padding: 2px 8px; margin-bottom: 4px; background: rgba(127,127,127,.08); border-radius: 4px; } .cb-quote-name { font-size: 10px; font-weight: 700; opacity: .8; } .cb-quote-text { font-size: 12px; opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 260px; } .chat-msg.mine .cb-quote { border-left-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); } /* per-message actions (reply + add reaction) — visible on hover */ .cb-actions { display: flex; align-items: center; gap: 6px; margin-top: 4px; opacity: 0; transition: opacity .12s; position: relative; } .chat-bubble:hover .cb-actions, .chat-announce:hover .cb-actions { opacity: 1; } /* all message action controls (reply / +reaction / edit / pin / delete) — единый стиль: прозрачный фон и одинаковый цвет, чтобы иконки были видны и на светлых, и на синих (мои) пузырях */ .cb-reply, .rx-add, .cb-act { display: inline-flex; align-items: center; gap: 3px; cursor: pointer; background: transparent; border: none; font-size: 11px; color: var(--text-tertiary); padding: 2px 6px; border-radius: 6px; } .cb-reply:hover, .rx-add:hover, .cb-act:hover { background: var(--bg-hover); color: var(--text); } .cb-act.cb-del:hover { background: rgba(192,52,43,.12); color: var(--danger, #c0342b); } /* on my own (accent) bubbles → light icons on the accent background */ .chat-msg.mine .cb-reply, .chat-msg.mine .rx-add, .chat-msg.mine .cb-act { color: rgba(255,255,255,.85); } .chat-msg.mine .cb-reply:hover, .chat-msg.mine .rx-add:hover, .chat-msg.mine .cb-act:hover { background: rgba(255,255,255,.18); color: #fff; } .cb-edited { font-style: italic; opacity: .8; } /* department badge in the unified «General» feed */ .cb-badge-row { margin-bottom: 4px; } .cb-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 11px; font-weight: 700; color: var(--accent); background: var(--accent-soft, #e6efff); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 8px; padding: 2px 8px; cursor: pointer; vertical-align: middle; } .cb-badge:hover { filter: brightness(.95); } .chat-msg.mine .cb-badge { color: #fff; background: rgba(255,255,255,.25); border-color: rgba(255,255,255,.4); } .cb-badge.dm { color: #6d3ee0; background: #efe9ff; border-color: rgba(109,62,224,.3); } .chat-msg.mine .cb-badge.dm { color: #fff; background: rgba(255,255,255,.25); } /* date separators */ .chat-day { text-align: center; margin: 8px 0 4px; } .chat-day span { font-size: 11px; color: var(--text-tertiary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 12px; padding: 2px 12px; } /* read receipts / status */ .cb-seen { display: inline-flex; align-items: center; gap: 3px; color: #7fe0a0; } .cb-seen svg { width: 12px; height: 12px; } .cb-sent { opacity: .7; } .cb-sched { color: #ffd479; font-weight: 600; } .chat-msg:not(.mine) .cb-seen { color: #1a7f4b; } /* scheduled (pending) message — dashed, dimmed */ .chat-bubble.sched, .chat-announce.sched { border-style: dashed !important; opacity: .85; } /* pin */ .cb-act.on { color: var(--accent); } .chat-msg.mine .cb-act.on { color: #fff; } .cb-pinmark { display: inline-flex; margin-right: 3px; opacity: .7; } .cb-pinmark svg { width: 11px; height: 11px; } .chat-bubble.pinned, .chat-announce.pinned { box-shadow: inset 3px 0 0 var(--accent); } .chat-pinned { position: sticky; top: 0; z-index: 5; background: var(--bg); border-bottom: 1px solid var(--border); padding: 6px 10px; margin: -16px -20px 8px; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; } .chat-pinned-h { font-size: 11px; font-weight: 600; color: var(--text-tertiary); display: inline-flex; align-items: center; gap: 4px; } .chat-pinned-item { font-size: 12px; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 10px; padding: 2px 10px; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .chat-pinned-item:hover { background: var(--bg-hover); color: var(--text); } /* clickable reply quote */ .cb-quote { cursor: pointer; } .cb-quote:hover { filter: brightness(.97); } /* jump-to highlight */ .chat-msg.flash .chat-bubble, .chat-announce.flash { animation: chatflash 1.4s ease; } @keyframes chatflash { 0%, 40% { background: rgba(25,97,237,.18); } 100% { background: inherit; } } /* voice message + transcription */ .cb-voice { display: flex; align-items: center; gap: 8px; margin: 2px 0 2px; } .cb-voice svg { color: var(--text-tertiary); flex: 0 0 auto; } .cb-audio { height: 34px; max-width: 240px; } .chat-msg.mine .cb-voice svg { color: rgba(255,255,255,.85); } .cb-transcribe { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-tertiary); background: transparent; border: 1px dashed var(--border); border-radius: 8px; padding: 3px 8px; margin: 2px 0 4px; cursor: pointer; } .cb-transcribe:hover { background: var(--bg-hover); color: var(--text); } .chat-msg.mine .cb-transcribe { color: rgba(255,255,255,.85); border-color: rgba(255,255,255,.4); } .cb-transcript { font-size: 12.5px; line-height: 1.4; margin: 2px 0 4px; padding: 6px 9px; border-left: 3px solid var(--accent); background: rgba(127,127,127,.08); border-radius: 4px; white-space: pre-wrap; } .chat-msg.mine .cb-transcript { border-left-color: rgba(255,255,255,.7); background: rgba(255,255,255,.12); } /* mic recording state */ .chat-attach-btn.recording { background: #ffe2e2; border-color: #e05a5a; color: #c0342b; font-size: 12px; font-weight: 600; min-width: 54px; gap: 5px; } .rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #e0342b; animation: recpulse 1s infinite; } @keyframes recpulse { 0%,100% { opacity: 1; } 50% { opacity: .3; } } /* emoji compose picker */ .chat-emoji-pop { position: absolute; bottom: 60px; left: 12px; z-index: 30; width: 300px; max-height: 220px; overflow-y: auto; flex-wrap: wrap; gap: 2px; padding: 8px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); } .chat-emoji-pop .emo { font-size: 20px; padding: 3px; border-radius: 6px; background: transparent; border: none; cursor: pointer; } .chat-emoji-pop .emo:hover { background: var(--bg-hover); } .chat-main { position: relative; } /* send button + schedule menu */ .chat-send-group { position: relative; display: flex; } .chat-send-group .btn-primary { padding: 9px 12px; } .chat-send-caret { padding: 9px 6px !important; margin-left: 1px; border-top-left-radius: 0; border-bottom-left-radius: 0; font-size: 11px; } .chat-send-group .btn-primary:first-child { border-top-right-radius: 0; border-bottom-right-radius: 0; } .chat-send-menu { position: absolute; bottom: 46px; right: 0; z-index: 30; display: flex; flex-direction: column; min-width: 190px; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 10px 30px rgba(0,0,0,.2); padding: 6px; } .chat-send-menu .csm-h { font-size: 11px; font-weight: 600; color: var(--text-tertiary); padding: 4px 8px; } .chat-send-menu button { display: flex; align-items: center; gap: 8px; text-align: left; padding: 8px 10px; border-radius: 8px; font-size: 13px; color: var(--text); background: transparent; } .chat-send-menu button:hover { background: var(--bg-hover); } /* scheduled button in header */ .chat-sched-btn { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--text-tertiary); padding: 4px 9px; border-radius: 8px; border: 1px solid var(--border); } .chat-sched-btn:hover { background: var(--bg-hover); color: var(--text); } .chat-sched-btn.has { color: var(--accent); border-color: var(--accent); } .sched-row { display: flex; align-items: center; gap: 10px; padding: 8px 4px; border-bottom: 1px solid var(--border); } .sched-row .cb-quote-text { max-width: 320px; } /* poll */ .poll-card { background: var(--bg-secondary); border-color: var(--border); } .poll { display: flex; flex-direction: column; gap: 6px; } .poll-q { font-weight: 600; font-size: 14px; margin: 2px 0 4px; } .poll-opt-bar { position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between; gap: 8px; text-align: left; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); cursor: pointer; font-size: 13px; } .poll-opt-bar:hover { border-color: var(--accent); } .poll-opt-bar.mine { border-color: var(--accent); } .poll-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 16%, transparent); z-index: 0; transition: width .3s; } .poll-opt-text, .poll-opt-pct { position: relative; z-index: 1; } .poll-opt-text { flex: 1; min-width: 0; } .poll-opt-pct { color: var(--text-tertiary); font-size: 12px; white-space: nowrap; } .poll-voters { color: var(--text-tertiary); font-size: 11px; } .poll-foot { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; } .poll-opt { display: block; width: 100%; box-sizing: border-box; margin-bottom: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); } /* auto-growing textarea input — выглядит как прежнее однострочное поле, но растёт под длинный текст */ .chat-input { align-items: flex-end; } .chat-input textarea { flex: 1; box-sizing: border-box; min-height: 40px; height: 40px; max-height: 160px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); color: var(--text); font: inherit; font-size: 14px; line-height: 1.35; resize: none; overflow-y: auto; } /* inline edit */ .cb-edit { margin: 2px 0 4px; } .cb-edit-input { width: 100%; min-width: 220px; box-sizing: border-box; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; resize: vertical; } .chat-msg.mine .cb-edit-input { color: var(--text); } .cb-edit-row { display: flex; gap: 6px; justify-content: flex-end; margin-top: 6px; } .cb-edit-row .btn-ghost, .cb-edit-row .btn-primary { padding: 4px 10px; font-size: 12px; } .rx-picker { position: absolute; bottom: 22px; left: 40px; z-index: 20; display: flex; gap: 2px; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: 0 6px 20px rgba(0,0,0,.18); } .rx-picker button { font-size: 17px; padding: 3px 5px; border-radius: 6px; } .rx-picker button:hover { background: var(--bg-hover); } /* reaction chips */ .rx-row { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 4px; } .rx-chip { font-size: 11px; padding: 1px 7px; border-radius: 12px; border: 1px solid var(--border); background: var(--bg); color: var(--text); line-height: 1.6; } .rx-chip.mine { background: var(--accent-soft, #e6efff); border-color: var(--accent); color: var(--accent); font-weight: 600; } .rx-chip:hover { filter: brightness(.97); } /* announcement card */ .chat-announce { align-self: stretch; max-width: 100%; border: 1px solid #e0b84a; background: #fffbf0; border-radius: 12px; padding: 10px 14px; } .chat-announce .ann-head { font-size: 12px; font-weight: 700; color: #9a6b00; margin-bottom: 4px; display: flex; align-items: center; gap: 6px; } .chat-announce .ann-head .cb-time { margin-left: auto; opacity: .6; } .chat-announce .ann-text { font-size: 14px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; color: #4a3a10; } :root[data-theme="dark"] .chat-announce { background: #2a2410; border-color: #6b5420; } :root[data-theme="dark"] .chat-announce .ann-head { color: #e0b84a; } :root[data-theme="dark"] .chat-announce .ann-text { color: #e8dcc0; } :root[data-theme="dark"] .chat-announce-btn.on { background: #3a2f10; border-color: #6b5420; } /* ---------------------------------------------- staff: head / acting / positions */ .org-head-chip { border: none; cursor: pointer; font-family: inherit; line-height: 1.6; } .org-head-chip:hover { filter: brightness(.96); } .org-head-chip.empty:hover { border-color: var(--accent); color: var(--accent); } .org-head-chip.acting { color: #8a5a00; background: #fff2d6; } :root[data-theme="dark"] .org-head-chip.acting { color: #f0c674; background: #3a2f10; } .org-emp.secondary { border-style: dashed; } .pos-line { font-size: 12px; line-height: 1.5; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pos-line.sec { color: var(--text-secondary); } /* ------------------------------------------------- departments modal (drag/rename) */ .dep-toolbar { display: flex; align-items: center; gap: 8px; margin: 10px 0 6px; } .dep-list { display: flex; flex-direction: column; gap: 4px; max-height: 48vh; overflow: auto; padding: 2px; } .dep-row { display: flex; align-items: flex-start; gap: 6px; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .dep-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .dep-line1, .dep-line2 { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .dep-grip { margin-top: 4px; } .dep-row.dragging { opacity: .45; } .dep-row.drop-over { border-top: 2px solid var(--accent); } .dep-grip { cursor: grab; color: var(--text-tertiary); user-select: none; font-size: 15px; padding: 0 2px; } .dep-grip:active { cursor: grabbing; } .dep-row .dep-name { flex: 1 1 220px; min-width: 140px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 7px; background: transparent; font-weight: 600; font-size: 13px; color: var(--text); } .dep-row .dep-name:hover:not(:disabled) { border-color: var(--border); background: var(--bg-hover); } .dep-row .dep-name:focus { border-color: var(--accent); background: var(--bg); outline: none; } .dep-row .dep-kind { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--bg); font-size: 11px; } .dep-row .dep-parent { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--bg); font-size: 11px; max-width: 220px; } .dep-row .dep-topic { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--bg); font-size: 11px; width: 92px; } .dep-row .dep-lbl, .dep-row .dep-cnt { font-size: 11px; white-space: nowrap; } .dep-row .dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; } /* --------------------------------------------------------- departments catalog */ .cat-list { display: flex; flex-direction: column; gap: 3px; max-height: 46vh; overflow: auto; } .cat-row { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; font-size: 13px; } .cat-row:hover { background: var(--bg-hover); } .cat-row.on { opacity: .6; cursor: default; } .cat-row .cat-name { font-weight: 500; } /* --------------------------------------- staff: unit kinds / direct reports / external */ .unit-kind { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .02em; border: 1px solid; border-radius: 6px; padding: 1px 6px; white-space: nowrap; } .org-emp-wrap { display: flex; flex-direction: column; gap: 6px; } .org-direct { margin: 2px 0 2px 22px; padding-left: 12px; border-left: 2px dashed var(--border); display: flex; flex-direction: column; gap: 6px; } .org-direct-lbl { font-size: 10px; text-transform: uppercase; letter-spacing: .03em; } .org-emp.external { border-style: dashed; background: var(--bg-hover); } .cat-group { display: flex; flex-direction: column; gap: 3px; margin-bottom: 10px; } .cat-group-head { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: var(--text-secondary); padding: 4px 2px; position: sticky; top: 0; background: var(--bg); z-index: 1; } .cat-row .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } /* каскадный выбор подразделения (цех → участок → служба) */ .dept-picker { display: flex; flex-direction: column; gap: 5px; min-width: 0; } .dept-picker .dp-level { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg); outline: none; color: var(--text); } .dept-picker .dp-level:nth-child(n+2) { margin-left: 14px; font-size: 12px; padding: 6px 8px; border-left: 2px solid var(--accent); } /* ------------------------------------------- должности и доступы в карточке */ .pos-row { display: flex; align-items: flex-start; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 5px; } .pos-slot { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; padding: 2px 7px; border-radius: 5px; white-space: nowrap; margin-top: 2px; background: var(--bg-hover); color: var(--text-secondary); } .pos-slot.primary { background: #eaf1ff; color: #1961ed; } .pos-slot.head { background: #f0eafe; color: #6d3ee0; } :root[data-theme="dark"] .pos-slot.primary { background: #1e2a44; color: #9bbcff; } :root[data-theme="dark"] .pos-slot.head { background: #271b45; color: #a98bff; } .pos-body { flex: 1; min-width: 0; font-size: 13px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; } .pos-grant { flex-basis: 100%; font-size: 11px; } /* ------------------------------------------- карточка сотрудника (профиль) */ /* Раньше это была одна длинная форма в узком окне: человека приходилось собирать глазами из полей, а правый столбец уезжал за край. Теперь сверху видно, кто это и в каком он положении, а поля разложены по вкладкам */ .modal.emp-modal { width: 880px; } .emp-hero { display: flex; gap: 18px; align-items: center; padding: 20px; background: linear-gradient(135deg, var(--accent-soft), transparent 65%); border-bottom: 1px solid var(--border); } .emp-hero-av { display: flex; flex-direction: column; align-items: center; gap: 6px; } .emp-photo-btn { cursor: pointer; font-size: 11px; color: var(--text-secondary); padding: 3px 8px; border-radius: var(--radius-sm); background: var(--bg); border: 1px solid var(--border); white-space: nowrap; } .emp-photo-btn:hover { color: var(--text); border-color: var(--border-strong); } .emp-hero-main { min-width: 0; display: flex; flex-direction: column; gap: 5px; } .emp-hero-name { font-size: 19px; font-weight: 650; line-height: 1.2; } .emp-hero-sub { font-size: 13px; color: var(--text-secondary); } .emp-hero-chips { display: flex; flex-wrap: wrap; gap: 5px; } .emp-hero-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; margin-top: 2px; font-size: 12px; color: var(--text-secondary); } .emp-hero-meta span { display: inline-flex; align-items: center; gap: 5px; } .emp-hero-meta svg { opacity: .7; } .emp-tabs { display: flex; gap: 2px; padding: 8px 16px 0; border-bottom: 1px solid var(--border); } .emp-tab { padding: 7px 12px 9px; font-weight: 500; font-size: 13px; color: var(--text-secondary); border-bottom: 2px solid transparent; margin-bottom: -1px; } .emp-tab:hover { color: var(--text); } .emp-tab.active { color: var(--accent); border-bottom-color: var(--accent); } .emp-tab .num { font-size: 10.5px; padding: 0 5px; border-radius: 8px; background: var(--bg-tertiary); color: var(--text-secondary); } .emp-pane { display: flex; flex-direction: column; gap: 12px; } /* display:flex выше перебивает браузерное [hidden] — без этой строки переключение вкладок ничего не прячет */ .emp-pane[hidden] { display: none; } /* minmax(0,…) обязателен: без него длинная строка в «Подчиняется лично» растягивала колонку, и окно ползло горизонтальной полосой */ .emp-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 14px; } .emp-grid .form-field { min-width: 0; } .emp-grid .form-field.wide { grid-column: 1 / -1; } .emp-grid input, .emp-grid select, .emp-grid textarea, .emp-grid .dept-picker { width: 100%; min-width: 0; } .field-hint { font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; } .emp-sub { font-weight: 600; font-size: 12px; color: var(--text-secondary); padding-top: 4px; border-top: 1px solid var(--border); margin-top: 2px; } .emp-note { font-size: 12px; color: var(--text-secondary); } .emp-note.lock { background: var(--bg-tertiary); border-radius: var(--radius); padding: 8px 10px; color: var(--text-secondary); } .emp-addpos { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } /* только прямой потомок: иначе растягивались и галочки внутри подписей */ .emp-addpos > input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 8px 10px; background: var(--bg); outline: none; flex: 1; min-width: 130px; } .emp-check { display: flex; gap: 6px; align-items: center; font-size: 12px; white-space: nowrap; } /* ---------------------------------------------- должностные обязанности */ .duty-form { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px; } .duty-form-foot { display: flex; align-items: center; gap: 8px; margin-top: 10px; } .duty-grp { margin-top: 10px; } .duty-grp-hd { font-weight: 600; font-size: 12px; color: var(--text-secondary); margin-bottom: 4px; } .duty-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: 6px; } .duty-main { flex: 1; min-width: 0; } /* неподписанное видно сразу: это не «когда-нибудь», а условие входа */ .duty-row.unsigned { border-color: #e5484d66; background: #e5484d0d; } .duty-name { font-weight: 600; font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } /* Экран ознакомления перекрывает всё: до согласия работать нельзя */ .duty-gate { position: fixed; inset: 0; z-index: 200; background: rgba(0, 0, 0, 0.45); display: flex; align-items: center; justify-content: center; padding: 3vh 16px; } .duty-sheet { width: 820px; max-width: 100%; max-height: 94vh; background: var(--bg); border-radius: 12px; box-shadow: var(--shadow); display: flex; flex-direction: column; } .duty-sheet-hd { display: flex; align-items: center; gap: 10px; padding: 16px 20px; border-bottom: 1px solid var(--border); } .duty-sheet-ttl { font-weight: 650; font-size: 16px; } .duty-sheet-body { padding: 18px 22px; overflow-y: auto; flex: 1; font-size: 13.5px; line-height: 1.6; } .duty-sheet-body p { margin: 0 0 8px; } .duty-sheet-body p.sp { height: 6px; margin: 0; } .duty-intro { background: var(--accent-soft); border-radius: var(--radius); padding: 8px 10px; font-size: 12px; color: var(--text-secondary); margin-bottom: 12px; } .duty-sheet-body.read .duty-intro { display: none; } /* Совмещение должностей: разделы внутри одного листа */ .duty-part { font-weight: 650; font-size: 13.5px; margin: 16px 0 8px; padding-top: 10px; border-top: 1px solid var(--border); } .duty-sheet-body > .duty-part:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; } .duty-end { margin-top: 14px; padding-top: 10px; border-top: 1px dashed var(--border); font-size: 11.5px; color: var(--text-tertiary); text-align: center; } .duty-sheet-foot { display: flex; align-items: center; gap: 10px; padding: 14px 20px; border-top: 1px solid var(--border); flex-wrap: wrap; row-gap: 8px; } .duty-ok { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .duty-ok input:disabled + span { color: var(--text-tertiary); } /* Постраничный показ: видно, где ты сейчас и сколько всего листов */ .pager { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; padding: 8px 20px; border-top: 1px solid var(--border); background: var(--bg); font-size: 12.5px; } .pg-b { min-width: 28px; padding: 4px 8px; border-radius: var(--radius-sm); color: var(--text-secondary); font-weight: 500; } .pg-b:hover:not(:disabled) { background: var(--bg-hover); color: var(--text); } .pg-b.on { background: var(--accent); color: #fff; } .pg-b:disabled { color: var(--text-tertiary); cursor: default; } .pg-dots { color: var(--text-tertiary); padding: 0 2px; } .pg-size { margin-left: 8px; padding: 4px 8px; font-size: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-secondary); outline: none; } /* таблица делит высоту с полосой листов: колонкой, без вычитания пикселей — тогда полоса всегда внизу, а прокручивается только таблица */ .content:has(> .pager) { display: flex; flex-direction: column; } .content:has(> .pager) .tbl-wrap { flex: 1; height: auto; min-height: 0; } .content:has(> .pager) .pager { flex: none; } /* Раздача холодных звонков: панель появляется, только когда что-то отмечено */ .pr-bar { display: flex; align-items: center; gap: 10px; padding: 8px 20px; background: var(--accent-soft); border-bottom: 1px solid var(--border); font-size: 13px; } .pr-pick { width: 34px; text-align: center; } .pr-pick input { cursor: pointer; } /* Забытый фильтр — частая беда: кнопка сброса должна бросаться в глаза */ .tool-btn.warn { color: #c0342b; } .tool-btn.warn:hover { background: #fde8e8; } .tool-btn.on { color: var(--accent); } /* Список покупок: длинное название товара не должно ломать строку */ .sl-item { display: block; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Покупки из 1С */ .pu-top { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 10px; border-bottom: 1px solid var(--border); font-size: 13px; } .pu-doc { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; margin-bottom: 8px; } .pu-h { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; } .pu-it { display: flex; align-items: baseline; gap: 10px; font-size: 12.5px; padding: 3px 0; } .pu-it + .pu-it { border-top: 1px solid var(--border); } .pu-n { flex: 1; min-width: 0; } /* Из чего состоит парк — второй строкой под классом */ .pk-mix { display: flex; flex-wrap: wrap; gap: 3px 8px; margin-top: 3px; font-size: 11px; color: var(--text-secondary); } .pk-k { white-space: nowrap; } /* Фильтр в шапке колонки */ .th-in { display: flex; align-items: center; gap: 4px; } .th-t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .th-f { opacity: 0; flex: none; padding: 2px; border-radius: 3px; line-height: 0; color: var(--text-tertiary); transition: opacity .12s; } table.grid thead th:hover .th-f, .th-f.on { opacity: 1; } .th-f:hover { background: var(--bg-hover); color: var(--text); } .th-f.on { color: var(--accent); } /* окно фильтра само по себе прокручивается списком, поповер — нет */ .popover:has(.cf-list) { max-height: none; overflow: visible; width: 280px; padding: 0; } .cf-head { font-weight: 600; font-size: 12px; padding: 8px 10px 4px; } .cf-q { width: calc(100% - 16px); margin: 0 8px 6px; padding: 6px 8px; font-size: 12.5px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); outline: none; } .cf-acts { display: flex; gap: 10px; padding: 0 10px 6px; } .cf-acts button { font-size: 11.5px; color: var(--accent); } .cf-list { max-height: 260px; overflow-y: auto; padding: 0 4px; } .cf-row { display: flex; align-items: center; gap: 8px; padding: 5px 6px; font-size: 12.5px; border-radius: var(--radius-sm); cursor: pointer; } .cf-row:hover { background: var(--bg-hover); } .cf-n { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .cf-foot { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-top: 1px solid var(--border); margin-top: 4px; } /* Сроки задач: просроченное горит всегда, а не только когда открыл вкладку */ /* Окно одной карточки: меню и список ни к чему, панель занимает всё окно */ body.card-only .app { display: none; } body.card-only .overlay { position: static; background: none; opacity: 1; pointer-events: auto; } /* dvh, а не vh: на телефоне и в окне с выезжающей панелью браузера vh считается по высоте без неё, и нижняя часть карточки уходит за край */ body.card-only .panel { width: 100vw; max-width: 100vw; height: 100vh; box-shadow: none; transform: none; } @supports (height: 100dvh) { body.card-only .panel { height: 100dvh; } } /* В узкой боковой панели прокручивается вся середина разом — там иначе не уместить. В отдельном окне так нельзя: колонка полей и строка вкладок уезжают наверх вместе с содержимым, и половины карточки просто не видно. Поэтому здесь каждая колонка листается сама, а вкладки стоят на месте. */ body.card-only .panel-body { overflow: hidden; min-height: 0; } body.card-only .panel-fields, body.card-only .panel-side { height: 100%; overflow-y: auto; overscroll-behavior: contain; } /* Полос прокрутки не рисуем: их получилось бы две сразу, и лист выглядит расчерченным. Колесо и тачпад работают как обычно — там, где стоит курсор */ body.card-only .panel-fields, body.card-only .panel-side { scrollbar-width: none; } body.card-only .panel-fields::-webkit-scrollbar, body.card-only .panel-side::-webkit-scrollbar { width: 0; height: 0; } /* Таблицы досье в узкой панели прячутся в окошко на 320 пикселей со своей прокруткой — иначе они съедают всю панель. В полном окне места хватает: пусть растут во всю длину, чтобы на листе была одна прокрутка, а не вложенные друг в друга */ body.card-only .ds-tbl { max-height: none; overflow: visible; } body.card-only .side-tabs { position: sticky; top: 0; z-index: 2; background: var(--bg); margin: 0 0 12px; padding: 2px 0 0; } /* в широком окне полям можно дать больше места, чем в узкой боковой панели: адрес и название фирмы там не влезали и обрывались на полуслове */ body.card-only .panel-fields { width: clamp(340px, 40%, 560px); min-width: 340px; flex: 0 0 auto; } .task-tabs { margin-right: 10px; padding-right: 10px; border-right: 1px solid var(--border); } .view-tab.late { color: #c0342b; } .view-tab.late .grp-count { background: #fde8e8; color: #c0342b; } .view-tab.late.active { background: #fde8e8; } .akb-life { border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; } .akb-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 12.5px; flex-wrap: wrap; } .akb-row + .akb-row { border-top: 1px solid var(--border); } .akb-n { flex: 1; min-width: 150px; } .akb-row input { width: 74px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; background: var(--bg); outline: none; } .ds-base { font-size: 11px; margin-top: 10px; padding-top: 8px; border-top: 1px solid var(--border); } .ds-diff { border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 10px; margin-bottom: 6px; font-size: 12.5px; } .ds-diff-h { font-weight: 600; margin-bottom: 3px; } .res-hint { display: flex; align-items: center; gap: 5px; font-size: 11px; margin-top: 4px; } .res-hint svg { opacity: .7; } .pos-hist-box { font-size: 12px; border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .pos-hist-box summary { cursor: pointer; font-weight: 600; font-size: 12px; } .pos-hist { display: flex; flex-wrap: wrap; gap: 4px 12px; padding: 5px 0; border-top: 1px solid var(--border); font-size: 12px; } .pos-hist .mono { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-secondary); } .dismiss-warn { background: #fbe9e8; border: 1px solid #f3c9c6; border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #8a2b24; } .dismiss-warn ul { margin: 6px 0 0; padding-left: 18px; line-height: 1.6; } :root[data-theme="dark"] .dismiss-warn { background: #3a1c1c; border-color: #5d2c2a; color: #f0b6b2; } .btn-ghost.danger, .btn-primary.danger { color: #c0342b; } .btn-primary.danger { background: #c0342b; color: #fff; border-color: #c0342b; } /* ------------------------------------- права: флаги отдела, просьбы, пауза */ .dep-flag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--text-secondary); white-space: nowrap; cursor: pointer; } .dep-flag input { margin: 0; } .req-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: #eaf1ff; border: 1px solid #cddcff; border-radius: 8px; padding: 10px 12px; font-size: 13px; color: #1a3a7a; margin-bottom: 12px; } .req-bar.declined { background: var(--bg-hover); border-color: var(--border); color: var(--text-secondary); } :root[data-theme="dark"] .req-bar { background: #1a2540; border-color: #2f4372; color: #9bbcff; } .emp-paused { border-color: #c0342b !important; } .chip.paused { background: #fde8e8; color: #c0342b; } :root[data-theme="dark"] .chip.paused { background: #3a1c1c; color: #f08a86; } /* ------------------------------------------------------ дни рождения */ .bday-list { display: flex; flex-direction: column; gap: 6px; max-width: 640px; } .bday-row { display: flex; align-items: center; gap: 12px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; } .bday-row:hover { border-color: var(--accent); background: var(--bg-hover); } .bday-row.soon { border-color: #f0c674; background: #fff9ec; } :root[data-theme="dark"] .bday-row.soon { border-color: #6b5420; background: #2a2410; } .bday-info { flex: 1; min-width: 0; } .bday-name { font-size: 14px; font-weight: 600; } .bday-when { text-align: right; white-space: nowrap; } .bday-date { font-size: 15px; font-weight: 700; font-variant-numeric: tabular-nums; } /* ------------------------------------------------- поддержка: вкладки, ввод, подсказки */ .support-panel { max-height: min(560px, calc(100vh - 120px)); } .sup-tabs { display: flex; gap: 2px; padding: 6px 8px 0; border-bottom: 1px solid var(--border); } .sup-tab { flex: 1; padding: 7px 6px; font-size: 11.5px; font-weight: 600; border-radius: 7px 7px 0 0; color: var(--text-secondary); background: transparent; border: none; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sup-tab:hover { background: var(--bg-hover); } .sup-tab.active { color: var(--accent); background: var(--bg-hover); } .sup-dot { display: inline-block; min-width: 16px; padding: 0 5px; border-radius: 8px; background: var(--danger, #c0342b); color: #fff; font-size: 10px; line-height: 16px; } /* ввод: textarea растёт, длинный текст виден целиком */ .support-input { align-items: flex-end; } .support-input textarea { flex: 1; min-width: 0; resize: none; overflow-y: auto; max-height: 110px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 13px; line-height: 1.4; } .support-input textarea:focus { outline: none; border-color: var(--accent); } .sup-clip, .sup-bell { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 8px; border: 1px solid var(--border); background: var(--bg); color: var(--text-secondary); cursor: pointer; flex-shrink: 0; font-size: 15px; } .sup-clip:hover, .sup-bell:hover { border-color: var(--accent); color: var(--accent); } .support-foot { padding: 0 10px 8px; text-align: right; } .sup-link { background: none; border: none; color: var(--text-tertiary); font-size: 11px; cursor: pointer; text-decoration: underline; } .sup-link:hover { color: var(--accent); } .support-fab.ringing { animation: sup-ring .5s ease-in-out 6; } @keyframes sup-ring { 0%, 100% { transform: rotate(0); } 25% { transform: rotate(-14deg); } 75% { transform: rotate(14deg); } } @media (prefers-reduced-motion: reduce) { .support-fab.ringing { animation: none; outline: 3px solid var(--accent); } } .sup-file { display: inline-flex; align-items: center; gap: 5px; margin-top: 5px; font-size: 11.5px; text-decoration: underline; color: inherit; opacity: .9; } .sup-thread { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; } .sup-thread:hover { border-color: var(--accent); background: var(--bg-hover); } .sup-thread.waiting { border-color: #f0c674; background: #fff9ec; } :root[data-theme="dark"] .sup-thread.waiting { border-color: #6b5420; background: #2a2410; } .sup-thread-n { font-size: 13px; font-weight: 600; } /* оценка обслуживания */ .sup-rate { border: 1px solid var(--border); border-radius: 10px; padding: 12px; display: flex; flex-direction: column; gap: 8px; background: var(--bg-hover); } .sup-rate-t { font-size: 12.5px; font-weight: 600; } .sup-stars { display: flex; gap: 4px; } .sup-stars button { background: none; border: none; font-size: 22px; line-height: 1; cursor: pointer; color: #e0a35a; padding: 0 2px; } .sup-rate input { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font-size: 12px; } .sup-rate-act { display: flex; gap: 6px; justify-content: flex-end; } /* контекстные подсказки */ .help-hint { font-size: 11.5px; padding: 2px 2px 6px; line-height: 1.45; } .help-sec { margin-bottom: 10px; } .help-sec-t { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-tertiary); padding: 4px 2px; } .help-q { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 4px; background: var(--bg); } .help-q summary { cursor: pointer; padding: 8px 10px; font-size: 12.5px; font-weight: 500; } .help-q summary::marker { color: var(--text-tertiary); } .help-q div { padding: 0 10px 9px; font-size: 12px; line-height: 1.5; color: var(--text-secondary); } /* ------------------------------------------ поддержка: список обращений */ .support-head .sup-back { margin-right: 2px; transform: rotate(90deg); } .sup-conv { padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; cursor: pointer; background: var(--bg); } .sup-conv:hover { border-color: var(--accent); background: var(--bg-hover); } .sup-conv.done { opacity: .72; } .sup-conv.waiting { border-color: #f0c674; background: #fff9ec; } :root[data-theme="dark"] .sup-conv.waiting { border-color: #6b5420; background: #2a2410; } .sup-conv-top { display: flex; align-items: baseline; gap: 8px; } .sup-conv-s { flex: 1; min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sup-conv-st { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .03em; color: var(--text-tertiary); white-space: nowrap; } .sup-conv.waiting .sup-conv-st { color: #b76a10; } .sup-conv-b { font-size: 11px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sup-closed-bar { padding: 7px 12px; font-size: 11.5px; background: var(--bg-hover); border-bottom: 1px solid var(--border); color: var(--text-secondary); } .sup-stars-ro { color: #e0a35a; letter-spacing: 1px; } .sup-sys { align-self: center; font-size: 11px; color: var(--text-tertiary); background: var(--bg-hover); border-radius: 10px; padding: 4px 10px; text-align: center; } .support-foot.new { text-align: center; padding: 10px; border-top: 1px solid var(--border); } .sup-new { width: 100%; justify-content: center; display: flex; align-items: center; gap: 6px; } .sup-msg.ping .sup-bubble { outline: 2px dashed #e0a35a; } .sup-bell.cooling { font-size: 11px; font-weight: 600; font-variant-numeric: tabular-nums; opacity: .65; cursor: default; } /* одна кнопка-переключатель «подсказки ⇄ админ» */ .sup-swap { display: flex; align-items: center; justify-content: center; gap: 7px; width: 100%; padding: 9px 10px; font-size: 12.5px; font-weight: 600; cursor: pointer; color: var(--accent); background: var(--bg-hover); border: none; border-bottom: 1px solid var(--border); } .sup-swap:hover { background: var(--bg); } /* полоска о вызове прямо в окне разговора */ .sup-callbar { padding: 7px 12px; font-size: 11.5px; background: #fff9ec; color: #8a5a00; border-top: 1px solid #f0dcb4; font-variant-numeric: tabular-nums; } :root[data-theme="dark"] .sup-callbar { background: #2a2410; color: #e0b84a; border-top-color: #6b5420; } /* -------------------------------------------------------------------- KPI */ .kpi-area { margin-bottom: 14px; } .kpi-area-t { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--text-secondary); padding: 5px 2px; } .kpi-row { border: 1px solid var(--border); border-radius: 9px; padding: 8px 10px; margin-bottom: 5px; background: var(--bg); } .kpi-row.off { opacity: .55; } .kpi-main { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .kpi-name { flex: 1 1 220px; min-width: 140px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 7px; background: transparent; font-weight: 600; font-size: 13px; color: var(--text); } .kpi-name:hover:not(:disabled) { border-color: var(--border); background: var(--bg-hover); } .kpi-name:focus { border-color: var(--accent); background: var(--bg); outline: none; } .kpi-dir { font-size: 14px; font-weight: 700; color: var(--accent); width: 16px; text-align: center; } .kpi-target, .kpi-weight { width: 76px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--bg); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; } .kpi-weight { width: 58px; } .kpi-unit { font-size: 11px; color: var(--text-tertiary); min-width: 32px; } .kpi-asg { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--border); } .kpi-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: var(--bg-hover); color: var(--text-secondary); cursor: pointer; } .kpi-chip:hover { background: #fde8e8; color: #c0342b; } :root[data-theme="dark"] .kpi-chip:hover { background: #3a1c1c; color: #f08a86; } .kpi-add-asg { font-size: 11px; color: var(--accent); background: none; border: 1px dashed var(--border); border-radius: 10px; padding: 2px 9px; cursor: pointer; } .kpi-add-asg:hover { border-color: var(--accent); } .kpi-tpls { display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 7px; } .kpi-tpl { display: flex; flex-direction: column; gap: 2px; align-items: flex-start; text-align: left; border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; cursor: pointer; background: var(--bg); font-size: 12.5px; color: var(--text); } .kpi-tpl:hover { border-color: var(--accent); background: var(--bg-hover); } .kpi-tpl .muted { font-size: 11px; } /* карточка KPI сотрудника */ .kpic-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .kpic-period { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; background: var(--bg); color: var(--text); font-size: 12.5px; } .kpic-total { font-size: 13px; font-weight: 700; padding: 4px 11px; border-radius: 11px; background: var(--bg-hover); color: var(--text); } .kpic-total.green { background: #e6f6ec; color: #1a7f42; } .kpic-total.orange { background: #fff2e0; color: #a35b00; } .kpic-total.red { background: #fdeaea; color: #c0342b; } :root[data-theme="dark"] .kpic-total.green { background: #16301f; color: #64c98a; } :root[data-theme="dark"] .kpic-total.orange { background: #33250f; color: #e0a94a; } :root[data-theme="dark"] .kpic-total.red { background: #341a19; color: #f08a86; } .kpic-role { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; background: var(--bg); } .kpic-role-h { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 6px; } .kpic-role-t { font-weight: 700; font-size: 13px; } .kpic-table { width: 100%; border-collapse: collapse; font-size: 12.5px; } .kpic-table th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); font-weight: 700; padding: 4px 6px; border-bottom: 1px solid var(--border); } .kpic-table td { padding: 5px 6px; border-bottom: 1px solid var(--border); } .kpic-table tr:last-child td { border-bottom: none; } .kpic-table .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; } .kpic-pay { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); } .kpic-pay-h { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-secondary); margin-bottom: 5px; } .kpic-pay-g { display: grid; grid-template-columns: max-content 1fr; gap: 3px 14px; font-size: 12.5px; font-variant-numeric: tabular-nums; } .kpic-pay-g span { color: var(--text-secondary); } .kpic-pay-total { font-size: 13.5px; } .kpic-grand { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg-hover); font-size: 13px; margin-bottom: 6px; } .kpic-grand b { margin-left: auto; font-size: 15px; font-variant-numeric: tabular-nums; } .kpic-rev { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--bg); } .kpic-rev-h { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } .kpic-rev-sum { font-size: 12.5px; line-height: 1.5; } .kpic-rev-l { margin: 6px 0 0; padding-left: 18px; font-size: 12.5px; line-height: 1.55; } .kpic-rev-l li.positive { list-style: '+ '; } .kpic-rev-l li.negative { list-style: '\2212 '; } .kpic-rev-a { margin-top: 8px; padding-top: 8px; border-top: 1px dashed var(--border); font-size: 12px; } .kpic-table td.money { font-weight: 600; } .kpic-pay-line { font-size: 12.5px; line-height: 1.5; margin-bottom: 6px; padding: 6px 8px; border-radius: 8px; background: var(--bg-hover); font-variant-numeric: tabular-nums; } .kpic-chg { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px; margin-bottom: 10px; font-size: 12px; } .kpic-chg summary { cursor: pointer; color: var(--text-secondary); font-weight: 600; } .kpic-chg-r { padding: 4px 0; border-top: 1px solid var(--border); margin-top: 4px; font-variant-numeric: tabular-nums; } .kpic-chg-r s { color: var(--text-tertiary); } /* история изменений по полям */ .fh-line { font-size: 10.5px; color: var(--text-tertiary); margin-top: 3px; line-height: 1.4; } .fh-line s { opacity: .8; } .fh-pair { font-size: 12px; margin: 2px 0; font-variant-numeric: tabular-nums; } .fh-pair s { color: var(--text-tertiary); } .fh-filters { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 10px; } .fh-filters select, .fh-filters input { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; background: var(--bg); color: var(--text); font-size: 12.5px; } .fh-table { font-size: 12.5px; } .fh-table td { vertical-align: top; } .fh-table .mono { white-space: nowrap; font-variant-numeric: tabular-nums; } /* ------------------------------------------------ воронка: условия и сроки */ .stage-row2 { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; margin-bottom: 6px; background: var(--bg); } .sr-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .sr-line .dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .sr-line .stage-name { flex: 1 1 180px; min-width: 130px; border: 1px solid transparent; border-radius: var(--radius-sm); padding: 5px 7px; background: transparent; font-weight: 600; font-size: 13px; color: var(--text); } .sr-line .stage-name:hover { border-color: var(--border); background: var(--bg-hover); } .sr-line .stage-name:focus { border-color: var(--accent); background: var(--bg); outline: none; } .sr-line .stage-color, .sr-line .stage-owner { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--bg); font-size: 11px; color: var(--text); } .sr-line .stage-sla { width: 56px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 4px 6px; background: var(--bg); font-size: 11px; color: var(--text); font-variant-numeric: tabular-nums; } .sr-req { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; padding-top: 7px; border-top: 1px dashed var(--border); font-size: 11px; } .req-chip { font-size: 11px; padding: 2px 8px; border-radius: 10px; background: #eaf1ff; color: #1961ed; cursor: pointer; } .req-chip:hover { background: #fde8e8; color: #c0342b; } :root[data-theme="dark"] .req-chip { background: #1e2a44; color: #9bbcff; } :root[data-theme="dark"] .req-chip:hover { background: #3a1c1c; color: #f08a86; } .req-add { border: 1px dashed var(--border); border-radius: 10px; padding: 2px 7px; background: transparent; font-size: 11px; color: var(--accent); } .kanban-card.overdue { border-color: #f0c674; } .kc-overdue { margin-top: 6px; font-size: 10.5px; font-weight: 600; color: #b76a10; background: #fff9ec; border-radius: 6px; padding: 2px 7px; display: inline-block; } :root[data-theme="dark"] .kanban-card.overdue { border-color: #6b5420; } :root[data-theme="dark"] .kc-overdue { background: #2a2410; color: #e0b84a; } /* -------------------------------------------------------------- воронки */ .pipe-pick { padding: 6px 10px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text); font-size: 12.5px; font-weight: 500; max-width: 190px; } .pipe-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 6px; } .pipe-row { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .pipe-row.on { border-color: var(--accent); background: var(--bg-hover); } .pipe-pickbtn { flex: 1; text-align: left; background: none; border: none; cursor: pointer; font-size: 13px; font-weight: 600; color: var(--text); padding: 0; } .pipe-row.on .pipe-pickbtn { color: var(--accent); } .pipe-add { display: flex; gap: 6px; align-items: center; margin-top: 2px; } .pipe-add input { flex: 1; border: 1px dashed var(--border); border-radius: 8px; padding: 7px 10px; background: transparent; color: var(--text); font-size: 12.5px; } /* -------------------------------------------------- лист диагностики */ .di-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .di-prog { font-family: ui-monospace, monospace; font-size: 13px; font-weight: 700; padding: 2px 9px; border-radius: 10px; background: var(--ok-bg, #e5f5ec); color: #1a7f4b; } .di-prog.warn { background: #fbf0e2; color: #b76a10; } :root[data-theme="dark"] .di-prog { background: #123526; color: #4fc487; } :root[data-theme="dark"] .di-prog.warn { background: #3a2a12; color: #e0a35a; } .di-missing, .di-returned { font-size: 12px; border-radius: 8px; padding: 8px 11px; } .di-missing { background: #fbf0e2; color: #8a5a00; } .di-returned { background: #fde8e8; color: #8a2b24; } :root[data-theme="dark"] .di-missing { background: #3a2a12; color: #e0b84a; } :root[data-theme="dark"] .di-returned { background: #3a1c1c; color: #f0b6b2; } .di-list { display: flex; flex-direction: column; gap: 4px; } .di-row { display: grid; grid-template-columns: minmax(0, 1fr) 210px 46px; gap: 10px; align-items: center; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); } .di-row.bad { border-color: #e8a9a5; background: #fdf4f4; } :root[data-theme="dark"] .di-row.bad { border-color: #5d2c2a; background: #241416; } .di-q { font-size: 13px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .di-crit { width: 16px; height: 16px; border-radius: 50%; background: #c0342b; color: #fff; font-size: 11px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .di-in { width: 100%; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 5px 8px; background: var(--bg); color: var(--text); font-size: 12.5px; } .di-in.bad { border-color: #c0342b; color: #c0342b; font-weight: 600; } .di-text { resize: vertical; font-family: inherit; } .di-num { display: flex; align-items: center; gap: 6px; } .di-num .di-in { width: 92px; } .di-norm { font-size: 10.5px; color: var(--text-tertiary); white-space: nowrap; } .di-bool { display: flex; gap: 4px; } .di-yn { flex: 1; padding: 5px 8px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--bg); color: var(--text-secondary); font-size: 12px; cursor: pointer; } .di-yn.on { background: #e5f5ec; border-color: #1a7f4b; color: #1a7f4b; font-weight: 600; } .di-yn.no.on { background: #fde8e8; border-color: #c0342b; color: #c0342b; } :root[data-theme="dark"] .di-yn.on { background: #123526; color: #4fc487; } :root[data-theme="dark"] .di-yn.no.on { background: #3a1c1c; color: #f08a86; } .di-ph { display: flex; align-items: center; gap: 4px; justify-content: flex-end; } .di-up { cursor: pointer; font-size: 15px; opacity: .55; } .di-up:hover, .di-up.done { opacity: 1; } .di-hasph { text-decoration: none; font-size: 15px; } .di-ro { font-size: 12.5px; color: var(--text-secondary); } .di-cells { border: 1px solid var(--border); border-radius: 8px; padding: 8px 12px; } .di-cells summary { cursor: pointer; font-size: 12.5px; font-weight: 600; } .di-ctab { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12px; } .di-ctab th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); padding: 4px 6px; } .di-ctab td { padding: 2px 6px; border-top: 1px solid var(--border); } .di-cell { width: 78px; border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 3px 6px; background: var(--bg); color: var(--text); font-size: 12px; font-variant-numeric: tabular-nums; } @media (max-width: 700px) { .di-row { grid-template-columns: minmax(0, 1fr); } } /* ------------------------------------------------------------ наряд в цеху */ .wo-tot { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; margin-bottom: 4px; } .wo-kpi { background: var(--bg); padding: 9px 10px; display: flex; flex-direction: column; gap: 1px; } .wo-kpi .n { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; } .wo-kpi .n.over, .wo-kpi .n.bad { color: #c0342b; } .wo-kpi .l { font-size: 10.5px; color: var(--text-tertiary); } .wo-head { display: flex; align-items: center; gap: 10px; font-size: 12px; padding: 4px 0 6px; } .wo-list { display: flex; flex-direction: column; gap: 5px; } .wo-op { border: 1px solid var(--border); border-radius: 8px; padding: 8px 11px; background: var(--bg); } .wo-op.accepted { opacity: .72; border-color: #b6dcc6; } .wo-op.returned { border-color: #e8a9a5; } .wo-op.in_progress { border-color: var(--accent); } :root[data-theme="dark"] .wo-op.accepted { border-color: #2a5540; } :root[data-theme="dark"] .wo-op.returned { border-color: #5d2c2a; } .wo-op-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .wo-name { font-size: 13px; flex: 1; min-width: 120px; } .wo-who { font-size: 11.5px; } .wo-time { font-size: 12px; font-variant-numeric: tabular-nums; white-space: nowrap; } .wo-time.over { color: #c0342b; font-weight: 600; } .wo-st { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 2px 7px; border-radius: 5px; background: var(--bg-hover); color: var(--text-secondary); white-space: nowrap; } .wo-st.in_progress { background: #eaf1ff; color: #1961ed; } .wo-st.done { background: #fbf0e2; color: #b76a10; } .wo-st.accepted { background: #e5f5ec; color: #1a7f4b; } .wo-st.returned { background: #fde8e8; color: #c0342b; } :root[data-theme="dark"] .wo-st.in_progress { background: #1e2a44; color: #9bbcff; } :root[data-theme="dark"] .wo-st.done { background: #3a2a12; color: #e0a35a; } :root[data-theme="dark"] .wo-st.accepted { background: #123526; color: #4fc487; } :root[data-theme="dark"] .wo-st.returned { background: #3a1c1c; color: #f08a86; } .wo-ret { font-size: 11.5px; color: #b76a10; margin-top: 5px; } .wo-acts { display: flex; align-items: center; gap: 6px; margin-top: 7px; } .btn-ghost.sm, .btn-primary.sm { padding: 4px 10px; font-size: 11.5px; } @media (max-width: 700px) { .wo-tot { grid-template-columns: repeat(3, minmax(0, 1fr)); } } /* ---------------------------------------------- парк АКБ и паспорт актива */ .scroller { overflow-x: auto; max-width: 100%; } .park-top { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px; background: var(--border); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; margin-bottom: 14px; } .park-kpi { background: var(--bg); padding: 11px 12px; display: flex; flex-direction: column; gap: 2px; } .park-kpi .n { font-size: 21px; font-weight: 700; font-variant-numeric: tabular-nums; } .park-kpi .l { font-size: 10.5px; color: var(--text-tertiary); } .park-kpi.g .n { color: #1a7f4b; } .park-kpi.y .n { color: #b76a10; } .park-kpi.r .n { color: #c0342b; } .park-grp { margin-bottom: 16px; } .park-grp-t { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; } .park-a { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 8px 11px; font-size: 12.5px; margin-bottom: 4px; } .park-a:hover { background: var(--bg-hover); } .park-a.red { border-color: #e8a9a5; } .park-a.yellow { border-color: #e6c88a; } :root[data-theme="dark"] .park-a.red { border-color: #5d2c2a; } :root[data-theme="dark"] .park-a.yellow { border-color: #5a4520; } .park-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; background: var(--border); } .park-dot.green { background: #1a7f4b; } .park-dot.yellow { background: #d79a25; } .park-dot.red { background: #c0342b; } .ap-top { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; } .ap-health { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; padding: 3px 9px; border-radius: 6px; background: var(--bg-hover); color: var(--text-secondary); } .ap-health.green { background: #e5f5ec; color: #1a7f4b; } .ap-health.yellow { background: #fbf0e2; color: #b76a10; } .ap-health.red { background: #fde8e8; color: #c0342b; } :root[data-theme="dark"] .ap-health.green { background: #123526; color: #4fc487; } :root[data-theme="dark"] .ap-health.yellow { background: #3a2a12; color: #e0a35a; } :root[data-theme="dark"] .ap-health.red { background: #3a1c1c; color: #f08a86; } /* не сетка: при неполном последнем ряду сетка оставляла пустые серые клетки */ .ap-spec { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 6px; } .ap-cell { background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 7px 10px; display: flex; flex-direction: column; gap: 1px; flex: 1 1 150px; min-width: 0; max-width: 100%; } .ap-cell .k { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .ap-cell .v { font-size: 12.5px; overflow-wrap: anywhere; } .ap-list { display: flex; flex-direction: column; gap: 4px; } .ap-ev { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 12.5px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 7px 10px; } .ap-ev[data-diag] { cursor: pointer; } .ap-ev[data-diag]:hover { background: var(--bg-hover); } .ap-date { font-size: 11.5px; color: var(--text-tertiary); white-space: nowrap; } .ap-t { flex: 1; min-width: 110px; } .ap-tab { width: 100%; border-collapse: collapse; font-size: 12px; } .ap-tab th { text-align: left; font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--text-tertiary); padding: 2px 8px 4px; white-space: nowrap; } .ap-tab td { padding: 3px 8px; border-top: 1px solid var(--border); white-space: nowrap; } .ap-tab td.bad { color: #c0342b; font-weight: 600; } @media (max-width: 700px) { .park-top { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ------------------------------------------------------------- судьба КП */ .q-bar { border: 1px solid var(--border); border-radius: 10px; background: var(--bg); padding: 10px 12px; margin-bottom: 12px; display: flex; flex-direction: column; gap: 6px; } .q-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; } .q-line .muted.bad { color: #c0342b; font-weight: 600; } .q-seen { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-tertiary); } .q-seen.yes { color: #1a7f4b; font-weight: 600; } .q-why { font-size: 12px; color: #c0342b; } .q-acts { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; } .pick-list { display: flex; flex-direction: column; gap: 4px; } .pick-row { text-align: left; padding: 9px 12px; font-size: 13px; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; } .pick-row:hover { background: var(--bg-hover); border-color: var(--accent); } /* ------------------------------------------------------- договоры на ТО */ .ct-grp { margin-bottom: 16px; } .ct-grp-t { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; display: flex; align-items: center; gap: 7px; } .ct-grp.hot .ct-grp-t { color: #b76a10; } .ct-grp.off { opacity: .72; } .ct-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 8px 11px; font-size: 12.5px; margin-bottom: 4px; } .ct-row:hover { background: var(--bg-hover); } .ct-row.dead { border-color: #e8a9a5; } :root[data-theme="dark"] .ct-row.dead { border-color: #5d2c2a; } .ct-co { color: var(--text-secondary); } .ct-left { font-size: 11.5px; color: #b76a10; font-weight: 600; white-space: nowrap; } .ct-left.hot { color: #c0342b; } .ct-sum { font-variant-numeric: tabular-nums; white-space: nowrap; } .ca-list { display: flex; flex-direction: column; gap: 4px; max-height: 46vh; overflow-y: auto; } .ca-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 7px 10px; font-size: 12.5px; } .ca-row:hover { background: var(--bg-hover); } /* ------------------------------------------- отдать документ клиенту */ .ds-top { display: flex; gap: 14px; align-items: flex-start; flex-wrap: wrap; margin-bottom: 12px; } .ds-qr { flex: 0 0 auto; width: 168px; height: 168px; background: #fff; border: 1px solid var(--border); border-radius: 10px; padding: 6px; box-sizing: border-box; } .ds-qr svg { width: 100%; height: 100%; display: block; } .ds-side { flex: 1 1 220px; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .ds-link { display: flex; gap: 6px; align-items: center; } .ds-link input { flex: 1; min-width: 0; font-size: 11.5px; font-family: ui-monospace, monospace; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); } .ds-acts { display: flex; gap: 7px; flex-wrap: wrap; margin-bottom: 4px; } .ds-mail { display: flex; flex-direction: column; gap: 7px; } .ds-mail input, .ds-mail textarea { padding: 8px 10px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; } .ds-chk { display: flex; align-items: center; gap: 7px; font-size: 12.5px; cursor: pointer; } /* ------------------------------------------------ позиции документа */ .di-row { display: flex; flex-direction: column; gap: 4px; padding: 7px 0; border-bottom: 1px solid var(--border); } .di-row input { border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; padding: 3px 6px; } .di-row input:hover { border-color: var(--border); } .di-row input:focus { border-color: var(--accent); background: var(--bg); outline: none; } .di-name { width: 100%; } .di-nums { display: flex; align-items: center; gap: 5px; } .di-qty { width: 58px; text-align: right; } .di-price { width: 104px; text-align: right; font-variant-numeric: tabular-nums; } .di-sum { margin-left: auto; font-variant-numeric: tabular-nums; white-space: nowrap; } /* ------------------------------------------------ редактор бланка */ .bl-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 10px; } .bl-f { display: flex; flex-direction: column; gap: 3px; font-size: 12px; min-width: 0; } .bl-f.row { flex-direction: row; align-items: center; gap: 7px; } .bl-f > span { color: var(--text-tertiary); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; } .bl-f input, .bl-f textarea, .bl-f select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; width: 100%; box-sizing: border-box; } .bl-f input[type="color"] { padding: 2px; height: 30px; } .bl-f input[type="checkbox"] { width: auto; } .bl-img { display: flex; align-items: center; gap: 8px; } .bl-img img { max-height: 34px; max-width: 130px; background: #fff; border: 1px solid var(--border); border-radius: 6px; padding: 2px; } .bl-secs { display: flex; flex-direction: column; gap: 5px; } .bl-sec { border: 1px solid var(--border); border-radius: 9px; background: var(--bg); } .bl-sec.off { opacity: .55; } .bl-sec.dragging { opacity: .4; border-color: var(--accent); } .bl-hd { display: flex; align-items: center; gap: 8px; padding: 7px 10px; font-size: 12.5px; } .bl-drag { cursor: grab; color: var(--text-tertiary); display: flex; } .bl-body { display: flex; flex-direction: column; gap: 8px; padding: 0 10px 10px; } .bl-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 6px; } .bl-col { border: 1px solid var(--border); border-radius: 7px; padding: 6px 8px; font-size: 12px; } .bl-col.on { border-color: var(--accent); } .bl-col label { display: flex; align-items: center; gap: 6px; cursor: pointer; } .bl-col input[type="text"], .bl-col input:not([type]) { margin-top: 5px; width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 11.5px; box-sizing: border-box; } .bl-add { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 10px; } .bl-add select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; } /* -------------------------------------------------- документооборот */ .doc-bar { border-left: 3px solid var(--accent); } .dm-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 8px 11px; font-size: 12.5px; margin-bottom: 4px; } .dm-row:hover { background: var(--bg-hover); } .dm-co { color: var(--text-secondary); } /* ------------------------------------------------------- абзацы бланка */ .bl-paras { display: flex; flex-direction: column; gap: 6px; } .bl-para { display: flex; align-items: flex-start; gap: 6px; } .bl-pnum { flex: 0 0 18px; text-align: right; color: var(--text-tertiary); font-size: 11px; padding-top: 8px; font-variant-numeric: tabular-nums; } .bl-para textarea { flex: 1; min-width: 0; } .bl-pbtns { display: flex; flex-direction: column; gap: 1px; } .bl-pbtns .icon-btn { padding: 2px; } .bl-pbtns .icon-btn[disabled] { opacity: .3; pointer-events: none; } /* ------------------------------------------------ комплект документов */ .pk-list { display: flex; flex-direction: column; gap: 3px; margin-bottom: 8px; } .pk-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; cursor: pointer; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); padding: 6px 9px; } .pk-row.fixed { cursor: default; } .pk-row:hover { background: var(--bg-hover); } .pk-warn { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #b76a10; margin-bottom: 6px; } .pk-ok { color: #1a7f4b; font-size: 12px; } .pk-err { color: #c0342b; font-size: 11.5px; } .file-meta { display: flex; align-items: center; gap: 10px; padding: 0 0 8px 26px; flex-wrap: wrap; } .file-meta select { padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font: inherit; font-size: 11.5px; } /* ------------------------------------------- цвет подразделения в чате */ /* Бейдж канала в цвете своего подразделения: отдел виден с одного взгляда, а фон переписки при этом не трогаем. */ .cb-badge.dept { color: var(--dept); background: color-mix(in srgb, var(--dept) 12%, var(--bg)); border-color: color-mix(in srgb, var(--dept) 35%, transparent); } :root[data-theme="dark"] .cb-badge.dept { background: color-mix(in srgb, var(--dept) 26%, var(--bg)); } .chat-msg.mine .cb-badge.dept { color: #fff; background: rgba(255, 255, 255, .25); border-color: rgba(255, 255, 255, .4); } .chan-dot { width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto; } /* Фон сообщения остаётся прежним — меняется только подпись: из какого человек подразделения. Цветная точка, чтобы отдел читался с одного взгляда. */ .cb-dept { display: inline-flex; align-items: center; gap: 4px; margin-left: 7px; font-size: 10px; font-weight: 600; color: var(--dept); text-transform: uppercase; letter-spacing: .03em; } .cb-dept::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--dept); flex: 0 0 auto; } /* на своём сообщении фон акцентный — подпись отдела делаем читаемой на нём */ .chat-msg.mine .cb-dept { color: rgba(255, 255, 255, .92); } .chat-msg.mine .cb-dept::before { background: rgba(255, 255, 255, .92); } .cb-quote { border-left: 2px solid var(--accent); padding: 4px 8px; margin-bottom: 5px; background: rgba(127, 127, 127, .14); border-radius: 0 7px 7px 0; cursor: pointer; } .cb-quote:hover { background: rgba(127, 127, 127, .22); } .chat-msg.mine .cb-quote { border-left-color: rgba(255, 255, 255, .7); background: rgba(255, 255, 255, .16); } /* на акцентном фоне цитата тоже должна читаться */ .chat-msg.mine .cb-quote-h { color: rgba(255, 255, 255, .78); } .chat-msg.mine .cb-quote-h b, .chat-msg.mine .cb-quote-text { color: rgba(255, 255, 255, .92); } .cb-quote-h { display: flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--text-tertiary); margin-bottom: 2px; } .cb-quote-h b { color: var(--text-secondary); font-weight: 600; } .cb-quote-text { font-size: 11.5px; color: var(--text-secondary); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .chat-act { display: flex; flex-direction: column; gap: 3px; padding: 0 4px; } .ca-row { display: flex; align-items: center; gap: 6px; font-size: 11px; } .ca-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; } .ca-name { flex: 0 0 auto; max-width: 78px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text-secondary); } .ca-bar { flex: 1; height: 5px; background: var(--bg-hover); border-radius: 3px; overflow: hidden; min-width: 20px; } .ca-bar i { display: block; height: 100%; border-radius: 3px; } .ca-num { flex: 0 0 auto; font-variant-numeric: tabular-nums; color: var(--text-tertiary); } .ca-silent { font-size: 10.5px; color: #b76a10; padding: 4px 2px 0; line-height: 1.35; } .cb-name.mine { text-align: right; margin-bottom: 2px; } .cb-name.mine .cb-dept { margin-left: 0; } /* ----------------------------------------------------------- табель */ .tb-list { display: flex; flex-direction: column; gap: 3px; } .tb-row { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; cursor: pointer; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); padding: 8px 11px; font-size: 12.5px; } .tb-row:hover { background: var(--bg-hover); } .tb-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--border); flex: 0 0 auto; } .tb-dot.on { background: #1a7f4b; box-shadow: 0 0 0 3px rgba(26, 127, 75, .18); } .tb-name { min-width: 130px; } .tb-sess { font-size: 11px; min-width: 62px; text-align: right; } .tb-time { font-variant-numeric: tabular-nums; min-width: 66px; text-align: right; } .tb-time.zero { color: var(--text-tertiary); font-weight: 400; } .tb-detail { padding: 4px 0 8px 30px; display: flex; flex-direction: column; gap: 3px; } /* display:flex перебивал [hidden] — сеансы раскрывались все сразу */ .tb-detail[hidden] { display: none; } .tb-slot { display: flex; align-items: center; gap: 10px; font-size: 12px; } .tb-pick { padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; } .tb-month { border-collapse: collapse; font-size: 11px; } .tb-month th, .tb-month td { border: 1px solid var(--border); padding: 3px 5px; text-align: center; white-space: nowrap; } .tb-month th { background: var(--bg-hover); font-weight: 600; position: sticky; top: 0; } .tb-month th.hol, .tb-month td.hol { background: color-mix(in srgb, #c0342b 7%, var(--bg)); } .tb-month td.empty { color: var(--text-tertiary); } .tb-mname { text-align: left !important; min-width: 160px; position: sticky; left: 0; background: var(--bg); } .tb-cdot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; vertical-align: middle; } .tb-mtot { font-variant-numeric: tabular-nums; background: var(--bg-hover); } .login-keep { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-secondary); cursor: pointer; margin: -2px 0 10px; } .login-keep input { width: 15px; height: 15px; accent-color: var(--accent); cursor: pointer; } /* ------------------------------------------------------------- ЭДО */ .edo-filters { display: flex; gap: 7px; flex-wrap: wrap; align-items: center; margin-bottom: 9px; } .edo-filters input, .edo-filters select { padding: 6px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; } .edo-search { flex: 1; min-width: 220px; } .edo-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 10px; } .edo-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg); color: var(--text); font: inherit; font-size: 12px; cursor: pointer; } .edo-chip:hover { background: var(--bg-hover); } .edo-chip.on { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); } .edo-table td { vertical-align: top; } .edo-acts { display: flex; gap: 5px; flex-wrap: wrap; justify-content: flex-end; } .edo-th { cursor: pointer; user-select: none; white-space: nowrap; } .edo-th span { margin-right: 4px; } .edo-th:hover { background: var(--bg-hover); } .edo-th.on { color: var(--accent); } .edo-tr { cursor: pointer; } .edo-menu { position: fixed; z-index: 120; min-width: 200px; max-height: 340px; overflow-y: auto; background: var(--bg); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 28px rgba(0,0,0,.16); padding: 6px; display: flex; flex-direction: column; gap: 2px; } .edo-mi { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 9px; border: 0; border-radius: 7px; background: transparent; color: var(--text); font: inherit; font-size: 12.5px; cursor: pointer; text-align: left; } .edo-mi:hover { background: var(--bg-hover); } .edo-mi.on { background: var(--accent); color: #fff; } .edo-mq, .edo-ml input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; box-sizing: border-box; } .edo-ml { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: var(--text-tertiary); padding: 2px 4px; } .f-ro { color: var(--text); font-size: 13px; } /* ------------------------------------------ правка текста документа */ .dt-list { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .dt-sec { border: 1px solid var(--border); border-radius: 9px; background: var(--bg); padding: 9px 11px; display: flex; flex-direction: column; gap: 7px; } .dt-h { display: flex; align-items: center; gap: 7px; font-weight: 600; font-size: 12.5px; } .dt-f { display: flex; flex-direction: column; gap: 3px; position: relative; } .dt-f > span { font-size: 10.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .dt-f input, .dt-f textarea { padding: 7px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); font: inherit; font-size: 12.5px; width: 100%; box-sizing: border-box; line-height: 1.45; } .dt-f textarea:focus, .dt-f input:focus { outline: none; border-color: var(--accent); } .dt-chg { color: #b76a10; font-weight: 700; } .dt-reset { position: absolute; right: 6px; top: 0; border: 0; background: transparent; color: var(--text-tertiary); font: inherit; font-size: 10.5px; cursor: pointer; } .dt-reset:hover { color: #c0342b; } .ap-ev.cur { border-color: var(--accent); } .link-cell.sent { color: #1a7f4b; } .tb-row.off { opacity: .6; } .tb-time.ok { color: #1a7f4b; } .tb-notes { display: flex; flex-direction: column; gap: 5px; margin: 10px 0; } .tb-note { padding: 8px 12px; border-radius: 9px; font-size: 12.5px; background: color-mix(in srgb, var(--accent) 8%, var(--bg)); border: 1px solid color-mix(in srgb, var(--accent) 25%, transparent); } .tb-note.late { background: #fbf3e6; border-color: #e6c88a; color: #8a5510; } .tb-note.lunch { background: #f3f0fb; border-color: #cfc3ef; color: #5b3fa8; } .tb-note.ontime, .tb-note.full { background: #e9f6ee; border-color: #b6dcc6; color: #1a6b42; } :root[data-theme="dark"] .tb-note.late { background: #3a2a12; color: #e0a35a; } :root[data-theme="dark"] .tb-note.lunch { background: #26203a; color: #b9a6f0; } :root[data-theme="dark"] .tb-note.ontime, :root[data-theme="dark"] .tb-note.full { background: #123526; color: #4fc487; } .tb-pickbtn { min-width: 118px; justify-content: center; } .dt-nav { display: flex; flex-wrap: wrap; gap: 5px; margin: 10px 0 4px; padding-bottom: 8px; border-bottom: 1px solid var(--border); } .dt-navi { padding: 4px 9px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text-secondary); font: inherit; font-size: 11.5px; cursor: pointer; } .dt-navi:hover { background: var(--bg-hover); border-color: var(--accent); color: var(--text); } .dt-h { display: flex; align-items: center; gap: 8px; } .dt-num { flex: 0 0 20px; height: 20px; border-radius: 50%; background: var(--bg-hover); color: var(--text-tertiary); font-size: 10.5px; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .dt-sec.touched { border-color: #e6c88a; } .dt-sec.touched .dt-num { background: #fbf0e2; color: #b76a10; } .dt-sec.flash { box-shadow: 0 0 0 2px var(--accent); transition: box-shadow .2s; } .pk-merge { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 4px; padding: 9px 11px; border: 1px solid var(--border); border-radius: 9px; background: var(--bg); font-size: 12.5px; } .pk-merge > span { font-size: 10.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .pk-merge label { display: flex; align-items: baseline; gap: 7px; cursor: pointer; flex-wrap: wrap; } .pk-merge label .muted { font-size: 11px; flex: 1 1 100%; margin-left: 22px; } .pk-merge input { accent-color: var(--accent); } /* ------------------------------------------------- статусы и заморозка «Я у руководителя» — одна кнопка в углу профиля. Пока статус висит, поверх работы лежит спокойная карточка: время идёт, портфель ждёт. */ .ub-status { grid-column: 1 / -1; margin-top: 5px; display: flex; align-items: center; gap: 6px; font-size: 11px; color: var(--text-secondary); background: var(--bg-secondary); border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; cursor: pointer; width: 100%; } .ub-status:hover { background: var(--hover); color: var(--text); } .st-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--text-tertiary); flex: 0 0 auto; } .st-dot.on { background: #1a7f4b; } .st-dot.busy { background: #b76a10; } .st-now { display: flex; align-items: center; gap: 8px; padding: 8px 10px; background: var(--bg-secondary); border-radius: 8px; margin-bottom: 12px; } .st-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .st-btn { display: flex; align-items: center; gap: 8px; padding: 10px 11px; font-size: 12.5px; background: var(--bg); border: 1px solid var(--border); border-radius: 8px; cursor: pointer; text-align: left; color: var(--text); } .st-btn:hover { border-color: var(--accent); background: var(--accent-soft); } .st-btn.dim { background: var(--bg-secondary); } .st-ico { font-size: 16px; } .st-lbl { display: block; font-size: 10.5px; color: var(--text-tertiary); margin: 10px 0 3px; text-transform: uppercase; letter-spacing: .04em; } .st-in { width: 100%; padding: 7px 9px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); } .st-dates { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; } .freeze { position: fixed; inset: 0; z-index: 900; display: flex; align-items: center; justify-content: center; background: rgba(15, 18, 24, .55); backdrop-filter: blur(3px); } .freeze-card { background: var(--bg); border-radius: 14px; padding: 32px 34px; width: 360px; text-align: center; box-shadow: 0 18px 50px rgba(0, 0, 0, .28); } .freeze-icon { font-size: 44px; line-height: 1; } .freeze-card h2 { margin: 12px 0 4px; font-size: 19px; } .freeze-time { font-size: 12px; color: var(--text-secondary); font-variant-numeric: tabular-nums; } .freeze-card p { font-size: 12px; margin: 14px 0 18px; line-height: 1.5; } .freeze-card .btn-primary { width: 100%; } /* ---------------------------------------------- календарь в табеле */ .tb-row.d-holiday { background: var(--accent-soft); } .tb-row.d-friday .tb-name { color: #6d3ee0; } .tb-legend { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; font-size: 11px; color: var(--text-secondary); margin-bottom: 10px; } .tb-legend span { display: flex; align-items: center; gap: 5px; } .tb-legend i.lg { width: 11px; height: 11px; border-radius: 3px; display: inline-block; border: 1px solid var(--border); } .tb-legend i.lg.hol { background: #f2f3f5; } .tb-legend i.lg.pre { background: #e5efff; } .tb-legend i.lg.fri { background: #f0eafe; } .tb-legend i.lg.abs { background: #fdf0e3; } .tb-month th .tb-dnum { display: block; font-variant-numeric: tabular-nums; } .tb-month th .tb-dwd { display: block; font-size: 8.5px; color: var(--text-tertiary); font-weight: 400; } .tb-month td.pre { background: #e5efff40; } .tb-month td.fri { background: #f0eafe40; } .tb-month td.abs { background: #fdf0e3; text-align: center; } .tb-month .tb-mtot.bad { color: #c0342b; } [data-theme="dark"] .tb-legend i.lg.hol { background: #24262b; } [data-theme="dark"] .tb-legend i.lg.pre { background: #17284a; } [data-theme="dark"] .tb-legend i.lg.fri { background: #271b45; } [data-theme="dark"] .tb-legend i.lg.abs { background: #3a2a12; } [data-theme="dark"] .tb-month td.pre { background: #17284a66; } [data-theme="dark"] .tb-month td.fri { background: #271b4566; } [data-theme="dark"] .tb-month td.abs { background: #3a2a12; } /* ------------------------------------------------------- сводка HR */ .hr-note { font-size: 11.5px; line-height: 1.5; color: var(--text-secondary); background: var(--bg-secondary); border-left: 3px solid var(--accent); padding: 9px 12px; border-radius: 0 8px 8px 0; margin: 12px 0 16px; } .hr-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .hr-card { background: var(--bg-secondary); border-radius: 10px; padding: 12px 14px; } .hr-li { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 4px 0; } .hr-nm { max-width: 150px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hr-bar { display: inline-block; width: 80px; height: 6px; border-radius: 3px; background: var(--border); overflow: hidden; flex: 0 0 auto; } .hr-bar i { display: block; height: 100%; background: var(--accent); } .hr-bar i.g { background: #1a7f4b; } .hr-bar i.r { background: #c0342b; } .hr-sub { display: flex; align-items: center; justify-content: space-between; margin: 18px 0 8px; } .hr-tbl td.bad, .hr-tbl .bad { color: #c0342b; } .hr-tbl .warn { color: #b76a10; } .abs-list { display: flex; flex-direction: column; gap: 6px; } .abs-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; background: var(--bg-secondary); border-radius: 8px; padding: 7px 11px; } .abs-ico { font-size: 15px; } @media (max-width: 900px) { .hr-cols { grid-template-columns: 1fr; } } /* ------------------------------------------------ типы АКБ и их условия Условия письма зависят от вида технологии. Каждое — отдельным пунктом с понятным названием: видно, что своё, а что взято из общего бланка. */ .ln-list { display: flex; flex-direction: column; gap: 8px; } .ln-card { background: var(--bg-secondary); border: 1px solid transparent; border-radius: 10px; padding: 11px 13px; cursor: pointer; } .ln-card:hover { border-color: var(--accent); } .ln-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; } .ln-sub { font-size: 11.5px; margin-top: 2px; } .ln-keys { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } .ln-key { font-size: 10px; padding: 2px 7px; border-radius: 5px; background: var(--bg); color: var(--text-secondary); } .ln-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px 14px; } .ln-f { display: flex; flex-direction: column; gap: 4px; margin-bottom: 10px; } .ln-f > span { font-size: 10.5px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .04em; } .ln-f input, .ln-f textarea { width: 100%; padding: 7px 9px; font-size: 13px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-family: inherit; resize: vertical; } .ln-sec { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; margin-bottom: 8px; } .ln-sec.own { border-color: var(--accent); background: var(--accent-soft); } .ln-sec-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 12.5px; } .ln-sec textarea { width: 100%; padding: 7px 9px; font-size: 12.5px; line-height: 1.45; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-family: inherit; resize: vertical; } .ln-models { display: flex; flex-direction: column; gap: 4px; } .ln-m { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 5px 9px; background: var(--bg-secondary); border-radius: 6px; } /* выбор модели, когда одну маркировку делают разные заводы */ .mp-g { margin-top: 12px; } .mp-gh { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-bottom: 5px; } .mp-i { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 7px; margin-bottom: 4px; cursor: pointer; } .mp-i:hover { border-color: var(--accent); background: var(--accent-soft); } .di-find { display: flex; gap: 6px; margin-top: 7px; } .di-find input { flex: 1; padding: 6px 9px; font-size: 12.5px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); } /* ------------------------------------------- заявления и график отпусков Пустая строка в табеле читается как прогул, поэтому причина стоит рядом с человеком, а не прячется в отдельном списке. */ .tb-kinds { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0; } .tb-kind { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; background: var(--bg-secondary); border-radius: 20px; padding: 4px 11px; } .tb-row.away { opacity: .85; } .rq-bar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 6px; } .rq-list { display: flex; flex-direction: column; gap: 5px; margin-bottom: 10px; } .rq-row { display: flex; align-items: center; gap: 9px; font-size: 12.5px; background: var(--bg-secondary); border-radius: 8px; padding: 7px 11px; } .rq-row.declined { opacity: .7; } .rq-note { font-size: 11px; max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rq-cards { display: flex; flex-direction: column; gap: 9px; } .rq-card { border: 1px solid var(--border); border-radius: 10px; padding: 11px 13px; } .rq-card.hr { border-left: 3px solid #b76a10; } .rq-card.head { border-left: 3px solid #1961ed; } .rq-card.approved { border-left: 3px solid #1a7f4b; } .rq-card.declined { border-left: 3px solid #c0342b; opacity: .8; } .rq-hd { display: flex; align-items: center; gap: 8px; font-size: 13px; } .rq-body { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; margin-top: 6px; } .rq-trace { font-size: 11px; margin-top: 6px; line-height: 1.5; } .rq-act { display: flex; align-items: center; gap: 7px; margin-top: 9px; } .rq-act .st-in { flex: 1; } /* Заявления: вид выбирают плиткой, а не длинным списком в селекте — так видно сразу, что вообще можно попросить. */ .app-picks { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); } .app-pick { display: flex; align-items: center; gap: 9px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--bg); cursor: pointer; text-align: left; font-size: 12.5px; color: var(--text); } .app-pick:hover { border-color: var(--accent); color: var(--accent); } .app-pick.money { border-left: 3px solid #6d3ee0; } .app-pick.hand { border-left: 3px solid #b76a10; } .ap-ico { font-size: 16px; } .ap-t { flex: 1; } .app-cards { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(268px, 1fr)); } .rq-card.fin { border-left: 3px solid #6d3ee0; } /* Резолюция: поручения по утверждённой бумаге — строками, как на документе. */ .rq-res { font-size: 12px; margin-top: 7px; padding: 7px 10px; border-radius: 8px; background: var(--bg-secondary); display: flex; flex-wrap: wrap; gap: 8px; } .res-line { color: var(--text-secondary); } .res-row { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .res-row .st-in { flex: 1; } /* Логотипы партнёров: список с галочками — кто сегодня на бланке. */ .bl-partners { display: flex; flex-direction: column; gap: 7px; margin-bottom: 8px; } .bl-partner { display: flex; align-items: center; gap: 9px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 9px; opacity: .55; } .bl-partner.on { opacity: 1; border-color: var(--accent); } /* Подпись и поле в одну строку: короткие настройки не должны занимать две строки — «Размер кода, мм» и число стоят рядом. */ /* Строка настроек: каждый пункт занимает ровно столько, сколько ему нужно, и подпись не ломается посреди «мм». */ .bl-rowline { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-bottom: 10px; } .bl-rowline > .bl-f { margin: 0; } .bl-f.inline > span { white-space: nowrap; } .bl-f.row.wrap > span { white-space: normal; max-width: 150px; } .bl-f.inline { flex-direction: row; align-items: center; justify-content: space-between; gap: 10px; } .bl-f.inline > span { flex: 0 1 auto; } .bl-f.inline > input { width: auto; max-width: 92px; flex: 0 0 auto; } .bl-f.inline > input[type="color"] { max-width: 56px; } /* радио выбора знака: без этого оно тянется во всю строку, как обычное поле */ .bl-partner input[type="radio"] { width: 16px; min-width: 16px; height: 16px; flex: 0 0 auto; margin: 0; accent-color: var(--accent); } .bl-pimg { width: 96px; min-width: 96px; height: 32px; display: flex; align-items: center; justify-content: center; } .bl-partner img { max-height: 30px; max-width: 96px; object-fit: contain; } .bl-partner .st-in { flex: 1; } .bl-pw { display: flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text-secondary); } .bl-pw input { width: 62px; } .vp-bar { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .vp-miss { margin-top: 16px; } .vp-names { display: flex; flex-wrap: wrap; gap: 6px; } .vp-name { font-size: 12px; padding: 5px 10px; border-radius: 7px; cursor: pointer; background: var(--bg-secondary); border: 1px dashed var(--border); } .vp-name:hover { border-color: var(--accent); color: var(--accent); } /* --------------------------------------------- оформление при приёме Видно сразу, чего не хватает: человеку — что донести, кадровику — можно ли уже заводить в 1С. */ .onb-state { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; font-size: 12.5px; padding: 9px 12px; border-radius: 9px; background: var(--bg-secondary); } .onb-state.filled { background: #fdf0e3; color: #7a4708; } .onb-state.back { background: #fdeaea; color: #8e2620; } .onb-state.checked { background: #e5efff; color: #14439c; } .onb-state.in1c { background: #e6f4ec; color: #12603a; } .onb-miss { font-size: 12px; margin-top: 9px; padding: 8px 12px; border-radius: 8px; background: #fdf0e3; color: #7a4708; line-height: 1.5; } .onb-ok { font-size: 12px; margin-top: 9px; color: #1a7f4b; } /* Бумаг стало много: без разбивки список читался как свалка */ .onb-grp { margin-top: 12px; } .onb-grp-hd { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; font-weight: 600; font-size: 12px; color: var(--text-secondary); } .onb-file { border: 1px solid var(--border); border-radius: 9px; padding: 9px 11px; margin-bottom: 7px; } .onb-file.need { border-color: #e0a35a; } .onb-file.ok { border-color: #1a7f4b33; } .onb-fh { display: flex; align-items: center; gap: 8px; font-size: 12.5px; } .onb-fh label.btn-ghost { cursor: pointer; } .onb-f { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px; padding: 5px 8px; background: var(--bg-secondary); border-radius: 6px; } .onb-confirm { display: flex; align-items: center; gap: 9px; margin-top: 16px; padding: 11px 13px; border-radius: 9px; background: var(--accent-soft); font-size: 12.5px; cursor: pointer; } .ln-f input.need { border-color: #e0a35a; } [data-theme="dark"] .onb-state.filled, [data-theme="dark"] .onb-miss { background: #3a2a12; color: #e0a35a; } [data-theme="dark"] .onb-state.back { background: #3a1a18; color: #e08b84; } [data-theme="dark"] .onb-state.checked { background: #17284a; color: #7aa5ff; } [data-theme="dark"] .onb-state.in1c { background: #14301f; color: #6fc796; } /* откуда в этом КП взялись условия — видно сразу, без догадок */ .dt-line { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; font-size: 12px; margin-top: 9px; padding: 8px 11px; border-radius: 8px; background: var(--accent-soft); color: var(--text); } /* --------------------------------------------- ширина и окно правки Колонок в списках бывает много. Пусть прокручивается сама таблица, а шапка раздела и кнопки остаются на месте — иначе они уезжают за край. */ /* Полоса прокрутки должна быть одна. Раньше скроллились и раздел, и рамка таблицы внутри него — справа стояли две полосы, и колесо мыши крутило то одну, то другую. Прокручивается таблица, раздел стоит на месте. */ .tbl-wrap { width: 100%; height: 100%; overflow: auto; } .content:has(> .tbl-wrap) { overflow: hidden; } /* Правка условий — главное окно работы с документом: открывается по центру, во всю ширину, и все абзацы видно сразу, без прокрутки в узкой колонке. */ .modal-backdrop.wide { align-items: center; padding-top: 0; padding: 3vh 2vw; } .modal.dt-modal { width: 1180px; max-width: 96vw; display: flex; flex-direction: column; max-height: 94vh; } .modal.dt-modal .modal-body { max-height: none; flex: 1; } .dt-all { display: flex; align-items: center; gap: 8px; font-size: 12px; margin-right: auto; cursor: pointer; padding: 6px 10px; border-radius: 8px; background: var(--accent-soft); } .dt-all b { font-weight: 600; } @media (max-width: 1100px) { .modal.dt-modal { width: 96vw; } } /* ===================================================================== ЭКРАНЫ. Монитор, ноутбук, планшет, телефон — один и тот же CRM, но показанный по-разному. Таблицу в одиннадцать колонок нельзя просто «уменьшить»: на телефоне её придётся возить пальцем вправо-влево, и работать этим невозможно. Поэтому на узком экране каждая строка становится карточкой — то же самое, только читается сверху вниз. ===================================================================== */ /* кнопка меню: на широком экране её нет, меню и так на месте */ .nav-btn { display: none; position: fixed; left: 10px; top: 10px; z-index: 75; width: 38px; height: 38px; border-radius: 10px; cursor: pointer; align-items: center; justify-content: center; background: var(--bg); color: var(--text); border: 1px solid var(--border); box-shadow: var(--shadow); } .nav-shade { display: none; position: fixed; inset: 0; z-index: 69; background: rgba(0, 0, 0, .35); } /* ---------- планшет и небольшой ноутбук: меню прячется, всё остальное как есть */ @media (max-width: 1100px) { .nav-btn { display: flex; } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; z-index: 70; transform: translateX(-100%); transition: transform .18s ease; box-shadow: 8px 0 40px rgba(0, 0, 0, .18); } body.nav-open .sidebar { transform: none; } body.nav-open .nav-shade { display: block; } .topbar { padding-left: 58px; } /* место под кнопку меню */ .panel { width: 92vw; } } /* ---------- телефон и планшет «в портрет»: таблица становится карточками */ @media (max-width: 760px) { .topbar { padding: 10px 12px 10px 56px; } .toolbar { padding: 8px 12px; flex-wrap: wrap; row-gap: 6px; overflow-x: auto; } .tbl-wrap { height: auto; overflow: visible; padding: 10px 12px 24px; } table.grid thead { display: none; } table.grid, table.grid tbody { display: block; } table.grid tbody tr { display: block; border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg); } table.grid tbody tr:hover { background: var(--bg); } table.grid tbody td { display: flex; align-items: baseline; gap: 10px; height: auto; min-height: 0; padding: 3px 0; border: 0; max-width: none; white-space: normal; overflow: visible; text-overflow: clip; } /* подпись поля слева — без неё карточка превращается в набор значений */ table.grid tbody td::before { content: attr(data-label); flex: 0 0 42%; max-width: 42%; color: var(--text-tertiary); font-size: 11px; line-height: 1.5; text-transform: uppercase; letter-spacing: .02em; } /* первая колонка — заголовок карточки, подпись ей не нужна */ table.grid tbody td.identifier { font-size: 15px; padding-bottom: 7px; margin-bottom: 5px; border-bottom: 1px solid var(--border); } table.grid tbody td.identifier::before { display: none; } /* пустые поля не показываем: карточка из прочерков ничего не говорит */ table.grid tbody td.blank { display: none; } /* карточка записи и окна — во весь экран: половинками на телефоне не поработать */ .panel { width: 100vw; max-width: 100vw; } .panel-body { flex-direction: column; } .panel-fields { width: 100%; min-width: 0; border-right: 0; border-bottom: 1px solid var(--border); } .modal-backdrop { padding: 10px; padding-top: 5vh; align-items: flex-start; } .modal, .modal.dt-modal { width: 100%; max-width: 100%; } .modal-body { max-height: 72vh; } /* на телефоне карточка сотрудника в один столбец, шапка — сверху вниз */ .emp-grid { grid-template-columns: minmax(0, 1fr); } .emp-hero { flex-direction: column; align-items: flex-start; gap: 12px; padding: 16px; } .emp-tabs { overflow-x: auto; padding: 8px 10px 0; } .emp-tab { white-space: nowrap; } .modal-foot { flex-wrap: wrap; row-gap: 8px; } .dt-all { margin-right: 0; flex: 1 1 100%; } .ln-grid, .st-dates { grid-template-columns: 1fr; } .kanban-col { width: 84vw; min-width: 84vw; } .park-top { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .edo-filters { flex-wrap: wrap; } } /* совсем узкие телефоны */ @media (max-width: 420px) { table.grid tbody td::before { flex-basis: 50%; max-width: 50%; } .park-top { grid-template-columns: 1fr !important; } } /* ------------------------------------------------- позиции документа Раньше под словом «Итого» стоял выпадающий список товаров, и его читали как строку документа. Теперь видно глазами: строки, итог, и отдельно — добавление новой строки. */ .dq-head { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 8px; } .dq-list { display: flex; flex-direction: column; gap: 8px; } .dq-row { display: grid; grid-template-columns: 22px 1fr; gap: 6px 8px; align-items: center; padding: 9px 10px; border: 1px solid var(--border); border-radius: 10px; } .dq-no { color: var(--text-tertiary); font-size: 11px; text-align: center; } .dq-name { grid-column: 2; width: 100%; padding: 6px 8px; font-size: 13px; border: 1px solid transparent; border-radius: 6px; background: transparent; color: var(--text); font-weight: 500; } .dq-name:hover, .dq-name:focus { border-color: var(--border); background: var(--bg); } .dq-nums { grid-column: 2; display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; } .dq-f { display: flex; flex-direction: column; gap: 3px; } .dq-f > span { font-size: 10px; color: var(--text-tertiary); text-transform: uppercase; letter-spacing: .03em; } .dq-f input { width: 92px; padding: 6px 8px; font-size: 12.5px; text-align: right; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); font-variant-numeric: tabular-nums; } .dq-f.wide input { width: 124px; font-weight: 600; } .dq-line { grid-column: 2; font-size: 10.5px; color: var(--text-tertiary); } .dq-empty { padding: 14px; text-align: center; font-size: 12.5px; color: var(--text-tertiary); border: 1px dashed var(--border); border-radius: 10px; } .dq-total { display: flex; align-items: center; justify-content: space-between; margin-top: 10px; padding: 10px 12px; border-radius: 10px; background: var(--bg-secondary); font-size: 14px; } .dq-total b { font-size: 16px; font-variant-numeric: tabular-nums; } .dq-hint { font-size: 11.5px; margin-top: 6px; line-height: 1.5; } .dq-add { margin-top: 16px; padding: 12px; border: 1px dashed var(--border); border-radius: 10px; display: flex; flex-direction: column; gap: 9px; } .dq-add-hd { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; color: var(--text-secondary); } .dq-in { width: 100%; padding: 8px 10px; font-size: 13px; border: 1px solid var(--border); border-radius: 7px; background: var(--bg); color: var(--text); } .dq-add-row { display: flex; align-items: flex-end; gap: 8px; flex-wrap: wrap; } .dq-add-row .btn-primary { margin-left: auto; } @media (max-width: 760px) { .dq-f input { width: 100%; } .dq-f, .dq-f.wide { flex: 1 1 44%; } .dq-add-row .btn-primary { margin-left: 0; flex: 1 1 100%; } } /* какой бланк правим — КП или счёт */ .bl-kinds { display: inline-flex; gap: 4px; margin-left: 12px; vertical-align: middle; } /* быстрые ссылки в окне бланка: логотипы искали внизу и не находили */ .bl-jump { display: flex; gap: 6px; flex-wrap: wrap; padding-bottom: 10px; margin-bottom: 6px; border-bottom: 1px solid var(--border); } .bl-img { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } /* Блок, убранный из этого письма: виден, но бледный — его легко вернуть. */ .dt-sec.off { opacity: .55; } .dt-on { display: flex; align-items: center; } /* ------------------------------------------------ график отпусков сеткой Год одной полосой: строка на человека, месяцы сверху, недели тонкими чертами. Отпуск, разбитый на части, стоит в той же строке разными цветами — так видно и когда человек уходит, и не пересекается ли отдел. */ .pg { border: 1px solid var(--border); border-radius: 10px; overflow-x: auto; } /* год целиком не всегда влезает в экран — тогда таблица прокручивается вбок, а не сжимается до нечитаемого */ .pg-head, .pg-row { display: flex; align-items: stretch; min-width: 980px; border-bottom: 1px solid var(--border); } .pg-row:last-child { border-bottom: none; } .pg-head { background: var(--bg-secondary); font-size: 11px; } .pg-who { width: 210px; min-width: 210px; padding: 7px 10px; display: flex; flex-direction: column; gap: 2px; font-size: 12.5px; border-right: 1px solid var(--border); } .pg-who .muted { font-size: 10.5px; } .pg-sum { width: 54px; min-width: 54px; padding: 7px 10px; text-align: right; font-size: 12px; border-left: 1px solid var(--border); } .pg-months { flex: 1; display: flex; } .pg-m { text-align: center; padding: 6px 0; border-right: 1px solid var(--border); color: var(--text-secondary); } .pg-m:last-child { border-right: none; } .pg-track { flex: 1; position: relative; min-height: 34px; } .pg-w { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--border); opacity: .5; } .pg-today { position: absolute; top: 0; bottom: 0; width: 2px; background: #c0342b; } .pg-bar { position: absolute; top: 6px; bottom: 6px; background: var(--c); border-radius: 5px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #fff; font-size: 10px; overflow: hidden; } .pg-bar:hover { filter: brightness(1.08); box-shadow: 0 0 0 2px rgba(0,0,0,.08); } .pg-bar.draft { background: repeating-linear-gradient(45deg, var(--c), var(--c) 5px, rgba(255,255,255,.45) 5px, rgba(255,255,255,.45) 10px); } .pg-legend { position: sticky; left: 0; display: flex; gap: 14px; padding: 8px 10px; font-size: 11px; border-top: 1px solid var(--border); flex-wrap: wrap; } .pg-legend span { display: flex; align-items: center; gap: 5px; } .pg-legend i { width: 14px; height: 10px; border-radius: 3px; display: inline-block; } .pg-legend i.hatch { background: repeating-linear-gradient(45deg, #19b5ac, #19b5ac 3px, #fff 3px, #fff 6px); } .vp-views { display: flex; gap: 6px; } /* ------------------------------------------------- досье компании и её парк */ .modal.ds-modal { width: 1100px; max-width: 96vw; display: flex; flex-direction: column; max-height: 94vh; } .modal.ds-modal .modal-body { max-height: none; flex: 1; overflow: auto; } /* в боковой панели карточки досье не должно распирать окно по ширине: таблица поставок прокручивается внутри себя, а не тащит панель */ .ds { display: flex; flex-direction: column; gap: 10px; min-width: 0; } .ds > * { min-width: 0; max-width: 100%; } .panel-side { min-width: 0; } .ds-card { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 8px; background: var(--bg-tertiary); } .ds-f { display: flex; gap: 6px; font-size: 12px; line-height: 1.5; min-width: 0; } .ds-f > span { color: var(--text-secondary); flex: 0 0 auto; } .ds-f > b { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-kind { display: flex; align-items: center; gap: 8px; font-size: 12px; padding: 3px 0; flex-wrap: wrap; } .ds-kind .ds-ic { width: 18px; text-align: center; flex: 0 0 auto; } .ds-kind .ds-kn { flex: 1 1 130px; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ds-kind .ds-bar { flex: 2 1 90px; height: 8px; border-radius: 4px; background: var(--bg-hover); overflow: hidden; } .ds-kind .ds-bar i { display: block; height: 100%; background: var(--text-secondary); border-radius: 4px; } /* наши виды — тяга, погрузчики, зарядные — выделены: по ним и работаем */ .ds-kind.core .ds-kn { font-weight: 600; } .ds-kind.core .ds-bar i { background: var(--accent); } .ds-kind b { flex: 0 0 60px; text-align: right; } .ds-kind > .muted { flex: 0 0 auto; font-size: 11px; } .ds-years { display: flex; align-items: flex-end; gap: 6px; height: 84px; padding: 4px 0; } .ds-y { display: flex; flex-direction: column; align-items: center; gap: 3px; width: 34px; } .ds-y i { display: block; width: 100%; background: var(--accent); border-radius: 3px 3px 0 0; } .ds-y span { font-size: 10px; color: var(--text-secondary); } .ds-brands { display: flex; flex-wrap: wrap; gap: 4px; } /* строка батареи: вольтаж и ёмкость впереди, остальное — пояснения */ .ds-bat { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 12px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 6px; margin-bottom: 4px; } .ds-bat.core { border-color: var(--accent); background: var(--accent-soft); } .ds-bat > .muted { font-size: 11px; } /* Сводка над доской: четыре числа в строку. Держим её плоской, без рамок и заливок — она должна читаться за полсекунды и не спорить с колонками */ /* Удалённая запись — перечёркнутая, а не исчезнувшая. Видно, что её убрали, и видно, что вернуть можно: пропавшая без следа строка пугает сильнее */ tr.row-deleted td { text-decoration: line-through; color: var(--text-tertiary); } tr.row-deleted td .chip, tr.row-deleted td .avatar { opacity: .45; } /* Ширины колонок закреплены: без этого таблица пересчитывает их под самое длинное значение на странице, и после каждой сортировки колонки прыгают вправо-влево. Числа и так узкие, а место нужно названию компании */ .pr-wrap table.grid { table-layout: fixed; width: 100%; } .pr-wrap th:nth-child(1) { width: 34px; } .pr-wrap th:nth-child(2) { width: auto; } .pr-wrap th:nth-child(3) { width: 170px; } .pr-wrap th:nth-child(4) { width: 150px; } .pr-wrap th:nth-child(5) { width: 140px; } .pr-wrap th:nth-child(6), .pr-wrap th:nth-child(7), .pr-wrap th:nth-child(8) { width: 96px; } .pr-wrap th:nth-child(9) { width: 110px; } .pr-wrap th:nth-child(10) { width: 82px; } .pr-wrap th:nth-child(11) { width: 120px; } .pr-wrap td { overflow: hidden; text-overflow: ellipsis; } .pr-wrap td .pr-name { min-width: 0; } /* Заголовок, по которому сортируют: щелчок меняет порядок, стрелка говорит, какой он сейчас. Без этого непонятно, отсортировано вообще или нет */ .pr-th { cursor: pointer; user-select: none; white-space: nowrap; } .pr-th:hover { color: var(--accent); } .pr-th.on { color: var(--accent); font-weight: 600; } /* Сводка стоит в шапке раздела, рядом с числом сделок: там пусто, а на доске каждая строка — это отнятое рабочее место. И уехать вбок оттуда она уже не может, шапка не прокручивается */ .board-stats { display: flex; gap: 20px; flex-wrap: wrap; align-items: baseline; margin-left: 18px; padding-left: 18px; border-left: 1px solid var(--border); } .bs-cell { display: flex; gap: 7px; align-items: baseline; } .bs-l { color: var(--text-secondary); font-size: 12px; } .bs-v { font-size: 15px; font-weight: 600; } .bs-v.warn { color: #b26a00; } .bs-v.bad { color: #c0342b; } /* Графы с карточки: те же, что человек оставил в таблице. Мелко и в строку — это подсказка, а не карточка целиком */ .kc-facts { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 5px; } .kc-fact { font-size: 11px; color: var(--text); } .kc-fact i { font-style: normal; color: var(--text-secondary); } /* Метки на карточке сделки: следующий шаг и сколько она стоит без движения */ .kc-flags { margin-top: 4px; gap: 6px; } .kc-flag { font-size: 11px; padding: 1px 6px; border-radius: 5px; font-weight: 500; } .kc-flag.none { background: #fdecec; color: #c0342b; } .kc-flag.late { background: #fbe4d5; color: #9c4221; } .kc-flag.ok { background: #e6f4ea; color: #1a7f4b; } .kc-days { margin-left: auto; font-size: 11px; color: var(--text-secondary); } .ds-pick { display: flex; gap: 8px; align-items: flex-start; padding: 5px 6px; border-radius: var(--radius-sm); cursor: pointer; font-size: 13px; } .ds-pick:hover { background: var(--bg-hover); } .ds-pick input { margin-top: 3px; flex: 0 0 auto; } .ds-pick span { min-width: 0; overflow-wrap: anywhere; } /* Подзаголовок внутри досье: мельче раздела, но отделяет перечни друг от друга — без него бренды, модели и вольтаж слипаются в одну простыню */ .ds-sub { font-size: 11.5px; color: var(--text-secondary); margin: 10px 0 4px; text-transform: uppercase; letter-spacing: .3px; } .ds-sub .muted { text-transform: none; letter-spacing: 0; } .ds-tbl { max-height: 320px; overflow: auto; border: 1px solid var(--border); border-radius: 8px; } .ds-tbl table { width: 100%; border-collapse: collapse; font-size: 11.5px; } .ds-tbl th { position: sticky; top: 0; background: var(--bg-tertiary); text-align: left; padding: 6px 8px; border-bottom: 1px solid var(--border); font-weight: 600; white-space: nowrap; } .ds-tbl td { padding: 5px 8px; border-bottom: 1px solid var(--border); vertical-align: top; } .ds-tbl td.num, .ds-tbl th.num { text-align: right; } .ds-tbl .ds-note { color: var(--text-secondary); max-width: 320px; } .ds-src { font-size: 11px; padding-top: 4px; } /* ------------------------------------------------- потенциальные клиенты */ .pr-f { height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--bg); color: var(--text); padding: 0 8px; font-size: 12.5px; } .pr-chk { display: flex; align-items: center; gap: 5px; font-size: 12.5px; white-space: nowrap; } .pr-chk input { width: 15px; height: 15px; } .pr-wrap table.grid td.num { text-align: right; font-variant-numeric: tabular-nums; } .pr-wrap table.grid th.num { text-align: right; } .pr-name { display: flex; align-items: center; gap: 8px; min-width: 0; } .pr-more { padding: 12px; display: flex; justify-content: center; } /* Переключатель вида у названия раздела. Горит цветом: это единственная кнопка в верхней строке, и она должна читаться как кнопка, а не как ещё один значок рядом с значком раздела. */ .view-flip { width: 28px; height: 28px; flex: none; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-sm); background: var(--accent-soft); color: var(--accent); transition: background .12s, color .12s, transform .08s; } .view-flip:hover { background: var(--accent); color: #fff; } .view-flip:active { transform: scale(.92); } /* Не в паре «доска ↔ список»: значок притушен, но кнопкой остаётся */ .view-flip.off { background: var(--bg-tertiary); color: var(--text-tertiary); } .view-flip.off:hover { background: var(--accent-soft); color: var(--accent); } /* ---------------------------------------------- схема штатной структуры Линии рисуются рамками псевдоэлементов: у каждого узла отросток вверх, у ряда узлов — перекладина. Первому и последнему в ряду половина перекладины срезается, иначе она торчит за крайние ящики. */ .oc-bar { display: flex; align-items: center; gap: 6px; padding: 8px 20px; border-bottom: 1px solid var(--border); } .oc-leg { font-size: 11.5px; } .oc-scroll { overflow: auto; padding: 24px 20px 40px; } .oc-tree ul { /* max-content + auto-поля: ряд шире экрана не уезжает за левый край, а узкий остаётся посередине. justify-content: center этого не умеет — при переполнении он срезает начало ряда, и до первого ящика не докрутить. */ display: flex; align-items: flex-start; width: max-content; margin: 0 auto; padding-top: 20px; position: relative; list-style: none; } .oc-tree > ul { padding-top: 0; } .oc-tree li { display: flex; flex-direction: column; align-items: center; padding: 20px 8px 0; position: relative; list-style: none; } .oc-tree > ul > li { padding-top: 0; } /* отросток вверх от каждого узла */ .oc-tree li::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 20px; border-left: 1.5px solid var(--border); } .oc-tree > ul > li::before { display: none; } /* перекладина над рядом детей */ .oc-tree li::after { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 0; border-top: 1.5px solid var(--border); } .oc-tree > ul > li::after { display: none; } .oc-tree li:first-child::after { left: 50%; } .oc-tree li:last-child::after { right: 50%; } .oc-tree li:only-child::after { display: none; } /* отросток вниз от родителя к перекладине */ .oc-tree li > ul::before { content: ''; position: absolute; top: 0; left: 50%; width: 0; height: 20px; border-left: 1.5px solid var(--border); } .oc-box { width: 250px; flex: none; text-align: left; border: 1px solid var(--border); border-top: 3px solid var(--k, var(--accent)); border-radius: var(--radius); background: var(--bg); box-shadow: var(--shadow-sm); overflow: hidden; } .oc-h { padding: 8px 10px 6px; } .oc-name { display: block; font-weight: 600; font-size: 12.5px; line-height: 1.25; } .oc-kind { font-size: 9.5px; text-transform: uppercase; letter-spacing: .4px; color: var(--k); } .oc-body { padding: 2px 6px 6px; } .oc-none { padding: 4px 4px 6px; font-size: 11px; } .oc-foot { padding: 5px 10px; font-size: 10.5px; border-top: 1px solid var(--border); background: var(--bg-secondary); } .oc-emp { display: flex; align-items: center; gap: 7px; padding: 4px; border-radius: var(--radius-sm); cursor: pointer; } .oc-emp-txt { display: flex; flex-direction: column; min-width: 0; flex: 1; } .oc-badges { display: flex; gap: 3px; flex: none; } .oc-emp:hover { background: var(--bg-hover); } .oc-emp.is-head { background: var(--accent-soft); margin-bottom: 3px; } .oc-emp-n { font-size: 11.5px; font-weight: 500; line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-emp.is-head .oc-emp-n { font-weight: 600; } .oc-emp-p { font-size: 10.5px; color: var(--text-tertiary); line-height: 1.25; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .oc-badge { font-size: 9px; padding: 0 4px; border-radius: 6px; white-space: nowrap; } .oc-badge.head { background: var(--accent); color: #fff; } .oc-badge.sec { background: var(--bg-tertiary); color: var(--text-secondary); } .oc-badge.off { background: #fde8e8; color: #c0342b; } [data-theme="dark"] .oc-badge.off { background: #3a1e1e; color: #f2a0a0; } /* личное подчинение: не отдел, а люди за конкретным руководителем */ .oc-personal { margin: 2px 0 4px 14px; padding-left: 8px; border-left: 1.5px dashed var(--border); } /* Две кнопки в одной графе: «Досье» и «В CRM» — чтобы не липли друг к другу */ .pr-act { display: flex; gap: 6px; justify-content: flex-end; white-space: nowrap; } /* Блок из базы лидов: реестр это не подтверждал — видно по рамке */ .ds-lead { border-left: 3px solid var(--rule, var(--border)); background: var(--bg-secondary); } /* Снятое сообщение в чате: не исчезает, а зачёркивается. Стёртое насовсем нельзя ни проверить, ни оспорить, а в рабочем чате нужно именно это. */ .cb-text.cb-struck { text-decoration: line-through; opacity: .55; } .cb-struck-note { font-size: 11px; color: var(--text-tertiary); margin-top: 2px; }