@charset "utf-8";

:root {
    --column-gap: 0px;
    --filter-active-color: #e4007d;
}

body.manager_body {
    background: var(--form-color-bg);
    overflow: auto;
}

.margin-left-auto {
    margin-left: auto;
}

[filter-column-status="{nicht verfügbar}"],
[count-query*=".mbp_row[filter-column-status=\"{nicht verfügbar}\"]"],
select option[value="nicht verfügbar"]{
    color: red !important;
}

[filter-column-status="{verfügbar}"],
[count-query*=".mbp_row:not([filter-column-status=\"{nicht verfügbar}\"]"],
select option[value="verfügbar"] {
    color: #009688 !important;
}

/* H2 */
h2 {
    font-weight: 600;
    font-size: 24px;
    margin-bottom: calc(16px - var(--column-gap));
    margin-top: 0px;
}

/* MODUL */
div#manager_modul_wrapper {
    padding: 8px;
}

/* API TEXTINPUT */
api-textinput {
    display: flex;
    column-gap: 0em;
}

api-textinput input[type="text"] {
    padding: 6px 12px;
    width: 128px;
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
    border-radius: 8px;
    font-weight: 400;
    box-shadow: inset rgba(0, 0, 0, 0.1) 5px 1px 8px;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
    border: solid 2px;
    border-right: 0;
    outline: 0;
}

api-textinput button.textbutton {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    border: 0;
}

/* MPB LIST */

.mbp_list .mbp_cell pre {
    all: revert;
}

.mbp_list {
    position: relative;
    --list-bg-color: white;
    background: #ffffff;
    width: 100%;
    max-width: 100%;
    /* min-width: 100%; */
    padding: 8px;
    box-sizing: border-box;
    clip-path: inset(0px round 6px);
}

.mbp_list[is-sorting] {
    pointer-events: none;
    opacity: 0.5;
}

.mbp_list[is-sorting] * {
    pointer-events: none;
}

.mbp_list .mbp_list_scrollwrapper {
    position: relative;
    /* width: 100%; */
    height: fit-content;
}

.mbp_list .mbp_list_scrollcontainer {
    position: relative;
    overflow: auto;
    /* width: fit-content; */
    max-height: calc(100svh - 256px);
}

.mbp_list .mbp_list_scrollcontent {
    position: relative;
    min-width: 100%;
    max-height: 100%;
}

.mbp_list[layout-mode="fixed"] {
    --row-h: 100px;
    --toprow-h: 30px;
}

.mbp_list[layout-mode="fixed"] .mbp_list_scrollcontent {
    width: fit-content;
}

.mbp_list .mbp_row,
.mbp_list .mbp_toprow {
    position: relative;
    border-bottom: solid 1px rgb(0 0 0 / 25%);
    padding: 0.25rem 0;
}

.mbp_list .mbp_row {
    z-index: 2;
}


.mbp_list[layout-mode="subgrid"] .mbp_list_scrollcontent {
    display: grid;
    /* grid-template-columns: repeat(auto,  calc(100%/ var(--column-count))); */
    /* grid-auto-flow: column; */
    grid-template-columns: repeat(var(--column-count), minmax(min-content, 1fr));
    /* width: fit-content; */
    /* height: fit-content; */
}

.mbp_list[layout-mode="subgrid"] .mbp_row,
.mbp_list[layout-mode="subgrid"] .mbp_toprow {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    height: fit-content;
    column-gap: 0.25rem;
}


.mbp_list[layout-mode="fixed"] .mbp_row {
    display: flex;
    height: var(--row-h);
    contain-intrinsic-height: var(--row-h);
    min-width: 100%;
    content-visibility: auto;
}

.mbp_list[layout-mode="fixed"] .mbp_toprow {
    display: flex;
    height: var(--toprow-h);
    min-width: 100%;
}

.mbp_list[layout-mode="fixed"] .mbp_row {
    position: absolute;
}

.mbp_list[layout-mode="fixed"] .mbp_row .mbp_cell,
.mbp_list[layout-mode="fixed"] .mbp_toprow button {
    --col-w: calc(100% / var(--column-count));
    width: var(--col-w);
    min-width: var(--col-w);
    max-width: var(--col-w);
    height: 100%;
}

