/* Forentrics dashboard — visual language adapted from hemovision.be Palette extracted from production CSS on www.hemovision.be (Oxygen builder). Primary deep teal #08636c matches the Forentrics shield/network logo. */ :root { /* Lets native form controls (date/time pickers, scrollbars, etc.) render with matching chrome. Theme here is a manual toggle (data-theme), not prefers-color-scheme, so this is pinned to "light" and flipped explicitly in the [data-theme="dark"] override below — never "light dark", which would let the OS preference fight the site's own toggle. */ color-scheme: light; /* brand — deep teal of the Forentrics mark */ --color-brand: #08636c; --color-brand-hover: #0f2833; --color-brand-soft: #eaf2f3; --color-brand-line: #cfe0e2; /* secondary slate — hemovision body / link tone */ --color-slate: #566d8f; --color-slate-soft: #eff4f7; /* warm gold accent — used sparingly for highlights / CTAs */ --color-accent: #d9a647; --color-accent-hover: #b88a32; --color-accent-soft: #f6ecd2; /* warm cream — hemovision hero / section background */ --color-cream: #e4e0db; /* semantic */ --color-success: #65bec2; --color-success-ink: #0f5a5d; --color-success-soft: #e6f4f5; --color-warning: #d9a647; --color-warning-ink: #7a5a17; --color-warning-soft: #fbf1d8; --color-danger: #b94545; --color-danger-ink: #842c2c; --color-danger-soft: #f6e3e0; /* surfaces */ --color-bg: #fafafa; --color-surface: #ffffff; --color-surface-muted: #f5f7f8; /* text */ --color-text: #0f2833; --color-text-muted: #566d8f; --color-text-dim: #8a9bb0; /* borders */ --color-border: #e1e6ea; --color-border-strong: #cfd7de; --radius-sm: 6px; --radius-md: 10px; --radius-lg: 16px; --shadow-sm: 0 1px 2px rgba(15, 40, 51, 0.05); --shadow-md: 0 4px 14px rgba(15, 40, 51, 0.08); --shadow-lg: 0 14px 36px rgba(15, 40, 51, 0.12); --font-sans: "Catamaran", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; } /* ---------- dark theme ---------- Toggled by setting data-theme="dark" on (see _nav.html / base.html). Selection is remembered in localStorage; this override wins on specificity over the :root defaults above, no !important needed. */ :root[data-theme="dark"] { color-scheme: dark; --color-brand: #4fb3bd; --color-brand-hover: #7ecdd5; --color-brand-soft: rgba(79, 179, 189, 0.14); --color-brand-line: rgba(79, 179, 189, 0.35); --color-slate: #9fb3cc; --color-slate-soft: rgba(86, 109, 143, 0.18); --color-accent: #d9a647; --color-accent-hover: #eabb63; --color-accent-soft: rgba(217, 166, 71, 0.16); --color-cream: #e4e0db; --color-success: #6fd0da; --color-success-ink: #8fe0e3; --color-success-soft: rgba(101, 190, 194, 0.15); --color-warning: #d9a647; --color-warning-ink: #e8c176; --color-warning-soft: rgba(217, 166, 71, 0.15); --color-danger: #e0807f; --color-danger-ink: #f0a8a8; --color-danger-soft: rgba(185, 69, 69, 0.2); --color-bg: #0d161d; --color-surface: #16232b; --color-surface-muted: #1c2b34; --color-text: #e7edf0; --color-text-muted: #9db2c4; --color-text-dim: #6f8595; --color-border: #263540; --color-border-strong: #34424d; --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 4px 14px rgba(0, 0, 0, 0.35); --shadow-lg: 0 14px 36px rgba(0, 0, 0, 0.45); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; font-family: var(--font-sans); font-size: 15px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; transition: background-color 0.15s ease, color 0.15s ease; } a { color: var(--color-brand); text-decoration: none; transition: color 0.15s ease; } a:hover { color: var(--color-brand-hover); } h1, h2, h3, h4 { font-weight: 700; letter-spacing: -0.01em; color: var(--color-text); margin: 0 0 0.5em; } h1 { font-size: 2rem; line-height: 1.15; } h2 { font-size: 1.35rem; } h3 { font-size: 1.1rem; } .eyebrow { display: inline-block; text-transform: uppercase; letter-spacing: 0.16em; font-size: 0.72rem; font-weight: 700; color: var(--color-brand); margin-bottom: 0.5rem; } .muted { color: var(--color-text-muted); } .dim { color: var(--color-text-dim); } .mono { font-family: var(--font-mono); font-size: 0.92em; } /* ---------- layout ---------- */ .app-nav { background: var(--color-surface); border-bottom: 1px solid var(--color-border); position: sticky; top: 0; z-index: 30; } .app-nav-inner { max-width: 1280px; margin: 0 auto; padding: 0 24px; height: 64px; display: flex; align-items: center; gap: 32px; } .app-nav .brand { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--color-text); letter-spacing: 0.01em; } .app-nav .brand .brand-mark { height: 32px; width: auto; flex: 0 0 auto; } .app-nav nav { display: flex; gap: 4px; flex: 1; } .app-nav nav a { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 600; font-size: 0.92rem; } .app-nav nav a:hover { background: var(--color-brand-soft); color: var(--color-brand); } .app-nav nav a.active { background: var(--color-brand-soft); color: var(--color-brand); } .app-nav .user-chip { display: flex; align-items: center; gap: 10px; font-size: 0.9rem; color: var(--color-text-muted); } .app-nav .user-chip form { display: inline; } /* ---------- theme toggle switch ---------- */ .theme-toggle { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; user-select: none; } .theme-toggle input { position: absolute; opacity: 0; width: 1px; height: 1px; } .theme-toggle .switch-track { position: relative; width: 44px; height: 24px; border-radius: 999px; background: var(--color-border-strong); transition: background 0.2s ease; flex: 0 0 auto; } /* faint fixed sun/moon marks in the track, revealed as the thumb passes over them */ .theme-toggle .switch-track .track-icon { position: absolute; top: 50%; width: 12px; height: 12px; transform: translateY(-50%); color: var(--color-surface); opacity: 0.9; } .theme-toggle .switch-track .track-icon.icon-sun { left: 5px; } .theme-toggle .switch-track .track-icon.icon-moon { right: 5px; } .theme-toggle .switch-thumb { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: var(--color-surface); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3); transition: transform 0.2s ease; display: flex; align-items: center; justify-content: center; } .theme-toggle .switch-thumb .icon { position: absolute; width: 13px; height: 13px; transition: opacity 0.15s ease, transform 0.25s ease; } .theme-toggle .switch-thumb .icon-sun { color: var(--color-accent); opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle .switch-thumb .icon-moon { color: var(--color-brand); opacity: 0; transform: rotate(45deg) scale(0.5); } .theme-toggle input:checked + .switch-track { background: var(--color-brand); } .theme-toggle input:checked + .switch-track .switch-thumb { transform: translateX(20px); } .theme-toggle input:checked + .switch-track .switch-thumb .icon-sun { opacity: 0; transform: rotate(-45deg) scale(0.5); } .theme-toggle input:checked + .switch-track .switch-thumb .icon-moon { opacity: 1; transform: rotate(0deg) scale(1); } .theme-toggle input:focus-visible + .switch-track { box-shadow: 0 0 0 3px var(--color-brand-line); } /* Nav dropdown ("My organisation") — plain
/, no JS required for the disclosure itself; every link inside does a full navigation anyway, so the open/closed state never needs to persist. */ .app-nav nav details { position: relative; } .app-nav nav details > summary { padding: 8px 14px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 600; font-size: 0.92rem; cursor: pointer; list-style: none; display: flex; align-items: center; gap: 6px; user-select: none; } .app-nav nav details > summary::-webkit-details-marker { display: none; } .app-nav nav details > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); margin-top: -4px; opacity: 0.7; } .app-nav nav details > summary:hover, .app-nav nav details[open] > summary, .app-nav nav details > summary.active { background: var(--color-brand-soft); color: var(--color-brand); } .app-nav nav details .dropdown-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 180px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12); padding: 6px; display: flex; flex-direction: column; gap: 2px; z-index: 40; } .app-nav nav details .dropdown-menu a { padding: 8px 10px; border-radius: var(--radius-sm); color: var(--color-text-muted); font-weight: 600; font-size: 0.9rem; } .app-nav nav details .dropdown-menu a:hover, .app-nav nav details .dropdown-menu a.active { background: var(--color-brand-soft); color: var(--color-brand); } main.shell { max-width: 1280px; margin: 0 auto; padding: 40px 24px 80px; } .page-header { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 32px; flex-wrap: wrap; } .page-header h1 { margin: 0; } .page-header p.lede { color: var(--color-text-muted); margin: 4px 0 0; max-width: 60ch; } /* ---------- grid ---------- */ .grid { display: grid; gap: 20px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4 { grid-template-columns: 1fr; } } /* ---------- cards ---------- */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: 24px; box-shadow: var(--shadow-sm); } .card.tight { padding: 18px 20px; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .card-head h2, .card-head h3 { margin: 0; } .card .subtitle { color: var(--color-text-muted); margin-top: -4px; margin-bottom: 16px; } /* stat tiles */ .stat { display: flex; flex-direction: column; gap: 6px; } .stat .label { text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.72rem; color: var(--color-text-dim); font-weight: 700; } .stat .value { font-size: 2rem; font-weight: 800; line-height: 1; letter-spacing: -0.02em; color: var(--color-brand-hover); } .stat .hint { color: var(--color-text-muted); font-size: 0.85rem; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 18px; border-radius: 999px; font-family: inherit; font-weight: 700; font-size: 0.92rem; letter-spacing: 0.01em; border: 1px solid transparent; cursor: pointer; transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.05s ease; text-decoration: none; } .btn:active { transform: translateY(1px); } .btn.primary { background: var(--color-brand); color: white; } .btn.primary:hover { background: var(--color-brand-hover); color: white; } .btn.accent { background: var(--color-accent); color: #2a1f08; } .btn.accent:hover { background: var(--color-accent-hover); color: white; } .btn.ghost { background: transparent; color: var(--color-brand); border-color: var(--color-brand-line); } .btn.ghost:hover { background: var(--color-brand-soft); } .btn.danger { background: transparent; color: var(--color-danger-ink); border-color: #e7c2bd; } .btn.danger:hover { background: var(--color-danger-soft); } .btn.small { padding: 6px 12px; font-size: 0.82rem; } /* ---------- forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; } .field label { font-weight: 600; font-size: 0.85rem; color: var(--color-text); } .field .hint { color: var(--color-text-dim); font-size: 0.8rem; } input[type="text"], input[type="email"], input[type="password"], input[type="number"], input[type="datetime-local"], select, textarea { font-family: inherit; font-size: 0.95rem; padding: 10px 14px; border: 1px solid var(--color-border-strong); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text); outline: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } input:focus, select:focus, textarea:focus { border-color: var(--color-brand); box-shadow: 0 0 0 3px rgba(8, 99, 108, 0.18); } .alert { padding: 12px 16px; border-radius: var(--radius-sm); font-size: 0.9rem; margin-bottom: 16px; } .alert.error { background: var(--color-danger-soft); color: var(--color-danger-ink); border: 1px solid #e7c2bd; } .alert.success { background: var(--color-success-soft); color: var(--color-success-ink); border: 1px solid #b8dfe1; } .alert.info { background: var(--color-brand-soft); color: var(--color-brand-hover); border: 1px solid var(--color-brand-line); } /* ---------- table ---------- */ .table { width: 100%; border-collapse: collapse; font-size: 0.93rem; } .table th, .table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--color-border); } .table th { font-weight: 700; color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.74rem; } .table tbody tr:last-child td { border-bottom: none; } .table tbody tr:hover { background: var(--color-surface-muted); } .badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.02em; } .badge.brand { background: var(--color-brand-soft); color: var(--color-brand); } .badge.success { background: var(--color-success-soft); color: var(--color-success-ink); } .badge.warning { background: var(--color-warning-soft); color: var(--color-warning-ink); } .badge.danger { background: var(--color-danger-soft); color: var(--color-danger-ink); } .badge.neutral { background: var(--color-surface-muted); color: var(--color-text-muted); } .badge .dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; } /* ---------- org overview table (sleek, minimal — scoped) ---------- */ .table-shell { border: 1px solid var(--color-border); border-radius: var(--radius-md); background: var(--color-surface); box-shadow: var(--shadow-sm); overflow-x: auto; } .org-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .org-table th, .org-table td { padding: 15px 16px; text-align: left; vertical-align: middle; border-bottom: 1px solid var(--color-border); } .org-table thead th { padding-top: 11px; padding-bottom: 11px; background: var(--color-surface-muted); border-bottom: 1px solid var(--color-border-strong); color: var(--color-text-dim); font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; } .org-table tbody tr { transition: background 0.12s ease; } .org-table tbody tr:hover { background: var(--color-surface-muted); } .org-table tbody tr:last-child td { border-bottom: none; } /* a touch more breathing room against the frame */ .org-table th:first-child, .org-table td:first-child { padding-left: 20px; } .org-table th:last-child, .org-table td:last-child { padding-right: 20px; } /* numeric band: right-aligned, tabular figures so columns line up */ .org-table .num { text-align: right; font-variant-numeric: tabular-nums; } .org-table .count-link { color: var(--color-text); font-weight: 600; } .org-table .count-link:hover { color: var(--color-brand); } /* organisation cell */ .org-table .org-name { font-weight: 700; color: var(--color-text); letter-spacing: -0.01em; } .org-table .org-email { display: block; max-width: 300px; margin-top: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.8rem; color: var(--color-text-dim); } /* quieter, smaller badges inside the table */ .org-table .badge { padding: 3px 9px; font-size: 0.72rem; font-weight: 600; white-space: nowrap; } /* renewal date / label stays on one line, tabular figures */ .org-table .col-renews { white-space: nowrap; font-variant-numeric: tabular-nums; } /* subtle outline tags (Personal / Workshop / Archived) */ .row-tag { display: inline-block; margin-left: 8px; padding: 1px 7px; border: 1px solid var(--color-border-strong); border-radius: 999px; font-size: 0.62rem; font-weight: 700; letter-spacing: 0.07em; text-transform: uppercase; color: var(--color-text-muted); vertical-align: 2px; } .row-tag.workshop { border-color: var(--color-brand-line); background: var(--color-brand-soft); color: var(--color-brand); } /* row actions: evenly sized, whisper-quiet until hover */ .org-table .col-actions { text-align: right; white-space: nowrap; } .row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; } .row-actions form { display: contents; } .row-actions .btn { height: 30px; padding: 0 11px; font-size: 0.8rem; font-weight: 600; border-radius: var(--radius-sm); background: transparent; border-color: transparent; color: var(--color-text-muted); } .row-actions .btn:hover { background: var(--color-brand-soft); color: var(--color-brand); } .row-actions .btn.danger { color: var(--color-text-muted); } .row-actions .btn.danger:hover { background: var(--color-danger-soft); color: var(--color-danger-ink); } .org-empty { text-align: center; padding: 36px 24px; color: var(--color-text-dim); } /* ---------- list toolbar / filters / pagination ---------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-bottom: 14px; } .toolbar .search-wrap { position: relative; flex: 1 1 280px; min-width: 200px; } .toolbar .search { width: 100%; padding: 8px 12px; font-size: 0.9rem; } .toolbar select { padding: 8px 12px; font-size: 0.9rem; } /* Tiny spinner shown (via htmx) while a live search/filter request is in flight. */ .search-indicator { position: absolute; top: 50%; right: 12px; width: 14px; height: 14px; margin-top: -7px; border-radius: 50%; border: 2px solid var(--color-brand-line); border-top-color: var(--color-brand); animation: spin 0.6s linear infinite; opacity: 0; transition: opacity 0.15s ease; } .search-indicator.htmx-request { opacity: 1; } @keyframes spin { to { transform: rotate(360deg); } } .result-summary { display: flex; align-items: baseline; gap: 10px; margin: 0 2px 12px; font-size: 0.85rem; color: var(--color-text-dim); } .result-summary .clear-filters { font-weight: 600; } /* Sortable column headers. */ .th-sort { display: inline-flex; align-items: center; gap: 5px; color: inherit; text-decoration: none; cursor: pointer; } .th-sort:hover { color: var(--color-brand); } .th-sort.active { color: var(--color-text); } .th-sort .sort-caret { font-size: 0.72em; line-height: 1; } .th-sort:not(.active) .sort-caret { opacity: 0; transition: opacity 0.12s ease; } .th-sort:not(.active):hover .sort-caret { opacity: 0.4; } /* Inline usage / renewal cues inside table cells. */ .usage-full { color: var(--color-warning-ink); font-weight: 600; } .renews-soon { color: var(--color-warning-ink); font-weight: 600; } .renews-expired { color: var(--color-danger-ink); font-weight: 600; } .renews-none { color: var(--color-text-dim); } /* ---------- numbered pager ---------- */ .pagination { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px; margin-top: 18px; } .page-btn { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 36px; padding: 0 10px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); color: var(--color-text-muted); font-size: 0.88rem; font-weight: 600; text-decoration: none; transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease; } .page-btn:hover { background: var(--color-brand-soft); border-color: var(--color-brand-line); color: var(--color-brand); } .page-btn.current { background: var(--color-brand); border-color: var(--color-brand); color: #fff; cursor: default; } .page-btn.disabled { opacity: 0.4; pointer-events: none; } .page-btn.page-step { font-weight: 700; } .page-gap { display: inline-flex; align-items: flex-end; padding: 0 4px; color: var(--color-text-dim); } @media (max-width: 560px) { .page-step-label { display: none; } } /* ---------- login page (centered) ---------- */ .auth-stage { min-height: 100vh; background: radial-gradient(at 18% 12%, rgba(8, 99, 108, 0.55) 0%, transparent 55%), radial-gradient(at 82% 88%, rgba(7, 20, 28, 0.7) 0%, transparent 60%), linear-gradient(155deg, #08636c 0%, #0f2833 60%, #06141c 100%); display: flex; align-items: center; justify-content: center; padding: 56px 24px; position: relative; overflow: hidden; color: var(--color-cream); } .auth-glow { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(8px); z-index: 0; } .auth-glow-gold { width: 620px; height: 620px; top: -200px; right: -180px; background: radial-gradient(circle, rgba(217, 166, 71, 0.32), transparent 65%); } .auth-glow-teal { width: 520px; height: 520px; bottom: -200px; left: -160px; background: radial-gradient(circle, rgba(101, 190, 194, 0.26), transparent 60%); } .auth-frame { position: relative; z-index: 1; width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: 40px; } .brand-lockup { display: flex; align-items: center; gap: 18px; } .brand-lockup .brand-mark { height: 68px; width: auto; flex: 0 0 auto; } .brand-lockup-text { display: flex; flex-direction: column; line-height: 1; } .brand-lockup-wordmark { font-family: "Exo 2", var(--font-sans); font-weight: 600; font-size: 2.15rem; letter-spacing: 0.03em; color: var(--color-cream); } .brand-lockup-tagline { font-family: "Exo 2", var(--font-sans); font-weight: 600; font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: #65bec2; margin-top: 10px; } .auth-card { width: 100%; background: var(--color-surface); border-radius: var(--radius-lg); padding: 40px 36px 36px; box-shadow: 0 30px 60px -20px rgba(6, 20, 28, 0.55), 0 8px 22px -10px rgba(6, 20, 28, 0.4); border: 1px solid rgba(228, 224, 219, 0.08); color: var(--color-text); } .auth-card .eyebrow { margin-bottom: 8px; } .auth-card h1 { font-size: 1.55rem; margin: 0 0 6px; color: var(--color-brand-hover); } .auth-card p.lede { color: var(--color-text-muted); margin: 0 0 24px; font-size: 0.95rem; } .auth-card .field:last-of-type { margin-bottom: 22px; } .auth-submit { width: 100%; padding: 12px 18px; font-size: 0.98rem; } .auth-card-meta { margin: 22px 0 0; text-align: center; font-size: 0.82rem; color: var(--color-text-muted); } .auth-foot { font-size: 0.78rem; color: rgba(228, 224, 219, 0.55); letter-spacing: 0.04em; text-align: center; } @media (max-width: 540px) { .auth-stage { padding: 36px 18px; } .auth-frame { gap: 30px; } .brand-lockup { gap: 14px; } .brand-lockup .brand-mark { height: 56px; } .brand-lockup-wordmark { font-size: 1.7rem; } .brand-lockup-tagline { font-size: 0.62rem; } .auth-card { padding: 30px 24px 26px; } .auth-card h1 { font-size: 1.35rem; } } /* ---------- modal-ish dialog (for activation code reveal) ---------- */ .reveal { background: var(--color-brand-soft); border: 1px dashed var(--color-brand-line); border-radius: var(--radius-md); padding: 24px; text-align: center; } .reveal .code { font-family: var(--font-mono); font-size: 1.8rem; font-weight: 700; color: var(--color-brand); letter-spacing: 0.15em; margin: 12px 0; } /* ---------- utility ---------- */ .row { display: flex; align-items: center; gap: 12px; } .row.between { justify-content: space-between; } .row.wrap { flex-wrap: wrap; } .stack { display: flex; flex-direction: column; gap: 8px; } .hidden { display: none !important; } .htmx-indicator { display: none; } .htmx-request .htmx-indicator { display: inline-flex; } .htmx-request.htmx-indicator { display: inline-flex; } .spinner { width: 14px; height: 14px; border: 2px solid var(--color-brand-line); border-top-color: var(--color-brand); border-radius: 50%; animation: spin 0.7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } /* ---------- activity monitor ---------- */ .hbar-row { display: grid; grid-template-columns: minmax(140px, 220px) 1fr 56px; align-items: center; gap: 14px; } .hbar-row > a { color: var(--color-text); } .hbar-row > a:hover { color: var(--color-brand); } .hbar-fill { height: 10px; background: var(--color-surface-muted); border-radius: 999px; overflow: hidden; } .hbar-fill > span { display: block; height: 100%; background: linear-gradient(90deg, var(--color-brand) 0%, var(--color-success) 100%); border-radius: 999px; transition: width 0.3s ease; } .spark { display: flex; align-items: flex-end; gap: 2px; height: 88px; padding: 8px 0 4px; } .spark-bar { flex: 1; min-width: 2px; background: var(--color-brand); border-radius: 2px 2px 0 0; transition: background 0.15s ease, opacity 0.15s ease; opacity: 0.85; } .spark-bar:hover { opacity: 1; background: var(--color-brand-hover); } .spark-bar.zero { background: var(--color-border); opacity: 0.5; min-height: 2px; } .activity-feed { display: flex; flex-direction: column; } .activity-item { display: grid; grid-template-columns: minmax(140px, 200px) 1fr auto; align-items: flex-start; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--color-border); } .activity-item:last-child { border-bottom: none; } .activity-event-badge { justify-self: start; align-self: center; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .activity-body { min-width: 0; } .activity-line { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: 0.92rem; } .activity-actor { font-weight: 600; color: var(--color-text); } .activity-meta { margin-top: 4px; display: flex; flex-wrap: wrap; gap: 6px; font-size: 0.78rem; color: var(--color-text-muted); } .meta-pill { background: var(--color-surface-muted); padding: 2px 8px; border-radius: 999px; max-width: 380px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meta-pill strong { color: var(--color-text); font-weight: 600; } .activity-time { text-align: right; font-size: 0.8rem; color: var(--color-text); white-space: nowrap; line-height: 1.3; } /* ---------- feature-flag picker ---------- */ .flag-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px; } .flag-option { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border: 1px solid var(--color-border); border-radius: var(--radius-sm); background: var(--color-surface); cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease; } .flag-option:hover { border-color: var(--color-brand-line); background: var(--color-surface-muted); } .flag-option input[type="checkbox"] { margin-top: 3px; accent-color: var(--color-brand); width: 16px; height: 16px; flex-shrink: 0; } .flag-option-body { min-width: 0; flex: 1; } .flag-option-key { font-family: var(--font-mono); font-size: 0.82rem; color: var(--color-text-muted); display: block; margin-top: 2px; } .flag-option-label { font-weight: 600; font-size: 0.92rem; color: var(--color-text); display: block; } .flag-option-desc { color: var(--color-text-muted); font-size: 0.82rem; margin-top: 4px; } .flag-option:has(input:checked) { border-color: var(--color-brand); background: var(--color-brand-soft); box-shadow: 0 0 0 1px var(--color-brand) inset; } .flag-empty { padding: 14px 16px; border: 1px dashed var(--color-border-strong); border-radius: var(--radius-sm); color: var(--color-text-muted); font-size: 0.9rem; } .flag-chip { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; background: var(--color-brand-soft); color: var(--color-brand-hover); font-family: var(--font-mono); font-size: 0.78rem; } .flag-usage-list { display: flex; flex-wrap: wrap; gap: 4px; }