/* ---------------------------------------------------------------------------
   SPIKE - Util.Windows: Settings screens as movable, resizable windows.
   See Scheduler-MultiWindow-Spike.md and Scripts/Utils/Util.Windows.js.

   Each window is a clone of #SettingWrapperDialog, so every rule written for the modal
   (title bar, content pane, footer, Dark Mode's Chrome-Neutral overrides) already styles it.
   This file only takes away what makes it a modal - the fixed 80%-wide, 5%-down placement and
   the 650px content pane - and adds the window furniture.

   Geometry comes from custom properties Util.Windows sets inline, applied with !important at
   id specificity: several screens add a class to the dialog that sizes it with !important of
   its own (.SettingWrapperSmall, .SalesTaskDialogWrapper...), and in a window the user's own
   size wins.
   --------------------------------------------------------------------------- */

#TotmWindowLayer > .TotmWindow {
    position: fixed;
    left: var(--mw-left) !important;
    top: var(--mw-top) !important;
    width: var(--mw-w) !important;
    height: var(--mw-h) !important;
    max-height: none !important;
    min-width: 0 !important;
    margin: 0 !important;
    transform: none !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
    transition: box-shadow var(--totm-motion, 120ms) ease;
}

/* The focused window lifts; the others sit back a little, as on a desktop. */
#TotmWindowLayer > .TotmWindow.TotmWindowFocused {
    box-shadow: var(--totm-shadow-dialog);
}

#TotmWindowLayer > .TotmWindow:not(.TotmWindowFocused) > .SectionHeading {
    filter: saturate(0.55);
    opacity: 0.92;
}

#TotmWindowLayer > .TotmWindow.TotmWindowMinimised {
    display: none !important;
}

#TotmWindowLayer > .TotmWindow.TotmWindowMaximised {
    border-radius: 0;
}

/* The content pane fills whatever the window is, rather than its fixed 650px. Id specificity
   twice over, so it also beats .SettingsDialogSmall and .StopWorkChecklistDialogWrapper's own
   !important heights. */
#TotmWindowLayer #SettingsDialogContent {
    height: auto !important;
    max-height: none !important;
    min-height: 0 !important;
    flex: 1 1 auto;
}

/* ---- Title bar: drag handle and window controls ---- */

/* One row that cannot wrap, laid out with flex rather than the modal's floats: the title takes
   whatever room is left and ellipsises; the screen's own buttons, the "?" and the window controls
   keep their size, in that order, at the right. The modal floated the screen's buttons with
   `width: 120px; margin-right: 40%` (built around the Batch screens), and in a window narrower than
   ~700px that float wrapped below the 40px bar and was clipped - the batch screen's title-bar button
   simply vanished. In a flex row floats and that margin no longer apply. */
#TotmWindowLayer > .TotmWindow > .SectionHeading {
    cursor: move;
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
}

    #TotmWindowLayer > .TotmWindow > .SectionHeading h2 {
        order: 0;
        flex: 1 1 auto;
        min-width: 0;
        max-width: none;
        float: none;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Id specificity twice, to beat #SettingsDialogHeaderButtonContainer and its
       .SettingsDialogHeaderButtonsRight modifier in Scheduler.css. */
    #TotmWindowLayer #SettingsDialogHeaderButtonContainer {
        order: 1;
        flex: 0 0 auto;
        float: none;
        width: auto;
        height: auto;
        margin: 0 4px 0 8px;
        display: flex;
        align-items: center;
        gap: 4px;
    }

        #TotmWindowLayer #SettingsDialogHeaderButtonContainer:empty {
            display: none;
        }

    #TotmWindowLayer #SettingsDialogHelpContainer {
        order: 2;
        flex: 0 0 auto;
        float: none;
    }

.TotmWindowMaximised > .SectionHeading {
    cursor: default !important;
}

.TotmWindowControls {
    order: 3;
    flex: 0 0 auto;
    float: none;
    display: flex;
    gap: 2px;
    height: 40px;
    align-items: center;
    padding: 0 6px 0 4px;
    cursor: default;
}

/* Same translucent chip as the other title-bar buttons (Modern.css section 2), so it reads
   on the brand-blue bar and on Dark Mode's graphite one alike. */
