/* /Components/Calendar/CalendarView.razor.rz.scp.css */
/* Agendaweergave. Gebouwd op CSS-grid en absolute plaatsing binnen een dagkolom; de breedte-verdeling van
   overlappende afspraken komt uit de component (PlaceItems), niet uit CSS. */

.calendar-view[b-bva2krny7d] {
    display: flex;
    flex-direction: column;
    height: 100%;
    min-height: 0;
}

.calendar-toolbar[b-bva2krny7d] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding-bottom: 8px;
    flex-wrap: wrap;
}

/* ---------- Maand ---------- */

.calendar-month[b-bva2krny7d] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.calendar-month-head[b-bva2krny7d] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    background-color: var(--mud-palette-background-gray);
}

.calendar-month-head-cell[b-bva2krny7d] {
    padding: 6px 8px;
    font-weight: 600;
    font-size: 0.8rem;
    border-right: 1px solid var(--mud-palette-lines-default);
}

    .calendar-month-head-cell:last-child[b-bva2krny7d] {
        border-right: none;
    }

.calendar-month-body[b-bva2krny7d] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.calendar-month-row[b-bva2krny7d] {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1 1 0;
    min-height: 96px;
    border-top: 1px solid var(--mud-palette-lines-default);
}

.calendar-month-cell[b-bva2krny7d] {
    border-right: 1px solid var(--mud-palette-lines-default);
    padding: 4px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    cursor: pointer;
    overflow: hidden;
}

    .calendar-month-cell:last-child[b-bva2krny7d] {
        border-right: none;
    }

    .calendar-month-cell:hover[b-bva2krny7d] {
        background-color: var(--mud-palette-action-default-hover);
    }

.calendar-month-outside[b-bva2krny7d] {
    background-color: var(--mud-palette-background-gray);
}

    .calendar-month-outside .calendar-month-daynumber[b-bva2krny7d] {
        opacity: 0.5;
    }

.calendar-month-dayhead[b-bva2krny7d] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 4px;
    min-height: 24px;
}

.calendar-month-daynumber[b-bva2krny7d] {
    font-size: 0.8rem;
    font-weight: 600;
}

/* Het plusje pas tonen als je over de dag hangt: anders staan er 35 knopjes in beeld. Op een aanraakscherm
   is er geen hover, dus daar blijft hij gewoon staan. */
.calendar-month-add[b-bva2krny7d] {
    opacity: 0;
    transition: opacity 0.1s;
}

.calendar-month-cell:hover .calendar-month-add[b-bva2krny7d],
.calendar-month-cell:focus-within .calendar-month-add[b-bva2krny7d] {
    opacity: 1;
}

@media (hover: none) {
    .calendar-month-add[b-bva2krny7d] {
        opacity: 1;
    }
}

.calendar-month-more[b-bva2krny7d] {
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    padding-left: 2px;
}

/* ---------- Blokjes ---------- */

.calendar-chip[b-bva2krny7d] {
    display: flex;
    gap: 4px;
    align-items: baseline;
    font-size: 0.75rem;
    padding: 1px 4px;
    border-radius: 3px;
    border-left: 3px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-background-gray);
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
}

.calendar-chip-time[b-bva2krny7d] {
    font-variant-numeric: tabular-nums;
    opacity: 0.8;
}

.calendar-chip-title[b-bva2krny7d] {
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Gearceerd = voorlopig; dezelfde taal als het planbord gebruikt voor concepten. */
.calendar-chip-hatched[b-bva2krny7d] {
    background-image: repeating-linear-gradient( 45deg, rgba(255,255,255,0.35) 0 6px, transparent 6px 12px );
}

/* ---------- Dag / week ---------- */

.calendar-time[b-bva2krny7d] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: var(--mud-default-borderradius);
    overflow: hidden;
}

