/* ========================================================================== Global Styles & Typography ========================================================================== */ .material-symbols-outlined { font-weight: 200; } /* A helper class added by JavaScript to prevent the body from scrolling when a modal or dialog is open. */ body.dialog-open { overflow: hidden; } /* A utility class to force an element to be hidden. */ .hidden { display: none !important; } /* --- Splash Screen Styling --- */ .splash-screen { position: fixed; top: 0; /* Cover the entire viewport */ left: 0; width: 100%; height: 100%; background-color: #f8fafc; /* Light grey background */ display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; /* Ensure it's on top of everything */ opacity: 1; /* Start fully visible */ visibility: visible; transition: opacity 0.5s ease, visibility 0.5s ease; /* Smooth fade-out */ padding: 20px; box-sizing: border-box; } /* This class is added by an inline script in the if the splash has already been shown in the session. It hides the splash screen *before* the page renders, preventing any "flash" of the splash screen on navigation. */ .splash-hidden-by-default #splashScreen { display: none; } .splash-screen.hidden { opacity: 0; visibility: hidden; } .splash-screen .splash-logo-img { width: 120px; height: 120px; object-fit: contain; /* Ensures the image scales properly */ margin-bottom: 16px; animation: drop-in 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards; border-radius: 20%; /* Optional: slightly round the corners of the image */ } .splash-screen .splash-title { font-family: "Montserrat", sans-serif; font-size: 36px; font-weight: bold; color: #1f2937; margin: 0; opacity: 0; /* Start transparent before animation */ animation: fade-in 0.6s ease-in 0.5s forwards; /* Fade in after logo */ } @keyframes drop-in { from { transform: translateY(-150px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* --- Main Content Container & Page Transitions --- */ /* A wrapper for the main content of each page to enforce a max-width. */ .container { max-width: 400px; width: 100%; margin: 0 auto; } /* Keyframes for the slide-in/slide-out page transition effect. */ @keyframes slide-in-from-left { from { transform: translateX(-30%); opacity: 0; } to { transform: translateX(0); opacity: 1; } } @keyframes slide-out-left { from { transform: translateX(0); opacity: 1; } to { transform: translateX(-100vw); opacity: 0; } } @keyframes slide-out-right { from { transform: translateX(0); opacity: 1; } to { transform: translateX(100vw); opacity: 0; } } /* Apply the slide-in animation to the main container on page load. */ #main-container { animation: slide-in-from-left 0.3s cubic-bezier(0.42, 0, 0.58, 1) forwards; } /* When moving to a page on the right, slide this page out to the left. */ body.page-exit-left #main-container { animation: slide-out-left 0.3s cubic-bezier(0.42, 0, 0.58, 1) forwards; } /* When moving to a page on the left, slide this page out to the right. */ body.page-exit-right #main-container { animation: slide-out-right 0.3s cubic-bezier(0.42, 0, 0.58, 1) forwards; } /* Center the header on the dashboard and planner pages specifically. This prevents the rule from affecting other pages that might also use .container > .header. */ .dashboard-layout > .header, #main-container > .header { flex-direction: column; justify-content: center; } /* Center the header text on the sign-in/sign-up pages */ #signin-container .header, #signup-container .header { flex-direction: column; justify-content: center; } /* --- Weekly Progress Card (Planner Page) --- */ .progress-card { background-color: white; border-radius: 16px; padding: 24px; margin-bottom: 24px; } .progress-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .progress-title-group { display: flex; align-items: center; /* Vertically center the title and tag */ gap: 12px; } .progress-card h2 { font-size: 18px; font-weight: 600; color: #374151; margin: 0; white-space: nowrap; /* Prevent title from wrapping */ } .progress-bar-track { background-color: #e5e7eb; /* Grey track for progress bar */ border-radius: 12px; height: 24px; /* Taller for text */ overflow: hidden; position: relative; /* For positioning text */ } .progress-bar-fill { background-color: var(--color-primary-base); height: 100%; width: 0%; /* Initial width, updated by JS */ transition: width 0.3s ease; border-radius: 12px; } /* This is a clever trick. `mix-blend-mode: difference` makes the text color the inverse of whatever color is behind it. `filter: invert(1)` then inverts that result, making the text appear white over the blue bar and dark over the grey track. */ .progress-bar-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); font-size: 12px; font-weight: 600; /* This combination of properties makes the text color adapt to the background. It will appear light on dark backgrounds and dark on light backgrounds, ensuring it's always readable. */ color: white; /* Start with white */ mix-blend-mode: difference; /* Invert against the background */ } .progress-edit-button { background-color: transparent; border: 1px solid var(--color-border-default); color: var(--color-text-muted); padding: 6px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .progress-edit-button.active { background-color: var(--color-primary-base); border-color: var(--color-primary-base); color: white; } /* --- "Today" Card (Planner & Dashboard) --- */ .today-workout-card { display: none; /* Hidden by default, shown by JS if there's a workout/rest day */ display: flex; flex-direction: column; gap: 20px; background: linear-gradient(135deg, #4a90e2 0%, #0052d4 100%); border-radius: 24px; padding: 24px; box-shadow: 0 8px 24px rgba(68, 76, 94, 0.1); cursor: pointer; transition: transform 0.2s ease-out; } .today-workout-card.completed { /* When completed, remove the pointer cursor to show it's not interactive */ cursor: default; } .today-workout-card.rest-day { cursor: default; } .today-workout-content { display: flex; justify-content: space-between; align-items: center; } .today-workout-text { display: flex; flex-direction: column; } .today-label { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, 0.8); margin-bottom: 4px; } .today-workouts-list { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; } .today-workout-name { font-size: 20px; font-weight: 700; color: #ffffff; margin: 0; line-height: 1.3; } .rest-day-subtext { font-size: 14px; color: rgba(255, 255, 255, 0.8); margin-top: 16px; } .start-workout-button { display: flex; align-items: center; justify-content: center; gap: 8px; background-color: #ffffff; color: #0052d4; border: none; border-radius: 999px; padding: 12px 16px; font-size: 16px; font-weight: 600; cursor: pointer; text-decoration: none; transition: background-color 0.3s ease; align-self: flex-start; } .workout-completed-indicator { display: flex; align-items: center; justify-content: center; gap: 8px; background-color: rgba(255, 255, 255, 0.2); color: #ffffff; border: none; border-radius: 999px; padding: 12px 16px; font-size: 16px; font-weight: 600; align-self: flex-start; } .workout-completed-indicator .material-symbols-outlined { font-size: 20px; } .start-workout-button .material-symbols-outlined { font-size: 20px; } .today-workout-image-container { width: 90px; height: 90px; flex-shrink: 0; margin-left: 16px; } .today-workout-image { width: 100%; height: 100%; object-fit: cover; border-radius: 16px; } .rest-day-icon { width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; font-size: 60px !important; color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.1); border-radius: 16px; } /* --- Weekly View Container (Planner Page) --- */ .weekly-view-container { display: flex; flex-direction: column; gap: 16px; /* Space between each day card */ } .day-card { background-color: var(--color-surface-track); border-radius: 16px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); border: 1px solid transparent; transition: border-color 0.3s ease, background-color 0.3s ease; } .day-card.past-day { /* Make past days less prominent */ background-color: var(--color-surface-track); } .day-card.today { background-color: #fff; border-color: var(--color-border-default); } .day-header { font-size: 16px; font-weight: 600; color: var(--color-text-primary); padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid var(--color-border-default); } .day-header h3 { margin: 0; } /* Styling for a day card that has no workouts scheduled. */ .day-workout-list.rest-day { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; color: var(--color-text-muted); padding: 24px 0; font-style: italic; font-size: 14px; background-color: var(--color-surface-subtle); border-radius: 12px; } .day-workout-list.rest-day .material-symbols-outlined { font-size: 36px; } /* --- Individual Workout Item (inside a Day Card) --- */ .upcoming-workout-item { padding: 12px; border-bottom: 1px solid #e5e7eb; margin-bottom: 4px; } .upcoming-workout-item:last-child { border-bottom: none; padding-bottom: 12px; } /* The container for all workout items on a given day. */ .day-workout-list { position: relative; /* For drop indicator at the end */ display: flex; flex-direction: column; gap: 0; /* Let the items define their own padding/border */ } /* Highlight for when a workout is being dragged over an empty day card. */ .day-workout-list.drop-target-highlight { background-color: #eef2ff; /* Light indigo */ border: 2px dashed var(--color-primary-base); border-radius: 12px; padding: 8px; /* Add some padding so it looks nice */ } /* Red highlight to show that a drop is not allowed (e.g., day is full). */ .day-workout-list.drop-not-allowed { background-color: #fee2e2; /* Light red */ border: 2px dashed #ef4444; border-radius: 12px; padding: 8px; } /* --- Loading Spinner --- */ .loading-spinner { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; color: var(--color-text-muted); text-align: center; width: 100%; } .loading-spinner .material-symbols-outlined { font-size: 72px; margin-bottom: 16px; } .loading-spinner p { font-size: 16px; font-weight: 500; } @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .spin { animation: spin 1.5s linear infinite; } /* --- Drag & Drop Visual Feedback --- */ .upcoming-workout-item { position: relative; } .upcoming-workout-item::before { content: ""; position: absolute; top: -8px; /* Position it in the middle of the gap */ left: 20px; right: 20px; height: 4px; background-color: var(--color-primary-base); border-radius: 2px; transform: scaleX(0); /* Hidden by default */ transition: transform 0.2s ease-in-out; transform-origin: center; } .upcoming-workout-item::after { content: ""; position: absolute; bottom: -8px; /* Position it in the middle of the gap below */ left: 20px; right: 20px; height: 4px; background-color: var(--color-primary-base); border-radius: 2px; transform: scaleX(0); /* Hidden by default */ transition: transform 0.2s ease-in-out; transform-origin: center; } /* Style for the item being actively dragged. */ .upcoming-workout-item.dragging { opacity: 0.5; background: #eef2ff; /* A light indigo to show it's being moved */ border: 2px dashed var(--color-primary-base); cursor: grabbing; } /* Show the drop indicator *before* this element. */ .upcoming-workout-item.drop-indicator-before::before { transform: scaleX(1); } /* Show the drop indicator *after* this element. */ .upcoming-workout-item.drop-indicator-after::after { transform: scaleX(1); } .reorder-icon { display: none; /* Hidden by default */ color: #9ca3af; font-size: 30px; cursor: grab; } /* --- State: Completed Workout Item --- */ .weekly-view-container.edit-mode .upcoming-workout-item { cursor: grab; } .upcoming-workout-item.completed { border: 1px solid var(--color-success-base); border-radius: 16px; } .upcoming-workout-item.completed .upcoming-workout-name::before { content: "check_circle"; font-family: "Material Symbols Outlined"; font-weight: 400; font-size: 18px; color: var(--color-success-base); margin-right: 8px; vertical-align: middle; /* Adjust vertical alignment to match text better */ position: relative; top: -1px; } /* --- Planner Edit Mode Styles --- */ /* In edit mode, the workout item becomes a flex container. */ .weekly-view-container.edit-mode .upcoming-workout-item { display: flex; align-items: center; gap: 12px; } .weekly-view-container.edit-mode .delete-button { display: flex; /* Show delete button */ } .weekly-view-container.edit-mode .reorder-icon { display: block; /* Show reorder handle */ } .delete-button { display: none; /* Hidden by default */ background: none; border: none; color: #ef4444; /* Red for delete */ cursor: pointer; padding: 0; align-items: center; justify-content: center; } .workout-item-actions { display: none; /* Hidden by default */ gap: 8px; } .weekly-view-container.edit-mode .workout-item-actions { display: flex; /* Show action buttons in edit mode */ } .duplicate-button { display: none; /* Hidden by default */ background: none; border: none; cursor: pointer; padding: 0; align-items: center; justify-content: center; color: var(--color-primary-base); /* Blue for copy */ } .weekly-view-container.edit-mode .duplicate-button { display: flex; /* Show duplicate button */ } .delete-button .material-symbols-outlined { font-size: 28px; } .workout-item-content { flex-grow: 1; display: flex; align-items: center; justify-content: space-between; text-decoration: none; color: inherit; } .workout-text { display: flex; flex-direction: column; } .upcoming-workout-icon { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--color-surface-icon-bg); flex-shrink: 0; /* Prevent shrinking */ margin-left: 12px; /* Space between text and icon */ } .upcoming-workout-icon .material-symbols-outlined { color: var(--color-text-muted); font-size: 24px; font-weight: 400; /* Make chevron a bit more visible */ } /* --- Dark Mode Overrides for Planner View --- */ html.dark-mode .day-workout-list.drop-target-highlight { background-color: #2c3b5e; /* A darker indigo */ } .weekly-view-container.edit-mode .upcoming-workout-item.completed { border-color: var(--color-success-base); } .workout-name-input { font-size: 18px; font-weight: 600; color: var(--color-text-primary); border: 2px solid var(--color-primary-base); border-radius: 8px; padding: 8px 12px; box-sizing: border-box; } .workout-edit-buttons { display: flex; gap: 8px; justify-content: flex-end; } .workout-edit-buttons button { width: 40px; height: 40px; padding: 0; font-size: 30px; border: none; border-radius: 8px; cursor: pointer; transition: background-color 0.3s ease, color 0.3s ease; display: flex; align-items: center; justify-content: center; background-color: transparent; } .workout-edit-buttons .save-button { color: var(--color-success-base); } .workout-edit-buttons .cancel-button { color: #ef4444; /* Red for cancel/cross */ } /* --- Footer & Floating Action Button (FAB) --- */ .footer { /* Align to the left to prevent long text from flowing under the FAB */ text-align: left; margin-top: 20px; padding-top: 20px; } .footer p { color: #9ca3af; font-size: 14px; margin: 0; line-height: 1.5; /* Improve readability for wrapped text */ } /* Animation for the FAB to bounce in on page load. */ @keyframes fab-bounce-in { 0% { transform: scale(0); opacity: 0; } 60% { transform: scale(1.2); /* Overshoot */ opacity: 1; } 80% { transform: scale(0.95); /* Bounce back */ } 100% { transform: scale(1); } } .fab { position: fixed; bottom: 100px; /* Position above the bottom nav bar */ right: 24px; width: 56px; height: 56px; border-radius: 50%; background-color: var(--color-primary-base); color: white; border: none; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); cursor: pointer; transition: background-color 0.3s ease, transform 0.3s ease; z-index: 1050; /* Above content, below dialogs */ /* Animation properties */ transform: scale(0); /* Start hidden before animation */ animation: fab-bounce-in 0.5s ease-out 1.2s forwards; } .fab .material-symbols-outlined { font-size: 28px; } .fab:disabled { background-color: var(--color-text-muted); cursor: not-allowed; color: white; } .dialog-tabs { display: flex; width: 100%; border-bottom: 1px solid var(--color-border-default); } .dialog-tab { flex: 1; padding: 12px; background: none; border: none; cursor: pointer; font-size: 16px; font-weight: 600; color: var(--color-text-muted); border-bottom: 3px solid transparent; transition: color 0.2s ease, border-color 0.2s ease; } .dialog-tab.active { color: var(--color-primary-base); border-bottom-color: var(--color-primary-base); } /* Specific styling for the workout choice dialog. */ #workoutChoiceDialogOverlay .dialog-content { background: linear-gradient(135deg, #4a90e2 0%, #0052d4 100%); box-shadow: 0 8px 24px rgba(68, 76, 94, 0.1); } .workout-choice-list { display: flex; flex-direction: column; gap: 12px; width: 100%; margin: 16px 0; } #workoutChoiceDialogOverlay .dialog-content h3 { color: #ffffff; } .workout-choice-button { display: flex; align-items: center; gap: 16px; padding: 16px; border-radius: 999px; background-color: #ffffff; border: none; text-decoration: none; color: #0052d4; font-weight: 600; font-size: 16px; transition: background-color 0.2s ease, border-color 0.2s ease; } .workout-choice-icon-img, .workout-choice-icon-symbol { width: 28px; height: 28px; flex-shrink: 0; } .workout-choice-icon-img { object-fit: contain; } .workout-choice-icon-symbol { font-size: 28px; } .workout-choice-text { flex-grow: 1; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .choice-arrow-container { display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; background-color: transparent; flex-shrink: 0; } .choice-arrow-container .material-symbols-outlined { color: var(--color-primary-base); font-size: 20px; } .template-header { display: flex; justify-content: space-between; align-items: center; width: 100%; margin-bottom: 10px; } #cancelWorkoutChoice { background-color: #ffffff; background-color: transparent; color: #ffffff; border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 999px; } .template-header h3 { margin: 0; } .template-list { width: 100%; max-height: 500px; overflow-y: auto; border-radius: 12px; padding: 8px; border: 1px solid var(--color-border-default); margin-bottom: 16px; /* Add extra space below the list */ } /* An individual item in the template selection list. */ .template-item { position: relative; display: flex; align-items: center; padding: 12px; cursor: pointer; transition: background-color 0.2s ease; border-radius: 8px; } .template-item:last-child { border-bottom: none; } .template-item.selected { background-color: var(--color-primary-light); border-left: none; padding-left: 12px; font-weight: 600; } .template-item-name { font-weight: 500; color: var(--color-text-primary); } .day-selection-container { width: 100%; } .day-selection-container h4 { margin: 0 0 10px 0; color: #374151; font-weight: 600; text-align: left; } .day-of-week-select { width: 100%; padding: 16px; margin-bottom: 16px; border-radius: 12px; border: 1px solid var(--color-border-default); font-size: 16px; background-color: white; color: var(--color-text-primary); -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e"); background-position: right 1rem center; background-repeat: no-repeat; background-size: 1.5em; padding-right: 3rem; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .dialog-input { width: 100%; padding: 16px; margin-bottom: 16px; border-radius: 12px; border: 1px solid var(--color-border-default); font-size: 16px; box-sizing: border-box; background-color: white; color: var(--color-text-primary); transition: border-color 0.2s ease, box-shadow 0.2s ease; } /* A container for charts on the dashboard. */ .chart-container { position: relative; height: 180px; /* Give the chart a fixed height */ width: 100%; } .water-tracker-modal-content { display: flex; /* Revert to default alignment to allow card to be wider */ flex-direction: column; align-items: stretch; text-align: center; /* Ensure text inside p tags is centered */ } .water-tracker-subtitle { font-size: 16px; color: var(--color-text-muted); text-align: center; margin: 0; } .bottle-container { width: 150px; height: 300px; position: relative; /* Add margin auto to center the bottle within its parent */ margin: 0 auto; z-index: 10; } .bottle-body { width: 100%; height: 100%; border: 4px solid var(--color-border-default); border-radius: 65px 65px 20px 20px; /* Unique bottle shape */ background-color: #ffffff; /* Changed from var(--color-surface-subtle) */ box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); overflow: hidden; /* This will clip the child water level */ position: relative; /* New positioning context for the water level */ } .bottle-container.goal-exceeded .bottle-body { border-color: var(--color-success-base); box-shadow: 0 0 15px rgba(16, 185, 129, 0.5); /* Green glow */ } .bottle-cap { position: absolute; top: -30px; /* Position relative to the main container */ left: 52%; transform: translateX(-50%); width: 60px; height: 30px; background-color: var(--color-border-default); border-radius: 5px 5px 0 0; z-index: 10; } .water-level { position: absolute; bottom: 0; left: 0; right: 0; width: 100%; background-color: var(--water-color); height: 0%; /* Controlled by JS */ transition: height 0.8s ease-in-out, border-radius 0.8s ease-in-out; border-radius: 0 0 10px 10px; /* Match the container's bottom radius */ overflow: hidden; /* Hide the parts of the waves that go outside */ } .water-level::before, .water-level::after { content: ""; position: absolute; width: 200%; height: 250px; /* A fixed height is better for this effect */ bottom: 100%; /* Anchor the waves to the top of the water level */ left: 50%; transform: translateX(-50%); background: transparent; } .water-level::before { border-radius: 45%; background: rgba(255, 255, 255, 0.3); animation: wave 5s linear infinite; animation-delay: 0s; } .water-level::after { border-radius: 40%; background: rgba(255, 255, 255, 0.5); animation: wave 10s linear infinite; animation-delay: -2.5s; /* Offset the second wave */ } @keyframes wave { 100% { transform: translateX(-50%) rotate(360deg); } } .water-percentage-display { font-size: 2.25rem; /* text-4xl */ font-weight: 700; /* bold */ color: var(--water-color); margin-top: 0; margin-bottom: 16px; } .goal-reached-message { padding: 0 12px 0 12px; background-color: #d1fae5; /* green-100 */ color: #065f46; /* green-700 */ font-weight: 700; border-radius: 0.5rem; /* Always occupy space, but be invisible by default */ display: flex; align-items: center; justify-content: center; height: 50px; /* Give it a fixed height */ margin-bottom: 1rem; opacity: 0; transform: translateY(-10px); transition: opacity 0.4s ease, transform 0.4s ease; } .goal-reached-message.visible { /* Become visible when the class is added */ opacity: 1; transform: translateY(0); } .button-primary { background-color: var(--color-primary-base); color: white; border: none; border-radius: 12px; padding: 12px 16px; font-size: 16px; font-weight: 600; cursor: pointer; transition: background-color 0.2s ease; } .button-secondary { background: none; color: var(--color-text-muted); box-shadow: none; font-size: 14px; padding: 8px 16px; border: 1px solid var(--color-border-default); border-radius: 12px; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; } .button-primary .button-icon { color: white; } .large-action-button { width: 100%; padding: 1rem 1.5rem; /* py-4 px-6 */ display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 999px; border: none; } .btn-green { background-color: var(--color-success-base); color: white; } .btn-orange { background-color: var(--color-warning-base); color: white; } .water-goal-input-container { display: flex; align-items: center; justify-content: center; /* Center the input and text */ gap: 8px; } .water-goal-input-container .dialog-input { margin-bottom: 0; width: 50%; /* Make the input box smaller */ flex-grow: 0; /* Prevent it from stretching */ text-align: center; font-size: 24px; /* Make the text larger */ font-weight: 600; padding: 12px; /* Adjust padding for new font size */ } /* --- Authentication Form Styles (Sign In / Sign Up) --- */ .signin-card { background-color: white; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .signin-form { display: flex; flex-direction: column; justify-content: center; gap: 16px; } .signup-form { display: flex; flex-direction: column; justify-content: center; gap: 16px; } .signin-header { text-align: center; } .signin-form input, .signup-form input { width: 100%; height: 3rem; border-radius: 10px; border: 1px solid var(--color-border-default); padding-left: 10px; box-sizing: border-box; font-size: 1rem; background-color: white; color: var(--color-text-primary); } .signin-button { width: 100%; height: 3rem; border-radius: 10px; background-color: #1d4ed8; font-size: 1rem; color: white; border: none; cursor: pointer; box-sizing: border-box; } .divider { display: flex; align-items: center; text-align: center; color: var(--color-text-muted); font-size: 12px; font-weight: 500; width: 100%; margin: 8px 0; /* Add some vertical space */ } .divider::before, .divider::after { content: ""; flex: 1; border-bottom: 1px solid var(--color-border-default); } .divider-text { padding: 0 12px; } .social-signin-button { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; height: 3rem; border-radius: 10px; background-color: white; border: 1px solid var(--color-border-default); font-size: 1rem; font-weight: 600; color: var(--color-text-primary); cursor: pointer; transition: background-color 0.2s ease; } .social-signin-button img { width: 20px; height: 20px; } .form-options-container { display: flex; justify-content: space-between; align-items: center; width: 100%; font-size: 14px; } .remember-me-container { display: flex; align-items: center; gap: 5px; } .forgot-password-link { color: var(--color-primary-base); text-decoration: none; } .remember-me-container input { width: auto; height: auto; } .switch-form-text { text-align: center; } .error-message { color: #ef4444; /* Red color for errors */ font-size: 14px; text-align: left; margin: -8px 0 0 0; /* Adjust vertical spacing */ min-height: 1.2em; /* Prevent layout shifts when message appears/disappears */ } #password-strength-container + .error-message, #forgotPasswordDialogOverlay .error-message { text-align: center; } #forgotPasswordDialogOverlay .error-message { margin-top: 0; } .password-wrapper { position: relative; width: 100%; } .password-wrapper input { padding-right: 40px; /* Make space for the icon */ } .toggle-password { position: absolute; top: 50%; right: 8px; transform: translateY(-50%); background: none; border: none; cursor: pointer; color: var(--color-text-muted); padding: 4px; display: flex; align-items: center; } .signup-card { background-color: white; border-radius: 16px; padding: 24px; margin-bottom: 24px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); } .signup-header { text-align: center; } html.dark-mode .social-signin-button { background-color: var(--color-surface-subtle); border-color: var(--color-border-default); color: var(--color-text-primary); } html.dark-mode .divider::before, html.dark-mode .divider::after { border-bottom-color: var(--color-border-default); } /* --- Password Strength Indicator (Sign Up Form) --- */ #password-strength-container { width: 100%; padding: 10px 16px; background-color: var(--color-surface-track); border-radius: 8px; margin-top: -8px; /* Pull it up slightly to reduce gap */ margin-bottom: 8px; box-sizing: border-box; transition: all 0.3s ease; } #password-requirements { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #password-requirements li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); transition: color 0.3s ease; } #password-requirements li .material-symbols-outlined { font-size: 18px; transition: color 0.3s ease; } #password-requirements li.valid { color: var(--color-success-base); } #password-requirements li.valid .material-symbols-outlined { color: var(--color-success-base); } .password-strength-container { width: 100%; padding: 10px 16px; background-color: var(--color-surface-track); border-radius: 8px; margin-top: -8px; /* Pull it up slightly to reduce gap */ margin-bottom: 8px; box-sizing: border-box; transition: all 0.3s ease; } #password-requirements { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } #password-requirements li { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--color-text-muted); transition: color 0.3s ease; } #password-requirements li .material-symbols-outlined { font-size: 18px; transition: color 0.3s ease; } #password-requirements li.valid { color: var(--color-success-base); } #password-requirements li.valid .material-symbols-outlined { color: var(--color-success-base); } /* --- Toast Notification (Pop-up Message) --- */ .toast-container { position: fixed; bottom: 90px; /* Above the bottom nav bar */ left: 50%; transform: translateX(-50%); z-index: 2000; display: flex; flex-direction: column; align-items: center; gap: 10px; pointer-events: none; /* Allow clicks to pass through the container */ } .toast-notification { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 12px; color: white; font-size: 14px; font-weight: 500; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); opacity: 0; transform: translateY(20px); transition: opacity 0.3s ease, transform 0.3s ease; pointer-events: auto; /* Re-enable pointer events for the toast itself */ } .toast-notification.show { opacity: 1; transform: translateY(0); } .toast-notification.success { background-color: var(--color-success-base); } .toast-notification.error { background-color: #ef4444; /* Red */ } /* --- Dark Mode Overrides --- */ html.dark-mode .progress-card h2, html.dark-mode .workout-text h3, html.dark-mode .workout-text p, html.dark-mode .dialog-content h3, html.dark-mode .dialog-content p, html.dark-mode .signin-header h2, html.dark-mode .signup-header h2, html.dark-mode .switch-form-text, html.dark-mode .switch-form-text a { color: var(--color-text-primary); } html.dark-mode .day-selection-container h4 { color: var(--color-text-primary); } html.dark-mode .progress-card, html.dark-mode .workout-card, html.dark-mode .dialog-content, html.dark-mode .signin-card, html.dark-mode .signup-card, html.dark-mode .bottom-nav { background-color: var(--color-surface-subtle); border-color: var(--color-border-default); } /* For Edit dialog, keep background consistent with other dialogs in dark mode */ html.dark-mode #editWorkoutDialogOverlay .dialog-content { background-color: var(--color-surface-subtle); } /* Ensure completed border color overrides default dark mode border */ html.dark-mode .workout-card.completed { border-color: var(--color-success-base); } /* In dark mode, use a darker gradient for the "Today" card to reduce brightness. */ html.dark-mode .today-workout-card { background: linear-gradient( 135deg, var(--color-primary-light) 0%, var(--color-primary-base) 100% ); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2); /* A slightly stronger shadow for dark mode */ } html.dark-mode .day-workout-list.rest-day { background-color: var(--color-surface-icon-bg); } html.dark-mode .day-card.past-day { opacity: 0.6; background-color: var( --color-surface-icon-bg ); /* A slightly different dark shade */ } html.dark-mode .dialog-content { background-color: var(--color-surface-subtle); } html.dark-mode .icon-color-pushDay { color: #4488ef; } html.dark-mode .icon-color-pullDay { color: #10b981; } html.dark-mode .icon-color-legsDay { color: #f59e0b; } html.dark-mode .icon-color-upperBody { color: #8b5cf6; } /* In dark mode, make sure the black PNG icons are visible against the dark background */ html.dark-mode .icon-color-grey { color: var(--color-text-primary); /* light color for dark bg */ } html.dark-mode .workout-icon-img, html.dark-mode .template-item-icon { filter: brightness(0) invert(1); } html.dark-mode .progress-tag { background-color: var(--color-primary-light); color: var(--color-primary-dark); } html.dark-mode .progress-bar-track { background-color: var(--color-surface-track); } html.dark-mode .chevron-icon { color: var(--color-text-muted); } html.dark-mode .footer p { color: var(--color-text-muted); } html.dark-mode .dialog-overlay { background-color: rgba(0, 0, 0, 0.7); } html.dark-mode input[type="email"], /* This is a duplicate selector, but we'll keep it for now to avoid breaking changes */ html.dark-mode input[type="password"], html.dark-mode input[type="text"], html.dark-mode .day-of-week-select, html.dark-mode .dialog-input { background-color: #1a202c; border-color: #4a5568; color: #e2e8f0; } html.dark-mode input::placeholder { color: var(--color-text-muted); } html.dark-mode .nav-button { color: var(--color-text-muted); } html.dark-mode .nav-button.active { color: var(--color-primary-base); } html.dark-mode .splash-screen { background-color: var(--color-surface-subtle); } html.dark-mode .splash-screen .splash-title { color: var(--color-text-primary); } html.dark-mode .workout-name-input { background-color: var(--color-surface-subtle); border-color: var(--color-primary-base); color: var(--color-text-primary); } html.dark-mode .day-card.today { /* Ensure today's card has a dark background but a highlight border */ background-color: var(--color-surface-subtle); border-color: var(--color-primary-base); } .modal-title { font-size: 28px; font-weight: 700; margin: 0; } .modal-title-container { flex-grow: 1; text-align: center; } .water-tracker-modal-content { padding-top: 8px; /* Reduce top padding for a tighter look */ } /* Adjustments for content inside the modal */ #addWorkoutModal .dialog-buttons { justify-content: stretch; /* Make button full width */ } #addWorkoutModal .dialog-buttons button { padding: 16px; /* Make buttons taller */ } .modal-utility-button { background-color: white; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1); border: none; color: var(--color-text-muted); border-radius: 50%; width: 40px; height: 40px; padding: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; } /* New card style for modal content */ .modal-form-card { background-color: white; border-radius: 16px; padding: 24px; display: flex; flex-direction: column; align-items: center; /* Center content horizontally */ gap: 20px; position: relative; /* New positioning context for the menu */ } /* Position the menu inside the card */ .modal-form-card .menu-container { position: absolute; top: 16px; right: 16px; z-index: 100; } /* Add flex layout to the content views for consistent spacing */ #templateCreationView, #blankCreationView { width: 100%; /* Ensure these views take up the full width of the card */ display: flex; flex-direction: column; gap: 16px; } /* --- Hover States (for mouse users) --- */ @media (hover: hover) and (pointer: fine) { .progress-edit-button:hover:not(.active) { background-color: #f3f4f6; border-color: #9ca3af; } .today-workout-card:hover:not(.rest-day) { transform: translateY(-4px); } .start-workout-button:hover { background-color: #f0f0f0; } .fab:hover { background-color: var(--color-primary-dark); transform: scale(1.05); } .dialog-buttons .red-button:hover { background-color: #dc2626; /* Darker red */ } .dialog-buttons .green-button:hover { background-color: var(--color-success-dark); } .social-signin-button:hover { background-color: #f3f4f6; } .dialog-buttons .grey-button:hover { background-color: #4b5563; } .workout-choice-button:hover { background-color: #f0f0f0; } #cancelWorkoutChoice:hover { background-color: rgba(255, 255, 255, 0.1); border-color: rgba(255, 255, 255, 0.8); } .workout-edit-buttons .save-button:hover { background-color: var(--color-success-light); } .workout-edit-buttons .cancel-button:hover { background-color: #fee2e2; /* Light red */ } html.dark-mode .social-signin-button:hover { background-color: #2d3748; } } html.dark-mode .template-list { background-color: var(--color-surface-subtle); box-shadow: none; } html.dark-mode .template-item.selected { background-color: var(--color-primary-light); } html.dark-mode .day-selection-container { background-color: var(--color-surface-subtle); box-shadow: none; } html.dark-mode .modal-form-card { background-color: var(--color-surface-subtle); } /* Ensure the water spinner appears on top of the water tracker modal */ #waterSpinnerDialogOverlay { z-index: 2100; } outline: none; box-shadow: 0 0 0 3px rgba(58, 134, 255, 0.3); } /* ========================================================================== Dashboard-Specific Styles (formerly Dashboard.css) ========================================================================== */ @property --consistency-percentage { syntax: ""; inherits: false; initial-value: 0%; } .dash-header h1 { margin: 16px 0 8px 0; } .dash-header img { max-width: 100%; /* Prevents the image from overflowing its container */ height: auto; /* Maintain aspect ratio */ } /* Grid Styling */ .dashboard-grid { display: grid; grid-template-columns: repeat(2, 1fr); /* 2 columns */ gap: 16px; } .grid-card { background-color: white; border-radius: 16px; padding: 20px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); transition: transform 0.2s ease-out, box-shadow 0.2s ease-out; } .grid-card:hover { transform: translateY(-4px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1); } .grid-card h3 { font-size: 16px; font-weight: 600; color: #374151; margin: 0 0 8px 0; } .grid-card p { font-size: 14px; color: #6b7280; margin: 0; } /* Dark Mode Styles */ html.dark-mode .full-width-card, html.dark-mode .grid-card { background-color: var(--color-surface-subtle); } html.dark-mode .full-width-card h2, html.dark-mode .grid-card h3 { color: var(--color-text-primary); } html.dark-mode .full-width-card p, html.dark-mode .grid-card p { color: var(--color-text-muted); } /* --- Dashboard Card Animations --- These styles are scoped to the `.dashboard-page` class on the body to prevent them from affecting the planner page. */ .dashboard-page .today-workout-card, .dashboard-page .dash-section-header, .dashboard-page .metric-card.full-width, .dashboard-page .metric-card.square { opacity: 0; transform: translateX(-30px); transition: opacity 0.6s ease-out, transform 0.6s ease-out; } /* This is the correct, more specific selector for the "This Week" card */ .dashboard-page .metric-card.full-width { margin-top: 16px; /* This will now apply correctly */ } .dashboard-page .today-workout-card.visible, .dashboard-page .dash-section-header.visible, .dashboard-page .metric-card.full-width.visible, .dashboard-page .metric-card.square.visible { opacity: 1; transform: translateX(0); } /* --- End Animations --- */ /* --- Dashboard Layout --- */ .dashboard-layout { display: flex; flex-direction: column; gap: 16px; /* This is the single source of truth for vertical spacing. */ } /* --- Dashboard Metrics Grid --- */ .metrics-section { display: flex; flex-direction: column; gap: 16px; /* This spaces the items *inside* the metrics section. */ } .metric-card { background-color: white; border-radius: 16px; padding: 16px; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05); border: 2px solid transparent; /* Add transparent border to prevent layout shift */ transition: border-color 0.2s ease, opacity 0.2s ease; /* Animate changes */ /* Add margin-bottom here to consolidate spacing rules */ margin-bottom: 24px; } .metric-card h3 { margin: 0 0 8px 0; font-size: 16px; font-weight: 600; color: #374151; } .metric-card-header { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; justify-content: space-between; align-items: flex-start; } .metric-card-header h3 { text-align: left; margin: 0; /* Override default margin */ flex-grow: 1; } .metric-timespan { display: block; font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-top: 2px; } .metric-content { display: flex; flex-direction: column; align-items: center; justify-content: center; } .metric-card .metric-value { /* The main large number in a metric card. */ font-size: 36px; font-weight: 700; color: var(--color-primary-base); margin-top: 8px; line-height: 1; } .metric-card .metric-unit { font-size: 16px; font-weight: 500; color: var(--color-text-muted); } /* --- Consistency Score Circle Chart --- */ .consistency-score-container { display: flex; justify-content: center; align-items: center; flex-grow: 1; /* Use flex-grow to fill available space */ width: 100%; padding-top: 40px; /* Offset for the header height */ box-sizing: border-box; /* Include padding in the height calculation */ } /* This uses a `conic-gradient` and an animatable custom property (`--consistency-percentage`) to create a smooth, animated circular progress bar. */ .consistency-circle { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; transition: --consistency-percentage 1.5s ease-out; background: radial-gradient( closest-side, var(--color-surface-subtle) 79%, transparent 80% 100% ), conic-gradient( var(--color-primary-base) var(--consistency-percentage), var(--color-accent-purple-light) 0% ); } .consistency-percentage { font-size: 24px; font-weight: 700; color: var(--color-primary-base); } /* --- Personal Bests Metric Card --- */ .personal-bests-list { display: flex; flex-direction: column; align-items: stretch; /* Override the default centering */ gap: 4px; padding-top: 40px; /* Add padding to clear the absolute header */ margin-top: 16px; width: 100%; text-align: left; } .personal-best-item { font-size: 12px; display: flex; justify-content: space-between; align-items: center; } .personal-best-item.clickable { cursor: pointer; transition: background-color 0.2s ease; border-radius: 4px; margin: -2px -4px; /* Negative margin to expand hover area slightly */ padding: 2px 4px; /* Padding to bring content back in */ } /* Only truncate the exercise name on the main dashboard metric card */ .metric-card .personal-best-item .exercise-name { font-weight: 500; color: var(--color-text-primary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 65%; /* Prevent long names from pushing the value off */ } .all-pbs-list { display: flex; flex-direction: column; gap: 8px; } .all-pbs-list .personal-best-item { background-color: var(--color-surface-subtle); padding: 12px 16px; border-radius: 12px; font-size: 14px; } .pb-item-main { display: flex; flex-direction: column; gap: 2px; } .pb-date { font-size: 12px; color: var(--color-text-muted); } html.dark-mode .all-pbs-list .personal-best-item { background-color: #2d3748; } .metric-card.dragging { opacity: 0.5; cursor: grabbing; } .metric-card.over { border-color: var(--color-primary-base); opacity: 0.7; } .personal-best-item .best-value { font-weight: 600; color: var(--color-primary-base); } .metric-card p { margin: 0; font-size: 14px; color: var(--color-text-muted); } .metrics-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } .metric-card.square { aspect-ratio: 1 / 1; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; /* Override the general margin to let the parent grid's `gap` handle spacing */ margin-bottom: 0; } /* When a card's menu is open, increase its z-index to ensure the menu appears above sibling cards */ .metric-card.square.menu-open { /* By giving the card with the open menu a position and a z-index, we lift its entire stacking context above its siblings in the grid. This allows the child .options-menu to render on top of adjacent cards. */ position: relative; z-index: 100; } /* When the full-width card's menu is open, do the same to lift it above the metrics grid */ .metric-card.full-width.menu-open { position: relative; /* This z-index needs to be higher than the default stacking order of subsequent elements. 10 is sufficient to lift it above the metrics grid below it. */ z-index: 10; } /* --- Jiggle Mode (for reordering metric cards) --- */ .dash-section-header { display: flex; justify-content: space-between; align-items: center; } .dash-section-header h3 { font-size: 18px; font-weight: 600; color: #374151; margin: 0; /* Remove margin, parent flex gap will handle spacing */ } .jiggle-done-button { background-color: var(--color-primary-base); border: none; color: white; padding: 6px 16px; border-radius: 8px; font-size: 14px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } /* The jiggle animation for when edit mode is active. */ @keyframes jiggle { 0%, 100% { transform: rotate(-1deg); } 50% { transform: rotate(1deg); } } .metrics-grid.jiggle-mode .metric-card.square { animation: jiggle 0.2s infinite; cursor: grab; } .metrics-grid.jiggle-mode .metric-card.dragging { cursor: grabbing; animation: none; /* Stop jiggling the card being dragged */ } /* --- Water Tracker Metric Card --- */ .water-tracker-controls { display: flex; align-items: center; justify-content: space-around; width: 100%; margin-top: 16px; } #waterTrackerCard { cursor: pointer; } .water-intake-display { display: flex; flex-direction: column; align-items: center; gap: 8px; } .water-count { font-size: 24px; font-weight: 700; color: var(--color-primary-base); line-height: 1; } .water-unit { font-size: 12px; font-weight: 500; color: var(--color-text-muted); } .water-count-group { display: flex; align-items: baseline; gap: 4px; } .water-goal-text { font-size: 12px; font-weight: 500; color: var(--color-text-muted); } /* --- Streak Metric Card --- */ .streak-metric-content { display: flex; align-items: center; justify-content: center; gap: 8px; flex-direction: row; /* Override the default column direction */ margin-top: 16px; /* Add more space from the header */ } .streak-icon { font-size: 40px; /* Slightly smaller icon for better balance */ color: #f59e0b; /* A brighter orange for the flame */ font-variation-settings: "FILL" 1; } .streak-icon.red { color: #ef4444; /* A vibrant red color */ } .streak-value-group { display: flex; align-items: baseline; /* Align the number and unit by their text baseline */ gap: 6px; } .streak-value-group .metric-value { margin-top: 0; /* Remove margin from the generic metric-value class */ } .streak-unit { font-size: 14px; color: var(--color-text-muted); text-transform: capitalize; } .loading-bests { color: var(--color-text-muted); } /* --- Dark Mode Overrides for Dashboard --- */ html.dark-mode .metric-card { background-color: var(--color-surface-subtle); } html.dark-mode .metric-card h3, html.dark-mode .dash-section-header h3 { color: var(--color-text-primary); } html.dark-mode .metric-timespan { color: var(--color-text-muted); } html.dark-mode .personal-best-item .exercise-name { color: var(--color-text-primary); } html.dark-mode .loading-bests { color: var(--color-text-muted); } html.dark-mode .streak-icon { color: var(--color-warning-dark); } html.dark-mode .streak-icon.red { color: #f87171; /* A slightly lighter red for dark mode - no variable for this yet */ } /* --- Styles for Dashboard Week View (from calendar.css) --- */ @keyframes pulse { 0% { transform: scale(1); } 50% { transform: scale(1.05); } 100% { transform: scale(1); } } .calendar-weekdays { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; margin-bottom: 12px; font-size: 12px; font-weight: 600; color: var(--color-text-muted); } .calendar-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 8px; } .calendar-day { display: flex; flex-direction: column; align-items: center; justify-content: center; aspect-ratio: 1 / 1; font-size: 14px; border-radius: 50%; border: 2px solid transparent; cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease, border 0.2s ease; position: relative; } .calendar-day.has-log { background-color: var(--color-success-light); color: var(--color-success-base); font-weight: 600; } .calendar-day.has-upcoming { /* For upcoming workouts, keep the text color and a dot will be added below via the ::after pseudo-element. */ /* color: var(--color-primary-base); */ font-weight: 500; } .calendar-day.has-upcoming::after { content: ""; position: absolute; bottom: 6px; /* Position the dot below the number */ width: 6px; height: 6px; background-color: var(--color-primary-base); border-radius: 50%; } .calendar-day.today { /* BORDER: Today is now a prominent border, which combines better with other states. */ font-weight: 600; border-color: var(--color-primary-dark); animation: pulse 2s infinite ease-in-out; } @media (hover: hover) and (pointer: fine) { html.dark-mode .personal-best-item.clickable:hover { background-color: var(--color-primary-light); } .personal-best-item.clickable:hover { background-color: var(--color-surface-track); } } .water-control-btn { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--color-border-default); background-color: var(--color-surface-subtle); color: var(--color-text-primary); font-size: 24px; font-weight: 500; cursor: pointer; transition: background-color 0.2s ease; display: flex; align-items: center; justify-content: center; } html.dark-mode .water-control-btn { background-color: var(--color-surface-track); border-color: var(--color-border-default); color: var(--color-text-primary); } @media (hover: hover) and (pointer: fine) { .water-control-btn:hover { background-color: #e5e7eb; } html.dark-mode .water-control-btn:hover { background-color: var(--color-text-muted); } } .water-tracker-controls { display: flex; align-items: center; justify-content: space-around; width: 100%; margin-top: 16px; } /* --- Combined Card (Dashboard Week View / Volume Chart) --- */ .combined-card-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 16px; } .combined-card-header h3 { margin: 0; font-size: 16px; font-weight: 600; color: #374151; } .combined-card-header .chart-title-unit { font-size: 12px; font-weight: 400; color: var(--color-text-muted); margin-left: 6px; /* Use vertical-align to align with the bottom of the main title text */ vertical-align: baseline; } .menu-container { position: relative; } .utility-button { background: none; border: none; color: var(--color-text-muted); cursor: pointer; padding: 4px; border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: background-color 0.2s ease; } .options-menu { opacity: 0; transform: scale(0.95); transform-origin: top right; transition: transform 0.2s ease-out, opacity 0.2s ease-out; visibility: hidden; position: absolute; top: 100%; right: 0; background-color: white; border-radius: 8px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); z-index: 1110; /* Increased to be above sticky headers and nav */ overflow: hidden; min-width: 160px; padding: 8px 0; } /* New class to dynamically open the menu upwards */ .options-menu.open-up { top: auto; bottom: 100%; transform-origin: bottom right; /* Animate from the bottom-right corner */ } /* --- Workouts Circle Chart (Dashboard) --- */ @property --workouts-percentage { syntax: ""; inherits: false; initial-value: 0%; } .workouts-circle-container { display: flex; justify-content: center; align-items: center; flex-grow: 1; /* Use flex-grow to fill available space */ width: 100%; padding-top: 40px; /* Offset for the header height */ box-sizing: border-box; } .workouts-circle { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; transition: --workouts-percentage 1.5s ease-out; background: radial-gradient( closest-side, var(--color-surface-subtle) 79%, transparent 80% 100% ), conic-gradient( var(--color-primary-base) var(--workouts-percentage), var(--color-accent-purple-light) 0% ); } .workouts-circle-text { display: flex; align-items: baseline; gap: 2px; } .workouts-completed-value { font-size: 24px; font-weight: 700; color: var(--color-primary-base); } .workouts-total-divider, .workouts-total-value { font-size: 16px; font-weight: 500; color: var(--color-text-muted); } /* --- Water Circle Chart (Dashboard) --- */ @property --water-percentage { syntax: ""; inherits: false; initial-value: 0%; } .water-circle-container { display: flex; justify-content: center; align-items: center; flex-grow: 1; /* Use flex-grow to fill available space */ width: 100%; padding-top: 40px; /* Offset for the header height */ box-sizing: border-box; } .water-circle { width: 80px; height: 80px; border-radius: 50%; display: grid; place-items: center; transition: --water-percentage 1.5s ease-out; background: radial-gradient( closest-side, var(--color-surface-subtle) 79%, transparent 80% 100% ), conic-gradient( var(--color-primary-base) var(--water-percentage), var(--color-accent-purple-light) 0% ); } .water-circle-text { display: flex; flex-direction: column; align-items: center; line-height: 1.2; } .options-menu.show { opacity: 1; transform: scale(1); visibility: visible; z-index: 2000; } .options-menu a { display: flex; align-items: center; gap: 12px; padding: 10px 16px; text-decoration: none; color: var(--color-text-primary); font-size: 14px; } html.dark-mode .combined-card-header h3 { color: var(--color-text-primary); } html.dark-mode .utility-button { color: var(--color-text-muted); } html.dark-mode .options-menu { background-color: var(--color-surface-icon-bg); } html.dark-mode .options-menu a { color: var(--color-text-primary); } @media (hover: hover) and (pointer: fine) { html.dark-mode .options-menu a:hover { background-color: var(--color-border-default); } } .metric-menu-button { /* Make the button smaller and position it cleanly */ padding: 0; width: 28px; height: 28px; flex-shrink: 0; } /* --- Responsive Adjustments for Dashboard --- */ @media (max-width: 380px) { .metric-card-header h3 { font-size: 12px; /* Reduce title font size */ } .metric-timespan { font-size: 11px; /* Reduce timespan font size */ } .dash-header p { font-size: 14px; /* Reduce subtitle font size */ } } /* --- Info Button for Metric Cards --- */ .metric-card .metric-info-button { position: absolute; bottom: 12px; right: 12px; background: none; border: none; padding: 0; cursor: pointer; color: var(--color-primary-base); display: flex; align-items: center; justify-content: center; transition: color 0.2s ease; } .metric-card.square { position: relative; /* Needed for absolute positioning of the info button */ } .metric-info-button:hover { color: var(--color-primary-base); } .metric-info-button .material-symbols-outlined { font-size: 20px; } /* --- Info Modal Styles (adapted from profile.css) --- */ .info-section { text-align: center; padding: 16px; background-color: var(--color-primary-light); border-radius: 16px; margin-bottom: 24px; } .info-section .material-symbols-outlined { font-size: 48px; color: var(--color-primary-base); margin-bottom: 12px; } .info-section h3 { margin: 0 0 8px 0; font-size: 20px; color: var(--color-text-primary); } .info-section p { margin: 0; color: var(--color-text-muted); line-height: 1.5; } .info-explanation-list { display: flex; flex-direction: column; gap: 20px; } .info-explanation-item h4 { margin: 0 0 4px 0; font-size: 16px; font-weight: 600; color: var(--color-text-primary); } .info-explanation-item p { margin: 0; font-size: 14px; color: var(--color-text-muted); line-height: 1.5; }