/* The frame shared by the Settings screens that show settings at work - Util.SettingsWorkbench,
   Scheduler-MobileHomeSettingsScreen-Design.md decision D5. The intro with Apply and Reset, the Apply
   bar, the example bar, the settings rail, the banner, and the two columns that scroll on their own.

   Each screen's root carries .SwScreen, and its own panels are styled in its own stylesheet
   (TimesheetSettings.css). Class names here are Sw*; element ids are the screen's own (#TssRail).

   Colours come from the --totm-* tokens in Modern.css where there is one. The lane badges
   (.SettingLaneBadge*) and requirement notes (.SettingRequirementNote*) are the Settings list's own,
   from Scheduler.css, so a setting carries the same badges on every screen. */

.SwScreen {
    --sw-schedule: #1976d2;
    --sw-schedule-tint: #e8f1fb;
    --sw-warn: #a15c00;
    --sw-refused: #a12;
    --sw-quiet: var(--totm-text-muted, #5f6368);
    --sw-line: var(--totm-border, #e3e5e9);
    --sw-line-strong: var(--totm-border-strong, #c9ccd1);
    --sw-surface: #f6f7f9;
}

#SettingsDialogContent > .SwScreen {
    font-size: 13px;
    line-height: 1.4;
    color: var(--totm-text, #1a1a1a);
    text-align: left;
}

/* "This server cannot describe these settings yet." */
.SwNothing {
    padding: 14px;
    background: var(--sw-surface);
    border-radius: 6px;
    color: var(--sw-quiet);
}

/* ---- top: one row - the last change and what is not saved, Reset and Apply */

/* A fixed height, whatever it holds, so nothing below it moves: the screen's line about the last
   change keeps its two lines while it is short, and is cut off at two when it is long. It replaces
   three bands that used to stand here - the intro sentence, the Apply bar and the screen's banner -
   which between them took a third of the dialog's height. See the UX review of 2026-10-15 in
   Scheduler-MobileJobSettingsScreen-Design.md. */
.SwIntro {
    position: relative;
    display: flex;
    gap: 16px;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 8px;
}

.SwIntroText {
    flex: 1 1 auto;
    min-width: 0;
}

.SwStatusLine {
    display: flex;
    gap: 8px;
    align-items: flex-start;
}

.SwAbout {
    flex: none;
    margin-top: 2px;
    color: var(--sw-quiet);
    cursor: help;
}

.SwStatus {
    flex: 1 1 auto;
    min-width: 0;
}

/* A screen's banner, as a line of the header rather than a box above the results. */
#SettingsDialogContent .SwScreen .SwIntro .SwBanner {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    height: 2.8em;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: none;
}

#SettingsDialogContent .SwScreen .SwIntro .SwBanner > span + span {
    margin-left: 8px;
}

#SettingsDialogContent .SwScreen .SwIntro .SwBanner.SwBannerIdle {
    color: var(--sw-quiet);
}

.SwChangedCount {
    /* Its line is kept even while it is empty, so filling it in on the first draw moves nothing
       below it. One line: a long "Saved..." is cut off, not wrapped. */
    height: 1.4em;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    font-size: 12px;
    font-weight: 600;
    color: var(--sw-quiet);
}

.SwIntroButtons {
    flex: none;
    display: flex;
    gap: 8px;
    align-items: center;
}

/* Reset is the way back, not the way forward: outlined, quieter than Apply. !important because
   Scheduler.css paints every button brand blue with !important. */
#SettingsDialogContent .SwScreen .SwResetButton {
    padding: 5px 12px !important;
    border: 1px solid var(--sw-line-strong) !important;
    border-radius: 5px !important;
    background-color: #fff !important;
    color: var(--totm-text, #1a1a1a) !important;
    font-weight: 500 !important;
    cursor: pointer;
}

#SettingsDialogContent .SwScreen .SwResetButton:disabled {
    color: var(--sw-quiet) !important;
    cursor: default;
}

/* "Apply N changes | ▾": the one control that changes anything for real, and beside it what it would
   change. */
