/* 
*   OVERRIDES:
*   This file is for overriding the default styles of components that
*   we use, that can't be changed in the component itself.
*
*   For example, the MudPopover component has a shadow that can't be
*   changed in the component's scoped CSS, as it gets spawned by the 
*   MudPopoverProvider. Blazor's CSS isolation doesn't allow us to
*   ::deep into the MudPopoverProvider's CSS, so we have no choice but
*   to override it here with a more specific selector.
*/

html,
body {
    --colour-system-highlight-background-active: rgba(0, 0, 0, 0.058823529411764705);
    --colour-system-completed: #02a702;
    --colour-system-user: #C4C4C4;
}

#blazor-error-ui {
    position: fixed;
    right: 0;
    left: unset;
    bottom: unset;
    top: 0;
    color: var(--colour-action-danger-foreground-inverse);
    background: transparent;
    width: fit-content;
    font-weight: 700;
    padding: var(--gutter-size-medium);
    z-index: var(--z-index-snackbar);
    user-select: none;
    cursor: pointer;
}

    #blazor-error-ui a {
        color: unset;
    }

/*Add the blue line only on dashboard*/
article:has(.mainContainer.dashboard) {
    background: linear-gradient(var(--colour-action-secondary) 200px, transparent 0%);
}

article:has(.mainContainer.dashboard.compact) {
    background: linear-gradient(var(--colour-action-secondary) 160px, transparent 0%);
}


h1 {
    font-size: var(--font-size-heading-1);
    font-weight: var(--font-weight-heading-1);
}

a {
    color: var(--colour-link-primary);
    text-decoration: underline;
    cursor: pointer;
}

@media screen and (max-width: 1366px) {

    article:has(.mainContainer.dashboard) {
        background: linear-gradient(var(--colour-action-secondary) 330px, transparent 0%);
    }
}

@media screen and (max-width: 600px) {


    article:has(.mainContainer.dashboard.compact) {
        background: linear-gradient(var(--colour-action-secondary) 220px, transparent 0%);
    }
}


/* This will remain here until FireFox supports ':has':'https://caniuse.com/?search=%3Ahas()' */
@-moz-document url-prefix() {
    .topBar__container {
        background: var(--colour-action-secondary);
    }
}

.mud-popover.mudPopover__popover_shadowOverride {
    box-shadow: 0px 0px 5px 0px rgba(0, 0, 0, 0.2);
}

.mud-popover.mudPopover__popover_verticalPositionOverride_up {
    margin-top: calc(0px - var(--gutter-size));
}

.mud-popover.mudPopover__popover_verticalPositionOverride_down {
    margin-top: var(--gutter-size);
}

.mud-popover.mudPopover__popover_horizontalPositionOverride_left {
    margin-left: calc(0px - var(--gutter-size));
}

.mud-popover.mudPopover__popover_horizontalPositionOverride_right {
    margin-left: var(--gutter-size);
}

.mud-popover .text-danger {
    color: var(--colour-action-danger-background-dark);
}

/* 
 * MudPopover bug: Popover causes scrollbar to appear on body when not yet opened
 * This is a workaround to prevent the scrollbar from appearing when the popover is not open.
 * When the popover is opened, the JS will overwrite top and left values to position the popover correctly, so this will not affect the popover when it is open.
 */
.mud-popover:not(.mud-popover-open) {
    top: 10px;
    left: 10px;
}


/*
 *   OVERRIDES: DocumentTemplateSelectionModal.razor.css
 */

.mainContainer.popover .dropdownGroup__container.prepperTemplateSelectModal__GroupedSelectPopover .mud-expand-panel-text,
.mainContainer.popover .dropdownGroup__container.workflowTemplateSelectModal__GroupedSelectPopover .mud-expand-panel-text {
    font-size: var(--font-size-body-1);
    font-weight: var(--font-weight-body-1);
    font-family: var(--font-family-body-1);
    color: var(--colour-system-foreground);
}

.mainContainer.popover .dropdownItem__container.selected.prepperTemplateSelectModal__GroupedSelectPopover,
.mainContainer.popover .dropdownItem__container.selected.workflowTemplateSelectModal__GroupedSelectPopover {
    background: unset;
    color: var(--colour-action-secondary);
}

.mainContainer.popover .dropdownItem__container.prepperTemplateSelectModal__GroupedSelectPopover:hover,
.mainContainer.popover .dropdownItem__container.workflowTemplateSelectModal__GroupedSelectPopover:hover {
    background: unset;
    color: var(--colour-action-secondary-hover);
}


/*Blazored.Toast*/
@media screen and (max-width: 575px) {
    .blazored-toast-container {
        width: calc(100vw - 2.5rem);
    }
}


