/* ── Dialog sheet ── */
.sheet-dialog              { background: var(--background); }
.settings-dialog-root      { position: relative; background: var(--background); }

.sheet-handle              { display: flex; justify-content: center; align-items: center; height: 18px; }
.sheet-handle__pill        { width: 44px; height: 5px; border-radius: 99px; background: var(--border); }

.sheet-header              { padding: 6px 4px 14px; display: flex; align-items: flex-start; gap: 12px; font-family: Inter, -apple-system, system-ui, sans-serif; }
.sheet-header__text        { flex: 1; min-width: 0; }
.sheet-header__overline    { font-size: 11px; color: var(--text-muted); font-weight: 500; line-height: 1.3; }
.sheet-header__title       { font-size: 20px; font-weight: 700; letter-spacing: -0.4px; margin-top: 1px; color: var(--text-primary); line-height: 1.2; }
/* Class-chain raises specificity to beat MudBlazor's .mud-icon-button defaults. */
.mud-icon-button.sheet-header__close { width: 32px; height: 32px; min-width: 32px; padding: 0; border-radius: 50%; background-color: var(--background); color: var(--text-secondary); }
.mud-icon-button.sheet-header__close .mud-icon-root { font-size: 14px; }

/* Raw <input> instead of MudTextField — MudTextField nests the input in
   multiple wrappers which breaks the transparent-overlay trick. */