.SwApplySplit {
    display: inline-flex;
}

#SettingsDialogContent .SwScreen .SwApplyButton {
    padding: 5px 16px !important;
    border: 1px solid var(--sw-schedule) !important;
    border-radius: 5px 0 0 5px !important;
    background-color: var(--sw-schedule) !important;
    color: #fff !important;
    font-weight: 600 !important;
    cursor: pointer;
}

#SettingsDialogContent .SwScreen .SwChangesToggle {
    display: inline-flex;
    gap: 4px;
    align-items: center;
    padding: 5px 9px !important;
    border: 1px solid var(--sw-schedule) !important;
    border-left-color: rgba(255, 255, 255, 0.5) !important;
    border-radius: 0 5px 5px 0 !important;
    background-color: var(--sw-schedule) !important;
    color: #fff !important;
    cursor: pointer;
}

#SettingsDialogContent .SwScreen .SwApplyButton:disabled,
#SettingsDialogContent .SwScreen .SwChangesToggle:disabled {
    border-color: var(--sw-line-strong) !important;
    background-color: var(--sw-surface) !important;
    color: var(--sw-quiet) !important;
    cursor: default;
}

/* A warning in the list, or a failed save: the ▾ says so before it is opened. */
#SettingsDialogContent .SwScreen .SwChangesToggle.SwChangesToggleWarn {
    background-color: var(--sw-warn) !important;
    border-color: var(--sw-warn) !important;
}

.SwChangesWarnCount:not(:empty)::before {
    content: "\26A0  ";
}

.SwChangesWarnCount:not(:empty) {
    font-size: 11px;
    font-weight: 700;
}

/* What Apply would change: dropped down from the ▾, over the page, so opening it moves nothing. */
.SwApplyDetail {
    position: absolute;
    top: calc(100% + 4px);
    right: 0;
    z-index: 30;
    box-sizing: border-box;
    display: none;
    gap: 4px;
    width: min(560px, 100%);
    max-height: 280px;
    overflow-y: auto;
    padding: 10px 12px;
    border: 1px solid var(--sw-schedule);
    border-radius: 6px;
    background: #fff;
    box-shadow: 0 6px 18px rgba(16, 24, 40, 0.18);
}

.SwApplyDetail.SwApplyDetailOpen {
    display: grid;
}

.SwApplyDetail.SwApplyDetailIdle {
    border-color: var(--sw-line);
}

.SwApplyIdle {
    color: var(--sw-quiet);
}

/* The parts with nothing in them take no row, or the grid's gaps would push the rest off centre. */
.SwApplyDetail > div:empty {
    display: none;
}

.SwApplyChange {
    display: block;
}

.SwApplyWarning {
    color: var(--sw-warn);
    font-weight: 600;
}

.SwApplyError {
    color: var(--sw-refused);
    font-weight: 600;
}

.SettingRequirementNote.SwMovedNote {
    color: var(--sw-warn);
    font-weight: 600;
}

/* ---- the example bar */

.SwExample {
    display: flex;
    gap: 10px 22px;
    align-items: flex-end;
    flex-wrap: wrap;
    padding: 10px 12px;
    margin-bottom: 12px;
    border: 1px solid var(--sw-line);
    border-radius: 6px;
    background: #fff;
}

.SwExampleField {
    display: flex;
    flex-direction: column;
    gap: 3px;
    font-size: 12px;
    color: var(--sw-quiet);
}

.SwExampleField select {
    min-width: 250px;
}

.SwExampleTick {
    display: flex;
    gap: 6px;
    align-items: center;
    padding-bottom: 3px;
}

/* ---- two columns: the settings, and what they do */

.SwLayout {
    display: grid;
    grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
    gap: 14px;
    align-items: start;
}

@media (max-width: 1100px) {
    .SwLayout {
        grid-template-columns: minmax(0, 1fr);
    }
}

