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

html {
    --lumo-border-radius: 8px;
	--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-m: 1.0rem;
	--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-primary-text-color: #51ac9d;
	--lumo-primary-color-50pct: rgba(32, 196, 178, 0.5);
	--lumo-primary-color-10pct: rgba(32, 196, 178, 0.1);
	--lumo-error-text-color: rgb(255, 56, 103);
	--lumo-error-color-50pct: rgba(255, 56, 103, 0.5);
	--lumo-error-color-10pct: rgba(255, 56, 103, 0.1);
	--lumo-success-text-color: rgb(20, 184, 143);
	--lumo-success-color-50pct: rgba(20, 184, 143, 0.5);
	--lumo-success-color-10pct: rgba(20, 184, 143, 0.1);
	--lumo-primary-color: #51ac9d;
	--lumo-error-color: hsl(346, 100%, 61%);
	--lumo-success-color: hsl(165, 80%, 40%);
	/* 	--lumo-header-text-color: #e8ebef; */
	/* 	--lumo-body-text-color: #e8ebef; */
	--lumo-secondary-text-color: hsla(285, 42%, 18%, 0.72);
	--lumo-tertiary-text-color: hsla(285, 45%, 20%, 0.5);
	--lumo-disabled-text-color: hsla(285, 50%, 22%, 0.26);
	--lumo-primary-contrast-color: #e8ebef;
	
	vaadin-dialog-overlay::part(header){
		background-color: #20c4b2;
	}
	
	vaadin-dialog-overlay::part(footer){
		background-color: #e9e9e9;
	}
	
	.area-container-tile
	{
		background-color: #ffffff;
		border-radius: 15px;
		border: 1px solid lightgray;
	}
	
	.area-container
	{
		background-color: #ffffff;
		border-radius: 15px;
		border: 1px solid lightgray;
		padding: 20px;
	}
	
	.view-background
	{
		background-color: #ccdad9;
		box-sizing: border-box;
		padding-bottom: 10px;
	}
	
	.hide-file-list [part="file-list"] 
	{
    	display: none;
	}
	
	vaadin-upload [part="file-list"] 
	{
   		display: none;
	}
	
	/* Badges auf dem Bild */
	.badge {
	    padding: 5px 15px;
	    border-radius: 50px;
	    font-weight: bold;
	    font-size: 0.8rem;
	}
	
	.date-badge {
	    background-color: var(--lumo-primary-color);
	    color: white;
	}
	
	.open-badge {
	    background-color: var(--lumo-primary-color);
	    color: white;
	}
	
	/* Gemeinsamer Login-Hintergrund fuer Desktop (.run-portal-bg)
	   und Mobile-Login-Hero - identisches Bild aus einer Quelle */
	.run-portal-bg,
	.mobile-login-hero {
    background-image: url("./images/BlackBackgroundRunnerDottedDark.png");
    background-repeat: repeat;
    background-position: center;
    background-size: cover;
	}

	.run-portal-bg {
    width: 100%;
    height: 100%;
	}
	
	vaadin-grid.no-header [part~="header-row"] {
    display: none;
	}
	
	.readable-text {
    color: dark-gray;
    /* Ein weicher, dunkler Schatten um die Buchstaben herum */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1),
                 0px 0px 10px rgba(0, 0, 0, 0.5);
/*     font-weight: bold; */
	}

	/* Scrollbare Container ohne sichtbare Scrollbar (z.B. horizontale Chip-Leisten mobil) */
	.no-scrollbar {
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.no-scrollbar::-webkit-scrollbar {
		display: none;
	}

	/* Grid mit ruhigeren Zeilen: Lumo gibt den Zellen nur --lumo-space-xs nach oben und unten,
	   was zusammen mit den reduzierten --lumo-size-* dieses Themes sehr gedrängt wirkt. Sobald in
	   einer Zeile etwas anderes als reiner Text steht - ein Badge, ein Link -, klebt der Inhalt am
	   Zeilenrand. Die Zellinhalte sind Kinder des Grids im Light-DOM, deshalb greift die Regel von
	   hier aus. */
	vaadin-grid.roomy-rows > vaadin-grid-cell-content {
		padding-top: var(--lumo-space-s);
		padding-bottom: var(--lumo-space-s);
	}
}

vaadin-notification-card[theme~="contrast"] {
    --vaadin-notification-card-padding: 0;
}
/* ── Zeitmodus (Form6MeasurementSettings) ─────────────────────────── */

.tm-step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--lumo-primary-color);
    color: var(--lumo-primary-contrast-color);
    font-weight: 600;
    font-size: var(--lumo-font-size-s);
    flex-shrink: 0;
}

.tm-choice {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 14px 16px;
    border: 2px solid var(--lumo-contrast-10pct);
    border-radius: 12px;
    background: var(--lumo-base-color);
    cursor: pointer;
    transition: border-color 0.15s, background-color 0.15s, box-shadow 0.15s;
    box-sizing: border-box;
}

.tm-choice:hover:not([disabled]) {
    border-color: var(--lumo-primary-color-50pct);
}

.tm-choice:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px var(--lumo-primary-color-50pct);
}

.tm-choice.tm-choice-selected {
    border-color: var(--lumo-primary-color);
    background: var(--lumo-primary-color-10pct);
}

.tm-choice[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

.tm-choice-icon {
    color: var(--lumo-primary-color);
    width: 24px;
    height: 24px;
    flex-shrink: 0;
    margin-top: 2px;
}

.tm-choice-text {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.tm-choice-title {
    font-weight: 600;
}

.tm-choice-description {
    font-size: var(--lumo-font-size-s);
    color: var(--lumo-secondary-text-color);
    line-height: 1.4;
}

/* Strecke: senkrechte Linie mit Punkten für Start, Zwischenzeiten und Ziel */
.tm-track {
    position: relative;
    padding-left: 4px !important;
}

.tm-track::before {
    content: "";
    position: absolute;
    left: 17px;
    top: 22px;
    bottom: 22px;
    width: 2px;
    background: var(--lumo-contrast-20pct);
}

.tm-node {
    position: relative;
    padding: 6px 0;
    min-height: 44px;
}

.tm-node-dot {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    flex-shrink: 0;
    color: white;
    background: var(--lumo-contrast-50pct);
}

.tm-node-start .tm-node-dot {
    background: var(--lumo-success-color);
}

.tm-node-passive .tm-node-dot {
    background: var(--lumo-base-color);
    color: var(--lumo-success-color);
    border: 2px solid var(--lumo-success-color);
    box-sizing: border-box;
}

.tm-node-split .tm-node-dot {
    background: var(--lumo-primary-color);
}

.tm-node-finish .tm-node-dot {
    background: var(--lumo-body-text-color);
}

.tm-track-add {
    position: relative;
    z-index: 1;
    padding: 2px 0 2px 36px;
}

.tm-summary,
.tm-banner {
    padding: 12px 16px;
    border-radius: 10px;
    align-items: flex-start;
    box-sizing: border-box;
}

.tm-summary {
    margin-top: 24px;
    background: var(--lumo-primary-color-10pct);
}

.tm-banner {
    margin-top: 12px;
    font-size: var(--lumo-font-size-s);
}

.tm-banner-info {
    background: var(--lumo-contrast-5pct);
    color: var(--lumo-body-text-color);
}

.tm-banner-warning {
    background: var(--lumo-warning-color-10pct);
    color: var(--lumo-warning-text-color);
}