.calendar-time-head[b-bva2krny7d],
.calendar-time-allday[b-bva2krny7d] {
    display: flex;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* ---------- Meerdere agenda's ---------- */

/* Eén groep kolommen per agenda (naast elkaar), of één groep met alles (over elkaar). */
.calendar-lane-group[b-bva2krny7d] {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.calendar-lane-days[b-bva2krny7d] {
    display: flex;
    flex-direction: row;
    min-width: 0;
}

    /* Een duidelijke scheiding tussen de agenda's; tussen de dagen blijft het een dunne lijn. */
    .calendar-lane-group + .calendar-lane-group[b-bva2krny7d] {
        border-left: 3px solid var(--mud-palette-lines-default);
    }

.calendar-lane-head[b-bva2krny7d] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 28px;
    padding: 0 2px 0 8px;
    background-color: var(--lane-color);
    color: var(--lane-text);
    font-size: 0.8rem;
    cursor: pointer;
}

/* De actieve agenda: daar komt een nieuwe vrije dag uit de balk terecht. */
.calendar-lane-head-active[b-bva2krny7d] {
    font-weight: 700;
    box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35);
}

.calendar-lane-name[b-bva2krny7d] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-lane-tabs[b-bva2krny7d] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding-bottom: 6px;
}

.calendar-lane-tab[b-bva2krny7d] {
    display: flex;
    align-items: center;
    gap: 2px;
    max-width: 240px;
    min-height: 28px;
    padding: 0 2px 0 10px;
    border-radius: 4px 4px 0 0;
    border-bottom: 3px solid var(--lane-color);
    background-color: color-mix(in srgb, var(--lane-color) 15%, transparent);
    font-size: 0.8rem;
    cursor: pointer;
}

.calendar-lane-tab-active[b-bva2krny7d] {
    background-color: var(--lane-color);
    color: var(--lane-text);
    font-weight: 600;
}

.calendar-lane-tab[b-bva2krny7d]  .calendar-lane-close,
.calendar-lane-head[b-bva2krny7d]  .calendar-lane-close {
    color: inherit;
    padding: 2px;
}

.calendar-time-head-cell[b-bva2krny7d] {
    flex: 1 1 0;
    min-width: 0;
    padding: 4px 8px;
    border-right: 1px solid var(--mud-palette-lines-default);
}

    .calendar-time-head-cell:last-child[b-bva2krny7d] {
        border-right: none;
    }

.calendar-time-head-name[b-bva2krny7d] {
    font-weight: 600;
    font-size: 0.8rem;
    text-transform: capitalize;
}

