@charset "UTF-8"; /* ========================================================================== LifeWheel — Design System -------------------------------------------------------------------------- This is the ONLY global stylesheet. It replaced four files (style.css, dashboard.css, pro.css and the previous app.css) that each redefined the same custom properties and fought over the cascade — the reason spacing, radii and colours never quite matched between pages. Layer order below is deliberate; keep additions in the right section: 1 Reset 2 Design tokens 3 Base typography 4 App shell & navigation (sidebar / topbar / drawer / bottom bar) 5 Page primitives (page head, tabs, toolbar, sections) 6 Surfaces (panels, cards, stat tiles) 7 Buttons 8 Forms 9 Badges, chips, pills 10 Tables (card-mode on phones) 11 Lists & media rows 12 Feedback (alerts, toasts, modals, empty, skeleton) 13 Feature modules (wallet, subscriptions, work, today...) 14 Utilities 15 Legacy class shims 16 Print & reduced motion Written RTL-first. Sizing uses logical properties so an LTR flip is a one-line change on . ========================================================================== */ /* ========================================================================== 1. Reset ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } * { margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; /* Anchor jumps must clear the sticky mobile top bar. */ scroll-padding-top: 90px; } body { min-height: 100svh; } img, svg, video, canvas { display: block; max-width: 100%; height: auto; } button, input, select, textarea { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } table { border-collapse: collapse; width: 100%; } summary { cursor: pointer; list-style: none; } summary::-webkit-details-marker { display: none; } [hidden] { display: none !important; } /* ========================================================================== 2. Design tokens ========================================================================== */ :root { /* -- Brand ------------------------------------------------------- */ --primary: #6366f1; --primary-strong: #4f46e5; --primary-soft: rgba(99, 102, 241, 0.14); --primary-glow: rgba(99, 102, 241, 0.38); --secondary: #8b5cf6; --accent: #60a5fa; /* -- Semantic ---------------------------------------------------- */ --success: #34d399; --success-soft: rgba(52, 211, 153, 0.14); --warning: #fbbf24; --warning-soft: rgba(251, 191, 36, 0.14); --danger: #f87171; --danger-soft: rgba(248, 113, 113, 0.14); --info: #60a5fa; --info-soft: rgba(96, 165, 250, 0.14); /* Money semantics — used everywhere an amount is shown. */ --money-in: #34d399; --money-out: #fb7185; /* -- Surfaces (dark is the default look) ------------------------- */ --bg-color: #0b1220; --bg-gradient: radial-gradient(1100px 560px at 88% -10%, rgba(99, 102, 241, 0.16), transparent 60%), radial-gradient(820px 460px at 4% 106%, rgba(96, 165, 250, 0.10), transparent 55%); --surface: rgba(21, 30, 51, 0.72); --surface-strong: #16203a; --surface-2: rgba(255, 255, 255, 0.045); --surface-3: rgba(255, 255, 255, 0.07); --glass-bg: rgba(24, 34, 56, 0.66); --glass-border: rgba(148, 163, 184, 0.16); --glass-highlight: rgba(255, 255, 255, 0.08); --border: rgba(148, 163, 184, 0.16); --border-strong: rgba(148, 163, 184, 0.30); --overlay: rgba(2, 6, 23, 0.62); /* -- Text -------------------------------------------------------- */ --text-main: #f1f5f9; --text-muted: #98a7bd; --text-faint: #6b7c94; --text-on-primary: #ffffff; /* -- Radii ------------------------------------------------------- */ --radius-xs: 8px; --radius-sm: 12px; --radius-md: 16px; --radius-lg: 20px; --radius-xl: 26px; --radius-pill: 999px; /* -- Elevation --------------------------------------------------- */ --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.22); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.20); --shadow-md: 0 12px 30px rgba(0, 0, 0, 0.26); --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.34); /* -- Fluid spacing scale ----------------------------------------- Every gap in the app comes from here, so density scales smoothly from a 360px phone to a 2560px monitor without extra breakpoints. */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: clamp(14px, 1.4vw, 18px); --space-5: clamp(18px, 2vw, 26px); --space-6: clamp(24px, 3vw, 38px); --space-7: clamp(34px, 4.4vw, 56px); /* -- Fluid type scale -------------------------------------------- */ --text-xs: clamp(0.68rem, 0.66rem + 0.12vw, 0.76rem); --text-sm: clamp(0.78rem, 0.75rem + 0.14vw, 0.86rem); --text-base: clamp(0.87rem, 0.84rem + 0.16vw, 0.96rem); --text-md: clamp(0.98rem, 0.94rem + 0.2vw, 1.08rem); --text-lg: clamp(1.1rem, 1.02rem + 0.4vw, 1.32rem); --text-xl: clamp(1.3rem, 1.12rem + 0.9vw, 1.78rem); --text-2xl: clamp(1.6rem, 1.25rem + 1.6vw, 2.4rem); --text-num: clamp(1.35rem, 1.05rem + 1.3vw, 2rem); /* -- Motion ------------------------------------------------------ */ --transition: 220ms cubic-bezier(0.4, 0, 0.2, 1); --ease-spring: cubic-bezier(0.2, 0.9, 0.3, 1.2); /* -- Layout metrics ---------------------------------------------- */ --sidebar-w: 258px; --sidebar-rail-w: 78px; --topbar-h: 62px; --tabbar-h: 62px; --content-max: 1560px; --tap: 44px; /* minimum comfortable touch target */ --font-sans: 'Cairo', system-ui, -apple-system, 'Segoe UI', Tahoma, sans-serif; --font-num: 'Cairo', ui-monospace, 'SF Mono', monospace; color-scheme: dark; } /* -- Light theme ----------------------------------------------------- */ body.light-mode { --bg-color: #eff2f8; --bg-gradient: radial-gradient(1100px 560px at 88% -10%, rgba(99, 102, 241, 0.13), transparent 60%), radial-gradient(820px 460px at 4% 106%, rgba(96, 165, 250, 0.12), transparent 55%); --surface: rgba(255, 255, 255, 0.9); --surface-strong: #ffffff; --surface-2: rgba(15, 23, 42, 0.035); --surface-3: rgba(15, 23, 42, 0.06); --glass-bg: rgba(255, 255, 255, 0.84); --glass-border: rgba(15, 23, 42, 0.09); --glass-highlight: rgba(255, 255, 255, 0.9); --border: rgba(15, 23, 42, 0.10); --border-strong: rgba(15, 23, 42, 0.20); --overlay: rgba(15, 23, 42, 0.55); --text-main: #0f172a; --text-muted: #4a5a72; --text-faint: #6b7c94; --money-in: #059669; --money-out: #e11d48; /* The semantic colours in :root are picked to sit on a dark background. Used as TEXT on white they drop to ~1.7 contrast — the balance page's headline "مايلة" was measured at 1.67. Darken them here, exactly as --money-in/--money-out already are. The matching *-soft backgrounds stay pale, so a darker colour on them reads better, not worse; and the few places that fill a shape with these colours use white on top, which also improves. */ --success: #059669; --warning: #b45309; --danger: #dc2626; --info: #2563eb; --accent: #2563eb; --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.06); --shadow-sm: 0 2px 8px rgba(15, 23, 42, 0.07); --shadow-md: 0 12px 30px rgba(15, 23, 42, 0.09); --shadow-lg: 0 24px 60px rgba(15, 23, 42, 0.13); color-scheme: light; } /* ========================================================================== 3. Base typography ========================================================================== */ body { font-family: var(--font-sans); font-size: var(--text-base); line-height: 1.65; color: var(--text-main); background: var(--bg-color); background-image: var(--bg-gradient); background-attachment: fixed; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; transition: background-color var(--transition), color var(--transition); } h1, h2, h3, h4, h5 { line-height: 1.3; font-weight: 800; text-wrap: balance; } h1 { font-size: var(--text-xl); } h2 { font-size: var(--text-lg); } h3 { font-size: var(--text-md); } h4 { font-size: var(--text-base); } p { text-wrap: pretty; } small { font-size: var(--text-xs); } strong, b { font-weight: 700; } ::selection { background: var(--primary-soft); color: var(--text-main); } /* Accessible keyboard focus — visible on every interactive element. */ :focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 6px; } :focus:not(:focus-visible) { outline: none; } /* Scrollbars */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: transparent; } ::-webkit-scrollbar-thumb { background: var(--border-strong); border: 2px solid transparent; border-radius: var(--radius-pill); background-clip: padding-box; } ::-webkit-scrollbar-thumb:hover { background: var(--primary); background-clip: padding-box; } * { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; } /* Numeric text lines up in tables and money columns. */ .num, .money, td.num, .stat-value { font-variant-numeric: tabular-nums; font-feature-settings: 'tnum' 1; } /* Signed money on an RTL page. A "+" or "−" is a bidi-neutral character, so inside an Arabic paragraph the browser pushes it to the far side of the number: «+5,000» is painted as «5,000+». Numbers themselves are always read left-to-right, so the sign has to be isolated in its own LTR run to sit where a reader expects it. */ .row-amount, .amount, .money-signed, .fm-row strong, .forecast-worst strong, .stat-value, .balance-figure .balance-value { direction: ltr; unicode-bidi: isolate; } /* isolate keeps the sign glued to its digits; the block itself still sits on whichever side the RTL layout put it, so nothing moves. */ /* ========================================================================== 4. App shell & navigation -------------------------------------------------------------------------- Desktop (>=1280px) : fixed sidebar + fluid content Laptop (1024-1279): icon rail that expands on hover/focus Tablet (768-1023) : top bar + off-canvas drawer Phone (<768px) : top bar + drawer + bottom tab bar ========================================================================== */ .dashboard-wrapper { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); gap: var(--space-5); width: 100%; max-width: var(--content-max); margin-inline: auto; padding: var(--space-5); align-items: start; } /* -- Sidebar --------------------------------------------------------- */ .sidebar { position: sticky; top: var(--space-5); display: flex; flex-direction: column; justify-content: space-between; width: 100%; max-height: calc(100svh - (var(--space-5) * 2)); padding: var(--space-5) var(--space-3) var(--space-4); border-radius: var(--radius-xl); overflow-y: auto; overscroll-behavior: contain; } .sidebar-body { min-width: 0; } .brand-logo { display: flex; align-items: center; gap: 10px; margin: 0 4px var(--space-5); padding: 4px; color: var(--text-main); } .brand-mark { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 12px; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 8px 20px var(--primary-glow); } .brand-logo strong { display: block; font-size: 0.95rem; line-height: 1.15; } .brand-logo small { display: block; margin-top: 2px; color: var(--text-faint); font-size: 0.56rem; letter-spacing: 0.14em; } /* The sidebar's search "field" — a button dressed as an input, because that is the shape people aim at when they want to search. It opens the overlay; nothing is ever typed into this element itself. */ .sidebar-search { display: flex; align-items: center; gap: 8px; width: 100%; margin: var(--space-4) 0 var(--space-3); padding: 9px var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); color: var(--text-faint); font-size: var(--text-sm); text-align: start; cursor: pointer; transition: border-color 160ms ease, color 160ms ease; } .sidebar-search:hover { border-color: var(--primary); color: var(--text-muted); } .sidebar-search > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sidebar-search kbd { flex: none; padding: 1px 6px; border: 1px solid var(--border-strong); border-radius: 5px; background: var(--surface); font-family: inherit; font-size: .68rem; letter-spacing: .02em; } .topbar-search { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); margin-inline-start: auto; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-main); } .topbar-search:hover { border-color: var(--primary); color: var(--primary); } .nav-menu { display: grid; gap: 2px; } .nav-section-label { margin: var(--space-4) 10px 6px; color: var(--text-faint); font-size: 0.64rem; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; } .nav-section-label:first-child { margin-top: 0; } .nav-item { position: relative; display: flex; align-items: center; gap: 11px; min-height: var(--tap); padding: 9px 12px; border: 1px solid transparent; border-radius: var(--radius-sm); color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; transition: background var(--transition), color var(--transition), border-color var(--transition); } .nav-item > i { flex: none; width: 20px; text-align: center; font-size: 0.95rem; color: var(--text-faint); transition: color var(--transition); } .nav-item > span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nav-item:hover { color: var(--text-main); background: var(--surface-2); border-color: var(--border); } .nav-item:hover > i { color: var(--text-muted); } .nav-item.active { color: var(--text-main); background: linear-gradient(100deg, var(--primary-soft), transparent 85%); border-color: color-mix(in srgb, var(--primary) 26%, transparent); box-shadow: inset 3px 0 0 var(--primary); } .nav-item.active > i { color: var(--primary); } /* Small "new"/count badge at the end of a nav row. */ .nav-item em, .nav-item .nav-count { margin-inline-start: auto; flex: none; padding: 2px 7px; border-radius: var(--radius-pill); background: var(--primary-soft); color: color-mix(in srgb, var(--primary) 70%, var(--text-main)); font-size: 0.6rem; font-style: normal; font-weight: 800; } .nav-item .nav-count.is-due { background: var(--danger-soft); color: var(--danger); } .sidebar-foot { display: grid; gap: 8px; margin-top: var(--space-4); } .sidebar-quote { margin: var(--space-4) 6px 0; padding-top: var(--space-3); border-top: 1px solid var(--border); color: var(--text-faint); font-size: 0.7rem; line-height: 1.8; } .sidebar-quote i { margin-inline-end: 5px; color: var(--primary); } /* -- Main column ----------------------------------------------------- */ .app-main { min-width: 0; } .main-content { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; } /* -- Mobile top bar --------------------------------------------------- */ .app-topbar { display: none; position: sticky; top: 0; z-index: 60; align-items: center; gap: var(--space-3); min-height: var(--topbar-h); padding: 10px var(--space-4); padding-top: max(10px, env(safe-area-inset-top)); background: color-mix(in srgb, var(--bg-color) 88%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom: 1px solid var(--border); } .app-topbar .brand-mini { display: flex; align-items: center; gap: 8px; min-width: 0; /* the bar is fixed-width; the name yields */ font-weight: 800; font-size: var(--text-base); } .app-topbar .brand-word { white-space: nowrap; } /* On a phone the bar carries five controls — menu, brand, search, account, bell. The wordmark is the only thing in it that is not a control, so it is the one that goes; the logo mark still says which app this is. It is hidden rather than truncated on purpose: "Life Wheel" clipped to "…eel" reads as a rendering bug, not as a shortened name. */ @media (max-width: 479px) { .app-topbar .brand-word { display: none; } } .app-topbar .topbar-spacer { margin-inline-start: auto; } .nav-toggle { display: inline-grid; place-items: center; flex: none; width: var(--tap); height: var(--tap); border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text-main); } .nav-toggle:hover { border-color: var(--border-strong); } /* -- Drawer scrim ----------------------------------------------------- */ .nav-scrim { display: none; position: fixed; inset: 0; z-index: 70; background: var(--overlay); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } body.nav-open .nav-scrim { display: block; animation: fade-in 180ms ease; } body.nav-open { overflow: hidden; } /* -- Mobile bottom tab bar -------------------------------------------- */ .app-tabbar { display: none; position: fixed; inset-inline: 0; bottom: 0; z-index: 65; padding: 6px 8px; padding-bottom: max(6px, env(safe-area-inset-bottom)); background: color-mix(in srgb, var(--bg-color) 92%, transparent); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-top: 1px solid var(--border); } .app-tabbar ul { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 2px; } .app-tabbar a, .app-tabbar button { display: grid; justify-items: center; gap: 3px; width: 100%; padding: 6px 2px; min-height: 50px; border-radius: var(--radius-sm); color: var(--text-faint); font-size: 0.62rem; font-weight: 700; } .app-tabbar a i, .app-tabbar button i { font-size: 1.05rem; } .app-tabbar a.active { color: var(--primary); background: var(--primary-soft); } body.nav-open .app-tabbar button[data-nav-toggle] { color: var(--primary); background: var(--primary-soft); } /* -- Account menu ------------------------------------------------------ */ .account-dock { position: fixed; z-index: 80; top: var(--space-5); left: var(--space-5); } .account-menu { position: relative; } .account-menu summary { display: flex; align-items: center; gap: 6px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: color-mix(in srgb, var(--surface-strong) 90%, transparent); box-shadow: var(--shadow-sm); transition: box-shadow var(--transition), border-color var(--transition); } .account-menu summary:hover, .account-menu[open] summary { border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .account-avatar { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 50%; color: #fff; background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 5px 14px var(--primary-glow); font-size: 0.76rem; font-weight: 900; } .account-avatar-sm { width: 34px; height: 34px; font-size: 0.68rem; } .account-caret { width: 22px; color: var(--text-muted); font-size: 0.62rem; text-align: center; transition: transform var(--transition); } .account-menu[open] .account-caret { transform: rotate(180deg); } .account-popover { position: absolute; top: calc(100% + 10px); left: 0; width: 232px; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-strong) 97%, transparent); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .account-popover-head { display: flex; align-items: center; gap: 10px; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); } .account-popover-head strong, .account-popover-head small { display: block; max-width: 145px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .account-popover-head strong { font-size: 0.8rem; } .account-popover-head small { margin-top: 2px; color: var(--text-faint); font-size: 0.67rem; } .account-popover a, .account-popover button { display: flex; align-items: center; gap: 10px; width: 100%; min-height: 40px; padding: 9px 10px; border-radius: 10px; color: var(--text-muted); font-size: 0.8rem; font-weight: 700; text-align: start; } .account-popover a:hover, .account-popover button:hover { color: var(--text-main); background: var(--surface-2); } .account-popover form { margin-top: 4px; padding-top: 4px; border-top: 1px solid var(--border); } .account-popover button.is-danger { color: var(--danger); } .account-popover button.is-danger:hover { color: var(--danger); background: var(--danger-soft); } /* -- 🔔 The nudge bell ------------------------------------------------- * Same shape as the account chip so the two read as one control cluster. Everything it shows is derived from the database on this request, so the badge is a live count, not a queue of things you already dealt with. */ .nudge-dock { position: fixed; z-index: 80; top: var(--space-5); left: calc(var(--space-5) + 76px); } .nudge-menu { position: relative; } .nudge-menu > summary { display: grid; place-items: center; position: relative; width: 44px; height: 44px; border: 1px solid var(--border); border-radius: 50%; background: color-mix(in srgb, var(--surface-strong) 90%, transparent); box-shadow: var(--shadow-sm); color: var(--text-muted); cursor: pointer; list-style: none; transition: box-shadow var(--transition), border-color var(--transition), color var(--transition); } .nudge-menu > summary::-webkit-details-marker { display: none; } .nudge-menu > summary:hover, .nudge-menu[open] > summary { color: var(--text-main); border-color: var(--primary); box-shadow: 0 0 0 4px var(--primary-soft); } .nudge-count { position: absolute; top: -3px; inset-inline-end: -3px; min-width: 19px; height: 19px; padding: 0 5px; border-radius: var(--radius-pill); background: var(--warning); color: #1a1205; font-size: 0.63rem; font-weight: 900; line-height: 19px; text-align: center; } .nudge-count.is-urgent { background: var(--danger); color: #fff; } .nudge-popover { position: absolute; top: calc(100% + 10px); left: 0; width: min(340px, calc(100vw - 2 * var(--space-4))); max-height: min(70vh, 520px); overflow-y: auto; padding: 8px; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-strong) 97%, transparent); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); } .nudge-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 8px 12px; margin-bottom: 4px; border-bottom: 1px solid var(--border); font-size: 0.8rem; } .nudge-list { display: grid; gap: 4px; } .nudge-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px; border-radius: 10px; border-inline-start: 3px solid var(--nudge-tone, var(--info)); background: var(--surface-2); } .nudge-item.is-danger { --nudge-tone: var(--danger); } .nudge-item.is-warning { --nudge-tone: var(--warning); } .nudge-item.is-info { --nudge-tone: var(--info); } .nudge-icon { flex: none; margin-top: 1px; color: var(--nudge-tone); font-size: 0.9rem; } .nudge-body { min-width: 0; display: grid; gap: 6px; } .nudge-text { color: var(--text-main); font-size: 0.78rem; font-weight: 600; line-height: 1.6; } .nudge-action { display: inline-flex; align-items: center; gap: 6px; min-height: 30px; color: var(--nudge-tone); font-size: 0.72rem; font-weight: 800; } .nudge-action:hover { text-decoration: underline; } .nudge-clear { display: grid; justify-items: center; gap: 4px; padding: var(--space-5) var(--space-4); text-align: center; } .nudge-clear i { color: var(--success); font-size: 1.6rem; margin-bottom: 4px; } .nudge-clear strong { font-size: 0.85rem; } .nudge-clear span { color: var(--text-faint); font-size: 0.72rem; } /* -- The rotating flash ------------------------------------------------ * One reminder, on its own, at most every few hours — and a different one each time, so the fourth item eventually gets seen instead of the first one shouting forever. Sits under the dock cluster, lets itself out. */ .nudge-flash { position: fixed; z-index: 79; top: calc(var(--space-5) + 58px); left: var(--space-5); display: flex; align-items: flex-start; gap: 10px; width: min(370px, calc(100vw - 2 * var(--space-4))); padding: 12px 14px; border: 1px solid var(--border-strong); border-inline-start: 3px solid var(--nudge-tone, var(--info)); border-radius: var(--radius-md); background: color-mix(in srgb, var(--surface-strong) 97%, transparent); box-shadow: var(--shadow-lg); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); opacity: 0; transform: translateY(-10px); transition: opacity 220ms ease, transform 220ms ease; } .nudge-flash.is-in { opacity: 1; transform: translateY(0); } .nudge-flash.is-danger { --nudge-tone: var(--danger); } .nudge-flash.is-warning { --nudge-tone: var(--warning); } .nudge-flash.is-info { --nudge-tone: var(--info); } .nudge-flash-icon { flex: none; margin-top: 2px; color: var(--nudge-tone); } .nudge-flash-body { min-width: 0; display: grid; gap: 6px; } .nudge-flash-body > span { color: var(--text-main); font-size: 0.78rem; font-weight: 600; line-height: 1.6; } .nudge-flash-body > a { display: inline-flex; align-items: center; min-height: 30px; color: var(--nudge-tone); font-size: 0.72rem; font-weight: 800; } .nudge-flash-body > a:hover { text-decoration: underline; } .nudge-flash > button { flex: none; width: 30px; height: 30px; margin-inline-start: auto; border: 0; border-radius: 8px; background: transparent; color: var(--text-faint); cursor: pointer; } .nudge-flash > button:hover { color: var(--text-main); background: var(--surface-2); } @media (max-width: 1023px) { /* Below the top bar, full width, clear of everything else. */ .nudge-flash { top: calc(var(--space-3) + 58px); inset-inline: var(--space-3); left: auto; width: auto; } } @media (prefers-reduced-motion: reduce) { .nudge-flash { transition: none; transform: none; } } .nudge-dock--mobile { display: none; } @media (max-width: 1023px) { .nudge-dock--desktop { display: none; } .nudge-dock--mobile { display: block; position: static; } /* Anchor the panel to the bar, not the button, so it never hangs off the edge of a 360px screen. */ .nudge-dock--mobile .nudge-popover { position: fixed; top: calc(var(--space-3) + 58px); /* Both insets, so the panel stretches across the bar. An earlier version added `left: auto; width: auto`, which cancelled the inline inset and let the panel shrink-to-fit — and, because .app-topbar carries a backdrop-filter (which makes it the containing block for fixed descendants), it resolved to a negative left and pushed the whole page 12px sideways on a 360px screen. */ inset-inline: var(--space-3); } } /* A closed
normally skips its contents, but a position:fixed child escapes that and keeps its box — which is how a panel nobody had opened was still able to widen the document. Take it out of layout explicitly. */ .nudge-menu:not([open]) .nudge-popover { display: none; } /* Only one of the two docks is ever visible: the fixed desktop one, or the copy that sits inside the mobile top bar. */ .account-dock--mobile { display: none; } @media (max-width: 1023px) { .account-dock--desktop { display: none; } .account-dock--mobile { display: block; margin-inline-start: auto; } } /* ========================================================================== 5. Page primitives ========================================================================== */ .page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--space-4); } .page-head .page-head-text { min-width: 0; } .page-head .eyebrow, .eyebrow { display: block; color: var(--accent); font-size: var(--text-xs); font-weight: 800; letter-spacing: 0.05em; } .page-head h1 { margin-top: 4px; font-size: var(--text-xl); } .page-head p.sub, .page-head .hero-copy { margin-top: 6px; color: var(--text-muted); font-size: var(--text-sm); max-width: 62ch; } .page-head-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* A "back to ..." link in the eyebrow is navigation, not prose: give it a real touch target instead of leaving it 13px tall. */ .page-head .eyebrow .text-link, .page-hero .eyebrow .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; } /* Hero panel used at the top of feature pages. */ .page-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-5); padding: var(--space-5); border-radius: var(--radius-xl); } /* -- Tabs -------------------------------------------------------------- */ .tabs { display: flex; gap: 4px; padding: 4px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .tabs::-webkit-scrollbar { display: none; } .tabs a, .tabs button { display: inline-flex; align-items: center; gap: 7px; flex: 0 0 auto; min-height: 38px; padding: 8px 15px; border-radius: var(--radius-pill); color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; white-space: nowrap; transition: background var(--transition), color var(--transition); } .tabs a:hover, .tabs button:hover { color: var(--text-main); background: var(--surface-2); } .tabs a.active, .tabs button.active, .tabs a[aria-selected="true"], .tabs button[aria-selected="true"] { color: var(--text-on-primary); background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 6px 16px var(--primary-glow); } .tabs .tab-count { padding: 1px 7px; border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.16); font-size: 0.66rem; font-weight: 800; } .tab-panel[hidden] { display: none; } /* Segmented control (compact two/three-way switch inside forms). */ .segmented { display: inline-flex; padding: 3px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); } .segmented label { position: relative; flex: 1; min-width: 0; } .segmented input { position: absolute; opacity: 0; inset: 0; cursor: pointer; } .segmented span { display: block; min-height: 36px; padding: 8px 14px; border-radius: var(--radius-xs); color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; text-align: center; white-space: nowrap; transition: background var(--transition), color var(--transition); } .segmented input:checked + span { color: var(--text-main); background: var(--surface-3); box-shadow: var(--shadow-xs); } .segmented input:focus-visible + span { outline: 2px solid var(--primary); outline-offset: 2px; } .segmented.is-money input[value="in"]:checked + span { color: var(--money-in); background: var(--success-soft); } .segmented.is-money input[value="out"]:checked + span { color: var(--money-out); background: var(--danger-soft); } /* -- Toolbar (search + filters above a list) --------------------------- */ .toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); } .toolbar > form { display: contents; } .search-box { position: relative; flex: 1 1 220px; min-width: 0; } .search-box i { position: absolute; inset-inline-start: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); pointer-events: none; } .search-box input { padding-inline-start: 40px; } /* -- Section heading inside a panel ------------------------------------ */ .section-heading { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); } .section-heading h2, .section-heading h3 { display: flex; align-items: center; gap: 9px; } .section-heading h2 i, .section-heading h3 i { color: var(--primary); } .section-heading span.count { color: var(--text-faint); font-size: var(--text-sm); font-weight: 700; } /* A link sitting in a section heading is a real destination, not prose — give it a touch-sized target. */ .section-heading .text-link { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; } /* ========================================================================== 6. Surfaces ========================================================================== */ .glass-panel, .panel { padding: var(--space-5); border: 1px solid var(--glass-border); border-radius: var(--radius-xl); background: linear-gradient(155deg, var(--glass-bg), color-mix(in srgb, var(--glass-bg) 72%, transparent)); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-highlight); } .card { padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); box-shadow: var(--shadow-xs); } .card-hover { transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .card-hover:hover { transform: translateY(-3px); border-color: var(--border-strong); box-shadow: var(--shadow-md); } /* Auto-fitting grids — the workhorse of every page layout. `minmax(min(, 100%), 1fr)` keeps a single narrow column from overflowing on a 320px phone. */ .grid-auto { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(260px, 100%), 1fr)); } .grid-auto-sm { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(180px, 100%), 1fr)); } .grid-auto-lg { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(min(340px, 100%), 1fr)); } .bento-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); } /* Sidebar-plus-content split that collapses to one column when narrow. */ .split-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 1080px) { .split-layout { grid-template-columns: minmax(0, 1fr) 350px; align-items: start; } .split-layout.reverse { grid-template-columns: 350px minmax(0, 1fr); } .split-layout > .split-aside { position: sticky; top: var(--space-5); } } /* -- Stat tiles -------------------------------------------------------- */ .stats-grid { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(168px, 100%), 1fr)); } .stat-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; } .stat-card::after { content: ''; position: absolute; inset-block-start: 0; inset-inline: 0; height: 3px; background: var(--stat-accent, var(--primary)); opacity: 0.85; } .stat-card .stat-label { display: flex; align-items: center; gap: 7px; color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; } .stat-card .stat-label i { color: var(--stat-accent, var(--primary)); } .stat-value { font-size: var(--text-num); font-weight: 800; line-height: 1.15; letter-spacing: -0.02em; } .stat-card .stat-hint { color: var(--text-faint); font-size: var(--text-xs); } .stat-card.is-in { --stat-accent: var(--money-in); } .stat-card.is-out { --stat-accent: var(--money-out); } .stat-card.is-warning { --stat-accent: var(--warning); } .stat-card.is-danger { --stat-accent: var(--danger); } .stat-card.is-success { --stat-accent: var(--success); } /* ========================================================================== 7. Buttons ========================================================================== */ .btn, .btn-primary, .btn-secondary, .btn-ghost, .btn-danger, .btn-success { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: var(--tap); padding: 11px 18px; border: 1px solid transparent; border-radius: var(--radius-sm); font-size: var(--text-sm); font-weight: 700; line-height: 1.1; white-space: nowrap; cursor: pointer; -webkit-user-select: none; user-select: none; transition: transform var(--transition), box-shadow var(--transition), background var(--transition), border-color var(--transition), color var(--transition); } .btn:active, .btn-primary:active, .btn-secondary:active, .btn-danger:active, .btn-success:active { transform: translateY(1px); } .btn-primary, .btn-brand { color: var(--text-on-primary); background: linear-gradient(135deg, var(--primary), var(--secondary)); box-shadow: 0 8px 20px var(--primary-glow); } .btn-primary:hover, .btn-brand:hover { filter: brightness(1.07); box-shadow: 0 12px 26px var(--primary-glow); transform: translateY(-2px); } .btn-secondary { color: var(--text-main); background: var(--surface-2); border-color: var(--border); } .btn-secondary:hover { background: var(--surface-3); border-color: var(--border-strong); } .btn-ghost { color: var(--text-muted); background: transparent; } .btn-ghost:hover { color: var(--text-main); background: var(--surface-2); } .btn-danger { color: #fff; background: linear-gradient(135deg, #ef4444, #dc2626); box-shadow: 0 8px 20px rgba(239, 68, 68, 0.26); } .btn-danger:hover { filter: brightness(1.07); transform: translateY(-2px); } .btn-success { color: #04231a; background: linear-gradient(135deg, #34d399, #10b981); box-shadow: 0 8px 20px rgba(16, 185, 129, 0.26); } .btn-success:hover { filter: brightness(1.07); transform: translateY(-2px); } .btn-sm { min-height: 36px; padding: 7px 13px; font-size: var(--text-xs); } .btn-lg { min-height: 52px; padding: 14px 26px; font-size: var(--text-md); } .btn-icon { width: var(--tap); min-height: var(--tap); padding: 0; } .btn-icon.btn-sm { width: 36px; min-height: 36px; } .btn-block { width: 100%; } .btn:disabled, .btn-primary:disabled, .btn-secondary:disabled, .btn-danger:disabled, .btn-success:disabled, .btn[aria-disabled="true"] { opacity: 0.5; cursor: not-allowed; transform: none; box-shadow: none; } .btn-group { display: flex; flex-wrap: wrap; gap: var(--space-2); } /* Quiet inline destructive link (used inside list rows). */ .danger-link { color: var(--danger); font-size: var(--text-xs); font-weight: 700; cursor: pointer; } .danger-link:hover { text-decoration: underline; } .text-link { color: var(--accent); font-weight: 700; } .text-link:hover { color: var(--text-main); text-decoration: underline; } /* ========================================================================== 8. Forms ========================================================================== */ .form-control, .input, select.form-control, textarea.form-control { display: block; width: 100%; min-height: var(--tap); padding: 11px 14px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: color-mix(in srgb, var(--bg-color) 55%, transparent); color: var(--text-main); /* 16px on phones stops iOS Safari zooming the page on focus. */ font-size: max(16px, var(--text-sm)); transition: border-color var(--transition), box-shadow var(--transition), background var(--transition); } @media (min-width: 768px) { .form-control, .input, select.form-control, textarea.form-control { font-size: var(--text-sm); } } textarea.form-control { min-height: 108px; resize: vertical; line-height: 1.7; } .form-control::placeholder { color: var(--text-faint); } .form-control:hover { border-color: var(--border-strong); } .form-control:focus { border-color: var(--primary); background: color-mix(in srgb, var(--bg-color) 38%, transparent); box-shadow: 0 0 0 4px var(--primary-soft); outline: none; } select.form-control { appearance: none; padding-inline-end: 38px; background-image: linear-gradient(45deg, transparent 50%, var(--text-muted) 50%), linear-gradient(135deg, var(--text-muted) 50%, transparent 50%); background-position: left 18px top 50%, left 13px top 50%; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select.form-control option { background: var(--surface-strong); color: var(--text-main); } input[type="color"].form-control { padding: 5px; min-height: 44px; cursor: pointer; } input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: invert(0.6); cursor: pointer; } body.light-mode input[type="date"].form-control::-webkit-calendar-picker-indicator { filter: none; } .form-group { margin-bottom: var(--space-4); text-align: start; } .form-group:last-child { margin-bottom: 0; } .form-group label, .field-label { display: block; margin-bottom: 7px; color: var(--text-muted); font-size: var(--text-sm); font-weight: 600; } .form-group:focus-within label { color: var(--primary); } .form-hint { margin-top: 6px; color: var(--text-faint); font-size: var(--text-xs); } .text-danger, .field-error { display: block; margin-top: 6px; color: var(--danger); font-size: var(--text-xs); font-weight: 600; } .form-control[aria-invalid="true"] { border-color: var(--danger); box-shadow: 0 0 0 4px var(--danger-soft); } /* Responsive form rows: fields sit side by side when there is room. */ .form-row { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(190px, 100%), 1fr)); } .form-row .form-group { margin-bottom: 0; } .form-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-4); } /* An optional block of a form, folded away until it is wanted. */ .more-fields > summary { cursor: pointer; padding: 10px 0; color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; } /* Checkbox / switch row */ .check-row { display: flex; align-items: flex-start; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-2); cursor: pointer; } .check-row input[type="checkbox"] { flex: none; width: 18px; height: 18px; margin-top: 3px; accent-color: var(--primary); cursor: pointer; } .check-row .check-text { min-width: 0; } .check-row strong { display: block; font-size: var(--text-sm); } .check-row small { display: block; color: var(--text-faint); } .check-row:hover { border-color: var(--border-strong); } /* Amount input with a currency suffix. */ .amount-field { position: relative; } .amount-field input { padding-inline-end: 54px; } .amount-field .currency { position: absolute; inset-inline-end: 14px; top: 50%; transform: translateY(-50%); color: var(--text-faint); font-size: var(--text-xs); font-weight: 700; pointer-events: none; } /* ========================================================================== 9. Badges, chips, pills ========================================================================== */ .badge { display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; white-space: nowrap; } .badge-success { background: var(--success-soft); color: var(--success); border-color: transparent; } .badge-warning { background: var(--warning-soft); color: var(--warning); border-color: transparent; } .badge-danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; } .badge-info { background: var(--info-soft); color: var(--info); border-color: transparent; } .badge-primary { background: var(--primary-soft); color: color-mix(in srgb, var(--primary) 72%, var(--text-main)); border-color: transparent; } .badge-muted { background: var(--surface-2); color: var(--text-faint); } .chip-row { display: flex; flex-wrap: wrap; gap: var(--space-2); } .chip { display: inline-flex; align-items: center; gap: 6px; min-height: 34px; padding: 6px 13px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface-2); color: var(--text-muted); font-size: var(--text-xs); font-weight: 700; transition: background var(--transition), color var(--transition), border-color var(--transition); } .chip:hover { color: var(--text-main); border-color: var(--border-strong); } .chip.active { color: var(--text-on-primary); background: var(--primary); border-color: transparent; } .chip .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; } /* Progress bar */ .progress { height: 8px; border-radius: var(--radius-pill); background: var(--surface-2); overflow: hidden; } .progress > span { display: block; height: 100%; border-radius: var(--radius-pill); background: linear-gradient(90deg, var(--primary), var(--secondary)); transition: width 420ms ease; } .progress.is-success > span { background: linear-gradient(90deg, #10b981, var(--success)); } .progress.is-danger > span { background: linear-gradient(90deg, #dc2626, var(--danger)); } /* ========================================================================== 10. Tables -------------------------------------------------------------------------- Wide tables scroll inside .table-wrap on tablets. On phones they switch to a stacked "card" layout driven by each cell's data-label attribute, so no horizontal scrolling is ever required to read a row. ========================================================================== */ .table-wrap { border: 1px solid var(--border); border-radius: var(--radius-md); overflow-x: auto; -webkit-overflow-scrolling: touch; } .table { width: 100%; font-size: var(--text-sm); } .table th, .table td { padding: 12px 14px; text-align: start; border-bottom: 1px solid var(--border); vertical-align: middle; } .table thead th { position: sticky; top: 0; z-index: 1; background: var(--surface-strong); color: var(--text-muted); font-size: var(--text-xs); font-weight: 800; white-space: nowrap; } .table tbody tr { transition: background 150ms ease; } .table tbody tr:hover { background: var(--surface-2); } .table tbody tr:last-child td { border-bottom: 0; } .table td.num, .table th.num { text-align: end; font-variant-numeric: tabular-nums; } .table .row-actions { display: flex; gap: 6px; justify-content: flex-end; } @media (max-width: 767px) { .table-responsive { border: 0; overflow: visible; } .table-responsive .table, .table-responsive .table tbody, .table-responsive .table tr, .table-responsive .table td { display: block; width: 100%; } .table-responsive .table thead { display: none; } .table-responsive .table tr { margin-bottom: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .table-responsive .table td { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 7px 0; border-bottom: 1px dashed var(--border); text-align: end; } .table-responsive .table td:last-child { border-bottom: 0; padding-bottom: 0; } .table-responsive .table td::before { content: attr(data-label); flex: none; color: var(--text-faint); font-size: var(--text-xs); font-weight: 700; text-align: start; } .table-responsive .table td:not([data-label]) { justify-content: flex-end; } .table-responsive .table .row-actions { justify-content: flex-end; width: 100%; } } /* ========================================================================== 11. Lists & media rows ========================================================================== */ .list { display: grid; gap: var(--space-2); } .list-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); transition: border-color var(--transition), background var(--transition); } .list-row:hover { border-color: var(--border-strong); } .list-row .row-main { flex: 1 1 200px; min-width: 0; } .list-row .row-title { display: block; font-weight: 700; font-size: var(--text-sm); } .list-row .row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 3px; color: var(--text-faint); font-size: var(--text-xs); } .list-row .row-amount { flex: none; font-size: var(--text-md); font-weight: 800; font-variant-numeric: tabular-nums; } .list-row .row-amount.is-in { color: var(--money-in); } .list-row .row-amount.is-out { color: var(--money-out); } .list-row .row-actions { display: flex; flex: none; gap: 6px; margin-inline-start: auto; } /* Coloured leading icon for a row. */ .row-icon { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: var(--radius-sm); background: var(--row-accent-soft, var(--primary-soft)); color: var(--row-accent, var(--primary)); font-size: 1rem; } @media (max-width: 560px) { .list-row { padding: var(--space-3); } .list-row .row-actions { width: 100%; margin-inline-start: 0; justify-content: flex-end; } } /* ========================================================================== 12. Feedback ========================================================================== */ .alert { display: flex; align-items: flex-start; gap: 11px; padding: 13px 16px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); font-size: var(--text-sm); font-weight: 600; } .alert i { margin-top: 3px; flex: none; } .alert-success { background: var(--success-soft); border-color: color-mix(in srgb, var(--success) 38%, transparent); } .alert-success i { color: var(--success); } .alert-error, .alert-danger { background: var(--danger-soft); border-color: color-mix(in srgb, var(--danger) 38%, transparent); } .alert-error i, .alert-danger i { color: var(--danger); } .alert-info { background: var(--info-soft); border-color: color-mix(in srgb, var(--info) 38%, transparent); } .alert-info i { color: var(--info); } .alert-warning { background: var(--warning-soft); border-color: color-mix(in srgb, var(--warning) 38%, transparent); } .alert-warning i { color: var(--warning); } .toast-stack { position: fixed; z-index: 9999; inset-inline-start: var(--space-4); inset-block-end: calc(var(--space-4) + env(safe-area-inset-bottom)); display: grid; gap: 10px; max-width: min(360px, calc(100vw - 32px)); } .toast { display: flex; align-items: center; gap: 11px; padding: 13px 17px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-strong); box-shadow: var(--shadow-lg); font-size: var(--text-sm); font-weight: 600; -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); animation: toast-in 320ms var(--ease-spring) both; } .toast i { flex: none; } .toast-success i { color: var(--success); } .toast-error i { color: var(--danger); } .toast-info i { color: var(--info); } .toast-warning i { color: var(--warning); } @media (max-width: 767px) { /* Keep toasts clear of the bottom tab bar. */ .toast-stack { inset-block-end: calc(var(--tabbar-h) + 12px + env(safe-area-inset-bottom)); inset-inline: var(--space-3); max-width: none; } } /* -- Modals ------------------------------------------------------------- */ .modal-overlay { position: fixed; inset: 0; z-index: 10000; display: none; align-items: center; justify-content: center; padding: var(--space-4); background: var(--overlay); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); overflow-y: auto; overscroll-behavior: contain; } .modal-overlay.open { display: flex; animation: fade-in 180ms ease; } .modal { width: 100%; max-width: 430px; margin: auto; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-strong); box-shadow: var(--shadow-lg); text-align: center; animation: modal-pop 240ms var(--ease-spring); } .modal h3 { margin-bottom: 8px; } .modal p { margin-bottom: var(--space-4); color: var(--text-muted); } .modal-actions { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; } /* Wider form dialog (add/edit panels). */ .dialog { width: 100%; max-width: 560px; margin: auto; padding: var(--space-5); border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface-strong); box-shadow: var(--shadow-lg); text-align: start; animation: modal-pop 240ms var(--ease-spring); } .dialog-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); padding-bottom: var(--space-3); border-bottom: 1px solid var(--border); } .dialog-head p { margin-top: 4px; color: var(--text-muted); font-size: var(--text-xs); } .dialog-close { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: var(--radius-xs); color: var(--text-muted); } .dialog-close:hover { background: var(--surface-2); color: var(--text-main); } @media (max-width: 560px) { /* Dialogs become bottom sheets on phones — thumb-reachable. */ .modal-overlay { align-items: flex-end; padding: 0; } .dialog, .modal { max-width: none; border-radius: var(--radius-xl) var(--radius-xl) 0 0; padding-bottom: calc(var(--space-5) + env(safe-area-inset-bottom)); animation: sheet-up 260ms var(--ease-spring); } } /* -- Empty & loading ---------------------------------------------------- */ .empty-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: var(--space-7) var(--space-4); color: var(--text-muted); text-align: center; } .empty-state .empty-icon { display: grid; place-items: center; width: 68px; height: 68px; margin-bottom: 4px; border-radius: 50%; background: var(--primary-soft); color: var(--primary); font-size: 1.7rem; } .empty-state h3 { color: var(--text-main); font-size: var(--text-md); } .empty-state p { max-width: 44ch; font-size: var(--text-sm); } .skeleton { position: relative; overflow: hidden; background: var(--surface-2); border-radius: var(--radius-sm); } .skeleton::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, var(--glass-highlight), transparent); transform: translateX(-100%); animation: skeleton-shimmer 1.4s infinite; } @keyframes skeleton-shimmer { 100% { transform: translateX(100%); } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes modal-pop { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: none; } } @keyframes sheet-up { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } } @keyframes toast-in { from { opacity: 0; transform: translateX(-28px) scale(0.96); } to { opacity: 1; transform: none; } } /* ========================================================================== 13. Feature modules ========================================================================== */ /* -- Money figures ------------------------------------------------------ */ .amount { font-variant-numeric: tabular-nums; font-weight: 800; } .amount.is-in { color: var(--money-in); } .amount.is-out { color: var(--money-out); } .amount .cur { margin-inline-start: 3px; font-size: 0.72em; font-weight: 700; opacity: 0.72; } /* -- Wallet balance hero ------------------------------------------------ */ .wallet-hero { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); align-items: center; padding: var(--space-5); border-radius: var(--radius-xl); } @media (min-width: 900px) { .wallet-hero { grid-template-columns: minmax(260px, 340px) minmax(0, 1fr); } } .balance-figure { display: grid; gap: 6px; } .balance-figure .balance-label { color: var(--text-muted); font-size: var(--text-sm); font-weight: 700; } .balance-figure .balance-value { font-size: clamp(2rem, 1.3rem + 3.2vw, 3.2rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.03em; font-variant-numeric: tabular-nums; } .balance-figure .balance-value.is-negative { color: var(--money-out); } .balance-figure .balance-sub { color: var(--text-faint); font-size: var(--text-xs); } .balance-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-3); } /* -- Mini bar chart (pure CSS, no chart library needed) ------------------ */ .mini-chart { display: flex; align-items: flex-end; gap: clamp(4px, 1.2vw, 12px); min-height: 132px; padding-top: var(--space-3); } .mini-chart .bar-group { display: flex; flex: 1 1 0; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .mini-chart .bars { display: flex; align-items: flex-end; gap: 3px; width: 100%; height: 96px; } .mini-chart .bar { flex: 1; min-height: 3px; border-radius: 4px 4px 0 0; background: var(--money-in); opacity: 0.9; transition: height 420ms ease; } .mini-chart .bar.out { background: var(--money-out); } .mini-chart .bar-label { color: var(--text-faint); font-size: 0.6rem; font-weight: 700; white-space: nowrap; } .chart-legend { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-3); font-size: var(--text-xs); color: var(--text-muted); } .chart-legend span { display: inline-flex; align-items: center; gap: 6px; } .chart-legend i { width: 10px; height: 10px; border-radius: 3px; } /* -- Category breakdown bars -------------------------------------------- */ .breakdown { display: grid; gap: var(--space-3); } .breakdown-row { display: grid; gap: 6px; } .breakdown-row .breakdown-head { display: flex; justify-content: space-between; gap: var(--space-3); font-size: var(--text-xs); } .breakdown-row .breakdown-head strong { font-weight: 700; } .breakdown-row .breakdown-head span { color: var(--text-muted); font-variant-numeric: tabular-nums; } /* -- Subscription cards -------------------------------------------------- */ .sub-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(290px, 100%), 1fr)); } .sub-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-4); border: 1px solid var(--border); border-inline-start: 4px solid var(--sub-color, var(--primary)); border-radius: var(--radius-md); background: var(--surface); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition); } .sub-card:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); } .sub-card.is-due { border-color: color-mix(in srgb, var(--danger) 45%, transparent); background: color-mix(in srgb, var(--danger-soft) 45%, var(--surface)); } .sub-card.is-soon { border-color: color-mix(in srgb, var(--warning) 40%, transparent); } .sub-card.is-paused, .sub-card.is-closed { opacity: 0.62; } .sub-card-head { display: flex; align-items: flex-start; gap: var(--space-3); } .sub-card-head .row-icon { --row-accent: var(--sub-color, var(--primary)); background: color-mix(in srgb, var(--sub-color, var(--primary)) 16%, transparent); } .sub-card-head .sub-title { min-width: 0; flex: 1; } .sub-card-head h3 { font-size: var(--text-md); overflow-wrap: anywhere; } .sub-card-head .sub-cycle { color: var(--text-faint); font-size: var(--text-xs); } .sub-price { display: flex; align-items: baseline; gap: 6px; } .sub-price .amount { font-size: var(--text-lg); } .sub-price .per { color: var(--text-faint); font-size: var(--text-xs); } .sub-meta { display: grid; gap: 6px; font-size: var(--text-xs); color: var(--text-muted); } .sub-meta div { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .sub-meta strong { font-variant-numeric: tabular-nums; } .sub-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: auto; padding-top: var(--space-2); } .sub-actions .btn-renew { flex: 1 1 140px; } /* Countdown pill on a subscription card. */ .due-pill { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: var(--radius-pill); font-size: var(--text-xs); font-weight: 800; white-space: nowrap; } .due-pill.is-due { background: var(--danger-soft); color: var(--danger); } .due-pill.is-soon { background: var(--warning-soft); color: var(--warning); } .due-pill.is-ok { background: var(--success-soft); color: var(--success); } .due-pill.is-paused, .due-pill.is-closed { background: var(--surface-2); color: var(--text-faint); } /* -- Provenance chip on an automatic wallet row -------------------------- */ .source-chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: var(--radius-pill); background: var(--surface-3); color: var(--text-faint); font-size: 0.64rem; font-weight: 700; } .source-chip i { font-size: 0.6rem; } /* -- Work / job cards ---------------------------------------------------- */ .job-grid { display: grid; gap: var(--space-4); grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); } .job-card { display: flex; flex-direction: column; gap: var(--space-3); } .job-card .job-money { display: flex; flex-wrap: wrap; gap: var(--space-3); } .job-card .job-money div { flex: 1 1 90px; } .job-card .job-money span { display: block; color: var(--text-faint); font-size: var(--text-xs); } .job-card .job-money strong { font-size: var(--text-sm); font-variant-numeric: tabular-nums; } /* Status dots reused across work + subscriptions. */ .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; } .status-active { background: var(--success); } .status-on_hold, .status-paused { background: var(--warning); } .status-completed { background: var(--info); } .status-cancelled { background: var(--text-faint); } /* ========================================================================== 14. Utilities ========================================================================== */ .stack { display: grid; gap: var(--space-4); } .stack-sm { display: grid; gap: var(--space-2); } .row { display: flex; flex-wrap: wrap; gap: var(--space-3); } .row-tight { display: flex; flex-wrap: wrap; gap: var(--space-2); } .between { justify-content: space-between; } .center { align-items: center; } .middle { display: flex; align-items: center; gap: var(--space-2); } .push-end { margin-inline-start: auto; } .grow { flex: 1 1 auto; min-width: 0; } .wrap-anywhere { overflow-wrap: anywhere; } .truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .muted { color: var(--text-muted); } .faint { color: var(--text-faint); } .small { font-size: var(--text-xs); } .text-end { text-align: end; } .text-center { text-align: center; } .mt-0 { margin-top: 0; } .mt-3 { margin-top: var(--space-3); } .mt-4 { margin-top: var(--space-4); } .mb-0 { margin-bottom: 0; } .mb-3 { margin-bottom: var(--space-3); } .mb-4 { margin-bottom: var(--space-4); } .full { width: 100%; } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .divider { height: 1px; background: var(--border); border: 0; margin: var(--space-4) 0; } /* ========================================================================== 15. Legacy class shims Older views still use these hooks; map them onto the new system rather than leaving them unstyled. ========================================================================== */ .dashboard-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5); } .dashboard-hero h1 { font-size: var(--text-xl); } .module-layout { display: grid; gap: var(--space-5); grid-template-columns: minmax(0, 1fr); } @media (min-width: 980px) { .module-layout { grid-template-columns: 330px minmax(0, 1fr); align-items: start; } } .module-form { display: grid; gap: var(--space-3); } .module-form form { display: grid; gap: var(--space-3); } .module-list { display: grid; gap: var(--space-2); align-content: start; } .module-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); } .module-row p { color: var(--text-muted); font-size: var(--text-sm); } .module-row small { color: var(--text-faint); font-size: var(--text-xs); } .tool-empty { padding: var(--space-5); border: 1px dashed var(--border-strong); border-radius: var(--radius-md); color: var(--text-muted); text-align: center; } .auth-wrapper { display: grid; place-items: center; min-height: 100svh; padding: var(--space-4); } .auth-card { width: 100%; max-width: 440px; padding: var(--space-6) var(--space-5); text-align: center; } .auth-card h1 { font-size: var(--text-2xl); } .auth-card > p { margin-bottom: var(--space-5); color: var(--text-muted); } .page-ready { opacity: 1; } /* ========================================================================== 16. Responsive shell breakpoints ========================================================================== */ /* Large desktop: give the content more room. */ @media (min-width: 1600px) { :root { --sidebar-w: 272px; } } /* Laptop / small desktop: sidebar becomes an icon rail that expands. */ @media (min-width: 1024px) and (max-width: 1279px) { .dashboard-wrapper { grid-template-columns: var(--sidebar-rail-w) minmax(0, 1fr); } .sidebar { padding-inline: 10px; overflow: visible; } .sidebar .brand-logo { justify-content: center; margin-inline: 0; } .sidebar .brand-logo > span:not(.brand-mark) { display: none; } .nav-section-label { text-align: center; margin-inline: 0; font-size: 0.55rem; } /* Icon + a small label, stacked. Relying on the icon alone would leave the rail completely blank whenever the icon font fails to load. */ .nav-item { flex-direction: column; justify-content: center; gap: 3px; padding: 8px 4px; min-height: 56px; text-align: center; } .nav-item > span { display: block; width: 100%; font-size: 0.58rem; line-height: 1.25; font-weight: 700; } .nav-item > i { width: auto; font-size: 1.05rem; } .nav-item em, .nav-item .nav-count { position: absolute; inset-block-start: 4px; inset-inline-end: 6px; margin: 0; padding: 1px 5px; font-size: 0.52rem; } .sidebar-quote { display: none; } /* Expand on hover or keyboard focus, floating over the content. */ .sidebar:hover, .sidebar:focus-within { width: var(--sidebar-w); z-index: 90; box-shadow: var(--shadow-lg); } .sidebar:hover .nav-item > span, .sidebar:focus-within .nav-item > span { font-size: var(--text-sm); text-align: start; } .sidebar:hover .nav-item, .sidebar:focus-within .nav-item { flex-direction: row; justify-content: flex-start; gap: 11px; min-height: var(--tap); padding: 9px 12px; text-align: start; } .sidebar:hover .brand-logo > span:not(.brand-mark), .sidebar:focus-within .brand-logo > span:not(.brand-mark) { display: block; } .sidebar:hover .nav-item em, .sidebar:focus-within .nav-item em, .sidebar:hover .nav-item .nav-count, .sidebar:focus-within .nav-item .nav-count { position: static; margin-inline-start: auto; padding: 2px 7px; font-size: 0.6rem; } } /* The account chip floats over the top-left corner on desktop; keep the first block of every page clear of it. */ @media (min-width: 1024px) { .main-content > .page-head:first-child, /* Reserve room for the floating dock cluster (account chip + 🔔 bell), which sits over this corner. 76px covered the chip alone; the bell made the cluster ~120px wide and the day meter on /today started sliding underneath it. */ .main-content > .page-hero:first-child, .main-content > .dashboard-hero:first-child, .main-content > header:first-child { padding-inline-end: 136px; } } /* Tablet & phone: off-canvas drawer + top bar. */ @media (max-width: 1023px) { .dashboard-wrapper { display: block; padding: 0 0 var(--space-5); } .app-topbar { display: flex; } .app-main { padding: var(--space-4); } .main-content { gap: var(--space-4); } /* The drawer opens from the same edge the menu button sits on: the INLINE START edge, which is the right in RTL and the left in LTR. (`inset-inline-end` here would anchor it to the opposite side of the button — the drawer would fly in from the left while the button sat on the right.) */ .sidebar { position: fixed; z-index: 75; inset-block: 0; inset-inline-start: 0; width: min(300px, 86vw); max-height: none; height: 100dvh; padding: var(--space-5) var(--space-3); padding-top: max(var(--space-5), env(safe-area-inset-top)); border-radius: 0; /* The visible edge is the one facing the content. */ border-inline-end: 1px solid var(--border-strong); /* A side panel needs a sideways shadow to read as elevated — the shared --shadow-lg only casts downward, which left it looking pasted on. */ box-shadow: -18px 0 50px rgba(2, 6, 23, 0.34); /* Transforms are not direction-aware: +X is always screen-right, so the closed position has to be written per direction. RTL parks it to the right of the viewport, LTR to the left. */ transform: translateX(105%); visibility: hidden; transition: transform 280ms var(--ease-spring), visibility 280ms; } [dir="ltr"] .sidebar { transform: translateX(-105%); box-shadow: 18px 0 50px rgba(2, 6, 23, 0.34); } body.nav-open .sidebar { transform: none; visibility: visible; } .account-dock { position: static; } .account-popover { left: auto; inset-inline-end: 0; } /* The account chip moves into the top bar on small screens. */ .app-topbar .account-dock { margin-inline-start: auto; } } /* Phone: add the bottom tab bar and shrink the shell further. */ @media (max-width: 767px) { .app-tabbar { display: block; } .app-main { padding: var(--space-3); padding-bottom: calc(var(--tabbar-h) + var(--space-5)); } .glass-panel, .panel { padding: var(--space-4); border-radius: var(--radius-lg); } .page-hero, .dashboard-hero, .wallet-hero { padding: var(--space-4); } .stats-grid { grid-template-columns: repeat(auto-fit, minmax(min(140px, 47%), 1fr)); } .page-head { align-items: flex-start; } .page-head-actions { width: 100%; } .page-head-actions .btn, .page-head-actions .btn-primary, .page-head-actions .btn-secondary { flex: 1 1 auto; } } /* Very small phones. */ @media (max-width: 400px) { :root { --space-5: 14px; } .stats-grid { grid-template-columns: 1fr 1fr; gap: var(--space-2); } .stat-card { padding: var(--space-3); } .app-tabbar a { font-size: 0.56rem; } .btn, .btn-primary, .btn-secondary { padding-inline: 13px; } } /* Landscape phones: the bottom bar would eat too much height. */ @media (max-height: 480px) and (orientation: landscape) and (max-width: 1023px) { .app-tabbar { display: none; } .app-main { padding-bottom: var(--space-4); } } /* ========================================================================== 17. Print & reduced motion ========================================================================== */ @media print { .sidebar, .app-topbar, .app-tabbar, .account-dock, .toast-stack, .nav-scrim, .page-head-actions, .row-actions, .btn, .btn-primary, .btn-secondary, .btn-danger { display: none !important; } body { background: #fff; color: #000; } .glass-panel, .panel, .card, .stat-card { border: 1px solid #ccc !important; background: #fff !important; box-shadow: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; break-inside: avoid; } .app-main { padding: 0; } .table-responsive .table thead { display: table-header-group; } } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }