/* ============================================================ Influrion HR — Design System Dark, glassy, blue→cyan gradient aesthetic (influrion.com). Hand-written, CSP-safe (no external fonts/CDNs). ============================================================ */ :root { --bg: #060912; --bg-2: #0a0f1f; --surface: rgba(255, 255, 255, 0.04); --surface-2: rgba(255, 255, 255, 0.06); --surface-solid: #0e1424; --border: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.16); --text: #e8edf7; --text-dim: #9aa6be; --text-faint: #66728c; --brand: #3b82f6; --brand-2: #22d3ee; --brand-grad: linear-gradient(120deg, #3b82f6 0%, #22d3ee 100%); --brand-glow: rgba(59, 130, 246, 0.45); --green: #34d399; --amber: #fbbf24; --red: #f87171; --radius: 18px; --radius-sm: 12px; --shadow: 0 18px 50px -12px rgba(0, 0, 0, 0.6); --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", system-ui, Roboto, Helvetica, Arial, sans-serif; /* Themeable surfaces (overridden by [data-theme="light"]) */ --input-bg: rgba(0, 0, 0, 0.25); --topbar-bg: rgba(6, 9, 18, 0.55); --sidebar-bg: linear-gradient(180deg, rgba(10, 15, 31, 0.9), rgba(6, 9, 18, 0.9)); --th-bg: rgba(255, 255, 255, 0.03); --row-hover: rgba(255, 255, 255, 0.02); --link-hover: #67e8f9; --active-text: #ffffff; --success-text: #a7f3d0; --error-text: #fecaca; --orb-opacity: 0.5; color-scheme: dark; } /* ============================================================ Light theme — same blue→cyan brand, tuned for contrast. Activated by data-theme="light" on (set server-side from the `theme` cookie, toggled client-side in app.js). ============================================================ */ :root[data-theme="light"] { --bg: #f4f7fb; --bg-2: #e9eef7; --surface: rgba(15, 23, 42, 0.035); --surface-2: rgba(15, 23, 42, 0.06); --surface-solid: #ffffff; --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.18); --text: #0f1b2e; --text-dim: #475569; --text-faint: #7a899f; --brand: #2563eb; --brand-2: #0e7aa8; --brand-grad: linear-gradient(120deg, #2563eb 0%, #0891b2 100%); --brand-glow: rgba(37, 99, 235, 0.30); --green: #059669; --amber: #b45309; --red: #dc2626; --shadow: 0 18px 50px -18px rgba(15, 23, 42, 0.20); --input-bg: #ffffff; --topbar-bg: rgba(255, 255, 255, 0.72); --sidebar-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.92), rgba(238, 243, 251, 0.92)); --th-bg: rgba(15, 23, 42, 0.04); --row-hover: rgba(15, 23, 42, 0.03); --link-hover: #0e7490; --active-text: #0f1b2e; --success-text: #047857; --error-text: #b91c1c; --orb-opacity: 0.22; color-scheme: light; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.55; -webkit-font-smoothing: antialiased; min-height: 100vh; position: relative; overflow-x: hidden; } /* Ambient glow orbs (influrion motif) */ body::before, body::after { content: ""; position: fixed; border-radius: 50%; filter: blur(120px); z-index: 0; pointer-events: none; opacity: var(--orb-opacity); } body::before { width: 520px; height: 520px; background: radial-gradient(circle, rgba(59,130,246,0.55), transparent 70%); top: -160px; left: -120px; } body::after { width: 480px; height: 480px; background: radial-gradient(circle, rgba(34,211,238,0.32), transparent 70%); bottom: -180px; right: -120px; } a { color: var(--brand-2); text-decoration: none; } a:hover { color: var(--link-hover); } h1, h2, h3, h4 { margin: 0 0 .35em; letter-spacing: -0.02em; font-weight: 700; line-height: 1.15; } h1 { font-size: 2rem; } h2 { font-size: 1.4rem; } h3 { font-size: 1.12rem; } p { margin: 0 0 1rem; color: var(--text-dim); } .muted { color: var(--text-dim); } .faint { color: var(--text-faint); } .eyebrow { text-transform: uppercase; letter-spacing: .18em; font-size: .72rem; font-weight: 700; color: var(--brand-2); } /* ---------- Layout shell ---------- */ .app { display: flex; min-height: 100vh; position: relative; z-index: 1; } .sidebar { width: 264px; flex-shrink: 0; padding: 22px 16px; border-right: 1px solid var(--border); background: var(--sidebar-bg); backdrop-filter: blur(12px); position: sticky; top: 0; height: 100vh; overflow-y: auto; } .brand { display: flex; align-items: center; gap: 12px; padding: 6px 10px 20px; } .brand img { width: 38px; height: 38px; border-radius: 10px; } .brand b { font-size: 1.05rem; letter-spacing: -0.01em; } .brand small { display: block; color: var(--text-faint); font-size: .7rem; letter-spacing: .12em; text-transform: uppercase; } .nav-section { margin-top: 18px; } .nav-section .label { font-size: .68rem; text-transform: uppercase; letter-spacing: .16em; color: var(--text-faint); padding: 0 12px 8px; } .nav-link { display: flex; align-items: center; gap: 12px; padding: 10px 12px; margin-bottom: 3px; border-radius: var(--radius-sm); color: var(--text-dim); font-weight: 500; font-size: .92rem; transition: all .15s ease; } .nav-link svg { width: 18px; height: 18px; flex-shrink: 0; opacity: .85; } .nav-link:hover { background: var(--surface); color: var(--text); } .nav-link.active { background: var(--surface-2); color: var(--active-text); box-shadow: inset 0 0 0 1px var(--border-strong); } .nav-link.active::before { content: ""; width: 3px; height: 18px; border-radius: 3px; background: var(--brand-grad); margin-left: -4px; margin-right: 6px; } .main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* ---------- Topbar ---------- */ .topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--topbar-bg); backdrop-filter: blur(10px); position: sticky; top: 0; z-index: 20; } .topbar .title h1 { font-size: 1.35rem; margin: 0; } .topbar .title p { margin: 2px 0 0; font-size: .85rem; } .userchip { display: flex; align-items: center; gap: 10px; padding: 6px 8px 6px 14px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); } .userchip .who { text-align: right; line-height: 1.2; } .userchip .who b { font-size: .85rem; } .userchip .who span { font-size: .72rem; color: var(--text-faint); } .avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--brand-grad); color: #021018; display: grid; place-items: center; font-weight: 700; font-size: .85rem; } .content { padding: 28px; max-width: 1180px; width: 100%; } /* ---------- Cards & grid ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; backdrop-filter: blur(8px); box-shadow: var(--shadow); } .card.tight { padding: 16px 18px; } .card h2, .card h3 { margin-top: 0; } .grid { display: grid; gap: 18px; } .grid.cols-2 { grid-template-columns: repeat(2, 1fr); } .grid.cols-3 { grid-template-columns: repeat(3, 1fr); } .grid.cols-4 { grid-template-columns: repeat(4, 1fr); } .stat { display: flex; flex-direction: column; gap: 6px; } .stat .n { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.03em; } .stat .l { font-size: .82rem; color: var(--text-dim); } .stat .ic { width: 40px; height: 40px; border-radius: 12px; margin-bottom: 6px; display: grid; place-items: center; background: var(--surface-2); color: var(--brand-2); box-shadow: inset 0 0 0 1px var(--border); } .stat .ic svg { width: 20px; height: 20px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-weight: 600; font-size: .9rem; cursor: pointer; border: 1px solid var(--border-strong); background: var(--surface-2); color: var(--text); transition: all .15s ease; line-height: 1; } .btn:hover { border-color: var(--brand); color: #fff; } .btn svg { width: 16px; height: 16px; } .btn-primary { background: var(--brand-grad); border: none; color: #021018; box-shadow: 0 10px 26px -8px var(--brand-glow); } .btn-primary:hover { color: #021018; filter: brightness(1.06); } .btn-danger { color: var(--red); border-color: rgba(248,113,113,.4); background: rgba(248,113,113,.08); } .btn-danger:hover { background: rgba(248,113,113,.16); color: #fecaca; } .btn-ghost { background: transparent; border-color: var(--border); } .btn-sm { padding: 7px 13px; font-size: .82rem; } .btn-block { width: 100%; justify-content: center; } /* ---------- Forms ---------- */ .field { margin-bottom: 16px; } .field label { display: block; font-size: .82rem; font-weight: 600; margin-bottom: 7px; color: var(--text-dim); } .input, select.input, textarea.input { width: 100%; padding: 11px 14px; background: var(--input-bg); color: var(--text); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font-size: .92rem; font-family: inherit; transition: border-color .15s, box-shadow .15s; } .input:focus, select.input:focus, textarea.input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px rgba(59,130,246,.2); } textarea.input { resize: vertical; min-height: 96px; } select.input option { background: var(--surface-solid); } .field .help { font-size: .76rem; color: var(--text-faint); margin-top: 5px; } .field .err { color: var(--red); font-size: .78rem; margin-top: 5px; } .checkrow { display: flex; align-items: center; gap: 9px; } .checkrow input { width: 16px; height: 16px; accent-color: var(--brand); } /* ---------- Tables ---------- */ .table-wrap { overflow-x: auto; border-radius: var(--radius); border: 1px solid var(--border); } table.table { width: 100%; border-collapse: collapse; font-size: .9rem; } table.table th { text-align: left; padding: 13px 16px; font-size: .72rem; text-transform: uppercase; letter-spacing: .1em; color: var(--text-faint); background: var(--th-bg); border-bottom: 1px solid var(--border); } table.table td { padding: 13px 16px; border-bottom: 1px solid var(--border); color: var(--text-dim); } table.table tr:last-child td { border-bottom: none; } table.table tbody tr:hover { background: var(--row-hover); } table.table td b, table.table td strong { color: var(--text); } /* ---------- Badges / pills ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 11px; border-radius: 999px; font-size: .74rem; font-weight: 600; border: 1px solid var(--border-strong); } .badge-green { color: var(--green); background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.3); } .badge-amber { color: var(--amber); background: rgba(251,191,36,.1); border-color: rgba(251,191,36,.3); } .badge-red { color: var(--red); background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.3); } .badge-blue { color: var(--brand-2); background: rgba(34,211,238,.1); border-color: rgba(34,211,238,.3); } .badge-gray { color: var(--text-dim); } /* ---------- Alerts ---------- */ .alert { padding: 13px 16px; border-radius: var(--radius-sm); margin-bottom: 18px; font-size: .9rem; border: 1px solid var(--border-strong); display: flex; align-items: center; gap: 10px; } .alert-success { background: rgba(52,211,153,.1); border-color: rgba(52,211,153,.35); color: var(--success-text); } .alert-error { background: rgba(248,113,113,.1); border-color: rgba(248,113,113,.35); color: var(--error-text); } /* ---------- Misc ---------- */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 22px; flex-wrap: wrap; } .row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .between { justify-content: space-between; } .mt { margin-top: 18px; } .mt-lg { margin-top: 28px; } .mb-0 { margin-bottom: 0; } .spacer { flex: 1; } .divider { height: 1px; background: var(--border); margin: 18px 0; border: none; } .empty { text-align: center; padding: 48px 20px; color: var(--text-faint); } .empty svg { width: 42px; height: 42px; opacity: .4; margin-bottom: 12px; } .pagination { display: flex; gap: 6px; margin-top: 20px; flex-wrap: wrap; list-style: none; padding: 0; } .pagination a, .pagination span { padding: 7px 12px; border-radius: 10px; border: 1px solid var(--border); font-size: .85rem; color: var(--text-dim); background: var(--surface); } .pagination .active span, .pagination a:hover { background: var(--brand-grad); color: #021018; border: none; } .pagination [aria-disabled="true"] span { opacity: .4; } .kv { display: grid; grid-template-columns: 150px 1fr; gap: 10px 16px; font-size: .92rem; } .kv dt { color: var(--text-faint); } .kv dd { margin: 0; color: var(--text); } /* Auth screen */ .auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 24px; position: relative; z-index: 1; } .auth-card { width: 100%; max-width: 410px; } .auth-card .brand { justify-content: center; padding-bottom: 26px; } .auth-card .brand img { width: 52px; height: 52px; } /* Mobile */ .menu-toggle { display: none; } @media (max-width: 900px) { .sidebar { position: fixed; left: 0; top: 0; z-index: 60; transform: translateX(-100%); transition: transform .2s ease; } .sidebar.open { transform: translateX(0); } .menu-toggle { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } .kv { grid-template-columns: 1fr; gap: 2px 0; } .kv dt { margin-top: 10px; } .content { padding: 18px; } .topbar { padding: 14px 18px; } } @media (min-width: 901px) and (max-width: 1200px) { .grid.cols-4 { grid-template-columns: repeat(2, 1fr); } } .backdrop { display: none; } .backdrop.show { display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 50; } /* ---------- Theme toggle (in sidebar) ---------- */ .theme-toggle { width: 100%; border: none; background: transparent; cursor: pointer; font: inherit; text-align: left; } .theme-toggle .icon-sun { display: block; } .theme-toggle .icon-moon { display: none; } :root[data-theme="light"] .theme-toggle .icon-sun { display: none; } :root[data-theme="light"] .theme-toggle .icon-moon { display: block; } /* ---------- Responsive tables: stack into labelled cards on phones ---------- Labels come from app.js, which copies each column header onto the matching cell as data-label (so no per-view markup changes are needed). */ @media (max-width: 640px) { .table-wrap { overflow-x: visible; } table.table thead { display: none; } table.table, table.table tbody, table.table tr, table.table td { display: block; width: 100%; } table.table tr { padding: 6px 2px; border-bottom: 1px solid var(--border); } table.table tbody tr:last-child { border-bottom: none; } table.table td { border: none; padding: 7px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } table.table td::before { content: attr(data-label); flex-shrink: 0; font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--text-faint); } table.table td:not([data-label])::before, table.table td[data-label=""]::before { content: none; } /* Empty-state row spans full width with no label. */ table.table td[colspan]::before { content: none; } table.table td[colspan] { display: block; } } /* ---------- Topbar: reduce crowding on small phones ---------- */ @media (max-width: 560px) { .topbar { padding: 12px 14px; } .topbar .title h1 { font-size: 1.1rem; } .userchip { padding: 0; border: none; background: transparent; gap: 0; } .userchip .who { display: none; } }