div.blazored-toast-container:has(.blazored-toast),
/*adding the :has just for specificity so that we don't need an !important*/
div.blazored-toast.blazored-toast-container {
    z-index: 10001;
}

.blazored-toast-heading {
    margin-top: 0px;
}



#signatureWindow {
    z-index: 10002;
}

/*SigniFlow.Library.Controls.Select*/
.sfselect__mainContainer .dropdownItems__container {
    background: var(--colour-system-background)
}

.sfselect__mainContainer .dropdownItem__container {
    color: var(--colour-primitive-black)
}

    .sfselect__mainContainer .dropdownItem__container:hover {
        background: var(--colour-action-primary);
        color: var(--colour-action-primary-foreground);
    }

    .sfselect__mainContainer .dropdownItem__container.selected {
        background: var(--colour-action-secondary);
        color: var(--colour-action-secondary-foreground);
    }

.sfselect__mainContainer .mud-input > input.mud-input-root, div.mud-input-slot.mud-input-root {
    font-size: var(--font-size-input);
}

.descriptiveSelectItem__mainContainer .descriptiveSelectItem__mainContainer:hover {
    background: var(--colour-action-primary);
}

.descriptiveSelectItem__mainContainer .item__text {
    color: var(--colour-action-secondary);
}

.descriptiveSelectItem__mainContainer:hover .item__text {
    color: var(--colour-action-primary-foreground);
}

.descriptiveSelectItem__mainContainer .item__description {
    color: var(--colour-text-description);
}

.descriptiveSelectItem__mainContainer:hover .item__description {
    color: var(--colour-action-primary-foreground)
}


/*Mud DATA GRID*/

.mud-table-root .mud-table-head .mud-table-cell {
    font-size: var(--font-size-subtitle-1);
    color: var(--colour-heading-foreground)
}

.mud-table-sticky-header * .mud-table-root .mud-table-head * .mud-table-cell {
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.04);
    margin: 5px
}

.mud-table-sticky-footer .mud-table-container {
    overflow-x: hidden;
}

.mud-table-root .mud-table-body .mud-table-cell {
    color: var(--colour-heading-foreground);
    font-size: var(--font-size-body-1);
}

.mud-table-root .mud-table-cell .ma-n3:has(.mud-icon-button-label) {
    margin-left: 0px !important;
}

.mud-table-dense * .mud-table-row .mud-table-cell {
    padding: var(--gutter-size-medium) 24px var(--gutter-size-medium) 16px;
}

/*MUD THEMES*/
.mud-dropitem-placeholder {
    border: 4px solid var(--colour-action-primary) !important;
    opacity: 0.7;
}


/*popovers*/

.mud-popover .mud-list-item.mud-selected-item {
    color: var(--mud-palette-primary-text) !important;
}

    .mud-popover .mud-list-item.mud-selected-item .selectedCheckmark {
        color: var(--colour-action-primary-foreground) !important;
    }

.mud-popover:has(.userInformationCard__mainContainer) .mud-list-item-text {
    margin-top: 2px;
    margin-bottom: 2px;
}

.mud-popover .userInformationCard__mainContainer {
    height: 40px;
}

    .mud-popover .userInformationCard__mainContainer img {
        --image-size: 30px;
        align-self: center;
        justify-self: center;
    }

    .mud-popover .userInformationCard__mainContainer .userInformationCard__userNameContainer {
        font-size: 14px;
    }

    .mud-popover .userInformationCard__mainContainer .userInformationCard__userEmailContainer {
        font-size: 12px;
    }


/*SIGNIFLOW CHECKBOX*/
.signiflowCheckbox.focussed .checkbox_box path {
    stroke: var(--colour-action-secondary);
}

.signiflowCheckbox .check path {
    stroke: var(--colour-action-secondary);
}

.signiflowCheckbox label {
    color: var(--colour-action-secondary);
}

.signiflowCheckbox svg {
    color: var(--colour-action-secondary);
}

.mud-table-container {
    width: 100% !important;
}


/* MUD BUTTONS */
.mud-button {
    text-transform: none;
}

    .mud-button.mud-button-outlined-primary:hover,
    .mud-button.mud-button-text-primary:hover {
        color: var(--colour-action-primary-foreground);
    }

/* MUD TABS */
.mud-tab {
    text-transform: none;
    border-radius: 10px 10px 0px 0px !important;
    background: var(--colour-action-primary-foreground);
    position: relative;
}

    .mud-tab:hover {
        cursor: pointer;
        background-color: var(--colour-system-highlight-background-active);
    }

    .mud-tab.mud-tab-active {
        color: #505050 !important;
        background: var(--colour-system-background);
        border-radius: 10px 10px 0px 0px;
        border: 1px solid #EEEEEE;
        border-bottom: none;
        overflow: visible;
    }

        .mud-tab.mud-tab-active:hover {
            background-color: var(--colour-system-background) !important;
        }


