.mud-dialog.ga-dialog,
.appointments-dialog,
.profile-dialog,
.delete-account-dialog {
    border-radius: 16px;
    overflow: hidden;
}

.ga-dialog-title,
.appointments-dialog-title,
.profile-dialog-title,
.delete-dialog-title {
    width: 100%;
    padding: 4px 2px;
    gap: 12px;
}

.ga-dialog-title-icon,
.appointments-title-icon,
.profile-dialog-title-icon,
.delete-dialog-title-icon {
    width: 44px;
    height: 44px;
    box-shadow: 0 12px 28px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.ga-dialog-title-icon.error,
.delete-dialog-title-icon {
    box-shadow: 0 12px 28px color-mix(in srgb, var(--mud-palette-error) 22%, transparent);
}

.ga-dialog-heading,
.ga-dialog-section-title,
.appointments-heading,
.appointment-service,
.appointment-time,
.appointment-detail-value,
.profile-dialog-heading,
.profile-dialog-section-title,
.delete-dialog-heading,
.delete-section-title {
    font-weight: 800;
    letter-spacing: 0;
    color: var(--mud-palette-text-primary);
}

.ga-dialog-muted,
.appointments-muted,
.profile-dialog-subtitle,
.profile-dialog-muted,
.delete-dialog-muted {
    color: var(--mud-palette-text-secondary);
}

.ga-dialog-content,
.appointments-content,
.profile-dialog-content,
.delete-dialog-content {
    padding-top: 6px;
}

.ga-dialog-message {
    padding: 14px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    text-align: center;
}

.ga-dialog-inline-card,
.delete-warning-card,
.delete-confirm-card,
.appointment-detail {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    background: color-mix(in srgb, var(--mud-palette-primary) 3%, var(--mud-palette-surface));
}

.ga-dialog-danger-card,
.delete-warning-card {
    border-color: color-mix(in srgb, var(--mud-palette-error) 28%, var(--mud-palette-divider));
    background: color-mix(in srgb, var(--mud-palette-error) 3%, var(--mud-palette-surface));
}

.ga-dialog-actions,
.appointments-actions-footer,
.profile-dialog-actions,
.delete-dialog-actions {
    width: 100%;
    gap: 8px;
    padding: 8px 8px 10px;
}

.ga-dialog-button,
.appointments-primary-button,
.appointments-secondary-button,
.profile-dialog-button,
.delete-dialog-button {
    min-width: 130px;
    height: 42px;
    border-radius: 10px;
    text-transform: none;
    font-weight: 800;
    letter-spacing: 0;
}

.ga-dialog-primary-button,
.appointments-primary-button,
.profile-dialog-save {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--mud-palette-primary) 22%, transparent);
}

.ga-dialog-danger-button,
.delete-final-button {
    box-shadow: 0 14px 30px color-mix(in srgb, var(--mud-palette-error) 24%, transparent);
}

.appointment-item {
    padding: 16px;
    border-radius: 14px;
    border: 1px solid var(--mud-palette-divider);
    border-left: 5px solid var(--status-color);
    background: color-mix(in srgb, var(--mud-palette-surface) 96%, transparent);
}

.appointment-info {
    min-width: 0;
    flex: 1;
}

.appointment-text-stack {
    min-width: 0;
}

.appointment-time-box {
    min-width: 82px;
    padding: 12px;
    border-radius: 12px;
    background: color-mix(in srgb, var(--mud-palette-primary) 5%, var(--mud-palette-surface));
    border: 1px solid var(--mud-palette-divider);
    text-align: center;
}

.appointment-service-row {
    flex-wrap: wrap;
}

.appointment-detail-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    margin-top: 8px;
}

.appointment-detail {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
}

.appointment-detail-value {
    word-break: break-word;
}

.appointment-actions {
    flex: 0 0 auto;
}

.appointments-content {
    max-height: 68vh;
    overflow-y: auto;
    padding-right: 4px;
}

.appointments-icon-button {
    border-radius: 10px;
}

.appointments-empty-state {
    min-height: 260px;
    padding: 36px 24px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-divider));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.profile-photo-panel {
    padding: 18px;
    border-radius: 14px;
    border: 1px dashed color-mix(in srgb, var(--mud-palette-primary) 35%, var(--mud-palette-divider));
    background: color-mix(in srgb, var(--mud-palette-primary) 4%, var(--mud-palette-surface));
    display: flex;
    align-items: center;
    gap: 18px;
}

.profile-photo-button {
    position: relative;
    width: 92px;
    height: 92px;
    border: 0;
    padding: 0;
    background: transparent;
    cursor: pointer;
    border-radius: 50%;
}

.profile-edit-avatar {
    width: 92px !important;
    height: 92px !important;
    font-size: 32px !important;
    font-weight: 800;
    color: #FFFFFF;
    background: linear-gradient(135deg, #2563EB, #14B8A6);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

.profile-edit-preview {
    width: 92px;
    height: 92px;
    border-radius: 50%;
    object-fit: cover;
    border: 3px solid var(--mud-palette-surface);
    box-shadow: 0 16px 34px rgba(15, 23, 42, .16);
}

.profile-photo-overlay {
    position: absolute;
    right: -2px;
    bottom: -2px;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    color: #FFFFFF;
    background: var(--mud-palette-primary);
    border: 3px solid var(--mud-palette-surface);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 22px rgba(15, 23, 42, .18);
}

.profile-photo-button:hover .profile-edit-avatar,
.profile-photo-button:hover .profile-edit-preview {
    transform: scale(1.03);
    transition: transform .16s ease;
}

.delete-list {
    margin-top: 12px;
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 8px 14px;
}

.delete-item {
    min-height: 38px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: var(--mud-palette-text-primary);
}

.delete-item .mud-icon-root {
    color: var(--mud-palette-error);
    font-size: 20px;
    flex: 0 0 auto;
}

.delete-confirm-card {
    display: flex;
    flex-direction: column;
    gap: 14px;
    background: var(--mud-palette-surface);
}

.delete-confirm-chip {
    width: fit-content;
    font-weight: 800;
    letter-spacing: 0;
}

.ga-dialog-preline {
    white-space: pre-line;
}

@media (max-width: 640px) {
    .ga-dialog-title,
    .appointments-dialog-title,
    .appointment-main-row,
    .appointments-actions-footer {
        align-items: stretch !important;
        flex-direction: column !important;
    }

    .appointment-info {
        flex-direction: column !important;
    }

    .appointment-time-box {
        width: 100%;
    }

    .appointment-detail-grid,
    .delete-list {
        grid-template-columns: 1fr;
    }

    .appointment-actions {
        justify-content: flex-start !important;
    }

    .ga-dialog-actions,
    .profile-dialog-actions,
    .delete-dialog-actions {
        flex-direction: column-reverse !important;
    }

    .ga-dialog-button,
    .appointments-primary-button,
    .appointments-secondary-button,
    .profile-dialog-button,
    .delete-dialog-button {
        width: 100%;
    }

    .profile-photo-panel {
        align-items: flex-start;
        flex-direction: column;
    }
}