/* "All modes" */
:root {
    --mab-col-gap: 0.4rem;
    --mab-datagrid-selected-background: var(--mud-palette-info-lighten);
    --mab-datagrid-selected-foreground: var(--mud-palette-info-text);
    --title-max-height: 32px;
    --mab-tab-toolbar-height: 48px;
    --mab-toolbar-background: #24242a;
    --mab-tab-hover: #4c4c4c;
    --mab-datagrid-footer-background: var(--mab-tab-hover);
    --mab-drawer-logo-height: 150px;
    --context-menu-background: var(--mab-toolbar-background);
    --mab-datagrid-stripe-background: rgba(255,255,255,0.05);
    --mud-typography-button-text-transform: none !important; /* No more uppercase buttons*/
    --mud-appbar-height: 36px !important;
    --mab-datagrid-header-background: rgba(39,39,47,1);
    --mab-primary-hover: var(--mud-palette-primary-hover);
}

/* Restore sane defaults for lists */
ul, ol, li {
    all: revert;
}


/* Dark mode specific */
#main-layout-container.dark {
    --mab-datagrid-selected-background: #909090;
}
/* /Dark mode specific */


.icon-fade-out {
    animation: iconFadeOut ease-in 4s forwards;
}

@keyframes iconFadeOut {
    to {
        opacity: 0;
    }
}

.mab-select-item.nomargin .mud-list-item-text {
    margin: 0px !important;
}


/* Mud field overrides (smaller font, padding etc) */
.mud-input > textarea.mud-input-root-outlined {
    margin-top: 0px !important;
}

.mud-input-control .mud-input-label-inputcontrol {
    font-size: 0.8rem !important;
}

.mud-input.mud-shrink .mud-input-outlined-border legend {
    padding: 0 4px !important;
}

.mud-input-outlined-border legend {
    margin: 0px 11px 0px 8px !important;
    font-size: 0.6rem !important;
}

.mud-input > input.mud-input-root-outlined.mud-input-root-margin-dense, div.mud-input-slot.mud-input-root-outlined.mud-input-root-margin-dense {
    padding-top: 8px !important;
    padding-bottom: 8px !important;
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    margin-top: unset; /* Try to make sure the label does not go "too high" when it's shrunk */
}

.mud-input-control > .mud-input-control-input-container > .mud-input-label-outlined.mud-input-label-inputcontrol {
    max-width: calc(100% - 1em);
    margin-top: -3px; /* Move the placeholder a bit up.. Because we have changed the margins of the parent */
    margin-left: -5px; /* Move the label (placeholder) to the left */
}

.mud-shrink ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined, .mud-input:focus-within ~ label.mud-input-label.mud-input-label-inputcontrol.mud-input-label-outlined {
    margin-top: 0px;
}

/* Make readonly fields more "visible" that they're read only */
.mud-input-control.readonly .mud-input-outlined-border {
    background: rgba(0, 0, 0, 0.2);
}
/* /Mud field overrides */


/* Navigation overrides */
.mud-navmenu .mud-icon-size-medium {
    /*font-size: 1.25rem !important;*/
}
.mud-navmenu .mud-nav-link {
    padding-top: 2px !important;
    padding-bottom: 2px !important;
}
/* /Navigation overrides */