.mbp_list .mbp_toprow {
    position: sticky;
    left: 0;
    top: 0;
    white-space: nowrap;
    font-weight: 700;
    background: var(--list-bg-color);
    z-index: 3;
    align-items: start;
}

.mbp_list .mbp_toprow button {
    position: relative;
    background: none;
    border: 0;
    font-size: inherit;
    font-family: inherit;
    font-weight: inherit;
    color: inherit;
    padding: 0;
    border-radius: 0;
    cursor: pointer;
    text-align: left;
    display: flex;
    align-items: center;
    line-height: 1em;
}

.mbp_list .mbp_row>*,
.mbp_list .mbp_toprow>* {
    /* overflow: hidden; */
    --pad: 0.75rem;
    --mask-image: linear-gradient(to right, black, black calc(100% - var(--pad)), transparent 100%);
    -webkit-mask-image: var(--mask-image);
    mask-image: var(--mask-image);
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
}

.mbp_list .mbp_row[hidden-by-filter] {
    display: none;
}

.mbp_list .mbp_row:not(.mbp_toprow):before {
    content: " ";
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgb(44 123 185 / 10%);
    pointer-events: none;
    opacity: 0;
    will-change: opacity;
}

.mbp_list .mbp_row:hover:before {
    opacity: 1;
}

.mbp_list .mbp_row .mbp_cell>div {
    display: contents;
}

.mbp_list .mbp_row .mbp_cell,
.mbp_list .mbp_toprow button {
    display: flex;
    align-items: center;
    line-height: 1em;
    white-space: normal;
}

.mbp_list .mbp_row .mbp_cell[col-slug="edit"]:last-child {
    justify-content: right;
}

.mbp_list .mbp_row .mbp_cell[col-slug="edit"]>div {
    display: flex;
    column-gap: 0.5em;
}

.mbp_list .mbp_row>*,
.mbp_list .mbp_toprow>button {
    padding-right: var(--pad);
    align-items: center;
}

.mbp_list .mbp_row .highlighted-by-search {
    background: rgb(234, 255, 76);
    pointer-events: none;
}

.mbp_list .mbp_row[hidden-by-search] {
    display: none;
}

.mbp_list .mbp_list_scrollbartrack {
    position: relative;
    height: 100%;
    width: 20px;
    background: red;
}

.mbp_list_columnfilter_dropdown_reset_button[is-hidden] {
    display: none;
}

.mbp_list .mbp_row .mbp_cell>div:has(filter-el) {
    display: flex;
    flex-wrap: wrap;
    column-gap: 0.25em;
}

.mbp_list .mbp_cell filter-el {
    display: inline;
    position: initial;
}

.mbp_list .mbp_cell filter-el:not(:last-child):after {
    content: ", ";
}

.mbp_list .mbp_row .mbp_cell .fidbt {
    min-width: 100%;
}

/* SCROLLBARS */
.hide-native-scrollbars {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.hide-native-scrollbars::-webkit-scrollbar {
    display: none;
}


/* MANAGER TOP BAR */
.mbp_topbar {
    --active-color: #ffffff;
    position: sticky;
    top: 0;
    display: flex;
    flex-wrap: wrap;
    z-index: 2;
    height: 50px;
    width: 100%;
    left: 0px;
    background: #2f80c0;
    background: linear-gradient(to bottom, #2f80c0, #185688);
    color: #bae1ff;
    box-shadow: rgb(0 0 0 / 10%) 1px 4px 10px;
    align-items: center;
}

.mbp_topbar .logoutbt {
    margin-left: auto;
}

.mbp_topbar .modulselector {
    color: white;
    font-size: 24px;
}

/* SELECT ELEMENT */
/*
.manager_body select,
.manager_body select::picker(select) {
    appearance: base-select;
}

.manager_body select option::checkmark {
    display: none;
}

.manager_body select selectedcontent,
.manager_body select option {
    padding: 0;
}

.manager_body select option:checked {
    display: none;
}
    */

select {
    /* appearance: none; */
    background: transparent;
    font-family: inherit;
    font-size: inherit;
    line-height: inherit;
    border: 0;
    padding: 0;
    width: auto;
    width: fit-content;
    color: inherit;
    field-sizing: content;
}



select {
    padding-right: 0px;
    padding-left: 0px;
}

.manager_body select:focus {
    outline: none;
}


.manager_body select option {
    background: white;
    color: black;
}

/* MANAGER  BODY / MODUL*/
#manager_modul_wrapper * {
    box-sizing: border-box;
}

#manager_modul_wrapper {
    position: relative;
    z-index: 1;
}

