@font-face {
    font-family: 'Open Sans';
    src: url('/assets/fonts/unifont/OpenSans-Regular.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/assets/fonts/unifont/OpenSans-Italic.ttf') format('truetype');
    font-weight: normal;
    font-style: italic;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/assets/fonts/unifont/OpenSans-Bold.ttf') format('truetype');
    font-weight: bold;
    font-style: normal;
}
@font-face {
    font-family: 'Open Sans';
    src: url('/assets/fonts/unifont/OpenSans-BoldItalic.ttf') format('truetype');
    font-weight: bold;
    font-style: italic;
}

:root {
    --default-font-family: 'Open Sans';
    font-family: 'Open Sans', var(--default-font-family, sans-serif);
    font-feature-settings: "tnum";
    /*text-rendering: optimizeLegibility; */
    --error-background-color: #A10000;
    --error-color: #FFFFFF;
    --warning-background-color: #FEF3C7;
    --warning-color: #451A03;
    --information-message-background-color:  #E0F2FE;
    --information-message-color: #0369A1;

    /*
        ## Farbkonzept

        Es gibt Basis-Bereiche und akzentuierte Bereiche.

        Basis-Bereich ist der normale Inhalts-Bildschirm.

        Akzent-Bereiche sind z.B. die Navigationsleisten oder die Tabellen-Überschriften.
        Reverse-Akzent-Bereiche sind Bereiche innerhalb eines (typischerweise grossen) Akzent-Bereichs, 
        die darin nochmals hervorgehoben werden müssen (Beispielsweise ein Menü innerhalb der Navigation)

        Dazu gibt es die generellen Programm-color-Schemes:
        - crm (default)
        - portfolio
        - erp
        - liveplan

        Das generelle Color-Schema wird durch das Attribut color-schema auf dem body beeinflusst.
    */

    --general-crm-background-color: steelblue;
    --general-crm-color: white;
    
    --general-portfolio-background-color: #082567; /* sapphire */
    --general-portfolio-color: white;

    --general-liveplan-background-color: #3a7673;
    --general-liveplan-color: white;

    --general-erp-background-color: #6F8FAF; /* denim */
    --general-erp-color: white;

    --general-color: black;
    --general-background-color: white;
    --general-accent-background-color: var(--general-crm-background-color);
    --general-accent-color: var(--general-crm-color);
    --general-accent-hover-color: skyblue;
    --general-accent-reverse-background-color: var(--general-crm-color);
    --general-accent-reverse-color: var(--general-crm-background-color);
    --general-accent-reverse-hover-color: lightgrey;


    --signal-ok-color: lightgreen;
    --signal-warning-color: yellow;
    --signal-bad-color: red;

    --dropzone-color: white;
    --dropzone-background-color: #003049;

    --button-background-color: var(--general-accent-background-color);
    --button-disabled-background-color: lightgray;
    --button-disabled-color: gray;
    --button-color: var(--general-accent-color);
    --button-hover-color: var(--general-accent-hover-color);
    --dangerous-button-background-color: rgb(196, 146, 146);
    ;
    --dangerous-button-color: white;
    --dangerous-button-hover-background-color: darkred;
    --dangerous-button-hover-color: white;

    --inactive-color: #555;
    --inactive-color-contrast: #DDD;

    --button-visibility-when-not-in-focus: visible;

    --input-background-color: rgba(196, 225, 249, 0.5);
    --input-background-color-on-focus: lightyellow;
    --input-background-color-full-tone: rgba(196, 225, 249);


}

body[color-schema="portfolio"] {
    --general-accent-color: var(--general-portfolio-color);
    --general-accent-background-color: var(--general-portfolio-background-color);

    --general-accent-reverse-color: var(--general-portfolio-background-color);
    --general-accent-reverse-background-color: var(--general-portfolio-color);

}

