/* region CSS Variables */

:root {
    --mw-full-height:   calc(100vh - var(--mud-appbar-height));
    --mw-mc-primary:    var(--mud-palette-primary-rgb);
    --mw-mc-secondary:  var(--mud-palette-secondary-rgb);
    --mw-mc-tertiary:   var(--mud-palette-tertiary-rgb);
    --mw-mc-info:       var(--mud-palette-info-rgb);
    --mw-mc-success:    var(--mud-palette-success-rgb);
    --mw-mc-warning:    var(--mud-palette-warning-rgb);
    --mw-mc-error:      var(--mud-palette-error-rgb);
    --mw-mc-dark:       var(--mud-palette-dark-rgb);
}

/* endregion */

/* region Base Styles (Built-in, Remove?) */

html, body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    /*border: solid 10px rgb(var(--mw-mc-primary)); !* Testing variable translation from Mud to MW *!*/
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color:            #fff;
    background-color: #1b6ec2;
    border-color:     #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;
}

.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

.validation-message {
    color: #e50000;
}

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding:    1rem 1rem 1rem 3.7rem;
    color:      white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* endregion */

/* region Multiline */

/* NOTE: DataGrid - Making the property column multiline */

.multiline-property-column .mud-table-cell,
.mud-table-cell.multiline-property-column,
td.multiline-property-column {
    white-space:    pre-line !important;
    line-height:    1.5;
    padding-top:    8px;
    padding-bottom: 8px;
}

/* NOTE: MWClipboardChip */

/* This one will disable the onclick of the chip and can be put into a media query to have it be disabled on mobile */
/*.mw-clipboard-chip {*/
/*    pointer-events: none;*/
/*}*/

/* endregion */

/* region Dialogs */

/* NOTE: Signature Dialog */

.signature-pad {
    width:            100%;
    border:           4px solid #000;
    border-radius:    5px;
    padding:          0;
    margin:           0;
    background-color: white;
}

/* NOTE: General Dialogs */

/*TODO: Find out which of these is the correct one and delete the other */
/* To make it easier blur the background when a dialog is open. */
.dialog-background-blur {
    backdrop-filter: blur(10px);
}

/* To make it the default that the background is  blured when a dialog is open. */
.mud-overlay-dialog {
    backdrop-filter: blur(10px) !important;
}

.mud-dialog.mud-dialog-width-sm {
    padding: 16px;
}

/* Gives the ability to remove all m and p on a dialog with <MudDialog Class="mw-dialog-frameless">*/
.mw-dialog-frameless .mud-dialog-content {
    padding: 0 !important;
    margin:  0 !important;
}

/* <> */
.mw-dialog-frameless {
    padding: 0 !important;
    margin:  0 !important;
}

/* NOTE: Remove only horizontal padding from dialog and its content */
.mw-dialog-no-x-padding,
.mw-dialog-no-x-padding .mud-dialog-content {
    padding-left:  0 !important;
    padding-right: 0 !important;
}

/* NOTE: Show a subtle top shadow on dialog actions to hint at scrollable content above.
   Activated by placing a child with class mw-dialog-actions-drop-shadow inside DialogActions. */
.mud-dialog-actions:has(.mw-dialog-actions-drop-shadow) {
    clip-path: inset(-6px 0 0 0);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.3);
}

/* endregion */

/* region TreeView */

.e-treeview {
    overflow-y: auto !important;
    overflow-x: hidden !important;
}

/* NOTE: TREEVIEW NODES in the people dnd in the shiftplaner */
.e-list-item.e-level-1 {
    --treeview-border-radius: 2px;
    background-color:         var(--mud-palette-primary);
    border-radius:            var(--treeview-border-radius);
    margin-bottom:            8px;
    margin-right:             10px;
    overflow:                 hidden;
}

/* How a node in the treeview looks when its hovered */
li.e-list-item.e-level-1.e-hover {
    background-color: var(--mud-palette-primary-darken);
    /*background-color: red;*/
    border-radius:    var(--treeview-border-radius);
}

