/* Dentrack UI — app.css Light theme, teal/mint accent, Thai-first, iPhone PWA optimised. No build step. No frameworks. */ /* ── Custom properties ─────────────────────────────────────────────────── */ :root { --accent: #0a9396; --accent-dark: #005f73; --accent-light: #94d2bd; --accent-bg: #e9f5f5; --danger: #ae2012; --danger-bg: #fde8e6; --warning: #ca6702; --success: #2a9d8f; --bg: #f5f7f8; --surface: #ffffff; --surface-2: #f0f4f5; --border: #dde4e6; --text: #1a2226; --text-2: #4a5f66; --text-3: #8aa0a8; --radius-s: 8px; --radius-m: 14px; --radius-l: 20px; --shadow-s: 0 1px 4px rgba(0,0,0,.07); --shadow-m: 0 4px 16px rgba(0,0,0,.10); --tab-h: 56px; --header-h: 52px; --safe-top: env(safe-area-inset-top, 0px); --safe-bottom: env(safe-area-inset-bottom, 0px); --safe-left: env(safe-area-inset-left, 0px); --safe-right: env(safe-area-inset-right, 0px); font-size: 16px; color-scheme: light; } /* ── Dark theme ─────────────────────────────────────────────────────────── */ /* Activated by [data-theme="dark"] on (see js/ui/theme.js). Swaps the custom properties; teal identity kept. --accent-dark doubles as "accent-colored text", so in dark mode it becomes a LIGHT teal. */ :root[data-theme="dark"] { color-scheme: dark; --accent: #17a2a5; --accent-dark: #7ed3d1; --accent-light: #1d6b6e; --accent-bg: #12393c; --danger: #ff9b8f; --danger-bg: #43201c; --warning: #f0a949; --success: #57c4b8; --bg: #0e1416; --surface: #1a2327; --surface-2: #243136; --border: #2f3d43; --text: #e6eef0; --text-2: #a6bac2; --text-3: #77909a; --shadow-s: 0 1px 4px rgba(0,0,0,.4); --shadow-m: 0 4px 16px rgba(0,0,0,.5); } /* Dark variants for components with literal (non-variable) colors. */ [data-theme="dark"] .toast { background: #2f3d43f2; color: #e6eef0; border: 1px solid #3c4c53; } [data-theme="dark"] .modal-backdrop { background: rgba(0,0,0,.6); } /* Calendar intensity steps, tuned for dark surfaces; text stays readable at every step and i4 keeps white text on the strongest teal. */ [data-theme="dark"] .cal-i1 { background: #16393c; color: #8fcdca; } [data-theme="dark"] .cal-i2 { background: #1b5356; color: #aadedb; } [data-theme="dark"] .cal-i3 { background: #14787c; color: #eafaf9; } [data-theme="dark"] .cal-i4 { background: #189a9e; color: #ffffff; } [data-theme="dark"] .cal-cell.today { box-shadow: inset 0 0 0 2px #7ed3d1; } /* Headline card: slightly deeper teal so white text keeps contrast. */ [data-theme="dark"] .headline-card { background: #0d6b6e; } /* ── Reset ──────────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { height: 100%; overscroll-behavior: none; } body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Noto Sans Thai", "Noto Sans", sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* ── App shell ──────────────────────────────────────────────────────────── */ /* The shell OWNS the viewport as one flex column. Nothing in the shell is position:fixed — the tab bar and save area are normal in-flow flex siblings below the scroll area, so overlap is structurally impossible (works in every webview, including ones where fixed is unreliable). */ #app { display: flex; flex-direction: column; height: 100vh; /* fallback for engines without dvh */ height: 100dvh; min-height: 0; overflow: hidden; padding-top: var(--safe-top); padding-bottom: 0; /* bottom safe area lives on the tab bar */ padding-left: var(--safe-left); padding-right: var(--safe-right); } /* ── Screen layout ──────────────────────────────────────────────────────── */ .screen { display: none; flex-direction: column; flex: 1; min-height: 0; overflow: hidden; } .screen.active { display: flex; } .screen-header { height: var(--header-h); display: flex; align-items: center; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; gap: 8px; } .screen-header h1 { font-size: 17px; font-weight: 600; color: var(--text); flex: 1; } .screen-body { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 16px; padding-bottom: 24px; /* modest — nothing overlaps the scroll area now */ } /* ── Tab bar ────────────────────────────────────────────────────────────── */ /* In-flow flex sibling, always the LAST child of #app — never fixed. */ .tab-bar { flex-shrink: 0; height: calc(var(--tab-h) + var(--safe-bottom)); padding-bottom: var(--safe-bottom); background: var(--surface); border-top: 1px solid var(--border); display: flex; } .tab-item { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; border: none; background: none; cursor: pointer; font-size: 10px; font-weight: 500; color: var(--text-3); padding: 0; -webkit-tap-highlight-color: transparent; transition: color .15s; font-family: inherit; } .tab-item.active { color: var(--accent); } .tab-icon { width: 24px; height: 24px; display: flex; align-items: center; justify-content: center; font-size: 22px; line-height: 1; } /* ── Cards ──────────────────────────────────────────────────────────────── */ .card { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-s); margin-bottom: 12px; overflow: hidden; } .card-body { padding: 16px; } .card-header { padding: 14px 16px 10px; border-bottom: 1px solid var(--border); } .card-title { font-size: 13px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: .04em; } /* ── Form elements ──────────────────────────────────────────────────────── */ .field { margin-bottom: 14px; } .field label { display: block; font-size: 13px; font-weight: 600; color: var(--text-2); margin-bottom: 6px; } .input { width: 100%; height: 48px; padding: 0 14px; border: 1.5px solid var(--border); border-radius: var(--radius-s); font-size: 16px; color: var(--text); background: var(--surface); font-family: inherit; outline: none; transition: border-color .15s, box-shadow .15s; appearance: none; -webkit-appearance: none; } .input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(10,147,150,.15); } .input.input-lg { height: 56px; font-size: 22px; font-variant-numeric: tabular-nums; padding: 0 16px; font-weight: 500; } .input::placeholder { color: var(--text-3); } textarea.input { height: auto; padding: 12px 14px; resize: none; line-height: 1.4; } select.input { padding-right: 36px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%238aa0a8' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; } /* ── Chip grids ─────────────────────────────────────────────────────────── */ .chip-row { display: flex; gap: 8px; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px; } .chip-row::-webkit-scrollbar { display: none; } .chip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .chip { display: flex; align-items: center; justify-content: center; text-align: center; padding: 10px 12px; border: 1.5px solid var(--border); border-radius: var(--radius-s); background: var(--surface); font-size: 14px; font-family: inherit; color: var(--text); cursor: pointer; white-space: nowrap; -webkit-tap-highlight-color: transparent; transition: all .15s; min-height: 44px; font-weight: 500; } .chip-row .chip { flex-shrink: 0; } .chip-grid .chip { white-space: normal; line-height: 1.3; font-size: 13px; } .chip.selected { background: var(--accent-bg); border-color: var(--accent); color: var(--accent-dark); } .chip:active { transform: scale(.96); } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { display: flex; align-items: center; justify-content: center; gap: 8px; height: 52px; padding: 0 24px; border: none; border-radius: var(--radius-m); font-size: 17px; font-weight: 600; font-family: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: opacity .15s, transform .1s; } .btn:active { transform: scale(.97); opacity: .9; } .btn-primary { background: var(--accent); color: #fff; width: 100%; } .btn-primary:disabled { opacity: .45; cursor: default; } .btn-secondary { background: var(--surface-2); color: var(--accent); border: 1.5px solid var(--accent-light); } .btn-danger { background: var(--danger-bg); color: var(--danger); } .btn-sm { height: 36px; font-size: 14px; padding: 0 14px; border-radius: var(--radius-s); } .btn-icon { height: 36px; width: 36px; padding: 0; border-radius: 50%; font-size: 18px; background: var(--surface-2); color: var(--text-2); border: none; } /* ── Save button area ───────────────────────────────────────────────────── */ /* Normal in-flow flex sibling BELOW .screen-body and ABOVE the tab bar (which is the last child of #app). Not fixed, not sticky — it cannot be painted over or pushed off-screen. */ .save-area { flex-shrink: 0; padding: 12px 16px; background: var(--bg); border-top: 1px solid var(--border); } /* ── Live preview ───────────────────────────────────────────────────────── */ .preview-line { background: var(--accent-bg); border: 1.5px solid var(--accent-light); border-radius: var(--radius-s); padding: 12px 16px; font-size: 15px; font-weight: 600; color: var(--accent-dark); font-variant-numeric: tabular-nums; margin-bottom: 4px; min-height: 44px; display: flex; align-items: center; gap: 6px; } .preview-line.negative { background: var(--danger-bg); border-color: #f4c1bc; color: var(--danger); } .preview-label { font-weight: 400; color: var(--text-2); font-size: 13px; } /* ── Today total ─────────────────────────────────────────────────────────── */ .today-bar { background: var(--surface); border-radius: var(--radius-s); padding: 10px 14px; display: flex; align-items: center; justify-content: space-between; font-size: 13px; margin-bottom: 12px; border: 1px solid var(--border); } .today-bar-label { color: var(--text-2); } .today-bar-val { font-weight: 700; font-variant-numeric: tabular-nums; color: var(--accent-dark); font-size: 15px; } .today-bar-guarantee { font-size: 11px; color: var(--warning); margin-left: 6px; } /* ── Section labels ─────────────────────────────────────────────────────── */ .section-label { font-size: 12px; font-weight: 600; color: var(--text-3); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 8px; margin-top: 18px; } .section-label:first-child { margin-top: 0; } /* ── Collapsible ────────────────────────────────────────────────────────── */ .collapse-toggle { background: none; border: none; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--accent); cursor: pointer; padding: 4px 0; -webkit-tap-highlight-color: transparent; } .collapsible-body { display: none; } .collapsible-body.open { display: block; } /* ── Lab cost fields slide ──────────────────────────────────────────────── */ .lab-fields { overflow: hidden; max-height: 0; transition: max-height .25s ease, opacity .2s ease; opacity: 0; } .lab-fields.visible { max-height: 300px; opacity: 1; } /* ── Dashboard headline ─────────────────────────────────────────────────── */ .headline-card { background: var(--accent); border-radius: var(--radius-l); padding: 22px 20px; color: #fff; margin-bottom: 16px; box-shadow: var(--shadow-m); } .headline-month { font-size: 13px; font-weight: 500; opacity: .8; margin-bottom: 4px; } .headline-amount { font-size: 36px; font-weight: 700; font-variant-numeric: tabular-nums; line-height: 1.1; } .headline-sub { font-size: 12px; opacity: .75; margin-top: 6px; } .headline-row { display: flex; gap: 16px; margin-top: 14px; } .headline-stat { flex: 1; } .headline-stat-label { font-size: 11px; opacity: .7; } .headline-stat-val { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; } /* ── Month picker ───────────────────────────────────────────────────────── */ .month-picker { display: flex; align-items: center; gap: 8px; } .month-picker span { flex: 1; text-align: center; font-weight: 600; font-size: 15px; } .month-nav { background: var(--surface-2); border: none; border-radius: var(--radius-s); width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; color: var(--text-2); font-family: inherit; -webkit-tap-highlight-color: transparent; } /* ── Clinic summary cards ────────────────────────────────────────────────── */ .clinic-card { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-s); margin-bottom: 12px; overflow: hidden; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: box-shadow .15s; } .clinic-card:active { box-shadow: var(--shadow-m); } .clinic-card-header { padding: 14px 16px 10px; display: flex; align-items: center; justify-content: space-between; } .clinic-card-name { font-weight: 700; font-size: 16px; color: var(--text); } .clinic-card-cases { font-size: 12px; color: var(--text-3); } .clinic-card-body { padding: 0 16px 14px; display: flex; flex-direction: column; gap: 6px; } .stat-row { display: flex; justify-content: space-between; font-size: 14px; } .stat-row .label { color: var(--text-2); } .stat-row .val { font-variant-numeric: tabular-nums; font-weight: 500; } .stat-row.highlight .val { color: var(--accent-dark); font-weight: 700; font-size: 16px; } /* ── Earnings calendar ──────────────────────────────────────────────────── */ .cal-card { background: var(--surface); border-radius: var(--radius-m); box-shadow: var(--shadow-s); padding: 10px 8px 8px; margin-bottom: 16px; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 3px; } .cal-dow { text-align: center; font-size: 10px; font-weight: 600; color: var(--text-3); padding-bottom: 4px; } .cal-cell { min-height: 40px; border-radius: 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 3px 0; color: var(--text-2); -webkit-tap-highlight-color: transparent; } .cal-cell .cal-num { font-size: 11px; font-weight: 500; line-height: 1; } .cal-cell .cal-amt { font-size: 9px; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .cal-cell.worked { cursor: pointer; } .cal-cell.worked:active { transform: scale(.94); } /* Intensity steps relative to the month's max day. Text stays readable at each step; darkest flips to white. */ .cal-i1 { background: #e3f2f1; color: var(--accent-dark); } .cal-i2 { background: #bfe5e2; color: var(--accent-dark); } .cal-i3 { background: #7fccc8; color: #073b3a; } .cal-i4 { background: var(--accent); color: #ffffff; } /* Today: outline ring (inset so it never bleeds into the 3px grid gap). */ .cal-cell.today { box-shadow: inset 0 0 0 2px var(--accent-dark); } /* ── Income breakdown pie ───────────────────────────────────────────────── */ .seg-toggle { display: flex; background: var(--surface-2); border-radius: var(--radius-s); padding: 3px; gap: 3px; margin-bottom: 14px; } .seg-btn { flex: 1; border: none; background: transparent; font-family: inherit; font-size: 13px; font-weight: 600; color: var(--text-2); padding: 8px 4px; border-radius: 6px; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: background .15s, color .15s; } .seg-btn.active { background: var(--surface); color: var(--accent-dark); box-shadow: var(--shadow-s); } .pie-wrap { position: relative; width: 190px; margin: 0 auto 14px; } .pie-svg { display: block; width: 100%; height: auto; } .pie-center { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; pointer-events: none; text-align: center; } .pie-center-amt { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--text); } .pie-center-label { font-size: 11px; color: var(--text-3); margin-top: 1px; } .pie-legend { display: flex; flex-direction: column; gap: 8px; } .pie-legend-row { display: flex; align-items: center; gap: 8px; font-size: 13px; } .pie-dot { width: 10px; height: 10px; border-radius: 50%; flex-shrink: 0; } .pie-legend-name { flex: 1; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .pie-legend-amt { font-variant-numeric: tabular-nums; font-weight: 600; color: var(--text); } .pie-legend-pct { font-variant-numeric: tabular-nums; color: var(--text-3); width: 38px; text-align: right; } .pie-empty { font-size: 13px; color: var(--text-3); text-align: center; padding: 8px 0; } /* ── Mini bar ────────────────────────────────────────────────────────────── */ .mini-bar-wrap { margin: 8px 16px 10px; display: flex; gap: 4px; align-items: flex-end; height: 8px; } .mini-bar-segment { height: 100%; border-radius: 4px; min-width: 4px; transition: width .3s; } /* ── Case list ───────────────────────────────────────────────────────────── */ .case-list { padding: 0; margin: 0; list-style: none; } .case-item { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px solid var(--border); background: var(--surface); } .case-item:last-child { border-bottom: none; } .case-item-info { flex: 1; min-width: 0; } .case-item-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .case-item-cat { font-weight: 600; font-size: 14px; color: var(--text); } .case-item-take { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 14px; color: var(--accent-dark); } .case-item-take.negative { color: var(--danger); } .case-item-sub { font-size: 12px; color: var(--text-3); margin-top: 1px; } .case-delete-btn { background: none; border: none; width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; font-size: 16px; cursor: pointer; border-radius: 50%; color: var(--text-3); -webkit-tap-highlight-color: transparent; flex-shrink: 0; } .case-delete-btn:hover { background: var(--danger-bg); color: var(--danger); } /* ── Clinic settings list ────────────────────────────────────────────────── */ .clinic-list { padding: 0; margin: 0; list-style: none; } .clinic-list-item { display: flex; align-items: center; padding: 14px 16px; border-bottom: 1px solid var(--border); cursor: pointer; -webkit-tap-highlight-color: transparent; } .clinic-list-item:last-child { border-bottom: none; } .clinic-list-item-info { flex: 1; min-width: 0; } /* Clinic name is the PRIMARY element: large, bold, explicit color (explicit so dark-mode CanvasText can never make it white-on-white). */ .clinic-list-item-name { font-weight: 700; font-size: 17px; color: var(--text); line-height: 1.3; } .clinic-list-item-sub { font-size: 12px; color: var(--text-3); margin-top: 3px; } .chevron { color: var(--text-3); font-size: 18px; } /* ── Radio group ────────────────────────────────────────────────────────── */ .radio-group { display: flex; flex-direction: column; gap: 10px; } .radio-option { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-s); cursor: pointer; transition: all .15s; } .radio-option:has(input:checked) { border-color: var(--accent); background: var(--accent-bg); } .radio-option input[type="radio"] { accent-color: var(--accent); width: 18px; height: 18px; } .radio-option-text { flex: 1; } .radio-option-label { font-size: 14px; font-weight: 600; } .radio-option-hint { font-size: 12px; color: var(--text-3); margin-top: 1px; } /* ── Toggle ──────────────────────────────────────────────────────────────── */ .toggle-row { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; border-bottom: 1px solid var(--border); } .toggle-row:last-child { border-bottom: none; } .toggle-row-text .toggle-label { font-size: 15px; font-weight: 500; } .toggle-row-text .toggle-hint { font-size: 12px; color: var(--text-3); margin-top: 2px; } .toggle { position: relative; width: 50px; height: 30px; flex-shrink: 0; } .toggle input { opacity: 0; width: 0; height: 0; } .toggle-track { position: absolute; inset: 0; background: var(--border); border-radius: 15px; transition: background .2s; cursor: pointer; } .toggle-track::after { content: ''; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; background: #fff; border-radius: 50%; transition: transform .2s; box-shadow: 0 1px 4px rgba(0,0,0,.2); } .toggle input:checked + .toggle-track { background: var(--accent); } .toggle input:checked + .toggle-track::after { transform: translateX(20px); } /* ── Overrides accordion ────────────────────────────────────────────────── */ .overrides-grid { display: grid; grid-template-columns: 1fr auto auto; gap: 8px; align-items: center; font-size: 13px; } .overrides-grid .col-label { color: var(--text-2); font-weight: 500; } .overrides-grid .col-header { font-size: 11px; color: var(--text-3); font-weight: 600; text-align: right; } .input-sm { height: 36px; width: 72px; padding: 0 8px; border: 1.5px solid var(--border); border-radius: var(--radius-s); font-size: 14px; font-family: inherit; font-variant-numeric: tabular-nums; color: var(--text); background: var(--surface); outline: none; text-align: right; } .input-sm:focus { border-color: var(--accent); } /* ── Toast ───────────────────────────────────────────────────────────────── */ .toast-container { position: fixed; bottom: calc(var(--tab-h) + var(--safe-bottom) + 12px); left: 50%; transform: translateX(-50%); z-index: 200; pointer-events: none; display: flex; flex-direction: column; align-items: center; gap: 8px; } .toast { background: #1a2226ee; color: #fff; padding: 10px 18px; border-radius: var(--radius-l); font-size: 14px; font-weight: 500; white-space: nowrap; backdrop-filter: blur(8px); box-shadow: var(--shadow-m); animation: toast-in .2s ease, toast-out .3s ease 1.7s forwards; } @keyframes toast-in { from { opacity:0; transform: translateY(8px); } to { opacity:1; transform: none; } } @keyframes toast-out { from { opacity:1; } to { opacity:0; transform: translateY(-4px); } } /* ── Modal / bottom sheet ────────────────────────────────────────────────── */ .modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,.4); z-index: 150; display: flex; align-items: flex-end; padding: 0; animation: fade-in .15s ease; } @keyframes fade-in { from { opacity:0; } to { opacity:1; } } .modal-sheet { background: var(--surface); color: var(--text); /* explicit: never inherit dark-mode CanvasText */ border-radius: var(--radius-l) var(--radius-l) 0 0; width: 100%; max-height: 92dvh; overflow-y: auto; /* Backdrop (z 150) covers the tab bar (z 100), so sheets are never occluded by it; padding clears the iOS home indicator. */ padding: 8px 0 calc(24px + var(--safe-bottom)); animation: slide-up .2s ease; } @keyframes slide-up { from { transform: translateY(100%); } to { transform: none; } } .modal-handle { width: 36px; height: 4px; background: var(--border); border-radius: 2px; margin: 0 auto 12px; } .modal-header { display: flex; align-items: center; padding: 0 16px 12px; gap: 8px; } .modal-title { font-size: 17px; font-weight: 700; flex: 1; } .modal-body { padding: 0 16px; } /* ── Confirm dialog ─────────────────────────────────────────────────────── */ .confirm-btns { display: flex; gap: 10px; margin-top: 20px; } .confirm-btns .btn { flex: 1; } /* ── Empty state ─────────────────────────────────────────────────────────── */ .empty-state { text-align: center; padding: 40px 24px; color: var(--text-3); } .empty-state .empty-icon { font-size: 48px; margin-bottom: 12px; } .empty-state h3 { font-size: 17px; color: var(--text-2); margin-bottom: 8px; } .empty-state p { font-size: 14px; line-height: 1.5; } /* ── Onboarding ─────────────────────────────────────────────────────────── */ .onboarding { display: flex; flex-direction: column; align-items: center; padding: 40px 24px; text-align: center; } .onboarding-logo { font-size: 56px; margin-bottom: 16px; } .onboarding h2 { font-size: 22px; font-weight: 700; margin-bottom: 10px; } .onboarding p { font-size: 15px; color: var(--text-2); line-height: 1.6; max-width: 300px; } .onboarding .btn { margin-top: 28px; width: 100%; max-width: 300px; } /* ── Numbers ─────────────────────────────────────────────────────────────── */ .num { font-variant-numeric: tabular-nums; } /* ── Utility ─────────────────────────────────────────────────────────────── */ .flex { display: flex; } .flex-1 { flex: 1; } .gap-8 { gap: 8px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .w100 { width: 100%; } .text-accent { color: var(--accent); } .text-danger { color: var(--danger); } .text-muted { color: var(--text-3); } .fw-600 { font-weight: 600; } .fs-13 { font-size: 13px; } /* ── Back navigation ─────────────────────────────────────────────────────── */ .back-btn { background: none; border: none; display: flex; align-items: center; gap: 4px; font-size: 16px; color: var(--accent); cursor: pointer; font-family: inherit; padding: 0; -webkit-tap-highlight-color: transparent; } /* ── Delete row animation ────────────────────────────────────────────────── */ .case-item.removing { animation: row-remove .2s ease forwards; } @keyframes row-remove { to { opacity: 0; max-height: 0; padding-top: 0; padding-bottom: 0; overflow: hidden; } } /* ── Version footer ─────────────────────────────────────────────────────── */ .app-version { text-align: center; color: var(--text-3); font-size: 11px; margin-top: 24px; } /* ── Settings rows (theme / language, on the Clinics screen) ────────────── */ .settings-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 0; } .settings-row + .settings-row { border-top: 1px solid var(--border); } .settings-label { font-size: 14px; font-weight: 600; color: var(--text); } .seg-toggle.seg-sm { margin-bottom: 0; width: 190px; flex-shrink: 0; } .seg-sm .seg-btn { padding: 6px 4px; font-size: 12px; }