/* ============================================================================
   Sunday refresh — the modern skin for `asp`.

   Loaded ONLY by pages that call Master.UseRefreshedTheme(), which links this
   file into the head and puts `sd` on the body. It deliberately does NOT live
   in App_Themes/TwoPointOh/ — anything in the theme folder is auto-included on
   all ~102 pages, and this needs to reach only the pages we have converted.

   Two layers of containment:
     1. the file is hand-linked, so an unconverted page never loads it;
     2. every rule below is scoped under `.sd`, so even if it were loaded
        globally it would paint nothing.

   Token names match app/Sunday.App/wwwroot/css/sunday.css exactly, so a rule
   written here is portable to `app` verbatim. `asp` uses no custom properties
   anywhere else, so there is nothing for these to collide with.

   Deliberately NOT set: box-sizing. The legacy layout is tables with explicit
   widths plus padding, and flipping the box model under them would move
   everything at once. New components below opt in individually.


   THEMES ARE SIBLINGS OF THIS FILE, NOT COPIES OF IT. Every colour below is a token in
   the :root block, and no rule in this file contains a colour literal - that is the
   property a theme depends on. A theme is therefore one block of token overrides under
   a body class, typically only the accent, and nothing else: no selectors, no layout,
   nothing to keep in step when a component changes here. See css/sunday-theme-ink.css.

   Master.UseRefreshedTheme(name) adds `theme-<name>` to the body and links the sibling
   after this file. Both together are still two small stylesheets, not two copies.
   See documentation-that-doesnt-suck/no-dollar-signs-and-other-home-decisions.md
   ============================================================================ */

:root {
    /* Ground and structure. These four move together — as the ground lightens
       the rules must darken or the cards stop reading as cards. */
    --bg:          #FDFBF7;   /* warm white */
    --card:        #FFFFFF;
    --line:        #E9E3D8;
    --band:        #F8F5EF;   /* table headers, panel headers */
    --band-2:      #F4EFE5;   /* totals rows */

    --ink:         #232733;
    --ink-2:       #5A6070;
    --ink-3:       #8A90A0;

    --accent:      #E8A23C;
    --accent-deep: #B07514;
    --on-accent:   #3A2A08;  /* text on an accent-filled control */

    /* Semantic, carried over from app unchanged. */
    --good-ink:    #1F6B36;
    --warn-bg:     #FDF0DC;
    --due-ink:     #A63A2B;

    --font:        "Segoe UI", -apple-system, "Helvetica Neue", Arial, sans-serif;
    --size:        15px;
    --size-data:   13.5px;   /* dense grids — 15px will not fit ten money columns */

    --radius:      14px;
    --radius-sm:   8px;
    --shadow:      0 1px 2px rgba(35, 39, 51, .05);
    /* Modals float above the page rather than sitting on it, so a wider, softer cast. */
    --shadow-modal: 0 18px 44px -12px rgba(35, 39, 51, .28), 0 2px 8px rgba(35, 39, 51, .06);
    /* A control that should look grabbable - the target slider thumb. */
    --shadow-raised: 0 2px 6px rgba(35, 39, 51, .22);

    /* The single gap between content blocks - nav, card, accordion pane. One value so the
       page has a vertical rhythm instead of whatever margin each block brought with it. */
    --gap:         12px;

    /* Density. Only the values components genuinely share are here; one-offs like the page
       heading or the modal keep their own. Each is exactly what it replaced, so naming them
       moved nothing - the point is that making the app tighter or roomier is now a few
       edits in this block rather than a hunt through the file.

       --row-y is the dial for forms: it sets how tall a label-and-field row is. */
    --row-y:          4.5px;    /* form row, vertical */
    --cell-y:         3.2px;    /* input cell, vertical */
    --pad-field:      4px 8px;  /* text inputs and textareas */
    --pad-field-sm:   3px 4px;  /* selects, and inputs in narrow numeric cells */
    --pad-grid-head:  8px;      /* grid header cells */
    --pad-grid-cell:  7px 8px;  /* grid body cells */
}

/* ---------------------------------------------------------------- chrome -- */

body.sd
{
    background: var(--bg);
    font-family: var(--font);
    font-size: var(--size);
    color: var(--ink);
}

.sd #container
{
    background: var(--bg);
}

/* The list pages outgrew the site-wide 980px. Where the monitor has the room,
   widen; below 1440px nothing changes. Scoped here rather than per page so a
   converted page inherits it by opting in. */
@media (min-width: 1440px)
{
    .sd #container { width: 1380px; }
}

/* The expanded STP batch detail grid. Its 26 columns come to roughly 2570px, so it always
   scrolls; the only question is how big a window it scrolls in. It lives here beside the
   container rule rather than on the page, because it is derived from it - two magic numbers
   that have to agree will eventually stop agreeing if they sit in different files. */
