/* custom updates global bryntum controls */

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

:root:not(.b-nothing) {
    /* General UI blue color */
    --color-ui-blue-rgb: 109, 138, 250;
    --b-color-blue: var(--color-ui-blue);
    --b-color-red: var(--color-ui-red);
    --b-color-green: var(--color-ui-green);
    --b-color-yellow: var(--color-ui-yellow);

    /* Change color of bryntum badges (e.g. undo redo count in gantt) */
    --b-badge-background: var(--color-ui-blue);

    /* General color for all texts in a widget */
    --b-widget-color: var(--color-text-normal);

    --b-percent-column-circle-label-background: var(--color-white);
    
    /* Color states and shape for bryntum buttons in modals 
     * button-filled -> Style for save button
     * button-tonal -> Style for cancel button
     */
    --b-button-filled-background: var(--color-ui-blue);
    --b-button-filled-hover-background: var(--dark-blue-1);
    --b-button-border-radius: 4px !important;
    --b-button-tonal-hover-box-shadow: none !important;

    /* Date picker colors */
    --b-date-picker-selected-background: var(--color-ui-blue);
    --b-date-picker-selected-color: var(--color-white);
    --b-year-picker-selected-color: var(--color-white);
    --b-month-picker-selected-color: var(--color-white);
    
    /* Trigger = icon inside of an inline edit in a grid (calendar icon e.g.) */
    --b-field-trigger-color: var(--gray-3-5);
    --b-field-trigger-edge-gap: 0.8em; /* edge-gap = last trigger element before border end */
    --b-field-trigger-gap: 0; 
    
    --b-panel-top-toolbar-button-type-text-color: var(--gray-5);

    /* Context menu spacing */
    --b-menu-item-padding: 0.8em;
    --b-menu-item-icon-width: 0.8em;

    /* Background of rows need to be transparent. We set weekends on z-index ß to have them behind the capacity chart. If
     * the background is not transparent we don't see weekends at all! 
     */
    --b-grid-cell-background: transparent;
    --b-grid-cell-padding-inline: 0.5em;
    
    /* General scheduler font weight */
    .b-style-tonal {
        --b-sch-event-font-weight: 400;
    }
    
    /* Resource avatar styling */
    .b-resource-avatar {
        --b-avatar-background: var(--gray-3-5) !important;
        --b-avatar-initials-color: var(--color-white) !important;
        --b-avatar-initials-font-weight: var(--font-weight-regular) !important;
        --b-avatar-size: 2.2em;
        line-height: initial;
    }
     
    /* Alignment of the resource grid in the scheduler */
    --b-grid-cell-gap: 0;
    --b-grid-cell-font-weight: var(--font-weight-light);

    /* Checkbox styling */
    --b-checkbox-border-color: var(--gray-4);
    --b-checkbox-checked-background: var(--color-ui-blue);
    --b-checkbox-check-font-size: 0.8em;
    
    --b-widget-padding-large: 1.1em;
    --b-horizontal-time-axis-cell-padding-inline: 0;
    
    /* Grid styling */ 
    --b-grid-cell-border-width: 0;
    --b-grid-header-border-width: 0;
    --b-grid-header-padding: 0.5em;
    --b-grid-header-container-border-width: 0;
    
    --b-text-field-no-label-input-padding: 0.79em 0 0.7em;
    /*--b-text-field-outlined-hover-border-color: var(--color-ui-blue);*/
    --b-text-field-padding: 0 0 0 0.8em;
    
    /* splitter between grid and time axis */
    --b-region-resize-splitter-width: 6px;
    --b-region-resize-splitter-width-hover: 10px;
    --b-region-resize-splitter-color: var(--gray-0);

    --b-toolbar-min-size: 2em;
    --b-toolbar-padding: 0.8em;

    /* Task dependency anchor styling */
    --b-dependency-terminal-color: var(--color-white);

    --b-event-resize-handle-inset: 4px;
    --b-event-resize-handle-other-size: 2.5px;
}

