/*
 * Copyright Merkato Group B.V. The Netherlands (c) 2025.
 * @author Christiaan ten Klooster
 * All rights reserved.
 */

@import 'component-styles/animations.css';
@import 'component-styles/app-bar.css';
@import 'component-styles/box-shadow-borders.css';
@import 'component-styles/brand-expression.css';
@import 'component-styles/details-drawer.css';
@import 'component-styles/dialog.css';
@import 'component-styles/grid-tree-toggle-adjust.css';
@import 'component-styles/jodit.css';
@import 'component-styles/list-item.css';
@import 'component-styles/overlay-theme.css';
@import 'component-styles/overlay-wrapper.css';
@import 'component-styles/tab-bar.css';
@import 'component-styles/toggle-button-group.css';
@import 'component-styles/toggle-button-card.css';
@import 'component-styles/vaadin-button.css';
@import 'component-styles/vaadin-big-decimal-field.css';
@import 'component-styles/vaadin-checkbox.css';
@import 'component-styles/vaadin-card.css';
@import 'component-styles/vaadin-combo-box.css';
@import 'component-styles/vaadin-custom-field.css';
@import 'component-styles/vaadin-date-picker.css';
@import 'component-styles/vaadin-datetime-picker.css';
@import 'component-styles/vaadin-details.css';
@import 'component-styles/vaadin-form-item.css';
@import 'component-styles/vaadin-grid.css';
@import 'component-styles/vaadin-integer-field.css';
@import 'component-styles/vaadin-list-box.css';
@import 'component-styles/vaadin-number-field.css';
@import 'component-styles/vaadin-password-field.css';
@import 'component-styles/vaadin-radio-button.css';
@import 'component-styles/vaadin-radio-group.css';
@import 'component-styles/vaadin-select.css';
@import 'component-styles/vaadin-side-nav.css';
@import 'component-styles/vaadin-tab.css';
@import 'component-styles/vaadin-text-area.css';
@import 'component-styles/vaadin-text-field.css';
@import 'component-styles/vaadin-toggle.css';
@import 'component-styles/vaadin-time-picker.css';
@import 'component-styles/view-frame.css';
@import 'component-styles/vcf-slider.css';

html, :host {
    --lumo-font-family: Montserrat, Helvetica, sans-serif;

    /* Responsive sizing and spacing */
    --lumo-space-r-m: var(--lumo-space-m);
    --lumo-space-r-l: var(--lumo-space-l);
    --lumo-space-r-x: var(--lumo-space-l);
    --lumo-space-wide-r-m: var(--lumo-space-wide-m);
    --lumo-space-wide-r-l: var(--lumo-space-wide-l);

    /* https://vaadin.com/docs/v14/themes/lumo/color.html */
    --lumo-size-xl: 2.5rem;
    --lumo-size-l: 2rem;
    --lumo-size-m: 1.75rem;
    --lumo-size-s: 1.5rem;
    --lumo-size-xs: 1.25rem;

    --lumo-space-xl: 1.75rem;
    --lumo-space-l: 1.125rem;
    --lumo-space-m: 0.5rem;
    --lumo-space-s: 0.25rem;
    --lumo-space-xs: 0.125rem;

    --lumo-font-size: 1rem;
    --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;

    --lumo-line-height-m: 1.4;
    --lumo-line-height-s: 1.2;
    --lumo-line-height-xs: 1.1;

    --lumo-base-color: white;

    --lumo-primary-text-color: rgb(21, 98, 198);

    --lumo-error-text-color: rgb(219, 105, 6);
    --lumo-error-color-50pct: rgba(219, 105, 6, 0.5);
    --lumo-error-color-10pct: rgba(219, 105, 6, 0.1);
    --lumo-error-color: #db6906;

    --paper-progress-active-color: var(--lumo-primary-color);
    --paper-progress-secondary-color: var(--lumo-primary-color);

    --field-input-label-size: var(--lumo-font-size-s);
    --field-input-label-color: var(--lumo-secondary-text-color);

    --app-bar-height: var(--lumo-size-xl);

    --vaadin-app-layout-drawer-width: 197px;

    --navi-drawer-width: calc(var(--lumo-size-m) * 7);
    --navi-drawer-rail-width: calc(var(--lumo-size-m) * 1.75);
    --navi-item-indentation: calc(var(--lumo-icon-size-s) + var(--lumo-space-l));

    --details-drawer-width: calc(var(--lumo-size-m) * 30);

    --dialog-resp-width: calc(var(--lumo-size-m) * 11);

    --transition-duration-s: 160ms;
    --transition-duration-m: 240ms;
    --transition-duration-l: 320ms;

    --tabbar-background-color: rgb(35, 51, 72);
    --tabbar-text-color: rgb(126, 173, 247);

    --appbar-background-color: var(--lumo-primary-color-10pct);
    --appbar-text-color: rgb(36, 50, 67);

    --navibar-background-color: rgb(220, 226, 232);
    --navibar-background-color-highlight: rgb(200, 209, 218);
    --navibar-text-color: rgb(36, 50, 67);
    --navibar-text-color-highlight: rgb(36, 50, 67);

    --wysiwyg-toolbar-background: var(--lumo-primary-color);

    --section-header-background: var(--lumo-primary-color);
    --section-header-color: #ffffff;
    --section-header-font-size: var(--lumo-font-size-m);
    --section-header-font-weight: 500;
    --section-header-line-height: var(--lumo-line-height-xs);
    --section-header-padding: 3px;

    --grid-row-highlight: var(--lumo-primary-color-5pct);

    --timeu-wizard-line-color: var(--lumo-primary-color);
    --apex-charts-primary-color: var(--lumo-primary-color);
    --apex-charts-background-color: white;

    --vcf-slider-knob-alt-color: var(--lumo-error-color);
    --vcf-slider-knob-color: var(--lumo-primary-color);
    --vcf-slider-knob-size: 24px;
    --vcf-slider-line-alt-color: var(--lumo-contrast-30pct);
    --vcf-slider-line-color: var(--lumo-contrast-50pct);
    --vcf-slider-line-height: var(--lumo-space-m);
    --vcf-slider-padding: var(--lumo-space-xs);
    --vcf-slider-ticks-padding: 10px;
    --vcf-slider-tooltip-font-size: var(--lumo-font-size-s);
    --vcf-slider-width: 100%;
}

