/**
 * 이 파일은 영업관리 모듈의 일부입니다. (https://www.coursemos.co.kr)
 *
 * 영업관리 공통 UI 스타일을 정의한다.
 *
 * @file /modules/naddle/sales/styles/Sales.css
 * @author youlapark <youlapark@naddle.net>
 * @license MIT License
 * @modified 2025. 01. 17.
 *
 */
@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');

:root {
    --desk-history-icon: var(--aui-component-height-default);
    --desk-history-icon-gap: var(--aui-component-padding);
    --desk-history-padding: var(--aui-component-padding);
    --desk-history-gap: var(--aui-component-gap);
    --desk-history-block-height: var(--aui-component-height-default);

    --desk-history-line-color: var(--aui-color-background-200);
    --desk-history-accent-color: var(--aui-color-accent-500);
    --desk-history-accent-backward: var(--aui-color-accent-backward-500);
    --desk-history-background-primary: var(--aui-color-background-500);
    --desk-history-background-secondary: var(--aui-color-background-400);
    --desk-history-danger-color: var(--aui-color-danger-500);
    --desk-history-danger-hover-color: var(--aui-color-danger-600);
    --desk-history-begining-color: var(--aui-color-begining-500);
    --desk-history-mine-color: var(--aui-color-selection-500);
    --desk-history-public-color: var(--aui-color-mark-400);

    --desk-history-text-primary: var(--aui-color-text-500);
    --desk-history-text-secondary: var(--aui-color-text-300);

    --desk-font-size-primary: var(--aui-font-size-default);
    --desk-font-size-secondary: var(--aui-font-size-small);
}

section[data-role='admin'] {
    /*그리드*/
    div[data-type='panel'][data-role='grid'] {
        div[data-role='row'] {
            div[data-role='column'] {
                a {
                    color: var(--aui-color-accent-backward-500);
                    font-variant-numeric: tabular-nums;
                }

                small {
                    display: inline;
                    color: var(--aui-color-text-300);
                    vertical-align: top;
                }

                > label {
                    position: relative;
                    display: block;
                    height: calc(var(--aui-component-height-default) - var(--aui-component-gap));
                    line-height: calc(var(--aui-component-height-default) - var(--aui-component-gap));
                    margin-block: calc(var(--aui-component-gap) * -0.5);
                    border-radius: 12px;

                    &.PROCESS {
                        background: #e3f2fd;
                        color: #2196f3;
                    }

                    &.COMPLETED {
                        background: #c8e6c9;
                        color: black;
                    }

                    &.PENDING {
                        color: rgb(172, 172, 172);
                    }
                }

                i[data-type][data-extension] {
                    display: inline-block;
                    vertical-align: middle;
                    background-repeat: no-repeat;
                    background-image: url(/modules/attachment/images/file.png);
                    background-size: contain;
                    width: 24px;
                    height: 24px;

                    &[data-type='image'] {
                        background-image: url(/modules/attachment/images/file_type_image.png);
                    }

                    &[data-type='audio'] {
                        background-image: url(/modules/attachment/images/file_type_audio.png);
                    }

                    &[data-type='video'] {
                        background-image: url(/modules/attachment/images/file_type_video.png);
                    }

                    &[data-type='archive'] {
                        background-image: url(/modules/attachment/images/file_type_archive.png);
                    }

                    &[data-type='document'] {
                        background-image: url(/modules/attachment/images/file_type_document.png);
                    }

                    &[data-type='text'] {
                        background-image: url(/modules/attachment/images/file_type_document.png);
                    }

                    &[data-extension='ppt'],
                    &[data-extension='pptx'] {
                        background-image: url(/modules/attachment/images/file_extension_ppt.png);
                    }

                    &[data-extension='doc'],
                    &[data-extension='docx'] {
                        background-image: url(/modules/attachment/images/file_extension_doc.png);
                    }

                    &[data-extension='xls'],
                    &[data-extension='xlsx'] {
                        background-image: url(/modules/attachment/images/file_extension_xls.png);
                    }

                    &[data-extension='hwp'],
                    &[data-extension='hwpx'] {
                        background-image: url(/modules/attachment/images/file_extension_hwp.png);
                    }

                    &[data-extension='pdf'] {
                        background-image: url(/modules/attachment/images/file_extension_pdf.png);
                    }
                }
            }

            &.selected {
                div[data-role='column'] {
                    a {
                        color: var(--aui-color-accent-backward-500);
                        font-variant-numeric: tabular-nums;
                    }

                    small {
                        display: inline-block;
                        color: var(--aui-color-accent-backward-500);
                        opacity: 0.8;
                        vertical-align: baseline;
                        margin-bottom: -2px;
                        height: 1lh;
                    }

                    label {
                        &.END {
                            color: var(--aui-color-accent-backward-500);
                            opacity: 0.8;
                        }
                    }
                }
            }
        }
    }

    div[data-role='form'] {
        &.editor {
            div.fr-box {
                border: 0;
            }

            div.fr-toolbar {
                &::before {
                    border-bottom: var(--im-wysiwyg-toolbar-border-weight) solid var(--im-wysiwyg-toolbar-border-color) !important;
                }
            }
        }
    }
}