.calendar-time-head-date[b-bva2krny7d] {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.calendar-time-allday-cell[b-bva2krny7d] {
    flex: 1 1 0;
    min-width: 0;
    padding: 2px 4px;
    border-right: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.calendar-time-gutter[b-bva2krny7d] {
    flex: 0 0 56px;
    border-right: 1px solid var(--mud-palette-lines-default);
    font-size: 0.72rem;
    color: var(--mud-palette-text-secondary);
    text-align: right;
    padding-right: 6px;
}

.calendar-time-body[b-bva2krny7d] {
    display: flex;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
}

.calendar-time-hour-label[b-bva2krny7d] {
    /* De labels staan op de lijn, niet erboven: zo hoort 09:00 zichtbaar bij het uur dat begint. */
    transform: translateY(-0.55em);
}

.calendar-time-day[b-bva2krny7d] {
    position: relative;
    flex: 1 1 0;
    min-width: 0;
    border-right: 1px solid var(--mud-palette-lines-default);
}

    .calendar-time-day:last-child[b-bva2krny7d] {
        border-right: none;
    }

.calendar-time-hour[b-bva2krny7d] {
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.calendar-today[b-bva2krny7d] {
    background-color: color-mix(in srgb, var(--mud-palette-primary) 6%, transparent);
}

.calendar-now[b-bva2krny7d] {
    position: absolute;
    left: 0;
    right: 0;
    height: 2px;
    background-color: var(--mud-palette-error);
    z-index: 3;
    pointer-events: none;
}

.calendar-time-day-selectable[b-bva2krny7d] {
    cursor: cell;
    touch-action: none;
}

/* Het voorbeeldvlak tijdens het slepen. Wordt door JavaScript in de dagkolom gezet en weer weggehaald;
   ::deep is nodig omdat het element buiten de rendertree van dit component ontstaat. */
[b-bva2krny7d] .calendar-slot-ghost {
    position: absolute;
    left: 2px;
    right: 2px;
    border-radius: 3px;
    background-color: color-mix(in srgb, var(--mud-palette-primary) 25%, transparent);
    border: 1px dashed var(--mud-palette-primary);
    color: var(--mud-palette-primary);
    font-size: 0.72rem;
    padding: 1px 4px;
    pointer-events: none;
    z-index: 5;
}

.calendar-event[b-bva2krny7d] {
    position: absolute;
    border-radius: 3px;
    border-left: 3px solid var(--mud-palette-primary);
    background-color: var(--mud-palette-background-gray);
    padding: 1px 4px;
    font-size: 0.75rem;
    overflow: hidden;
    cursor: pointer;
    z-index: 2;
}

    .calendar-event:hover[b-bva2krny7d] {
        filter: brightness(0.95);
        z-index: 4;
    }

.calendar-event-title[b-bva2krny7d] {
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.calendar-event-subtitle[b-bva2krny7d] {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    opacity: 0.85;
}
/* /Components/Custom/HtmlEditor.razor.rz.scp.css */
.html-editor-container[b-9kx788mb9g] {
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: var(--mud-default-borderradius);
	overflow: hidden;
}

.html-editor-disabled[b-9kx788mb9g] {
	opacity: 0.6;
	pointer-events: none;
	background-color: var(--mud-palette-action-disabled-background);
}

.html-editor-toolbar[b-9kx788mb9g] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	background-color: var(--mud-palette-surface);
	border-bottom: 1px solid var(--mud-palette-lines-default);
}

.html-editor-toolbar .toolbar-separator[b-9kx788mb9g] {
	width: 1px;
	height: 24px;
	background-color: var(--mud-palette-lines-default);
	margin: 0 4px;
}

.html-editor-content[b-9kx788mb9g] {
	min-height: 100px;
	padding: 12px;
	padding-left: 16px;
	outline: none;
	font-family: var(--mud-typography-body1-family);
	font-size: var(--mud-typography-body1-size);
	line-height: var(--mud-typography-body1-lineheight);
	overflow-y: auto;
	position: relative;
}

/* ::deep ensures styles apply to dynamically created elements (no Blazor scope attribute) */
.html-editor-content[b-9kx788mb9g]  ul,
.html-editor-content[b-9kx788mb9g]  ol {
	padding-left: 28px;
	margin: 4px 0;
}

.html-editor-content[b-9kx788mb9g]  ul {
	list-style-type: disc;
}

.html-editor-content[b-9kx788mb9g]  ol {
	list-style-type: decimal;
}

.html-editor-content[b-9kx788mb9g]  li {
	margin: 2px 0;
}

.html-editor-content:empty[b-9kx788mb9g]::before {
	content: attr(data-placeholder);
	color: var(--mud-palette-text-disabled);
	pointer-events: none;
	position: absolute;
	font-style: italic;
}

.html-editor-content[b-9kx788mb9g]  img {
	max-width: 100%;
	height: auto;
	cursor: pointer;
}

.html-editor-content[b-9kx788mb9g]  a {
	color: var(--mud-palette-primary);
	text-decoration: underline;
}

.html-editor-content:focus[b-9kx788mb9g] {
	outline: none;
}

.html-editor-container:focus-within[b-9kx788mb9g] {
	border-color: var(--mud-palette-primary);
	border-width: 2px;
}

.html-editor-source[b-9kx788mb9g] {
	margin: 0;
	padding: 8px;
}

[b-9kx788mb9g] .html-editor-source .mud-input-outlined .mud-input-outlined-border {
	border: none !important;
}

[b-9kx788mb9g] .html-editor-source textarea {
	font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
	font-size: 13px;
	line-height: 1.5;
	tab-size: 4;
}

/* handlebars-variabele chip in de editor ({{...}}) */
.html-editor-content[b-9kx788mb9g]  .html-editor-handlebars {
	display: inline;
	padding: 0 3px;
	border-radius: 3px;
	background-color: var(--mud-palette-primary-hover);
	color: var(--mud-palette-primary);
	font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
	font-size: 0.9em;
	white-space: nowrap;
	cursor: default;
	user-select: all;
}

/* @mention chip in de editor */
.html-editor-content[b-9kx788mb9g]  .html-editor-mention {
	color: inherit;
	text-decoration: underline;
	text-decoration-style: solid;
	text-underline-offset: 2px;
	font-weight: 600;
	cursor: default;
	user-select: none;
}
/* /Components/Custom/MarkdownEditor.razor.rz.scp.css */
/* Blazor-scoped CSS geldt alleen voor de opmaak van het eigen component: de stijlen van
   HtmlEditor.razor.css werken hier niet, ook al zijn de klassenamen gelijk. Zonder deze regels valt
   de werkbalk uiteen in losse regels. Wat markdown niet kent (kleuren, lettertypes) staat er ook
   niet in; de opmaak hieronder toont wél hoe de markdown eruit komt te zien. */

.html-editor-container[b-jkj0xtafjj] {
	border: 1px solid var(--mud-palette-lines-default);
	border-radius: var(--mud-default-borderradius);
	overflow: hidden;
}

.html-editor-disabled[b-jkj0xtafjj] {
	opacity: 0.6;
	pointer-events: none;
	background-color: var(--mud-palette-action-disabled-background);
}

.html-editor-toolbar[b-jkj0xtafjj] {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px;
	padding: 4px 8px;
	background-color: var(--mud-palette-surface);
	border-bottom: 1px solid var(--mud-palette-lines-default);
}

.html-editor-toolbar .toolbar-separator[b-jkj0xtafjj] {
	width: 1px;
	height: 24px;
	background-color: var(--mud-palette-lines-default);
	margin: 0 4px;
}

.html-editor-content[b-jkj0xtafjj] {
	min-height: 100px;
	padding: 12px;
	padding-left: 16px;
	outline: none;
	font-family: var(--mud-typography-body1-family);
	font-size: var(--mud-typography-body1-size);
	line-height: var(--mud-typography-body1-lineheight);
	overflow-y: auto;
	position: relative;
}

.html-editor-content:focus[b-jkj0xtafjj] {
	outline: none;
}

.html-editor-container:focus-within[b-jkj0xtafjj] {
	border-color: var(--mud-palette-primary);
	border-width: 2px;
}

.html-editor-content:empty[b-jkj0xtafjj]::before {
	content: attr(data-placeholder);
	color: var(--mud-palette-text-disabled);
	pointer-events: none;
	position: absolute;
	font-style: italic;
}

/* ::deep is nodig: de inhoud wordt door de browser opgebouwd en draagt geen scope-attribuut. */
.html-editor-content[b-jkj0xtafjj]  ul,
.html-editor-content[b-jkj0xtafjj]  ol {
	padding-left: 28px;
	margin: 4px 0;
}

.html-editor-content[b-jkj0xtafjj]  ul {
	list-style-type: disc;
}

.html-editor-content[b-jkj0xtafjj]  ol {
	list-style-type: decimal;
}

.html-editor-content[b-jkj0xtafjj]  li {
	margin: 2px 0;
}

.html-editor-content[b-jkj0xtafjj]  img {
	max-width: 100%;
	height: auto;
}

.html-editor-content[b-jkj0xtafjj]  a {
	color: var(--mud-palette-primary);
	text-decoration: underline;
}

/* Koppen krijgen zichtbaar gewicht, anders is een kop niet van gewone tekst te onderscheiden. */
.markdown-editor-content[b-jkj0xtafjj]  h1 {
	font-size: 1.6em;
	font-weight: 600;
	margin: 0.6em 0 0.3em;
}

.markdown-editor-content[b-jkj0xtafjj]  h2 {
	font-size: 1.35em;
	font-weight: 600;
	margin: 0.6em 0 0.3em;
}

.markdown-editor-content[b-jkj0xtafjj]  h3 {
	font-size: 1.15em;
	font-weight: 600;
	margin: 0.6em 0 0.3em;
}

.markdown-editor-content[b-jkj0xtafjj]  h4 {
	font-size: 1em;
	font-weight: 700;
	margin: 0.6em 0 0.3em;
}

.markdown-editor-content[b-jkj0xtafjj]  blockquote {
	margin: 8px 0;
	padding: 2px 0 2px 12px;
	border-left: 3px solid var(--mud-palette-lines-default);
	color: var(--mud-palette-text-secondary);
}

.markdown-editor-content[b-jkj0xtafjj]  pre {
	background-color: var(--mud-palette-background-grey);
	border-radius: var(--mud-default-borderradius);
	padding: 8px 12px;
	overflow-x: auto;
	font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
	font-size: 0.9em;
}

.markdown-editor-content[b-jkj0xtafjj]  code {
	background-color: var(--mud-palette-background-grey);
	border-radius: 3px;
	padding: 0 3px;
	font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
	font-size: 0.9em;
}

.markdown-editor-content[b-jkj0xtafjj]  pre code {
	background: none;
	padding: 0;
}

.markdown-editor-content[b-jkj0xtafjj]  table {
	border-collapse: collapse;
	margin: 8px 0;
}

.markdown-editor-content[b-jkj0xtafjj]  th,
.markdown-editor-content[b-jkj0xtafjj]  td {
	border: 1px solid var(--mud-palette-lines-default);
	padding: 4px 8px;
	text-align: left;
}

.markdown-editor-content[b-jkj0xtafjj]  th {
	background-color: var(--mud-palette-background-grey);
	font-weight: 600;
}

.markdown-editor-content[b-jkj0xtafjj]  hr {
	border: none;
	border-top: 1px solid var(--mud-palette-lines-default);
	margin: 12px 0;
}

.html-editor-source[b-jkj0xtafjj] {
	margin: 0;
	padding: 8px;
}

[b-jkj0xtafjj] .html-editor-source .mud-input-outlined .mud-input-outlined-border {
	border: none !important;
}

[b-jkj0xtafjj] .html-editor-source textarea {
	font-family: 'Cascadia Code', 'Consolas', 'Courier New', monospace;
	font-size: 13px;
	line-height: 1.5;
	tab-size: 4;
}
/* /Components/Custom/UserPickerComponent.razor.rz.scp.css */
/* Uiterlijk van de collega-kiezer. Overgenomen uit het chatpaneel, zodat het beheren van
   groepsleden en van afdelingsleden er hetzelfde uitziet. */

.user-picker[b-csyyqxaiki] {
	display: flex;
	flex-direction: column;
	min-height: 0;
}

.user-picker-search[b-csyyqxaiki] {
	flex: 0 0 auto;
	padding-bottom: 8px;
}

.user-picker-selected[b-csyyqxaiki] {
	display: flex;
	flex-wrap: wrap;
	gap: 4px;
	padding-bottom: 8px;
}

.user-picker-list[b-csyyqxaiki] {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
}

.user-picker-letter[b-csyyqxaiki] {
	padding: 8px 12px 2px;
	font-size: 0.75rem;
	font-weight: 600;
	color: var(--mud-palette-primary);
}

.user-picker-row[b-csyyqxaiki] {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
	cursor: pointer;
	border-radius: 4px;
}

	.user-picker-row:hover[b-csyyqxaiki] {
		background-color: rgba(var(--mud-palette-primary-rgb), 0.06);
	}

.user-picker-row-selected[b-csyyqxaiki] {
	background-color: rgba(var(--mud-palette-primary-rgb), 0.10);
}

.user-picker-avatar[b-csyyqxaiki] {
	position: relative;
	flex: 0 0 auto;
	width: 40px;
	height: 40px;
	border-radius: 50%;
	background-color: rgba(var(--mud-palette-primary-rgb), 0.15);
	color: var(--mud-palette-primary);
	display: flex;
	align-items: center;
	justify-content: center;
	font-weight: 600;
	font-size: 0.9rem;
}

.user-picker-avatar-photo[b-csyyqxaiki] {
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.user-picker-name[b-csyyqxaiki] {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

.user-picker-check[b-csyyqxaiki] {
	position: absolute;
	right: -2px;
	bottom: -2px;
	width: 16px;
	height: 16px;
	border-radius: 50%;
	background-color: var(--mud-palette-success);
	color: white;
	display: flex;
	align-items: center;
	justify-content: center;
}

.user-picker-presence[b-csyyqxaiki] {
	position: absolute;
	right: -1px;
	bottom: -1px;
	width: 11px;
	height: 11px;
	border-radius: 50%;
	background-color: var(--mud-palette-success);
	border: 2px solid var(--mud-palette-surface);
}
/* /Components/Custom/WheelTimePickerDialog.razor.rz.scp.css */
.wheel-time-picker[b-08k2drmyho] {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 8px 0;
}

.wheel-time-picker-highlight[b-08k2drmyho] {
	position: absolute;
	left: 0;
	right: 0;
	top: 50%;
	height: 40px;
	transform: translateY(-50%);
	background-color: var(--mud-palette-action-default-hover);
	border-radius: var(--mud-default-borderradius);
	pointer-events: none;
}

.wheel-time-picker-column-wrap[b-08k2drmyho] {
	position: relative;
	width: 72px;
	height: 200px;
}

.wheel-time-picker-column[b-08k2drmyho] {
	height: 100%;
	overflow-y: auto;
	scroll-snap-type: y mandatory;
	scrollbar-width: none;
	-ms-overflow-style: none;
	cursor: grab;
	user-select: none;
	touch-action: pan-y;
}

.wheel-time-picker-column[b-08k2drmyho]::-webkit-scrollbar {
	display: none;
}

.wheel-time-picker-column.wheel-time-picker-dragging[b-08k2drmyho] {
	cursor: grabbing;
	scroll-snap-type: none;
}

.wheel-time-picker-pad[b-08k2drmyho] {
	height: 80px;
}

.wheel-time-picker-item[b-08k2drmyho] {
	height: 40px;
	line-height: 40px;
	text-align: center;
	font-size: 1.35rem;
	scroll-snap-align: center;
	color: var(--mud-palette-text-primary);
}

.wheel-time-picker-fade[b-08k2drmyho] {
	position: absolute;
	left: 0;
	right: 0;
	height: 60px;
	pointer-events: none;
}

.wheel-time-picker-fade-top[b-08k2drmyho] {
	top: 0;
	background: linear-gradient(var(--mud-palette-surface), transparent);
}

.wheel-time-picker-fade-bottom[b-08k2drmyho] {
	bottom: 0;
	background: linear-gradient(transparent, var(--mud-palette-surface));
}

.wheel-time-picker-separator[b-08k2drmyho] {
	font-size: 1.35rem;
	font-weight: 600;
	color: var(--mud-palette-text-primary);
	padding-bottom: 2px;
}
/* /Components/File/FileUpload.razor.rz.scp.css */
/* FileUpload component styles */
/* /Components/Shared/ReconnectModal.razor.rz.scp.css */
/* Visibility wordt volledig via JS beheerd — geen CSS class-based show/hide regels nodig */

#components-reconnect-modal[b-yigt4epjn7] {
    background-color: white;
    width: 20rem;
    margin: 20vh auto;
    padding: 2rem;
    border: 0;
    border-radius: 0.5rem;
    box-shadow: 0 3px 6px 2px rgba(0, 0, 0, 0.3);
    opacity: 0;
    transition: display 0.5s allow-discrete, overlay 0.5s allow-discrete;
    animation: components-reconnect-modal-fadeOutOpacity-b-yigt4epjn7 0.5s both;
    &[open]

{
    animation: components-reconnect-modal-slideUp-b-yigt4epjn7 1.5s cubic-bezier(.05, .89, .25, 1.02) 0.3s, components-reconnect-modal-fadeInOpacity-b-yigt4epjn7 0.5s ease-in-out 0.3s;
    animation-fill-mode: both;
}

}

#components-reconnect-modal[b-yigt4epjn7]::backdrop {
    background-color: rgba(0, 0, 0, 0.4);
    animation: components-reconnect-modal-fadeInOpacity-b-yigt4epjn7 0.5s ease-in-out;
    opacity: 1;
}

@keyframes components-reconnect-modal-slideUp-b-yigt4epjn7 {
    0% {
        transform: translateY(30px) scale(0.95);
    }

    100% {
        transform: translateY(0);
    }
}

@keyframes components-reconnect-modal-fadeInOpacity-b-yigt4epjn7 {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@keyframes components-reconnect-modal-fadeOutOpacity-b-yigt4epjn7 {
    0% {
        opacity: 1;
    }

    100% {
        opacity: 0;
    }
}

.components-reconnect-container[b-yigt4epjn7] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1rem;
}

#components-reconnect-modal p[b-yigt4epjn7] {
    margin: 0;
    text-align: center;
}

#components-reconnect-modal button[b-yigt4epjn7] {
    border: 0;
    background-color: #6b9ed2;
    color: white;
    padding: 4px 24px;
    border-radius: 4px;
}

    #components-reconnect-modal button:hover[b-yigt4epjn7] {
        background-color: #3b6ea2;
    }

    #components-reconnect-modal button:active[b-yigt4epjn7] {
        background-color: #6b9ed2;
    }