/* How a node in the treeview looks when its selected (selected not checked) */
li.e-list-item.e-level-1.e-active {
    background-color: var(--mud-palette-primary-darken);
    /*background-color: red;*/
    border-radius:    var(--treeview-border-radius);
}

/* The drag preview of the treeview node */
.e-drag-item {
    border:           2px solid #000;
    background-color: rgba(255, 255, 255, 0.8);
    border-radius:    5px;
    padding:          1px;
    height:           max-content !important; /* Since I made the .mw-treeview height: 100%, the drag preview would be also as big as the entire component without this. */
    margin-left:      10px;
    margin-top:       -20px;
    pointer-events:   none; /* This is kind magic and absolutely needed, otherwise it will interact with its self and cause all kinda problems. "Wann assign person to shift 0001-01-01..." */
}

/* Remove a square hover box on active and hover state in the treeview */
li.e-list-item.e-level-1.e-active > div.e-fullrow,
li.e-list-item.e-level-1.e-hover > div.e-fullrow {
    display: none;
}

/* endregion */

/* region Animations */

/* This is for the check-in animation in the PeopleView. Not working currently. TODO: Either make work, or remove*/
/* Animation when clicking the checkin button. */
@keyframes greenWave {
    0% {
        background-position: 200% 0;
    }

    100% {
        background-position: -200% 0;
    }
}

.green-wave-animation {
    background:      linear-gradient(90deg, transparent, green, transparent);
    background-size: 200% 100%;
    /* Ensures the wave spans more than the full width */
    animation:       greenWave 2s linear forwards;
    /* 1s for duration, linear for constant speed, forwards to retain final state */
}

/* endregion */

/* region Inventory Manager */

/* I think this is for the Inventory manager. TODO: Find out */
/* Image hover effect */
.image-hover {
    position:   relative;
    transition: 0.3s;
}

.image-hover::after {
    content:       "";
    position:      absolute;
    top:           0;
    left:          0;
    width:         100%;
    height:        100%;
    background:    rgba(255, 255, 255, 0);
    transition:    background 0.3s;
    border-radius: inherit;
}

.image-hover:hover::after {
    background: rgba(255, 255, 255, 0.1);
}

/* endregion */

/* region DataGrid */

/* NOTE: Filled Icon Button */
/* The icon of the filled button is not good visible on Color.Warning and Color.Error. Used in the AccountPage */
.mw-filled-icon-button path:nth-of-type(2) {
    fill: var(--mud-palette-dark-lighten);
}

/* NOTE: DataGrid - Hide the child content of a row when DataGrid.MultiSelection */
.mud-data-grid.hide-child-content .mud-table-child-content {
    background-color: red !important; /* For testing */
    display:          none !important;
}

/* NOTE: DataGrid - Hide the child content of a row when DataGrid.MultiSelection. This is kind of CSS magic. I add the mw-hide-child-content class to the MWDataGridUtils and it works. */
.mud-table.mud-data-grid.mud-table-dense.mud-table-sticky-header:has(> .mud-toolbar.mud-toolbar-gutters.mud-table-toolbar > .d-flex.flex-row.align-center.mw-hide-child-content) .mud-table-child-content {
    display: none;
}

/* NOTE: DataGrid - Highlight cells containing filtered elements */
.datagrid-filter-highlight .mud-table-cell:has(.filtered) {
    /*noinspection CssUnresolvedCustomProperty*/
    border-bottom: rgba(var(--mud-palette-warning-rgb)) 1px solid !important;
    box-shadow: inset 0 -1px 0 rgba(var(--mud-palette-warning-rgb));
}

/* TODO: Verify what this is doing! */
.mud-table-container {
    width:               100% !important; /* Without this that DataGrid is just as big as the columns*/
    overflow-y:          auto !important; /* This is necessary to fix the bug where the grid is not scrollable anymore when there are sticky columns.*/
    overflow-x:          auto !important; /* This is necessary to fix the bug where the grid is not scrollable anymore when there are sticky columns.*/
}

