/*
    This file contains font definitions, as well as helper classes and global styles
    that are includable on all pages.
*/


/*
    ----------------------------------------------------------------------------
    Font face setup
    Use the fonts from the assets provider instead of serving them ourselfes
    This was strongly recommended by the Workbench team.
    The assets are very likely already being cached by a CDN, 
    speeding up loadtimes
    ----------------------------------------------------------------------------
*/

@font-face {
    font-family: 'MBCorpo Title';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/MBCorpoATitleCond-Regular-Web.woff2') format('woff2');
}

@font-face {
    font-family: 'MBCorpo Text';
    font-weight: normal;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/MBCorpoSText-Regular-Web.woff2') format('woff2');
}

@font-face {
    font-family: 'MBCorpo Text';
    font-weight: bold;
    font-style: normal;
    font-display: swap;
    src: url('../fonts/MBCorpoSText-Bold-Web.woff2') format('woff2');
}

/*
    ------------------------------------------------
    Previous DaimlerCS and DaimlerCAC webfonts
    for cyrillic and greek support
    ------------------------------------------------
*/

@font-face {
    font-family: 'DaimlerCAC-Regular';
    font-display: swap;
    src: url('../fonts/DaimlerCAC-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'DaimlerCS-Regular';
    font-display: swap;
    src: url('../fonts/DaimlerCS-Regular.woff2') format('woff2');
}

/*
    ------------------------------------------------
    Arabic variations
    Daimler Corporate A Condensed Arabic Regular
    ------------------------------------------------
*/
@font-face {
    font-family: 'DaimlerCACArab-Regular';
    font-display: swap;
    src: url('../fonts/DaimlerCACArab-Regular.woff2') format('woff2');
}

@font-face {
    font-family: 'DaimlerCSArab-Regular';
    font-display: swap;
    src: url('../fonts/DaimlerCSArab-Regular.woff2') format('woff2');
}

/*
    Always try to use MBCorpo first.
    For kyrillic and arab glyphs fallback to old daimler fonts (this is also how workbench does it)
    Once MBCorpo supports those glyphs, replace the fonts here
*/

:root {
    --vbs-font-title: 'MBCorpo Title', 'DaimlerCAC-Regular', 'DaimlerCACArab-Regular', serif;
    --vbs-font-text: 'MBCorpo Text', 'DaimlerCS-Regular', 'DaimlerCSArab-Regular', sans-serif;

    --booked-light: #D4E1C8;
    --booked-dark: #82a95c;
    --checked-out-light: #efdfd3;
    --checked-out-dark: #c3a995;
    --checked-in-light: var(--wb-grey-75);
    --checked-in-dark: var(--wb-grey-60);
    --retired-light: var(--wb-grey-45);
    --retired-dark: var(--wb-grey-40);
}

/*
    ------------------------------------------------
    End of font config
    ------------------------------------------------
*/

.info-modal {
    z-index: 10000;
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.5);
    display: grid;
    place-content: center;
    justify-items: center;
    gap: var(--space-s);
}

    .info-modal wb-card {
        display: grid;
        place-content: center;
        place-items: center;
        padding: var(--space-s);
        gap: var(--space-xs);
        position: fixed;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }

        .info-modal wb-card .message:empty {
            display: none;
        }

    .info-modal.error wb-icon {
        color: var(--wb-red-50);
        width: 32px;
        height: 32px;
    }

wb-notification-host {
    z-index: 11000; /* above info-modal */
}

wb-notification[variant="error"] {
    --border-color: var(--wb-red-40);
}

wb-notification[variant="warning"] {
    --border-color: var(--wb-yellow-45);
}

wb-notification[variant="success"] {
    --border-color: var(--wb-green-45);
}

#always-on-top {
    z-index: 10000;
    position: relative;
}

.hidden {
    display: none !important;
}

wb-toggle-control label {
    margin: 0;
}

