.valid.modified:not([type=checkbox]) { outline: 1px solid #26b050; } /* Beige (DOvitaColorModel.Beige) — the app-wide chrome background, matching the pro app's body background. Defined once here so body, header, footer, and the sticky toolbar cannot drift apart. */ :root { --client-chrome-bg: #F5F5DC; } /* Fixed header/footer layout with scrollable content */ html, body { height: 100%; overflow: hidden; background-color: var(--client-chrome-bg); } .client-layout { display: flex; flex-direction: column; height: 100dvh; /* dynamic viewport height — correct on mobile when address bar shows/hides */ overflow: hidden; } .client-layout > .b-layout-header { flex-shrink: 0; /* header never shrinks */ background-color: var(--client-chrome-bg); } .client-layout > .b-layout-footer { flex-shrink: 0; /* footer never shrinks */ background-color: var(--client-chrome-bg); } /* Hide the footer while any modal is open. Blazorise adds modal-open to when a modal is shown. Using display:none (not visibility:hidden) so the footer collapses entirely and does not sit on top of the modal footer/Close button. */ body.modal-open .client-layout > .b-layout-footer { display: none; } .client-content { flex: 1; overflow-y: auto; min-height: 0; /* required for flex children to scroll correctly */ -webkit-overflow-scrolling: touch; /* momentum scrolling on iOS */ } .invalid { outline: 1px solid red; } .validation-message { color: red; } #blazor-error-ui { color-scheme: light only; background: lightyellow; bottom: 0; box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2); box-sizing: border-box; display: none; left: 0; padding: 0.6rem 1.25rem 0.7rem 1.25rem; position: fixed; width: 100%; z-index: 1000; } #blazor-error-ui .dismiss { cursor: pointer; position: absolute; right: 0.75rem; top: 0.5rem; } .blazor-error-boundary { background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121; padding: 1rem 1rem 1rem 3.7rem; color: white; } .blazor-error-boundary::after { content: "An error has occurred." } .loading-progress { position: relative; display: block; width: 8rem; height: 8rem; margin: 20vh auto 1rem auto; } .loading-progress circle { fill: none; stroke: #e0e0e0; stroke-width: 0.6rem; transform-origin: 50% 50%; transform: rotate(-90deg); } .loading-progress circle:last-child { stroke: #1b6ec2; stroke-dasharray: calc(3.141 * var(--blazor-load-percentage, 0%) * 0.8), 500%; transition: stroke-dasharray 0.05s ease-in-out; } .loading-progress-text { position: absolute; text-align: center; font-weight: bold; inset: calc(20vh + 3.25rem) 0 auto 0.2rem; } .loading-progress-text:after { content: var(--blazor-load-percentage-text, "Loading"); } code { color: #c02d76; } /* Refresh toolbar — sits above the accordion list, no extra spacing */ .goal-theme-toolbar { display: flex; justify-content: space-between; align-items: center; } .goal-theme-toolbar .report-mode-title { font-weight: 600; font-size: 1.1rem; display: flex; align-items: center; gap: 0.5rem; } .goal-theme-toolbar .btn { background-color: transparent; border-color: transparent; padding: 0.6rem 0.75rem; font-size: 1.2rem; opacity: 0.7; min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center; } .goal-theme-toolbar .btn:hover { filter: brightness(0.8); opacity: 1; } .goal-theme-list { display: flex; flex-direction: column; gap: 0.4rem; } .goal-theme { background-color: #f5f1e6; /* LightBeige */ border-radius: 0.5rem; overflow: hidden; box-shadow: 0 1px 2px rgba(0,0,0,0.06); } .goal-theme__header { display: flex; align-items: center; gap: 0.5rem; width: 100%; border: 0; padding: 0.4rem 0.75rem; background: linear-gradient(90deg, #1a3733 0%, #244e48 100%); /* TimberGreen */ color: white; font-size: 0.95rem; font-weight: 600; cursor: pointer; text-align: left; transition: background 0.2s ease; } .goal-theme__header:hover { background: linear-gradient(90deg, #244e48 0%, #2d5e57 100%); } .goal-theme__chevron { display: inline-block; font-size: 1.2rem; line-height: 1; transform: rotate(90deg); transition: transform 0.2s ease; width: 1rem; text-align: center; color: #ffb066; /* warm orange accent */ } .goal-theme__header.is-collapsed .goal-theme__chevron { transform: rotate(0deg); } .goal-theme__title { flex: 1; } .goal-theme__count { background-color: rgba(255,255,255,0.18); border-radius: 999px; padding: 0.05rem 0.5rem; font-size: 0.75rem; font-weight: 500; } .goal-theme__body { padding: 0.5rem 0.75rem; } /* Header navigation — default and active states */ .header-nav { background-color: #bbddbe; /* PixieGreen */ color: #1a3733; /* TimberGreen */ text-decoration: none; } .header-nav:hover { background-color: #d6ead8; /* SurfCrest */ color: #1a3733; } .header-nav.active { background-color: #1a3733; /* TimberGreen */ color: white; } .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--bs-secondary-color); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } .round-button { border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; padding: 0; } /* Progress ring around the track button. Uses CSS variables --ring-progress (0-100%) and --ring-color set inline per-goal. The conic-gradient draws the filled arc over a darker track so the ring stays visible on light backgrounds. */ .track-button-ring { --ring-size: 64px; --ring-thickness: 6px; --ring-track: #1a3733; /* TimberGreen — high contrast on LightBeige */ width: var(--ring-size); height: var(--ring-size); border-radius: 50%; padding: var(--ring-thickness); background: conic-gradient(var(--ring-color) var(--ring-progress), var(--ring-track) 0); display: flex; align-items: center; justify-content: center; box-shadow: 0 2px 8px rgba(0,0,0,0.25), inset 0 0 0 1px rgba(0,0,0,0.15); transition: background 0.4s ease; } .track-button-ring .round-button { box-shadow: 0 1px 3px rgba(0,0,0,0.25); } /* Neutral "no tracking yet" state (new goal or new period): the count is not a meaningful signal, so we drop the dark progress track and draw a soft, uniform light-blue ring that sits gently on the very light background instead of reading as a full "black milestone" circle. */ .track-button-ring--neutral { background: #9fc9db; /* slightly deeper than MilestoneNoTracking button for subtle depth */ box-shadow: 0 1px 4px rgba(0,0,0,0.12), inset 0 0 0 1px rgba(0,0,0,0.06); } /* Selectable goal rows in the goal report. iOS Safari only bubbles click events from elements it considers interactive, so a plain drops taps intermittently; the cursor:pointer opts it in. The active state supplies the press feedback the row otherwise lacks, matching the Track and Home buttons. Defined globally because scoped CSS does not reach markup rendered by the Blazorise Table components. */ .goal-row { cursor: pointer; -webkit-tap-highlight-color: transparent; } .goal-row:active > td { background-color: rgba(0, 0, 0, 0.08); } /* Footer nav bar. The layout footer shares the beige body background, so the bar itself gets a lighter surface with a rounded border to separate the navigation from the scrolling content above it. */ .button-container { display: flex; justify-content: space-between; align-items: center; width: 100%; background-color: #F9F9F1; /* LightBeige */ border: 1px solid #d6d2c4; /* Swirl */ border-radius: 0.75rem; padding: 0.25rem 0.5rem; box-shadow: 0 1px 3px rgba(0,0,0,0.08); } /* Milestone progress bars. Blazorise renders these as

. Two consequences drive the rules below: 1. Bootstrap's .bg-primary sets background-color with !important, so every colour override here must also use !important to win. 2. Blazorise does not forward the ProgressBar Class onto this element, so segments cannot be targeted by class and are matched by position instead. The percentage is the element's text content and is hidden, because the legend underneath already gives the exact goal counts. */ .milestone-progress .progress-bar { font-size: 0; transition: none; /* Same hairline the achievement plan badges use, so adjacent milestone colours stay distinguishable instead of bleeding into each other. */ border-right: 1px solid #aaa; } .milestone-progress .progress-bar:last-child { border-right: 0; } /* Empty buckets are still rendered so the position-based colours stay aligned, but a zero-width segment must not leave its divider behind as a stray line. Blazorise emits the width as style="width: 0%", so the attribute match below is against that exact form. */ .milestone-progress .progress-bar[style*="width: 0%"] { border-right: 0; } .milestone-progress.progress { border: 1px solid #aaa; } .milestone-progress--tracked .progress-bar { background-color: #1a3733 !important; /* TimberGreen */ } /* The order here must match the ProgressBar order in Home.razor, which follows the milestone plan progression: black, red, yellow, green, gold, no tracking. */ .milestone-progress--milestones .progress-bar:nth-child(1) { background-color: #52593b !important; /* MilestoneBlack */ } .milestone-progress--milestones .progress-bar:nth-child(2) { background-color: #cd5c5c !important; /* MilestoneRed */ } .milestone-progress--milestones .progress-bar:nth-child(3) { background-color: #ffef00 !important; /* MilestoneYellow */ } .milestone-progress--milestones .progress-bar:nth-child(4) { background-color: #b2ec5d !important; /* MilestoneGreen */ } .milestone-progress--milestones .progress-bar:nth-child(5) { background-color: #FFD700 !important; /* MilestoneGold */ } .milestone-progress--milestones .progress-bar:nth-child(6) { background-color: #ADD8E6 !important; /* MilestoneNoTracking */ }