/*
 * Staff window: staff pages shown inside the current page.
 * Behaviour is in ../js/staff_window.js; pages use ../staff_window.php.
 *
 * Everything here is scoped to .staff-window, so none of it reaches the page
 * underneath. Classes starting sw- are for the pages shown in the window:
 * sw-field, sw-label, sw-hint, sw-required, sw-actions, sw-button, sw-notice.
 *
 * In the admin pages the window is a sheet hanging from the top of the browser
 * window; staff_window.js slides it down and back up.
 *
 * The window is not in the browser's modal layer (see staff_window.js), so it
 * is placed and stacked here: the backdrop at 1000 and the window at 1001.
 * Pop-ups from date pickers and editors stack above that.
 */

html.staff-window-open {
    overflow: hidden;
}

.staff-window,
.staff-window-dropdown {
    --sw-blue: #0064a4;
    --sw-blue-dark: #004c7d;
    --sw-ink: #1c2a39;
    --sw-muted: #5a6a7b;
    --sw-line: #dbe2e9;
    --sw-field-line: #b8c3ce;
    --sw-surface: #ffffff;
    --sw-subtle: #f3f6f9;
    --sw-body: #f5f5f5;
    --sw-hover: #e6eaee;
    --sw-focus: rgba(0, 100, 164, 0.2);
    --sw-red: #b42318;
    --sw-red-dark: #912018;

    box-sizing: border-box;
    color: var(--sw-ink);
    font-family: "Source Sans Pro", "Helvetica Neue", Arial, sans-serif;
    font-size: 15px;
    line-height: 1.25;
    text-align: left;
}

.staff-window *,
.staff-window *::before,
.staff-window *::after {
    box-sizing: border-box;
}

/* The window */

.staff-window-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1000;
    background: rgba(15, 23, 42, 0.55);
}

.staff-window-backdrop[hidden] {
    display: none;
}

dialog.staff-window {
    --staff-window-width: 720px;

    position: fixed;
    top: 0;
    right: 0;
    bottom: auto;
    left: 0;
    z-index: 1001;
    width: min(var(--staff-window-width), calc(100vw - 32px));
    max-width: none;
    max-height: calc(100vh - 24px);
    max-height: calc(100dvh - 24px);
    margin: 0 auto;
    padding: 0;
    overflow: hidden;
    border: 0;
    border-radius: 0 0 12px 12px;
    background: var(--sw-surface);
    box-shadow: 0 24px 64px rgba(15, 23, 42, 0.3), 0 2px 8px rgba(15, 23, 42, 0.12);
}

dialog.staff-window[open] {
    display: flex;
    flex-direction: column;
}

.staff-window__header {
    position: relative;
    display: flex;
    flex: none;
    align-items: center;
    gap: 12px;
    padding: 9px 12px 9px 22px;
    border-top: 4px solid var(--sw-blue);
    border-bottom: 1px solid var(--sw-line);
    background: var(--sw-surface);
}

.staff-window__header::after {
    position: absolute;
    bottom: -1px;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--sw-blue);
    content: "";
}

.staff-window--busy .staff-window__header::after {
    animation: staff-window-progress 1.1s ease-in-out infinite;
}

@keyframes staff-window-progress {
    0% {
        left: 0;
        width: 0;
    }
    50% {
        left: 20%;
        width: 60%;
    }
    100% {
        left: 100%;
        width: 0;
    }
}

.staff-window .staff-window__title {
    flex: 1 1 auto;
    margin: 0;
    padding: 0;
    color: var(--sw-ink);
    font-family: inherit;
    font-size: 19px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
    overflow-wrap: anywhere;
}

.staff-window .staff-window__title b,
.staff-window .staff-window__title strong {
    font-weight: 700;
}

.staff-window__close {
    display: inline-flex;
    flex: none;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    background: transparent;
    color: var(--sw-muted);
    cursor: pointer;
}

.staff-window__close:hover {
    background: var(--sw-subtle);
    color: var(--sw-ink);
}

.staff-window__close:focus-visible {
    outline: 3px solid var(--sw-focus);
    outline-offset: 0;
}

.staff-window__close svg {
    width: 20px;
    height: 20px;
}

/* The body is off-white, a shade darker than the header and the fields, so the fields stand out. */
.staff-window__body {
    flex: 1 1 auto;
    min-height: 120px;
    padding: 20px 22px 22px;
    background-color: var(--sw-body);
    overflow: auto;
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
}

.staff-window--busy .staff-window__body {
    cursor: progress;
}

.staff-window__loading {
    margin: 0;
    color: var(--sw-muted);
}

/* A page opened directly, outside the window */

body.staff-window-page {
    margin: 0;
    background: #eef2f6;
}

.staff-window--page {
    max-width: 760px;
    margin: 32px auto;
    overflow: hidden;
    border-radius: 12px;
    background: var(--sw-surface);
    box-shadow: 0 8px 30px rgba(15, 23, 42, 0.12);
}

/* On its own page there is no window to close, so Cancel and Save & Close have nothing to do. */
.staff-window--page .sw-actions [data-staff-window-close],
.staff-window--page .sw-actions [data-staff-window-save][data-staff-window-then-close] {
    display: none;
}

/* Phones: the window fills the screen */