.TotmWindowControl {
    width: 30px;
    height: 28px;
    padding: 0;
    border: none;
    border-radius: 4px;
    background-color: transparent;
    color: #fff;
    font-size: 13px;
    line-height: 28px;
    cursor: pointer;
}

    .TotmWindowControl:hover {
        background-color: rgba(255, 255, 255, 0.22);
    }

    .TotmWindowControl:last-child:hover {
        background-color: #c62828;
    }

    .TotmWindowControl:focus-visible {
        outline: 2px solid #fff;
        outline-offset: -2px;
    }

/* ---- Resize handles: thin strips just inside each edge, squares at the corners ---- */

.TotmWindowResize {
    position: absolute;
    z-index: 5;
}

.TotmWindowMaximised > .TotmWindowResize {
    display: none;
}

.TotmWindowResize-n,
.TotmWindowResize-s {
    left: 10px;
    right: 10px;
    height: 6px;
    cursor: ns-resize;
}

.TotmWindowResize-e,
.TotmWindowResize-w {
    top: 10px;
    bottom: 10px;
    width: 6px;
    cursor: ew-resize;
}

.TotmWindowResize-n { top: 0; }
.TotmWindowResize-s { bottom: 0; }
.TotmWindowResize-e { right: 0; }
.TotmWindowResize-w { left: 0; }

.TotmWindowResize-ne,
.TotmWindowResize-nw,
.TotmWindowResize-se,
.TotmWindowResize-sw {
    width: 12px;
    height: 12px;
}

.TotmWindowResize-ne { top: 0; right: 0; cursor: nesw-resize; }
.TotmWindowResize-sw { bottom: 0; left: 0; cursor: nesw-resize; }
.TotmWindowResize-nw { top: 0; left: 0; cursor: nwse-resize; }
.TotmWindowResize-se { bottom: 0; right: 0; cursor: nwse-resize; }

/* While dragging, nothing under the pointer (an iframe, a text field) gets to steal the moves,
   and nothing gets text-selected. */
body.TotmWindowDragging {
    user-select: none;
}

    body.TotmWindowDragging iframe {
        pointer-events: none;
    }

/* ---- Taskbar: one chip per open window ---- */

#TotmWindowTaskbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    height: 36px;
    /* Above every window (600 + n), below the hamburger scrim and menu (880/900). */
    z-index: 860;
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 0 8px;
    box-sizing: border-box;
    background-color: rgba(255, 255, 255, 0.94);
    border-top: 1px solid var(--totm-border-strong, #c8c8c8);
    box-shadow: 0 -2px 6px rgba(0, 0, 0, 0.06);
    overflow-x: auto;
}