div[data-role='no-history'] {
    padding: 20px;
    font-size: 18px;
}

/*댓글 */
div[data-role='history'] {
    padding: var(--desk-history-padding);
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: var(--desk-history-icon-gap);
    position: relative;

    &:first-child {
        border-top: 1px dotted var(--desk-history-line-color);
    }

    &:last-child {
        &::before {
            height: 20px;
        }
    }

    &::before {
        position: absolute;
        left: calc(var(--desk-history-icon) / 2 - 1px + var(--desk-history-padding));
        top: 0;
        width: 2px;
        background: var(--desk-history-line-color);
        height: 100%;
        z-index: -1;
        content: ' ';
    }

    > i[data-role='icon'] {
        width: var(--desk-history-icon);
        height: var(--desk-history-icon);
        line-height: var(--desk-history-icon);
        color: #fff;
        background: #000;
        border-radius: 50%;
        text-align: center;
        font-style: normal;
        flex-shrink: 0;
        font-family: moimz;

        background-size: cover;
        background-position: 50% 50%;
        border: 1px solid var(--desk-history-line-color);
        position: relative;

        &.mine {
            border: 2px solid var(--desk-history-accent-color);

            &::after {
                position: absolute;
                right: -5px;
                bottom: -5px;
                width: 20px;
                height: 20px;
                font-size: 12px;
                background: var(--desk-history-accent-color);
                color: var(--desk-history-accent-backward);
                text-align: center;
                line-height: 20px;
                content: '나';
                border-radius: 50%;
            }
        }
    }

    > div[data-role='content'] {
        display: flex;
        flex-direction: column;
        align-items: stretch;
        flex-grow: 1;
        flex-shrink: 1;
        overflow: hidden;

        > div[data-role='header'] {
            line-height: calc(var(--desk-history-block-height) - var(--desk-history-gap) * 2);
            padding-block: var(--desk-history-gap);

            > span {
                > small {
                    color: var(--desk-history-text-secondary);
                }
            }

            &:has(span[data-role='name']) {
                gap: var(--desk-history-gap);

                display: flex;
                align-items: center;

                > span[data-role='name'] {
                    flex-shrink: 1;
                    flex-grow: 1;
                    overflow: hidden;
                    text-overflow: ellipsis;
                    font-weight: 700;

                    > i {
                        display: none;
                    }

                    > time {
                        display: inline-block;
                        width: fit-content !important;
                        line-height: calc(var(--desk-history-block-height) - var(--desk-history-gap) * 2);
                        color: var(--desk-history-text-secondary);
                        font-size: var(--desk-font-size-secondary);
                        margin-right: 8px;
                        margin-left: 5px;
                    }
                }

                > button,
                > span.code {
                    flex-shrink: 0;
                    margin-left: auto;
                    line-height: calc(var(--desk-history-block-height) - var(--desk-history-gap));
                    font-size: var(--desk-font-size-primary);
                    font-family: moimz;
                    text-align: center;

                    &.EDIT {
                        &::before {
                            content: '\e411';
                        }
                    }

                    &.EDIT {
                        color: lightblue;
                    }
                }

                > button {
                    background: var(--desk-history-danger-color);
                    border: 0;
                    width: calc(var(--desk-history-block-height) - var(--desk-history-gap));
                    height: calc(var(--desk-history-block-height) - var(--desk-history-gap));
                    border-radius: 3px;
                    cursor: pointer;
                    color: var(--desk-history-accent-backward);
                }

                > button:hover {
                    background: var(--desk-history-danger-hover-color);
                }

                > button::before {
                    content: '\e414';
                    background: var(--desk-history-danger-color);
                }

                > button:hover::before {
                    background: var(--desk-history-danger-hover-color);
                }

                > button[disabled] {
                    cursor: not-allowed;
                    background: var(--desk-history-danger-color);
                    opacity: 0.5;
                }
            }
        }

        > div[data-role='message'] {
            background: var(--desk-history-background-secondary);
            padding: var(--desk-history-padding);
            border-radius: 3px;
            line-height: 1.8;

            &:has(span[data-role='edit']) {
                > div {
                    margin: -8px 0 -8px 0;
                }

                span[data-role] {
                    display: inline-block;
                    margin-block: calc(var(--desk-history-gap) / 2);
                    line-height: var(--desk-history-block-height);

                    &[data-role='title'] {
                        font-weight: 700;
                        padding-right: 10px;
                    }

                    &[data-role='origin'] {
                        color: var(--desk-history-text-secondary);
                    }

                    &[data-role='edit'] {
                        font-weight: 700;
                        position: relative;
                    }

                    &[data-role='origin'] + span[data-role='edit'] {
                        padding-left: 20px;
                        position: relative;

                        &::before {
                            position: absolute;
                            top: 0;
                            left: 0;
                            width: 20px;
                            height: 1lh;
                            text-align: center;
                            font-family: moimz;
                            content: '\e232';
                        }

                        &.before {
                            &::before {
                                content: '\e231';
                            }
                        }
                    }

                    > i.photo {
                        width: calc(var(--desk-history-block-height) - var(--desk-history-gap));
                        height: calc(var(--desk-history-block-height) - var(--desk-history-gap));
                        margin-block: calc(var(--desk-history-gap) / 2);
                    }

                    > small {
                        font-weight: 400;
                        color: var(--desk-history-text-secondary);
                    }
                }
            }

            &:has(div[data-role='wysiwyg-content']) {
                margin-top: var(--desk-history-gap);

                > div[data-role='wysiwyg-content'] {
                    padding: 0;
                }

                &.public {
                    background: var(--desk-history-public-color);

                    &::after {
                        display: block;
                        margin-top: var(--desk-history-padding);
                        width: 100%;
                        height: var(--desk-history-block-height);
                        line-height: var(--desk-history-block-height);
                        border-radius: 3px;
                        padding-inline: var(--desk-history-padding);
                        background: var(--desk-history-accent-color);
                        color: var(--desk-history-accent-backward);
                        box-sizing: border-box;
                        content: '이 댓글은 고객에게 공개되어 있습니다.';
                    }
                }
            }

            > [data-role='detail-view'] {
                display: inline-block;
                height: auto;
                line-height: normal;
                border: none;
                cursor: pointer;
                font-size: var(--desk-font-size-secondary);
                background: none;
                color: var(--desk-history-accent-color);
                text-decoration: underline;
                text-align: center;

                &[disabled] {
                    cursor: not-allowed;
                    color: var(--desk-history-text-secondary);
                    text-decoration: none;
                }
            }
        }
    }
}

/* 다크모드 */
body {
    &[data-color-scheme='dark'],
    &[data-color-scheme='auto'][data-prefers-color-scheme='dark'] {
        --desk-history-text-secondary: var(--aui-color-text-300);
        --desk-history-public-color: var(--aui-color-mark-400);

        --desk-history-background-primary: var(--aui-color-background-400);
        --desk-history-background-secondary: var(--aui-color-background-300);

        --desk-history-line-color: var(--aui-color-background-200);

        section[data-role='admin'] {
            div[data-type='panel'][data-role='grid'] {
                div[data-role='row'] {
                    div[data-role='column'] {
                        label {
                            &.DONE {
                                background: #8bc8f5;
                                color: #034271;
                            }

                            &.COMPLETED {
                                background: #90d892;
                                color: black;
                            }
                        }
                    }
                }
            }
        }
    }
}