/* Side by side, each column scrolls on its own.

   The settings rail is several screens long and the results are a couple, so as one scrolling page
   a setting changed halfway down the rail changed panels that had long since scrolled away - the
   point of the screen, off the screen. Here the dialog's content pane stops scrolling and becomes
   a column: what this is, the Apply button, what Apply would save and the example stay at the top,
   and the rail and the results share what is left and each scroll within it. Each screen then
   brings what a change reached into view (View.TimesheetSettings' revealMovedPanel).

   :has() rather than a class added by the view, because the pane is shared by every settings
   window and a class can be left behind on it; when the pane is emptied this simply stops
   matching. It matches on .SwLayout, not on the screen, so "the server cannot describe its
   settings yet" stays an ordinary small dialog. Modern.css already relies on :has().

   Everything is inside the @supports, so a browser without :has() gets none of it rather than
   half of it, and keeps the one scrolling page. So does a window too narrow for two columns, or
   too short for two panes worth having. */
@media (min-width: 1101px) and (min-height: 620px) {
    @supports selector(:has(*)) {
        #SettingsDialogContent:has(> .SwScreen > .SwLayout) {
            display: flex;
            flex-direction: column;
            /* All the height the dialog will give. This is only the flex-basis:
               #SettingWrapperDialog's own max-height (Scheduler.css) shrinks it to fit the window,
               where the pane's usual 650px would leave each column a few rows tall. */
            height: 95vh;
            max-height: none;
            overflow: hidden;
        }

        #SettingsDialogContent > .SwScreen:has(> .SwLayout) {
            display: flex;
            flex-direction: column;
            flex: 1 1 auto;
            min-height: 0;
        }

        #SettingsDialogContent > .SwScreen:has(> .SwLayout) > * {
            flex: 0 0 auto;
        }

        #SettingsDialogContent > .SwScreen > .SwLayout {
            flex: 1 1 auto;
            min-height: 0;
            grid-template-rows: minmax(0, 1fr);
            align-items: stretch;
        }

        #SettingsDialogContent .SwScreen .SwRail,
        #SettingsDialogContent .SwScreen .SwResults {
            min-height: 0;
            overflow-y: auto;
            /* The wheel reaching the end of one column must not start moving the calendar behind. */
            overscroll-behavior: contain;
            scrollbar-width: thin;
            scrollbar-color: var(--totm-scrollbar, #c1c4c9) transparent;
        }

        #SettingsDialogContent .SwScreen .SwResults {
            align-content: start;
            /* Each row as tall as what is in it. Left to "auto", a grid that is shorter than its
               content gives a row only its minimum, and for the timeline - a scroll container,
               for its sideways overflow - that minimum is nothing: it was squashed to its dots. */
            grid-auto-rows: max-content;
            /* The pane has no right margin of its own, so the scrollbar would sit on the panels. */
            padding-right: 10px;
        }

    }
}

.SwRail {
    border: 1px solid var(--sw-line);
    border-radius: 6px;
    background: #fff;
    padding-bottom: 6px;
}

.SwRailTable {
    width: 100%;
    border-collapse: collapse;
}

.SwRailTable td {
    padding: 7px 10px;
    vertical-align: top;
    border-bottom: 1px dashed var(--sw-line);
}

.SwRailTable td:last-child {
    width: 1%;
    white-space: nowrap;
    text-align: right;
}

.SwRailTable select,
.SwRailTable input[type="text"],
.SwRailTable input[type="number"],
.SwRailTable input[type="time"] {
    max-width: 190px;
}

/* A drop-down or text box on its own line under the name - Util.SettingsWorkbench.drawSettingRow. */
.SwRailTable .SwControlBelow {
    margin-top: 6px;
    text-align: left;
}

.SwRailTable .SwControlBelow select,
.SwRailTable .SwControlBelow input[type="text"] {
    width: 100%;
    max-width: 100%;
    box-sizing: border-box;
}

.SwRailTable input[type="number"] {
    width: 70px;
}

.SwRailTable td.SwGroupHeading,
.SwElsewhere .SwGroupHeading {
    padding-top: 12px;
    border-bottom: 1px solid var(--sw-line-strong);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--sw-quiet);
    text-align: left;
    white-space: normal;
    width: auto;
}