#manager_modul_wrapper .mbp_list {
    padding: 8px 12px;
    border-radius: 4px;
}


:is(.mbp_list_columnfilter_dropdown, api-dropdown) {
    display: flex;
    border: solid 2px;
    border-radius: 8px;
    width: fit-content;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 20px;
    align-items: center;
    cursor: pointer;
    transition: 0.3s opacity, 0.3s color;
    box-sizing: border-box;
    background: rgb(255 255 255 / 100%);
}

.mbp_list_columnfilter_dropdown:has(.mbp_list_columnfilter_dropdown_reset_button) {
    opacity: 0.666;
}
.mbp_list_columnfilter_dropdown label{
    margin-right: 4px;
}
:is(.mbp_list_columnfilter_dropdown, api-dropdown)>* {
    cursor: pointer;
}

:is(.mbp_list_columnfilter_dropdown, api-dropdown):hover {
    background: rgb(255 255 255 / 60%);
}

.mbp_list_columnfilter_dropdown .mbp_list_columnfilter_dropdown_reset_button:hover {
    color: #ff0000;
}

.mbp_list_columnfilter_dropdown label:empty {
    display: none;
}

.mbp_list_columnfilter_dropdown:not(:has(option + option)) {
    display: none;
}

.mbp_list_columnfilter_dropdown:not(:has(option:first-child:checked)) {
    opacity: 1;
    color: var(--filter-active-color);
}

/* INPUT */
input.searchinputfield {
    border: 2px solid var(--job-color);
    padding: 6px 12px;
    font-size: inherit;
    font-family: inherit;
    box-sizing: border-box;
    border-radius: 8px;
    font-weight: 400;
    box-shadow: inset rgba(0, 0, 0, 0.1) 5px 1px 8px;
    color: var(--filter-active-color);
    opacity: 0.666;
    background: white;
    outline: 0;
}

input.searchinputfield:not(:placeholder-shown) {
    border: 2px solid;
    opacity: 1;
}