@media (max-width: 600px) {
    dialog.staff-window {
        width: 100vw;
        height: 100vh;
        height: 100dvh;
        max-height: none;
        margin: 0;
        border-radius: 0;
    }

    .staff-window__header {
        padding-left: 16px;
    }

    .staff-window__body {
        padding: 16px;
    }

    .staff-window--page {
        margin: 0;
        border-radius: 0;
        box-shadow: none;
    }
}

/* Tabs (the ul.tabs and div.panes markup the old pages already use) */

.staff-window .staff-window-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 22px;
    margin: 0 0 20px;
    padding: 0;
    border: 0;
    border-bottom: 1px solid var(--sw-line);
    background: none;
    list-style: none;
}

.staff-window .staff-window-tabs[hidden],
.staff-window .staff-window-pane[hidden] {
    display: none;
}

.staff-window .staff-window-tabs li {
    float: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
    list-style: none;
}

.staff-window .staff-window-tabs a {
    display: block;
    margin: 0 0 -1px;
    padding: 8px 1px 9px;
    border: 0;
    border-bottom: 3px solid transparent;
    border-radius: 0;
    background: none;
    color: var(--sw-muted);
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    text-decoration: none;
    white-space: nowrap;
}

.staff-window .staff-window-tabs a:hover {
    color: var(--sw-ink);
}

.staff-window .staff-window-tabs a[aria-selected="true"] {
    border-bottom-color: var(--sw-blue);
    color: var(--sw-blue);
}

.staff-window .staff-window-tabs a:focus-visible {
    outline: 3px solid var(--sw-focus);
    outline-offset: 2px;
}

.staff-window .staff-window-panes,
.staff-window .staff-window-pane {
    margin: 0;
    padding: 0;
    border: 0;
    background: none;
}

/* Text and fields */

.staff-window p {
    margin: 0 0 12px;
}

.staff-window .sw-field {
    margin: 0 0 12px;
}

.staff-window .sw-label,
.staff-window .sw-field > label:not(.sw-choice) {
    display: block;
    margin: 0 0 4px;
    color: var(--sw-ink);
    font-size: 14px;
    font-weight: 600;
    line-height: 1.25;
}

.staff-window .sw-required {
    color: var(--sw-red);
}

.staff-window .sw-hint {
    margin: 6px 0 0;
    color: var(--sw-muted);
    font-size: 13px;
}

.staff-window input[type="text"],
.staff-window input[type="email"],
.staff-window input[type="number"],
.staff-window input[type="date"],
.staff-window input[type="password"],
.staff-window input[type="search"],
.staff-window input[type="tel"],
.staff-window input[type="url"],
.staff-window input:not([type]),
.staff-window select,
.staff-window textarea {
    display: block;
    width: 100%;
    max-width: 100%;
    min-height: 32px;
    margin: 0;
    padding: 3px 10px;
    border: 1px solid var(--sw-field-line);
    border-radius: 8px;
    background-color: #ffffff;
    box-shadow: none;
    color: var(--sw-ink);
    font-family: inherit;
    font-size: 16px;
    line-height: 1.25;
}

/* A text area starts a little under two lines tall, enough to show it takes more than one line, with a handle to
   pull it taller; a text area that is the whole of its tab (class sw-textarea-tall) keeps its rows. */
.staff-window textarea {
    height: 44px;
    min-height: 44px;
    resize: vertical;
}

.staff-window textarea.sw-textarea-tall {
    height: auto;
    min-height: 140px;
}

/* An iPad or iPhone draws a date field its own way: the date centered, and the field wider than the space it is
   given. These keep it in line with the other fields. (-webkit-touch-callout is supported only there.) */
@supports (-webkit-touch-callout: none) {
    .staff-window input[type="date"] {
        -webkit-appearance: none;
        appearance: none;
        min-width: 0;
    }
}

.staff-window input[type="date"]::-webkit-date-and-time-value {
    text-align: left;
}

/* An element with the hidden attribute stays hidden, whatever display the field styles above give it. */
.staff-window [hidden] {
    display: none !important;
}

/* A list that shows several rows at once is as tall as its rows. The admin stylesheet's field rule
   ("select :not(.gs_modal select)" in css/main.css) also reaches each option and boxes it; here they are plain rows. */
.staff-window select[multiple],
.staff-window select[size] {
    height: auto;
    padding: 4px;
}

.staff-window select option {
    margin: 0;
    padding: 2px 6px;
    border: 0;
    border-radius: 0;
}

.staff-window input[type="file"] {
    display: block;
    max-width: 100%;
    font-family: inherit;
    font-size: 15px;
}

/* The browser's own Browse / Choose File button, dressed as the window's plain buttons, at the height of a field */
.staff-window input[type="file"]::file-selector-button {
    margin: 0 10px 0 0;
    padding: 4px 14px;
    border: 1px solid var(--sw-field-line);
    border-radius: 8px;
    background-color: #ffffff;
    color: var(--sw-ink);
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.25;
    cursor: pointer;
}

.staff-window input[type="file"]::file-selector-button:hover {
    border-color: var(--sw-blue);
    background-color: var(--sw-subtle);
}

/* Short fields side by side, wrapping onto their own lines when the window is narrow */
.staff-window .sw-columns {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 0 14px;
}

