/* === Root variables === */
html {
    --lumo-primary-color: #1676f3;
    --lumo-primary-text-color: #1676f3;
}

:root {
    --lumo-required-field-indicator: "";
    --lumo-contrast-5pct: #edf0f3;
}

/* === Vaadin 24 input field fixes (white background, border) === */
vaadin-text-field::part(input-field),
vaadin-password-field::part(input-field),
vaadin-email-field::part(input-field),
vaadin-number-field::part(input-field),
vaadin-date-picker::part(input-field),
vaadin-date-time-picker::part(input-field),
vaadin-combo-box::part(input-field),
vaadin-select::part(input-field),
vaadin-text-area::part(input-field) {
    background-color: #fff;
    box-shadow: none;
    border: 2px solid var(--lumo-contrast-20pct);
    border-radius: var(--lumo-border-radius-m);
    margin-top: 0;
}

vaadin-text-field[disabled]::part(input-field),
vaadin-password-field[disabled]::part(input-field),
vaadin-email-field[disabled]::part(input-field),
vaadin-number-field[disabled]::part(input-field),
vaadin-date-picker[disabled]::part(input-field),
vaadin-date-time-picker[disabled]::part(input-field),
vaadin-combo-box[disabled]::part(input-field),
vaadin-select[disabled]::part(input-field),
vaadin-text-area[disabled]::part(input-field) {
    background-color: var(--lumo-contrast-5pct);
    border: 2px solid var(--lumo-contrast-20pct);
}

/* Compact labels */
vaadin-text-field::part(label),
vaadin-password-field::part(label),
vaadin-email-field::part(label),
vaadin-number-field::part(label),
vaadin-date-picker::part(label),
vaadin-date-time-picker::part(label),
vaadin-combo-box::part(label),
vaadin-select::part(label),
vaadin-text-area::part(label) {
    line-height: 1.2;
    padding-bottom: 0.2em;
    margin-bottom: 0;
}

/* Zero padding/margin on fields */
vaadin-text-field,
vaadin-password-field,
vaadin-email-field,
vaadin-number-field,
vaadin-date-picker,
vaadin-date-time-picker,
vaadin-combo-box,
vaadin-select,
vaadin-text-area {
    padding: 0;
    margin: 0;
}

vaadin-text-area.description-field::part(input-field) {
    border: 2px solid #D5DCE0;
    background-color: white;
}

vaadin-radio-button label {
    font-size: var(--lumo-font-size-xs) !important;
}

vaadin-tab[selected] {
    color: #237df2;
}

vaadin-combo-box-overlay {
    min-width: fit-content;
    font-size: small;
}

/* === App layout === */
vaadin-app-layout {
    background-color: #f9fafb;
}

vaadin-app-layout::part(navbar) {
    padding: 0;
    margin: 0;
    min-height: 0;
}

/* === Common layout classes === */
.tabs-color {
    background-color: #6d99c3;
}

.menu-background {
    background-color: #f3f3f3;
}

.menuHeader-background {
    background-color: #5b709c;
}

.logo-background {
    background-color: white;
}

.login-background {
    background-color: #eff0f1;
}

.background-content {
    background-color: #f9fafb;
}

.background-content-element {
    background-color: white;
}

.tab-font-color {
    font-size: 90px;
}

.color-button-header {
    color: #f3f3f3;
}

.box-details {
    flex-direction: column;
}

.lock {
    color: #7d99d4;
    width: 20px;
}

.check {
    color: #bebfbf;
    width: 20px;
}

.add {
    color: green;
    font-size: 20px;
}

.delete {
    color: red;
    font-size: 20px;
}

.label_username {
    display: block;
    font-weight: 600;
    line-height: var(--lumo-line-height-xs);
}

.textField_user {
    width: calc(49.95% - 0.75rem);
}

.canvas {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
}

.span {
    color: #555;
    display: block;
    line-height: 220px;
    text-align: center;
    width: 220px;
    font-family: sans-serif;
    font-size: 40px;
    font-weight: 100;
    margin-left: 5px;
}

.maintenance {
    color: red;
    font-weight: bold;
}

.showme {
    display: none;
}

.showhim:hover .showme {
    display: block;
    background-color: #c9d2e4;
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    opacity: 60%;
}

/* === Details drawer === */
.details-drawer {
    display: flex;
    background: #fff;
    flex-direction: column;
    height: 100%;
    max-height: 100%;
    max-width: 100%;
    overflow: hidden;
    z-index: 0;
    box-shadow: none;
    width: 44%;
}

.details-drawer__header {
    width: 100%;
    display: flex;
    background: #fff;
    padding-top: var(--lumo-space-m);
    padding-left: var(--lumo-space-r-l);
    align-items: center;
    padding-right: var(--lumo-space-r-l);
}

.details-drawer__header vaadin-tabs {
    box-shadow: none;
}

.details-drawer__content {
    flex: 1;
    display: table !important;
    overflow: auto;
    -webkit-overflow-scrolling: touch;
}

.details-drawer__footer {
    flex-shrink: 0;
}

/* === Batch creation query grid fields === */
.comboBox-filter::part(text-field) {
    font-size: small;
    --lumo-text-field-size: 100%;
}

.comboBox-filterQuery::part(text-field) {
    font-size: small;
    --lumo-text-field-size: 100%;
}

.textfield-grid::part(input-field) {
    font-size: small;
    --lumo-text-field-size: 100%;
    margin: 0px;
    width: -webkit-fill-available;
}

.textfield-alterationValue::part(input-field) {
    font-size: small;
    --lumo-text-field-size: 100%;
}

.comboBox-date::part(text-field) {
    font-size: small;
    padding: 0px;
    --lumo-text-field-size: 100%;
}

.textfield-areaQuery::part(input-field) {
    font-size: small;
    --lumo-text-field-size: 100%;
}

.comboBox-inputData::part(text-field) {
    font-size: small;
    --lumo-text-field-size: 100%;
}

.gridFilter vaadin-grid-cell-content {
    padding: 1px;
}

#overlay {
    min-width: 120px;
}

#table {
    overflow: visible !important;
}

/* === Module-specific view backgrounds === */
.bq-view,
.bc-view,
.bm-view,
.dm-view,
.av-view {
    background: #f9fafb;
}

.bq-view vaadin-tabs,
.bc-view vaadin-tabs {
    --lumo-primary-color: #1676f3;
    --lumo-primary-text-color: #1676f3;
}

.bq-view vaadin-tab[selected],
.bc-view vaadin-tab[selected] {
    color: #1676f3 !important;
    font-weight: bold;
}

/* === Scrollbar === */
::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-thumb {
    background: #809dbf;
}

::-webkit-scrollbar-thumb:hover {
    background: #5b709c;
}

::scrollbar {
    width: 10px;
    height: 10px;
}

::scrollbar-thumb {
    background: #809dbf;
}

::scrollbar-thumb:hover {
    background: #5b709c;
}