@import url('./components/error-div.css');
@import url('./components/info-div.css');
@import url('./components/vaadin-accordion.css');
@import url('./components/vaadin-accordion-panel.css');
@import url('./components/vaadin-button.css');
@import url('./components/vaadin-checkbox.css');
@import url('./components/vaadin-combo-box.css');
@import url('./components/vaadin-combo-box-item.css');
@import url('./components/vaadin-context-menu-item.css');
@import url('./components/vaadin-custom-field.css');
@import url('./components/vaadin-date-picker.css');
@import url('./components/vaadin-details.css');
@import url('./components/vaadin-grid.css');
@import url('./components/vaadin-horizontal-layout.css');
@import url('./components/vaadin-input-container.css');
@import url('./components/vaadin-integer-field.css');
@import url('./components/vaadin-login-form-wrapper.css');
@import url('./components/vaadin-menu-bar-button.css');
@import url('./components/vaadin-message.css');
@import url('./components/vaadin-password-field.css');
@import url('./components/vaadin-radio-button.css');
@import url('./components/vaadin-radio-group.css');
@import url('./components/vaadin-select.css');
@import url('./components/vaadin-select-text-field.css');
@import url('./components/vaadin-select-value-button.css');
@import url('./components/vaadin-text-area.css');
@import url('./components/vaadin-text-field.css');
@import url('./components/vaadin-upload.css');
@import url('./components/vaadin-vertical-layout.css');
@import url('./components/vcf-enhanced-dialog-overlay.css');
@import url('./components/vcf-lookup-field.css');

@import url('./views/login-view.css');

@import url('./variables.css');

.hrtoolbox-formgenerator p {
    line-height: var(--lumo-line-height-m);
}

html {
    --lumo-shade: rgb(48, 58, 79);
    --lumo-shade-5pct: rgba(48, 58, 79, 0.05);
    --lumo-shade-10pct: rgba(48, 58, 79, 0.1);
    --lumo-shade-20pct: rgba(48, 58, 79, 0.2);
    --lumo-shade-30pct: rgba(48, 58, 79, 0.3);
    --lumo-shade-40pct: rgba(48, 58, 79, 0.4);
    --lumo-shade-50pct: rgba(48, 58, 79, 0.5);
    --lumo-shade-60pct: rgba(48, 58, 79, 0.6);
    --lumo-shade-70pct: rgba(48, 58, 79, 0.7);
    --lumo-shade-80pct: rgba(48, 58, 79, 0.8);
    --lumo-shade-90pct: rgba(48, 58, 79, 0.9);

    /*--lumo-base-color: rgb(247, 247, 247);*/
    --lumo-base-color: rgb(255, 255, 255);

    --lumo-primary-color: rgb(42, 127, 239);
    --lumo-primary-color-50pct: rgba(42, 127, 239, 0.5);
    --lumo-primary-color-10pct: rgba(42, 127, 239, 0.1);

    --lumo-font-family: 'Inter', sans-serif;

    --lumo-font-size: 0.875rem;
    --lumo-font-size-xxxl: 1.75rem;
    --lumo-font-size-xxl: 1.375rem;
    --lumo-font-size-xl: 1.125rem;
    --lumo-font-size-l: 1rem;
    --lumo-font-size-m: 0.875rem;
    --lumo-font-size-s: 0.8125rem;
    --lumo-font-size-xs: 0.75rem;
    --lumo-font-size-xxs: 0.6875rem;
}

html {
    --hrstart-abschnitt-background: #f6fbff;
    --hrstart-login-titel-background: var(--lumo-contrast-80pct);
    --hrstart-app-color: #ff9900;
}

html body[theme~="dark"] {
    --hrstart-abschnitt-background: var(--lumo-contrast-5pct);
    --hrstart-login-titel-background: var(--lumo-tint-5pct);
}

.font-italic {
    font-style: italic;
}

.text-underline {
    text-decoration: underline;
}

.hrstart-zuweisen-container {
    cursor: pointer;
    user-select: none;
}

.hrstart-zuweisen-container:hover {
    /*background-color: var(--lumo-primary-color-10pct);*/
    outline: 1px solid var(--lumo-contrast);
    transition: background-color 0.2s, outline 0.2s;
}

.hra-value-field {
    align-self: auto;
    display: flex;
    flex-direction: column;
}

.hra-value-field[has-label] {
    padding-top: var(--lumo-space-m);
}

.hra-value-field > label {
    font-weight: var(--hrstart-text-semibold);
    font-size: var(--lumo-font-size-m);
    color: var(--lumo-secondary-text-color);
    align-self: flex-start;
    line-height: 1;
    padding-inline-start: calc(var(--lumo-border-radius-m) / 4);
    padding-inline-end: 1em;
    padding-bottom: 0.5em;
    padding-top: 0.25em;
    margin-top: -0.25em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    position: relative;
    max-width: 100%;
    box-sizing: border-box;
}

.hra-value-field [part~='value'] {
    display: flex;
    align-items: center;
    text-overflow: ellipsis;
    background-color: var(--lumo-contrast-5pct);
    min-height: var(--lumo-size-m);
    padding: 0 var(--lumo-space-s);
    user-select: none;
    border-radius: var(--lumo-border-radius-m);
    /*white-space: nowrap;*/

}

vaadin-side-nav-item.nav-hr::part(content) {
}

vaadin-side-nav-item.nav-hr::part(link) {
    padding: 0;
    min-height: unset;
    user-select: none;
    pointer-events: none;
}

vaadin-side-nav-item::part(content) {
    background-color: var(--hrstart-nav-background);
}

vaadin-side-nav-item[path]:hover::part(content) {
    background-color: var(--hrstart-app-color);
    font-weight: bold;
    transition: background-color 0.3s, font-weight 0.3s;
}

vaadin-side-nav-item[current]::part(content) {
    font-weight: bold;
    /*color: var(--lumo-primary-contrast-color);*/
    color: var(--hrstart-app-color);;
}