/* custom updates global bryntum controls */

/* import the bryntum_modules.css file */
@import url('bryntum_modules.css');

:root {
    --color-ui-blue-rgb: 109, 138, 250;
}

.hq-mat-icon {
    &::before {
        font-family: 'Material Icons';
        font-style: normal;
        line-height: 1;
        font-size: 16px;
        color: var(--gray-4);
        position: relative;
    }
    &.unfold-less::before {
        content: 'unfold_less';
    }
    &.unfold-more::before {
        content: 'unfold_more';
    }
}

/* Remove focus outline and box-shadow for bryntum controls */
.b-outer:focus,
.b-widget:focus,
.b-focused,
.b-outer.b-focused,
.b-field:focus,
.b-field.b-focused {
    outline: none !important;
    box-shadow: none !important;
}

.b-datepicker .b-weeks-container .b-calendar-cell:focus > .b-datepicker-cell-inner {
    outline: none !important;
    box-shadow: none !important;
}

.b-checkbox{
    --checkbox-checked-background-color: rgb(var(--color-ui-blue-rgb));
    --checkbox-checked-border-color: rgb(var(--color-ui-blue-rgb));
}

.b-datepicker{
    --datepicker-selected-cell-background-color:rgb(var(--color-ui-blue-rgb));
    --datepicker-selected-range-background-color:rgba(33, 150, 243, 0.15);
}

.b-monthpicker .b-monthpicker-content button.b-monthpicker-month.b-selected {
    color: #fff;
    background-color: var(--color-ui-blue);
    border-color: var(--color-ui-blue);;
}

.b-yearpicker .b-yearpicker-content button.b-yearpicker-year.b-selected {
    color: #fff;
    background-color: var(--color-ui-blue);
    border-color: var(--color-ui-blue);;
}

/* Loading mask styling */
.b-mask-content {
   background-color: var(--color-ui-blue);
   border-radius: 4px;
}

/* Modal styling */
.b-popup-header {
   background-color: var(--color-ui-blue);
}
.b-container .b-has-label:focus-within .b-label {
    color: var(--color-ui-blue);
}

.b-button {
    --widget-primary-color-rgb: var(--color-ui-blue-rgb);
}

.b-tabpanel-tab.b-active {
    border-color: var(--color-ui-blue);
    color: var(--color-ui-blue);
}

.b-tree-icon, .b-icon-tree-leaf, .b-icon-tree-folder, .b-icon-tree-folder-open, .b-icon-tree-expand, .b-icon-tree-collapse {
    color: var(--color-ui-blue);
}

.b-grid-header-container .b-sch-timeaxiscolumn {
    background-color: white !important;
}

.b-sch-nonworkingtime.hq-scheduler-weekend {
    background-color: var(--gray-0) !important;
    opacity: .75;
}

.b-sch-nonworkingtime-canvas {
    background-color: rgba(200, 200, 200, 0.4);
}

/* grid header styling if column is filtered */
.b-grid-header.b-filter  {
    *{
        font-weight: var(--font-weight-semi-bold) !important;
    }
    .b-filter-icon::after {
        color: var(--color-ui-blue);
    }
}

/* default grid header text */
.b-grid-header .b-grid-header-text-content{
    color: var(--gray-5) !important;
    font-weight: var(--font-weight-regular);
}

/* Overwrite hover colors
 1. hover of grid / left side of scheduler / gantt rows
 2. hover of the timaxis header
 3. hover of the columns of the grid 
 */
.b-grid-subgrid:not(.b-timeaxissubgrid) .b-grid-row.b-hover,
.b-grid-subgrid:not(.b-timeaxissubgrid) .b-grid-row.b-selected,
.b-grid-header-container .b-sch-timeaxiscolumn .b-sch-header-timeaxis-cell:hover,
.b-grid-header.b-level-0:not(.b-sch-timeaxiscolumn):hover{
    background-color: var(--gray-1) !important;
    .b-grid-cell{
        background-color: transparent !important;
    }
}

/* box shadow for the right side of the grid, dropping on the time axis*/
.hq-bryntum-scheduler-pro .b-grid-header-scroller-locked,
.hq-bryntum-scheduler-pro .b-grid-subgrid-locked{
    box-shadow: 0 2px 8px rgb(from var(--gray-3-5) r g b / 0.2); /* gray 3 -5 shadow with 0.2 opacity */
}

.b-grid-header-container {
    height: 50px;
    background-color: var(--color-white) !important;
    
    /* Shadow under the header of the time axis */
    .b-header {
        box-shadow: 0 2px 4px rgb(from var(--gray-3-5) r g b / 0.2); /* gray 3 -5 shadow with 0.2 opacity */
    }

    .b-sch-header-text {
        color: var(--color-text-normal);
        font-weight: var(--font-weight-bold);
        font-size: 10pt;
    }
    .b-grid-header{
        color: var(--color-text-normal) !important;
    }
}

.b-menuitem {
    &:hover {
        background-color: var(--gray-1) !important;
    }
}

/* Task menu of the scheduler and gantt*/
.b-menu-body-wrap{
    .b-menuitem-icon{
        color: var(--gray-4) !important;
    }
    .b-menu-text{
        color: var(--color-text-normal);
    }
    .b-separator{
        border-top: 1px solid var(--gray-3) !important;
    }
}


