@import '_content/Microsoft.FluentUI.AspNetCore.Components/Microsoft.FluentUI.AspNetCore.Components.ewdlgswx1m.bundle.scp.css';

/* /Components/Account/Shared/AccountLayout.razor.rz.scp.css */
/* =================================
   ACCOUNT LAYOUT - CENTERED CARD
   ================================= */

.account-layout[b-1687w4n97l] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 100%;
    background: linear-gradient(135deg, var(--color-primary-dark) 0%, var(--color-primary) 50%, var(--color-secondary-dark) 100%);
    padding: 16px;
}

.account-card[b-1687w4n97l] {
    background: #ffffff;
    border-radius: 16px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
    padding: 40px 36px 36px;
    width: 100%;
    max-width: 440px;
    animation: account-card-enter-b-1687w4n97l 0.35s ease-out;
}

@keyframes account-card-enter-b-1687w4n97l {
    from {
        opacity: 0;
        transform: translateY(16px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Branding */
.account-brand[b-1687w4n97l] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    margin-bottom: 28px;
}

.account-brand-icon[b-1687w4n97l] {
    width: 36px;
    height: 36px;
    object-fit: contain;
}

.account-brand-name[b-1687w4n97l] {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    letter-spacing: -0.5px;
}

/* Page title styling */
.account-card h1[b-1687w4n97l] {
    font-size: 1.5rem;
    font-weight: 600;
    color: #1a1a2e;
    margin: 0 0 4px;
    text-align: center;
}

.account-card h2[b-1687w4n97l] {
    font-size: 0.95rem;
    font-weight: 400;
    color: #6b7280;
    margin: 0 0 20px;
    text-align: center;
}

.account-card h3[b-1687w4n97l] {
    font-size: 0.95rem;
    font-weight: 500;
    color: #6b7280;
    margin: 16px 0 8px;
    text-align: center;
}

.account-card hr[b-1687w4n97l] {
    display: none;
}

/* Divider with text */
.account-divider[b-1687w4n97l] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 20px 0;
    color: #9ca3af;
    font-size: 0.8rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.account-divider[b-1687w4n97l]::before,
.account-divider[b-1687w4n97l]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: #e5e7eb;
}

/* Links section */
.account-links[b-1687w4n97l] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-top: 20px;
    font-size: 0.875rem;
}

.account-links p[b-1687w4n97l] {
    margin: 0;
}

/* Status/confirmation pages */
.account-status[b-1687w4n97l] {
    text-align: center;
    padding: 12px 0;
}

.account-status-icon[b-1687w4n97l] {
    font-size: 3rem;
    margin-bottom: 16px;
    display: block;
}

.account-status p[b-1687w4n97l] {
    color: #4b5563;
    font-size: 0.95rem;
    line-height: 1.6;
    margin: 0 0 16px;
}

.account-status a[b-1687w4n97l] {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: 500;
}

.account-status a:hover[b-1687w4n97l] {
    text-decoration: underline;
}

/* Alert overrides for status messages */
.account-card .alert[b-1687w4n97l] {
    border-radius: 8px;
    font-size: 0.875rem;
    padding: 10px 14px;
    margin-bottom: 16px;
}

.account-card .alert-danger[b-1687w4n97l] {
    background: #fef2f2;
    color: #991b1b;
    border: 1px solid #fecaca;
}

.account-card .alert-success[b-1687w4n97l] {
    background: #f0fdf4;
    color: #166534;
    border: 1px solid #bbf7d0;
}

.account-card .alert-info[b-1687w4n97l] {
    background: #eff6ff;
    color: #1e40af;
    border: 1px solid #bfdbfe;
}

/* Text styling */
.account-card .text-danger[b-1687w4n97l] {
    color: #dc2626;
    font-size: 0.8rem;
}

.account-card header h1.text-danger[b-1687w4n97l] {
    color: #dc2626;
}

.account-card header p.text-danger[b-1687w4n97l] {
    color: #4b5563;
}

/* Mobile responsive */
@media (max-width: 480px) {
    .account-layout[b-1687w4n97l] {
        padding: 0;
        align-items: stretch;
    }
    
    .account-card[b-1687w4n97l] {
        border-radius: 0;
        max-width: 100%;
        min-height: 100vh;
        display: flex;
        flex-direction: column;
        justify-content: center;
        padding: 32px 24px;
    }
}
/* /Components/Admin/AdminWorkoutManagement.razor.rz.scp.css */
/* ===========================================================================
   ADMIN WORKOUT MANAGEMENT - MODERN RESPONSIVE LAYOUT
   =========================================================================== */

.admin-page[b-xlr0fuja5r] {
    padding: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.admin-header[b-xlr0fuja5r] {
    margin-bottom: 30px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.header-icon[b-xlr0fuja5r] {
    margin-bottom: 8px;
}

.header-subtitle[b-xlr0fuja5r] {
    color: var(--neutral-foreground-hint);
}

.workout-admin-container[b-xlr0fuja5r] {
    margin: 20px 0;
}

/* Action Buttons */
.action-buttons[b-xlr0fuja5r] {
    display: flex;
    gap: 12px;
    margin-bottom: 24px;
    flex-wrap: wrap;
}

.action-buttons > div[b-xlr0fuja5r] {
    flex: 1;
    min-width: 180px;
}

@media (max-width: 600px) {
    .action-buttons[b-xlr0fuja5r] {
        flex-direction: column;
    }
    
    .action-buttons > div[b-xlr0fuja5r] {
        width: 100%;
    }
}

/* Workout Panels - Two Column Layout */
.workout-panels[b-xlr0fuja5r] {
    display: grid;
    grid-template-columns: 350px 1fr;
    gap: 24px;
    min-height: 600px;
}

@media (max-width: 1024px) {
    .workout-panels[b-xlr0fuja5r] {
        grid-template-columns: 1fr;
    }
}

/* ===========================================================================
   LEFT PANEL: Workout List
   =========================================================================== */

.workout-list-panel[b-xlr0fuja5r] {
    background: var(--neutral-layer-2);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 200px);
}

.panel-header[b-xlr0fuja5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider);
}

.panel-header h4[b-xlr0fuja5r] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
}

.workout-count[b-xlr0fuja5r] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

/* Filter Section */
.filter-section[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--neutral-stroke-divider);
    margin-bottom: 16px;
}

.filter-row[b-xlr0fuja5r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.filter-row > div[b-xlr0fuja5r] {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 600px) {
    .filter-row[b-xlr0fuja5r] {
        grid-template-columns: 1fr;
    }
}

.filter-actions[b-xlr0fuja5r] {
    display: flex;
    gap: 8px;
}

.filter-actions > *[b-xlr0fuja5r] {
    flex: 1;
}

/* Workout List Section */
.workout-list-section[b-xlr0fuja5r] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.workout-items[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
}

/* Individual Workout Item */
.workout-list-item[b-xlr0fuja5r] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider);
    cursor: pointer;
    transition: all 0.2s ease;
}

.workout-list-item:hover[b-xlr0fuja5r] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.workout-list-item.selected[b-xlr0fuja5r] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-focus);
}

.workout-item-date[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 4px 8px;
    background: var(--neutral-layer-3);
    border-radius: 6px;
}

.workout-item-date .day[b-xlr0fuja5r] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--accent-fill-rest);
    line-height: 1;
}

.workout-item-date .month[b-xlr0fuja5r] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--neutral-foreground-hint);
}

.workout-item-info[b-xlr0fuja5r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.workout-item-type[b-xlr0fuja5r] {
    font-weight: 600;
    font-size: 0.9rem;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workout-item-user[b-xlr0fuja5r] {
    font-size: 0.75rem;
    color: var(--accent-fill-rest);
    font-weight: 500;
}

.workout-item-phase[b-xlr0fuja5r] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
}

.workout-item-duration[b-xlr0fuja5r] {
    font-size: 0.75rem;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

/* Loading and Empty States */
.loading-indicator[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 12px;
    color: var(--neutral-foreground-hint);
}

.empty-list[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-list p[b-xlr0fuja5r] {
    margin: 8px 0 0 0;
    font-size: 0.9rem;
}

/* Pagination */
.pagination[b-xlr0fuja5r] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--neutral-stroke-divider);
    margin-top: auto;
}

.page-info[b-xlr0fuja5r] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

/* ===========================================================================
   RIGHT PANEL: Workout Details
   =========================================================================== */

.workout-detail-panel[b-xlr0fuja5r] {
    background: var(--neutral-layer-2);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--neutral-stroke-rest);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
    max-height: calc(100vh - 200px);
}

/* Workout Basic Info */
.workout-basic-info[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.info-item[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.info-value[b-xlr0fuja5r] {
    font-weight: 600;
    color: var(--accent-fill-rest);
    font-size: 0.95rem;
}

.info-row[b-xlr0fuja5r] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-row > div[b-xlr0fuja5r] {
    min-width: 0;
    overflow: hidden;
}

@media (max-width: 600px) {
    .info-row[b-xlr0fuja5r] {
        grid-template-columns: 1fr;
    }
}

/* Exercise Management */
.exercise-management[b-xlr0fuja5r] {
    border-top: 1px solid var(--neutral-stroke-divider);
    padding-top: 16px;
    margin-top: 16px;
}

.exercise-header[b-xlr0fuja5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.exercise-header h5[b-xlr0fuja5r] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.exercise-list[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.exercise-edit-item[b-xlr0fuja5r] {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-divider);
}

.exercise-reorder[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.exercise-details[b-xlr0fuja5r] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exercise-name-row[b-xlr0fuja5r] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exercise-name-row strong[b-xlr0fuja5r] {
    color: var(--accent-fill-rest);
    font-size: 0.95rem;
}

.exercise-params-row[b-xlr0fuja5r] {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 8px;
}

.exercise-params-row > div[b-xlr0fuja5r] {
    min-width: 0;
}

@media (max-width: 600px) {
    .exercise-params-row[b-xlr0fuja5r] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Empty State */
.empty-state[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
    min-height: 300px;
}

.empty-state h4[b-xlr0fuja5r] {
    margin: 16px 0 8px 0;
}

.empty-state p[b-xlr0fuja5r] {
    margin: 0;
    font-size: 0.9rem;
}

.no-exercises-edit[b-xlr0fuja5r] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    text-align: center;
    background: var(--neutral-layer-3);
    border-radius: 8px;
    color: var(--neutral-foreground-hint);
}

.no-exercises-edit p[b-xlr0fuja5r] {
    margin: 8px 0 0 0;
}

/* Action Buttons */
.workout-actions[b-xlr0fuja5r] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-divider);
}

@media (max-width: 600px) {
    .workout-actions[b-xlr0fuja5r] {
        flex-direction: column;
    }
}

/* ===========================================================================
   Fluent Component Overrides for Container Constraint
   =========================================================================== */

/* Ensure FluentSelect, FluentTextField, and other inputs respect container width */
.filter-row fluent-select[b-xlr0fuja5r],
.filter-row fluent-text-field[b-xlr0fuja5r],
.filter-row fluent-date-picker[b-xlr0fuja5r],
.info-row fluent-select[b-xlr0fuja5r],
.info-row fluent-text-field[b-xlr0fuja5r],
.info-row fluent-date-picker[b-xlr0fuja5r],
.info-row fluent-number-field[b-xlr0fuja5r] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

/* Ensure the internal dropdown of fluent-select doesn't overflow */
.filter-row fluent-select[b-xlr0fuja5r]::part(control),
.info-row fluent-select[b-xlr0fuja5r]::part(control) {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Fix FluentSelect dropdown clipping - target the actual listbox element */
[b-xlr0fuja5r] fluent-select::part(listbox) {
    max-height: 300px !important;
    position: fixed !important;
    z-index: 9999 !important;
}

[b-xlr0fuja5r] fluent-select .listbox {
    max-height: 300px !important;
    position: fixed !important;
    z-index: 9999 !important;
}

/* Alternative: Use custom CSS variable for listbox height */
[b-xlr0fuja5r] fluent-select {
    --listbox-max-height: 300px;
}

/* Exercise Purpose Styling */
.exercise-name-with-purpose[b-xlr0fuja5r] {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

/* Exercise item left border colors based on purpose */
.exercise-edit-item.purpose-warmup[b-xlr0fuja5r] {
    border-left: 3px solid var(--purpose-warmup);
}

.exercise-edit-item.purpose-technique[b-xlr0fuja5r] {
    border-left: 3px solid var(--purpose-technique);
}

.exercise-edit-item.purpose-corelift[b-xlr0fuja5r] {
    border-left: 3px solid var(--purpose-corelift);
}

.exercise-edit-item.purpose-strength[b-xlr0fuja5r] {
    border-left: 3px solid var(--purpose-strength);
}

.exercise-edit-item.purpose-accessory[b-xlr0fuja5r] {
    border-left: 3px solid var(--purpose-accessory);
}
/* /Components/Admin/Dialogs/CopyWorkoutDialog.razor.rz.scp.css */
/* Copy Workout Dialog Styles */

.copy-workout-dialog[b-w7fx0ekngy] {
	--dialog-width: min(95vw, 600px);
	--dialog-height: min(90vh, 700px);
}

.copy-workout-content[b-w7fx0ekngy] {
	display: flex;
	flex-direction: column;
	gap: 20px;
	max-height: 60vh;
	overflow-y: auto;
}

/* Source Workout Info */
.source-workout-info h5[b-w7fx0ekngy] {
	margin: 0 0 12px 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-neutral-dark);
}

.workout-details-card[b-w7fx0ekngy] {
	padding: 12px;
	background: var(--color-secondary-light);
	border-radius: 8px;
	border: 1px solid var(--color-neutral-light);
}

.detail-row[b-w7fx0ekngy] {
	display: flex;
	justify-content: space-between;
	padding: 4px 0;
	font-size: 0.85rem;
}

.detail-row .label[b-w7fx0ekngy] {
	font-weight: 600;
	color: var(--color-neutral-medium);
}

.detail-row .value[b-w7fx0ekngy] {
	color: var(--color-neutral-dark);
}

/* Target Date Section */
.target-date-section[b-w7fx0ekngy] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

/* Target Users Section */
.target-users-section[b-w7fx0ekngy] {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.section-header[b-w7fx0ekngy] {
	display: flex;
	justify-content: space-between;
	align-items: center;
}

.section-header h5[b-w7fx0ekngy] {
	margin: 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-neutral-dark);
}

.user-count[b-w7fx0ekngy] {
	font-size: 0.8rem;
	color: var(--color-primary);
	font-weight: 500;
}

/* User List */
.user-list[b-w7fx0ekngy] {
	max-height: 300px;
	overflow-y: auto;
	border: 1px solid var(--color-neutral-light);
	border-radius: 8px;
	padding: 8px;
	background: white;
}

.user-checkbox-item[b-w7fx0ekngy] {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 8px;
	border-radius: 6px;
	transition: background 0.2s ease;
}

.user-checkbox-item:hover:not(.disabled)[b-w7fx0ekngy] {
	background: var(--color-neutral-light);
}

.user-checkbox-item.disabled[b-w7fx0ekngy] {
	opacity: 0.5;
	cursor: not-allowed;
}

.user-email[b-w7fx0ekngy] {
	font-size: 0.75rem;
	color: var(--color-neutral-medium);
	margin-left: 28px;
}

/* Empty State */
.empty-list[b-w7fx0ekngy] {
	display: flex;
	justify-content: center;
	align-items: center;
	padding: 24px;
	text-align: center;
	color: var(--color-neutral-medium);
}

.empty-list p[b-w7fx0ekngy] {
	margin: 0;
	font-size: 0.9rem;
}

/* Copy Summary */
.copy-summary[b-w7fx0ekngy] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: var(--color-info-light, #e3f2fd);
	border-radius: 8px;
	border: 1px solid var(--color-info, #2196f3);
	font-size: 0.85rem;
	color: var(--color-neutral-dark);
}
/* /Components/Admin/Dialogs/CreateWorkoutDialog.razor.rz.scp.css */
/* Create Workout Dialog Styles */

.create-workout-dialog[b-klw3xh91ad] {
	--dialog-width: min(95vw, 550px);
}

.create-workout-content[b-klw3xh91ad] {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

/* User Selection Section */
.user-selection-section[b-klw3xh91ad] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.user-search-results[b-klw3xh91ad] {
	max-height: 200px;
	overflow-y: auto;
	border: 1px solid var(--color-neutral-light);
	border-radius: 8px;
	background: white;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.user-result-item[b-klw3xh91ad] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 12px;
	cursor: pointer;
	transition: background 0.2s ease;
	border-bottom: 1px solid var(--color-neutral-light);
}

.user-result-item:last-child[b-klw3xh91ad] {
	border-bottom: none;
}

.user-result-item:hover[b-klw3xh91ad] {
	background: var(--color-neutral-light);
}

.user-result-item.selected[b-klw3xh91ad] {
	background: var(--color-primary-light);
	border-color: var(--color-primary);
}

.user-info[b-klw3xh91ad] {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.user-name[b-klw3xh91ad] {
	font-weight: 600;
	font-size: 0.9rem;
	color: var(--color-neutral-dark);
}

.user-email[b-klw3xh91ad] {
	font-size: 0.75rem;
	color: var(--color-neutral-medium);
}

.selected-user-badge[b-klw3xh91ad] {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 12px;
	background: var(--color-primary-light);
	border: 1px solid var(--color-primary);
	border-radius: 20px;
	font-size: 0.85rem;
	color: var(--color-primary);
	font-weight: 500;
	width: fit-content;
}

/* Workout Details Section */
.workout-details-section[b-klw3xh91ad] {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.form-row[b-klw3xh91ad] {
	display: grid;
	grid-template-columns: auto auto;
	gap: 12px;	
}

.form-row > div[b-klw3xh91ad] {
	min-width: 0;
}

@media (max-width: 600px) {
	.form-row[b-klw3xh91ad] {
		grid-template-columns: 1fr;
	}
}
/* /Components/Admin/Dialogs/SelectWorkoutDialog.razor.rz.scp.css */
/* Select Workout Dialog Styles */

.select-workout-dialog[b-9oskhtycti] {
	--dialog-width: min(95vw, 700px);
	--dialog-height: min(90vh, 800px);
}

.select-workout-content[b-9oskhtycti] {
	display: flex;
	flex-direction: column;
	gap: 16px;
	max-height: 60vh;
}

/* Filter Section */
.filter-section[b-9oskhtycti] {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding-bottom: 12px;
	border-bottom: 1px solid var(--color-neutral-light);
}

.filter-row[b-9oskhtycti] {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 12px;
}

.filter-row > div[b-9oskhtycti] {
	min-width: 0;
}

@media (max-width: 600px) {
	.filter-row[b-9oskhtycti] {
		grid-template-columns: 1fr;
	}
}

/* Workout List Section */
.workout-list-section[b-9oskhtycti] {
	flex: 1;
	overflow-y: auto;
	min-height: 200px;
	max-height: 400px;
}

.workout-items[b-9oskhtycti] {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.workout-select-item[b-9oskhtycti] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: white;
	border-radius: 8px;
	border: 1px solid var(--color-neutral-light);
	cursor: pointer;
	transition: all 0.2s ease;
}

.workout-select-item:hover[b-9oskhtycti] {
	border-color: var(--color-primary);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.workout-select-item.selected[b-9oskhtycti] {
	border-color: var(--color-primary);
	background: var(--color-primary-light);
	box-shadow: 0 2px 12px rgba(0, 120, 212, 0.15);
}

.workout-item-date[b-9oskhtycti] {
	display: flex;
	flex-direction: column;
	align-items: center;
	min-width: 40px;
	padding: 4px 8px;
	background: var(--color-secondary-light);
	border-radius: 6px;
}

.workout-item-date .day[b-9oskhtycti] {
	font-size: 1.1rem;
	font-weight: 700;
	color: var(--color-primary);
	line-height: 1;
}

.workout-item-date .month[b-9oskhtycti] {
	font-size: 0.7rem;
	text-transform: uppercase;
	color: var(--color-neutral-medium);
}

.workout-item-info[b-9oskhtycti] {
	flex: 1;
	min-width: 0;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

.workout-item-type[b-9oskhtycti] {
	font-weight: 600;
	font-size: 0.95rem;
	color: var(--color-neutral-dark);
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
}

.workout-item-details[b-9oskhtycti] {
	font-size: 0.75rem;
	color: var(--color-neutral-medium);
}

.workout-item-exercises[b-9oskhtycti] {
	font-size: 0.7rem;
	color: var(--color-primary);
	font-weight: 500;
}

.workout-item-duration[b-9oskhtycti] {
	font-size: 0.75rem;
	color: var(--color-neutral-medium);
	white-space: nowrap;
}

/* Loading and Empty States */
.loading-indicator[b-9oskhtycti] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px;
	gap: 12px;
	color: var(--color-neutral-medium);
}

.empty-list[b-9oskhtycti] {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 32px;
	text-align: center;
	color: var(--color-neutral-medium);
}

.empty-list p[b-9oskhtycti] {
	margin: 8px 0 0 0;
	font-size: 0.9rem;
}

/* Selected Workout Preview */
.selected-workout-preview[b-9oskhtycti] {
	padding: 16px;
	background: var(--color-primary-light);
	border-radius: 8px;
	border: 1px solid var(--color-primary);
}

.selected-workout-preview h5[b-9oskhtycti] {
	margin: 0 0 12px 0;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--color-primary);
}

.preview-content p[b-9oskhtycti] {
	margin: 4px 0;
	font-size: 0.85rem;
	color: var(--color-neutral-dark);
}

.preview-content strong[b-9oskhtycti] {
	font-weight: 600;
	color: var(--color-neutral-dark);
}
/* /Components/Admin/UserEditDialog.razor.rz.scp.css */
/* User Info Section */
.user-info-section[b-9074bopxkx] {
    padding: 12px;
}

.info-row[b-9074bopxkx] {
    display: flex;
    justify-content: space-between;
    padding: 8px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider);
}

.info-row:last-child[b-9074bopxkx] {
    border-bottom: none;
}

/* Roles Section */
.roles-section[b-9074bopxkx] {
    padding: 12px;
}

.role-checkbox[b-9074bopxkx] {
    padding: 8px 0;
}

/* App Access Section */
.app-access-section[b-9074bopxkx] {
    padding: 12px;
}

.app-checkbox[b-9074bopxkx] {
    padding: 8px 0;
}

/* Responsive Design */
@media (max-width: 768px) {
    .info-row[b-9074bopxkx] {
        flex-direction: column;
        gap: 4px;
    }
}
/* /Components/Admin/UserManagement.razor.rz.scp.css */
/* Admin Page Layout */
.admin-page[b-1k84g3tdg5] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 24px;
}

.admin-header[b-1k84g3tdg5] {
    text-align: center;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--neutral-fill-secondary-rest);
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-divider);
}

.header-icon[b-1k84g3tdg5] {
    margin-bottom: 12px;
    color: var(--accent-fill-rest);
}

.header-subtitle[b-1k84g3tdg5] {
    color: var(--neutral-foreground-hint);
    margin-top: 8px;
}

/* Users Container */
.users-container[b-1k84g3tdg5] {
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-divider);
    background: var(--neutral-fill-rest);
}

/* Empty State */
.empty-state[b-1k84g3tdg5] {
    padding: 48px 32px;
    text-align: center;
    border: 2px dashed var(--neutral-stroke-divider);
    background: var(--neutral-fill-secondary-rest);
}

/* Desktop/Mobile View Toggle */
.desktop-view[b-1k84g3tdg5] {
    display: block;
}

.mobile-view[b-1k84g3tdg5] {
    display: none;
}

/* Mobile Card Layout - using ::deep for FluentCard child component */
[b-1k84g3tdg5] .user-card {
    margin-bottom: 16px;
    padding: 16px;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-divider);
    background: var(--neutral-fill-rest);
}

.user-card-header[b-1k84g3tdg5] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.user-avatar[b-1k84g3tdg5] {
    flex-shrink: 0;
    color: var(--accent-fill-rest);
}

.user-card-info[b-1k84g3tdg5] {
    flex: 1;
    min-width: 0;
}

.user-email[b-1k84g3tdg5] {
    color: var(--neutral-foreground-hint);
    word-break: break-word;
}

.user-card-details[b-1k84g3tdg5] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.detail-row[b-1k84g3tdg5] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.badges-container[b-1k84g3tdg5] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.user-card-actions[b-1k84g3tdg5] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.user-card-actions > *[b-1k84g3tdg5] {
    min-width: 0;
}

.user-card-actions .manage-button[b-1k84g3tdg5] {
    flex: 1;
}

/* Responsive Design */
@media (max-width: 768px) {
    .admin-page[b-1k84g3tdg5] {
        padding: 16px;
    }
    
    .admin-header[b-1k84g3tdg5] {
        padding: 20px;
        margin-bottom: 24px;
    }
    
    .users-container[b-1k84g3tdg5] {
        padding: 16px;
    }

    .desktop-view[b-1k84g3tdg5] {
        display: none;
    }

    .mobile-view[b-1k84g3tdg5] {
        display: block;
    }
}

/* Tablet intermediate view */
@media (min-width: 769px) and (max-width: 1024px) {
    .users-container[b-1k84g3tdg5] {
        padding: 16px;
        overflow-x: auto;
    }
}
/* /Components/Bar/Bar.razor.rz.scp.css */
.bar-container[b-gl4i0jhlbc] {
    padding: 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.error-message[b-gl4i0jhlbc] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background-color: var(--error-container);
    color: var(--on-error-container);
    border-radius: 8px;
    border-left: 4px solid var(--error);
}

.error-message fluent-icon[b-gl4i0jhlbc] {
    color: var(--error);
}

/* Tablet-friendly styles */
@media (max-width: 1024px) {
    .bar-container[b-gl4i0jhlbc] {
        padding: 16px;
    }
}

@media (max-width: 768px) {
    .bar-container[b-gl4i0jhlbc] {
        padding: 12px;
    }
}
/* /Components/Bar/BarOrder.razor.rz.scp.css */
.drinks-grid[b-qqwwxfbyiq] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 16px;
    width: 100%;
}

