past the viewport regardless of overflow rules on inner scroll containers. body { overflow-x: hidden } above is the second line of defense. */ min-width: 0; } @media (min-width: 900px) { .layout { grid-template-columns: 240px 1fr; grid-template-rows: 1fr; } .topbar { display: none; } /* Sidebar pinned to the viewport with its own scroll context so the theme-toggle + sign-out always stay reachable, even when the Investments parent is expanded with all six children. */ .sidebar { display: flex; position: sticky; top: 0; align-self: start; height: 100vh; overflow-y: auto; } main { padding: 48px 56px 80px; } } /* ─── Typography ─── */ h1, h2, h3 { font-family: var(--serif); font-weight: 600; letter-spacing: 0.3px; margin: 0 0 16px 0; color: var(--text); } h1 { font-size: 36px; line-height: 1.1; margin-bottom: 4px; } h2 { font-size: 24px; } h3 { font-size: 18px; } .section-eyebrow { font-family: var(--sans); font-size: 11px; text-transform: uppercase; letter-spacing: 1.5px; color: var(--gold); margin-bottom: 6px; font-weight: 600; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); font-size: 12px; } .mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; } .serif { font-family: var(--serif); } /* ─── Tiles ─── */ .tile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 20px 0 28px; } @media (min-width: 600px) { .tile-grid { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; } } .tile { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); padding: 18px 20px; position: relative; box-shadow: var(--shadow-sm); transition: transform 0.15s, box-shadow 0.15s; } .tile:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .tile.accent { border-left: 3px solid var(--accent); } .tile.positive { border-left: 3px solid var(--positive); } .tile.warning { border-left: 3px solid var(--warning); } .tile.danger { border-left: 3px solid var(--negative); } .tile.gold { border-left: 3px solid var(--gold); } .tile .label { text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-size: 10px; font-weight: 600; } .tile .value { font-family: var(--serif); font-size: 28px; font-weight: 600; margin-top: 6px; word-break: break-word; line-height: 1.1; } .tile .sub { font-size: 12px; color: var(--text-muted); margin-top: 6px; } /* ─── Cards ─── */ .card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: var(--radius-lg); padding: 20px 22px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .card-header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 16px; gap: 12px; flex-wrap: wrap; } .card-header h2, .card-header h3 { margin: 0; } /* ─── Buttons ─── */ .btn { background: var(--accent); color: var(--bg); border: none; border-radius: var(--radius); padding: 11px 18px; font-size: 13px; font-weight: 600; cursor: pointer; font-family: var(--sans); letter-spacing: 0.6px; text-transform: uppercase; transition: background 0.15s; } .btn:hover { background: var(--accent-hover); } .btn:active { transform: translateY(1px); } .btn:disabled { background: var(--text-faint); cursor: not-allowed; } .btn-secondary { background: transparent; color: var(--accent); border: 1px solid var(--accent); } .btn-secondary:hover { background: var(--accent-bg); } .btn-danger { background: var(--negative); } .btn-danger:hover { background: #6e2020; } .btn-sm { padding: 6px 12px; font-size: 11px; } .btn-block { display: block; width: 100%; } /* ─── Forms ─── */ .input, .select, textarea { width: 100%; padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius); font-size: 14px; font-family: var(--sans); background: var(--bg-input, #fffefa); color: var(--text); transition: border-color 0.15s, box-shadow 0.15s; } .input:focus, .select:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-bg); } .label-row { font-size: 11px; color: var(--text-muted); margin-bottom: 6px; font-weight: 600; letter-spacing: 0.8px; text-transform: uppercase; } .field { margin-bottom: 16px; } .row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; } .row > * { flex: 1 1 auto; } /* ─── Tables ─── */ .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 0 -22px; padding: 0 22px; } table { width: 100%; border-collapse: collapse; font-size: 14px; } th { text-align: left; font-weight: 600; padding: 12px 12px; background: transparent; color: var(--text-muted); font-size: 10px; text-transform: uppercase; letter-spacing: 1px; border-bottom: 1px solid var(--border); white-space: nowrap; } td { padding: 14px 12px; border-bottom: 1px solid var(--border-faint); vertical-align: top; } tbody tr:nth-child(even) td { background: rgba(0, 0, 0, 0.012); } :root[data-theme="dark"] tbody tr:nth-child(even) td { background: rgba(255, 255, 255, 0.025); } tbody tr:hover td { background: var(--row-alt); } tfoot tr td { background: var(--accent-bg); font-weight: 600; } .amount-pos { color: var(--positive); font-variant-numeric: tabular-nums; } .amount-neg { color: var(--negative); font-variant-numeric: tabular-nums; } .amount { font-variant-numeric: tabular-nums; font-family: var(--sans); } /* ─── Premium components (dashboard-refresh design system) ───────── Introduced on /dashboard 2026-08, promoted here so every page can use them: quick-action rows, uppercase section labels, area-chart cards, compact stat tiles, and the collapsed "More" section. */ .dash-quick { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-top: 18px; } .dash-quick a { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 8px 12px; border-radius: var(--radius-lg); border: 1px solid var(--border-faint); background: var(--surface); color: var(--text-muted); font-size: 12px; font-weight: 600; letter-spacing: 0.2px; transition: border-color 0.15s, transform 0.15s, color 0.15s; } .dash-quick a:hover { border-color: var(--accent-fg); color: var(--text); transform: translateY(-1px); border-bottom-color: var(--accent-fg); } .dash-quick .qicon { font-size: 20px; line-height: 1; } .section-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--text-faint); margin: 30px 0 12px; display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--sans); } .section-label .hint { font-weight: 400; letter-spacing: 0.3px; text-transform: none; font-size: 11.5px; } .section-label a { font-weight: 500; letter-spacing: 0.3px; text-transform: none; font-size: 12px; } .spark-card { background: var(--surface); border: 1px solid var(--border-faint); border-radius: 18px; padding: 18px 20px 10px; margin-top: 18px; box-shadow: var(--shadow-sm); } .spark-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; } .spark-label { font-size: 11px; text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-weight: 600; } .spark-value { font-family: var(--serif); font-size: 30px; font-weight: 600; line-height: 1.15; margin-top: 4px; } .spark-hint { font-size: 11px; color: var(--text-faint); margin-top: 2px; } .spark-delta { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } .spark-card svg { display: block; width: 100%; height: auto; margin-top: 8px; } .fit-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; } @media (min-width: 700px) { .fit-grid { grid-template-columns: repeat(3, 1fr); } } /* Compact variant (dashboard slot): one row of headline metrics. */ @media (min-width: 700px) { .fit-grid.compact { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); } } /* Sub-group headers inside the fitness section (Today / Recovery / Training / Activities). Quieter than .section-label. */ .fit-sub-label { font-size: 10px; text-transform: uppercase; letter-spacing: 1.1px; font-weight: 700; color: var(--text-faint); margin: 16px 0 8px; font-family: var(--sans); } .fit-sub-label:first-child { margin-top: 0; } .fit-tile { background: var(--surface); border: 1px solid var(--border-faint); border-radius: 14px; padding: 14px 16px; } .fit-tile[data-tap] { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .fit-tile[data-tap]:hover { transform: translateY(-1px); box-shadow: var(--shadow); } .fit-tile .label { text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-size: 10px; font-weight: 600; } /* "i" info dot next to a tile label — native title-attribute tooltip. */ .info-dot { display: inline-flex; align-items: center; justify-content: center; width: 13px; height: 13px; border-radius: 50%; border: 1px solid var(--border); color: var(--text-faint); font-size: 9px; font-weight: 700; font-style: normal; text-transform: none; margin-left: 4px; cursor: help; vertical-align: 1px; } .info-dot:hover { color: var(--accent); border-color: var(--accent); } .fit-tile .value { font-family: var(--serif); font-size: 24px; font-weight: 600; margin-top: 4px; line-height: 1.1; } .fit-tile .sub { font-size: 11px; color: var(--text-faint); margin-top: 4px; } /* 30-day average on its own breathing-room line under the value. */ .fit-tile .sub-avg { font-size: 11px; color: var(--text-faint); margin-top: 10px; font-variant-numeric: tabular-nums; } /* Activities: one card per activity, mirroring the tile anatomy — tiny type headline, activity name as the value, metrics beneath. */ .fit-acts { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 10px; margin-top: 12px; } .fit-act { background: var(--surface); border: 1px solid var(--border-faint); border-radius: 14px; padding: 14px 16px; } .fit-act .label { text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-size: 10px; font-weight: 600; } .fit-act .name { font-family: var(--serif); font-size: 19px; font-weight: 600; color: var(--text); margin-top: 4px; line-height: 1.15; } .fit-act .meta { color: var(--text-muted); font-size: 11.5px; margin-top: 8px; font-variant-numeric: tabular-nums; } /* Activity-detail overlay — opened by clicking a .fit-act card. */ .fit-act[data-act-id]:not([data-act-id=""]) { cursor: pointer; transition: transform 0.15s, box-shadow 0.15s; } .fit-act[data-act-id]:not([data-act-id=""]):hover { transform: translateY(-1px); box-shadow: var(--shadow); } .overlay-backdrop { position: fixed; inset: 0; z-index: 600; background: rgba(20, 16, 10, 0.45); backdrop-filter: blur(3px); display: flex; align-items: center; justify-content: center; padding: 20px; } .overlay-card { background: var(--surface-raised, var(--surface)); border: 1px solid var(--border); border-radius: 20px; box-shadow: var(--shadow); width: 100%; max-width: 600px; max-height: 86vh; overflow-y: auto; padding: 22px 24px 26px; } .overlay-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .overlay-head .label { text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-size: 10px; font-weight: 600; } .overlay-head .name { font-family: var(--serif); font-size: 26px; font-weight: 600; line-height: 1.15; margin-top: 4px; } .overlay-head .sub { font-size: 12px; color: var(--text-faint); margin-top: 4px; } .overlay-close { background: transparent; border: 1px solid var(--border); border-radius: 50%; width: 30px; height: 30px; font-size: 16px; line-height: 1; cursor: pointer; color: var(--text-muted); flex: 0 0 auto; } .overlay-close:hover { color: var(--text); border-color: var(--accent); } .overlay-benefit { display: inline-block; margin-top: 14px; padding: 5px 12px; border-radius: 99px; background: var(--accent-bg); color: var(--accent); font-size: 12px; font-weight: 600; letter-spacing: 0.3px; } .overlay-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; margin-top: 16px; } .overlay-stat { background: var(--surface); border: 1px solid var(--border-faint); border-radius: 14px; padding: 12px 14px; } .overlay-stat .label { text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-size: 9.5px; font-weight: 600; } .overlay-stat .value { font-family: var(--serif); font-size: 21px; font-weight: 600; margin-top: 3px; line-height: 1.1; } .overlay-stat .sub { font-size: 11px; color: var(--text-faint); margin-top: 3px; } /* Time-in-HR-zone bars inside the activity overlay. Conventional Garmin zone colors (Z1 grey → Z5 red); muted enough for both themes. */ .overlay-zones { margin-top: 18px; } .overlay-zones .zones-title { text-transform: uppercase; letter-spacing: 1px; color: var(--text-muted); font-size: 10px; font-weight: 600; margin-bottom: 10px; } .zone-row { display: flex; align-items: center; gap: 10px; margin-top: 7px; } .zone-label { width: 96px; font-size: 11px; color: var(--text-muted); font-variant-numeric: tabular-nums; flex: 0 0 auto; } .zone-bar-wrap { flex: 1; height: 12px; background: var(--bg-alt); border-radius: 99px; overflow: hidden; } .zone-bar { height: 100%; border-radius: 99px; min-width: 2px; } .zone-mins { width: 48px; text-align: right; font-size: 11px; color: var(--text); font-weight: 600; font-variant-numeric: tabular-nums; flex: 0 0 auto; } details.more-section { margin-top: 26px; } details.more-section > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 8px; font-size: 11px; text-transform: uppercase; letter-spacing: 1.2px; font-weight: 700; color: var(--text-faint); } details.more-section > summary::before { content: "▸"; transition: transform 0.15s; font-size: 12px; } details.more-section[open] > summary::before { transform: rotate(90deg); } details.more-section > summary::-webkit-details-marker { display: none; } /* ─── Chips & status ─── */ .chip { display: inline-block; padding: 3px 10px; border-radius: 99px; background: var(--accent-bg); color: var(--accent); font-size: 11px; font-weight: 600; letter-spacing: 0.5px; } .chip-warning { background: var(--warning-bg); color: var(--warning); } .chip-positive { background: var(--positive-bg, #e3eed5); color: var(--positive); } .chip-danger { background: var(--negative-bg, #f3dada); color: var(--negative); } /* Conviction pill — used on /admin/support and /support/track. Same bands so operator + reporter read identical signals: ≥85 high (green dot), 50-84 medium (amber), <50 low (muted). */ .conv { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; } .conv-dot { width: 8px; height: 8px; border-radius: 50%; } .conv-high { background: var(--positive-bg, rgba(74, 124, 42, 0.12)); color: var(--positive); } .conv-high .conv-dot { background: var(--positive); } .conv-med { background: var(--warning-bg, rgba(199, 138, 42, 0.14)); color: var(--warning, #c78a2a); } .conv-med .conv-dot { background: var(--warning, #c78a2a); } .conv-low { background: var(--bg-alt); color: var(--text-muted); } .conv-low .conv-dot { background: var(--text-muted); } .empty { padding: 48px 16px; text-align: center; color: var(--text-muted); font-style: italic; font-family: var(--serif); font-size: 17px; } .error { padding: 12px 16px; background: var(--negative-bg, #f3dada); border-left: 3px solid var(--negative); border-radius: var(--radius); color: var(--negative); font-size: 14px; margin-bottom: 16px; } .success { padding: 12px 16px; background: var(--positive-bg, #e3eed5); border-left: 3px solid var(--positive); border-radius: var(--radius); color: var(--positive); font-size: 14px; margin-bottom: 16px; } /* ─── Floating toast stack ───────────────────────────────────────── Pinned to the top-right of the viewport, above all other chrome. Each toast is a self-contained card so multiple notifications stack vertically. Slides in from the right; fades out on dismiss. */ #toastStack { position: fixed; top: 16px; right: 16px; z-index: 10000; display: flex; flex-direction: column; gap: 8px; max-width: min(420px, calc(100vw - 32px)); pointer-events: none; /* Container is click-through; toasts re-enable */ } .toast { pointer-events: auto; display: flex; align-items: flex-start; gap: 10px; padding: 12px 14px; border-radius: var(--radius); font-size: 14px; line-height: 1.4; box-shadow: 0 6px 20px rgba(0, 0, 0, 0.18); cursor: pointer; /* Slide-in animation: start off-screen, transparent. */ transform: translateX(110%); opacity: 0; transition: transform 0.22s ease, opacity 0.22s ease; } .toast.toast-in { transform: translateX(0); opacity: 1; } .toast.toast-leaving { transform: translateX(110%); opacity: 0; } .toast-text { flex: 1; word-break: break-word; } .toast-close { appearance: none; background: transparent; border: none; color: inherit; font-size: 18px; line-height: 1; cursor: pointer; padding: 0 2px; opacity: 0.7; } .toast-close:hover { opacity: 1; } .toast-success { background: var(--positive-bg, #e3eed5); border-left: 3px solid var(--positive); color: var(--positive); } .toast-error { background: var(--negative-bg, #f3dada); border-left: 3px solid var(--negative); color: var(--negative); } .toast-warn { background: var(--warning-bg, #fff3cd); border-left: 3px solid var(--warning, #b58105); color: var(--warning, #b58105); } .toast-info { background: var(--surface); border-left: 3px solid var(--accent); color: var(--text); } @media (max-width: 540px) { #toastStack { top: 12px; right: 12px; left: 12px; max-width: none; } .toast { font-size: 13px; } } .spinner { display: inline-block; width: 14px; height: 14px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; vertical-align: middle; } @keyframes spin { to { transform: rotate(360deg); } } /* ─── Login ─── */ .login-page { display: grid; place-items: center; min-height: 100vh; padding: 24px; background: radial-gradient(ellipse at top, rgba(45, 74, 48, 0.06), transparent 60%), var(--bg); } .login-card { background: var(--surface); border-radius: var(--radius-lg); padding: 44px 32px 36px; width: 100%; max-width: 400px; box-shadow: var(--shadow); border: 1px solid var(--border-faint); } .login-logo { text-align: center; margin-bottom: 28px; } .login-logo .badge { width: 56px; height: 56px; border-radius: 50%; background: var(--accent); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; font-family: var(--serif); font-weight: 600; font-size: 24px; margin-bottom: 16px; letter-spacing: 1px; } .login-logo h1 { margin: 0; font-size: 28px; } .login-logo .tag { margin-top: 4px; font-size: 11px; text-transform: uppercase; letter-spacing: 2px; color: var(--gold); font-weight: 600; } .divider { border: none; border-top: 1px solid var(--border-faint); margin: 24px 0; } .kbd { background: var(--bg-alt); padding: 1px 6px; border-radius: 3px; font-family: ui-monospace, "SF Mono", monospace; font-size: 12px; color: var(--text-muted); } .demo-banner { background: var(--gold); color: var(--bg); padding: 8px 16px; font-size: 13px; text-align: center; letter-spacing: 0.4px; } .demo-banner strong { font-weight: 600; margin-right: 6px; } .demo-banner a { color: var(--bg); text-decoration: underline; margin-left: 12px; border: none; } .demo-banner a:hover { border: none; } /* License-status banner: surfaces trial countdown + paid-license expiry warnings on every authenticated page. Fetched from /version (auth-exempt) once on shell render. Hidden when the license is a long-lived paid one with > 30 days remaining. Three urgency levels keyed off the .urgent / .warn modifier. */ .license-banner { background: var(--accent-bg); color: var(--accent); padding: 8px 16px; font-size: 13px; text-align: center; letter-spacing: 0.3px; border-bottom: 1px solid var(--border-faint); } .license-banner.warn { background: var(--warning-bg); color: var(--warning); } .license-banner.urgent { background: var(--negative); color: var(--bg); } .license-banner strong { font-weight: 600; margin-right: 6px; } .license-banner a { color: inherit; text-decoration: underline; margin-left: 8px; border: none; font-weight: 500; } .license-banner a:hover { border: none; opacity: 0.85; } /* ─── Polish: hover, focus, motion ─── */ .tile { transition: border-color 0.15s, box-shadow 0.18s, transform 0.18s; } .tile:hover { border-color: var(--border); box-shadow: var(--shadow); transform: translateY(-1px); } .card { transition: box-shadow 0.18s; } /* Visible focus ring for keyboard nav. The :focus-visible pseudo-class means mouse clicks don't get a ring (would be visual noise) but tab navigation does, which is what accessibility expects. */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: var(--radius); } .btn:focus-visible { outline-offset: 3px; } /* Sticky-ish table headers — when the user scrolls a long table the header line stays pinned to the top of the scroll container. Pages that want this just don't have to do anything; everything inside .table-scroll picks it up. */ .table-scroll thead th { position: sticky; top: 0; background: var(--surface); z-index: 1; box-shadow: 0 1px 0 var(--border); } /* Horizontal-scroll affordance on overflowing tables. The right-edge gradient hints there's more to scroll into view; iOS already shows nothing on its own. */ .table-scroll { position: relative; background: linear-gradient(to right, var(--surface) 0%, transparent 6px), linear-gradient(to left, var(--surface) 0%, transparent 6px), linear-gradient(to right, rgba(42, 37, 32, 0.10), transparent 12px), linear-gradient(to left, rgba(42, 37, 32, 0.10), transparent 12px); background-attachment: local, local, scroll, scroll; background-repeat: no-repeat; background-position: 0 0, 100% 0, 0 0, 100% 0; background-size: 12px 100%, 12px 100%, 12px 100%, 12px 100%; } /* ─── Mobile (<600px): density + readability ─── Phone screens need: - tighter card / table padding so columns fit without horizontal scroll - smaller h1 / tile value so the headline doesn't wrap awkwardly - rows stack instead of squeezing flex-1 children - modal cards go edge-to-edge (max-width 480px is wider than most phones) - 44x44 minimum tap targets on buttons (Apple HIG / WCAG 2.2) */ @media (max-width: 599px) { main { padding: 16px 14px 60px; } h1 { font-size: 28px; } h2 { font-size: 20px; } h3 { font-size: 16px; } .card { padding: 16px 14px; margin-bottom: 14px; border-radius: 8px; } .card-header { margin-bottom: 12px; gap: 6px; } /* Drop the negative margin trick on phones — tables overflow into the page padding, which made the gradient affordance look broken and pushed the scroll indicators offscreen. */ .table-scroll { margin: 0 -14px; padding: 0 14px; } table { font-size: 13px; } th { padding: 10px 8px; font-size: 9.5px; letter-spacing: 0.6px; } td { padding: 10px 8px; font-size: 13px; } .tile { padding: 14px 16px; border-radius: 8px; } .tile .value { font-size: 22px; } .tile .label { font-size: 9.5px; letter-spacing: 0.7px; } .tile-grid { /* Single column — splitting tile values on phones makes them unreadable. This trumps the 1fr 1fr default at the top. */ grid-template-columns: 1fr; gap: 8px; margin: 14px 0 18px; } /* Phones: full-width inputs but let chip / button groups keep their horizontal wrap behaviour from the base .row rule. Targeting only .field children means input rows stack while a row of preset buttons still wraps inline. !important is needed because almost every page sets inline min-width / max-width on .field divs (e.g. min-width: 240px, max-width: 110px) which would otherwise pin them to fixed sizes on small screens. We force them to span the row instead. */ .row > .field { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; } .row > .grow { flex: 1 1 100% !important; max-width: none !important; min-width: 0 !important; } /* Generic divs sitting between fields (action buttons wrapped in

) — give them their own row so the button doesn't crowd a field above it. */ .row > div[style*="flex: 0 0 auto"] { flex: 0 0 100% !important; } /* Bare button children of .row (no wrapper) — same treatment so 'Apply' / 'Add' end up on their own line below the inputs. */ .row > button { flex: 0 0 100% !important; } /* Tap-friendly buttons. 11px font + 11px padding gave ~36px height which is below the 44px tap-target floor. */ .btn:not(.btn-sm) { padding: 13px 16px; min-height: 44px; } .btn-sm { min-height: 36px; } .input, .select, textarea { font-size: 16px; padding: 12px 14px; } /* font-size: 16px on inputs prevents the iOS Safari auto-zoom-on-focus dance that yanks the user out of the form. */ .field { margin-bottom: 12px; } /* Modal overlays — leave a small inset so the user can tap the backdrop to dismiss without having to find a 1px border. */ .modal-card, [style*="position: fixed"][style*="inset: 0"] > .card, [style*="position:fixed"][style*="inset:0"] > .card { max-width: 100% !important; margin: 0 !important; border-radius: 10px !important; } } /* ─── Tablet (600-899px) tightening ─── */ @media (min-width: 600px) and (max-width: 899px) { main { padding: 24px 24px 60px; } h1 { font-size: 32px; } } /* ─── Reduced-motion users keep static UI ─── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ─── Role-aware UI ─────────────────────────────────────────── * `body.is-viewer` is set by app.js after /api/auth/me returns role * != 'manager'. Any element tagged data-write (add forms, edit/delete * buttons inside modals, refresh-prices buttons, etc.) is hidden. * Backend already returns 403 on writes from viewers; this just keeps * the UI from offering buttons that would always fail. */ body.is-viewer [data-write] { display: none !important; } /* ─── Hide-values privacy toggle ────────────────────────────── * `body.hide-values` is set by app.js when the user clicks the eye * icon in the topbar. Blurs anything tagged `.value` (tile values), * `.amount` (table cells), `.tnum` (tabular-numeric cells in monthly * reports), and `.balance`. Cursor pointer hints that hovering won't * actually unblur — the user has to click the topbar toggle to flip * it back. Click-to-peek-then-restore would be nicer but every page * sets innerHTML on its own schedule and re-binding hover handlers * is fragile; topbar toggle is the simpler, predictable surface. */ body.hide-values .value, body.hide-values .amount, body.hide-values .tnum, body.hide-values .balance, body.hide-values .blur-num { filter: blur(8px); user-select: none; pointer-events: none; } /* ═══════════════════════════════════════════════════════════════════ * Dark-theme sidebar & surface refresh (v2) * ─────────────────────────────────────────────────────────────────── * Everything below is scoped to [data-theme="dark"] — the light theme * is completely untouched. These rules extend the palette variables * above with structural changes that CSS variables alone can't express: * * 0. Link transition — adds box-shadow so the inset left-bar * animates in smoothly rather than snapping. * 1. Sidebar depth — right-edge shadow separates it from the deeper * page background. * 2. Active state — replaces solid brass fill with a subtle tinted * background + a 3 px inset left-bar accent. * Uses box-shadow: inset so padding & layout are * unaffected. * 3. Hover state — warm micro-tint + faint left-bar echo. * 4. Icon pill — top-level nav icons get a small rounded * container background so each emoji reads as a * deliberate UI element rather than inline text. * Scale micro-animation on hover/active. * 5. Child icons — chevron characters (›) stay flat but are more * visible: opacity raised, accent-tinted on * active. * 6. Brand stripe — soft brass glow on the vertical accent bar. * 7. Sidebar footer — subtle upward shadow to float it above the nav. * 8. Caret toggles — brass tint on hover. * 9. Scrollbar — thin, warm scrollbar track on WebKit. * 10. Cards — deeper drop-shadow for better layer separation. * 11. Tiles — stronger hover lift. * 12. Help dropdown — uses --surface-raised so it floats above the * sidebar surface. * 13. Login gradient — brass-toned radial replaces the green one. * ═══════════════════════════════════════════════════════════════════ */ /* 0. Sidebar link transition — extend to include box-shadow so the inset left-bar animates in on hover rather than snapping. ────── */ :root[data-theme="dark"] .sidebar a { transition: background 0.12s, color 0.12s, box-shadow 0.12s; } /* 1. Sidebar depth ────────────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar { box-shadow: 4px 0 28px rgba(0, 0, 0, 0.45); } /* 2. Active nav item — inset left-bar + tinted bg ─────────────────── */ :root[data-theme="dark"] .sidebar a.active { background: rgba(200, 184, 122, 0.13); color: var(--accent); box-shadow: inset 3px 0 0 var(--accent); /* font-weight inherited from base rule */ } /* 3. Hover — warm micro-tint + faint echo bar ──────────────────────── */ :root[data-theme="dark"] .sidebar a:hover { background: rgba(200, 184, 122, 0.07); color: var(--text); box-shadow: inset 3px 0 0 rgba(200, 184, 122, 0.28); } /* 4. Top-level icon pill ───────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar a:not(.sidebar-child):not(.sidebar-grandchild) .icon { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 7px; background: rgba(255, 255, 255, 0.05); opacity: 1; /* lift from the default 0.65 */ font-size: 14px; flex-shrink: 0; transition: background 0.15s, transform 0.15s, opacity 0.15s; } :root[data-theme="dark"] .sidebar a:not(.sidebar-child):not(.sidebar-grandchild):hover .icon { background: rgba(200, 184, 122, 0.14); transform: scale(1.07); opacity: 1; } :root[data-theme="dark"] .sidebar a:not(.sidebar-child):not(.sidebar-grandchild).active .icon { background: rgba(200, 184, 122, 0.22); transform: scale(1.04); opacity: 1; } /* 5. Child / grandchild icons (chevron characters) ─────────────────── */ :root[data-theme="dark"] .sidebar a.sidebar-child .icon, :root[data-theme="dark"] .sidebar a.sidebar-grandchild .icon { opacity: 0.45; transition: opacity 0.12s; } :root[data-theme="dark"] .sidebar a.sidebar-child:hover .icon, :root[data-theme="dark"] .sidebar a.sidebar-grandchild:hover .icon { opacity: 0.75; } :root[data-theme="dark"] .sidebar a.sidebar-child.active .icon, :root[data-theme="dark"] .sidebar a.sidebar-grandchild.active .icon { opacity: 0.9; color: var(--accent); } /* 6. Brand accent stripe glow ─────────────────────────────────────── */ :root[data-theme="dark"] .sidebar-brand::before { box-shadow: 0 0 10px rgba(200, 184, 122, 0.5), 0 0 22px rgba(200, 184, 122, 0.18); } /* 7. Sidebar footer — upward shadow ──────────────────────────────── */ :root[data-theme="dark"] .sidebar-footer { background: var(--surface); box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.4); } /* 8. Caret toggles ───────────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar .sidebar-caret { color: var(--text-faint); transition: color 0.12s, background 0.12s, transform 0.15s; } :root[data-theme="dark"] .sidebar .sidebar-caret:hover { color: var(--accent); background: rgba(200, 184, 122, 0.1); } /* 9. Scrollbar (WebKit) ──────────────────────────────────────────── */ :root[data-theme="dark"] .sidebar::-webkit-scrollbar { width: 4px; } :root[data-theme="dark"] .sidebar::-webkit-scrollbar-track { background: transparent; } :root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; } :root[data-theme="dark"] .sidebar::-webkit-scrollbar-thumb:hover { background: var(--text-faint); } /* Theme-toggle button: explicit colour anchors so it reads against the sidebar surface rather than inheriting muted nav text. */ :root[data-theme="dark"] .theme-toggle { color: var(--text-muted); border-color: var(--border); } :root[data-theme="dark"] .theme-toggle:hover { background: rgba(200, 184, 122, 0.09); color: var(--accent); border-color: var(--accent-fg); } /* 10. Cards — deeper shadow ──────────────────────────────────────── */ :root[data-theme="dark"] .card { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.45); } /* 11. Tiles — stronger hover lift ────────────────────────────────── */ :root[data-theme="dark"] .tile:hover { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.65); border-color: var(--border); } /* 12. Help dropdown — raised surface ─────────────────────────────── */ :root[data-theme="dark"] .help-menu { background: var(--surface-raised, #22201a); border-color: var(--border); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.65); } :root[data-theme="dark"] .help-menu a:hover { background: rgba(200, 184, 122, 0.08); color: var(--accent); } /* 13. Login page — brass radial gradient ─────────────────────────── */ :root[data-theme="dark"] .login-page { background: radial-gradient(ellipse at top, rgba(200, 184, 122, 0.05), transparent 55%), var(--bg); } /* Focus ring — brass-tinted halo in dark mode ───────────────────── */ :root[data-theme="dark"] :focus-visible { outline-color: var(--accent); box-shadow: 0 0 0 3px rgba(200, 184, 122, 0.2); }