/* Task edit model of the scheduler and gantt*/
.hq-bryntum-task-edit-modal{

    ol {
        list-style: decimal !important;
        margin-left: 15px;
    }

    ul {
        list-style: disc !important;
        margin-left: 15px;
    }
    
    .b-popup-header {
        background-color: white !important;
        color: var(--color-text-normal) !important;
        font-size: 19px;
        font-weight: 600;
        padding: 1em 1em 0 1em !important;
    }
    
    .b-panel-header:not(.b-panel-ui-plain) .b-tool {
         color: var(--gray-4) !important; 
    }

    .b-fa-exclamation-circle {
        font-size: 13px;
        top: -7px;
        left: -2px;
        position: relative;
    }

    .b-toolbar.b-tabbar {
        padding: 0 1em;
    }
    
    .b-panel-content  {
        padding: 1em 0 0 0 !important;
    }
    
    .hq-information-tab {
        padding: 0 1em !important;
    }

    .b-tabpanel-tab.b-active {
        border-color: var(--color-ui-blue);
        color: var(--gray-5);
        font-weight: 500;
        border-width: 0 0 3px 0 !important;
    }
    
    /*Assignment grid*/
    .b-grid-header-container {
        height: 38px !important;
        background-color: var(--color-white) !important;
    }

    .b-header {
        border-top: 1px solid var(--gray-2);
        border-bottom: 1px solid var(--gray-2);
        box-shadow: unset !important; 
    }

    .b-grid-row {
        border-bottom: 1px solid var(--gray-2) !important;
    }
    
    .b-gridbase:not(.b-panel-ui-plain) .b-grid-cell.b-checkbox-selection {
        background-color: unset !important;
    }
    .b-list.b-multiselect .b-selected-icon::before, .b-checkbox > .b-field-inner .b-checkbox-label:before {
        font-size: 1em;
        width: 18px;
        height: 18px;
        padding: 0.5em;
        border: 2px solid var(--gray-3-5);
        --checkbox-check-color: white;
    }

    .b-checkbox > .b-field-inner input[type=checkbox]:checked + .b-checkbox-label:before {
        --checkbox-background-color: var(--color-ui-blue);
        border: 2px solid var(--color-ui-blue);
    }
    
    .b-tree-icon, .b-icon-tree-leaf, .b-icon-tree-folder, .b-icon-tree-folder-open {
        display: none;
    }
    .b-resource-avatar{
        font-size: 8px;
        margin-right: 8px;
    }

    .b-grid-cell {
        color: var(--gray-5) !important;
    }

    .actual-planned-effort-bar {
        display         : flex;
        justify-content : flex-end;
        align-items     : center;
        padding         : 1.0em 1em;
        margin-top      : 0.5em;
        background      : var(--gray-1);
        font-size       : 13px;
        font-weight     : 500;
        color           : var(--color-text-normal);
    }

    .actual-planned-effort-label {
        white-space     : nowrap;
    }
    
    .checkbox-only-projectmember{
        position: absolute;
        top: 439px;
        left: 18px;
        
        --slidetoggle-background-color : var(--color-ui-blue) !important;
        
        .b-slidetoggle-label{
            color: var(--gray-3-5) !important;
            font-weight: 700;
        }
    }
}

.bryntum-red-delete-button{
    background-color: var(--color-ui-red) !important;
    color: white !important;
}

/* set background of the x in the selector to transparent */
.e-float-input .e-clear-icon, .e-float-input.e-control-wrapper .e-clear-icon, .e-input-group .e-clear-icon, .e-input-group.e-control-wrapper .e-clear-icon {
    background: rgba(0, 0, 0, 0) !important;
}

/* events / tasks for scheduler and gantt */
.b-hq-event-no-permission-wrapper,
.b-hq-event-wrapper
{
    background-color: var(--gray-2) !important;
}

/* events / tasks for scheduler and gantt */
.b-hq-event-no-permission-wrapper.b-mask-content,
.b-hq-event-wrapper,
.b-task-percent-bar
{
    background-color: var(--steel-blue-2) !important;
}

.b-sch-color-none.b-gantt-task-wrap, .b-sch-color-none.b-gantt-task-wrap>.b-gantt-task, 
.b-sch-color-none.b-gantt-task-wrap>.b-gantt-task>.b-sch-event-segments>.b-gantt-task.b-sch-color-none{
    --event-background-color: var(--steel-blue-1) !important;
}

.b-sch-color-none.b-gantt-task-wrap, .b-sch-color-none.b-gantt-task-wrap>.b-gantt-task:hover,
.b-sch-color-none.b-gantt-task-wrap>.b-gantt-task>.b-sch-event-segments>.b-gantt-task.b-sch-color-none:hover{
    --event-background-color: var(--steel-blue-3) !important;
}

.b-hq-event-no-permission-wrapper.b-mask-content:hover,
.b-hq-event-wrapper:hover
{
    background-color: var(--steel-blue-3) !important;
}

.b-hq-absence-event-wrapper {
    background-color: var(--light-yellow-1) !important;
}

.b-hq-private-appointment-event-wrapper,
.hq-appointment-task{
    background-color: var(--light-blue-1);
}

.hq-appointment-task .b-task-percent-bar{
    background-color: var(--light-blue-2) !important;
}