/* Design language: sharp, not harsh — a tight, consistent 6px radius used everywhere (badges, chips, buttons, icon buttons, cards; nothing is a full 999px pill anymore), crisp low-blur shadows instead of soft glows, and borders with enough contrast to read as deliberate edges. Every toggle/chip/icon-button below shares one of two component patterns (.chip or .icon-btn) rather than each having its own bespoke styling. Dark is the default theme; a [data-theme="light"] attribute on switches every variable below to the light set. See static/js/theme.js. */ :root { --color-bg: #0e1013; --color-surface: #16191e; --color-surface-muted: #1e222a; --color-border: #303643; --color-primary: #3b82f6; --color-primary-emphasis: #93c5fd; --color-primary-hover: #2563eb; --color-primary-light: #1c2b47; --color-primary-soft: #16223a; --color-on-accent: #0b1220; --color-text: #e7e9ee; --color-text-muted: #8b93a3; --color-success: #34d399; --color-success-light: #16332a; --color-danger: #f87171; --color-danger-light: #3a1f22; --color-warning: #fbbf24; --color-warning-light: #362a12; --radius: 6px; --radius-sm: 4px; --shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 2px 8px rgba(0, 0, 0, 0.3); --auth-gradient: linear-gradient(160deg, var(--color-bg), #16223a 60%, #1c355c 140%); /* Qualitative chart palette, one per application status — also the single source of truth for the status pills/select below, so a given status always reads as the same color everywhere in the app. */ --chart-saved: #6b7280; --chart-applied: #3b82f6; --chart-online_assessment: #22d3ee; --chart-interview: #fbbf24; --chart-offer: #34d399; --chart-rejected: #f87171; --chart-withdrawn: #78716c; /* Status badge (pill / inline select) colors — a translucent tint on dark. */ --status-saved-bg: rgba(107, 114, 128, 0.18); --status-saved-text: #9ca3af; --status-applied-bg: rgba(59, 130, 246, 0.16); --status-applied-text: #93c5fd; --status-online_assessment-bg: rgba(34, 211, 238, 0.16); --status-online_assessment-text: #67e8f9; --status-interview-bg: rgba(251, 191, 36, 0.16); --status-interview-text: #fcd34d; --status-offer-bg: rgba(52, 211, 153, 0.16); --status-offer-text: #6ee7b7; --status-rejected-bg: rgba(248, 113, 113, 0.16); --status-rejected-text: #fca5a5; --status-withdrawn-bg: rgba(120, 113, 108, 0.18); --status-withdrawn-text: #a8a29e; /* Qualitative palette for charts with no fixed category set (currently just the Found via breakdown) — cycled by index rather than keyed by name, since the categories are whatever the user has typed in Settings. */ --chart-cat-0: #3b82f6; --chart-cat-1: #34d399; --chart-cat-2: #fbbf24; --chart-cat-3: #f472b6; --chart-cat-4: #a78bfa; --chart-cat-5: #22d3ee; --chart-cat-6: #fb923c; --chart-cat-7: #8b93a3; } :root[data-theme="light"] { --color-bg: #f6f7f9; --color-surface: #ffffff; --color-surface-muted: #eef0f3; --color-border: #dbdfe6; --color-primary: #2563eb; --color-primary-emphasis: #1d4ed8; --color-primary-hover: #1e40af; --color-primary-light: #dbeafe; --color-primary-soft: #eff6ff; --color-on-accent: #ffffff; --color-text: #1a1d23; --color-text-muted: #667085; --color-success: #059669; --color-success-light: #d1fae5; --color-danger: #dc2626; --color-danger-light: #fee2e2; --color-warning: #d97706; --color-warning-light: #fef3c7; --shadow: 0 1px 2px rgba(16, 24, 40, 0.05), 0 2px 8px rgba(16, 24, 40, 0.06); --auth-gradient: linear-gradient(160deg, var(--color-bg), #e6ecfa 60%, #dbe6fb 140%); --chart-saved: #6b7280; --chart-applied: #2563eb; --chart-online_assessment: #0891b2; --chart-interview: #d97706; --chart-offer: #059669; --chart-rejected: #dc2626; --chart-withdrawn: #78716c; --status-saved-bg: #f1f2f4; --status-saved-text: #4b5563; --status-applied-bg: #dbeafe; --status-applied-text: #1d4ed8; --status-online_assessment-bg: #cffafe; --status-online_assessment-text: #0e7490; --status-interview-bg: #fef3c7; --status-interview-text: #b45309; --status-offer-bg: #d1fae5; --status-offer-text: #047857; --status-rejected-bg: #fee2e2; --status-rejected-text: #b91c1c; --status-withdrawn-bg: #f1f0ef; --status-withdrawn-text: #57534e; --chart-cat-0: #2563eb; --chart-cat-1: #059669; --chart-cat-2: #d97706; --chart-cat-3: #db2777; --chart-cat-4: #7c3aed; --chart-cat-5: #0891b2; --chart-cat-6: #ea580c; --chart-cat-7: #667085; } * { box-sizing: border-box; } /* Reserve the scrollbar's width whether or not it's currently needed, so expanding an accordion group (which can push the page past the fold and bring the scrollbar in) doesn't shift everything left by its width. */ html { scrollbar-gutter: stable; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--color-bg); color: var(--color-text); line-height: 1.5; transition: background 0.15s ease, color 0.15s ease; } a { color: var(--color-primary); transition: color 0.15s ease; } a:hover { color: var(--color-primary-emphasis); } .container { max-width: 1080px; margin: 0 auto; padding: 0 24px 48px; } /* ---- Nav ---- */ .nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); margin-bottom: 32px; } .nav-inner { max-width: 1080px; margin: 0 auto; padding: 14px 24px; display: flex; align-items: center; gap: 24px; } .nav-brand { display: flex; align-items: center; gap: 10px; font-weight: 800; color: var(--color-text); text-decoration: none; font-size: 1.1rem; letter-spacing: -0.01em; margin-right: auto; } .nav-logo { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm); background: var(--color-primary); color: #fff; font-weight: 900; font-size: 0.95rem; } .nav-links { display: flex; gap: 4px; align-items: center; } .nav-links a { color: var(--color-text-muted); text-decoration: none; font-size: 0.88rem; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-sm); transition: color 0.15s ease, background 0.15s ease; } .nav-links a:hover { color: var(--color-text); background: var(--color-surface-muted); } .nav-links form { display: inline; margin-left: 6px; } .nav-user { font-size: 0.85rem; color: var(--color-text-muted); margin-left: 6px; } .badge-admin { background: var(--color-primary-light); color: var(--color-primary-emphasis); font-size: 0.66rem; font-weight: 700; padding: 2px 6px; border-radius: var(--radius-sm); margin-left: 6px; text-transform: uppercase; letter-spacing: 0.03em; } /* ---- Shared small components: icon buttons + chips ---- Every icon-only control (theme toggle, edit/open-link icons in tables) uses .icon-btn; every small toggle/filter control (status filters, group toggle) uses .chip. One shape, one border treatment, one hover style. */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--color-text-muted); text-decoration: none; cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .icon-btn:hover { color: var(--color-primary); background: var(--color-surface-muted); border-color: var(--color-border); } .icon-btn svg { width: 15px; height: 15px; } .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; } .chip { display: inline-flex; align-items: center; gap: 4px; padding: 5px 11px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 600; text-decoration: none; border: 1px solid var(--color-border); background: transparent; color: var(--color-text-muted); cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .chip:hover { border-color: var(--color-primary); color: var(--color-primary); } .chip.active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-on-accent); } /* ---- View-as banner ---- */ .viewing-banner { background: var(--color-primary); color: var(--color-on-accent); padding: 10px 24px; display: flex; justify-content: center; align-items: center; gap: 12px; font-size: 0.88rem; font-weight: 600; } .viewing-banner form { display: inline; } .viewing-banner button { background: rgba(0, 0, 0, 0.15); border: 1px solid rgba(0, 0, 0, 0.3); color: var(--color-on-accent); padding: 4px 10px; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.82rem; font-weight: 600; transition: background 0.15s ease; } .viewing-banner button:hover { background: rgba(0, 0, 0, 0.25); } /* ---- Cards / surfaces ---- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 20px; box-shadow: var(--shadow); margin-bottom: 20px; } .card h2, .card h3 { margin-top: 0; color: var(--color-text); font-weight: 700; } /* ---- Auth pages ---- */ .auth-shell { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--auth-gradient); } .auth-card { width: 100%; max-width: 380px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow); } .auth-card h1 { font-size: 1.35rem; margin: 0 0 4px; color: var(--color-text); font-weight: 800; } .auth-card p.subtitle { color: var(--color-text-muted); margin-top: 0; margin-bottom: 24px; font-size: 0.9rem; } .auth-footer { margin-top: 20px; font-size: 0.85rem; color: var(--color-text-muted); text-align: center; } /* ---- Forms ---- */ label { display: block; font-size: 0.85rem; font-weight: 600; margin-bottom: 4px; color: var(--color-text); } input[type="text"], input[type="email"], input[type="password"], input[type="date"], input[type="datetime-local"], input[type="url"], textarea, select { width: 100%; padding: 9px 11px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); font-size: 0.95rem; background: var(--color-bg); color: var(--color-text); margin-bottom: 16px; font-family: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, textarea:focus, select:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); } textarea { resize: vertical; min-height: 80px; } .btn { display: inline-block; background: var(--color-primary); color: var(--color-on-accent); border: 1px solid var(--color-primary); padding: 9px 16px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 700; cursor: pointer; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease; } .btn:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); color: var(--color-on-accent); } .btn:active { transform: translateY(1px); } .btn-block { width: 100%; text-align: center; } .btn-secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); } .btn-secondary:hover { background: var(--color-surface-muted); border-color: var(--color-border); } .btn-danger { background: var(--color-danger); color: var(--color-on-accent); border-color: var(--color-danger); } .btn-danger:hover { background: #ef4444; border-color: #ef4444; color: #fff; } .btn-sm { padding: 5px 10px; font-size: 0.78rem; } .form-row { display: flex; gap: 16px; } .form-row > div { flex: 1; } .form-status { font-size: 0.82rem; color: var(--color-text-muted); margin-left: 10px; } .checkbox-inline { display: flex; align-items: center; gap: 6px; margin-top: 8px; font-size: 0.88rem; color: var(--color-text-muted); font-weight: 500; cursor: pointer; } .checkbox-inline input[type="checkbox"] { width: auto; margin: 0; } /* ---- Alerts ---- */ .alert { padding: 11px 14px; border-radius: var(--radius-sm); font-size: 0.88rem; margin-bottom: 18px; border: 1px solid transparent; } .alert-error { background: var(--color-danger-light); color: var(--color-danger); border-color: var(--color-danger-light); } .alert-success { background: var(--color-success-light); color: var(--color-success); border-color: var(--color-success-light); } .alert-info { background: var(--color-primary-light); color: var(--color-primary-emphasis); border-color: var(--color-primary-light); } .alert code { display: block; margin-top: 8px; padding: 8px 10px; background: var(--color-surface-muted); color: var(--color-text); border-radius: var(--radius-sm); word-break: break-all; font-size: 0.82rem; } /* ---- Stat cards ---- */ .stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin-bottom: 24px; } .stat-card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 16px; text-align: center; } .stat-card .stat-value { font-size: 1.7rem; font-weight: 800; color: var(--color-text); } .stat-card .stat-label { font-size: 0.76rem; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.04em; font-weight: 600; } /* ---- Charts ---- */ .charts-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; margin-bottom: 20px; } @media (max-width: 720px) { .charts-grid { grid-template-columns: 1fr; } } .chart-card { display: flex; flex-direction: column; align-items: center; } .donut-chart { width: 220px; height: 220px; } .donut-segment { transition: stroke-width 0.15s ease; } .donut-segment:hover { stroke-width: 32; } .donut-center-value { fill: var(--color-text); font-size: 2rem; font-weight: 800; font-family: inherit; } .donut-center-label { fill: var(--color-text-muted); font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.04em; font-family: inherit; } .chart-legend { list-style: none; padding: 0; margin: 16px 0 0; width: 100%; font-size: 0.85rem; } .chart-legend li { display: flex; align-items: center; gap: 8px; padding: 3px 0; color: var(--color-text-muted); } .legend-swatch { width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0; } .funnel-card { align-items: stretch; } .funnel-chart { width: 100%; } .funnel-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; } .funnel-label { width: 110px; flex-shrink: 0; font-size: 0.82rem; color: var(--color-text-muted); } .funnel-track { flex: 1; background: var(--color-surface-muted); border-radius: var(--radius-sm); height: 16px; overflow: hidden; } .funnel-bar { height: 100%; transition: width 0.3s ease; min-width: 2px; } .funnel-count { width: 28px; text-align: right; font-size: 0.82rem; font-weight: 700; color: var(--color-text); } .funnel-terminal-outcomes { display: flex; gap: 8px; margin-top: 16px; flex-wrap: wrap; } .terminal-chip { padding: 4px 10px; border-radius: var(--radius-sm); font-size: 0.76rem; font-weight: 600; } .terminal-chip-rejected { background: var(--color-danger-light); color: var(--color-danger); } .terminal-chip-withdrawn { background: var(--color-surface-muted); color: var(--color-text-muted); } /* ---- Tables ---- */ table { width: 100%; border-collapse: collapse; } th, td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--color-border); font-size: 0.88rem; } th { color: var(--color-text-muted); font-weight: 700; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; } tr:last-child td { border-bottom: none; } tbody tr { transition: background 0.1s ease; } tbody tr:hover { background: var(--color-surface-muted); } td.actions, th.actions { text-align: right; white-space: nowrap; } .sortable-th { cursor: pointer; user-select: none; } .sortable-th:hover { color: var(--color-primary); } .sort-indicator { opacity: 0.7; margin-left: 2px; } /* ---- Applications list: company/date accordion, search, inline status ---- */ .list-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; } .list-toolbar-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .list-toolbar .filters { margin-bottom: 0; flex: 1; } .list-search { max-width: 240px; margin: 0; flex-shrink: 0; } .group-toggle { display: flex; align-items: center; gap: 6px; flex-shrink: 0; } .group-toggle-label { font-size: 0.8rem; color: var(--color-text-muted); font-weight: 600; margin-right: 2px; } .table-scroll { overflow-x: auto; } /* Fixed layout + explicit widths (in the template) so column headers stay put regardless of which accordion groups are open — with table-layout: auto, the header shifts to fit whichever rows are currently visible, since collapsed groups' rows are removed from layout via [hidden]. */ #applications-table { table-layout: fixed; width: 100%; } #applications-table th, #applications-table td { padding: 7px 10px; font-size: 0.85rem; } /* Belt-and-braces: with table-layout: fixed, a column's width never grows to fit its content — but a child with its own intrinsic sizing (namely the status