/* Mud overrides */
@media(max-width: 720px) {
    .mud-dialog-width-full {
        width: calc(100% - 16px) !important;
    }

    .mud-container {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    .mud-dialog .mud-dialog-content {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }
}

.mud-dialog-content {
    padding: 0px 12px !important;
}

.mud-dialog .mud-dialog-title {
    padding-bottom: 0px !important;
}

.mud-treeview-item-arrow {
    margin: 0 !important;
}

.mud-tabs-toolbar {
    background-color: var(--mab-toolbar-background);
}

.mud-tab:hover {
    background-color: var(--mab-tab-hover);
}


input[tabindex="-1"] {
    background-color: rgba(0, 0, 0, 0.2) !important;
}

.mud-drawer-header {
    padding: 6px 12px !important; /* Was 12 / 24*/
}

.mud-card-header {
    padding: 8px 16px !important;
}

.mud-card-content {
    padding: 8px 16px !important;
}

.mud-collapse-entering.mud-navgroup-collapse {
    animation-duration: 100ms !important;
}

.mud-icon-button {
    padding: 3px !important;
}
.mud-treeview-dense .mud-icon-button {
    padding: 0px !important;
}
.mud-treeview-item-arrow {
    width: 24px;
}
.mud-treeview-group {
    margin-left: 12px;
    margin-inline-start: 12px;
}
.mud-treeview-dense .mud-treeview-item-content {
    padding: 2px 0px !important;
}
.mud-treeview-item-icon {
    width: 24px;
}
.mud-treeview-item svg {
    font-size: 1.25rem;
}
.mud-treeview-item-content {
    overflow: clip ;    /* Scenario: Document center, many sub-folders, long names. */
}


.mud-expand-panel .mud-expand-panel-header {
    padding: 0px !important;
    /*padding-bottom: 0px !important;
    padding-top: 0px !important;*/
}

.mud-expand-panel .mud-expand-panel-content {
    padding: 0px !important;
    /*padding-bottom: 0px !important;
    padding-top: 0px !important;*/
}
/* TextField colors */
.mud-input-control.warning {
    background: rgba(255,255,0,0.1);
}
/* /TextField colors */


.shrink-to-fit {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
}
/* DataGrid row colors */
.datagrid tr.success {
    background-color: #A4FFA4 !important;
    color: black;
}

.datagrid tr.warning {
    background-color: #FFFFA4 !important;
    color: black;
}
/* Alert */
.mab-alert.mud-alert-filled-success {
    color: darkslategray;
}

.mab-alert.mud-alert-filled-warning {
    color: darkslategray;
}
/* Dialog */
.mab-dialog-background-passive { /* To allow the background to be clicked */
    pointer-events: none !important;
    background-color: transparent !important;
}

.mab-dialog-background-events { /* To allow the dialog to be clicked if the background is clickable ._. */
    pointer-events: auto !important;
}

.mab-dialog-background-transparent { /* To allow the user to see the background if it's "clickable" */
    background-color: transparent !important;
}

.mab-dialog.fullheight {
    max-height: 100dvh;
}

.mab-dialog.fullheight .mud-dialog-content {
    height: calc(100dvh - 160px);
    overflow: auto;
}

.mab-dialog.dynamic-maxheight .mud-dialog-content {
    max-height: calc(100dvh - 160px);
    overflow: auto;
}

.mab-dialog.fullheight.no-actions .mud-dialog-content {
    height: calc(100vh - 120px);
}

.mab-dialog.dynamic-maxheight.no-actions .mud-dialog-content {
    max-height: calc(100vh - 120px);
}

.mud-dialog-title.draggable {
    cursor: move !important;
    user-select: none;
}

.mud-dialog-fullscreen .mud-focus-trap {
    display: flex;
    flex-direction: column;
    height: 100%;
}
/* Buttons */
.mud-button:focus {
    background: linear-gradient(45deg, var(--mud-palette-primary) 30%, var(--mud-palette-secondary) 100%) !important;
}

@media (max-width: 768px) {
    .hide-icon-on-mobile .mud-button-icon-start { /* Hide the icon on mobile, but not on desktop.. */
        display: none !important;
    }
}
/* /Buttons*/
/* MudSelect - show border around the MudList */
.mud-popover .mud-list {
    border-width: 2px;
    border-color: var(--mud-palette-primary);
}

.mud-popover .mud-list.mud-menu-list {
    /* Hide from normal mud menu */
    border-width: 0px;
}
/* /MudSelect - show border around the MudList */
/* MudTreeView - Add underline to selected */
.mud-treeview-item-content.mud-treeview-item-selected,
.mud-treeview-item-content.mud-treeview-item-selected a {
    text-decoration: underline;
}
/* /MudTreeView */
/* /Mud overrides */
/* Drag and drop / DropZone */
.drag-dropzone-valid {
    transition: border 10ms linear;
    box-shadow: 0 0 0 2px lightblue inset;
}

.drag-source {
    background-color: green;
}

/* MabSelect popover */
.mabselect-tall {
    max-height: 60% !important; /* Taller dropdown */
    /* Wider popover */
    width: auto !important;
    max-width: initial !important;
    /* /Wider popover*/
} 
/* MabInput */

/* MudSelect */
.noborder .mud-input-outlined-border {
    border-width: 0px !important;
}
.noborder:hover .mud-input-outlined-border {
    border-width: 1px !important;
}
/* /MudSelect */


.plain-until-selected .mud-input-outlined-border {
    border-width: 0px !important;
}

.plain-until-selected input:focus ~ .mud-input-outlined-border,
.plain-until-selected .editing .mud-input-outlined-border {
    border-width: 1px !important;
}

.mud-input-control.cursor-pointer input {
    cursor: pointer;
}

.mud-input-control.fullheight,
.mud-input-control.fullheight div {
    height: 100%;
}

    .mud-input-control.fullheight textarea {
        height: 100% !important;
    }
/* /MabInput */
/* Input */
.input-text-align-end input {
    text-align: end;
}
/* DragDrop */
.drag-drop-item.dragging {
    opacity: 0.5; /* Optional, to make the item semi-transparent while dragging */
    border: 2px dashed #888; /* Optional, to show a dashed border while dragging */
}
.drag-drop-zone.dnd-outline-valid {
    outline: 2px dashed var(--mud-palette-primary);
    outline-offset: -2px; /* or 2px depending on look */
    border-radius: 6px;
}

/* /DragDrop */
/* Drag and drop */
.file-drop-zone {
    width: 100%;
    height: 100%;
    align-items: center;
    margin-bottom: 2px;
    min-height: 100px;
}

    .file-drop-zone.outline {
        border: 3px dotted #fb275d;
    }

    .file-drop-zone.dragging {
        border: 3px dotted green;
        background-color: var(--mud-palette-grey-default);
    }
/* Textfield */
.texfield-badge-root {
    position: relative;
}

.textfield-badge {
    position: absolute;
    inset: auto auto calc(100% - 24px) calc(100% - 19px);
}
/*.textfield-badge.top.right {
    inset: auto auto calc(100% - 20px) calc(100% - 13px);
}*/
/* Tabs */
.mab-tabs .mud-tab {
    text-transform: none !important;
}

.mab-tabs.fullheight {
    height: 100%;
    display: flex;
    flex-direction: column;
}

.mab-tabs.fullwidth {
    width: 100%;
}

.mab-tabs-panel {
    overflow: hidden; /* Workaround to allow MudGrid inside of a tab to not overlap.. Ref https://github.com/MudBlazor/MudBlazor/issues/9477 */
}

.mab-tabs-panel.fullheight {
    height: calc(100% - var(--mab-tab-toolbar-height));
    display: flex;
    flex-direction: column;
    /*margin-bottom: 1em; */ /* 2025-02-04: Not needed? Old:To show the border if the content is MabFormSection */
}

.mab-tabs-panel.fullheight .mud-tab-panel {
    height: 100%;
    display: contents;
}

.mab-tab-content {
    width: 100%;
    padding: 10px 16px;
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--mud-elevation-10);
    border-radius: var(--mud-default-borderradius);
    flex: 0;
    max-height: 99%; /* So we can see the bottom border ._. */
    height: 99%;
}