/* Some variables are defined in this class. Putting the content in root will not have an effect*/
.b-bryntum:not(.b-nothing){
    /* Tab underline color in bryntum tab modals */
    --b-tab-active-tab-color: var(--gray-5) !important; /* active tab text color */
    --b-tab-indicator-color: var(--color-ui-blue); /* underline color */
    --b-panel-header-font-size: 19px !important;
    --b-panel-header-font-weight: var(--font-weight-bold) !important;
    --b-button-padding-inline: 0 !important;

    /* Toggle slider styling */
    --b-slide-toggle-border-width: 0;
    --b-slide-toggle-background: var(--gray-3);
    --b-slide-toggle-hover-background: var(--gray-3);
    --b-slide-toggle-thumb-background: var(--color-white);
    --b-slide-toggle-hovered-thumb-background: var(--color-white);
    --b-slide-toggle-checked-ring-color: transparent;
    --b-slide-toggle-ring-color: transparent;
    --b-slide-toggle-height: 1.4em;
    --b-slide-toggle-width: 2.4em;
    --b-slide-toggle-checked-thumb-size: 1em;
    --b-slide-toggle-thumb-size: 1em;
    --b-slide-toggle-thumb-offset: 0.25em;

    /* Colors for context menu of bryntum */
    --b-menu-item-hover-background: var(--gray-1);
    --b-menu-item-focus-background: var(--gray-1);
    --b-menu-item-color: var(--gray-4);
}

/* Inline edit of grids have white background */
.b-editor.b-cell-editor > div {
    background-color: var(--color-white);
}

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

/* placeholder for filter in grid headers (Resource grid) */
.b-filter-bar-compact .b-filter-bar-field .b-field-inner input::placeholder{
    color: var(--gray-3-5);
    font-weight: var(--font-weight-regular);
}

/* Expand and collapse icons for tree components */
.b-touch .b-icon-tree-expand::before, .b-touch .b-icon-tree-collapse::before {
    font-size: 1.2em;
    color: var(--gray-3-5);
}

/* Set text color for selected texts to white */ 
:is(
:is(.b-text-field, .b-number-field, .b-date-time-field, .b-text-area-field) bry-time, :is(.b-text-field, .b-number-field, .b-date-time-field, .b-text-area-field) input, 
:is(.b-text-field, .b-number-field, .b-date-time-field, .b-text-area-field) textarea, :is(.b-text-field, .b-number-field, .b-date-time-field, .b-text-area-field) .b-display-field-value)::selection{
    color: var(--color-white);
}

/* Event drag handle cursor icon to ew-resize */
:is(
:is(.b-event-resize .b-sch-event-wrap.b-hover, .b-event-resize .b-sch-event-wrap:hover, .b-event-resize .b-sch-event-wrap.b-unhover, .b-event-resize .b-sch-event-wrap-resizing) > .b-sch-event-resizable-true, 
:is(.b-event-resize .b-sch-event-wrap.b-hover, .b-event-resize .b-sch-event-wrap:hover, .b-event-resize .b-sch-event-wrap.b-unhover, .b-event-resize .b-sch-event-wrap-resizing) > .b-sch-event-resizable-end
)::after,
:is(
:is(.b-event-resize .b-sch-event-wrap.b-hover, .b-event-resize .b-sch-event-wrap:hover, .b-event-resize .b-sch-event-wrap.b-unhover, .b-event-resize .b-sch-event-wrap-resizing) > .b-sch-event-resizable-true,
:is(.b-event-resize .b-sch-event-wrap.b-hover, .b-event-resize .b-sch-event-wrap:hover, .b-event-resize .b-sch-event-wrap.b-unhover, .b-event-resize .b-sch-event-wrap-resizing) > .b-sch-event-resizable-start
)::before
{
    cursor: var(--bi-event-resize-handle-cursor);
}

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

/* Necessary for the checkbox to be displayed correctly */
.b-checkbox-box::after{
    font-weight: 900;
}

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

.hq-scheduler-weekend {
    background-color: var(--gray-0) !important;
    opacity: .75 !important;
    z-index: 0; /* show capacity and events above weekends */
}