.staff-window .sw-photo {
    display: block;
    max-width: 100%;
    height: auto;
    border: 1px solid var(--sw-line);
    border-radius: 8px;
}

/* A field that can't be changed (the EBS URL of a saved booking system) looks it: a grey box, softer text and a
   cursor that says so. iOS dims a disabled field on its own, so its text colour and opacity are set here too. */
.staff-window input:disabled:is([type="text"], [type="email"], [type="number"], [type="date"], [type="password"], [type="search"], [type="tel"], [type="url"], :not([type])),
.staff-window select:disabled,
.staff-window textarea:disabled {
    border-color: var(--sw-line);
    background-color: var(--sw-subtle);
    color: var(--sw-muted);
    -webkit-text-fill-color: var(--sw-muted);
    opacity: 1;
    cursor: not-allowed;
}

.staff-window input:focus,
.staff-window select:focus,
.staff-window textarea:focus {
    border-color: var(--sw-blue);
    outline: 3px solid var(--sw-focus);
    outline-offset: 0;
    background-color: #ffffff;
}

/* A radio button or check box shows its focus ring only when reached from the keyboard */

.staff-window input[type="radio"]:focus:not(:focus-visible),
.staff-window input[type="checkbox"]:focus:not(:focus-visible) {
    outline: none;
}

/* Radio buttons: a fieldset.sw-field with a legend.sw-label and a label.sw-choice around each button */

.staff-window fieldset.sw-field {
    min-width: 0;
    padding: 0;
    border: 0;
}

.staff-window legend.sw-label {
    padding: 0;
}

.staff-window .sw-choice {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 4px 24px 4px 0;
    font-size: 15px;
    font-weight: 400;
}

.staff-window .sw-choice input {
    width: 18px;
    height: 18px;
    margin: 0;
    accent-color: var(--sw-blue);
}

/* A page not converted yet, shown in a frame inside the window */

.staff-window .staff-window__frame {
    display: block;
    width: 100%;
    height: min(70vh, 640px);
    border: 0;
}

/* An email shown as it will be sent, in a sandboxed frame */

.staff-window .sw-email-preview {
    display: block;
    width: 100%;
    height: min(55vh, 520px);
    border: 1px solid var(--sw-line);
    border-radius: 8px;
    background: #ffffff;
}

/* Text that reports a problem, inside a list of details */

.staff-window .sw-error-text {
    color: var(--sw-red);
    font-weight: 600;
}

/* A short label in colour, such as PRE-ENROLLMENT */

.staff-window .sw-badge {
    display: inline-block;
    margin: 0 0 12px;
    padding: 3px 10px;
    border-radius: 999px;
    background: #7a1fa2;
    color: #ffffff;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.04em;
}

/* Sections of a read-only window, each with a small heading */

.staff-window .sw-section-title {
    margin: 18px 0 8px;
    padding-bottom: 4px;
    border-bottom: 1px solid var(--sw-line);
    color: var(--sw-ink);
    font-size: 15px;
    font-weight: 700;
}

/* A field with a small button beside it */

.staff-window .sw-inline {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* A rich-text editor (staff_window_editor()); its own parts keep the sizing they were drawn with */

.staff-window .cke_skin_kama,
.staff-window .cke_skin_kama * {
    box-sizing: content-box;
}

/* Messages */

.staff-window .sw-notice {
    margin: 0 0 18px;
    padding: 10px 14px;
    border: 1px solid;
    border-radius: 8px;
    font-size: 15px;
}

.staff-window .sw-notice--success {
    border-color: #b6dfc3;
    background: #edf8f1;
    color: #1a5a32;
}

.staff-window .sw-notice--error {
    border-color: #f1c0bb;
    background: #fdf1f0;
    color: #8c1d14;
}

/* Searchable lists (Select2): one line tall, each choice shown as a tag, matched to the window's fields */
.staff-window .select2-container--default .select2-selection--multiple {
    min-height: 32px;
    border: 1px solid var(--sw-field-line);
    border-radius: 8px;
    background-color: #ffffff;
    cursor: text;
}

.staff-window .select2-container--default.select2-container--focus .select2-selection--multiple,
.staff-window .select2-container--default.select2-container--open .select2-selection--multiple {
    border-color: var(--sw-blue);
    outline: 3px solid var(--sw-focus);
    outline-offset: 0;
}

.staff-window .select2-container--default .select2-selection--multiple .select2-selection__rendered {
    display: block;
    padding: 0 6px 3px;
}

.staff-window .select2-container--default .select2-selection--multiple .select2-selection__choice {
    margin: 3px 6px 0 0;
    padding: 0 8px;
    border: 1px solid #c9d6e3;
    border-radius: 6px;
    background-color: #edf2f7;
    color: var(--sw-ink);
    font-size: 15px;
    line-height: 1.25;
}

.staff-window .select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
    margin-right: 6px;
    color: var(--sw-muted);
    font-weight: 600;
}

.staff-window .select2-container--default .select2-selection--multiple .select2-selection__choice__remove:hover {
    color: var(--sw-ink);
}