.TotmWindowChip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: 0 1 auto;
    min-width: 90px;
    max-width: 220px;
    height: 26px;
    padding: 0 6px 0 10px;
    border: 1px solid var(--totm-border, #dcdcdc);
    border-radius: 4px;
    background-color: #fff;
    color: var(--totm-text, #222);
    font-family: var(--totm-font, inherit);
    font-size: var(--totm-fs-sm, 13px);
    cursor: pointer;
}

    .TotmWindowChip:hover {
        border-color: var(--totm-brand, #1976D2);
    }

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

.TotmWindowChipActive {
    background-color: var(--totm-brand-tint, #E8F1FB);
    border-color: var(--totm-brand, #1976D2);
    color: var(--totm-brand-ink, #0C447C);
    font-weight: 600;
}

.TotmWindowChipMinimised {
    color: var(--totm-text-muted, #777);
    font-style: italic;
}

.TotmWindowChipClose {
    padding: 0 4px;
    border-radius: 3px;
    font-size: 15px;
    line-height: 18px;
    color: var(--totm-text-muted, #777);
}

    .TotmWindowChipClose:hover {
        background-color: #c62828;
        color: #fff;
    }

/* Dark Mode (Chrome-Neutral): the taskbar is chrome, so it goes graphite like the header. */
.totm-chrome-neutral #TotmWindowTaskbar {
    background-color: var(--totm-chrome-2, #2E3A4B);
    border-top-color: #171e28;
}

.totm-chrome-neutral .TotmWindowChip {
    background-color: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.14);
    color: #e6e9ee;
}

.totm-chrome-neutral .TotmWindowChipActive {
    background-color: rgba(255, 255, 255, 0.22);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

.totm-chrome-neutral .TotmWindowChipMinimised,
.totm-chrome-neutral .TotmWindowChipClose {
    color: #aab3c0;
}

/* ---- Beating the global button rule ----
   Scheduler.css styles every <button> brand blue with !important (background, colour, padding,
   weight, radius), so the chips and title-bar controls restate theirs the same way. Kept in one
   block at the end so the rules above read as the intended design. */

#TotmWindowTaskbar .TotmWindowChip,
.TotmWindowControls .TotmWindowControl {
    padding: 0 6px 0 10px !important;
    margin: 0 !important;
    border-radius: 4px !important;
    font-weight: 400 !important;
}

.TotmWindowControls .TotmWindowControl {
    padding: 0 !important;
    background-color: transparent !important;
    color: #fff !important;
}

    .TotmWindowControls .TotmWindowControl:hover {
        background-color: rgba(255, 255, 255, 0.22) !important;
    }

    .TotmWindowControls .TotmWindowControl:last-child:hover {
        background-color: #c62828 !important;
    }

#TotmWindowTaskbar .TotmWindowChip {
    background-color: #fff !important;
    color: var(--totm-text, #222) !important;
}

#TotmWindowTaskbar .TotmWindowChip.TotmWindowChipActive {
    background-color: var(--totm-brand-tint, #E8F1FB) !important;
    color: var(--totm-brand-ink, #0C447C) !important;
    font-weight: 600 !important;
}

#TotmWindowTaskbar .TotmWindowChip.TotmWindowChipMinimised {
    color: var(--totm-text-muted, #777) !important;
}

.totm-chrome-neutral #TotmWindowTaskbar .TotmWindowChip {
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #e6e9ee !important;
}

.totm-chrome-neutral #TotmWindowTaskbar .TotmWindowChip.TotmWindowChipActive {
    background-color: rgba(255, 255, 255, 0.22) !important;
    color: #fff !important;
}

.totm-chrome-neutral #TotmWindowTaskbar .TotmWindowChip.TotmWindowChipMinimised {
    color: #aab3c0 !important;
}

/* Show calendar / Show windows and Tile: actions, not windows, so they sit apart at the right-hand
   end. Show calendar is always the first of them, so it carries the push. */
#TotmWindowTaskbar .TotmWindowAction {
    min-width: 0;
    flex: 0 0 auto;
    color: var(--totm-text-muted, #777) !important;
}

#TotmWindowTaskbar .TotmWindowShowCalendar {
    margin-left: auto !important;
}

/* ---- Backdrop: the calendar, job list and job details blur behind open windows ----
   The same scrim and blur #GreyOut puts behind the modal (Modern.css section 4), but starting
   under the header bar - Util.Windows sets `top` to its height - so the hamburger menu stays
   usable for opening the next window. Above the calendar furniture (<= 500), below every window
   (600 + n), the taskbar (860) and the hamburger menu (880/900). Blocks clicks to what is behind
   it, as #GreyOut does; minimise or close the windows to get the calendar back. */
#TotmWindowBackdrop {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    top: 40px;
    z-index: 590;
    background-color: var(--totm-scrim, rgba(15, 23, 42, 0.45));
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

/* ---- Resize grip: the bottom-right corner shows it can be dragged ----
   The usual three diagonal lines, drawn on the corner handle itself so the thing that looks
   draggable is exactly the thing that is. Mid-grey reads on the window's light surface and on
   Dark Mode's #d4d4d4 one alike. Above the footer (z-index 5 on .TotmWindowResize), so it stays
   visible beside the Close button; gone when maximised, with the handles. */
#TotmWindowLayer .TotmWindowResize-se {
    width: 18px;
    height: 18px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M13 1L1 13M13 6L6 13M13 11L11 13' stroke='%23666' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 2px bottom 2px;
    background-size: 14px 14px;
}

    /* Brand blue under the pointer, so it answers back before the drag starts. */
    #TotmWindowLayer .TotmWindowResize-se:hover {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14'%3E%3Cpath d='M13 1L1 13M13 6L6 13M13 11L11 13' stroke='%231976D2' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
    }


/* ===========================================================================
   Screens that fit the window they are in (resize audit, recommendation 4)

   The screens' own narrow layouts are written as @media queries on the BROWSER's width, which was
   right while they only ever lived in the 80%-wide popup: a narrow popup meant a narrow browser.
   A window can be narrow in a wide browser, so here each layout is keyed to the window instead,
   with a container query on the window. The widths are the popup's breakpoints scaled to
   the content pane (popup content = 80% of the browser, less its padding): @media 1100px ->
   @container 860px, 1400 -> 1100, 1500 -> 1180, 900 -> 700.

   All of it is inside #TotmWindowLayer, so the popup is untouched.
   =========================================================================== */

/* The window itself, not the content pane, is the container: a container query cannot style the
   element it measures, and the workbench rules below have to restyle the pane. The pane is the
   window's width less ~10px, which the breakpoints below allow for. */
#TotmWindowLayer > .TotmWindow {
    container: totm-window / inline-size;
}

/* The window's own surface, for anything that has to paint over rows scrolling beneath it. */
#TotmWindowLayer > .TotmWindow {
    --mw-surface: #eee;
}

