/* The Timesheet Settings screen's own panels - View.TimesheetSettings,
   Scheduler-TimesheetSettingsScreen-Design.md.

   The frame around them (the intro, the Apply bar, the example bar, the rail, the banner and the
   two scrolling columns) is shared with the other screens that show settings at work, and styled
   in SettingsWorkbench.css. Everything here is prefixed Tss and lives under
   #TimesheetSettingsScreen, so nothing can leak onto another settings window.

   Colours come from the --totm-* tokens in Modern.css where there is one. The five lane colours
   are the badges' own, repeated as custom properties so a panel's edge matches its badge. */

#TimesheetSettingsScreen {
    --tss-mobile: #2e7d32;
    --tss-mobile-tint: #e6f3e7;
    --tss-schedule: #1976d2;
    --tss-schedule-tint: #e8f1fb;
    --tss-erp: #b26a00;
    --tss-erp-tint: #fbf0df;
    --tss-warn: #a15c00;
    --tss-warn-tint: #fbf0df;
    --tss-refused: #a12;
    --tss-refused-tint: #fbe9e7;
    --tss-quiet: var(--totm-text-muted, #5f6368);
    --tss-line: var(--totm-border, #e3e5e9);
    --tss-line-strong: var(--totm-border-strong, #c9ccd1);
    --tss-surface: #f6f7f9;
}

#TimesheetSettingsScreen h3 {
    margin: 0;
    font-size: 15px;
}

.TssQuiet {
    color: var(--tss-quiet);
}

.TssNothing {
    padding: 14px;
    background: var(--tss-surface);
    border-radius: 6px;
    color: var(--tss-quiet);
}

.TssFigures {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    border: 1px solid var(--tss-line);
    border-radius: 6px;
    background: #fff;
}

.TssFigures > div {
    padding: 10px 14px;
    border-left: 1px solid var(--tss-line);
}

.TssFigures > div:first-child {
    border-left: 0;
}

.TssFigureLabel {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--tss-quiet);
}