.staff-window .select2-container .select2-search--inline .select2-search__field {
    display: inline-block;
    min-height: 0;
    height: 24px;
    margin: 3px 0 0 4px;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    outline: 0;
    box-shadow: none;
    color: var(--sw-ink);
    font-family: inherit;
    font-size: 16px;
}

.staff-window-dropdown .select2-dropdown {
    border-color: var(--sw-field-line);
    border-radius: 8px;
    overflow: hidden;
    font-size: 15px;
}

.staff-window-dropdown .select2-search--dropdown {
    padding: 6px;
}

.staff-window-dropdown .select2-search--dropdown .select2-search__field {
    padding: 4px 8px;
    border: 1px solid var(--sw-field-line);
    border-radius: 6px;
    font-family: inherit;
    font-size: 16px;
}

.staff-window-dropdown .select2-results > .select2-results__options {
    max-height: 260px;
}

.staff-window-dropdown .select2-results__option {
    padding: 5px 10px;
}

.staff-window-dropdown .select2-results__option[aria-selected="true"] {
    background-color: #edf2f7;
    color: var(--sw-muted);
}

.staff-window-dropdown .select2-results__option--highlighted[aria-selected] {
    background-color: var(--sw-blue);
    color: #ffffff;
}

.staff-window .select2-container--default .select2-selection--single {
    height: 32px;
    border: 1px solid var(--sw-field-line);
    border-radius: 8px;
    background-color: #ffffff;
}

.staff-window .select2-container--default.select2-container--focus .select2-selection--single,
.staff-window .select2-container--default.select2-container--open .select2-selection--single {
    border-color: var(--sw-blue);
    outline: 3px solid var(--sw-focus);
    outline-offset: 0;
}

.staff-window .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding: 0 48px 0 10px;
    color: var(--sw-ink);
    font-size: 16px;
    line-height: 30px;
}

.staff-window .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: var(--sw-muted);
}

.staff-window .select2-container--default .select2-selection--single .select2-selection__arrow {
    top: 0;
    right: 6px;
    height: 30px;
}

.staff-window .select2-container--default .select2-selection--single .select2-selection__clear {
    margin-right: 4px;
    color: var(--sw-muted);
    font-weight: 600;
}

.staff-window .sw-legacy label > .select2-container {
    display: block;
    margin-top: 4px;
    font-weight: 400;
}

/* Read-only windows: label and value pairs, simple tables, numbered lists */

/* Labels sit right-aligned in a column of set width, so that lists stacked in one window line their values up */
.staff-window .sw-details {
    display: grid;
    grid-template-columns: 170px minmax(0, 1fr);
    gap: 6px 32px;
    margin: 0 0 20px;
    line-height: 1.25;
}

.staff-window .sw-details dt {
    margin: 0;
    color: var(--sw-muted);
    font-weight: 600;
    text-align: right;
}

.staff-window .sw-details dd {
    margin: 0;
    color: var(--sw-ink);
}

.staff-window .sw-section {
    margin: 24px 0 10px;
    color: var(--sw-ink);
    font-size: 16px;
    font-weight: 700;
}

.staff-window .sw-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 15px;
}

.staff-window .sw-table th,
.staff-window .sw-table td {
    padding: 4px 10px;
    border-bottom: 1px solid var(--sw-line);
    text-align: left;
    vertical-align: top;
}

.staff-window .sw-table th {
    color: var(--sw-muted);
    font-size: 13px;
    font-weight: 600;
}

.staff-window .sw-table .sw-number {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.staff-window .sw-list {
    margin: 0;
    padding-left: 22px;
}

.staff-window .sw-list li {
    margin: 0 0 12px;
}

/* Buttons */

.staff-window .sw-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    gap: 10px;
    margin: 24px 0 0;
    padding: 16px 0 0;
    border-top: 1px solid var(--sw-line);
}

.staff-window .sw-actions__note {
    align-self: center;
    margin: 0 auto 0 0;
    color: var(--sw-muted);
    font-size: 14px;
}

.staff-window .sw-actions__note[hidden] {
    display: none;
}

/* A button kept apart at the left of the bar, such as Delete */
.staff-window .sw-actions__start {
    display: inline-flex;
    order: -1;
    margin: 0 auto 0 0;
}

.staff-window .sw-actions__start + .sw-actions__note,
.staff-window .sw-actions__note ~ .sw-actions__start {
    margin-left: 0;
}

.staff-window .sw-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 42px;
    margin: 0;
    padding: 9px 18px;
    border: 1px solid transparent;
    border-radius: 8px;
    box-shadow: none;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

.staff-window .sw-button--primary {
    background: var(--sw-blue);
    color: #ffffff;
}

.staff-window .sw-button--primary:hover {
    background: var(--sw-blue-dark);
}

.staff-window .sw-button--secondary {
    border-color: var(--sw-field-line);
    background: #ffffff;
    color: var(--sw-ink);
}

.staff-window .sw-button--secondary:hover {
    background: var(--sw-hover);
}

.staff-window .sw-button--plain {
    background: transparent;
    color: var(--sw-ink);
}

.staff-window .sw-button--plain:hover {
    background: var(--sw-hover);
}

.staff-window .sw-button--danger {
    background: var(--sw-red);
    color: #ffffff;
}

.staff-window .sw-button--danger-quiet {
    background: transparent;
    color: var(--sw-red);
}