.mud-tabs {
    z-index: 0;
    position: relative;
}

.mud-tabs-panels {
    border: 1px solid #EEEEEE;
    background: var(--colour-system-background);
    overflow: visible;
    z-index: 1;
}

.mud-tabs.mud-tabs-rounded .mud-tabs-panels {
    border: 1px solid var(--colour-system-background);
}

.mud-tabs-panels.noBackground{
    border: none;
    background: none;
}

.mud-tab-slider {
    display: none;
}

.mud-tabs .mud-tab-label {
    text-transform: lowercase;
}

.mud-tabs-toolbar-content {
    background: var(--colour-system-background);
    overflow: visible;
}

div.mud-tabs-toolbar {
    z-index: 2;
    overflow: visible;
}

.mud-container {
    padding-left: var(--gutter-size-medium);
    padding-right: var(--gutter-size-medium);
}

.mud-ripple:after {
    background-image: none;
}

.mud-tabs-toolbar-wrapper > .d-inline-block {
    position: relative;
}

    /* The lines in between the tabs */
    .mud-tabs-toolbar-wrapper > .d-inline-block:not(:first-child) .mud-tab:before {
        Content: '';
        height: calc(100% - 26px);
        width: 1px;
        background: var(--colour-border-primary-light);
        position: absolute;
        bottom: 10px;
        left: 0px;
    }

    .mud-tabs-toolbar-wrapper > .d-inline-block:has( .mud-tab-active) .mud-tab:before,
    .mud-tabs-toolbar-wrapper > .d-inline-block:has( .mud-tab-active) + .d-inline-block .mud-tab:before {
        display: none;
    }


/* MUD BREADCRUMBS */
.mud-breadcrumbs {
    font-size: 12px;
    padding: 3px;
}

.mud-breadcrumb-item.mud-disabled > a {
    pointer-events: none;
    color: var(--colour-action-primary);
}

/*Mud context menu paddings area rediculous*/

.mud-list-item.mud-list-item-gutters {
    padding: var(--gutter-size-small);
}

.mud-list.mud-list-padding {
    padding-top: 0;
    padding-bottom: 0;
}

/*Mud switch*/

.mud-switch {
    display: flex;
    transform: translateY(1px);
}

    .mud-switch .mud-switch-span:has(.mud-checked) .mud-switch-track {
        background: var(--colour-action-primary);
        opacity: 1;
    }

    .mud-switch .mud-typography.mud-switch-label-medium {
        font-size: var(--font-size-body-2) !important; /*Important because the mud developers decided to important theirs*/
    }

    .mud-switch .mud-switch-thumb-medium {
        height: 14px;
        width: 14px;
        transform: translateY(3px) translateX(3px);
    }

/* Mud dialog*/
.mud-dialog.mud-dialog-fullscreen {
    animation: var(--fade-in-animation);
}

/*intl-tel-input*/

.iti__flag {
    background-image: url("../lib/intl-tel-input/img/flags.png") !important;
}

/*NICEDIT*/
.nicEdit-selectContain {
    width: unset !important;
}

    .nicEdit-selectContain .nicEdit-selectTxt {
        width: unset !important;
    }

    .nicEdit-selectContain > div {
        border: none !important;
        background: transparent;
    }

.nicEdit-panelContain {
    background: transparent !important;
    border-radius: 4px 4px 0px 0px;
}

.mainContainer.nicEditor div:has( > .nicEdit-main) {
    border-radius: 0px 0px var(--border-radius-medium) var(--border-radius-medium);
}

.nicEdit-pane {
    border-radius: var(--border-radius-medium);
    border: 1px solid var(--colour-border-primary) !important;
    box-shadow: var(--drop-shadow-small);
    background: var(--colour-system-background) !important;
    color: var(--colour-system-foreground) !important;
}

    .nicEdit-pane > div {
        width: 100% !important;
        border: none !important;
    }

        .nicEdit-pane > div:hover > div {
            background: var(--colour-action-primary) !important;
            color: var(--colour-action-primary-foreground) !important;
        }

        .nicEdit-pane > div:last-child {
            border-radius: 0px 0px var(--border-radius-medium) var(--border-radius-medium);
            border-bottom: none !important;
        }

.nicEdit-button,
.nicEdit-selectControl {
    background-size: cover;
}

.nicEdit-button-undefined {
    background: transparent !important;
    border: none !important;
}

.mud-autocomplete .mud-icon-button {
    padding: var(--gutter-size-extra-small);
}

.mud-input-label-outlined {
    transform: translate(14px, 17px) scale(1);
}

.mud-input-helper-text > div > div {
    font-size: 0.75rem;
}

@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
    .iti__flag {
        background-image: url("../lib/intl-tel-input/img/flags@2x.png") !important;
    }
}