web/frontend/src/resources/css/_profile.scss

@use "common/colors" as *;
@use "common/material" as *;

#profile-dialog .content {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 400px;

    .header-top {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 16px;
        position: relative;
        padding-bottom: 16px;
        border-bottom: 1px solid $color-dark-outline;

        .profile-picture-container {
            position: relative;
            $size: 70px;
            width: $size;
            height: $size;
            flex-shrink: 0;

            #profile-picture {
                width: $size;
                height: $size;
                border-radius: 50%;
                object-fit: cover;
            }

            .upload-overlay {
                position: absolute;
                bottom: 0;
                right: 0;
                width: 28px;
                height: 28px;
                cursor: pointer;
            }
        }

        mdui-text-field {
            flex: 1;
        }
    }

    #profile-form {
        display: flex;
        flex-direction: column;
        gap: 16px;

        mdui-text-field {
            width: 100%;
        }

        .dialog-actions {
            display: flex;
            gap: 12px;
            padding-top: 16px;
            border-top: 1px solid $color-dark-outline;

            > * {
                flex: 1;
            }
        }
    }
}

// User profile dialog content styles
#user-profile-dialog .content {
    display: flex;
    gap: 1.5rem;

    .profile-picture-section {
        flex-shrink: 0;

        .profile-picture {
            width: 80px;
            height: 80px;
            border-radius: 50%;
            object-fit: cover;
            border: 2px solid $color-dark-outline;
        }
    }

    .profile-info {
        flex: 1;
        display: flex;
        flex-direction: column;
        gap: 1rem;

        .username-section {
            display: flex;
            align-items: center;
            gap: 0.75rem;

            .username {
                margin: 0;
                color: $color-dark-on-surface;
                font-size: 1.1rem;
                font-weight: 600;
            }

            .online-status {
                display: flex;
                align-items: center;
                gap: 0.5rem;
                font-size: 0.85rem;
                padding: 0.25rem 0.5rem;
                border-radius: 12px;
                font-weight: 500;

                &.online {
                    color: $success;
                    background-color: rgba(76, 175, 80, 0.1);

                    .online-indicator {
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: $success;
                    }
                }

                &.offline {
                    color: $color-dark-on-surface-variant;
                    background-color: rgba(255, 255, 255, 0.05);

                    .offline-indicator {
                        width: 8px;
                        height: 8px;
                        border-radius: 50%;
                        background-color: $color-dark-on-surface-variant;
                    }
                }
            }
        }

        .bio-section {
            label {
                display: block;
                color: $color-dark-on-surface-variant;
                font-size: 0.85rem;
                font-weight: 500;
                margin-bottom: 0.5rem;
            }

            .bio-display {
                color: $color-dark-on-surface;
                font-size: 0.9rem;
                line-height: 1.4;
                padding: 0.75rem;
                background-color: $color-dark-surface;
                border-radius: 8px;
                border: 1px solid $color-dark-outline;
                min-height: 60px;
            }

            .bio-actions {
                display: flex;
                gap: 0.5rem;
                margin-top: 0.5rem;
            }
        }

        .profile-stats {
            display: flex;
            flex-direction: column;
            gap: 0.5rem;

            .stat {
                display: flex;
                justify-content: space-between;
                align-items: center;
                padding: 0.5rem 0;

                .stat-label {
                    color: $color-dark-on-surface-variant;
                    font-size: 0.85rem;
                }

                .stat-value {
                    color: $color-dark-on-surface;
                    font-size: 0.85rem;
                    font-weight: 500;
                }
            }
        }
    }
}

// Cropper Dialog Styles
#cropper-dialog {
    .cropper-dialog-content {
        display: flex;
        flex-direction: column;
        gap: 16px;
        min-width: 500px;
        max-width: 600px;
    }

    .cropper-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-bottom: 16px;
        border-bottom: 1px solid $color-dark-outline;

        h3 {
            margin: 0;
            color: $color-dark-on-surface;
        }
    }

    .cropper-container {
        display: flex;
        justify-content: center;
        align-items: center;
        min-height: 400px;
        background: $color-dark-surface-container;
        border-radius: 8px;
        overflow: hidden;

        #cropper-area {
            width: 100%;
            height: 100%;
            min-height: 400px;
        }
    }

    .cropper-actions {
        display: flex;
        gap: 12px;
        justify-content: flex-end;
        padding-top: 16px;
        border-top: 1px solid $color-dark-outline;
    }
}