.mab-tabs.dense .mud-tabs-tabbar-inner,
.mab-tabs.dense .mud-tab {
    min-height: 36px !important;
}
/* Content container */
.mab-content-container {
}

.mab-container.fullheight {
    height: calc(100dvh - 68px);
    /*height: calc(100vh - 96px);*/
}

@media(min-width: 0) {
    .mab-container-maxwidth-xs {
        max-width: 444px;
    }
}

@media(min-width: 600px) {
    .mab-container-maxwidth-sm {
        max-width: 600px;
    }
}

@media(min-width: 960px) {
    .mab-container-maxwidth-md {
        max-width: 960px;
    }
}

@media(min-width: 1280px) {
    .mab-container-maxwidth-lg {
        max-width: 1280px;
    }
}

@media(min-width: 1920px) {
    .mab-container-maxwidth-xl {
        max-width: 1920px;
    }
}

@media(min-width: 2560px) {
    .mab-container-maxwidth-xxl {
        max-width: 2560px;
    }
}
/* /Content container */
/* Content section */
.mab-content-section.outlined {
    border: 1px solid var(--mud-palette-lines-default);
}

.mab-content-section {
    border-radius: var(--mud-default-borderradius);
    background-color: var(--mud-palette-surface);
    transition: border-radius 250ms cubic-bezier(.4,0,.2,1);
    display: flex;
    flex-direction: column;
    position: relative;
    /*padding: 1em;*/   /* 2025-12-17 KB - Fjernet etter forespørsel fra Magnus */
}