.components-rejoining-animation[b-yigt4epjn7] {
    position: relative;
    width: 80px;
    height: 80px;
}

    .components-rejoining-animation div[b-yigt4epjn7] {
        position: absolute;
        border: 3px solid #0087ff;
        opacity: 1;
        border-radius: 50%;
        animation: components-rejoining-animation-b-yigt4epjn7 1.5s cubic-bezier(0, 0.2, 0.8, 1) infinite;
    }

        .components-rejoining-animation div:nth-child(2)[b-yigt4epjn7] {
            animation-delay: -0.5s;
        }

@keyframes components-rejoining-animation-b-yigt4epjn7 {
    0% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    4.9% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 0;
    }

    5% {
        top: 40px;
        left: 40px;
        width: 0;
        height: 0;
        opacity: 1;
    }

    100% {
        top: 0px;
        left: 0px;
        width: 80px;
        height: 80px;
        opacity: 0;
    }
}

.reconnect-diagnostics[b-yigt4epjn7] {
    width: 100%;
    margin-top: 0.5rem;
}

.reconnect-diagnostics details[b-yigt4epjn7] {
    text-align: left;
}

.reconnect-diagnostics summary[b-yigt4epjn7] {
    cursor: pointer;
    font-size: 0.75rem;
    color: #888;
    text-align: center;
    user-select: none;
}