/* NOTE: Only contain overscroll on DataGrid tables (which have their own scroll container),
   not on MudSimpleTable where we need scroll to chain to the page body. */
/*.mud-data-grid > .mud-table-container {*/
/*    overscroll-behavior: contain; !* Prevent scroll chaining to parent/page on touch devices *!*/
/*}*/

/* NOTE: Hide the settings icon in the DataGrid */
.mw-data-grid-utils .mud-toolbar.mud-toolbar-gutters.mud-table-toolbar > .mud-menu {
    /* Your styles here */
    display: none; /* Example style */
}

/* NOTE: Shrink the toolbar in the DataGrid */
.mw-data-grid-utils > .mud-toolbar.mud-toolbar-gutters.mud-table-toolbar {
    /*padding: 0 !important; !* Remove padding *!*/
    /*margin: 0 !important; !* Remove margin *!*/
    height: 50px;
    /*min-height: 32px !important; !* Set min-height to 32px *!*/
}

/* region Datagrid columns */

/* Necessary to override the min-width of the column; this allows setting the width with just 'width' */
/* Previously we needed the GetConstrainedWidthStyle to force the width */
.mud-data-grid table {
    table-layout: fixed !important;
}

.mw-actions-column {
    width: 45px;
}

/* region mw-actions-column helpers */

/*Fix: MudBlazor's SelectColumn uses HeaderStyle="width:0%" which is fine for table-layout:auto
  (browser ignores it and sizes to content) but collapses the column to 0px in table-layout:fixed,
  hiding the select-all header checkbox behind the adjacent sticky th's opaque background.
  Body row checkboxes remain visible only because td backgrounds are transparent and the content overflows.
  This sets the width of the th with style width 0% to 40px */
.mud-data-grid table th[style*="width:0%"] {
    width: 40px !important;
}

/* This collapses the actions column during multiselect */
table:has(th[style*="width:0%"]) th.mw-actions-column {
    width: 0;
}

/* endregion mw-actions-column helpers */

.mw-name-column {
    width: 190px;
}

.mw-pronouns-column {
    width: 85px;
}

.mw-application-column {
    width: 500px;
}

.mw-diversity-column {
    width: 400px;
}

.mw-events-column {
    width: 200px;
}

.mw-phase-column {
    width: 160px;
}

.mw-tags-column {
    width: 250px;
}

.mw-email-column {
    width: 190px;
}

.mw-phone-column {
    width: 75px;
}

.mw-arrival-column {
    width: 140px;
}

.mw-transport-column {
    width: 300px;
}

.mw-note-column {
    width: 300px;
}

.mw-roles-column {
    width: 150px;
}

.mw-teams-column {
    width: 200px;
}

.mw-days-present-column {
    width: 66px;
}

.mw-acc-column {
    width: 20px;
}

.mw-age-column {
    width: 40px;
}

.mw-diet-column {
    width: 180px;
}

.mw-birthday-column {
    width: 90px;
}

.mw-days-since-signup-column {
    width: 30px;
}

.mw-deposit-column {
    width: 120px;
}

.mw-daily-presence-column {
    width: 20px;
}

.mw-count-column {
    width: 90px;
}

.mw-switch-column {
    width: 80px;
}

.mw-icon-column {
    width: 10px;
}

/* endregion Table Layout & Column Widths */

/* region Expand on Hover */

/* NOTE: For truncated cells (Name, Email) — show full text on hover/touch.
   overflow:visible lets text spill out of the cell, z-index:1 ensures the cell
   (including its background) paints above adjacent cells, and background-color
   covers the cell area. The overflowed text beyond the cell box has no background
   but is readable because z-index:1 places it above adjacent cell content. */