.totm-chrome-neutral #TotmWindowLayer > .TotmWindow {
    --mw-surface: #d4d4d4;
}

/* ---- Settings workbench: Timesheet Settings, Mobile Home Screen, Mobile Allocated Jobs ----
   SettingsWorkbench.css puts the rail and the results side by side, each scrolling on its own,
   at a browser of 1101px+, and stacks them below that. In a narrow window in a wide browser it
   stayed side by side and the results column was crushed to a sliver. */
@container totm-window (max-width: 860px) {
    #TotmWindowLayer #SettingsDialogContent > .SwScreen > .SwLayout {
        grid-template-columns: minmax(0, 1fr);
        grid-template-rows: none;
        align-items: start;
    }

    /* Undo the side-by-side panes: one page that scrolls, as the popup has below 1101px. */
    #TotmWindowLayer #SettingsDialogContent:has(> .SwScreen > .SwLayout) {
        display: block;
        overflow-y: auto;
    }

    #TotmWindowLayer #SettingsDialogContent > .SwScreen:has(> .SwLayout) {
        display: flex;
        flex-direction: column;
    }

    #TotmWindowLayer #SettingsDialogContent .SwScreen .SwRail,
    #TotmWindowLayer #SettingsDialogContent .SwScreen .SwResults {
        overflow: visible;
    }

    #TotmWindowLayer #SettingsDialogContent .SwScreen .SwResults > .TssFigures {
        position: static;
        box-shadow: none;
    }
}

/* The phone and "why each button/part is there" side by side need ~620px of results column. */
@container totm-window (max-width: 1100px) {
    #TotmWindowLayer .MhsStage,
    #TotmWindowLayer .MjsStage {
        grid-template-columns: minmax(0, 1fr);
        justify-items: start;
    }
}

@container totm-window (max-width: 1180px) {
    #TotmWindowLayer .TssMobileRow {
        grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    }
}

/* Timesheet Settings' example timesheet sits in its own sideways scroller (.TssScroll); in a
   narrower column its cells wrapped word by word ("Mon / 12/10") instead. One line each, and the
   scroller does its job. */
#TotmWindowLayer .TssScroll .TssTable td {
    white-space: nowrap;
}

/* Completed Forms' type filter grows to its longest form name (650px+ on this tenant), so it
   pushed the filter row off the side of any window narrower than that. */
#TotmWindowLayer .CompletedFormsFilterBlock {
    max-width: 100%;
    min-width: 0;
}

    #TotmWindowLayer .CompletedFormsFilterBlock select {
        max-width: 100%;
    }

/* Customer History's forms, and the PO email panes (same reasoning, CustomerHistory.css and
   Scheduler.css's own @media versions). */
@container totm-window (max-width: 700px) {
    #TotmWindowLayer .ChForm {
        grid-template-columns: 1fr;
    }
}

@container totm-window (max-width: 860px) {
    #TotmWindowLayer .PoePanel {
        flex-direction: column;
    }

    #TotmWindowLayer .PoeDocument {
        flex: 1 1 60%;
        min-height: 300px;
    }

    #TotmWindowLayer .PoeEmail {
        flex: 0 0 auto;
    }
}

/* ---- Forms: label above field ----
   A form here is a .UserTable whose heading is one cell (the form's title - "Edit user: Demo
   User", "New recurring job"), with a label cell and a field cell per row: Add/Edit User,
   Recurring Job, Sales Task. A data list is also a .UserTable, but with a heading cell per column,
   which is how :has() tells them apart. Below 680px the rows stack and the fields take the width,
   instead of fixed-width fields running off the right-hand edge. */