.sd .stp-batch-detail
{
    max-width: 940px;
    overflow-x: scroll;
}

@media (min-width: 1440px)
{
    /* The expander drops the grid into a cell spanning every column but the first (3%),
       which leaves about 1325px inside a 1380px container. */
    .sd .stp-batch-detail { max-width: 1300px; }
}

.sd #header
{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* The menu bar now carries the wordmark on its left and the company name on its right,
   which is what lets the separate header card go. Flex rather than superfish's floats:
   .sf-menu li keeps position:relative, which is what the dropdowns anchor to, and float
   is simply ignored inside a flex container. Placement is by `order` rather than DOM
   position, so the markup stays in reading order and unconverted pages are unaffected. */
.sd .main_menu
{
    display: flex;
    align-items: stretch;
    flex-wrap: wrap;
    /* superfish pins .sf-menu to height:20px, which suited a row of floated text links.
       The wordmark and the padded links both overflow that once this is a flex bar. */
    height: auto;
    min-height: 58px;
    /* Stated outright rather than left to `auto`. Something in the legacy cascade makes
       this shrink to fit its contents, which wrapped the right-hand items onto a second
       line. border-box is set here only, so the padding and border stay inside the 100%
       instead of overflowing the container. */
    box-sizing: border-box;
    width: 100%;
    align-content: center;
    padding: 0 16px;
    margin-bottom: var(--gap);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sd .main_menu > li
{
    display: flex;
    align-items: center;
    float: none;
}

/* .sf-menu a is height:1em with em side margins and no vertical padding - right for a
   20px bar, far too tight for this one. Top level only; submenu links keep their own. */
.sd .main_menu > li > a
{
    height: auto;
    margin: 0;
    padding: 0 13px;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    color: var(--ink-2);
}

.sd .main_menu > li > a:hover
{
    color: var(--ink);
}

/* Dropdowns hang off the bottom of the bar. superfish opens them at top:1.4em, measured
   against the old 20px height. align-items:stretch makes every top-level item full bar
   height, so 100% lands exactly on the bar's lower edge whatever that height becomes. */
.sd .main_menu > li:hover > ul,
.sd .main_menu > li.sfHover > ul
{
    top: 100%;
}

.sd .main_menu > li           { order: 2; }
.sd .main_menu > li.nav-brand { order: 1; padding-right: 10px; }
.sd .main_menu > li.nav-co    { order: 3; margin-left: auto; padding: 0 4px 0 20px; font-weight: 600; color: var(--ink); }
.sd .main_menu > li#menu_user { order: 4; }

/* The wordmark is loose handwritten line art - below about 32px it stops reading as
   "Sunday" and becomes a squiggle. Width is left to auto so the aspect holds; the .logo
   class that pins 133x50 elsewhere is deliberately not applied here. */
.sd .nav-brand img
{
    display: block;
    height: 34px;
    width: auto;
}

/* No outer box around the content. The page heading, the filter bar and the list are
   each their own object; wrapping the lot in a second border just adds a frame. */
.sd #rightcontent
{
    border: 0;
    border-radius: 0;
    background: transparent;
}

/* The page title and its quick links were a full-width band of chrome. They are the
   page's own heading, so they read as one - no fill, no border, no separate strip. */
.sd #headerbar
{
    background: transparent;
    /* The theme underlines this with a full-width 1px rule. That made sense when it was a
       band; now the card below draws its own top edge, so the rule runs a few pixels above
       it and overshoots its rounded corners - two parallel lines, the outer one sticking
       out past the curve. The card is the boundary, so the rule goes. */
    border-bottom: 0;
    padding: 2px 2px 14px 2px;
}

/* Direct child only. The quick links are their own nested table inside the second cell,
   and stretching that one to 100% is what spread them evenly across the row instead of
   letting them bunch at the right. */
.sd #headerbar > table
{
    width: 100%;
}

/* The title and the quick links are two cells of one table. Middle-align them so they
   share a line instead of sitting at different heights, and push the links right. */
.sd #headerbar > table > tbody > tr > td
{
    vertical-align: middle;
}

.sd #headerbar > table > tbody > tr > td:last-child
{
    text-align: right;
}

/* Left to itself it shrinks to fit and its float:right does the rest. */
.sd #headerbar .quicklinktable
{
    width: auto;
}

.sd #headerbar h2
{
    margin: 0;
    font-size: 21px;
    font-weight: 600;
    line-height: 1.2;
    color: var(--ink);
}

/* .quicklinktable already floats right in the theme, so it needs no display change -
   only room between the links, which sat flush against each other. */
.sd #headerbar .quicklinkrefcell
{
    padding-left: 20px;
    white-space: nowrap;
}

.sd #headerbar a
{
    color: var(--ink-2);
    text-decoration: none;
}

.sd #headerbar a:hover
{
    color: var(--ink);
    text-decoration: underline;
}

.sd #footer
{
    color: var(--ink-3);
}

/* ---------------------------------------------------------------- panels -- */

.sd .WhiteLeftPanel
{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

/* #featurebar is the wrapper most pages put their content in. The theme already gives it
   a white fill, which was enough to read as a surface against the old #f8f8f8 ground -
   but white on warm white with no border is invisible, so the content lost its left edge
   when #rightcontent's border went. It becomes the card instead: the page heading sits
   on the ground, content blocks sit on surfaces, and the ground shows between them. */
.sd #featurebar,
.sd .featurebar
{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    padding: 20px 22px;
    margin-bottom: var(--gap);
}

/* A panel sitting directly inside is redundant once the wrapper is the surface - two
   nested cards read as a frame around a frame. PayrollList's filter bar is one of these. */
.sd #featurebar > .WhiteLeftPanel,
.sd .featurebar > .WhiteLeftPanel
{
    background: transparent;
    border: 0;
    border-radius: 0;
    box-shadow: none;
    padding: 0;
    /* 24 pages set an inline Height (28 instances - some pages nest more than one panel),
       sized for the old two-column layout with its own fixed-height card. An inline style
       can only be beaten by !important. Left alone, a panel whose real content is taller
       than its declared height does not clip and does not scroll - it just overflows past
       the box silently, which nothing downstream can see: #featurebar sizes itself to the
       DECLARED 360px, not the true content height, so its border/shadow/rounded corners
       end there and the overflowing tail (here, the Search/Clear row) paints past that
       edge with none of the spacing rules below actually failing - they are all still
       applied, just to an element rendering in the wrong place. Width is let go too, for
       the same reason: #featurebar is what sizes the row now. */
    height: auto !important;
    width: auto !important;
}

/* An accordion sits beside #featurebar as a sibling, not inside it, so it is a content
   block in its own right and needs the same edges. With only a bottom border it ran the
   full width square-cornered underneath a bordered, rounded card - reading as something
   sticking out from beneath it rather than as the next block down. */
.sd .accordionHeader_app,
.sd .accordionHeaderSelected_app,
.sd .app-site-panel-header-background
{
    margin-top: var(--gap);
    background: var(--band);
    color: var(--ink);
    font-family: var(--font);
    font-size: var(--size);
    border: 1px solid var(--line);
}

/* Closed: the pane is just its header, so it is a whole card. */
.sd .accordionHeader_app
{
    border-radius: var(--radius);
}

/* Open: the header is the top of a card and the content below closes it. */
.sd .accordionHeaderSelected_app
{
    font-weight: 600;
    border-radius: var(--radius) var(--radius) 0 0;
}

/* These headers are buttons and looked like labels - nothing said they could be clicked.
   A chevron says both that the pane opens and which way it currently is. Drawn from two
   rotated borders rather than a glyph, so it needs no font and stays crisp at any size.
   Open and closed are already separate classes, so the state costs no script.

   It replaces an accent stripe drawn with inset box-shadow, which could not follow the
   14px corner radius and read as a stray tick above the curve. */
.sd .accordionHeader_app,
.sd .accordionHeaderSelected_app
{
    position: relative;
    padding-right: 36px;
}

.sd .accordionHeader_app::after,
.sd .accordionHeaderSelected_app::after
{
    content: "";
    position: absolute;
    right: 18px;
    top: 50%;
    width: 7px;
    height: 7px;
    margin-top: -5px;
    border-right: 2px solid var(--ink-3);
    border-bottom: 2px solid var(--ink-3);
    transform: rotate(-45deg);
}

.sd .accordionHeaderSelected_app::after
{
    /* Pointing down: this one is open. */
    margin-top: -6px;
    transform: rotate(45deg);
    border-color: var(--accent-deep);
}

/* Closes the card an open header starts. Most pages set no ContentCssClass - PayrollList
   among them - so there is no class to hook and the pane had a top edge and no sides. The
   toolkit renders the content immediately after the header, so the adjacent sibling is the
   hook that works everywhere. No padding here: the pane usually holds a full-bleed grid,
   and pages that do set accordionContent_new bring their own. */
.sd .accordionHeaderSelected_app + div
{
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
}

/* ---------------------------------------------------------------- fields -- */

.sd input[type="text"],
.sd input[type="password"],
.sd select,
.sd textarea
{
    /* The file header says box-sizing is not set globally, and that stands - but form
       controls opt in, because almost all of them carry percentage widths from markup
       (73 of EditPayroll's 74 dropdowns are Width="99%"). With content-box the padding and
       border are added to that 99%, so the control overflows its cell and the text is
       clipped - "Ye:" instead of "Yes". */
    box-sizing: border-box;
    font-family: var(--font);
    font-size: var(--size-data);
    color: var(--ink);
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--pad-field);
}

/* Tighter than text inputs. A select spends part of its width on the arrow, and the payroll
   grid has Yes/No columns around 40px wide - 16px of side padding leaves no room for the
   word. */
.sd select
{
    padding: var(--pad-field-sm);
}

.sd input[type="text"]:focus,
.sd input[type="password"]:focus,
.sd select:focus,
.sd textarea:focus
{
    outline: 2px solid var(--accent);
    outline-offset: 1px;
    border-color: var(--accent);
}

/* --------------------------------------------------------------- buttons -- */

/* app has an accent but no button hierarchy. Established here: the action that
   runs the page is filled, everything else is outlined. Worth promoting into
   the shared token doc before a second page adopts it. */
.sd input[type="submit"],
.sd input[type="button"]
{
    font-family: var(--font);
    font-size: var(--size-data);
    border-radius: var(--radius-sm);
    padding: 7px 18px;
    cursor: pointer;
}

.sd input[type="submit"]
{
    background: var(--accent);
    border: 1px solid var(--accent);
    color: var(--on-accent);
    font-weight: 600;
}

.sd input[type="button"]
{
    background: var(--card);
    border: 1px solid var(--line);
    color: var(--ink-2);
}

.sd input[type="submit"]:focus-visible,
.sd input[type="button"]:focus-visible
{
    outline: 2px solid var(--accent-deep);
    outline-offset: 2px;
}

/* ------------------------------------------------------------ filter bar -- */

/* One row above a list, replacing the 430x270 card that used to sit beside it.
   Controls stay in whichever ContentPlaceHolder they started in — PayrollList's
   ClearAll() looks its fields up by literal client id. */
.sd .sd-filterbar
{
    padding: 12px 16px 14px 16px;
}

.sd .sd-filter-fields
{
    display: flex;
    align-items: flex-end;
    gap: 14px;
    flex-wrap: wrap;
}

.sd .sd-field
{
    display: flex;
    flex-direction: column;
}

.sd .sd-label
{
    font-size: calc(var(--size) - 3px);
    color: var(--ink-3);
    padding-bottom: 4px;
}

/* Field widths, sized to what the field holds rather than to the space available.
   A date is not improved by being 300px wide. Same four values the payroll filter bar
   already used, named so a second page can reach for them. */
.sd .sd-w-sm { width: 130px; }   /* dates, codes            */
.sd .sd-w-md { width: 176px; }   /* short selects           */
.sd .sd-w-lg { width: 210px; }   /* longer selects          */
.sd .sd-w-xl { width: 290px; }   /* names, lookups          */

/* reach:DateBox always renders as a bare <span> (WebControl's default tag) holding a
   left-floated input at width:80% and a right-floated calendar image. An inline parent
   does not contain floats, so on any page that has not opted into .sd-datebox below, the
   80% resolves against the nearest BLOCK ancestor instead of the span - typically the
   table cell - so the input can render far wider than its Width="100px" markup asked for,
   crowding whatever sits beside it in the row.

   :has() lets every DateBox get the same flex treatment .sd-datebox gives explicitly,
   with no markup change needed on the ~50 pages that use a bare <reach:DateBox>. Safe to
   rely on here: this app runs in evergreen Chrome only, not the IE8 the meta tag pretends
   to target. */
.sd span:has(> input[data-datepicker])
{
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.sd input[data-datepicker]
{
    float: none !important;
    /* A sensible default for a field that was never told to fill a column - close to the
       100/103px most pages already ask for in markup, which the browser was ignoring
       because width does not apply to a plain, non-replaced inline <span>. .sd-datebox
       still wins where a page wants the field to stretch instead - see its !important. */
    width: 100px !important;
    vertical-align: middle;
}

/* The calendar icon itself (img[data-for_datepicker]) is hidden site-wide in
   App_Themes/TwoPointOh/new_reach_styles2.css, not here - that file loads on every page
   via the site's <pages theme> setting, so hiding it there reaches unconverted pages too,
   which nothing in this file, scoped under .sd, ever could. Nothing left to style here. */

/* reach:DateBox renders an inline <span> holding a left-floated input at width:80%
   and a right-floated 16px calendar image. An inline box does not contain floats,
   so the icon drops below the field and takes the whole row's alignment with it.
   Flex fixes it. The !important overrides target inline styles the compiled control
   writes onto its own children, which cannot be reached any other way. */
.sd .sd-datebox
{
    display: flex;
    align-items: center;
    width: 100%;
}

.sd .sd-datebox input[type="text"]
{
    float: none !important;
    width: 100% !important;
    min-width: 0;
}

/* Employee lookup. It reads as a dropdown and behaves as one - click anywhere in it
   and the contact picker opens - but it is a readonly text input rather than a real
   <select>, because a <select> opens the browser's own list and cannot be pointed at
   a modal. The chevron is drawn on the field itself rather than as a neighbouring
   button, so the focus ring wraps the whole control instead of stopping short of it. */
.sd .sd-combo
{
    position: relative;
    display: flex;
}

.sd .sd-combo input[type="text"]
{
    flex: 1 1 auto;
    min-width: 0;
    cursor: pointer;
    padding-right: 46px;
    background-color: var(--card);
    /* Same chevron the native selects draw, so this sits beside Financial Year without
       looking like a different species of control. */
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%235A6070' d='M0 0h10L5 6z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 11px center;
}

/* Only shown once something is chosen. :placeholder-shown is what makes that possible
   without script - the input carries a placeholder, so an empty field matches and a
   filled one does not. */
.sd input[type="button"].sd-combo-clear
{
    display: none;
    position: absolute;
    right: 26px;
    top: 50%;
    transform: translateY(-50%);
    min-width: 0;
    width: 18px;
    height: 18px;
    padding: 0;
    font-size: 13px;
    line-height: 1;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--ink-3);
}

.sd .sd-combo input[type="text"]:not(:placeholder-shown) ~ .sd-combo-clear
{
    display: block;
}

.sd input[type="button"].sd-combo-clear:hover
{
    background: var(--band-2);
    color: var(--ink);
}

/* Below 1440px the container is back to 980px and this row wraps, dropping the
   buttons to a second line rather than overflowing the panel. */
.sd .sd-actions
{
    display: flex;
    gap: 8px;
    margin-left: auto;
}

/* ----------------------------------------------------------------- forms -- */

/* `featurebartable` + `inputcell` + `buttonCell` is the form layout of this app -
   roughly 800 uses across ~100 pages, far more than any single page's own markup.
   The legacy idiom puts the border on the TD and takes it off the input inside
   (.inputcellwidthless input { border: 0 }), so the cell looks like the field. That
   inverts here: the input carries its own border like every other control in the
   refresh, and the cell goes back to being a cell. Without this a converted form
   renders a bordered box inside a bordered box. */
.sd .featurebartable > tbody > tr
{
    height: auto;
}

/* :not() excludes cells with their own more specific padding intent, rather than trying to
   out-specificity them. .inputcell/.buttonCell etc are not always inside a featurebartable
   (78 buttonCell uses site-wide, plenty standalone), so a fix that only won within this
   table context would leave those other pages with no padding rule to fall back to.
   Excluding here and letting each keep its own plain class rule works everywhere either
   one is used - and fixes a bug that had nothing to do with today's page: this selector's
   4 classes/attributes + 3 elements has always outranked plain selectors like `.sd
   .inputcell` (2 classes) regardless of source order, so --cell-y has never actually
   applied inside a featurebartable since the day it was written - --row-y silently won
   every time. Close enough in value (3.2px vs 4.5px) that nobody noticed. */
.sd .featurebartable > tbody > tr > td:not(.buttonCell):not(.buttonCellLeft):not(.inputcell):not(.inputcellwidthless):not(.inputcell_login)
{
    font-size: var(--size-data);
    padding: var(--row-y) 14px var(--row-y) 0;
    vertical-align: middle;
    color: var(--ink);
}

.sd .inputcell,
.sd .inputcellwidthless,
.sd .inputcell_login
{
    border: 0;
    padding: var(--cell-y) 10px var(--cell-y) 0;
    /* the theme sets background-color: #fff !important on these */
    background: transparent !important;
}

.sd .inputcell input,
.sd .inputcellwidthless input,
.sd .inputcell_login input
{
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--pad-field);
}

.sd .buttonCell,
.sd .buttonCellLeft
{
    padding-top: 16px;
}

.sd .buttonCell input,
.sd .buttonCellLeft input
{
    margin-right: 8px;
}

/* One filled button per group. Every asp:Button renders input[type=submit], so Save and
   Close arrive identical and both take the primary amber - two equal-weight calls to
   action, one of which throws the form away. CSS cannot read intent, but the markup
   already follows a convention: these forms are written Save-then-Close, Save-then-Delete,
   so the first submit in a button cell commits and the rest are ways out. */
.sd .buttonCell input[type="submit"] ~ input[type="submit"],
.sd .buttonCellLeft input[type="submit"] ~ input[type="submit"]
{
    background: var(--card);
    border-color: var(--line);
    color: var(--ink-2);
    font-weight: 500;
}

/* Read-only fields. The theme flags them with a grey fill carrying !important, so the
   override has to match it. A tinted fill plus a softer border reads as "not yours to
   change" without looking broken. */
/* --band rather than --band-2. On a page like Edit Payroll almost every second cell is
   read-only, so the fill is not an occasional highlight - it is half the grid. Against
   white controls the darker tone striped the whole table; this is the quietest fill that
   still says "not yours to change". */
.sd .readonly,
.sd .readonly_payroll,
.sd .readonlylite_paroll
{
    background-color: var(--band) !important;
    color: var(--ink-2);
}

.sd .readonly input,
.sd .readonly_payroll input,
.sd .readonlylite_paroll input
{
    background-color: transparent !important;
    border-color: transparent;
    color: var(--ink-2);
}

/* .readonlylite (no _paroll) is a different thing wearing the same name: every one of its
   5 uses site-wide is a bare text divider - the word "to" between two date fields - never
   a cell wrapping an input. Filling it like a read-only field made it look like a floating
   control sitting between the two dates rather than a label. Text only. */
.sd .readonlylite
{
    background-color: transparent !important;
    color: var(--ink-3);
}

/* Payroll's own form vocabulary. EditPayroll uses readonly_payroll 193 times and
   payrollgrid_drop 66 - this is the structure of the page, not decoration on it. */
.sd .payrollgrid_drop
{
    font-size: var(--size-data);
}

/* A select spends 16-20px of its width on the arrow, and Calculate Super is a 165px column
   holding "Super does not apply". Tighter than other selects so the option text fits. */
.sd select.payrollgrid_drop
{
    padding: 3px 2px;
}

/* Every cell in a payroll grid, whatever class it carries. The markup is inconsistent about
   this - the Amount cell is a bare <td> on the Allowances rows and .inputcellwidthless on
   the Bonus rows - so cell padding set per class put the same column's inputs at different
   offsets. Setting it on the row's cells instead makes the class irrelevant to alignment. */
.sd table.data_payroll > tbody > tr > td
{
    padding: var(--cell-y) 2px;
}

/* The payroll grids' header row. The theme gives it #E1E8EF, a blue-grey from a palette
   nothing else here uses, and these tables are class data_payroll rather than datarh, so
   they missed the header treatment every other grid in the app gets. Same treatment now,
   so a column heading reads the same wherever it appears. */
.sd .dataSubHeader_payroll,
.sd table.data_payroll th
{
    background-color: var(--band) !important;
    color: var(--ink-2);
    font-weight: 600;
    font-size: calc(var(--size-data) - 1px);
    height: auto;
    padding: var(--pad-grid-head);
    border: 0;
    border-bottom: 1px solid var(--line);
}

/* Numeric columns are narrow by design - Units is a 48px cell - so an input there cannot
   afford the side padding a full-width field gets. This is what was clipping 22.00 to
   22.0 with the last digit cut. */
.sd .moneyCell input[type="text"]
{
    padding: var(--pad-field-sm);
}

.sd .dataRow_payroll
{
    background-color: transparent !important;
    height: auto;
}

.sd .readonlylite_paroll_white
{
    background-color: var(--card) !important;
}

/* Same inversion as .inputcellwidthless - the cell carried the border and the input had
   none - with the read-only fill moved onto the input where it belongs. */
.sd .inputcellwidthlessreadonly
{
    border: 0;
    padding: var(--cell-y) 10px var(--cell-y) 0;
    background-color: transparent !important;
}

.sd .inputcellwidthlessreadonly input
{
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: var(--pad-field);
    background-color: var(--band-2);
    color: var(--ink-2);
}

/* Hint text beside a field. Unstyled in the theme, so this is a free definition. */
.sd .tbnote
{
    font-size: calc(var(--size) - 3px);
    color: var(--ink-3);
}

.sd .textbox
{
    font-size: var(--size-data);
}

/* Validation. 47 pages carry validators and the theme gives them nothing, so failures
   arrive as ASP.NET's default red text.

   There is no class to hook: a ValidationSummary renders <div style="color:Red"> and an
   individual validator renders <span style="color:Red">, both with the colour inline, and
   putting a CssClass on all 47 pages is not worth it. So the hook is the inline style
   itself. The !important is what beats it. */
.sd [style*="color:Red"],
.sd [style*="color: Red"]
{
    color: var(--due-ink) !important;
    font-family: var(--font);
    font-size: calc(var(--size) - 2px);
}

/* The summary is a block listing everything wrong, so it reads as an alert rather than as
   loose red text above the form. Hidden when the page is valid - ASP.NET sets display:none
   on it - so none of this shows until something actually fails. */
.sd div[style*="color:Red"],
.sd div[style*="color: Red"]
{
    background: var(--warn-bg);
    border: 1px solid var(--due-ink);
    border-radius: var(--radius-sm);
    padding: 12px 16px;
    margin-bottom: var(--gap);
}

.sd div[style*="color:Red"] ul
{
    margin: 0;
    padding-left: 20px;
}

/* --------------------------------------------------------------- surfaces -- */

/* The lower half of the card the open header starts. Pages that set no ContentCssClass -
   PayrollList among them - put a bordered grid here instead, which closes it well enough. */
.sd .accordionContent_new
{
    background: var(--card);
    border: 1px solid var(--line);
    border-top: 0;
    border-radius: 0 0 var(--radius) var(--radius);
    padding: 14px 16px;
    font-family: var(--font);
}

/* The contact picker and its siblings. These launch from converted pages, so leaving
   them on the old styling makes the refresh look half-finished from day one. */
.sd .modalBackground
{
    background-color: var(--ink);
    opacity: .45;
    filter: alpha(opacity=45);
}

.sd .edit_links
{
    font-size: var(--size-data);
    color: var(--accent-deep);
}

/* The contact and account pickers are ACT ModalPopups rendered inside the host page, not
   pages on Popup.master, so they already sit inside .sd and only ever needed styling.
   This is the modal that has to cope with hundreds of rows for accounts and products, so
   it earns more care than the field that opens it. A heavier shadow than the page cards
   use: it is floating above the page, not sitting on it. */
.sd .sd-modal,
.sd .modalPopup
{
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    /* Soft and wide rather than dark and tight. The extender's own DropShadow is off now;
       it drew a hard grey rectangle offset down and right, which is what a shadow looked
       like in 2008. */
    box-shadow: var(--shadow-modal);
    padding: 6px;
    overflow: hidden;
}

/* Not the modal - this is a tab's content area inside it. It needs no surface of its own. */
.sd .featurebarPopup
{
    background: transparent;
}

/* The tabs. ContactArrays2.ascx carries its own copy of the ajax__tab_reach theme in an
   inline <style>, which is live (unlike the copy in new_reach_styles2.css, which sits in
   the dead @-moz-document block). That inline block renders after this file, so these
   selectors carry an extra class to win on specificity rather than on order. Flat tabs,
   no sprite images. */
.sd .ajax__tab_reach .ajax__tab_header
{
    background: none;
    border-bottom: 1px solid var(--line);
    font-family: var(--font);
    font-size: var(--size-data);
    padding-left: 4px;
}

.sd .ajax__tab_reach .ajax__tab_header .ajax__tab_outer,
.sd .ajax__tab_reach .ajax__tab_header .ajax__tab_inner
{
    background: none;
    border: 0;
    color: var(--ink-2);
    padding: 0;
    margin: 0;
}

.sd .ajax__tab_reach .ajax__tab_header .ajax__tab_tab
{
    background: none;
    border: 0;
    padding: 9px 14px;
    margin: 0;
    display: inline-block;
}

.sd .ajax__tab_reach .ajax__tab_hover .ajax__tab_inner
{
    color: var(--ink);
}

.sd .ajax__tab_reach .ajax__tab_active .ajax__tab_outer,
.sd .ajax__tab_reach .ajax__tab_active .ajax__tab_inner
{
    background: none;
    border: 0;
    color: var(--ink);
    font-weight: 600;
}

.sd .ajax__tab_reach .ajax__tab_active .ajax__tab_tab
{
    box-shadow: inset 0 -2px 0 var(--accent);
}

.sd .ajax__tab_reach .ajax__tab_body
{
    background: var(--card);
    border: 0;
    font-family: var(--font);
    padding: 10px 4px 0 4px;
}

/* The panel sizes to its content now, so nothing should reach this - but a modal that
   clips its own Cancel button is a bad failure mode, and overflow:hidden above exists
   only to keep the rounded corners. Scroll rather than swallow. */
.sd .sd-modal
{
    max-height: 88vh;
    overflow-y: auto;
}

/* The picker's result list, given the same treatment as .datarh so a row of data reads
   the same wherever it turns up. */
.sd table.data2rhnew
{
    border: 0;
    font-size: var(--size-data);
}

.sd table.data2rhnew th
{
    background: var(--band);
    color: var(--ink-2);
    font-weight: 600;
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--pad-grid-head);
}