.mw-expand-on-hover {
    overflow:      hidden;
    text-overflow: ellipsis;
    white-space:   nowrap;
    position:      relative;
}

.mw-expand-on-hover:hover,
.mw-expand-on-hover:active {
    overflow:         visible;
    z-index:          1;
}

/* When the cell has a child <span> (CellTemplate or MudText),
   the span expands to fit its text and carries its own background. */
.mw-expand-on-hover:hover > span:not(:empty),
.mw-expand-on-hover:active > span:not(:empty) {
    background-color: var(--mud-palette-surface);
    width: max-content;
    max-width: none;
    display: inline-block;
    padding-left: 4px;
    margin-left: -5px; /* to cancel out shift caused by the padding & border */
    padding-right: 4px;
    border-radius: 4px;
    border: 1px solid var(--mud-palette-table-lines);
    position: relative; /* paint above sibling elements (e.g. edit buttons) inside the cell */
    z-index: 2;
}

/* endregion Expand on Hover */

/* endregion DataGrid */

/* region Journey Timeline */

/* NOTE: Journey step timeline (both views) */
/* Overrides MudBlazor's 96px min-height so the divider shrinks to the dot size */
.mud-timeline-item-divider {
    min-height: auto !important;
}

/* Card background color; ::after colors the decorative pointer arrow to match */
.mw-timeline-item {
    background-color: var(--mud-palette-primary) !important;
}
.mw-timeline-item::after {
    border-right-color: var(--mud-palette-primary) !important; /* Without this, the items move too far to the left in vertical view */
}

/* NOTE: Journey step timeline (horizontal only) */
/* MudBlazor sets width: 100% on horizontal timeline items.  In a max-content container
   this creates a circular dependency: during intrinsic sizing the browser treats 100%
   as auto (≈ min-width), sizes the container to that, then resolves 100% → container
   width, capped by max-width — so items end up wider than the container thought.
   width: auto breaks the cycle and lets items size from content + min/max-width,
   keeping the container and its ::before line in sync.
   Scoped to mw-timeline — in vertical mode the item is a flex row [divider|content]
   so these constraints must not apply there. */
.mw-timeline .mud-timeline-item {
    width: 300px;
}

/* Repositions the line to match our layout where min-height: auto shrinks the divider.
   MudBlazor's default for TimelinePosition.Top is top: 47px (center of 96px divider).
   Scoped to mw-timeline to avoid affecting other horizontal timelines in the app. */
.mw-timeline.mud-timeline-horizontal::before {
    top: 12px !important;
}

.mw-timeline-dialog {
    min-width: calc(100vw - 50px); /* wide enough for horizontal scrollable timeline */
}

/* NOTE: Journey step timeline (vertical only) */
@media (max-width: 959.98px) {
    .mw-timeline-dialog {
        min-width: 380px; /* vertical timeline only needs to fit 396px items */
        width: 380px;
    }
}

.mw-mobile-timeline .mud-timeline-item-divider {
    min-width: 20px !important;
}

/* Constraining the item (the whole row) rather than the content div.
   content ≈ item_max_width − divider_natural_width (96px).
   396px = 300px desired content + 96px divider. */
.mw-mobile-timeline .mud-timeline-item {
    max-width: 396px;
}

.mw-mobile-timeline::before {
    left: 83px !important; /* Repositions line to center of 40px divider (default: 47px for 96px divider) */
}

.mw-mobile-timeline {
    margin-left: -95px !important; /* or whatever shift you want */
}

/* endregion */

/* region Layout & Utilities */

.user-area-overflow-hidden {
    overflow-y: hidden !important;
}

/* endregion */

/* region Text Field */

/* NOTE: For the TextField with a frame like border */
.mw-text-field-frame-like .mud-input-outlined-border {
    border: solid 2px black !important;
}

.mw-text-field-frame-like:hover .mud-input-outlined-border {
    border: solid 2px var(--mud-palette-primary) !important;
}

