/* ============================================================ QHRM LMS — Design System Extracted & refined from the existing product DNA. Royal violet primary · warm amber accent · plum-navy chrome ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap'); :root { /* ---- Brand (tenant-overridable) ---- */ --primary: #5b21b6; /* royal violet */ --primary-600: #6d28d9; --primary-700: #5b21b6; --primary-800: #4c1d95; --primary-fg: #ffffff; --primary-tint: #f3effc; /* soft violet wash */ --primary-tint-2: #e9e0fb; --accent: #f59e0b; /* warm amber (logo, highlights) */ --accent-soft: #fcd34d; /* ---- Neutrals (warm) ---- */ --bg: #f7f7f9; --surface: #ffffff; --surface-2: #fafafb; --border: #ececef; --border-2: #e2e2e7; --text: #14121c; --text-muted: #6b6878; --text-faint: #9a98a6; /* ---- Chrome (sidebar) — light theme: clean white rail ---- */ --chrome: #ffffff; --chrome-2: #f7f7f9; --chrome-text: #4b4858; --chrome-muted: #9a98a6; --chrome-active: var(--primary-tint); --chrome-active-fg: var(--primary); --chrome-fg: #14121c; /* strong text: brand, hover */ --chrome-hover: rgba(20,18,28,.05); --chrome-border: #ececef; /* ---- Status ---- */ --success: #16a34a; --success-tint:#e7f6ec; --warning: #d97706; --warning-tint:#fdf0dc; --danger: #dc2626; --danger-tint: #fdeaea; --info: #2563eb; --info-tint: #e7eefc; /* ---- Pastel icon chips (stat tiles) ---- */ --chip-violet:#efe7fd; --chip-violet-fg:#7c3aed; --chip-blue: #e4edfd; --chip-blue-fg: #2563eb; --chip-green: #e3f6ea; --chip-green-fg: #16a34a; --chip-amber: #fdf0d5; --chip-amber-fg: #d97706; --chip-pink: #fde7f0; --chip-pink-fg: #db2777; --chip-teal: #d9f5f1; --chip-teal-fg: #0d9488; --chip-orange:#fdeadf; --chip-orange-fg:#ea580c; /* ---- Geometry ---- */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-pill: 999px; --shadow-sm: 0 1px 2px rgba(20,18,28,.05); --shadow-md: 0 8px 24px -8px rgba(20,18,28,.14), 0 2px 6px rgba(20,18,28,.05); --shadow-lg: 0 24px 60px -16px rgba(20,18,28,.28); --ease: cubic-bezier(.4,0,.2,1); --font: 'Plus Jakarta Sans', ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: ui-monospace, 'SF Mono', Menlo, monospace; } /* ============================================================ DARK THEME — applied via Overrides only the neutral/chrome tokens; brand + status hues keep their identity. Every component that uses these variables adapts automatically. ============================================================ */ :root[data-theme="dark"] { /* ---- Neutrals ---- */ --bg: #0c0a16; --surface: #15121f; --surface-2: #1c1828; --border: #272233; --border-2: #332c41; --text: #ece9f3; --text-muted: #a29eb3; --text-faint: #6f6a82; /* ---- Brand washes go deep ---- */ --primary-tint: #241a38; --primary-tint-2: #2e2147; /* ---- Chrome: dark rail (the product's original DNA) ---- */ --chrome: #15121f; --chrome-2: #1c1828; --chrome-text: #c8c4d4; --chrome-muted: #6f6a82; --chrome-active: #2a1340; --chrome-active-fg: var(--accent); --chrome-fg: #ffffff; --chrome-hover: rgba(255,255,255,.06); --chrome-border: rgba(255,255,255,.08); /* ---- Status washes, dimmed for dark surfaces ---- */ --success-tint:#102619; --warning-tint:#2a1f0c; --danger-tint: #2c1414; --info-tint: #131d33; /* ---- Pastel chips: darker fills, brighter glyphs ---- */ --chip-violet:#2a1f47; --chip-violet-fg:#b794f6; --chip-blue: #16264a; --chip-blue-fg: #7cb0f7; --chip-green: #10311f; --chip-green-fg: #5fd089; --chip-amber: #32260c; --chip-amber-fg: #f0b755; --chip-pink: #371325; --chip-pink-fg: #f07cb0; --chip-teal: #0d2e2b; --chip-teal-fg: #4fd0c4; --chip-orange:#341c10; --chip-orange-fg:#f08c52; /* ---- Shadows: deeper for dark ---- */ --shadow-sm: 0 1px 2px rgba(0,0,0,.45); --shadow-md: 0 8px 24px -8px rgba(0,0,0,.6), 0 2px 6px rgba(0,0,0,.4); --shadow-lg: 0 24px 60px -16px rgba(0,0,0,.72); } * { box-sizing: border-box; } body { margin: 0; } .lms, .lms * { font-family: var(--font); } .lms { color: var(--text); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01","cv01"; } .tnum { font-variant-numeric: tabular-nums; } /* ============================================================ TYPE SCALE ============================================================ */ .t-display { font-size: 40px; line-height: 1.05; font-weight: 800; letter-spacing: -.02em; } .t-h1 { font-size: 28px; line-height: 1.15; font-weight: 800; letter-spacing: -.02em; } .t-h2 { font-size: 22px; line-height: 1.2; font-weight: 700; letter-spacing: -.015em; } .t-h3 { font-size: 17px; line-height: 1.3; font-weight: 700; letter-spacing: -.01em; } .t-body-lg { font-size: 16px; line-height: 1.5; font-weight: 500; } .t-body { font-size: 14px; line-height: 1.55; font-weight: 500; } .t-sm { font-size: 13px; line-height: 1.5; font-weight: 500; } .t-caption { font-size: 11.5px; line-height: 1.4; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } /* ============================================================ BUTTONS ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font); font-size: 14px; font-weight: 600; padding: 10px 16px; border-radius: var(--r-md); border: 1px solid transparent; cursor: pointer; white-space: nowrap; transition: all .15s var(--ease); line-height: 1; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--primary); color: var(--primary-fg); box-shadow: var(--shadow-sm); } .btn-primary:hover { background: var(--primary-600); } .btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-2); } .btn-secondary:hover { background: var(--surface-2); border-color: var(--text-faint); color: var(--text); } .btn-ghost { background: transparent; color: var(--text-muted); } .btn-ghost:hover { background: var(--primary-tint); color: var(--primary); } .btn-danger { background: var(--danger); color: #fff; } .btn-icon { padding: 9px; border-radius: var(--r-sm); } /* Icon-only row action: square ghost button; .danger turns red on hover for deletes. */ .btn-icon svg { width: 17px; height: 17px; } .btn-ghost.btn-icon.danger:hover { background: var(--danger-tint); color: var(--danger); } .btn-lg { padding: 14px 22px; font-size: 15px; border-radius: var(--r-md); } .btn-sm { padding: 7px 12px; font-size: 13px; } .btn-pill { border-radius: var(--r-pill); } /* ============================================================ CARDS / SURFACES ============================================================ */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--r-md); box-shadow: var(--shadow-sm); } .card-pad { padding: 20px; } /* ---- Stat tile ---- */ .stat { padding: 18px 18px 16px; } .stat-top { display: flex; align-items: center; justify-content: space-between; } .chip { width: 38px; height: 38px; border-radius: 11px; display: grid; place-items: center; flex-shrink: 0; } .chip svg { width: 19px; height: 19px; } .chip-violet{background:var(--chip-violet);color:var(--chip-violet-fg);} .chip-blue {background:var(--chip-blue);color:var(--chip-blue-fg);} .chip-green {background:var(--chip-green);color:var(--chip-green-fg);} .chip-amber {background:var(--chip-amber);color:var(--chip-amber-fg);} .chip-pink {background:var(--chip-pink);color:var(--chip-pink-fg);} .chip-teal {background:var(--chip-teal);color:var(--chip-teal-fg);} .chip-orange{background:var(--chip-orange);color:var(--chip-orange-fg);} .stat-num { font-size: 30px; font-weight: 800; letter-spacing: -.02em; margin: 14px 0 2px; } .stat-label { font-size: 13.5px; color: var(--text-muted); font-weight: 600; } .trend { display:inline-flex; align-items:center; gap:3px; font-size:12px; font-weight:700; color:var(--success); } /* ============================================================ PILLS / BADGES ============================================================ */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--r-pill); font-size: 12px; font-weight: 700; line-height: 1; } .pill-dot { width: 6px; height: 6px; border-radius: 50%; } .pill-success{background:var(--success-tint);color:var(--success);} .pill-warning{background:var(--warning-tint);color:var(--warning);} .pill-danger {background:var(--danger-tint);color:var(--danger);} .pill-info {background:var(--info-tint);color:var(--info);} .pill-violet {background:var(--primary-tint);color:var(--primary);} .pill-neutral{background:#f0f0f3;color:var(--text-muted);} /* ============================================================ PROGRESS ============================================================ */ .bar { height: 8px; border-radius: var(--r-pill); background: #ececf0; overflow: hidden; } .bar-fill { height: 100%; border-radius: var(--r-pill); background: var(--primary); } .bar-thick { height: 10px; } /* ============================================================ INPUTS ============================================================ */ .field { width: 100%; padding: 11px 14px; font-family: var(--font); font-size: 14px; border: 1px solid var(--border-2); border-radius: var(--r-sm); background: var(--surface); color: var(--text); transition: all .15s var(--ease); } .field::placeholder { color: var(--text-faint); } .field:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-tint-2); } .search { display: flex; align-items: center; gap: 10px; padding: 0 14px; background: #f1f1f4; border-radius: var(--r-pill); border: 1px solid transparent; } .search input { border: none; background: transparent; outline: none; padding: 11px 0; flex: 1; font-family: var(--font); font-size: 14px; } .search svg { width: 17px; height: 17px; color: var(--text-faint); } /* ============================================================ AVATAR ============================================================ */ .avatar { border-radius: 50%; display: grid; place-items: center; font-weight: 700; color: #fff; flex-shrink: 0; } .avatar-sm { width: 30px; height: 30px; font-size: 12px; } .avatar-md { width: 40px; height: 40px; font-size: 14px; } /* ============================================================ APP SHELL ============================================================ */ .shell { display: grid; grid-template-columns: 248px 1fr; height: 100%; background: var(--bg); } .sidebar { background: var(--chrome); color: var(--chrome-text); border-right: 1px solid var(--chrome-border); display: flex; flex-direction: column; padding: 0; overflow: hidden; } .brand { display: flex; align-items: center; gap: 10px; padding: 20px 20px 18px; } .brand-mark { width: 30px; height: 30px; flex-shrink: 0; } .brand-name { font-weight: 800; font-size: 17px; letter-spacing: -.01em; color: var(--chrome-fg); } .brand-name .accent { color: var(--accent); } .brand-logo { width: 140px; height: auto; flex-shrink: 0; object-fit: contain; } /* dark mode: swap to the white logo (placeholder copy until the real white asset is supplied) */ :root[data-theme="dark"] .brand-logo { content: url("/logo-white.png"); } .nav { flex: 1; overflow-y: auto; padding: 4px 12px 16px; display: flex; flex-direction: column; flex-wrap: nowrap; } .nav-group-label { font-size: 10.5px; font-weight: 700; letter-spacing: .12em; color: var(--chrome-muted); text-transform: uppercase; padding: 16px 12px 7px; } .nav-item { display: flex; align-items: center; gap: 12px; padding: 9px 12px; border-radius: 10px; color: var(--chrome-text); font-size: 14px; font-weight: 600; cursor: pointer; transition: all .12s var(--ease); margin-bottom: 1px; } .nav-item svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; } .nav-item:hover { background: var(--chrome-hover); color: var(--chrome-fg); } .nav-item.active { background: var(--chrome-active); color: var(--chrome-active-fg); } .nav-item.active svg { opacity: 1; } .nav-item.locked { color: var(--chrome-muted); } .nav-lock { margin-left: auto; width: 13px !important; height: 13px !important; opacity: .6 !important; } .sidebar-user { display: flex; align-items: center; gap: 11px; padding: 14px 18px; border-top: 1px solid var(--chrome-border); } .sidebar-user .nm { font-size: 13.5px; font-weight: 700; color: var(--chrome-fg); } .sidebar-user .rl { font-size: 11.5px; color: var(--chrome-muted); } .main { display: flex; flex-direction: column; overflow: hidden; } .topbar { display: flex; align-items: center; gap: 16px; padding: 14px 28px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; } .topbar .search { flex: 1; max-width: 560px; } .topbar-actions { display: flex; align-items: center; gap: 6px; margin-left: auto; } .icon-btn { width: 38px; height: 38px; border-radius: 10px; display: grid; place-items: center; color: var(--text-muted); cursor: pointer; border: none; background: transparent; } .icon-btn:hover { background: var(--surface-2); color: var(--text); } .icon-btn svg { width: 19px; height: 19px; } .mode-badge { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: var(--r-pill); background: var(--primary-tint); color: var(--primary); font-size: 12.5px; font-weight: 700; } .content { flex: 1; overflow-y: auto; padding: 26px 28px 40px; } .page-head { display: flex; align-items: flex-end; justify-content: space-between; margin-bottom: 22px; gap: 16px; } .crumbs { font-size: 12.5px; color: var(--text-faint); font-weight: 600; margin-bottom: 6px; } .crumbs a { color: inherit; text-decoration: none; } .crumbs a:hover { color: var(--text); text-decoration: underline; } .grid-stats { display: grid; gap: 14px; }