.drink-card[b-qqwwxfbyiq] {
    cursor: pointer;
    transition: all 0.2s ease;
    border: 2px solid transparent;
    padding: 16px;
}

.drink-card:hover[b-qqwwxfbyiq] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.drink-card.selected[b-qqwwxfbyiq] {
    border-color: var(--accent-fill-rest);
    background-color: var(--accent-fill-hover);
}

.drink-image[b-qqwwxfbyiq] {
    width: 100%;
    height: 150px;
    object-fit: cover;
    border-radius: 8px;
}

.drink-image-placeholder[b-qqwwxfbyiq] {
    width: 100%;
    height: 150px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: var(--neutral-fill-secondary-rest);
    border-radius: 8px;
    color: var(--neutral-foreground-hint);
}

.drink-description[b-qqwwxfbyiq] {
    color: var(--neutral-foreground-hint);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.4;
    max-height: 2.8em;
}

/* Step 1 styling */
.order-info[b-qqwwxfbyiq] {
    max-width: 720px;
    margin: 0 auto;
    padding: 24px;
    background: linear-gradient(135deg, rgba(0,0,0,0.02), rgba(0,0,0,0.06));
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(0,0,0,0.08);
}

.order-inputs[b-qqwwxfbyiq] {
    display: grid;
    grid-template-columns: 1fr;
    gap: 16px;
}

.order-name[b-qqwwxfbyiq], .order-notes[b-qqwwxfbyiq] {
    width: 100%;
}

/* Tablet optimizations */
@media (max-width: 1024px) {
    .drinks-grid[b-qqwwxfbyiq] {
        grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
        gap: 12px;
    }
    
    .drink-card[b-qqwwxfbyiq] {
        padding: 12px;
    }
    
    .drink-image[b-qqwwxfbyiq],
    .drink-image-placeholder[b-qqwwxfbyiq] {
        height: 120px;
    }
}

@media (max-width: 768px) {
    .drinks-grid[b-qqwwxfbyiq] {
        grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
        gap: 8px;
    }
    
    .drink-image[b-qqwwxfbyiq],
    .drink-image-placeholder[b-qqwwxfbyiq] {
        height: 100px;
    }
}
/* /Components/Bar/BarView.razor.rz.scp.css */
.orders-grid[b-9hysyk4763] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
    gap: 20px;
    margin-top: 16px;
}

.order-card[b-9hysyk4763] {
    border-left: 4px solid var(--neutral-stroke-rest);
    transition: all 0.2s ease;
}

.order-card.status-requested[b-9hysyk4763] {
    border-left-color: var(--warning);
}

.order-card.status-inprogress[b-9hysyk4763] {
    border-left-color: var(--accent-fill-rest);
}

.order-card.status-ready[b-9hysyk4763] {
    border-left-color: var(--success);
}

.empty-state[b-9hysyk4763] {
    padding: 40px;
    text-align: center;
    background-color: var(--neutral-fill-secondary-rest);
}

.special-instructions[b-9hysyk4763] {
    background-color: var(--info-container);
    border: 1px solid var(--info);
    padding: 12px;
}

.drink-item[b-9hysyk4763] {
    background-color: var(--neutral-fill-secondary-rest);
    padding: 12px;
    border: none;
}

.customization-notes[b-9hysyk4763] {
    background-color: var(--warning-container);
    border: 1px solid var(--warning);
    padding: 8px;
}

/* Tablet optimizations */
@media (max-width: 1024px) {
    .orders-grid[b-9hysyk4763] {
        grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
        gap: 16px;
    }
}

@media (max-width: 768px) {
    .orders-grid[b-9hysyk4763] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
/* /Components/Dinner/DinnerApp.razor.rz.scp.css */
.dinner-container[b-bhztmradzy] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    background-color: var(--color-primary-light);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

/* Error Message Styling */
.error-message[b-bhztmradzy] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 20px;
    background-color: var(--color-danger-light);
    border: 1px solid var(--color-danger);
    border-radius: 8px;
    color: var(--color-danger-dark);
    font-weight: 500;
}

.error-message span[b-bhztmradzy] {
    flex: 1;
}
/* /Components/Dinner/DinnerPlan.razor.rz.scp.css */
.dinner-plan-container[b-k4k6rr196w] {
    padding: 24px;
}

.plan-header[b-k4k6rr196w] {
    margin-bottom: 32px;
    text-align: center;
}

.plan-header h3[b-k4k6rr196w] {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
}

.plan-header p[b-k4k6rr196w] {
    margin: 0;
    color: var(--color-secondary);
    font-size: 1rem;
}

.plan-content[b-k4k6rr196w] {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: 32px;
    align-items: start;
}

/* Create Meal Section */
.create-meal-section[b-k4k6rr196w] {
    background: var(--color-neutral);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.create-meal-section h4[b-k4k6rr196w] {
    margin: 0 0 20px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

.meal-form-grid[b-k4k6rr196w] {
    display: grid;
    gap: 20px;
}

.recipe-search-section[b-k4k6rr196w] {
    display: grid;
    gap: 12px;
}

.form-label[b-k4k6rr196w] {
    font-weight: 600;
    color: var(--color-primary);
    margin-bottom: 8px;
    display: block;
}

.form-actions[b-k4k6rr196w] {
    margin-top: 12px;
}

/* Recipe Actions Section */
.recipe-actions-section[b-k4k6rr196w] {
    background: var(--fill-color);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 24px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    position: sticky;
    top: 24px;
}

.recipe-actions-section h4[b-k4k6rr196w] {
    margin: 0 0 20px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

.action-buttons[b-k4k6rr196w] {
    display: grid;
    gap: 12px;
}

.action-buttons fluent-button[b-k4k6rr196w] {
    width: 100%;
    justify-content: flex-start;
}

/* Responsive Design */
@media (max-width: 768px) {
    .plan-content[b-k4k6rr196w] {
        grid-template-columns: 1fr;
        gap: 24px;
    }
    
    .recipe-actions-section[b-k4k6rr196w] {
        position: static;
    }
    
    .action-buttons[b-k4k6rr196w] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
/* =================================
   MAIN LAYOUT RESPONSIVE STYLES
   ================================= */

/* Main app layout container */
.app-layout[b-dbb8iv1s1k] {
    display: flex;
    height: 100vh;
    width: 100%;
}

/* Desktop sidebar */
.desktop-sidebar[b-dbb8iv1s1k] {
    display: block;
    width: 86px;
    height: 100vh;
    flex-shrink: 0;
    background-color: var(--neutral-layer-4);
}

/* Main content area */
.main-content-area[b-dbb8iv1s1k] {
    flex: 1;
    overflow-y: auto;
    overflow-x: hidden;
    height: 100vh;
    max-width: 100%;
}

/* Mobile bottom nav - hidden on desktop */
.mobile-bottom-nav[b-dbb8iv1s1k] {
    display: none;
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    .app-layout[b-dbb8iv1s1k] {
        display: flex;
        flex-direction: column;
        max-width: 100vw;
        overflow-x: hidden;
        height: 100vh;
        background: var(--color-primary-light);
    }
    
    .desktop-sidebar[b-dbb8iv1s1k] {
        display: none;
    }
    
    .main-content-area[b-dbb8iv1s1k] {
        flex: 1;
        min-height: 0;
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-bottom-nav[b-dbb8iv1s1k] {
        display: block;
        flex-shrink: 0;
        background: var(--color-neutral);
    }
}
/* /Components/Layout/NavMenu.razor.rz.scp.css */
.app-bar-container[b-odbo5644ds] {
	background-color: var(--neutral-layer-4);
	padding: 10px;
	height:100%;
}

[b-odbo5644ds] .app-bar {
	background-color: var(--color-light-blue);
}

/* =================================
   MOBILE BOTTOM NAVIGATION BAR
   ================================= */

.mobile-nav-bar[b-odbo5644ds] {
    background: var(--color-neutral);
    border-top: 1px solid var(--color-neutral-light);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.1);
    z-index: 1000;
    padding: 0;
    padding-bottom: env(safe-area-inset-bottom, 0);
}

.mobile-nav-items[b-odbo5644ds] {
    display: flex;
    justify-content: space-around;
    align-items: stretch;
}

.mobile-nav-item[b-odbo5644ds] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 8px 12px;
    min-width: 64px;
    flex: 1;
    text-decoration: none;
    color: var(--color-neutral-medium);
    font-size: 0.7rem;
    font-weight: 500;
    gap: 4px;
    transition: all 0.2s ease;
    border-top: 2px solid transparent;
    cursor: pointer;
    background: transparent;
    border-left: none;
    border-right: none;
    border-bottom: none;
}

.mobile-nav-item:hover[b-odbo5644ds] {
    background-color: var(--color-secondary-light);
    color: var(--color-primary);
}

.mobile-nav-item.active[b-odbo5644ds] {
    color: var(--color-primary);
    border-top-color: var(--color-primary);
    background-color: var(--color-primary-light);
}

.mobile-nav-item[b-odbo5644ds]  svg {
    width: 24px;
    height: 24px;
}

.mobile-nav-item span[b-odbo5644ds] {
    white-space: nowrap;
}

/* =================================
   MORE MENU DROPDOWN
   ================================= */

.mobile-more-menu[b-odbo5644ds] {
    position: relative;
}

.mobile-more-dropdown[b-odbo5644ds] {
    position: fixed;
    bottom: 70px;
    right: 8px;
    left: 8px;
    z-index: 1001;
}

.more-menu-overlay[b-odbo5644ds] {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: -1;
}

.more-menu-content[b-odbo5644ds] {
    background: var(--color-neutral);
    border-radius: 12px;
    box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
    min-width: 180px;
    max-width: 300px;
    margin-left: auto;
    overflow: hidden;
    border: 1px solid var(--color-neutral-light);
}

.more-menu-item[b-odbo5644ds] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 16px;
    text-decoration: none;
    color: var(--color-neutral-dark);
    font-size: 0.9rem;
    font-weight: 500;
    transition: background-color 0.2s ease;
    border-bottom: 1px solid var(--color-neutral-light);
}

.more-menu-item:last-child[b-odbo5644ds] {
    border-bottom: none;
}

.more-menu-item:hover[b-odbo5644ds] {
    background-color: var(--color-secondary-light);
}

.more-menu-item.active[b-odbo5644ds] {
    background-color: var(--color-primary-light);
    color: var(--color-primary);
}

.more-menu-item[b-odbo5644ds]  svg {
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

/* =================================
   LOGOUT FORM IN MORE MENU
   ================================= */

.more-menu-logout-form[b-odbo5644ds] {
    margin: 0;
    padding: 0;
}

.more-menu-item.logout-button[b-odbo5644ds] {
    width: 100%;
    text-align: left;
    border: none;
    cursor: pointer;
    font-family: inherit;
    background: transparent;
}

.more-menu-item.logout-button:hover[b-odbo5644ds] {
    background-color: var(--color-secondary-light);
}
/* /Components/Meal/Meal.razor.rz.scp.css */
/* Container and Layout */
.meal-planner-container[b-97r23khvmu] {
    max-width: 1200px;
    margin: 0 auto;
    padding: 16px;
    background-color: var(--color-primary-light);
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}

.meal-planner-header[b-97r23khvmu] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-primary);
    flex-wrap: wrap;
    gap: 16px;
    background-color: var(--color-neutral);
    border-radius: 8px;
    padding: 16px;
}

.header-title[b-97r23khvmu] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title h2[b-97r23khvmu] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-neutral-dark);
}

.header-icon[b-97r23khvmu] {
    color: var(--color-primary);
}

.header-controls[b-97r23khvmu] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.week-display[b-97r23khvmu] {
    padding: 8px 16px;
    background-color: var(--color-secondary-light);
    border-radius: 6px;
    font-weight: 500;
    min-width: 160px;
    text-align: center;
    border: 1px solid var(--color-secondary);
}

.week-range[b-97r23khvmu] {
    color: var(--color-neutral-dark);
    font-size: 0.875rem;
    font-weight: 600;
}

.header-actions[b-97r23khvmu] {
    display: flex;
    align-items: center;
    gap: 16px;
}

/* Grid Layout */
.week-grid-container[b-97r23khvmu] {
    display: flex;
    justify-content: center;
}

.week-grid[b-97r23khvmu] {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
     grid-auto-rows: minmax(min-content, auto);
     gap: 20px;
     width: 100%;
}