body[color-schema="erp"] {
    --general-accent-color: var(--general-erp-color);
    --general-accent-background-color: var(--general-erp-background-color);

    --general-accent-reverse-color: var(--general-erp-background-color);
    --general-accent-reverse-background-color: var(--general-erp-color);
}

body[color-schema="liveplan"] {
    --general-accent-color: var(--general-liveplan-color);
    --general-accent-background-color: var(--general-liveplan-background-color);

    --general-accent-reverse-color: var(--general-liveplan-background-color);
    --general-accent-reverse-background-color: var(--general-liveplan-color);
}


/*
        ## Klassen

        body.screenlocked:  Legt fest, dass die Applikation genau den Bildschirm füllen soll (Breite und Höhe). 
                            Dies eignet sich z.B., um Listen scrollbar zu machen und damit die Spaltenköpfe sichtbar 
                            zu lassen. Die typischen Such- und Filter-Seiten sind screenlocked.

        body.widthlocked:   Hiermit wird nur die Breite auf 100% festgezurrt, nicht aber die Höhe. Zurzeit wird sie
                            nirgends verwwendet.


    */



html,
body {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    background-color: var(--general-background-color);
    color: var(--general-color);
    position: relative;
}

nav {
    flex: 0 1 auto;
    width: 100%;
    height: 70px;
}

main {
    width: fit-content;
}

/* limited wird gesetzt, wenn die App eine Beschränkung auf 100% des Bildschirms
   verlangt (z.B. Notiz-Editor */
html:has(body.limited) {
    min-height: 100vh;

    &>body {
        margin: 0;
        min-height: 100vh;
        display: flex;
        flex-direction: column;

        &>main {
            flex-grow: 2;
            display: flex;
            flex-direction: column;
        }
    }
}

.small-popover {
    margin: 0;
    /* Verhindert das Wegrutschen in die Ecke (Chromium-Standard) */
    position-anchor: implicit;
    /* Bindet sich an die übergebene 'source' im JS */
    position-area: bottom span-right;
    /* Platziert es linksbündig darunter */

    border: 1px solid #d1d5db;
    border-radius: 8px;
    padding: 16px;
    background-color: #ffffff;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);

    .config-form {
        display: flex;
        flex-direction: column;
        gap: 12px;
        min-width: 240px;
    }

    .config-form label {
        font-size: 0.875rem;
        font-weight: normal;
        color: #374151;
    }

    /* Die Button-Leiste ganz unten */
    .form-actions {
        display: flex;
        justify-content: flex-end;
        /* Schiebt die Buttons nach rechts */
        gap: 8px;
        margin-top: 4px;
    }

    /* Gemeinsames Button-Styling */
    .form-actions button {
        padding: 6px 12px;
        border-radius: 4px;
        font-size: 0.875rem;
        cursor: pointer;
        border: 1px solid transparent;
        transition: background-color 0.15s ease;
    }

    /* Abbrechen-Button (Sekundär) */
    .btn-secondary {
        background-color: #f3f4f6;
        color: #374151;
        border-color: #d1d5db;
    }

    .btn-secondary:hover {
        background-color: #e5e7eb;
    }

    /* OK-Button (Primär) */
    .btn-primary {
        background-color: #2563eb;
        color: #ffffff;
    }

    .btn-primary:hover {
        background-color: #1d4ed8;
    }
}

@media screen {
    html:has(body.screenlocked) {
        height: 100vh;
        width: 100vw;

        &>body {
            margin: 0;
            height: 100vh;
            max-width: 100vw;
            display: flex;
            flex-direction: column;

            &>main {
                flex-grow: 2;
                display: flex;
                flex-direction: column;
                height: 100%;
                max-width: 100vw;
                min-width: 50rem;
                overflow: hidden;

                &>.ui-data-table {
                    flex-grow: 2;
                    min-height: 100%;
                    max-height: 100%;
                    display: flex;
                    flex-direction: column;

                    &.loading {
                        min-height: 140px;
                        align-self: center;
                    }
                }
            }
        }
    }

    html:has(body.widthlocked) {
        width: 100%;

        &>body {
            width: 100%;

            &>main {
                width: 100%;
            }
        }
    }
}