.sd table.data2rhnew td
{
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--pad-grid-cell);
}

.sd table.data2rhnew tr:hover td
{
    background: var(--band);
    cursor: pointer;
}

/* The tag picker (SmallUserControls/LabelSelector.ascx) - a checkbox list rather than a
   clickable-row picker, so no header treatment and no row hover, just breathing room
   between rows. 12 pages use this control. */
.sd table.data.resultstable td
{
    padding: var(--cell-y) 6px;
}

/* ---------------------------------------------------------------- tables -- */

.sd table.datarh
{
    font-size: var(--size-data);
}

.sd table.datarh th
{
    background: var(--band);
    color: var(--ink-2);
    font-weight: 600;
    font-size: calc(var(--size-data) - 1px);
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--pad-grid-head);
}

.sd table.datarh td
{
    border: 0;
    border-bottom: 1px solid var(--line);
    padding: var(--pad-grid-cell);
    color: var(--ink);
}

.sd table.datarh tr.altcells,
.sd table.datarh tr.altcellsrh
{
    background: transparent;
}

.sd table.datarh tr:hover td
{
    background: var(--band);
}

/* Three names for the same idea, all in use: .totalcell on a cell, .ListTotal on a row,
   and .totalcells on a GridView footer via the Reportrh skin. Reports use the last one. */
