/* ========================================================================== Invoicer UI — hand-rolled design system, no build step. Theme tokens live on :root; [data-theme] on switches them. ========================================================================== */ :root { --font: "Inter", "Segoe UI Variable Text", "Segoe UI", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --display: "Fraunces", Georgia, "Times New Roman", serif; --mono: "Cascadia Mono", "SFMono-Regular", Consolas, "Liberation Mono", monospace; --radius-sm: 6px; --radius: 10px; --radius-lg: 14px; --sidebar-w: 252px; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 20px; --s6: 24px; --s8: 32px; --s10: 40px; color-scheme: light; --bg: #f4efe6; --surface: #fffdf9; --surface-2: #faf5ec; --surface-3: #f1eadf; --border: #e6ddcf; --border-strong: #d4c7b4; --text: #2e1f16; --text-2: #5e4a3c; --muted: #8a7564; --accent: #b4532a; --accent-hover: #9a4522; --accent-soft: #f6e8de; --accent-text: #8a3a1a; --on-accent: #ffffff; --success: #067647; --success-soft: #ecfdf3; --success-border: #abefc6; --warning: #b54708; --warning-soft: #fffaeb; --warning-border: #fedf89; --danger: #c01048; --danger-soft: #fff1f3; --danger-border: #fecdd6; --danger-solid: #d92d20; --info: #175cd3; --info-soft: #eff8ff; --info-border: #b2ddff; --neutral-soft: #f2f4f7; --neutral-text: #475467; --neutral-border: #e4e7ec; --live: #e11d48; --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05); --shadow: 0 1px 3px rgba(16, 24, 40, .08), 0 1px 2px rgba(16, 24, 40, .04); --shadow-lg: 0 12px 32px -8px rgba(16, 24, 40, .18), 0 4px 8px -4px rgba(16, 24, 40, .06); --focus: 0 0 0 3px rgba(180, 83, 42, .28); --sidebar-bg: #fffdf9; } :root[data-theme="dark"] { color-scheme: dark; --bg: #15100c; --surface: #1e1712; --surface-2: #241c16; --surface-3: #2c231c; --border: #3a2e25; --border-strong: #4b3c31; --text: #f3eae0; --text-2: #cdbfb1; --muted: #a3917f; --accent: #e0875c; --accent-hover: #eba07a; --accent-soft: rgba(224, 135, 92, .15); --accent-text: #f2b89a; --on-accent: #1a120d; --success: #47cd89; --success-soft: rgba(71, 205, 137, .12); --success-border: rgba(71, 205, 137, .3); --warning: #fdb022; --warning-soft: rgba(253, 176, 34, .12); --warning-border: rgba(253, 176, 34, .3); --danger: #fd6f8e; --danger-soft: rgba(253, 111, 142, .12); --danger-border: rgba(253, 111, 142, .32); --danger-solid: #f04438; --info: #53b1fd; --info-soft: rgba(83, 177, 253, .12); --info-border: rgba(83, 177, 253, .3); --neutral-soft: rgba(148, 163, 184, .12); --neutral-text: #b3bbcb; --neutral-border: rgba(148, 163, 184, .24); --live: #fb7185; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .3); --shadow: 0 1px 3px rgba(0, 0, 0, .4); --shadow-lg: 0 16px 40px -8px rgba(0, 0, 0, .6); --focus: 0 0 0 3px rgba(224, 135, 92, .35); --sidebar-bg: #19130f; } /* ---------- Brand font (Fraunces, SIL Open Font License: static/fonts/OFL.txt) ---------- */ @font-face { font-family: "Fraunces"; src: url("../fonts/Fraunces72pt-SemiBold.ttf") format("truetype"); font-weight: 600; font-display: swap; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: var(--font); font-size: 14px; line-height: 1.5; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--accent); text-decoration: none; } a:hover { color: var(--accent-hover); text-decoration: underline; text-underline-offset: 2px; } h1, h2, h3, h4 { margin: 0; line-height: 1.25; letter-spacing: -0.01em; } h1 { font-family: var(--display); font-size: 27px; font-weight: 600; letter-spacing: -0.01em; } .card-head h2 { font-family: var(--display); font-size: 17px; font-weight: 600; letter-spacing: 0; } h2 { font-size: 16px; font-weight: 620; } h3 { font-size: 14px; font-weight: 620; } p { margin: 0 0 var(--s3); } hr { border: 0; border-top: 1px solid var(--border); margin: var(--s5) 0; } code, kbd { font-family: var(--mono); font-size: 12.5px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; } .num, .money, td.num, th.num { font-variant-numeric: tabular-nums; } .mono { font-family: var(--mono); font-variant-numeric: tabular-nums; } .muted { color: var(--muted); } .text-2 { color: var(--text-2); } .small { font-size: 12.5px; } .nowrap { white-space: nowrap; } .pre { white-space: pre-line; } .right { text-align: right; } .strong { font-weight: 620; } .danger-text { color: var(--danger); } .success-text { color: var(--success); } .warning-text { color: var(--warning); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } svg.icon { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; } svg.icon.lg { width: 20px; height: 20px; } svg.icon.xl { width: 28px; height: 28px; stroke-width: 1.6; } /* ---------- App shell ---------- */ .app { display: flex; min-height: 100vh; } .sidebar { position: fixed; inset: 0 auto 0 0; width: var(--sidebar-w); background: var(--sidebar-bg); border-right: 1px solid var(--border); display: flex; flex-direction: column; padding: var(--s4) var(--s3); z-index: 40; overflow-y: auto; } .brand { display: flex; align-items: center; gap: var(--s3); padding: var(--s1) var(--s2) var(--s5); color: var(--text); } .brand:hover { text-decoration: none; color: var(--text); } .brand-mark { width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; background: linear-gradient(135deg, #b4532a, #4a2e1c); color: #fff; font-weight: 700; font-size: 15px; box-shadow: 0 4px 12px -4px rgba(74, 46, 28, .45); overflow: hidden; } .brand-mark img { width: 100%; height: 100%; object-fit: contain; background: #fbf6ec; } .brand-text { min-width: 0; } .brand-name, .brand-sub { display: block; } .brand-name { font-family: var(--display); font-weight: 600; font-size: 15px; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .topbar .brand-name { -webkit-line-clamp: 1; } .brand-sub { font-size: 11.5px; color: var(--muted); } .nav { display: flex; flex-direction: column; gap: 2px; } .nav a { display: flex; align-items: center; gap: var(--s3); padding: 8px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 520; } .nav a:hover { background: var(--surface-3); color: var(--text); text-decoration: none; } .nav a.active { background: var(--accent-soft); color: var(--accent-text); } .nav a.active svg { color: var(--accent); } .nav .count { margin-left: auto; font-size: 11.5px; background: var(--danger-soft); color: var(--danger); border-radius: 999px; padding: 0 7px; font-weight: 600; } .nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); padding: var(--s5) 10px var(--s2); font-weight: 600; } .sidebar-foot { margin-top: auto; padding-top: var(--s4); display: flex; flex-direction: column; gap: var(--s3); } .main { flex: 1; min-width: 0; margin-left: var(--sidebar-w); display: flex; flex-direction: column; } .content { width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--s8) var(--s8) var(--s10); } .topbar { display: none; } .scrim { display: none; } .demo-banner { background: repeating-linear-gradient(-45deg, var(--warning-soft), var(--warning-soft) 12px, transparent 12px, transparent 24px), var(--surface); border-bottom: 1px solid var(--warning-border); color: var(--warning); font-weight: 600; font-size: 12.5px; padding: 6px var(--s8); text-align: center; } /* ---------- Timer widget ---------- */ .timer-card { border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); padding: var(--s3); display: flex; flex-direction: column; gap: var(--s2); } .timer-card.running { border-color: var(--danger-border); background: var(--danger-soft); } .timer-card .timer-title { display: flex; align-items: center; gap: var(--s2); font-size: 11.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); font-weight: 650; } .timer-card.running .timer-title { color: var(--danger); } .timer-clock { font-family: var(--mono); font-size: 26px; font-weight: 600; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; line-height: 1.1; } .timer-meta { font-size: 12.5px; color: var(--text-2); min-width: 0; } .timer-meta .client { font-weight: 620; color: var(--text); } .timer-meta .note { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .live-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--live); box-shadow: 0 0 0 0 rgba(225, 29, 72, .6); animation: pulse 1.6s infinite; flex: none; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(225, 29, 72, .55); } 70% { box-shadow: 0 0 0 7px rgba(225, 29, 72, 0); } 100% { box-shadow: 0 0 0 0 rgba(225, 29, 72, 0); } } @media (prefers-reduced-motion: reduce) { .live-dot { animation: none; } } .timer-pill { display: inline-flex; align-items: center; gap: var(--s2); padding: 5px 10px; border-radius: 999px; background: var(--danger-soft); border: 1px solid var(--danger-border); color: var(--danger); font-family: var(--mono); font-weight: 600; font-size: 13px; } .timer-pill:hover { text-decoration: none; color: var(--danger); } /* ---------- Page header ---------- */ .page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s4); margin-bottom: var(--s6); flex-wrap: wrap; } .page-head .subtitle { color: var(--muted); margin-top: 4px; } .page-head .actions { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } .breadcrumb { font-size: 13px; color: var(--muted); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--text); } .title-row { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); } .stack > * + * { margin-top: var(--s5); } .stack > form.stack { margin-bottom: 0; } .card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s3); padding: var(--s4) var(--s5); border-bottom: 1px solid var(--border); flex-wrap: wrap; } .card-head .hint { font-size: 12.5px; color: var(--muted); font-weight: 400; } .card-body { padding: var(--s5); } .card-body.tight { padding: var(--s3) var(--s5); } .card-foot { padding: var(--s3) var(--s5); border-top: 1px solid var(--border); background: var(--surface-2); border-radius: 0 0 var(--radius-lg) var(--radius-lg); } .grid { display: grid; gap: var(--s5); } .grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid-main { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; } .grid-stats { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: var(--s4); } /* Stat tiles */ .stat { padding: var(--s4) var(--s5); display: flex; flex-direction: column; gap: 4px; position: relative; } .stat .label { font-size: 12.5px; color: var(--muted); font-weight: 550; display: flex; align-items: center; gap: 6px; } .stat .value { font-size: 24px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .stat .sub { font-size: 12.5px; color: var(--muted); } .stat.tone-danger .value { color: var(--danger); } .stat.tone-success .value { color: var(--success); } a.stat { color: inherit; } a.stat:hover { text-decoration: none; border-color: var(--border-strong); } /* Definition list */ .dl { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; } .dl dt { color: var(--muted); } .dl dd { margin: 0; min-width: 0; overflow-wrap: anywhere; } /* ---------- Buttons ---------- */ .btn { --btn-bg: var(--surface); --btn-fg: var(--text); --btn-border: var(--border-strong); display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 14px; border-radius: var(--radius-sm); font: inherit; font-weight: 560; font-size: 13.5px; line-height: 1; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-border); box-shadow: var(--shadow-sm); cursor: pointer; white-space: nowrap; transition: background .12s, border-color .12s, color .12s, box-shadow .12s; } .btn:hover { text-decoration: none; background: var(--surface-3); color: var(--btn-fg); } .btn:focus-visible { outline: none; box-shadow: var(--focus); } .btn:disabled, .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; pointer-events: none; } .btn-primary { --btn-bg: var(--accent); --btn-fg: var(--on-accent); --btn-border: transparent; } .btn-primary:hover { background: var(--accent-hover); color: var(--on-accent); } .btn-danger { --btn-bg: var(--danger-solid); --btn-fg: #fff; --btn-border: transparent; } .btn-danger:hover { background: var(--danger-solid); filter: brightness(.94); color: #fff; } .btn-ghost { --btn-bg: transparent; --btn-border: transparent; box-shadow: none; color: var(--text-2); } .btn-ghost:hover { background: var(--surface-3); } .btn-ghost.danger { color: var(--danger); } .btn-ghost.danger:hover { background: var(--danger-soft); color: var(--danger); } .btn-sm { height: 30px; padding: 0 10px; font-size: 12.5px; gap: 5px; } .btn-sm svg.icon { width: 14px; height: 14px; } .btn-icon { width: 30px; padding: 0; } .btn-block { width: 100%; } .btn-stop { --btn-bg: var(--live); --btn-fg: #fff; --btn-border: transparent; } .btn-stop:hover { background: var(--live); filter: brightness(.94); color: #fff; } .btn-group { display: flex; gap: var(--s2); flex-wrap: wrap; align-items: center; } form.inline { display: inline; } /* ---------- Forms ---------- */ .field { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .field + .field { margin-top: var(--s4); } .field label, .label { font-weight: 560; font-size: 13px; color: var(--text); } .field .help { font-size: 12.5px; color: var(--muted); } .req::after { content: " *"; color: var(--danger); } .input, .select, .textarea { width: 100%; font: inherit; color: var(--text); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 8px 11px; min-height: 36px; box-shadow: var(--shadow-sm); transition: border-color .12s, box-shadow .12s; } .textarea { min-height: 84px; resize: vertical; line-height: 1.5; } .textarea.tall { min-height: 220px; } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus); } .input::placeholder, .textarea::placeholder { color: var(--muted); opacity: .8; } .input.sm, .select.sm { min-height: 30px; padding: 4px 9px; font-size: 13px; } .select { appearance: none; padding-right: 32px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%236b7280' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 9px center; } .affix { position: relative; } .affix .pre, .affix .suf { position: absolute; top: 50%; transform: translateY(-50%); color: var(--muted); pointer-events: none; font-size: 13.5px; } .affix .pre { left: 11px; } .affix .suf { right: 11px; font-size: 12.5px; } .affix .pre ~ .input { padding-left: 24px; } .affix .input:has(~ .suf) { padding-right: 34px; } .form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s5); } .form-grid .full { grid-column: 1 / -1; } .form-grid .field + .field { margin-top: 0; } .form-actions { display: flex; gap: var(--s2); justify-content: flex-end; margin-top: var(--s6); flex-wrap: wrap; } .checkbox { display: flex; gap: 10px; align-items: flex-start; cursor: pointer; font-weight: 500; } .checkbox input { margin-top: 3px; width: 16px; height: 16px; accent-color: var(--accent); flex: none; } .segmented { display: inline-flex; background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px; padding: 3px; gap: 2px; } .segmented label { position: relative; } .segmented input { position: absolute; opacity: 0; pointer-events: none; } .segmented span { display: inline-block; padding: 5px 12px; border-radius: 6px; font-size: 13px; font-weight: 560; color: var(--text-2); cursor: pointer; } .segmented input:checked + span { background: var(--surface); color: var(--text); box-shadow: var(--shadow); } .segmented input:focus-visible + span { box-shadow: var(--focus); } input[type="file"].input { padding: 6px; } input[type="file"]::file-selector-button { font: inherit; font-weight: 560; font-size: 13px; border: 1px solid var(--border-strong); background: var(--surface-3); color: var(--text); border-radius: 5px; padding: 4px 10px; margin-right: 10px; cursor: pointer; } /* Filter bar */ .filters { display: flex; gap: var(--s3); flex-wrap: wrap; align-items: flex-end; } .filters .field { min-width: 150px; flex: 1 1 150px; } .filters .field + .field { margin-top: 0; } .filters .field label { font-size: 12px; color: var(--muted); font-weight: 560; } /* Tabs (status filter pills) */ .tabs { display: flex; gap: 4px; flex-wrap: wrap; border-bottom: 1px solid var(--border); padding: 0 var(--s4); } .tabs a { padding: 11px 10px; color: var(--text-2); font-weight: 560; border-bottom: 2px solid transparent; margin-bottom: -1px; display: inline-flex; align-items: center; gap: 6px; } .tabs a:hover { color: var(--text); text-decoration: none; } .tabs a.active { color: var(--accent-text); border-color: var(--accent); } .tabs .n { font-size: 11.5px; background: var(--surface-3); color: var(--muted); padding: 0 6px; border-radius: 999px; font-weight: 600; } /* ---------- Tables ---------- */ .table-wrap { position: relative; width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; border-collapse: collapse; font-size: 13.5px; } .table th { text-align: left; font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .05em; color: var(--muted); padding: 10px var(--s4); background: var(--surface-2); border-bottom: 1px solid var(--border); white-space: nowrap; } .table td { padding: 12px var(--s4); border-bottom: 1px solid var(--border); vertical-align: top; } .table tr:last-child td { border-bottom: 0; } .table tbody tr { transition: background .1s; } /* Only rows that do something on click get the hover highlight and pointer. */ .table tbody tr[data-href], .table tbody tr[data-toggle-row], .list-row[data-href] { cursor: pointer; } .table tbody tr[data-href]:hover, .table tbody tr[data-toggle-row]:hover, .list-row[data-href]:hover { background: var(--surface-2); } .table .num { text-align: right; white-space: nowrap; } .table tfoot td { background: var(--surface-2); font-weight: 620; border-top: 1px solid var(--border); border-bottom: 0; } .table .row-link { color: var(--text); font-weight: 580; } .table .actions { text-align: right; white-space: nowrap; width: 1%; } .table .actions .btn { vertical-align: middle; } .table tr.day-head td { background: var(--surface-2); font-weight: 600; font-size: 12.5px; color: var(--text-2); padding: 8px var(--s4); } .table tr.editing td { background: var(--accent-soft); } .table .sub { color: var(--muted); font-size: 12.5px; margin-top: 2px; } .card > .table-wrap:first-child .table th:first-child { border-top-left-radius: var(--radius-lg); } .card > .table-wrap:first-child .table th:last-child { border-top-right-radius: var(--radius-lg); } /* ---------- Badges ---------- */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 12px; font-weight: 600; line-height: 1.5; white-space: nowrap; border: 1px solid transparent; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; opacity: .85; } .badge.plain::before { display: none; } .badge-draft { background: var(--neutral-soft); color: var(--neutral-text); border-color: var(--neutral-border); } .badge-sent { background: var(--info-soft); color: var(--info); border-color: var(--info-border); } .badge-partial { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); } .badge-paid { background: var(--success-soft); color: var(--success); border-color: var(--success-border); } .badge-overdue { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); } .badge-unbilled { background: var(--warning-soft); color: var(--warning); border-color: var(--warning-border); } .badge-billed { background: var(--success-soft); color: var(--success); border-color: var(--success-border); } .badge-running { background: var(--danger-soft); color: var(--danger); border-color: var(--danger-border); } .badge-archived { background: var(--neutral-soft); color: var(--neutral-text); border-color: var(--neutral-border); } .badge-lg { font-size: 13px; padding: 3px 11px; } /* ---------- Alerts / flashes ---------- */ .flashes { display: flex; flex-direction: column; gap: var(--s2); margin-bottom: var(--s5); } .alert { display: flex; gap: var(--s3); align-items: flex-start; padding: 11px 14px; border-radius: var(--radius); border: 1px solid var(--border); background: var(--surface); font-size: 13.5px; } .alert svg.icon { margin-top: 2px; } .alert .alert-body { flex: 1; min-width: 0; } .alert .alert-close { background: none; border: 0; color: inherit; opacity: .6; cursor: pointer; padding: 2px; margin: -2px; border-radius: 4px; } .alert .alert-close:hover { opacity: 1; } .alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success); } .alert-error { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger); } .alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning); } .alert-info { background: var(--info-soft); border-color: var(--info-border); color: var(--info); } .alert .alert-body a { color: inherit; text-decoration: underline; font-weight: 600; } .alert ul { margin: 4px 0 0; padding-left: 18px; } /* ---------- Empty states ---------- */ .empty { text-align: center; padding: var(--s10) var(--s6); color: var(--muted); } .empty .empty-icon { width: 52px; height: 52px; border-radius: 14px; margin: 0 auto var(--s4); display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); } .empty h3 { color: var(--text); font-size: 15px; margin-bottom: 4px; } .empty p { max-width: 380px; margin: 0 auto var(--s4); } .empty.compact { padding: var(--s6) var(--s4); } /* ---------- Invoice view ---------- */ .invoice-summary { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--border); } .invoice-summary > div { padding: var(--s4) var(--s5); border-right: 1px solid var(--border); } .invoice-summary > div:last-child { border-right: 0; } .invoice-summary .label { font-size: 12px; color: var(--muted); font-weight: 560; } .invoice-summary .value { font-size: 20px; font-weight: 650; font-variant-numeric: tabular-nums; margin-top: 2px; } .totals { margin-left: auto; width: min(340px, 100%); padding: var(--s4) var(--s5); } .totals .row { display: flex; justify-content: space-between; padding: 5px 0; font-variant-numeric: tabular-nums; } .totals .row.grand { border-top: 1px solid var(--border-strong); margin-top: 6px; padding-top: 10px; font-weight: 650; font-size: 16px; } .lock-note { display: flex; gap: var(--s3); align-items: center; } .kind-tag { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); } .line-edit { display: grid; grid-template-columns: 150px minmax(0, 1fr) 120px 130px auto; gap: var(--s2); align-items: end; } .line-edit .field + .field { margin-top: 0; } .line-edit .field label { font-size: 12px; color: var(--muted); } .add-line[hidden], [data-kind-show][hidden] { display: none !important; } /* Email preview */ .email-preview { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .email-preview .hdr { padding: var(--s4) var(--s5); background: var(--surface-2); border-bottom: 1px solid var(--border); display: grid; grid-template-columns: 70px 1fr; gap: 6px 12px; font-size: 13.5px; } .email-preview .hdr dt { color: var(--muted); } .email-preview .hdr dd { margin: 0; overflow-wrap: anywhere; } .email-preview .body { padding: var(--s5); white-space: pre-wrap; font-size: 14px; line-height: 1.6; overflow-wrap: anywhere; } .email-preview .atts { padding: var(--s3) var(--s5) var(--s4); border-top: 1px solid var(--border); display: flex; gap: var(--s2); flex-wrap: wrap; } .attachment { display: inline-flex; align-items: center; gap: 8px; border: 1px solid var(--border); background: var(--surface-2); border-radius: 8px; padding: 6px 10px; font-size: 13px; color: var(--text); } .attachment:hover { text-decoration: none; border-color: var(--border-strong); color: var(--text); } .attachment .ext { font-size: 10px; font-weight: 700; color: #fff; background: #e5484d; border-radius: 4px; padding: 1px 4px; } .steps { display: flex; gap: var(--s2); align-items: center; font-size: 13px; color: var(--muted); margin-bottom: var(--s4); } .steps .step { display: inline-flex; align-items: center; gap: 6px; } .steps .dot { width: 20px; height: 20px; border-radius: 50%; display: grid; place-items: center; font-size: 11px; font-weight: 700; background: var(--surface-3); color: var(--muted); } .steps .step.on { color: var(--text); font-weight: 600; } .steps .step.on .dot { background: var(--accent); color: var(--on-accent); } .steps .sep { width: 24px; height: 1px; background: var(--border-strong); } /* Settings */ .settings-nav { position: sticky; top: var(--s6); display: flex; flex-direction: column; gap: 2px; } .settings-nav a { padding: 7px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-weight: 540; } .settings-nav a:hover { background: var(--surface-3); text-decoration: none; color: var(--text); } .settings-layout { display: grid; grid-template-columns: 180px minmax(0, 1fr); gap: var(--s6); align-items: start; } .section-title { display: flex; align-items: center; gap: var(--s2); } .logo-preview { width: 150px; height: 72px; border: 1px dashed var(--border-strong); border-radius: var(--radius); display: flex; align-items: center; justify-content: center; background: #fbf6ec; overflow: hidden; } .logo-preview img { max-width: 100%; max-height: 100%; object-fit: contain; padding: 4px; box-sizing: border-box; } .file-card { display: flex; align-items: center; gap: var(--s3); padding: var(--s3) var(--s4); border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface-2); flex-wrap: wrap; } .file-card .meta { flex: 1; min-width: 180px; } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 6px; } .status-dot.ok { background: var(--success); } .status-dot.bad { background: var(--danger); } .placeholder-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 16px; font-size: 12.5px; color: var(--muted); } .placeholder-list code { cursor: copy; } /* Theme toggle */ .theme-toggle { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: 6px 6px 6px 10px; border-radius: var(--radius-sm); color: var(--text-2); font-size: 13px; } .theme-icon-dark { display: none; } :root[data-theme="dark"] .theme-icon-dark { display: inline-flex; } :root[data-theme="dark"] .theme-icon-light { display: none; } /* Misc */ .divider-text { display: flex; align-items: center; gap: var(--s3); color: var(--muted); font-size: 12px; margin: var(--s4) 0; } .divider-text::before, .divider-text::after { content: ""; flex: 1; height: 1px; background: var(--border); } .list-plain { list-style: none; margin: 0; padding: 0; } .list-row { display: flex; justify-content: space-between; align-items: center; gap: var(--s3); padding: 10px var(--s5); border-bottom: 1px solid var(--border); } .list-row:last-child { border-bottom: 0; } .list-row .title { font-weight: 580; color: var(--text); } .bar { height: 6px; border-radius: 999px; background: var(--surface-3); overflow: hidden; } .bar > span { display: block; height: 100%; background: var(--success); border-radius: inherit; } .kbd-hint { font-size: 12px; color: var(--muted); } .section-gap { margin-top: var(--s6); } .hide-sm { } .error-page { max-width: 480px; margin: 12vh auto; text-align: center; } .error-page .code { font-size: 64px; font-weight: 750; letter-spacing: -0.04em; color: var(--accent); line-height: 1; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .grid-main { grid-template-columns: minmax(0, 1fr); } .line-edit { grid-template-columns: 1fr 1fr; } .line-edit .desc { grid-column: 1 / -1; } } @media (max-width: 900px) { .sidebar { transform: translateX(-100%); transition: transform .2s ease; box-shadow: var(--shadow-lg); } body.nav-open .sidebar { transform: none; } body.nav-open .scrim { display: block; position: fixed; inset: 0; background: rgba(0, 0, 0, .35); z-index: 30; } .main { margin-left: 0; } .topbar { display: flex; align-items: center; gap: var(--s3); position: sticky; top: 0; z-index: 20; padding: 10px var(--s4); background: var(--surface); border-bottom: 1px solid var(--border); } .topbar .brand { padding: 0; min-width: 0; flex: 0 1 auto; } .topbar .timer-pill { flex-shrink: 0; } .topbar .spacer { flex: 1; } .content { padding: var(--s5) var(--s4) var(--s8); } .settings-layout { grid-template-columns: minmax(0, 1fr); } .settings-nav { position: static; flex-direction: row; flex-wrap: wrap; } .demo-banner { padding: 6px var(--s4); } } @media (max-width: 720px) { h1 { font-size: 21px; } .grid-2, .grid-3, .form-grid { grid-template-columns: minmax(0, 1fr); } .grid-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); } .stat { padding: var(--s3) var(--s4); } .stat .value { font-size: 19px; } .invoice-summary { grid-template-columns: 1fr; } .invoice-summary > div { border-right: 0; border-bottom: 1px solid var(--border); } .hide-sm { display: none !important; } .table td, .table th { padding-left: var(--s3); padding-right: var(--s3); } .card-head, .card-body { padding-left: var(--s4); padding-right: var(--s4); } .page-head .actions { width: 100%; } .line-edit { grid-template-columns: 1fr; } .email-preview .hdr { grid-template-columns: 1fr; } .email-preview .hdr dt { margin-top: 4px; } } @media print { .sidebar, .topbar, .page-head .actions, .demo-banner, .flashes { display: none !important; } .main { margin: 0; } } /* ---------- Pay online (Stripe) ---------- */ .pay-online { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s5); align-items: center; } .pay-qr { background: #fff; border-radius: var(--radius); padding: 8px; line-height: 0; border: 1px solid var(--border); } .pay-qr svg { width: 150px; height: 150px; display: block; } .copy-row { display: flex; gap: 6px; align-items: center; } .copy-row .input { flex: 1; min-width: 0; } @media (max-width: 560px) { .pay-online { grid-template-columns: 1fr; justify-items: center; text-align: center; } } /* ---------- Sign-in pages (hosted web app) ---------- */ .auth-page { min-height: 100vh; display: grid; place-items: start center; background: var(--bg); } .auth-wrap { width: 100%; max-width: 420px; padding: 48px 16px 32px; } .auth-brand { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-bottom: 22px; } .auth-brand img { border-radius: 14px; box-shadow: var(--shadow); } .auth-name { font-family: var(--display); font-weight: 600; font-size: 20px; text-align: center; } .auth-title { font-family: var(--display); font-size: 22px; font-weight: 600; margin: 0 0 14px; } .auth-card .card-body { padding: 24px; } .auth-code { font-size: 22px; letter-spacing: .25em; text-align: center; } .auth-qr { background: #fff; border-radius: var(--radius); padding: 10px; width: max-content; margin: 8px auto; line-height: 0; } .auth-qr svg { width: 200px; height: 200px; } .auth-steps { padding-left: 20px; margin: 0 0 8px; } .auth-steps li { margin: 4px 0; } .auth-foot { text-align: center; margin-top: 16px; } .btn-block { width: 100%; justify-content: center; } .recovery-codes { list-style: none; padding: 14px; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 20px; background: var(--surface-2); border: 1px dashed var(--border-strong); border-radius: var(--radius); font-size: 15px; text-align: center; } @media print { .auth-brand, .auth-foot, .btn, .btn-group { display: none !important; } }