input[type="date"],
input[type="datetime-local"],
input[type="time"],
input[type="text"],
input[type="search"],
input[type="email"],
input[type="tel"],
input[type=url],
textarea {
    font-family: 'DejaVu Sans Condensed', 'Segoe UI', Arial, Tahoma, Geneva, Verdana, sans-serif;
    min-width: 11rem;
    background-color: var(--input-background-color);

    &:focus {
        background-color: var(--input-background-color-on-focus);
    }
}

input,
textarea {
    border: none;
    font-size: 100%;
}

textarea:not([rows]) {
    field-sizing: content;
}

button,
input[type=button],
input[type=submit] {
    font-family: inherit;
    letter-spacing: inherit;
    font-feature-settings: inherit;
    font-size: 100%;
    background-color: var(--button-background-color);
    cursor: pointer;
    color: var(--button-color);
    border-radius: 4px;
    border: none;
    display: flex;
    flex-flow: row nowrap;
    align-items: center;
    justify-content: center;
    text-wrap: balance;
    gap: 1em;

    &:not(:disabled):hover {
        background-color: var(--button-hover-color);
    }

    &.icon:not(:disabled):hover {
        background: transparent;
    }

    &:disabled {
        background-color: var(--button-disabled-background-color);
        color: var(--button-disabled-color);
        cursor: inherit;
    }

    &.dangerous,
    &.delete-button {
        background-color: var(--dangerous-button-background-color);
        color: var(--dangerous-button-color);

        &:not(:disabled):hover,
        &:focus {
            background-color: var(--dangerous-button-hover-background-color);
            color: var(--dangerous-button-hover-color);
        }
    }

    &.icon,
    & .icon {
        background: transparent;
        font-family: 'Material Symbols Outlined';
    }

}

select {
    border: none;
    cursor: pointer;
    font-family: var(--default-font-family, sans-serif);
    appearance: base-select;

    &:focus {
        background-color: var(--input-background-color-on-focus, var(--input-background-color, var(--background-color, white)));
    }

    &:disabled {
        cursor: not-allowed;
    }

    &::picker(select) {
        appearance: base-select;
        border-color: #BBB;
        padding: 0 0.2rem 0.2rem 0.2rem;
        box-shadow: rgba(0, 0, 0, 0.1) 1px 2px 6px;
    }

    & option:hover {
        background-color: color-mix(in srgb, var(--general-accent-reverse-color) 60%, #FFFF) !important;
    }

    /* Lasse den Platzhalter als grauen Wert im Feld erscheinen
        wenn die Select-Box nicht aufgeklappt ist */
    &.placeholder {
        font-style: italic;
        color: lightgray;
    }

    & option {
        font-style: normal;
        text-overflow: ellipsis;
        color: black;
        background-color: var(--general-accent-reverse-background-color);
        padding: 0 0.5rem;
    }

    & option[value=""] {
        font-style: italic;
        color: lightgray;
    }

    & option.inaktiv {
        background-color: lightyellow;
        color: darkgrey;
        font-style: italic;
    }

    & optgroup {
        text-overflow: ellipsis;
        padding: 2px;
    }

    & optgroup[all]:not(:has(~ option:not(:checked), ~ optgroup option:not(:checked))) {
        background: linear-gradient(var(--general-accent-reverse-color), var(--general-accent-reverse-color));
        color: white;

    }

    & optgroup:not([all]):not(:has(option:not(:checked))) {
        background: linear-gradient(var(--general-accent-reverse-color), var(--general-accent-reverse-color));
        color: white;
    }

    & optgroup[all]+:not(:has(option:not(:checked))) {
        background: linear-gradient(var(--general-accent-reverse-color), var(--general-accent-reverse-color));
    }

    & option:checked {
        background: linear-gradient(var(--general-accent-reverse-color), var(--general-accent-reverse-color));
        color: white;
    }
}


dialog,
.dialog {
    height: fit-content;
    max-width: 94vw;
    border: none;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.5);
    outline: none;
    flex-direction: column;
    padding: 0;
    overflow: auto;
    overscroll-behavior: contain;

    &[open] {
        display: flex;
    }

    &::backdrop {
        background: rgba(0, 0, 0, 0.3);
    }

    & h1 {
        flex: 0 1 auto;
        background-color: var(--general-accent-background-color);
        color: var(--general-accent-color);
        font-size: 100%;
        font-weight: normal;
        margin: 0;
        padding: 6px 0px 6px 12px;
        display: flex;
        justify-content: space-between;
    }

    & .closemark {
        padding: 0 1em !important;
        margin: 0 !important;
        cursor: pointer;
        background: transparent;
        text-decoration: none;
        color: var(--general-accent-color);
        outline: none;
        color: white;

        &:hover {
            background-color: var(--general-accent-background-color) !important;
            color: var(--general-accent-hover-color);
        }
    }

    & .content {
        padding: 12px 6px 12px 12px;
    }
}