/* Day Cards - Lighter backgrounds */
.day-card[b-97r23khvmu] {
     background-color: var(--color-neutral);
     border-radius: 12px;
     padding: 18px;
     transition: all 0.3s ease;
     position: relative;
     overflow: hidden; /* Changed from visible to hidden for text truncation */
     box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
     min-width: 0; /* Allow card to shrink in grid */
}

.day-card:hover[b-97r23khvmu] {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

.day-card.past-day[b-97r23khvmu] {
    background-color: var(--color-neutral);
    border-color: var(--color-secondary);
    opacity: 0.95;
}

.day-card.current-day[b-97r23khvmu] {
    background-color: var(--color-secondary-light);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.day-card.future-day[b-97r23khvmu] {
    background-color: var(--color-neutral);
    border-color: var(--color-primary);
}

.day-card.current-day[b-97r23khvmu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1%;
    right: 0;
    height: 2%;
    width: 98%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 12px 12px 0 0;
}

.day-header[b-97r23khvmu] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 14px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--color-secondary);
}

.day-info[b-97r23khvmu] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day-name[b-97r23khvmu] {
    font-weight: 700;
    font-size: 0.9rem;
    color: var(--color-neutral-dark);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.day-date[b-97r23khvmu] {
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-weight: 500;
}

.day-actions[b-97r23khvmu] {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* Meal Cards */
.day-meals[b-97r23khvmu] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-width: 0; /* Allow flex children to shrink */
}

.meal-card[b-97r23khvmu] {
    background-color: var(--color-neutral);
    border: 1px solid var(--color-secondary);
    border-radius: 8px;
    padding: 14px;
    position: relative;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    cursor: pointer;
    overflow: hidden; /* Required for text truncation in children */
    min-width: 0; /* Allow card to shrink */
}

.meal-card:hover[b-97r23khvmu] {
    border-color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    transform: translateY(-1px);
}

.meal-card.editing[b-97r23khvmu] {
    border-color: var(--color-primary);
    background-color: var(--color-primary-light);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.meal-card.swapping[b-97r23khvmu] {
    border-color: var(--color-accent);
    background-color: var(--color-accent-light);
    box-shadow: 0 0 0 2px var(--color-accent);
    animation: pulse-b-97r23khvmu 2s infinite;
}

@keyframes pulse-b-97r23khvmu {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

.meal-content[b-97r23khvmu] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0; /* Allow content to shrink for text truncation */
    overflow: hidden; /* Required for text truncation */
}

.meal-title[b-97r23khvmu] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-neutral-dark);
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.meal-description[b-97r23khvmu] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-secondary);
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.meal-recipe[b-97r23khvmu] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 6px;
    padding: 6px 10px;
    background-color: var(--color-secondary-light);
    border-radius: 6px;
    border: 1px solid var(--color-secondary);
    min-width: 0; /* Allow flex item to shrink below content size */
    overflow: hidden;
}

.recipe-icon[b-97r23khvmu] {
    color: var(--color-accent);
    flex-shrink: 0;
}

.recipe-name[b-97r23khvmu] {
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-neutral-dark);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0; /* Allow text to truncate */
    flex: 1;
}

.recipe-link-btn[b-97r23khvmu] {
    flex-shrink: 0;
    margin-left: auto;
}

.ingredients-btn[b-97r23khvmu] {
    align-self: flex-start;
    margin-top: 6px;
}

.recipe-actions[b-97r23khvmu] {
    display: flex;
    gap: 4px;
    flex-wrap: wrap;
    margin-top: 6px;
}

.no-recipe[b-97r23khvmu] {
    margin: 0;
    font-size: 0.8rem;
    color: var(--color-secondary);
    font-style: italic;
    padding: 6px 10px;
    background-color: var(--color-tertiary-light);
    border-radius: 4px;
}

.meal-header[b-97r23khvmu] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 10px;
}

.meal-title-section[b-97r23khvmu] {
    flex: 1;
}

/* Hide meal actions since we're consolidating to day actions */
.meal-actions[b-97r23khvmu] {
    display: none;
}

/* Empty State */
.empty-meal[b-97r23khvmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 28px;
    text-align: center;
    color: var(--color-secondary);
    transition: all 0.3s ease;
    border: 2px dashed var(--color-secondary);
    border-radius: 8px;
    background-color: var(--color-tertiary-light);
}

.empty-meal.swappable[b-97r23khvmu] {
    border-color: var(--color-accent);
    background-color: var(--color-accent-light);
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.empty-meal.swappable:hover[b-97r23khvmu] {
    border-color: var(--color-accent);
    background-color: var(--color-warm-light);
    transform: translateY(-3px);
}

.empty-icon[b-97r23khvmu] {
    margin-bottom: 10px;
    opacity: 0.6;
    color: var(--color-secondary);
}

.empty-text[b-97r23khvmu] {
    font-size: 0.9rem;
    margin-bottom: 10px;
    font-weight: 500;
}

.add-meal-btn[b-97r23khvmu] {
    margin-top: 6px;
}

.swap-meal-btn[b-97r23khvmu] {
    margin-top: 6px;
    background-color: var(--color-accent);
    color: var(--color-neutral);
    border: none;
}

/* Dancing Frog Styles - Now as a grid item */
.dancing-frog-card[b-97r23khvmu] {
    background: linear-gradient(135deg, var(--color-warm-light), var(--color-accent-light));
    border: 2px solid var(--color-accent);
    border-radius: 12px;
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    animation: frogBounce-b-97r23khvmu 3s ease-in-out infinite;
    position: relative;
    overflow: hidden;
    transition: all 0.3s ease;
}

.dancing-frog-card:hover[b-97r23khvmu] {
    transform: translateY(-4px) scale(1.02);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
    border-color: var(--color-warm);
}

.dancing-frog-card[b-97r23khvmu]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-accent), var(--color-warm));
}

.frog-content[b-97r23khvmu] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
    text-align: center;
}

.dancing-frog-gif[b-97r23khvmu] {
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 3px solid var(--color-accent);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease;
}

.dancing-frog-gif:hover[b-97r23khvmu] {
    transform: scale(1.15) rotate(10deg);
    border-color: var(--color-warm);
}

.frog-message[b-97r23khvmu] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-dark);
    text-align: center;
    letter-spacing: 0.5px;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
}

@keyframes frogBounce-b-97r23khvmu {
    0%, 100% {
        transform: translateY(0px);
    }
    50% {
        transform: translateY(-6px);
    }
}

/* Remove old dancing-frog-container styles since we're not using them */

/* Form Styling */
.form-actions[b-97r23khvmu] {
    display: flex;
    gap: 10px;
    margin-top: 14px;
    flex-wrap: wrap;
}

/* Responsive Design */
@media (max-width: 768px) {
    .meal-planner-container[b-97r23khvmu] {
        padding: 14px;
    }
    
    .meal-planner-header[b-97r23khvmu] {
        flex-direction: column;
        align-items: stretch;
        gap: 14px;
    }
    
    .header-controls[b-97r23khvmu] {
        justify-content: center;
    }
    
    .week-grid[b-97r23khvmu] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    
    .day-card[b-97r23khvmu] {
        min-height: auto;
        height: auto;
    }
    
    .meal-header[b-97r23khvmu] {
        flex-direction: column;
        align-items: stretch;
        gap: 8px;
    }
    
    .meal-title-section[b-97r23khvmu] {
        text-align: center;
    }

    .meal-card[b-97r23khvmu] {
        height: auto;
        min-height: auto;
    }

    .meal-card.editing[b-97r23khvmu] {
        height: auto;
        min-height: auto;
        overflow: visible;
        padding: 16px;
    }

    .dancing-frog-card[b-97r23khvmu] {
        min-height: auto;
        padding: 16px;
    }

    .dancing-frog-gif[b-97r23khvmu] {
        width: 70px;
        height: 70px;
    }

    .frog-message[b-97r23khvmu] {
        font-size: 0.9rem;
    }
}

@media (max-width: 480px) {
    .meal-planner-header[b-97r23khvmu] {
        padding: 12px;
        gap: 10px;
    }

    .header-title[b-97r23khvmu] {
        width: 100%;
        justify-content: center;
    }

    .header-title h2[b-97r23khvmu] {
        font-size: 1.25rem;
    }

    .header-controls[b-97r23khvmu] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        order: 2;
    }

    .header-controls fluent-button[b-97r23khvmu],
    .header-controls button[b-97r23khvmu] {
        width: auto;
        min-width: 100px;
    }

    .week-display[b-97r23khvmu] {
        min-width: auto;
        width: 100%;
        order: 1;
        padding: 10px 16px;
    }

    /* Stack nav buttons horizontally but below the date */
    .header-controls[b-97r23khvmu] {
        display: flex;
        flex-direction: row;
        justify-content: center;
        flex-wrap: wrap;
    }

    .header-actions[b-97r23khvmu] {
        flex-direction: column;
        gap: 8px;
        width: 100%;
        align-items: center;
    }
    
    .form-actions[b-97r23khvmu] {
        flex-direction: column;
        gap: 8px;
    }

    .form-actions fluent-button[b-97r23khvmu],
    .form-actions button[b-97r23khvmu] {
        width: 100%;
    }
    
    .day-header[b-97r23khvmu] {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    
    .day-actions[b-97r23khvmu] {
        align-self: flex-end;
    }

    .meal-card.editing[b-97r23khvmu] {
        padding: 14px;
    }

    .dancing-frog-gif[b-97r23khvmu] {
        width: 50px;
        height: 50px;
    }

    .frog-message[b-97r23khvmu] {
        font-size: 0.8rem;
    }
}

/* Animation for smooth transitions */
@keyframes slideIn-b-97r23khvmu {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.meal-card[b-97r23khvmu] {
    animation: slideIn-b-97r23khvmu 0.3s ease;
}

/* Focus styles for accessibility */
.day-card:focus-within[b-97r23khvmu] {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
}

.meal-card:focus-within[b-97r23khvmu] {
    outline: 2px solid var(--color-primary);
    outline-offset: 1px;
}

/* Dark theme adjustments */
@media (prefers-color-scheme: dark) {
    .day-card:hover[b-97r23khvmu] {
        box-shadow: 0 6px 20px rgba(255, 255, 255, 0.1);
    }
    
    .meal-card:hover[b-97r23khvmu] {
        box-shadow: 0 4px 12px rgba(255, 255, 255, 0.1);
    }
}

/* Meal Details Dialog Styles */
.meal-details-content[b-97r23khvmu] {
    padding: 16px 0;
}

.detail-section[b-97r23khvmu] {
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-neutral-light);
}

.detail-section:last-child[b-97r23khvmu] {
    border-bottom: none;
    margin-bottom: 0;
    padding-bottom: 0;
}

.detail-section h4[b-97r23khvmu] {
    margin: 0 0 8px 0;
    color: var(--color-primary);
    font-size: 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-section p[b-97r23khvmu] {
    margin: 0;
    color: var(--color-neutral-dark);
    line-height: 1.6;
}

.recipe-details[b-97r23khvmu] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px;
    background-color: var(--color-secondary-light);
    border-radius: 6px;
    border: 1px solid var(--color-secondary);
    min-width: 0;
    overflow: hidden;
}

.recipe-details .recipe-name[b-97r23khvmu] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.recipe-dialog-actions[b-97r23khvmu] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

.tags-container[b-97r23khvmu] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.tag-badge[b-97r23khvmu] {
    padding: 4px 12px;
    background-color: var(--color-primary-light);
    color: var(--color-primary);
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
}
/* /Components/Meal/MealInspiration.razor.rz.scp.css */
.inspiration-container[b-ox8o4undqt] {
    padding: 24px;
}

.inspiration-header[b-ox8o4undqt] {
    margin-bottom: 32px;
    text-align: center;
}

.inspiration-header h3[b-ox8o4undqt] {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-primary);
}

.inspiration-header p[b-ox8o4undqt] {
    margin: 0;
    color: var(--color-secondary);
    font-size: 1rem;
}

.inspiration-controls[b-ox8o4undqt] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 32px;
    gap: 16px;
    flex-wrap: wrap;
}

.search-section[b-ox8o4undqt] {
    display: flex;
    flex: 1;
    max-width: 400px;
}

.control-buttons[b-ox8o4undqt] {
    display: flex;
    gap: 12px;
}

/* Loading State */
.loading-state[b-ox8o4undqt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    text-align: center;
    color: var(--color-secondary);
}

.loading-state p[b-ox8o4undqt] {
    margin-top: 16px;
    font-size: 1.1rem;
}

/* Empty State */
.empty-state[b-ox8o4undqt] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px;
    text-align: center;
    color: var(--color-secondary);
}

.empty-state h4[b-ox8o4undqt] {
    margin: 16px 0 8px 0;
    color: var(--color-primary);
}

.empty-state p[b-ox8o4undqt] {
    margin-bottom: 24px;
}

/* Masonry Layout */
.masonry-container[b-ox8o4undqt] {
    column-count: 4;
    column-gap: 20px;
    column-fill: balance;
}

.masonry-item[b-ox8o4undqt] {
    display: inline-block;
    width: 100%;
    margin-bottom: 20px;
    break-inside: avoid;
}

/* Recipe Cards */
.recipe-card[b-ox8o4undqt] {
    background: var(--color-neutral);
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    position: relative;
}

.recipe-card:hover[b-ox8o4undqt] {
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.12);
}

.recipe-image-container[b-ox8o4undqt] {
    position: relative;
    width: 100%;
    overflow: hidden;
}

.recipe-image-container img[b-ox8o4undqt] {
    width: 100%;
    height: auto;
    display: block;
    transition: transform 0.3s ease;
}

.recipe-card:hover .recipe-image-container img[b-ox8o4undqt] {
    transform: scale(1.05);
}

.placeholder-image[b-ox8o4undqt] {
    width: 100%;
    height: 200px;
    background: var(--color-primary-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-secondary);
}

.recipe-overlay[b-ox8o4undqt] {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.3s ease;
}

.recipe-card:hover .recipe-overlay[b-ox8o4undqt] {
    opacity: 1;
}

.add-button[b-ox8o4undqt] {
    transform: translateY(10px);
    transition: transform 0.3s ease;
}

.recipe-card:hover .add-button[b-ox8o4undqt] {
    transform: translateY(0);
}

.recipe-content[b-ox8o4undqt] {
    padding: 16px;
}

.recipe-title[b-ox8o4undqt] {
    margin: 0 0 12px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
    line-height: 1.3;
}

.ingredients-section[b-ox8o4undqt] {
    margin-bottom: 16px;
}

.ingredients-section h5[b-ox8o4undqt] {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ingredients-tags[b-ox8o4undqt] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}

.ingredient-tag[b-ox8o4undqt] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    font-size: 0.75rem;
    padding: 4px 8px;
    border-radius: 12px;
    font-weight: 500;
}

.ingredient-tag.more[b-ox8o4undqt] {
    background: var(--color-accent-light);
    color: var(--color-accent);
}

.recipe-actions[b-ox8o4undqt] {
    padding-top: 12px;
    border-top: 1px solid var(--color-primary-light);
}

/* Add Recipe Section */
.add-recipe-section[b-ox8o4undqt] {
    margin-top: 32px;
    background: var(--color-primary-light);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.add-recipe-section:not(.expanded)[b-ox8o4undqt] {
    border: 2px dashed var(--color-primary);
}

.toggle-button[b-ox8o4undqt] {
    width: 100%;
    padding: 16px;
    justify-content: center;
    background: transparent;
    border: none;
}

.custom-recipe-form[b-ox8o4undqt] {
    padding: 0 24px 24px 24px;
    border-top: 1px solid var(--color-primary);
}

.custom-recipe-form h4[b-ox8o4undqt] {
    margin: 16px 0 20px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-primary);
}

.form-grid[b-ox8o4undqt] {
    display: grid;
    gap: 16px;
}

.file-upload-section[b-ox8o4undqt] {
    display: grid;
    gap: 8px;
}

.file-upload-section label[b-ox8o4undqt] {
    font-weight: 600;
    color: var(--color-primary);
}

/* Responsive Design */
@media (max-width: 1200px) {
    .masonry-container[b-ox8o4undqt] {
        column-count: 3;
    }
}