.sd .totalcell,
.sd .ListTotal td,
.sd .totalcells td
{
    background: var(--band-2);
    font-weight: 600;
    border-top: 1px solid var(--line);
    border-bottom: 0;
}

.sd .moneyCell
{
    font-variant-numeric: tabular-nums;
}

/* Separates the Edit and Clone links sharing one cell. A middot rather than a
   full stop, sized up from the grid text so it reads as a separator. */
.sd .sd-action-sep
{
    font-size: 18px;
    vertical-align: middle;
    color: var(--ink-3);
    padding: 0 3px;
}

.sd .payroll-edit
{
    background: transparent !important;
    color: var(--accent-deep);
    text-decoration: none;
}

.sd .payroll-edit:hover
{
    text-decoration: underline;
}

/* ------------------------------------------------------------------ home -- */

/* The new Home, ported from app/Sunday.App. Prefixed sd- because these are the app's
   component names (tile, meter, popover) and unprefixed versions would be far too likely
   to collide with something in a 3,900-line legacy stylesheet.

   Colours here are all tokens, like everywhere else in this file - which is what lets a
   theme reach the page. The meter track and the slider fill are the accent's home turf,
   so a theme changes this page more visibly than any other. */

.sd .sd-greeting  { font-size: 20px; font-weight: 600; margin: 4px 0 4px; }
.sd .sd-subgreet  { color: var(--ink-2); margin-bottom: 24px; }
.sd .sd-home-foot { margin-top: 26px; color: var(--ink-3); font-size: 12.5px; }