/* DASHBOARD */
.mpb_dashboard {
    display: flex;
    flex-wrap: wrap;
    column-gap: 18px;
    padding: 8px 12px;
    border-radius: 8px;
    background: rgb(255 255 255 / 100%);
    margin-bottom: 4px;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.mpb_dashboard_table {
    display: grid;
    --column-count: 2;
    grid-template-columns: repeat(var(--column-count), minmax(5rem, auto));
    grid-auto-rows: min-content;
    column-gap: 0.25rem;
    width: fit-content;
    /* padding: 8px 12px; */
    border-radius: 12px;
    background: white;
}

.mpb_dashboard_table .mbp_list_dashfield {
    position: relative;
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
}

.mbp_list_dashfield {
    display: flex;
    column-gap: 0.5em;
}

.mbp_list_dashfield .dashfield-label {
    display: flex;
}

.mbp_list_dashfield .dashfield-label svg-icon:first-child {
    margin-right: 4px;
    aspect-ratio: 1.0 !important;
}

.mbp_list_dashfield .dashfield-label:after {
    content: ":";
}

.mbp_list_dashfield .dashfield-unit:empty {
    display: none;
}
/* API SCOPE CALLER */
api-scope-caller {
    --column-gap: 8px;
    display: flex;
    column-gap: var(--column-gap);
    row-gap: 4px;
    align-items: center;
    white-space: nowrap;
}
/* LIST SECTION */
.listsection {
    --column-gap: 8px;
    display: flex;
    /* flex-wrap: wrap; */
    column-gap: var(--column-gap);
    row-gap: 4px;
    align-items: center;
    max-width: 100%;
    overflow-x: auto;
    white-space: nowrap;
    padding-bottom: 4px;
}

.listsection:has(.listsection) {
    flex-direction: column;
    align-items: initial;
}



/* BUTTON */
button {
    all: unset;
    display: inline-block;
}

.textbutton {
    display: flex;
    white-space: nowrap;
    /* column-gap: 0.25em; */
    align-items: center;
    background-color: color-mix(in srgb, var(--form-color) 66%, white);
    color: #ffffff;
    width: fit-content;
    padding: 6px 12px;
    font-size: 16px;
    line-height: 20px;
    box-sizing: border-box;
    border-radius: 8px;
    text-align: center;
    font-weight: 400;
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
    box-shadow: rgba(0, 0, 0, 0.1) 5px 1px 8px;
    text-decoration: none;
    max-width: 100%;
    overflow: clip;
}

.textbutton[needs-second-click][has-first-click] {
    background-color: red;
}

.textbutton:hover {
    background-color: #3F51B5;
}


/* SVG ICON */
:root {
    --lh-factor: calc(20/16);
    --svgicon-height: 1em;
    --svgicon-height: calc(1em * var(--lh-factor));
    --svgicon-size-factor: 0.8;
    --svgicon-size: calc(100% / var(--lh-factor) * var(--svgicon-size-factor));
    --svgicon-position: center;
}

svg-icon {
    aspect-ratio: 1.0 !important;
    display: block;
    height: var(--svgicon-height);
    width: auto;
    background: currentColor;
    flex-shrink: 0;
    mask-repeat: no-repeat;
    mask-size: var(--svgicon-size);
    mask-position: var(--svgicon-position);
    mask-image: var(--svgicon-url);
    -webkit-mask-repeat: no-repeat;
    -webkit-mask-size: var(--svgicon-size);
    -webkit-mask-position: var(--svgicon-position);
    -webkit-mask-image: var(--svgicon-url);
}


/* CUSTOM FIELDS */

.label[custom-field-func] {
    font-size: 16px;
    width: 100%;
}

.label[custom-field-func] .custom_input_value {
    font-size: 16px;
    width: 100%;
    position: relative;
    box-sizing: border-box;
}

.label[custom-field-func]>div {
    width: 100%;
}

h2+.mbp_list_columnfilter_dropdown {
    margin-left: auto;
}




/* job colors */
[job-color-type='MP-Only'],
[filter-column-jobtype*="{MP-Only}"],
select option[value="MP-Only"] {
    color: var(--job-mpverleih-color);
}

[job-color-type='Dreh'],
[filter-column-jobtype*="{Dreh"],
select option[value="Dreh"] {
    color: var(--job-dreh-color);
}

[job-color-type='EQ-Verleih'],
[filter-column-jobtype*="{EQ-Verleih}"],
select option[value="EQ-Verleih"] {
    color: var(--job-eqverleih-color);
}

[job-color-type='Schnitt'],
[filter-column-jobtype*="{Schnitt}"],
select[keep-attributes*="jobtype"] option[value="Schnitt"] {
    color: var(--job-schnitt-color);
}

[job-color-type='Interner Task'],
[filter-column-jobtype*="{Interner Task}"],
select option[value="Interner Task"] {
    color: var(--job-intern-color);
}

[job-color-type='Termin'],
[filter-column-jobtype*="{Termin}"],
select option[value="Termin"] {
    color: var(--job-termin-color);
}

[job-color-type='Leih-EQ'],
[filter-column-jobtype*="{Leih-EQ}"],
select option[value="Leih-EQ"] {
    color: var(--job-leiheq-color);
}

/* PICKER */


/* Kunden Manager */
.manager_kd h2 {
    display: none;
}

/* USER ROLES */
[user-rolle="v"] :is(input[type="file"], .slinput),
[user-rolle="v"] .label[type="filearr"] .input:before,
[user-rolle="v"] .label [apibutton-apicall] {
    display: none !important;
}

[user-rolle="v"] .label[type="katarr"] .idbt,
[user-rolle="v"] .label[type="filearr"] a,
[user-rolle="v"] .mbp_list_columnfilter_dropdown {
    pointer-events: all;
}

[user-rolle="v"] .label[type="katarr"] .idbt>* {
    pointer-events: none;
}