@media (max-width: 768px) {
    .masonry-container[b-ox8o4undqt] {
        column-count: 2;
        column-gap: 16px;
    }
    
    .inspiration-controls[b-ox8o4undqt] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .search-section[b-ox8o4undqt] {
        max-width: none;
    }
    
    .control-buttons[b-ox8o4undqt] {
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .masonry-container[b-ox8o4undqt] {
        column-count: 1;
    }
    
    .inspiration-container[b-ox8o4undqt] {
        padding: 16px;
    }
}
/* /Components/Nanny/NannyApp.razor.rz.scp.css */
.nanny-container[b-vicbxortgm] {
	max-width: 1200px;
	margin: 0 auto;
	padding: 16px;
	background-color: var(--color-primary-light);
	border-radius: 12px;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
}
/* /Components/Pages/Index.razor.rz.scp.css */
/* Root and Layout */
.dashboard-root[b-hkef8h5lsh] {
    padding: 0.5rem;
    background: var(--color-primary-light);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    min-height: 100vh;
}

/* Loading State */
.loading-container[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    padding: 4rem;
}

/* Hero Section */
.dashboard-hero[b-hkef8h5lsh] {
    background: linear-gradient(135deg, var(--color-accent) 25%, var(--color-primary) 100%);
    border-radius: 16px;
    padding: 1.5rem;
    margin-bottom: 1rem;
    color: white;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
}

.hero-content[b-hkef8h5lsh] {
    margin-bottom: 1rem;
}

.hero-greeting[b-hkef8h5lsh] {
    font-size: 1.75rem;
    font-weight: 700;
    color: white;
    margin: 0 0 0.25rem 0;
    line-height: 1.2;
}

.hero-date[b-hkef8h5lsh] {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
    margin: 0;
}

.hero-stats[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.stat-badge[b-hkef8h5lsh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 0.5rem 0;
}

.stat-badge fluent-icon[b-hkef8h5lsh] {
    font-size: 1.5rem;
    color: white;
    flex-shrink: 0;
    opacity: 0.9;
}

.stat-content[b-hkef8h5lsh] {
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.stat-value[b-hkef8h5lsh] {
    font-size: 1.5rem;
    font-weight: 700;
    color: white;
    line-height: 1;
}

.stat-label[b-hkef8h5lsh] {
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.95);
    font-weight: 400;
}

/* Empty Dashboard State */
.empty-dashboard-card[b-hkef8h5lsh] {
    border-radius: 16px;
    padding: 3rem;
    text-align: center;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    margin: 1rem 0;
}

.empty-dashboard-content[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

.empty-icon[b-hkef8h5lsh] {
    font-size: 4rem;
    color: var(--neutral-fill-stealth-rest);
}

.empty-message[b-hkef8h5lsh] {
    color: var(--neutral-foreground-hint);
    max-width: 400px;
}

/* Dashboard Grid */
.dashboard-grid[b-hkef8h5lsh] {
    flex: 1 1 0;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    align-items: stretch;
    min-height: 0;
    padding-bottom: 1rem;
}

@media (max-width: 1200px) {
    .dashboard-grid[b-hkef8h5lsh] {
        grid-template-columns: repeat(2, 1fr);
        gap: 1rem;
    }
}

@media (max-width: 768px) {
    .dashboard-root[b-hkef8h5lsh] {
        min-height: 100%;
        padding: 0.5rem;
    }
    
    .dashboard-grid[b-hkef8h5lsh] {
        grid-template-columns: 1fr;
        gap: 0.7rem;
        padding-bottom: 1rem;
    }
    
    .home-card[b-hkef8h5lsh] {
        padding: 0.7rem 0.5rem;
    }
    
    /* Hero responsive adjustments */
    .dashboard-hero[b-hkef8h5lsh] {
        padding: 1.25rem;
        border-radius: 12px;
    }
    
    .hero-greeting[b-hkef8h5lsh] {
        font-size: 1.5rem;
    }
    
    .hero-date[b-hkef8h5lsh] {
        font-size: 0.95rem;
    }
    
    .stat-badge[b-hkef8h5lsh] {
        padding: 0.4rem 0;
    }
    
    .stat-value[b-hkef8h5lsh] {
        font-size: 1.35rem;
    }
    
    .stat-label[b-hkef8h5lsh] {
        font-size: 0.85rem;
    }
}

/* Widget Styles */
.dashboard-widget[b-hkef8h5lsh] {
    border-radius: 16px;
    padding: 1.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    background: white;
    border-left: 4px solid transparent;
    min-height: 200px;
}

.dashboard-widget:hover[b-hkef8h5lsh] {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.widget-header[b-hkef8h5lsh] {
    display: flex;
 justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.widget-title-row[b-hkef8h5lsh] {
    display: flex;
    align-items: center;
    gap: 0.75rem;
}

.widget-icon[b-hkef8h5lsh] {
    font-size: 1.5rem;
    flex-shrink: 0;
}

.widget-title[b-hkef8h5lsh] {
    font-weight: 600;
    margin: 0;
    color: var(--neutral-foreground-rest);
    font-size: 1.1rem;
}

.widget-content[b-hkef8h5lsh] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.widget-loading[b-hkef8h5lsh] {
    display: flex;
    justify-content: center;
    padding: 2rem;
}

.widget-empty[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.5rem;
    padding: 2rem 1rem;
    color: var(--neutral-foreground-hint);
    text-align: center;
}

.widget-empty fluent-icon[b-hkef8h5lsh] {
    font-size: 2rem;
    opacity: 0.5;
}

/* Weather Widget */
.weather-widget[b-hkef8h5lsh] {
    border-left-color: #FDB813;
}

.weather-icon[b-hkef8h5lsh] {
    color: #FDB813;
}

/* Meal Widget */
.meal-widget[b-hkef8h5lsh] {
    border-left-color: #FF6B6B;
}

.meal-icon[b-hkef8h5lsh] {
    color: #FF6B6B;
}

.meal-item[b-hkef8h5lsh] {
 display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    background: var(--neutral-layer-2);
    border-radius: 8px;
}

.meal-badge[b-hkef8h5lsh] {
    align-self: flex-start;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.lunch-badge[b-hkef8h5lsh] {
    background: #FFE5B4;
    color: #D97706;
}

.dinner-badge[b-hkef8h5lsh] {
    background: #FECACA;
    color: #DC2626;
}

.meal-details[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.meal-name[b-hkef8h5lsh] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.meal-description[b-hkef8h5lsh] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

/* Workout Widget */
.workout-widget[b-hkef8h5lsh] {
    border-left-color: #4ECDC4;
}

.workout-icon[b-hkef8h5lsh] {
    color: #4ECDC4;
}

.workout-summary[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.workout-type[b-hkef8h5lsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.workout-type-badge[b-hkef8h5lsh] {
    background: #CFFAFE;
 color: #0891B2;
    font-weight: 600;
}

.workout-duration[b-hkef8h5lsh] {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.workout-notes[b-hkef8h5lsh] {
    font-size: 0.95rem;
    color: var(--neutral-foreground-rest);
    padding: 0.75rem;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    margin: 0;
    line-height: 1.5;
}

.workout-exercises[b-hkef8h5lsh] {
    display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.exercises-label[b-hkef8h5lsh] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.exercise-list[b-hkef8h5lsh] {
    display: flex;
flex-direction: column;
    gap: 0.5rem;
}

.exercise-item[b-hkef8h5lsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem;
    background: var(--neutral-layer-2);
    border-radius: 6px;
    gap: 0.5rem;
    border-left: 3px solid transparent;
}

/* Exercise Purpose Color Coding */
.exercise-item.purpose-warmup[b-hkef8h5lsh] {
    border-left-color: var(--purpose-warmup);
}

.exercise-item.purpose-technique[b-hkef8h5lsh] {
    border-left-color: var(--purpose-technique);
}

.exercise-item.purpose-corelift[b-hkef8h5lsh] {
    border-left-color: var(--purpose-corelift);
}

.exercise-item.purpose-strength[b-hkef8h5lsh] {
    border-left-color: var(--purpose-strength);
}

.exercise-item.purpose-accessory[b-hkef8h5lsh] {
    border-left-color: var(--purpose-accessory);
}

.exercise-purpose[b-hkef8h5lsh] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    text-transform: uppercase;
    min-width: 16px;
    text-align: center;
}

.exercise-purpose.purpose-warmup[b-hkef8h5lsh] {
    background: var(--purpose-warmup-bg);
    color: var(--purpose-warmup-text);
}

.exercise-purpose.purpose-technique[b-hkef8h5lsh] {
    background: var(--purpose-technique-bg);
    color: var(--purpose-technique-text);
}

.exercise-purpose.purpose-corelift[b-hkef8h5lsh] {
    background: var(--purpose-corelift-bg);
    color: var(--purpose-corelift-text);
}

.exercise-purpose.purpose-strength[b-hkef8h5lsh] {
    background: var(--purpose-strength-bg);
    color: var(--purpose-strength-text);
}

.exercise-purpose.purpose-accessory[b-hkef8h5lsh] {
    background: var(--purpose-accessory-bg);
    color: var(--purpose-accessory-text);
}

.exercise-name[b-hkef8h5lsh] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
    flex: 1;
}

.exercise-sets[b-hkef8h5lsh] {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    white-space: nowrap;
}

.more-exercises[b-hkef8h5lsh] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
    font-style: italic;
 text-align: center;
    padding: 0.5rem;
}

/* Nanny Widget */
.nanny-widget[b-hkef8h5lsh] {
    border-left-color: #A78BFA;
}

.nanny-icon[b-hkef8h5lsh] {
    color: #A78BFA;
}

.timeoff-summary[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
  gap: 1rem;
}

.timeoff-stat[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    border-radius: 12px;
    color: white;
}

.stat-number[b-hkef8h5lsh] {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
}

.stat-text[b-hkef8h5lsh] {
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.9;
}

.timeoff-breakdown[b-hkef8h5lsh] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.timeoff-item[b-hkef8h5lsh] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 1rem;
  background: var(--neutral-layer-2);
    border-radius: 8px;
}

.timeoff-label[b-hkef8h5lsh] {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.timeoff-value[b-hkef8h5lsh] {
  font-size: 0.95rem;
 font-weight: 600;
    color: var(--neutral-foreground-hint);
}

/* Card Styles (Legacy - kept for compatibility) */
.home-card[b-hkef8h5lsh] {
    height: 100%;
    min-height: 0;
    border-radius: 18px;
 box-shadow: 0 4px 18px 0 rgba(60, 60, 120, 0.08);
    background: var(--color-white);
    padding: 1.2rem 1rem 1rem 1rem;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    transition: box-shadow 0.2s, background 0.2s;
    border-left: 6px solid var(--color-primary-dark);
}

.home-card:hover[b-hkef8h5lsh] {
    box-shadow: 0 12px 36px 0 rgba(60, 60, 120, 0.18);
    background: var(--color-secondary-light);
}

.card-header[b-hkef8h5lsh] {
    display: flex;
    align-items: center;
    gap: 0.7rem;
    margin-bottom: 0.7rem;
}

.card-title[b-hkef8h5lsh] {
 font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary-dark);
    letter-spacing: 0.01em;
}

.card-icon[b-hkef8h5lsh] {
    font-size: 2.2rem;
    opacity: 0.85;
}

/* Icon Colors */
.meal-icon[b-hkef8h5lsh] {
    color: var(--icon-meal);
}
.workout-icon[b-hkef8h5lsh] {
    color: var(--icon-workout);
}
.weather-icon[b-hkef8h5lsh] {
    color: var(--icon-weather);
}
.calendar-icon[b-hkef8h5lsh] {
    color: var(--icon-calendar);
}

/* Meal Card */
.meal-card[b-hkef8h5lsh] {
 background: var(--color-secondary-light);
    border-left-color: var(--icon-meal);
}
.meal-label[b-hkef8h5lsh] {
    font-size: 1.1rem;
font-weight: 600;
    color: var(--color-secondary-dark);
}
.meal-desc[b-hkef8h5lsh] {
    color: var(--color-secondary);
    font-size: 1rem;
    margin-top: 0.2rem;
}
.meal-type-label[b-hkef8h5lsh] {
    display: inline-block;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: 0.1rem;
    border-radius: 8px;
    padding: 0.1em 0.7em;
    margin-right: 0.5em;
    letter-spacing: 0.03em;
}
.lunch-label[b-hkef8h5lsh] {
    background: var(--color-secondary-light);
    color: var(--color-secondary-dark);
}
.dinner-label[b-hkef8h5lsh] {
  background: var(--color-warm-light);
    color: var(--color-warm-dark);
}
.meal-name[b-hkef8h5lsh] {
    display: block;
    font-size: 1.1rem;
    font-weight: 600;
  color: var(--color-neutral-dark);
    margin-bottom: 0.1rem;
}

/* Workout Card */
.workout-card[b-hkef8h5lsh] {
    background: var(--color-primary-light);
    border-left-color: var(--icon-workout);
}
.workout-label[b-hkef8h5lsh] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-accent);
}
.workout-notes[b-hkef8h5lsh] {
    color: var(--color-secondary);
    font-size: 1rem;
    margin-top: 0.2rem;
}
.workout-duration[b-hkef8h5lsh] {
    color: var(--color-secondary-dark);
    font-size: 0.98rem;
    margin-top: 0.2rem;
}

/* Workout Details */
.workout-details-list[b-hkef8h5lsh] {
    margin-top: 0.5rem;
}

.workout-detail-item[b-hkef8h5lsh] {
    background: #f8f9fa;
    border-radius: 8px;
  padding: 0.75rem 1rem;
    margin-bottom: 0.75rem;
    box-shadow: 0 1px 2px rgba(0,0,0,0.03);
}

.exercise-name[b-hkef8h5lsh] {
    font-weight: 600;
    font-size: 1.1rem;
    color: #2d3a4a;
    margin-bottom: 0.2rem;
}

.sets-reps-weight[b-hkef8h5lsh] {
    margin-bottom: 0.2rem;
    color: #4a5568;
    font-size: 0.98rem;
}

.sets-reps[b-hkef8h5lsh], .weight[b-hkef8h5lsh] {
    margin-right: 1.2rem;
}

.detail-notes[b-hkef8h5lsh] {
    color: #6b7280;
    font-size: 0.95rem;
    margin-top: 0.2rem;
    font-style: italic;
}

/* Weather Card */
.weather-card[b-hkef8h5lsh] {
    background: var(--color-secondary-light);
    border-left-color: var(--icon-weather);
}
.weather-main[b-hkef8h5lsh] {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    margin-bottom: 0.3rem;
}
.weather-img[b-hkef8h5lsh] {
    width: 48px;
    height: 48px;
}
.weather-temp[b-hkef8h5lsh] {
    font-size: 2.1rem;
    font-weight: 700;
    color: var(--color-secondary-dark);
}
.weather-desc[b-hkef8h5lsh] {
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--color-secondary-dark);
    margin-bottom: 0.1rem;
}
.weather-precip[b-hkef8h5lsh] {
    color: var(--color-tertiary);
    font-size: 0.98rem;
 margin-bottom: 0.2rem;
}
.weather-hourly[b-hkef8h5lsh] {
    display: flex;
    gap: 0.7rem;
    margin-top: 0.5rem;
    flex-wrap: wrap;
}
.weather-hour-item[b-hkef8h5lsh] {
    background: var(--color-secondary-light);
    border-radius: 8px;
    padding: 0.3rem 0.7rem;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 60px;
}
.weather-hour-icon[b-hkef8h5lsh] {
    width: 28px;
    height: 28px;
}
.hour[b-hkef8h5lsh] {
  font-size: 0.95rem;
    color: var(--color-secondary-dark);
 font-weight: 600;
}
.hour-temp[b-hkef8h5lsh] {
 font-size: 1rem;
    color: var(--color-tertiary);
}

/* Calendar Card */
.calendar-card[b-hkef8h5lsh] {
    background: var(--color-warm-light);
    border-left-color: var(--icon-calendar);
}

/* Card Content */
.card-content[b-hkef8h5lsh] {
  flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

/* Empty State */
.empty-state[b-hkef8h5lsh] {
    color: var(--color-empty-state);
    font-style: italic;
    font-size: 1rem;
    margin-top: 0.5rem;
}
/* /Components/Pages/Settings.razor.rz.scp.css */
/* Settings Page Layout */
.settings-page[b-90sp7e169b] {
    max-width: 900px;
    margin: 0 auto;
    padding: 24px;
}

.settings-header[b-90sp7e169b] {
    text-align: center;
    margin-bottom: 32px;
    padding: 24px;
    background: var(--neutral-fill-secondary-rest);
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-divider);
}

.header-icon[b-90sp7e169b] {
    margin-bottom: 12px;
    color: var(--accent-fill-rest);
}

.header-subtitle[b-90sp7e169b] {
    color: var(--neutral-foreground-hint);
    margin-top: 8px;
}

.settings-container[b-90sp7e169b] {
    display: flex;
    flex-direction: column;
    gap: 24px;
}

/* Settings Section Cards */
.settings-section[b-90sp7e169b] {
    padding: 24px;
    border-radius: 12px;
    border: 1px solid var(--neutral-stroke-divider);
    background: var(--neutral-fill-rest);
    transition: all 0.3s ease;
}

.settings-section:hover[b-90sp7e169b] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.settings-section.coming-soon[b-90sp7e169b] {
    opacity: 0.6;
    background: var(--neutral-fill-secondary-rest);
}

/* Section Headers */
.section-header[b-90sp7e169b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 20px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-divider);
}

.section-title[b-90sp7e169b] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.section-icon[b-90sp7e169b] {
    color: var(--accent-fill-rest);
}

.help-icon[b-90sp7e169b] {
    color: var(--neutral-foreground-hint);
    cursor: help;
    transition: color 0.2s ease;
}

.help-icon:hover[b-90sp7e169b] {
    color: var(--accent-fill-rest);
}

/* Setting Rows */
.setting-row[b-90sp7e169b] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 0;
    border-bottom: 1px solid var(--neutral-stroke-divider);
}

.setting-row:last-child[b-90sp7e169b] {
    border-bottom: none;
    padding-bottom: 0;
}

.setting-info[b-90sp7e169b] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.setting-label[b-90sp7e169b] {
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.setting-description[b-90sp7e169b] {
    font-size: 0.9em;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

.setting-control[b-90sp7e169b] {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-shrink: 0;
}

.setting-value[b-90sp7e169b] {
    font-size: 0.9em;
    color: var(--neutral-foreground-hint);
    font-weight: 500;
    min-width: 60px;
    text-align: right;
}

/* Color Palette Preview */
.color-palette-preview[b-90sp7e169b] {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--neutral-stroke-divider);
}

.palette-label[b-90sp7e169b] {
    margin-bottom: 16px;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.palette-grid[b-90sp7e169b] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.palette-theme[b-90sp7e169b] {
    padding: 16px;
    border-radius: 8px;
    border: 2px solid var(--neutral-stroke-divider);
    transition: all 0.3s ease;
    cursor: pointer;
}

.palette-theme.active[b-90sp7e169b] {
    border-color: var(--accent-fill-rest);
    background: var(--neutral-fill-secondary-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.palette-name[b-90sp7e169b] {
    font-size: 0.9em;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin-bottom: 8px;
    text-align: center;
}

.palette-colors[b-90sp7e169b] {
    display: flex;
    justify-content: center;
    gap: 6px;
    flex-wrap: wrap;
}

.color-dot[b-90sp7e169b] {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    cursor: help;
    transition: transform 0.2s ease;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
}

.color-dot:hover[b-90sp7e169b] {
    transform: scale(1.2);
}

/* Coming Soon Placeholder */
.coming-soon-content[b-90sp7e169b] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding: 32px;
    color: var(--neutral-foreground-hint);
}

/* Authentication Required Card */
.auth-required[b-90sp7e169b] {
    padding: 48px 32px;
    text-align: center;
    border: 2px dashed var(--neutral-stroke-divider);
    background: var(--neutral-fill-secondary-rest);
}

.auth-icon[b-90sp7e169b] {
    color: var(--neutral-foreground-hint);
    margin-bottom: 16px;
}

.auth-message[b-90sp7e169b] {
    color: var(--neutral-foreground-hint);
    margin-bottom: 24px;
    line-height: 1.5;
}

/* Responsive Design */
@media (max-width: 768px) {
    .settings-page[b-90sp7e169b] {
        padding: 16px;
    }
    
    .settings-header[b-90sp7e169b] {
        padding: 20px;
        margin-bottom: 24px;
    }
    
    .settings-section[b-90sp7e169b] {
        padding: 20px;
    }
    
    .setting-row[b-90sp7e169b] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .setting-control[b-90sp7e169b] {
        align-self: stretch;
        justify-content: space-between;
    }
    
    .palette-grid[b-90sp7e169b] {
        grid-template-columns: 1fr;
        gap: 12px;
    }
    
    .color-dot[b-90sp7e169b] {
        width: 20px;
        height: 20px;
    }
}

@media (max-width: 480px) {
    .settings-page[b-90sp7e169b] {
        padding: 12px;
    }
    
    .palette-colors[b-90sp7e169b] {
        gap: 4px;
    }
    
    .color-dot[b-90sp7e169b] {
        width: 18px;
        height: 18px;
    }
}
/* /Components/Workout/Dialogs/AddExerciseDialog.razor.rz.scp.css */
/* =================================
   ADD EXERCISE DIALOG STYLES
   
   FLUENT UI LAYOUT PATTERN:
   -------------------------
   FluentUI Blazor components render as Web Components with shadow DOM.
   Wrap them in container <div> elements for stable layout control.
   Use 'auto' sizing in grids to let components size naturally.
   ================================= */

/* Dialog sizing and z-index for nested dialogs */
.add-exercise-dialog[b-x4hh0k714x] {
    --dialog-width: min(95vw, 600px);
    z-index: 1000;
}

/* Ensure dialog body allows interaction */
.add-exercise-content[b-x4hh0k714x] {
    padding: 8px;
    position: relative;
    z-index: 1;
}

/* Fix for nested dialog input focus issues */
.exercise-params-form[b-x4hh0k714x] {
    position: relative;
    z-index: 10;
}

.params-row[b-x4hh0k714x] {
    display: flex;
    gap: 12px;
    position: relative;
    z-index: 10;
}

.params-row > *[b-x4hh0k714x] {
    flex: 1;
    min-width: 0;
}

/* Ensure FluentUI inputs are clickable in nested dialogs */
.params-row > div[b-x4hh0k714x] {
    position: relative;
    z-index: 10;
}

/* Force input elements to be interactive */
.params-row fluent-number-field[b-x4hh0k714x],
.params-row fluent-text-field[b-x4hh0k714x],
.params-row fluent-select[b-x4hh0k714x] {
    position: relative;
    z-index: 11;
}

/* Dialog Header with Back Button */
.dialog-header-with-back[b-x4hh0k714x] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Category Grid */
.category-grid[b-x4hh0k714x] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 12px;
}

.category-tile[b-x4hh0k714x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.category-tile:hover[b-x4hh0k714x] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.category-tile.selected[b-x4hh0k714x] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest);
    color: white;
}

.category-tile.selected .category-icon[b-x4hh0k714x] {
    background: rgba(255, 255, 255, 0.2);
}

.category-icon[b-x4hh0k714x] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    flex-shrink: 0;
}

.category-info[b-x4hh0k714x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
}

.category-name[b-x4hh0k714x] {
    font-weight: 600;
    font-size: 0.9rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.category-count[b-x4hh0k714x] {
    font-size: 0.75rem;
    opacity: 0.7;
}

/* Exercise Selection */
.exercise-selection-header[b-x4hh0k714x] {
    margin-bottom: 16px;
}

.selected-category-badge[b-x4hh0k714x] {
    display: inline-block;
    padding: 4px 12px;
    background: var(--accent-fill-rest);
    color: white;
    border-radius: 16px;
    font-size: 0.8rem;
    font-weight: 500;
}

.exercise-list-selection[b-x4hh0k714x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 400px;
    overflow-y: auto;
}

.exercise-select-item[b-x4hh0k714x] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 12px 16px;
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
}

.exercise-select-item:hover[b-x4hh0k714x] {
    border-color: var(--accent-fill-rest);
    background: var(--neutral-layer-2);
}

.exercise-select-item.selected[b-x4hh0k714x] {
    border-color: var(--accent-fill-rest);
    background: var(--accent-fill-rest);
    color: white;
}

.exercise-select-name[b-x4hh0k714x] {
    font-weight: 500;
}

.exercise-select-focus[b-x4hh0k714x] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    padding: 2px 8px;
    background: var(--neutral-layer-2);
    border-radius: 12px;
}

.exercise-select-item.selected .exercise-select-focus[b-x4hh0k714x] {
    background: rgba(255, 255, 255, 0.2);
    color: white;
}

/* Exercise Details Form */
.exercise-details-form[b-x4hh0k714x] {
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    z-index: 5;
}

.selected-exercise-header[b-x4hh0k714x] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: var(--neutral-layer-2);
    border-radius: 10px;
}

