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


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


/* 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);
}
.mud-input > textarea.mud-input-root-outlined {
    margin-top: 0px !important;
}

/*.mud-drawer-header {
    min-height: var(--mab-drawer-logo-height);
}*/
.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: 4px !important;
}
.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;*/
}

/* Override padding/margins */
.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 */
}
/* /Override padding/margins*/


.shrink-to-fit {
    display: inline-block;
    white-space: nowrap;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    transform-origin: left center;
}


/* 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 .mud-dialog-content {
    height: calc(100vh - 185px);
    overflow: auto;
}
.mab-dialog.dynamic-maxheight .mud-dialog-content {
    max-height: calc(100vh - 185px);
    overflow: auto;
}
.mud-dialog-title.draggable {
    cursor: move !important;
    user-select: none;
}

/* 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-dropzone-valid-treeview > div > .mud-treeview-item > .mud-treeview-item-content {
    /* Requires a div as "parent" */
    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;
}


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


/* Drag and drop */
.file-drop-zone {
    width: 100%;
    height: 100%;
    align-items: center;
    margin-bottom: 2px;
    min-height: 300px;
}
.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% - 40px) calc(100% - 30px);
}
/*.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-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-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 ._. */
}


/* Content container */
.mab-content-container {
    
}
.mab-container.fullheight {
    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;
}
@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 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);
}
.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(--mud-palette-appbar-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);
}
/* /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;
}

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(--mud-palette-appbar-background) !important;
    position: sticky;
    top: 0;
    z-index: 1;
}
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%;
}
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 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;
    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
}

table.datagrid * tr:nth-child(even) {
    background-color: var(--mab-datagrid-stripe-background);
}
table.datagrid * tr:hover {
    background-color: var(--mud-palette-table-hover);
}
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);
}
/* /Datagrid */


/* Input */
.clickable-input input {
    cursor: pointer;
}
/* /Input */