.staff-window .sw-button--danger-quiet:hover {
    background: #fdf1f0;
}

.staff-window .sw-button--danger:hover {
    background: var(--sw-red-dark);
}

.staff-window .sw-button:focus-visible {
    outline: 3px solid var(--sw-focus);
    outline-offset: 2px;
}

.staff-window .sw-button:disabled {
    opacity: 0.45;
    cursor: default;
}

.staff-window .sw-button--primary:disabled:hover {
    background: var(--sw-blue);
}

.staff-window .sw-button--secondary:disabled:hover {
    background: #ffffff;
}

.staff-window .sw-button--danger:disabled:hover {
    background: var(--sw-red);
}

/* The question asked before unsaved changes are thrown away */

.staff-window__confirm {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    background: rgba(255, 255, 255, 0.72);
}

.staff-window__confirm[hidden] {
    display: none;
}

.staff-window__confirm-box {
    width: min(380px, 100%);
    padding: 20px 20px 18px;
    border: 1px solid var(--sw-line);
    border-radius: 12px;
    background: var(--sw-surface);
    box-shadow: 0 12px 32px rgba(15, 23, 42, 0.2);
}

.staff-window .staff-window__confirm-title {
    margin: 0 0 6px;
    color: var(--sw-ink);
    font-size: 17px;
    font-weight: 600;
}

.staff-window .staff-window__confirm-text {
    margin: 0;
    color: var(--sw-muted);
}

.staff-window__confirm .sw-actions {
    margin-top: 18px;
    padding-top: 0;
    border-top: 0;
}

@media (max-width: 600px) {
    .staff-window .sw-details {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2px;
    }

    .staff-window .sw-details dt {
        text-align: left;
    }

    .staff-window .sw-details dd {
        margin-bottom: 8px;
    }

    .staff-window .sw-actions .sw-button {
        flex: 1 1 auto;
    }

    .staff-window .sw-actions__note {
        flex-basis: 100%;
    }
}

/* Old pop-up content shown in the window as it was built (modal pages with $window_legacy) */

.staff-window .sw-legacy h2 {
    margin: 0 0 14px;
    color: var(--sw-ink);
    font-size: 18px;
    font-weight: 700;
}

.staff-window .sw-legacy label,
.staff-window .sw-legacy .field_name {
    color: var(--sw-ink);
    font-size: 14px;
    font-weight: 600;
}

.staff-window .sw-legacy .pane p {
    margin: 0 0 12px;
}

.staff-window .sw-legacy table {
    border-collapse: collapse;
}

.staff-window .sw-legacy td,
.staff-window .sw-legacy th {
    padding: 4px 6px;
    vertical-align: top;
    text-align: left;
}

.staff-window .sw-legacy input[type="checkbox"],
.staff-window .sw-legacy input[type="radio"] {
    width: 16px;
    height: 16px;
    margin: 0 6px 0 0;
    vertical-align: -2px;
    accent-color: var(--sw-blue);
}

/* Typed fields sit full width beneath their label's text, as in the rebuilt windows. A short number field
   (size 5 or less) stays in the line of text around it. */
.staff-window .sw-legacy input[type="text"][size],
.staff-window .sw-legacy input:not([type])[size] {
    display: block;
    width: 100%;
    max-width: 100%;
    margin: 4px 0 0;
}

.staff-window .sw-legacy input[type="text"]:is([size="1"], [size="2"], [size="3"], [size="4"], [size="5"]) {
    display: inline-block;
    width: 6.5rem;
    margin: 0 6px;
}

/* A short field with its label after it, both at the top: fields of the same width line up
   with each other, however long their labels are. */
.staff-window .sw-field-first {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 6px 14px;
    margin: 0 0 10px;
}

.staff-window .sw-legacy .sw-field-first > input[type="text"] {
    flex: none;
    width: 6.5rem;
    margin: 0;
}

.staff-window .sw-field-first > label {
    min-width: 0;
    margin: 0;
    padding-top: 2px;
}

/* A line with more than one short field (Dependent, then Spouse; a fee, then its type): each field after the
   first sits a little apart from the label before it, and a list is only as wide as its values. */
.staff-window .sw-legacy .sw-field-first > label + input[type="text"],
.staff-window .sw-legacy .sw-field-first > label + select {
    margin-left: 10px;
}

.staff-window .sw-legacy .sw-field-first > select {
    flex: none;
    width: auto;
    margin: 0;
}

/* The dash between a pair of limits (a minimum and a maximum) */
.staff-window .sw-field-first > .sw-dash,
.staff-window .sw-with-note > .sw-dash {
    align-self: center;
    margin: 0 -4px;
    color: var(--sw-muted);
}

/* A small heading inside a field group, over a line of fields */
.staff-window .sw-legacy .sw-subheading {
    margin: 4px 0 6px;
    font-size: 14px;
    font-weight: 600;
}

/* Two columns of short lines inside a column (a long list of options), always side by side */
.staff-window .sw-columns.sw-pair {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 0 14px;
}

/* Three columns of short lines across the whole tab (a long list of options under the two-column part) */
.staff-window .sw-columns.sw-triple {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0 20px;
}

/* Rows in a shorter column keep the same spacing as the longest, so the three line up across. */
.staff-window .sw-columns > .sw-rows {
    align-content: start;
}

