@import url('./main-layout.css');
@import url('./components/vaadin-button.css');

html {
	--lumo-border-radius: 8px;
	--lumo-space-xl: 1.875rem;
	--lumo-space-l: 1.25rem;
	--lumo-space-m: 0.625rem;
	--lumo-space-s: 0.3125rem;
	--lumo-space-xs: 0.1875rem;
	/*--lumo-primary-text-color: rgb(255, 153, 0);*/
	--lumo-primary-text-color: var(--lucca-magenta-origin);
	--lumo-secondary-text-color: var(--medium-gray);
	--lumo-primary-color-50pct: rgba(91, 26, 54, 0.5);
	--lumo-primary-color-10pct: rgba(91, 26, 54, 0.4);
	--lumo-primary-color-30pct: rgba(91, 26, 54, 0.3);  /* background-color per tabs */
	--lumo-primary-color-90pct:rgba(91, 26, 54, 0.9);
	--lumo-error-text-color: rgb(237, 127, 151);
	--lumo-error-color-50pct: rgba(237, 127, 151, 0.5);
	--lumo-error-color-10pct: rgba(237, 127, 151, 0.1);

	--lumo-text-color: var(--lumo-primary-color);

	--lumo-success-text-color: rgb(84, 222, 110);
	--lumo-success-color-50pct: rgba(84, 222, 110, 0.5);
	--lumo-success-color-10pct: rgba(84, 222, 110, 0.1);

	--lumo-base-color: var(--dama-mainlayout-menubar-color_l8);
	--lumo-tint: #f4eee1;
	--lumo-shade: hsl(42, 33%, 13%);
	--lumo-primary-color: var(--lucca-dark-gray-font-color);
	--lumo-error-color: rgb(224, 2, 18);
	/* originale: 192, 28, 40 */
	--lumo-success-color: rgb(46, 194, 126);
	--lumo-success-contrast-color: #2D2C29;
	--lumo-header-text-color: var(--red); /* var(--lucca-magenta-2) */
	--lumo-primary-contrast-color: rgb(26, 95, 180);
	--lumo-error-contrast-color: #2D2C29;
	--lumo-font-weight-regular: 400;

	--lucca-gray-origin: #424243;
	--lucca-gray-1: #656567;
	--lucca-gray-2: #7e7e81;
	--lucca-gray-3: #98989a;
	--lucca-gray-4: #b2b2b3;
	--lucca-gray-5: #cbcbcd;
	--lucca-gray-6: #e5e5e6;

	--lucca-magenta-origin: var(--red);
	--lucca-magenta-1: #752C4D;
	--lucca-magenta-2: #8F3E64;
	--lucca-magenta-3: #A9517A;

	--dama-mainlayout-menubar-color: #233448;

	--dama-mainlayout-menubar-color-trasparent: #233448;
	--dama-mainlayout-menubar-color-trasparent: rgba(35, 52, 72, 0.7);

	--dama-mainlayout-menubar-color_l1: #324b67;
	--dama-mainlayout-menubar-color_l2: #42648a;
	--dama-mainlayout-menubar-color_l3: #537dac;
	--dama-mainlayout-menubar-color_l4: #7597bd;
	--dama-mainlayout-menubar-color_l5: #98b1cd;
	--dama-mainlayout-menubar-color_l6: #bacbde;
	/* originale: #bacbde, #692624, #a6120d */
	--dama-mainlayout-menubar-color_l7: #dde5ee;
	--dama-mainlayout-menubar-color_l8: #eef2f7;

	--pie-serie-color-1: var(--dama-mainlayout-menubar-color_l2);
	--pie-serie-color-2: var(--dama-mainlayout-menubar-color_l4);

	--jmale-poi-in-progress-color: #FFA500;
	--jmale-poi-completed-color: var(--lumo-success-color);
	--lumo-body-text-color: var(--dark-gray);

	--dama-mainlayout-topbar-color: #4C596A;
	--dama-mainlayout-body-color: rgba(255, 255, 255, 0.7);
	--dama-mainlayout-font-color: #B6B8BF;

	--vaadin-button-font-weight: 420;
	--vaadin-button-primary-text-color: var(--lucca-dark-gray-font-color);
	--vaadin-button-primary-font-weight: 420;

	--vaadin-input-field-border-width: 1px;
	--vaadin-input-field-value-color: var(--dama-mainlayout-menubar-color) !important;

	--vaadin-input-field-border-color: var(--lucca-light-gray-border-color);
	--vaadin-input-field-value-color: var(--lucca-dark-gray-font-color) !important;
	--vaadin-input-field-background: var(--lucca-input-field-background-color);

	/*i quattro colori di lucca*/
	--red: #5B1A36;
	--dark-gray: #373838;
	--medium-gray: #606160;
	--light-gray: #E7E9EA;

	/*sfondi*/
	--lucca-navbar-background-color: var(--red);
	--lucca-icon-background-color: var(--dark-gray);
	--lucca-icon-red-background-color: var(--red);
	--lucca-background-color: white;
	--lucca-input-field-background-color: var(--light-gray);
	--lucca-button-background-color: var(--light-gray);
	--lucca-checkbox-background-color: var(--light-gray);

	/*testi*/
	--lucca-dark-gray-font-color: var(--dark-gray);
	--lucca-gray-font-color: #6A6B6A;
	--lucca-white-font: white;
	--lucca-magenta-font: var(--red);
	--lucca-card-font: var(--dark-gray);

	/*bordi*/
	--lucca-gray-border-color: var(--dark-gray);
	--lucca-medium-gray-border-color: var(--medium-gray);
	--lucca-light-gray-border-color: #A2A4A4;
}


/* Stile base */
#media-section::-webkit-scrollbar {
  width: 5px;      /* spessore verticale */
  height: 5px;     /* spessore orizzontale */
}

/* Binario */
#media-section::-webkit-scrollbar-track {
  background: transparent;
}

/* Maniglia */
#media-section::-webkit-scrollbar-thumb {
  background-color:rgba(0,0,0,0.3);
  border-radius: 5px;
  transition: background-color 0.3s ease, height 0.3s ease;
}

/* Animazione al passaggio */
#media-section::-webkit-scrollbar-thumb:hover {
  background-color: #333;  /* grigio scuro per feedback */
  height: 8px;             /* effetto di "ingrossamento" fluido */
}

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

.my-button {
	transition: background-color 0.3s ease;
	/* Transizione per il cambio di colore */
	border-radius: 50%;
	/* Bordo arrotondato */

}

.my-button:hover {
	background-color: var(--lumo-primary-color-10pct);
	/* Cambio di colore al passaggio del mouse */
}