/* Fuel Tracker — design tokens and base styles */ :root { /* Colors — dark mode default (iOS-native grays) */ --color-bg: #0f1117; --color-surface: #1c1c1e; --color-surface-raised: #2c2c2e; --color-surface-elevated: #38383a; --color-text: #e4e4e7; --color-text-muted: #a1a1aa; --color-text-dim: #71717a; --color-border: rgba(255, 255, 255, 0.08); --color-border-focus: rgba(255, 255, 255, 0.16); /* Brand */ --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-accent: #3b82f6; /* Semantic */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; /* Semantic backgrounds (alpha tints) */ --color-primary-bg: rgba(59, 130, 246, 0.12); --color-success-bg: rgba(34, 197, 94, 0.1); --color-warning-bg: rgba(245, 158, 11, 0.1); --color-error-bg: rgba(239, 68, 68, 0.1); --color-error-border: rgba(239, 68, 68, 0.2); /* Spacing scale */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-6: 1.5rem; --space-8: 2rem; /* Typography scale */ --text-xs: 0.75rem; --text-sm: 0.875rem; --text-base: 1rem; --text-lg: 1.125rem; --text-xl: 1.25rem; --text-2xl: 1.5rem; /* Component tokens */ --input-height: 3rem; --button-height: 3rem; --radius-sm: 0.375rem; --radius-md: 0.5rem; --radius-lg: 0.75rem; --tab-bar-height: 3.5rem; /* Font */ --font-body: system-ui, -apple-system, sans-serif; } /* Light mode — follows system preference */ @media (prefers-color-scheme: light) { :root { --color-bg: #f2f2f7; --color-surface: #ffffff; --color-surface-raised: #e5e5ea; --color-surface-elevated: #d1d1d6; --color-text: #1c1c1e; --color-text-muted: #636366; --color-text-dim: #8e8e93; --color-border: rgba(0, 0, 0, 0.08); --color-border-focus: rgba(0, 0, 0, 0.2); --color-primary: #007aff; --color-primary-hover: #0056cc; --color-accent: #007aff; --color-success: #34c759; --color-warning: #ff9500; --color-error: #ff3b30; --color-primary-bg: rgba(0, 122, 255, 0.1); --color-success-bg: rgba(52, 199, 89, 0.1); --color-warning-bg: rgba(255, 149, 0, 0.1); --color-error-bg: rgba(255, 59, 48, 0.1); --color-error-border: rgba(255, 59, 48, 0.2); } } /* Manual theme overrides — data-theme attribute on */ html[data-theme="light"] { --color-bg: #f2f2f7; --color-surface: #ffffff; --color-surface-raised: #e5e5ea; --color-surface-elevated: #d1d1d6; --color-text: #1c1c1e; --color-text-muted: #636366; --color-text-dim: #8e8e93; --color-border: rgba(0, 0, 0, 0.08); --color-border-focus: rgba(0, 0, 0, 0.2); --color-primary: #007aff; --color-primary-hover: #0056cc; --color-accent: #007aff; --color-success: #34c759; --color-warning: #ff9500; --color-error: #ff3b30; --color-primary-bg: rgba(0, 122, 255, 0.1); --color-success-bg: rgba(52, 199, 89, 0.1); --color-warning-bg: rgba(255, 149, 0, 0.1); --color-error-bg: rgba(255, 59, 48, 0.1); --color-error-border: rgba(255, 59, 48, 0.2); } html[data-theme="dark"] { --color-bg: #0f1117; --color-surface: #1c1c1e; --color-surface-raised: #2c2c2e; --color-surface-elevated: #38383a; --color-text: #e4e4e7; --color-text-muted: #a1a1aa; --color-text-dim: #71717a; --color-border: rgba(255, 255, 255, 0.08); --color-border-focus: rgba(255, 255, 255, 0.16); --color-primary: #3b82f6; --color-primary-hover: #2563eb; --color-accent: #3b82f6; --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; --color-primary-bg: rgba(59, 130, 246, 0.12); --color-success-bg: rgba(34, 197, 94, 0.1); --color-warning-bg: rgba(245, 158, 11, 0.1); --color-error-bg: rgba(239, 68, 68, 0.1); --color-error-border: rgba(239, 68, 68, 0.2); } /* Reset */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 100%; touch-action: manipulation; background-color: var(--color-surface); height: 100%; height: -webkit-fill-available; } body { font-family: var(--font-body); background-color: var(--color-bg); color: var(--color-text); line-height: 1.6; min-height: 100vh; min-height: 100dvh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Top navigation bar */ .top-nav { display: flex; justify-content: space-between; align-items: center; padding: calc(var(--space-3) + env(safe-area-inset-top, 0rem)) var(--space-4) var(--space-3); background-color: var(--color-surface); border-bottom: 0.0625rem solid var(--color-border); } .app-name { font-weight: 700; font-size: var(--text-lg); } .user-info { font-size: var(--text-sm); color: var(--color-text-muted); display: flex; align-items: center; gap: var(--space-3); } .user-info a { color: var(--color-primary); text-decoration: none; } .user-info a:hover { text-decoration: underline; } /* Main content area */ main { padding: var(--space-6) var(--space-4); padding-bottom: calc(var(--tab-bar-height) + var(--space-8) + env(safe-area-inset-bottom, 0rem)); max-width: 40rem; margin: 0 auto; } /* Bottom tab bar */ .tab-bar { position: fixed; bottom: 0; left: 0; right: 0; display: flex; justify-content: space-around; align-items: center; height: calc(var(--tab-bar-height) + env(safe-area-inset-bottom, 0rem)); padding-bottom: env(safe-area-inset-bottom, 0rem); background-color: var(--color-surface); border-top: 0.0625rem solid var(--color-border); z-index: 100; } .tab-item { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 0.125rem; padding: var(--space-1) 0; text-decoration: none; color: var(--color-text-dim); transition: color 0.15s ease; -webkit-tap-highlight-color: transparent; } .tab-item:hover { color: var(--color-text-muted); } .tab-item.active { color: var(--color-primary); } .tab-icon { width: 1.375rem; height: 1.375rem; } .tab-label { font-size: var(--text-xs); font-weight: 500; line-height: 1; } /* Card component */ .card { background-color: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); border: 0.0625rem solid var(--color-border); } .card + .card { margin-top: var(--space-4); } /* Form elements */ .form-group { margin-bottom: var(--space-4); } .form-label { display: block; font-size: var(--text-sm); font-weight: 500; color: var(--color-text-muted); margin-bottom: var(--space-1); } .form-input, .form-select, .form-textarea { width: 100%; height: var(--input-height); padding: var(--space-2) var(--space-3); background-color: var(--color-surface-raised); color: var(--color-text); border: 0.0625rem solid var(--color-border); border-left: 0.1875rem solid transparent; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base); line-height: 1.5; transition: border-color 0.15s ease; appearance: none; -webkit-appearance: none; } .form-textarea { height: auto; min-height: 5rem; resize: vertical; } .form-select { 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='%23a1a1aa' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } .form-input[list] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%2371717a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right var(--space-3) center; padding-right: var(--space-8); } .form-input:focus, .form-select:focus, .form-textarea:focus { outline: none; border-color: var(--color-border-focus); border-left-color: var(--color-accent); } .form-input::placeholder, .form-textarea::placeholder { color: var(--color-text-dim); } /* Custom autocomplete dropdown */ .ac-dropdown { position: absolute; left: 0; right: 0; top: 100%; z-index: 50; max-height: 15rem; overflow-y: auto; background-color: var(--color-surface-raised); border: 0.0625rem solid var(--color-border-focus); border-top: none; border-radius: 0 0 var(--radius-md) var(--radius-md); -webkit-overflow-scrolling: touch; } .ac-option { padding: var(--space-2) var(--space-3); font-size: var(--text-base); color: var(--color-text); cursor: pointer; } .ac-option:active { background-color: var(--color-surface-elevated); } /* Month scrubber — fixed sidebar for jumping to date sections */ .month-scrubber { position: fixed; right: 0; top: 50%; transform: translateY(-50%); z-index: 40; display: flex; flex-direction: column; align-items: center; padding: var(--space-2) 0.125rem; max-height: 70vh; overflow-y: auto; pointer-events: auto; -webkit-overflow-scrolling: touch; } .scrub-year { font-size: 0.625rem; font-weight: 700; color: var(--color-primary); line-height: 1; padding: var(--space-1) var(--space-2); letter-spacing: 0.03em; } .scrub-month { font-size: 0.625rem; color: var(--color-text-dim); text-decoration: none; line-height: 1; min-height: 1.375rem; min-width: 1.75rem; display: flex; align-items: center; justify-content: center; padding: 0 var(--space-2); -webkit-tap-highlight-color: transparent; } .scrub-month:active, .scrub-month.scrub-active { color: var(--color-primary); background-color: var(--color-surface-raised); border-radius: var(--radius-sm); } .scrub-month.scrub-active { font-weight: 700; } .form-hint { font-size: var(--text-xs); color: var(--color-text-dim); margin-top: var(--space-1); } /* Form error banner (appears above save button on failure) */ .form-error { font-size: var(--text-sm); color: var(--color-error); background-color: var(--color-error-bg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-3); animation: slide-up 0.2s ease-out; } .form-error.hidden { display: none; } /* Input validation error state */ .form-input.input-error, .form-select.input-error { border-color: var(--color-error); border-left-color: var(--color-error); } /* Content padding when scrubber is present */ .has-scrubber { padding-right: 2.25rem; } /* Inline form row (two fields side by side) */ .form-row { display: flex; gap: var(--space-3); } .form-row .form-group { flex: 1; } /* Checkbox / toggle row */ .form-check { display: flex; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); cursor: pointer; } .form-check input[type="checkbox"] { width: 1.25rem; height: 1.25rem; accent-color: var(--color-primary); cursor: pointer; flex-shrink: 0; } .form-check-label { font-size: var(--text-base); color: var(--color-text); cursor: pointer; user-select: none; } /* Collapsible section toggle */ .notes-toggle { display: inline-block; font-size: var(--text-sm); color: var(--color-primary); cursor: pointer; margin-bottom: var(--space-2); background: none; border: none; font-family: var(--font-body); padding: 0; } .notes-toggle:hover { text-decoration: underline; } .notes-section { display: none; } .notes-section.expanded { display: block; } /* Buttons */ .btn { display: block; width: 100%; height: var(--button-height); padding: var(--space-2) var(--space-4); border: none; border-radius: var(--radius-md); font-family: var(--font-body); font-size: var(--text-base); font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, opacity 0.15s ease; -webkit-tap-highlight-color: transparent; } .btn-primary { background-color: var(--color-primary); color: #fff; } .btn-primary:hover { background-color: var(--color-primary-hover); } .btn-primary:disabled { opacity: 0.5; cursor: not-allowed; } .btn-secondary { background-color: var(--color-surface-raised); color: var(--color-text); border: 0.0625rem solid var(--color-border); } .btn-secondary:hover { background-color: var(--color-surface-elevated); } /* Save button state transitions */ .btn-saving { background-color: var(--color-text-dim); cursor: wait; } .btn-success { background-color: var(--color-success); transition: background-color 0.3s ease; } /* Receipt card */ .receipt-card { background-color: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-6); border: 0.0625rem solid var(--color-border); margin-top: var(--space-6); animation: slide-up 0.3s ease-out; } .receipt-card.hidden { display: none; } .receipt-mpg { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-1); } .receipt-detail { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); } .receipt-detail:last-of-type { margin-bottom: var(--space-2); } .receipt-time { font-size: var(--text-xs); color: var(--color-text-dim); margin-bottom: var(--space-4); } .receipt-card.receipt-pending { border-left: 0.1875rem solid var(--color-warning); } /* Sync banner */ .sync-banner { font-size: var(--text-sm); color: var(--color-warning); background-color: var(--color-warning-bg); padding: var(--space-2) var(--space-3); border-radius: var(--radius-sm); margin-bottom: var(--space-4); } .sync-banner.hidden { display: none; } @keyframes slide-up { from { opacity: 0; transform: translateY(var(--space-4)); } to { opacity: 1; transform: translateY(0); } } /* Section heading within main */ .section-title { font-size: var(--text-2xl); font-weight: 700; margin-bottom: var(--space-4); } /* Total cost display */ .computed-total { font-size: var(--text-sm); color: var(--color-text-muted); margin-top: var(--space-1); min-height: 1.25rem; } /* Login page */ .login-page { display: flex; justify-content: center; align-items: center; min-height: 100vh; min-height: 100dvh; padding: var(--space-4); } .login-card { text-align: center; background-color: var(--color-surface); padding: 2.5rem var(--space-8); border-radius: var(--radius-lg); max-width: 24rem; width: 100%; } .login-card h1 { font-size: 1.75rem; margin-bottom: var(--space-2); } .login-card p { color: var(--color-text-muted); margin-bottom: var(--space-8); font-size: 0.9375rem; } .login-button { display: inline-block; background-color: var(--color-primary); color: #fff; padding: var(--space-3) var(--space-6); border-radius: var(--radius-md); text-decoration: none; font-weight: 600; font-size: var(--text-base); transition: background-color 0.15s ease; } .login-button:hover { background-color: var(--color-primary-hover); } .install-hint { font-size: var(--text-xs); color: var(--color-text-dim); margin-top: var(--space-4); display: none; } .inline-icon { width: 1em; height: 1em; vertical-align: -0.125em; } /* History page */ .history-filter { margin-bottom: var(--space-4); } .history-avg { font-size: var(--text-sm); color: var(--color-text-dim); margin-bottom: var(--space-4); } .month-separator { font-size: var(--text-sm); color: var(--color-text-dim); padding: var(--space-3) 0 var(--space-2); border-bottom: 0.0625rem solid var(--color-border); margin-bottom: var(--space-3); } .history-card { display: block; text-decoration: none; color: var(--color-text); background-color: var(--color-surface); border-radius: var(--radius-md); padding: var(--space-3) var(--space-4); border: 0.0625rem solid var(--color-border); margin-bottom: var(--space-2); transition: background-color 0.15s ease; -webkit-tap-highlight-color: transparent; } .history-card:hover { background-color: var(--color-surface-raised); } .history-card:active { background-color: var(--color-surface-elevated); } .history-row-top { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--space-1); } .history-date { font-size: var(--text-sm); font-weight: 500; } .history-station { font-size: var(--text-sm); color: var(--color-text-muted); text-align: right; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-left: var(--space-2); } .history-row-bottom { display: flex; align-items: baseline; gap: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); } .history-mpg { font-weight: 600; color: var(--color-text); } .history-mpg.mpg-good { color: var(--color-success); } .history-mpg.mpg-low { color: var(--color-warning); } .history-mpg.mpg-none { color: var(--color-text-dim); } .history-total { margin-left: auto; font-weight: 500; color: var(--color-text); } .history-flag { font-size: var(--text-xs); color: var(--color-text-dim); margin-top: var(--space-1); font-style: italic; } /* Danger zone (edit page) */ .danger-zone { margin-top: var(--space-6); border-color: var(--color-error-border); } .btn-danger { background-color: transparent; color: var(--color-error); border: 0.0625rem solid var(--color-error); } .btn-danger:hover { background-color: var(--color-error-bg); } .btn-error { background-color: var(--color-error-bg); color: var(--color-error); border-color: var(--color-error-border); } /* Last updated indicator */ .last-updated { font-size: var(--text-xs); color: var(--color-text-dim); text-align: center; padding: var(--space-4) 0; } /* Pull to refresh indicator (PWA only) */ .pull-indicator { position: fixed; top: 0; left: 0; right: 0; height: calc(2.5rem + env(safe-area-inset-top, 0rem)); padding-top: env(safe-area-inset-top, 0rem); display: flex; align-items: center; justify-content: center; font-size: var(--text-sm); color: var(--color-text-muted); background-color: var(--color-bg); transform: translateY(-100%); opacity: 0; z-index: 200; pointer-events: none; } /* Placeholder pages */ .placeholder-page { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 50vh; text-align: center; color: var(--color-text-muted); } .placeholder-page svg { width: 3rem; height: 3rem; margin-bottom: var(--space-4); opacity: 0.4; } .placeholder-page p { font-size: var(--text-lg); } /* Vehicle cards (vehicle list page) */ .vehicle-card { display: block; text-decoration: none; color: var(--color-text); background-color: var(--color-surface); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-4) var(--space-3); border: 0.0625rem solid var(--color-border); margin-bottom: var(--space-3); transition: background-color 0.15s ease; -webkit-tap-highlight-color: transparent; } .vehicle-card:hover { background-color: var(--color-surface-raised); } .vehicle-card:active { background-color: var(--color-surface-elevated); } .vehicle-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-1); } .vehicle-display-name { font-weight: 600; font-size: var(--text-lg); } .vehicle-badge { font-size: var(--text-xs); font-weight: 500; color: var(--color-primary); background-color: var(--color-primary-bg); padding: 0.125rem var(--space-2); border-radius: var(--radius-sm); } .vehicle-odometer { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-2); } .vehicle-stats-row { display: flex; gap: var(--space-4); font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-1); } .vehicle-last-fill { font-size: var(--text-xs); color: var(--color-text-dim); } .add-vehicle-btn { margin-top: var(--space-4); text-align: center; text-decoration: none; } .danger-zone-text { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-4); } /* Settings page */ .settings-heading { font-size: var(--text-lg); font-weight: 600; margin-bottom: var(--space-1); } .settings-description { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); line-height: 1.5; } /* Theme segmented control */ .theme-toggle { display: flex; background-color: var(--color-surface-raised); border-radius: var(--radius-md); padding: 0.1875rem; } .theme-btn { flex: 1; padding: var(--space-2) var(--space-3); border: none; border-radius: var(--radius-sm); background: transparent; color: var(--color-text-muted); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; -webkit-tap-highlight-color: transparent; } .theme-btn.active { background-color: var(--color-surface); color: var(--color-text); box-shadow: 0 0.0625rem 0.1875rem rgba(0, 0, 0, 0.1); } /* Import result feedback */ .import-result { margin-top: var(--space-3); padding: var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-sm); line-height: 1.5; } .import-result.hidden { display: none; } .import-result.import-success { background-color: var(--color-success-bg); color: var(--color-success); } .import-result.import-error { background-color: var(--color-error-bg); color: var(--color-error); } /* File input */ .form-file-input { height: auto; padding: var(--space-2) var(--space-3); } /* Import preview */ .import-preview { margin-top: var(--space-4); } .import-preview.hidden { display: none; } .preview-stat { font-size: var(--text-sm); color: var(--color-text-muted); margin-bottom: var(--space-3); } .preview-stat strong { color: var(--color-text); } .preview-table { width: 100%; font-size: var(--text-sm); border-collapse: collapse; margin-bottom: var(--space-4); } .preview-table th, .preview-table td { text-align: left; padding: var(--space-2) var(--space-3); border-bottom: 0.0625rem solid var(--color-border); } .preview-table th { color: var(--color-text-muted); font-weight: 500; } .preview-new { color: var(--color-warning); font-weight: 500; } .vehicle-map-select { height: auto; padding: var(--space-1) var(--space-2); font-size: var(--text-sm); min-width: 10rem; } .preview-section-title { font-size: var(--text-sm); font-weight: 600; margin-bottom: var(--space-2); } .preview-flag { font-size: var(--text-sm); padding: var(--space-2) var(--space-3); background-color: var(--color-surface-raised); border-radius: var(--radius-sm); margin-bottom: var(--space-2); line-height: 1.5; } .preview-flag-line { font-weight: 600; color: var(--color-warning); } .preview-flag-vehicle { color: var(--color-text-muted); } .preview-flag-msg { display: block; margin-top: var(--space-1); } .preview-fix { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-2); font-size: var(--text-sm); color: var(--color-primary); cursor: pointer; } .preview-fix input[type="checkbox"] { accent-color: var(--color-primary); width: 1rem; height: 1rem; cursor: pointer; } .preview-skip { display: flex; align-items: center; gap: var(--space-2); margin-top: var(--space-1); font-size: var(--text-sm); color: var(--color-error); cursor: pointer; } .preview-skip input[type="checkbox"] { accent-color: var(--color-error); width: 1rem; height: 1rem; cursor: pointer; } .preview-ok { font-size: var(--text-sm); color: var(--color-success); margin-bottom: var(--space-3); } .preview-errors { font-size: var(--text-sm); color: var(--color-warning); padding-left: var(--space-6); margin-bottom: var(--space-3); } .preview-errors li { margin-bottom: var(--space-1); } /* Service category filter pills */ .category-filter { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-bottom: var(--space-4); } .category-pill { font-size: var(--text-xs); padding: var(--space-1) var(--space-3); border-radius: 1rem; border: 0.0625rem solid var(--color-border); background: transparent; color: var(--color-text-muted); font-family: var(--font-body); cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background-color 0.15s ease, color 0.15s ease; } .category-pill.active { background-color: var(--color-primary); color: #fff; border-color: var(--color-primary); } /* Service-specific */ .service-category { font-weight: 600; color: var(--color-text); } .service-repair-check { align-self: flex-end; } .add-record-btn { text-align: center; text-decoration: none; margin-top: var(--space-2); margin-bottom: var(--space-4); }