.SwGroupHint {
    margin-left: 8px;
    font-weight: 400;
    letter-spacing: 0;
    text-transform: none;
}

.SwSettingTitle {
    font-weight: 500;
}

/* A setting changed here, but not saved. */
.SwChanged .SwSettingTitle::before {
    content: "";
    display: inline-block;
    width: 7px;
    height: 7px;
    margin-right: 6px;
    border-radius: 50%;
    background: var(--sw-schedule);
    vertical-align: 1px;
}

/* The setting this screen was opened to look at. */
.SwFocused td {
    background: var(--sw-schedule-tint);
}

/* "Show in Settings", as a small quiet icon beside the name - its words are on hover. */
/* In the top right of the name cell, one quiet column of them down the rail - beside the name it
   wrapped onto a line of its own under any long one. */
#SettingsDialogContent .SwScreen td.SwSettingName {
    position: relative;
    padding-right: 22px;
}

#SettingsDialogContent .SwScreen .SwShowInSettings {
    /* A box of its own, so it can be found and clicked even before the icon font has loaded. */
    position: absolute;
    top: 9px;
    right: 4px;
    min-width: 12px;
    min-height: 12px;
    text-align: center;
    font-size: 11px;
    color: var(--sw-quiet);
    text-decoration: none;
    opacity: 0.6;
}

#SettingsDialogContent .SwScreen tr.SwSetting:hover .SwShowInSettings,
#SettingsDialogContent .SwScreen .SwShowInSettings:focus-visible {
    color: var(--sw-schedule);
    opacity: 1;
}

/* What the setting does, in plain words, under a name that is often a legacy one. */
.SwSettingSummary {
    /* Two lines at most; all of it on hover. */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    margin-top: 2px;
    font-size: 12px;
    line-height: 1.35;
    color: var(--sw-quiet);
}

.SwElsewhere {
    padding: 0 10px 8px;
    font-size: 12px;
    color: var(--sw-quiet);
}

.SwElsewhere .SwGroupHeading {
    margin-bottom: 6px;
}

.SwElsewhereLine {
    margin-top: 4px;
}

/* ---- results */

.SwResults {
    display: grid;
    gap: 12px;
    min-width: 0;
}

.SwBanner {
    display: flex;
    gap: 6px 12px;
    align-items: baseline;
    flex-wrap: wrap;
    padding: 9px 12px;
    border: 1px solid var(--sw-schedule);
    border-radius: 6px;
    background: var(--sw-schedule-tint);
}

.SwBanner.SwBannerIdle {
    border-color: var(--sw-line);
    background: #fff;
    color: var(--sw-quiet);
}

/* ---- a phone in the results - Util.SettingsWorkbench.phone */

/* A part brought into view: a ring that fades, so the eye finds it without it staying loud. */
#SettingsDialogContent .SwScreen .SwPhonePulse {
    animation: SwPhonePulse 1.4s ease-out;
}

@keyframes SwPhonePulse {
    0% { box-shadow: 0 0 0 4px var(--sw-pulse, #f5a524); }
    70% { box-shadow: 0 0 0 4px var(--sw-pulse, #f5a524); }
    100% { box-shadow: 0 0 0 4px transparent; }
}

/* More of the phone below what shows: a fade at the frame's foot, saying so. The screen sets
   --sw-phone-fade to its phone's page colour. */
#SettingsDialogContent .SwScreen .SwPhoneMoreBelow::after {
    content: "More below \25BE";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 3;
    padding: 22px 0 6px;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), var(--sw-phone-fade, #fff) 70%);
    color: var(--sw-quiet);
    font-size: 11px;
    font-weight: 600;
    text-align: center;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    #SettingsDialogContent .SwScreen .SwPhonePulse {
        animation: none;
        outline: 3px solid var(--sw-pulse, #f5a524);
    }
}

/* A setting a screen lists but does not change - its value as words, where the control would be. */
.SwRailTable td.SwReadOnlyValue {
    color: var(--sw-quiet);
}