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

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

/* 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: .25;
}

.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-grid-header.b-sch-timeaxiscolumn {

        /* Dont show dates for sunday and saturday*/
        .b-sch-dayheadercell-0 *,
        .b-sch-dayheadercell-6 * {
            display: none;
        }
    }

    .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;
    }
}