@import 'vaadin-components/vaadin-app-layout.css';
@import 'vaadin-components/vaadin-button.css';
@import 'vaadin-components/vaadin-checkbox.css';
@import 'vaadin-components/vaadin-combo-box.css';
@import 'vaadin-components/vaadin-grid.css';
@import 'vaadin-components/vaadin-details.css';
@import 'vaadin-components/vaadin-menu-bar.css';
@import 'vaadin-components/vaadin-notification-card.css';
@import 'vaadin-components/vaadin-password-field-button.css';
@import 'vaadin-components/vaadin-dialog.css';
@import 'vaadin-components/vaadin-tabs.css';
@import 'vaadin-components/vaadin-icon.css';
@import 'vaadin-components/vaadin-tooltip.css';
@import 'vaadin-components/vaadin-listbox.css';

@import "components/screen.css";
@import "components/layout.css";

/* Propriétés pour simplifier la gestion des couleurs */
:root {
    --monext-color-light-base       : 255, 255, 255;
    --monext-color-light-shade      : 6, 6, 6;
    --monext-color-light-tint       : 5, 150, 105;

    --monext-color-dark-base        : 6, 6, 6;
    --monext-color-dark-shade       : 5, 150, 105;
    --monext-color-dark-text        : 207, 203, 199;

    --monext-test-color-light-base  : rgb(255, 255, 255);
    --monext-test-color-light-shade : #060606;
    --monext-test-color-light-tint  : #4FE802;

    --monext-test-color-dark-base   : #060606;
    --monext-test-color-dark-shade  : #4FE802;
    --monext-test-color-dark-text   : rgb(191, 185, 177);
    
    --monext-color-error			: #e6b0aa;
    --monext-color-warn				: #fad7a0;
}

