/*
 * 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.45;
    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.3;
    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.3;
    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.3;
}

.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.4;
}

.staff-window textarea {
    min-height: 140px;
    resize: vertical;
}

/* 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.4;
    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;
}

.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.4;
}

.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.35;
}

.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;
    align-items: flex-start;
    gap: 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 {
    margin: 0;
    padding-top: 2px;
}

/* 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;
}

.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 {
    margin-bottom: 14px;
}

.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 > select {
    margin: 0;
}

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

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

/* 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 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;
}

/* 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"]) {
    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.4;
    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 */

@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;
    }
}