@container totm-window (max-width: 680px) {
    #TotmWindowLayer table.UserTable:has(> thead > td:only-child, > thead > tr > td:only-child),
    #TotmWindowLayer table.UserTable:has(> thead > td:only-child, > thead > tr > td:only-child) > thead,
    #TotmWindowLayer table.UserTable:has(> thead > td:only-child, > thead > tr > td:only-child) > tbody,
    #TotmWindowLayer table.UserTable:has(> thead > td:only-child, > thead > tr > td:only-child) > tbody > tr,
    #TotmWindowLayer table.UserTable:has(> thead > td:only-child, > thead > tr > td:only-child) > tbody > tr > td {
        display: block;
        width: auto;
        box-sizing: border-box;
    }

    /* Rows hidden by the screen (an inline display: none) stay hidden - inline beats the rule above. */

    #TotmWindowLayer table.UserTable:has(> thead > td:only-child, > thead > tr > td:only-child) > tbody > tr > td:first-child:not(:only-child) {
        padding-bottom: 0;
        border-bottom: none;
        font-weight: 600;
    }

    #TotmWindowLayer table.UserTable:has(> thead > td:only-child, > thead > tr > td:only-child) > tbody > tr > td :is(input:not([type=checkbox]):not([type=radio]):not([type=button]):not([type=submit]):not([type=file]):not([type=color]), select, textarea) {
        width: 100% !important;
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* Company Info's rows (Util.ElementHelper): a 250px label and a 450px field side by side. */
@container totm-window (max-width: 740px) {
    #TotmWindowLayer .ElementField {
        display: flex !important;
        flex-wrap: wrap;
        align-items: center;
        gap: 4px 6px;
    }

    #TotmWindowLayer .ElementField > label {
        flex: 1 0 100%;
        width: auto !important;
        font-weight: 600;
    }

    #TotmWindowLayer .ElementField > input,
    #TotmWindowLayer .ElementField > select {
        flex: 1 1 0;
        min-width: 0;
        width: auto !important;
    }

    #TotmWindowLayer .ElementField > button {
        flex: 0 0 auto;
    }
}

/* Settings (View.ModuleConfiguration): each setting is a row of name | what it does | control.
   Narrow, the row becomes a card - name and control on top, what it does underneath - rather than
   the description being squeezed to a few words a line and the control pushed off the edge. */
@container totm-window (max-width: 700px) {
    #TotmWindowLayer #ModuleConfigurationScreen > table.UserTable > tbody > tr:has(> td:nth-child(3)) {
        display: grid;
        grid-template-columns: minmax(0, 1fr) auto;
        column-gap: 10px;
        align-items: center;
    }

    #TotmWindowLayer #ModuleConfigurationScreen > table.UserTable > tbody > tr:has(> td:nth-child(3)) > td:nth-child(1) {
        grid-column: 1;
        grid-row: 1;
        font-weight: 600;
        border-bottom: none;
    }

    #TotmWindowLayer #ModuleConfigurationScreen > table.UserTable > tbody > tr:has(> td:nth-child(3)) > td:nth-child(2) {
        grid-column: 1 / -1;
        grid-row: 2;
        padding-top: 0;
    }

    #TotmWindowLayer #ModuleConfigurationScreen > table.UserTable > tbody > tr:has(> td:nth-child(3)) > td:nth-child(3) {
        grid-column: 2;
        grid-row: 1;
        border-bottom: none;
    }
}

/* ---- Data lists: scroll sideways, but stay readable ----
   A list with a column per heading (Labour Codes, Products, Job Statuses, ERP Transaction Audit,
   Completed Forms...) keeps its columns and scrolls sideways when the window is narrower than it.
   Its heading row already stays put going down (Modern.css); here the first column - the code or
   name that says which row is which - stays put going across, headings stay on one line, and
   fields in the rows keep a usable width, so the table scrolls rather than squashing them to
   a few characters. */
@container totm-window (max-width: 1000px) {
    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > thead td,
    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > thead > tr > td {
        white-space: nowrap;
    }

    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > tbody > tr > td :is(input[type=text], input[type=number], input:not([type]), select) {
        min-width: 70px;
    }

    /* "Assign to customer items..." and friends: one line, so a row is not three lines tall. */
    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > tbody > tr > td button {
        white-space: nowrap;
    }

    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > tbody > tr > td:first-child {
        position: sticky;
        left: 0;
        z-index: 1;
        background-color: var(--mw-surface);
    }

    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > tbody > tr:hover > td:first-child {
        background-color: #ddd;
    }

    /* The corner: stuck both ways, above both the heading row and the first column. */
    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > thead > td:first-child,
    #TotmWindowLayer table.UserTable:has(> thead > td + td, > thead > tr > td + td) > thead > tr > td:first-child {
        left: 0;
        z-index: 3;
    }
}