.selected-exercise-info[b-x4hh0k714x] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.selected-exercise-name[b-x4hh0k714x] {
    font-weight: 600;
    font-size: 1.1rem;
}

.selected-exercise-category[b-x4hh0k714x] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.exercise-params-form[b-x4hh0k714x] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Mobile Responsiveness */
@media (max-width: 500px) {
    .category-grid[b-x4hh0k714x] {
        grid-template-columns: 1fr;
    }
    
    .params-row[b-x4hh0k714x] {
        flex-direction: column;
    }
    
    .params-row > *[b-x4hh0k714x] {
        flex: none;
        width: 100%;
    }
    
    .category-tile[b-x4hh0k714x] {
        padding: 12px;
    }
}

/* Resizable notes textarea */
.resizable-notes[b-x4hh0k714x]::part(control) {
    resize: vertical;
    min-height: 60px;
    white-space: pre-wrap;
    font-family: inherit;
    line-height: 1.4;
}

/* Exercise Purpose Selection */
.purpose-selection[b-x4hh0k714x] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 8px;
}

.purpose-selection .purpose-label[b-x4hh0k714x] {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--neutral-foreground-rest);
}

.purpose-options[b-x4hh0k714x] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.purpose-option[b-x4hh0k714x] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.15s ease;
    background: var(--neutral-layer-1);
}

.purpose-option:hover[b-x4hh0k714x] {
    border-color: var(--neutral-stroke-hover);
    background: var(--neutral-layer-2);
}

.purpose-option.selected[b-x4hh0k714x] {
    border-width: 2px;
}

.purpose-indicator[b-x4hh0k714x] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--neutral-stroke-rest);
}

.purpose-option.purpose-warmup .purpose-indicator[b-x4hh0k714x] {
    background: var(--purpose-warmup);
}

.purpose-option.purpose-technique .purpose-indicator[b-x4hh0k714x] {
    background: var(--purpose-technique);
}

.purpose-option.purpose-corelift .purpose-indicator[b-x4hh0k714x] {
    background: var(--purpose-corelift);
}

.purpose-option.purpose-strength .purpose-indicator[b-x4hh0k714x] {
    background: var(--purpose-strength);
}

.purpose-option.purpose-accessory .purpose-indicator[b-x4hh0k714x] {
    background: var(--purpose-accessory);
}

.purpose-option.purpose-warmup.selected[b-x4hh0k714x] {
    border-color: var(--purpose-warmup);
    background: var(--purpose-warmup-bg);
}

.purpose-option.purpose-technique.selected[b-x4hh0k714x] {
    border-color: var(--purpose-technique);
    background: var(--purpose-technique-bg);
}

.purpose-option.purpose-corelift.selected[b-x4hh0k714x] {
    border-color: var(--purpose-corelift);
    background: var(--purpose-corelift-bg);
}

.purpose-option.purpose-strength.selected[b-x4hh0k714x] {
    border-color: var(--purpose-strength);
    background: var(--purpose-strength-bg);
}

.purpose-option.purpose-accessory.selected[b-x4hh0k714x] {
    border-color: var(--purpose-accessory);
    background: var(--purpose-accessory-bg);
}

.purpose-name[b-x4hh0k714x] {
    font-size: 0.85rem;
    font-weight: 500;
}
/* /Components/Workout/Dialogs/EditWorkoutDialog.razor.rz.scp.css */
/* =================================
   EDIT WORKOUT DIALOG STYLES
   
   FLUENT UI LAYOUT PATTERN:
   -------------------------
   FluentUI Blazor components render as Web Components with shadow DOM.
   This means they have multiple internal parts that can affect layout.
   
   Best practices:
   1. Wrap FluentUI components in a container <div> for layout control
   2. Use 'auto' or 'minmax()' in grids instead of '1fr' to let components size naturally
   3. Apply flex/grid styles to the wrapper div, not the component itself
   4. The container div acts as the stable layout unit
   
   Example:
   <div class="exercise-params-row">
       <div><FluentNumberField Label="Sets" ... /></div>
       <div><FluentNumberField Label="Reps" ... /></div>
       <div><FluentSelect Label="Unit" ... /></div>
   </div>
   
   .exercise-params-row {
       display: grid;
       grid-template-columns: auto auto auto;
   }
}

/* Dialog sizing */
.edit-workout-dialog[b-b9ysgrokhe] {
    --dialog-width: min(95vw, 580px);
}

/* Form layout */
.workout-basic-info[b-b9ysgrokhe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 16px;
}

.form-row[b-b9ysgrokhe] {
    display: flex;
    gap: 16px;
}

.form-row > *[b-b9ysgrokhe] {
    flex: 1;
    min-width: 0;
}

/* Exercise section */
.exercise-management[b-b9ysgrokhe] {
    border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    padding-top: 16px;
    margin-top: 16px;
}

.exercise-header[b-b9ysgrokhe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
}

.exercise-header h5[b-b9ysgrokhe] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

/* Exercise list with scroll */
.exercise-list[b-b9ysgrokhe] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 320px;
    overflow-y: auto;
}

/* Individual exercise card */
.exercise-edit-item[b-b9ysgrokhe] {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: var(--neutral-layer-2, #f5f5f5);
    border-radius: 8px;
    border: 1px solid var(--neutral-stroke-rest, #e0e0e0);
}

.exercise-reorder[b-b9ysgrokhe] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.exercise-details[b-b9ysgrokhe] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    min-width: 0;
}

.exercise-name-row[b-b9ysgrokhe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exercise-name-row strong[b-b9ysgrokhe] {
    color: var(--accent-fill-rest, #0078d4);
    font-size: 0.95rem;
}

/* Exercise parameters grid - use 'auto' to let wrapped components size naturally */
.exercise-params-row[b-b9ysgrokhe] {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 8px;
}

.percentage-of-row[b-b9ysgrokhe],
.exercise-notes-row[b-b9ysgrokhe] {
    margin-top: 4px;
}

/* Resizable notes textarea */
.resizable-notes[b-b9ysgrokhe]::part(control) {
    resize: vertical;
    min-height: 60px;
    white-space: pre-wrap;
    font-family: inherit;
    line-height: 1.4;
}

/* Empty state */
.no-exercises-edit[b-b9ysgrokhe] {
    text-align: center;
    padding: 24px;
    color: var(--neutral-foreground-hint, #666);
    background: var(--neutral-layer-2, #f5f5f5);
    border-radius: 8px;
}

/* Mobile: stack form row */
@media (max-width: 480px) {
    .form-row[b-b9ysgrokhe] {
        flex-direction: column;
    }
    
    .exercise-edit-item[b-b9ysgrokhe] {
        flex-direction: column;
    }
    
    .exercise-reorder[b-b9ysgrokhe] {
        flex-direction: row;
        justify-content: flex-end;
        order: 1;
        padding-top: 8px;
        border-top: 1px solid var(--neutral-stroke-rest, #e0e0e0);
    }
    
    /* On mobile, let params stack in 2 columns */
    .exercise-params-row[b-b9ysgrokhe] {
        grid-template-columns: 1fr 1fr;
    }
}
/* /Components/Workout/Dialogs/GenerateWorkoutDialog.razor.rz.scp.css */
/* =================================
   GENERATE WORKOUT DIALOG STYLES
   ================================= */

[b-j4eswsmkr3] .generate-workout-dialog {
    --dialog-width: 95vw;
    --dialog-max-width: 900px;
}

.generate-workout-content[b-j4eswsmkr3] {
    padding: 8px;
}

.template-header[b-j4eswsmkr3] {
    text-align: center;
    margin-bottom: 24px;
}

.template-title[b-j4eswsmkr3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.template-title h3[b-j4eswsmkr3] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 600;
}

.template-title .header-icon[b-j4eswsmkr3] {
    color: var(--accent-fill-rest);
}

.template-subtitle[b-j4eswsmkr3] {
    color: var(--neutral-foreground-hint);
    margin: 0;
    font-size: 0.9rem;
}

/* Dialog Header with Back Button */
.dialog-header-with-back[b-j4eswsmkr3] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Week Planning Section */
.week-planning-section[b-j4eswsmkr3] {
    margin-bottom: 24px;
}

.week-planning-button[b-j4eswsmkr3] {
    display: flex;
    align-items: center;
    gap: 16px;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, var(--accent-fill-hover) 100%);
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s ease;
    color: white;
    text-align: left;
}

.week-planning-button:hover[b-j4eswsmkr3] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--accent-fill-rest-rgb), 0.3);
}

.week-planning-button .button-icon[b-j4eswsmkr3] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.2);
    border-radius: 10px;
}

.week-planning-button .button-content[b-j4eswsmkr3] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.week-planning-button .button-title[b-j4eswsmkr3] {
    font-size: 1.1rem;
    font-weight: 600;
}

.week-planning-button .button-subtitle[b-j4eswsmkr3] {
    font-size: 0.85rem;
    opacity: 0.9;
}

.week-planning-button .button-arrow[b-j4eswsmkr3] {
    opacity: 0.8;
}

/* Section Divider */
.section-divider[b-j4eswsmkr3] {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 24px 0;
    color: var(--neutral-foreground-hint);
    font-size: 0.85rem;
}

.section-divider[b-j4eswsmkr3]::before,
.section-divider[b-j4eswsmkr3]::after {
    content: '';
    flex: 1;
    height: 1px;
    background: var(--neutral-stroke-rest);
}

/* Day Type Grid */
.day-type-grid[b-j4eswsmkr3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 16px;
}

.day-type-tile[b-j4eswsmkr3] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.day-type-tile:hover[b-j4eswsmkr3] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.day-type-tile-header[b-j4eswsmkr3] {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 8px;
}

.day-type-tile-header h4[b-j4eswsmkr3] {
    margin: 0;
    font-size: 0.95rem;
    font-weight: 600;
}

.day-type-icon[b-j4eswsmkr3] {
    color: var(--accent-fill-rest);
}

.day-type-description[b-j4eswsmkr3] {
    margin: 0 0 12px 0;
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

.template-count[b-j4eswsmkr3] {
    font-size: 0.75rem;
    color: var(--accent-fill-rest);
    font-weight: 500;
}

/* Week Template Categories */
.week-category-section[b-j4eswsmkr3] {
    margin-bottom: 24px;
}

.week-category-section:last-child[b-j4eswsmkr3] {
    margin-bottom: 0;
}

.week-category-title[b-j4eswsmkr3] {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    margin: 0 0 12px 0;
    padding-bottom: 8px;
    border-bottom: 2px solid var(--accent-fill-rest);
    display: inline-block;
}

/* Week Template Grid */
.week-template-grid[b-j4eswsmkr3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 16px;
}

.week-template-tile[b-j4eswsmkr3] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.week-template-tile:hover[b-j4eswsmkr3] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.week-template-header[b-j4eswsmkr3] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--neutral-stroke-rest);
}

.week-template-header h4[b-j4eswsmkr3] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.day-count[b-j4eswsmkr3] {
    font-size: 0.8rem;
    color: var(--accent-fill-rest);
    font-weight: 500;
    background: var(--accent-fill-rest);
    color: white;
    padding: 2px 8px;
    border-radius: 12px;
}

.week-template-days[b-j4eswsmkr3] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.week-day-preview[b-j4eswsmkr3] {
    display: flex;
    gap: 12px;
    align-items: center;
}

.week-day-preview .day-label[b-j4eswsmkr3] {
    min-width: 36px;
    font-weight: 600;
    color: var(--accent-fill-rest);
    font-size: 0.85rem;
}

.week-day-preview .template-name[b-j4eswsmkr3] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-rest);
}

/* Template Grid */
.template-grid[b-j4eswsmkr3] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
    gap: 16px;
}

.template-tile[b-j4eswsmkr3] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.template-tile:hover[b-j4eswsmkr3] {
    border-color: var(--accent-fill-rest);
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.template-tile-header[b-j4eswsmkr3] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 12px;
}

.template-tile-icon[b-j4eswsmkr3] {
    color: var(--accent-fill-rest);
    flex-shrink: 0;
}

.template-tile-title[b-j4eswsmkr3] {
    flex: 1;
}

.template-tile-name[b-j4eswsmkr3] {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 600;
}

.template-duration[b-j4eswsmkr3] {
    font-size: 0.8rem;
    color: var(--neutral-foreground-hint);
}

