/* Atrium — global styles + utilities */
html.font-he, html.font-he body { font-family: 'Heebo', 'Plus Jakarta Sans', system-ui, sans-serif; }
html { scrollbar-color: #cbd5e1 transparent; }
html.dark { scrollbar-color: #3a4250 transparent; }
body { font-feature-settings: "cv11" 1, "ss01" 1; }
::selection { background: #D7E3F0; color: #1E2129; }
html.dark ::selection { background: #1F3147; color: #E6EAF2; }
/* ── Soft backdrop gradient behind the floating pill ────────────────── */
.page-bg { position: relative; }
.page-bg::before {
content: '';
position: fixed; inset: 0 0 auto 0; height: 280px;
background:
radial-gradient(800px 240px at 20% 0%, rgba(74,123,175,0.10), transparent 70%),
radial-gradient(800px 240px at 90% 0%, rgba(201,169,98,0.06), transparent 70%);
pointer-events: none; z-index: 0;
}
html.dark .page-bg::before {
background:
radial-gradient(800px 240px at 20% 0%, rgba(74,123,175,0.16), transparent 70%),
radial-gradient(800px 240px at 90% 0%, rgba(201,169,98,0.10), transparent 70%);
}
/* Make sure body content is above the gradient */
body > * { position: relative; z-index: 1; }
#toasts, #modal { z-index: 100; }
/* ── Floating pill capsule ──────────────────────────────────────────── */
.capsule {
background: #FFFFFF;
border-radius: 9999px;
box-shadow:
0 1px 3px rgba(31,33,41,0.05),
0 12px 28px -8px rgba(31,33,41,0.08),
inset 0 1px 0 rgba(255,255,255,0.6);
transition: box-shadow .25s ease, background .25s ease;
}
html.dark .capsule {
background: #161B22;
box-shadow:
0 1px 3px rgba(0,0,0,0.4),
0 12px 28px -8px rgba(0,0,0,0.5),
inset 0 1px 0 rgba(255,255,255,0.04);
}
.capsule:hover {
box-shadow:
0 1px 3px rgba(31,33,41,0.06),
0 16px 36px -8px rgba(31,33,41,0.12),
inset 0 1px 0 rgba(255,255,255,0.6);
}
/* Soft scrollbar */
.scroll-thin::-webkit-scrollbar { width: 6px; height: 6px; }
.scroll-thin::-webkit-scrollbar-track { background: transparent; }
.scroll-thin::-webkit-scrollbar-thumb { background: #d6d3c9; border-radius: 3px; }
html.dark .scroll-thin::-webkit-scrollbar-thumb { background: #2a2f38; }
/* Display number style */
.display { font-weight: 800; letter-spacing: -0.035em; line-height: 1; }
.tnum { font-feature-settings: "tnum" 1; }
/* Chip primitive */
.chip {
display:inline-flex; align-items:center; gap:6px;
border-radius:9999px; padding:4px 10px;
font-size:12px; font-weight:500;
background:#F4F2EC; color:#1E2129;
white-space: nowrap;
}
html.dark .chip { background:#1C222B; color:#E6EAF2; }
.chip .dot { width:6px; height:6px; border-radius:9999px; background: currentColor; flex-shrink:0; }
.chip-ok { background: rgba(91,167,118,0.10); color:#5BA776; }
.chip-wait { background: rgba(217,162,76,0.12); color:#D9A24C; }
.chip-stop { background: rgba(210,106,106,0.12); color:#D26A6A; }
.chip-blue { background: rgba(74,123,175,0.12); color:#4A7BAF; }
html.dark .chip-blue { background: rgba(90,146,204,0.18); color:#5A92CC; }
.chip-gold { background: rgba(201,169,98,0.15); color:#8A7647; }
html.dark .chip-gold { background: rgba(201,169,98,0.18); color:#C9A962; }
/* Soft warm hero gradient */
.softblob {
background:
radial-gradient(900px 480px at 0% 0%, rgba(74,123,175,0.10), transparent 60%),
radial-gradient(700px 380px at 100% 0%, rgba(201,169,98,0.08), transparent 60%);
}
html.dark .softblob {
background:
radial-gradient(900px 480px at 0% 0%, rgba(90,146,204,0.10), transparent 60%),
radial-gradient(700px 380px at 100% 0%, rgba(201,169,98,0.05), transparent 60%);
}
/* Spark — KPI mini line */
.spark { stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
/* Brand L mark with gold underline */
.lmark {
position: relative;
display: inline-grid;
place-items: center;
background: #4A7BAF; color: #fff;
font-weight: 800;
border-radius: 10px;
}
.lmark::after {
content:''; position:absolute; left:5px; right:5px; bottom:-1px;
height: 1px; background:#C9A962;
}
/* Resizable splitter (InspAIre) */
.splitter {
flex: 0 0 4px;
cursor: col-resize;
background: transparent;
position: relative;
user-select: none;
z-index: 5;
}
.splitter::before { content:''; position:absolute; inset:0 -4px; }
.splitter:hover, .splitter.active { background: rgba(74,123,175,0.25); }
/* Toast */
.toast {
pointer-events: auto;
background: #1E2129; color: #fff;
border-radius: 16px;
padding: 12px 14px;
display: flex; align-items: center; gap: 10px;
box-shadow: 0 12px 28px rgba(31,33,41,0.18);
max-width: 520px;
}
/* Reveal animations */
@keyframes fadein { from{opacity:0; transform:translateY(6px)} to{opacity:1; transform:none} }
.fadein { animation: fadein .25s ease-out both; }
@keyframes slidedown { from{opacity:0; transform:translateY(-6px)} to{opacity:1; transform:none} }
.slidedown { animation: slidedown .18s ease-out both; }
/* Kanban column */
.kanban-col {
background: #FBFAF6; border:1px solid #EAE7DE; border-radius: 20px;
min-height: 360px; display:flex; flex-direction:column;
}
html.dark .kanban-col { background:#161B22; border-color:#2A2F38; }
.kanban-col[data-over="true"] { border-color:#4A7BAF; box-shadow: 0 0 0 4px rgba(74,123,175,0.15); }
.draggable { cursor: grab; }
.draggable:active { cursor: grabbing; }
/* RTL number alignment fix */
.ltr-content { direction: ltr; unicode-bidi: isolate; }
:focus { outline: none; }
:focus-visible { box-shadow: 0 0 0 4px rgba(74,123,175,0.22); border-radius: 8px; }
html[dir="rtl"] .rtl-flip { transform: scaleX(-1); }
@media (max-width: 640px) {
.hide-sm { display: none !important; }
}
/* Mobile fit: tighter topbar, smaller main padding */
@media (max-width: 720px) {
.capsule { height: 56px !important; padding: 0 8px !important; gap: 4px !important; }
.lmark { width: 28px !important; height: 28px !important; font-size: 13px !important; }
/* Tap targets — make sure mobile drawer items are comfortable */
aside [class*="rounded-xl"] { min-height: 44px; }
}