.small-scrollbar {
    scrollbar-width: thin;
}

    .small-scrollbar::-webkit-scrollbar {
        height: var(--small-scrollbar-width);
        width: var(--small-scrollbar-width);
    }

    .small-scrollbar::-webkit-scrollbar-track {
        background: var(--scroll-bg, var(--wb-white));
    }

    .small-scrollbar::-webkit-scrollbar-thumb {
        background: var(--wb-grey-70);
        border-radius: 20px;
        border: 4px solid var(--scroll-bg, var(--wb-white));
    }

/* #region simple-input (replicates v7 inputs) */

.simple-input {
    background: var(--wb-grey-95);
    border: 1px solid var(--wb-grey-70);
    outline: 1px solid transparent;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas: 'icon input action';
    align-items: center;
    height: 40px;
    transition: border-color 0.3s var(--wb-fade), outline-color 0.3s var(--wb-fade);
}

    .simple-input:focus-within {
        outline-color: var(--wb-blue-45);
        border-color: var(--wb-blue-45);
    }

    .simple-input:hover {
        background: var(--wb-white);
    }

    .simple-input :is(input, select) {
        grid-area: input;
        padding: 7px 16px;
        align-self: stretch;
        background: unset;
        color: var(--wb-grey-20);
        border: 0;
        text-overflow: ellipsis;
        font-family: var(--wb-font-text);
        font-size: 1rem;
    }

    .simple-input select {
        font-weight: bolder;
        margin-right: 8px;
    }

    .simple-input :is(input, select):focus {
        border: 0;
        outline: 0;
    }

    .simple-input :is(input, select)::placeholder {
        color: var(--wb-grey-70);
    }

    .simple-input > wb-icon {
        grid-area: icon;
        padding-left: 16px;
        width: 36px;
        color: var(--wb-grey-60);
    }

    .simple-input > button {
        grid-area: action;
        padding-inline: 12px;
        background: transparent;
        color: var(--wb-grey-60);
    }

        .simple-input > button:hover {
            color: var(--wb-grey-20);
        }

    .simple-input:has(> input[readonly]) {
        border: 0;
    }

        .simple-input:has(> input[readonly]):hover {
            background: var(--wb-grey-95); /* default value */
        }

    /*  Note that we don't set the 'type' attribute of the input node,
    as this would enforce formatting to the Browser's language,
    overriding our custom decimal separator implementation in validatecurrencyforculture.js */
    .simple-input[type="number"] > input {
        text-align: right;
    }

/* #endregion */

/* #region simple-input-v5 (styling applied to v5 inputs) */

/* class for the wb-input-control node */
.simple-input-v5 {
    height: 40px;
}

    .simple-input-v5 > wb-input {
        height: inherit;
        width: 100%;
    }

        /* v5 input has to be created with a label, as an error is thrown otherwise */
        .simple-input-v5 > wb-input > label {
            display: none;
        }

        .simple-input-v5 > wb-input > input {
            height: inherit;
            width: inherit;
            grid-area: input;
            padding: 7px 16px;
        }

    .simple-input-v5[type="number"] > wb-input > input {
        text-align: right;
    }

    /* simple-input and simple-input-v5 with suffix */
    .simple-input > p.suffix,
    .simple-input-v5 > wb-input > p.suffix {
        margin: 0px; /* override default value set by custom.css */
        margin-right: 6px;
        height: 100%;
        align-content: center;
    }

/* #endregion */

/* #region workbench tooltip */

.tooltip-icon {
    color: var(--wb-grey-40);
    cursor: pointer;
    font-size: 22px !important;
}

    .tooltip-icon:hover {
        font-variation-settings: 'FILL' 1;
    }


.tooltip-wrapper {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.tooltip-icon-wrapper-parent {
    display: inline-flex;
    align-items: center;
    margin-left: var(--wb-spacing-xxs);
    height: 0px;
}

.tooltip-icon-wrapper-child {
    height: 21px; /* icon has 22px height, but here we need 21px for better centering */
    display: flex;
    align-items: flex-start;
}

/* #endregion */

.space-between {
    display: flex;
    justify-content: space-between;
}

/* wb-tabs that act as linkouts should not have an underlined text */
a:has(>wb-tab):hover {
    text-decoration: none;
}

.wb-list-item {
    --indentation: var(--wb-spacing-xs);
}