@import "./dv-constants.scss";
@import 'primeflex/primeflex.scss';

.bg-toolbar{
    padding: 0px;
    height:60px;
    .icon-menu-item {
        display: block;
        padding: 8px 5px;
        min-width: 100px;
        text-decoration: none;
        transition: none;
        color: $white;
        &:hover {
            border-top: 3px solid $white;
            padding-top: 5px;
            svg, h5 {
                cursor: pointer;
                font-weight: bold;
                color: $white
            }
        }
        div {
            font-size: 20px;

            svg, h5 {
                color: rgb(214, 214, 214);
                font-weight: normal;
                font-size: 9pt;
                margin: 0px;
            }
        }
    }
}

.dv-divider {
    &.p-divider.p-divider-horizontal {
        padding: 0px;
        margin: 0px;
    }
}


.dropdown-component {
    width: 100%;
    position: relative;
    &.p-disabled {
        opacity: 1;
        background-color: #EFEFEF4D;
        .p-dropdown-trigger {
            display: none;
        }
    }
    .p-dropdown-label {
        font-size: 10pt;
        padding: 4px 8px;
        line-height: calc(100% + 8px);
    }

    &-panel {
        .p-dropdown-header {
            padding: 0px;

            .p-dropdown-filter {
                padding-top: 2px;
                padding-bottom: 2px;
            }
        }
        .p-dropdown-items {
            .p-dropdown-item {
                font-size: 10pt;
                padding: 5px 10px;
            }
        }
    }
}

.dv-datepicker-component {
    width: 100%;
    .p-button {
        width: 34px;
        border-left: 0px;
        height: 29px;
        min-height: 29px;
        font-size: 16px;
    }
    .p-inputtext {
        cursor: pointer;
    }
}

.p-datepicker {
    .p-inputtext {
        border-right: none;
    }
    .p-button {
        padding: 4px 8px;
        width: 34px;
        border-left: 0px;
    }
    .p-datepicker-title {
        select {
            padding: 0px 10px;
        }
    }
    table {
        th, td {
            padding: 0px;
            text-align: center;
        }
    }
}

.table-sm {
    tr {
        &.web-header {
            display: table-row;
        }
        &.web-body {
            display: table-row;
        }
        &.mobile-header {
            display: none;
        }
        &.mobile-body {
            display: none;
        }
        &.bg-select-row {
            td {
                div.bg-input-row {
                    background-color: inherit !important;
                    color: white;
                }
            }
        }
    }
    .p-datatable-scrollable .p-datatable- {
        &thead>tr {
            &.web-header {
                display: flex;
            }
            &.mobile-header {
                display: none;
            }
        }
        &tbody>tr {
            &.web-body {
                display: flex;
            }
            &.mobile-body {
                display: none;
            }
        }
    }

    .p-datatable {
        .p-datatable-thead th,
        .p-datatable-tbody th {
            height: 28px;
            padding: 0px;
            line-height: 26px;
        }

        .p-datatable-thead td,
        .p-datatable-tbody td {
            height: 26px;
            padding: 3px;
            line-height: 19px;
        }
    
        .p-datatable-tbody > tr > td {
            &.text-end {
                text-align: right;
            }
            &.text-start {
                text-align: left;
            }
            &.text-center {
                text-align: center;
            }
        }

        &.p-datatable-gridlines .p-datatable-thead > tr > th {
            pointer-events: none;
            .p-column-resizer {
                pointer-events: all;
            }
        }
    }

    .custom-sm-tr {
        td {
            padding: 6px;
            border: 0px;

            &:first-child {
                font-weight: bold;
                width: 0px;
                padding-left: 40px;
                text-align: right;
            }
        }
    }

    .p-button-sm {
        @include styleclass('btn-sm');
    }

    @media screen and (max-width: $sm) {
        &.web-table {
            display: none;
        }
        &.mobile-table {
            display: block;
        }
        tr {
            &.web-header {
                display: none;
            }
            &.web-body {
                display: none;
            }
            &.mobile-header {
                display: table-row;
            }
            &.mobile-body {
                display: table-row;
            }
        }

        .p-datatable-scrollable .p-datatable- {
            &thead>tr {
                &.web-header {
                    display: none;
                }
                &.mobile-header {
                    display: table-row;
                }
            }
            &tbody>tr {
                &.web-body {
                    display: none;
                }
                &.mobile-body {
                    display: table-row;
                }
            }
        }
    }
    
}

.is-mobile-device {
    .table-sm .custom-sm-tr td:first-child {
        padding-left: 4px;
    }
}

.dv-paginator {
    &.p-paginator {
        padding: 0px;
        .p-paginator-first,
        .p-paginator-prev,
        .p-paginator-next,
        .p-paginator-last,
        .p-paginator-pages .p-paginator-page {
            border-radius: 16px;
        }
    }
}