.reconnect-diagnostics summary:hover[b-yigt4epjn7] {
    color: #555;
}

.reconnect-copy-btn[b-yigt4epjn7] {
    display: block;
    margin: 0.5rem auto 0;
    padding: 4px 16px;
    font-size: 0.75rem;
    border: 1px solid #ccc;
    border-radius: 4px;
    background-color: #fff;
    color: #333;
    cursor: pointer;
}

.reconnect-copy-btn:hover[b-yigt4epjn7] {
    background-color: #e8e8e8;
}

#reconnect-diagnostics-content[b-yigt4epjn7] {
    margin-top: 0.5rem;
    padding: 0.5rem;
    background-color: #f5f5f5;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-family: monospace;
    font-size: 0.7rem;
    color: #333;
    max-height: 200px;
    overflow-y: auto;
    word-break: break-word;
}
/* /Pages/Pos/PosCashCount.razor.rz.scp.css */
/* Munten links, biljetten rechts; op een smal scherm onder elkaar. */
.pos-cash-count-grid[b-k60rugobmf] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    column-gap: 24px;
}

.pos-cash-count-row[b-k60rugobmf] {
    display: flex;
    align-items: center;
    gap: 2px;
    min-height: 44px;
}

[b-k60rugobmf] .pos-cash-count-label {
    flex: 0 0 60px;
    text-align: right;
    padding-right: 4px;
    font-variant-numeric: tabular-nums;
}

/* Smal: er staan hooguit een paar cijfers in; de knoppen eromheen doen het meeste werk. */
[b-k60rugobmf] .pos-cash-count-quantity {
    flex: 0 0 56px;
    max-width: 56px;
}

    [b-k60rugobmf] .pos-cash-count-quantity input {
        text-align: center;
    }

[b-k60rugobmf] .pos-cash-count-subtotal {
    flex: 1 1 auto;
    text-align: right;
    font-variant-numeric: tabular-nums;
}
/* /Pages/WorkOrder/Planboard/WorkOrderPlanboard.razor.rz.scp.css */

/* AI-celselectie: klik op een vakje (monteur + datum) markeert het voor de AI-assistent */
.ai-cell[b-9q47456obb] {
    cursor: pointer;
}

.ai-selected-cell[b-9q47456obb] {
    outline: 2px solid var(--mud-palette-info);
    outline-offset: -3px;
    background-color: color-mix(in srgb, var(--mud-palette-info) 14%, transparent) !important;
}