/* ======================================================================
CareerHollic — Brand Design (original M1 palette restored)
Vivid multi-color tokens matching the CareerHollic logo.
Friendly admin look — no SaaS minimalism, no monochrome jade.
====================================================================== */
@layer reset, tokens, base, layout, components, utilities;
/* ─── SELF-HOSTED VARIABLE FONTS (latin) ──────────────────────────── */
@font-face {
font-family: 'Geist';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/geist-latin-variable.woff2') format('woff2-variations'),
url('../fonts/geist-latin-variable.woff2') format('woff2');
}
@font-face {
font-family: 'Geist Mono';
font-style: normal;
font-weight: 100 900;
font-display: swap;
src: url('../fonts/geist-mono-latin-variable.woff2') format('woff2-variations'),
url('../fonts/geist-mono-latin-variable.woff2') format('woff2');
}
/* ─── TOKENS ──────────────────────────────────────────────────────── */
@layer tokens {
:root {
/* Surfaces — cool, fresh, slightly blue-tinted (M1 original) */
--bg: #F7F9FC;
--bg-2: #EEF2F8;
--surface: #FFFFFF;
--surface-alt: #F4F7FB;
--surface-tint: #E8EEF6;
--surface-glass: #FFFFFF;
/* Ink — navy-leaning grays from the brand */
--ink: #16263A;
--ink-soft: #5A6B82;
--ink-muted: #94A3B8;
--ink-inverse: #FFFFFF;
/* Borders — soft cool gray */
--border: #E6ECF3;
--border-strong: #CFD8E3;
--border-thin: rgba(22, 38, 58, 0.06);
--border-focus: #1FA9E0;
/* Primary accent — CareerHollic brand blue */
--accent: #1FA9E0;
--accent-hover: #1A8FBF;
--accent-soft: #D6EFFA;
--accent-ink: #0E5A78;
--accent-glow: rgba(31, 169, 224, 0.22);
/* Status — readable, on-brand */
--success: #6BBE45;
--success-bg: #EEF8E6;
--warning: #F49A2B;
--warning-bg: #FFF3E2;
--danger: #B91E2E;
--danger-bg: #FDECEE;
--info: var(--accent);
--info-bg: var(--accent-soft);
/* Module accent tokens — vivid CareerHollic palette */
--c-dashboard: #1FA9E0; /* blue */
--c-employees: #18C2B8; /* teal */
--c-clients: #F49A2B; /* orange */
--c-openings: #E2117B; /* pink */
--c-dar: #F4C518; /* yellow */
--c-lineups: #6BBE45; /* green */
--c-reports: #7C3AED; /* violet */
--c-masters: #5A6B82; /* slate */
--c-users: #B91E2E; /* red */
/* Logo brand tokens — the source-of-truth palette */
--brand-blue: #1FA9E0;
--brand-blue-d: #1A8FBF;
--brand-teal: #18C2B8;
--brand-orange: #F49A2B;
--brand-pink: #E2117B;
--brand-yellow: #F4C518;
--brand-amber: #F49A2B;
--brand-green: #6BBE45;
--brand-red: #B91E2E;
--brand-violet: #7C3AED;
--brand-slate: #5A6B82;
/* Sidebar — white surface, navy text (M1 friendly admin) */
--side-bg: #FFFFFF;
--side-text: #5A6B82;
--side-muted: #94A3B8;
/* Spacing scale (4px base) */
--s-1: 4px; --s-2: 8px; --s-3: 12px; --s-4: 16px;
--s-5: 20px; --s-6: 24px; --s-7: 32px; --s-8: 40px;
--s-9: 48px; --s-10: 64px; --s-11: 80px; --s-12: 96px;
/* Radii — soft & friendly (M1 originals) */
--r-sm: 6px;
--r-md: 8px;
--r-lg: 10px;
--r-xl: 14px;
--r-pill: 999px;
/* Typography */
--font-display: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-body: 'Geist', ui-sans-serif, system-ui, -apple-system, sans-serif;
--font-mono: 'Geist Mono', ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace;
--t-xs: 0.75rem;
--t-sm: 0.8125rem;
--t-base: 0.9375rem;
--t-lg: 1.0625rem;
--t-xl: 1.25rem;
--t-2xl: 1.5rem;
--t-3xl: 1.875rem;
--t-4xl: 2.25rem;
/* Shadows — visible but soft, M1 navy-tinted */
--shadow-xs: 0 1px 2px rgba(22, 38, 58, 0.06);
--shadow-sm: 0 1px 2px rgba(22, 38, 58, 0.08);
--shadow-md: 0 4px 14px rgba(22, 38, 58, 0.10);
--shadow-lg: 0 16px 40px rgba(22, 38, 58, 0.14);
--shadow-lift: 0 8px 24px -6px rgba(22, 38, 58, 0.18);
--shadow-side: 1px 0 0 var(--border);
--shadow-glow: 0 0 0 3px var(--accent-glow);
/* Motion — small, fast, intentional. No bounce. */
--ease: cubic-bezier(.4, 0, .2, 1);
--ease-out: cubic-bezier(0, 0, .2, 1);
--duration: 140ms;
--duration-slow: 220ms;
/* Layout */
--side-w: 248px;
--side-w-collapsed: 72px;
--topbar-h: 64px;
--content-max: 1320px;
color-scheme: light;
}
/* ━━━ COLLAPSED SIDEBAR ━━━ icon-only rail */
[data-sidebar="collapsed"] {
--side-w: var(--side-w-collapsed);
}
/* ━━━ DARK THEME ━━━ true dark, not navy */
[data-theme="dark"] {
--bg: #0A0A0A;
--bg-2: #111111;
--surface: #141414;
--surface-alt: #1C1C1B;
--surface-tint: #232322;
--surface-glass: #141414;
--ink: #FAFAF9;
--ink-soft: #D6D3D1;
--ink-muted: #78716C;
--ink-inverse: #0A0A0A;
--border: rgba(255, 255, 255, 0.08);
--border-strong: rgba(255, 255, 255, 0.14);
--border-thin: rgba(255, 255, 255, 0.04);
--accent: #38BDF8;
--accent-hover: #0EA5E9;
--accent-soft: rgba(56, 189, 248, 0.14);
--accent-ink: #BAE6FD;
--accent-glow: rgba(56, 189, 248, 0.22);
--success: #4ADE80;
--success-bg: rgba(74, 222, 128, 0.10);
--warning: #FBBF24;
--warning-bg: rgba(251, 191, 36, 0.10);
--danger: #F87171;
--danger-bg: rgba(248, 113, 113, 0.10);
--side-bg: #0F0F0F;
--side-text: #D6D3D1;
--side-muted: #78716C;
--shadow-xs: 0 1px 0 rgba(0, 0, 0, 0.4);
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.5);
--shadow-md: 0 8px 24px rgba(0, 0, 0, 0.5);
--shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.6);
--shadow-lift: 0 8px 24px rgba(0, 0, 0, 0.45);
color-scheme: dark;
}
}
/* ─── RESET ───────────────────────────────────────────────────────── */
@layer reset {
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; tab-size: 4; }
body {
font-family: var(--font-body);
font-size: var(--t-base);
line-height: 1.5;
color: var(--ink);
background: var(--bg);
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
font-feature-settings: 'cv11', 'ss01', 'ss03';
min-height: 100vh;
}
img, svg, video { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input, select, textarea { font: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; }
table { border-collapse: separate; border-spacing: 0; width: 100%; }
:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--r-sm);
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
}
}
}
/* ─── BASE TYPOGRAPHY ─────────────────────────────────────────────── */
@layer base {
h1, h2, h3, h4 {
font-family: var(--font-display);
color: var(--ink);
line-height: 1.2;
letter-spacing: -0.018em;
}
h1 { font-size: 1.875rem; font-weight: 600; letter-spacing: -0.032em; line-height: 1.12; }
h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.026em; }
h3 { font-size: 1.0625rem; font-weight: 600; letter-spacing: -0.016em; }
h4 { font-size: .9375rem; font-weight: 600; letter-spacing: -0.012em; }
p { color: var(--ink-soft); }
small, .text-xs { font-size: var(--t-xs); }
strong { font-weight: 600; color: var(--ink); }
code, kbd { font-family: var(--font-mono); font-size: .92em; }
kbd {
padding: 1px 6px;
border: 1px solid var(--border-strong);
border-radius: var(--r-sm);
background: var(--surface);
font-size: .72rem;
color: var(--ink-muted);
box-shadow: inset 0 -1px 0 var(--border-strong);
}
::selection { background: var(--accent-glow); color: var(--ink); }
}
/* ─── LAYOUT (app shell — 64px icon rail + 56px topbar) ──────────── */
@layer layout {
.app-shell {
display: grid;
grid-template-columns: var(--side-w) 1fr;
grid-template-rows: var(--topbar-h) 1fr;
grid-template-areas:
"sidebar topbar"
"sidebar content";
min-height: 100vh;
background: var(--bg);
transition: grid-template-columns var(--duration-slow) var(--ease);
}
.sidebar { transition: width var(--duration-slow) var(--ease); }
.sidebar { grid-area: sidebar; }
.topbar { grid-area: topbar; }
.content { grid-area: content; }
.content {
padding: var(--s-7) var(--s-8) var(--s-10);
overflow-x: auto;
}
.content > * + * { margin-top: var(--s-6); }
.content__inner { max-width: var(--content-max); margin: 0 auto; }
/* Auth — fixed viewport, no scroll */
.auth-shell {
height: 100dvh;
min-height: 100dvh;
overflow: hidden;
display: grid;
place-items: center;
padding: var(--s-5);
background: var(--bg);
position: relative;
}
.auth-card { position: relative; z-index: 1; }
@media (max-width: 900px) {
.app-shell {
grid-template-columns: 1fr;
grid-template-areas: "topbar" "content";
}
.sidebar {
position: fixed; inset: 0 auto 0 0; width: 240px;
transform: translateX(-100%);
transition: transform var(--duration) var(--ease);
z-index: 60;
box-shadow: var(--shadow-lg);
}
.sidebar.is-open { transform: translateX(0); }
.sidebar-scrim {
position: fixed; inset: 0; background: rgba(0, 0, 0, .4);
opacity: 0; pointer-events: none;
transition: opacity var(--duration) var(--ease);
z-index: 55;
}
.sidebar-scrim.is-open { opacity: 1; pointer-events: auto; }
.content { padding: var(--s-5) var(--s-4) var(--s-7); }
}
}
/* ─── COMPONENTS ──────────────────────────────────────────────────── */
@layer components {
/* ━━━ SIDEBAR — labeled, friendly, conventional admin ━━━ */
.sidebar {
background: var(--side-bg);
color: var(--side-text);
display: flex; flex-direction: column;
border-right: 1px solid var(--border);
position: sticky;
top: 0;
height: 100vh;
height: 100dvh;
align-self: start;
z-index: 20;
}
.sidebar__brand {
height: var(--topbar-h);
padding: 0 var(--s-5);
display: flex; align-items: center; gap: var(--s-3);
border-bottom: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar__brand img {
height: 36px; width: auto;
object-fit: contain;
}
.sidebar__brand-mark {
flex-shrink: 0;
width: 36px; height: 36px;
}
.sidebar__brand-text {
display: flex; flex-direction: column;
line-height: 1.1;
min-width: 0;
}
.sidebar__brand-text strong {
font-family: var(--font-display);
font-size: 1rem;
font-weight: 700;
color: var(--brand-blue);
letter-spacing: -0.01em;
}
.sidebar__brand-text small {
font-size: 0.6875rem;
color: var(--ink-muted);
font-weight: 500;
margin-top: 2px;
letter-spacing: 0.02em;
}
.sidebar__nav {
flex: 1; overflow-y: auto; overflow-x: hidden;
padding: var(--s-4) var(--s-3);
display: flex; flex-direction: column; gap: var(--s-5);
/* Hide scrollbar — still scrollable */
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE / legacy Edge */
}
.sidebar__nav::-webkit-scrollbar { width: 0; height: 0; display: none; } /* Chrome / Safari / Edge */
.sidebar__group {
display: flex; flex-direction: column; gap: 2px;
}
.sidebar__group-label {
font-size: 11px; font-weight: 600;
text-transform: uppercase;
letter-spacing: .08em;
color: var(--ink-muted);
padding: var(--s-2) var(--s-3) var(--s-1);
}
.sidebar__item {
position: relative;
display: flex; align-items: center; gap: var(--s-3);
padding: 8px var(--s-3);
border-radius: var(--r-md);
color: var(--side-text);
font-size: var(--t-sm); font-weight: 500;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.sidebar__item .icon-pill {
width: 32px; height: 32px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--accent, var(--brand-blue)) 12%, transparent);
color: var(--accent, var(--brand-blue));
flex-shrink: 0;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.sidebar__item svg { width: 16px; height: 16px; }
.sidebar__item:hover {
background: var(--surface-alt);
color: var(--ink);
}
.sidebar__item:hover .icon-pill {
background: color-mix(in srgb, var(--accent, var(--brand-blue)) 18%, transparent);
}
.sidebar__item.is-active {
background: color-mix(in srgb, var(--accent, var(--brand-blue)) 10%, transparent);
color: var(--ink);
font-weight: 600;
}
.sidebar__item.is-active .icon-pill {
background: var(--accent, var(--brand-blue));
color: #fff;
box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--accent, var(--brand-blue)) 45%, transparent);
}
.sidebar__item.is-active::before {
content: '';
position: absolute; left: -8px; top: 8px; bottom: 8px; width: 3px;
background: var(--accent, var(--brand-blue));
border-radius: 0 3px 3px 0;
}
.sidebar__footer {
padding: var(--s-3);
border-top: 1px solid var(--border);
flex-shrink: 0;
}
.sidebar__logout-form { margin: 0; }
.sidebar__logout-btn {
width: 100%;
position: relative;
display: flex; align-items: center; gap: var(--s-3);
padding: 8px var(--s-3);
border-radius: var(--r-md);
color: var(--ink-soft);
font-size: var(--t-sm); font-weight: 500;
background: transparent;
border: 0;
cursor: pointer;
text-align: left;
font-family: inherit;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.sidebar__logout-btn .icon-pill {
width: 32px; height: 32px;
border-radius: var(--r-sm);
display: inline-flex; align-items: center; justify-content: center;
background: color-mix(in srgb, var(--danger) 12%, transparent);
color: var(--danger);
flex-shrink: 0;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.sidebar__logout-btn svg { width: 16px; height: 16px; }
.sidebar__logout-btn:hover {
background: var(--danger-bg);
color: var(--danger);
}
.sidebar__logout-btn:hover .icon-pill {
background: var(--danger);
color: #fff;
box-shadow: 0 2px 8px -1px color-mix(in srgb, var(--danger) 45%, transparent);
}
@media (max-width: 900px) {
.sidebar { box-shadow: var(--shadow-lg); }
}
/* ━━━ COLLAPSED-STATE RULES (desktop only) ━━━ */
@media (min-width: 901px) {
[data-sidebar="collapsed"] .sidebar__brand {
padding: 0;
justify-content: center;
}
[data-sidebar="collapsed"] .sidebar__brand-text { display: none; }
[data-sidebar="collapsed"] .sidebar__nav {
padding: var(--s-4) var(--s-2);
align-items: stretch;
}
[data-sidebar="collapsed"] .sidebar__group-label {
height: 1px; padding: 0; margin: var(--s-2) var(--s-3);
background: var(--border);
overflow: hidden; text-indent: -9999px;
letter-spacing: 0;
}
[data-sidebar="collapsed"] .sidebar__item {
justify-content: center;
padding: 8px;
gap: 0;
}
/* Hide every direct child label (text after the icon-pill) */
[data-sidebar="collapsed"] .sidebar__item > span:not(.icon-pill) {
display: none;
}
[data-sidebar="collapsed"] .sidebar__item.is-active::before {
left: -4px;
}
[data-sidebar="collapsed"] .sidebar__footer {
padding: var(--s-3) var(--s-2);
}
[data-sidebar="collapsed"] .sidebar__logout-btn {
justify-content: center;
padding: 8px;
gap: 0;
}
[data-sidebar="collapsed"] .sidebar__logout-btn > span:not(.icon-pill) {
display: none;
}
[data-sidebar="collapsed"] .sidebar__logout-btn::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--ink);
color: var(--ink-inverse);
font-size: var(--t-xs);
font-weight: 500;
padding: 6px 10px;
border-radius: var(--r-sm);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--duration) var(--ease);
box-shadow: var(--shadow-md);
z-index: 50;
}
[data-sidebar="collapsed"] .sidebar__logout-btn:hover::after {
opacity: 1;
}
/* Tooltip on hover — show the item's text via accessible-name fallback */
[data-sidebar="collapsed"] .sidebar__item {
position: relative;
}
[data-sidebar="collapsed"] .sidebar__item::after {
content: attr(data-label);
position: absolute;
left: calc(100% + 12px);
top: 50%;
transform: translateY(-50%);
background: var(--ink);
color: var(--ink-inverse);
font-size: var(--t-xs);
font-weight: 500;
padding: 6px 10px;
border-radius: var(--r-sm);
white-space: nowrap;
pointer-events: none;
opacity: 0;
transition: opacity var(--duration) var(--ease);
box-shadow: var(--shadow-md);
z-index: 50;
}
[data-sidebar="collapsed"] .sidebar__item:hover::after {
opacity: 1;
}
[data-sidebar="collapsed"] .sidebar__item[data-label=""]::after,
[data-sidebar="collapsed"] .sidebar__item:not([data-label])::after {
display: none;
}
}
/* ━━━ TOPBAR ━━━ calm but present */
.topbar {
background: var(--surface);
border-bottom: 1px solid var(--border);
display: flex; align-items: center;
padding: 0 var(--s-7);
gap: var(--s-4);
position: sticky; top: 0; z-index: 30;
}
.topbar__menu-btn, .topbar__back-btn, .topbar__theme-btn, .topbar__collapse-btn, .topbar__icon-btn {
display: inline-flex;
width: 36px; height: 36px;
border-radius: var(--r-md);
align-items: center; justify-content: center;
color: var(--ink-soft);
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.topbar__menu-btn { display: none; }
.topbar__collapse-btn { display: inline-flex; }
.topbar__menu-btn:hover, .topbar__back-btn:hover, .topbar__theme-btn:hover, .topbar__collapse-btn:hover, .topbar__icon-btn:hover {
background: var(--surface-alt);
color: var(--ink);
}
.topbar__icon-btn.is-active {
background: color-mix(in srgb, var(--c-masters) 14%, transparent);
color: var(--c-masters);
}
.topbar__collapse-btn[aria-pressed="true"] {
background: color-mix(in srgb, var(--accent) 12%, transparent);
color: var(--accent);
}
@media (max-width: 900px) {
.topbar__collapse-btn { display: none; }
}
.topbar__title { flex: 1; display: flex; align-items: baseline; gap: var(--s-3); min-width: 0; }
.topbar__title h1 {
font-size: var(--t-base); font-weight: 600;
letter-spacing: -0.014em;
white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.topbar__title .crumb { color: var(--ink-muted); font-size: var(--t-sm); white-space: nowrap; }
.topbar__actions { display: flex; align-items: center; gap: var(--s-2); }
.topbar__search {
position: relative;
width: 340px;
}
.topbar__search input {
width: 100%;
height: 36px;
padding: 0 60px 0 32px;
border-radius: var(--r-md);
background: var(--surface-alt);
border: 1px solid transparent;
font-size: var(--t-sm);
transition: border-color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.topbar__search input:focus {
border-color: var(--border-strong);
background: var(--surface);
outline: none;
}
.topbar__search > svg {
position: absolute; left: 10px; top: 50%; transform: translateY(-50%);
width: 14px; height: 14px; color: var(--ink-muted);
pointer-events: none;
}
.topbar__search kbd {
position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
font-size: 10px; padding: 1px 5px;
}
@media (max-width: 1100px) { .topbar__search { width: 200px; } .topbar__search kbd { display: none; } .topbar__search input { padding-right: var(--s-3); } }
@media (max-width: 900px) {
.topbar { padding: 0 var(--s-4); }
.topbar__menu-btn { display: inline-flex; }
.topbar__search { display: none; }
}
/* ━━━ THEME TOGGLE — premium crossfade + glow + active state ━━━ */
.topbar__theme-btn {
position: relative;
overflow: hidden;
/* Persistent ambient tint reflecting the CURRENT theme */
background: linear-gradient(135deg,
color-mix(in srgb, #F4C518 10%, transparent),
color-mix(in srgb, #F49A2B 6%, transparent));
color: #B45309;
transition: background var(--duration) var(--ease),
color var(--duration) var(--ease),
transform var(--duration) var(--ease),
box-shadow var(--duration-slow) var(--ease);
}
[data-theme="dark"] .topbar__theme-btn {
background: linear-gradient(135deg,
color-mix(in srgb, #6366F1 16%, transparent),
color-mix(in srgb, #38BDF8 12%, transparent));
color: #BAE6FD;
}
/* Subtle radial highlight that grows on hover */
.topbar__theme-btn::before {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(circle at center,
color-mix(in srgb, var(--accent) 22%, transparent) 0%,
transparent 70%);
opacity: 0;
transform: scale(0.6);
transition: opacity var(--duration-slow) var(--ease),
transform var(--duration-slow) var(--ease);
pointer-events: none;
}
/* Click ripple — bursts outward from center on press */
.topbar__theme-btn::after {
content: '';
position: absolute; inset: 0;
border-radius: inherit;
background: radial-gradient(circle at center,
color-mix(in srgb, var(--accent) 55%, transparent) 0%,
transparent 55%);
opacity: 0;
transform: scale(0);
pointer-events: none;
transition: opacity 0ms linear, transform 0ms linear;
}
.topbar__theme-btn:active::after {
opacity: 0.8;
transform: scale(1.6);
transition: opacity 90ms var(--ease), transform 280ms var(--ease-out);
}
.topbar__theme-btn:hover {
color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 14px -4px var(--accent-glow);
}
.topbar__theme-btn:hover::before {
opacity: 1;
transform: scale(1);
}
.topbar__theme-btn:active {
transform: translateY(0) scale(0.94);
transition-duration: 80ms;
}
.topbar__theme-btn:focus-visible {
outline: none;
box-shadow: 0 0 0 3px var(--accent-glow);
}
/* Toggle pulse — JS adds .is-toggling for ~600ms when click flips theme */
.topbar__theme-btn.is-toggling {
animation: theme-toggle-pulse 600ms var(--ease-out);
}
@keyframes theme-toggle-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 55%, transparent); }
60% { box-shadow: 0 0 0 12px color-mix(in srgb, var(--accent) 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.topbar__theme-btn,
.topbar__theme-btn::before,
.topbar__theme-btn::after,
.theme-toggle__icon {
transition: none !important;
animation: none !important;
}
}
.theme-toggle__icons {
position: relative;
display: inline-flex;
width: 18px; height: 18px;
}
.theme-toggle__icon {
position: absolute; inset: 0;
display: inline-flex; align-items: center; justify-content: center;
transition:
opacity 280ms var(--ease),
transform 360ms cubic-bezier(.6, -0.05, .2, 1.4);
transform-origin: center;
}
.theme-toggle__icon svg {
width: 18px; height: 18px;
filter: drop-shadow(0 0 0 transparent);
transition: filter var(--duration-slow) var(--ease);
}
/* LIGHT mode shows MOON (offer to switch to dark); SUN is hidden */
.theme-toggle__icon--sun {
opacity: 0;
transform: rotate(-90deg) scale(0.5);
}
.theme-toggle__icon--moon {
opacity: 1;
transform: rotate(0) scale(1);
}
/* DARK mode flips them */
[data-theme="dark"] .theme-toggle__icon--sun {
opacity: 1;
transform: rotate(0) scale(1);
}
[data-theme="dark"] .theme-toggle__icon--moon {
opacity: 0;
transform: rotate(90deg) scale(0.5);
}
/* Soft glow on the visible icon when hovering */
.topbar__theme-btn:hover .theme-toggle__icon[style], /* no-op selector to bump specificity */
.topbar__theme-btn:hover .theme-toggle__icon--moon svg,
[data-theme="dark"] .topbar__theme-btn:hover .theme-toggle__icon--sun svg {
filter: drop-shadow(0 0 6px var(--accent-glow));
}
/* Legacy: the user-menu still uses display:none/block swap (no animation needed inside a menu) */
.user-menu__item [data-icon-light] { display: none; }
[data-theme="dark"] .user-menu__item [data-icon-light] { display: inline-block; }
[data-theme="dark"] .user-menu__item [data-icon-dark] { display: none; }
/* User menu */
.user-menu { position: relative; }
.user-menu__trigger {
display: flex; align-items: center; gap: var(--s-2);
padding: 3px 12px 3px 3px;
border-radius: var(--r-pill);
border: 1px solid var(--border);
background: var(--surface);
transition: background var(--duration) var(--ease), border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.user-menu__trigger:hover {
background: var(--surface-alt);
border-color: var(--border-strong);
box-shadow: var(--shadow-xs);
}
.user-menu__photo-wrap {
position: relative;
flex-shrink: 0;
width: 30px;
height: 30px;
}
.user-menu__photo {
width: 30px;
height: 30px;
border-radius: 50%;
object-fit: cover;
border: 2px solid var(--surface);
box-shadow: 0 0 0 1px var(--border);
}
.user-menu__initial {
width: 30px;
height: 30px;
border-radius: 50%;
display: grid;
place-items: center;
font-size: var(--t-xs);
font-weight: 700;
color: var(--c-employees);
background: color-mix(in srgb, var(--c-employees) 12%, transparent);
border: 2px solid var(--surface);
box-shadow: 0 0 0 1px var(--border);
}
.user-menu__dot {
position: absolute;
bottom: -1px;
right: -1px;
width: 10px;
height: 10px;
border-radius: 50%;
background: var(--success);
border: 2px solid var(--surface);
box-shadow: 0 0 4px color-mix(in srgb, var(--success) 40%, transparent);
}
.user-menu__name {
font-weight: 600;
font-size: var(--t-sm);
color: var(--ink);
max-width: 120px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
@media (max-width: 900px) {
.user-menu__trigger { padding: 3px; border-color: transparent; background: transparent; }
.user-menu__name { display: none; }
}
.user-menu__panel {
position: absolute; right: 0; top: calc(100% + 8px);
min-width: 240px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
box-shadow: var(--shadow-md);
padding: var(--s-1);
z-index: 40;
}
.user-menu__panel hr { border: 0; height: 1px; background: var(--border); margin: var(--s-1) 0; }
.user-menu__head { padding: var(--s-3) var(--s-3) var(--s-2); }
.user-menu__head .name { font-weight: 600; color: var(--ink); font-size: var(--t-sm); }
.user-menu__head .email { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 2px; }
.user-menu__item {
display: flex; align-items: center; gap: var(--s-2);
padding: 6px var(--s-3);
border-radius: var(--r-sm);
font-size: var(--t-sm);
color: var(--ink);
transition: background var(--duration) var(--ease);
width: 100%; text-align: left;
}
.user-menu__item:hover { background: var(--surface-alt); }
.user-menu__item svg { width: 14px; height: 14px; color: var(--ink-muted); }
.user-menu__item.is-danger { color: var(--danger); }
.user-menu__item.is-danger svg { color: var(--danger); }
/* ━━━ AVATAR ━━━ */
.avatar {
width: 32px; height: 32px;
border-radius: var(--r-pill);
background: linear-gradient(135deg, var(--accent), var(--accent-hover));
color: #fff;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: var(--t-sm);
flex-shrink: 0;
letter-spacing: -0.01em;
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14);
}
.avatar.is-sm { width: 28px; height: 28px; font-size: var(--t-xs); }
.avatar.is-lg { width: 64px; height: 64px; font-size: var(--t-xl); }
.avatar img { width: 100%; height: 100%; border-radius: inherit; object-fit: cover; }
/* ━━━ PAGE HEADER ━━━ */
.page-head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s-5);
padding-bottom: var(--s-6);
border-bottom: 1px solid var(--border);
}
.page-head__title h1 {
font-size: 1.875rem; font-weight: 600;
letter-spacing: -0.032em;
color: var(--ink);
line-height: 1.12;
}
.page-head__subtitle {
color: var(--ink-muted);
margin-top: var(--s-2);
font-size: var(--t-sm);
}
.time-chip {
display: inline-flex; align-items: center; gap: 6px;
margin-top: var(--s-2);
padding: 4px 10px;
border-radius: var(--r-pill);
background: var(--surface-alt);
border: 1px solid var(--border);
color: var(--ink-soft);
font-size: var(--t-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: 0.01em;
line-height: 1;
}
.time-chip svg { color: var(--accent); }
/* ━━━ CARD ━━━ hairline + subtle depth */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
overflow: hidden;
box-shadow: var(--shadow-xs);
transition: box-shadow var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.card:hover { box-shadow: var(--shadow-sm); }
.card__head {
padding: var(--s-5) var(--s-6);
border-bottom: 1px solid var(--border);
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-4);
}
.card__head h3 { font-size: var(--t-base); font-weight: 600; letter-spacing: -0.014em; }
.card__body { padding: var(--s-6); }
.card__foot {
padding: var(--s-4) var(--s-6);
border-top: 1px solid var(--border);
background: var(--bg-2);
}
.card.is-quiet { background: var(--bg-2); box-shadow: none; }
/* ━━━ STAT CARD ━━━ number-first, with accent rail */
.stat-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: var(--s-5) var(--s-5) var(--s-5) var(--s-6);
display: flex; flex-direction: column; gap: var(--s-2);
position: relative;
box-shadow: var(--shadow-xs);
transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
overflow: hidden;
}
.stat-card::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--accent, var(--accent-strong, #0F766E));
}
.stat-card:hover {
box-shadow: var(--shadow-sm);
transform: translateY(-1px);
}
.stat-card__label {
font-size: var(--t-xs);
color: var(--ink-muted);
font-weight: 500;
text-transform: uppercase;
letter-spacing: .04em;
}
.stat-card__value {
font-size: 2.125rem; font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.034em;
line-height: 1.05;
margin-top: var(--s-1);
}
.stat-card__delta { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 2px; }
.stat-card__delta.is-up { color: var(--success); }
.stat-card__delta.is-down { color: var(--danger); }
/* ━━━ BUTTON ━━━ calm + present */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--s-2);
height: 38px;
padding: 0 var(--s-5);
font-weight: 500; font-size: var(--t-sm);
border-radius: var(--r-md);
transition: background var(--duration) var(--ease),
border-color var(--duration) var(--ease),
color var(--duration) var(--ease),
box-shadow var(--duration) var(--ease),
transform 80ms var(--ease);
border: 1px solid transparent;
white-space: nowrap;
user-select: none;
letter-spacing: -0.005em;
}
.btn svg { width: 15px; height: 15px; }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn--primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
box-shadow: 0 1px 0 rgba(255, 255, 255, .12) inset,
0 1px 2px rgba(15, 118, 110, .25),
0 2px 4px rgba(15, 118, 110, .12);
}
.btn--primary:hover {
background: var(--accent-hover); border-color: var(--accent-hover);
box-shadow: 0 1px 0 rgba(255, 255, 255, .14) inset,
0 4px 10px rgba(15, 118, 110, .28),
0 2px 4px rgba(15, 118, 110, .14);
}
.btn--cta {
background: linear-gradient(135deg, var(--_cta, var(--c-employees)), color-mix(in srgb, var(--_cta, var(--c-employees)) 82%, #000));
color: #fff;
border: none;
font-weight: 600;
font-size: var(--t-sm);
letter-spacing: 0.01em;
padding: 0 var(--s-6);
box-shadow:
0 1px 0 rgba(255,255,255,.15) inset,
0 2px 6px color-mix(in srgb, var(--_cta, var(--c-employees)) 30%, transparent);
transition: box-shadow var(--duration-slow) var(--ease),
transform var(--duration) var(--ease),
filter var(--duration) var(--ease);
}
.btn--cta:hover {
box-shadow:
0 1px 0 rgba(255,255,255,.18) inset,
0 6px 20px color-mix(in srgb, var(--_cta, var(--c-employees)) 35%, transparent),
0 2px 6px color-mix(in srgb, var(--_cta, var(--c-employees)) 20%, transparent);
transform: translateY(-1px);
filter: brightness(1.08);
}
.btn--cta:active {
transform: translateY(0);
filter: brightness(0.96);
box-shadow:
0 1px 0 rgba(255,255,255,.10) inset,
0 1px 3px color-mix(in srgb, var(--_cta, var(--c-employees)) 25%, transparent);
}
.btn--cta svg { filter: drop-shadow(0 1px 1px rgba(0,0,0,.15)); }
.btn--secondary {
background: var(--surface); color: var(--ink); border-color: var(--border-strong);
box-shadow: var(--shadow-xs);
}
.btn--secondary:hover { background: var(--surface-alt); border-color: var(--ink-muted); }
.btn--ghost { background: transparent; color: var(--ink-soft); }
.btn--ghost:hover { background: var(--surface-alt); color: var(--ink); }
.btn--danger {
background: var(--danger); color: #fff; border-color: var(--danger);
box-shadow: 0 1px 2px rgba(185, 28, 28, .22);
}
.btn--danger:hover { background: #991B1B; border-color: #991B1B; box-shadow: 0 4px 10px rgba(185, 28, 28, .28); }
.btn--icon { width: 36px; padding: 0; }
.btn--sm { height: 30px; padding: 0 var(--s-3); font-size: var(--t-xs); }
.btn--lg { height: 44px; padding: 0 var(--s-6); font-size: var(--t-base); }
/* ━━━ BADGE ━━━ subtle tag */
.badge {
display: inline-flex; align-items: center; gap: 6px;
padding: 3px 10px;
font-size: var(--t-xs); font-weight: 500;
border-radius: var(--r-sm);
background: var(--surface-alt); color: var(--ink-soft);
border: 1px solid var(--border);
line-height: 1.5;
letter-spacing: 0;
}
.badge::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.badge.is-success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.badge.is-warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.badge.is-danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
.badge.is-info { background: var(--info-bg); color: var(--accent-ink); border-color: color-mix(in srgb, var(--accent) 22%, transparent); }
.badge.is-muted { background: var(--surface-alt); color: var(--ink-muted); border-color: var(--border); }
.badge.is-plain::before { display: none; }
/* ━━━ FORM ━━━ */
.field { display: flex; flex-direction: column; gap: 6px; }
.field__label {
font-size: var(--t-sm); font-weight: 500;
color: var(--ink);
letter-spacing: -0.005em;
}
.field__label .req { color: var(--danger); margin-left: 2px; }
.field__hint { font-size: var(--t-xs); color: var(--ink-muted); }
.field__error {
font-size: var(--t-xs); color: var(--danger);
margin-top: 2px; display: flex; align-items: center; gap: 4px;
}
.form-errors {
display: flex;
gap: var(--s-4);
padding: var(--s-4) var(--s-5);
background: var(--danger-bg);
border: 1px solid color-mix(in srgb, var(--danger) 22%, transparent);
border-left: 3px solid var(--danger);
border-radius: var(--r-lg);
color: var(--danger);
font-size: var(--t-sm);
line-height: 1.5;
scroll-margin-top: var(--topbar-h);
}
.form-errors__icon {
flex-shrink: 0;
margin-top: 1px;
}
.form-errors__body strong {
display: block;
margin-bottom: var(--s-2);
font-size: var(--t-base);
color: var(--danger);
}
.form-errors__body ul {
margin: 0;
padding-left: var(--s-5);
}
.form-errors__body li {
margin-bottom: 2px;
}
.input, .select, .textarea {
width: 100%;
height: 40px;
padding: 8px var(--s-4);
background: var(--surface);
border: 1px solid var(--border-strong);
border-radius: var(--r-md);
font-size: var(--t-base);
color: var(--ink);
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.input::placeholder, .textarea::placeholder { color: var(--ink-muted); }
.input:focus, .select:focus, .textarea:focus {
outline: none;
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-glow);
}
.input.has-error, .select.has-error, .textarea.has-error { border-color: var(--danger); }
.input.has-error:focus { box-shadow: 0 0 0 3px color-mix(in srgb, var(--danger) 18%, transparent); }
.textarea { min-height: 84px; height: auto; resize: vertical; padding: var(--s-3); }
.select {
appearance: none;
background-image: url("data:image/svg+xml;utf8,");
background-repeat: no-repeat;
background-position: right 10px center;
padding-right: 32px;
cursor: pointer;
}
[data-theme="dark"] .select {
background-image: url("data:image/svg+xml;utf8,");
}
.field-grid {
display: grid; gap: var(--s-4);
grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
}
.field-grid.is-1 { grid-template-columns: minmax(0, 1fr); }
.field-grid.is-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.field-grid.is-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.field-grid.col-2 { grid-column: span 2; }
.field-grid.col-full { grid-column: 1 / -1; }
@media (max-width: 720px) { .field-grid.is-2, .field-grid.is-3 { grid-template-columns: 1fr; } }
.checkbox {
display: inline-flex; align-items: center; gap: var(--s-2);
cursor: pointer;
font-size: var(--t-sm);
color: var(--ink-soft);
}
.checkbox input { width: 16px; height: 16px; accent-color: var(--accent); cursor: pointer; }
.form-actions {
position: sticky; bottom: 0;
background: var(--surface);
border-top: 1px solid var(--border);
padding: var(--s-3) var(--s-5);
margin: var(--s-5) calc(var(--s-5) * -1) calc(var(--s-5) * -1);
display: flex; gap: var(--s-2); justify-content: flex-end;
}
.form-dock {
position: sticky;
bottom: 0;
z-index: 10;
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--s-3);
padding: var(--s-4) var(--s-6);
margin: 0;
background: color-mix(in srgb, var(--surface) 82%, transparent);
backdrop-filter: blur(12px) saturate(1.4);
-webkit-backdrop-filter: blur(12px) saturate(1.4);
border: 1px solid color-mix(in srgb, var(--border) 60%, transparent);
border-radius: var(--r-lg);
box-shadow:
0 -4px 16px rgba(22, 38, 58, .06),
0 -1px 3px rgba(22, 38, 58, .04),
0 4px 20px rgba(22, 38, 58, .10);
}
[data-theme="dark"] .form-dock {
background: color-mix(in srgb, var(--surface) 75%, transparent);
box-shadow:
0 -4px 16px rgba(0, 0, 0, .20),
0 4px 20px rgba(0, 0, 0, .25);
}
/* ━━━ EMPLOYEE PERSONAL CARD — premium dossier layout ━━━ */
.personal-hero {
display: flex;
gap: var(--s-7);
align-items: flex-start;
padding-bottom: var(--s-6);
border-bottom: 1px solid var(--border);
margin-bottom: var(--s-5);
}
.photo-zone {
position: relative;
flex-shrink: 0;
width: 148px;
height: 148px;
border-radius: var(--r-xl);
background:
radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-employees) 6%, transparent), transparent 70%),
var(--surface-alt);
border: 2px dashed var(--border-strong);
display: grid;
place-items: center;
cursor: pointer;
transition: border-color var(--duration-slow) var(--ease),
box-shadow var(--duration-slow) var(--ease),
background var(--duration-slow) var(--ease);
overflow: hidden;
}
.photo-zone:hover {
border-color: var(--c-employees);
box-shadow: 0 0 0 4px color-mix(in srgb, var(--c-employees) 12%, transparent),
0 8px 24px -8px color-mix(in srgb, var(--c-employees) 18%, transparent);
background:
radial-gradient(circle at 30% 30%, color-mix(in srgb, var(--c-employees) 10%, transparent), transparent 70%),
var(--surface-alt);
}
.photo-zone:hover .photo-zone__overlay { opacity: 1; }
.photo-zone__preview {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: calc(var(--r-xl) - 2px);
}
.photo-zone__placeholder {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--s-2);
color: var(--ink-muted);
transition: color var(--duration) var(--ease);
}
.photo-zone:hover .photo-zone__placeholder { color: var(--c-employees); }
.photo-zone__placeholder svg { opacity: 0.6; }
.photo-zone__placeholder span {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.photo-zone__overlay {
position: absolute;
inset: 0;
border-radius: calc(var(--r-xl) - 2px);
background: color-mix(in srgb, var(--ink) 50%, transparent);
display: grid;
place-items: center;
opacity: 0;
transition: opacity var(--duration-slow) var(--ease);
}
.photo-zone__overlay svg { color: #fff; filter: drop-shadow(0 2px 4px rgba(0,0,0,.3)); }
.photo-zone__input {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
opacity: 0;
cursor: pointer;
z-index: 2;
}
.photo-zone__hint {
position: absolute;
bottom: -22px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
font-size: 10px;
color: var(--ink-muted);
letter-spacing: 0.01em;
}
.hero-fields {
flex: 1;
display: flex;
flex-direction: column;
gap: var(--s-4);
min-width: 0;
}
.hero-fields__row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
}
.credential {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4);
background: var(--surface-alt);
border: 1px solid var(--border);
border-left: 3px solid var(--c-employees);
border-radius: var(--r-md);
}
.credential__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
line-height: 1;
}
.credential__input {
width: 100%;
height: 28px;
padding: 0;
background: transparent;
border: none;
font-family: var(--font-mono);
font-size: var(--t-base);
font-weight: 600;
color: var(--ink);
letter-spacing: 0.02em;
}
.credential__input { text-transform: uppercase; }
.credential__input:focus { outline: none; }
.credential__input::placeholder { color: var(--ink-muted); font-weight: 400; }
.card-accent-head {
display: flex;
align-items: center;
gap: var(--s-3);
}
.card-accent-head::before {
content: '';
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--c-employees);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--c-employees) 16%, transparent);
flex-shrink: 0;
}
@media (max-width: 720px) {
.personal-hero { flex-direction: column; align-items: center; text-align: center; }
.photo-zone { width: 120px; height: 120px; }
.hero-fields__row { grid-template-columns: 1fr; }
}
/* ━━━ EMPLOYEE PROFILE SHOW — executive dossier ━━━ */
.profile-hero {
display: flex;
gap: var(--s-7);
align-items: center;
padding: var(--s-6) var(--s-7);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--c-employees) 4%, var(--surface)),
var(--surface));
border: 1px solid var(--border);
border-left: 4px solid var(--c-employees);
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
}
.profile-hero__photo {
flex-shrink: 0;
width: 120px;
height: 120px;
border-radius: var(--r-xl);
object-fit: cover;
border: 3px solid var(--surface);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--c-employees) 20%, transparent),
var(--shadow-md);
}
.profile-hero__avatar {
flex-shrink: 0;
width: 120px;
height: 120px;
border-radius: var(--r-xl);
display: grid;
place-items: center;
font-size: var(--t-3xl);
font-weight: 700;
color: var(--c-employees);
background: color-mix(in srgb, var(--c-employees) 10%, transparent);
border: 3px solid var(--surface);
box-shadow:
0 0 0 1px color-mix(in srgb, var(--c-employees) 20%, transparent),
var(--shadow-md);
}
.profile-hero__info {
flex: 1;
min-width: 0;
}
.profile-hero__name {
font-size: var(--t-2xl);
font-weight: 700;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.2;
margin-bottom: var(--s-1);
}
.profile-hero__designation {
font-size: var(--t-base);
color: var(--ink-soft);
margin-bottom: var(--s-3);
}
.profile-hero__chips {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
align-items: center;
}
.chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 12px;
border-radius: var(--r-pill);
font-size: var(--t-xs);
font-weight: 600;
border: 1px solid var(--border);
background: var(--surface-alt);
color: var(--ink-soft);
line-height: 1;
}
.chip--id {
font-family: var(--font-mono);
letter-spacing: 0.03em;
background: color-mix(in srgb, var(--c-employees) 8%, transparent);
border-color: color-mix(in srgb, var(--c-employees) 20%, transparent);
color: var(--c-employees);
}
.chip--role {
background: color-mix(in srgb, var(--brand-blue) 10%, transparent);
border-color: color-mix(in srgb, var(--brand-blue) 20%, transparent);
color: var(--brand-blue);
}
.chip--role svg { opacity: 0.7; }
.profile-hero__actions {
flex-shrink: 0;
display: flex;
flex-direction: column;
gap: var(--s-2);
align-self: flex-start;
}
@media (max-width: 720px) {
.profile-hero {
flex-direction: column;
text-align: center;
padding: var(--s-5);
}
.profile-hero__actions {
flex-direction: row;
align-self: center;
}
}
.profile-stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
gap: var(--s-4);
}
.profile-stat {
padding: var(--s-4) var(--s-5);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
text-align: center;
transition: box-shadow var(--duration) var(--ease);
}
.profile-stat:hover { box-shadow: var(--shadow-sm); }
.profile-stat__value {
font-family: var(--font-display);
font-size: var(--t-xl);
font-weight: 700;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.02em;
}
.profile-stat__label {
font-size: var(--t-xs);
color: var(--ink-muted);
font-weight: 500;
margin-top: 2px;
}
.info-card {
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
overflow: hidden;
transition: box-shadow var(--duration) var(--ease);
}
.info-card:hover { box-shadow: var(--shadow-sm); }
.info-card__head {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--border);
background: var(--surface-alt);
border-left: 3px solid var(--_accent, var(--c-employees));
}
.info-card__icon {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--_accent, var(--c-employees)) 10%, transparent);
color: var(--_accent, var(--c-employees));
flex-shrink: 0;
}
.info-card__title {
font-weight: 700;
font-size: var(--t-base);
color: var(--ink);
}
.info-card__body {
padding: var(--s-5);
}
.info-row {
display: flex;
align-items: baseline;
gap: var(--s-4);
padding: var(--s-3) 0;
}
.info-row + .info-row { border-top: 1px solid var(--border); }
.info-row__label {
width: 140px;
flex-shrink: 0;
font-size: var(--t-sm);
font-weight: 500;
color: var(--ink-muted);
}
.info-row__value {
flex: 1;
font-size: var(--t-base);
color: var(--ink);
font-weight: 500;
}
.info-row__value a {
color: var(--brand-blue);
font-weight: 600;
text-decoration: none;
}
.info-row__value a:hover { text-decoration: underline; }
.info-row__sub {
font-size: var(--t-xs);
color: var(--ink-muted);
font-weight: 400;
margin-left: var(--s-2);
}
.info-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
}
@media (max-width: 720px) {
.info-grid { grid-template-columns: 1fr; }
.info-row { flex-direction: column; gap: 2px; }
.info-row__label { width: auto; }
}
/* ━━━ SIGN-IN ACCOUNT CARD — secure vault aesthetic ━━━ */
.signin-card {
--_accent: var(--c-users);
}
.signin-card .card-accent-head::before {
background: var(--_accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent) 16%, transparent);
}
.signin-banner {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-5);
background:
linear-gradient(135deg,
color-mix(in srgb, var(--_accent, var(--c-users)) 5%, var(--surface-alt)),
var(--surface-alt));
border-bottom: 1px solid color-mix(in srgb, var(--_accent, var(--c-users)) 10%, var(--border));
font-size: var(--t-xs);
color: var(--ink-soft);
line-height: 1.4;
}
.signin-banner__icon {
flex-shrink: 0;
width: 32px;
height: 32px;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--_accent, var(--c-users)) 10%, transparent);
display: grid;
place-items: center;
color: var(--_accent, var(--c-users));
}
.signin-card__fields {
display: grid;
gap: var(--s-5);
}
.role-selector {
display: flex;
align-items: stretch;
gap: 0;
background: var(--surface-alt);
border: 1px solid var(--border);
border-left: 3px solid var(--_accent, var(--c-users));
border-radius: var(--r-md);
overflow: hidden;
transition: border-color var(--duration) var(--ease), box-shadow var(--duration) var(--ease);
}
.role-selector:focus-within {
border-color: var(--_accent, var(--c-users));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--_accent, var(--c-users)) 14%, transparent);
}
.role-selector__icon {
display: grid;
place-items: center;
padding: 0 var(--s-4);
color: var(--_accent, var(--c-users));
background: color-mix(in srgb, var(--_accent, var(--c-users)) 6%, transparent);
border-right: 1px solid var(--border);
}
.role-selector__body {
flex: 1;
display: flex;
flex-direction: column;
gap: 2px;
padding: var(--s-2) var(--s-4);
}
.role-selector__label {
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--ink-muted);
line-height: 1;
}
.role-selector .select {
height: 30px;
padding: 2px 28px 2px 0;
background-color: transparent;
border: none;
font-weight: 600;
font-size: var(--t-sm);
border-radius: 0;
}
.role-selector .select:focus { box-shadow: none; }
.pw-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--s-4);
}
.pw-field {
position: relative;
}
.pw-field .input {
padding-right: 42px;
}
.pw-toggle {
position: absolute;
right: 1px;
top: 50%;
transform: translateY(-50%);
width: 38px;
height: 38px;
display: grid;
place-items: center;
background: none;
border: none;
color: var(--ink-muted);
cursor: pointer;
border-radius: var(--r-sm);
transition: color var(--duration) var(--ease), background var(--duration) var(--ease);
}
.pw-toggle:hover {
color: var(--_accent, var(--c-users));
background: color-mix(in srgb, var(--_accent, var(--c-users)) 8%, transparent);
}
.pw-strength {
grid-column: 1 / -1;
display: flex;
align-items: center;
gap: var(--s-2);
}
.pw-strength__checks {
display: flex;
flex-wrap: wrap;
gap: var(--s-2);
}
.pw-strength__rule {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 3px 10px;
border-radius: var(--r-pill);
font-size: 11px;
font-weight: 600;
background: var(--danger-bg);
color: var(--danger);
border: 1px solid color-mix(in srgb, var(--danger) 18%, transparent);
transition: background var(--duration) var(--ease), color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.pw-strength__rule::before {
content: '✕';
font-size: 10px;
}
.pw-strength__rule.is-pass {
background: var(--success-bg);
color: var(--success);
border-color: color-mix(in srgb, var(--success) 18%, transparent);
}
.pw-strength__rule.is-pass::before {
content: '✓';
}
@media (max-width: 720px) {
.pw-grid { grid-template-columns: 1fr; }
}
/* ━━━ TABLE ━━━ borderless rows, tabular numerals */
.table-wrap { overflow-x: auto; }
.table {
width: 100%;
font-size: var(--t-sm);
font-variant-numeric: tabular-nums;
}
.table thead th {
text-align: left;
padding: var(--s-3) var(--s-6);
font-size: var(--t-xs);
font-weight: 600;
color: var(--ink-muted);
background: var(--bg-2);
border-bottom: 1px solid var(--border);
letter-spacing: .03em;
text-transform: uppercase;
white-space: nowrap;
}
.table thead th.text-right { text-align: right; }
.table tbody td {
padding: var(--s-4) var(--s-6);
border-bottom: 1px solid var(--border);
color: var(--ink);
vertical-align: middle;
font-size: var(--t-sm);
}
.table tbody tr { transition: background var(--duration) var(--ease); }
.table tbody tr:hover { background: var(--bg-2); }
.table tbody tr:last-child td { border-bottom: 0; }
.table .mono { font-family: var(--font-mono); font-size: 12px; color: var(--ink-soft); }
.id-mono {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink-soft);
padding: 2px 6px;
background: var(--surface-alt);
border-radius: var(--r-sm);
}
.row-actions {
display: inline-flex; gap: 2px;
opacity: .6;
transition: opacity var(--duration) var(--ease);
}
tr:hover .row-actions { opacity: 1; }
/* Pagination (from custom paginator view) */
.pagination {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3);
padding: var(--s-3) var(--s-5);
border-top: 1px solid var(--border);
font-size: var(--t-sm); color: var(--ink-muted);
}
.pagination nav { display: inline-flex; gap: 2px; }
.pagination a, .pagination span {
display: inline-flex; align-items: center; justify-content: center;
min-width: 28px; height: 28px;
padding: 0 8px;
border-radius: var(--r-sm);
font-size: var(--t-xs); font-weight: 500;
color: var(--ink-soft);
border: 1px solid transparent;
}
.pagination a:hover { background: var(--surface-alt); color: var(--ink); }
.pagination .is-active, .pagination .is-current {
background: var(--accent); color: #fff; border-color: var(--accent);
}
.pagination .is-disabled { opacity: .35; pointer-events: none; }
/* ━━━ ALERT ━━━ */
.alert {
display: flex; align-items: flex-start; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-radius: var(--r-md);
border: 1px solid var(--border);
background: var(--bg-2);
color: var(--ink-soft);
font-size: var(--t-sm);
}
.alert svg { flex-shrink: 0; margin-top: 1px; }
.alert.is-success { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.alert.is-warning { background: var(--warning-bg); color: var(--warning); border-color: color-mix(in srgb, var(--warning) 22%, transparent); }
.alert.is-danger { background: var(--danger-bg); color: var(--danger); border-color: color-mix(in srgb, var(--danger) 22%, transparent); }
/* ━━━ EMPTY STATE ━━━ */
.empty {
text-align: center;
padding: var(--s-9) var(--s-5);
color: var(--ink-muted);
}
.empty__icon {
width: 48px; height: 48px;
border-radius: var(--r-md);
background: var(--surface-alt);
color: var(--ink-muted);
display: inline-flex; align-items: center; justify-content: center;
margin-bottom: var(--s-4);
}
.empty__title { color: var(--ink); margin-bottom: var(--s-1); font-size: var(--t-lg); }
.empty__msg { font-size: var(--t-sm); max-width: 460px; margin: 0 auto var(--s-5); }
/* ━━━ TABS ━━━ */
.tabs { display: flex; flex-direction: column; gap: var(--s-4); }
.tabs__bar {
display: flex; gap: 2px;
border-bottom: 1px solid var(--border);
position: relative;
}
.tab, .tab-trigger {
padding: var(--s-2) var(--s-3);
font-size: var(--t-sm); font-weight: 500;
color: var(--ink-muted);
border-bottom: 2px solid transparent;
margin-bottom: -1px;
transition: color var(--duration) var(--ease), border-color var(--duration) var(--ease);
}
.tab:hover, .tab-trigger:hover { color: var(--ink); }
.tab.is-active, .tab-trigger.is-active {
color: var(--ink);
border-color: var(--accent);
}
.tab-indicator { display: none; }
/* ━━━ CHIP ━━━ small filter pills */
.chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 4px 10px;
background: var(--surface-alt);
color: var(--ink-soft);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: var(--t-xs); font-weight: 500;
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.chip:hover { background: var(--surface-tint); color: var(--ink); }
.chip.is-active { background: var(--accent); color: #fff; border-color: var(--accent); }
.chip__count {
background: rgba(0, 0, 0, .08);
padding: 1px 6px;
border-radius: var(--r-sm);
font-variant-numeric: tabular-nums;
}
.chip.is-active .chip__count { background: rgba(255, 255, 255, .2); }
[data-theme="dark"] .chip__count { background: rgba(255, 255, 255, .08); }
/* ━━━ HEALTH CARDS (System status) ━━━ */
.health-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: var(--s-3);
}
.health-card {
display: grid;
grid-template-columns: 12px 1fr;
gap: var(--s-3);
align-items: center;
padding: var(--s-3) var(--s-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
}
.health-card__dot {
width: 8px; height: 8px;
border-radius: 50%;
background: var(--ink-muted);
}
.health-card.is-ok .health-card__dot { background: var(--success); }
.health-card.is-warn .health-card__dot { background: var(--warning); }
.health-card.is-fail .health-card__dot { background: var(--danger); }
.health-card.is-fail { border-color: color-mix(in srgb, var(--danger) 30%, transparent); }
.health-card__label {
font-size: var(--t-xs);
font-weight: 500;
color: var(--ink-muted);
letter-spacing: 0;
}
.health-card__value {
font-family: var(--font-mono);
font-size: 12px;
color: var(--ink);
margin-top: 2px;
word-break: break-all;
}
/* ━━━ ACCESS CHECKLIST — friendly permission toggles ━━━ */
.access-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: var(--s-5);
}
.access-module {
border: 1px solid var(--border);
border-radius: var(--r-lg);
background: var(--surface);
overflow: hidden;
transition: box-shadow var(--duration) var(--ease);
}
.access-module:hover { box-shadow: var(--shadow-sm); }
.access-module__head {
display: flex;
align-items: center;
gap: var(--s-3);
padding: var(--s-4) var(--s-5);
border-bottom: 1px solid var(--border);
background: var(--surface-alt);
border-left: 3px solid var(--_mod, var(--accent));
}
.access-module__icon {
width: 34px;
height: 34px;
display: grid;
place-items: center;
border-radius: var(--r-md);
background: color-mix(in srgb, var(--_mod) 12%, transparent);
color: var(--_mod);
flex-shrink: 0;
}
.access-module__name {
font-weight: 700;
font-size: var(--t-base);
color: var(--ink);
letter-spacing: -0.01em;
}
.access-list { display: flex; flex-direction: column; }
.access-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--s-3) var(--s-5);
gap: var(--s-4);
min-height: 44px;
}
.access-row + .access-row { border-top: 1px solid var(--border); }
.access-row__label {
font-size: var(--t-base);
font-weight: 500;
color: var(--ink);
}
/* Toggle switch — CSS only */
.toggle-switch {
position: relative;
display: inline-block;
width: 46px;
height: 26px;
flex-shrink: 0;
}
.toggle-switch input {
position: absolute;
opacity: 0;
width: 0;
height: 0;
}
.toggle-switch__track {
position: absolute;
inset: 0;
background: var(--border-strong);
border-radius: var(--r-pill);
cursor: pointer;
transition: background 200ms var(--ease);
}
.toggle-switch__track::after {
content: '';
position: absolute;
left: 3px;
top: 3px;
width: 20px;
height: 20px;
background: #fff;
border-radius: 50%;
box-shadow: 0 1px 3px rgba(0,0,0,.18);
transition: transform 200ms cubic-bezier(.4,.0,.2,1);
}
.toggle-switch input:checked + .toggle-switch__track {
background: var(--success);
}
.toggle-switch input:checked + .toggle-switch__track::after {
transform: translateX(20px);
}
.toggle-switch input:focus-visible + .toggle-switch__track {
box-shadow: 0 0 0 3px color-mix(in srgb, var(--success) 25%, transparent);
}
[data-theme="dark"] .toggle-switch__track { background: var(--surface-tint); }
[data-theme="dark"] .toggle-switch__track::after { background: var(--ink-muted); }
[data-theme="dark"] .toggle-switch input:checked + .toggle-switch__track::after { background: #fff; }
/* ━━━ BIRTHDAY CELEBRATION CARD ━━━ */
.bday-hero {
position: relative;
overflow: hidden;
border-radius: var(--r-lg);
padding: var(--s-7) var(--s-8);
background:
radial-gradient(ellipse at 20% 50%, rgba(244,197,43,.18), transparent 60%),
radial-gradient(ellipse at 80% 30%, rgba(226,17,123,.12), transparent 50%),
linear-gradient(135deg, #FFF8EC 0%, #FFF0F5 50%, #FDF6FF 100%);
border: 1px solid color-mix(in srgb, var(--brand-yellow) 25%, var(--border));
box-shadow:
0 4px 24px rgba(244,197,43,.12),
0 1px 3px rgba(226,17,123,.08);
display: flex;
align-items: center;
gap: var(--s-7);
z-index: 0;
}
[data-theme="dark"] .bday-hero {
background:
radial-gradient(ellipse at 20% 50%, rgba(244,197,43,.10), transparent 60%),
radial-gradient(ellipse at 80% 30%, rgba(226,17,123,.08), transparent 50%),
linear-gradient(135deg, #1C1A14 0%, #1C141A 50%, #1A1420 100%);
}
.bday-hero__photo {
position: relative;
flex-shrink: 0;
z-index: 1;
}
.bday-hero__photo img,
.bday-hero__photo .bday-hero__avatar {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
border: 4px solid var(--brand-yellow);
box-shadow:
0 0 0 6px color-mix(in srgb, var(--brand-yellow) 20%, transparent),
0 8px 24px rgba(244,197,43,.25);
animation: bday-pulse 2.5s ease-in-out infinite;
}
.bday-hero__avatar {
display: grid;
place-items: center;
font-size: var(--t-3xl);
font-weight: 700;
color: var(--brand-yellow);
background: color-mix(in srgb, var(--brand-yellow) 12%, var(--surface));
}
@keyframes bday-pulse {
0%, 100% { box-shadow: 0 0 0 6px color-mix(in srgb, var(--brand-yellow) 20%, transparent), 0 8px 24px rgba(244,197,43,.25); }
50% { box-shadow: 0 0 0 10px color-mix(in srgb, var(--brand-yellow) 12%, transparent), 0 8px 32px rgba(244,197,43,.30); }
}
.bday-hero__info {
flex: 1;
min-width: 0;
z-index: 1;
}
.bday-hero__label {
font-size: var(--t-xs);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--brand-orange);
margin-bottom: var(--s-1);
}
.bday-hero__name {
font-family: var(--font-display);
font-size: var(--t-2xl);
font-weight: 800;
color: var(--ink);
letter-spacing: -0.02em;
line-height: 1.2;
}
.bday-hero__age {
font-family: var(--font-display);
font-size: var(--t-lg);
font-weight: 600;
color: var(--brand-pink);
margin-top: var(--s-1);
}
.bday-hero__wish {
margin-top: var(--s-3);
font-size: var(--t-sm);
color: var(--ink-soft);
}
/* Confetti particles — pure CSS */
.bday-confetti {
position: absolute;
inset: 0;
overflow: hidden;
pointer-events: none;
z-index: 0;
}
.bday-confetti__piece {
position: absolute;
top: -30px;
font-size: 20px;
animation: confetti-fall linear infinite;
opacity: 0.7;
}
.bday-confetti__piece:nth-child(1) { left: 5%; animation-duration: 4.5s; animation-delay: 0s; font-size: 18px; }
.bday-confetti__piece:nth-child(2) { left: 15%; animation-duration: 5.2s; animation-delay: 0.8s; font-size: 14px; }
.bday-confetti__piece:nth-child(3) { left: 28%; animation-duration: 4.0s; animation-delay: 1.5s; font-size: 22px; }
.bday-confetti__piece:nth-child(4) { left: 42%; animation-duration: 5.8s; animation-delay: 0.3s; font-size: 16px; }
.bday-confetti__piece:nth-child(5) { left: 58%; animation-duration: 4.3s; animation-delay: 2.0s; font-size: 20px; }
.bday-confetti__piece:nth-child(6) { left: 72%; animation-duration: 5.5s; animation-delay: 1.2s; font-size: 15px; }
.bday-confetti__piece:nth-child(7) { left: 85%; animation-duration: 4.8s; animation-delay: 0.5s; font-size: 18px; }
.bday-confetti__piece:nth-child(8) { left: 95%; animation-duration: 5.0s; animation-delay: 1.8s; font-size: 13px; }
@keyframes confetti-fall {
0% { transform: translateY(-30px) rotate(0deg); opacity: 0; }
10% { opacity: 0.8; }
90% { opacity: 0.6; }
100% { transform: translateY(calc(100% + 60px)) rotate(360deg); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
.bday-confetti__piece { animation: none; opacity: 0.4; top: 50%; }
.bday-hero__photo img, .bday-hero__photo .bday-hero__avatar { animation: none; }
}
@media (max-width: 720px) {
.bday-hero { flex-direction: column; text-align: center; padding: var(--s-6) var(--s-5); }
}
/* ━━━ SEARCH RESULTS LIST ━━━ */
.search-list { display: flex; flex-direction: column; }
.search-list > li + li { border-top: 1px solid var(--border); }
.search-list__item {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-5);
color: var(--ink);
transition: background var(--duration) var(--ease);
}
.search-list__item:hover { background: var(--bg-2); }
/* ━━━ DASHBOARD: PERFORMER (hero card) / REMINDER / CELEBRATION ━━━ */
.performer {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--s-5);
display: flex; flex-direction: column;
gap: var(--s-2);
position: relative;
}
.performer__rank {
font-size: var(--t-xs); font-weight: 500;
color: var(--ink-muted);
letter-spacing: -0.005em;
text-transform: none;
}
.performer__photo {
width: 44px; height: 44px;
border-radius: var(--r-pill);
background: var(--surface-alt);
color: var(--ink-soft);
flex-shrink: 0;
overflow: hidden;
display: inline-flex; align-items: center; justify-content: center;
font-weight: 600; font-size: var(--t-sm);
border: 1px solid var(--border);
margin-top: var(--s-1);
}
.performer__photo img { width: 100%; height: 100%; object-fit: cover; }
.performer__name {
font-size: var(--t-base); font-weight: 600;
color: var(--ink);
letter-spacing: -0.014em;
margin-top: var(--s-2);
}
.performer__value {
font-family: var(--font-display);
font-size: 1.75rem; font-weight: 600;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.03em;
line-height: 1.1;
margin-top: var(--s-1);
}
.performer__label {
font-size: var(--t-xs); color: var(--ink-muted);
margin-top: 2px;
}
.performer__details {
margin-top: var(--s-4);
padding-top: var(--s-3);
border-top: 1px solid var(--border);
display: grid;
grid-auto-flow: column;
grid-auto-columns: 1fr;
gap: var(--s-3);
font-size: var(--t-xs);
color: var(--ink-muted);
}
.performer__details > div { display: flex; flex-direction: column; gap: 2px; }
.performer__details strong {
font-family: var(--font-display);
font-size: var(--t-base);
color: var(--ink);
font-weight: 600;
font-variant-numeric: tabular-nums;
letter-spacing: -0.014em;
}
.performer--top,
.performer--poor {
border-radius: var(--r-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
isolation: isolate;
}
.performer--top::before,
.performer--poor::before {
content: '';
position: absolute;
width: 170px;
height: 170px;
top: -78px;
right: -56px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
}
.performer--top > *,
.performer--poor > * {
position: relative;
z-index: 1;
}
.performer--top {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--brand-yellow) 10%, var(--surface)) 0%,
var(--surface) 72%
);
border-color: color-mix(in srgb, var(--brand-yellow) 34%, var(--border));
}
.performer--top::before {
background: radial-gradient(
circle,
color-mix(in srgb, var(--brand-yellow) 34%, transparent) 0%,
transparent 68%
);
}
.performer--top .performer__rank {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 4px 10px;
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--brand-yellow) 16%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-yellow) 30%, transparent);
color: color-mix(in srgb, var(--brand-yellow) 64%, var(--ink));
font-weight: 700;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.performer--top .performer__photo {
width: 50px;
height: 50px;
border-color: color-mix(in srgb, var(--brand-yellow) 36%, var(--border));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-yellow) 12%, transparent);
}
.performer--top .performer__value { color: #A46800; }
.performer--top .performer__details {
margin-top: var(--s-4);
padding: var(--s-3);
border-top: 0;
border: 1px solid color-mix(in srgb, var(--brand-yellow) 22%, var(--border));
border-radius: var(--r-md);
background: color-mix(in srgb, var(--brand-yellow) 8%, transparent);
gap: var(--s-4);
}
.performer--poor {
background: linear-gradient(
180deg,
color-mix(in srgb, var(--brand-orange) 8%, var(--surface)) 0%,
var(--surface) 72%
);
border-color: color-mix(in srgb, var(--brand-orange) 34%, var(--border));
}
.performer--poor::before {
background: radial-gradient(
circle,
color-mix(in srgb, var(--brand-orange) 28%, transparent) 0%,
transparent 70%
);
}
.performer--poor .performer__rank {
display: inline-flex;
align-items: center;
width: fit-content;
padding: 4px 10px;
border-radius: var(--r-pill);
background: color-mix(in srgb, var(--brand-orange) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--brand-orange) 28%, transparent);
color: color-mix(in srgb, var(--brand-orange) 60%, var(--ink));
font-weight: 700;
letter-spacing: 0.01em;
text-transform: uppercase;
}
.performer--poor .performer__photo {
width: 50px;
height: 50px;
border-color: color-mix(in srgb, var(--brand-orange) 34%, var(--border));
box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-orange) 10%, transparent);
}
.performer--poor .performer__value { color: var(--brand-orange); }
.performer--poor .performer__details {
margin-top: var(--s-4);
padding: var(--s-3);
border-top: 0;
border: 1px solid color-mix(in srgb, var(--brand-orange) 24%, var(--border));
border-radius: var(--r-md);
background: color-mix(in srgb, var(--brand-orange) 7%, transparent);
gap: var(--s-4);
}
.reminder-list { display: flex; flex-direction: column; }
.reminder {
display: flex; align-items: center; gap: var(--s-3);
padding: var(--s-3) var(--s-4);
border-top: 1px solid var(--border);
}
.reminder:first-child { border-top: 0; }
.reminder__icon {
width: 28px; height: 28px;
border-radius: var(--r-sm);
background: var(--surface-alt);
color: var(--ink-soft);
display: inline-flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.reminder.is-overdue .reminder__icon { background: var(--danger-bg); color: var(--danger); }
.reminder.is-current .reminder__icon { background: var(--warning-bg); color: var(--warning); }
.reminder__title { font-size: var(--t-sm); font-weight: 500; color: var(--ink); }
.reminder__sub { font-size: var(--t-xs); color: var(--ink-muted); }
.reminder__when { font-size: var(--t-xs); color: var(--ink-muted); font-variant-numeric: tabular-nums; margin-left: auto; }
.reminder-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.opening-reminder-card { grid-column: auto; }
@media (max-width: 720px) {
.reminder-grid { grid-template-columns: 1fr; }
}
.opening-reminder-news {
position: relative;
overflow: hidden;
padding: var(--s-2) var(--s-3);
}
.opening-reminder-news__viewport {
height: 220px;
overflow: hidden;
mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
-webkit-mask-image: linear-gradient(to bottom, transparent, #000 8%, #000 92%, transparent);
}
.opening-reminder-news__track {
display: flex;
flex-direction: column;
animation: opening-news-scroll 28s linear infinite;
will-change: transform;
}
.opening-reminder-news__group {
display: flex;
flex-direction: column;
gap: var(--s-2);
padding: var(--s-2) var(--s-1);
}
.opening-reminder-news__item {
display: grid;
gap: 2px;
padding: var(--s-3) var(--s-4);
border: 1px solid var(--border);
border-radius: var(--r-md);
background: var(--surface);
text-decoration: none;
}
.opening-reminder-news__item:hover {
border-color: color-mix(in srgb, var(--c-openings) 32%, var(--border));
background: color-mix(in srgb, var(--c-openings) 8%, var(--surface));
}
.opening-reminder-news__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--s-3);
}
.opening-reminder-news__title {
font-size: var(--t-sm);
font-weight: 600;
color: var(--ink);
line-height: 1.3;
}
.opening-reminder-news__positions {
flex-shrink: 0;
font-size: 10px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--c-openings);
background: color-mix(in srgb, var(--c-openings) 12%, transparent);
border: 1px solid color-mix(in srgb, var(--c-openings) 26%, transparent);
border-radius: var(--r-pill);
padding: 2px 8px;
line-height: 1.2;
}
.opening-reminder-news__client {
font-size: var(--t-xs);
color: var(--ink-muted);
}
.opening-reminder-news:hover .opening-reminder-news__track { animation-play-state: paused; }
.opening-reminder-news.is-static .opening-reminder-news__track { animation: none; }
@keyframes opening-news-scroll {
from { transform: translateY(0); }
to { transform: translateY(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.opening-reminder-news__track { animation: none; }
}
.celebration-list {
display: flex; gap: var(--s-3);
overflow-x: auto;
padding-bottom: var(--s-2);
scrollbar-width: thin;
}
.celebration {
flex: 0 0 200px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--s-4);
text-align: center;
}
.celebration .avatar { width: 44px; height: 44px; margin: 0 auto var(--s-2); }
.celebration__name { font-weight: 500; font-size: var(--t-sm); color: var(--ink); }
.celebration__occasion {
font-size: 10px; color: var(--ink-muted);
font-weight: 600; text-transform: uppercase; letter-spacing: .06em;
margin-top: 4px;
}
.celebration__when { font-size: var(--t-xs); color: var(--ink-muted); margin-top: 2px; font-variant-numeric: tabular-nums; }
.banner {
background: var(--bg-2);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--s-4) var(--s-5);
display: flex; align-items: center; gap: var(--s-4);
}
.banner__emoji { font-size: 1.6rem; }
.banner__title { font-size: var(--t-base); font-weight: 600; color: var(--ink); }
.banner__sub { color: var(--ink-muted); font-size: var(--t-xs); margin-top: 2px; }
/* ━━━ OPENING HERO ━━━ */
.opening-hero {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-md);
padding: var(--s-5) var(--s-6);
}
.opening-hero__head {
display: flex; align-items: flex-start; justify-content: space-between;
gap: var(--s-4);
margin-bottom: var(--s-4);
}
.opening-hero__job-id {
font-family: var(--font-mono);
font-size: var(--t-xs);
color: var(--ink-muted);
margin-bottom: var(--s-2);
}
.opening-hero__title {
font-family: var(--font-display);
font-size: clamp(var(--t-xl), 2.6vw, 1.875rem);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.03em;
color: var(--ink);
max-width: 720px;
}
.opening-hero__client {
color: var(--ink-soft);
font-size: var(--t-sm);
display: inline-flex; align-items: center; gap: var(--s-2);
margin-top: var(--s-2);
}
.opening-hero__client a { color: var(--accent); font-weight: 500; }
.opening-hero__client a:hover { text-decoration: underline; }
.opening-hero__meta {
display: flex; flex-wrap: wrap; gap: var(--s-2);
margin-top: var(--s-4);
}
.opening-hero__stats {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
gap: var(--s-4);
padding-top: var(--s-4);
border-top: 1px solid var(--border);
margin-top: var(--s-4);
}
.stat-chip__label { font-size: var(--t-xs); color: var(--ink-muted); font-weight: 500; }
.stat-chip__value { font-size: var(--t-xl); font-weight: 600; color: var(--ink); font-variant-numeric: tabular-nums; letter-spacing: -0.02em; margin-top: 2px; }
.status-chip {
display: inline-flex; align-items: center; gap: 6px;
padding: 2px 8px;
font-size: 11px; font-weight: 500;
border-radius: var(--r-sm);
background: var(--surface-alt);
color: var(--ink-soft);
border: 1px solid var(--border);
}
.status-chip::before {
content: ''; width: 5px; height: 5px; border-radius: 50%;
background: var(--accent, currentColor);
}
.status-chip.is-open { background: var(--success-bg); color: var(--success); border-color: color-mix(in srgb, var(--success) 22%, transparent); }
.status-chip.is-open::before { background: var(--success); }
.status-chip.is-closed { background: var(--surface-alt); color: var(--ink-muted); }
.status-changer { display: inline-flex; flex-direction: column; gap: var(--s-2); }
/* ━━━ DAR — Dispatch-desk console (darx-*) ━━━ */
/* Unique `darx-` namespace — isolated from every other module. */
/* Toolbar — filters on the left, primary CTA on the right */
.darx-toolbar {
display: flex; align-items: center; justify-content: space-between;
gap: var(--s-3); flex-wrap: wrap;
padding: var(--s-3) var(--s-4);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-lg);
box-shadow: var(--shadow-xs);
}
.darx-toolbar__filters {
display: flex; align-items: end; gap: var(--s-3); flex-wrap: wrap; margin: 0;
}
.darx-toolbar__field { display: flex; flex-direction: column; gap: 4px; min-width: 140px; }
.darx-toolbar__field-label {
font-size: 10px; font-weight: 600; letter-spacing: 0.06em;
text-transform: uppercase; color: var(--ink-muted);
}
.darx-toolbar__reset {
align-self: end;
font-size: var(--t-xs); color: var(--ink-soft);
padding: 6px 10px; border-radius: var(--r-sm);
transition: background var(--duration) var(--ease), color var(--duration) var(--ease);
}
.darx-toolbar__reset:hover { background: var(--surface-alt); color: var(--ink); }
.darx-toolbar__cta {
display: flex; align-items: center; gap: var(--s-3);
}
.darx-toolbar__summary {
font-size: var(--t-xs);
color: var(--ink-muted);
font-variant-numeric: tabular-nums;
}
.darx-toolbar__cta .btn--primary {
background: var(--c-dar);
border-color: var(--c-dar);
color: #16263A;
}
.darx-toolbar__cta .btn--primary:hover {
background: color-mix(in srgb, var(--c-dar) 88%, #000);
border-color: color-mix(in srgb, var(--c-dar) 88%, #000);
box-shadow: 0 4px 12px color-mix(in srgb, var(--c-dar) 35%, transparent);
}
/* Call list */
.darx-list {
display: flex; flex-direction: column;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
box-shadow: var(--shadow-xs);
overflow: hidden;
}
.darx-row {
display: grid;
grid-template-columns: 56px minmax(220px, 1.6fr) minmax(140px, 1fr) auto auto auto;
align-items: center;
gap: var(--s-3);
padding: var(--s-3) var(--s-4) var(--s-3) var(--s-3);
border-top: 1px solid var(--border);
position: relative;
transition: background var(--duration) var(--ease);
}
.darx-row:first-child { border-top: 0; }
.darx-row:hover { background: var(--surface-alt); }
.darx-row::before {
content: '';
position: absolute; left: 0; top: 0; bottom: 0;
width: 3px;
background: var(--c-dar);
opacity: 0;
transition: opacity var(--duration) var(--ease);
}
.darx-row:hover::before { opacity: 1; }
.darx-time {
display: inline-flex; align-items: center; justify-content: center;
padding: 4px 8px;
border-radius: var(--r-sm);
background: color-mix(in srgb, var(--c-dar) 18%, transparent);
color: color-mix(in srgb, var(--c-dar) 50%, var(--ink));
font-family: var(--font-mono);
font-size: var(--t-xs);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
[data-theme="dark"] .darx-time {
color: var(--c-dar);
background: color-mix(in srgb, var(--c-dar) 14%, transparent);
}
.darx-cand { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.darx-cand__name {
font-size: var(--t-sm);
font-weight: 600;
color: var(--ink);
line-height: 1.25;
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.darx-cand__contact {
font-size: var(--t-xs);
color: var(--ink-soft);
font-family: var(--font-mono);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.darx-cand__loc {
font-size: var(--t-xs);
color: var(--ink-muted);
}
.darx-pitch { min-width: 0; }
.darx-pitch__client {
font-size: var(--t-xs);
font-weight: 600;
color: var(--ink);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.darx-pitch__job {
font-size: 10px;
color: var(--ink-muted);
font-family: var(--font-mono);
}
.darx-pitch__empty { color: var(--ink-muted); font-size: var(--t-xs); }
.darx-tags { display: inline-flex; flex-wrap: wrap; gap: 4px; }
.darx-tag {
display: inline-flex; align-items: center;
padding: 2px 8px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--r-pill);
font-size: 10px;
color: var(--ink-soft);
white-space: nowrap;
}
.darx-tag--money { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.darx-row__actions {
display: inline-flex; align-items: center; gap: 2px;
opacity: 0;
transition: opacity var(--duration) var(--ease);
}
.darx-row:hover .darx-row__actions,
.darx-row:focus-within .darx-row__actions { opacity: 1; }
.darx-row__remark {
grid-column: 2 / -1;
margin-top: 4px;
font-size: var(--t-xs);
color: var(--ink-muted);
overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
@media (max-width: 900px) {
.darx-row {
grid-template-columns: 56px 1fr auto;
grid-template-areas:
'time cand status'
'time pitch actions'
'. tags tags';
row-gap: 6px;
}
.darx-row > .darx-time { grid-area: time; align-self: start; margin-top: 2px; }
.darx-row > .darx-cand { grid-area: cand; }
.darx-row > .darx-pitch { grid-area: pitch; }
.darx-row > .darx-tags { grid-area: tags; }
.darx-row > .badge { grid-area: status; justify-self: end; }
.darx-row > .darx-row__actions { grid-area: actions; justify-self: end; opacity: 1; }
.darx-row__remark { grid-column: 1 / -1; }
}
/* Empty state */
.darx-empty {
padding: var(--s-7) var(--s-4);
text-align: center;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--r-xl);
}
.darx-empty__icon {
width: 56px; height: 56px;
margin: 0 auto var(--s-3);
display: inline-flex; align-items: center; justify-content: center;
border-radius: 50%;
background: color-mix(in srgb, var(--c-dar) 16%, transparent);
color: color-mix(in srgb, var(--c-dar) 55%, var(--ink));
}
[data-theme="dark"] .darx-empty__icon { color: var(--c-dar); }
.darx-empty__title {
font-family: var(--font-display);
font-size: var(--t-lg);
font-weight: 600;
color: var(--ink);
margin-bottom: 4px;
}
.darx-empty__msg {
font-size: var(--t-sm);
color: var(--ink-soft);
max-width: 380px;
margin: 0 auto;
}
/* Native