/* A button that is only an icon (add a row): round, the icon in the site's blue, filled blue on hover. What it
   does is in its aria-label and title. The icon is an inline SVG drawn with currentColor, so it needs no icon font. */
.staff-window .sw-icon-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    margin: 4px 0;
    padding: 0;
    color: var(--sw-blue);
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    border-radius: 50%;
    box-shadow: 0 1px 2px rgba(28, 42, 57, 0.08);
    cursor: pointer;
    transition: color 0.15s, background-color 0.15s, border-color 0.15s;
}

.staff-window .sw-icon-button:hover {
    color: #ffffff;
    background: var(--sw-blue);
    border-color: var(--sw-blue);
}

.staff-window .sw-icon-button:active {
    background: var(--sw-blue-dark);
    border-color: var(--sw-blue-dark);
}

.staff-window .sw-icon-button:focus-visible {
    outline: 2px solid var(--sw-blue);
    outline-offset: 2px;
}

.staff-window .sw-icon-button svg {
    width: 18px;
    height: 18px;
    fill: none;
    stroke: currentColor;
    stroke-width: 2.25;
    stroke-linecap: round;
}

/* Columns of fields under a text area in the same group (VBS Options) keep some space below the text area. */
.staff-window .sw-legacy .field_details > textarea + .sw-columns {
    margin-top: 16px;
}

/* A block below a tab's two columns keeps the same space above it as the blocks keep between them. */
.staff-window .sw-legacy .staff-window-pane > .two_col + .field_block {
    margin-top: 4px;
}

/* A label holding a field is a block of its own, spaced like the rebuilt windows' fields. */
.staff-window .sw-legacy label:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), > select, > textarea) {
    display: block;
    margin: 0 0 10px;
}

.staff-window .sw-legacy label > input[type="date"],
.staff-window .sw-legacy label > select,
.staff-window .sw-legacy label > textarea {
    margin-top: 4px;
}

/* Check boxes and radio buttons read as options, not as field labels. */
.staff-window .sw-legacy label:has(> input[type="checkbox"]),
.staff-window .sw-legacy label:has(> input[type="radio"]) {
    display: inline-block;
    font-size: 15px;
    font-weight: 400;
}

.staff-window .sw-legacy label:has(> input[type="checkbox"]) > :is(b, strong),
.staff-window .sw-legacy label:has(> input[type="radio"]) > :is(b, strong) {
    font-weight: inherit;
}

.staff-window .sw-legacy label label:has(> input[type="checkbox"]) {
    margin-left: 12px;
}

/* A check box or radio button label that runs onto a second line keeps that line in line with the first line's text
   rather than under the box: the box (16px) and its 6px gap sit in the label's left padding on the first line only.
   Lists of options (.options_list) place their boxes their own way. */
.staff-window .sw-legacy label:has(> input[type="checkbox"]:first-child:not([hidden]), > input[type="radio"]:first-child:not([hidden])):not(.options_list *) {
    padding-left: 22px;
    text-indent: -22px;
}

.staff-window .sw-legacy label:has(> input[type="checkbox"]:first-child:not([hidden]), > input[type="radio"]:first-child:not([hidden])):not(.options_list *) > * {
    text-indent: 0;
}

.staff-window .sw-legacy .field_block {
    margin-bottom: 14px;
    break-inside: avoid;
}

/* A group of fields under its own label (Contact, Address, Options): the label is the group's heading, and a
   rule down the left of the fields shows what the group holds. */
.staff-window .sw-legacy .field_block > label {
    display: block;
    margin: 0 0 8px;
    font-size: 15px;
    font-weight: 700;
}

.staff-window .sw-legacy .field_block > label + br {
    display: none;
}

/* Old pages that flow their content into two columns (class two_col) keep each field whole in one column. */
.staff-window .sw-legacy .two_col > *,
.staff-window .sw-legacy .two_col label {
    break-inside: avoid;
}

/* Two real columns, a div each, the second beneath the first on a narrow screen: fixed (sw-columns sw-halves, on
   Package Group's General tab), or a tab that flows into two columns (two_col) once the window's script has
   split it into columns balanced by height (sw-balanced). Firefox can squeeze the last field of a flowing
   column; a real column can't be squeezed. */
.staff-window .sw-columns.sw-halves,
.staff-window .sw-legacy .two_col.sw-balanced {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
    gap: 0 20px;
    align-items: start;
    column-count: auto;
}

/* The two columns sit a little further apart than the browser's default gap of 1em. */
.staff-window .sw-legacy .two_col {
    column-gap: 20px;
}

/* A group with several sets of fields (one per file to upload, say) spaces the sets apart. */
.staff-window .sw-legacy .field_details + .field_details {
    margin-top: 16px;
}

.staff-window .sw-legacy .field_details {
    padding: 0 0 0 14px;
    border: 0;
    border-left: 1px solid var(--sw-line);
    border-radius: 0;
    background: none;
    box-shadow: none;
}

/* Fields each on one line (class sw-rows): the labels right-aligned in a column as wide as the longest of them,
   each field beside its label. A label holding its field lays out as the two cells of its row. */
.staff-window .sw-rows {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 8px 14px;
    align-items: baseline;
}