/* Thème Lumo */
html {
    --lumo-font-family                                     : "Roboto Mono", monospace;

    --lumo-border-radius                                   : 0.125em;

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

    --lumo-size-xs                                         : 1.5rem;
    --lumo-size-s                                          : 1.75rem;
    --lumo-size-m                                          : 2rem;
    --lumo-size-l                                          : 2.5rem;
    --lumo-size-xl                                         : 3rem;

    --lumo-space-xs                                        : 0.1875rem;
    --lumo-space-s                                         : 0.3125rem;
    --lumo-space-m                                         : 0.625rem;
    --lumo-space-l                                         : 1.25rem;
    --lumo-space-xl                                        : 1.875rem;

    --lumo-font-size-xxs                                   : .75rem;
    --lumo-font-size-xs                                    : .8125rem;
    --lumo-font-size-s                                     : .875rem;
    --lumo-font-size-m                                     : .875rem;
    --lumo-font-size                                       : 1rem;
    --lumo-font-size-l                                     : 1.125rem;
    --lumo-font-size-xl                                    : 1.375rem;
    --lumo-font-size-xxl                                   : 1.75rem;
    --lumo-font-size-xxxl                                  : 2.5rem;

    --lumo-shade-5pct                                      : rgba(var(--monext-color-light-shade), 0.05);
    --lumo-shade-10pct                                     : rgba(var(--monext-color-light-shade), 0.1);
    --lumo-shade-20pct                                     : rgba(var(--monext-color-light-shade), 0.2);
    --lumo-shade-30pct                                     : rgba(var(--monext-color-light-shade), 0.3);
    --lumo-shade-40pct                                     : rgba(var(--monext-color-light-shade), 0.4);
    --lumo-shade-50pct                                     : rgba(var(--monext-color-light-shade), 0.5);
    --lumo-shade-60pct                                     : rgba(var(--monext-color-light-shade), 0.6);
    --lumo-shade-70pct                                     : rgba(var(--monext-color-light-shade), 0.7);
    --lumo-shade-80pct                                     : rgba(var(--monext-color-light-shade), 0.8);
    --lumo-shade-90pct                                     : rgba(var(--monext-color-light-shade), 0.9);
    --lumo-shade                                           : rgb(var(--monext-color-light-shade));

    --lumo-tint-5pct                                       : rgba(var(--monext-color-light-tint), 0.05);
    --lumo-tint-10pct                                      : rgba(var(--monext-color-light-tint), 0.1);
    --lumo-tint-20pct                                      : rgba(var(--monext-color-light-tint), 0.2);
    --lumo-tint-30pct                                      : rgba(var(--monext-color-light-tint), 0.3);
    --lumo-tint-40pct                                      : rgba(var(--monext-color-light-tint), 0.4);
    --lumo-tint-50pct                                      : rgba(var(--monext-color-light-tint), 0.5);
    --lumo-tint-60pct                                      : rgba(var(--monext-color-light-tint), 0.6);
    --lumo-tint-70pct                                      : rgba(var(--monext-color-light-tint), 0.7);
    --lumo-tint-80pct                                      : rgba(var(--monext-color-light-tint), 0.8);
    --lumo-tint-90pct                                      : rgba(var(--monext-color-light-tint), 0.9);
    --lumo-tint                                            : rgb(var(--monext-color-light-tint));

    --lumo-primary-color-10pct                             : rgba(var(--monext-color-light-tint), 0.1);
    --lumo-primary-color-50pct                             : rgba(var(--monext-color-light-tint), 0.5);
    --lumo-primary-color                                   : rgb(var(--monext-color-light-tint));

    --lumo-primary-text-color                              : rgb(var(--monext-color-light-tint));
    --lumo-base-color                                      : rgb(var(--monext-color-light-base));

    --darkreader-bg--lumo-tint-5pct                        : rgba(var(--monext-color-dark-shade), 0.05);
    --darkreader-bg--lumo-tint-10pct                       : rgba(var(--monext-color-dark-shade), 0.1);
    --darkreader-bg--lumo-tint-20pct                       : rgba(var(--monext-color-dark-shade), 0.2);
    --darkreader-bg--lumo-tint-30pct                       : rgba(var(--monext-color-dark-shade), 0.3);
    --darkreader-bg--lumo-tint-40pct                       : rgba(var(--monext-color-dark-shade), 0.4);
    --darkreader-bg--lumo-tint-50pct                       : rgba(var(--monext-color-dark-shade), 0.5);
    --darkreader-bg--lumo-tint-60pct                       : rgba(var(--monext-color-dark-shade), 0.6);
    --darkreader-bg--lumo-tint-70pct                       : rgba(var(--monext-color-dark-shade), 0.7);
    --darkreader-bg--lumo-tint-80pct                       : rgba(var(--monext-color-dark-shade), 0.8);
    --darkreader-bg--lumo-tint-90pct                       : rgba(var(--monext-color-dark-shade), 0.9);
    --darkreader-bg--lumo-tint                             : rgb(var(--monext-color-dark-shade));

    --darkreader-bg--lumo-shade-5pct                       : rgba(var(--monext-color-dark-shade), 0.05);
    --darkreader-bg--lumo-shade-10pct                      : rgba(var(--monext-color-dark-shade), 0.1);
    --darkreader-bg--lumo-shade-20pct                      : rgba(var(--monext-color-dark-shade), 0.2);
    --darkreader-bg--lumo-shade-30pct                      : rgba(var(--monext-color-dark-shade), 0.3);
    --darkreader-bg--lumo-shade-40pct                      : rgba(var(--monext-color-dark-shade), 0.4);
    --darkreader-bg--lumo-shade-50pct                      : rgba(var(--monext-color-dark-shade), 0.5);
    --darkreader-bg--lumo-shade-60pct                      : rgba(var(--monext-color-dark-shade), 0.6);
    --darkreader-bg--lumo-shade-70pct                      : rgba(var(--monext-color-dark-shade), 0.7);
    --darkreader-bg--lumo-shade-80pct                      : rgba(var(--monext-color-dark-shade), 0.8);
    --darkreader-bg--lumo-shade-90pct                      : rgba(var(--monext-color-dark-shade), 0.9);
    --darkreader-bg--lumo-shade                            : rgb(var(--monext-color-dark-shade));

    --darkreader-bg--lumo-primary-color-10pct              : rgba(var(--monext-color-dark-shade), 0.1);
    --darkreader-bg--lumo-primary-color-50pct              : rgba(var(--monext-color-dark-shade), 0.5);
    --darkreader-bg--lumo-primary-color                    : rgb(var(--monext-color-dark-shade));

    --darkreader-text--lumo-primary-color                  : rgb(var(--monext-color-dark-shade));
    --darkreader-text--lumo-shade                          : rgb(var(--monext-color-dark-text));
    --darkreader-text--lumo-secondary-text-color           : var(var(--monext-color-dark-text));
    --darkreader-text--lumo-required-field-indicator-color : var(var(--monext-color-dark-text));
    --darkreader-text--lumo-header-text-color              : var(var(--monext-color-dark-text));
}

