/* https://moderncss.dev/pure-css-custom-checkbox-style/ */

/* Checkboxes */
input.customcheckbox { margin: 0px 5px 0px 2px; padding: 0px; height: 14px; width: 14px; flex-shrink: 0; cursor: pointer }
    input.customcheckbox:focus { box-shadow: 0 0 0 2px #000; }
span.customcheckboxcontainer { display: inline-flex; align-items: center; height: 18px; white-space: nowrap; margin-bottom: 3px }
    .customcheckboxcontainer label { margin-left: 5px; margin-right: 10px; height: 14px; line-height: 14px; cursor: pointer; user-select: none }
    span.customcheckboxcontainer > label { width: auto; }
.customcheckbox { -webkit-appearance: none; appearance: none; border: 1px solid #fff; background-color: #fff; border-radius: 0px; box-shadow: 0 0 0 1px #000; position: relative; }
.customcheckbox::before, .customcheckbox::after, .customradio::before, .customradio::after { box-sizing: border-box; }
    .customcheckbox:checked { box-shadow: 0 0 0 1px #000; background-color: #000; border-width: 2px; }

    /* Tristate */
    .customcheckbox.currentstate { background-color: #fff; box-shadow: 0 0 0 1px #000; border-width: 1px; position: relative; }
        .customcheckbox.currentstate::after { content: ''; position: absolute; top: 1px; left: 1px; width: 0; height: 0; border-left: 10px solid #000; border-bottom: 10px solid transparent; }
        .customcheckbox.currentstate.white::after { border-left: 10px solid #fff; }

    /* Unreviewed / Accepted / Declined */
    .customcheckbox.unreviewed { background-color: #fff; }
        .customcheckbox.unreviewed:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.unreviewed.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.unreviewed.white:checked { background-color: transparent !important; }

    .customcheckbox.accepted { background-color: #fff; }
        .customcheckbox.accepted:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.accepted::after { content: ''; position: absolute; top: 0px; left: 3px; width: 6px; height: 10px; border: solid #000; border-width: 0 2px 2px 0; transform: rotate(45deg); }
        .customcheckbox.accepted.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.accepted.white:checked { background-color: transparent !important; }
            .customcheckbox.accepted.white::after { border-color: #fff; }

    .customcheckbox.declined { background-color: #fff; }
        .customcheckbox.declined:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.declined::before { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background-color: #000; transform: translate(-50%, -50%) rotate(45deg); }
        .customcheckbox.declined::after { content: ''; position: absolute; top: 50%; left: 50%; width: 12px; height: 2px; background-color: #000; transform: translate(-50%, -50%) rotate(-45deg); }
        .customcheckbox.declined.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.declined.white:checked { background-color: transparent !important; }
            .customcheckbox.declined.white::before { background-color: #fff; }
            .customcheckbox.declined.white::after { background-color: #fff; }

    .customcheckbox.multistate { background-color: #fff; box-shadow: 0 0 0 1px #000; border-width: 1px; position: relative; }
        .customcheckbox.multistate:checked { background-color: #fff; border-width: 1px; }
        .customcheckbox.multistate::after { content: ''; position: absolute; top: 1px; left: 1px; width: 0; height: 0; border-left: 10px solid #000; border-bottom: 10px solid transparent; }
        .customcheckbox.multistate.white { background-color: transparent; box-shadow: 0 0 0 1px #fff; }
            .customcheckbox.multistate.white:checked { background-color: transparent !important; }
            .customcheckbox.multistate.white::after { border-left: 10px solid #fff; }

    .customcheckbox:hover { box-shadow: 0 0 0 2px #000; }

/* Radio */
input.customradio { margin: 0px 5px 0px 2px; padding: 0px; height: 14px; width: 14px; flex-shrink: 0; cursor: pointer }
    input.customradio:focus { box-shadow: 0 0 0 2px #000; }
.customradio { -webkit-appearance: none; appearance: none; border: 1px solid #fff; background-color: #fff; border-radius: 50%; box-shadow: 0 0 0 1px #000; }
    .customradio:checked { box-shadow: 0 0 0 1px #000; background-color: #000; border-width: 2px; }
    .customradio:hover { box-shadow: 0 0 0 2px #000; }

/* Control Colour Styles */
input.customcheckbox.white:focus { box-shadow: 0 0 0 2px #fff; }
.customcheckbox.white { box-shadow: 0 0 0 1px #fff; }
.customcheckbox.white:checked { background-color: #fff !important; }
.customcheckbox.white:hover { box-shadow: 0 0 0 2px #fff; }
.customcheckbox.white:disabled:hover { box-shadow: 0 0 0 1px #fff; }

input.customradio.white:focus { box-shadow: 0 0 0 2px #fff; }
.customradio.white { box-shadow: 0 0 0 1px #fff; }
.customradio.white:checked { background-color: #fff !important; }
.customradio.white:hover { box-shadow: 0 0 0 2px #fff; }
.customradio.white:disabled:hover { box-shadow: 0 0 0 1px #fff; }

/* On a blue strip the box is see-through, so it suits #516aa5 and #253d75 alike, and its white frame is its own 1px border: an outer box-shadow ring is not snapped to whole pixels and at a half-pixel position (Master Roster Show Labels, top 94.5) smeared into a thick line */
.customcheckbox.bgblue, .customradio.bgblue { width: 16px; height: 16px; margin: 0px 4px 0px 1px; border: 1px solid #fff; padding: 2px; background-color: transparent; background-clip: content-box; box-shadow: none; }
    .customcheckbox.bgblue:checked, .customradio.bgblue:checked { border-width: 1px; }
    .customcheckbox.bgblue:hover, .customradio.bgblue:hover, input.customcheckbox.bgblue:focus, input.customradio.bgblue:focus { box-shadow: 0 0 0 1px #fff; }
    .customcheckbox.bgblue:disabled:hover, .customradio.bgblue:disabled:hover { box-shadow: none; }

/* Text Boxes */
input.customtext, textarea.customtext { box-sizing: border-box; height: 24px; margin: 1px 0px 4px; padding: 0px 3px; vertical-align: middle; background-color: #fff; border: 1px solid #ccc; border-radius: 3px; color: #000; font-family: inherit; font-size: 14px; }
    /* A multiline box (mode="multiline") takes its height from rows or its style, and does not resize unless resize= says so */
    textarea.customtext { height: auto; padding: 3px; line-height: 18px; vertical-align: top; resize: none; }
    input.customtext:hover, textarea.customtext:hover { border-color: #000; }
    input.customtext:focus, textarea.customtext:focus { border-color: #000; outline: 1px solid #000; outline-offset: -1px; }
    input.customtext.noselect, textarea.customtext.noselect { user-select: none; cursor: default; }
    input.customtext:disabled, textarea.customtext:disabled { cursor: not-allowed; background-color: #f2f2f2; border-color: #ccc; color: #aaa; }

/* Select - the select itself is the border-box, so style="width:300px" gives the same 300px as a text box; .idtselect only lays the arrow over it */
select.orselect { appearance: none; box-sizing: border-box; height: 24px; margin: 0; padding: 0 calc(1em + 5px) 0 3px; border: 1px solid #ccc; border-radius: 3px; background-color: #fff; color: #000; font-family: inherit; font-size: inherit; line-height: 22px; cursor: pointer; outline: none; grid-area: select; }
select.orselect::-ms-expand { display: none; }
    select.orselect:hover { border-color: #000 }
    select.orselect:focus { border-color: #000; outline: 1px solid #000; outline-offset: -1px; }
    select.orselect:disabled { cursor: not-allowed; background-color: #f2f2f2; border-color: #ccc; color: #aaa; }

.idtselect { position: relative; display: inline-grid; vertical-align: middle; margin: 1px 0px 4px; grid-template-areas: "select"; align-items: center; }
    .idtselect::after { content: ""; width: 0.5em; height: 0.286em; margin-right: 6px; background-color: #7382a7; clip-path: polygon(100% 0%, 0 0%, 50% 100%); grid-area: select; justify-self: end; pointer-events: none; }
    .idtselect:has(.orselect:hover)::after, .idtselect:has(.orselect:focus)::after { background-color: #000; }
    .idtselect:has(.orselect:disabled)::after { background-color: #aaa; }

/* Select list, where the browser can style it */
@supports (appearance: base-select) {
    select.orselect.baseselect, select.orselect.baseselect::picker(select) { appearance: base-select; }
    select.orselect.baseselect { align-self: start; min-inline-size: 0; min-block-size: 0; gap: 0; white-space: nowrap; overflow: clip; overflow-clip-margin: content-box; }
        select.orselect.baseselect::picker-icon { display: none; }
        select.orselect.baseselect::picker(select) { box-sizing: border-box; border: 1px solid #ccc; border-radius: 0; padding: 0; margin: 1px 0px 2px 0px; position-try-order: normal; min-inline-size: anchor-size(self-inline); background-color: #fff; color: #000; box-shadow: none; }
        select.orselect.baseselect option { padding: 0 0 0 3px; border-block: 1px dotted transparent; line-height: 1.4em; min-block-size: 0; gap: 0; font-weight: normal; background-color: transparent; transition: background-color 0.3s; }
            select.orselect.baseselect option::checkmark { display: none; }
            select.orselect.baseselect option:hover, select.orselect.baseselect option:focus-visible { background-color: #ccc; border-color: #ccc; color: #000; outline: none; }
}

/* Disabled */
input.customcheckbox:disabled:not(.white), input.customcheckbox:disabled:checked:not(.white), input.customradio:disabled:not(.white), input.customradio:disabled:checked:not(.white) { cursor: not-allowed; background-color: #f2f2f2; box-shadow: 0 0 0 1px #ccc; }
    input.customcheckbox:disabled:checked:not(.white), input.customradio:disabled:checked:not(.white) { background-color: #aaa; }
    input.customcheckbox.unreviewed:disabled:not(.white), input.customcheckbox.accepted:disabled:not(.white), input.customcheckbox.declined:disabled:not(.white), input.customcheckbox.multistate:disabled:not(.white) { background-color: #f2f2f2; }
    input.customcheckbox.currentstate:disabled:not(.white)::after, input.customcheckbox.multistate:disabled:not(.white)::after { border-left-color: #aaa; }
    input.customcheckbox.accepted:disabled:not(.white)::after { border-color: #aaa; }
    input.customcheckbox.declined:disabled:not(.white)::before, input.customcheckbox.declined:disabled:not(.white)::after { background-color: #aaa; }
    input.customcheckbox:disabled:not(.white) + label, input.customradio:disabled:not(.white) + label { color: #aaa; cursor: not-allowed; }
input.customcheckbox.white:disabled, input.customcheckbox.white:disabled + label, input.customradio.white:disabled, input.customradio.white:disabled + label { opacity: 0.5; cursor: not-allowed; }

/* Read Only */
input.customcheckbox.noedit, input.customcheckbox.noedit + label, input.customradio.noedit, input.customradio.noedit + label { pointer-events: none; }

/* Errors */
input.customcheckbox.errorframe, input.customradio.errorframe { box-shadow: 5px 5px 25px 4px #d00, 0 0 0 1px #d00; }
    input.customcheckbox.errorframe:hover, input.customradio.errorframe:hover { box-shadow: 5px 5px 25px 4px #d00, 0 0 0 2px #d00; }
input.customtext.errorframe, textarea.customtext.errorframe, select.orselect.errorframe { border: solid 1px #d00 !important; outline: none; box-shadow: 10px 10px 20px -10px #d00 }
    .idtselect:has(.orselect.errorframe)::after { background-color: #d00; }

/* Compulsory marker */
div.compulsory::after { content: '*'; color: #d00; position: absolute; margin-top: -5px; font-size: 18px }

/* Form alignment */
.formalign { position: relative; display: flex; flex-direction: row; align-items: center; gap: 5px; min-height: min-content; margin-bottom: 3px; line-height: 1.5 }
    .formalign.top { align-items: flex-start; }
    .formalign > label { margin-right: 5px; width: 100px; }
        .formalign > label.top { align-self: flex-start; padding-top: 5px; }
    /* Buttons are left out: a row of 100px buttons in a holder, e.g. Time Off's Quick Pick, gained 5px each and wrapped */
    .formalign input:not([type="button"]) { margin-right: 5px; }
    .formalign > label.w100 { width: 100px; }
    .formalign > label.w150 { width: 150px; }
    .formalign > label.w200 { width: 200px; }
    .formalign > label.w250 { width: 250px; }
    /* A text box or select row lines the label's first line up with the box's middle (1px margin + 12px), so a wrapped label hangs below rather than centring on the box */
    .formalign:not(.top):has(> input.customtext, > .idtselect) { align-items: flex-start; line-height: 26px; }
        .formalign:not(.top):has(> input.customtext, > .idtselect) > div.tar { line-height: 18px; padding-top: 4px; }
        .formalign:not(.top):has(> input.customtext, > .idtselect) > div.fl { display: flex; align-items: center; height: 26px; line-height: normal; }
        .formalign:not(.top):has(> input.customtext, > .idtselect) > .customcheckboxcontainer { margin-top: 4px; }
    .formalign > .customcheckboxcontainer { margin-bottom: 0px }
    .formalign > .idtselect { margin: 1px 0px; }
    .formalign > input.customtext, .formalign > textarea.customtext { margin: 1px 5px 1px 0px; }
    /* The label of a multiline box lines up with its first line: 1px margin, 1px border and 3px padding put that line 5px down */
    .formalign.top:has(> textarea.customtext) > div.tar { line-height: 18px; padding-top: 5px; }
.leadinglabel { min-height: 18px; line-height: 18px }

/* Layout */
/* The label column of every site control: 100px, or 150px / 175px for everything inside a label150 / label175 container, e.g. <div class="tabbedContainer label175"> */
.labelcol { width: var(--labelwidth, 100px); flex-shrink: 0; }
.label150 { --labelwidth: 150px; }
.label175 { --labelwidth: 175px; }
/* The same class on one control (class="label150" on the tag) lands on its input or select, so these carry it to that control's label column: block rows through .formalign, inline checks and radios through the column just before them */
.formalign:has(.label150) > .labelcol, .labelcol:has(+ .customcheckboxcontainer > .label150) { --labelwidth: 150px; }
.formalign:has(.label175) > .labelcol, .labelcol:has(+ .customcheckboxcontainer > .label175) { --labelwidth: 175px; }
.dib { display: inline-block; vertical-align: top }
.mr15 { margin-right: 15px !important }
.fl.labelcol:has(+ .customcheckboxcontainer) { min-height: 1px }

/* Search bar above a list (<searchbar>): one 38px row, everything centred, the 32px buttons and add icon get 3px above and below, and 1px to the list under it */
.searchbar { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 10px; box-sizing: border-box; background-color: #f1f1f1; margin-bottom: 1px; font-size: 14px; white-space: nowrap; overflow: hidden; container-type: inline-size; }
    .searchbar > div { display: flex; align-items: center; gap: 10px; }
    .searchbar > .searchbarright { margin-left: auto; gap: 20px; }
    .searchbar .searchbaritems, .searchbar .searchbarpage { display: flex; align-items: center; gap: 5px; }
    .searchbar .searchbarextra { display: flex; align-items: center; gap: 10px; }
    /* No gap between the page turn icons: each 24px icon already draws its 16px arrow with 4px clear either side */
    .searchbar .searchbarpager { display: flex; align-items: center; gap: 0; }
        .searchbar .searchbarpage { margin: 0 8px; }
    .searchbar input.customtext, .searchbar .idtselect, .searchbar .customcheckboxcontainer, .searchbar .glowbutton { margin: 0; }
    .searchbar .customcheckboxcontainer label { margin-right: 0; }
    /* rows="2": the content fills a first 38px row and the items, counts, pager and add icon a second, right aligned */
    .searchbar.tworow { height: 76px; flex-wrap: wrap; row-gap: 0; }
        .searchbar.tworow > div { flex: 0 0 100%; height: 38px; }
        .searchbar.tworow > .searchbarright { justify-content: flex-end; }
            .searchbar.tworow .searchbarextra { margin-right: auto; }
    /* A half width bar, e.g. two lists side by side, closes the gaps up so more of it fits */
    @container (max-width: 1000px) { .searchbar > div { gap: 4px; } .searchbar > .searchbarright { gap: 10px; } .searchbar .searchbarpage { margin: 0 4px; } }
    /* A bar at the top of the page sits 1px under the blue menu: the page's 4px <div class="padding"> spacer comes first, so pull the bar up 3px */
    #dpc > .searchbar:first-child { margin-top: -3px; }
    /* A picker dialog's list sits at left/right 10px and top 45px inside the 7px 14px dialog padding, so the bar widens 4px each side and rises 1px to leave a 1px gap */
    .ui-dialog-content > .searchbar:first-child { margin: -1px -4px 0; }
    /* Inside a dialog the bar shows the dialog's own white, like the headers it replaced; list pages keep the grey */
    .ui-dialog .searchbar { background-color: transparent; }

/* A select-all box in a list view header (.ilv) sat 2px above the middle of the column titles beside it */
.ilv thead .customcheckboxcontainer { margin-top: 2px; }