.TssFigureValue {
    font-size: 22px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.TssFigureUnder {
    font-size: 12px;
    color: var(--tss-quiet);
}

/* A figure the what-if changed: what the saved settings give, struck, then what it gives now. */
.TssFigureWas {
    margin-right: 6px;
    font-size: 15px;
    font-weight: 500;
    color: var(--tss-quiet);
    text-decoration: line-through;
}

.TssFigureArrow {
    margin-right: 6px;
    font-size: 15px;
    color: var(--tss-quiet);
}

.TssFigures > div.TssFigureChanged {
    background: var(--sw-schedule-tint, #e8f1fb);
}

/* Side by side (SettingsWorkbench.css), the figures stay at the top of the results while the panels
   scroll beneath them: what a change did to the hours is in sight wherever its panel is. */
@media (min-width: 1101px) and (min-height: 620px) {
    @supports selector(:has(*)) {
        #SettingsDialogContent .SwScreen .SwResults > .TssFigures {
            position: sticky;
            top: 0;
            z-index: 2;
            box-shadow: 0 6px 8px -6px rgba(16, 24, 40, 0.25);
        }
    }
}

.TssDifferent {
    color: var(--tss-warn);
    font-weight: 600;
}

.TssTimeline {
    display: flex;
    padding: 12px 14px;
    border: 1px solid var(--tss-line);
    border-radius: 6px;
    background: #fff;
    overflow-x: auto;
}

.TssMoment {
    position: relative;
    flex: 1 1 0;
    min-width: 150px;
    padding-right: 10px;
}

.TssMoment::before {
    content: "";
    position: absolute;
    left: 6px;
    right: 0;
    top: 5px;
    height: 2px;
    background: var(--tss-line-strong);
}

.TssMoment:last-child::before {
    display: none;
}

.TssDot {
    position: relative;
    width: 12px;
    height: 12px;
    margin-bottom: 6px;
    border: 2px solid var(--tss-line-strong);
    border-radius: 50%;
    background: #fff;
}

.TssMomentMobile .TssDot {
    border-color: var(--tss-mobile);
    background: var(--tss-mobile);
}

.TssMomentSchedule .TssDot {
    border-color: var(--tss-schedule);
    background: var(--tss-schedule);
}

.TssMomentErp .TssDot {
    border-color: var(--tss-erp);
    background: var(--tss-erp);
}

.TssMomentNone .TssDot {
    border-style: dashed;
}

.TssMomentNone .TssWhat {
    color: var(--tss-quiet);
    font-weight: 500;
}

.TssWhen {
    min-height: 15px;
    font-size: 11px;
    color: var(--tss-quiet);
    font-variant-numeric: tabular-nums;
}

.TssWhat {
    font-weight: 600;
}

.TssMomentWhy {
    font-size: 12px;
    color: var(--tss-quiet);
}

/* ---- panels */

.TssMobileRow {
    display: grid;
    grid-template-columns: auto auto minmax(240px, 1fr);
    gap: 12px;
    align-items: start;
}

@media (max-width: 1500px) {
    .TssMobileRow {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

.TssPanel {
    min-width: 0;
    padding: 12px 14px;
    border: 1px solid var(--tss-line);
    border-left: 4px solid var(--tss-line-strong);
    border-radius: 6px;
    background: #fff;
}

.TssPanelMobile {
    border-left-color: var(--tss-mobile);
}

.TssPanelSchedule {
    border-left-color: var(--tss-schedule);
}

.TssPanelErp {
    border-left-color: var(--tss-erp);
}

/* The panels the last change reached. The banner names them; this is the same answer on the panel
   itself, for when it has just been scrolled into view. */
.TssPanel.TssPanelMoved {
    /* Drawn inside the panel: a ring outside it is clipped by the column it scrolls in. The left
       edge keeps its lane colour. */
    border-top-color: var(--tss-schedule);
    border-right-color: var(--tss-schedule);
    border-bottom-color: var(--tss-schedule);
    box-shadow: inset 0 0 0 1px var(--tss-schedule);
}

/* The last answer, while the next is on its way. */
.TssPanel.TssUpdating {
    opacity: 0.55;
}

.TssPanelHead {
    display: flex;
    gap: 10px;
    align-items: baseline;
    justify-content: space-between;
    flex-wrap: wrap;
    margin-bottom: 10px;
    font-size: 12px;
    color: var(--tss-quiet);
}

.TssLaneName {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.TssPanelMobile .TssLaneName {
    color: var(--tss-mobile);
}

.TssPanelSchedule .TssLaneName {
    color: var(--tss-schedule);
}

.TssPanelErp .TssLaneName {
    color: var(--tss-erp);
}

.TssUnder {
    margin: 8px 0 0;
    font-size: 12px;
    color: var(--tss-quiet);
}

/* ---- the phone sketches. Sketches, not the Mobile app: see the note at the top of the view. */

.TssPhone {
    width: 250px;
    max-width: 100%;
    border: 2px solid var(--tss-line-strong);
    border-radius: 16px;
    background: var(--tss-surface);
    overflow: hidden;
    font-size: 12px;
}

.TssPhoneBar {
    padding: 7px;
    background: #1f2a37;
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.TssPhoneBody {
    display: grid;
    gap: 7px;
    padding: 9px;
}

.TssPair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.TssFieldLabel {
    margin-bottom: 1px;
    font-size: 10px;
    color: var(--tss-quiet);
}

.TssFieldValue {
    min-height: 24px;
    padding: 4px 6px;
    border: 1px solid var(--tss-line-strong);
    border-radius: 5px;
    background: #fff;
    font-variant-numeric: tabular-nums;
    overflow-wrap: anywhere;
}

.TssFieldValue.TssTextArea {
    min-height: 38px;
    font-size: 11px;
}

.TssFieldValue.TssEmpty {
    color: var(--tss-quiet);
    font-style: italic;
}

.TssFieldUnder {
    font-size: 10px;
    color: var(--tss-quiet);
}

.TssRequired {
    color: var(--tss-refused);
    font-weight: 700;
}

.TssBox,
.TssCard {
    display: grid;
    gap: 4px;
    padding: 6px 7px;
    border: 1px solid var(--tss-line);
    border-radius: 6px;
    background: #fff;
}

.TssBoxTitle {
    font-size: 11px;
    font-weight: 600;
}

.TssLine {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    font-variant-numeric: tabular-nums;
}

.TssTick {
    display: flex;
    gap: 6px;
    align-items: center;
    font-weight: 500;
}

.TssTickBox {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 14px;
    height: 14px;
    border: 1.5px solid var(--tss-line-strong);
    border-radius: 3px;
    font-size: 10px;
    color: #fff;
}

.TssTickBox.TssTicked {
    border-color: var(--tss-mobile);
    background: var(--tss-mobile);
}

/* Where a section would be, and the setting that is keeping it away. */
.TssMissing {
    padding: 4px 7px;
    border: 1px dashed var(--tss-line-strong);
    border-radius: 6px;
    font-size: 11px;
    color: var(--tss-quiet);
}

.TssRefused {
    padding: 6px 8px;
    border-radius: 6px;
    background: var(--tss-refused-tint);
    color: var(--tss-refused);
    font-weight: 500;
}

.TssPhoneButton {
    padding: 7px;
    border-radius: 6px;
    background: var(--tss-mobile);
    color: #fff;
    font-weight: 600;
    text-align: center;
}

.TssStatus {
    align-self: flex-start;
    padding: 0 7px;
    border-radius: 9px;
    background: var(--tss-warn-tint);
    color: var(--tss-warn);
    font-size: 10px;
    font-weight: 600;
    white-space: nowrap;
}

.TssStatus.TssStatusSent {
    background: var(--tss-mobile-tint);
    color: var(--tss-mobile);
}

/* ---- why */

.TssSteps {
    display: grid;
    gap: 7px;
    margin: 0;
    padding: 0;
    list-style: none;
    counter-reset: tss-step;
}

.TssSteps li {
    display: grid;
    grid-template-columns: 20px minmax(0, 1fr);
    gap: 8px;
    counter-increment: tss-step;
}

.TssSteps li::before {
    content: counter(tss-step);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    border: 1px solid var(--tss-line-strong);
    border-radius: 50%;
    font-size: 11px;
    color: var(--tss-quiet);
}

.TssStepBy {
    display: block;
    font-size: 11px;
    color: var(--tss-quiet);
}

.TssSteps li.TssStepWarn {
    color: var(--tss-warn);
}

.TssSteps li.TssStepWarn::before {
    border-color: var(--tss-warn);
    color: var(--tss-warn);
}

/* ---- the two tables */

.TssScroll {
    overflow-x: auto;
}

.TssTable {
    width: 100%;
    border-collapse: collapse;
    font-size: 12.5px;
}

.TssTable th {
    padding: 5px 8px;
    border-bottom: 1px solid var(--tss-line-strong);
    font-size: 11px;
    font-weight: 600;
    color: var(--tss-quiet);
    text-align: left;
    white-space: nowrap;
}

.TssTable td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--tss-line);
    vertical-align: top;
    font-variant-numeric: tabular-nums;
}

.TssTable .TssNumber {
    text-align: right;
}

.TssTable tfoot td {
    border-bottom: 0;
    font-weight: 600;
}

.TssDescription {
    min-width: 220px;
    overflow-wrap: anywhere;
}

.TssFromProduct {
    color: var(--tss-quiet);
    font-style: italic;
}

.TssLength {
    margin-left: 6px;
    font-size: 10.5px;
    color: var(--tss-quiet);
    white-space: nowrap;
}

.TssLength.TssLengthFull {
    color: var(--tss-warn);
    font-weight: 600;
}

.TssKind {
    padding: 1px 6px;
    border-radius: 4px;
    background: var(--tss-erp-tint);
    color: var(--tss-erp);
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
}

.TssKind.TssKindNote,
.TssKind.TssKindLunch {
    background: var(--tss-surface);
    color: var(--tss-quiet);
}

.TssToolbar {
    display: flex;
    gap: 6px;
    align-items: center;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.TssButton {
    padding: 2px 9px;
    border: 1px solid var(--tss-line-strong);
    border-radius: 5px;
    background: var(--tss-surface);
    font-size: 12px;
}

/* Something a setting has added to the screen. */
.TssButton.TssButtonAdded {
    border-color: var(--tss-schedule);
    background: var(--tss-schedule-tint);
    color: var(--tss-schedule);
    font-weight: 600;
}

.TssToolbarRight {
    margin-left: auto;
}

.TssSigned {
    color: var(--tss-mobile);
    font-weight: 700;
}

.TssWarning {
    margin-top: 8px;
    padding: 7px 10px;
    border-radius: 6px;
    background: var(--tss-warn-tint);
    color: var(--tss-warn);
}

.TssSent {
    margin-top: 8px;
    padding: 8px 10px;
    border-radius: 6px;
    background: var(--tss-surface);
}

.TssSentHead {
    display: flex;
    gap: 8px;
    justify-content: space-between;
    flex-wrap: wrap;
    font-size: 11px;
    font-weight: 600;
    color: var(--tss-quiet);
}