/* * MindLift — custom theme on top of Bootstrap 5 * * Arabization follows the rtl-first methodology * (https://github.com/imohad/rtl-first): * - IBM Plex Sans Arabic is the primary font for all languages — it renders * Latin characters cleanly, so we ship one coherent typographic system * instead of switching fonts by locale. * - [dir="rtl"] scoping for RTL-specific layout tweaks, kept as a patch * layer rather than mutating upstream templates. * - Logical properties (margin-inline-start / -end, padding-inline-*) * so layout mirrors correctly without per-direction overrides. * * Licensed under AGPL-3.0 (inherited from upstream wger). */ /* Font loading moved into template.html with preconnect so the stylesheet fetch parallelises with HTML parsing instead of serialising behind this file. Keeps bootstrap-custom.css free of @import to avoid the visible text-flash on first paint. */ :root { /* IBM Plex Sans Arabic first — it ships high-quality Latin glyphs too, so one font stack covers both languages. Inter is a secondary fallback. */ --mg-font-sans: 'IBM Plex Sans Arabic', 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mg-font-ar: var(--mg-font-sans); /* Palette — warm stone neutrals + activity-oriented orange. The cool blue used before read as "bank app", not "gym app". Orange-600 is the gym/energy register (think Strava) without being aggressive; paired with warm stone instead of pure black so the UI never feels clinical. */ --mg-ink-900: #1c1917; /* stone-950 — warm near-black */ --mg-ink-800: #292524; /* stone-900 */ --mg-ink-700: #44403c; /* stone-700 */ --mg-ink-600: #57534e; /* stone-600 — muted text (WCAG AA ≥ 6:1 on stone-100 and white) */ --mg-ink-500: #78716c; /* stone-500 — decorative only; fails AA on stone-100 */ --mg-ink-300: #d6d3d1; /* stone-300 */ --mg-ink-100: #f5f5f4; /* stone-100 */ --mg-bg: #fafaf9; /* stone-50 — warm off-white */ --mg-surface: #ffffff; --mg-accent: #ea580c; /* orange-600 — the energy register */ --mg-accent-hover: #c2410c; /* orange-700 */ --mg-accent-soft: #fff7ed; /* orange-50 — for tinted surfaces */ --mg-success: #16a34a; --mg-danger: #dc2626; --mg-warning: #d97706; --mg-radius: 10px; --mg-radius-sm: 6px; --mg-radius-lg: 14px; --mg-shadow-sm: 0 1px 2px rgba(28, 25, 23, 0.05), 0 1px 3px rgba(28, 25, 23, 0.04); --mg-shadow: 0 4px 10px -2px rgba(28, 25, 23, 0.06), 0 2px 5px -1px rgba(28, 25, 23, 0.04); --mg-shadow-lg: 0 12px 32px -8px rgba(28, 25, 23, 0.15), 0 4px 12px -2px rgba(28, 25, 23, 0.05); /* Bootstrap variable overrides */ --bs-body-font-family: var(--mg-font-sans); --bs-body-color: var(--mg-ink-700); --bs-body-bg: var(--mg-bg); --bs-border-radius: var(--mg-radius); --bs-border-radius-sm: var(--mg-radius-sm); --bs-border-radius-lg: var(--mg-radius-lg); --bs-primary: var(--mg-accent); --bs-primary-rgb: 234, 88, 12; --bs-link-color: var(--mg-accent); --bs-link-hover-color: var(--mg-accent-hover); } /* ── Container width — give desktop screens more breathing room ───────── */ /* Upstream Bootstrap caps .container at 1320px even on ultra-wide displays, which made the Home dashboard feel cramped on desktop. Widen on large screens only — mobile and tablet stay at the default. */ @media (min-width: 1200px) { .container, .container-xl, .container-lg { max-width: 1480px; } } /* IBM Plex Sans Arabic is already primary; no override needed for [lang="ar"] */ /* Force IBM Plex Sans Arabic across the whole app, including React subtrees that ship their own inline font-family. Using * + !important is blunt, but without it the React bundle's MUI theme wins the cascade and the Arabic font only shows on Django-rendered pages. */ *, *::before, *::after, body, html, button, input, select, textarea, [class*="react"], #react-page-no-shadow-dom, #react-page-no-shadow-dom * { font-family: var(--mg-font-sans) !important; } /* Hide upstream wger's "Contribute / Submit exercise / Add translation" UI. The user maintains their own fork; submitting to the public wger.de catalog is out of scope. Targets the React components that render those buttons. */ button[aria-label*="ubmit" i], button[aria-label*="ontribut" i], a[href*="/exercise/submit"], a[href*="/exercise/add"], [data-testid*="submit-exercise"], [data-testid*="contribute"] { display: none !important; } /* Keep icon fonts intact — they rely on their specific font-family */ .fa, .fas, .far, .fab, .fal, [class^="icon-"], [class*=" icon-"], .material-icons, .material-symbols-outlined { font-family: revert !important; } body { color: var(--mg-ink-700); background: var(--mg-bg); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* ── Typography ─────────────────────────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--bs-body-font-family); font-weight: 600; color: var(--mg-ink-900); letter-spacing: -0.01em; } h1 { font-size: 1.9rem; } h2 { font-size: 1.55rem; } h3 { font-size: 1.25rem; } .text-muted { color: var(--mg-ink-600) !important; } /* ── Navbar ─────────────────────────────────────────────────────────────── */ .navbar.bg-primary { background: var(--mg-ink-900) !important; box-shadow: var(--mg-shadow-sm); padding-top: 0.75rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--mg-accent); } .navbar.bg-primary .navbar-brand { font-weight: 700; letter-spacing: -0.02em; color: #fff; display: inline-flex; align-items: center; gap: 0.55rem; } .mg-navbar-inner { display: flex; align-items: center; gap: 0.75rem; } .mg-back-button { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; border-color: rgba(255, 255, 255, 0.45); } html[dir="rtl"] .mg-back-icon { transform: rotate(180deg); } .navbar.bg-primary .navbar-brand .mg-logo { width: 26px; height: 26px; color: var(--mg-accent); } .navbar.bg-primary .navbar-brand .mg-wordmark { letter-spacing: -0.015em; font-size: 1.15rem; } .navbar .nav-link { font-weight: 500; transition: opacity 0.15s; } .navbar .nav-link:hover { opacity: 0.85; } /* Mobile hamburger — Bootstrap's default toggler-icon is a black SVG that disappears on our dark navbar. Invert it, and soften the border so the button reads as a tappable control without a hard white box. */ .navbar.bg-primary .navbar-toggler { border-color: rgba(255, 255, 255, 0.4); color: rgba(255, 255, 255, 0.9); } .navbar.bg-primary .navbar-toggler:focus { box-shadow: 0 0 0 0.2rem rgba(234, 88, 12, 0.35); } .navbar.bg-primary .navbar-toggler-icon { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='rgba%28255, 255, 255, 0.9%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E"); } .dropdown-menu { border: 1px solid var(--mg-ink-100); border-radius: var(--mg-radius); box-shadow: var(--mg-shadow-lg); padding: 0.5rem; } .dropdown-item { border-radius: var(--mg-radius-sm); padding: 0.5rem 0.75rem; font-size: 0.9375rem; } .dropdown-item:hover, .dropdown-item:focus { background: var(--mg-ink-100); color: var(--mg-ink-900); } .dropdown-header { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--mg-ink-600); padding: 0.5rem 0.75rem 0.25rem; } /* ── Cards / panels ─────────────────────────────────────────────────────── */ /* Radius + shadow must match .MuiCard-root below — Bootstrap cards (Django pages) and MUI cards (React pages) sit next to each other on the dashboard and sidebars; different radii read as two apps stitched together. Keeping the "hover lift" on Django cards only since the server-rendered sections are the ones with static content. */ .card { border: 1px solid var(--mg-ink-100); border-radius: var(--mg-radius); /* 10px — matches MuiCard */ box-shadow: var(--mg-shadow-sm); background: var(--mg-surface); transition: box-shadow 0.2s, transform 0.2s; } .card:hover { box-shadow: var(--mg-shadow); } .card-header { background: transparent; border-bottom: 1px solid var(--mg-ink-100); font-weight: 600; padding: 1rem 1.25rem; } .card-body { padding: 1.25rem; } /* ── Buttons ────────────────────────────────────────────────────────────── */ .btn { border-radius: var(--mg-radius); font-weight: 500; padding: 0.5rem 1rem; transition: all 0.15s; } .btn-primary { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; } .btn-primary:hover, .btn-primary:focus { background: var(--mg-accent-hover); border-color: var(--mg-accent-hover); box-shadow: 0 4px 10px -2px rgba(234, 88, 12, 0.35); color: #fff; } .btn-outline-primary { color: var(--mg-accent); border-color: var(--mg-accent); } .btn-outline-primary:hover { background: var(--mg-accent); border-color: var(--mg-accent); color: #fff; } .btn-light { background: var(--mg-surface); border: 1px solid var(--mg-ink-100); color: var(--mg-ink-700); } .btn-light:hover { background: var(--mg-ink-100); border-color: var(--mg-ink-300); } .btn-sm { padding: 0.3rem 0.75rem; font-size: 0.8125rem; } /* iOS HIG: interactive targets must be at least 44×44 pt. Bootstrap's defaults (including .btn-sm at ~32px) are under that on touch screens. Min-height on coarse-pointer devices only so desktop stays compact. */ @media (pointer: coarse), (max-width: 768px) { .btn, .btn-sm, .btn-light, .btn-primary, .btn-outline-primary, .btn-secondary { min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .navbar-nav .nav-link, .list-group-item-action, .form-control, .form-select { min-height: 44px; } } /* ── Forms ──────────────────────────────────────────────────────────────── */ .form-control, .form-select { border: 1px solid var(--mg-ink-100); border-radius: var(--mg-radius); background: var(--mg-surface); padding: 0.5rem 0.75rem; transition: border-color 0.15s, box-shadow 0.15s; } .form-control:focus, .form-select:focus { border-color: var(--mg-accent); box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.15); } .form-label { font-weight: 500; color: var(--mg-ink-700); margin-bottom: 0.35rem; font-size: 0.9375rem; } /* ── Tables ─────────────────────────────────────────────────────────────── */ .table { border-color: var(--mg-ink-100); color: var(--mg-ink-700); } .table > :not(caption) > * > * { padding: 0.75rem 1rem; } .table thead { background: var(--mg-ink-100); font-weight: 600; font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.03em; color: var(--mg-ink-600); } /* ── Footer ─────────────────────────────────────────────────────────────── */ #main-footer { background: var(--mg-surface) !important; border-top: 1px solid var(--mg-ink-100); margin-top: 3rem; color: var(--mg-ink-600); } /* ── Alerts ─────────────────────────────────────────────────────────────── */ .alert { border: 1px solid transparent; border-radius: var(--mg-radius); padding: 0.875rem 1rem; } /* ── Modals ─────────────────────────────────────────────────────────────── */ .modal-content { border: none; border-radius: var(--mg-radius-lg); box-shadow: var(--mg-shadow-lg); } .modal-header { border-bottom: 1px solid var(--mg-ink-100); padding: 1.25rem; } /* ── Misc polish ────────────────────────────────────────────────────────── */ a { text-decoration: none; } a:hover { text-decoration: underline; } hr { border-color: var(--mg-ink-100); opacity: 1; } /* ── RTL layer (rtl-first methodology) ─────────────────────────────────── */ /* Kept as an override layer — never mutates upstream selectors, scoped to [dir="rtl"] so LTR rendering is untouched. Prefer logical properties in new rules; these selectors only exist to mirror Bootstrap's direction-aware utilities that still use physical properties in v5. */ html[lang="ar"], html[dir="rtl"] { text-align: right; } html[dir="rtl"] .dropdown-menu { text-align: right; } /* In RTL, the user dropdown sits in the LEFT corner of the header. Bootstrap's .dropdown-menu-end puts the menu at the toggle's end edge (= left in RTL), which pushes its content off-screen. Flip it: anchor the menu at the toggle's LEFT edge and let it extend right toward the center of the viewport. */ html[dir="rtl"] .dropdown-menu-end, html[dir="rtl"] .dropdown-menu-lg-end { --bs-position: start; right: auto !important; left: 0 !important; } html[dir="rtl"] .ms-auto { margin-right: auto !important; margin-left: 0 !important; } html[dir="rtl"] .me-auto { margin-left: auto !important; margin-right: 0 !important; } html[dir="rtl"] .text-md-end { text-align: left !important; } /* Numerals stay LTR inside Arabic text so times/weights/reps read naturally */ html[dir="rtl"] .num, html[dir="rtl"] input[type="number"] { direction: ltr; unicode-bidi: embed; } /* Login + auth pages — simpler, centered card */ body.login-page { background: linear-gradient(180deg, var(--mg-bg) 0%, var(--mg-ink-100) 100%); min-height: 100vh; } /* Force the login/registration/password-reset pages into a narrow centered card. Upstream base.html puts them in an 8/4 split with a noisy sidebar; we want a single focused form. Scoped to pages whose body opens with

"Login|Register|Reset password" in Arabic or English. */ body[class*="login"] #main .row, body[class*="registration"] #main .row, #content form[action*="/login"], #content form[action*="/registration"], #content form[action*="/password_reset"] { max-width: 420px; margin-inline: auto; } /* Make auth forms look like a card */ #content form[action*="/login"], #content form[action*="/registration"], #content form[action*="/password_reset"] { background: var(--mg-surface); border: 1px solid var(--mg-ink-100); border-radius: var(--mg-radius-lg); padding: 1.75rem; box-shadow: var(--mg-shadow-sm); } /* Hide the noisy "Don't have an account? / Forgot password?" sidebar on login — those links already live below the submit button in upstream's sidebar HTML. We turn them into compact links under the form. */ #main-sidebar { font-size: 0.875rem; } #main-sidebar h4, #main-sidebar p { margin-bottom: 0.35rem; } #main-sidebar a { color: var(--mg-accent); } /* ============================================================ * React / Material-UI overrides — the programs, routines, and * exercises pages render through a prebuilt bundle we can't * patch, so we normalize typography + surfaces from the outside. * ============================================================ */ /* Kill the hard black + flash-of-serif that Material's defaults ship with: inherit MindLift's font, colors, and leading everywhere inside the React mount points. */ #exercises, #routine, #routine-detail, #routine-edit, #weight-overview, #measurements, [id^="react-"], .MuiBox-root, .MuiPaper-root, .MuiTypography-root, .MuiButtonBase-root, .MuiInputBase-root { font-family: var(--mg-font-sans) !important; color: var(--mg-ink-800); } /* Normalize Material headings to the Bootstrap/Landing scale so the React pages stop shouting with 32 px everywhere. */ .MuiTypography-h1 { font-size: 1.75rem !important; font-weight: 700 !important; line-height: 1.25; letter-spacing: 0; } .MuiTypography-h2 { font-size: 1.4rem !important; font-weight: 700 !important; line-height: 1.3; } .MuiTypography-h3 { font-size: 1.2rem !important; font-weight: 700 !important; line-height: 1.35; } .MuiTypography-h4 { font-size: 1.1rem !important; font-weight: 600 !important; line-height: 1.4; } .MuiTypography-h5 { font-size: 1rem !important; font-weight: 600 !important; line-height: 1.45; } .MuiTypography-h6 { font-size: 0.95rem !important; font-weight: 600 !important; line-height: 1.5; } .MuiTypography-subtitle1 { font-size: 0.95rem !important; font-weight: 600 !important; } .MuiTypography-subtitle2 { font-size: 0.85rem !important; font-weight: 500 !important; color: var(--mg-ink-600); } .MuiTypography-body1 { font-size: 0.95rem !important; line-height: 1.6; } .MuiTypography-body2 { font-size: 0.88rem !important; line-height: 1.55; color: var(--mg-ink-700); } .MuiTypography-caption { font-size: 0.8rem !important; color: var(--mg-ink-600); } /* Card/Paper surfaces — match the warm stone palette instead of the bluish Material defaults, so the React pages sit in the same world as the Django pages. */ .MuiPaper-root { background-color: var(--mg-surface) !important; border: 1px solid var(--mg-ink-100); border-radius: var(--mg-radius) !important; box-shadow: var(--mg-shadow-sm) !important; } .MuiPaper-root.MuiAppBar-root, .MuiPaper-root.MuiDialog-paper { border: none; } .MuiCard-root { border-radius: var(--mg-radius) !important; border: 1px solid var(--mg-ink-100) !important; box-shadow: var(--mg-shadow-sm) !important; transition: box-shadow 0.2s, transform 0.2s; } .MuiCard-root:hover { box-shadow: var(--mg-shadow) !important; } .MuiCardHeader-root { padding: 1rem 1.25rem !important; border-bottom: 1px solid var(--mg-ink-100); } .MuiCardContent-root { padding: 1rem 1.25rem !important; } .MuiCardContent-root:last-child { padding-bottom: 1rem !important; } /* Buttons — align the React primary button with our accent so users don't see two different "primary" colors across the app. */ .MuiButton-root { text-transform: none !important; border-radius: var(--mg-radius-sm) !important; font-weight: 600 !important; letter-spacing: 0 !important; } .MuiButton-containedPrimary, .MuiButton-containedSecondary { background-color: var(--mg-accent) !important; color: #fff !important; box-shadow: none !important; } .MuiButton-containedPrimary:hover, .MuiButton-containedSecondary:hover { background-color: var(--mg-accent-hover) !important; box-shadow: var(--mg-shadow-sm) !important; } .MuiButton-outlined { border-color: var(--mg-ink-300) !important; color: var(--mg-ink-800) !important; } .MuiButton-text { color: var(--mg-accent) !important; } /* Inputs — consistent height + radius, no Material underline. */ .MuiOutlinedInput-root { border-radius: var(--mg-radius-sm) !important; background: var(--mg-surface) !important; } .MuiOutlinedInput-notchedOutline { border-color: var(--mg-ink-300) !important; } .MuiOutlinedInput-root:hover .MuiOutlinedInput-notchedOutline { border-color: var(--mg-ink-500) !important; } .MuiOutlinedInput-root.Mui-focused .MuiOutlinedInput-notchedOutline { border-color: var(--mg-accent) !important; border-width: 1.5px !important; } /* Chips (used for muscles, categories) — softer surface. */ .MuiChip-root { background-color: var(--mg-ink-100) !important; color: var(--mg-ink-800) !important; font-weight: 500 !important; border-radius: 999px !important; } .MuiChip-colorPrimary { background-color: var(--mg-accent-soft) !important; color: var(--mg-accent-hover) !important; } /* Tables — align zebra and spacing with our density. */ .MuiTable-root { font-size: 0.92rem !important; } .MuiTableCell-head { font-weight: 600 !important; color: var(--mg-ink-700) !important; background: var(--mg-bg) !important; } .MuiTableCell-body { color: var(--mg-ink-800) !important; } /* Dialogs/modals — warmer surface, rounded corners. */ .MuiDialog-paper { border-radius: var(--mg-radius-lg) !important; } .MuiDialogTitle-root { font-weight: 700 !important; font-size: 1.15rem !important; } /* Images inside exercise cards: don't let missing thumbnails collapse the layout; reserve aspect ratio so the grid stays stable. */ .MuiCard-root img, .MuiCardMedia-root { background-color: var(--mg-ink-100); object-fit: cover; } /* RTL: flip the start/end margins Material picks via MUI's flexbox, and keep icon buttons (gear, edit) aligned with their labels. */ [dir="rtl"] .MuiButton-startIcon { margin-inline: -4px 8px !important; } [dir="rtl"] .MuiButton-endIcon { margin-inline: 8px -4px !important; } /* ============================================================ * Routine detail page — the SetConfigDataDetails rows render * as a 50px avatar + flex content. On wide screens the content * column stretches the full width of the card and leaves the * text stranded on one side. Constrain it and tighten spacing. * ============================================================ */ /* Exercise rows inside a Day card: compact, balanced. */ .MuiCardContent-root .MuiGrid-container { align-items: center; } /* Keep the avatar + text block together so they don't drift apart on wide viewports. */ [data-testid="slot-exercise"] > .MuiGrid-container, .MuiCard-root .MuiGrid-container { max-width: 720px; } /* Day description cards: tighter typography. */ .MuiCard-root .MuiCardHeader-subheader { font-size: 0.9rem !important; color: var(--mg-ink-600); } .MuiCard-root .MuiCardHeader-title { font-size: 1.05rem !important; font-weight: 700 !important; } /* The exercise-stats line ("2 مجموعات, 12 تكرار 90s راحة") inside SetConfigDataDetails: subtler than the exercise name. */ .MuiCardContent-root .MuiStack-root > div { font-size: 0.9rem; color: var(--mg-ink-700); line-height: 1.5; } .MuiCardContent-root .MuiStack-root > .MuiTypography-h6 { font-size: 1rem !important; font-weight: 600 !important; color: var(--mg-ink-900); margin-bottom: 0.2rem; } /* RTL: without this, inline numbers + Latin fragments inside an Arabic stats line get re-ordered weirdly. Forcing `unicode-bidi` and isolating the runs keeps the reading order stable. */ [dir="rtl"] .MuiCardContent-root .MuiStack-root > div, [dir="rtl"] .MuiTypography-body1, [dir="rtl"] .MuiTypography-body2 { unicode-bidi: plaintext; } /* Placeholder avatar (no image) — tone down from the Material default so missing images stop looking like errors. */ .MuiAvatar-root { background-color: var(--mg-ink-100) !important; color: var(--mg-ink-600) !important; font-weight: 600; } /* ============================================================ * MUI TextField with startAdornment — the default rests the * label on the baseline where the icon is, so the icon glyph * (calendar / clock) overlaps the text. Force labels that sit * next to an adornment to stay shrunk, and add padding so the * text doesn't start underneath the icon. * ============================================================ */ /* Any label that shares a root with an InputAdornment — keep it docked at the top. */ .MuiFormControl-root:has(.MuiInputAdornment-positionStart) .MuiInputLabel-root { transform: translate(14px, -9px) scale(0.75) !important; background: #fff; padding: 0 4px; } [dir="rtl"] .MuiFormControl-root:has(.MuiInputAdornment-positionStart) .MuiInputLabel-root { transform: translate(-14px, -9px) scale(0.75) !important; transform-origin: top right !important; } /* Standard variant (underline only): shift the label off the icon. */ .MuiInput-root .MuiInputAdornment-positionStart { margin-inline-end: 8px; } .MuiInput-root:has(.MuiInputAdornment-positionStart) + .MuiInputLabel-root, .MuiInput-underline:has(.MuiInputAdornment-positionStart) ~ .MuiFormLabel-root { margin-inline-start: 32px; } /* Force the underline-variant label to shrink+dock when there's a startAdornment, so it can't land on top of the icon at rest. */ .MuiFormControl-root:has(.MuiInput-underline .MuiInputAdornment-positionStart) .MuiInputLabel-root.MuiInputLabel-standard { transform: translate(0, -1.5px) scale(0.75) !important; transform-origin: top left !important; } [dir="rtl"] .MuiFormControl-root:has(.MuiInput-underline .MuiInputAdornment-positionStart) .MuiInputLabel-root.MuiInputLabel-standard { transform-origin: top right !important; } /* 28-day consistency heat strip on the dashboard. Cells are visual, not text, so we force LTR on the row (oldest→newest regardless of locale). */ .streak-strip { display: grid; grid-template-columns: repeat(28, 1fr); gap: 4px; max-width: 560px; } .streak-cell { aspect-ratio: 1 / 1; border-radius: 4px; background: #e9ecef; transition: transform 0.08s ease; } .streak-cell--filled { background: #ea580c; } .streak-cell--today { /* Use box-shadow instead of outline+offset so the today indicator sits inside the grid rhythm. outline+offset:1px gave the cell extra visual width which made it look detached from its row. */ box-shadow: inset 0 0 0 2px #c2410c; } .streak-cell:hover { transform: scale(1.12); } @media (max-width: 480px) { .streak-strip { gap: 3px; } } /* Language toggle buttons in the navbar. Keep compact on desktop (32×32) — the @media block bumps to 44×44 on touch screens. */ .lang-toggle { min-width: 34px; min-height: 32px; } @media (pointer: coarse), (max-width: 768px) { .lang-toggle { min-width: 44px; min-height: 44px; } } /* KPI quick-add button ("+" on dashboard). Square 36px on desktop; @media block above bumps it to 44×44 on touch devices. */ .kpi-quick-add { width: 36px; height: 36px; padding: 0; line-height: 1; font-size: 1.1rem; } @media (pointer: coarse), (max-width: 768px) { .kpi-quick-add { width: 44px; height: 44px; } } /* Dashboard hero card — darker orange gradient + full-opacity small text so labels over the gradient stay above WCAG AA contrast (solid white on #c2410c = 4.58:1, on #9a3412 = 6.07:1). The old opacity-75/.90 pattern dropped body-sized text below the 4.5:1 threshold. */ .dashboard-hero__eyebrow { color: rgba(255, 255, 255, 0.92); letter-spacing: 0.02em; text-transform: uppercase; font-weight: 500; } .dashboard-hero__meta { color: #ffffff; } /* Routine progress bar inside the orange hero card on dashboard. Track is white @ 25% alpha, fill is white @ 85%; reads well against the gradient without needing a separate color scale. */ .routine-progress__track { height: 6px; background: rgba(255, 255, 255, 0.25); border-radius: 3px; overflow: hidden; } .routine-progress__fill { height: 100%; background: rgba(255, 255, 255, 0.85); border-radius: 3px; transition: width 0.4s ease; } /*
styled as a collapsible card. Native element → no JS, works on every browser including Safari on iPhone. */ details.card > summary { display: flex; justify-content: space-between; align-items: center; padding: 0.75rem 1rem; background: var(--bs-gray-100); user-select: none; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary::after { content: "▸"; color: var(--bs-gray-600); transition: transform 0.15s ease; font-size: 0.85em; } details.card[open] > summary::after { transform: rotate(90deg); } [dir="rtl"] details.card > summary::after { content: "◂"; } [dir="rtl"] details.card[open] > summary::after { transform: rotate(-90deg); }