.mud-input.mud-input-outlined:has(textarea:focus) .mud-input-outlined-border {
    border: solid 2px var(--mud-palette-primary) !important;
}

/* endregion */

/* region Tabs */

/* NOTE: Stretch MudTabs headers to fill available width equally, never scroll (Safari-safe).
   MudBlazor scrolls tabs by moving .mud-tabs-tabbar-wrapper (width: max-content + transition)
   inside .mud-tabs-tabbar-content (overflow: hidden). We override width to 100%, kill the
   transition, and block all possible scroll offsets (transform, margin-left, left). */
.mw-tabs-stretch .mud-tabs-tabbar-wrapper {
    width: 100% !important;
    max-width: 100% !important;
    transform: none !important;
    margin-left: 0 !important;
    left: 0 !important;
    transition: none !important;
}

.mw-tabs-stretch .mud-tabs-tabbar-wrapper > .mud-tooltip-root {
    flex: 1 1 0 !important;
    min-width: 0 !important;
}

.mw-tabs-stretch .mud-tab {
    min-width: 0 !important;
    white-space: nowrap !important;
}

.mw-tabs-stretch .mud-tabs-scroll-button {
    display: none !important;
}

/* endregion */

/* region Commented Out / Experimental */

/*.e-schedule .e-timeline-view .e-schedule-table tbody tr:first-child td {*/
/*    position: sticky !important;*/
/*    top: 0 !important;*/
/*    z-index: 2000 !important;*/
/*    background: white;*/
/*    border-bottom: 1px solid #ddd;*/
/*}*/

/*NOTE: Animate the person list open button */
/*.mw-sp-people-list-button {*/
/*    overflow:      hidden;*/
/*    transition: max-width 0.3s ease-in-out;*/
/*    display: flex !important;*/
/*    justify-items: flex-start;*/
/*}*/

/*.mw-sp-people-list-button.mw-sp-people-list-button-open {*/
/*    */
/*    max-width: 10px !important; !* Adjust this value to the width you want when open *!*/
/*    min-width: auto !important;*/
/*}*/

/*.mw-sp-people-list-button.mw-sp-people-list-button-open .mud-button-icon-start.mud-button-icon-size-medium {*/

/*    flex-shrink: 0 !important;*/
/*}*/

/*Since the first two rows of the datagrid on the vol. page don't have a HeaderStyle property and
using Style didn't work, we tried to change the column widt with this class but that didn't work either*/
/*.mw-data-grid-short-h-s ~ table th:nth-of-type(1),*/
/*.mw-data-grid-short-h-s ~ table th:nth-of-type(2) {*/
/*    width: 100px !important; !* or whatever width you need *!*/
/*    max-width: 100px !important; !* prevents them from growing *!*/
/*    min-width: 100px !important; !* prevents them from shrinking *!*/
/*}*/

/* Here I was trying to make a pseudo element that would display the time above the timeline item. */
/*.mw-timeline-item::before {*/
/*    position: absolute;*/
/*    content: ';lsdajf;jalk';*/
/*    !* This is the line that connects the dots *!*/
/*    background: var(--mud-palette-primary) !important;*/
/*    !*width: 20px !important;*!*/
/*    left: 50% !important;*/
/*    top: -30px !important;*/
/*}*/

/* endregion */

/* region Tooltip */

/* NOTE: Tooltip - Wrapped tooltip with max-width */
.mw-tooltip-wrap {
    max-width: 280px !important;
    min-height: fit-content;
}

/* endregion */

/* region TimePicker */

