/* ============================================================================ * StaffControl HR — продуктовые overrides поверх calm-executive.css. * Layout: sidebar + topbar + content. * Активируется через data-design="executive" на . * * Phase 4A.2: Preline-inspired premium polish. * - Используем Preline UI как визуальный референс (без npm-сборки/CDN). * - Добавлены spacing-токены, alias-имена компонентов, focus-ring, * soft-cards, action-bar, form-card, secondary/soft/danger-кнопки. * - BEM-классы (sc-btn--primary, sc-badge--ok, sc-card--link и т.п.) * сохранены — над ними даны dash-aliases. * ============================================================================ */ :root { --sc-sidebar-w: 240px; --sc-topbar-h: 56px; /* Phase 4A.2: Premium polish tokens (consistent with calm-executive). */ --sc-radius-sm: 6px; --sc-radius: 10px; --sc-radius-lg: 14px; --sc-shadow-soft: 0 1px 2px rgba(15, 18, 22, 0.04), 0 0 0 1px rgba(15, 18, 22, 0.02); --sc-shadow-card: 0 1px 3px rgba(15, 18, 22, 0.06), 0 1px 2px rgba(15, 18, 22, 0.04); --sc-shadow-hover: 0 6px 24px rgba(15, 18, 22, 0.06), 0 1px 3px rgba(15, 18, 22, 0.05); --sc-focus-ring: 0 0 0 3px rgba(31, 111, 85, 0.18); --sc-info-soft: #e6f0fb; --sc-info-soft-fg: #1e4480; --sc-hairline: var(--hairline, #ece9e0); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: 'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif; background: var(--background, #f7f5f0); color: var(--foreground, #1c1f24); min-height: 100vh; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } .sc-shell { display: grid; grid-template-columns: var(--sc-sidebar-w) 1fr; grid-template-rows: var(--sc-topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar content"; min-height: 100vh; } /* Sidebar */ .sc-sidebar { grid-area: sidebar; background: var(--card, #ffffff); border-right: 1px solid var(--border, #e5e1d8); padding: 18px 14px; display: flex; flex-direction: column; gap: 6px; position: sticky; top: 0; height: 100vh; } .sc-brand { font-weight: 700; font-size: 16px; margin-bottom: 14px; letter-spacing: 0.02em; color: var(--primary, #1f6f55); } .sc-nav a { display: block; padding: 8px 12px; border-radius: 8px; font-size: 14px; color: var(--foreground, #1c1f24); transition: background 0.15s ease; } .sc-nav a:hover { background: var(--muted, #f0ece3); text-decoration: none; } .sc-nav a.is-active { background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); font-weight: 600; } .sc-nav .sc-section { margin-top: 14px; padding: 0 12px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground, #6b6a64); } /* Topbar */ .sc-topbar { grid-area: topbar; background: var(--card, #ffffff); border-bottom: 1px solid var(--border, #e5e1d8); display: flex; align-items: center; justify-content: space-between; padding: 0 24px; } .sc-topbar-title { font-weight: 600; font-size: 15px; } .sc-topbar-user { font-size: 13px; color: var(--muted-foreground, #6b6a64); } .sc-topbar-user .sc-logout { margin-left: 12px; color: var(--primary, #1f6f55); } /* Content */ .sc-content { grid-area: content; padding: 24px; } /* KPI cards */ .sc-kpi-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-bottom: 24px; } /* Узкие экраны (~1366px): больше картоек в ряд без горизонтального скролла страницы */ .sc-kpi-grid--dense { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; } .glass-card, .sc-card { background: var(--card, #ffffff); border: 1px solid var(--border, #e5e1d8); border-radius: var(--radius-card, 12px); padding: 16px 18px; box-shadow: var(--shadow-sm, 0 1px 2px rgba(0,0,0,0.04)); } .sc-kpi-label { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground, #6b6a64); margin-bottom: 6px; } .sc-kpi-value { font-size: 28px; font-weight: 600; color: var(--foreground-strong, #0f1216); font-family: 'Fraunces', 'Inter', serif; } .sc-kpi-sub { margin-top: 4px; font-size: 12px; color: var(--muted-foreground, #6b6a64); } .sc-kpi-value--warn { color: #b45309; } .sc-kpi-value--danger { color: #b91c1c; } /* Tables */ .sc-table { width: 100%; border-collapse: collapse; background: var(--card, #ffffff); border-radius: var(--radius-card, 12px); overflow: hidden; border: 1px solid var(--border, #e5e1d8); } .sc-table th, .sc-table td { padding: 10px 14px; text-align: left; font-size: 13px; } .sc-table thead th { background: var(--muted, #f0ece3); font-weight: 600; color: var(--muted-foreground, #4a4a45); border-bottom: 1px solid var(--border, #e5e1d8); } .sc-table tbody tr + tr td { border-top: 1px solid var(--hairline, #ece9e0); } .sc-table tbody tr:hover { background: var(--muted, #f7f5f0); } /* Badges */ .sc-badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; background: var(--muted, #f0ece3); color: var(--muted-foreground, #4a4a45); } .sc-badge--ok { background: var(--success-soft, #e3f0eb); color: var(--success-soft-fg, #145441); } .sc-badge--warn { background: var(--warning-soft, #fbeed1); color: var(--warning-soft-fg, #7a4a05); } .sc-badge--danger { background: var(--destructive-soft, #fbe3df); color: var(--destructive-soft-fg, #7a1a10); } .sc-badge--payroll-ready { background: var(--success-soft, #e3f0eb); color: var(--success-soft-fg, #145441); } .sc-badge--payroll-no_salary_base, .sc-badge--payroll-no_face_id { background: var(--destructive-soft, #fbe3df); color: var(--destructive-soft-fg, #7a1a10); } .sc-badge--payroll-needs_review, .sc-badge--payroll-no_data, .sc-badge--payroll-payroll_inactive { background: var(--warning-soft, #fbeed1); color: var(--warning-soft-fg, #7a4a05); } .sc-badge--payroll-mini { display: inline-block; margin-top: 4px; margin-right: 4px; font-size: 10px; padding: 2px 6px; border-radius: 4px; } .sc-payroll-table .sc-num { text-align: right; font-variant-numeric: tabular-nums; } .sc-payroll-kpi-money, .sc-payroll-money { white-space: nowrap; font-variant-numeric: tabular-nums; line-height: 1.2; display: inline-block; max-width: 100%; } .sc-payroll-kpi-section .sc-kpi-card .sc-kpi-value.sc-payroll-kpi-money { font-size: clamp(1.35rem, 2.8vw, 1.75rem); letter-spacing: -0.02em; } .sc-payroll-kpi-section .sc-kpi-card { min-width: 10.5rem; } .sc-executive-hero .sc-status-chip__value.sc-payroll-kpi-money { white-space: nowrap; font-variant-numeric: tabular-nums; } .sc-payroll-table { table-layout: auto; min-width: 100%; } .sc-payroll-table th.sc-payroll-money-col, .sc-payroll-table td.sc-payroll-money { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; line-height: 1.25; min-width: 5.5rem; } .sc-payroll-table th.sc-payroll-money-col--base, .sc-payroll-table td.sc-payroll-money--base { min-width: 6.75rem; } .sc-payroll-table th.sc-payroll-money-col--payable, .sc-payroll-table td.sc-payroll-money--payable { min-width: 7.25rem; } .sc-payroll-actions-col { white-space: nowrap; min-width: 11rem; } .sc-payroll-row-actions { display: flex; flex-wrap: wrap; gap: 4px; } .sc-payroll-row--no-salary { background: color-mix(in srgb, var(--warning-soft, #fbeed1) 35%, transparent); } .sc-payroll-onboarding { display: flex; gap: 16px; align-items: flex-start; padding: 20px; margin-bottom: 20px; border: 1px solid var(--warning-soft-fg, #7a4a05); background: var(--warning-soft, #fbeed1); } .sc-payroll-onboarding__icon { color: var(--warning-soft-fg, #7a4a05); flex-shrink: 0; } .sc-payroll-form-card { margin: 20px 0; padding: 0; border: 1px solid var(--border, #e5e1d8); background: var(--card, #fff); border-radius: var(--radius-card, 12px); overflow: hidden; } .sc-payroll-form-card--focus { box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent, #1b4d3e) 25%, transparent); } .sc-payroll-form-card__head { padding: 16px 18px 0; } .sc-payroll-form-card__lead { margin: 6px 0 0; font-size: 13px; color: var(--muted-foreground, #4a4a45); line-height: 1.5; } .sc-payroll-form-card__body { padding: 12px 18px 16px; } .sc-payroll-form-card--aside { padding: 16px 18px; } .sc-checkbox-row { display: flex; align-items: center; gap: 8px; } .sc-insight-list { margin: 0; padding-left: 1.25rem; color: var(--muted-foreground, #4a4a45); line-height: 1.6; } .sc-money-cell { white-space: nowrap; text-align: right; font-variant-numeric: tabular-nums; } .sc-payroll-table .sc-money-cell.sc-payroll-money { padding-left: 10px; padding-right: 10px; } .sc-money-cell--deduction, .sc-payroll-money--deduction { color: var(--warning-soft-fg, #7a4a05); font-weight: 600; } .sc-payroll-col-payable { background: color-mix(in srgb, var(--success-soft, #e3f0eb) 45%, transparent); } .sc-payroll-table-scroll { max-height: 70vh; overflow: auto; } .sc-payroll-table__head th { position: sticky; top: 0; z-index: 2; background: var(--card, #fff); box-shadow: 0 1px 0 var(--border, #e5e1d8); } .sc-payroll-board .sc-monthly-board__subtitle { color: var(--muted-foreground, #4a4a45); font-size: 13px; } .sc-payroll-bulk { padding: 20px; margin-bottom: 20px; border: 1px solid color-mix(in srgb, var(--accent, #1b4d3e) 25%, var(--border, #e5e1d8)); } .sc-payroll-bulk__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; margin: 16px 0; } .sc-payroll-bulk__modes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; } .sc-radio-row { display: flex; align-items: center; gap: 8px; font-size: 14px; flex-wrap: wrap; } .sc-radio-row--with-select .sc-input--inline { max-width: 220px; margin-left: 8px; } .sc-payroll-check-col { width: 36px; text-align: center; } .sc-kpi-sub--inline { margin-top: 6px; font-size: 11px; line-height: 1.35; } .sc-sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Phase 23A — Payroll Intelligence */ .sc-payroll-intelligence__panel { padding: 18px; display: grid; gap: 16px; } .sc-payroll-intelligence__subtitle { margin: 0 0 8px; font-size: 14px; font-weight: 600; } .sc-payroll-intelligence-kpis { margin-bottom: 4px; } .sc-payroll-intelligence-attention__chips { display: flex; flex-wrap: wrap; gap: 8px; } .sc-badge--payroll-intel-warn { background: color-mix(in srgb, var(--warning-soft, #fbeed1) 70%, transparent); color: var(--warning-soft-fg, #7a4a05); } .sc-badge--payroll-intel-danger { background: color-mix(in srgb, var(--danger-soft, #fde8e8) 70%, transparent); color: var(--danger-soft-fg, #8b1e1e); } .sc-payroll-intelligence-hints { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; padding: 0; margin: 12px 0 0; } @media (max-width: 640px) { .sc-payroll-intelligence-kpis { grid-template-columns: 1fr 1fr; } .sc-payroll-intelligence-impact .sc-table { font-size: 13px; } } [data-theme="dark"] .sc-payroll-intelligence__panel { border-color: rgba(148, 163, 184, 0.16); } [data-theme="dark"] .sc-badge--payroll-intel-warn { background: rgba(251, 191, 36, 0.15); color: #fcd34d; } [data-theme="dark"] .sc-badge--payroll-intel-danger { background: rgba(248, 113, 113, 0.15); color: #fca5a5; } /* Buttons */ .sc-btn { display: inline-block; padding: 8px 14px; border-radius: var(--radius-button, 8px); border: 1px solid var(--border, #e5e1d8); background: var(--card, #ffffff); color: var(--foreground, #1c1f24); font-size: 13px; cursor: pointer; text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease; } .sc-btn:hover { background: var(--muted, #f0ece3); } .sc-btn--primary { background: var(--primary, #1f6f55); color: var(--primary-foreground, #fff); border-color: var(--primary, #1f6f55); } .sc-btn--primary:hover { background: var(--primary-strong, #145441); } /* Forms */ .sc-form { max-width: 720px; } .sc-form .form-row { margin-bottom: 14px; } .sc-form label { display: block; font-size: 12px; font-weight: 600; margin-bottom: 4px; color: var(--muted-foreground, #4a4a45); } .sc-form input[type="text"], .sc-form input[type="email"], .sc-form input[type="number"], .sc-form input[type="date"], .sc-form input[type="time"], .sc-form input[type="password"], .sc-form select, .sc-form textarea { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border, #e5e1d8); background: var(--input, #ffffff); color: var(--foreground, #1c1f24); font-size: 14px; font-family: inherit; } .sc-form textarea { resize: vertical; min-height: 70px; } .sc-form .errorlist { list-style: none; padding: 0; margin: 4px 0 0; color: var(--destructive, #b3261e); font-size: 12px; } /* Toolbar (filters above tables) */ .sc-toolbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .sc-toolbar input, .sc-toolbar select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border, #e5e1d8); font-size: 13px; background: var(--input, #ffffff); } .sc-empty { padding: 36px; text-align: center; color: var(--muted-foreground, #6b6a64); font-size: 13px; } .sc-empty--boxed { margin: 16px; padding: 28px 20px; border-radius: 12px; border: 1px dashed var(--border, #e5e1d8); background: var(--muted, #f0ece3); max-width: 480px; margin-left: auto; margin-right: auto; } .sc-empty--boxed .sc-empty-title { display: block; font-weight: 600; color: var(--foreground, #1c1f24); margin-bottom: 6px; font-size: 14px; } /* Горизонтальный скролл только у таблицы (узкое окно) */ .sc-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .sc-table-scroll .sc-table { min-width: 720px; } .sc-table-scroll .sc-table.sc-table--compact { min-width: 640px; } .sc-page-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 18px; } .sc-page-header--reports { flex-wrap: wrap; gap: 12px 20px; align-items: flex-start; } @media (max-width: 900px) { .sc-page-header--reports { flex-direction: column; align-items: stretch; } } .sc-page-title { font-size: 20px; font-weight: 600; margin: 0; } .sc-page-sub { font-size: 13px; color: var(--muted-foreground, #6b6a64); margin: 4px 0 0 0; } /* Filter form (reports) */ .sc-filter-form { display: flex; flex-direction: column; gap: 10px; } .sc-filter-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px 12px; } .sc-filter-field { display: flex; flex-direction: column; gap: 4px; } .sc-filter-field label { font-size: 12px; color: var(--muted-foreground, #6b6a64); font-weight: 500; } .sc-filter-field input, .sc-filter-field select, .sc-filter-field textarea { width: 100%; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border, #e5e1d8); font-size: 13px; background: var(--input, #ffffff); color: var(--foreground, #1c1f24); } .sc-filter-field input[type="checkbox"] { width: auto; } .sc-filter-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sc-help { color: var(--muted-foreground, #6b6a64); font-size: 11px; } .sc-error { color: var(--destructive, #b3261e); font-size: 12px; } /* Hub link cards */ .sc-card--link { transition: box-shadow .15s ease, transform .15s ease; cursor: pointer; } .sc-card--link:hover { box-shadow: 0 4px 16px rgba(0,0,0,.06); transform: translateY(-1px); } /* Login screen layout */ .sc-auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } .sc-auth-card { max-width: 420px; width: 100%; } /* Pagination */ .sc-pagination { margin-top: 16px; display: flex; gap: 8px; align-items: center; font-size: 13px; } .sc-pagination a, .sc-pagination .current { padding: 4px 10px; border-radius: 8px; border: 1px solid var(--border, #e5e1d8); background: var(--card, #ffffff); text-decoration: none; } .sc-pagination .current { background: var(--primary-soft, #e3f0eb); } /* Messages */ .sc-messages { margin-bottom: 14px; } .sc-message { padding: 10px 14px; border-radius: 8px; font-size: 13px; margin-bottom: 6px; } .sc-message--info { background: var(--muted, #f0ece3); } .sc-message--success { background: var(--success-soft, #e3f0eb); color: var(--success-soft-fg, #145441); } .sc-message--error { background: var(--destructive-soft, #fbe3df); color: var(--destructive-soft-fg, #7a1a10); } /* ============================================================================ * Phase 4A.2 — Preline-inspired component system additions. * Все правила ниже только дополняют существующие классы (alias / новые * варианты). Старые BEM-имена остаются работоспособными. * ============================================================================ */ /* ---- Layout aliases ---- */ .sc-app-shell { /* alias for sc-shell */ display: grid; grid-template-columns: var(--sc-sidebar-w) 1fr; grid-template-rows: var(--sc-topbar-h) 1fr; grid-template-areas: "sidebar topbar" "sidebar content"; min-height: 100vh; } .sc-page { padding: 0; } /* контейнер раздела */ /* ---- Sidebar polish ---- */ .sc-sidebar { padding: 16px 12px; gap: 4px; } .sc-brand-block { padding: 6px 10px 14px; margin-bottom: 8px; border-bottom: 1px solid var(--sc-hairline); } .sc-brand-title { font-weight: 700; font-size: 16px; color: var(--primary, #1f6f55); letter-spacing: 0.02em; } .sc-brand-sub { margin-top: 2px; font-size: 11px; color: var(--muted-foreground, #6b6a64); letter-spacing: 0.04em; text-transform: uppercase; } .sc-sidebar-link, /* alias-name */ .sc-nav a { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: var(--sc-radius); font-size: 13.5px; color: var(--foreground, #1c1f24); position: relative; transition: background 0.15s ease, color 0.15s ease; } .sc-sidebar-link:hover, .sc-nav a:hover { background: var(--muted, #f0ece3); text-decoration: none; } .sc-sidebar-link-active, .sc-nav a.is-active { background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); font-weight: 600; } .sc-sidebar-link-active::before, .sc-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 7px; bottom: 7px; width: 3px; border-radius: 2px; background: var(--primary, #1f6f55); } .sc-sidebar-section, .sc-nav .sc-section { margin-top: 14px; padding: 0 10px 4px; font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted-foreground, #6b6a64); } /* ---- Topbar polish ---- */ .sc-topbar { padding: 0 22px; gap: 16px; } .sc-topbar-user { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; position: relative; z-index: 2; } .sc-logout-form { display: inline-flex; margin: 0; padding: 0; border: 0; background: transparent; } .sc-logout-form--inline { display: inline-block; } .sc-topbar-user .sc-logout-form .sc-logout, .sc-topbar-user button.sc-logout { cursor: pointer; font-family: inherit; line-height: inherit; appearance: none; -webkit-appearance: none; } .sc-user-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--muted, #f0ece3); color: var(--foreground, #1c1f24); font-weight: 500; } .sc-user-pill__role { font-size: 11px; color: var(--muted-foreground, #6b6a64); } .sc-topbar-user .sc-logout { margin-left: 0; padding: 4px 10px; border-radius: 999px; font-size: 12px; color: var(--primary, #1f6f55); } .sc-topbar-user .sc-logout:hover { background: var(--primary-soft, #e3f0eb); text-decoration: none; } /* ---- Page header ---- */ .sc-page-subtitle, /* alias */ .sc-page-sub { /* keep existing */ font-size: 13px; color: var(--muted-foreground, #6b6a64); } .sc-action-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; } .sc-action-bar > .sc-spacer { flex: 1; } /* ---- Cards ---- */ .sc-card { box-shadow: var(--sc-shadow-soft); transition: box-shadow .15s ease, transform .15s ease; } .sc-kpi-card { /* alias for KPI flavor */ background: var(--card, #ffffff); border: 1px solid var(--border, #e5e1d8); border-radius: var(--radius-card, 12px); padding: 14px 16px; box-shadow: var(--sc-shadow-soft); position: relative; overflow: hidden; } .sc-kpi-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--primary-soft, #e3f0eb); opacity: 0.7; } .sc-kpi-card--accent::before { background: var(--primary, #1f6f55); } .sc-kpi-card--warn::before { background: #f6c768; } .sc-kpi-card--danger::before { background: #d97a72; } .sc-card-soft { background: var(--muted, #f7f5f0); border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius); padding: 14px 16px; } .sc-card-link, /* alias */ .sc-card--link { cursor: pointer; } .sc-card-link:hover, .sc-card--link:hover { box-shadow: var(--sc-shadow-hover); transform: translateY(-1px); } /* ---- Filter card ---- */ .sc-filter-card { background: var(--card, #ffffff); border: 1px solid var(--border, #e5e1d8); border-radius: var(--radius-card, 12px); padding: 14px 16px; box-shadow: var(--sc-shadow-soft); margin-bottom: 14px; } .sc-filter-card__title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground, #6b6a64); margin: 0 0 10px; } /* ---- Table polish ---- */ .sc-table-wrap, /* alias */ .sc-table-scroll { border-radius: var(--radius-card, 12px); } .sc-table thead th { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.06em; } .sc-table tbody tr:hover { background: var(--muted, #f7f5f0); } .sc-table-actions { display: inline-flex; align-items: center; gap: 6px; } /* ---- Forms (Preline-style) ---- */ .sc-form-card { background: var(--card, #ffffff); border: 1px solid var(--border, #e5e1d8); border-radius: var(--radius-card, 12px); box-shadow: var(--sc-shadow-soft); padding: 20px 22px; } .sc-form-card__header { margin: -2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--sc-hairline); } .sc-form-card__title { font-size: 16px; font-weight: 600; margin: 0; } .sc-form-card__sub { margin: 4px 0 0; font-size: 13px; color: var(--muted-foreground, #6b6a64); } .sc-form-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px 16px; } .sc-form-grid--single { grid-template-columns: minmax(260px, 480px); } .sc-form-control { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--border, #e5e1d8); background: var(--input, #ffffff); color: var(--foreground, #1c1f24); font-size: 14px; font-family: inherit; transition: border-color .15s ease, box-shadow .15s ease; } .sc-form-control:focus, .sc-form input:focus, .sc-form select:focus, .sc-form textarea:focus, .sc-toolbar input:focus, .sc-toolbar select:focus, .sc-filter-field input:focus, .sc-filter-field select:focus, .sc-filter-field textarea:focus { outline: none; border-color: var(--primary, #1f6f55); box-shadow: var(--sc-focus-ring); } .sc-form-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--sc-hairline); } .sc-form-actions > .sc-spacer { flex: 1; } /* ---- Buttons (variants + dash-aliases) ---- */ .sc-btn { font-weight: 500; } .sc-btn:focus-visible { outline: none; box-shadow: var(--sc-focus-ring); } .sc-btn-primary, .sc-btn--primary { /* keep BEM live, add dash alias */ background: var(--primary, #1f6f55); color: var(--primary-foreground, #fff); border-color: var(--primary, #1f6f55); } .sc-btn-primary:hover, .sc-btn--primary:hover { background: var(--primary-strong, #145441); } .sc-btn-secondary { background: var(--card, #ffffff); color: var(--foreground, #1c1f24); border-color: var(--border, #e5e1d8); } .sc-btn-secondary:hover { background: var(--muted, #f0ece3); } .sc-btn-soft { background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); border-color: transparent; } .sc-btn-soft:hover { background: #d4e5dc; } .sc-btn-danger { background: var(--destructive-soft, #fbe3df); color: var(--destructive-soft-fg, #7a1a10); border-color: transparent; } .sc-btn-danger:hover { background: #f6cfc8; } /* ---- Badges (additional variants & aliases) ---- */ .sc-badge-success, .sc-badge--ok { background: var(--success-soft, #e3f0eb); color: var(--success-soft-fg, #145441); } .sc-badge-warning, .sc-badge--warn { background: var(--warning-soft, #fbeed1); color: var(--warning-soft-fg, #7a4a05); } .sc-badge-danger, .sc-badge--danger { background: var(--destructive-soft, #fbe3df); color: var(--destructive-soft-fg, #7a1a10); } .sc-badge-info { background: var(--sc-info-soft); color: var(--sc-info-soft-fg); } /* ---- Empty / muted ---- */ .sc-muted { color: var(--muted-foreground, #6b6a64); } /* ---- Page section spacing ---- */ .sc-section-block { margin-bottom: 18px; } .sc-section-title { font-size: 14px; font-weight: 600; margin: 0 0 10px; color: var(--foreground, #1c1f24); display: flex; align-items: center; gap: 8px; } .sc-section-title small { font-weight: 500; font-size: 12px; color: var(--muted-foreground, #6b6a64); } /* ---- Security / privacy callouts ---- */ .sc-callout { border-radius: var(--sc-radius); padding: 12px 14px; font-size: 13px; display: flex; align-items: flex-start; gap: 10px; border: 1px solid var(--border, #e5e1d8); background: var(--card, #ffffff); } .sc-callout__title { font-weight: 600; margin: 0 0 2px; font-size: 13px; } .sc-callout__body { margin: 0; color: var(--muted-foreground, #6b6a64); } .sc-callout--security { background: var(--primary-soft, #e3f0eb); border-color: rgba(31, 111, 85, 0.18); color: var(--primary-strong, #145441); } .sc-callout--security .sc-callout__body { color: inherit; opacity: 0.85; } .sc-callout--warn { background: var(--warning-soft, #fbeed1); border-color: rgba(122, 74, 5, 0.18); color: var(--warning-soft-fg, #7a4a05); } .sc-callout--warn .sc-callout__body { color: inherit; opacity: 0.9; } /* ---- Pagination polish ---- */ .sc-pagination a:hover { background: var(--muted, #f0ece3); } .sc-pagination .current { font-weight: 600; } /* ---- Responsive: 1366px-friendly ---- */ @media (max-width: 1366px) { .sc-content { padding: 20px; } } @media (max-width: 1024px) { .sc-shell, .sc-app-shell { grid-template-columns: 200px 1fr; } :root { --sc-sidebar-w: 200px; } } @media (max-width: 768px) { .sc-shell, .sc-app-shell { grid-template-columns: 1fr; grid-template-rows: var(--sc-topbar-h) auto 1fr; grid-template-areas: "topbar" "sidebar" "content"; } .sc-sidebar { position: static; height: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--border, #e5e1d8); gap: 4px 6px; } .sc-brand-block { width: 100%; padding-bottom: 8px; margin-bottom: 6px; } .sc-sidebar-section, .sc-nav .sc-section { width: 100%; margin-top: 6px; } } /* ============================================================================ * Phase 4A.2B — Premium UI correction additions. * Уменьшаем пустоту, усиливаем иерархию, добавляем hero/report-card/legend, * sticky-колонку для monthly, table-toolbar (заголовок + actions), info/secure * callout'ы, 2-колоночную form-card. * ============================================================================ */ /* ---- Content frame: шире ритм, без «океана пустоты» ---- */ .sc-content { padding: 28px 32px 40px; } .sc-content-frame { max-width: 1520px; margin: 0 auto; display: block; } @media (min-width: 1400px) { .sc-content { padding: 28px 36px 44px; } } /* ---- Topbar polish v2 ---- */ .sc-topbar { border-bottom: 1px solid var(--sc-hairline); box-shadow: 0 1px 0 rgba(15, 18, 22, 0.02); } .sc-topbar-title { color: var(--foreground, #1c1f24); } .sc-user-pill { background: var(--card, #ffffff); border: 1px solid var(--border, #e5e1d8); font-size: 12.5px; padding: 5px 10px 5px 12px; } .sc-user-pill__role { background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); font-size: 10.5px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; padding: 2px 7px; border-radius: 999px; } .sc-topbar-user .sc-logout { background: var(--card, #ffffff); border: 1px solid var(--border, #e5e1d8); font-weight: 600; font-size: 12px; padding: 6px 12px; border-radius: var(--sc-radius); color: var(--primary-strong, #145441); } .sc-topbar-user .sc-logout:hover { background: var(--primary-soft, #e3f0eb); border-color: rgba(31, 111, 85, 0.35); text-decoration: none; } .sc-topbar-user { gap: 12px; } /* ---- Sidebar v2: больше воздуха между группами ---- */ .sc-sidebar { padding: 18px 12px 22px; gap: 2px; } .sc-sidebar-section, .sc-nav .sc-section { margin-top: 18px; padding-top: 4px; } .sc-sidebar-link, .sc-nav a { padding: 9px 12px; font-weight: 450; } .sc-sidebar-link:hover, .sc-nav a:hover { background: rgba(31, 111, 85, 0.06); } .sc-sidebar-link-active, .sc-nav a.is-active { font-weight: 600; background: var(--primary-soft, #e3f0eb); } /* ---- Page header v2 ---- */ .sc-page-header { padding-bottom: 14px; border-bottom: 1px solid var(--sc-hairline); } .sc-page-header.sc-page-header--reports { border-bottom: 0; padding-bottom: 0; } /* ---- Hero card (reports) ---- */ .sc-hero-card { background: radial-gradient(120% 120% at 0% 0%, rgba(31, 111, 85, 0.12), transparent 55%), linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%); border: 1px solid var(--border, #e5e1d8); border-radius: var(--sc-radius-lg); padding: 22px 26px 24px; margin-bottom: 22px; box-shadow: var(--sc-shadow-card); } .sc-hero-card__title { font-size: 22px; font-weight: 600; margin: 0 0 6px; font-family: 'Fraunces', 'Inter', serif; color: var(--foreground-strong, #0f1216); } .sc-hero-card__sub { margin: 0; font-size: 13.5px; color: var(--muted-foreground, #6b6a64); max-width: 760px; } .sc-hero-card__actions { margin-top: 14px; } /* ---- Report cards (hub tiles) ---- */ .sc-report-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } @media (min-width: 1280px) { .sc-report-grid { grid-template-columns: repeat(3, 1fr); } } .sc-report-card { display: flex; flex-direction: column; gap: 6px; padding: 16px 18px 14px; background: var(--card, #ffffff); border: 1px solid var(--border, #e5e1d8); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-soft); text-decoration: none !important; color: inherit; position: relative; transition: box-shadow .15s ease, transform .15s ease, border-color .15s ease; } .sc-report-card:hover { box-shadow: var(--sc-shadow-hover); border-color: rgba(31, 111, 85, 0.25); transform: translateY(-1px); } .sc-report-card__title { font-size: 15px; font-weight: 600; margin: 0; display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--foreground, #1c1f24); } .sc-report-card__title::after { content: "→"; font-weight: 400; color: var(--primary, #1f6f55); opacity: 0.65; transition: transform .15s ease; } .sc-report-card:hover .sc-report-card__title::after { transform: translateX(2px); opacity: 1; } .sc-report-card__benefit { font-size: 12.5px; color: var(--muted-foreground, #6b6a64); margin: 0; line-height: 1.5; } .sc-report-card__formats { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .sc-format-chip { display: inline-block; font-size: 10.5px; font-weight: 600; letter-spacing: 0.04em; padding: 2px 8px; border-radius: 999px; background: var(--muted, #f0ece3); color: var(--muted-foreground, #4a4a45); } .sc-format-chip--xlsx { background: #e6f0fb; color: #1e4480; } .sc-format-chip--pdf { background: #fbe9e6; color: #7a2511; } /* ---- Filter title + tighter rhythm ---- */ .sc-filter-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted-foreground, #6b6a64); margin: 0 0 12px; display: flex; align-items: center; gap: 8px; } .sc-filter-title::before { content: ""; width: 4px; height: 4px; border-radius: 999px; background: var(--primary, #1f6f55); } .sc-filter-card { padding: 16px 18px 14px; } .sc-filter-grid { gap: 10px 14px; } .sc-filter-field input, .sc-filter-field select, .sc-filter-field textarea { height: 36px; padding: 6px 10px; font-size: 13px; } .sc-filter-field textarea { height: auto; min-height: 64px; } .sc-filter-field label { font-size: 11.5px; font-weight: 500; color: var(--muted-foreground, #6b6a64); letter-spacing: 0.02em; } .sc-filter-actions { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--sc-hairline); gap: 8px; } /* ---- Table toolbar (заголовок таблицы + действия в одной шапке) ---- */ .sc-table-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sc-hairline); } .sc-table-toolbar__title { font-size: 14px; font-weight: 600; margin: 0; display: flex; align-items: center; gap: 10px; color: var(--foreground, #1c1f24); } .sc-table-toolbar__sub { font-size: 12px; color: var(--muted-foreground, #6b6a64); font-weight: 400; } .sc-table-toolbar__actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .sc-table-header-action { /* alias-ярлык */ font-size: 12.5px; padding: 6px 12px; } /* ---- Tables v2: контраст и зебра ---- */ .sc-table thead th { font-size: 11px; font-weight: 600; background: var(--muted, #f0ece3); border-bottom: 1px solid var(--border, #e5e1d8); } .sc-table tbody tr:nth-child(even) td { background: rgba(240, 236, 227, 0.32); } .sc-table tbody tr:hover td { background: rgba(31, 111, 85, 0.05); } /* ---- Sticky column (monthly attendance employee) ---- */ .sc-sticky-col { position: sticky; left: 0; background: var(--card, #ffffff); z-index: 1; box-shadow: 1px 0 0 var(--sc-hairline); } .sc-table thead th.sc-sticky-col { background: var(--muted, #f0ece3); z-index: 2; } .sc-table tbody tr:nth-child(even) td.sc-sticky-col { background: #fafaf6; } .sc-table tbody tr:hover td.sc-sticky-col { background: #f0eee5; } /* ---- KPI v2: чуть крупнее значение, тоньше label ---- */ .sc-kpi-card { padding: 16px 18px; } .sc-kpi-card .sc-kpi-label { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; } .sc-kpi-card .sc-kpi-value { font-size: 30px; letter-spacing: -0.01em; } .sc-kpi-card--accent::before { width: 4px; opacity: 1; } .sc-kpi-card--warn::before { width: 4px; opacity: 1; } .sc-kpi-card--danger::before { width: 4px; opacity: 1; } /* ---- Legend (status colors in monthly) ---- */ .sc-legend { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; padding: 10px 16px; border-bottom: 1px solid var(--sc-hairline); font-size: 12px; color: var(--muted-foreground, #6b6a64); } .sc-legend__item { display: inline-flex; align-items: center; gap: 6px; } .sc-legend__dot { width: 12px; height: 12px; border-radius: 3px; border: 1px solid rgba(15, 18, 22, 0.05); flex-shrink: 0; } .sc-legend__dot--present { background: #eaf6f0; } .sc-legend__dot--late { background: #fbeed1; } .sc-legend__dot--absent { background: #fbe3df; } .sc-legend__dot--no_mapping { background: #f7f0d4; } .sc-legend__dot--weekend { background: #f6f4ee; } /* ---- Info / secure callouts ---- */ .sc-info-callout { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--sc-info-soft); border: 1px solid rgba(30, 68, 128, 0.15); border-radius: var(--sc-radius); color: var(--sc-info-soft-fg); margin-bottom: 18px; } .sc-info-callout__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: rgba(30, 68, 128, 0.12); color: var(--sc-info-soft-fg); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: 'Fraunces', 'Inter', serif; } .sc-info-callout__title { font-weight: 600; margin: 0 0 2px; font-size: 13px; } .sc-info-callout__body { margin: 0; font-size: 13px; opacity: 0.92; } .sc-secure-callout { /* alias for credentials warn block */ display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; background: var(--primary-soft, #e3f0eb); border: 1px solid rgba(31, 111, 85, 0.18); border-radius: var(--sc-radius); color: var(--primary-strong, #145441); margin-bottom: 18px; } .sc-secure-callout__icon { flex-shrink: 0; width: 28px; height: 28px; border-radius: 999px; background: rgba(31, 111, 85, 0.18); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; font-family: 'Fraunces', 'Inter', serif; } .sc-secure-callout__title { font-weight: 600; margin: 0 0 2px; font-size: 13px; } .sc-secure-callout__body { margin: 0; font-size: 13px; opacity: 0.92; } /* ---- Form 2-col (staff/edit-style) ---- */ .sc-form-row-2col { display: grid; grid-template-columns: minmax(0, 2fr) minmax(220px, 1fr); gap: 18px; align-items: start; } @media (max-width: 1024px) { .sc-form-row-2col { grid-template-columns: 1fr; } } .sc-form-card .form-row { display: grid; grid-template-columns: 220px 1fr; align-items: start; gap: 8px 16px; padding: 10px 0; border-bottom: 1px dashed var(--sc-hairline); } .sc-form-card .form-row:last-of-type { border-bottom: 0; } .sc-form-card .form-row > label, .sc-form-card .form-row > .form-row__label { font-size: 12.5px; color: var(--muted-foreground, #4a4a45); font-weight: 600; margin: 6px 0 0; text-transform: none; letter-spacing: 0; } @media (max-width: 720px) { .sc-form-card .form-row { grid-template-columns: 1fr; } } /* ---- Action buttons in section context ---- */ .sc-btn--lg, .sc-btn-lg { padding: 10px 18px; font-size: 13.5px; } /* ---- Empty state v2: чуть мягче ---- */ .sc-empty--boxed { background: var(--muted, #f7f5f0); border-style: dashed; } /* ---- Section block tighter ---- */ .sc-section-block { margin-bottom: 20px; } /* ---- Monthly day-cell: спокойнее ---- */ .day-cell { transition: background-color .12s ease; } .day-cell--present { background: #eaf6f0 !important; color: #145441 !important; } .day-cell--late { background: #fbeed1 !important; color: #7a4a05 !important; } .day-cell--partial { background: #ece5fa !important; color: #4b3380 !important; } .day-cell--absent { background: #fbe3df !important; color: #7a1a10 !important; font-weight: 600 !important; } .day-cell--weekend { background: #f6f4ee !important; color: #6b6a64 !important; } .day-cell--no_mapping { background: #f7f0d4 !important; color: #5a4a05 !important; } .day-cell--future { background: #fafaf6 !important; color: #c5c0b3 !important; } /* ============================================================================ * Phase 4A.2C — Final visual micro polish (demo-ready). * ============================================================================ */ /* ---- Dashboard: компактный summary над KPI ---- */ .sc-dashboard-summary { background: linear-gradient(180deg, #ffffff 0%, #fbfaf6 100%); border: 1px solid var(--border, #e5e1d8); border-radius: var(--sc-radius-lg); padding: 16px 20px 18px; margin-bottom: 20px; box-shadow: var(--sc-shadow-soft); border-left: 3px solid var(--primary, #1f6f55); } .sc-dashboard-summary__title { font-size: 17px; font-weight: 600; margin: 0 0 6px; font-family: 'Fraunces', 'Inter', serif; color: var(--foreground-strong, #0f1216); } .sc-dashboard-summary__sub { margin: 0; font-size: 13px; line-height: 1.55; color: var(--muted-foreground, #6b6a64); max-width: 820px; } /* ---- Device list: компактный KPI-ряд ---- */ .sc-device-kpi-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--sc-hairline); background: var(--muted, #faf9f5); } .sc-device-kpi-row__item { padding: 8px 10px; border-radius: var(--sc-radius); background: var(--card, #ffffff); border: 1px solid var(--sc-hairline); } .sc-device-kpi-row__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground, #6b6a64); margin-bottom: 2px; } .sc-device-kpi-row__value { font-size: 20px; font-weight: 600; font-family: 'Fraunces', 'Inter', serif; color: var(--foreground-strong, #0f1216); } /* ---- Monthly compact: чуть крупнее ячейки дня ---- */ .sc-table--compact .day-cell { min-height: 34px; vertical-align: middle; line-height: 1.35; } .sc-table--compact .day-cell small { font-size: 10.5px; letter-spacing: 0.01em; } .sc-table--compact th:not(.sc-sticky-col) { min-width: 34px; } /* ============================================================================ * Phase 4A.4 — Executive visual analytics (charts, insight cards, report hub) * ============================================================================ */ .sc-chart-empty { margin: 0; padding: 18px 12px; text-align: center; font-size: 13px; color: var(--muted-foreground, #6b6a64); } .sc-chart-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-bottom: 18px; } .sc-chart-grid__split { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; align-items: center; } @media (max-width: 720px) { .sc-chart-grid__split { grid-template-columns: 1fr; } } .sc-chart-card { padding: 14px 16px 10px; border-radius: var(--sc-radius-lg); border: 1px solid var(--sc-hairline); background: linear-gradient(165deg, rgba(255, 255, 255, 0.96), rgba(250, 249, 245, 0.88)); box-shadow: var(--sc-shadow-soft); } .sc-chart-card--embedded { margin: 0 16px 14px; border: 1px solid var(--sc-hairline); } .sc-chart-card--compact { margin-bottom: 16px; } .sc-chart-card--staff { margin-bottom: 16px; } .sc-chart-card--monthly-spark { margin-bottom: 16px; } .sc-chart-card__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 4px; } .sc-chart-card__title { font-weight: 600; font-size: 14px; color: var(--foreground-strong, #0f1216); } .sc-chart-card__hint { font-size: 11px; color: var(--muted-foreground, #6b6a64); } .sc-chart-footnote { font-size: 11px; color: var(--muted-foreground, #6b6a64); margin: 0 0 4px; line-height: 1.45; } .sc-chart-mount { min-height: 200px; } .sc-chart-mount--half { min-height: 220px; } .sc-chart-mount--spark { min-height: 120px; } .sc-chart-mount--spark-wide { min-height: 168px; } .sc-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 16px; } .sc-metric-grid--dense { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); } .sc-metric-card { padding: 12px 14px; position: relative; overflow: hidden; } .sc-metric-card--accent { border-color: rgba(31, 111, 85, 0.22); background: linear-gradient(135deg, rgba(227, 240, 235, 0.65), rgba(255, 255, 255, 0.95)); } .sc-metric-card--warn { border-color: rgba(194, 65, 12, 0.2); } .sc-metric-card__icon { position: absolute; right: 10px; top: 10px; opacity: 0.2; } .sc-metric-card__icon svg { width: 28px; height: 28px; stroke: var(--primary, #1f6f55); } .sc-metric-card__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground, #6b6a64); margin-bottom: 4px; } .sc-metric-card__value { font-size: 22px; font-weight: 600; font-family: "Fraunces", "Inter", serif; color: var(--foreground-strong, #0f1216); } .sc-mini-stat { padding: 10px 12px; text-align: center; } .sc-mini-stat--warn .sc-mini-stat__value { color: var(--warning-soft-fg, #7a4a05); } .sc-mini-stat--danger .sc-mini-stat__value { color: #9f1239; } .sc-mini-stat__label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted-foreground, #6b6a64); } .sc-mini-stat__value { font-size: 18px; font-weight: 600; font-family: "Fraunces", "Inter", serif; } .sc-insight-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin-bottom: 22px; } .sc-insight-card { padding: 14px 14px 12px; border-radius: var(--sc-radius-lg); border: 1px solid var(--sc-hairline); background: var(--card, #ffffff); } .sc-insight-card--warn { border-color: rgba(194, 65, 12, 0.25); background: linear-gradient(180deg, rgba(251, 238, 209, 0.35), #fff); } .sc-insight-card--danger { border-color: rgba(185, 28, 28, 0.22); background: linear-gradient(180deg, rgba(254, 226, 226, 0.35), #fff); } .sc-insight-card__icon { margin-bottom: 8px; color: var(--primary, #1f6f55); } .sc-insight-card__icon svg { width: 22px; height: 22px; } .sc-insight-card--warn .sc-insight-card__icon { color: var(--warning-soft-fg, #7a4a05); } .sc-insight-card--danger .sc-insight-card__icon { color: #b91c1c; } .sc-insight-card__label { font-size: 11px; font-weight: 600; color: var(--muted-foreground, #6b6a64); text-transform: uppercase; letter-spacing: 0.04em; } .sc-insight-card__value { font-size: 26px; font-weight: 600; font-family: "Fraunces", "Inter", serif; margin: 4px 0 2px; color: var(--foreground-strong, #0f1216); } .sc-insight-card__sub { font-size: 12px; color: var(--muted-foreground, #6b6a64); line-height: 1.4; } .sc-risk-card { display: flex; gap: 16px; align-items: flex-start; padding: 16px 18px; margin-bottom: 22px; border-radius: var(--sc-radius-lg); border: 1px solid rgba(194, 65, 12, 0.22); background: linear-gradient(110deg, rgba(251, 238, 209, 0.45), rgba(255, 255, 255, 0.96)); } .sc-risk-card__icon { flex-shrink: 0; } .sc-lucide-risk { width: 36px; height: 36px; stroke: var(--warning-soft-fg, #7a4a05); } .sc-risk-card__title { margin: 0 0 6px; font-size: 16px; font-weight: 600; } .sc-risk-card__text { margin: 0 0 10px; font-size: 13px; line-height: 1.5; color: var(--foreground, #1c1f24); } .sc-risk-card__cta { display: inline-block; margin-bottom: 8px; } .sc-risk-card__chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } .sc-dashboard-summary--hero { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 18px; } .sc-dashboard-summary__icon-wrap { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: rgba(31, 111, 85, 0.1); display: flex; align-items: center; justify-content: center; } .sc-dashboard-summary__lucide { width: 26px; height: 26px; stroke: var(--primary, #1f6f55); } .sc-lucide-inline { width: 14px; height: 14px; vertical-align: -2px; margin-right: 4px; stroke: currentColor; } .sc-kpi-label--icon { display: flex; align-items: center; gap: 4px; } .sc-section-title--charts { margin-top: 8px; } .sc-events-secondary { opacity: 0.97; border: 1px solid var(--sc-hairline); } .sc-hero-card--reports-hub { margin-bottom: 18px; } .sc-hero-card__row { display: flex; gap: 16px; align-items: flex-start; } .sc-hero-card__icon-wrap { flex-shrink: 0; width: 48px; height: 48px; border-radius: 14px; background: rgba(31, 111, 85, 0.08); display: flex; align-items: center; justify-content: center; } .sc-hero-card__lucide { width: 26px; height: 26px; stroke: var(--primary, #1f6f55); } .sc-reports-kpi-wrap { margin-bottom: 8px; } .sc-report-grid--landing { gap: 18px; } .sc-report-card--rich { display: flex; flex-direction: column; gap: 8px; padding: 18px 18px 16px; min-height: 200px; } .sc-report-icon { display: flex; width: 40px; height: 40px; border-radius: 12px; align-items: center; justify-content: center; background: rgba(31, 111, 85, 0.08); margin-bottom: 4px; } .sc-report-icon svg { width: 22px; height: 22px; stroke: var(--primary, #1f6f55); } .sc-report-card__purpose { font-size: 12px; line-height: 1.45; color: var(--foreground, #1c1f24); margin: 0; } .sc-mini-stat-wrap { grid-column: span 1; min-width: 200px; } .sc-callout--devices-ops { margin-bottom: 16px; background: linear-gradient(90deg, rgba(227, 240, 235, 0.5), rgba(255, 255, 255, 0.95)); border-color: rgba(31, 111, 85, 0.2); } .sc-callout__icon { flex-shrink: 0; color: var(--primary, #1f6f55); } .sc-callout__icon svg { width: 22px; height: 22px; } .sc-dept-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 16px 12px; } .sc-dept-chip { font-size: 11px; padding: 4px 8px; border-radius: 999px; background: var(--muted, #faf9f5); border: 1px solid var(--sc-hairline); color: var(--muted-foreground, #6b6a64); } .sc-monthly-section { margin-bottom: 16px; } .sc-infographic-legend-intro { margin: 0; padding: 10px 16px 0; font-size: 12px; color: var(--muted-foreground, #6b6a64); display: flex; align-items: flex-start; gap: 8px; line-height: 1.45; } .sc-legend--monthly { padding-top: 4px; } /* ============================================================================ * Phase 4A.5 — Flowbite-inspired Premium SaaS UI Layer. * Без runtime Flowbite/Tailwind: воспроизводим паттерны через sc-* классы. * Цели: меньше «бежевой пустоты», крепче карточки, премиальный hero/чарт-панели, * премиальные таблицы, мягче heatmap, sticky topbar, ровнее иерархия. * ============================================================================ */ /* ---- Workspace surface (ровный современный фон + аккуратная ширина) ---- */ .sc-page-workspace { display: block; max-width: 1480px; margin: 0 auto; padding-top: 4px; } .sc-content { background: linear-gradient(180deg, rgba(255, 255, 255, 0.5) 0%, rgba(247, 245, 240, 0) 220px), var(--background, #f7f5f0); } /* ---- Sidebar v3: брендовая полоска под лого, тонкая иерархия ---- */ .sc-sidebar { background: linear-gradient(180deg, rgba(31, 111, 85, 0.025) 0%, rgba(255, 255, 255, 0) 160px), var(--card, #ffffff); } .sc-brand-block { padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1px solid var(--sc-hairline); } .sc-sidebar-link, .sc-nav a { border-radius: 9px; position: relative; letter-spacing: 0.005em; } .sc-sidebar-link.is-active::before, .sc-nav a.is-active::before { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: var(--primary, #1f6f55); } /* ---- Topbar v3: sticky + ровная нижняя линия ---- */ .sc-topbar { position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.05); } /* ---- Section kicker (мини-надзаголовок над секцией) ---- */ .sc-section-kicker { display: inline-flex; align-items: center; gap: 6px; font-size: 10.5px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--primary-strong, #145441); background: var(--primary-soft, #e3f0eb); padding: 4px 9px; border-radius: 999px; margin-bottom: 10px; } /* ---- Soft icon (унифицированный square-фон под иконку) ---- */ .sc-soft-icon { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 12px; background: rgba(31, 111, 85, 0.09); color: var(--primary, #1f6f55); flex-shrink: 0; } .sc-soft-icon svg { width: 22px; height: 22px; stroke: currentColor; } .sc-soft-icon--lg { width: 48px; height: 48px; border-radius: 14px; } .sc-soft-icon--lg svg { width: 26px; height: 26px; } .sc-soft-icon--accent { background: rgba(31, 111, 85, 0.12); color: var(--primary-strong, #145441); } .sc-soft-icon--warn { background: rgba(122, 74, 5, 0.12); color: var(--warning-soft-fg, #7a4a05); } .sc-soft-icon--danger { background: rgba(185, 28, 28, 0.1); color: #b91c1c; } .sc-soft-icon--muted { background: var(--muted, #f0ece3); color: var(--muted-foreground, #6b6a64); } /* ---- Executive hero (премиальный hero-блок страницы) ---- */ .sc-executive-hero { position: relative; background: radial-gradient(140% 140% at 100% 0%, rgba(31, 111, 85, 0.10), transparent 55%), linear-gradient(180deg, #ffffff 0%, #fbf8f1 100%); border: 1px solid var(--border, #e5e1d8); border-radius: var(--sc-radius-lg); padding: 22px 26px 22px; margin-bottom: 22px; box-shadow: var(--sc-shadow-card); } .sc-executive-hero__head { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; } .sc-executive-hero__main { display: flex; gap: 16px; align-items: flex-start; min-width: 0; } .sc-executive-hero__title { font-size: 22px; font-weight: 600; margin: 0 0 6px; font-family: 'Fraunces', 'Inter', serif; color: var(--foreground-strong, #0f1216); letter-spacing: -0.01em; } .sc-executive-hero__sub { margin: 0; font-size: 13.5px; color: var(--muted-foreground, #6b6a64); max-width: 760px; line-height: 1.55; } .sc-executive-hero__chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-left: auto; } /* ---- Status chip (компактные метрики справа от hero) ---- */ .sc-status-chip { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px 7px 10px; background: var(--card, #ffffff); border: 1px solid var(--sc-hairline); border-radius: 999px; font-size: 12px; color: var(--foreground, #1c1f24); box-shadow: var(--sc-shadow-soft); } .sc-status-chip__icon { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); } .sc-status-chip__icon svg { width: 13px; height: 13px; stroke: currentColor; } .sc-status-chip__label { text-transform: uppercase; letter-spacing: 0.05em; font-size: 10px; color: var(--muted-foreground, #6b6a64); } .sc-status-chip__value { font-weight: 600; font-size: 13px; color: var(--foreground-strong, #0f1216); } .sc-status-chip--accent { border-color: rgba(31, 111, 85, 0.25); } .sc-status-chip--warn .sc-status-chip__icon { background: rgba(122, 74, 5, 0.12); color: var(--warning-soft-fg, #7a4a05); } .sc-status-chip--warn { border-color: rgba(122, 74, 5, 0.22); } .sc-status-chip--danger .sc-status-chip__icon { background: rgba(185, 28, 28, 0.1); color: #b91c1c; } .sc-status-chip--danger { border-color: rgba(185, 28, 28, 0.18); } /* ---- Executive grid (main + side) ---- */ .sc-executive-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; margin-bottom: 18px; } .sc-executive-grid__main { display: flex; flex-direction: column; gap: 16px; } .sc-executive-grid__side { display: flex; flex-direction: column; gap: 16px; } @media (max-width: 1100px) { .sc-executive-grid { grid-template-columns: 1fr; } } /* ============================================================================ * Phase 4A.5B — Dashboard layout balance (/dashboard/ only) * Причина «дыры»: CSS Grid по умолчанию align-items: stretch — левая колонка * с одним area-графиком растягивалась под высоту правой (2 карточки + split). * Решение: align-items: start + компактные min-height только внутри обёртки. * ============================================================================ */ .sc-dashboard-analytics { margin-bottom: 14px; } .sc-dashboard-analytics .sc-executive-grid.sc-chart-grid { align-items: start; margin-bottom: 0; } .sc-dashboard-analytics .sc-executive-grid__main, .sc-dashboard-analytics .sc-executive-grid__side { min-height: 0; } .sc-dashboard-analytics .sc-chart-grid__split { align-items: start; } .sc-dashboard-analytics .sc-chart-mount.sc-chart-mount--dashboard-main { min-height: 284px; } .sc-dashboard-analytics .sc-chart-mount.sc-chart-mount--dashboard-donut { min-height: 208px; } .sc-dashboard-analytics .sc-chart-mount.sc-chart-mount--dashboard-device, .sc-dashboard-analytics .sc-chart-mount.sc-chart-mount--dashboard-radial { min-height: 188px; } .sc-dashboard-analytics + .sc-flowbite-alert, .sc-dashboard-analytics + .sc-risk-card { margin-top: 2px; } /* ============================================================================ * Phase 4A.5C — Dashboard analytics grid architecture (/dashboard/ only) * Архитектурная правка: risk card перенесён внутрь левой колонки grid, * чтобы пустота под area-графиком заполнялась полезным контентом. * Это устраняет «бежевую дыру», не завися от высот графиков. * ============================================================================ */ .sc-dashboard-analytics .sc-dashboard-analytics-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 16px; align-items: start; margin-bottom: 0; } .sc-dashboard-analytics-left, .sc-dashboard-analytics-right { display: flex; flex-direction: column; gap: 16px; min-width: 0; min-height: 0; } .sc-dashboard-analytics-left .sc-risk-card, .sc-dashboard-analytics-right .sc-risk-card { margin-top: 0; } @media (max-width: 1100px) { .sc-dashboard-analytics .sc-dashboard-analytics-grid { grid-template-columns: 1fr; } } /* ---- Visual / chart panels (премиальные карточки с графиком) ---- */ .sc-visual-card { background: var(--card, #ffffff); border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius-lg); padding: 16px 18px 14px; box-shadow: var(--sc-shadow-soft); } .sc-chart-panel { background: var(--card, #ffffff); border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius-lg); padding: 14px 18px 12px; box-shadow: var(--sc-shadow-soft); display: flex; flex-direction: column; gap: 6px; } .sc-chart-panel__header { display: flex; align-items: flex-start; gap: 12px; justify-content: space-between; flex-wrap: wrap; } .sc-chart-panel__title { font-size: 14px; font-weight: 600; color: var(--foreground-strong, #0f1216); margin: 0; } .sc-chart-panel__sub { margin: 0; font-size: 11.5px; color: var(--muted-foreground, #6b6a64); } .sc-chart-panel__summary { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); padding: 3px 9px; border-radius: 999px; font-weight: 600; } .sc-chart-panel__summary--warn { background: rgba(122, 74, 5, 0.12); color: var(--warning-soft-fg, #7a4a05); } .sc-chart-panel__summary--danger { background: rgba(185, 28, 28, 0.1); color: #b91c1c; } /* ---- Module card (премиальная плитка отчёта/раздела) ---- */ .sc-module-card { display: flex; flex-direction: column; gap: 10px; padding: 18px 18px 16px; background: var(--card, #ffffff); border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-soft); text-decoration: none !important; color: inherit; position: relative; overflow: hidden; transition: box-shadow .15s ease, border-color .15s ease, transform .15s ease; min-height: 200px; } .sc-module-card::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(31, 111, 85, 0.0) 60%, rgba(31, 111, 85, 0.04) 100%); opacity: 0; transition: opacity .2s ease; } .sc-module-card:hover { border-color: rgba(31, 111, 85, 0.28); box-shadow: var(--sc-shadow-hover); transform: translateY(-1px); } .sc-module-card:hover::after { opacity: 1; } .sc-module-card__icon { width: 40px; height: 40px; border-radius: 12px; background: rgba(31, 111, 85, 0.09); display: inline-flex; align-items: center; justify-content: center; } .sc-module-card__icon svg { width: 22px; height: 22px; stroke: var(--primary-strong, #145441); } /* ---- Action chip (универсальный chip для действий/форматов) ---- */ .sc-action-chip { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; border: 1px solid var(--sc-hairline); background: var(--card, #ffffff); color: var(--muted-foreground, #6b6a64); } .sc-action-chip--accent { background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); border-color: rgba(31, 111, 85, 0.2); } /* ---- Premium table card (Flowbite-style table wrapper) ---- */ .sc-premium-table-card { background: var(--card, #ffffff); border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius-lg); box-shadow: var(--sc-shadow-soft); overflow: hidden; margin-bottom: 18px; } .sc-premium-table-card__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--sc-hairline); background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(250, 249, 245, 0.5)); } .sc-premium-table-card__title { font-size: 14px; font-weight: 600; color: var(--foreground-strong, #0f1216); margin: 0; display: flex; align-items: center; gap: 8px; } .sc-premium-table-card__sub { font-size: 11.5px; color: var(--muted-foreground, #6b6a64); } .sc-premium-table-card .sc-table { border: 0; border-radius: 0; } .sc-premium-table-card .sc-table thead th { background: var(--card, #ffffff); border-bottom: 1px solid var(--sc-hairline); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground, #6b6a64); } .sc-premium-table-card .sc-table tbody tr:hover { background: rgba(31, 111, 85, 0.03); } /* ---- Flowbite-pattern cards & alerts ---- */ .sc-flowbite-card { background: var(--card, #ffffff); border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius-lg); padding: 16px 18px; box-shadow: var(--sc-shadow-soft); } .sc-flowbite-alert { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius); background: var(--card, #ffffff); font-size: 13px; line-height: 1.5; margin-bottom: 16px; } .sc-flowbite-alert__title { font-weight: 600; margin: 0 0 2px; font-size: 13px; } .sc-flowbite-alert__body { margin: 0; color: var(--muted-foreground, #6b6a64); } .sc-flowbite-alert--info { background: linear-gradient(90deg, rgba(227, 240, 235, 0.55), rgba(255, 255, 255, 0.95)); border-color: rgba(31, 111, 85, 0.22); } .sc-flowbite-alert--warn { background: linear-gradient(90deg, rgba(251, 238, 209, 0.55), rgba(255, 255, 255, 0.95)); border-color: rgba(122, 74, 5, 0.22); } .sc-flowbite-alert--danger { background: linear-gradient(90deg, rgba(254, 226, 226, 0.55), rgba(255, 255, 255, 0.95)); border-color: rgba(185, 28, 28, 0.22); } .sc-flowbite-alert .sc-soft-icon { background: rgba(31, 111, 85, 0.12); } .sc-flowbite-alert--warn .sc-soft-icon { background: rgba(122, 74, 5, 0.14); color: var(--warning-soft-fg, #7a4a05); } .sc-flowbite-alert--danger .sc-soft-icon { background: rgba(185, 28, 28, 0.1); color: #b91c1c; } /* ---- KPI v3: тонкий цветной accent-border ---- */ .sc-kpi-card { position: relative; } .sc-kpi-card::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 3px; border-radius: 0 3px 3px 0; background: transparent; } .sc-kpi-card.sc-kpi-card--accent::before { background: var(--primary, #1f6f55); } .sc-kpi-card.sc-kpi-card--warn::before { background: var(--warning-soft-fg, #7a4a05); } .sc-kpi-card.sc-kpi-card--danger::before { background: #b91c1c; } /* ---- Refined Apex chart hosts ---- */ .sc-chart-mount .apexcharts-tooltip { border-radius: 8px !important; box-shadow: 0 6px 20px rgba(15, 18, 22, 0.08) !important; } /* ---- Heatmap polish (мягче палитра, ровнее текст) ---- */ .sc-table--compact .day-cell { border-radius: 4px; transition: filter .15s ease; } .sc-table--compact .day-cell:hover { filter: brightness(0.98); } .day-cell--present { background: #ebf5ee !important; color: #146042 !important; } .day-cell--late { background: #fbf2da !important; color: #7a4a05 !important; } .day-cell--partial { background: #efe8fa !important; color: #4b3380 !important; } .day-cell--absent { background: #fbe6e1 !important; color: #7a1a10 !important; } .day-cell--weekend { background: #f6f4ee !important; color: #97928a !important; } .day-cell--no_mapping { background: #f7f1d8 !important; color: #5a4a05 !important; } .day-cell--future { background: #fafaf6 !important; color: #c5c0b3 !important; } /* ---- Dashboard recent events: вторичная подача ---- */ .sc-events-secondary { background: rgba(255, 255, 255, 0.96); } .sc-events-secondary .sc-table-toolbar { background: linear-gradient(180deg, rgba(255, 255, 255, 1), rgba(250, 249, 245, 0.5)); } /* ---- Devices control center ---- */ .sc-control-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 16px; padding: 14px 16px 18px; } @media (max-width: 1024px) { .sc-control-grid { grid-template-columns: 1fr; } } .sc-control-list { display: flex; flex-direction: column; gap: 10px; } .sc-control-item { display: flex; gap: 12px; padding: 12px 14px; border: 1px solid var(--sc-hairline); border-radius: var(--sc-radius); background: var(--card, #ffffff); align-items: flex-start; } .sc-control-item__title { margin: 0 0 2px; font-size: 13px; font-weight: 600; } .sc-control-item__text { margin: 0; font-size: 12px; color: var(--muted-foreground, #6b6a64); line-height: 1.5; } /* ---- Reports hub: модульная решётка ---- */ .sc-module-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; } @media (min-width: 1280px) { .sc-module-grid { grid-template-columns: repeat(3, 1fr); } } /* ---- Hero v2: устраняем большой пустой блок над hub/staff ---- */ .sc-page-header { margin-bottom: 14px; } .sc-page-header.sc-page-header--flat { border-bottom: 0; padding-bottom: 0; margin-bottom: 12px; } /* ---- Helpers ---- */ .sc-stack-y-12 > * + * { margin-top: 12px; } .sc-row-gap-8 { display: flex; gap: 8px; flex-wrap: wrap; } /* ============================================================================ * Phase 5A — Public sales landing (/landing/) * Премиальный SaaS-лендинг StaffControl HR. Самостоятельный визуальный слой, * не зависит от sidebar/topbar внутреннего шелла. Использует те же переменные * палитры (--primary, --sc-hairline, --card и т.п.). * ============================================================================ */ .sc-landing { margin: 0; background: radial-gradient(60rem 30rem at 88% -10%, rgba(31, 111, 85, 0.08), transparent 60%), radial-gradient(50rem 28rem at -5% 5%, rgba(122, 74, 5, 0.05), transparent 65%), linear-gradient(180deg, #fbf9f4 0%, #ffffff 100%); color: var(--foreground-strong, #0f1216); font-family: inherit; -webkit-font-smoothing: antialiased; min-height: 100vh; } .sc-landing main { display: block; } .sc-landing a { color: var(--primary, #1f6f55); text-decoration: none; } .sc-landing a:hover { text-decoration: underline; } .sc-landing h1, .sc-landing h2, .sc-landing h3 { color: #0f1216; letter-spacing: -0.01em; } /* ---- Top nav ---- */ .sc-landing-nav { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 14px 32px; background: rgba(255, 255, 255, 0.78); border-bottom: 1px solid rgba(31, 111, 85, 0.08); backdrop-filter: saturate(140%) blur(8px); } .sc-landing-nav__brand { display: inline-flex; align-items: center; gap: 10px; color: #0f1216 !important; text-decoration: none !important; } .sc-landing-nav__logo { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(31, 111, 85, 0.12); color: var(--primary, #1f6f55); } .sc-landing-nav__title { font-weight: 700; font-size: 15px; } .sc-landing-nav__links { display: flex; align-items: center; gap: 22px; margin-left: auto; } .sc-landing-nav__links a { font-size: 13.5px; color: #2a2d33 !important; text-decoration: none !important; padding: 6px 4px; border-bottom: 2px solid transparent; transition: border-color .15s ease, color .15s ease; } .sc-landing-nav__links a:hover { color: var(--primary, #1f6f55) !important; border-bottom-color: rgba(31, 111, 85, 0.35); } .sc-landing-nav__login { font-weight: 600; } /* ---- CTAs ---- */ .sc-landing-cta { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 10px 18px; border-radius: 10px; font-size: 13.5px; font-weight: 600; border: 1px solid transparent; cursor: pointer; text-decoration: none !important; transition: transform .12s ease, box-shadow .15s ease, background .15s ease; } .sc-landing-cta--primary { background: var(--primary, #1f6f55); color: #ffffff !important; box-shadow: 0 8px 22px rgba(31, 111, 85, 0.22); } .sc-landing-cta--primary:hover { background: #195a45; transform: translateY(-1px); } .sc-landing-cta--secondary { background: #ffffff; color: #0f1216 !important; border-color: var(--sc-hairline, #e7e3d8); } .sc-landing-cta--secondary:hover { border-color: rgba(31, 111, 85, 0.35); color: var(--primary, #1f6f55) !important; } /* ---- Generic landing card ---- */ .sc-landing-card { background: #ffffff; border: 1px solid var(--sc-hairline, #e7e3d8); border-radius: 16px; box-shadow: 0 1px 0 rgba(15, 18, 22, 0.02), 0 14px 28px -22px rgba(15, 18, 22, 0.18); padding: 18px 20px; } /* ---- Section frame ---- */ .sc-landing-section { max-width: 1180px; margin: 0 auto; padding: 64px 32px; } .sc-landing-section__head { max-width: 760px; margin: 0 auto 28px; text-align: center; } .sc-landing-section__kicker { display: inline-block; padding: 4px 10px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--primary, #1f6f55); background: rgba(31, 111, 85, 0.08); border-radius: 999px; margin-bottom: 12px; } .sc-landing-section__title { font-size: 28px; font-weight: 700; margin: 0 0 8px; line-height: 1.2; } .sc-landing-section__sub { font-size: 14px; color: var(--muted-foreground, #6b6a64); margin: 0 auto; max-width: 660px; line-height: 1.55; } /* ---- Hero ---- */ .sc-landing-hero { max-width: 1240px; margin: 0 auto; padding: 56px 32px 32px; } .sc-landing-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: 36px; align-items: center; } @media (max-width: 980px) { .sc-landing-hero-grid { grid-template-columns: 1fr; } } .sc-landing-badge { display: inline-block; padding: 6px 12px; font-size: 11.5px; letter-spacing: .04em; color: var(--primary, #1f6f55); background: rgba(31, 111, 85, 0.1); border: 1px solid rgba(31, 111, 85, 0.18); border-radius: 999px; margin-bottom: 18px; } .sc-landing-hero__title { font-size: 42px; line-height: 1.1; font-weight: 800; margin: 0 0 16px; letter-spacing: -0.015em; } @media (max-width: 720px) { .sc-landing-hero__title { font-size: 32px; } } .sc-landing-hero__sub { font-size: 16px; color: var(--muted-foreground, #6b6a64); line-height: 1.6; margin: 0 0 24px; max-width: 560px; } .sc-landing-hero__cta { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 24px; } .sc-landing-trust { display: flex; flex-wrap: wrap; gap: 14px 20px; list-style: none; padding: 0; margin: 0; color: #2a2d33; font-size: 13px; } .sc-landing-trust li { display: inline-flex; align-items: center; gap: 8px; } .sc-landing-trust__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary, #1f6f55); box-shadow: 0 0 0 4px rgba(31, 111, 85, 0.12); } /* ---- Hero visual mock ---- */ .sc-landing-hero__visual { display: flex; justify-content: center; } .sc-landing-mock { width: 100%; max-width: 460px; background: #ffffff; border: 1px solid var(--sc-hairline, #e7e3d8); border-radius: 18px; box-shadow: 0 30px 60px -28px rgba(15, 18, 22, 0.28); padding: 16px 18px; display: flex; flex-direction: column; gap: 12px; } .sc-landing-mock__head { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted-foreground, #6b6a64); } .sc-landing-mock__title { font-weight: 600; color: #0f1216; } .sc-landing-mock__chip { font-size: 11px; padding: 3px 8px; border-radius: 999px; background: rgba(31, 111, 85, 0.08); color: var(--primary, #1f6f55); } .sc-landing-mock__kpis { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sc-landing-mock__kpi { border: 1px solid var(--sc-hairline, #e7e3d8); border-radius: 12px; padding: 10px 12px; background: #fbfaf5; } .sc-landing-mock__kpi-label { font-size: 11.5px; color: var(--muted-foreground, #6b6a64); } .sc-landing-mock__kpi-value { font-size: 22px; font-weight: 700; color: #0f1216; line-height: 1.2; } .sc-landing-mock__kpi--accent { border-color: rgba(31, 111, 85, 0.32); background: rgba(31, 111, 85, 0.06); } .sc-landing-mock__kpi--accent .sc-landing-mock__kpi-value { color: var(--primary, #1f6f55); } .sc-landing-mock__kpi--warn { border-color: rgba(122, 74, 5, 0.28); background: rgba(251, 238, 209, 0.45); } .sc-landing-mock__kpi--warn .sc-landing-mock__kpi-value { color: #7a4a05; } .sc-landing-mock__kpi--danger { border-color: rgba(185, 28, 28, 0.28); background: rgba(254, 226, 226, 0.45); } .sc-landing-mock__kpi--danger .sc-landing-mock__kpi-value { color: #b91c1c; } .sc-landing-mock__chart { border: 1px solid var(--sc-hairline, #e7e3d8); border-radius: 12px; background: linear-gradient(180deg, #ffffff, #fbfaf5); padding: 8px 10px; } .sc-landing-mock__row { display: flex; gap: 8px; flex-wrap: wrap; } .sc-landing-mock__pill { font-size: 11.5px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--sc-hairline, #e7e3d8); background: #ffffff; } .sc-landing-mock__pill--ok { background: rgba(31, 111, 85, 0.08); color: var(--primary, #1f6f55); border-color: rgba(31, 111, 85, 0.25); } .sc-landing-mock__pill--warn { background: rgba(251, 238, 209, 0.55); color: #7a4a05; border-color: rgba(122, 74, 5, 0.28); } /* ---- Pains ---- */ .sc-landing-pain-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; } .sc-landing-pain { font-size: 14px; color: #2a2d33; line-height: 1.55; border-left: 3px solid rgba(185, 28, 28, 0.55); } /* ---- Solution / features ---- */ .sc-landing-feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .sc-landing-feature { display: flex; flex-direction: column; gap: 8px; } .sc-landing-feature__icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(31, 111, 85, 0.1); color: var(--primary, #1f6f55); margin-bottom: 4px; } .sc-landing-feature__title { font-size: 15px; font-weight: 700; margin: 0; } .sc-landing-feature__text { font-size: 13.5px; color: var(--muted-foreground, #6b6a64); margin: 0; line-height: 1.55; } /* ---- Analytics stats grid ---- */ .sc-landing-analytics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } .sc-landing-stat { display: flex; flex-direction: column; gap: 4px; } .sc-landing-stat__label { font-size: 12.5px; color: var(--muted-foreground, #6b6a64); } .sc-landing-stat__value { font-size: 28px; font-weight: 800; color: #0f1216; line-height: 1.1; } .sc-landing-stat__sub { font-size: 11.5px; color: var(--muted-foreground, #6b6a64); } .sc-landing-stat--accent { border-color: rgba(31, 111, 85, 0.28); background: rgba(31, 111, 85, 0.04); } .sc-landing-stat--accent .sc-landing-stat__value { color: var(--primary, #1f6f55); } .sc-landing-stat--warn { border-color: rgba(122, 74, 5, 0.24); background: rgba(251, 238, 209, 0.35); } .sc-landing-stat--warn .sc-landing-stat__value { color: #7a4a05; } .sc-landing-stat--danger { border-color: rgba(185, 28, 28, 0.22); background: rgba(254, 226, 226, 0.32); } .sc-landing-stat--danger .sc-landing-stat__value { color: #b91c1c; } /* ---- Audience ---- */ .sc-landing-audience-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 12px; } .sc-landing-audience-card { text-align: center; font-size: 14px; font-weight: 600; padding: 22px 12px; background: linear-gradient(180deg, #ffffff, #fbfaf5); transition: transform .15s ease, border-color .15s ease; } .sc-landing-audience-card:hover { transform: translateY(-2px); border-color: rgba(31, 111, 85, 0.32); } /* ---- Security ---- */ .sc-landing-section--security { background: #ffffff; } .sc-landing-security { max-width: 860px; margin: 0 auto; background: linear-gradient(180deg, rgba(31, 111, 85, 0.05), #ffffff); border: 1px solid rgba(31, 111, 85, 0.18); border-radius: 18px; padding: 28px 32px; } .sc-landing-security__lead { font-size: 15px; line-height: 1.65; color: #2a2d33; margin: 0 0 16px; } .sc-landing-security__bullets { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 8px 16px; font-size: 13.5px; color: #2a2d33; } .sc-landing-security__bullets li { position: relative; padding-left: 18px; } .sc-landing-security__bullets li::before { content: ""; position: absolute; left: 0; top: 8px; width: 8px; height: 8px; border-radius: 50%; background: var(--primary, #1f6f55); box-shadow: 0 0 0 3px rgba(31, 111, 85, 0.15); } /* ---- Pricing ---- */ .sc-landing-pricing-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 18px; margin-bottom: 32px; } @media (min-width: 1100px) { .sc-landing-pricing-grid { grid-template-columns: repeat(3, 1fr); } } .sc-pricing-card { display: flex; flex-direction: column; gap: 14px; padding: 22px 22px 24px; position: relative; } .sc-pricing-card__head { display: flex; flex-direction: column; gap: 4px; } .sc-pricing-card__name { font-size: 14px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary, #1f6f55); margin: 0; } .sc-pricing-card__sub { font-size: 13px; color: var(--muted-foreground, #6b6a64); margin: 0; } .sc-pricing-card--popular { border: 1.5px solid rgba(31, 111, 85, 0.55); background: linear-gradient(180deg, rgba(31, 111, 85, 0.05), #ffffff); box-shadow: 0 32px 60px -28px rgba(31, 111, 85, 0.32); } .sc-pricing-card__ribbon { position: absolute; top: -12px; right: 16px; background: var(--primary, #1f6f55); color: #ffffff; font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 5px 10px; border-radius: 999px; box-shadow: 0 8px 20px rgba(31, 111, 85, 0.24); } .sc-pricing-price { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; border-bottom: 1px dashed var(--sc-hairline, #e7e3d8); padding-bottom: 12px; } .sc-pricing-price__from { font-size: 12px; color: var(--muted-foreground, #6b6a64); } .sc-pricing-price__value { font-size: 26px; font-weight: 800; color: #0f1216; } .sc-pricing-price__cur { font-size: 13px; color: var(--muted-foreground, #6b6a64); } .sc-pricing-feature { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; font-size: 13.5px; color: #2a2d33; } .sc-pricing-feature li { position: relative; padding-left: 20px; line-height: 1.5; } .sc-pricing-feature li::before { content: ""; position: absolute; left: 0; top: 7px; width: 12px; height: 6px; border-left: 2px solid var(--primary, #1f6f55); border-bottom: 2px solid var(--primary, #1f6f55); transform: rotate(-45deg); border-bottom-left-radius: 2px; } .sc-pricing-card .sc-landing-cta { margin-top: auto; } /* ---- Support ---- */ .sc-landing-support { max-width: 980px; margin: 0 auto; text-align: center; } .sc-landing-support__title { font-size: 18px; font-weight: 700; margin: 12px 0 4px; } .sc-landing-support__sub { font-size: 13px; color: var(--muted-foreground, #6b6a64); margin: 0 0 16px; } .sc-landing-support__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; margin-bottom: 14px; } .sc-landing-support__card { text-align: left; padding: 16px 18px; } .sc-landing-support__name { font-size: 13px; font-weight: 700; letter-spacing: .04em; color: #0f1216; } .sc-landing-support__price { font-size: 15px; font-weight: 700; color: var(--primary, #1f6f55); margin-top: 4px; } .sc-landing-support__sub { font-size: 12.5px; color: var(--muted-foreground, #6b6a64); margin-top: 2px; } .sc-landing-support__card--popular { border-color: rgba(31, 111, 85, 0.35); background: linear-gradient(180deg, rgba(31, 111, 85, 0.04), #ffffff); } .sc-landing-support__note { font-size: 12px; color: var(--muted-foreground, #6b6a64); margin: 0; } /* ---- Process steps ---- */ .sc-landing-process { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 14px; } .sc-process-step { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: #2a2d33; line-height: 1.55; } .sc-process-step__num { flex: 0 0 auto; width: 32px; height: 32px; border-radius: 50%; background: rgba(31, 111, 85, 0.12); color: var(--primary, #1f6f55); font-weight: 800; display: inline-flex; align-items: center; justify-content: center; } /* ---- FAQ ---- */ .sc-landing-faq { display: grid; grid-template-columns: 1fr; gap: 10px; max-width: 880px; margin: 0 auto; } .sc-faq-card { padding: 0; overflow: hidden; } .sc-faq-card summary { list-style: none; cursor: pointer; padding: 16px 20px; font-weight: 600; font-size: 14px; color: #0f1216; display: flex; align-items: center; justify-content: space-between; } .sc-faq-card summary::-webkit-details-marker { display: none; } .sc-faq-card summary::after { content: "+"; font-size: 18px; color: var(--primary, #1f6f55); font-weight: 600; transition: transform .15s ease; } .sc-faq-card[open] summary::after { content: "−"; } .sc-faq-card p { margin: 0; padding: 0 20px 16px; font-size: 13.5px; color: var(--muted-foreground, #6b6a64); line-height: 1.6; } /* ---- Final CTA ---- */ .sc-landing-section--final { padding-top: 24px; padding-bottom: 64px; } .sc-landing-final { max-width: 760px; margin: 0 auto; background: linear-gradient(135deg, rgba(31, 111, 85, 0.95), rgba(20, 96, 66, 0.95)); color: #ffffff; border-radius: 20px; padding: 38px 40px; text-align: center; box-shadow: 0 32px 60px -22px rgba(31, 111, 85, 0.4); } .sc-landing-final__title { color: #ffffff; font-size: 24px; font-weight: 800; margin: 0 0 10px; line-height: 1.25; } .sc-landing-final__sub { color: rgba(255, 255, 255, 0.9); font-size: 14px; margin: 0 0 22px; line-height: 1.55; } .sc-landing-final__cta { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .sc-landing-final .sc-landing-cta--primary { background: #ffffff; color: var(--primary, #1f6f55) !important; box-shadow: 0 14px 24px rgba(0, 0, 0, 0.16); } .sc-landing-final .sc-landing-cta--primary:hover { background: #f4f8f6; } .sc-landing-final .sc-landing-cta--secondary { background: transparent; color: #ffffff !important; border-color: rgba(255, 255, 255, 0.55); } .sc-landing-final .sc-landing-cta--secondary:hover { border-color: #ffffff; color: #ffffff !important; } /* ---- Footer ---- */ .sc-landing-footer { border-top: 1px solid rgba(31, 111, 85, 0.1); padding: 22px 32px 28px; display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; font-size: 12.5px; color: var(--muted-foreground, #6b6a64); background: #fbfaf5; } .sc-landing-footer__brand { font-weight: 600; color: #0f1216; } .sc-landing-footer__links { display: flex; gap: 18px; flex-wrap: wrap; } .sc-landing-footer__links a { color: #2a2d33 !important; text-decoration: none !important; } .sc-landing-footer__links a:hover { color: var(--primary, #1f6f55) !important; } .sc-landing-footer__copy { font-size: 11.5px; } /* ============================================================================ * Phase 5B — Landing conversion polish * Узкоспециализированные классы под конверсионные правки лендинга: * результатный блок, pricing-разделители, security-highlight, контакт-карточки * в финальном блоке. Никаких глобальных правок. * ============================================================================ */ /* ---- Results section ("Что получает бизнес после внедрения") ---- */ .sc-landing-section--results { padding-top: 48px; padding-bottom: 32px; } .sc-landing-results-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .sc-landing-result { display: flex; flex-direction: column; gap: 8px; } .sc-landing-result__icon { width: 38px; height: 38px; border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; background: rgba(31, 111, 85, 0.1); color: var(--primary, #1f6f55); margin-bottom: 4px; } .sc-landing-result__title { font-size: 15px; font-weight: 700; margin: 0; color: #0f1216; } .sc-landing-result__text { font-size: 13.5px; color: var(--muted-foreground, #6b6a64); margin: 0; line-height: 1.55; } /* ---- Pricing section: top note + group dividers ---- */ .sc-landing-pricing-note { max-width: 760px; margin: 0 auto 18px; text-align: center; font-size: 13px; color: var(--muted-foreground, #6b6a64); background: rgba(31, 111, 85, 0.04); border: 1px dashed rgba(31, 111, 85, 0.22); border-radius: 12px; padding: 10px 16px; } .sc-landing-pricing-group { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 14px 0 12px; padding: 0 4px; } .sc-landing-pricing-group--support { margin-top: 28px; } .sc-landing-pricing-group__label { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--primary, #1f6f55); font-weight: 700; background: rgba(31, 111, 85, 0.08); padding: 4px 10px; border-radius: 999px; } .sc-landing-pricing-group__hint { font-size: 12.5px; color: var(--muted-foreground, #6b6a64); } /* ---- Security highlight ---- */ .sc-landing-security__highlight { margin: 0 0 14px; padding: 12px 16px; background: linear-gradient(180deg, rgba(31, 111, 85, 0.1), rgba(31, 111, 85, 0.04)); border: 1px solid rgba(31, 111, 85, 0.25); border-radius: 12px; color: #0f1216; font-size: 14px; font-weight: 600; line-height: 1.55; } /* ---- Final block: contact cards (placeholder, no backend form) ---- */ .sc-landing-final__contacts { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 10px; margin: 4px 0 22px; } .sc-landing-final__contact { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; padding: 12px 14px; border-radius: 12px; background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.28); color: #ffffff !important; text-decoration: none !important; transition: background .15s ease, border-color .15s ease, transform .12s ease; } .sc-landing-final__contact:hover { background: rgba(255, 255, 255, 0.18); border-color: rgba(255, 255, 255, 0.6); transform: translateY(-1px); } .sc-landing-final__contact-icon { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255, 255, 255, 0.18); color: #ffffff; } .sc-landing-final__contact-name { font-size: 13.5px; font-weight: 700; } .sc-landing-final__contact-sub { font-size: 11.5px; color: rgba(255, 255, 255, 0.78); } /* ============================================================================ * Phase 6A — Premium Internal Sidebar Navigation * Только внутренний шелл (`.sc-sidebar.sc-sidebar--v2`). * Лендинг и его namespace `.lp-*` не задеты. * Переменные `--sc-sidebar-*` подготовлены под будущий dark mode * (значения светлой темы; в Phase 6B можно будет переопределить * через `[data-theme="dark"]`). * ============================================================================ */ :root { --sc-sidebar-bg: #ffffff; --sc-sidebar-border: rgba(13, 58, 44, 0.08); --sc-sidebar-text: #1c1f24; --sc-sidebar-muted: #6b6a64; --sc-sidebar-accent: #1f6f55; --sc-sidebar-accent-2: #145441; --sc-sidebar-active-bg: rgba(31, 111, 85, 0.08); --sc-sidebar-hover-bg: #f3efe5; --sc-sidebar-icon-bg: #f5f1e6; } /* ---- Sidebar v2 root ---- */ .sc-sidebar.sc-sidebar--v2 { background: radial-gradient(420px 220px at -20% 0%, rgba(31, 111, 85, 0.08), transparent 70%), linear-gradient(180deg, rgba(31, 111, 85, 0.03) 0%, rgba(255, 255, 255, 0) 220px), var(--sc-sidebar-bg); border-right: 1px solid var(--sc-sidebar-border); padding: 18px 14px 16px; gap: 2px; display: flex; flex-direction: column; overflow: hidden; } .sc-sidebar.sc-sidebar--v2 .sc-nav, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding-right: 4px; margin-right: -4px; scrollbar-width: thin; scrollbar-color: rgba(31, 111, 85, 0.18) transparent; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-nav::-webkit-scrollbar { width: 6px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-nav::-webkit-scrollbar-thumb { background: rgba(31, 111, 85, 0.18); border-radius: 6px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-nav::-webkit-scrollbar-track { background: transparent; } /* ---- Brand block ---- */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-brand { display: flex; align-items: center; gap: 12px; padding: 8px 8px 14px; margin-bottom: 6px; border-bottom: 1px solid var(--sc-sidebar-border); } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-logo { flex: 0 0 auto; width: 38px; height: 38px; border-radius: 11px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(145deg, #1f6f55 0%, #155945 60%, #0d3a2c 100%); color: #ffffff; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.18) inset, 0 8px 18px -10px rgba(13, 58, 44, 0.55); } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-brand__text { min-width: 0; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-title { font-size: 14.5px; font-weight: 700; letter-spacing: 0.02em; color: var(--sc-sidebar-accent); line-height: 1.15; margin: 0; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-subtitle { margin-top: 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--sc-sidebar-muted); } /* ---- Workspace meta chip ---- */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-meta { display: inline-flex; align-items: center; gap: 8px; margin: 0 4px 12px; padding: 6px 10px; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sc-sidebar-accent-2); background: var(--sc-sidebar-active-bg); border: 1px solid rgba(31, 111, 85, 0.18); border-radius: 999px; align-self: flex-start; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-meta__dot { width: 6px; height: 6px; border-radius: 50%; background: #2a8b6c; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.18); } /* ---- Section labels ---- */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-section-label, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-section, .sc-sidebar.sc-sidebar--v2 .sc-nav .sc-section { margin-top: 14px; margin-bottom: 4px; padding: 4px 12px 4px 12px; font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sc-sidebar-muted); position: relative; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-section-label:first-child, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-section:first-child { margin-top: 2px; } /* ---- Links: row layout with icon + label ---- */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link, .sc-sidebar.sc-sidebar--v2 .sc-nav a { display: flex; align-items: center; gap: 10px; padding: 9px 12px 9px 14px; margin: 1px 0; font-size: 13.5px; font-weight: 500; color: var(--sc-sidebar-text); background: transparent; border-radius: 10px; position: relative; transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link:hover, .sc-sidebar.sc-sidebar--v2 .sc-nav a:hover { background: var(--sc-sidebar-hover-bg); text-decoration: none; color: var(--sc-sidebar-text); } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link-text { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-icon { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 8px; background: var(--sc-sidebar-icon-bg); color: var(--sc-sidebar-muted); display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link:hover .sc-sidebar-icon { color: var(--sc-sidebar-accent); } /* ---- Active state: emerald pill + accent stripe ---- */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link.is-active, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link-active, .sc-sidebar.sc-sidebar--v2 .sc-nav a.is-active { background: var(--sc-sidebar-active-bg); color: var(--sc-sidebar-accent-2); font-weight: 600; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link.is-active .sc-sidebar-icon, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link-active .sc-sidebar-icon, .sc-sidebar.sc-sidebar--v2 .sc-nav a.is-active .sc-sidebar-icon { background: rgba(31, 111, 85, 0.14); color: var(--sc-sidebar-accent); border-color: rgba(31, 111, 85, 0.2); } /* Перебиваем старый ::before-stripe (Phase 4A.2B / v3), заменяем на более тонкий */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link.is-active::before, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link-active::before, .sc-sidebar.sc-sidebar--v2 .sc-nav a.is-active::before { content: ""; position: absolute; left: 4px; top: 8px; bottom: 8px; width: 3px; border-radius: 0 3px 3px 0; background: linear-gradient(180deg, #2a8b6c 0%, #1f6f55 100%); box-shadow: 0 0 0 1px rgba(31, 111, 85, 0.12); } /* Focus ring for keyboard nav */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link:focus-visible { outline: none; box-shadow: 0 0 0 2px rgba(31, 111, 85, 0.45); } /* ---- Footer ---- */ .sc-sidebar.sc-sidebar--v2 .sc-sidebar-footer { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; margin-top: 10px; border-top: 1px solid var(--sc-sidebar-border); } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-footer__chip { font-size: 10px; font-weight: 800; letter-spacing: 0.16em; text-transform: uppercase; color: var(--sc-sidebar-accent-2); background: var(--sc-sidebar-active-bg); border: 1px solid rgba(31, 111, 85, 0.2); padding: 4px 8px; border-radius: 999px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-footer__hint { font-size: 11px; color: var(--sc-sidebar-muted); letter-spacing: 0.04em; } /* ---- 1366px desktop: чуть компактнее, без сжатия контента ---- */ @media (max-width: 1380px) { :root { --sc-sidebar-w: 232px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link, .sc-sidebar.sc-sidebar--v2 .sc-nav a { font-size: 13px; padding: 8px 10px 8px 12px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-icon { width: 24px; height: 24px; } } /* ---- ≤768px: горизонтальная раскладка (как и было), но с премиум-стилями ---- */ @media (max-width: 768px) { .sc-sidebar.sc-sidebar--v2 { flex-direction: row; flex-wrap: wrap; gap: 6px 8px; padding: 12px; border-right: 0; border-bottom: 1px solid var(--sc-sidebar-border); } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-brand { width: 100%; margin-bottom: 4px; padding: 6px 4px 10px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-meta { margin: 0 0 6px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-nav, .sc-sidebar.sc-sidebar--v2 .sc-nav { width: 100%; overflow-y: visible; margin-right: 0; padding-right: 0; display: flex; flex-wrap: wrap; gap: 4px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-section-label, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-section, .sc-sidebar.sc-sidebar--v2 .sc-nav .sc-section { width: 100%; margin-top: 8px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link.is-active::before, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link-active::before, .sc-sidebar.sc-sidebar--v2 .sc-nav a.is-active::before { display: none; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-footer { display: none; } } /* ---- Reduced motion ---- */ @media (prefers-reduced-motion: reduce) { .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-icon, .sc-sidebar.sc-sidebar--v2 .sc-nav a { transition: none !important; } } /* ============================================================================ * Phase 6B — Light / Dark Mode Theme System * Только внутренний шелл (data-design="executive"). Лендинг изолирован * (`landing.html` не подключает app.css/calm-executive.css и не имеет * data-theme). Базовые токены `--background/--card/--border/--muted/--primary` * уже переключаются через calm-executive.css при `[data-theme="dark"]`. * Здесь: * 1) даём app-level алиасы `--sc-*` (для нового кода и читаемости), * 2) переопределяем переменные сайдбара Phase 6A под dark, * 3) перебиваем точечные хардкоды (#ffffff/#f7f5f0/#e3f0eb/...) * в premium-блоках, которые жёстко прибивали светлые цвета, * 4) описываем сам toggle-button и плавные transitions. * ============================================================================ */ /* ---- App-level aliases (light defaults) ---- */ :root { --sc-bg: var(--background, #f7f5f0); --sc-surface: var(--card, #ffffff); --sc-surface-soft: var(--card-tint, var(--muted, #f0ece3)); --sc-border: var(--border, #e5e1d8); --sc-text: var(--foreground, #1c1f24); --sc-text-strong: var(--foreground-strong, #0e1116); --sc-muted: var(--muted-foreground, #6b6a64); --sc-primary: var(--primary, #1f6f55); --sc-primary-soft: var(--primary-soft, #e3f0eb); --sc-primary-strong: var(--primary-strong, #145441); --sc-success: var(--success, #16a34a); --sc-warning: var(--warning, #a16207); --sc-danger: var(--destructive, #b91c1c); --sc-shadow-1: var(--shadow-card, 0 1px 3px rgba(15, 18, 22, 0.06)); --sc-shadow-2: var(--shadow-md, 0 6px 24px rgba(15, 18, 22, 0.08)); } /* ---- Dark token mapping for Phase 6A sidebar variables ---- Базовые переменные (--card/--border/--muted/--primary) уже даны в calm-executive.css под `[data-design="executive"][data-theme="dark"]`, поэтому ниже мы просто переключаем sidebar-переменные на эти же токены. */ [data-theme="dark"] { --sc-sidebar-bg: var(--card); --sc-sidebar-border: var(--border); --sc-sidebar-text: var(--foreground); --sc-sidebar-muted: var(--muted-foreground); --sc-sidebar-accent: var(--primary); --sc-sidebar-accent-2: var(--primary-soft-fg, var(--primary)); --sc-sidebar-active-bg: var(--primary-soft); --sc-sidebar-hover-bg: var(--muted); --sc-sidebar-icon-bg: var(--muted); } /* ---- Smooth transitions при переключении (без gradient-flash) ---- */ html, body, .sc-shell, .sc-app-shell, .sc-content, .sc-topbar { transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; } /* ============================================================================ * Theme toggle button * ============================================================================ */ .sc-theme-toggle { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px 5px 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--sc-text); background: var(--sc-surface); border: 1px solid var(--sc-border); border-radius: var(--sc-radius); cursor: pointer; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .sc-theme-toggle:hover { background: var(--sc-primary-soft); border-color: rgba(31, 111, 85, 0.35); color: var(--sc-primary-strong); } .sc-theme-toggle:focus-visible { outline: none; box-shadow: var(--sc-focus-ring); } .sc-theme-toggle__icon { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--sc-primary-soft); color: var(--sc-primary-strong); flex: 0 0 auto; } .sc-theme-toggle__icon--moon { display: none; } [data-theme="dark"] .sc-theme-toggle__icon--sun { display: none; } [data-theme="dark"] .sc-theme-toggle__icon--moon { display: inline-flex; } .sc-theme-toggle__label { text-transform: uppercase; font-size: 10.5px; letter-spacing: 0.08em; color: var(--sc-muted); } .sc-theme-toggle:hover .sc-theme-toggle__label { color: var(--sc-primary-strong); } @media (max-width: 900px) { .sc-theme-toggle__label { display: none; } .sc-theme-toggle { padding: 5px 6px; } } /* ============================================================================ * Dark mode overrides for premium components. * Здесь перекрываем точечные хардкод-цвета (#ffffff/#f7f5f0/#e3f0eb и т.п.) * в блоках, рисующих премиум-UI поверх базовых токенов. * ============================================================================ */ [data-theme="dark"] body, [data-theme="dark"] html { background: var(--background); color: var(--foreground); } /* Контентная область — заменяем светлый flare-gradient тёмным аналогом */ [data-theme="dark"] .sc-content { background: linear-gradient(180deg, rgba(255, 255, 255, 0.025) 0%, rgba(0, 0, 0, 0) 220px), var(--background); } /* User pill / logout / topbar */ [data-theme="dark"] .sc-topbar { background: var(--card); border-bottom-color: var(--border); } [data-theme="dark"] .sc-user-pill { background: var(--card); border-color: var(--border); color: var(--foreground); } [data-theme="dark"] .sc-user-pill__role { background: var(--primary-soft); color: var(--primary-soft-fg, var(--primary)); } [data-theme="dark"] .sc-topbar-user .sc-logout { background: var(--card); border-color: var(--border); color: var(--primary-soft-fg, var(--primary)); } [data-theme="dark"] .sc-topbar-user .sc-logout:hover { background: var(--primary-soft); border-color: var(--primary); } /* Sidebar v2 brand & footer */ [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 { background: radial-gradient(420px 220px at -20% 0%, rgba(74, 222, 128, 0.06), transparent 70%), linear-gradient(180deg, rgba(74, 222, 128, 0.03) 0%, rgba(0, 0, 0, 0) 220px), var(--card); border-right-color: var(--border); } [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 .sc-sidebar-brand { border-bottom-color: var(--border); } [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 .sc-sidebar-footer { border-top-color: var(--border); } [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 .sc-sidebar-meta { background: var(--primary-soft); border-color: rgba(74, 222, 128, 0.25); color: var(--primary-soft-fg, var(--primary)); } /* Generic premium cards / panels */ [data-theme="dark"] .sc-kpi-card, [data-theme="dark"] .sc-hero-card, [data-theme="dark"] .sc-executive-hero, [data-theme="dark"] .sc-chart-panel, [data-theme="dark"] .sc-module-card, [data-theme="dark"] .sc-report-card, [data-theme="dark"] .sc-premium-table-card, [data-theme="dark"] .sc-form-card, [data-theme="dark"] .sc-filter-card, [data-theme="dark"] .sc-flowbite-card, [data-theme="dark"] .sc-flowbite-alert, [data-theme="dark"] .sc-mini-stat, [data-theme="dark"] .sc-control-item, [data-theme="dark"] .sc-table-wrap, [data-theme="dark"] .sc-page-card, [data-theme="dark"] .sc-data-card, [data-theme="dark"] .sc-dashboard-summary, [data-theme="dark"] .sc-dashboard-analytics, [data-theme="dark"] .sc-dashboard-analytics-left, [data-theme="dark"] .sc-dashboard-analytics-right, [data-theme="dark"] .sc-insight-grid > * { background: var(--card); color: var(--foreground); border-color: var(--border); box-shadow: var(--sc-shadow-1); } /* Status / action chips */ [data-theme="dark"] .sc-status-chip, [data-theme="dark"] .sc-action-chip, [data-theme="dark"] .sc-format-chip { background: var(--primary-soft); color: var(--primary-soft-fg, var(--primary)); border-color: rgba(74, 222, 128, 0.25); } /* Section kicker (мелкий kicker над заголовком) */ [data-theme="dark"] .sc-section-kicker { color: var(--muted-foreground); } /* Tables: thead/tbody/zebra */ [data-theme="dark"] .sc-table thead, [data-theme="dark"] table thead { background: var(--muted); color: var(--foreground-strong); } [data-theme="dark"] .sc-table th, [data-theme="dark"] table th { color: var(--foreground-strong); } [data-theme="dark"] .sc-table tr:hover, [data-theme="dark"] table tbody tr:hover { background: var(--muted); } [data-theme="dark"] .sc-table tr:nth-child(even), [data-theme="dark"] table tbody tr:nth-child(even) { background: rgba(255, 255, 255, 0.02); } /* Sticky col fix (контраст в dark) */ [data-theme="dark"] .sc-sticky-col { background: var(--card); } /* Forms — inputs/select/textarea */ [data-theme="dark"] .sc-form-control, [data-theme="dark"] .sc-form-card input, [data-theme="dark"] .sc-form-card select, [data-theme="dark"] .sc-form-card textarea, [data-theme="dark"] .sc-filter-card input, [data-theme="dark"] .sc-filter-card select, [data-theme="dark"] .sc-filter-card textarea { background: var(--input); color: var(--foreground); border-color: var(--border); } [data-theme="dark"] .sc-form-control::placeholder, [data-theme="dark"] .sc-filter-card input::placeholder { color: var(--muted-foreground); } /* Callouts: secure/info/warning */ [data-theme="dark"] .sc-secure-callout, [data-theme="dark"] .sc-info-callout, [data-theme="dark"] .sc-callout { background: var(--card); color: var(--foreground); border-color: var(--border); } /* Messages */ [data-theme="dark"] .sc-message { background: var(--card); border-color: var(--border); color: var(--foreground); } [data-theme="dark"] .sc-message--success { border-left: 3px solid var(--success, #4ade80); } [data-theme="dark"] .sc-message--warning { border-left: 3px solid var(--warning, #f5b740); } [data-theme="dark"] .sc-message--error, [data-theme="dark"] .sc-message--danger { border-left: 3px solid var(--destructive, #f87171); } /* Buttons (только secondary/soft — primary остаётся ок благодаря calm-executive) */ [data-theme="dark"] .sc-btn, [data-theme="dark"] .sc-btn--secondary, [data-theme="dark"] .sc-btn--soft { background: var(--card); color: var(--foreground); border-color: var(--border); } [data-theme="dark"] .sc-btn:hover, [data-theme="dark"] .sc-btn--secondary:hover { background: var(--muted); border-color: var(--primary); color: var(--primary-soft-fg, var(--primary)); } /* Legend dots на месячном табеле (фиксируем читаемость на тёмном) */ [data-theme="dark"] .sc-legend { color: var(--foreground); } /* Chart empty state */ [data-theme="dark"] .sc-chart-empty { color: var(--muted-foreground); } /* Phase 6A sidebar: левая stripe в dark — чуть ярче emerald */ [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link.is-active::before, [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link-active::before, [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 .sc-nav a.is-active::before { background: linear-gradient(180deg, var(--primary) 0%, var(--primary-strong) 100%); } /* Auth shell (login) — на login-странице кнопки переключателя нет, но если кто-то поставит data-theme=dark — карточка должна оставаться читаемой */ [data-theme="dark"] .sc-auth-shell { background: var(--background); } [data-theme="dark"] .sc-auth-card { background: var(--card); border-color: var(--border); color: var(--foreground); } /* ============================================================================ * Phase 6B.1 — Dark Mode Visual QA Fixes / Enterprise Polish * * Закрываем визуальные баги после Phase 6B QA: * 1) light/silver glossy gradient в шапке `sc-premium-table-card` и * `sc-events-secondary` → subtle dark gradient в dark-режиме; * 2) `.day-cell--*` пастельные ячейки тепловой карты (light hex с * `!important`) → читаемые dark-эквиваленты с тем же `!important`; * 3) inline white weekend `` → новый класс `.sc-day-header--weekend` * (light-эквивалент сохранён, dark переопределён); * 4) zebra/hover/sticky-col жёсткие светлые hex (#fafaf6/#f0eee5/...) * в dark — теперь субтильно через rgba поверх `var(--card)`; * 5) `.sc-flowbite-alert--*` градиенты к белому → dark soft tints; * 6) `.sc-page-header/.sc-page-title/.sc-page-subtitle`/`.sc-empty*` * на тёмном фоне получают читаемые цвета. * * Все правки скоупированы под `[data-theme="dark"]` (никакой регрессии * light-режима) или, для нового класса weekend, light-equivalent * восстанавливает прежний inline-look. * ============================================================================ */ /* ---- Day-of-week header (заменяет inline-style="background:#fbe3df;...") ---- */ .sc-day-header--weekend { background: #fbe3df; color: #7a1a10; } [data-theme="dark"] .sc-day-header--weekend { background: rgba(248, 113, 113, 0.18) !important; color: #fca5a5 !important; } /* ============================================================================ * 1) PREMIUM TABLE CARD HEADER — устранение silver/white glossy * ============================================================================ */ [data-theme="dark"] .sc-premium-table-card { background: var(--card); border-color: var(--border); } [data-theme="dark"] .sc-premium-table-card__header, [data-theme="dark"] .sc-events-secondary, [data-theme="dark"] .sc-events-secondary .sc-table-toolbar { background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.015)), var(--card); border-bottom-color: var(--border); } [data-theme="dark"] .sc-table-toolbar { border-bottom-color: var(--border); } [data-theme="dark"] .sc-table-toolbar__title { color: var(--foreground); } [data-theme="dark"] .sc-table-toolbar__sub, [data-theme="dark"] .sc-premium-table-card__sub { color: var(--muted-foreground); } /* ============================================================================ * 2) TABLE SYSTEM in DARK — заголовки, зебра, hover, sticky * ============================================================================ */ [data-theme="dark"] .sc-table thead th, [data-theme="dark"] .sc-premium-table-card .sc-table thead th { background: var(--muted); color: var(--foreground); border-bottom-color: var(--border); } /* Зебра — мягкая тёплая полоса вместо grey #f0ece3 */ [data-theme="dark"] .sc-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); } [data-theme="dark"] .sc-table tbody tr:hover td, [data-theme="dark"] .sc-premium-table-card .sc-table tbody tr:hover { background: rgba(74, 222, 128, 0.08); } /* Sticky column — перебиваем светлые hex (#fafaf6 / #f0eee5) */ [data-theme="dark"] .sc-sticky-col { background: var(--card); box-shadow: 1px 0 0 var(--border); color: var(--foreground); } [data-theme="dark"] .sc-table thead th.sc-sticky-col { background: var(--muted); } [data-theme="dark"] .sc-table tbody tr:nth-child(even) td.sc-sticky-col { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .sc-table tbody tr:hover td.sc-sticky-col { background: rgba(74, 222, 128, 0.10); } [data-theme="dark"] .sc-table td, [data-theme="dark"] .sc-table tbody tr td { border-bottom-color: var(--border); color: var(--foreground); } /* Code-инлайн на dark (events: device_user_id) */ [data-theme="dark"] .sc-table code { background: rgba(255, 255, 255, 0.05); color: var(--foreground); } /* ============================================================================ * 3) MONTHLY HEATMAP — день-ячейки в dark * Перекрываем light hex с !important (специфичность 0,1,0 + !important) * ============================================================================ */ [data-theme="dark"] .day-cell { border-color: var(--border) !important; } [data-theme="dark"] .day-cell--present { background: rgba(74, 222, 128, 0.16) !important; color: #86efac !important; } [data-theme="dark"] .day-cell--late { background: rgba(245, 183, 64, 0.18) !important; color: #fcd34d !important; } [data-theme="dark"] .day-cell--partial { background: rgba(167, 139, 250, 0.18) !important; color: #c4b5fd !important; } [data-theme="dark"] .day-cell--absent { background: rgba(248, 113, 113, 0.18) !important; color: #fca5a5 !important; font-weight: 600 !important; } [data-theme="dark"] .day-cell--weekend { background: rgba(255, 255, 255, 0.04) !important; color: var(--muted-foreground) !important; } [data-theme="dark"] .day-cell--no_mapping { background: rgba(234, 179, 8, 0.14) !important; color: #fde68a !important; } [data-theme="dark"] .day-cell--future, [data-theme="dark"] .day-cell--empty { background: transparent !important; color: var(--muted-foreground) !important; } /* Hover ровный по filter (без жёсткого осветления на dark) */ [data-theme="dark"] .sc-table--compact .day-cell:hover { filter: brightness(1.1); } /* ============================================================================ * 4) LEGEND DOTS — dark-эквиваленты пастельных индикаторов * ============================================================================ */ [data-theme="dark"] .sc-legend__dot { border-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .sc-legend__dot--present { background: rgba(74, 222, 128, 0.30); } [data-theme="dark"] .sc-legend__dot--late { background: rgba(245, 183, 64, 0.32); } [data-theme="dark"] .sc-legend__dot--absent { background: rgba(248, 113, 113, 0.32); } [data-theme="dark"] .sc-legend__dot--no_mapping { background: rgba(234, 179, 8, 0.28); } [data-theme="dark"] .sc-legend__dot--weekend { background: rgba(255, 255, 255, 0.10); } /* ============================================================================ * 5) FLOWBITE ALERTS — info/warn/danger без белого хвоста градиента * ============================================================================ */ [data-theme="dark"] .sc-flowbite-alert { background: var(--card); border-color: var(--border); color: var(--foreground); } [data-theme="dark"] .sc-flowbite-alert__body { color: var(--muted-foreground); } [data-theme="dark"] .sc-flowbite-alert--info { background: linear-gradient(90deg, rgba(74, 222, 128, 0.08), rgba(255, 255, 255, 0)), var(--card); border-color: rgba(74, 222, 128, 0.22); } [data-theme="dark"] .sc-flowbite-alert--warn { background: linear-gradient(90deg, rgba(245, 183, 64, 0.10), rgba(255, 255, 255, 0)), var(--card); border-color: rgba(245, 183, 64, 0.22); } [data-theme="dark"] .sc-flowbite-alert--danger { background: linear-gradient(90deg, rgba(248, 113, 113, 0.10), rgba(255, 255, 255, 0)), var(--card); border-color: rgba(248, 113, 113, 0.22); } /* Soft-icon бэкграунды у alerts на dark */ [data-theme="dark"] .sc-flowbite-alert .sc-soft-icon { background: rgba(74, 222, 128, 0.18); } [data-theme="dark"] .sc-flowbite-alert--warn .sc-soft-icon { background: rgba(245, 183, 64, 0.20); color: #fcd34d; } [data-theme="dark"] .sc-flowbite-alert--danger .sc-soft-icon { background: rgba(248, 113, 113, 0.18); color: #fca5a5; } [data-theme="dark"] .sc-soft-icon--accent { background: rgba(74, 222, 128, 0.18); color: #86efac; } [data-theme="dark"] .sc-soft-icon--warn { background: rgba(245, 183, 64, 0.20); color: #fcd34d; } [data-theme="dark"] .sc-soft-icon--danger { background: rgba(248, 113, 113, 0.18); color: #fca5a5; } [data-theme="dark"] .sc-soft-icon--muted { background: var(--muted); color: var(--muted-foreground); } /* ============================================================================ * 6) PAGE HEADER / EMPTY STATES — читаемые в dark * ============================================================================ */ [data-theme="dark"] .sc-page-header { border-bottom-color: var(--border); } [data-theme="dark"] .sc-page-title { color: var(--foreground-strong, var(--foreground)); } [data-theme="dark"] .sc-page-subtitle { color: var(--muted-foreground); } [data-theme="dark"] .sc-empty, [data-theme="dark"] .sc-empty--boxed { background: var(--card); border-color: var(--border); color: var(--muted-foreground); } [data-theme="dark"] .sc-empty-title, [data-theme="dark"] .sc-empty--boxed .sc-empty-title { color: var(--foreground); } /* ============================================================================ * 7) BADGES — устойчивая читаемость на dark * ============================================================================ */ [data-theme="dark"] .sc-badge { background: rgba(255, 255, 255, 0.06); color: var(--foreground); border: 1px solid rgba(255, 255, 255, 0.08); } [data-theme="dark"] .sc-badge--ok, [data-theme="dark"] .sc-badge--success { background: rgba(74, 222, 128, 0.14); color: #86efac; border-color: rgba(74, 222, 128, 0.24); } [data-theme="dark"] .sc-badge--warn, [data-theme="dark"] .sc-badge-warning { background: rgba(245, 183, 64, 0.14); color: #fcd34d; border-color: rgba(245, 183, 64, 0.24); } [data-theme="dark"] .sc-badge--danger, [data-theme="dark"] .sc-badge-danger { background: rgba(248, 113, 113, 0.14); color: #fca5a5; border-color: rgba(248, 113, 113, 0.24); } /* ============================================================================ * 8) KPI value/label readability — accent-stripe виден ярче на dark * ============================================================================ */ [data-theme="dark"] .sc-kpi-card { box-shadow: var(--sc-shadow-1); } [data-theme="dark"] .sc-kpi-label { color: var(--muted-foreground); } [data-theme="dark"] .sc-kpi-value, [data-theme="dark"] .sc-kpi-card .sc-kpi-value { color: var(--foreground-strong, var(--foreground)); } [data-theme="dark"] .sc-kpi-card.sc-kpi-card--accent::before { background: var(--primary); } [data-theme="dark"] .sc-kpi-card.sc-kpi-card--warn::before { background: #fcd34d; } [data-theme="dark"] .sc-kpi-card.sc-kpi-card--danger::before { background: #fca5a5; } [data-theme="dark"] .sc-kpi-value--warn { color: #fcd34d; } [data-theme="dark"] .sc-kpi-value--danger { color: #fca5a5; } /* ============================================================================ * 9) DASHBOARD PANELS finishing touches * ============================================================================ */ [data-theme="dark"] .sc-chart-panel, [data-theme="dark"] .sc-chart-card { background: var(--card); border-color: var(--border); } [data-theme="dark"] .sc-chart-panel__header, [data-theme="dark"] .sc-chart-card__head { border-bottom-color: var(--border); background: transparent; } [data-theme="dark"] .sc-chart-panel__title, [data-theme="dark"] .sc-chart-card__title { color: var(--foreground); } [data-theme="dark"] .sc-chart-panel__sub, [data-theme="dark"] .sc-chart-card__hint, [data-theme="dark"] .sc-chart-panel__summary { color: var(--muted-foreground); } /* ============================================================================ * 10) FILTER CARD inputs/selects/textareas — закрепляем читаемость * (комплимент к Phase 6B forms-блоку) * ============================================================================ */ [data-theme="dark"] .sc-filter-card, [data-theme="dark"] .sc-form-card { background: var(--card); border-color: var(--border); } [data-theme="dark"] .sc-filter-title, [data-theme="dark"] .sc-section-title { color: var(--foreground); } [data-theme="dark"] .sc-filter-card label, [data-theme="dark"] .sc-form-card label { color: var(--muted-foreground); } /* ============================================================================ * Phase 6B.2 — Enterprise Dark Mode Visual Balance & Table Refinement * * Финальный enterprise-pass: графит/emerald фон, мягкий контраст карточек, * «стеклянные» шапки таблиц без silver-блика, тепловая карта месяца без * артефактов на пересечениях, компактные чекбоксы в фильтрах, премиум * empty-state в чартах (разметка из executive-analytics.js). * Light-режим: только базовые .sc-empty-state / чекбоксы (без [data-theme]). * ============================================================================ */ /* ---- Premium empty state (chart mounts + reusable) ---- */ .sc-empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 8px; padding: 22px 18px; min-height: 168px; box-sizing: border-box; } .sc-empty-state--chart { min-height: 196px; } .sc-empty-state__icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 14px; background: var(--primary-soft, #e3f0eb); color: var(--primary-strong, #145441); margin-bottom: 2px; } .sc-empty-state__title { font-size: 14px; font-weight: 600; letter-spacing: 0.01em; color: var(--foreground-strong, var(--foreground)); max-width: 280px; line-height: 1.35; } .sc-empty-state__text { font-size: 13px; line-height: 1.45; color: var(--muted-foreground, #6b6a64); max-width: 300px; } [data-theme="dark"] .sc-empty-state__icon { background: rgba(74, 222, 128, 0.12); color: #86efac; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sc-empty-state__title { color: var(--foreground); } [data-theme="dark"] .sc-empty-state__text { color: var(--muted-foreground); } /* ---- Filter checkbox row (Phase 6B.2) ---- */ .sc-filter-field--checkbox { display: flex; flex-direction: row; align-items: center; flex-wrap: wrap; gap: 10px 12px; } .sc-filter-field--checkbox .sc-help, .sc-filter-field--checkbox .sc-error { flex-basis: 100%; margin-left: 0; } .sc-checkbox-label { font-size: 13px; font-weight: 500; color: var(--foreground, #1c1f24); cursor: pointer; line-height: 1.35; margin: 0; } /* ---- Custom checkbox (filter + form cards only; scoped) ---- */ .sc-filter-card input[type="checkbox"], .sc-form-card input[type="checkbox"] { appearance: none; -webkit-appearance: none; width: 17px; height: 17px; margin: 0; flex-shrink: 0; border-radius: 4px; border: 1.5px solid var(--border, #e5e1d8); background: var(--card, #ffffff); vertical-align: middle; cursor: pointer; position: relative; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .sc-filter-card input[type="checkbox"]:hover, .sc-form-card input[type="checkbox"]:hover { border-color: rgba(31, 111, 85, 0.45); } .sc-filter-card input[type="checkbox"]:focus-visible, .sc-form-card input[type="checkbox"]:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(31, 111, 85, 0.22); } .sc-filter-card input[type="checkbox"]:checked, .sc-form-card input[type="checkbox"]:checked { background: var(--primary, #1f6f55); border-color: var(--primary-strong, #145441); } .sc-filter-card input[type="checkbox"]:checked::after, .sc-form-card input[type="checkbox"]:checked::after { content: ""; position: absolute; left: 5px; top: 2px; width: 4px; height: 8px; border: solid var(--primary-foreground, #f6faf8); border-width: 0 2px 2px 0; transform: rotate(45deg); } [data-theme="dark"] .sc-filter-card input[type="checkbox"], [data-theme="dark"] .sc-form-card input[type="checkbox"] { background: var(--input); border-color: var(--border); } [data-theme="dark"] .sc-filter-card input[type="checkbox"]:checked, [data-theme="dark"] .sc-form-card input[type="checkbox"]:checked { background: var(--primary); border-color: var(--primary-edge, var(--primary-strong)); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.12); } [data-theme="dark"] .sc-filter-card input[type="checkbox"]:checked::after, [data-theme="dark"] .sc-form-card input[type="checkbox"]:checked::after { border-color: var(--primary-foreground, #0d1f18); } /* ============================================================================ * A) Page shell — глубокий графит + лёгкий emerald glow (не «чёрная дыра») * ============================================================================ */ [data-theme="dark"] body { background-color: var(--background); background-image: radial-gradient(ellipse 980px 420px at 50% -12%, rgba(45, 212, 153, 0.07), transparent 62%), radial-gradient(ellipse 720px 380px at 0% 0%, rgba(15, 99, 71, 0.12), transparent 55%), radial-gradient(ellipse 900px 500px at 100% 20%, rgba(30, 58, 50, 0.35), transparent 58%); } [data-theme="dark"] .sc-content { background: radial-gradient(ellipse 820px 320px at 85% 8%, rgba(52, 211, 153, 0.045), transparent 58%), linear-gradient(180deg, rgba(255, 255, 255, 0.022) 0%, rgba(0, 0, 0, 0) 200px), var(--background); } [data-theme="dark"] .sc-sidebar.sc-sidebar--v2 { background: radial-gradient(520px 240px at -10% 0%, rgba(45, 212, 153, 0.06), transparent 68%), linear-gradient(180deg, rgba(255, 255, 255, 0.03) 0%, rgba(0, 0, 0, 0) 200px), var(--card); } [data-theme="dark"] .sc-topbar { background: var(--card); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 255, 255, 0.04); } /* ============================================================================ * B) Карточки — чуть светлее страницы, мягкая кромка, emerald inner glow * ============================================================================ */ [data-theme="dark"] .sc-kpi-card, [data-theme="dark"] .sc-chart-panel, [data-theme="dark"] .sc-chart-card, [data-theme="dark"] .sc-premium-table-card, [data-theme="dark"] .sc-form-card, [data-theme="dark"] .sc-filter-card, [data-theme="dark"] .sc-executive-hero, [data-theme="dark"] .sc-module-card, [data-theme="dark"] .sc-report-card, [data-theme="dark"] .sc-hero-card { background: var(--card); border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 10px 36px -18px rgba(0, 0, 0, 0.55); } /* ============================================================================ * C) «Стеклянные» шапки таблиц — без metallic white (перебивает 6B.1) * ============================================================================ */ [data-theme="dark"] .sc-premium-table-card__header, [data-theme="dark"] .sc-events-secondary, [data-theme="dark"] .sc-events-secondary .sc-table-toolbar, [data-theme="dark"] .sc-card > .sc-table-toolbar:first-child { background: linear-gradient(180deg, rgba(255, 255, 255, 0.045), rgba(255, 255, 255, 0.012)), linear-gradient(135deg, rgba(16, 185, 129, 0.07), transparent 48%), var(--card); border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05); } /* ============================================================================ * D) Таблицы — зебра и hover мягче (поверх 6B.1) * ============================================================================ */ [data-theme="dark"] .sc-table thead th, [data-theme="dark"] .sc-premium-table-card .sc-table thead th { background: rgba(255, 255, 255, 0.04); color: var(--foreground); font-weight: 600; } [data-theme="dark"] .sc-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.012); } [data-theme="dark"] .sc-table tbody tr:hover td, [data-theme="dark"] .sc-premium-table-card .sc-table tbody tr:hover td { background: rgba(16, 185, 129, 0.065); } [data-theme="dark"] .sc-table td, [data-theme="dark"] .sc-table tbody tr td { color: rgba(243, 247, 244, 0.92); } [data-theme="dark"] .sc-table small, [data-theme="dark"] .sc-table .sc-table-toolbar__sub { color: var(--muted-foreground); } /* ============================================================================ * E) Месячный heatmap — без чёрных точек на пересечениях, спокойные ячейки * ============================================================================ */ [data-theme="dark"] .sc-premium-table-card .sc-table--compact th, [data-theme="dark"] .sc-premium-table-card .sc-table--compact td { border-color: rgba(255, 255, 255, 0.04) !important; border-width: 1px; background-clip: padding-box; } [data-theme="dark"] .sc-premium-table-card .sc-table--compact .day-cell { border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05); outline: none; } [data-theme="dark"] .sc-day-header--weekend { background: rgba(248, 113, 113, 0.10) !important; color: #fecaca !important; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.15); } [data-theme="dark"] .day-cell--present { background: rgba(52, 211, 153, 0.12) !important; color: #a7f3d0 !important; } [data-theme="dark"] .day-cell--late { background: rgba(251, 191, 36, 0.12) !important; color: #fde68a !important; } [data-theme="dark"] .day-cell--partial { background: rgba(167, 139, 250, 0.12) !important; color: #ddd6fe !important; } [data-theme="dark"] .day-cell--absent { background: rgba(248, 113, 113, 0.12) !important; color: #fecaca !important; font-weight: 600 !important; } [data-theme="dark"] .day-cell--weekend { background: rgba(255, 255, 255, 0.028) !important; color: var(--muted-foreground) !important; } [data-theme="dark"] .day-cell--no_mapping { background: rgba(234, 179, 8, 0.10) !important; color: #fef3c7 !important; } [data-theme="dark"] .day-cell--future, [data-theme="dark"] .day-cell--empty { background: rgba(255, 255, 255, 0.02) !important; color: rgba(148, 163, 184, 0.85) !important; box-shadow: none !important; } [data-theme="dark"] .sc-sticky-col { background: linear-gradient(90deg, var(--card) 0%, var(--card) 90%, rgba(28, 32, 40, 0) 100%); box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05); } [data-theme="dark"] .sc-table thead th.sc-sticky-col { background: rgba(255, 255, 255, 0.05); } [data-theme="dark"] .sc-table tbody tr:nth-child(even) td.sc-sticky-col { background: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .sc-table tbody tr:hover td.sc-sticky-col { background: rgba(16, 185, 129, 0.08); } [data-theme="dark"] .sc-table--compact .day-cell:hover { filter: brightness(1.06); box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.18); } /* ============================================================================ * F) Фильтры: input/select/textarea — не «чистый чёрный», focus emerald * ============================================================================ */ [data-theme="dark"] .sc-filter-card input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] .sc-filter-card select, [data-theme="dark"] .sc-filter-card textarea, [data-theme="dark"] .sc-form-card input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] .sc-form-card select, [data-theme="dark"] .sc-form-card textarea, [data-theme="dark"] .sc-control-item input:not([type="checkbox"]):not([type="radio"]), [data-theme="dark"] .sc-control-item select, [data-theme="dark"] .sc-control-item textarea { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.10); color: var(--foreground); } [data-theme="dark"] .sc-filter-card input::placeholder, [data-theme="dark"] .sc-form-card input::placeholder, [data-theme="dark"] .sc-control-item input::placeholder { color: rgba(148, 163, 184, 0.75); } [data-theme="dark"] .sc-filter-card input:focus-visible, [data-theme="dark"] .sc-filter-card select:focus-visible, [data-theme="dark"] .sc-filter-card textarea:focus-visible, [data-theme="dark"] .sc-form-card input:focus-visible, [data-theme="dark"] .sc-form-card select:focus-visible, [data-theme="dark"] .sc-form-card textarea:focus-visible { border-color: rgba(52, 211, 153, 0.55); box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.18); outline: none; } /* ============================================================================ * G) Chart legacy empty line + risk / dashboard polish * ============================================================================ */ [data-theme="dark"] .sc-chart-empty { color: var(--muted-foreground); padding: 18px 14px; text-align: center; font-size: 13px; } /* ============================================================================ * Phase 6B.3 — Final Enterprise Dark Mode Visual QA Micro-Fixes * * Точечные фиксы по итогам ручного QA: * 1) /staff/ — `.sc-metric-card--accent` в light имеет жёсткий * `linear-gradient(135deg, rgba(227,240,235,.65), rgba(255,255,255,.95))`, * который в dark смотрится как «белая плитка». Перекрываем в dark. * 2) `.sc-metric-card__icon` watermark в dark делаем низкоопаковым emerald. * 3) Месячный heatmap (`/reports/monthly-attendance/`) — ослабляем grid * пересечения (внутренние границы compact-таблицы почти невидимы), * hover ровнее, weekend-th — мягкий красно-коричневый. * 4) `.sc-premium-table-card__header` / `.sc-table-toolbar` — тонкая * добавка inset-highlight + soft shadow без metal-блика. * * Все правила скоупированы под `[data-theme="dark"]`. Light-режим * не трогаем (включая `.sc-day-header--weekend`, который уже имеет * нужный розовый light-эквивалент из Phase 6B.1). * ============================================================================ */ /* ---- Phase 6B.3 marker (для тестов и поиска в блоке) ---- */ .sc-phase-6b3-marker { display: none; } /* ---- 1) /staff/ active KPI card (.sc-metric-card--accent) ---- */ [data-theme="dark"] .sc-metric-card, [data-theme="dark"] .sc-card.sc-metric-card { background: var(--card); border-color: rgba(255, 255, 255, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 8px 24px -16px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .sc-metric-card--accent { background: linear-gradient(135deg, rgba(52, 211, 153, 0.10), rgba(16, 185, 129, 0.02) 60%), var(--card) !important; border-color: rgba(52, 211, 153, 0.22) !important; } [data-theme="dark"] .sc-metric-card--warn { background: linear-gradient(135deg, rgba(245, 183, 64, 0.10), rgba(120, 53, 15, 0.02) 60%), var(--card) !important; border-color: rgba(245, 183, 64, 0.20) !important; } [data-theme="dark"] .sc-metric-card__label { color: var(--muted-foreground); } [data-theme="dark"] .sc-metric-card__value { color: var(--foreground); } /* Watermark-иконка: в dark — приглушённый emerald (вместо бледно-белого) */ [data-theme="dark"] .sc-metric-card__icon { opacity: 0.30; } [data-theme="dark"] .sc-metric-card__icon svg { stroke: rgba(74, 222, 128, 0.85); } [data-theme="dark"] .sc-metric-card--warn .sc-metric-card__icon svg { stroke: rgba(245, 183, 64, 0.85); } [data-theme="dark"] .sc-metric-card--danger .sc-metric-card__icon svg { stroke: rgba(248, 113, 113, 0.85); } /* Безопасная зона: похожие «активные» карточки на других экранах */ [data-theme="dark"] .sc-kpi-card.sc-kpi-card--accent { background: linear-gradient(135deg, rgba(52, 211, 153, 0.09), rgba(16, 185, 129, 0.01) 65%), var(--card); border-color: rgba(52, 211, 153, 0.20); } [data-theme="dark"] .sc-kpi-card.sc-kpi-card--warn { background: linear-gradient(135deg, rgba(245, 183, 64, 0.10), rgba(120, 53, 15, 0.01) 65%), var(--card); border-color: rgba(245, 183, 64, 0.20); } [data-theme="dark"] .sc-kpi-card.sc-kpi-card--danger { background: linear-gradient(135deg, rgba(248, 113, 113, 0.10), rgba(127, 29, 29, 0.01) 65%), var(--card); border-color: rgba(248, 113, 113, 0.20); } /* ---- 2) Monthly heatmap final softening ---- */ [data-theme="dark"] .sc-premium-table-card .sc-table--compact th, [data-theme="dark"] .sc-premium-table-card .sc-table--compact td { border-color: rgba(255, 255, 255, 0.025) !important; } [data-theme="dark"] .sc-premium-table-card .sc-table--compact thead th { background: rgba(255, 255, 255, 0.035); color: var(--foreground); border-bottom-color: rgba(255, 255, 255, 0.06) !important; } [data-theme="dark"] .sc-premium-table-card .sc-table--compact .day-cell { border: 0 !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.035); } [data-theme="dark"] .day-cell--future, [data-theme="dark"] .day-cell--empty { background: rgba(255, 255, 255, 0.012) !important; color: rgba(148, 163, 184, 0.55) !important; box-shadow: none !important; } [data-theme="dark"] .day-cell--weekend { background: rgba(255, 255, 255, 0.02) !important; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.025) !important; } /* Weekend day-of-week header — приглушённый кирпичный/амбер */ [data-theme="dark"] .sc-day-header--weekend { background: rgba(154, 52, 18, 0.18) !important; color: #fecaca !important; box-shadow: inset 0 -1px 0 rgba(0, 0, 0, 0.20); } /* Hover ровнее, без жёсткого осветления */ [data-theme="dark"] .sc-table--compact .day-cell:hover { filter: none; box-shadow: inset 0 0 0 1px rgba(74, 222, 128, 0.30); } /* Sticky col без жёсткого шва на пересечениях */ [data-theme="dark"] .sc-premium-table-card .sc-table--compact .sc-sticky-col { border-right: 0 !important; box-shadow: 1px 0 0 rgba(255, 255, 255, 0.05) !important; } /* ---- 3) Premium card / table headers — добиваем metallic look ---- */ [data-theme="dark"] .sc-premium-table-card__header, [data-theme="dark"] .sc-events-secondary, [data-theme="dark"] .sc-events-secondary .sc-table-toolbar, [data-theme="dark"] .sc-card > .sc-table-toolbar:first-child { background: linear-gradient(180deg, rgba(255, 255, 255, 0.035), rgba(255, 255, 255, 0.008)), linear-gradient(135deg, rgba(16, 185, 129, 0.06), transparent 52%), var(--card); border-bottom-color: rgba(255, 255, 255, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05), 0 1px 0 rgba(0, 0, 0, 0.25); } [data-theme="dark"] .sc-premium-table-card { border-color: rgba(255, 255, 255, 0.06); } /* ============================================================================ * Phase 6C — Enterprise Visual System & Empty States Polish * * Единый CSS-only-проход без правки шаблонов и JS. Аддитивные правила, * не переопределяют существующие селекторы там, где этого не требуется. * * Разделы: * 1) Enterprise empty state (через существующий `.sc-empty.sc-empty--boxed`) * — добавляем inline-SVG-иконку через data:image/svg+xml в ::before, * чтобы НЕ менять ни один шаблон. Подходит для всех 6 страниц * (dashboard recent events, staff, devices, attendance/days, * attendance/events, reports/face-events, monthly attendance). * 2) Premium button polish (focus-visible, hover lift, disabled, format chips). * 3) Table polish (badge alignment, smoother row hover, header consistency). * 4) Page rhythm (стабилизация отступов между секциями). * 5) Micro-interactions с обязательным `prefers-reduced-motion: no-preference`. * 6) Light/dark parity — все добавленные правила работают через токены/var. * * Все правила, которые касаются цвета фонов/текста, либо используют CSS-vars, * либо явно скоупированы под `[data-theme="dark"]`. * ============================================================================ */ /* ---- Phase 6C marker (служебный, не используется в шаблонах) ---- */ .sc-phase-6c-marker { display: none; } /* ============================================================================ * 6C.1 — Enterprise empty state (CSS-only, без изменений шаблонов) * ============================================================================ */ .sc-empty--boxed { position: relative; padding: 40px 20px 28px; border-style: solid; border-color: var(--border, #e5e1d8); background: radial-gradient(120% 80% at 50% -10%, rgba(31, 111, 85, 0.06), transparent 60%), var(--muted, #f7f5f0); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.6) inset, 0 6px 18px -14px rgba(0, 0, 0, 0.18); } .sc-empty--boxed::before { content: ""; display: block; width: 44px; height: 44px; margin: 0 auto 12px; border-radius: 12px; background-color: rgba(31, 111, 85, 0.08); background-repeat: no-repeat; background-position: center; background-size: 22px 22px; background-image: url("data:image/svg+xml;utf8,"); border: 1px solid rgba(31, 111, 85, 0.18); } .sc-empty--boxed .sc-empty-title { font-size: 15px; letter-spacing: 0.01em; } /* Ссылка-CTA внутри empty state (часто это рядом с .sc-empty-title) */ .sc-empty--boxed a { color: var(--primary-strong, #145441); text-decoration: none; border-bottom: 1px solid rgba(31, 111, 85, 0.35); padding-bottom: 1px; transition: color 0.15s ease, border-color 0.15s ease; } .sc-empty--boxed a:hover { color: var(--primary, #1f6f55); border-bottom-color: var(--primary, #1f6f55); } .sc-empty--boxed a:focus-visible { outline: none; box-shadow: var(--sc-focus-ring); border-radius: 4px; } /* Dark-режим: emerald acent, без яркого свечения */ [data-theme="dark"] .sc-empty--boxed { border-color: rgba(255, 255, 255, 0.08); background: radial-gradient(120% 80% at 50% -10%, rgba(52, 211, 153, 0.10), transparent 60%), rgba(255, 255, 255, 0.025); box-shadow: none; } [data-theme="dark"] .sc-empty--boxed::before { background-color: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.22); background-image: url("data:image/svg+xml;utf8,"); } [data-theme="dark"] .sc-empty--boxed a { color: #6ee7b7; border-bottom-color: rgba(110, 231, 183, 0.45); } [data-theme="dark"] .sc-empty--boxed a:hover { color: #a7f3d0; border-bottom-color: #a7f3d0; } /* ============================================================================ * 6C.2 — Premium button polish (additive, без переопределения вариантов) * ============================================================================ */ .sc-btn { letter-spacing: 0.01em; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease; will-change: transform; } .sc-btn:active { transform: translateY(1px) scale(0.995); } .sc-btn:focus-visible { outline: none; box-shadow: var(--sc-focus-ring), 0 1px 0 rgba(0, 0, 0, 0.05); } .sc-btn[disabled], .sc-btn[aria-disabled="true"], .sc-btn.is-disabled { opacity: 0.55; cursor: not-allowed; pointer-events: none; filter: saturate(0.85); } /* Premium hover lift — только если нет prefers-reduced-motion */ @media (prefers-reduced-motion: no-preference) { .sc-btn:hover { box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.25); } .sc-btn--primary:hover, .sc-btn-primary:hover { box-shadow: 0 8px 18px -10px rgba(31, 111, 85, 0.55); } } [data-theme="dark"] .sc-btn:focus-visible { box-shadow: 0 0 0 3px rgba(52, 211, 153, 0.30); } [data-theme="dark"] .sc-btn[disabled], [data-theme="dark"] .sc-btn[aria-disabled="true"], [data-theme="dark"] .sc-btn.is-disabled { filter: saturate(0.65) brightness(0.95); } /* Format chips Excel/PDF в hub — мягкий hover */ .sc-format-chip { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; } @media (prefers-reduced-motion: no-preference) { .sc-module-card:hover .sc-format-chip { transform: translateY(-1px); } } /* ============================================================================ * 6C.3 — Table polish (additive, без правки колонок/sort/filters) * ============================================================================ */ .sc-table .sc-badge { vertical-align: middle; line-height: 1.1; } .sc-table tbody tr { transition: background-color 0.12s ease; } .sc-table tbody tr.is-active td { background: rgba(31, 111, 85, 0.07); box-shadow: inset 3px 0 0 var(--primary, #1f6f55); } [data-theme="dark"] .sc-table tbody tr.is-active td { background: rgba(74, 222, 128, 0.10); box-shadow: inset 3px 0 0 rgba(74, 222, 128, 0.55); } /* Smoother corner radius for table wrappers inside premium cards */ .sc-premium-table-card .sc-table-wrap, .sc-premium-table-card .sc-table-scroll { border-bottom-left-radius: var(--sc-radius-lg, 14px); border-bottom-right-radius: var(--sc-radius-lg, 14px); overflow: hidden; } /* Header typography consistency (мягкая, без перебивки кейса) */ .sc-table thead th, .sc-premium-table-card .sc-table thead th { letter-spacing: 0.04em; } /* ============================================================================ * 6C.4 — Page rhythm / spacing tokens * ============================================================================ */ :root { --sc-page-rhythm: 18px; } .sc-section-block + .sc-section-block { margin-top: var(--sc-page-rhythm); } .sc-page-header.sc-page-header--flat { margin-bottom: 14px; } /* Не позволяем «дыре» между hero и первой KPI-сеткой расти */ .sc-executive-hero + .sc-page-header.sc-page-header--flat { margin-top: 14px; } .sc-executive-hero + .sc-kpi-grid, .sc-executive-hero + .sc-metric-grid { margin-top: 8px; } /* ============================================================================ * 6C.5 — Micro-interactions (с reduced-motion guard) * ============================================================================ */ @media (prefers-reduced-motion: no-preference) { .sc-card, .sc-kpi-card, .sc-insight-card, .sc-mini-stat, .sc-metric-card, .sc-chart-panel, .sc-module-card { transition: transform 0.18s ease, box-shadow 0.22s ease, border-color 0.18s ease; } .sc-kpi-card:hover, .sc-insight-card:hover, .sc-metric-card:hover, .sc-mini-stat:hover { transform: translateY(-1px); box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.22); } .sc-module-card:hover { transform: translateY(-2px); box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.25); } .sc-chart-panel:hover { box-shadow: 0 10px 24px -18px rgba(0, 0, 0, 0.22); } } @media (prefers-reduced-motion: reduce) { .sc-btn, .sc-card, .sc-kpi-card, .sc-insight-card, .sc-mini-stat, .sc-metric-card, .sc-chart-panel, .sc-module-card, .sc-format-chip { transition: none !important; } .sc-btn:active { transform: none !important; } } /* Dark-режим: тени глубже + edge-emerald glow только при hover */ [data-theme="dark"] .sc-kpi-card:hover, [data-theme="dark"] .sc-insight-card:hover, [data-theme="dark"] .sc-metric-card:hover, [data-theme="dark"] .sc-mini-stat:hover { box-shadow: 0 10px 24px -16px rgba(0, 0, 0, 0.55), 0 0 0 1px rgba(52, 211, 153, 0.10) inset; } [data-theme="dark"] .sc-module-card:hover { box-shadow: 0 14px 28px -18px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(52, 211, 153, 0.12) inset; } /* ============================================================================ * Phase 6D — Responsive Enterprise QA & Real Empty States * * Аддитивный CSS-only блок (минимальные правки шаблонов — только * унификация empty-state markup в 10 целевых страницах). Цели: * 1) Унифицированный `.sc-empty-text` рядом с `.sc-empty-title` * (теперь оба — `
`), чтобы все 10 пустых состояний выглядели * одинаково premium в обеих темах. * 2) Адаптивные брейкпоинты: 1380 / 1180 / 1024 / 768 / 540 px. * KPI grid не «прыгает», hero-чипы корректно переносятся, * table toolbar actions сворачиваются под title на узком, * filter-card → 1col на mobile/tablet. * 3) Sidebar compact polish 1366 / 1280 — без collapsible v3, * только уменьшение gaps/padding и защита footer от overlap. * 4) Monthly attendance heatmap — гарантированный horizontal scroll. * 5) Light/dark parity — все цвета через CSS-vars и `[data-theme="dark"]`. * * Все правила полностью аддитивны и не переопределяют существующие * декларации, кроме case'ов где это необходимо (всегда через CSS-vars). * ============================================================================ */ /* ---- Phase 6D marker (служебный, не используется в шаблонах) ---- */ .sc-phase-6d-marker { display: none; } /* ============================================================================ * 6D.1 — Real empty state markup polish (`.sc-empty-text`) * ============================================================================ */ .sc-empty--boxed .sc-empty-title { display: block; font-weight: 600; color: var(--foreground, #1c1f24); font-size: 15px; margin-bottom: 4px; letter-spacing: 0.01em; } .sc-empty--boxed .sc-empty-text { display: block; color: var(--muted-foreground, #6b6a64); font-size: 13px; line-height: 1.55; max-width: 420px; margin: 0 auto; } .sc-empty--boxed .sc-empty-text a { /* унаследует стилизацию из 6C `.sc-empty--boxed a` */ font-weight: 500; } [data-theme="dark"] .sc-empty--boxed .sc-empty-title { color: var(--foreground); } [data-theme="dark"] .sc-empty--boxed .sc-empty-text { color: var(--muted-foreground); } /* ============================================================================ * 6D.2 — Responsive breakpoints (additive) * * Используются только селекторы существующих классов; ничего не ломаем. * ============================================================================ */ /* ----- ≤ 1380px : компактный desktop / 1366-laptop ----- */ @media (max-width: 1380px) { .sc-content { padding: 22px 24px 32px; } .sc-kpi-grid { gap: 12px; } .sc-insight-grid { gap: 12px; } .sc-executive-hero__chips { gap: 8px; flex-wrap: wrap; } .sc-status-chip { font-size: 11.5px; } .sc-status-chip__value { font-size: 12.5px; } .sc-table-toolbar__actions { gap: 6px; } } /* ----- ≤ 1280px : compact-laptop sidebar polish ----- */ @media (max-width: 1280px) { .sc-sidebar.sc-sidebar--v2 { padding: 14px 10px 16px; gap: 2px; } .sc-sidebar.sc-sidebar--v2 .sc-nav a, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-link { padding: 8px 10px; font-size: 13px; } .sc-sidebar.sc-sidebar--v2 .sc-section, .sc-sidebar.sc-sidebar--v2 .sc-sidebar-section { margin-top: 6px; } .sc-sidebar.sc-sidebar--v2 .sc-sidebar-footer { margin-top: auto; padding-top: 10px; } .sc-content { padding: 20px 22px 30px; } .sc-section-block { margin-bottom: 14px; } } /* ----- ≤ 1180px : compact tablet horizontal ----- */ @media (max-width: 1180px) { .sc-kpi-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .sc-metric-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .sc-insight-grid { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); } /* Dashboard analytics two-col → single column раньше, чтобы донаты не мялись */ .sc-dashboard-analytics-grid { grid-template-columns: 1fr; gap: 14px; } .sc-dashboard-analytics-right { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .sc-table-toolbar { flex-wrap: wrap; row-gap: 8px; } .sc-table-toolbar__actions { width: 100%; justify-content: flex-start; } .sc-premium-table-card__header { flex-wrap: wrap; row-gap: 8px; } } /* ----- ≤ 1024px : tablet ----- */ @media (max-width: 1024px) { .sc-kpi-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-metric-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-dashboard-analytics-right { grid-template-columns: 1fr; } .sc-control-grid { grid-template-columns: 1fr; gap: 14px; } .sc-module-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .sc-executive-hero__head { flex-direction: column; align-items: flex-start; gap: 14px; } .sc-executive-hero__chips { width: 100%; } /* Filter card: 1-2 col уже стоит у multiform; заверни inputs ровнее */ .sc-filter-card .sc-toolbar { flex-wrap: wrap; } .sc-filter-card .sc-toolbar > * { flex: 1 1 180px; } /* Page header buttons могут перекрывать topbar action — оставляем wrap */ .sc-page-header { flex-wrap: wrap; gap: 10px; } } /* ----- ≤ 768px : small tablet / large phone ----- */ @media (max-width: 768px) { :root { --sc-page-rhythm: 14px; } .sc-content { padding: 16px 14px 26px; } .sc-kpi-grid, .sc-metric-grid, .sc-insight-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .sc-module-grid { grid-template-columns: 1fr; } .sc-executive-hero__title { font-size: 22px; } .sc-executive-hero__chips { flex-wrap: wrap; } .sc-status-chip { padding: 6px 10px 6px 8px; } .sc-page-header { flex-direction: column; align-items: flex-start; gap: 8px; } .sc-page-title { font-size: 19px; } /* Filter card inputs: переходим в 1-col */ .sc-filter-card { padding: 12px; } .sc-filter-card .sc-toolbar { flex-direction: column; align-items: stretch; } .sc-filter-card .sc-toolbar > * { width: 100%; flex: 1 1 auto; } .sc-filter-card input, .sc-filter-card select, .sc-filter-card textarea { width: 100%; } .sc-filter-field { width: 100%; } /* Premium table: hard-guarantee horizontal scroll */ .sc-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Action chips wrap nicely под title */ .sc-table-toolbar { padding: 12px; } .sc-table-toolbar__actions { flex-wrap: wrap; } .sc-table-toolbar__actions .sc-btn { flex: 0 1 auto; } /* Monthly heatmap: scroll-safe */ .sc-monthly-section--table .sc-table-wrap, .sc-monthly-section--table .sc-table-scroll { max-width: 100%; overflow-x: auto; } /* Empty state чуть компактнее */ .sc-empty--boxed { padding: 32px 16px 22px; max-width: 100%; } } /* ----- ≤ 540px : phone ----- */ @media (max-width: 540px) { .sc-kpi-grid, .sc-metric-grid, .sc-insight-grid { grid-template-columns: 1fr; } .sc-executive-hero { padding: 16px 14px 18px; } .sc-executive-hero__main { gap: 10px; } .sc-executive-hero__title { font-size: 20px; } .sc-executive-hero__sub { font-size: 13px; } .sc-status-chip__label { font-size: 9.5px; } /* Topbar спрос на overlap: разрешаем wrap */ .sc-topbar { flex-wrap: wrap; row-gap: 6px; } /* Sidebar в mobile уже идёт строкой через @768; на 540 даём чуть плотнее */ .sc-sidebar { padding: 8px 8px 10px; gap: 4px; } /* Empty state на phone */ .sc-empty--boxed { padding: 28px 14px 20px; } .sc-empty--boxed::before { width: 38px; height: 38px; background-size: 18px 18px; } .sc-empty--boxed .sc-empty-title { font-size: 14px; } .sc-empty--boxed .sc-empty-text { font-size: 12.5px; } /* Action toolbar: кнопки на полную ширину */ .sc-table-toolbar__actions .sc-btn { width: 100%; } } /* ============================================================================ * 6D.3 — Monthly attendance heatmap: scroll-safe wrappers * * Гарантия: даже на 1280/1024 табель не ломает page width. * ============================================================================ */ .sc-premium-table-card .sc-table--compact { /* Заведомо широкая сетка → горизонтальный scroll внутри wrapper */ min-width: 920px; } .sc-monthly-section--table > .sc-premium-table-card { overflow: hidden; } .sc-monthly-section--table .sc-table-wrap, .sc-monthly-section--table .sc-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Sticky-колонка должна оставаться над контентом, но не «перебивать» при скролле */ .sc-table--compact .sc-sticky-col { position: sticky; z-index: 2; } .sc-table--compact thead th.sc-sticky-col { z-index: 3; } /* ============================================================================ * 6D.4 — Topbar / page header overlap guards * ============================================================================ */ .sc-page-header.sc-page-header--flat, .sc-page-header.sc-page-header--reports { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; } .sc-page-header > div:first-child { min-width: 0; flex: 1 1 280px; } /* ============================================================================ * 6D.5 — Light / dark parity safety * ============================================================================ */ [data-theme="dark"] .sc-empty--boxed .sc-empty-text { color: var(--muted-foreground); } [data-theme="dark"] .sc-table-scroll { scrollbar-color: rgba(148, 163, 184, 0.5) transparent; } .sc-table-scroll { scrollbar-width: thin; } /* ============================================================================ * Phase 6E — Demo Mode & Client Presentation Polish * * Тонкий read-only «Demo / Presentation» слой для премиальной презентации * клиенту. Не меняет бизнес-логику и backend; только UI-копия и оформление. * * Компоненты: * - `.sc-demo-badge` — небольшой premium-чип в topbar. * - `.sc-value-hint` — однострочный role-хинт под hero на каждой * из 7 целевых страниц. * - `.sc-value-hint__icon`, `.sc-value-hint__text` * - `.sc-presentation-note` — резерв на будущие preset-блоки. * - `.sc-page-demo-context` — generic alias для оборачивающих контейнеров. * - `.sc-sidebar-footer__hint--meta` — третья (мета) строка в sidebar footer. * * Все цвета через CSS-vars, dark-варианты явно скоупированы. * Light/dark parity, responsive 1366/1280/768. JS не используется. * ============================================================================ */ /* ---- Phase 6E marker (служебный, не используется в шаблонах) ---- */ .sc-phase-6e-marker { display: none; } /* ============================================================================ * 6E.1 — Demo badge (topbar) * ============================================================================ */ .sc-demo-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px 5px 9px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--primary-strong, #145441); background: linear-gradient(180deg, rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.4)), rgba(31, 111, 85, 0.10); border: 1px solid rgba(31, 111, 85, 0.22); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.5) inset, 0 6px 14px -12px rgba(31, 111, 85, 0.30); user-select: none; white-space: nowrap; } .sc-demo-badge__dot { width: 6px; height: 6px; border-radius: 999px; background: var(--primary, #1f6f55); box-shadow: 0 0 0 3px rgba(31, 111, 85, 0.18); flex: 0 0 auto; } .sc-demo-badge__text { line-height: 1; } [data-theme="dark"] .sc-demo-badge { color: #6ee7b7; background: linear-gradient(180deg, rgba(255, 255, 255, 0.05), rgba(255, 255, 255, 0.01)), rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.30); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 6px 14px -12px rgba(52, 211, 153, 0.30); } [data-theme="dark"] .sc-demo-badge__dot { background: #4ade80; box-shadow: 0 0 0 3px rgba(74, 222, 128, 0.20); } /* Phase 18A.1 — Demo showcase read-only preview */ .sc-demo-showcase-badge { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px 5px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: #92400e; background: linear-gradient(180deg, rgba(255,255,255,0.92), rgba(255,251,235,0.88)); border: 1px solid rgba(245, 158, 11, 0.35); } .sc-demo-showcase-badge__dot { width: 7px; height: 7px; border-radius: 999px; background: #f59e0b; } .sc-demo-showcase-banner { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; margin: 0 0 14px; border-radius: 12px; border: 1px solid rgba(245, 158, 11, 0.28); background: rgba(255, 251, 235, 0.92); color: #78350f; } .sc-demo-showcase-banner__icon { flex: 0 0 auto; margin-top: 1px; } .sc-demo-showcase-banner__text { line-height: 1.45; font-size: 14px; } .sc-btn--demo-preview { box-shadow: inset 0 0 0 1px rgba(245, 158, 11, 0.35); } .sc-payroll-bulk--demo-preview, .sc-demo-preview-fieldset[disabled] { opacity: 0.88; } .sc-demo-preview-note { color: #92400e; font-size: 13px; } [data-theme="dark"] .sc-demo-showcase-badge { color: #fcd34d; background: rgba(245, 158, 11, 0.12); border-color: rgba(245, 158, 11, 0.35); } [data-theme="dark"] .sc-demo-showcase-banner { background: rgba(245, 158, 11, 0.1); border-color: rgba(245, 158, 11, 0.28); color: #fde68a; } /* ============================================================================ * 6E.2 — Value hint (per-page role microcopy) * ============================================================================ */ .sc-value-hint { display: flex; align-items: center; gap: 10px; padding: 10px 14px; margin: 4px 0 14px; border-radius: var(--sc-radius-lg, 14px); border: 1px solid var(--border, #e5e1d8); background: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.55)), rgba(31, 111, 85, 0.04); color: var(--foreground, #1c1f24); font-size: 13px; line-height: 1.5; box-shadow: var(--sc-shadow-soft, 0 6px 14px -10px rgba(0, 0, 0, 0.10)); } .sc-value-hint__icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex: 0 0 28px; border-radius: 8px; background: rgba(31, 111, 85, 0.10); color: var(--primary-strong, #145441); border: 1px solid rgba(31, 111, 85, 0.18); } .sc-value-hint__icon svg { stroke: currentColor; } .sc-value-hint__text { flex: 1 1 auto; color: var(--foreground, #1c1f24); } .sc-value-hint__text strong { font-weight: 600; color: var(--foreground-strong, #0f1216); margin-right: 4px; } /* Dark mode parity */ [data-theme="dark"] .sc-value-hint { background: linear-gradient(180deg, rgba(255, 255, 255, 0.03), rgba(255, 255, 255, 0.008)), rgba(52, 211, 153, 0.05); border-color: rgba(255, 255, 255, 0.07); color: var(--foreground); box-shadow: 0 6px 14px -10px rgba(0, 0, 0, 0.4); } [data-theme="dark"] .sc-value-hint__icon { background: rgba(52, 211, 153, 0.12); color: #6ee7b7; border-color: rgba(52, 211, 153, 0.22); } [data-theme="dark"] .sc-value-hint__text { color: var(--foreground); } [data-theme="dark"] .sc-value-hint__text strong { color: var(--foreground); } /* Phase 18A — owner cross-tenant scope banner */ .sc-owner-scope-banner { display: flex; align-items: center; gap: 10px; margin: 0 0 16px; padding: 10px 14px; border-radius: 10px; font-size: 13px; font-weight: 500; color: var(--foreground-muted, #475569); background: rgba(100, 116, 139, 0.08); border: 1px solid rgba(100, 116, 139, 0.18); } .sc-owner-scope-banner__icon { display: inline-flex; flex: 0 0 auto; color: var(--primary-strong, #145441); } .sc-owner-scope-banner__text { line-height: 1.4; } [data-theme="dark"] .sc-owner-scope-banner { color: var(--foreground-muted, #94a3b8); background: rgba(148, 163, 184, 0.08); border-color: rgba(148, 163, 184, 0.16); } /* Generic alias (резерв для будущих use-cases) */ .sc-presentation-note { /* alias */ } .sc-page-demo-context { /* alias */ } /* ============================================================================ * 6E.3 — Sidebar footer meta line * ============================================================================ */ .sc-sidebar-footer__hint--meta { display: block; margin-top: 4px; font-size: 10.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground, #6b6a64); opacity: 0.85; } [data-theme="dark"] .sc-sidebar-footer__hint--meta { color: var(--muted-foreground); } /* ============================================================================ * 6E.4 — Responsive polish (1366 / 1280 / 768) * ============================================================================ */ @media (max-width: 1366px) { .sc-demo-badge { font-size: 11px; padding: 4px 10px 4px 8px; } .sc-value-hint { font-size: 12.5px; padding: 9px 12px; } } @media (max-width: 1280px) { /* На compact-laptop bm не убираем, но допускаем плотность */ .sc-value-hint { gap: 8px; } .sc-value-hint__icon { width: 26px; height: 26px; flex-basis: 26px; } } @media (max-width: 768px) { /* На узком экране бэдж скрываем, чтобы не «толпился» с user/logout */ .sc-demo-badge { display: none; } .sc-value-hint { padding: 9px 11px; gap: 8px; font-size: 12.5px; margin-bottom: 10px; } .sc-value-hint__icon { width: 24px; height: 24px; flex-basis: 24px; } } /* ============================================================================ * Phase 6G — Monthly attendance table readability & premium heatmap UX * * Только HTML/CSS monthly_attendance: мягкая тепловая карта, легенда-пилюли, * sticky колонка сотрудника, горизонтальный scroll внутри карточки, light/dark. * Маркер для тестов: .sc-phase-6g-marker (display:none). * ============================================================================ */ .sc-phase-6g-marker { display: none; } .sc-monthly-board--flush.sc-premium-table-card, .sc-monthly-board.sc-premium-table-card { padding: 0; overflow: hidden; } .sc-monthly-empty-state { padding: 0 4px 4px; } .sc-monthly-empty-state .sc-empty.sc-empty--boxed { margin: 0 12px 14px; } .sc-monthly-board__header.sc-table-toolbar { align-items: flex-start; padding: 16px 18px 12px; gap: 14px; border-bottom: 1px solid var(--border, #e8e4dc); background: linear-gradient(180deg, var(--card, #ffffff) 0%, var(--muted, #faf9f5) 100%); } .sc-monthly-board__head-text.sc-table-toolbar__title { display: block; min-width: 0; flex: 1 1 280px; } .sc-monthly-board__title { margin: 0 0 4px; font-size: 18px; font-weight: 650; font-family: "Fraunces", "Inter", serif; letter-spacing: -0.02em; color: var(--foreground-strong, #0f1216); } .sc-monthly-board__subtitle { margin: 0; font-size: 13px; line-height: 1.5; color: var(--muted-foreground, #5f5c55); max-width: 720px; } .sc-monthly-board__meta { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted-foreground, #6b6a64); opacity: 0.92; } .sc-monthly-board__export-actions { flex-shrink: 0; align-self: flex-start; } /* Legend: compact pills (сохраняем sc-legend__dot для тестов Phase 4A.2B) */ .sc-monthly-legend.sc-legend--monthly { display: flex; flex-wrap: wrap; gap: 8px 14px; padding: 10px 18px 12px; margin: 0; border-bottom: 1px solid var(--sc-hairline, #ece8e0); background: var(--card, #ffffff); } .sc-monthly-legend__item.sc-legend__item { display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; font-weight: 600; color: var(--muted-foreground, #5f5c55); } .sc-monthly-legend__pill.sc-legend__dot { width: auto; min-width: 22px; height: 10px; padding: 0 6px; border-radius: 999px; flex-shrink: 0; border: 1px solid rgba(15, 18, 22, 0.06); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35); } .sc-monthly-scroll-hint { margin: 0; padding: 6px 18px 0; font-size: 11px; line-height: 1.45; color: var(--muted-foreground, #7a776d); opacity: 0.88; } .sc-monthly-table-scroll.sc-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } /* --- Table base: без жёсткой сетки «перекрёстков» --- */ .sc-monthly-table.sc-table--compact { min-width: 920px; border-collapse: separate; border-spacing: 0; --sc-mcell-radius: 7px; --sc-mcell-pad: 3px; } .sc-monthly-table.sc-table--compact thead th { font-weight: 650; font-size: 10.5px; letter-spacing: 0.02em; text-transform: none; border-bottom: 1px solid var(--border, #e5e1d8); background: var(--muted, #f4f2ec); color: var(--muted-foreground, #5c5a54); } .sc-monthly-col-num { width: 2.25rem; text-align: center; color: var(--muted-foreground, #7a776d); font-variant-numeric: tabular-nums; } .sc-monthly-employee-cell.sc-sticky-col { min-width: 11.5rem; max-width: 15rem; font-weight: 600; font-size: 12.5px; line-height: 1.35; background: var(--card, #ffffff); box-shadow: 4px 0 12px -8px rgba(15, 18, 22, 0.12); border-right: 1px solid var(--sc-hairline, #ece8e0); vertical-align: middle; } .sc-monthly-table thead th.sc-monthly-employee-cell { z-index: 4; vertical-align: bottom; } .sc-monthly-employee-name { display: inline; word-break: break-word; } .sc-monthly-schedule-cell { min-width: 4.75rem; white-space: nowrap; font-size: 11px; color: var(--muted-foreground, #6b6a64); background: rgba(247, 245, 240, 0.65); border-right: 1px solid var(--sc-hairline, #ece8e0); vertical-align: middle; } .sc-monthly-schedule-text { display: inline-block; padding: 2px 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.55); border: 1px solid var(--sc-hairline, #ece8e0); } /* Day headers */ .sc-monthly-day-head { min-width: 38px; max-width: 48px; text-align: center; vertical-align: bottom; padding: 8px 4px 6px; line-height: 1.2; border-left: 1px solid transparent; } .sc-monthly-day-head__num { display: block; font-size: 12.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--foreground-strong, #0f1216); } .sc-monthly-weekday { display: block; margin-top: 2px; font-size: 9.5px; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted-foreground, #7a776d); } .sc-monthly-day-head--weekend .sc-monthly-day-head__num, .sc-monthly-day-head--weekend .sc-monthly-weekday { color: #9a968c; opacity: 0.85; } .sc-monthly-day-head--weekend { background: rgba(246, 244, 238, 0.85); } .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 2px rgba(31, 111, 85, 0.28); border-radius: 6px; display: inline-block; padding: 1px 5px; margin-bottom: 1px; } /* Data rows */ .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom: 1px solid rgba(232, 228, 220, 0.65); border-right: 1px solid rgba(232, 228, 220, 0.35); } .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(31, 111, 85, 0.045); } .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-employee-cell { background: rgba(250, 249, 245, 0.98); } .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell { filter: none; } /* Heatmap cells: мягкий фон + внутренний «чип» */ .sc-monthly-table.sc-table--compact .day-cell.sc-monthly-cell { min-width: 40px; max-width: 52px; height: 46px; padding: var(--sc-mcell-pad); text-align: center; vertical-align: middle; transition: background-color 0.14s ease, box-shadow 0.14s ease; border-right: 1px solid rgba(232, 228, 220, 0.25); background: rgba(250, 249, 245, 0.55) !important; color: var(--foreground, #1a1d21) !important; font-weight: 500 !important; } .sc-monthly-cell__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 38px; } .sc-monthly-cell__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 20px; padding: 0 6px; border-radius: 999px; font-size: 11px; font-weight: 750; line-height: 1; border: 1px solid rgba(15, 18, 22, 0.06); box-shadow: 0 1px 2px rgba(15, 18, 22, 0.04); } .sc-monthly-cell__badge--muted { opacity: 0.45; font-weight: 600; border-color: transparent; box-shadow: none; background: transparent !important; } .sc-monthly-cell__badge--dash { font-weight: 700; letter-spacing: 0.04em; } .sc-monthly-cell__times { display: flex; flex-direction: column; gap: 0; width: 100%; align-items: center; } .sc-monthly-cell__time { font-size: 9px; font-weight: 650; line-height: 1.15; font-variant-numeric: tabular-nums; color: var(--muted-foreground, #5f5c55); opacity: 0.92; } .sc-monthly-cell__time--out { opacity: 0.75; } /* Status tints (light) — перебиваем legacy .day-cell с более высокой специфичностью */ .sc-monthly-table td.day-cell.sc-monthly-cell--present, .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present { background: rgba(209, 250, 229, 0.55) !important; color: #145038 !important; } .sc-monthly-table td.day-cell.sc-monthly-cell--present .sc-monthly-cell__badge { background: rgba(16, 185, 129, 0.2); color: #0f5132; border-color: rgba(16, 185, 129, 0.25); } .sc-monthly-table td.day-cell.sc-monthly-cell--late, .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late { background: rgba(254, 243, 199, 0.55) !important; color: #7a4a05 !important; } .sc-monthly-table td.day-cell.sc-monthly-cell--late .sc-monthly-cell__badge { background: rgba(245, 158, 11, 0.22); color: #92400e; border-color: rgba(245, 158, 11, 0.28); } .sc-monthly-table td.day-cell.sc-monthly-cell--partial, .sc-monthly-table td.day-cell.day-cell--partial.sc-monthly-cell--partial { background: rgba(237, 233, 254, 0.55) !important; color: #4b3380 !important; } .sc-monthly-table td.day-cell.sc-monthly-cell--partial .sc-monthly-cell__badge { background: rgba(139, 92, 246, 0.15); color: #5b21b6; border-color: rgba(139, 92, 246, 0.22); } .sc-monthly-table td.day-cell.sc-monthly-cell--absent, .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent { background: rgba(254, 226, 226, 0.5) !important; color: #7a1a10 !important; } .sc-monthly-table td.day-cell.sc-monthly-cell--absent .sc-monthly-cell__badge { background: rgba(248, 113, 113, 0.18); color: #991b1b; border-color: rgba(248, 113, 113, 0.25); } .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(254, 249, 231, 0.65) !important; color: #6b5a12 !important; } .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping .sc-monthly-cell__badge { background: rgba(234, 179, 8, 0.18); color: #854d0e; border-color: rgba(234, 179, 8, 0.28); } .sc-monthly-table td.day-cell.sc-monthly-cell--weekend, .sc-monthly-table td.day-cell.day-cell--weekend.sc-monthly-cell--weekend { background: rgba(245, 243, 236, 0.75) !important; color: #7a776d !important; } .sc-monthly-table td.day-cell.sc-monthly-cell--empty, .sc-monthly-table td.day-cell.sc-monthly-cell--future, .sc-monthly-table td.day-cell.day-cell--future.sc-monthly-cell--future { background: rgba(247, 246, 242, 0.85) !important; color: #a8a29a !important; } /* --- Dark mode: графитовая карточка, без «белых» ячеек --- */ [data-theme="dark"] .sc-monthly-board__header.sc-table-toolbar { background: linear-gradient(180deg, rgba(30, 41, 59, 0.92) 0%, rgba(15, 23, 42, 0.98) 100%); border-bottom-color: rgba(148, 163, 184, 0.12); } [data-theme="dark"] .sc-monthly-board__title { color: var(--foreground, #e2e8f0); } [data-theme="dark"] .sc-monthly-board__subtitle, [data-theme="dark"] .sc-monthly-board__meta { color: var(--muted-foreground, #94a3b8); } [data-theme="dark"] .sc-monthly-legend.sc-legend--monthly { background: rgba(15, 23, 42, 0.55); border-bottom-color: rgba(148, 163, 184, 0.1); } [data-theme="dark"] .sc-monthly-legend__item.sc-legend__item { color: var(--muted-foreground, #94a3b8); } [data-theme="dark"] .sc-monthly-scroll-hint { color: var(--muted-foreground, #94a3b8); } [data-theme="dark"] .sc-monthly-table.sc-table--compact thead th { background: rgba(30, 41, 59, 0.85); color: #cbd5e1; border-bottom-color: rgba(148, 163, 184, 0.12); } [data-theme="dark"] .sc-monthly-day-head--weekend { background: rgba(30, 41, 59, 0.45); } [data-theme="dark"] .sc-monthly-day-head--weekend .sc-monthly-day-head__num, [data-theme="dark"] .sc-monthly-day-head--weekend .sc-monthly-weekday { color: #64748b; } [data-theme="dark"] .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 2px rgba(52, 211, 153, 0.35); } [data-theme="dark"] .sc-monthly-employee-cell.sc-sticky-col { background: rgba(15, 23, 42, 0.96); border-right-color: rgba(148, 163, 184, 0.12); box-shadow: 6px 0 18px -10px rgba(0, 0, 0, 0.55); color: #e2e8f0; } [data-theme="dark"] .sc-monthly-table thead th.sc-monthly-employee-cell { background: rgba(30, 41, 59, 0.95); } [data-theme="dark"] .sc-monthly-schedule-cell { background: rgba(30, 41, 59, 0.55); border-right-color: rgba(148, 163, 184, 0.1); color: #94a3b8; } [data-theme="dark"] .sc-monthly-schedule-text { background: rgba(15, 23, 42, 0.5); border-color: rgba(148, 163, 184, 0.12); } [data-theme="dark"] .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(148, 163, 184, 0.08); border-right-color: rgba(148, 163, 184, 0.06); } [data-theme="dark"] .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(52, 211, 153, 0.06); } [data-theme="dark"] .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-employee-cell { background: rgba(15, 23, 42, 0.98); } [data-theme="dark"] .sc-monthly-table.sc-table--compact .day-cell.sc-monthly-cell { background: rgba(30, 41, 59, 0.42) !important; color: #e2e8f0 !important; border-right-color: rgba(148, 163, 184, 0.06); } [data-theme="dark"] .sc-monthly-cell__time { color: #94a3b8; } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--present, [data-theme="dark"] .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present { background: rgba(6, 78, 59, 0.42) !important; color: #d1fae5 !important; } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--present .sc-monthly-cell__badge { background: rgba(16, 185, 129, 0.22); color: #a7f3d0; border-color: rgba(52, 211, 153, 0.25); } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--late, [data-theme="dark"] .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late { background: rgba(120, 53, 15, 0.35) !important; color: #fde68a !important; } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--late .sc-monthly-cell__badge { background: rgba(245, 158, 11, 0.22); color: #fcd34d; border-color: rgba(251, 191, 36, 0.25); } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--partial, [data-theme="dark"] .sc-monthly-table td.day-cell.day-cell--partial.sc-monthly-cell--partial { background: rgba(76, 29, 149, 0.32) !important; color: #ede9fe !important; } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--partial .sc-monthly-cell__badge { background: rgba(139, 92, 246, 0.22); color: #ddd6fe; border-color: rgba(167, 139, 250, 0.28); } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--absent, [data-theme="dark"] .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent { background: rgba(127, 29, 29, 0.38) !important; color: #fecaca !important; } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--absent .sc-monthly-cell__badge { background: rgba(248, 113, 113, 0.2); color: #fecaca; border-color: rgba(252, 165, 165, 0.22); } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(113, 63, 18, 0.32) !important; color: #fef3c7 !important; } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping .sc-monthly-cell__badge { background: rgba(234, 179, 8, 0.2); color: #fde68a; border-color: rgba(250, 204, 21, 0.22); } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--weekend, [data-theme="dark"] .sc-monthly-table td.day-cell.day-cell--weekend.sc-monthly-cell--weekend { background: rgba(30, 41, 59, 0.35) !important; color: #94a3b8 !important; } [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--empty, [data-theme="dark"] .sc-monthly-table td.day-cell.sc-monthly-cell--future, [data-theme="dark"] .sc-monthly-table td.day-cell.day-cell--future.sc-monthly-cell--future { background: rgba(15, 23, 42, 0.5) !important; color: #64748b !important; } @media (max-width: 1366px) { .sc-monthly-board__title { font-size: 17px; } .sc-monthly-legend.sc-legend--monthly { gap: 6px 10px; } } /* ============================================================================ * Phase 6G.1 — Monthly Attendance Enterprise Readability Polish * * Финальная визуальная калибровка тёмной темы: меньше «крикучих» красных/жёлтых * ячеек, спокойнее future/weekend, графитовые sticky-колонки без излишнего blue-slate, * мягче сетка и hover. Скоуп: .sc-monthly-board — не ломает light по умолчанию. * Маркер тестов: .sc-phase-6g1-marker { display: none; } * ============================================================================ */ .sc-phase-6g1-marker { display: none; } /* Light: только spacing легенды (без смены палитры статусов) */ .sc-monthly-board .sc-monthly-legend.sc-legend--monthly { row-gap: 10px; column-gap: 16px; padding-bottom: 14px; } .sc-monthly-board .sc-monthly-legend__item.sc-legend__item { line-height: 1.35; } /* --- Dark: executive board — переопределение поверх Phase 6G --- */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table.sc-table--compact thead th { background: rgba(39, 39, 42, 0.92); color: #a1a1aa; border-bottom-color: rgba(113, 113, 122, 0.22); font-weight: 600; } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head__num { color: #e4e4e7; font-weight: 650; } [data-theme="dark"] .sc-monthly-board .sc-monthly-weekday { color: #71717a; font-weight: 600; } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--weekend { background: rgba(24, 24, 27, 0.55); } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--weekend .sc-monthly-day-head__num, [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--weekend .sc-monthly-weekday { color: #52525b; opacity: 1; } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 1.5px rgba(52, 211, 153, 0.22); background: rgba(16, 185, 129, 0.08); } [data-theme="dark"] .sc-monthly-board .sc-monthly-legend.sc-legend--monthly { background: rgba(24, 24, 27, 0.65); border-bottom-color: rgba(63, 63, 70, 0.45); } [data-theme="dark"] .sc-monthly-board .sc-monthly-legend__item.sc-legend__item { color: #d4d4d8; } [data-theme="dark"] .sc-monthly-board .sc-monthly-legend__pill.sc-legend__dot { border-color: rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04); } [data-theme="dark"] .sc-monthly-board .sc-monthly-scroll-hint { color: #71717a; opacity: 1; } /* Sticky: нейтральный графит вместо холодного slate-blue */ [data-theme="dark"] .sc-monthly-board .sc-monthly-employee-cell.sc-sticky-col { background: rgba(32, 32, 35, 0.98); color: #e4e4e7; border-right-color: rgba(63, 63, 70, 0.5); box-shadow: 4px 0 14px -8px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-employee-cell { background: rgba(36, 36, 40, 0.98); color: #d4d4d8; } [data-theme="dark"] .sc-monthly-board .sc-monthly-schedule-cell { background: rgba(28, 28, 31, 0.95); color: #a1a1aa; border-right-color: rgba(63, 63, 70, 0.45); } [data-theme="dark"] .sc-monthly-board .sc-monthly-schedule-text { background: rgba(39, 39, 42, 0.75); border-color: rgba(63, 63, 70, 0.5); color: #d4d4d8; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(63, 63, 70, 0.28); border-right-color: rgba(63, 63, 70, 0.18); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(255, 255, 255, 0.028); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-employee-cell { background: rgba(42, 42, 46, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell { filter: none; } /* Базовая ячейка дня: спокойный canvas */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table.sc-table--compact .day-cell.sc-monthly-cell { background: rgba(28, 28, 31, 0.55) !important; color: #d4d4d8 !important; border-right-color: rgba(63, 63, 70, 0.15); } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__time { color: #71717a; } /* Present — главный позитивный сигнал, мягче */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present { background: rgba(6, 95, 70, 0.22) !important; color: #bbf7d0 !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present .sc-monthly-cell__badge { background: rgba(16, 185, 129, 0.14); color: #86efac; border-color: rgba(52, 211, 153, 0.18); box-shadow: none; } /* Late — янтарь без крика */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late { background: rgba(120, 53, 15, 0.2) !important; color: #fcd34d !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late .sc-monthly-cell__badge { background: rgba(217, 119, 6, 0.16); color: #fbbf24; border-color: rgba(245, 158, 11, 0.18); box-shadow: none; } /* Partial — чуть приглушённый фиолет */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--partial, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--partial.sc-monthly-cell--partial { background: rgba(76, 29, 149, 0.18) !important; color: #e9d5ff !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--partial .sc-monthly-cell__badge { background: rgba(124, 58, 237, 0.14); color: #d8b4fe; border-color: rgba(167, 139, 250, 0.18); box-shadow: none; } /* Absent — красный оттенок без доминирования */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent { background: rgba(127, 29, 29, 0.16) !important; color: #fca5a5 !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent .sc-monthly-cell__badge { background: rgba(185, 28, 28, 0.2); color: #fecaca; border-color: rgba(248, 113, 113, 0.15); box-shadow: none; } /* No mapping — нейтральный янтарь/сланец, не «жёлтая тревога» */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(63, 63, 70, 0.45) !important; color: #d6d3d1 !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping .sc-monthly-cell__badge { background: rgba(161, 98, 7, 0.2); color: #e7d5b7; border-color: rgba(180, 83, 9, 0.22); box-shadow: none; font-weight: 700; } /* Weekend — уходит на второй план */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--weekend.sc-monthly-cell--weekend { background: rgba(24, 24, 27, 0.42) !important; color: #52525b !important; } /* Future / empty — почти фон, без «точечной текстуры» */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--empty, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--future.sc-monthly-cell--future { background: rgba(24, 24, 27, 0.38) !important; color: #3f3f46 !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--empty .sc-monthly-cell__badge--muted, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future .sc-monthly-cell__badge--muted, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend .sc-monthly-cell__badge--muted { opacity: 0.2; color: inherit; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell .sc-monthly-cell__badge { font-weight: 700; } [data-theme="dark"] .sc-monthly-board .sc-monthly-board__header.sc-table-toolbar { background: linear-gradient(180deg, rgba(36, 36, 40, 0.95) 0%, rgba(24, 24, 27, 0.98) 100%); border-bottom-color: rgba(63, 63, 70, 0.4); } /* ============================================================================ * Phase 6G.2 — Monthly Attendance Real Enterprise Table Upgrade * * Плотный табельный регистр: тройной sticky (# / сотрудник / график), ритм недель, * спокойные ячейки без «игрушечных» кругов. Маркер тестов: .sc-phase-6g2-marker * ============================================================================ */ .sc-phase-6g2-marker { display: none; } .sc-monthly-board .sc-monthly-board__meta--block { display: block; margin: 6px 0 0; font-size: 11px; font-weight: 600; letter-spacing: 0.03em; text-transform: none; color: var(--muted-foreground, #6b6a64); } .sc-monthly-board .sc-monthly-legend--compact.sc-legend--monthly { gap: 6px 12px; padding-top: 8px; padding-bottom: 10px; } /* Горизонтальный скролл только внутри карточки */ .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll { width: 100%; max-width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .sc-monthly-board .sc-monthly-table.sc-table--compact { min-width: 1380px; max-width: none; font-variant-numeric: tabular-nums; --sc-m-num-w: 2.35rem; --sc-m-emp-w: 12.75rem; --sc-m-sch-w: 5.5rem; } /* --- Тройной sticky: #, сотрудник, график --- */ .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num, .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-num { position: sticky; left: 0; z-index: 8; background: var(--card, #ffffff); box-shadow: 1px 0 0 rgba(232, 228, 220, 0.9); } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num { z-index: 12; background: var(--muted, #f4f2ec); } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col, .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-emp.sc-sticky-col { position: sticky; left: var(--sc-m-num-w); z-index: 7; box-shadow: 1px 0 0 rgba(232, 228, 220, 0.75); } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col { z-index: 11; } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch, .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-sch { position: sticky; left: calc(var(--sc-m-num-w) + var(--sc-m-emp-w)); z-index: 6; background: rgba(247, 245, 240, 0.92); box-shadow: 1px 0 0 rgba(232, 228, 220, 0.65); } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch { z-index: 10; background: rgba(244, 242, 236, 0.98); } .sc-monthly-board .sc-monthly-employee-name { font-weight: 650; letter-spacing: -0.01em; } .sc-monthly-board .sc-monthly-schedule-text { font-size: 10.5px; font-weight: 600; font-variant-numeric: tabular-nums; } /* Начало календарной недели (понедельник) */ .sc-monthly-board .sc-monthly-day-head--week-start { border-left: 1px solid rgba(15, 18, 22, 0.08); } .sc-monthly-board .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 1.5px rgba(31, 111, 85, 0.22); background: rgba(16, 185, 129, 0.08); border-radius: 4px; } /* Ячейки: компактный «регистр» */ .sc-monthly-board .sc-monthly-cell__inner--register { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-height: 36px; padding: 2px 1px; font-variant-numeric: tabular-nums; line-height: 1.15; } .sc-monthly-board .sc-monthly-cell__toprow { display: inline-flex; align-items: center; justify-content: center; gap: 4px; flex-wrap: wrap; } .sc-monthly-board .sc-monthly-cell__mark { font-size: 10px; font-weight: 750; line-height: 1; opacity: 0.88; } .sc-monthly-board .sc-monthly-cell__label { font-size: 8.5px; font-weight: 650; letter-spacing: 0.02em; text-transform: none; color: var(--muted-foreground, #6b6a64); opacity: 0.95; } .sc-monthly-board .sc-monthly-cell__label--late { color: #92400e; } .sc-monthly-board .sc-monthly-cell__late-min { font-size: 8.5px; font-weight: 700; font-variant-numeric: tabular-nums; color: #92400e; opacity: 0.92; } .sc-monthly-board .sc-monthly-cell__absent { font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: inherit; opacity: 0.88; } .sc-monthly-board .sc-monthly-cell__nomap { font-size: 9px; font-weight: 700; letter-spacing: 0.02em; opacity: 0.9; } .sc-monthly-board .sc-monthly-cell__void { font-size: 12px; font-weight: 600; line-height: 1; opacity: 0.28; } .sc-monthly-board .sc-monthly-table.sc-table--compact .day-cell.sc-monthly-cell { height: auto; min-height: 42px; max-width: 52px; padding: 2px 1px; } .sc-monthly-board .sc-monthly-cell__times { gap: 0; } .sc-monthly-board .sc-monthly-cell__time { font-size: 8.5px; font-weight: 650; } /* Row hover — след строки по месяцу (enterprise) */ .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(31, 111, 85, 0.035); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-num { background: rgba(250, 249, 245, 0.99); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-emp.sc-sticky-col { background: rgba(252, 251, 248, 0.99); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-sch { background: rgba(248, 246, 240, 0.98); } /* --- Dark: табель на графитовой поверхности --- */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-num { background: rgba(32, 32, 35, 0.99); color: #a1a1aa; box-shadow: 1px 0 0 rgba(63, 63, 70, 0.55); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num { background: rgba(36, 36, 40, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-sch { background: rgba(28, 28, 31, 0.98); color: #a1a1aa; box-shadow: 1px 0 0 rgba(63, 63, 70, 0.45); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch { background: rgba(34, 34, 38, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--week-start { border-left-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(255, 255, 255, 0.02); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-num { background: rgba(39, 39, 42, 0.995); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-emp.sc-sticky-col { background: rgba(42, 42, 46, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-sch { background: rgba(36, 36, 40, 0.98); } /* ============================================================================ * Phase 6G.3 — Monthly Attendance Final Enterprise Register Polish * * Спокойнее ячейки, компактное опоздание (! +Nм), тихие пустые дни, scrollbar, * тень после графика, мягче сетка и заголовки дней. Маркер: .sc-phase-6g3-marker * ============================================================================ */ .sc-phase-6g3-marker { display: none; } .sc-monthly-board .sc-monthly-table.sc-table--compact { min-width: 1320px; } .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll { scrollbar-width: thin; scrollbar-color: rgba(120, 118, 110, 0.35) rgba(0, 0, 0, 0.04); } .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll::-webkit-scrollbar { height: 8px; } .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll::-webkit-scrollbar-track { background: rgba(0, 0, 0, 0.04); border-radius: 6px; } .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll::-webkit-scrollbar-thumb { background: rgba(120, 118, 110, 0.35); border-radius: 6px; } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch, .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-sch { box-shadow: 1px 0 0 rgba(232, 228, 220, 0.55), 8px 0 18px -10px rgba(15, 18, 22, 0.07); } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num, .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-num { background: #ffffff; box-shadow: 1px 0 0 rgba(232, 228, 220, 0.75); } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num { background: #faf9f6; } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col, .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-emp.sc-sticky-col { background: #ffffff; box-shadow: 1px 0 0 rgba(232, 228, 220, 0.65); } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col { background: #faf9f6; } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch, .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-sch { background: #faf9f7; } .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch { background: #f7f5f0; } .sc-monthly-board .sc-monthly-schedule-text { font-weight: 550; opacity: 0.92; } .sc-monthly-board .sc-monthly-day-head__num { font-size: 13px; font-weight: 750; letter-spacing: -0.02em; } .sc-monthly-board .sc-monthly-weekday { font-size: 9px; font-weight: 600; opacity: 0.62; letter-spacing: 0.04em; } .sc-monthly-board .sc-monthly-day-head--week-start { border-left-color: rgba(15, 18, 22, 0.06); } .sc-monthly-board .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 1px rgba(31, 111, 85, 0.2); background: rgba(16, 185, 129, 0.06); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(232, 228, 220, 0.45); border-right-color: rgba(232, 228, 220, 0.22); } .sc-monthly-board .sc-monthly-table.sc-table--compact .day-cell.sc-monthly-cell { min-height: 40px; max-width: 50px; } .sc-monthly-board .sc-monthly-cell__inner--register { gap: 0; min-height: 34px; padding: 2px 1px; } .sc-monthly-board .sc-monthly-cell__inner--blank, .sc-monthly-board .sc-monthly-cell--blank-tone .sc-monthly-cell__inner--register:not(.sc-monthly-cell__inner--blank) { min-height: 26px; padding: 0; } .sc-monthly-board .sc-monthly-cell__late-compact { display: inline-flex; align-items: baseline; justify-content: center; gap: 3px; line-height: 1; } .sc-monthly-board .sc-monthly-cell__late-delta { font-size: 8.5px; font-weight: 750; font-variant-numeric: tabular-nums; color: #a16207; letter-spacing: -0.02em; } .sc-monthly-board .sc-monthly-cell__absent--mark { display: block; font-size: 13px; font-weight: 500; line-height: 1; opacity: 0.36; letter-spacing: 0; } .sc-monthly-board .sc-monthly-cell__idchip { display: inline-block; font-size: 7px; font-weight: 750; letter-spacing: 0.06em; padding: 1px 4px; border-radius: 3px; line-height: 1.2; opacity: 0.72; border: 1px solid rgba(161, 98, 7, 0.22); background: rgba(254, 243, 199, 0.35); color: #713f12; } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(250, 248, 240, 0.9) !important; } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone { background: rgba(252, 251, 249, 0.55) !important; color: rgba(15, 18, 22, 0.12) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll { scrollbar-color: rgba(113, 113, 122, 0.45) rgba(24, 24, 27, 0.6); } [data-theme="dark"] .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll::-webkit-scrollbar-track { background: rgba(24, 24, 27, 0.65); } [data-theme="dark"] .sc-monthly-board .sc-monthly-scroll.sc-monthly-table-scroll::-webkit-scrollbar-thumb { background: rgba(113, 113, 122, 0.45); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-num { background: rgba(40, 40, 44, 0.98); box-shadow: 1px 0 0 rgba(63, 63, 70, 0.4); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num { background: rgba(44, 44, 48, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-emp.sc-sticky-col { background: rgba(38, 38, 42, 0.98); box-shadow: 1px 0 0 rgba(63, 63, 70, 0.38); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col { background: rgba(42, 42, 46, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-sch { background: rgba(36, 36, 40, 0.97); box-shadow: 1px 0 0 rgba(63, 63, 70, 0.38), 10px 0 22px -12px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch { background: rgba(40, 40, 44, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.22); background: rgba(16, 185, 129, 0.07); } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__late-delta { color: #fbbf24; } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__idchip { border-color: rgba(180, 83, 9, 0.25); background: rgba(63, 63, 70, 0.35); color: #d6d3d1; opacity: 0.85; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(39, 39, 42, 0.55) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone { background: rgba(24, 24, 27, 0.35) !important; color: rgba(228, 228, 231, 0.06) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(63, 63, 70, 0.22); border-right-color: rgba(63, 63, 70, 0.12); } /* ============================================================================ * Phase 6G.4 — Monthly Attendance Final Executive Readability Fix * * Тише no-mapping (точка вместо чипа), спокойнее absent/present/future, * чётче late-stack, компактнее легенда, мягче сетка и hover. Маркер: .sc-phase-6g4-marker * ============================================================================ */ .sc-phase-6g4-marker { display: none; } .sc-monthly-board .sc-monthly-table.sc-table--compact { min-width: 1280px; } .sc-monthly-board .sc-monthly-legend--compact.sc-monthly-legend--6g4.sc-legend--monthly { padding-top: 6px; padding-bottom: 8px; gap: 4px 10px; row-gap: 6px; } .sc-monthly-board .sc-monthly-legend--6g4 .sc-monthly-legend__item.sc-legend__item { font-size: 11px; line-height: 1.25; } .sc-monthly-board .sc-monthly-table.sc-table--compact thead th.sc-monthly-day-head { padding-top: 6px; padding-bottom: 5px; } .sc-monthly-board .sc-monthly-day-head__num { font-size: 13.5px; font-weight: 780; } .sc-monthly-board .sc-monthly-weekday { opacity: 0.52; font-size: 8.5px; } .sc-monthly-board .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 1px rgba(31, 111, 85, 0.16); background: rgba(16, 185, 129, 0.05); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(232, 228, 220, 0.32); border-right-color: rgba(232, 228, 220, 0.14); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(31, 111, 85, 0.022); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--present, .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--late, .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--absent, .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--no-mapping { filter: brightness(1.02); } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-num { background: #fdfcfa; } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-emp.sc-sticky-col { background: #fdfcfa; } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-sch { background: #faf8f4; } .sc-monthly-board .sc-monthly-cell__late-compact { gap: 4px; margin-bottom: 3px; } .sc-monthly-board .sc-monthly-cell__times--late-stack { display: flex; flex-direction: column; align-items: center; gap: 1px; margin-top: 0; } .sc-monthly-board .sc-monthly-cell__times--late-stack .sc-monthly-cell__time { font-size: 9px; font-weight: 650; line-height: 1.2; } .sc-monthly-board .sc-monthly-cell__late-delta { font-size: 9px; color: #92400e; } .sc-monthly-board .sc-monthly-cell__mark--late { font-size: 11px; } .sc-monthly-board .sc-monthly-cell__mark--ok { font-size: 11px; opacity: 0.95; } .sc-monthly-board .sc-monthly-cell__times:not(.sc-monthly-cell__times--late-stack) .sc-monthly-cell__time { font-size: 9px; } .sc-monthly-board .sc-monthly-cell__absent--mark { font-size: 12px; opacity: 0.26; font-weight: 400; } .sc-monthly-board .sc-monthly-cell__nomap-marker { display: inline-flex; align-items: center; justify-content: center; min-width: 14px; min-height: 14px; margin: 0 auto; } .sc-monthly-board .sc-monthly-cell__nomap-dot { display: block; width: 5px; height: 5px; border-radius: 50%; background: rgba(180, 83, 9, 0.42); box-shadow: 0 0 0 1px rgba(180, 83, 9, 0.12); } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(255, 251, 235, 0.45) !important; } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present { background: rgba(209, 250, 229, 0.48) !important; } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present .sc-monthly-cell__time, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present .sc-monthly-cell__time { color: #145038; opacity: 0.95; } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late { background: rgba(254, 243, 199, 0.42) !important; } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent { background: rgba(254, 226, 226, 0.38) !important; } .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone { background: rgba(250, 250, 248, 0.35) !important; border-right-color: rgba(232, 228, 220, 0.08) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(255, 255, 255, 0.014); } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.16); background: rgba(16, 185, 129, 0.05); } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__late-delta { color: #fcd34d; } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__nomap-dot { background: rgba(251, 191, 36, 0.35); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.08); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(55, 48, 36, 0.35) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present { background: rgba(6, 95, 70, 0.2) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present .sc-monthly-cell__time, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present .sc-monthly-cell__time { color: #bbf7d0; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late { background: rgba(120, 53, 15, 0.22) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent { background: rgba(127, 29, 29, 0.14) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone { background: rgba(24, 24, 27, 0.22) !important; border-right-color: rgba(63, 63, 70, 0.06) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__absent--mark { opacity: 0.32; color: #fecaca; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(63, 63, 70, 0.14); border-right-color: rgba(63, 63, 70, 0.08); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-num { background: rgba(44, 44, 48, 0.995); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-emp.sc-sticky-col { background: rgba(46, 46, 50, 0.99); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-sch { background: rgba(42, 42, 46, 0.98); } /* Phase 8A.5 — owner client admin UI premium visual polish */ .sc-phase-8a5-marker { display: none; } .sc-owner-client-console { --sc-owner-accent: rgba(31, 111, 85, 0.12); --sc-owner-accent-border: rgba(31, 111, 85, 0.22); } .sc-owner-client-hero .sc-executive-hero__head { align-items: center; } .sc-owner-client-hero__cta { white-space: nowrap; flex-shrink: 0; } .sc-owner-client-kpi { margin-bottom: 18px; } .sc-owner-client-toolbar { margin-bottom: 18px; padding: 14px 16px; } .sc-owner-client-toolbar__form { margin: 0; align-items: center; } .sc-owner-client-toolbar__search { display: flex; align-items: center; gap: 8px; flex: 1 1 280px; min-width: 0; } .sc-owner-client-toolbar__search .sc-input { flex: 1; min-width: 0; } .sc-owner-client-table-card { margin-bottom: 18px; } .sc-owner-client-table .sc-owner-client-table__company { min-width: 160px; } .sc-owner-client-table__link { display: block; font-weight: 700; font-size: 13.5px; color: var(--foreground-strong, #0f1216); text-decoration: none; line-height: 1.35; } .sc-owner-client-table__link:hover { color: var(--primary-strong, #145441); } .sc-owner-client-table__meta { display: block; font-size: 11px; color: var(--muted-foreground, #6b6a64); margin-top: 2px; } .sc-owner-client-table__owner { font-weight: 600; font-size: 12.5px; } .sc-owner-client-table__num, .sc-owner-client-table__date { white-space: nowrap; font-size: 12.5px; } .sc-owner-client-table__actions { min-width: 148px; } .sc-owner-client-plan-pill { display: inline-flex; padding: 3px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; background: var(--sc-owner-accent); border: 1px solid var(--sc-owner-accent-border); color: var(--primary-strong, #145441); } .sc-owner-client-days { font-weight: 700; font-variant-numeric: tabular-nums; } .sc-owner-client-days--warn { color: #b45309; } .sc-client-row-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .sc-btn--sm { padding: 0.35rem 0.7rem; font-size: 12px; } .sc-client-row-menu { position: relative; } .sc-client-row-menu > summary { list-style: none; cursor: pointer; } .sc-client-row-menu > summary::-webkit-details-marker { display: none; } .sc-client-row-menu__panel { position: absolute; right: 0; top: calc(100% + 4px); z-index: 20; min-width: 220px; padding: 10px; border-radius: 12px; border: 1px solid var(--border, #e5e1d8); background: var(--card, #ffffff); box-shadow: var(--sc-shadow-card, 0 8px 24px rgba(15, 18, 22, 0.12)); } .sc-client-row-menu__group + .sc-client-row-menu__group { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--hairline, #ece9e0); } .sc-client-row-menu__label { display: block; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground, #6b6a64); margin-bottom: 6px; } .sc-client-row-menu__buttons { display: flex; flex-wrap: wrap; gap: 4px; } .sc-client-row-menu__plan { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; } /* Detail workspace */ .sc-owner-client-detail-hero .sc-owner-client-detail-hero__badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; } .sc-owner-client-hero-chip { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; background: var(--card, #ffffff); border: 1px solid var(--sc-hairline, #e5e1d8); color: var(--foreground, #1c1f24); } .sc-owner-client-hero-chip svg { width: 13px; height: 13px; stroke: currentColor; } .sc-owner-client-hero-chip--warn { border-color: rgba(180, 83, 9, 0.28); color: #b45309; background: rgba(251, 191, 36, 0.1); } .sc-owner-client-hero-chip--paid { border-color: rgba(31, 111, 85, 0.25); background: rgba(31, 111, 85, 0.08); color: var(--primary-strong, #145441); } .sc-owner-client-panel { margin-bottom: 16px; } .sc-owner-client-panel .sc-card-title { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; } .sc-owner-client-panel--actions { border-color: rgba(31, 111, 85, 0.2); background: linear-gradient(135deg, rgba(227, 240, 235, 0.35), rgba(255, 255, 255, 0.98)); } .sc-owner-client-action-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sc-owner-client-action-bar .sc-btn { display: inline-flex; align-items: center; gap: 6px; } .sc-owner-client-action-bar .sc-btn svg { width: 14px; height: 14px; stroke: currentColor; } .sc-owner-client-detail-grid { margin-bottom: 0; } .sc-owner-client-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px 16px; margin: 0; } .sc-owner-client-info-grid__item { margin: 0; } .sc-owner-client-info-grid dt { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground, #6b6a64); margin-bottom: 4px; } .sc-owner-client-info-grid dd { margin: 0; font-size: 14px; font-weight: 500; color: var(--foreground-strong, #0f1216); } .sc-owner-client-info-grid__item--stat .sc-owner-client-stat-value { font-size: 22px; font-weight: 700; font-family: "Fraunces", "Inter", serif; color: var(--primary-strong, #145441); } .sc-owner-client-info-footer { margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--hairline, #ece9e0); display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; } .sc-owner-client-billing-grid { display: grid; gap: 16px; } .sc-owner-client-billing-block__label { display: block; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted-foreground, #6b6a64); margin-bottom: 8px; } .sc-owner-client-billing-block__row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sc-owner-client-billing-block__row .sc-select, .sc-owner-client-billing-block__row input[type="date"] { min-width: 160px; } .sc-owner-client-notes-form textarea { width: 100%; min-height: 120px; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--border, #e5e1d8); font-family: inherit; font-size: 13px; resize: vertical; background: var(--card, #ffffff); color: var(--foreground, #1c1f24); } .sc-owner-client-notes-form__actions { margin-top: 10px; display: flex; justify-content: flex-end; } .sc-owner-client-readiness-panel { border-color: rgba(31, 111, 85, 0.18); } .sc-owner-client-readiness-lead { margin: -6px 0 12px; font-size: 12.5px; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__item { grid-template-columns: auto 1fr auto; grid-template-rows: auto auto; gap: 4px 10px; padding: 10px 12px; border: 1px solid var(--hairline, #ece9e0); background: linear-gradient(180deg, rgba(255, 255, 255, 0.9), rgba(250, 249, 245, 0.6)); } .sc-owner-readiness-list--premium .sc-owner-readiness-list__icon { grid-row: 1 / span 2; display: flex; align-items: flex-start; padding-top: 2px; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__icon svg { width: 18px; height: 18px; stroke: currentColor; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__item.is-ok .sc-owner-readiness-list__icon { color: #047857; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__item.is-warn .sc-owner-readiness-list__icon { color: #b45309; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__status { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; white-space: nowrap; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__status.is-ok { color: #047857; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__status.is-warn { color: #b45309; } .sc-owner-readiness-list--premium .sc-owner-readiness-list__detail { grid-column: 2 / -1; font-size: 12px; } .sc-owner-quick-links__lead { margin: -6px 0 12px; font-size: 12.5px; } .sc-owner-quick-link-pill { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--sc-hairline, #e5e1d8); background: var(--card, #ffffff); font-size: 12.5px; font-weight: 600; text-decoration: none; color: var(--foreground, #1c1f24); transition: border-color 0.15s, background 0.15s; } .sc-owner-quick-link-pill svg { width: 14px; height: 14px; stroke: var(--primary-strong, #145441); } .sc-owner-quick-link-pill:hover { border-color: rgba(31, 111, 85, 0.35); background: rgba(31, 111, 85, 0.06); color: var(--primary-strong, #145441); } .sc-owner-quick-links__grid { display: flex; flex-wrap: wrap; gap: 8px; } .sc-owner-client-field-hint { margin: 4px 0 0; font-size: 12px; } .sc-owner-client-form__section legend { display: flex; align-items: center; gap: 6px; } .sc-owner-client-form__section--account { border-color: rgba(31, 111, 85, 0.2); } /* Dark mode — owner client console */ [data-theme="dark"] .sc-owner-client-console { --sc-owner-accent: rgba(52, 211, 153, 0.12); --sc-owner-accent-border: rgba(52, 211, 153, 0.22); } [data-theme="dark"] .sc-owner-client-table__link { color: #f4f4f5; } [data-theme="dark"] .sc-owner-client-table__link:hover { color: #6ee7b7; } [data-theme="dark"] .sc-owner-client-plan-pill { color: #6ee7b7; } [data-theme="dark"] .sc-client-row-menu__panel { background: #18181b; border-color: rgba(255, 255, 255, 0.08); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.45); } [data-theme="dark"] .sc-owner-client-panel--actions { background: linear-gradient(135deg, rgba(16, 185, 129, 0.08), rgba(24, 24, 27, 0.95)); border-color: rgba(52, 211, 153, 0.2); } [data-theme="dark"] .sc-owner-client-hero-chip { background: rgba(24, 24, 27, 0.9); border-color: rgba(255, 255, 255, 0.08); color: #e4e4e7; } [data-theme="dark"] .sc-owner-client-hero-chip--paid { background: rgba(16, 185, 129, 0.1); color: #6ee7b7; } [data-theme="dark"] .sc-owner-client-info-grid dd { color: #f4f4f5; } [data-theme="dark"] .sc-owner-client-notes-form textarea { background: #18181b; border-color: rgba(255, 255, 255, 0.1); color: #f4f4f5; } [data-theme="dark"] .sc-owner-readiness-list--premium .sc-owner-readiness-list__item { background: linear-gradient(180deg, rgba(24, 24, 27, 0.95), rgba(9, 9, 11, 0.85)); border-color: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sc-owner-quick-link-pill { background: rgba(24, 24, 27, 0.9); border-color: rgba(255, 255, 255, 0.08); color: #e4e4e7; } [data-theme="dark"] .sc-owner-quick-link-pill:hover { background: rgba(16, 185, 129, 0.1); border-color: rgba(52, 211, 153, 0.3); color: #6ee7b7; } [data-theme="dark"] .sc-client-badge--trial { background: rgba(59, 130, 246, 0.18); color: #93c5fd; } [data-theme="dark"] .sc-client-badge--active { background: rgba(16, 185, 129, 0.18); color: #6ee7b7; } [data-theme="dark"] .sc-client-badge--suspended { background: rgba(234, 179, 8, 0.16); color: #fcd34d; } [data-theme="dark"] .sc-client-badge--expired { background: rgba(239, 68, 68, 0.16); color: #fca5a5; } @media (max-width: 1100px) { .sc-owner-client-table .sc-owner-client-table__date, .sc-owner-client-table thead th.sc-owner-client-table__date { display: none; } } /* Phase 8A.5B — owner client list micro polish */ .sc-phase-8a5b-marker { display: none; } .sc-owner-client-list--polished .sc-owner-client-table-card { overflow: visible; } .sc-owner-client-list--polished .sc-owner-client-table-scroll { overflow-x: auto; overflow-y: visible; } .sc-owner-client-list--polished .sc-owner-client-table tbody tr { transition: background-color 0.12s ease; } .sc-owner-client-list--polished .sc-premium-table-card.sc-owner-client-table-card .sc-owner-client-table tbody tr:hover td { background: rgba(31, 111, 85, 0.034); } .sc-owner-client-list--polished .sc-owner-client-table__link { font-size: 14px; font-weight: 700; letter-spacing: -0.015em; } .sc-owner-client-list--polished .sc-client-actions-cell { vertical-align: middle; width: 1%; white-space: nowrap; overflow: visible; } .sc-owner-client-list--polished .sc-client-row-actions { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 34px; } .sc-owner-client-list--polished .sc-owner-client-table__actions { min-width: 168px; } .sc-owner-client-list--polished .sc-client-row-menu__trigger { display: inline-flex; align-items: center; gap: 4px; } .sc-owner-client-list--polished .sc-client-row-menu__chevron { width: 14px; height: 14px; stroke: currentColor; transition: transform 0.15s ease; } .sc-owner-client-list--polished .sc-client-row-menu[open] .sc-client-row-menu__chevron { transform: rotate(180deg); } .sc-owner-client-list--polished .sc-client-row-menu__panel { min-width: 288px; width: max-content; max-width: min(320px, 92vw); padding: 14px 16px; z-index: 60; box-shadow: 0 14px 40px rgba(15, 18, 22, 0.14), 0 0 0 1px rgba(31, 111, 85, 0.06); } .sc-owner-client-list--polished .sc-client-row-menu__section { margin: 0; } .sc-owner-client-list--polished .sc-client-row-menu__section + .sc-client-row-menu__section { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--hairline, #ece9e0); } .sc-owner-client-list--polished .sc-client-row-menu__heading { margin: 0 0 10px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--muted-foreground, #6b6a64); } .sc-owner-client-list--polished .sc-client-row-menu__form { margin: 0; } .sc-owner-client-list--polished .sc-client-row-menu__buttons--pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .sc-owner-client-list--polished .sc-client-row-menu__buttons--stack { display: grid; gap: 6px; } .sc-owner-client-list--polished .sc-client-row-menu__buttons .sc-btn--xs { width: 100%; justify-content: center; } .sc-owner-client-list--polished .sc-client-row-menu__plan { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px; align-items: center; } .sc-owner-client-list--polished .sc-client-row-menu__plan .sc-select { min-width: 0; width: 100%; } .sc-owner-client-list--polished .sc-owner-client-table tbody tr:has(.sc-client-row-menu[open]) { position: relative; z-index: 40; } .sc-owner-client-list--polished .sc-client-row-menu[open] > summary { background: rgba(31, 111, 85, 0.08); border-color: rgba(31, 111, 85, 0.22); } [data-theme="dark"] .sc-owner-client-list--polished .sc-premium-table-card.sc-owner-client-table-card .sc-owner-client-table tbody tr:hover td { background: rgba(52, 211, 153, 0.06); } [data-theme="dark"] .sc-owner-client-list--polished .sc-client-row-menu__panel { box-shadow: 0 16px 44px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(52, 211, 153, 0.12); } [data-theme="dark"] .sc-owner-client-list--polished .sc-client-row-menu__section + .sc-client-row-menu__section { border-top-color: rgba(255, 255, 255, 0.08); } [data-theme="dark"] .sc-owner-client-list--polished .sc-client-row-menu[open] > summary { background: rgba(16, 185, 129, 0.12); border-color: rgba(52, 211, 153, 0.28); } /* Phase 8C.7 — Agent setup wizard */ .sc-phase-8c7-marker { display: none; } /* Phase 8C.8 — Agent package ZIP download */ .sc-phase-8c8-marker { display: none; } /* Phase 8C.9 — Agent command center */ .sc-phase-8c9-marker { display: none; } .sc-sync-agent-command-center { margin-bottom: 1rem; } .sc-sync-agent-command-offline { color: #b45309; font-weight: 600; margin-bottom: 0.75rem; } .sc-sync-agent-command-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 0.75rem 1rem; margin-bottom: 0.75rem; } .sc-sync-agent-command-stats dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-muted); } .sc-sync-agent-command-hint { margin-bottom: 0.75rem; font-size: 0.9rem; } .sc-sync-agent-command-actions { display: flex; flex-wrap: wrap; gap: 0.35rem; } .sc-sync-agent-setup-package-panel { margin-top: 1rem; } .sc-sync-agent-setup-package-note { margin-top: 0.5rem; font-size: 0.85rem; } .sc-sync-agent-setup-wizard { --sc-agent-setup-accent: rgba(31, 111, 85, 0.1); } .sc-sync-agent-setup-hero__actions, .sc-sync-agent-detail-hero__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .sc-sync-agent-setup-status-cards { margin-bottom: 1.25rem; } .sc-sync-agent-setup-card__value--sm { font-size: 1rem; } .sc-sync-agent-setup-ok { color: #047857; font-weight: 600; } .sc-sync-agent-setup-warn { color: #b45309; font-weight: 600; } .sc-sync-agent-setup-stepper { margin-bottom: 1.5rem; } .sc-sync-agent-setup-stepper ol { display: flex; flex-wrap: wrap; gap: 0.75rem 1.25rem; list-style: none; padding: 0; margin: 0; } .sc-sync-agent-setup-stepper li { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.85rem; border-radius: 999px; border: 1px solid rgba(0, 0, 0, 0.08); background: rgba(255, 255, 255, 0.6); font-size: 0.85rem; font-weight: 500; } .sc-sync-agent-setup-stepper li.is-done { border-color: rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.08); } .sc-sync-agent-setup-stepper__num { display: inline-flex; align-items: center; justify-content: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; background: rgba(31, 111, 85, 0.15); font-size: 0.75rem; font-weight: 700; } .sc-sync-agent-setup-token-missing, .sc-sync-agent-setup-empty { margin-bottom: 1.25rem; } .sc-sync-agent-setup-inline-warn { color: #b45309; font-weight: 600; margin-bottom: 1rem; } .sc-sync-agent-setup-form-grid { margin-bottom: 1rem; } .sc-sync-agent-setup-device-list { margin: 0; padding-left: 1.1rem; } .sc-sync-agent-setup-device-list li + li { margin-top: 0.35rem; } .sc-sync-agent-setup-download-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.5rem; } .sc-sync-agent-setup-copy-label { display: block; font-size: 0.8rem; font-weight: 600; margin: 1rem 0 0.35rem; } .sc-sync-agent-setup-cmds { width: 100%; font-family: ui-monospace, monospace; font-size: 0.8rem; padding: 0.65rem; border-radius: 6px; border: 1px solid rgba(0, 0, 0, 0.1); resize: vertical; } .sc-sync-agent-table__actions { display: flex; flex-wrap: wrap; gap: 0.35rem; justify-content: flex-end; } /* Phase 8C.2 — Local Sync Agent UI */ .sc-phase-8c2-marker { display: none; } .sc-sync-agent-console { --sc-agent-accent: rgba(31, 111, 85, 0.12); --sc-agent-accent-border: rgba(31, 111, 85, 0.22); } .sc-sync-agent-hero .sc-executive-hero__title { letter-spacing: -0.02em; } .sc-sync-agent-kpi { margin-bottom: 1.25rem; } .sc-sync-agent-table-card { overflow: hidden; } .sc-sync-agent-table__link { font-weight: 600; color: var(--sc-text); text-decoration: none; } .sc-sync-agent-table__link:hover { color: var(--sc-accent); } .sc-sync-agent-token-prefix { font-size: 0.85rem; padding: 0.15rem 0.4rem; border-radius: 4px; background: rgba(0, 0, 0, 0.04); } .sc-sync-agent-badge { display: inline-flex; align-items: center; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.75rem; font-weight: 600; border: 1px solid transparent; } .sc-sync-agent-badge--active { background: rgba(16, 185, 129, 0.12); color: #047857; border-color: rgba(16, 185, 129, 0.28); } .sc-sync-agent-badge--pending { background: rgba(59, 130, 246, 0.1); color: #1d4ed8; border-color: rgba(59, 130, 246, 0.25); } .sc-sync-agent-badge--offline { background: rgba(100, 116, 139, 0.12); color: #475569; border-color: rgba(100, 116, 139, 0.25); } .sc-sync-agent-badge--error { background: rgba(245, 158, 11, 0.12); color: #b45309; border-color: rgba(245, 158, 11, 0.3); } .sc-sync-agent-badge--revoked { background: rgba(239, 68, 68, 0.1); color: #b91c1c; border-color: rgba(239, 68, 68, 0.28); } .sc-sync-agent-onetime { margin-bottom: 1.25rem; border: 1px solid var(--sc-agent-accent-border); background: var(--sc-agent-accent); } .sc-sync-agent-onetime__warn { font-weight: 600; color: #b45309; margin-bottom: 0.5rem; } .sc-sync-agent-onetime__token code { display: block; word-break: break-all; font-size: 0.9rem; padding: 0.75rem; background: rgba(0, 0, 0, 0.04); border-radius: 6px; } .sc-sync-agent-info-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 1rem 1.5rem; } .sc-sync-agent-info-grid dt { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--sc-muted); margin-bottom: 0.25rem; } .sc-sync-agent-info-grid__error dd { color: #b91c1c; } .sc-sync-agent-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 1rem; } .sc-sync-agent-rename-form__row { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .sc-sync-agent-setup-steps { margin: 0; padding-left: 1.25rem; line-height: 1.6; } .sc-sync-agent-setup-steps li + li { margin-top: 0.5rem; } .sc-sync-agent-security-note { border-left: 3px solid var(--sc-agent-accent-border); } .sc-page-header__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } [data-theme="dark"] .sc-sync-agent-token-prefix { background: rgba(255, 255, 255, 0.06); } [data-theme="dark"] .sc-sync-agent-onetime__token code { background: rgba(255, 255, 255, 0.06); } /* Phase 12A — профиль сотрудника */ .sc-employee-profile-hero__badges { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .sc-employee-profile-actions { margin-top: 16px; flex-wrap: wrap; } .sc-employee-profile-period { margin: 18px 0 12px; } .sc-employee-profile-period__form { align-items: center; gap: 12px; } .sc-employee-profile-kpis { margin-bottom: 20px; } .sc-employee-profile-kpis__empty { grid-column: 1 / -1; padding: 20px 18px; } .sc-employee-profile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .sc-employee-profile-card { padding: 18px 20px; } .sc-employee-profile-card__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; } .sc-employee-profile-card__links { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .sc-employee-profile-card--placeholder .sc-empty--inline { padding: 8px 0 4px; } .sc-employee-profile-note { margin-top: 10px; } .sc-employee-profile-alert { margin-bottom: 16px; } .sc-employee-profile-dl { display: grid; gap: 10px 16px; margin: 0; } .sc-employee-profile-dl > div { display: grid; grid-template-columns: minmax(120px, 38%) 1fr; gap: 8px 12px; align-items: baseline; } .sc-employee-profile-dl dt { margin: 0; font-size: 12px; font-weight: 600; color: var(--muted-foreground, #6b6b63); text-transform: uppercase; letter-spacing: 0.04em; } .sc-employee-profile-dl dd { margin: 0; font-size: 14px; color: var(--foreground, #1c1c18); } .sc-employee-profile-dl__wide { grid-column: 1 / -1; } .sc-table-actions-col { white-space: nowrap; min-width: 12rem; } .sc-table-row-actions { display: flex; flex-wrap: wrap; gap: 6px; } [data-theme="dark"] .sc-employee-profile-card .sc-employee-profile-dl dt { color: var(--muted-foreground, #a8a89e); } [data-theme="dark"] .sc-employee-profile-card .sc-employee-profile-dl dd { color: var(--foreground, #eceae4); } /* Phase 12A.2 — staff list chart axis & visual micro-polish */ .sc-staff-list-page .sc-metric-grid { margin-bottom: 4px; } .sc-staff-list-filter { margin-bottom: 16px; } .sc-staff-list-filter__form { margin-bottom: 0; align-items: center; gap: 10px; } .sc-staff-dept-chart .sc-chart-mount--staff-depts { min-height: 220px; } .sc-staff-table-card { padding: 0; } .sc-staff-table .sc-staff-col-name { min-width: 10rem; } .sc-staff-table .sc-staff-col-position { max-width: 14rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sc-staff-table .sc-staff-col-badge { white-space: nowrap; vertical-align: middle; } .sc-staff-table .sc-staff-col-badge .sc-badge { display: inline-block; max-width: 100%; } .sc-staff-table .sc-staff-col-status { white-space: nowrap; } .sc-staff-table tbody tr:hover td { background: var(--muted, rgba(31, 111, 85, 0.04)); } .sc-staff-directory .sc-metric-grid { grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); } .sc-staff-directory-hero .sc-executive-hero__sub { max-width: 64ch; } .sc-staff-directory-table .sc-table-wrap { overflow-x: auto; } .sc-staff-row-main { font-weight: 700; color: var(--foreground, #1c1c18); } .sc-staff-row-meta { margin-top: 4px; font-size: 12px; color: var(--muted-foreground, #6b6b63); } .sc-staff-action-open360 { white-space: nowrap; } .sc-staff-status-badges .sc-badge { max-width: 180px; text-overflow: ellipsis; overflow: hidden; } .sc-staff-empty-filter .sc-empty-title { margin-bottom: 8px; } .sc-staff-directory-table tbody tr { transition: background-color 0.2s ease, box-shadow 0.2s ease; } .sc-staff-directory-table tbody tr:hover { box-shadow: inset 0 0 0 1px var(--ring, rgba(31, 111, 85, 0.25)); } .sc-employee-profile-page .sc-employee-profile-hero { margin-bottom: 4px; } .sc-employee-profile-hero__badges { padding-left: 2px; } .sc-employee-profile-kpis--equal .sc-kpi-card { min-height: 5.5rem; display: flex; flex-direction: column; justify-content: center; } .sc-employee-profile-card--placeholder { border-style: dashed; border-color: var(--sc-hairline, #e8e4dc); background: var(--muted, #faf9f6); } .sc-employee-profile-secure { margin-top: 24px; } .sc-employee-profile-actions { gap: 8px; } [data-theme="dark"] .sc-staff-table tbody tr:hover td { background: rgba(255, 255, 255, 0.03); } [data-theme="dark"] .sc-staff-row-main { color: var(--foreground, #eceae4); } [data-theme="dark"] .sc-staff-row-meta { color: var(--muted-foreground, #a8a89e); } [data-theme="dark"] .sc-employee-profile-card--placeholder { background: rgba(255, 255, 255, 0.02); border-color: rgba(255, 255, 255, 0.08); } @media (max-width: 640px) { .sc-staff-directory .sc-page-header { gap: 10px; } .sc-staff-list-filter__form { align-items: stretch; } .sc-staff-directory-table .sc-table-row-actions { display: grid; grid-template-columns: 1fr 1fr; width: 100%; } .sc-staff-directory-table .sc-table-row-actions .sc-staff-action-open360 { grid-column: 1 / -1; } } /* Phase 13A — центр проверки табеля */ .sc-attendance-review-kpis { margin-bottom: 16px; } .sc-attendance-review-table-card { padding: 0; } .sc-attendance-review-table .sc-num { text-align: right; font-variant-numeric: tabular-nums; } .sc-attendance-review-row--pending { background: var(--warning-soft, #fbeed1); } .sc-attendance-review-actions { flex-wrap: wrap; max-width: 14rem; } .sc-inline-form { display: inline; } .sc-correction-badge--draft { background: var(--warning-soft, #fbeed1); color: var(--warning-soft-fg, #7a4a05); } .sc-correction-badge--approved { background: var(--success-soft, #e3f0eb); color: var(--success-soft-fg, #145441); } .sc-correction-badge--rejected { background: var(--destructive-soft, #fbe3df); color: var(--destructive-soft-fg, #7a1a10); } .sc-correction-badge--day { background: var(--muted, #f0ece3); color: var(--muted-foreground, #4a4a45); } .sc-correction-form-card { max-width: 640px; } .sc-payroll-corr-col { text-align: center; min-width: 3rem; } [data-theme="dark"] .sc-attendance-review-row--pending { background: rgba(251, 238, 209, 0.08); } /* ============================================================================ * Phase 14A — Owner Dashboard Business Control Center * ============================================================================ */ .sc-owner-dashboard__filters { margin-bottom: 20px; } .sc-owner-kpi { margin-bottom: 24px; } .sc-owner-dashboard__actions { margin-bottom: 24px; padding: 18px 20px; } .sc-action-center__head { margin-bottom: 14px; } .sc-action-center__grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .sc-action-center__item { padding: 14px 16px; border: 1px solid var(--border, #e5e1d8); border-radius: var(--sc-radius); background: var(--muted, #faf9f5); display: flex; flex-direction: column; gap: 10px; } .sc-action-center__title { font-size: 14px; font-weight: 600; color: var(--foreground-strong, #0f1216); } .sc-action-center__ok { margin: 0; padding: 12px 14px; border-radius: var(--sc-radius); background: rgba(31, 111, 85, 0.08); color: var(--primary, #1f6f55); font-size: 14px; } .sc-owner-dashboard__grid { display: grid; grid-template-columns: 1.4fr 1fr; gap: 16px; margin-bottom: 24px; } @media (max-width: 1024px) { .sc-owner-dashboard__grid { grid-template-columns: 1fr; } } .sc-owner-dashboard__today, .sc-owner-dashboard__payroll-panel, .sc-owner-dashboard__review-panel { padding: 16px 18px; } .sc-owner-dashboard__side { display: flex; flex-direction: column; gap: 16px; } .sc-stat-dl { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin: 12px 0 16px; font-size: 13px; } .sc-stat-dl dt { color: var(--muted-foreground, #6b6a64); margin: 0; } .sc-stat-dl dd { margin: 0; font-weight: 600; text-align: right; } .sc-health-card { margin-bottom: 24px; padding: 16px 18px; } .sc-health-card__meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; margin-bottom: 12px; color: var(--muted-foreground, #6b6a64); } .sc-health-card__empty { margin: 8px 0 12px; font-size: 14px; color: var(--muted-foreground, #6b6a64); } .sc-pill { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 600; } .sc-pill--on_time { background: rgba(31, 111, 85, 0.12); color: #1f6f55; } .sc-pill--late { background: rgba(180, 120, 20, 0.15); color: #8a5a00; } .sc-pill--absent { background: rgba(160, 50, 50, 0.12); color: #8b2e2e; } .sc-pill--no_face_id { background: rgba(120, 100, 40, 0.12); color: #5a4a05; } .sc-pill--no_mark { background: rgba(100, 110, 130, 0.12); color: #4a5568; } .sc-pill--awaiting_data { background: rgba(70, 100, 160, 0.12); color: #2c5282; } .sc-pill--unknown { background: rgba(100, 100, 100, 0.12); color: #555; } .sc-owner-dashboard__today-note { margin: 0 0 12px; font-size: 12px; color: var(--muted-foreground, #6b6a64); line-height: 1.45; } .sc-kpi-sub--warn { color: var(--sc-warn-fg, #8a5a00); margin-top: 2px; } .sc-health-card__warn { color: var(--sc-warn-fg, #8a5a00); font-weight: 600; } .sc-owner-dashboard__analytics .sc-dashboard-analytics-grid { grid-template-columns: minmax(0, 1.4fr) minmax(280px, 1fr); gap: 14px; } .sc-owner-dashboard__analytics .sc-dashboard-analytics-right { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-content: start; } .sc-owner-dashboard__analytics .sc-dashboard-analytics-right > .sc-chart-panel:last-child { grid-column: 1 / -1; } .sc-owner-dashboard__analytics .sc-chart-mount--owner-bar { min-height: 200px; } @media (max-width: 1180px) { .sc-owner-dashboard__analytics .sc-dashboard-analytics-right { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 720px) { .sc-owner-dashboard__analytics .sc-dashboard-analytics-right { grid-template-columns: 1fr; } .sc-owner-dashboard__analytics .sc-dashboard-analytics-right > .sc-chart-panel:last-child { grid-column: auto; } } .sc-chart-mount--owner-bar { min-height: 220px; } /* ============================================================================ * Phase 15A — Client-safe Face ID sync card * ============================================================================ */ .sc-face-id-sync-card { margin-bottom: 20px; padding: 16px 18px; } .sc-face-id-sync-card__dl { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 14px; font-size: 13px; } .sc-face-id-sync-card__dl dt { color: var(--muted-foreground, #6b6a64); margin: 0; } .sc-face-id-sync-card__dl dd { margin: 0; font-weight: 600; } .sc-face-id-sync-card__actions { margin-bottom: 8px; } .sc-face-id-sync-card__hint { margin: 0; font-size: 12px; color: var(--muted-foreground, #6b6a64); } .sc-pill--sync-fresh { background: rgba(31, 111, 85, 0.12); color: #1f6f55; } .sc-pill--sync-awaiting { background: rgba(70, 100, 160, 0.12); color: #2c5282; } .sc-pill--sync-needs_review { background: rgba(180, 120, 20, 0.15); color: #8a5a00; } /* ============================================================================ * Phase 14A.3 — Dashboard final visual micro polish (KPI money + device donut) * ============================================================================ */ .sc-owner-dashboard .sc-kpi-card { overflow: visible; min-width: 0; } .sc-owner-dashboard .sc-kpi-value.sc-dashboard-kpi-money { font-family: "Inter", system-ui, sans-serif; font-size: clamp(1rem, 1.4vw + 0.4rem, 1.32rem); font-weight: 600; line-height: 1.3; letter-spacing: -0.01em; white-space: nowrap; font-variant-numeric: tabular-nums; overflow: visible; text-overflow: clip; max-width: 100%; padding-bottom: 1px; } .sc-owner-dashboard .sc-stat-dl dd.sc-dashboard-kpi-money { font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(0.8125rem, 1.1vw, 0.9375rem); letter-spacing: -0.01em; } .sc-owner-dashboard__analytics .sc-chart-panel .sc-chart-grid__split { display: flex; align-items: center; justify-content: center; gap: 10px 14px; flex-wrap: wrap; } .sc-owner-dashboard__analytics .sc-chart-mount--dashboard-device { min-height: 200px; display: flex; align-items: center; justify-content: center; } .sc-owner-dashboard__analytics .sc-chart-mount--dashboard-device .apexcharts-canvas { margin: 0 auto; } .sc-owner-dashboard__analytics .sc-chart-mount--dashboard-radial { min-height: 188px; display: flex; align-items: center; justify-content: center; } .sc-owner-dashboard__analytics .sc-chart-panel:last-child .sc-chart-panel__header { margin-bottom: 4px; } .sc-owner-dashboard__analytics .apexcharts-legend { padding-top: 6px !important; } [data-theme="dark"] .sc-action-center__item { background: rgba(255, 255, 255, 0.04); border-color: var(--border); } [data-theme="dark"] .sc-action-center__ok { background: rgba(72, 187, 140, 0.12); } /* Phase 16E — Face ID Binding Control Center */ .sc-bindings-shell { display: flex; flex-direction: column; gap: 18px; } .sc-bindings-hero { margin-bottom: 0; } .sc-bindings-pill { display: inline-flex; align-items: center; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(31, 111, 85, 0.08); color: var(--sc-emerald-800, #1f6f55); border: 1px solid rgba(31, 111, 85, 0.15); } .sc-bindings-pill--warn { background: rgba(180, 83, 9, 0.1); color: #9a3412; border-color: rgba(180, 83, 9, 0.25); } .sc-bindings-pill--chip { text-decoration: none; transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .sc-bindings-pill--chip:hover { background: rgba(31, 111, 85, 0.14); border-color: rgba(31, 111, 85, 0.28); } .sc-bindings-pill--chip.is-active { background: rgba(31, 111, 85, 0.16); border-color: rgba(31, 111, 85, 0.35); box-shadow: 0 0 0 1px rgba(31, 111, 85, 0.12); } .sc-bindings-pill--chip.sc-bindings-pill--warn.is-active, .sc-bindings-pill--chip.sc-bindings-pill--warn:hover { background: rgba(180, 83, 9, 0.16); border-color: rgba(180, 83, 9, 0.35); } .sc-bindings-pill--muted { opacity: 0.72; cursor: default; } .sc-bindings-pill__count { margin-left: 6px; padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(15, 23, 42, 0.08); } .sc-bindings-hero-chips { gap: 8px; } .sc-filter-grid--bindings { grid-template-columns: repeat(6, minmax(0, 1fr)); } @media (max-width: 1200px) { .sc-filter-grid--bindings { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 720px) { .sc-filter-grid--bindings { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .sc-bindings-kpi-row .sc-kpi-card { padding: 12px 14px; } .sc-bindings-kpi-row .sc-kpi-value { font-size: 1.35rem; } .sc-bindings-kpi-grid { margin-top: 0; } .sc-bindings-card { border-radius: var(--sc-radius-lg, 14px); } .sc-bindings-tabs { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 0; } .sc-bindings-tabs__link { padding: 10px 16px; border-radius: 10px; font-size: 14px; font-weight: 600; color: var(--sc-text-muted, #64748b); text-decoration: none; border: 1px solid transparent; background: rgba(255, 255, 255, 0.6); } .sc-bindings-tabs__link.is-active { color: var(--sc-emerald-800, #1f6f55); background: rgba(31, 111, 85, 0.1); border-color: rgba(31, 111, 85, 0.2); } .sc-bindings-table .sc-table code { font-size: 12px; } .sc-bindings-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sc-bindings-inline-form, .sc-bindings-form { display: inline-flex; flex-wrap: wrap; gap: 6px; align-items: center; } .sc-bindings-select { min-width: 140px; max-width: 200px; } .sc-bindings-hint, .sc-bindings-card__hint { padding: 12px 16px; font-size: 13px; color: var(--sc-text-muted, #64748b); margin: 0; } .sc-bindings-empty { margin: 16px; } .sc-bindings-footer-hint { font-size: 13px; color: var(--sc-text-muted, #64748b); } .sc-bindings-conflict-list { margin: 8px 0 0; padding-left: 18px; } [data-theme="dark"] .sc-bindings-shell .sc-bindings-tabs__link { background: rgba(30, 41, 59, 0.5); } [data-theme="dark"] .sc-bindings-shell .sc-bindings-tabs__link.is-active { background: rgba(31, 111, 85, 0.2); } /* ============================================================================ * Phase 6G.5 — Monthly Attendance Dark Mode Status Contrast Polish * * Контраст статусов в тёмной теме: изумрудный present, чистый amber late, * мягкий wine absent, заметнее nomap-dot, графитово-изумрудные sticky, * тише сетка пустых дней, яснее «сегодня». Маркер: .sc-phase-6g5-marker * ============================================================================ */ .sc-phase-6g5-marker { display: none; } /* Present — успешное состояние читается первым */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present { background: rgba(4, 55, 42, 0.72) !important; box-shadow: inset 0 0 0 1px rgba(52, 211, 153, 0.26); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present .sc-monthly-cell__mark--ok, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present .sc-monthly-cell__mark--ok { color: #6ee7b7; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--present .sc-monthly-cell__time, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--present.sc-monthly-cell--present .sc-monthly-cell__time { color: #a7f3d0; opacity: 1; } /* Late — премиальный янтарь, +Nм и время без «грязи» */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late { background: rgba(217, 119, 6, 0.19) !important; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.32); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late .sc-monthly-cell__mark--late, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late .sc-monthly-cell__mark--late { color: #fcd34d; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late .sc-monthly-cell__late-delta, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late .sc-monthly-cell__late-delta { color: #fde68a; font-weight: 780; text-shadow: 0 1px 0 rgba(0, 0, 0, 0.35); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--late .sc-monthly-cell__times--late-stack .sc-monthly-cell__time, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--late.sc-monthly-cell--late .sc-monthly-cell__times--late-stack .sc-monthly-cell__time { color: rgba(254, 243, 199, 0.95); } /* Absent — мягкий wine, заметнее «—» */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent { background: rgba(127, 29, 55, 0.26) !important; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.28); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent .sc-monthly-cell__absent--mark, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent .sc-monthly-cell__absent--mark { opacity: 0.78; color: #fecdd3; font-weight: 600; } /* No-mapping — тёплый тон, точка вторична но видна */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(80, 52, 18, 0.42) !important; box-shadow: inset 0 0 0 1px rgba(251, 191, 36, 0.14); } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__nomap-marker .sc-monthly-cell__nomap-dot { width: 6px; height: 6px; background: rgba(253, 224, 148, 0.72); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.45), 0 0 10px -2px rgba(251, 191, 36, 0.25); } /* Пустые / будущие — тише сетка, без «Excel» справа */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--empty.sc-monthly-cell--blank-tone { background: rgba(24, 24, 27, 0.32) !important; border-right-color: rgba(63, 63, 70, 0.045) !important; color: rgba(228, 228, 231, 0.09) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(63, 63, 70, 0.14); border-right-color: rgba(63, 63, 70, 0.065); } /* Sticky + строка: графит с изумрудным отливом, hover не «ломает» колонки */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-num { background: linear-gradient(180deg, rgba(26, 38, 33, 0.98) 0%, rgba(18, 26, 22, 0.995) 100%); color: #a8b5aa; box-shadow: 1px 0 0 rgba(45, 72, 58, 0.55), inset 0 1px 0 rgba(52, 211, 153, 0.04); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num { background: linear-gradient(180deg, rgba(28, 42, 35, 0.99) 0%, rgba(20, 30, 25, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-num { background: linear-gradient(180deg, rgba(32, 48, 40, 0.99) 0%, rgba(24, 34, 28, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-emp.sc-sticky-col { background: linear-gradient(180deg, rgba(24, 34, 30, 0.98) 0%, rgba(17, 24, 21, 0.995) 100%); color: #e8eee9; box-shadow: 1px 0 0 rgba(45, 72, 58, 0.5), inset 0 1px 0 rgba(52, 211, 153, 0.035); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col { background: linear-gradient(180deg, rgba(26, 38, 33, 0.99) 0%, rgba(18, 26, 22, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-emp.sc-sticky-col { background: linear-gradient(180deg, rgba(30, 44, 38, 0.99) 0%, rgba(22, 32, 27, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-sch { background: linear-gradient(180deg, rgba(22, 32, 28, 0.97) 0%, rgba(16, 22, 19, 0.99) 100%); color: #b8c6bb; box-shadow: 1px 0 0 rgba(45, 72, 58, 0.48), 12px 0 24px -14px rgba(0, 0, 0, 0.55); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch { background: linear-gradient(180deg, rgba(24, 36, 30, 0.99) 0%, rgba(17, 24, 21, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-sch { background: linear-gradient(180deg, rgba(28, 42, 35, 0.99) 0%, rgba(20, 28, 24, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-employee-name { color: #f1f5f2; font-weight: 680; } [data-theme="dark"] .sc-monthly-board .sc-monthly-schedule-text { color: #c5d4c8; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(52, 211, 153, 0.035); } /* Легенда и шапка дней */ [data-theme="dark"] .sc-monthly-board .sc-monthly-legend.sc-legend--monthly { background: rgba(18, 26, 22, 0.55); border-bottom-color: rgba(45, 72, 58, 0.35); } [data-theme="dark"] .sc-monthly-board .sc-monthly-legend__item.sc-legend__item { color: #e4ebe6; } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head__num { color: #f4faf6; } [data-theme="dark"] .sc-monthly-board .sc-monthly-day-head--today .sc-monthly-day-head__num { box-shadow: 0 0 0 1px rgba(52, 211, 153, 0.38), 0 0 12px -4px rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.14); } /* ============================================================================ * Phase 6G.6 — Monthly Attendance No-Mapping De-noise & Final Table Balance * * Тише no-mapping (точка + фон), N/L в строке — основной сигнал; мягче сетка * пустых дней; present/late/absent из 6G.5 не ослабляются. Маркер: .sc-phase-6g6-marker * ============================================================================ */ .sc-phase-6g6-marker { display: none; } /* Light: no-mapping почти как пустая ячейка, точка — вторичный намёк */ .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(250, 250, 248, 0.62) !important; box-shadow: none; } .sc-monthly-board .sc-monthly-cell__nomap-marker .sc-monthly-cell__nomap-dot { width: 3px; height: 3px; background: rgba(161, 98, 7, 0.38); box-shadow: none; opacity: 0.42; } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--no-mapping, .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(248, 247, 244, 0.78) !important; filter: none; } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--no-mapping .sc-monthly-cell__nomap-dot, .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping:hover .sc-monthly-cell__nomap-dot, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping:hover .sc-monthly-cell__nomap-dot { opacity: 0.78; background: rgba(180, 83, 9, 0.48); } /* Light: тише сетка пустых / будущих дней */ .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--future.sc-monthly-cell--blank-tone, .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--empty.sc-monthly-cell--blank-tone { border-right-color: rgba(232, 228, 220, 0.055) !important; } .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(232, 228, 220, 0.26); border-right-color: rgba(232, 228, 220, 0.1); } /* Dark: no-mapping без повторяющегося янтарного шума */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(24, 24, 27, 0.42) !important; box-shadow: none; } [data-theme="dark"] .sc-monthly-board .sc-monthly-cell__nomap-marker .sc-monthly-cell__nomap-dot { width: 3px; height: 3px; background: rgba(251, 191, 36, 0.38); box-shadow: none; opacity: 0.38; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { background: rgba(30, 30, 33, 0.52) !important; filter: none; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--no-mapping .sc-monthly-cell__nomap-dot, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--no-mapping:hover .sc-monthly-cell__nomap-dot, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping:hover .sc-monthly-cell__nomap-dot { opacity: 0.68; background: rgba(253, 224, 148, 0.52); box-shadow: 0 0 0 1px rgba(251, 191, 36, 0.18); } /* Dark: чуть мягче сетка справа (present/late/absent — без изменений) */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--empty.sc-monthly-cell--blank-tone { border-right-color: rgba(63, 63, 70, 0.032) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(63, 63, 70, 0.12); border-right-color: rgba(63, 63, 70, 0.05); } /* Hover строки: no-mapping не подсвечивается filter как статусы */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--no-mapping, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.day-cell--no_mapping.sc-monthly-cell--no-mapping { filter: none; } /* ============================================================================ * Phase 6G.7 — Monthly Dark Final Balance Micro-Fix * * Спокойнее absent, нейтральнее sticky (графит + лёгкий изумруд), тише сетка * future/empty; present/late/no-mapping из 6G.5–6G.6 не ослабляются. * Маркер: .sc-phase-6g7-marker * ============================================================================ */ .sc-phase-6g7-marker { display: none; } /* Absent — видимый, но не доминирует бордовым полем */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent { background: rgba(88, 28, 45, 0.11) !important; box-shadow: inset 0 0 0 1px rgba(248, 113, 113, 0.14); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--absent .sc-monthly-cell__absent--mark, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--absent.sc-monthly-cell--absent .sc-monthly-cell__absent--mark { opacity: 0.58; color: #fda4af; font-weight: 520; } /* Sticky: нейтральный графит, едва заметный изумрудный акцент */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-num { background: linear-gradient(180deg, rgba(36, 36, 40, 0.99) 0%, rgba(28, 28, 31, 0.995) 100%); color: #a1a1aa; box-shadow: 1px 0 0 rgba(63, 63, 70, 0.48), inset 0 1px 0 rgba(52, 211, 153, 0.02); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-num { background: linear-gradient(180deg, rgba(40, 40, 44, 0.99) 0%, rgba(30, 30, 34, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-num { background: linear-gradient(180deg, rgba(42, 42, 46, 0.995) 0%, rgba(34, 34, 38, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-emp.sc-sticky-col { background: linear-gradient(180deg, rgba(34, 34, 38, 0.99) 0%, rgba(26, 26, 29, 0.995) 100%); color: #e4e4e7; box-shadow: 1px 0 0 rgba(63, 63, 70, 0.45), inset 0 1px 0 rgba(52, 211, 153, 0.018); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-emp.sc-sticky-col { background: linear-gradient(180deg, rgba(38, 38, 42, 0.99) 0%, rgba(28, 28, 32, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-emp.sc-sticky-col { background: linear-gradient(180deg, rgba(40, 40, 44, 0.995) 0%, rgba(32, 32, 36, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody td.sc-monthly-sticky-sch { background: linear-gradient(180deg, rgba(32, 32, 36, 0.98) 0%, rgba(24, 24, 27, 0.995) 100%); color: #a8a8b0; box-shadow: 1px 0 0 rgba(63, 63, 70, 0.42), 12px 0 22px -14px rgba(0, 0, 0, 0.52); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table thead th.sc-monthly-sticky-sch { background: linear-gradient(180deg, rgba(36, 36, 40, 0.99) 0%, rgba(26, 26, 30, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.sc-monthly-sticky-sch { background: linear-gradient(180deg, rgba(38, 38, 42, 0.995) 0%, rgba(30, 30, 34, 0.995) 100%); } [data-theme="dark"] .sc-monthly-board .sc-monthly-employee-name { color: #ececee; font-weight: 660; } [data-theme="dark"] .sc-monthly-board .sc-monthly-schedule-text { color: #a1a1aa; } /* Hover строки: нейтральный след, без зелёного «ковра» */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td { background-color: rgba(255, 255, 255, 0.018); } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--present, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--late, [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row:hover td.day-cell.sc-monthly-cell--absent { filter: brightness(1.015); } /* Future / empty — тише, но сканируемо */ [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.sc-monthly-cell--weekend.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--future.sc-monthly-cell--blank-tone, [data-theme="dark"] .sc-monthly-board .sc-monthly-table td.day-cell.day-cell--empty.sc-monthly-cell--blank-tone { background: rgba(24, 24, 27, 0.28) !important; border-right-color: rgba(63, 63, 70, 0.028) !important; } [data-theme="dark"] .sc-monthly-board .sc-monthly-table tbody tr.sc-monthly-data-row td { border-bottom-color: rgba(63, 63, 70, 0.11); border-right-color: rgba(63, 63, 70, 0.042); } /* Phase 8A.2 — client workspace + tenant UI */ .sc-phase-8a2-marker { display: none; } .sc-company-pill { display: inline-flex; align-items: center; max-width: 220px; padding: 0.35rem 0.65rem; border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--sc-text, #18181b); background: rgba(16, 185, 129, 0.12); border: 1px solid rgba(16, 185, 129, 0.25); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .sc-client-badge { display: inline-flex; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.02em; } .sc-client-badge--trial { background: rgba(59, 130, 246, 0.14); color: #1d4ed8; } .sc-client-badge--active { background: rgba(16, 185, 129, 0.14); color: #047857; } .sc-client-badge--suspended { background: rgba(234, 179, 8, 0.16); color: #a16207; } .sc-client-badge--expired { background: rgba(239, 68, 68, 0.14); color: #b91c1c; } .sc-client-filter-bar { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 0 1rem; } .sc-access-suspended-body { min-height: 100vh; display: grid; place-items: center; background: radial-gradient(1200px 600px at 50% -10%, rgba(16, 185, 129, 0.08), transparent 60%), var(--sc-bg, #f4f4f5); } .sc-access-suspended-page { width: min(520px, calc(100vw - 2rem)); } .sc-access-suspended-card { padding: 1.75rem 1.5rem; text-align: center; } .sc-access-suspended-title { margin: 0.5rem 0 0.35rem; font-size: 1.5rem; } .sc-access-suspended-lead { margin: 0 0 0.75rem; font-weight: 600; color: var(--sc-text, #18181b); } .sc-access-suspended-text { margin: 0 0 1.25rem; color: var(--sc-muted, #71717a); font-size: 0.95rem; line-height: 1.5; } .sc-access-suspended-actions { display: flex; gap: 0.5rem; justify-content: center; flex-wrap: wrap; } .sc-my-company-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .sc-my-company-card { padding: 1rem 1.1rem; } .sc-my-company-card__title { margin: 0 0 0.75rem; font-size: 1rem; } .sc-my-company-dl { display: grid; grid-template-columns: auto 1fr; gap: 0.35rem 0.75rem; margin: 0; } .sc-my-company-dl dt { color: var(--sc-muted, #71717a); font-size: 0.85rem; } .sc-my-company-links { display: grid; gap: 0.5rem; } .sc-my-company-links a { text-decoration: none; font-weight: 600; } /* Phase 8A.3 — client launch pack */ .sc-phase-8a3-marker { display: none; } .sc-my-company-hint { margin: 0 0 1rem; padding: 0.85rem 1rem; font-size: 0.92rem; color: var(--sc-muted, #71717a); } .sc-my-company-stat { font-size: 1.35rem; font-weight: 700; } /* Phase 25D.1 — Onboarding "Быстрый старт" checklist */ .sc-onboarding-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .sc-onboarding-step { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.65rem; border-radius: var(--radius-sm, 6px); background: var(--muted, #f5f4ef); color: var(--muted-foreground, #71717a); font-size: 0.875rem; transition: background 0.15s; } .sc-onboarding-step--done { background: var(--success-soft, #e3f0eb); color: var(--success-soft-fg, #145441); } .sc-onboarding-step__icon { flex-shrink: 0; width: 1.4rem; height: 1.4rem; display: flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 0.75rem; font-weight: 700; line-height: 1; background: var(--border, #e5e1d8); color: var(--muted-foreground, #71717a); } .sc-onboarding-step--done .sc-onboarding-step__icon { background: var(--success, #16a34a); color: #fff; } .sc-onboarding-step__label { flex: 1; font-weight: 500; } .sc-onboarding-step .sc-btn { flex-shrink: 0; margin-left: auto; } @media (max-width: 430px) { .sc-onboarding-step { flex-wrap: wrap; } .sc-onboarding-step .sc-btn { margin-left: 0; width: 100%; justify-content: center; text-align: center; } } .sc-client-table-wrap .sc-client-actions-cell { min-width: 280px; } .sc-client-inline-form { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.35rem; align-items: center; } .sc-btn--xs { padding: 0.2rem 0.45rem; font-size: 11px; } .sc-select--xs { font-size: 11px; padding: 0.15rem 0.35rem; } .sc-client-action-grid { display: flex; flex-wrap: wrap; gap: 0.5rem; } .sc-access-suspended-company { margin: 0 0 0.5rem; font-size: 0.95rem; color: var(--sc-text, #18181b); } /* Phase 8A.4 — owner client admin UI */ .sc-phase-8a4-marker { display: none; } .sc-owner-client-form-card { margin-top: 1rem; padding: 1.25rem 1.35rem; } .sc-owner-client-form__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.25rem; } .sc-owner-client-form__section { border: 1px solid var(--sc-border, #e4e4e7); border-radius: 12px; padding: 1rem 1.1rem; margin: 0; } .sc-owner-client-form__section legend { font-weight: 700; padding: 0 0.35rem; } .sc-form-field { margin-bottom: 0.75rem; } .sc-owner-client-password-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; } .sc-owner-client-password-tools { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; margin-top: 0.35rem; } .sc-owner-client-password-hint { font-size: 0.85rem; } .sc-owner-client-form__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 1.25rem; padding-top: 1rem; border-top: 1px solid var(--sc-border, #e4e4e7); } .sc-owner-client-onetime { margin: 1rem 0; border: 1px solid rgba(16, 185, 129, 0.35); background: rgba(16, 185, 129, 0.06); } .sc-owner-client-onetime__password code { font-size: 1.1rem; font-weight: 700; letter-spacing: 0.04em; } .sc-owner-readiness-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .sc-owner-readiness-list__item { display: grid; grid-template-columns: auto 1fr auto; gap: 0.5rem 0.75rem; align-items: baseline; padding: 0.45rem 0.55rem; border-radius: 8px; background: var(--sc-surface-2, #fafafa); } .sc-owner-readiness-list__item.is-ok .sc-owner-readiness-list__mark { color: #047857; } .sc-owner-readiness-list__item.is-fail .sc-owner-readiness-list__mark { color: #b91c1c; } .sc-owner-readiness-list__label { font-weight: 600; } .sc-owner-quick-links__grid { display: flex; flex-wrap: wrap; gap: 0.65rem 1rem; } .sc-owner-quick-links__grid a { font-weight: 600; text-decoration: none; } .sc-owner-quick-links__hint { margin: 0.75rem 0 0; font-size: 0.88rem; } /* ============================================================================ * Phase 15B — Register Client Premium UI * Scoped to .sc-register-* — does not affect dashboard / staff / payroll. * ============================================================================ */ .sc-auth-shell:has(.sc-register-shell) { background: linear-gradient(165deg, #faf8f3 0%, #f3efe6 48%, #ebe6dc 100%); padding: 28px 20px 36px; } .sc-auth-card:has(.sc-register-shell) { max-width: 920px; width: 100%; padding: 0; background: transparent; border: none; box-shadow: none; } .sc-register-shell { width: 100%; } .sc-register-card { background: linear-gradient(180deg, #ffffff 0%, #fdfcf9 100%); border: 1px solid rgba(31, 111, 85, 0.1); border-radius: 20px; box-shadow: 0 1px 2px rgba(24, 42, 36, 0.04), 0 12px 40px rgba(24, 42, 36, 0.08); overflow: hidden; } .sc-register-header { padding: 22px 32px 18px; border-bottom: 1px solid rgba(31, 111, 85, 0.08); background: linear-gradient(180deg, rgba(227, 240, 235, 0.35) 0%, transparent 100%); } .sc-register-brand__title { display: block; font-size: 1.125rem; font-weight: 700; letter-spacing: 0.02em; color: #1f6f55; } .sc-register-eyebrow { margin: 8px 0 0; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #6b6a64; } .sc-register-title { margin: 10px 0 0; font-size: 1.625rem; font-weight: 700; line-height: 1.25; letter-spacing: -0.02em; color: #1a1a18; } .sc-register-subtitle { margin: 8px 0 0; max-width: 52ch; font-size: 0.9375rem; line-height: 1.55; color: #5c5b56; } .sc-register-trust { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; } .sc-register-trust__chip { padding: 6px 12px; font-size: 0.75rem; font-weight: 500; color: #145441; background: rgba(227, 240, 235, 0.85); border: 1px solid rgba(31, 111, 85, 0.14); border-radius: 999px; } .sc-register-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, 260px); gap: 0; } .sc-register-main { padding: 24px 32px 28px; min-width: 0; } .sc-register-form { display: flex; flex-direction: column; gap: 0; } .sc-register-section { margin-bottom: 18px; } .sc-register-section:last-of-type { margin-bottom: 20px; } .sc-register-section__head { margin-bottom: 12px; padding-bottom: 8px; border-bottom: 1px solid rgba(31, 111, 85, 0.1); } .sc-register-section__title { margin: 0; font-size: 1rem; font-weight: 700; color: #1a1a18; } .sc-register-section__desc { margin: 4px 0 0; font-size: 0.8125rem; color: #6b6a64; } .sc-register-section__fields { display: flex; flex-direction: column; gap: 11px; } .sc-register-field { display: flex; flex-direction: column; gap: 5px; } .sc-register-label { font-size: 0.8125rem; font-weight: 600; color: #3d3d38; } .sc-register-field .sc-form-control, .sc-register-field input.sc-form-control { min-height: 46px; padding: 10px 14px; font-size: 0.9375rem; border-radius: 10px; border: 1px solid #ddd8cc; background: #fff; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .sc-register-field .sc-form-control:focus, .sc-register-field input.sc-form-control:focus { outline: none; border-color: #1f6f55; box-shadow: 0 0 0 3px rgba(31, 111, 85, 0.18); } .sc-register-field--error .sc-form-control { border-color: #c45a4a; } .sc-register-error { font-size: 0.8125rem; color: #7a1a10; line-height: 1.4; } .sc-register-error ul { margin: 0; padding: 0; list-style: none; } .sc-register-alert { margin-bottom: 18px; } .sc-register-button { display: flex; align-items: center; justify-content: center; width: 100%; min-height: 48px; padding: 12px 20px; font-size: 0.9375rem; font-weight: 600; color: #fff; background: linear-gradient(180deg, #248f6a 0%, #1f6f55 100%); border: none; border-radius: 10px; cursor: pointer; box-shadow: 0 2px 8px rgba(31, 111, 85, 0.28); transition: background 0.15s ease, transform 0.1s ease, box-shadow 0.15s ease; } .sc-register-button:hover { background: linear-gradient(180deg, #2a9a72 0%, #248f6a 100%); box-shadow: 0 4px 14px rgba(31, 111, 85, 0.32); } .sc-register-button:active { transform: translateY(1px); box-shadow: 0 1px 4px rgba(31, 111, 85, 0.24); } .sc-register-login { margin: 14px 0 0; font-size: 0.875rem; text-align: center; color: #6b6a64; } .sc-register-login a { font-weight: 600; color: #1f6f55; text-decoration: none; } .sc-register-login a:hover { text-decoration: underline; } .sc-register-side { padding: 26px 24px 30px; background: linear-gradient(180deg, rgba(227, 240, 235, 0.45) 0%, rgba(243, 239, 230, 0.6) 100%); border-left: 1px solid rgba(31, 111, 85, 0.1); } .sc-register-side__title { margin: 0 0 16px; font-size: 0.9375rem; font-weight: 700; color: #1a1a18; } .sc-register-side__list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 12px; } .sc-register-side__item { display: flex; align-items: flex-start; gap: 10px; font-size: 0.875rem; line-height: 1.45; color: #3d3d38; } .sc-register-side__icon { flex-shrink: 0; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; color: #1f6f55; background: rgba(255, 255, 255, 0.85); border-radius: 50%; border: 1px solid rgba(31, 111, 85, 0.2); } @media (max-width: 768px) { .sc-register-header { padding: 20px 20px 16px; } .sc-register-layout { grid-template-columns: 1fr; } .sc-register-main { padding: 22px 20px 24px; } .sc-register-side { border-left: none; border-top: 1px solid rgba(31, 111, 85, 0.1); padding: 20px; } .sc-register-title { font-size: 1.375rem; } } /* ============================================================================ * Phase 16F — Terminal identity hints (Face ID events / bindings) * ============================================================================ */ .sc-terminal-hint { display: flex; flex-direction: column; gap: 4px; font-size: 0.875rem; } .sc-terminal-hint__id code { font-size: 0.8125rem; } .sc-terminal-hint__label { color: var(--muted-foreground, #6b6a64); font-size: 0.75rem; margin-right: 4px; } .sc-terminal-hint__name { font-weight: 600; color: #1a1a18; } .sc-terminal-hint__no { font-size: 0.8125rem; color: var(--muted-foreground, #6b6a64); } .sc-terminal-hint__sub { font-size: 0.75rem; margin-top: 2px; } .sc-terminal-hint__unmapped { font-size: 0.8125rem; color: #1f6f55; font-weight: 500; } .sc-bindings-suggestion { font-size: 0.8125rem; font-weight: 600; color: #1f6f55; background: rgba(227, 240, 235, 0.65); padding: 4px 8px; border-radius: 6px; display: inline-block; } /* ============================================================================ * Phase 16G — Face ID Binding QA Assistant * ============================================================================ */ .sc-binding-qa { margin-bottom: 16px; } .sc-binding-qa__grid { display: flex; flex-wrap: wrap; gap: 16px 24px; margin-bottom: 10px; } .sc-binding-qa__label { display: block; font-size: 0.75rem; font-weight: 600; color: var(--muted-foreground, #6b6a64); text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 4px; } .sc-binding-qa__score { margin-left: 8px; font-size: 0.8125rem; color: var(--muted-foreground, #6b6a64); } .sc-binding-qa-badge { display: inline-block; padding: 4px 10px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; border: 1px solid transparent; } .sc-binding-qa-badge--high { color: #145441; background: rgba(227, 240, 235, 0.9); border-color: rgba(31, 111, 85, 0.2); } .sc-binding-qa-badge--medium { color: #7a5c00; background: rgba(255, 243, 205, 0.9); border-color: rgba(180, 140, 0, 0.25); } .sc-binding-qa-badge--low { color: #5c5b56; background: rgba(240, 236, 227, 0.95); border-color: rgba(0, 0, 0, 0.08); } .sc-binding-qa-badge--conflict { color: #7a1a10; background: rgba(251, 227, 223, 0.95); border-color: rgba(179, 38, 30, 0.25); } .sc-binding-qa-badge--none { color: #6b6a64; background: rgba(240, 236, 227, 0.6); border-color: rgba(0, 0, 0, 0.06); } .sc-binding-qa__reasons, .sc-binding-qa__warnings { margin: 8px 0 0; padding-left: 18px; font-size: 0.8125rem; line-height: 1.45; } .sc-binding-qa__reasons { color: #3d3d38; } .sc-binding-qa__warnings { color: #7a1a10; } .sc-binding-qa__reasons--inline, .sc-binding-qa__warnings--inline { margin-top: 6px; padding-left: 16px; } .sc-binding-qa-cell { min-width: 200px; max-width: 280px; } .sc-binding-qa-confirm { padding: 12px 14px; background: rgba(255, 243, 205, 0.35); border: 1px solid rgba(180, 140, 0, 0.2); border-radius: 8px; } .sc-checkbox-label { display: flex; align-items: flex-start; gap: 8px; font-size: 0.875rem; cursor: pointer; } /* ============================================================================ * Phase 16H — Face ID Binding Final UX * ============================================================================ */ .sc-bindings-helper { padding: 14px 18px; font-size: 0.875rem; line-height: 1.5; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .sc-bindings-helper p { margin: 0 0 6px; } .sc-bindings-helper p:last-child { margin-bottom: 0; } .sc-bindings-terminal-cell__label, .sc-bindings-id-block__label, .sc-bindings-terminal-meta__k { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground, #6b6a64); margin-bottom: 2px; } .sc-bindings-terminal-cell__name { font-size: 0.9375rem; } .sc-bindings-id-block__value { font-size: 0.9375rem; font-weight: 600; } .sc-bindings-terminal-meta { margin-top: 8px; font-size: 0.8125rem; line-height: 1.45; } .sc-bindings-terminal-meta > div + div { margin-top: 4px; } .sc-bindings-risk-hint { margin: 8px 0 0; font-size: 0.75rem; color: #7a5c00; line-height: 1.4; } .sc-binding-warning-card { margin-top: 6px; padding: 6px 8px; border-radius: 6px; background: rgba(251, 227, 223, 0.35); border: 1px solid rgba(179, 38, 30, 0.12); } .sc-binding-warning-card--soft { background: rgba(255, 243, 205, 0.35); border-color: rgba(180, 140, 0, 0.15); } .sc-binding-warning-card--soft .sc-binding-qa__warnings { color: #5c4a00; } .sc-bindings-status { display: inline-block; padding: 3px 8px; font-size: 0.75rem; font-weight: 600; border-radius: 999px; background: rgba(240, 236, 227, 0.8); } .sc-bindings-status--active { color: #145441; background: rgba(227, 240, 235, 0.9); } .sc-bindings-empty--positive .sc-empty-title { color: #145441; } .sc-bindings-detail-card { max-width: 720px; margin-bottom: 16px; } .sc-binding-qa__identity { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px 20px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .sc-binding-qa__id { font-size: 0.9375rem; font-weight: 600; } .sc-binding-qa__section-title { margin: 10px 0 4px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground, #6b6a64); } .sc-binding-qa__safety { margin: 12px 0 0; font-size: 0.8125rem; color: var(--muted-foreground, #6b6a64); line-height: 1.45; } .sc-bindings-history-qa { display: block; font-size: 0.8125rem; margin-bottom: 2px; } .sc-bindings-form-actions { flex-wrap: wrap; gap: 8px; } @media (max-width: 900px) { .sc-bindings-actions { flex-direction: column; align-items: stretch; } .sc-bindings-actions .sc-bindings-inline-form { flex-wrap: wrap; } } /* ============================================================================ * Phase 16H.1 — Binding Detail & Dark Mode Final Polish * ============================================================================ */ .sc-binding-detail-shell { display: flex; flex-direction: column; gap: 16px; max-width: 1120px; } .sc-binding-detail-hero { margin-bottom: 0; } .sc-binding-detail-hero__meta { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } .sc-binding-detail-hero__id-pill { font-family: ui-monospace, monospace; letter-spacing: 0.02em; } .sc-binding-detail-toolbar { display: flex; justify-content: flex-start; } .sc-binding-detail-link { font-size: 0.875rem; font-weight: 600; color: var(--sc-emerald-800, #1f6f55); text-decoration: none; } .sc-binding-detail-link:hover { text-decoration: underline; } .sc-binding-detail-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 18px; align-items: start; } .sc-binding-detail-col { display: flex; flex-direction: column; gap: 16px; min-width: 0; } .sc-binding-detail-summary__title, .sc-binding-qa--detail .sc-binding-qa__title { font-size: 1.0625rem; } .sc-binding-detail-summary__grid { gap: 12px 20px; } .sc-binding-detail-form-card { box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06); } .sc-binding-detail-form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; } .sc-binding-detail-safety-note { padding: 14px 16px; border-radius: 10px; font-size: 0.8125rem; line-height: 1.5; background: rgba(31, 111, 85, 0.06); border: 1px solid rgba(31, 111, 85, 0.12); } .sc-binding-detail-safety-note p { margin: 0; } .sc-binding-qa--detail { border: 1px solid rgba(31, 111, 85, 0.15); background: linear-gradient(180deg, rgba(227, 240, 235, 0.35) 0%, rgba(255, 255, 255, 0) 100%); } .sc-binding-qa--detail .sc-binding-qa__title { color: var(--sc-emerald-800, #1f6f55); } .sc-terminal-name-hint { display: block; font-size: 0.875rem; line-height: 1.45; } .sc-terminal-name-hint__label { display: block; font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted-foreground, #6b6a64); margin-bottom: 2px; } .sc-terminal-name-hint--ok .sc-terminal-name-hint__value { font-weight: 600; } .sc-terminal-name-hint--missing .sc-terminal-name-hint__value { color: #7a5c00; font-style: italic; } .sc-terminal-name-hint__help { margin: 6px 0 0; font-size: 0.75rem; color: var(--muted-foreground, #6b6a64); } .sc-bindings-row-primary { min-width: 220px; } .sc-bindings-row-primary__terminal { margin-bottom: 10px; } .sc-bindings-id-block--primary { padding: 8px 10px; border-radius: 8px; background: rgba(31, 111, 85, 0.06); border: 1px solid rgba(31, 111, 85, 0.1); margin-bottom: 8px; } .sc-bindings-terminal-meta__line { margin-top: 6px; } .sc-bindings-suggestion--compact { font-size: 0.8125rem; font-weight: 600; margin-bottom: 6px; } .sc-binding-qa__reasons--subtle { font-size: 0.6875rem; line-height: 1.35; color: var(--sc-text-muted, #64748b); opacity: 0.92; } .sc-binding-qa__reasons--subtle li { margin-bottom: 2px; } .sc-binding-warning-card--compact { padding: 4px 6px; margin-top: 4px; } .sc-bindings-events-cell { font-size: 0.8125rem; line-height: 1.45; white-space: nowrap; } .sc-bindings-events-cell__line + .sc-bindings-events-cell__line { margin-top: 4px; } .sc-bindings-actions--compact { gap: 6px; } .sc-bindings-actions--compact .sc-bindings-select { min-width: 120px; max-width: 160px; } /* Dark mode contrast fixes (center + detail) */ html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-helper { border-bottom-color: rgba(255, 255, 255, 0.08); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-helper .sc-muted, html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-muted, html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-footer-hint { color: rgba(226, 232, 240, 0.78); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-table .sc-table tbody tr { background: rgba(15, 23, 42, 0.55); border-color: rgba(255, 255, 255, 0.06); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-table .sc-table tbody tr:nth-child(even) { background: rgba(30, 41, 59, 0.45); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-table .sc-table td, html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-table .sc-table th { border-color: rgba(255, 255, 255, 0.07); color: rgba(241, 245, 249, 0.95); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa__reasons--subtle, html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa__reasons { color: rgba(203, 213, 225, 0.88); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-id-block--primary { background: rgba(31, 111, 85, 0.14); border-color: rgba(72, 187, 140, 0.2); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-pill--chip:hover { background: rgba(52, 211, 153, 0.12); border-color: rgba(52, 211, 153, 0.28); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-pill--chip.is-active { background: rgba(52, 211, 153, 0.16); border-color: rgba(52, 211, 153, 0.35); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-pill__count { background: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-pill { background: rgba(31, 111, 85, 0.18); color: rgba(167, 243, 208, 0.95); border-color: rgba(72, 187, 140, 0.25); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-pill--warn { background: rgba(180, 83, 9, 0.22); color: rgba(254, 215, 170, 0.95); border-color: rgba(251, 146, 60, 0.3); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-warning-card { background: rgba(127, 29, 29, 0.22); border-color: rgba(248, 113, 113, 0.2); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-warning-card--soft { background: rgba(120, 90, 0, 0.22); border-color: rgba(250, 204, 21, 0.18); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-warning-card--soft .sc-binding-qa__warnings { color: rgba(254, 240, 138, 0.92); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa-badge--high { color: rgba(167, 243, 208, 0.95); background: rgba(31, 111, 85, 0.35); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa-badge--medium { color: rgba(254, 240, 138, 0.95); background: rgba(120, 90, 0, 0.35); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa-badge--low, html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa-badge--none { color: rgba(226, 232, 240, 0.9); background: rgba(51, 65, 85, 0.55); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa--detail { background: linear-gradient(180deg, rgba(31, 111, 85, 0.12) 0%, rgba(15, 23, 42, 0) 100%); border-color: rgba(72, 187, 140, 0.18); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-detail-safety-note { background: rgba(31, 111, 85, 0.12); border-color: rgba(72, 187, 140, 0.18); color: rgba(226, 232, 240, 0.9); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-terminal-name-hint--missing .sc-terminal-name-hint__value { color: rgba(254, 240, 138, 0.9); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-bindings-risk-hint { color: rgba(254, 240, 138, 0.88); } @media (max-width: 960px) { .sc-binding-detail-grid { grid-template-columns: 1fr; } .sc-binding-detail-shell { max-width: none; } .sc-binding-detail-col--action { order: -1; } } /* ============================================================================ * Phase 17A — Face ID Binding & Events Visual Clarity * ============================================================================ */ .sc-binding-detail-col--action .sc-binding-detail-form-card { border: 1px solid rgba(31, 111, 85, 0.22); box-shadow: 0 4px 18px rgba(15, 23, 42, 0.08); } .sc-binding-detail-form-card__back { display: inline-block; margin-bottom: 12px; } .sc-binding-detail-qa-wrap { margin-top: 2px; } .sc-binding-detail-qa-card { background: rgba(248, 250, 252, 0.85); border-color: rgba(100, 116, 139, 0.2); } .sc-binding-qa--detail.sc-binding-detail-qa-card { background: linear-gradient(180deg, rgba(241, 245, 249, 0.9) 0%, rgba(255, 255, 255, 0.5) 100%); border-color: rgba(100, 116, 139, 0.22); } .sc-binding-qa__grid--compact { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; } .sc-binding-qa__confidence { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } .sc-binding-qa__warning-text { margin: 0; font-size: 0.8125rem; line-height: 1.5; color: #9a3412; } .sc-face-events-shell { display: flex; flex-direction: column; gap: 18px; } .sc-face-events-hero { margin-bottom: 0; } .sc-face-events-hero__chips { gap: 8px; } .sc-face-events-pill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; font-size: 12px; font-weight: 600; background: rgba(31, 111, 85, 0.08); color: var(--sc-emerald-800, #1f6f55); border: 1px solid rgba(31, 111, 85, 0.15); } .sc-face-events-pill__count, .sc-face-events-pill__value { padding: 1px 7px; border-radius: 999px; font-size: 11px; font-weight: 700; background: rgba(15, 23, 42, 0.08); } .sc-face-events-pill--warn { background: rgba(180, 83, 9, 0.1); color: #9a3412; border-color: rgba(180, 83, 9, 0.25); } .sc-face-events-pill--muted { opacity: 0.92; } .sc-face-events-pill--status { font-size: 11px; padding: 4px 10px; } .sc-face-events-pill--bound { background: rgba(31, 111, 85, 0.12); color: #166534; border-color: rgba(31, 111, 85, 0.25); } .sc-face-events-pill--unbound { background: rgba(180, 83, 9, 0.12); color: #9a3412; border-color: rgba(180, 83, 9, 0.28); } .sc-face-events-pill--unknown { background: rgba(100, 116, 139, 0.12); color: #475569; border-color: rgba(100, 116, 139, 0.25); } .sc-face-events-filter-card { border-radius: var(--sc-radius-lg, 14px); } .sc-face-events-filter-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); align-items: end; } .sc-face-events-filter-actions { margin-top: 4px; } .sc-face-events-toggle { display: flex; align-items: flex-end; } .sc-face-events-toggle__pill { display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 999px; border: 1px dashed rgba(180, 83, 9, 0.45); background: rgba(180, 83, 9, 0.06); cursor: pointer; margin: 0; font-weight: 600; font-size: 13px; } .sc-face-events-toggle__pill input { margin: 0; } .sc-face-events-table-card { border-radius: var(--sc-radius-lg, 14px); overflow: hidden; } .sc-face-events-table .sc-table--compact th, .sc-face-events-table .sc-table--compact td { padding: 10px 12px; font-size: 13px; vertical-align: top; } .sc-face-events-table .sc-table tbody tr:hover { background: rgba(31, 111, 85, 0.04); } .sc-face-events-id-cell { display: flex; flex-direction: column; gap: 4px; min-width: 140px; } .sc-face-events-id-cell__code { font-size: 12px; font-family: ui-monospace, monospace; } .sc-face-events-id-cell__name { font-size: 12px; color: var(--sc-text-muted, #64748b); } .sc-face-events-id-cell__name--missing { font-style: italic; opacity: 0.85; } .sc-face-events-employee-name { font-weight: 600; } .sc-face-events-table__confidence { font-variant-numeric: tabular-nums; } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-detail-qa-card, html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa--detail.sc-binding-detail-qa-card { background: rgba(30, 41, 59, 0.55); border-color: rgba(148, 163, 184, 0.22); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-detail-col--action .sc-binding-detail-form-card { border-color: rgba(72, 187, 140, 0.22); box-shadow: 0 4px 18px rgba(0, 0, 0, 0.25); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-binding-qa__warning-text { color: rgba(254, 215, 170, 0.95); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-pill { background: rgba(52, 211, 153, 0.1); color: rgba(167, 243, 208, 0.95); border-color: rgba(52, 211, 153, 0.22); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-pill__count, html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-pill__value { background: rgba(255, 255, 255, 0.1); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-pill--warn, html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-pill--unbound { background: rgba(251, 146, 60, 0.12); color: rgba(254, 215, 170, 0.95); border-color: rgba(251, 146, 60, 0.28); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-pill--bound { background: rgba(52, 211, 153, 0.14); color: rgba(167, 243, 208, 0.95); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-pill--unknown { background: rgba(148, 163, 184, 0.12); color: rgba(226, 232, 240, 0.85); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-toggle__pill { border-color: rgba(251, 146, 60, 0.35); background: rgba(251, 146, 60, 0.08); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-table .sc-table tbody tr:hover { background: rgba(52, 211, 153, 0.06); } html[data-theme="dark"] .sc-bindings-dark-fix .sc-face-events-id-cell__name--missing { color: rgba(254, 240, 138, 0.75); } @media (max-width: 1100px) { .sc-face-events-filter-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { .sc-face-events-filter-grid { grid-template-columns: 1fr; } }