/* Schedule Editor - Name bar */
.schedule-name-bar {
    padding: 16px 24px 8px;
    background: #fff;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

/* Schedule Editor - Quick fill toolbar */
.schedule-quick-fill {
    padding: 12px 24px;
    background: #fff;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.schedule-quick-fill-row {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Carries the quick fill instruction as a tooltip. A small round "?" matching
   the prototype's affordance. */
.schedule-quick-fill-help {
    width: 18px;
    height: 18px;
    flex-shrink: 0;
    border-radius: 100px;
    border: 1.5px solid var(--mud-palette-lines-default);
    background: transparent;
    color: var(--mud-palette-text-secondary);
    font-size: 10.5px;
    font-weight: 700;
    display: inline-grid;
    place-items: center;
    cursor: pointer;
    padding: 0;
    line-height: 1;
}

.schedule-quick-fill-help:hover {
    background: var(--mud-palette-background-gray);
}

/* The clean type currently armed for painting, beside the help affordance */
.schedule-quick-fill-selected {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    margin-left: 4px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
}

.schedule-quick-fill-types {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}

.schedule-paint-btn {
    display: inline-flex;
    align-items: center;
    padding: 2px;
    background: transparent;
    border: 0;
    border-radius: 100px;
    cursor: pointer;
    transition: background 0.15s;
}

.schedule-paint-btn:hover {
    background: var(--mud-palette-background-gray);
}

/* Selected reads on the pill itself rather than as a ring around the button:
   its border takes the clean type's own text colour and doubles in weight.
   The inset shadow does the thickening so the pill does not change size and
   nudge its neighbours along the row. */
.schedule-paint-btn.active .clean-type-badge {
    border-color: var(--badge-foreground);
    box-shadow: inset 0 0 0 1px var(--badge-foreground);
}

/* Schedule Editor - Dialog overrides */
/* mud-dialog-fullscreen and schedule-editor-dialog sit on the SAME element, so
   these have to be a compound selector. Written as a descendant combinator
   they matched nothing, which left the dialog body as one long scroll instead
   of a fixed header over a scrolling grid. */
.mud-dialog-fullscreen.schedule-editor-dialog {
    display: flex;
    flex-direction: column;
    height: 100%;
}

.mud-dialog-fullscreen.schedule-editor-dialog .mud-dialog-content {
    flex: 1;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    min-height: 0;
    padding: 0;
}

.mud-dialog-fullscreen.schedule-editor-dialog .mud-dialog-actions {
    justify-content: space-between;
    flex-shrink: 0;
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* The grid wrapper has to pass the height down: it grows to fill what is left
   under the name bar and quick fill, and min-height:0 lets its child scroll
   rather than stretching the dialog */
.schedule-desktop-view {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 16px 24px;
}

/* Schedule Editor - Grid */
/* The frame sits on the scroll container rather than the table, so the border
   and rounded corners stay put while the rows move underneath the pinned
   header. On the table they scrolled away with the first row. flex: 0 1 auto
   keeps it hugging a short table instead of stretching to the dialog. */
.schedule-grid-scroll {
    --schedule-pinned-header: 60px;
    overflow: auto;
    flex: 0 1 auto;
    min-height: 0;
    background: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

.schedule-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--mud-palette-surface);
}

/* Schedule Editor - Table headers */
/* Pinned so only the rows scroll. border-collapse: separate above is what lets
   a sticky cell keep its own borders; the background has to be opaque or the
   rows passing beneath show through. */
.schedule-th {
    position: sticky;
    top: 0;
    z-index: 3;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    padding: 8px;
    text-align: center;
    font-weight: 700;
    font-size: 10px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.schedule-th-task {
    text-align: left;
    width: 1%;
    white-space: nowrap;
    border-right: 1px solid var(--mud-palette-lines-default);
}

.schedule-th-daily-col {
    border-right: 2px solid var(--mud-palette-lines-default);
}

.schedule-th-daily-label {
    display: block;
}

.schedule-th-daily-sub {
    display: block;
    font-weight: 500;
    font-size: 9px;
    opacity: 0.6;
    letter-spacing: 0.06em;
    margin-top: 2px;
}

.schedule-th-extra {
    background: var(--mud-palette-background-gray);
}

/* Scroll-into-view knows nothing about the header painted over the cells, so a
   control reached by Tab can settle underneath it. The reserve covers the 46px
   band and the 4px focus ring app.css puts outside every button. Scoped to the
   grid because these classes also match the mobile cards. */
.schedule-grid-scroll .schedule-cell-btn,
.schedule-grid-scroll .schedule-seq-btn,
.schedule-grid-scroll .mud-icon-button.schedule-del-btn {
    scroll-margin-top: var(--schedule-pinned-header);
}

/* Schedule Editor - Table rows */
/* The element-name cell is a <th scope="row"> for row-header semantics, so
   every rule that shapes body cells has to reach th as well as td */
.schedule-row-slot td,
.schedule-row-slot th {
    border-bottom: none;
}

.schedule-row-last > td,
.schedule-row-last > th {
    border-bottom: 2px solid var(--mud-palette-lines-default) !important;
}

tbody tr:last-child.schedule-row-last > td,
tbody tr:last-child.schedule-row-last > th {
    border-bottom: none !important;
}

/* Present to a screen reader, absent on screen. Used for the grid's caption
   and for tooltip text, which is painted rather than announced. */
.schedule-grid-caption,
.schedule-visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* Schedule Editor - Element cell */
.schedule-td-task {
    font-weight: 400;
    padding: 10px;
    text-align: left;
    vertical-align: top;
    border-right: 1px solid var(--mud-palette-lines-default);
    border-bottom: 2px solid var(--mud-palette-lines-default) !important;
    width: 1%;
}

/* Element names are free text, so the column is capped and the name wraps
   inside it. Without the cap a single long name takes half the grid and
   squeezes every clean column. The cap sits on the header rather than the
   cell because auto table layout does not honour max-width on a <td>. */
.schedule-task-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 4px;
    max-width: 320px;
}

.schedule-task-name {
    font-weight: 600;
    font-size: 13px;
    line-height: 1.3;
    color: var(--mud-palette-text-primary);
    flex: 1;
    min-width: 0;
    overflow-wrap: break-word;
}

.schedule-task-actions {
    display: flex;
    align-items: flex-end;
    gap: 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* Schedule Editor - Remove element button
   An outlined square rather than a bare icon, matching the prototype's
   .del-btn — it reads as a control next to the sequence stepper instead of a
   loose glyph. app.css forces 8px of padding on every .mud-icon-button, hence
   the override. */
.mud-icon-button.schedule-del-btn {
    width: 27px;
    height: 27px;
    min-width: 27px;
    padding: 0 !important;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    background: #fff;
    flex-shrink: 0;
}

.mud-icon-button.schedule-del-btn:hover {
    background: var(--mud-palette-error-hover);
}

.mud-icon-button.schedule-del-btn .mud-icon-root {
    font-size: 15px;
}

/* Schedule Editor - Sequence stepper */
.schedule-seq-label-group {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.schedule-seq-text {
    font-size: 11px;
    color: var(--mud-palette-text-secondary);
    font-weight: 600;
}

.schedule-seq-stepper {
    display: inline-flex;
    align-items: center;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 6px;
    overflow: hidden;
    height: 24px;
}

.schedule-seq-btn {
    width: 24px;
    height: 24px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: var(--mud-palette-background-gray);
    cursor: pointer;
    color: var(--mud-palette-text-primary);
    font-size: 14px;
    font-weight: 600;
    padding: 0;
}

.schedule-seq-btn:hover:not(:disabled) {
    background: var(--mud-palette-lines-default);
}

.schedule-seq-btn:disabled {
    color: var(--mud-palette-text-disabled);
    cursor: default;
}

.schedule-seq-value {
    width: 24px;
    text-align: center;
    font-weight: 700;
    font-size: 12px;
    color: var(--mud-palette-text-primary);
    border-left: 1px solid var(--mud-palette-lines-default);
    border-right: 1px solid var(--mud-palette-lines-default);
    line-height: 24px;
}

/* Schedule Editor - Slot badge
   A site names its own sequences, so the badge holds arbitrary text. It grows
   to fit the name and the clean cell beside it wraps below when the pair no
   longer fits. A name too long even for that runs onto a second line at a
   space — never mid-word, which is what break-word used to do. */
.schedule-slot-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-width: 28px;
    max-width: 100%;
    min-height: 28px;
    padding: 2px 6px;
    border-radius: 4px;
    font-weight: 700;
    font-size: 10px;
    line-height: 1.3;
    letter-spacing: 0.04em;
    word-break: normal;
    overflow-wrap: break-word;
    background: var(--mud-palette-background-gray);
    color: var(--mud-palette-text-secondary);
    border: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

/* Schedule Editor - Grid cells */
.schedule-td-cell {
    padding: 3px;
    text-align: center;
    vertical-align: middle;
    min-height: 32px;
    width: 1%;
}

.schedule-td-daily {
    padding: 3px;
}

.schedule-daily-inner {
    display: flex;
    align-items: center;
    gap: 4px;
    flex-wrap: wrap;
}

.schedule-daily-inner .schedule-cell-btn {
    flex: 1;
    min-width: 60px;
}

.schedule-td-cell:not(.schedule-td-extra) {
    border-right: 2px solid var(--mud-palette-lines-default);
}

/* The periodic columns are separated by the border alone — the body of the
   grid stays white so the clean-type badges read against a plain surface */
.schedule-td-extra {
    border-bottom: 2px solid var(--mud-palette-lines-default) !important;
}

.schedule-grid td.schedule-td-bottom,
.schedule-grid th.schedule-td-bottom {
    border-bottom: none !important;
}

.schedule-grid-empty {
    padding: 36px 10px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
    font-size: 13px;
}

/* Schedule Editor - Cell button */
.schedule-cell-btn {
    width: 100%;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px dashed var(--mud-palette-lines-default);
    border-radius: 6px;
    cursor: pointer;
    padding: 2px;
    transition: background 0.1s;
}

.schedule-cell-btn:hover {
    background: var(--mud-palette-lines-default);
}

/* A filled cell is the same box as an empty one — the clean type's colours go
   on the button itself rather than on a chip nested inside it, so the two
   states line up exactly */
/* Only the box is described here — the per-type background, text and border
   colours arrive as inline styles from the component, so they survive a
   stale cached copy of this stylesheet */
/* 12px matches the clean type pills in the toolbar and picker — the chip that
   used to sit inside the cell rendered at that size, so anything smaller
   reads as the label having shrunk */
.schedule-cell-btn.filled {
    border-style: solid;
    border-width: 1px;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 6px;
}

.schedule-cell-btn.filled:hover {
    filter: brightness(0.95);
}

.schedule-cell-text {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.schedule-cell-btn.active {
    background: var(--mud-palette-background-gray);
    border: 2px solid var(--mud-palette-lines-default);
}

/* app.css sets the app-wide focus ring on every button with !important, so
   these only correct its offset. Each sits inside an ancestor that clips — the
   picker and element lists scroll, the stepper hides overflow to keep its
   rounded corners — and a ring drawn outside them is cut off. A negative
   offset draws it just inside the element, where nothing can clip it.
   !important is required to beat the global rule, not to win a specificity
   fight. */
.cell-picker-option:focus-visible,
.cell-picker-clear:focus-visible,
.schedule-element-popover-item:focus-visible,
.schedule-seq-btn:focus-visible {
    outline-offset: -3px !important;
}

/* The picker panel is a div, so the global button rule does not reach it —
   it needs its own ring for when it takes focus before the first option */
.cell-picker:focus-visible {
    outline: 3px solid var(--mud-palette-info);
    outline-offset: 2px;
}

/* Schedule Editor - Cell picker popover */
.cell-picker-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.cell-picker {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 260px;
    display: flex;
    flex-direction: column;
    max-height: 350px;
}

.cell-picker-header {
    padding: 10px 12px 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
}

.cell-picker-title {
    font-weight: 700;
    font-size: 12px;
    line-height: 1.2;
    color: var(--mud-palette-text-primary);
}

.cell-picker-subtitle {
    font-weight: 500;
    font-size: 11px;
    line-height: 1.2;
    color: var(--mud-palette-text-secondary);
    margin-top: 2px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.cell-picker-options {
    overflow-y: auto;
    flex: 1;
    min-height: 0;
    padding: 2px;
}

.cell-picker-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 4px;
    padding: 4px 6px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.cell-picker-option > div {
    flex: 0 0 auto;
}

.cell-picker-option:hover {
    background: var(--mud-palette-lines-default);
}

.cell-picker-option.selected {
    background: var(--mud-palette-background-gray);
}

.cell-picker-footer {
    border-top: 1px solid var(--mud-palette-lines-default);
    flex-shrink: 0;
    padding: 4px;
}

.cell-picker-clear {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    text-align: left;
    background: transparent;
    border: 0;
    border-radius: 6px;
    padding: 8px;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-error);
}

.cell-picker-clear:hover {
    background: var(--mud-palette-background-gray);
}

/* The brand primary carries white text at 2.90:1, below the WCAG 2.2 AA
   4.5:1 minimum. This darker green reaches 5.16:1 and matches what the
   prototype uses. Scoped to these buttons; the palette is unchanged. */
.mud-fab.schedule-submit-btn:not(:disabled),
.mud-fab.schedule-add-element-btn:not(:disabled) {
    background-color: #2e7d22;
}

.mud-fab.schedule-submit-btn:not(:disabled):hover,
.mud-fab.schedule-add-element-btn:not(:disabled):hover {
    background-color: #256b1b;
}

/* Schedule Editor - Footer */
.schedule-footer-left {
    flex: 1;
    position: relative;
}

.schedule-footer-status {
    font-size: 12px;
    color: var(--mud-palette-text-secondary);
    white-space: nowrap;
}

.schedule-footer-right {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Schedule Editor - Add element popover */
.schedule-element-popover-overlay {
    position: fixed;
    inset: 0;
    z-index: 9999;
}

.schedule-element-popover {
    position: fixed;
    z-index: 10000;
    background: #fff;
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
    width: 300px;
    bottom: 60px;
    left: 16px;
}

.schedule-element-popover-header {
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
    border-radius: 10px 10px 0 0;
}

.schedule-element-popover-search {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

/* The placeholder is the only visible naming of this field, so it has to carry
   body-text contrast; MudBlazor's default 0.42 opacity leaves it at 3.04:1.
   MudBlazor's own selector is both more specific and loaded later, because
   gvs-components.css imports it after this file, so these have to outrank it
   rather than merely follow it. */
.schedule-element-popover-search .mud-input > input.mud-input-root::placeholder {
    color: rgba(0, 0, 0, 0.6);
    opacity: 1;
}

/* The field has no fill, so its border is the only thing marking the control;
   MudBlazor's #BDBDBD default is 1.88:1 against the white popover. Both of
   these overrides are local patches for a product-wide MudBlazor default, and
   should be deleted when the theme-level fix lands in GVS.Components. */
.schedule-element-popover-search .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: rgba(0, 0, 0, 0.45);
}

/* The popover is anchored by its bottom edge, so a results area that resizes as
   you type would drag the search field up and down under the cursor. A constant
   height keeps the panel exactly one size in every state. The cap is for short
   viewports — a landscape phone has less room than the panel wants, and the
   panel would otherwise grow off the top of the screen where it cannot scroll.
   It depends on viewport height only, so it never changes while filtering. */
.schedule-element-popover-list {
    height: 250px;
    max-height: calc(100vh - 170px);
    overflow-y: auto;
}

.schedule-element-popover-item {
    display: block;
    width: 100%;
    padding: 8px 12px;
    background: transparent;
    border: 0;
    cursor: pointer;
    font-size: 13px;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
    text-align: left;
}

.schedule-element-popover-item:hover {
    background: var(--mud-palette-lines-default);
}

.schedule-element-popover-empty {
    height: 100%;
    padding: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Schedule Editor - Mobile */
.schedule-mobile-view {
    display: none;
}

.schedule-mobile-scroll {
    padding: 12px 16px;
    overflow: auto;
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* flex-shrink: 0 is load-bearing — the card list is a flex column with a
   constrained height, so without it each card is squashed to share the space
   and overflow: hidden clips everything below its header */
.schedule-mobile-card {
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 10px;
    background: #fff;
    overflow: hidden;
    flex-shrink: 0;
}

.schedule-mobile-card-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
    background: var(--mud-palette-background-gray);
}

.schedule-mobile-card-section {
    padding: 8px 12px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.schedule-mobile-card-section:last-child {
    border-bottom: none;
}

.schedule-mobile-card-section-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}

.schedule-mobile-row {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
    padding: 3px 0;
}

.schedule-mobile-freq-label {
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
    min-width: 80px;
    flex-shrink: 0;
}

/* A floor rather than 0, so a long sequence name wraps the cell onto the next
   line instead of squeezing it down to a sliver */
.schedule-mobile-row .schedule-cell-btn {
    flex: 1;
    min-width: 60px;
}

/* Schedule Editor - Mobile responsive */
@media (max-width: 768px) {
    .schedule-desktop-view {
        display: none;
    }

    /* The quick fill types are held out of the scroll entirely rather than
       pinned with position: sticky. Sticky inside the dialog's own scroll
       container is repositioned per frame instead of being composited, which
       shows as the strip lagging and letting a sliver of content past its top
       edge on a real device. Nothing scrolls behind it now, so neither can
       happen. The name bar is compacted below to pay for the space. */
    .schedule-mobile-view {
        display: flex;
        flex-direction: column;
        flex: 1;
        min-height: 0;
    }

    /* Reclaim the height the pinned strip used to free up: tighter gutters on
       the two fields, which are stacked at this width anyway */
    .schedule-name-bar .mud-grid-item {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }

    .schedule-quick-fill {
        padding: 6px 12px;
    }

    /* Wrapping a dozen-plus clean types stacks the toolbar eight rows deep and
       leaves no room for the grid, so on a phone the types become a single
       swipeable strip instead */
    .schedule-quick-fill-types {
        gap: 4px;
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        padding-bottom: 4px;
        scrollbar-width: thin;
        -webkit-overflow-scrolling: touch;
    }

    .schedule-quick-fill-types .schedule-paint-btn {
        flex-shrink: 0;
    }

        .schedule-name-bar {
        padding: 6px 12px 2px;
    }

    /* The editor's three action FABs carry their icon only at phone widths —
       the labels together will not fit at 320px. Each keeps its aria-label, so
       dropping the visible text costs nothing to a screen reader.
       MudFab renders the label as a bare text node beside the icon, which no
       selector can reach and which still holds width at font-size 0, so the
       icon is centred out of flow rather than by the flex row.
       Scoped to the editor: a confirmation modal's FABs carry a label and no
       icon, so stripping their text would leave blank circles. */
    .schedule-editor-dialog .mud-dialog-actions .mud-fab.mud-fab-extended {
        position: relative;
        min-width: 40px;
        width: 40px;
        height: 40px;
        padding: 0;
        border-radius: 50%;
    }

    .schedule-editor-dialog .mud-dialog-actions .mud-fab .mud-fab-label {
        font-size: 0;
        margin: 0;
        gap: 0;
    }

    .schedule-editor-dialog .mud-dialog-actions .mud-fab .mud-fab-label .mud-icon-root {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 1.25rem;
        margin: 0;
    }

    .schedule-footer-right {
        gap: 4px !important;
    }

    /* The footer has to fit three controls at 320px. The count is dropped
       rather than truncated — a fragment of it earns nothing, and the grid
       above already shows what is scheduled. */
    .schedule-footer-status {
        display: none;
    }

    .schedule-footer-left,
    .schedule-footer-right {
        flex: 0 0 auto;
    }

    .cell-picker {
        width: calc(100vw - 16px);
        max-width: 260px;
    }

    .schedule-element-popover {
        width: calc(100vw - 32px);
        left: 16px;
    }
}