.template-tile-content[b-j4eswsmkr3] {
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.template-tile-description[b-j4eswsmkr3] {
    margin: 0 0 12px 0;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

/* Exercise Phases */
.exercise-phases[b-j4eswsmkr3] {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.phase-item[b-j4eswsmkr3] {
    display: flex;
    gap: 8px;
    font-size: 0.8rem;
    padding: 4px 8px;
    border-radius: 6px;
    background: var(--neutral-layer-2);
}

.phase-item.warmup[b-j4eswsmkr3] {
    border-left: 3px solid var(--purpose-warmup);
}

.phase-item.technique[b-j4eswsmkr3] {
    border-left: 3px solid var(--purpose-technique);
}

.phase-item.core[b-j4eswsmkr3] {
    border-left: 3px solid var(--purpose-corelift);
}

.phase-item.strength[b-j4eswsmkr3] {
    border-left: 3px solid var(--purpose-strength);
}

.phase-item.accessory[b-j4eswsmkr3] {
    border-left: 3px solid var(--purpose-accessory);
}

.phase-label[b-j4eswsmkr3] {
    min-width: 70px;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
}

.phase-exercise[b-j4eswsmkr3] {
    color: var(--neutral-foreground-rest);
}

/* Mobile Responsiveness */
@media (max-width: 600px) {
    .day-type-grid[b-j4eswsmkr3] {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .week-template-grid[b-j4eswsmkr3],
    .template-grid[b-j4eswsmkr3] {
        grid-template-columns: 1fr;
    }
    
    .week-planning-button[b-j4eswsmkr3] {
        padding: 12px 16px;
    }
    
    .week-planning-button .button-icon[b-j4eswsmkr3] {
        width: 40px;
        height: 40px;
    }
    
    .day-selector-grid[b-j4eswsmkr3] {
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }
    
    .day-selector-tile[b-j4eswsmkr3] {
        padding: 10px 6px;
    }
    
    .day-selector-tile .day-number[b-j4eswsmkr3] {
        font-size: 1.2rem;
    }
}

/* =================================
   DAY SELECTOR STYLES (Using FluentCalendar)
   ================================= */

.calendar-container[b-j4eswsmkr3] {
    display: flex;
    justify-content: center;
    margin: 20px 0;
}

/* Style the FluentCalendar to fit the dialog */
.calendar-container fluent-calendar[b-j4eswsmkr3] {
    --calendar-width: 100%;
    max-width: 320px;
}

.date-warning[b-j4eswsmkr3] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px;
    background: rgba(255, 152, 0, 0.1);
    border: 1px solid rgba(255, 152, 0, 0.3);
    border-radius: 8px;
    color: #e65100;
    font-size: 0.85rem;
    margin-bottom: 16px;
}

.day-selection-actions[b-j4eswsmkr3] {
    display: flex;
    justify-content: center;
    margin-top: 16px;
}
/* /Components/Workout/Dialogs/ManageCyclesDialog.razor.rz.scp.css */
/* =================================
   MANAGE CYCLES DIALOG STYLES
   ================================= */

[b-3tq7tuxjp1] .manage-cycles-dialog {
    --dialog-width: 95vw;
    --dialog-max-width: 700px;
}

.manage-cycles-content[b-3tq7tuxjp1] {
    padding: 8px;
    min-height: 400px;
}

/* Dialog Header with Back Button */
.dialog-header-with-back[b-3tq7tuxjp1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dialog Header with Close Button */
.dialog-header-with-close[b-3tq7tuxjp1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* List Header */
.cycles-list-header[b-3tq7tuxjp1] {
    margin-bottom: 24px;
}

.list-subtitle[b-3tq7tuxjp1] {
    color: var(--neutral-foreground-hint);
    margin: 0 0 16px 0;
    font-size: 0.9rem;
}

/* Loading and Empty States */
.loading-indicator[b-3tq7tuxjp1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    color: var(--neutral-foreground-hint);
}

.empty-state[b-3tq7tuxjp1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state h4[b-3tq7tuxjp1] {
    margin: 16px 0 8px 0;
    color: var(--neutral-foreground-rest);
}

.empty-state p[b-3tq7tuxjp1] {
    margin: 0;
    font-size: 0.9rem;
}

/* Cycles Grid */
.cycles-grid[b-3tq7tuxjp1] {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
}

@media (max-width: 600px) {
    .cycles-grid[b-3tq7tuxjp1] {
        grid-template-columns: 1fr;
    }
}

/* Cycle Card */
.cycle-card[b-3tq7tuxjp1] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.cycle-card:hover[b-3tq7tuxjp1] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.cycle-card-header[b-3tq7tuxjp1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.cycle-card-header h4[b-3tq7tuxjp1] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    flex: 1;
    word-break: break-word;
}

.cycle-actions[b-3tq7tuxjp1] {
    display: flex;
    gap: 4px;
}

.cycle-card-body[b-3tq7tuxjp1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.cycle-info-row[b-3tq7tuxjp1] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

/* Edit Form */
.form-section[b-3tq7tuxjp1] {
    margin-bottom: 16px;
}

.form-row[b-3tq7tuxjp1] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 500px) {
    .form-row[b-3tq7tuxjp1] {
        grid-template-columns: 1fr;
    }
}

.form-row > div[b-3tq7tuxjp1] {
    min-width: 0;
}

.form-actions[b-3tq7tuxjp1] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.form-actions > *[b-3tq7tuxjp1] {
    flex: 1;
}
/* /Components/Workout/Dialogs/ManageExercisesDialog.razor.rz.scp.css */
/* =================================
   MANAGE EXERCISES DIALOG STYLES
   ================================= */

[b-mezh034uz0] .manage-exercises-dialog {
    --dialog-width: 95vw;
    --dialog-max-width: 750px;
}

.manage-exercises-content[b-mezh034uz0] {
    padding: 8px;
    min-height: 500px;
}

/* Dialog Header with Back Button */
.dialog-header-with-back[b-mezh034uz0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Dialog Header with Close Button */
.dialog-header-with-close[b-mezh034uz0] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
}

/* Exercise Header Actions */
.exercise-header-actions[b-mezh034uz0] {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-shrink: 0;
}

/* List Header */
.exercises-list-header[b-mezh034uz0] {
    margin-bottom: 20px;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.header-top[b-mezh034uz0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
}

@media (max-width: 600px) {
    .header-top[b-mezh034uz0] {
        flex-direction: column;
        align-items: stretch;
    }
}

.list-subtitle[b-mezh034uz0] {
    color: var(--neutral-foreground-hint);
    margin: 0;
    font-size: 0.9rem;
    flex: 1;
}

/* Loading and Empty States */
.loading-indicator[b-mezh034uz0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    color: var(--neutral-foreground-hint);
}

.empty-state[b-mezh034uz0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state h4[b-mezh034uz0] {
    margin: 16px 0 8px 0;
    color: var(--neutral-foreground-rest);
}

.empty-state p[b-mezh034uz0] {
    margin: 0;
    font-size: 0.9rem;
}

/* Exercises List */
.exercises-list[b-mezh034uz0] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 500px;
    overflow-y: auto;
    padding-right: 8px;
}

/* Exercise Card */
.exercise-card[b-mezh034uz0] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.exercise-card:hover[b-mezh034uz0] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.exercise-card-header[b-mezh034uz0] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.exercise-title[b-mezh034uz0] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
    min-width: 0;
}

.exercise-title h4[b-mezh034uz0] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.exercise-description[b-mezh034uz0] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

.exercise-details[b-mezh034uz0] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.exercise-detail-item[b-mezh034uz0] {
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.exercise-detail-item strong[b-mezh034uz0] {
    color: var(--neutral-foreground-rest);
    font-weight: 500;
}

.exercise-video[b-mezh034uz0] {
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

/* Edit Form */
.form-section[b-mezh034uz0] {
    margin-bottom: 16px;
}

.form-row[b-mezh034uz0] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

@media (max-width: 500px) {
    .form-row[b-mezh034uz0] {
        grid-template-columns: 1fr;
    }
}

.form-row > div[b-mezh034uz0] {
    min-width: 0;
}

.form-actions[b-mezh034uz0] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.form-actions > *[b-mezh034uz0] {
    flex: 1;
}

/* Scrollbar Styling */
.exercises-list[b-mezh034uz0]::-webkit-scrollbar {
    width: 8px;
}

.exercises-list[b-mezh034uz0]::-webkit-scrollbar-track {
    background: var(--neutral-layer-2);
    border-radius: 4px;
}

.exercises-list[b-mezh034uz0]::-webkit-scrollbar-thumb {
    background: var(--neutral-stroke-rest);
    border-radius: 4px;
}

.exercises-list[b-mezh034uz0]::-webkit-scrollbar-thumb:hover {
    background: var(--neutral-stroke-hover);
}
/* /Components/Workout/Dialogs/ManagePhasesDialog.razor.rz.scp.css */
/* =================================
   MANAGE PHASES DIALOG STYLES
   ================================= */

[b-tip3ah0mro] .manage-phases-dialog {
    --dialog-width: 95vw;
    --dialog-max-width: 650px;
}

.manage-phases-content[b-tip3ah0mro] {
    padding: 8px;
    min-height: 400px;
}

/* Dialog Header with Back Button */
.dialog-header-with-back[b-tip3ah0mro] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* List Header */
.phases-list-header[b-tip3ah0mro] {
    margin-bottom: 24px;
}

.list-subtitle[b-tip3ah0mro] {
    color: var(--neutral-foreground-hint);
    margin: 0 0 16px 0;
    font-size: 0.9rem;
}

/* Loading and Empty States */
.loading-indicator[b-tip3ah0mro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    gap: 12px;
    color: var(--neutral-foreground-hint);
}

.empty-state[b-tip3ah0mro] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.empty-state h4[b-tip3ah0mro] {
    margin: 16px 0 8px 0;
    color: var(--neutral-foreground-rest);
}

.empty-state p[b-tip3ah0mro] {
    margin: 0;
    font-size: 0.9rem;
}

/* Phases List */
.phases-list[b-tip3ah0mro] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Phase Card */
.phase-card[b-tip3ah0mro] {
    background: var(--neutral-layer-1);
    border: 1px solid var(--neutral-stroke-rest);
    border-radius: 12px;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    transition: all 0.2s ease;
}

.phase-card:hover[b-tip3ah0mro] {
    border-color: var(--accent-fill-rest);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.phase-card-header[b-tip3ah0mro] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
}

.phase-title[b-tip3ah0mro] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1;
}

.phase-title h4[b-tip3ah0mro] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    word-break: break-word;
}

.phase-actions[b-tip3ah0mro] {
    display: flex;
    gap: 4px;
}

.phase-description[b-tip3ah0mro] {
    margin: 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.4;
}

.phase-info[b-tip3ah0mro] {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
}

.phase-info-item[b-tip3ah0mro] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

/* Edit Form */
.form-section[b-tip3ah0mro] {
    margin-bottom: 16px;
}

.form-actions[b-tip3ah0mro] {
    display: flex;
    gap: 12px;
    margin-top: 24px;
    padding-top: 16px;
    border-top: 1px solid var(--neutral-stroke-rest);
}

.form-actions > *[b-tip3ah0mro] {
    flex: 1;
}
/* /Components/Workout/Dialogs/WorkoutDetailsDialog.razor.rz.scp.css */
/* =================================
   WORKOUT DETAILS DIALOG STYLES
   ================================= */

[b-vdqt4kz7xo] .workout-details-dialog {
    --dialog-width: 95vw;
    --dialog-max-width: 550px;
}

.workout-details-content[b-vdqt4kz7xo] {
    padding: 8px;
}

.detail-section[b-vdqt4kz7xo] {
    margin-bottom: 20px;
}

.detail-section:last-child[b-vdqt4kz7xo] {
    margin-bottom: 0;
}

.detail-section h4[b-vdqt4kz7xo] {
    margin: 0 0 8px 0;
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-section p[b-vdqt4kz7xo] {
    margin: 0;
    color: var(--neutral-foreground-rest);
}

/* Completion Status */
.completion-status[b-vdqt4kz7xo] {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Exercises List */
.exercises-list[b-vdqt4kz7xo] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exercise-detail-item[b-vdqt4kz7xo] {
    padding: 12px 16px;
    background: var(--neutral-layer-2);
    border-radius: 8px;
    border-left: 3px solid var(--accent-fill-rest);
}

/* Exercise Purpose Colors */
.exercise-detail-item.purpose-warmup[b-vdqt4kz7xo] {
    border-left-color: var(--purpose-warmup);
}

.exercise-detail-item.purpose-technique[b-vdqt4kz7xo] {
    border-left-color: var(--purpose-technique);
}

.exercise-detail-item.purpose-corelift[b-vdqt4kz7xo] {
    border-left-color: var(--purpose-corelift);
}

.exercise-detail-item.purpose-strength[b-vdqt4kz7xo] {
    border-left-color: var(--purpose-strength);
}

.exercise-detail-item.purpose-accessory[b-vdqt4kz7xo] {
    border-left-color: var(--purpose-accessory);
}

.exercise-name-with-purpose[b-vdqt4kz7xo] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exercise-detail-header[b-vdqt4kz7xo] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 12px;
    flex-wrap: wrap;
}

.exercise-detail-header strong[b-vdqt4kz7xo] {
    font-size: 0.95rem;
    color: var(--neutral-foreground-rest);
}

.exercise-detail-stats[b-vdqt4kz7xo] {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.stat-badge[b-vdqt4kz7xo] {
    font-size: 0.8rem;
    padding: 2px 10px;
    background: var(--neutral-layer-3);
    border-radius: 12px;
    color: var(--neutral-foreground-rest);
    font-weight: 500;
}

.percentage-badge[b-vdqt4kz7xo] {
    background: var(--accent-fill-rest);
    color: white;
}

.weight-badge[b-vdqt4kz7xo] {
    background: var(--neutral-fill-secondary-rest);
}

.exercise-detail-notes[b-vdqt4kz7xo] {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--neutral-stroke-rest);
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.no-exercises[b-vdqt4kz7xo] {
    text-align: center;
    padding: 24px;
    color: var(--neutral-foreground-hint);
    font-style: italic;
}

/* Mobile Responsiveness */
@media (max-width: 500px) {
    .exercise-detail-header[b-vdqt4kz7xo] {
        flex-direction: column;
        align-items: flex-start;
    }
    
    .exercise-detail-stats[b-vdqt4kz7xo] {
        width: 100%;
    }
}
/* /Components/Workout/Workout.razor.rz.scp.css */
/* =================================
   WORKOUT PLANNER COMPONENT STYLES
   ================================= */

/* =================================
   CONTAINER AND LAYOUT
   ================================= */
.workout-planner-container[b-y3kt61v1et] {
     max-width: 1200px;
     margin: 0 auto;
     padding: 16px;
     background-color: var(--color-primary-light);
     border-radius: var(--workout-border-radius);
     box-shadow: var(--workout-shadow-light);
}

/* Mobile breakpoint */
@media (max-width: 768px) {
    .workout-planner-container[b-y3kt61v1et] {
        padding: 8px;
        border-radius: 0;
    }
}

/* =================================
   ERROR
   ================================= */

/* Error Message */
.error-message[b-y3kt61v1et] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background-color: #fef2f2;
    border: 1px solid #fca5a5;
    border-radius: var(--workout-border-radius-small);
    color: #dc2626;
    font-size: 0.9rem;
}

/* =================================
   FORM STYLING (FOR DIALOGS)
   ================================= */

/* Form Styling */
.form-actions[b-y3kt61v1et] {
    display: flex;
    gap: 8px;
    margin-top: 12px;
    justify-content: flex-end;
}

/* Enhanced Exercise Management */
.workout-edit-container[b-y3kt61v1et] {
    padding: 16px;
}

.workout-basic-info[b-y3kt61v1et] {
    display: flex;
    align-items: end;
    gap: 8px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.exercise-management[b-y3kt61v1et] {
    margin: 16px 0;
    padding: 16px;
    background-color: var(--color-secondary-light);
    border-radius: 8px;
    border: 1px solid var(--color-neutral-light);
}

.exercise-header[b-y3kt61v1et] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.exercise-header h5[b-y3kt61v1et] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-primary);
}

.add-exercise-btn[b-y3kt61v1et] {
    font-size: 0.9rem;
}

.exercise-list[b-y3kt61v1et] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.exercise-edit-item[b-y3kt61v1et] {
    display: flex;
    gap: 12px;
    padding: 12px;
    background-color: var(--color-neutral);
    border-radius: 8px;
    border: 1px solid var(--color-neutral-light);
}

.exercise-reorder[b-y3kt61v1et] {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}

.exercise-details[b-y3kt61v1et] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exercise-name-row[b-y3kt61v1et] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exercise-name-row strong[b-y3kt61v1et] {
    color: var(--color-primary);
    font-size: 1rem;
}

.remove-exercise-btn[b-y3kt61v1et] {
    color: var(--color-danger) !important;
}

.exercise-params[b-y3kt61v1et] {
    display: flex;
    gap: 12px;
    align-items: end;
    flex-wrap: wrap;
}

.no-exercises-edit[b-y3kt61v1et] {
    text-align: center;
    color: var(--color-neutral-medium);
    font-style: italic;
    padding: 24px;
    margin: 0;
}

/* Add Exercise Dialog */
.add-exercise-content[b-y3kt61v1et] {
    padding: 16px 0;
}

.exercise-params-grid[b-y3kt61v1et] {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 12px;
    margin-bottom: 16px;
}

/* Generate Workout Dialog */
.generate-workout-content[b-y3kt61v1et] {
    padding: 16px 0;
}

/* Enhanced Template Header */
.template-header[b-y3kt61v1et] {
    margin-bottom: 24px;
    text-align: center;
}

.template-title[b-y3kt61v1et] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.template-title h3[b-y3kt61v1et] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-neutral-dark);
    background: linear-gradient(135deg, var(--color-primary), var(--color-accent));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.template-title .header-icon[b-y3kt61v1et] {
    color: var(--color-accent);
    font-size: 1.8rem;
}

.template-subtitle[b-y3kt61v1et] {
    font-size: 1rem;
    color: var(--color-neutral-medium);
    margin: 0;
    font-style: italic;
}

/* Template Grid Layout */
.template-grid[b-y3kt61v1et] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
    margin-top: 20px;
}

/* Template Tiles */
.template-tile[b-y3kt61v1et] {
    background: linear-gradient(135deg, var(--color-neutral), var(--color-secondary-light));
    border: 2px solid var(--color-neutral-light);
    border-radius: 16px;
    padding: 20px;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    min-height: 140px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    position: relative;
    overflow: hidden;
}

.template-tile[b-y3kt61v1et]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    opacity: 0;
    transition: opacity 0.3s ease;
}

.template-tile:hover[b-y3kt61v1et] {
    border-color: var(--color-primary);
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 32px rgba(59, 130, 246, 0.2);
    background: linear-gradient(135deg, var(--color-primary-light), var(--color-accent-light));
}

.template-tile:hover[b-y3kt61v1et]::before {
    opacity: 1;
}

.template-tile-header[b-y3kt61v1et] {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 8px;
}

.template-tile-icon[b-y3kt61v1et] {
    font-size: 2rem;
    color: var(--color-primary);
    transition: all 0.3s ease;
}

.template-tile:hover .template-tile-icon[b-y3kt61v1et] {
    color: var(--color-accent);
    transform: scale(1.1) rotate(5deg);
}

.template-tile-name[b-y3kt61v1et] {
    font-size: 1.2rem;
    font-weight: 700;
    color: var(--color-neutral-dark);
    margin: 0;
    line-height: 1.3;
}

.template-tile-content[b-y3kt61v1et] {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.template-tile-description[b-y3kt61v1et] {
    font-size: 0.95rem;
    color: var(--color-neutral-medium);
    margin: 0;
    line-height: 1.4;
    flex: 1;
}

.template-tile-exercises[b-y3kt61v1et] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-top: 8px;
}

.exercise-preview[b-y3kt61v1et] {
    background-color: var(--color-secondary-light);
    color: var(--color-primary);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;
}

.exercise-count[b-y3kt61v1et] {
    background-color: var(--color-accent-light);
    color: var(--color-accent);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 600;
}

/* Responsive Design */
@media (max-width: 768px) {
    .workout-planner-container[b-y3kt61v1et] {
        padding: 12px;
    }
}

@media (max-width: 480px) {
    .workout-planner-container[b-y3kt61v1et] {
        padding: 8px;
    }
    
    .template-button[b-y3kt61v1et] {
        padding: 12px;
    }
}

/* Legacy styles for backwards compatibility */
.guide-panel[b-y3kt61v1et] {
	position: fixed;
	top: 60px;
	right: 40px;
	width: 350px;
	background: #f0f6ff;
	border: 2px solid #3b82f6;
	box-shadow: 0 2px 12px rgba(0,0,0,0.15);
	padding: 1.5rem;
	z-index: 1000;
	border-radius: 8px;
}

.guide-header[b-y3kt61v1et] {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 1rem;
}

/* Modern card style for workout view */
.workout-card.modern-card[b-y3kt61v1et] {
    background: #fff;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(0,0,0,0.08);
    padding: 2rem 2.5rem 1.5rem 2.5rem;
    margin: 2rem auto 0 auto;
    max-width: 540px;
    min-width: 320px;
    border: 1px solid #e5e7eb;
}
.workout-card.modern-card:hover[b-y3kt61v1et] {
    box-shadow: 0 4px 24px rgba(59,130,246,0.13);
    border-color: #3b82f6;
}
.workout-card + .workout-card[b-y3kt61v1et] {
    margin-top: 2rem;
}
.workout-card-header[b-y3kt61v1et] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.2rem;
    font-weight: 600;
    margin-bottom: 1rem;
}
.card-header-icon[b-y3kt61v1et] {
    font-size: 2rem;
    margin-right: 0.75rem;
    color: #2563eb;
}
.workout-card-body[b-y3kt61v1et] {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}
.workout-label[b-y3kt61v1et] {
    font-size: 1.1rem;
    font-weight: 500;
    color: #3b82f6;
}
.workout-notes[b-y3kt61v1et] {
    color: #6b7280;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.workout-duration[b-y3kt61v1et] {
    color: #111827;
    font-size: 1rem;
    margin-bottom: 0.5rem;
}
.workout-details-list[b-y3kt61v1et] {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.workout-detail-item[b-y3kt61v1et] {
    background: #f3f4f6;
    border-radius: 8px;
    padding: 0.75rem 1rem;
    box-shadow: 0 1px 4px rgba(0,0,0,0.03);
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}
.exercise-name[b-y3kt61v1et] {
    font-weight: 600;
    color: #2563eb;
}
.sets-reps-weight[b-y3kt61v1et] {
    font-size: 0.98rem;
    color: #374151;
    display: flex;
    gap: 1.5rem;
}
.sets-reps[b-y3kt61v1et] {
    font-weight: 500;
}
.weight[b-y3kt61v1et] {
    font-weight: 500;
    color: #059669;
}
.detail-notes[b-y3kt61v1et] {
    font-size: 0.95rem;
    color: #6b7280;
    margin-top: 0.2rem;
}
/* /Components/Workout/WorkoutDiscover.razor.rz.scp.css */
/* ========================================
   WORKOUT DISCOVER - Responsive Styles
   ======================================== */

.discover-container[b-17p0k2c1c2] {
    padding: 24px;
    max-width: 1400px;
    margin: 0 auto;
}

/* ========================================
   HERO SECTION
   ======================================== */

.discover-hero[b-17p0k2c1c2] {
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, var(--accent-fill-hover) 100%);
    border-radius: 12px;
    padding: 24px 24px;
    margin-bottom: 28px;
    text-align: center;
    color: white;
}

.hero-content[b-17p0k2c1c2] {
    max-width: 600px;
    margin: 0 auto;
}

.hero-icon[b-17p0k2c1c2] {
    font-size: 32px;
    margin-bottom: 8px;
    opacity: 0.9;
}

.discover-hero h2[b-17p0k2c1c2] {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 700;
}

.discover-hero p[b-17p0k2c1c2] {
    margin: 0;
    font-size: 0.95rem;
    opacity: 0.9;
    line-height: 1.4;
}

/* ========================================
   SECTION HEADERS
   ======================================== */

.section-header[b-17p0k2c1c2] {
    margin-bottom: 24px;
    text-align: center;
}

.section-header h3[b-17p0k2c1c2] {
    margin: 0 0 8px 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.section-header p[b-17p0k2c1c2] {
    margin: 0;
    color: var(--neutral-foreground-hint);
    font-size: 1rem;
}

/* ========================================
   CONCEPTS SECTION
   ======================================== */

.concepts-section[b-17p0k2c1c2] {
    margin-bottom: 48px;
}

.concept-cards[b-17p0k2c1c2] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-bottom: 24px;
}

.concept-card[b-17p0k2c1c2] {
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-left: 4px solid var(--accent-fill-rest);
    border-radius: 8px;
    padding: 20px 24px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.concept-card:hover[b-17p0k2c1c2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.concept-content h4[b-17p0k2c1c2] {
    margin: 0 0 8px 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
}

.concept-content p[b-17p0k2c1c2] {
    margin: 0 0 12px 0;
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
    line-height: 1.5;
}

.concept-tips[b-17p0k2c1c2] {
    margin: 0;
    padding-left: 20px;
    font-size: 0.85rem;
    color: var(--neutral-foreground-hint);
}

.concept-tips li[b-17p0k2c1c2] {
    margin-bottom: 4px;
}

.concept-tips li:last-child[b-17p0k2c1c2] {
    margin-bottom: 0;
}

/* ========================================
   QUICK START GUIDE
   ======================================== */

.quick-start[b-17p0k2c1c2] {
    background: var(--neutral-layer-card-container);
    border: 2px dashed var(--neutral-stroke-layer-rest);
    border-radius: 12px;
    overflow: hidden;
    transition: all 0.3s ease;
}

.quick-start.expanded[b-17p0k2c1c2] {
    border-style: solid;
    border-color: var(--accent-fill-rest);
}

.quick-start-toggle[b-17p0k2c1c2] {
    width: 100%;
    padding: 16px;
    justify-content: center;
    font-weight: 500;
}

.quick-start-content[b-17p0k2c1c2] {
    padding: 0 24px 24px 24px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
}

.setup-steps[b-17p0k2c1c2] {
    margin: 20px 0;
    padding-left: 24px;
    counter-reset: step-counter;
    list-style: none;
}

.setup-steps li[b-17p0k2c1c2] {
    position: relative;
    padding: 12px 0 12px 16px;
    border-left: 2px solid var(--neutral-stroke-layer-rest);
    margin-left: 12px;
}

.setup-steps li[b-17p0k2c1c2]::before {
    content: counter(step-counter);
    counter-increment: step-counter;
    position: absolute;
    left: -14px;
    top: 12px;
    width: 24px;
    height: 24px;
    background: var(--accent-fill-rest);
    color: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    font-weight: 600;
}

.setup-steps li strong[b-17p0k2c1c2] {
    display: block;
    color: var(--neutral-foreground-rest);
    margin-bottom: 4px;
}

.setup-steps li span[b-17p0k2c1c2] {
    font-size: 0.9rem;
    color: var(--neutral-foreground-hint);
}

.quick-start-action[b-17p0k2c1c2] {
    text-align: center;
    padding-top: 16px;
}

/* ========================================
   EXERCISES SECTION
   ======================================== */

.exercises-section[b-17p0k2c1c2] {
    margin-bottom: 32px;
}

.exercise-controls[b-17p0k2c1c2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
}

.search-box[b-17p0k2c1c2] {
    max-width: 400px;
}

.filter-chips[b-17p0k2c1c2] {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

.filter-chip[b-17p0k2c1c2] {
    font-size: 0.85rem;
    padding: 6px 12px;
}

/* ========================================
   EXERCISE GRID
   ======================================== */

.exercise-grid[b-17p0k2c1c2] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 16px;
}

.exercise-card[b-17p0k2c1c2] {
    background: var(--neutral-layer-card-container);
    border: 1px solid var(--neutral-stroke-layer-rest);
    border-left: 3px solid var(--accent-fill-rest);
    border-radius: 8px;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    display: flex;
    flex-direction: column;
}

.exercise-card:hover[b-17p0k2c1c2] {
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    border-left-color: var(--accent-fill-hover);
}

.exercise-card-clickable[b-17p0k2c1c2] {
    cursor: pointer;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 16px;
}

.exercise-card-content[b-17p0k2c1c2] {
    flex: 1;
}

.exercise-title-row[b-17p0k2c1c2] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 8px;
}

.exercise-card-content h4[b-17p0k2c1c2] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
    color: var(--neutral-foreground-rest);
    line-height: 1.3;
    flex: 1;
}

.difficulty-badge[b-17p0k2c1c2] {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.3px;
    flex-shrink: 0;
}

.difficulty-beginner[b-17p0k2c1c2] {
    background: #d4edda;
    color: #155724;
}

.difficulty-intermediate[b-17p0k2c1c2] {
    background: #fff3cd;
    color: #856404;
}

.difficulty-advanced[b-17p0k2c1c2] {
    background: #f8d7da;
    color: #721c24;
}

.difficulty-expert[b-17p0k2c1c2] {
    background: #d1c4e9;
    color: #4a148c;
}

.difficulty-default[b-17p0k2c1c2] {
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-hint);
}

.exercise-focus[b-17p0k2c1c2] {
    display: block;
    font-size: 0.85rem;
    color: var(--accent-fill-rest);
    margin-bottom: 4px;
}

.exercise-category[b-17p0k2c1c2] {
    display: inline-block;
    font-size: 0.75rem;
    background: var(--neutral-layer-floating);
    color: var(--neutral-foreground-hint);
    padding: 2px 8px;
    border-radius: 8px;
}

.exercise-card-footer[b-17p0k2c1c2] {
    display: flex;
    justify-content: flex-end;
    gap: 4px;
    padding: 8px 12px;
    border-top: 1px solid var(--neutral-stroke-layer-rest);
    background: var(--neutral-layer-floating);
}

/* ========================================
   LOADING & EMPTY STATES
   ======================================== */

.loading-state[b-17p0k2c1c2],
.empty-state[b-17p0k2c1c2] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 64px 24px;
    text-align: center;
    color: var(--neutral-foreground-hint);
}