.date-card                 { position: relative; background: var(--background); border-radius: 14px; padding: 14px 16px; display: flex; align-items: center; gap: 12px; cursor: pointer; }
.date-card__icon           { width: 36px; height: 36px; min-width: 36px; border-radius: 10px; background: var(--surface); display: flex; align-items: center; justify-content: center; box-shadow: 0 1px 2px rgba(0,0,0,0.04); }
.date-card__icon .mud-icon-root { font-size: 16px; color: var(--primary); }
.date-card__text           { flex: 1; min-width: 0; }
.date-card__date           { font-size: 15px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.date-card__sub            { font-size: 11px; color: var(--text-muted); margin-top: 1px; }
.date-card__chevron        { color: var(--text-muted); }
.date-card__chevron.mud-icon-root { font-size: 14px; }
.date-card__input          { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: none; padding: 0; margin: 0; font: inherit; }

/* MudBlazor only ships a clock-face time picker; this stepper is custom. */
.time-picker               { display: flex; gap: 8px; align-items: center; }
.time-picker__cell         { flex: 1; background: var(--background); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.time-picker__btn          { color: var(--text-muted); width: 28px; height: 24px; min-width: 0; padding: 0; }
.time-picker__btn .mud-icon-root { font-size: 16px; }
.time-picker__value        { font-size: 36px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; min-width: 2ch; text-align: center; }
input.time-picker__value   { background: transparent; border: none; padding: 0; margin: 0; width: 2.2ch; font-family: Inter, -apple-system, system-ui, sans-serif; outline: none; cursor: text; }
input.time-picker__value::-webkit-inner-spin-button,
input.time-picker__value::-webkit-outer-spin-button { -webkit-appearance: none; margin: 0; }
.time-picker__sep          { font-size: 36px; font-weight: 700; color: var(--text-muted); letter-spacing: -1px; line-height: 1; padding-bottom: 4px; }

.seg-tabs                  { display: flex; gap: 4px; background: var(--background); padding: 3px; border-radius: 99px; margin-bottom: 16px; }
.seg-tab                   { flex: 1; padding: 9px 0; border: none; cursor: pointer; background: transparent; color: var(--text-muted); border-radius: 99px; font-size: 12px; font-weight: 600; font-family: inherit; box-shadow: none; }
.seg-tab--active           { background: var(--surface); color: var(--text-primary); box-shadow: 0 1px 2px rgba(0,0,0,0.06); }

/* Sheet sections */
.sheet-section             { margin-bottom: 14px; }
.sheet-section-header      { display: flex; align-items: baseline; padding: 0 4px 8px; }
.sheet-section-title {
    font-size: 11px;
    color: var(--text-muted);
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
}
.sheet-section-hint {
    margin-left: auto;
    font-size: 11px;
    color: var(--text-muted);
}

/* Sheet input card (white rounded container for form fields) */
.sheet-input-card          { background: var(--surface); border-radius: 14px; padding: 14px 16px; }
.sheet-input-card--col     { display: flex; flex-direction: column; gap: 10px; }

/* Day chips */
.day-chip {
    flex: 1;
    height: 44px;
    border: none;
    cursor: pointer;
    border-radius: 12px;
    font-size: 12px;
    font-weight: 700;
    font-family: Inter, -apple-system, system-ui, sans-serif;
    transition: all 0.15s;
}
.day-chip--active {
    background: var(--primary);
    color: var(--surface);
}
.day-chip--inactive {
    background: var(--background);
    color: var(--text-secondary);
}

/* Preset chips */
.preset-chip {
    padding: 6px 12px;
    border: 1px solid var(--border);
    background: transparent;
    border-radius: 99px;
    font-size: 11px;
    font-weight: 600;
    color: var(--text-secondary);
    cursor: pointer;
    font-family: Inter, -apple-system, system-ui, sans-serif;
}

/* Humidity-hysteresis visualization (EditAreaSettingsDialog) */
.hyst-viz                  { position: relative; margin: 8px 0 20px; }
.hyst-now                  { position: absolute; top: -28px; transform: translateX(-50%); z-index: 2; }
.hyst-now__pill            { background: var(--text-primary); color: var(--surface); font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 99px; white-space: nowrap; font-variant-numeric: tabular-nums; }
.hyst-now__arrow           { width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid var(--text-primary); margin: 0 auto; }
.hyst-bar                  { display: flex; height: 56px; border-radius: 14px; overflow: hidden; position: relative; }
.hyst-zone                 { display: flex; align-items: center; justify-content: center; gap: 6px; padding: 0 8px; min-width: 0; }
.hyst-zone--dry            { background: var(--warning-bg); color: var(--warning); }
.hyst-zone--ideal          { background: var(--accent-bg); color: var(--primary); }
.hyst-zone--wet            { background: var(--info-bg); color: var(--info); }
.hyst-zone .mud-icon-root  { font-size: 16px; flex-shrink: 0; color: currentColor; }
.hyst-zone__label          { min-width: 0; overflow: hidden; }
.hyst-zone__title          { font-size: 11px; font-weight: 700; white-space: nowrap; }
.hyst-zone__sub            { font-size: 9px; opacity: 0.7; white-space: nowrap; }
.hyst-now-line             { position: absolute; top: 0; bottom: 0; width: 3px; background: var(--text-primary); opacity: 0.55; transform: translateX(-50%); }
.hyst-handle               { position: absolute; top: -4px; bottom: -4px; width: 2px; background: var(--text-primary); transform: translateX(-50%); }
.hyst-handle__knob         { position: absolute; top: 50%; transform: translateY(-50%); width: 22px; height: 22px; border-radius: 50%; background: var(--surface); border: 2px solid var(--text-primary); display: flex; align-items: center; justify-content: center; font-size: 9px; font-weight: 700; }
.hyst-handle__knob--low    { right: 4px; }
.hyst-handle__knob--high   { left: 4px; }
.hyst-axis                 { display: flex; justify-content: space-between; margin-top: 4px; }
.hyst-axis span            { font-size: 9px; color: var(--text-muted); }
.hyst-steppers             { display: flex; gap: 8px; }
.hyst-stepper              { flex: 1; min-width: 0; background: var(--background); border-radius: 12px; padding: 8px 6px; text-align: center; }
.hyst-stepper__label       { font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; }
.hyst-stepper__label--dry  { color: var(--warning); }
.hyst-stepper__label--wet  { color: var(--info); }
.hyst-stepper__row         { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 6px 0; }
.hyst-stepper__btn         { background: var(--surface); border-radius: 50%; width: 28px; height: 28px; min-width: 28px; color: var(--text-primary); border: 1px solid var(--border); box-shadow: 0 1px 2px rgba(0,0,0,0.10); }
.hyst-stepper__btn .mud-icon-root,
.hyst-stepper__btn .mud-icon-default { color: var(--text-primary); }
.hyst-stepper__value       { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; color: var(--text-primary); }
.hyst-stepper__hint        { font-size: 8px; color: var(--text-muted); }

/* Duration */
.duration-card             { background: var(--background); border-radius: 16px; padding: 16px; }
.dialog-hint               { font-size: 11px; color: var(--text-muted); padding: 4px 6px; }
.duration-display          { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; }
.duration-value            { font-size: 30px; font-weight: 700; color: var(--text-primary); font-variant-numeric: tabular-nums; letter-spacing: -1px; line-height: 1; }
.duration-unit             { font-size: 13px; color: var(--text-muted); font-weight: 500; }
.duration-presets          { display: flex; gap: 6px; flex-wrap: wrap; }
.duration-preset {
    flex: 1;
    padding: 8px 0;
    border: none;
    cursor: pointer;
    border-radius: 10px;
    font-size: 12px;
    font-weight: 700;
    font-family: Inter, -apple-system, system-ui, sans-serif;
}
.duration-preset--active {
    background: var(--primary);
    color: var(--surface);
}
.duration-preset--inactive {
    background: var(--surface);
    color: var(--text-secondary);
}

/* Preview card */
.schedule-preview {
    margin: 4px 0 12px;
    padding: 14px;
    border-radius: 16px;
    background: var(--accent-bg);
    color: var(--primary);
    display: flex;
    align-items: center;
    gap: 12px;
}
.schedule-preview-icon {
    width: 36px;
    height: 36px;
    border-radius: 12px;
    background: var(--primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.schedule-preview-icon .mud-icon-root { font-size: 16px; color: var(--surface); }
.schedule-preview-overline { font-size: 11px; font-weight: 600; color: var(--primary); opacity: 0.7; letter-spacing: 0.4px; text-transform: uppercase; }
.schedule-preview-text     { font-size: 13px; font-weight: 700; color: var(--text-primary); margin-top: 1px; }

/* Sheets render their own .sheet-header; suppress the auto-title.
   `overflow: hidden` on the outer dialog so only .mud-dialog-content scrolls. */
.mud-dialog.sheet-dialog .mud-dialog-title,
.mud-dialog.settings-dialog-root .mud-dialog-title { display: none; }
.mud-dialog.sheet-dialog,
.mud-dialog.settings-dialog-root {
    overflow: hidden;
    /* Cap the dialog to the viewport and lay it out as a column so the content
       region (not the whole dialog) becomes the scroll area. Without the cap the
       dialog grows past the screen and overflow-y on the content never engages. */
    display: flex;
    flex-direction: column;
    max-height: 90dvh;
}

.mud-dialog.sheet-dialog .mud-dialog-actions,
.mud-dialog.settings-dialog-root .mud-dialog-actions {
    padding: 8px 16px max(16px, env(safe-area-inset-bottom));
    gap: 10px;
}

.mud-dialog.sheet-dialog .mud-dialog-content,
.mud-dialog.settings-dialog-root .mud-dialog-content {
    padding: 0 16px;
    /* `flex: 1 1 auto` + `min-height: 0` lets this flex child take the remaining
       column height and shrink below its intrinsic content size, so `overflow-y:
       auto` engages instead of pushing the whole sheet. */
    flex: 1 1 auto;
    overflow-y: auto;
    min-height: 0;
    -webkit-overflow-scrolling: touch;
}
.mud-dialog.sheet-dialog .mud-dialog-title,
.mud-dialog.settings-dialog-root .mud-dialog-title { padding: 16px 22px 4px; }

.mud-dialog-actions .btn-dialog-cancel { padding: 14px 20px; background: var(--background); color: var(--text-primary); border-radius: 16px; font-size: 13px; font-weight: 600; text-transform: none; min-width: 0; }
.mud-dialog-actions .btn-dialog-submit { flex: 1; padding: 14px; background: var(--primary); color: var(--surface); border-radius: 16px; font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; gap: 8px; box-shadow: 0 6px 16px -6px color-mix(in srgb, var(--primary) 50%, transparent); text-transform: none; min-width: 0; }
.mud-dialog-actions .btn-dialog-submit .mud-icon-root { font-size: 14px; }