html.dropzone,
html.dropzone>body {
    background-color: color-mix(in srgb, var(--dropzone-background-color) 80%, #FFFF) !important;
}

div.dropMessage {
    position: absolute;
    top: 1rem;
    right: 1rem;
    box-sizing: border-box;
    width: 20em;
    white-space: wrap;
    padding: 2rem 3rem;
    text-align: left;
    font-size: 120%;
    font-weight: bold;
    border-radius: 12px;
    opacity: 1;
    z-index: 999;
    background-color: var(--dropzone-background-color);
    box-shadow: color-mix(in srgb, #003049 40%, #FFF0) 2px 4px 12px;
    color: var(--dropzone-color);
}

/* Für Ableitungen der Klasse ui-data-table */
* [slot="toolbar"] {
    button {
        background-color: lightgrey;
        color: black;
        padding: 4px 1rem;
        gap: 0.4rem;
        font-size: 1rem;
        font-weight: normal;
    }
}

p,
h1,
h2,
h3,
h4,
h5,
h6 {
    word-break: break-word;
}

/**
  Sperrung der Eingabefelder über CSS
  (siehe UIDataBinder)

*/
.is-locked {
    /* Regeln für das Zu- und Aufriegeln der Eingabefelder */
    --input-background-color: #DEDEDE !important;
    --input-background-color-on-focus: #EEEEEE !important;

    &[role=textbox],
    &[role=combobox],
    &[role=spinbox] {
        pointer-events: none;
        user-select: text;
    }
}

input[type=checkbox].is-locked,
input[type=radio].is-locked,
input[type=range].is-locked,
input[type=color].is-locked,
input[type=file].is-locked {
    pointer-events: none;
    /* Verhindert das Öffnen per Mausklick */
    touch-action: none;
    /* Verhindert das Öffnen auf Touch-Geräten */
    display: inline-block;
    /* Sicherstellen, dass inert greift falls unterstützt */
    opacity: 0.6;
    /* Visueller Hinweis für den Nutzer */
}

.is-locked:focus-visible {
    outline: none;
}

select.is-locked {
    pointer-events: none;
    /* Verhindert das Öffnen per Mausklick */
    touch-action: none;
    /* Verhindert das Öffnen auf Touch-Geräten */
}

@media print {

    @page {
        forced-color-adjust: exact;
        print-color-adjust: exact;
        size: landscape;
    }

    body>nav,
    .screen-only {
        display: none !important;
        visibility: hidden !important;
    }

    button,
    input[type=button],
    input[type=submit] {
        display: none !important;
        visibility: hidden !important;
    }
}

@media screen {

    .print-only {
        display: none;
    }
}