/* ===== Garne CRM — design tokens ===== */ :root{ --paper:#FFFFFF; --sky:#F2F6FC; --sky-deep:#E6EEFB; --sky-line:#E2E8F3; --ink:#0B1626; --ink-soft:#33415A; --ink-invert:#0B1626; /* always-dark surface (tooltips/toasts) — deliberately NOT overridden in dark theme, since white text on it must stay readable in both themes */ --slate:#5C6B85; --slate-2:#8592AA; --visa:#1E43D6; --visa-ink:#15308F; --visa-soft:#EAF0FD; --stamp:#D64526; --stamp-soft:#FCEAE4; --good:#1B8A5A; --good-soft:#E6F5EE; --amber:#B7791F; --amber-soft:#FCF3DF; --radius-lg:18px; --radius-md:12px; --radius-sm:8px; --shadow-card:0 1px 2px rgba(11,22,38,.04), 0 1px 1px rgba(11,22,38,.03); --shadow-pop:0 12px 32px rgba(11,22,38,.14), 0 2px 8px rgba(11,22,38,.08); --font-display:'Space Grotesk', 'Inter', sans-serif; --font-body:'Inter', sans-serif; --font-mono:'IBM Plex Mono', monospace; --slogan:#E4E9F2; } /* Dark theme — same token names, dark values, toggled via [data-theme="dark"] on (see setTheme() in store.js). Every component already reads colors through var(--token), so this single block re-themes the whole app with no per-component changes needed. */ :root[data-theme="dark"]{ --paper:#141A24; --sky:#1B222E; --sky-deep:#222A38; --sky-line:#2B3444; --ink:#ECF1F8; --ink-soft:#B9C3D6; --slate:#8B96AC; --slate-2:#6B7690; --visa:#5578F0; --visa-ink:#AFC0FA; --visa-soft:#1E2A47; --stamp:#E8593A; --stamp-soft:#3A2420; --good:#33B37B; --good-soft:#1B3428; --amber:#D99A3D; --amber-soft:#3A2E14; --shadow-card:0 1px 2px rgba(0,0,0,.3), 0 1px 1px rgba(0,0,0,.2); --shadow-pop:0 12px 32px rgba(0,0,0,.45), 0 2px 8px rgba(0,0,0,.3); --slogan:#232C3B; } *{box-sizing:border-box;} html,body{margin:0;padding:0;} svg{width:1em; height:1em; flex-shrink:0; display:inline-block;} body{ background:var(--paper); color:var(--ink); font-family:var(--font-body); -webkit-font-smoothing:antialiased; font-size:14px; line-height:1.5; } h1,h2,h3,h4{font-family:var(--font-display); color:var(--ink); margin:0; letter-spacing:-0.01em;} ::selection{background:var(--visa-soft); color:var(--visa-ink);} a{color:inherit;} button{font-family:inherit;} ::-webkit-scrollbar{width:10px; height:10px;} ::-webkit-scrollbar-track{background:transparent;} ::-webkit-scrollbar-thumb{background:var(--sky-line); border-radius:8px; border:2px solid var(--paper);} ::-webkit-scrollbar-thumb:hover{background:var(--slate-2);} .mono{font-family:var(--font-mono);} /* ===== App shell ===== */ .shell{display:flex; height:100vh; overflow:hidden;} .rail{ width:76px; background:var(--paper); border-right:1px solid var(--sky-line); display:flex; flex-direction:column; align-items:center; padding:18px 0 14px; flex-shrink:0; z-index:20; } .rail-logo{ width:40px; height:40px; border-radius:12px; background:linear-gradient(135deg, var(--visa), var(--visa-ink)); display:flex; align-items:center; justify-content:center; color:white; font-family:var(--font-display); font-weight:700; font-size:15px; margin-bottom:22px; box-shadow:0 4px 10px rgba(30,67,214,.25); } .rail-logo svg{width:23px; height:23px;} .rail-nav{display:flex; flex-direction:column; gap:4px; flex:1; width:100%; align-items:center;} .rail-item{ width:52px; height:52px; border-radius:14px; display:flex; align-items:center; justify-content:center; color:var(--slate); cursor:pointer; position:relative; transition:background .15s ease, color .15s ease; border:none; background:none; } .rail-item svg{width:22px; height:22px; stroke-width:2.3;} .rail-item:hover{background:var(--sky); color:var(--ink);} .rail-item.active{background:var(--visa-soft); color:var(--visa);} .rail-item .dot{ position:absolute; top:9px; right:10px; width:8px; height:8px; border-radius:50%; background:var(--stamp); border:2px solid var(--paper); } .rail-tip{ position:fixed; left:70px; background:var(--ink-invert); color:white; font-size:12px; padding:6px 10px; border-radius:8px; white-space:nowrap; pointer-events:none; z-index:100; font-weight:500; box-shadow:var(--shadow-pop); } .main{flex:1; display:flex; flex-direction:column; min-width:0; background:var(--sky); } .topbar{ height:64px; flex-shrink:0; background:var(--paper); border-bottom:1px solid var(--sky-line); display:flex; align-items:center; gap:16px; padding:0 24px; } .search-box{ flex:1; max-width:420px; height:38px; background:var(--sky); border-radius:10px; display:flex; align-items:center; gap:8px; padding:0 12px; color:var(--slate-2); } /* The search box draws its own pill, so the input inside it stays bare. Written with the same :not() chain as the element-level control rule further down, because that rule counts four attribute selectors and would otherwise out-specify a plain `.search-box input`. */ .search-box input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="range"]){ border:none; background:none; outline:none; box-shadow:none; padding:0; border-radius:0; font-size:13.5px; color:var(--ink); width:100%; font-family:var(--font-body); } .search-box svg{width:16px; height:16px; flex-shrink:0;} .topbar-spacer{flex:1;} /* The line the firm sells with, sitting in the empty stretch of the top bar. It takes the place of the old spacer, so it also does the spacer's job of pushing the controls to the right. Deliberately barely-there: it should register once and then stop being noticed, so it is drawn a shade off the bar itself rather than in any real colour. Hidden on narrow screens, where that stretch belongs to the search box and the controls. */ .topbar-slogan{ flex:1; min-width:0; text-align:center; padding:18px 12px; font-family:var(--font-display); font-weight:700; font-size:19px; line-height:1; letter-spacing:.02em; color:var(--slogan); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; user-select:none; pointer-events:none; } @media (max-width:1240px){ .topbar-slogan{font-size:15px; padding:18px 8px;} } @media (max-width:1000px){ .topbar-slogan{display:none;} .topbar .search-box{flex:1;} } .role-switch{ display:flex; align-items:center; gap:6px; background:var(--sky); border-radius:10px; padding:4px; font-size:12.5px; } .role-switch button{ border:none; background:none; padding:6px 10px; border-radius:7px; cursor:pointer; color:var(--slate); font-weight:600; font-family:var(--font-body); } .role-switch button.active{background:var(--paper); color:var(--visa); box-shadow:var(--shadow-card);} .icon-btn{ width:38px; height:38px; border-radius:10px; border:none; background:var(--sky); display:flex; align-items:center; justify-content:center; color:var(--ink-soft); cursor:pointer; position:relative; transition:background .15s, transform .1s ease; } .icon-btn:hover{background:var(--sky-deep);} .icon-btn:active{transform:scale(.92);} .icon-btn svg{width:17px; height:17px;} .badge-count{ position:absolute; top:-4px; right:-4px; min-width:17px; height:17px; border-radius:9px; background:var(--stamp); color:white; font-size:10px; font-weight:700; display:flex; align-items:center; justify-content:center; padding:0 4px; border:2px solid var(--paper); font-family:var(--font-body); } /* An unanswered question pulses until it's dealt with — a static count reads the same as the ordinary "you have new tasks" badge and gets tuned out. */ .badge-count--ask{animation:badge-pulse 1.6s ease-in-out infinite;} /* Deploy notice. Deliberately a dismissible strip and not a blocking overlay: shipping a fix must not stop 55 people mid-sentence, so the tab just offers the reload. */ .update-bar{ position:fixed; left:50%; transform:translateX(-50%); bottom:18px; z-index:80; display:flex; align-items:center; gap:12px; padding:10px 12px 10px 16px; background:var(--paper); border:1px solid var(--sky-line); border-radius:14px; box-shadow:0 14px 38px rgba(20,30,60,.16); } .update-bar-text{font-size:13px; font-weight:600; color:var(--ink);} .update-bar-ic{display:flex; color:var(--visa);} .update-bar-ic svg{width:17px; height:17px;} @keyframes badge-pulse{0%,100%{transform:scale(1);}50%{transform:scale(1.22);}} .avatar{ width:41px; height:41px; border-radius:12px; background:var(--visa-soft); color:var(--visa-ink); display:flex; align-items:center; justify-content:center; font-weight:700; font-size:15px; font-family:var(--font-display); flex-shrink:0; } .avatar.sm{width:30px; height:30px; font-size:12px; border-radius:8px;} /* Presence dot. Sits on the avatar rather than beside the name so it reads at a glance in a list, the way it does in a messenger. The ring is the page background, not white — otherwise it draws a white halo in dark theme. */ .avatar-wrap{position:relative; display:inline-flex; flex-shrink:0;} /* Avatar crop viewport. The square is the visible area; everything outside is dimmed so it is obvious what will be kept. */ .crop-stage{ position:relative; overflow:hidden; border-radius:16px; background:var(--sky-deep); cursor:grab; touch-action:none; user-select:none; flex-shrink:0; } .crop-stage:active{cursor:grabbing;} .crop-stage img{position:absolute; left:0; top:0; max-width:none; pointer-events:none; display:block;} .crop-mask{ position:absolute; inset:0; pointer-events:none; border-radius:16px; box-shadow:inset 0 0 0 2px rgba(255,255,255,.85), inset 0 0 0 3px rgba(11,22,38,.12); } .online-dot{ position:absolute; left:-2px; bottom:-2px; width:11px; height:11px; border-radius:99px; background:#22C55E; border:2px solid var(--paper); box-shadow:0 0 0 1px rgba(11,22,38,.06); } .avatar-wrap .avatar.sm + .online-dot{width:9px; height:9px; border-width:1.5px;} .avatar-wrap .avatar.lg + .online-dot{width:14px; height:14px;} .avatar.lg{width:64px; height:64px; font-size:21px; border-radius:16px;} .user-chip{display:flex; align-items:center; gap:10px; cursor:pointer; padding:4px 6px 4px 4px; border-radius:10px;} .user-chip:hover{background:var(--sky);} .user-chip .name{font-size:13px; font-weight:600; color:var(--ink);} .user-chip .role{font-size:11.5px; color:var(--slate);} .view{flex:1; overflow-y:auto; padding:28px 32px 60px;} /* ===== Page header ===== */ .page-head{margin-bottom:24px;} .page-head h1{font-size:24px; font-weight:700;} .page-head p{color:var(--slate); font-size:13.5px; margin-top:4px;} .eyebrow{ font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--visa); margin-bottom:6px; display:block; } /* ===== Cards / surfaces ===== */ .card{ background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg); box-shadow:var(--shadow-card); } .pad-lg{padding:24px;} .pad-md{padding:18px;} /* ===== Stat tiles ===== */ .stat-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-bottom:24px;} .stat-tile{ background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-lg); padding:18px 20px; display:flex; flex-direction:column; gap:10px; transition:border-color .15s, box-shadow .15s, transform .15s; } .stat-tile[style*="cursor:pointer"]:hover{border-color:var(--visa); box-shadow:var(--shadow-card); transform:translateY(-1px);} .stat-tile .top{display:flex; align-items:center; justify-content:space-between;} .stat-tile .icon{width:34px; height:34px; border-radius:10px; display:flex; align-items:center; justify-content:center;} .stat-tile .icon svg{width:17px; height:17px;} .stat-tile .num{font-family:var(--font-display); font-size:30px; font-weight:700; line-height:1;} .stat-tile .label{color:var(--slate); font-size:12.5px; font-weight:500;} .stat-tile .trend{font-size:11.5px; font-weight:600; padding:2px 7px; border-radius:6px;} /* ===== Stamp rail — signature component ===== */ .stamp-rail{display:flex; align-items:flex-start; overflow-x:auto; overflow-y:hidden; padding-bottom:2px;} .stamp-node{display:flex; flex-direction:column; align-items:center; position:relative; flex:1 1 0; min-width:72px;} .stamp-ring{ width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center; border:2px solid var(--sky-line); background:var(--paper); color:var(--slate-2); font-size:12px; font-weight:700; font-family:var(--font-mono); flex-shrink:0; z-index:2; transition:all .2s; } .stamp-node.done .stamp-ring{ border-color:var(--visa); background:var(--visa); color:white; box-shadow:0 0 0 3px var(--visa-soft); } .stamp-node.current .stamp-ring{ border:2.5px solid var(--stamp); background:var(--stamp-soft); color:var(--stamp); box-shadow:0 0 0 4px var(--stamp-soft); transform:rotate(-6deg); } .stamp-node .line{ position:absolute; top:17px; left:50%; width:100%; height:2px; background:var(--sky-line); z-index:1; } .stamp-node.done .line{background:var(--visa);} .stamp-node:last-child .line{display:none;} .stamp-label{margin-top:8px; font-size:10.5px; text-align:center; color:var(--slate); font-weight:600; white-space:nowrap; line-height:1.25; padding:0 2px;} .stamp-node.current .stamp-label{color:var(--stamp);} .stamp-node.done .stamp-label{color:var(--ink-soft);} /* compact inline stamp rail for headers */ .stamp-rail.compact .stamp-ring{width:24px; height:24px; font-size:10px;} .stamp-rail.compact .stamp-node{min-width:26px;} .stamp-rail.compact .stamp-node .line{top:11px;} .stamp-rail.compact .stamp-label{display:none;} /* ===== Buttons ===== */ .btn{ display:inline-flex; align-items:center; gap:7px; font-weight:600; font-size:13px; border-radius:10px; padding:9px 15px; cursor:pointer; border:1px solid transparent; font-family:var(--font-body); transition:all .12s; white-space:nowrap; } .btn:active:not(:disabled){transform:scale(.97);} .btn svg{width:15px; height:15px;} .btn-primary{background:var(--visa); color:white;} .btn-primary:hover{background:var(--visa-ink);} .btn-ghost{background:var(--sky); color:var(--ink-soft);} .btn-ghost:hover{background:var(--sky-deep);} .btn-outline{background:var(--paper); color:var(--ink-soft); border-color:var(--sky-line);} .btn-outline:hover{border-color:var(--slate-2);} .btn-danger{background:var(--stamp-soft); color:var(--stamp);} .btn-danger:hover{filter:brightness(.93);} /* A secondary action that still reads as an action: the tinted fill alone was pale enough next to a primary button to look disabled, so it keeps a faint border of its own colour. */ .btn-soft{background:var(--visa-soft); color:var(--visa); border-color:color-mix(in srgb, var(--visa) 22%, transparent);} .btn-soft:hover{filter:brightness(.96);} .btn-sm{padding:6px 11px; font-size:12px; border-radius:8px;} .btn:disabled{opacity:.45; cursor:not-allowed;} /* ===== Callouts — short inline notes that need to read as a note, not as body text ===== */ .callout{ font-size:12px; line-height:1.5; padding:9px 12px; border-radius:10px; border:1px solid transparent; color:var(--ink-soft); background:var(--sky); } .callout-amber{background:var(--amber-soft); border-color:var(--amber); color:var(--amber);} .callout-visa{background:var(--visa-soft); border-color:transparent; color:var(--visa-ink);} .callout-stamp{background:var(--stamp-soft); border-color:transparent; color:var(--stamp);} .callout-good{background:var(--good-soft); border-color:transparent; color:var(--good);} /* ===== Badges / pills ===== */ .pill{display:inline-flex; align-items:center; gap:5px; font-size:11px; font-weight:700; padding:3px 9px; border-radius:99px; letter-spacing:.02em; white-space:nowrap;} .pill svg{width:11px; height:11px; flex-shrink:0;} .pill-visa{background:var(--visa-soft); color:var(--visa-ink);} .pill-good{background:var(--good-soft); color:var(--good);} .pill-amber{background:var(--amber-soft); color:var(--amber);} .pill-stamp{background:var(--stamp-soft); color:var(--stamp);} .pill-slate{background:var(--sky); color:var(--slate);} .pill-test{background:transparent; color:var(--slate-2); border:1px solid var(--sky-line); font-size:9px; font-weight:600; padding:1px 6px;} /* ===== Kanban ===== */ .kanban-wrap{position:relative;} /* macOS hides scrollbars until you scroll, and a plain mouse wheel doesn't scroll sideways — so the board needs a visible track and buttons, or the right-hand stages are unreachable. */ .kanban{display:flex; gap:16px; overflow-x:auto; padding-bottom:10px; align-items:flex-start; scroll-behavior:smooth;} .kanban::-webkit-scrollbar{height:10px;} .kanban::-webkit-scrollbar-track{background:var(--sky); border-radius:6px;} .kanban::-webkit-scrollbar-thumb{background:var(--sky-line); border-radius:6px;} .kanban::-webkit-scrollbar-thumb:hover{background:var(--slate);} .kanban-nav{ position:sticky; position:absolute; top:120px; z-index:20; width:34px; height:34px; border-radius:50%; border:1px solid var(--sky-line); background:var(--paper); box-shadow:var(--shadow-pop); cursor:pointer; display:flex; align-items:center; justify-content:center; color:var(--ink-soft); } .kanban-nav:hover{color:var(--visa); border-color:var(--visa);} .kanban-nav svg{width:16px; height:16px;} .kanban-nav--left{left:6px;} .kanban-nav--right{right:6px;} .kanban-col{ width:272px; flex-shrink:0; background:var(--sky); border-radius:var(--radius-lg); padding:12px; border:1px solid var(--sky-line); } .kanban-col-head{padding:6px 6px 12px; display:flex; align-items:center; gap:10px;} .kanban-col-head .stamp-ring{width:28px; height:28px; font-size:11px;} .kanban-col-title{font-size:12.5px; font-weight:700; color:var(--ink-soft); flex:1; line-height:1.25;} .kanban-col-count{font-family:var(--font-mono); font-size:11px; color:var(--slate); background:var(--paper); border-radius:6px; padding:2px 6px; border:1px solid var(--sky-line);} .kanban-list{min-height:40px; display:flex; flex-direction:column; gap:10px;} .kanban-card{ background:var(--paper); border:1px solid var(--sky-line); border-radius:var(--radius-md); padding:13px 14px; cursor:grab; box-shadow:var(--shadow-card); transition:box-shadow .15s, transform .15s; } .kanban-card:hover{box-shadow:var(--shadow-pop); transform:translateY(-1px);} .kanban-card.sortable-ghost{opacity:.35;} .kanban-card.sortable-drag{box-shadow:var(--shadow-pop); cursor:grabbing;} .kanban-card-top{display:flex; align-items:center; gap:8px; margin-bottom:9px;} .kanban-card-name{font-weight:600; font-size:13px; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;} .kanban-card-meta{display:flex; align-items:center; justify-content:space-between; margin-top:10px;} .kanban-card-assignees{display:flex;} .kanban-card-assignees .avatar{margin-left:-6px; border:2px solid var(--paper); box-shadow:0 0 0 1px rgba(11,22,38,.06);} .kanban-card-assignees .avatar:first-child{margin-left:0;} /* ===== Tabs ===== */ .tabbar{display:flex; gap:4px; border-bottom:1px solid var(--sky-line); margin-bottom:22px; overflow-x:auto;} .tab{ /* Inactive tabs used to be the same washed-out grey as disabled text, so «Огляд», «Доказова база» and the rest read as unavailable rather than clickable. */ padding:11px 4px; margin-right:13px; font-size:12.5px; font-weight:600; color:var(--ink); cursor:pointer; border:none; border-bottom:2.5px solid transparent; white-space:nowrap; display:flex; align-items:center; gap:5px; transition:color .15s ease, border-color .15s ease; /* .tab is used on both
and