.staff-window .sw-legacy .sw-rows > label:has(> input:not([type="checkbox"]):not([type="radio"]):not([type="hidden"]), > select, > textarea, > .sw-with-note) {
    display: contents;
}

.staff-window .sw-legacy .pane > .sw-rows,
.staff-window .sw-legacy .sw-balanced-column > .sw-rows,
.staff-window .sw-legacy .field_details > .sw-rows {
    margin-bottom: 14px;
}

/* Rows inside a group's list of fields sit on the same grid as the fields around them. */
.staff-window .sw-legacy .field_details > div > .sw-rows,
.staff-window .sw-legacy .field_details > .sw-rows {
    margin-top: 2px;
}

.staff-window .sw-rows > .sw-row-label,
.staff-window .sw-rows > label > .field_name {
    justify-self: end;
    width: auto;
    margin: 0;
    padding: 0;
    color: var(--sw-ink);
    font-size: 14px;
    font-weight: 600;
    text-align: right;
}

.staff-window .sw-legacy .sw-rows input[type="text"][size],
.staff-window .sw-legacy .sw-rows > label > input[type="date"],
.staff-window .sw-legacy .sw-rows > label > select,
.staff-window .sw-legacy .sw-rows > label > textarea {
    margin: 0;
}

.staff-window .sw-rows > br {
    display: none;
}

/* A searchable list in a row lines up with its label, as a plain list does. */
.staff-window .sw-legacy .sw-rows > label > .select2-container {
    margin-top: 0;
}

/* A date in a row is as wide as a date, not as wide as the row. An empty date field on an iPad or iPhone shrinks to
   almost nothing until it is touched, so it always keeps room for a date. */
.staff-window .sw-rows input[type="date"],
.staff-window .sw-legacy .sw-with-note > input[type="date"] {
    flex: none;
    width: auto;
    min-width: 10rem;
    margin: 0;
    justify-self: start;
}

/* A date field in a row is centred with its label. Rows line labels up with their fields by the text baseline, and an
   empty date field on an iPad has no line of text, so its label ended up at the bottom of the field. */
.staff-window .sw-rows input[type="date"],
.staff-window .sw-rows > .sw-with-note:has(> input[type="date"]),
.staff-window .sw-rows > label:has(> input[type="date"]) > .field_name,
.staff-window .sw-rows > label:has(> .sw-with-note > input[type="date"]) > .sw-with-note {
    align-self: center;
}

/* A label beside a date with something after it (Policy Good Until and its check box) lines up with the date itself,
   not with the middle of the group, which is taller when the check box wraps below the date. */
.staff-window .sw-rows > label:has(> .sw-with-note > input[type="date"]) > .field_name,
.staff-window .sw-rows > .sw-row-label:has(+ .sw-with-note > input[type="date"]) {
    align-self: start;
    line-height: 32px;
}

.staff-window .sw-rows > .sw-rows-rule {
    grid-column: 1 / -1;
    margin: 6px 0;
    border-top: 1px solid var(--sw-line);
}

/* A line that spans both columns of the rows (a check box that belongs to the group), with a little room above it */
.staff-window .sw-rows > .sw-rows-full {
    grid-column: 1 / -1;
    margin-top: 4px;
}

/* A short field with a note after it, on one line */
.staff-window .sw-with-note {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 10px;
}

.staff-window .sw-legacy .sw-with-note > input[type="text"] {
    flex: none;
    width: 6.5rem;
    margin: 0;
}

/* A list beside a short field, and a second label in the line (State, then Zip) */
.staff-window .sw-legacy .sw-with-note > select {
    flex: none;
    width: auto;
    margin: 0;
}

.staff-window .sw-note-label {
    font-size: 14px;
    font-weight: 600;
}

/* A file uploaded earlier, shown under the field for choosing a new one */
.staff-window .sw-current-file {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 12px;
    margin-top: 6px;
    font-size: 14px;
}

.staff-window .sw-current-file img {
    max-height: 40px;
}

/* In a group of rows, the file uploaded earlier sits under the field, not under its label. */
.staff-window .sw-rows > .sw-current-file {
    grid-column: 2;
    min-width: 0;
    margin-top: 0;
}

.staff-window .sw-rows > .sw-current-file a {
    overflow-wrap: anywhere;
}

/* A note beside a short field in a row (what the field holds, or what a blank means) */
.staff-window .sw-with-note > .sw-hint {
    margin: 0;
}

/* Check boxes listed one to a line: the labels sit directly inside one element with class sw-checkboxes, with no
   line breaks or wrapping divs, and a help icon goes inside its label. The block keeps a little space below it,
   between the check boxes and whatever follows them. */
.staff-window .sw-legacy .sw-checkboxes {
    margin-bottom: 12px;
    line-height: 1;
}

.staff-window .sw-legacy .sw-checkboxes:last-child {
    margin-bottom: 0;
}

.staff-window .sw-legacy .sw-checkboxes > label:has(> input[type="checkbox"]) {
    display: block;
    margin: 0;
    padding: 3px 0;
}

/* The old pages put a line break after each labelled field; the label's own spacing replaces it. */
.staff-window .sw-legacy .field_details > label:has(> input[type="text"]) + br {
    display: none;
}