.p-button.p-button-sm {
    font-size: 14px;
    &.btn-sm {
        font-size: 12px;
        .p-button-icon {
            font-size: 12px;
        }
    }
    .p-button-icon {
        font-size: 14px;
    }
    svg {
        cursor: pointer;
    }
}

.p-button svg {
    pointer-events: none;
}

.p-tooltip {
    max-width: 200px;
}

.p-contextmenu {
    border: 1px;
    border-radius: 4px;
}

.p-component,
.p-inputtext {
    font-family: 'NanumGothic';
}

.p-component:disabled {
    opacity: 1;
}

.p-inputgroup {
    dv-dropdown {
        flex: 1 1 auto;
    }

    .p-inputwrapper>.p-component.dropdown-component {
        width: 100%;
    }

    .center-item {
        border-radius: 0px;
    }

    .left-item {
        border-right: none;
        border-top-right-radius: 0px !important;
        border-bottom-right-radius: 0px !important;
    }

    .right-item {
        border-left: none;
        border-top-left-radius: 0px !important;
        border-bottom-left-radius: 0px !important;
    }

    .p-button.p-button-sm {
        height: 100%;
    }
}

.p-button.p-button-sm {
    width: 26px;
    height: 31px;
    &.btn-label {
        width: auto;
    }
    &.btn-sm {
        padding: 0px;
        height: 18px;
        &.btn-label {
            padding: 0px 4px;
        }
    }
    &.btn-lg {
        font-weight: bold;
        font-size: 18px;
        padding: 20px;
    }
    &.btn-flex {
        width: 100% !important;
    }
}

.p-inputgroup-addon { padding: 0px; }

/* Modal CSS */
.p-dialog {
    // position: absolute !important;
    // top: 100;
    top: 5%;
    .p-dialog-header {
        padding: 10px;
        font-size: 12pt;
        font-weight: bold;
        .p-dialog-header-close-icon {
            font-size: 14pt;
            font-weight: bold;
        }
        .p-dialog-header-icon {
            &:enabled:hover {
                background: transparent;
                .p-dialog-header-close-icon {
                    color: white;
                }
            }
            &:focus {
                box-shadow: none;
            }
        }
    }
    .p-dialog-content {
        padding: 0;
        overflow-x: hidden;
        .card {
            .card-header {
                padding: 10px 10px 0 10px;
                h6 {
                    font-size: 14pt;
                    font-weight: bold;
                }
                button {
                    border: 0;
                    background: none;
                    cursor: pointer;
                }
            }
            .card-body {
                border: none;
                padding: 5px;
                .p-inputtext {
                    width: 100%;
                }
                .p-tabview-panels {
                    padding: 5px 0 0 0;
                }
                .row {
                    margin-bottom: 5px !important;
                }
                button.dv-card-button {
                    height: 30px;
                    border-radius: 3px;
                    border-width: 1px;
                }
                .p-inputgroup {
                    .p-inputtext {
                        width: 100% !important;
                    }
                }
            }
            .card-footer {
                padding: 5px 5px 0 5px;
                button {
                    height: 30px;
                    border-radius: 3px;
                    border-width: 1px;
                }
            }
        }
    }
    .row > label {
        line-height: normal;
        display: flex;
        align-items: center;
        justify-content: flex-end;
        font-weight: bold;
        height: 38px;
    }

    .dv-input-title, .dv-radio-div, .dv-check-message {line-height: 31px;}
    .dv-input-title label {
        margin: 0;
        font-size: 9pt;
        font-weight: bold;
    }

}

.p-dialog-mask.p-component-overlay {
    align-items: flex-start;
}

/* tree start */
.p-dropdown-panel .p-dropdown-header .p-dropdown-filter,
.p-tree .p-tree-filter-container .p-tree-filter {
    font-size: 14px;
    padding-top: 4px;
    padding-bottom: 4px;
}

.p-tree {
    .p-tree-container .p-treenode .p-treenode-content {
        &:focus {
            box-shadow: none;
        }
    
        .p-tree-toggler {
            width: auto;
            height: auto;
        }
    }

    .p-tree-filter-container {
        height: 29px;
        .p-tree-filter {
            border: 1px solid;
            border-radius: 4px;
            height: 100%;
        }
        .p-tree-filter-icon {
            font-weight: bold;
        }
    }
}
/* tree end */

.p-dropdown-panel .p-dropdown-items .p-dropdown-item.p-highlight {
    font-weight: bold;
}

p-table {
    .p-button {
        &.p-button-sm {
            height: 19px;
            width: 19px;
        }
    }
}

/* top menu */
p-menubarsub {
    ul.p-submenu-list {
        /* 전체 WIDTH */
        min-width: 200px;

        li.p-menuitem {
            a.p-menuitem-link {
                padding: 12px 16px;
                svg {
                    /* 메뉴 아이콘 너비 통일 */
                    min-width: 20px;
                }
            }
        }
    }
}

