@import "colors.css";
@import "fonts.css";
@import "common/custom-panel.css";
@import "common/navigation-bar.css";
@import "common/breadcrumb.css";
@import "common/lumo-vars.css";
@import "custom.css";

/* common settings */
ul {
    list-style: none; /* Remove default bullets */
    margin: 8px 0px;
    padding-inline-start: 20px;
}

ul li::before {
    content: "\2022"; /* Add content: \2022 is the CSS Code/unicode for a bullet */
    color: var(--telekomColor);
    font-weight: bold;
    display: inline-block; /* Needed to add space between the bullet and the text */
    width: 1.2em; /* Also needed for space */
    margin-left: -1.2em; /* Also needed for space */
}

/* cookie banner */
.cookie-banner {
    width: 500px;
}

.cookie-banner .content {
    padding: 12px;
}

.cookie-banner .title {
    font-size: var(--lumo-font-size-xl);
    font-weight: bold;
    padding-bottom: 5px;
}

.cookie-banner .button-close {
    margin-top: 20px;
    margin-left: auto;
    height: 40px;
    width: 80px;
    background-color: var(--telekomColor);
}

/* help window */
.help-window {
    width: 640px;
    height: 480px;
}

.help-window h1 {
    margin: 0px 0px 20px 0px;
}

/* login page */
.login-view {
    --info-panel-width: 300px;
}

.login-view .info-panel {
    margin-top: 10px;
    width: var(--info-panel-width);
}

/* breadcumb panel */
.doc-download {
    width: 230px;
}

.show-shortcuts-button {
    width: var(--lumo-button-size)
}

.shortcuts-window {
    width: 640px;
    height: 480px;
}

.shortcuts-list {
    margin-bottom: 50px;
}

.shortcuts-list .category-caption {
    font-size: var(--lumo-font-size-xxl);
    font-weight: bold;
    margin: 10px 0px 10px 0px;
}

.shortcuts-list .shortcut-category {
    display: grid;
    grid-template-columns: 300px 100px
}

.doc-download-item {
    height: 18px;
    width: 18px;
    color: var(--telekomColor);
}

/* hidden info-panel with the same width on the left to keep login fields centered */
.login-view .hidden-info-panel-left {
    visibility: hidden;
    min-width: var(--info-panel-width);
}

.login-view .info-panel .panel-content {
    max-height: 500px;
    overflow-y: auto;
    padding: 12px;
}

/* dialogs */
.close-link {
    font-size: var(--lumo-font-size-xl);
    padding-right: var(--lumo-space-s);
    cursor: pointer;
}

vaadin-dialog-overlay.modal-window::part(content) {
    padding: var(--lumo-space-s) var(--lumo-space-m);
}

/* grid */
vaadin-grid vaadin-text-field {
    padding: 0px;
    width: 100%;
}

vaadin-grid vaadin-text-field::part(input-field) {
    border-radius: unset;
}

vaadin-grid vaadin-text-field::part(error-message) {
    display: none;
}

.custom-header-bar {
    background: none repeat scroll 0% 0% var(--headerBarBackgroundColor);
    padding: 5px;
    border-bottom: 1px solid var(--widgetBorderColor);
    vertical-align: center;
}

.view-content {
    color: var(--mainColor);
    background-color: var(--mainBackgroundColor);
    border-left: 1px solid var(--lightBorderColor);
}

/* TabSheet */
vaadin-tabs {
    min-height: 36px;
}

vaadin-tab {
    padding: 4px 16px;
}

vaadin-tab[selected] {
    color: var(--telekomColor);
}

vaadin-tab[selected]::before, vaadin-tab[selected]::after {
    background-color: var(--telekomColor);
}

.custom-tabsheet .tab-content {
    overflow: auto;
}

.custom-tabsheet .tab-close-link {
    font-size: 18px;
    padding-left: 5px;
}

/* Text fields */
vaadin-text-field[focused]::part(input-field), vaadin-password-field[focused]::part(input-field) {
    border-radius: 0.25rem;
    box-shadow: 0px 0px 0px 2px var(--focusColor);
}

vaadin-password-field, vaadin-text-field, vaadin-combo-box, vaadin-text-area,
vaadin-date-time-picker {
    padding: 0px;
}

vaadin-password-field::part(label), vaadin-text-field::part(label), vaadin-combo-box::part(label), vaadin-text-area::part(label),
vaadin-date-time-picker::part(label) {
    padding: 7px 0px 4px 0px;
}

vaadin-date-time-picker-date-picker, vaadin-date-time-picker-time-picker {
    padding: 0px;
}

vaadin-password-field::part(input-field), vaadin-text-field::part(input-field), vaadin-text-area::part(input-field),
vaadin-date-time-picker-date-picker::part(input-field), vaadin-date-time-picker-time-picker::part(input-field) {
    border: 1px solid var(--widgetBorderColor);
    background: var(--mainBackgroundColor);
    background-color: var(--mainBackgroundColor);
    color: var(--textfieldColor);
    font-size: 15px;
}

vaadin-text-field::part(label) {
    overflow: visible;
}

vaadin-text-field[invalid]::part(input-field) {
    color: red;
}

/* vertical-layout-with-label */
.vertical-layout-with-label .body-border {
    padding: 10px;
    border: 1px solid var(--widgetBorderColor);
}

/* grid layout */
.v-gridlayout.v-spacing {
    column-gap: var(--lumo-space-m);
    row-gap: 0px;
}

/* dialog */
vaadin-dialog-overlay::part(header) {
    background-color: var(--telekomColor);
    padding: 0px 8px;
}

vaadin-dialog-overlay > [slot="title"] {
    color: var(--inverseColor);
}

vaadin-dialog-overlay::part(title) {
    font-size: var(--lumo-font-size-l);
}

vaadin-dialog-overlay::part(footer) {
    background-color: var(--mainBackgroundColor);
    padding-top: 0px;
    padding-bottom: 8px;
}

/* custom notifications */
vaadin-dialog-overlay.notification-window::part(content) {
    padding: 0px;
}

.notification-window .notification-body {
    padding: 8px 24px 8px 24px;
}

.notification-window .notification-icon {
    width: 32px;
    height: 32px;
}

.notification-window .notification-message {
    font-size: var(--lumo-font-size-l);
    padding-bottom: 8px;
}

/* charts */
.chart-button {
    width: 100px;
    height: 32px;
}

/* system error panel */
.v-system-error {
    background-color: var(--yellow-200);
}

.v-system-error .caption {
    font-size: var(--lumo-font-size-xl);
    font-weight: bold;
}

.v-system-error .message {
    font-size: var(--lumo-font-size-l);
    font-weight: bold;
}