.sd .sd-tile
{
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 22px 24px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
}

.sd .sd-tile h2
{
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
}

.sd .sd-target     { display: flex; flex-direction: column; gap: 6px; }
.sd .sd-target-row { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.sd .sd-target-name { font-weight: 600; }
.sd .sd-figures    { font-size: 14px; color: var(--ink-2); font-variant-numeric: tabular-nums; }

.sd .sd-meter      { height: 10px; border-radius: 5px; background: var(--band-2); overflow: hidden; }
.sd .sd-meter > i  { display: block; height: 100%; border-radius: 5px 4px 4px 5px; background: var(--accent); transition: width .25s; }

.sd .sd-pace       { font-size: 13.5px; color: var(--ink-2); }
.sd .sd-pace b,
.sd .sd-nudge      { color: var(--accent-deep); }

.sd .sd-chip-set   { font-size: 13px; color: var(--ink-3); }
.sd .sd-chip-set a
{
    color: var(--accent-deep);
    font-weight: 600;
    text-decoration: none;
    border-bottom: 1px dashed var(--accent);
    cursor: pointer;
}

/* The picker. A popover rather than a page: setting a target is a ten-second decision and
   should not cost a navigation. */
.sd .sd-popwrap { position: relative; }

.sd .sd-popover
{
    display: none;
    position: absolute;
    z-index: 20;
    top: 8px;
    left: 0;
    right: 0;
    max-width: 560px;
    padding: 24px 28px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    box-shadow: var(--shadow-modal);
}

.sd .sd-popover.open { display: block; }

.sd .sd-ptitle
{
    font-size: 13px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ink-3);
    margin-bottom: 4px;
}