/* NOTE: Hide non-selectable minute sticks and number labels on the MudTimePicker clock face.
   Usage: <MudTimePicker Class="mw-time-step-15" MinuteSelectionStep="15" />
   Always pair the CSS class with the matching MinuteSelectionStep value.

   MudBlazor renders popover content in a portal (MudPopoverProvider), detached from the
   component tree. The Class parameter on MudTimePicker is therefore NOT an ancestor of the
   clock dial in the DOM. To bridge this, pickerClassBridge.js uses a MutationObserver to
   copy the mw-time-step-* class from the picker anchor to the popover container, making
   these descendant selectors work.

   The minute dial renders 12 MudText labels as its first 12 children (nth-child 1-12):
     1=00, 2=05, 3=10, 4=15, 5=20, 6=25, 7=30, 8=35, 9=40, 10=45, 11=50, 12=55
   Followed by 60 stick divs (.mud-picker-stick.mud-minute) with data-stick-value="0..59".
   This depends on MudBlazor's internal DOM order — may break on major MudBlazor upgrades. */

/* --- Step 5 (show 0, 5, 10, 15, 20, 25, 30, 35, 40, 45, 50, 55) --- */
/* All 12 labels are already at 5-min intervals, so only sticks need hiding. */

.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute {
    display: none;
}

.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="0"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="5"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="10"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="15"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="20"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="25"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="30"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="35"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="40"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="45"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="50"],
.mw-time-step-5 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="55"] {
    display: block;
}

/* --- Step 10 (show 0, 10, 20, 30, 40, 50) --- */

.mw-time-step-10 .mud-time-picker-minute > .mud-picker-stick.mud-minute {
    display: none;
}

.mw-time-step-10 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="0"],
.mw-time-step-10 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="10"],
.mw-time-step-10 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="20"],
.mw-time-step-10 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="30"],
.mw-time-step-10 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="40"],
.mw-time-step-10 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="50"] {
    display: block;
}

/* Hide labels for non-step minutes: keep 1=00, 3=10, 5=20, 7=30, 9=40, 11=50 */
.mw-time-step-10 .mud-time-picker-minute > :nth-child(2),
.mw-time-step-10 .mud-time-picker-minute > :nth-child(4),
.mw-time-step-10 .mud-time-picker-minute > :nth-child(6),
.mw-time-step-10 .mud-time-picker-minute > :nth-child(8),
.mw-time-step-10 .mud-time-picker-minute > :nth-child(10),
.mw-time-step-10 .mud-time-picker-minute > :nth-child(12) {
    display: none;
}

/* --- Step 15 (show 0, 15, 30, 45) --- */

.mw-time-step-15 .mud-time-picker-minute > .mud-picker-stick.mud-minute {
    display: none;
}

.mw-time-step-15 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="0"],
.mw-time-step-15 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="15"],
.mw-time-step-15 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="30"],
.mw-time-step-15 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="45"] {
    display: block;
}

/* Hide labels for non-step minutes: keep 1=00, 4=15, 7=30, 10=45 */
.mw-time-step-15 .mud-time-picker-minute > :nth-child(2),
.mw-time-step-15 .mud-time-picker-minute > :nth-child(3),
.mw-time-step-15 .mud-time-picker-minute > :nth-child(5),
.mw-time-step-15 .mud-time-picker-minute > :nth-child(6),
.mw-time-step-15 .mud-time-picker-minute > :nth-child(8),
.mw-time-step-15 .mud-time-picker-minute > :nth-child(9),
.mw-time-step-15 .mud-time-picker-minute > :nth-child(11),
.mw-time-step-15 .mud-time-picker-minute > :nth-child(12) {
    display: none;
}

/* --- Step 30 (show 0, 30) --- */

.mw-time-step-30 .mud-time-picker-minute > .mud-picker-stick.mud-minute {
    display: none;
}

.mw-time-step-30 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="0"],
.mw-time-step-30 .mud-time-picker-minute > .mud-picker-stick.mud-minute[data-stick-value="30"] {
    display: block;
}

/* Hide labels for non-step minutes: keep 1=00, 7=30 */
.mw-time-step-30 .mud-time-picker-minute > :nth-child(2),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(3),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(4),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(5),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(6),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(8),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(9),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(10),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(11),
.mw-time-step-30 .mud-time-picker-minute > :nth-child(12) {
    display: none;
}

/* endregion */