/* Check boxes side by side in a line (Active, Archived) are spaced apart. */
.staff-window .sw-legacy .pane > p > label:has(> input[type="checkbox"]) + label:has(> input[type="checkbox"]),
.staff-window .sw-legacy .sw-balanced-column > p > label:has(> input[type="checkbox"]) + label:has(> input[type="checkbox"]),
.staff-window .sw-legacy .sw-checks-inline > label:has(> input[type="checkbox"]) + label:has(> input[type="checkbox"]) {
    margin-left: 24px;
}

.staff-window .sw-legacy .options_list {
    max-height: 380px;
    overflow-y: auto;
    background: var(--sw-surface);
    border: 1px solid var(--sw-line);
    border-radius: 8px;
}

/* A long option wraps beneath itself, its box at the start of the first line. */
.staff-window .sw-legacy .options_list label,
.staff-window .sw-legacy .options_list label:has(> input[type="checkbox"]) {
    display: block;
    position: relative;
    margin: 0;
    padding: 6px 10px 6px 34px;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.25;
    white-space: normal;
}

.staff-window .sw-legacy .options_list label > input[type="checkbox"] {
    position: absolute;
    top: 8px;
    left: 10px;
    margin: 0;
}

.staff-window .sw-legacy .options_list label:hover {
    background: var(--sw-subtle);
}

.staff-window .sw-legacy .options_list label.checked {
    background: #e3eefb;
}

.staff-window .sw-legacy .options_list label.inactive {
    color: var(--sw-muted);
}

.staff-window .sw-legacy .hide {
    display: none !important;
}

.staff-window .sw-legacy .tooltip {
    color: var(--sw-blue);
    cursor: help;
}

.staff-window .sw-legacy .error,
.staff-window .sw-legacy .red {
    color: var(--sw-red);
}

/* Printing while a window is open prints the window alone */

/* Email Attachments (Booking System window): a row per language. A file already saved is a line with a minus that
   crosses it out (it is deleted when the window is saved; the minus then shows an undo arrow). A box for a new file
   has a plus (another box after it) and a minus (take this box away, or clear it when it is the only one). */
.staff-window .sw-attachments-cell {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

.staff-window .sw-attachment,
.staff-window .sw-upload {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 30px;
}

.staff-window .sw-attachment > a {
    min-width: 0;
    font-size: 14px;
    overflow-wrap: anywhere;
}

.staff-window .sw-attachment .sw-attachment-note {
    display: none;
    color: var(--sw-muted);
    font-size: 13px;
}

.staff-window .sw-attachment.to_delete > a {
    color: var(--sw-muted);
    text-decoration: line-through;
}

.staff-window .sw-attachment.to_delete .sw-attachment-note {
    display: inline;
}

.staff-window .sw-attachment .sw-icon-undo,
.staff-window .sw-attachment.to_delete .sw-icon-remove {
    display: none;
}

.staff-window .sw-attachment.to_delete .sw-icon-undo {
    display: block;
}

.staff-window .sw-upload > input[type="file"] {
    flex: 0 1 24rem;
    width: 24rem;
    max-width: 100%;
    min-width: 0;
    margin: 0;
}

/* The small round buttons that sit beside a line (plus and minus) */
.staff-window .sw-icon-button.sw-icon-small {
    flex: none;
    width: 28px;
    height: 28px;
    margin: 0;
}

.staff-window .sw-icon-button.sw-icon-small svg {
    width: 16px;
    height: 16px;
}

.staff-window .sw-icon-button:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* A text field with a note after it (Title on EBS) takes the room there is, the note wrapping under it if it must */
.staff-window .sw-legacy .sw-with-note > input[type="text"].sw-wide {
    flex: 1 1 10rem;
    width: auto;
    min-width: 0;
}

/* The fixed start of an address (www.esecutive.com/ebs/), shown disabled before the part that is typed */
.staff-window .sw-legacy .sw-with-note > input[type="text"].sw-address-start {
    flex: none;
    width: 15rem;
}

/* The logo a booking system has now, shown under the lists in its group */
/* A logo whose file is missing is hidden, with its space, instead of showing the browser's broken-image box. */
.staff-window .sw-current-logo[hidden] {
    display: none;
}

.staff-window .sw-current-logo img {
    max-width: 100%;
    max-height: 4.5rem;
}

/* A long list of check boxes in columns that read down (the two EBS check box tabs): one to a line, each kept whole
   within its column, instead of two or three side by side where they fit. */
.staff-window .sw-legacy .multi_col > label:has(> input[type="checkbox"]) {
    display: block;
    margin: 0;
    padding: 3px 0;
    break-inside: avoid;
}

/* A line of rows under a list in columns (Default Language under the languages) has room above it. */
.staff-window .sw-legacy .two_col + .sw-rows {
    margin-top: 12px;
}

@media print {
    html.staff-window-open body > *:not(dialog.staff-window) {
        display: none !important;
    }

    html.staff-window-open dialog.staff-window {
        position: static;
        width: auto;
        max-height: none;
        margin: 0;
        overflow: visible;
        border-radius: 0;
        box-shadow: none;
    }

    .staff-window__body {
        overflow: visible;
    }

    .staff-window__close,
    .staff-window .sw-actions {
        display: none !important;
    }
}