/* =============================================================
ДИЗАЙН-СИСТЕМА — Система отчётности удалённых сотрудников
Редизайн · продакшн-CSS, не привязан к фреймворку
-------------------------------------------------------------
Подключение:
Темизация — атрибуты на :
data-theme="light|dark"
data-accent="indigo|teal|violet|slate|amber"
data-density="compact|regular|comfy"
data-radius="sharp|regular|round"
============================================================= */
/* ===================== ТОКЕНЫ ===================== */
/* ============================================================
Дизайн-токены — Система задач (редизайн)
Светлый/тёмный, акцент и плотность управляются через data-* на
============================================================ */
:root {
/* ---- нейтральная шкала (тёплый графит) ---- */
--n-0: oklch(99.2% 0.002 250);
--n-25: oklch(98.4% 0.003 255);
--n-50: oklch(97.0% 0.004 258);
--n-100:oklch(94.6% 0.005 258);
--n-150:oklch(91.5% 0.006 260);
--n-200:oklch(88.0% 0.007 260);
--n-300:oklch(80.0% 0.008 262);
--n-400:oklch(67.0% 0.010 264);
--n-500:oklch(57.5% 0.012 266);
--n-600:oklch(48.0% 0.013 266);
--n-700:oklch(39.5% 0.013 266);
--n-800:oklch(30.0% 0.012 266);
--n-900:oklch(23.0% 0.012 268);
--n-950:oklch(17.5% 0.012 270);
/* ---- акцент (по умолчанию индиго; меняется через data-accent) ---- */
--accent: oklch(55% 0.17 262);
--accent-hover: oklch(49% 0.17 262);
--accent-soft: oklch(95.5% 0.03 262);
--accent-softer: oklch(97.5% 0.018 262);
--accent-border: oklch(88% 0.06 262);
--accent-text: oklch(45% 0.16 262);
--on-accent: oklch(99% 0.01 262);
/* ---- статусы (мягкие тинты) ---- */
--ok: oklch(56% 0.13 155);
--ok-soft: oklch(95.5% 0.04 155);
--ok-text: oklch(44% 0.12 155);
--warn: oklch(64% 0.13 70);
--warn-soft: oklch(95.5% 0.05 78);
--warn-text: oklch(48% 0.12 62);
--danger: oklch(57% 0.18 25);
--danger-soft: oklch(96% 0.03 25);
--danger-text: oklch(48% 0.17 25);
--info-soft: oklch(96% 0.03 250);
--info-text: oklch(46% 0.13 255);
/* ---- семантические (светлая тема) ---- */
--bg: var(--n-50);
--surface: var(--n-0);
--surface-2: var(--n-25);
--raised: var(--n-0);
--line: var(--n-150);
--line-soft: var(--n-100);
--text: var(--n-900);
--text-2: var(--n-600);
--text-3: var(--n-500);
--text-faint:var(--n-400);
/* ---- скругления (масштабируются через data-radius) ---- */
--r-scale: 1;
--r-xs: calc(5px * var(--r-scale));
--r-sm: calc(7px * var(--r-scale));
--r-md: calc(10px * var(--r-scale));
--r-lg: calc(14px * var(--r-scale));
--r-xl: calc(20px * var(--r-scale));
--r-pill: 999px;
/* ---- плотность (масштабируется через data-density) ---- */
--d-scale: 1;
--gap-1: calc(4px * var(--d-scale));
--gap-2: calc(8px * var(--d-scale));
--gap-3: calc(12px * var(--d-scale));
--gap-4: calc(16px * var(--d-scale));
--gap-5: calc(20px * var(--d-scale));
--gap-6: calc(24px * var(--d-scale));
--gap-8: calc(32px * var(--d-scale));
--row-h: calc(52px * var(--d-scale));
--pad-card: calc(22px * var(--d-scale));
/* ---- тени (мягкие, многослойные) ---- */
--sh-xs: 0 1px 2px oklch(25% 0.02 264 / 0.05);
--sh-sm: 0 1px 2px oklch(25% 0.02 264 / 0.05), 0 1px 3px oklch(25% 0.02 264 / 0.06);
--sh-md: 0 2px 4px oklch(25% 0.02 264 / 0.04), 0 4px 12px oklch(25% 0.02 264 / 0.07);
--sh-lg: 0 8px 24px oklch(25% 0.02 264 / 0.10), 0 2px 6px oklch(25% 0.02 264 / 0.06);
--sh-pop: 0 12px 40px oklch(20% 0.02 264 / 0.18), 0 2px 8px oklch(20% 0.02 264 / 0.10);
--font: "Golos Text", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "Martian Mono", ui-monospace, "SF Mono", monospace;
}
/* ====== АКЦЕНТЫ (через data-accent на ) ====== */
[data-accent="indigo"] {
--accent: oklch(55% 0.17 262); --accent-hover: oklch(49% 0.17 262);
--accent-soft: oklch(95.5% 0.03 262); --accent-softer: oklch(97.5% 0.018 262);
--accent-border: oklch(88% 0.06 262); --accent-text: oklch(45% 0.16 262);
}
[data-accent="teal"] {
--accent: oklch(58% 0.11 195); --accent-hover: oklch(52% 0.11 195);
--accent-soft: oklch(95.5% 0.03 195); --accent-softer: oklch(97.5% 0.018 195);
--accent-border: oklch(87% 0.05 195); --accent-text: oklch(46% 0.1 195);
}
[data-accent="violet"] {
--accent: oklch(56% 0.18 300); --accent-hover: oklch(50% 0.18 300);
--accent-soft: oklch(95.5% 0.035 300); --accent-softer: oklch(97.5% 0.02 300);
--accent-border: oklch(88% 0.06 300); --accent-text: oklch(46% 0.16 300);
}
[data-accent="slate"] {
--accent: oklch(48% 0.04 260); --accent-hover: oklch(42% 0.04 260);
--accent-soft: oklch(95% 0.01 260); --accent-softer: oklch(97.5% 0.006 260);
--accent-border: oklch(86% 0.012 260); --accent-text: oklch(40% 0.03 260);
}
[data-accent="amber"] {
--accent: oklch(62% 0.14 65); --accent-hover: oklch(56% 0.14 60);
--accent-soft: oklch(95.5% 0.05 75); --accent-softer: oklch(97.5% 0.03 75);
--accent-border: oklch(87% 0.07 70); --accent-text: oklch(48% 0.12 60);
}
/* ====== ТЁМНАЯ ТЕМА ====== */
[data-theme="dark"] {
--bg: oklch(17% 0.012 268);
--surface: oklch(21% 0.013 268);
--surface-2: oklch(19% 0.013 268);
--raised: oklch(24% 0.014 268);
--line: oklch(30% 0.013 268);
--line-soft: oklch(26% 0.013 268);
--text: oklch(95% 0.005 260);
--text-2: oklch(76% 0.01 262);
--text-3: oklch(63% 0.012 264);
--text-faint:oklch(50% 0.012 264);
--accent-soft: oklch(32% 0.07 262);
--accent-softer: oklch(27% 0.045 262);
--accent-border: oklch(40% 0.09 262);
--accent-text: oklch(82% 0.09 262);
--ok-soft: oklch(33% 0.07 155); --ok-text: oklch(82% 0.1 155);
--warn-soft: oklch(35% 0.07 70); --warn-text: oklch(85% 0.1 80);
--danger-soft: oklch(33% 0.08 25); --danger-text: oklch(82% 0.12 25);
--info-soft: oklch(30% 0.05 250); --info-text: oklch(82% 0.09 255);
--sh-xs: 0 1px 2px oklch(0% 0 0 / 0.3);
--sh-sm: 0 1px 3px oklch(0% 0 0 / 0.35);
--sh-md: 0 2px 8px oklch(0% 0 0 / 0.4);
--sh-lg: 0 10px 30px oklch(0% 0 0 / 0.5);
--sh-pop: 0 16px 48px oklch(0% 0 0 / 0.6);
}
/* ====== ПЛОТНОСТЬ ====== */
[data-density="compact"] { --d-scale: 0.82; }
[data-density="comfy"] { --d-scale: 1.15; }
/* ====== СКРУГЛЕНИЯ ====== */
[data-radius="sharp"] { --r-scale: 0.35; }
[data-radius="round"] { --r-scale: 1.5; }
/* ====== БАЗА ====== */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
font-family: var(--font);
background: var(--bg);
color: var(--text);
line-height: 1.5;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
font-variant-numeric: tabular-nums;
}
#root { min-height: 100vh; }
button { font-family: inherit; }
::selection { background: var(--accent-soft); color: var(--accent-text); }
/* тонкие скроллбары */
* { scrollbar-width: thin; scrollbar-color: var(--n-300) transparent; }
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: var(--line); border-radius: 999px; border: 2px solid var(--bg); }
*::-webkit-scrollbar-thumb:hover { background: var(--n-300); }
/* ===================== КОМПОНЕНТЫ ===================== */
/* ============================================================
Компоненты — Система задач (редизайн)
============================================================ */
/* ---------- App shell ---------- */
.shell { display: grid; grid-template-columns: auto 1fr; min-height: 100vh; }
/* ---------- Sidebar ---------- */
.sidebar {
width: 248px;
background: var(--surface);
border-right: 1px solid var(--line);
display: flex; flex-direction: column;
padding: var(--gap-4) var(--gap-3);
position: sticky; top: 0; height: 100vh;
transition: width .18s ease;
}
.sidebar-brand {
display: flex; align-items: center; gap: 10px;
padding: var(--gap-2) var(--gap-2) var(--gap-5);
}
.brand-mark {
width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0;
background: var(--accent);
display: grid; place-items: center;
color: var(--on-accent); position: relative;
box-shadow: inset 0 1px 0 oklch(100% 0 0 / .2), var(--sh-xs);
}
.brand-mark::after {
content: ""; width: 12px; height: 12px; border-radius: 3px;
border: 2.4px solid var(--on-accent);
border-right-color: transparent; border-bottom-color: transparent;
transform: rotate(45deg) translate(1px,1px);
}
.brand-name { font-weight: 600; font-size: 15px; letter-spacing: -0.01em; }
.brand-sub { font-size: 11px; color: var(--text-3); margin-top: 1px; letter-spacing: 0.01em; }
.nav-group { display: flex; flex-direction: column; gap: 2px; }
.nav-label {
font-size: 10.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
color: var(--text-faint); padding: var(--gap-4) var(--gap-2) var(--gap-2);
}
.nav-item {
display: flex; align-items: center; gap: 11px;
padding: 9px var(--gap-2); border-radius: var(--r-sm);
color: var(--text-2); font-size: 14px; font-weight: 500;
cursor: pointer; border: none; background: none; width: 100%; text-align: left;
position: relative; transition: background .12s, color .12s;
}
.nav-item:hover { background: var(--surface-2); color: var(--text); }
.nav-item.active { background: var(--accent-soft); color: var(--accent-text); font-weight: 600; }
.nav-item .ico { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; }
.nav-item.active .ico { opacity: 1; }
.nav-item .count {
margin-left: auto; font-size: 11px; font-weight: 600;
background: var(--surface-2); color: var(--text-3);
min-width: 20px; height: 20px; padding: 0 6px; border-radius: var(--r-pill);
display: grid; place-items: center;
}
.nav-item.active .count { background: var(--accent); color: var(--on-accent); }
.nav-item .count.alert { background: var(--danger-soft); color: var(--danger-text); }
.sidebar-foot { margin-top: auto; padding-top: var(--gap-4); }
.role-switch {
display: flex; gap: 3px; padding: 3px; background: var(--surface-2);
border: 1px solid var(--line-soft); border-radius: var(--r-md); margin-bottom: var(--gap-3);
}
.role-switch button {
flex: 1; border: none; background: transparent; cursor: pointer;
padding: 7px 4px; border-radius: var(--r-sm); font-size: 12px; font-weight: 600;
color: var(--text-3); transition: all .12s; box-shadow: none;
}
.role-switch button.rs-on { background: var(--surface); color: var(--text); box-shadow: var(--sh-xs); }
/* ---------- Top bar ---------- */
.main-col { display: flex; flex-direction: column; min-width: 0; }
.topbar {
height: 60px; flex-shrink: 0;
display: flex; align-items: center; gap: var(--gap-4);
padding: 0 var(--gap-6);
background: oklch(from var(--bg) l c h / 0.8);
backdrop-filter: blur(12px) saturate(1.4);
border-bottom: 1px solid var(--line);
position: sticky; top: 0; z-index: 40;
}
.crumb { font-size: 13px; color: var(--text-3); }
.crumb b { color: var(--text); font-weight: 600; }
.topbar-spacer { flex: 1; }
.searchbox {
display: flex; align-items: center; gap: 8px;
height: 36px; padding: 0 12px; min-width: 240px;
background: var(--surface-2); border: 1px solid var(--line-soft);
border-radius: var(--r-md); color: var(--text-3); font-size: 13px; cursor: text;
}
.searchbox:focus-within { border-color: var(--accent-border); background: var(--surface); }
.searchbox input { border: none; background: none; outline: none; flex: 1; font: inherit; color: var(--text); }
.searchbox .k { font-family: var(--mono); font-size: 10px; color: var(--text-faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; }
.icon-btn {
width: 36px; height: 36px; border-radius: var(--r-md); flex-shrink: 0;
display: grid; place-items: center; cursor: pointer;
border: 1px solid transparent; background: none; color: var(--text-2);
position: relative; transition: background .12s, border-color .12s;
}
.icon-btn:hover { background: var(--surface-2); color: var(--text); }
.icon-btn .ico { width: 19px; height: 19px; }
.bell-dot {
position: absolute; top: 6px; right: 6px;
background: var(--danger); color: white;
font-size: 9.5px; font-weight: 700; line-height: 1;
min-width: 16px; height: 16px; padding: 0 4px;
border-radius: 999px; display: grid; place-items: center;
border: 2px solid var(--bg);
}
.user-chip { display: flex; align-items: center; gap: 10px; padding-left: var(--gap-3); border-left: 1px solid var(--line); }
.user-chip .meta { text-align: right; line-height: 1.25; }
.user-chip .nm { font-size: 13px; font-weight: 600; white-space: nowrap; }
.user-chip .rl { font-size: 11px; color: var(--text-3); white-space: nowrap; }
/* ---------- Avatars ---------- */
.avatar {
width: 32px; height: 32px; border-radius: var(--r-pill); flex-shrink: 0;
display: grid; place-items: center; font-size: 12px; font-weight: 600;
background: var(--accent-soft); color: var(--accent-text);
letter-spacing: 0.02em;
}
.avatar.sm { width: 24px; height: 24px; font-size: 10px; }
.avatar.lg { width: 44px; height: 44px; font-size: 15px; }
.avatar.a1 { background: oklch(94% 0.04 262); color: oklch(45% 0.15 262); }
.avatar.a2 { background: oklch(94% 0.05 150); color: oklch(43% 0.13 150); }
.avatar.a3 { background: oklch(95% 0.05 40); color: oklch(48% 0.13 45); }
.avatar.a4 { background: oklch(94% 0.05 330); color: oklch(46% 0.15 330); }
[data-theme="dark"] .avatar.a1 { background: oklch(34% 0.08 262); color: oklch(85% 0.09 262); }
[data-theme="dark"] .avatar.a2 { background: oklch(33% 0.08 150); color: oklch(85% 0.1 150); }
[data-theme="dark"] .avatar.a3 { background: oklch(34% 0.08 45); color: oklch(86% 0.1 50); }
[data-theme="dark"] .avatar.a4 { background: oklch(34% 0.08 330); color: oklch(85% 0.1 330); }
/* ---------- Page ---------- */
.page { padding: var(--gap-6); max-width: 1180px; margin: 0 auto; width: 100%; }
.page-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--gap-4); margin-bottom: var(--gap-6); flex-wrap: wrap; }
.page-title { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; margin: 0; }
.page-desc { font-size: 13.5px; color: var(--text-3); margin: 5px 0 0; }
.page-actions { display: flex; gap: var(--gap-2); align-items: center; }
/* ---------- Buttons ---------- */
.btn {
display: inline-flex; align-items: center; gap: 7px; justify-content: center;
height: 38px; padding: 0 16px; border-radius: var(--r-md);
font-size: 13.5px; font-weight: 600; cursor: pointer; white-space: nowrap;
border: 1px solid var(--line); background: var(--surface); color: var(--text);
transition: background .12s, border-color .12s, box-shadow .12s, transform .04s;
}
.btn:hover { background: var(--surface-2); border-color: var(--n-300); }
.btn:active { transform: translateY(0.5px); }
.btn .ico { width: 16px; height: 16px; }
.btn.primary { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: var(--sh-xs); }
.btn.primary:hover { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.ghost { border-color: transparent; background: none; }
.btn.ghost:hover { background: var(--surface-2); }
.btn.ok { background: var(--ok); border-color: var(--ok); color: white; }
.btn.ok:hover { filter: brightness(0.95); }
.btn.warn { background: transparent; border-color: var(--warn); color: var(--warn-text); }
.btn.warn:hover { background: var(--warn-soft); }
.btn.danger-ghost { border-color: var(--line); color: var(--danger-text); }
.btn.danger-ghost:hover { background: var(--danger-soft); border-color: var(--danger-soft); }
.btn.sm { height: 32px; padding: 0 12px; font-size: 12.5px; border-radius: var(--r-sm); }
.btn.lg { height: 44px; padding: 0 22px; font-size: 15px; }
.btn.block { width: 100%; }
/* ---------- Cards ---------- */
.card {
background: var(--surface); border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--sh-sm);
}
.card-pad { padding: var(--pad-card); }
.card-head {
display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3);
padding: var(--gap-4) var(--pad-card); border-bottom: 1px solid var(--line-soft);
}
.card-head h2 { font-size: 15px; font-weight: 650; margin: 0; letter-spacing: -0.01em; }
.card-head .sub { font-size: 12px; color: var(--text-3); }
/* ---------- Stat tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--gap-4); }
.tile {
background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
padding: var(--gap-5); cursor: pointer; position: relative; overflow: hidden;
transition: border-color .14s, box-shadow .14s, transform .14s;
}
.tile:hover { border-color: var(--n-300); box-shadow: var(--sh-md); transform: translateY(-2px); }
.tile-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--gap-4); }
.tile-ico { width: 34px; height: 34px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-text); }
.tile-ico .ico { width: 18px; height: 18px; }
.tile-ico.warn { background: var(--warn-soft); color: var(--warn-text); }
.tile-ico.danger { background: var(--danger-soft); color: var(--danger-text); }
.tile-ico.ok { background: var(--ok-soft); color: var(--ok-text); }
.tile-trend { font-size: 11.5px; font-weight: 600; color: var(--text-3); display: flex; align-items: center; gap: 3px; }
.tile-trend.up { color: var(--ok-text); }
.tile-value { font-size: 34px; font-weight: 680; letter-spacing: -0.03em; line-height: 1; }
.tile-label { font-size: 13px; color: var(--text-3); margin-top: 7px; }
.tile.danger .tile-value { color: var(--danger-text); }
.tile.warn .tile-value { color: var(--warn-text); }
.tile.ok .tile-value { color: var(--ok-text); }
/* ---------- Badges ---------- */
.badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 9px; border-radius: var(--r-pill);
font-size: 12px; font-weight: 600; white-space: nowrap; line-height: 1.3;
}
.badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .9; }
.badge.no-dot::before { display: none; }
.b-assigned { background: var(--info-soft); color: var(--info-text); }
.b-in_progress { background: var(--warn-soft); color: var(--warn-text); }
.b-submitted { background: var(--accent-soft); color: var(--accent-text); }
.b-approved { background: var(--ok-soft); color: var(--ok-text); }
.b-returned { background: var(--danger-soft); color: var(--danger-text); }
.b-overdue { background: var(--danger-soft); color: var(--danger-text); box-shadow: inset 0 0 0 1px var(--danger-text); }
.b-cancelled { background: var(--surface-2); color: var(--text-3); }
/* ---------- Priority ---------- */
.prio { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 500; color: var(--text-2); }
.prio::before { content: ""; width: 8px; height: 8px; border-radius: 50%; }
.prio.normal::before { background: var(--n-400); }
.prio.urgent { color: var(--warn-text); font-weight: 600; }
.prio.urgent::before { background: var(--warn); }
.prio.immediate { color: var(--danger-text); font-weight: 700; }
.prio.immediate::before { background: var(--danger); box-shadow: 0 0 0 3px var(--danger-soft); }
/* ---------- Filters / chips ---------- */
.toolbar { display: flex; align-items: center; gap: var(--gap-3); flex-wrap: wrap; margin-bottom: var(--gap-5); }
.chips { display: flex; gap: 6px; flex-wrap: wrap; }
.chip {
padding: 6px 13px; border-radius: var(--r-pill); font-size: 12.5px; font-weight: 600; white-space: nowrap;
background: var(--surface); border: 1px solid var(--line); color: var(--text-2); cursor: pointer;
display: inline-flex; align-items: center; gap: 6px; transition: all .12s;
}
.chip:hover { border-color: var(--n-300); }
.chip.on { background: var(--text); border-color: var(--text); color: var(--surface); }
.chip .n { opacity: .65; font-variant-numeric: tabular-nums; }
.chip.on .n { opacity: .8; }
.select, .inp {
height: 36px; padding: 0 12px; border-radius: var(--r-sm);
border: 1px solid var(--line); background: var(--surface); color: var(--text);
font: inherit; font-size: 13px; outline: none;
}
.select:focus, .inp:focus, textarea.inp:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
textarea.inp { height: auto; padding: 10px 12px; resize: vertical; line-height: 1.5; }
.field { display: flex; flex-direction: column; gap: 6px; }
.field > label { font-size: 12.5px; font-weight: 600; color: var(--text-2); }
.field .hint { font-size: 11.5px; color: var(--text-faint); }
.label-mini { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); }
/* ---------- Task list (rows) ---------- */
.tlist { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); overflow-x: auto; }
.trow {
display: grid; grid-template-columns: var(--task-cols, 20px minmax(0,1fr) 132px 92px 116px 150px 30px);
align-items: center; gap: var(--gap-3); min-width: 740px;
padding: 13px var(--gap-5); border-bottom: 1px solid var(--line-soft);
font-size: 13.5px; cursor: pointer; transition: background .1s;
}
.trow:last-child { border-bottom: none; }
.trow:hover { background: var(--surface-2); }
.trow.head { font-size: 11px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-faint); background: var(--surface-2); cursor: default; padding-top: 10px; padding-bottom: 10px; }
.trow.head:hover { background: var(--surface-2); }
.trow.overdue-row { background: oklch(from var(--danger-soft) l c h / .5); }
.trow.overdue-row:hover { background: var(--danger-soft); }
.trow.done-row { color: var(--text-3); }
.trow.done-row .t-title { text-decoration: line-through; color: var(--text-3); }
.t-cell-title { min-width: 0; }
.t-title { font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 8px; }
.t-title .ttl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-desc { color: var(--text-3); font-size: 12px; margin-top: 2px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-assignee { display: flex; align-items: center; gap: 8px; min-width: 0; }
.t-assignee span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.t-due { font-weight: 600; }
.t-due .rel { font-weight: 500; color: var(--text-3); font-size: 12px; margin-left: 5px; }
.t-due .rel.urgent { color: var(--danger-text); }
.chk {
width: 17px; height: 17px; border: 1.5px solid var(--n-300); border-radius: 5px;
background: var(--surface); cursor: pointer; display: inline-grid; place-items: center; flex-shrink: 0;
transition: all .12s;
}
.chk.on { background: var(--accent); border-color: var(--accent); }
.chk.on::after { content: ""; width: 9px; height: 5px; border: 2px solid var(--on-accent); border-top: none; border-right: none; transform: rotate(-45deg) translateY(-1px); }
.kebab { width: 28px; height: 28px; border-radius: var(--r-sm); display: grid; place-items: center; color: var(--text-3); }
.kebab:hover { background: var(--line-soft); color: var(--text); }
.list-foot { display: flex; align-items: center; justify-content: space-between; padding: var(--gap-3) var(--gap-5); font-size: 12.5px; color: var(--text-3); }
.pager { display: flex; gap: 4px; align-items: center; }
.pager button { width: 28px; height: 28px; border-radius: var(--r-sm); border: 1px solid var(--line); background: var(--surface); color: var(--text-2); cursor: pointer; font-size: 13px; }
.pager button.on { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); font-weight: 600; }
/* ---------- Dashboard layout ---------- */
.dash-grid { display: grid; grid-template-columns: 1.45fr 1fr; gap: var(--gap-4); margin-top: var(--gap-4); }
.list-item {
display: flex; align-items: center; justify-content: space-between; gap: var(--gap-3);
padding: 12px var(--pad-card); border-bottom: 1px solid var(--line-soft); font-size: 13.5px;
}
.list-item:last-child { border-bottom: none; }
.list-item .lhs { display: flex; align-items: center; gap: 11px; min-width: 0; }
.list-item .lhs > span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.datechip { font-family: var(--mono); font-size: 11px; font-weight: 600; background: var(--surface-2); color: var(--text-2); padding: 3px 7px; border-radius: var(--r-xs); flex-shrink: 0; }
/* ---------- Task detail ---------- */
.detail-back { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-3); font-weight: 500; cursor: pointer; margin-bottom: var(--gap-4); white-space: nowrap; }
.detail-back:hover { color: var(--text); }
.detail-grid { display: grid; grid-template-columns: 1fr 320px; gap: var(--gap-5); align-items: start; }
.meta-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--gap-5) var(--gap-4); }
.meta-grid.col2 { grid-template-columns: repeat(2,1fr); }
.meta-item .label-mini { margin-bottom: 4px; }
.meta-item .v { font-size: 14px; font-weight: 500; }
.divider { height: 1px; background: var(--line-soft); margin: var(--gap-5) 0; }
.section-h { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--gap-2); }
.prose { font-size: 14.5px; line-height: 1.65; color: var(--text); }
.callout { border-radius: var(--r-md); padding: 13px 15px; font-size: 13.5px; display: flex; gap: 11px; align-items: flex-start; }
.callout .ico { width: 18px; height: 18px; flex-shrink: 0; margin-top: 1px; }
.callout.info { background: var(--accent-softer); color: var(--accent-text); }
.callout.warn { background: var(--warn-soft); color: var(--warn-text); }
.callout .lbl { font-size: 11.5px; font-weight: 600; opacity: .8; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 3px; }
/* ---------- Attachments ---------- */
.attach { display: inline-flex; align-items: center; gap: 10px; padding: 8px 11px; background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-sm); font-size: 13px; }
.attach .ext { font-family: var(--mono); font-size: 9px; font-weight: 700; letter-spacing: 0.02em; color: var(--on-accent); background: var(--accent); padding: 3px 5px; border-radius: 4px; }
.attach .ext.doc { background: var(--info-text); }
.attach .ext.xls { background: var(--ok); }
.attach .sz { color: var(--text-faint); font-size: 11.5px; }
.attach .x { color: var(--text-faint); cursor: pointer; font-size: 15px; line-height: 1; }
.attach .x:hover { color: var(--danger-text); }
.dropzone { border: 1.5px dashed var(--line); border-radius: var(--r-md); padding: var(--gap-5); text-align: center; color: var(--text-3); font-size: 13px; transition: all .12s; }
.dropzone:hover { border-color: var(--accent-border); background: var(--accent-softer); }
/* ---------- Timeline ---------- */
.timeline { position: relative; padding-left: 26px; }
.timeline::before { content: ""; position: absolute; left: 7px; top: 4px; bottom: 8px; width: 2px; background: var(--line); }
.tl-item { position: relative; padding-bottom: var(--gap-5); }
.tl-item:last-child { padding-bottom: 0; }
.tl-item::before { content: ""; position: absolute; left: -26px; top: 2px; width: 16px; height: 16px; border-radius: 50%; background: var(--surface); border: 2px solid var(--line); }
.tl-item.accent::before { border-color: var(--accent); background: var(--accent-soft); }
.tl-time { font-size: 11.5px; color: var(--text-faint); font-variant-numeric: tabular-nums; }
.tl-body { font-size: 13.5px; margin-top: 2px; }
.tl-body b { font-weight: 600; }
/* ---------- Notifications ---------- */
.notif { display: flex; gap: 13px; padding: 14px var(--pad-card); border-bottom: 1px solid var(--line-soft); cursor: pointer; transition: background .1s; }
.notif:hover { background: var(--surface-2); }
.notif.unread { background: var(--accent-softer); }
.notif.unread:hover { background: var(--accent-soft); }
.notif-ic { width: 36px; height: 36px; border-radius: var(--r-sm); display: grid; place-items: center; flex-shrink: 0; background: var(--surface-2); color: var(--text-2); }
.notif-ic .ico { width: 18px; height: 18px; }
.notif-ic.new { background: var(--accent-soft); color: var(--accent-text); }
.notif-ic.warn { background: var(--warn-soft); color: var(--warn-text); }
.notif-ic.ok { background: var(--ok-soft); color: var(--ok-text); }
.notif-ic.ret { background: var(--danger-soft); color: var(--danger-text); }
.notif-body { flex: 1; min-width: 0; }
.notif-title { font-size: 13.5px; font-weight: 600; }
.notif-sub { font-size: 12.5px; color: var(--text-2); margin-top: 1px; }
.notif-time { font-size: 11.5px; color: var(--text-faint); margin-top: 4px; }
.notif-unread-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex-shrink: 0; margin-top: 6px; }
/* ---------- Dropdown popover ---------- */
.popover {
position: absolute; top: 52px; right: var(--gap-6); z-index: 60;
width: 380px; background: var(--raised); border: 1px solid var(--line);
border-radius: var(--r-lg); box-shadow: var(--sh-pop); overflow: hidden;
animation: pop .14s ease;
}
@keyframes pop { from { opacity: 0; transform: translateY(-6px) scale(.99); } to { opacity: 1; transform: none; } }
.pop-head { display: flex; align-items: center; justify-content: space-between; padding: 13px var(--gap-4); border-bottom: 1px solid var(--line-soft); }
.pop-head b { font-size: 14px; }
.pop-link { font-size: 12.5px; color: var(--accent-text); font-weight: 600; cursor: pointer; }
.pop-foot { padding: 11px; text-align: center; border-top: 1px solid var(--line-soft); }
/* ---------- Modal ---------- */
.scrim { position: fixed; inset: 0; background: oklch(20% 0.02 264 / 0.45); backdrop-filter: blur(3px); z-index: 80; display: grid; place-items: center; padding: var(--gap-6); animation: fade .15s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal { width: 100%; max-width: 600px; background: var(--raised); border-radius: var(--r-xl); box-shadow: var(--sh-pop); overflow: hidden; max-height: 90vh; display: flex; flex-direction: column; animation: rise .18s cubic-bezier(.2,.8,.2,1); }
@keyframes rise { from { opacity: 0; transform: translateY(12px) scale(.98); } to { opacity: 1; transform: none; } }
.modal-head { padding: var(--gap-5) var(--gap-6); border-bottom: 1px solid var(--line-soft); display: flex; align-items: center; justify-content: space-between; }
.modal-head h3 { font-size: 17px; font-weight: 650; margin: 0; }
.modal-body { padding: var(--gap-6); overflow-y: auto; display: flex; flex-direction: column; gap: var(--gap-4); }
.modal-foot { padding: var(--gap-4) var(--gap-6); border-top: 1px solid var(--line-soft); display: flex; justify-content: flex-end; gap: var(--gap-2); background: var(--surface-2); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap-4); }
.grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--gap-3); }
/* ---------- Report block ---------- */
.report-row { display: grid; grid-template-columns: 22px 1fr 110px; gap: var(--gap-3); align-items: center; padding: 12px 14px; border: 1px solid var(--line-soft); border-radius: var(--r-md); margin-bottom: 8px; background: var(--surface); }
.report-row.imported { background: var(--accent-softer); border-color: var(--accent-border); }
.report-row .rtitle { font-weight: 600; font-size: 13.5px; }
.report-row .rdesc { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.hours-inp { width: 100%; height: 34px; text-align: center; }
/* ---------- Login ---------- */
.login-wrap { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; }
.login-form-col { display: grid; place-items: center; padding: var(--gap-8); }
.login-card { width: 100%; max-width: 360px; }
.login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: var(--gap-8); }
.login-aside { background: var(--accent); color: var(--on-accent); padding: var(--gap-8); display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; }
.login-aside::before { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 80% at 80% 10%, oklch(100% 0 0 / .12), transparent 60%); }
.login-quote { font-size: 26px; font-weight: 600; line-height: 1.35; letter-spacing: -0.02em; max-width: 420px; position: relative; }
.login-feats { display: flex; flex-direction: column; gap: 14px; position: relative; }
.login-feat { display: flex; gap: 12px; align-items: flex-start; font-size: 14px; opacity: .95; }
.login-feat .ico { width: 20px; height: 20px; flex-shrink: 0; margin-top: 1px; opacity: .9; }
.demo-accts { margin-top: var(--gap-5); padding: var(--gap-4); background: var(--surface-2); border: 1px solid var(--line-soft); border-radius: var(--r-md); font-size: 12.5px; }
.demo-accts .row { display: flex; justify-content: space-between; padding: 4px 0; color: var(--text-2); }
.demo-accts .row b { color: var(--text); font-weight: 600; }
.demo-accts code { font-family: var(--mono); font-size: 11px; }
/* ---------- helpers ---------- */
.muted { color: var(--text-3); }
.faint { color: var(--text-faint); }
.row-flex { display: flex; align-items: center; gap: var(--gap-2); }
.wrap { flex-wrap: wrap; }
.mono { font-family: var(--mono); }
.link { color: var(--accent-text); font-weight: 600; cursor: pointer; }
.link:hover { text-decoration: underline; }
.stack { display: flex; flex-direction: column; }
.empty { text-align: center; padding: var(--gap-8); color: var(--text-3); }
/* Image placeholder (для будущих ассетов) */
.img-slot { background: repeating-linear-gradient(135deg, var(--surface-2), var(--surface-2) 9px, var(--line-soft) 9px, var(--line-soft) 10px); border: 1px solid var(--line); border-radius: var(--r-md); display: grid; place-items: center; color: var(--text-faint); font-family: var(--mono); font-size: 11px; }
/* ---------- Responsive ---------- */
@media (max-width: 1080px) {
.tiles { grid-template-columns: repeat(2, 1fr); }
.dash-grid, .detail-grid { grid-template-columns: 1fr; }
}
@media (max-width: 860px) {
.sidebar { display: none; }
.shell { grid-template-columns: 1fr; }
.searchbox { display: none; }
.page { padding: var(--gap-5); }
}