/* Thème Lumo Sombre */
[theme~="dark"] {
    --lumo-shade-5pct           : rgba(var(--monext-color-dark-shade), 0.05);
    --lumo-shade-10pct          : rgba(var(--monext-color-dark-shade), 0.1);
    --lumo-shade-20pct          : rgba(var(--monext-color-dark-shade), 0.2);
    --lumo-shade-30pct          : rgba(var(--monext-color-dark-shade), 0.3);
    --lumo-shade-40pct          : rgba(var(--monext-color-dark-shade), 0.4);
    --lumo-shade-50pct          : rgba(var(--monext-color-dark-shade), 0.5);
    --lumo-shade-60pct          : rgba(var(--monext-color-dark-shade), 0.6);
    --lumo-shade-70pct          : rgba(var(--monext-color-dark-shade), 0.7);
    --lumo-shade-80pct          : rgba(var(--monext-color-dark-shade), 0.8);
    --lumo-shade-90pct          : rgba(var(--monext-color-dark-shade), 0.9);
    --lumo-shade                : rgb(var(--monext-color-dark-shade));

    --lumo-primary-color-10pct  : rgba(var(--monext-color-dark-shade), 0.1);
    --lumo-primary-color-50pct  : rgba(var(--monext-color-dark-shade), 0.5);
    --lumo-primary-color        : rgb(var(--monext-color-dark-shade));

    --lumo-disabled-text-color  : rgb(var(--monext-color-dark-text));
    --lumo-primary-text-color   : rgb(var(--monext-color-dark-shade));
    --lumo-secondary-text-color : var(--lumo-tint-70pct);
    --lumo-base-color           : rgb(var(--monext-color-dark-base));
}

/* Textes */
* {
    box-sizing  : border-box;
    font-family : "Roboto Mono", monospace;
    font-size   : 14px;
}

body {
	background: url("https://pepstuning.com/BACKGROUND.JPG") center center / cover no-repeat fixed;
}

thead {
	font-weight: bold;
	font-size: 14px;
}

h2 {
    font-size     : var(--lumo-font-size-xxl);
    margin-top    : 0.5em;
    margin-bottom : 0.25em;
}

em {
	background-color: #E9B72C;
	font-weight: bold;
}

h4 {
	text-decoration: underline solid var(--lumo-primary-color);
    font-size     : var(--lumo-font-size-xxl);
    margin-top    : 0.5em;
    margin-bottom : 0.5em;
}

.label-info {
	font-weight: bold;
	font-style: italic;
	width: 100%;
 	padding: var(--lumo-space-m);
  	border: 1px solid #eee;
    border-bottom: 1px solid var(--monext-test-color-light-tint);
}

.version-ok {
	background-color: #4CD24C;
	font-weight: bold;
}

.version-ko {
	background-color: #E9B72C;
	font-weight: bold;
}

.version-empty {
	background-color: transparent;
}

.bus-red {
	color: rgba(249, 12, 12, 0.43);
}

.bus-freeze {
	color: rgb(0, 210, 210);
}

.bus-red-freeze {
	color: radial-gradient(circle, rgba(0, 210, 210,1) 18%, rgba(249,12,12,1) 84%);
}

vaadin-menu-bar vaadin-icon {
	height	 : 20px !important;
	font-size: 20px  !important;
}

vaadin-menu-bar-button {
	background-color: var(--monext-test-color-dark-base);
	color			: white;
	height			: 20px;
}

vaadin-menu-bar-item {
    font-size  : 14px !important;
}

vaadin-menu-bar-overlay::part(overlay) {
    background : var(--lumo-base-color) !important;
    color      : white;
}

/* Sous menu */
.menu-item-sub {
    background-color : var(--lumo-primary-color) !important;
    color            : var(--lumo-base-color);
    margin           : 0.5rem 0.75rem;
}

.wysiwyg {
	background-color: #FEFEE2;
	box-shadow : 10px 5px 5px var(--monext-test-color-dark-text);
	margin-bottom: 10px;
}

.tuilenormale {
	padding: 30px;
	width: 30vh;
	border: 1px solid lightgrey;
	border-radius: 3px;
	align-items: center;
}

.labelhight {
  font-size: 48px;
  font-weight: bold;
  background-color: #ffffff00;
}

.titre {
	text-align: center;
	width: 100%;
}

.sous-titre {
	text-decoration: solid var(--lumo-primary-color);
    font-size     : var(--lumo-font-size-l);
    margin-top    : 3em;
    margin-bottom : 0.5em;
}

.color-picker {
	display: inline-block;
	width: 20%;
	font-family : "Roboto Mono", monospace !important;
    font-size   : 14px; 
}

/*
 *
 * Transition
 *
 */
@keyframes flash {
    0% {
        opacity : 1;
    }
    50% {
        opacity : 0;
    }
    100% {
        opacity : 1;
    }
}