* {
    --apex-charts-primary-color: var(--lumo-primary-color);
    --apex-charts-background-color: white;
}

@media (max-width: 479px) {
    .merkato-configurator {
        --lumo-space-r-x: 0;
    }
}

@media (min-width: 480px) and (max-width: 1023px) {
    .merkato-configurator {
        --lumo-space-r-x: var(--lumo-space-m);
    }
}

@media (max-width: 1023px) {
    .merkato-configurator {
        --lumo-space-r-m: var(--lumo-space-s);
        --lumo-space-r-l: var(--lumo-space-m);
        --lumo-space-wide-r-m: var(--lumo-space-wide-s);
        --lumo-space-wide-r-l: var(--lumo-space-wide-m);
    }
}

h1, h2, h3, h4, h5, h6 {
    margin-top: 1.25em;
}

h1 {
    margin-bottom: 0.75em;
}

h2, h3, h4 {
    margin-bottom: 0.5em;
}

h5 {
    margin-bottom: 0.25em;
}

.app-header-outer,
.app-footer-outer {
    z-index: 3;
}

.greyscale {
    -webkit-filter: grayscale(100%);
    filter: grayscale(100%);
}

.opacity90 {
    opacity: 0.9;
}

.opacity80 {
    opacity: 0.8;
}

.opacity70 {
    opacity: 0.7;
}

.opacity60 {
    opacity: 0.6;
}

.opacity50 {
    opacity: 0.5;
}

.opacity40 {
    opacity: 0.4;
}

.opacity30 {
    opacity: 0.3;
}

.opacity20 {
    opacity: 0.2;
}

.opacity10 {
    opacity: 0.1;
}

.border-1px {
    border: 1px solid var(--lumo-primary-color);
}

.border-2px {
    border: 2px solid var(--lumo-primary-color);
}

.border-3px {
    border: 3px solid var(--lumo-primary-color);
}

.padding-1px {
    padding: 1px;
}

.padding-2px {
    padding: 2px;
}

.padding-3px {
    padding: 3px;
}

.margin-1px {
    margin: 1px;
}

.margin-2px {
    margin: 2px;
}

.margin-3px {
    margin: 3px;
}

.border-radius-5px {
    border-radius: 5px;
}

.section-sticky {
    position: sticky;
    top: 0;
    height: fit-content;
    z-index: 1;
}

.v-loading-indicator {
    position: fixed; /* Occupy whole screen even if scrolled */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    /* Eat mouse events when visible, doesn't prevent scrolling */
    pointer-events: auto;
    /* Animated with delay to prevent flashing */
    animation: fadein 0.3s ease-out 0.2s normal 1 both;
    z-index: 2147483647;
}

@keyframes fadein {
    0% {
        background: rgba(0, 0, 0, 0);
    }
    100% {
        background: rgba(0, 0, 0, .2); /* Darkens the UI */
    }
}