.sd .sd-readout
{
    font-size: 44px;
    font-weight: 750;
    letter-spacing: -.015em;
    margin: 2px 0;
    font-variant-numeric: tabular-nums;
}

.sd .sd-readout small { font-size: 15px; font-weight: 500; color: var(--ink-2); margin-left: 8px; }

/* min-height holds the popover still while the line changes under the slider. */
.sd .sd-coach { font-size: 14px; color: var(--ink-2); min-height: 22px; margin-bottom: 14px; }

.sd .sd-popover input[type="range"]
{
    -webkit-appearance: none;
    appearance: none;
    box-sizing: border-box;
    width: 100%;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 5px;
    background: linear-gradient(to right, var(--accent) 50%, var(--band-2) 50%);
    outline: none;
}

.sd .sd-popover input[type="range"]::-webkit-slider-thumb
{
    -webkit-appearance: none;
    appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--card);
    border: 3px solid var(--accent);
    box-shadow: var(--shadow-raised);
    cursor: grab;
}

.sd .sd-popover input[type="range"]::-moz-range-thumb
{
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--card);
    border: 3px solid var(--accent);
    cursor: grab;
}

.sd .sd-ends { display: flex; justify-content: space-between; font-size: 12.5px; color: var(--ink-3); margin-top: 6px; }

.sd .sd-pop-actions { text-align: right; margin-top: 14px; }
.sd .sd-pop-actions a
{
    color: var(--accent-deep);
    font-weight: 650;
    text-decoration: none;
    cursor: pointer;
    margin-left: 18px;
}