/* Theme: shared CodeRed tokens (https://codered.lol/assets/tokens.css) flip with , set by cr-theme.js. Fallbacks keep the original dark look if tokens.css is missing a token; the light block's fallbacks cover the same for light. */ :root { color-scheme: dark; --surface: var(--cr-surface, rgba(22, 22, 26, 0.92)); --surface-strong: rgba(12, 12, 15, 0.96); --fill: var(--cr-surface-2, rgba(255, 255, 255, 0.04)); --field: rgba(0, 0, 0, 0.28); --text: var(--cr-heading, #f0f0f0); --muted: var(--cr-muted, #a0a0a0); --line: var(--cr-line, rgba(150, 60, 180, 0.3)); --line-strong: rgba(255, 14, 4, 0.34); --accent: #ff0e04; --accent-soft: var(--cr-accent, #ff4444); --accent-tint: var(--cr-accent-soft, rgba(255, 14, 4, 0.12)); --ok: #4ade80; --shadow: rgba(255, 14, 4, 0.18); --panel-shadow: 0 20px 60px rgba(0, 0, 0, 0.28); --page-bg: radial-gradient(circle at 12% 12%, rgba(255, 14, 4, 0.16), transparent 24rem), radial-gradient(circle at 86% 8%, rgba(0, 153, 229, 0.12), transparent 22rem), linear-gradient(135deg, #0a0202 0%, #1f050a 26%, #2f080c 58%, #1f050a 100%); } :root[data-theme="light"] { color-scheme: light; --surface: var(--cr-surface, #ffffff); --surface-strong: var(--cr-surface, #ffffff); --fill: var(--cr-surface-2, rgba(69, 0, 80, 0.04)); --field: var(--cr-surface, #ffffff); --text: var(--cr-heading, #1d1424); --muted: var(--cr-muted, #6b6275); --line: var(--cr-line, rgba(69, 0, 80, 0.12)); --line-strong: rgba(255, 14, 4, 0.28); --accent-soft: var(--cr-accent, #c70a02); --accent-tint: var(--cr-accent-soft, rgba(199, 10, 2, 0.08)); --ok: #1f8a4c; --shadow: rgba(255, 14, 4, 0.14); --panel-shadow: 0 1px 2px rgba(29, 20, 36, 0.06), 0 8px 24px rgba(29, 20, 36, 0.08); --page-bg: radial-gradient(circle at 12% 12%, rgba(255, 14, 4, 0.06), transparent 24rem), radial-gradient(circle at 86% 8%, rgba(0, 153, 229, 0.06), transparent 22rem), var(--cr-page, #fbf9fc); } * { box-sizing: border-box; } body { margin: 0; min-height: 100vh; background: var(--page-bg); background-attachment: fixed; color: var(--text); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } a { color: var(--accent-soft); text-decoration: none; } button, .button { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--accent); border-radius: 6px; background: linear-gradient(135deg, var(--accent), #b80b05); color: #ffffff; font: inherit; font-weight: 700; cursor: pointer; box-shadow: 0 12px 28px var(--shadow); } .button.secondary { background: var(--fill); color: var(--text); border-color: var(--line); box-shadow: none; } /* Header chrome (sticky, blur, border, theme toggle) comes from the shared ; only the portal's slotted brand + nav are styled here. */ .brand { display: inline-flex; align-items: center; gap: 14px; font-weight: 700; color: var(--text); } .brand img { display: block; width: 150px; height: auto; } .brand span { color: var(--muted); font-size: 14px; letter-spacing: 0; } .topnav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 6px 14px; padding: 8px 0; } .topnav form { margin: 0; } .user-menu:empty { display: none; } .user-menu { display: flex; align-items: center; } .shell { width: min(1080px, calc(100vw - 32px)); margin: 28px auto; } .page-head { margin-bottom: 20px; } .page-head.row { display: flex; align-items: center; justify-content: space-between; gap: 16px; } h1, h2, p { margin-top: 0; } h1 { font-size: 34px; letter-spacing: 0; } h2 { font-size: 18px; color: var(--text); } p, dd, small { color: var(--muted); } .grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .panel, .form, .auth, .table { border: 1px solid var(--line); border-radius: 8px; background: var(--surface); box-shadow: var(--panel-shadow); } .panel { padding: 18px; border-top-color: var(--line-strong); } /* Collapsible settings sections: native
/, no JS. */ details.panel > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; user-select: none; } details.panel > summary::-webkit-details-marker { display: none; } details.panel > summary h2 { margin: 0; } details.panel > summary::before { content: "\25B8"; /* ▸ */ color: var(--muted); font-size: 14px; transition: transform 0.15s ease; } details.panel[open] > summary::before { transform: rotate(90deg); } details.panel[open] > summary { margin-bottom: 16px; } dl { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 10px 14px; margin: 0; } dt { font-weight: 650; } dd { margin: 0; overflow-wrap: anywhere; } .actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; } .kimai-hint { margin: 14px 0 0; padding: 10px 12px; border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 6px; color: var(--muted); font-size: 0.9rem; line-height: 1.4; } .kimai-hint strong { color: var(--text); } .admin-links { width: min(1080px, calc(100vw - 32px)); margin: 48px auto 0; font-size: 0.78rem; } .admin-links a { color: var(--muted); text-decoration: none; } .admin-links a:hover { color: var(--text); } .field-pair { display: flex; gap: 12px; align-items: flex-start; } .field-pair label { flex: 1; } .muted-rate { color: var(--muted); } .placeholders code { display: inline-block; margin: 2px 4px 2px 0; padding: 2px 6px; border: 1px solid var(--line); border-radius: 4px; background: var(--surface); color: var(--accent-soft); font-size: 0.8rem; } .form, .auth { max-width: 720px; padding: 20px; } .auth { margin: 44px auto; max-width: 520px; border-color: var(--line-strong); background: linear-gradient(180deg, rgba(255, 14, 4, 0.08), transparent 34%), var(--surface-strong); } .auth-logo { display: block; width: 64px; height: auto; margin-bottom: 18px; } .form label, .form .field { display: grid; gap: 6px; margin-bottom: 14px; font-weight: 650; } .form label.error { --line: #ff0e04; --accent: #ff0e04; } .form label.error input, .form label.error select, .form label.error textarea { border-color: var(--line); outline: 2px solid rgba(255, 14, 4, 0.2); } input, select, textarea { width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; } input:focus, select:focus, textarea:focus { border-color: var(--accent); outline: 2px solid rgba(255, 14, 4, 0.2); } textarea { min-height: 140px; } .form-actions { display: flex; align-items: center; gap: 12px; } .messages { display: grid; gap: 8px; margin-bottom: 16px; } .form-messages { margin-bottom: 16px; } /* Custom preset picker */ .preset-picker { position: relative; width: 100%; } .preset-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 38px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--field); color: var(--text); font: inherit; font-weight: 650; cursor: pointer; text-align: left; } .preset-trigger:hover { border-color: var(--accent); } .preset-trigger:focus { border-color: var(--accent); outline: 2px solid rgba(255, 14, 4, 0.2); } .preset-arrow { font-size: 0.7rem; color: var(--muted); margin-left: 8px; } .preset-options { position: absolute; top: 100%; left: 0; right: 0; margin-top: 4px; padding: 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); box-shadow: var(--panel-shadow); list-style: none; max-height: 300px; overflow-y: auto; z-index: 10; } .preset-options li { padding: 8px 10px; cursor: pointer; border-radius: 4px; white-space: normal; } .preset-options li:hover, .preset-options li:focus { background: var(--accent-tint); } .preset-options li strong { display: block; font-weight: 700; } .preset-options li small { display: block; margin-top: 2px; color: var(--muted); font-size: 0.8rem; } .message { padding: 10px 12px; border: 1px solid var(--line); border-radius: 6px; background: var(--surface); } .message.success { border-color: #16a34a; } .message.warning { border-color: #d97706; } .table { width: 100%; border-collapse: separate; border-spacing: 0; overflow: hidden; } .table th, .table td { padding: 12px; border-bottom: 1px solid var(--line); text-align: left; } .table th { background: rgba(255, 14, 4, 0.08); } @media (max-width: 760px) { .page-head.row { align-items: flex-start; flex-direction: column; } .brand img { width: 110px; } .brand span { display: none; } .grid { grid-template-columns: 1fr; } .table { display: block; overflow-x: auto; } } /* --- Paid/Unpaid status badges + filter tabs ----------------------------- */ .badge { display: inline-block; padding: 2px 10px; border-radius: 999px; border: 1px solid var(--line); font-size: 0.8rem; font-weight: 700; white-space: nowrap; } .badge.paid { color: var(--ok); border-color: rgba(22, 163, 74, 0.55); background: rgba(22, 163, 74, 0.12); } .badge.unpaid { color: var(--muted); border-color: var(--line); background: var(--fill); } .filter-tabs { display: inline-flex; gap: 4px; margin: 0 0 14px; padding: 4px; border: 1px solid var(--line); border-radius: 8px; background: var(--fill); } .filter-tabs a { padding: 6px 14px; border-radius: 6px; color: var(--muted); font-weight: 600; } .filter-tabs a.active { color: #ffffff; background: linear-gradient(135deg, var(--accent), #b80b05); box-shadow: 0 6px 16px var(--shadow); } /* Actions cell: keep the Preview link and the inline Mark-paid form on one row. */ .row-actions { display: flex; align-items: center; gap: 12px; } .row-actions form { margin: 0; } /* A button that reads like a link (used for the inline Paid toggle). */ .linkbtn { min-height: 0; padding: 0; border: none; border-radius: 0; background: none; color: var(--accent-soft); font-weight: 600; box-shadow: none; } .linkbtn:hover { text-decoration: underline; } .linkbtn:disabled, .linkbtn:disabled:hover { color: var(--muted); cursor: not-allowed; text-decoration: none; } /* Dashboard headline stats: FY revenue + next-billing estimate. */ .stat-row { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 18px; } .stat { flex: 1 1 200px; display: flex; flex-direction: column; gap: 4px; padding: 14px 18px; border: 1px solid var(--line); border-radius: 10px; background: var(--fill); } .stat-label { font-size: 0.8rem; color: var(--muted); font-weight: 600; } .stat-value { font-size: 1.6rem; font-weight: 800; line-height: 1.1; } .stat-value.revenue { color: var(--ok); } .billing-breakdown { margin: 0 0 18px; } .billing-breakdown summary { cursor: pointer; color: var(--muted); font-weight: 600; } .billing-breakdown .table { margin-top: 10px; } /* Invoices toolbar: filter tabs on the left, destructive action on the right. */ .list-toolbar { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; } button.danger { background: none; border: 1px solid rgba(255, 14, 4, 0.5); color: var(--accent-soft); } button.danger:hover { background: var(--accent-tint); } /* Clerk's card has a fixed min width that overflows the auth panel on phones. */ #clerk-auth .cl-rootBox, #clerk-auth .cl-cardBox { width: 100%; max-width: 100%; }