/* ============================================================================ Hours — design system Dark-first premium aesthetic. Amber = the "time" signature, indigo = interactive. Type: Plus Jakarta Sans (UI) + JetBrains Mono (numbers/timers, tabular). Theming via [data-theme] on ; all color is token-driven. ========================================================================== */ /* ---------- Theme-agnostic tokens ---------- */ :root { --sans: "Plus Jakarta Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", "Cascadia Code", Menlo, monospace; --r-xs: 7px; --r-sm: 10px; --r: 14px; --r-lg: 18px; --r-xl: 24px; --ease: cubic-bezier(.22, .61, .36, 1); --sp: 200ms; --nav-w: 232px; } /* ---------- Dark theme (default) ---------- */ [data-theme="dark"] { --bg: #0a0c11; --bg-tint-a: rgba(245, 158, 11, .05); --bg-tint-b: rgba(99, 102, 241, .06); --surface: #12141b; --surface-2: #171a22; --surface-3: #1e2230; --elevated: #14171f; --border: rgba(255, 255, 255, .07); --border-2: rgba(255, 255, 255, .13); --hairline: rgba(255, 255, 255, .05); --text: #edeff4; --text-2: #9aa2b1; --text-3: #666e7d; --brand: #7c7ff7; --brand-strong: #6366f1; --brand-weak: rgba(99, 102, 241, .16); --brand-border: rgba(124, 127, 247, .38); --on-brand: #fff; --time: #f7a712; --time-weak: rgba(245, 158, 11, .15); --green: #34d399; --green-strong: #10b981; --green-weak: rgba(52, 211, 153, .14); --red: #fb7185; --red-strong: #f43f5e; --red-weak: rgba(251, 113, 133, .14); --amber: #fbbf24; --amber-weak: rgba(245, 158, 11, .14); --ring: rgba(124, 127, 247, .55); --shadow: 0 1px 2px rgba(0, 0, 0, .4), 0 4px 16px rgba(0, 0, 0, .32); --shadow-lg: 0 18px 50px rgba(0, 0, 0, .55); --scrim: rgba(4, 6, 10, .66); --card-top: rgba(255, 255, 255, .04); } /* ---------- Light theme ---------- */ [data-theme="light"] { --bg: #f6f7f9; --bg-tint-a: rgba(245, 158, 11, .06); --bg-tint-b: rgba(99, 102, 241, .05); --surface: #ffffff; --surface-2: #f1f3f7; --surface-3: #e7eaf0; --elevated: #ffffff; --border: #e6e8ee; --border-2: #d3d8e0; --hairline: #eef0f4; --text: #14171f; --text-2: #59616f; --text-3: #8b93a2; --brand: #5850ec; --brand-strong: #4f46e5; --brand-weak: #eef0fe; --brand-border: rgba(88, 80, 236, .3); --on-brand: #fff; --time: #d97706; --time-weak: #fdf2e2; --green: #12a150; --green-strong: #0f9247; --green-weak: #e6f6ec; --red: #e11d48; --red-strong: #c81e42; --red-weak: #fceaee; --amber: #d97706; --amber-weak: #fdf2e2; --ring: rgba(88, 80, 236, .4); --shadow: 0 1px 2px rgba(16, 24, 40, .06), 0 4px 14px rgba(16, 24, 40, .07); --shadow-lg: 0 24px 60px rgba(16, 24, 40, .18); --scrim: rgba(16, 24, 40, .38); --card-top: rgba(255, 255, 255, 0); } * { box-sizing: border-box; } html, body { height: 100%; margin: 0; } html { -webkit-text-size-adjust: 100%; /* don't let iOS resize text on rotate */ touch-action: pan-x pan-y; /* allow scrolling, disable pinch / double-tap zoom */ } body { font-family: var(--sans); background: var(--bg); background-image: radial-gradient(900px 500px at 12% -8%, var(--bg-tint-a), transparent 60%), radial-gradient(1000px 620px at 100% 0%, var(--bg-tint-b), transparent 55%); background-attachment: fixed; color: var(--text); font-size: 14px; line-height: 1.5; letter-spacing: -.006em; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } #app { display: flex; min-height: 100dvh; } /* ---------- Sidebar ---------- */ .sidebar { width: var(--nav-w); flex-shrink: 0; background: color-mix(in srgb, var(--surface) 70%, transparent); backdrop-filter: blur(14px); border-right: 1px solid var(--border); padding: 20px 14px 16px; display: flex; flex-direction: column; gap: 3px; position: sticky; top: 0; height: 100dvh; } .brand { display: flex; align-items: center; gap: 11px; padding: 6px 10px 22px; } .brand-mark { width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; color: #fff; background: linear-gradient(140deg, var(--time), #f97316); box-shadow: 0 4px 14px rgba(245, 158, 11, .35); } .brand-mark svg { width: 18px; height: 18px; } .brand-name { font-weight: 800; font-size: 18px; letter-spacing: -.03em; } .nav-btn { position: relative; display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; background: transparent; border: none; padding: 10px 12px; border-radius: var(--r-sm); font-size: 14px; font-weight: 500; color: var(--text-2); cursor: pointer; font-family: inherit; transition: background var(--sp) var(--ease), color var(--sp) var(--ease); } .nav-btn:hover { background: var(--surface-2); color: var(--text); } .nav-btn.active { background: var(--brand-weak); color: var(--text); font-weight: 600; } .nav-btn.active::before { content: ""; position: absolute; left: -14px; top: 50%; transform: translateY(-50%); width: 3px; height: 20px; border-radius: 0 3px 3px 0; background: var(--brand); } .nav-ico { width: 22px; height: 22px; display: grid; place-items: center; color: currentColor; } .nav-ico svg { width: 20px; height: 20px; } .nav-btn.active .nav-ico { color: var(--brand); } .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; } .mini-timer { display: flex; align-items: center; gap: 11px; background: linear-gradient(180deg, var(--time-weak), transparent); border: 1px solid var(--brand-border); border-color: color-mix(in srgb, var(--time) 40%, transparent); border-radius: var(--r); padding: 11px 13px; } .mini-timer.hidden { display: none; } .mini-pulse { width: 9px; height: 9px; border-radius: 50%; background: var(--time); flex-shrink: 0; box-shadow: 0 0 0 4px var(--time-weak); animation: pulse 1.7s var(--ease) infinite; } .mini-timer-body { flex: 1; min-width: 0; } .mini-timer-time { font-family: var(--mono); font-size: 17px; font-weight: 600; color: var(--time); font-variant-numeric: tabular-nums; } .mini-timer-label { font-size: 11px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .theme-toggle { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); cursor: pointer; align-self: flex-start; transition: background var(--sp) var(--ease), color var(--sp) var(--ease); } .theme-toggle:hover { background: var(--surface-3); color: var(--text); } .theme-toggle svg { width: 18px; height: 18px; } .foot-row { display: flex; align-items: center; gap: 8px; } .sync-badge { flex: 1; min-width: 0; display: flex; align-items: center; gap: 8px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text-2); border-radius: var(--r-sm); padding: 8px 11px; cursor: pointer; font: inherit; font-size: 12px; overflow: hidden; text-align: left; } .sync-badge:hover { background: var(--surface-3); color: var(--text); } .sync-badge span:last-child { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sync-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--text-3); flex-shrink: 0; } .sync-badge.ok .sync-dot { background: var(--green); } .sync-badge.busy .sync-dot { background: var(--time); animation: pulse 1.2s var(--ease) infinite; } .sync-badge.err .sync-dot { background: var(--red); } /* ---------- Main ---------- */ .main { flex: 1; padding: 34px 40px; max-width: 1120px; } @media (prefers-reduced-motion: no-preference) { .main.render-anim { animation: viewIn .3s var(--ease); } } .view-head { margin-bottom: 26px; } .view-title { font-size: 25px; font-weight: 800; letter-spacing: -.03em; margin: 0; } .view-sub { color: var(--text-2); margin: 5px 0 0; font-size: 13.5px; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; background: var(--surface-2); border: 1px solid var(--border-2); color: var(--text); padding: 9px 15px; border-radius: var(--r-sm); font-size: 13.5px; font-weight: 600; cursor: pointer; font-family: inherit; letter-spacing: -.01em; transition: background var(--sp) var(--ease), border-color var(--sp) var(--ease), transform .12s var(--ease), box-shadow var(--sp) var(--ease), color var(--sp) var(--ease); } .btn svg { width: 16px; height: 16px; } .btn:hover { background: var(--surface-3); border-color: var(--border-2); } .btn:active { transform: translateY(1px) scale(.985); } .btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); } .btn-primary { background: var(--brand-strong); border-color: transparent; color: var(--on-brand); box-shadow: 0 3px 14px color-mix(in srgb, var(--brand-strong) 40%, transparent); } .btn-primary:hover { background: var(--brand); } .btn-start { background: var(--green-strong); border-color: transparent; color: #fff; box-shadow: 0 3px 16px color-mix(in srgb, var(--green-strong) 42%, transparent); } .btn-start:hover { background: var(--green); } .btn-stop { background: var(--red-strong); border-color: transparent; color: #fff; box-shadow: 0 3px 16px color-mix(in srgb, var(--red-strong) 40%, transparent); } .btn-stop:hover { background: var(--red); } .btn-ghost { background: transparent; border-color: transparent; color: var(--text-2); box-shadow: none; } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } .btn-danger-ghost { background: transparent; border-color: transparent; color: var(--red); box-shadow: none; } .btn-danger-ghost:hover { background: var(--red-weak); } .btn-sm { padding: 6px 11px; font-size: 12.5px; border-radius: var(--r-xs); } .btn-sm svg { width: 14px; height: 14px; } .btn-lg { padding: 13px 24px; font-size: 15px; border-radius: var(--r); } .btn-lg svg { width: 18px; height: 18px; } .btn:disabled { opacity: .45; cursor: not-allowed; transform: none; } /* ---------- Cards / panels ---------- */ .card { background: linear-gradient(180deg, var(--card-top), transparent), var(--elevated); border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); } .card-pad { padding: 20px; } /* ---------- Timer view ---------- */ .timer-hero { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--card-top), transparent), var(--elevated); border: 1px solid var(--border); border-radius: var(--r-lg); box-shadow: var(--shadow); padding: 26px; margin-bottom: 26px; } .timer-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; } .timer-display { font-family: var(--mono); font-size: 46px; font-weight: 700; letter-spacing: -.03em; min-width: 210px; color: var(--text); font-variant-numeric: tabular-nums; line-height: 1.05; transition: color var(--sp) var(--ease); } .timer-display.running { color: var(--time); text-shadow: 0 0 26px color-mix(in srgb, var(--time) 45%, transparent); } .field { display: flex; flex-direction: column; gap: 6px; } .field-label { font-size: 12px; font-weight: 600; color: var(--text-2); letter-spacing: -.005em; } .field-grow { flex: 1; min-width: 170px; } input, select, textarea { font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--r-sm); padding: 10px 12px; width: 100%; transition: border-color var(--sp) var(--ease), box-shadow var(--sp) var(--ease); } input::placeholder, textarea::placeholder { color: var(--text-3); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px var(--ring); } select { appearance: none; -webkit-appearance: none; cursor: pointer; 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='%239aa2b1' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 11px center; padding-right: 34px; } textarea { resize: vertical; min-height: 64px; } .timer-extras { margin-top: 18px; display: flex; flex-direction: column; gap: 11px; } .quick-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .backdate-row { flex-wrap: nowrap; } .backdate-row .hint { white-space: nowrap; } .backdate-row .btn { flex: 1; } /* ---------- Tables ---------- */ .tbl { width: 100%; border-collapse: collapse; } .tbl th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: var(--text-3); padding: 10px 14px; border-bottom: 1px solid var(--border); } .tbl td { padding: 12px 14px; border-bottom: 1px solid var(--hairline); vertical-align: middle; } .tbl tr:last-child td { border-bottom: none; } .tbl tbody tr { transition: background var(--sp) var(--ease); } .tbl tbody tr:hover { background: var(--surface-2); } .tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); font-size: 13px; } .row-actions { display: flex; gap: 2px; justify-content: flex-end; opacity: 0; transition: opacity var(--sp) var(--ease); } .tbl tbody tr:hover .row-actions { opacity: 1; } .icon-btn { background: transparent; border: none; cursor: pointer; padding: 6px; border-radius: var(--r-xs); color: var(--text-3); display: inline-grid; place-items: center; transition: background var(--sp) var(--ease), color var(--sp) var(--ease); } .icon-btn svg { width: 15px; height: 15px; } .icon-btn:hover { background: var(--surface-3); color: var(--text); } .icon-btn.danger:hover { background: var(--red-weak); color: var(--red); } /* ---------- Chips / badges ---------- */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 20px; font-size: 12px; font-weight: 500; background: var(--surface-2); color: var(--text-2); border: 1px solid var(--border); } .chip .dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .badge-billable { background: var(--green-weak); color: var(--green); border-color: transparent; } .badge-nonbill { background: var(--surface-2); color: var(--text-3); } .badge-manual { background: var(--brand-weak); color: var(--brand); border-color: transparent; } .badge-timer { background: var(--time-weak); color: var(--time); border-color: transparent; } .chip-btn { cursor: pointer; font-family: inherit; transition: background var(--sp) var(--ease), border-color var(--sp) var(--ease), color var(--sp) var(--ease); } .chip-btn:hover { background: var(--brand-weak); border-color: var(--brand-border); color: var(--brand); } /* ---------- Stat cards ---------- */ .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 14px; margin-bottom: 24px; } .stat { position: relative; overflow: hidden; background: linear-gradient(180deg, var(--card-top), transparent), var(--elevated); border: 1px solid var(--border); border-radius: var(--r); padding: 18px 20px; box-shadow: var(--shadow); } .stat-label { font-size: 12px; color: var(--text-2); font-weight: 600; } .stat-value { font-size: 28px; font-weight: 800; letter-spacing: -.03em; margin-top: 6px; font-variant-numeric: tabular-nums; font-family: var(--mono); } .stat-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; } /* ---------- Timesheet week grid ---------- */ .week-nav { display: flex; align-items: center; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; } .week-label { font-weight: 700; font-size: 16px; min-width: 220px; letter-spacing: -.02em; } .day-group { margin-bottom: 8px; } .day-head { display: flex; justify-content: space-between; align-items: baseline; padding: 11px 14px; margin-top: 14px; } .day-head-date { font-weight: 700; font-size: 14px; letter-spacing: -.01em; } .day-head-total { font-family: var(--mono); font-weight: 600; color: var(--text-2); } .day-head.today .day-head-date { color: var(--brand); } /* ---------- Toolbar ---------- */ .toolbar { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 20px; } .toolbar .spacer, .week-nav .spacer { flex: 1; } .seg { display: inline-flex; border: 1px solid var(--border-2); border-radius: var(--r-sm); overflow: hidden; background: var(--surface); } .seg button { background: transparent; border: none; padding: 8px 14px; font-size: 13px; font-weight: 500; cursor: pointer; color: var(--text-2); border-right: 1px solid var(--border); font-family: inherit; transition: background var(--sp) var(--ease), color var(--sp) var(--ease); } .seg button:last-child { border-right: none; } .seg button:hover { color: var(--text); } .seg button.active { background: var(--brand-strong); color: var(--on-brand); } /* ---------- Empty state ---------- */ .empty { text-align: center; padding: 54px 20px; color: var(--text-3); } .empty-ico { font-size: 30px; opacity: .6; display: inline-grid; } .empty-ico svg { width: 40px; height: 40px; } .empty-title { font-weight: 700; color: var(--text-2); margin: 12px 0 4px; font-size: 15px; } /* ---------- Modal ---------- */ .modal-backdrop { position: fixed; inset: 0; background: var(--scrim); backdrop-filter: blur(5px); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 20px; } @media (prefers-reduced-motion: no-preference) { .modal-backdrop:not(.hidden) { animation: fade .18s var(--ease); } .modal-backdrop:not(.hidden) .modal { animation: modalIn .24s var(--ease); } } .modal { background: var(--elevated); border: 1px solid var(--border-2); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); width: 100%; max-width: 480px; max-height: 90dvh; overflow-y: auto; } .modal.wide { max-width: 620px; } .modal-head { padding: 20px 22px; border-bottom: 1px solid var(--border); } .modal-title { font-size: 18px; font-weight: 700; margin: 0; letter-spacing: -.02em; } .modal-body { padding: 22px; display: flex; flex-direction: column; gap: 15px; } .modal-foot { padding: 15px 22px; border-top: 1px solid var(--border); display: flex; gap: 10px; justify-content: flex-end; align-items: center; } .form-row { display: flex; gap: 12px; } .form-row > * { flex: 1; } /* ---------- Toast ---------- */ .toast-host { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; gap: 8px; z-index: 200; align-items: center; } .toast { background: var(--surface-3); color: var(--text); padding: 11px 18px; border-radius: 22px; font-size: 13.5px; font-weight: 500; border: 1px solid var(--border-2); box-shadow: var(--shadow-lg); animation: toastIn .22s var(--ease); } .toast.warn { background: var(--time); color: #1a1200; border-color: transparent; } .toast.err { background: var(--red-strong); color: #fff; border-color: transparent; } /* ---------- Idle prompt ---------- */ .idle-card { text-align: center; } .idle-mins { font-size: 42px; font-weight: 800; color: var(--time); font-family: var(--mono); } /* ---------- Gap rows (untracked time) ---------- */ .gap-row td { background: repeating-linear-gradient(45deg, var(--time-weak), var(--time-weak) 9px, transparent 9px, transparent 18px); } .gap-row:hover td { background: var(--time-weak); } .gap-flag { color: var(--time); font-weight: 700; } .gap-flag svg { width: 14px; height: 14px; vertical-align: -2px; margin-right: 3px; } .gap-actions { display: inline-flex; gap: 6px; justify-content: flex-end; } .gap-confirm { border-color: var(--border-2); color: var(--text-2); } .gap-confirm:hover { color: var(--text); } .gap-fill { border-color: color-mix(in srgb, var(--time) 55%, transparent); color: var(--time); background: transparent; } .gap-fill:hover { background: var(--time); color: #1a1200; border-color: transparent; } /* ---------- Quick-start / kbd ---------- */ kbd { font-family: var(--mono); font-size: 11px; background: var(--surface-3); border: 1px solid var(--border-2); border-bottom-width: 2px; border-radius: 6px; padding: 1px 6px; color: var(--text-2); } /* ---------- Nudge bar ---------- */ .nudge-bar { position: fixed; top: 18px; left: 50%; transform: translateX(-50%); z-index: 90; display: flex; align-items: center; gap: 14px; background: var(--surface-3); color: var(--text); padding: 11px 14px 11px 18px; border: 1px solid var(--border-2); border-radius: 30px; box-shadow: var(--shadow-lg); max-width: 92vw; animation: nudgeIn .28s var(--ease); } .nudge-bar.warn { background: linear-gradient(180deg, color-mix(in srgb, var(--time) 22%, var(--surface-3)), var(--surface-3)); border-color: var(--brand-border); border-color: color-mix(in srgb, var(--time) 45%, transparent); } .nudge-bar .nudge-msg { font-size: 13.5px; } .nudge-bar .nudge-msg svg { width: 15px; height: 15px; vertical-align: -3px; margin-right: 5px; color: var(--time); } .nudge-bar .nudge-actions { display: flex; gap: 6px; } .nudge-bar .n-close { display: inline-grid; place-items: center; } .nudge-bar .n-close svg { width: 15px; height: 15px; } .nudge-bar .n-btn { background: var(--surface); border: 1px solid var(--border-2); color: var(--text); cursor: pointer; padding: 6px 13px; border-radius: 16px; font-size: 12.5px; font-weight: 600; font-family: inherit; transition: background var(--sp) var(--ease); } .nudge-bar .n-btn:hover { background: var(--surface-2); } .nudge-bar .n-btn.primary { background: var(--time); color: #1a1200; border-color: transparent; } .nudge-bar .n-close { background: transparent; border: none; color: var(--text-3); cursor: pointer; font-size: 18px; line-height: 1; padding: 0 4px; } .nudge-bar .n-close:hover { color: var(--text); } /* ---------- Reports bars ---------- */ .bar-row { display: flex; align-items: center; gap: 14px; padding: 8px 0; } .bar-name { width: 170px; font-size: 13px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .bar-track { flex: 1; height: 24px; background: var(--surface-2); border-radius: 7px; overflow: hidden; } .bar-fill { height: 100%; border-radius: 7px; min-width: 3px; transition: width .5s var(--ease); } .bar-val { width: 140px; text-align: right; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); } /* ---------- Invoice preview (always paper-white, for print + client-facing) ---------- */ .invoice-sheet { background: #fff; color: #14171f; padding: 44px 46px; max-width: 720px; margin: 0 auto; border: 1px solid var(--border); border-radius: var(--r); box-shadow: var(--shadow); --inv-muted: #6b7280; --inv-line: #e5e7eb; --inv-ink: #14171f; } .invoice-sheet .muted { color: var(--inv-muted); } .inv-head { display: flex; justify-content: space-between; margin-bottom: 32px; } .inv-h1 { font-size: 32px; font-weight: 800; letter-spacing: -.03em; margin: 0 0 4px; color: var(--inv-ink); } .inv-meta { text-align: right; font-size: 13px; color: var(--inv-muted); } .inv-parties { display: flex; justify-content: space-between; margin-bottom: 28px; gap: 30px; } .inv-party-label { font-size: 11px; text-transform: uppercase; letter-spacing: .06em; color: #9ca3af; margin-bottom: 5px; font-weight: 600; } .inv-tbl { width: 100%; border-collapse: collapse; margin-bottom: 22px; } .inv-tbl th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .05em; color: #9ca3af; padding: 9px 6px; border-bottom: 2px solid var(--inv-ink); font-weight: 600; } .inv-tbl td { padding: 10px 6px; border-bottom: 1px solid var(--inv-line); font-size: 13px; color: var(--inv-ink); } .inv-tbl .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--mono); } .inv-tbl .muted { color: var(--inv-muted); } .inv-totals { margin-left: auto; width: 270px; } .inv-total-row { display: flex; justify-content: space-between; padding: 7px 0; font-size: 14px; color: var(--inv-ink); } .inv-total-row.grand { border-top: 2px solid var(--inv-ink); margin-top: 6px; padding-top: 13px; font-size: 19px; font-weight: 800; } .inv-logo { max-height: 60px; max-width: 220px; margin-bottom: 12px; display: block; } .inv-meta-k { color: var(--inv-muted); } .inv-payment { margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--inv-line); font-size: 13px; color: var(--inv-ink); line-height: 1.7; } .inv-payment .inv-party-label { margin-bottom: 6px; } .inv-notes { margin-top: 20px; font-size: 12.5px; color: var(--inv-muted); white-space: pre-wrap; } /* Invoice tab controls */ .inv-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; align-items: end; } .inv-item-row { display: grid; grid-template-columns: 1fr 86px 104px 38px; gap: 8px; margin-bottom: 8px; align-items: center; } .logo-slot { width: 90px; height: 56px; border: 1px dashed var(--border-2); border-radius: var(--r-sm); display: grid; place-items: center; overflow: hidden; flex-shrink: 0; background: var(--surface); } .logo-slot img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Invoices export as real PDFs (jsPDF), so no special print styling is needed. */ /* ---------- Utility ---------- */ .hidden { display: none !important; } .muted { color: var(--text-3); } .right { text-align: right; } .flex { display: flex; } .gap { gap: 10px; } .mt { margin-top: 14px; } .nowrap { white-space: nowrap; } .hint { font-size: 12px; color: var(--text-3); } .divider { height: 1px; background: var(--border); margin: 4px 0; } .color-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; flex-shrink: 0; } /* ---------- Keyframes ---------- */ @keyframes pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.8); } } @keyframes toastIn { from { opacity: 0; transform: translateY(8px); } } @keyframes nudgeIn { from { opacity: 0; transform: translate(-50%, -10px); } } @keyframes fade { from { opacity: 0; } } @keyframes viewIn { from { opacity: 0; transform: translateY(7px); } } @keyframes modalIn { from { opacity: 0; transform: translateY(10px) scale(.98); } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .mini-pulse { animation: none; } } /* ---------- Responsive: tablet ---------- */ @media (max-width: 960px) { :root { --nav-w: 210px; } .main { padding: 26px 22px; } } /* ---------- Responsive: phone (bottom nav) ---------- */ @media (max-width: 640px) { #app { flex-direction: column; } .sidebar { position: fixed; bottom: 0; left: 0; right: 0; top: auto; width: auto; height: auto; flex-direction: row; gap: 0; padding: 8px 4px calc(8px + env(safe-area-inset-bottom, 0px)); border-right: none; border-top: 1px solid var(--border); z-index: 80; justify-content: space-around; backdrop-filter: blur(18px); } .brand { display: none; } .nav-btn { flex-direction: column; gap: 4px; padding: 5px 3px; flex: 1; align-items: center; border-radius: var(--r-xs); white-space: nowrap; font-weight: 500; } .nav-btn.active { background: transparent; color: var(--brand); } .nav-btn.active::before { display: none; } .nav-label { font-size: 9.5px; } .nav-ico { width: 24px; height: 24px; } .nav-ico svg { width: 22px; height: 22px; } /* Sync badge + theme toggle live in Settings on mobile — don't float them */ .foot-row { display: none; } .sidebar-foot { position: fixed; left: 12px; right: 12px; bottom: calc(70px + env(safe-area-inset-bottom)); margin: 0; } .mini-timer { box-shadow: var(--shadow-lg); } /* Clear the status bar / notch at top, and the nav + home indicator at bottom */ .main { padding: calc(16px + env(safe-area-inset-top)) 15px 96px; max-width: none; } .view-title { font-size: 21px; } /* 16px inputs so iOS doesn't auto-zoom when a field gains focus */ input, select, textarea { font-size: 16px; } .timer-row { flex-direction: column; align-items: stretch; } .timer-display { min-width: 0; text-align: center; font-size: 52px; padding: 6px 0; } .field-grow { min-width: 0; } .timer-row .btn-lg { width: 100%; } .form-row { flex-direction: column; align-items: stretch !important; } /* Entry tables reflow into stacked cards — no horizontal scroll on phones. */ .card { overflow-x: auto; } /* safety for any non-reflowed wide table */ .tbl { min-width: 0; } .tbl-entries, .tbl-entries tbody { display: block; } .tbl-entries thead { display: none; } .tbl-entries tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 3px; padding: 13px 14px; border-bottom: 1px solid var(--hairline); align-items: center; } .tbl-entries tr:last-child { border-bottom: none; } .tbl-entries td { display: block; padding: 0; border: none; } .tbl-entries td:nth-child(1) { grid-column: 1; grid-row: 1; min-width: 0; } .tbl-entries td:nth-child(1) .chip { background: transparent; border: none; padding: 0; font-weight: 600; color: var(--text); } .tbl-entries td:nth-child(2) { grid-column: 1 / -1; grid-row: 2; color: var(--text-2); font-size: 13px; } .tbl-entries td:nth-child(3) { grid-column: 1; grid-row: 3; font-size: 12px; } .tbl-entries td:nth-child(4) { grid-column: 2; grid-row: 3; text-align: right; } .tbl-entries td:nth-child(5) { grid-column: 2; grid-row: 1; text-align: right; font-weight: 700; } .tbl-entries td:nth-child(6) { grid-column: 1 / -1; grid-row: 4; } .tbl-entries .row-actions { opacity: 1; justify-content: flex-end; } /* Untracked-gap row stays a single line */ .tbl-entries tr.gap-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .tbl-entries tr.gap-row td { display: inline-flex; align-items: center; } .tbl-entries tr.gap-row td:nth-child(2), .tbl-entries tr.gap-row td:nth-child(3) { display: none; } .tbl-entries tr.gap-row td:nth-child(1) { flex: 1; } .week-nav { flex-wrap: wrap; gap: 8px; } .week-label { order: -1; flex-basis: 100%; font-size: 16px; min-width: 0; } .week-nav .spacer { display: none; } .seg button { padding: 8px 11px; } .stat-grid { grid-template-columns: 1fr 1fr; gap: 10px; } .stat-value { font-size: 24px; } .modal { max-width: none; } .modal-foot { flex-wrap: wrap; } .invoice-sheet { padding: 24px 18px; } .inv-head, .inv-parties { flex-direction: column; gap: 12px; } .inv-meta, .inv-parties > div { text-align: left !important; } .inv-totals { width: 100%; } .inv-item-row { grid-template-columns: 1fr 1fr 38px; } .inv-item-row .ci-desc { grid-column: 1 / -1; } /* Clients: header wraps so buttons don't overflow */ .client-head { flex-wrap: wrap; gap: 10px; } .client-title { flex-wrap: wrap; min-width: 0; } .client-actions { flex-shrink: 0; } /* Client project rows reflow: name + edit on line 1, badge + rate on line 2 */ .tbl-cprojects, .tbl-cprojects tbody { display: block; } .tbl-cprojects tr { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 4px; padding: 11px 2px; border-bottom: 1px solid var(--hairline); align-items: center; } .tbl-cprojects tr:last-child { border-bottom: none; } .tbl-cprojects td { display: block; padding: 0; border: none; } .tbl-cprojects td:nth-child(1) { grid-column: 1; grid-row: 1; font-weight: 500; } .tbl-cprojects td:nth-child(4) { grid-column: 2; grid-row: 1; text-align: right; } .tbl-cprojects td:nth-child(2) { grid-column: 1; grid-row: 2; } .tbl-cprojects td:nth-child(3) { grid-column: 2; grid-row: 2; text-align: right; } /* Client bars stack: full name on top, wider bar + value below */ .bar-row { display: grid; grid-template-columns: 1fr auto; column-gap: 10px; row-gap: 6px; padding: 10px 0; } .bar-name { width: auto; grid-column: 1 / -1; } .bar-track { grid-column: 1; align-self: center; } .bar-val { width: auto; grid-column: 2; align-self: center; white-space: nowrap; } .nudge-bar { top: auto; bottom: calc(70px + env(safe-area-inset-bottom)); left: 8px; right: 8px; transform: none; max-width: none; border-radius: var(--r); padding: 10px 12px; gap: 8px; } .nudge-bar .nudge-msg { font-size: 12.5px; } .nudge-bar .n-btn { white-space: nowrap; } } /* Touch devices: always show row actions (no hover to reveal them) */ @media (hover: none) { .row-actions { opacity: 1; } }