.b-sch-non-working-time-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::before {
        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-sub-grid:not(.b-time-axis-sub-grid) .b-grid-row.b-hover,
.b-grid-sub-grid:not(.b-time-axis-sub-grid) .b-grid-row.b-selected,
.b-grid-header-container .b-sch-time-axis-column .b-sch-header-time-axis-cell:hover,
.b-grid-header.b-level-0:not(.b-sch-time-axis-column):hover{
    background-color: var(--gray-1) !important;
    .b-grid-cell{
        background-color: transparent !important;
    }
}

.b-grid-header-container {
    height: 50px;
    
    /* 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;
    }
}

/* Task menu of the scheduler and gantt*/
.b-menu-body-wrap{
    .b-menu-item-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 {
        font-size: 19px;
        padding: 1em 1em 0 1em !important;
        
        .b-header-title{
            overflow: initial;
        }
    }
    
    .b-panel-header:not(.b-panel-ui-plain) .b-tool {
         color: var(--gray-4) !important; 
    }

    /* Warning if general tab has missing info on save */
    .fa-exclamation-circle {
        font-size: 13px;
        top: 4px;
        right: 13px;
        position: absolute;
    }

    .b-toolbar.b-tab-bar {
        padding: 0 1em;
        border-bottom: none;
    }
    
    .b-panel-content  {
        padding: 0.2em 0 0 0 !important;
    }
    
    .hq-information-tab {
        padding: 0 1em !important;
        align-content: start;
    }

    /* Tab styling of task modal */
    .b-tab-panel-tab {
        text-transform: uppercase;
        font-size: 9pt;
        font-weight: var(--font-weight-semi-bold);
        
        label {
            width: 100%;
        }
    }
    .b-tab-panel-tab.b-active {
        font-weight: var(--font-weight-bold);
    } 
    
    /*Assignment grid*/
    .b-grid-header-container {
        height: 38px !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-grid-base: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: transparent;
    }
    
    /* Necessary to hide icon next to leaf in assignment grid */
    .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;
    }

    [data-ref="resourcesGridTab"]{
        display:flex;
        flex-direction: column;
        gap: 0;
    }
    
    .actual-planned-effort-bar {
        display         : flex;
        justify-content : flex-end;
        align-items     : center;
        padding         : 0 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;
        bottom: 9px;
        left: 18px;
        
        --slidetoggle-background-color : var(--color-ui-blue) !important;
        
        label{
            color: var(--gray-3-5) !important;
            font-weight: 700;
        }
    }

     /* Styling for calendar checkbox */
    .e-checkbox-wrapper.e-wrapper {
        display: flex;
        align-items: center;
    }

    
    .no-free-click.e-checkbox-wrapper {
        pointer-events: none;           /* Checkbox wrapper is not clickable */
    }

    .no-free-click .e-frame,
    .no-free-click input {
        pointer-events: auto;           /* Only the checkbox can be clicked*/
    }
    
    .no-free-click .e-label {
        pointer-events: none;
    }
}

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

/* events / tasks for scheduler and gantt */
.b-hq-event-no-permission-wrapper,
.b-hq-event-wrapper
{
    background-color: var(--steel-blue-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-gantt-task-parent:not(.b-milestone-wrap) .b-gantt-task {
    --event-background-color: var(--steel-blue-3) !important;
    border-color: var(--steel-blue-3) !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-4) !important;
    border-color: var(--steel-blue-4) !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 {
    background-color: var(--gray-3);
}

.hq-appointment-task{
    background-color: var(--light-blue-1);
}

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

.b-tooltip.hq-scheduler-tooltip {
   border-radius: 5px !important; // border radius for the tooltip

    .b-tooltip-body-wrap {
       background-color: var(--color-white);
    
       * {
           color: var(--gray-5);
       }
    }
    
   .hq-scheduler-tooltip-grid {
       display: grid;
       grid-template-columns: 200px 100px;
       column-gap: 5px;
       row-gap: 5px;

       .hq-scheduler-tooltip-grid-cell-header {
           color: var(--gray-3-5);
           font-size: 10pt;
       }

       .hq-scheduler-tooltip-grid-cell-text {
           font-size: 8pt;
       }
   }
}