.p-inputgroup .p-button.p-button-sm,
.p-dialog .p-dialog-content .card .card-body .p-inputgroup .p-inputtext {
    width: auto;
    height: auto;
}

.dv-datepicker-component .p-button,
.searchInput-component .p-button {
    min-width: 34px;
    padding: 0px;

    svg {
        width: 16px;
        height: 16px;
    }
}

.p-sidebar {
    &.dv-side-menu {
        .p-sidebar-header,
        .p-sidebar-content {
            padding: 0px;
        }
    }

    &.help-sidebar {
        .p-sidebar-header {
            padding: 0px;
        }
    }
}

.p-autocomplete-panel.menu-search-panel .p-autocomplete-items .p-autocomplete-item {
    padding: 12px 16px;
}

.p-panel {
    &.setting-panel {
        padding-top: 6px;

        &.p-panel-toggleable .p-panel-header {
            cursor: pointer;
        }
        .p-panel-header {
            font-size: 16px;
            color: white;
            padding: 5px 10px;

            .p-panel-title {
                padding: 8px 0px;
            }
        }
        .row > div.col-sm-3 {
            text-align: right;
            margin-top: 4px;
        }
        .row > div > .p-inputtext,
        .row > div > .form-control {
            font-size: 10pt;
            width: 100%;
            opacity: 1;
        }
        .p-inputgroup-addon.p-button {
            border-left: 1px solid;
            border-top-right-radius: 3px;
            border-bottom-right-radius: 3px;
        }
        .p-panel-toggler {
            display: none
        }
    }
}

.dv-search-dynamic {
    &.p-autocomplete {
        display: flex;
    }

    &-input {
        height: 29px;
        min-height: 29px;
        font-size: 10pt;
        padding: 0.4375rem 0.4375rem;
        width: 100%;
    }

    &-panel {
        .p-autocomplete-items .p-autocomplete-item {
            padding: 10px 20px;
        }
    }
}

.dv-modal {
    border: 1px solid;

    .p-dialog-header {
        border-bottom: 1px solid;
        i {
            font-size: 14pt;
        }
    }

    .p-dialog-content {
        padding: 6px;

        .row,
        .grid {
            margin-bottom: -0.5rem;
        }
    }

    .p-dialog-footer {
        padding: 0px;
        .text-danger {
            text-align: left;
        }
        .card-footer {
            .grid {
                margin-top: 0px;

                .col.flex {
                    margin: auto 10px;
                }
            }
        }
    }
}

.td-dropdown {
    padding: 0 !important;
    .td-dropdown-height {
        min-height: 24px;
        height: 24px;
        span {
            &.p-inputtext {
                padding: 0;
                padding-left: 4px;
            }
        }
    }
}

.p-tabview {
    &.code-grp-tab-view .p-tabview-panels {
        padding-bottom: 0px;
    }
    .p-tabview-panels {
        padding: 6px 0px 0px;
    }
}

.p-tree-empty-message {
    display: none;
}

.dv-sidebar {
    &.p-sidebar-xl {
        width: 100rem !important;
        max-width: 90%;
    }
    &.p-sidebar-sm {
        .p-button.p-button-sm {
            padding: 4px;
            font-size: 6px;
        }
    }

    .p-sidebar-header {
        padding: 0px;

        .sidebar-header {
            padding: 10px;
            font-size: 12pt;
            font-weight: bold;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-shrink: 0;
            border-bottom: 1px solid;
            height: 40px;
            width: 100%;
    
            i {
                font-size: 14pt;
            }
    
            .sidebar-header-icon {
                display: flex;
                align-items: center;
    
                span {
                    font-size: 12pt;
                    font-weight: bold;
                }
            }
        }
    }

    .p-sidebar-content {
        padding: 0px;
    }

    .p-sidebar-footer {
        padding: 0px;

        .sidebar-footer {
            height: 44px;
            border-top: 1px solid;

            .sidebar-footer-container {
                display: flex !important;
                height: 100%;

                .col {
                    padding: 10px;

                    button {
                        margin-left: 6px;
                    }
                }

                .sidebar-footer-text span {
                    line-height: 23px;
                    font-weight: bold;
                }
            }
        }
    }
}

@media screen and (max-width: $md) {
    .dv-sidebar {
        &.p-sidebar-lg {
            display: none;
        }
        &.p-sidebar-md {
            display: none;
        }
        &.p-sidebar-sm {
            display: none;
        }
    }
    .p-sidebar-mask {
        display: none;
    }
}

@media screen and (max-width: 64em) {
    .dv-sidebar {
        &:not(.p-sidebar-full) {
            .p-button.p-button-sm {
                padding: 4px;
                font-size: 6px;
            }
        }
    }
}