.loading-state p[b-17p0k2c1c2],
.empty-state p[b-17p0k2c1c2] {
    margin: 16px 0;
}

.empty-state h4[b-17p0k2c1c2] {
    margin: 16px 0 8px 0;
    color: var(--neutral-foreground-rest);
}

.load-more[b-17p0k2c1c2] {
    display: flex;
    justify-content: center;
    padding: 24px;
}

/* ========================================
   EXERCISE DETAILS DIALOG
   ======================================== */

.exercise-details-dialog[b-17p0k2c1c2] {
    max-width: 500px;
}

.dialog-header-content[b-17p0k2c1c2] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.exercise-detail-content[b-17p0k2c1c2] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.detail-row[b-17p0k2c1c2] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.detail-label[b-17p0k2c1c2] {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--neutral-foreground-hint);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.detail-value[b-17p0k2c1c2] {
    font-size: 1rem;
    color: var(--neutral-foreground-rest);
}

.detail-row.description p[b-17p0k2c1c2] {
    margin: 0;
    line-height: 1.5;
}

/* ========================================
   RESPONSIVE - TABLET
   ======================================== */

@media (max-width: 1024px) {
    .discover-container[b-17p0k2c1c2] {
        padding: 20px;
    }

    .concept-cards[b-17p0k2c1c2] {
        grid-template-columns: repeat(2, 1fr);
    }

    .exercise-grid[b-17p0k2c1c2] {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
}

/* ========================================
   RESPONSIVE - MOBILE
   ======================================== */

@media (max-width: 768px) {
    .discover-container[b-17p0k2c1c2] {
        padding: 16px;
    }

    .discover-hero[b-17p0k2c1c2] {
        padding: 20px 16px;
        border-radius: 10px;
    }

    .discover-hero h2[b-17p0k2c1c2] {
        font-size: 1.25rem;
    }

    .discover-hero p[b-17p0k2c1c2] {
        font-size: 0.9rem;
    }

    .concept-cards[b-17p0k2c1c2] {
        grid-template-columns: 1fr;
    }

    .concept-card[b-17p0k2c1c2] {
        text-align: left;
    }

    .concept-tips[b-17p0k2c1c2] {
        text-align: left;
    }

    .exercise-controls[b-17p0k2c1c2] {
        gap: 12px;
    }

    .search-box[b-17p0k2c1c2] {
        max-width: none;
    }

    .filter-chips[b-17p0k2c1c2] {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        padding-bottom: 0;
    }

    .filter-chip[b-17p0k2c1c2] {
        flex-shrink: 0;
        padding: 4px 10px;
        font-size: 0.8rem;
    }

    .exercise-grid[b-17p0k2c1c2] {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .exercise-card-clickable[b-17p0k2c1c2] {
        padding: 12px;
    }

    .exercise-card-header[b-17p0k2c1c2] {
        padding: 0 0 8px 0;
    }

    .exercise-card-content[b-17p0k2c1c2] {
        padding: 0;
    }

    .exercise-card-content h4[b-17p0k2c1c2] {
        font-size: 0.9rem;
    }

    .exercise-card-footer[b-17p0k2c1c2] {
        padding: 8px 12px;
    }

    .setup-steps li[b-17p0k2c1c2] {
        padding: 10px 0 10px 12px;
    }
}

/* ========================================
   RESPONSIVE - SMALL MOBILE
   ======================================== */

@media (max-width: 480px) {
    .discover-container[b-17p0k2c1c2] {
        padding: 12px;
    }

    .discover-hero[b-17p0k2c1c2] {
        padding: 16px 12px;
        margin-bottom: 20px;
    }

    .discover-hero h2[b-17p0k2c1c2] {
        font-size: 1.1rem;
    }

    .hero-icon[b-17p0k2c1c2] {
        display: none;
    }

    .section-header h3[b-17p0k2c1c2] {
        font-size: 1.25rem;
    }
}
/* /Components/Workout/WorkoutManage.razor.rz.scp.css */
/* ===========================================================================
   WORKOUT MANAGE - TWO-PANEL LAYOUT WITH FILTER + LIST
   
   FLUENT UI LAYOUT PATTERN:
   -------------------------
   FluentUI Blazor components render as Web Components with shadow DOM.
   Wrap them in container <div> elements for stable layout control.
   Use 'auto' sizing in grids to let components size naturally.
   =========================================================================== */

/* Management Actions Bar */
.management-actions-bar[b-p27sybc664] {
    background: linear-gradient(135deg, var(--accent-fill-rest) 0%, var(--accent-fill-hover) 100%);
    border-radius: 12px;
    padding: 20px 24px;
    margin-bottom: 24px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
}

.actions-header h3[b-p27sybc664] {
    margin: 0 0 4px 0;
    font-size: 1.25rem;
    font-weight: 600;
    color: white;
}

.actions-header p[b-p27sybc664] {
    margin: 0;
    font-size: 0.9rem;
    color: rgba(255, 255, 255, 0.9);
}

.actions-buttons[b-p27sybc664] {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .management-actions-bar[b-p27sybc664] {
        flex-direction: column;
        align-items: stretch;
        padding: 16px;
    }

    .actions-header[b-p27sybc664] {
        text-align: center;
    }

    .actions-buttons[b-p27sybc664] {
        flex-direction: column;
    }
}

/* Main Container - Two Panel Layout */
.manage-workout-container[b-p27sybc664] {
    display: grid;
    grid-template-columns: 320px 1fr;
    gap: 24px;
    min-height: 600px;
    max-width: 1400px;
    margin: 0 auto;
    padding: 16px;
}

/* Responsive: Stack on mobile */
@media (max-width: 900px) {
    .manage-workout-container[b-p27sybc664] {
        grid-template-columns: 1fr;
        gap: 16px;
    }
}

/* Panel Headers */
.panel-header[b-p27sybc664] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 16px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--color-neutral-light);
}

.panel-header h4[b-p27sybc664] {
    margin: 0;
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-neutral-dark);
}

/* ===========================================================================
   LEFT PANEL: Workout List
   =========================================================================== */

.workout-list-panel[b-p27sybc664] {
    background: var(--color-neutral);
    border-radius: 12px;
    padding: 16px;
    border: 1px solid var(--color-neutral-light);
    display: flex;
    flex-direction: column;
    max-height: calc(100vh - 150px);
}

/* Filter Section */
.filter-section[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-bottom: 16px;
    border-bottom: 1px solid var(--color-neutral-light);
    margin-bottom: 16px;
}

.filter-row[b-p27sybc664] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.filter-row > div[b-p27sybc664] {
    min-width: 0;
}

.filter-actions[b-p27sybc664] {
    display: flex;
    gap: 8px;
}

.filter-actions > *[b-p27sybc664] {
    flex: 1;
}

/* Workout List Section */
.workout-list-section[b-p27sybc664] {
    flex: 1;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.workout-items[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1;
    overflow-y: auto;
}

/* Individual Workout Item */
.workout-list-item[b-p27sybc664] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--color-neutral-light);
    cursor: pointer;
    transition: all 0.2s ease;
}

.workout-list-item:hover[b-p27sybc664] {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.workout-list-item.selected[b-p27sybc664] {
    border-color: var(--color-primary);
    background: var(--color-primary-light);
}

.workout-item-date[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 40px;
    padding: 4px 8px;
    background: var(--color-secondary-light);
    border-radius: 6px;
}

.workout-item-date .day[b-p27sybc664] {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.workout-item-date .month[b-p27sybc664] {
    font-size: 0.7rem;
    text-transform: uppercase;
    color: var(--color-neutral-medium);
}

.workout-item-info[b-p27sybc664] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.workout-item-type[b-p27sybc664] {
    font-weight: 500;
    font-size: 0.9rem;
    color: var(--color-neutral-dark);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.workout-item-phase[b-p27sybc664] {
    font-size: 0.75rem;
    color: var(--color-neutral-medium);
}

.workout-item-duration[b-p27sybc664] {
    font-size: 0.75rem;
    color: var(--color-neutral-medium);
    white-space: nowrap;
}

/* Loading and Empty States */
.loading-indicator[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    gap: 12px;
    color: var(--color-neutral-medium);
}

.empty-list[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px;
    text-align: center;
    color: var(--color-neutral-medium);
}

.empty-list p[b-p27sybc664] {
    margin: 8px 0 0 0;
    font-size: 0.9rem;
}

/* Pagination */
.pagination[b-p27sybc664] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 12px 0;
    border-top: 1px solid var(--color-neutral-light);
    margin-top: auto;
}

.page-info[b-p27sybc664] {
    font-size: 0.85rem;
    color: var(--color-neutral-medium);
}

.total-count[b-p27sybc664] {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-neutral-medium);
    padding-top: 8px;
}

/* ===========================================================================
   RIGHT PANEL: Workout Details
   =========================================================================== */

.workout-detail-panel[b-p27sybc664] {
    background: var(--color-neutral);
    border-radius: 12px;
    padding: 20px;
    border: 1px solid var(--color-neutral-light);
    overflow-y: auto;
    max-height: calc(100vh - 150px);
}

/* Workout Basic Info */
.workout-basic-info[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-bottom: 20px;
}

.info-row[b-p27sybc664] {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
}

.info-row > div[b-p27sybc664] {
    min-width: 0;
}

.info-row.full-width[b-p27sybc664] {
    grid-template-columns: 1fr;
}

/* Exercise Management */
.exercise-management[b-p27sybc664] {
    border-top: 1px solid var(--color-neutral-light);
    padding-top: 16px;
    margin-top: 16px;
}

.exercise-header[b-p27sybc664] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
}

.exercise-header h5[b-p27sybc664] {
    margin: 0;
    font-size: 1rem;
    font-weight: 600;
}

.exercise-list[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    gap: 12px;
    max-height: 400px;
    overflow-y: auto;
}

.exercise-edit-item[b-p27sybc664] {
    display: flex;
    gap: 8px;
    padding: 12px;
    background: white;
    border-radius: 8px;
    border: 1px solid var(--color-neutral-light);
}

.exercise-reorder[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
}

.exercise-details[b-p27sybc664] {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.exercise-name-row[b-p27sybc664] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.exercise-name-row strong[b-p27sybc664] {
    color: var(--color-primary);
    font-size: 0.95rem;
}

.exercise-params-row[b-p27sybc664] {
    display: grid;
    grid-template-columns: auto auto auto auto;
    gap: 8px;
}

.exercise-params-row > div[b-p27sybc664] {
    min-width: 0;
}

@media (max-width: 600px) {
    .exercise-params-row[b-p27sybc664] {
        grid-template-columns: 1fr 1fr;
    }
}

/* Empty State */
.empty-state[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 24px;
    text-align: center;
    color: var(--color-neutral-medium);
    min-height: 300px;
}

.empty-state h4[b-p27sybc664] {
    margin: 16px 0 8px 0;
    color: var(--color-neutral-dark);
}

.empty-state p[b-p27sybc664] {
    margin: 0;
    font-size: 0.9rem;
}

.no-exercises-edit[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24px;
    text-align: center;
    background: var(--color-tertiary-light);
    border-radius: 8px;
    color: var(--color-neutral-medium);
}

.no-exercises-edit p[b-p27sybc664] {
    margin: 8px 0 0 0;
}

/* Action Buttons */
.workout-actions[b-p27sybc664] {
    display: flex;
    gap: 12px;
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid var(--color-neutral-light);
}

/* ===========================================================================
   ADD EXERCISE DIALOG
   =========================================================================== */

.add-exercise-dialog[b-p27sybc664] {
    --dialog-width: min(95vw, 500px);
}

.add-exercise-content[b-p27sybc664] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}
/* /Components/Workout/WorkoutView.razor.rz.scp.css */
/* =================================
   WORKOUT PLANNER VIEW STYLES
   ================================= */

/* =================================
   RESPONSIVE VISIBILITY HELPERS
   ================================= */

.desktop-only[b-s8sbnzbwb1] {
    display: flex;
}

.mobile-only[b-s8sbnzbwb1] {
    display: none;
}

@media (max-width: 768px) {
    .desktop-only[b-s8sbnzbwb1] {
        display: none !important;
    }
    
    .mobile-only[b-s8sbnzbwb1] {
        display: block !important;
    }
}

/* =================================
   HEADER STYLING
   ================================= */

.workout-planner-header[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 24px;
    padding-bottom: 16px;
    border-bottom: 2px solid var(--color-primary);
    flex-wrap: wrap;
    gap: 16px;
    background-color: var(--color-neutral);
    border-radius: var(--workout-border-radius-small);
    padding: 16px;
}

.header-title[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-title h2[b-s8sbnzbwb1] {
    margin: 0;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-neutral-dark);
}