/*@media(max-width: 720px) {
    .mab-content-section {
        padding: 8px;
    }
}*/

.mab-content-section.fullheight {
    height: calc(100% - var(--title-max-height));
}
/* /Content section */
/* Form section */
.mab-form-section {
    display: flex;
    flex-direction: column;
    padding: 10px 8px;
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    background-color: var(--mud-palette-surface);
    color: var(--mud-palette-text-primary);
    box-shadow: var(--mud-elevation-10);
    border-radius: var(--mud-default-borderradius);
}

    .mab-form-section.fullheight {
        height: 100%;
    }

    .mab-form-section.fullwidth {
        width: 100%;
    }

    .mab-form-section:not(:last-child) {
        margin-bottom: 1em;
    }

    .mab-form-section.grow {
        flex-grow: 1;
        max-height: 100%;
    }

.darken-section {
    background: linear-gradient(0deg, #1e1e2d 0%, rgba(21, 21, 33, 1) 50%);
    border: 1px solid rgba(51, 50, 62, 1);
}
/* /Form section */
/* Table */
table.simple-table td {
    padding: 0 15px 0 0;
}

.mab-simple-table thead {
    top: 0;
    background: var(--mab-datagrid-header-background);
    z-index: 1;
}

.mab-simple-table th.justify-end,
.mab-simple-table td.justify-end {
    justify-items: end !important;
    text-align: end !important;
}

.mab-simple-table th.justify-center,
.mab-simple-table td.justify-center {
    justify-items: center !important;
    text-align: center !important;
}

.mab-simple-table tfoot {
    border-top: 1px solid var(--mud-palette-table-lines);
    background-color: var(--mab-datagrid-footer-background);
}
.mab-simple-table * tr > td,
.mab-simple-table * tr > th {
    padding: 0px !important;
    padding-left: 4px !important;
}

/* /Table */
/* MAB Service */
.service-info {
    display: flex;
}

.service-info-label {
    flex-grow: 0;
    min-width: 100px;
    flex-basis: 20%;
}

.service-info-data {
    flex-grow: 1;
}
/* Datagrid */
.datagrid-container {
    display: flex;
    flex-flow: column;
    height: 100%;
    overflow: auto;
    --scroll-pad: 50px;
}

table.datagrid * tr.error {
    background-color: darkred !important;
}

table.datagrid * tr.selected.error {
    background-color: red !important;
}

table.datagrid {
    border-spacing: 0;
    width: 100%;
    background-color: var(--mud-palette-surface);
    border-radius: var(--mud-default-borderradius);
    transition: box-shadow 300ms cubic-bezier(.4,0,.2,1) 0ms;
    border-collapse: collapse;
}

    table.datagrid .sortable {
        cursor: pointer;
        display: inline-flex;
    }

        table.datagrid .sortable svg {
            fill: currentColor;
            font-size: 1.5rem;
            width: 1em;
            height: 1em;
        }

            table.datagrid .sortable svg.desc {
                transform: rotate(180deg);
            }

        table.datagrid .sortable:hover {
            color: var(--mud-palette-action-default);
        }

    table.datagrid * tr th {
        background-color: var(--mab-datagrid-header-background) !important;
        position: sticky;
        top: 0;
        z-index: 1;
        vertical-align: bottom;
    }

    table.datagrid * th .div {
        display: flex;
    }

    table.datagrid .col-header-content {
        padding-right: var(--mab-col-gap);
        position: relative;
        display: flex;
        align-items: center;
        width: 100%;
        vertical-align: bottom;
    }

        table.datagrid .col-header-content.wrap {
            white-space: normal;
            overflow: hidden;
            max-height: 70px;
        }

    table.datagrid .col-options {
        margin-left: -0.4em;
    }

        table.datagrid .col-options button {
            padding: 0px;
        }

    table.datagrid .col-title {
        display: flex; /* So that we can make col-title-text expand as much as possible, and still hide overflow with ellipsis */
        line-height: 1.5rem;
        font-weight: 500;
        /*gap: 0.4rem;*/
        min-width: 0px;
        flex-grow: 1;
        padding: 0;
    }

    table.datagrid div.col-title {
        /*padding-left: 0.5em;*/
    }
    /* If the column is sortable, its title is rendered as a button element for accessibility and to support navigation by tab */
    table.datagrid button.col-title {
        border: none;
        background: none;
        position: relative;
        cursor: pointer;
        justify-content: start;
    }

    table.datagrid .col-justify-end .col-title {
        justify-content: end;
        flex-direction: row-reverse; /* For end-justified cols, the sort indicator should appear before the title text */
        padding-left: 0em;
    }

    table.datagrid .col-justify-start .col-title {
        justify-content: start;
    }

    table.datagrid .col-justify-center .col-title {
        justify-content: center;
        padding-left: 0em;
    }
    /* Datagrid: Mobile */
    table.datagrid.mobile td {
        display: flex;
        justify-content: space-between;
        align-items: start;
        text-align: end !important;
        border: none;
    }

    table.datagrid.mobile colgroup {
        display: none;
    }

    table.datagrid.mobile td:before {
        content: attr(data-label);
        font-weight: 500;
        padding-right: 16px;
        padding-inline-end: 16px;
        padding-inline-start: unset
    }

    table.datagrid.mobile td:last-child {
        /*border-bottom: 2px solid var(--mud-palette-table-lines);*/
        border-bottom: 1px solid rgba(255,255,255,0.5);
    }
    /* Hide empty cells on mobile */
    table.datagrid.mobile td:has(span:empty),
    table.datagrid.mobile td:empty {
        /*display:none; This will hide the "lines" as well.. */
        height: 0;
    }

    table.datagrid.mobile tr {
        display: revert;
    }

    table.datagrid.mobile thead {
        display: none;
    }
    /* We put the column title text in its own element primarily so that it can use text-overflow: ellipsis */
    table.datagrid .col-title-text {
        text-overflow: ellipsis;
        overflow: hidden;
        white-space: nowrap;
    }

    table.datagrid .icon-column-small {
        width: 25px;
        padding: 0px;
        text-align: center;
        margin-top: 3px;
        justify-items: center; /* For the header */
    }

    table.datagrid .icon-column-small .col-header-content {
        padding-right: 0px; /* So the header and the icons lines up.. */
    }

    table.datagrid > thead .col-width-draghandle {
        width: 0.4rem;
        /*right: calc(var(--mab-col-gap)/2);*/
        /*right: calc(-9px + var(--mab-col-gap)/2);*/
        right: -5px;
        position: absolute;
        top: 0;
        bottom: 0;
        cursor: ew-resize;
    }

        table.datagrid > thead .col-width-draghandle:after {
            top: 5px;
            bottom: 5px;
            position: absolute;
            content: ' ';
            border-left: 1px solid #ccc;
        }

    table.datagrid .sort-indicator {
        opacity: 0;
        width: 0em;
        height: 1em;
        align-self: center;
        text-align: center;
        user-select: none;
        transition: opacity 300ms cubic-bezier(.4,0,.2,1) 0ms,transform 200ms cubic-bezier(.4,0,.2,1) 0ms;
    }

    table.datagrid .col-sort-desc .sort-indicator,
    table.datagrid .col-sort-asc .sort-indicator {
        opacity: 0.5;
        width: 1em;
        /*background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M 2 3.25 L 12 20.75 L 22 3.25 L 12 10 z" /></svg>');*/
    }

    table.datagrid .col-sort-desc .sort-indicator {
        transform: scaleY(-1);
    }

    table.datagrid * tr {
        white-space: nowrap; /* We want to allow multi-lines in tables? OR - atleast on mobile!! */
    }

        table.datagrid * tr.selected {
            background-color: var(--mab-datagrid-selected-background) !important;
            color: var(--mab-datagrid-selected-foreground) !important;
        }

        table.datagrid * tr td {
            border: 1px solid var(--mud-palette-table-lines);
        }

            table.datagrid * tr td,
            table.datagrid * tr td div {
                text-overflow: ellipsis;
                overflow: hidden;
                white-space: nowrap; /* We want to allow multi-lines in tables? OR - atleast on mobile!! */
            }


                table.datagrid * tr td.slider,
                table.datagrid * tr td.slider div {
                    overflow: unset;
                }

        table.datagrid * tr th {
            text-align: start;
            /*padding: 0.1rem calc(0.4rem + var(--mab-col-gap)) 0.1rem 0rem*/
            padding: 0.1rem 0.4rem;
        }

        table.datagrid * tr td {
            text-align: start;
            padding: 0.1rem calc(0.4rem + var(--mab-col-gap)) 0.1rem 0.4rem
        }
            /* Datagrid editable columns */
            table.datagrid * tr td:has(.mud-input-control) {
                padding: 0px;
                margin: 0px;
            }

    table.datagrid .mud-input-control {
        margin: 0px;
    }
    /* /Datagrid editable columns */
    /* Stripe only master rows (those with .dg-row) */
    table.datagrid tbody > .dg-row:nth-child(even of .dg-row) {
        /*background-color: var(--mab-datagrid-stripe-background);*/
        background-color: #373740;
    }

    table.datagrid tbody > .dg-row:nth-child(odd of .dg-row) {
        /*background-color: var(--mab-datagrid-stripe-background);*/
        background-color: #41414A;
    }
    /* Make the detail row match the master above it */
    table.datagrid tbody > .dg-row:nth-child(even of .dg-row) + .dg-detail-row {
        background-color: #373740;
        /*background-color: var(--mab-datagrid-stripe-background);*/
    }

    table.datagrid * tr:not(.dg-detail-row):hover {
        /*background-color: var(--mud-palette-table-hover) !important;*/
        /*background-color: var(--mud-palette-table-hover) !important;*/
        filter: brightness(1.5);
        transition: filter 0.15s ease;
    }

    table.datagrid .col-justify-end {
        text-align: end;
        padding-right: 1em;
        justify-items: end;
    }

    table.datagrid .col-justify-center {
        text-align: center;
        justify-items: center;
    }
    /*  2025-01-29 - Removed.. Fucks up the Settings -> EmailClient -> Permissions.. */
    /*.datagrid-container button:not(:last-child) {
    margin-right: 1em;
}*/
    table.datagrid tfoot {
        background-color: var(--mab-datagrid-footer-background)
    }

    table.datagrid .resizer {
        height: 100%;
        position: absolute;
        top: 0;
        right: 0;
        width: 8px;
        cursor: col-resize;
        user-select: none;
    }

        table.datagrid .resizer:hover {
            border-right: 2px solid var(--mud-palette-primary);
        }

    table.datagrid .dg-detail-cell {
        color: goldenrod;
    }
/* /Datagrid */
/* Input */
.clickable-input input {
    cursor: pointer;
}
/* /Input */