.header-icon[b-s8sbnzbwb1] {
    color: var(--color-primary);
}

.header-controls[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.week-display[b-s8sbnzbwb1] {
    padding: 8px 16px;
    background-color: var(--color-secondary-light);
    border-radius: 6px;
    font-weight: 500;
    min-width: 160px;
    text-align: center;
    border: 1px solid var(--color-secondary);
}

.week-range[b-s8sbnzbwb1] {
    color: var(--color-neutral-dark);
    font-size: 0.875rem;
    font-weight: 600;
}

/* =================================
   MOBILE HEADER STYLING
   ================================= */

.workout-planner-header-mobile[b-s8sbnzbwb1] {
    background-color: var(--color-neutral);
    border-radius: var(--workout-border-radius-small);
    padding: 12px;
    margin-bottom: 12px;
}

.mobile-header-row[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 10px;
}

.mobile-week-range[b-s8sbnzbwb1] {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-neutral-dark);
    padding: 4px 8px;
    background-color: var(--color-secondary-light);
    border-radius: 4px;
    min-width: 140px;
    text-align: center;
}

.mobile-actions-row[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.header-actions[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* =================================
   WEEK GRID LAYOUT
   ================================= */

.week-grid-container[b-s8sbnzbwb1] {
    display: flex;
    justify-content: center;
}

.week-grid[b-s8sbnzbwb1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: minmax(min-content, auto);
    gap: 20px;
    width: 100%;
}

/* Day Cards */
.day-card[b-s8sbnzbwb1] {
    background-color: var(--color-neutral);
    border-radius: 12px;
    padding: 18px;
    transition: all 0.3s ease;
    position: relative;
    overflow: visible;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.day-card:hover[b-s8sbnzbwb1] {
    transform: translateY(-4px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
    border-color: var(--color-primary);
}

.day-card.today[b-s8sbnzbwb1] {
    background-color: var(--color-secondary-light);
    border-color: var(--color-primary);
    box-shadow: 0 0 0 2px var(--color-primary);
}

.day-card.today[b-s8sbnzbwb1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 1%;
    right: 0;
    height: 4px;
    width: 98%;
    background: linear-gradient(90deg, var(--color-primary), var(--color-accent));
    border-radius: 12px 12px 0 0;
}

.day-card.weekend[b-s8sbnzbwb1] {
    background-color: var(--color-secondary-light);
}

.day-header[b-s8sbnzbwb1] {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-neutral-light);
}

.day-info[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.day-name[b-s8sbnzbwb1] {
    font-weight: 600;
    font-size: 1.1rem;
    color: var(--color-neutral-dark);
}

.day-date[b-s8sbnzbwb1] {
    font-size: 0.9rem;
    color: var(--color-neutral-medium);
}

.day-actions[b-s8sbnzbwb1] {
    display: flex;
    gap: 4px;
    opacity: 0.8;
}

.day-actions:hover[b-s8sbnzbwb1] {
    opacity: 1;
}

/* Workout Cards */
.day-workouts[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.workout-card[b-s8sbnzbwb1] {
    background-color: var(--color-neutral);
    border: 1px solid var(--color-neutral-light);
    border-radius: 8px;
    padding: 12px;
    transition: all 0.2s ease;
    cursor: pointer;
}

.workout-card:hover[b-s8sbnzbwb1] {
    border-color: var(--color-primary);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.workout-card.swapping[b-s8sbnzbwb1] {
    border-color: var(--color-accent);
    background-color: var(--color-accent-light);
    box-shadow: 0 0 0 2px var(--color-accent);
    animation: pulse-b-s8sbnzbwb1 2s infinite;
}

/* Completed Workout Styling */
.workout-card.completed[b-s8sbnzbwb1] {
    background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%);
    border-color: #86efac;
    position: relative;
}

.workout-card.completed[b-s8sbnzbwb1]::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    background: linear-gradient(90deg, #22c55e, #16a34a);
    border-radius: 8px 8px 0 0;
}

.workout-card.completed .workout-title[b-s8sbnzbwb1] {
    color: #166534;
}

.workout-card.completed .exercise-name[b-s8sbnzbwb1] {
    color: #166534;
}

.completion-badge[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 10px;
    background: linear-gradient(135deg, #22c55e, #16a34a);
    color: white;
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    box-shadow: 0 2px 4px rgba(34, 197, 94, 0.3);
}

.completion-badge[b-s8sbnzbwb1]  svg {
    width: 14px;
    height: 14px;
}

.completion-notes[b-s8sbnzbwb1] {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    padding: 8px 10px;
    margin-bottom: 8px;
    background-color: rgba(34, 197, 94, 0.1);
    border-radius: 6px;
    border-left: 3px solid #22c55e;
    font-size: 0.8rem;
    color: #166534;
    font-style: italic;
}

.completion-notes[b-s8sbnzbwb1]  svg {
    flex-shrink: 0;
    margin-top: 2px;
    opacity: 0.7;
}

.completion-notes span[b-s8sbnzbwb1] {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
}

@keyframes pulse-b-s8sbnzbwb1 {
    0% { opacity: 1; }
    50% { opacity: 0.8; }
    100% { opacity: 1; }
}

.workout-header[b-s8sbnzbwb1] {
    margin-bottom: 8px;
}

.workout-title-section[b-s8sbnzbwb1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 4px;
}

.workout-title[b-s8sbnzbwb1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-primary);
    margin: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.workout-duration[b-s8sbnzbwb1] {
    font-size: 0.85rem;
    color: var(--color-neutral-medium);
    background-color: var(--color-secondary-light);
    padding: 2px 8px;
    border-radius: 12px;
}

.workout-content[b-s8sbnzbwb1] {
    color: var(--color-neutral-dark);
}

.workout-notes[b-s8sbnzbwb1] {
    font-size: 0.9rem;
    color: var(--color-neutral-medium);
    margin: 0 0 8px 0;
    font-style: italic;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    white-space: normal;
}

.workout-exercises[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.exercise-item[b-s8sbnzbwb1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 8px;
    background-color: var(--color-secondary-light);
    border-radius: 6px;
    font-size: 0.85rem;
    border-left: 3px solid transparent;
}

/* Exercise Purpose Color Coding */
.exercise-item.purpose-warmup[b-s8sbnzbwb1] {
    border-left-color: var(--purpose-warmup);
}

.exercise-item.purpose-technique[b-s8sbnzbwb1] {
    border-left-color: var(--purpose-technique);
}

.exercise-item.purpose-corelift[b-s8sbnzbwb1] {
    border-left-color: var(--purpose-corelift);
}

.exercise-item.purpose-strength[b-s8sbnzbwb1] {
    border-left-color: var(--purpose-strength);
}

.exercise-item.purpose-accessory[b-s8sbnzbwb1] {
    border-left-color: var(--purpose-accessory);
}

.exercise-purpose[b-s8sbnzbwb1] {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 2px 5px;
    border-radius: 4px;
    margin-right: 6px;
    text-transform: uppercase;
    min-width: 16px;
    text-align: center;
}

.exercise-purpose.purpose-warmup[b-s8sbnzbwb1] {
    background: var(--purpose-warmup-bg);
    color: var(--purpose-warmup-text);
}

.exercise-purpose.purpose-technique[b-s8sbnzbwb1] {
    background: var(--purpose-technique-bg);
    color: var(--purpose-technique-text);
}

.exercise-purpose.purpose-corelift[b-s8sbnzbwb1] {
    background: var(--purpose-corelift-bg);
    color: var(--purpose-corelift-text);
}

.exercise-purpose.purpose-strength[b-s8sbnzbwb1] {
    background: var(--purpose-strength-bg);
    color: var(--purpose-strength-text);
}

.exercise-purpose.purpose-accessory[b-s8sbnzbwb1] {
    background: var(--purpose-accessory-bg);
    color: var(--purpose-accessory-text);
}

.exercise-name[b-s8sbnzbwb1] {
    font-weight: 500;
    color: var(--color-primary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.sets-reps[b-s8sbnzbwb1] {
    color: var(--color-neutral-medium);
    margin-left: 8px;
}

.weight[b-s8sbnzbwb1] {
    color: var(--color-accent);
    font-weight: 500;
    margin-left: 8px;
}

.no-exercises[b-s8sbnzbwb1] {
    font-size: 0.85rem;
    color: var(--color-neutral-medium);
    font-style: italic;
    margin: 0;
}

/* Empty State */
.empty-workout[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 28px 16px;
    text-align: center;
    border: 2px dashed var(--color-secondary);
    border-radius: 8px;
    background-color: var(--color-tertiary-light);
    color: var(--color-secondary);
    transition: all 0.3s ease;
}

.empty-icon[b-s8sbnzbwb1] {
    font-size: 2rem;
    opacity: 0.6;
    margin-bottom: 10px;
    color: var(--color-secondary);
}

.empty-text[b-s8sbnzbwb1] {
    font-size: 0.9rem;
    font-weight: 500;
    margin-bottom: 10px;
}

.empty-workout.swappable[b-s8sbnzbwb1] {
    border-color: var(--color-accent);
    background-color: var(--color-accent-light);
    cursor: pointer;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.empty-workout.swappable:hover[b-s8sbnzbwb1] {
    border-color: var(--color-accent);
    background-color: var(--color-warm-light);
    transform: translateY(-3px);
}

.add-workout-btn[b-s8sbnzbwb1] {
    margin-top: 6px;
}

.swap-workout-btn[b-s8sbnzbwb1] {
    margin-top: 6px;
    background-color: var(--color-accent);
    color: var(--color-neutral);
    border: none;
}

/* Success Indicator */
.success-indicator-card[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-accent-light), var(--color-primary-light));
    border-radius: 12px;
    padding: 16px;
}

.success-content[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    text-align: center;
}

.success-icon[b-s8sbnzbwb1] {
    font-size: 3rem;
    color: var(--color-accent);
}

.success-message[b-s8sbnzbwb1] {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-neutral-dark);
}

/* Week Grid Responsive */
@media (max-width: 768px) {
    .week-grid[b-s8sbnzbwb1] {
        grid-template-columns: 1fr;
    }
    
    .day-card[b-s8sbnzbwb1] {
        min-height: auto;
        height: auto;
    }

    .workout-card[b-s8sbnzbwb1] {
        height: auto;
        min-height: auto;
    }
}

/* =================================
   GENERATE WORKOUT DIALOG
   ================================= */

.generate-workout-content[b-s8sbnzbwb1] {
    padding: 16px 0;
    overflow: hidden;
}

@media (max-width: 768px) {
    .generate-workout-content[b-s8sbnzbwb1] {
        padding: 8px 0;
        max-height: 60vh;
        overflow-y: auto;
    }
    
    .day-type-grid[b-s8sbnzbwb1] {
        grid-template-columns: 1fr;
        gap: 12px;
        max-width: 100%;
    }
    
    .day-type-tile[b-s8sbnzbwb1] {
        padding: 12px;
    }

    [b-s8sbnzbwb1] .fluent-dialog-body {
        max-height: 65vh;
        overflow-y: auto;
    }

    .week-template-grid[b-s8sbnzbwb1] {
        grid-template-columns: 1fr;
    }

    .template-grid[b-s8sbnzbwb1] {
        grid-template-columns: 1fr;
    }
}

.template-header[b-s8sbnzbwb1] {
    text-align: center;
    margin-bottom: 24px;
}

.template-title[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    margin-bottom: 8px;
}

.template-title h3[b-s8sbnzbwb1] {
    margin: 0;
    color: var(--color-primary);
    font-weight: 600;
}

.template-subtitle[b-s8sbnzbwb1] {
    color: var(--color-neutral-medium);
    margin: 0;
    font-size: 0.9rem;
}

.template-grid[b-s8sbnzbwb1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 16px;
    margin-top: 16px;
}

.template-tile[b-s8sbnzbwb1] {
    background: var(--color-secondary-light);
    border: 2px solid var(--color-neutral-light);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.template-tile:hover[b-s8sbnzbwb1] {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.template-tile-header[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 12px;
}

.template-tile-icon[b-s8sbnzbwb1] {
    color: var(--color-primary);
    font-size: 1.5rem;
}

.template-tile-name[b-s8sbnzbwb1] {
    margin: 0;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 1rem;
}

.template-tile-title[b-s8sbnzbwb1] {
    flex: 1;
}

.template-duration[b-s8sbnzbwb1] {
    font-size: 0.75rem;
    color: var(--color-neutral-medium);
    font-weight: normal;
}

.template-tile-description[b-s8sbnzbwb1] {
    color: var(--color-neutral-medium);
    font-size: 0.85rem;
    margin: 0 0 12px 0;
    line-height: 1.4;
}

.template-tile-exercises[b-s8sbnzbwb1] {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.exercise-preview[b-s8sbnzbwb1] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.exercise-count[b-s8sbnzbwb1] {
    color: var(--color-neutral-medium);
    font-size: 0.75rem;
    font-style: italic;
}

/* =================================
   DAY TYPE SELECTION
   ================================= */

.week-planning-section[b-s8sbnzbwb1] {
    margin-bottom: 1rem;
}

.week-planning-button[b-s8sbnzbwb1] {
    width: 100%;
    padding: 1.25rem 1.5rem;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark, #1565c0) 100%);
    color: white !important;
    border: none;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    align-items: center;
    gap: 1rem;
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb, 33, 150, 243), 0.3);
}

.week-planning-button:hover[b-s8sbnzbwb1] {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(var(--color-primary-rgb, 33, 150, 243), 0.4);
}

.week-planning-button .button-icon[b-s8sbnzbwb1] {
    background: rgba(255, 255, 255, 0.2);
    padding: 0.75rem;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.week-planning-button .button-icon[b-s8sbnzbwb1]  svg {
    fill: white;
    width: 24px;
    height: 24px;
}

.week-planning-button .button-content[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    text-align: left;
}

.week-planning-button .button-title[b-s8sbnzbwb1] {
    font-size: 1.1rem;
    font-weight: 600;
    color: white;
    margin-bottom: 0.25rem;
}

.week-planning-button .button-subtitle[b-s8sbnzbwb1] {
    font-size: 0.85rem;
    color: rgba(255, 255, 255, 0.85);
}

.week-planning-button .button-arrow[b-s8sbnzbwb1] {
    margin-left: auto;
    opacity: 0.7;
    transition: transform 0.3s ease;
}

.week-planning-button .button-arrow[b-s8sbnzbwb1]  svg {
    fill: white;
    width: 20px;
    height: 20px;
}

.week-planning-button:hover .button-arrow[b-s8sbnzbwb1] {
    transform: translateX(4px);
    opacity: 1;
}

.section-divider[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    text-align: center;
    margin: 1.5rem 0;
    color: var(--color-neutral-medium);
    font-size: 0.85rem;
}

.section-divider[b-s8sbnzbwb1]::before,
.section-divider[b-s8sbnzbwb1]::after {
    content: '';
    flex: 1;
    border-bottom: 1px solid var(--color-neutral-light);
}

.section-divider span[b-s8sbnzbwb1] {
    padding: 0 1rem;
}

.day-type-grid[b-s8sbnzbwb1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 16px;
}

.day-type-tile[b-s8sbnzbwb1] {
    background: var(--color-secondary-light);
    border: 2px solid var(--color-neutral-light);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
    text-align: center;
}

.day-type-tile:hover[b-s8sbnzbwb1] {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.day-type-tile-header[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    margin-bottom: 8px;
}

.day-type-icon[b-s8sbnzbwb1] {
    color: var(--color-primary);
    font-size: 2rem;
}

.day-type-tile h4[b-s8sbnzbwb1] {
    margin: 0;
    color: var(--color-primary);
    font-weight: 600;
}

.day-type-description[b-s8sbnzbwb1] {
    color: var(--color-neutral-medium);
    font-size: 0.8rem;
    margin: 0 0 8px 0;
    line-height: 1.3;
}

.template-count[b-s8sbnzbwb1] {
    background: var(--color-primary-light);
    color: var(--color-primary);
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 0.7rem;
    font-weight: 500;
}

/* =================================
   WEEK PLANNING
   ================================= */

.week-template-grid[b-s8sbnzbwb1] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 16px;
}

.week-template-tile[b-s8sbnzbwb1] {
    background: var(--color-secondary-light);
    border: 2px solid var(--color-neutral-light);
    border-radius: 12px;
    padding: 16px;
    cursor: pointer;
    transition: all 0.3s ease;
}

.week-template-tile:hover[b-s8sbnzbwb1] {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
}

.week-template-header[b-s8sbnzbwb1] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--color-neutral-light);
}

.week-template-header h4[b-s8sbnzbwb1] {
    margin: 0;
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.95rem;
}

.day-count[b-s8sbnzbwb1] {
    background: var(--color-primary);
    color: white;
    padding: 3px 8px;
    border-radius: 10px;
    font-size: 0.7rem;
    font-weight: 500;
}

.week-template-days[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.week-day-preview[b-s8sbnzbwb1] {
    display: flex;
    gap: 10px;
    align-items: center;
    padding: 6px 10px;
    background: var(--color-neutral);
    border-radius: 6px;
}

.day-label[b-s8sbnzbwb1] {
    font-weight: 600;
    color: var(--color-primary);
    min-width: 35px;
    font-size: 0.8rem;
}

.template-name[b-s8sbnzbwb1] {
    color: var(--color-neutral-dark);
    font-size: 0.8rem;
}

/* =================================
   EXERCISE PHASES
   ================================= */

.exercise-phases[b-s8sbnzbwb1] {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-top: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--color-neutral-light);
}

.phase-item[b-s8sbnzbwb1] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px;
    border-radius: 6px;
    font-size: 0.75rem;
}

.phase-label[b-s8sbnzbwb1] {
    font-weight: 600;
    min-width: 65px;
    font-size: 0.65rem;
    text-transform: uppercase;
}

.phase-exercise[b-s8sbnzbwb1] {
    color: var(--color-neutral-dark);
    flex: 1;
}

.phase-item.warmup[b-s8sbnzbwb1] {
    background: rgba(255, 193, 7, 0.15);
}

.phase-item.warmup .phase-label[b-s8sbnzbwb1] {
    color: #d4a106;
}

.phase-item.technique[b-s8sbnzbwb1] {
    background: rgba(33, 150, 243, 0.15);
}

.phase-item.technique .phase-label[b-s8sbnzbwb1] {
    color: #1976d2;
}

.phase-item.core[b-s8sbnzbwb1] {
    background: rgba(76, 175, 80, 0.15);
}

.phase-item.core .phase-label[b-s8sbnzbwb1] {
    color: #388e3c;
}

.phase-item.strength[b-s8sbnzbwb1] {
    background: rgba(156, 39, 176, 0.15);
}

.phase-item.strength .phase-label[b-s8sbnzbwb1] {
    color: #7b1fa2;
}

.phase-item.accessory[b-s8sbnzbwb1] {
    background: rgba(96, 125, 139, 0.15);
}

.phase-item.accessory .phase-label[b-s8sbnzbwb1] {
    color: #546e7a;
}

/* =================================
   NO EXERCISES EDIT STATE
   ================================= */

.no-exercises-edit[b-s8sbnzbwb1] {
    text-align: center;
    padding: 32px 24px;
    background-color: var(--color-tertiary-light);
    border-radius: 8px;
    margin: 16px 0;
    color: var(--color-neutral-medium);
}