/* ===========================================================================
   Pro Scan Partners - 2026
   ---------------------------------------------------------------------------
   Loaded AFTER the legacy stylesheets, so it modernises without rewriting them.
   The palette is sampled from the 2026 logo (#5484A8) and is deliberately close
   to the legacy #4a6d96 / #006699 family: the app should read as the same app,
   better dressed - not as a different product.
   =========================================================================== */

:root {
    --psp-brand:        #5484A8;   /* sampled from the logo mark */
    --psp-brand-dark:   #3E6C8E;
    --psp-brand-darker: #2C5170;
    --psp-brand-tint:   #EEF4F8;
    --psp-brand-line:   #C9DAE6;

    --psp-ink:          #1C2B36;
    --psp-ink-soft:     #56707F;
    --psp-bg:           #F4F7F9;
    --psp-surface:      #FFFFFF;
    --psp-border:       #D8E2E9;
    --psp-danger:       #B3261E;
    --psp-danger-tint:  #FCEEED;
    --psp-ok:           #1E7A4D;

    --psp-radius:       10px;
    --psp-radius-sm:    6px;
    --psp-shadow:       0 1px 2px rgba(28,43,54,.06), 0 8px 24px rgba(28,43,54,.08);
    --psp-font:         -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
                        "Helvetica Neue", Arial, sans-serif;
}

/* --- reset just enough ---------------------------------------------------- */
html { -webkit-text-size-adjust: 100%; }

body.psp-2026 {
    margin: 0;
    background: var(--psp-bg) !important;
    background-image: none !important;   /* drop ProScanBackground.png: old branding */
    color: var(--psp-ink);
    font-family: var(--psp-font);
    font-size: 14px;
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
}

body.psp-2026 font { font-family: inherit !important; font-size: inherit !important; }

/* --- login ---------------------------------------------------------------- */
.psp-login {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 32px 20px 48px;
    box-sizing: border-box;
}

.psp-login__brand { text-align: center; margin-bottom: 26px; }
.psp-login__brand img {
    width: 132px; height: auto; display: block; margin: 0 auto 14px;
}
.psp-login__brand h1 {
    margin: 0;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--psp-brand-darker);
}
.psp-login__brand p { margin: 5px 0 0; font-size: 13px; color: var(--psp-ink-soft); }

.psp-card {
    width: 100%;
    max-width: 388px;
    background: var(--psp-surface);
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius);
    box-shadow: var(--psp-shadow);
    overflow: hidden;
}
.psp-card__head {
    background: var(--psp-brand);
    color: #fff;
    padding: 13px 22px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: .03em;
}
.psp-card__body { padding: 24px 22px 26px; }

.psp-field { margin-bottom: 16px; }
.psp-field label {
    display: block;
    margin-bottom: 6px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--psp-ink-soft);
}
.psp-field input[type=text],
.psp-field input[type=password] {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 12px;
    font: inherit;
    color: var(--psp-ink);
    background: #fff;
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm);
    transition: border-color .15s, box-shadow .15s;
}
.psp-field input:focus {
    outline: none;
    border-color: var(--psp-brand);
    box-shadow: 0 0 0 3px rgba(84,132,168,.18);
}

.psp-btn {
    display: block;
    width: 100%;
    padding: 11px 16px;
    font: inherit;
    font-weight: 600;
    color: #fff;
    background: var(--psp-brand);
    border: 1px solid var(--psp-brand-dark);
    border-radius: var(--psp-radius-sm);
    cursor: pointer;
    transition: background .15s;
}
.psp-btn:hover  { background: var(--psp-brand-dark); }
.psp-btn:active { background: var(--psp-brand-darker); }
.psp-btn:focus-visible { outline: 3px solid rgba(84,132,168,.4); outline-offset: 2px; }

.psp-links { margin-top: 14px; text-align: center; font-size: 13px; }
.psp-links a { color: var(--psp-brand-dark); text-decoration: none; }
.psp-links a:hover { text-decoration: underline; }

.psp-alert {
    margin-bottom: 18px;
    padding: 11px 14px;
    border-radius: var(--psp-radius-sm);
    font-size: 13px;
    background: var(--psp-danger-tint);
    border: 1px solid #F0C9C6;
    color: var(--psp-danger);
}
.psp-alert--ok {
    background: #EAF6F0; border-color: #BFE3D0; color: var(--psp-ok);
}

.psp-foot {
    margin-top: 30px;
    font-size: 12px;
    color: var(--psp-ink-soft);
    text-align: center;
}

/* --- application chrome ---------------------------------------------------- */
/* The inner pages are dense legacy tables. These rules lift them without
   touching their markup, so behavior and structure stay identical. */
body.psp-2026 table.table_border,
body.psp-2026 table[class*="list"] { border-collapse: collapse; }

body.psp-2026 a { color: var(--psp-brand-dark); }

body.psp-2026 input[type=text],
body.psp-2026 input[type=password],
body.psp-2026 select,
body.psp-2026 textarea {
    font-family: var(--psp-font);
    font-size: 13px;
    padding: 5px 8px;
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm);
    background: #fff;
    color: var(--psp-ink);
}
body.psp-2026 input[type=text]:focus,
body.psp-2026 input[type=password]:focus,
body.psp-2026 select:focus,
body.psp-2026 textarea:focus {
    outline: none;
    border-color: var(--psp-brand);
    box-shadow: 0 0 0 3px rgba(84,132,168,.16);
}

body.psp-2026 input[type=submit],
body.psp-2026 input[type=button],
body.psp-2026 .form_input_button {
    font-family: var(--psp-font);
    font-size: 13px;
    font-weight: 600;
    padding: 7px 14px;
    color: #fff;
    background: var(--psp-brand);
    border: 1px solid var(--psp-brand-dark);
    border-radius: var(--psp-radius-sm);
    cursor: pointer;
}
body.psp-2026 input[type=submit]:hover,
body.psp-2026 input[type=button]:hover,
body.psp-2026 .form_input_button:hover { background: var(--psp-brand-dark); }

@media (max-width: 480px) {
    .psp-login { padding: 22px 14px 34px; }
    .psp-login__brand img { width: 104px; }
}

/* ===========================================================================
   Top bar (top.php)
   ---------------------------------------------------------------------------
   The legacy bar is a black-backgrounded table nudged over with a 320px left
   margin, holding a hover-dropdown <ul id="sddm">. The markup and the JS hover
   behavior are left exactly as they are - these rules only change how it looks,
   so no navigation behavior changes.
   =========================================================================== */

body.psp-topbar {
    margin: 0;
    background: var(--psp-surface) !important;
    background-image: none !important;
    border-bottom: 1px solid var(--psp-border);
    font-family: var(--psp-font);
}

/* Brand mark, injected at the left of the bar. */
.psp-topbar__brand {
    position: absolute;
    top: 12px; left: 20px;
    display: flex; align-items: center; gap: 11px;
    text-decoration: none;
}
.psp-topbar__brand img { height: 42px; width: auto; }
.psp-topbar__brand span {
    font-size: 13px; font-weight: 700; letter-spacing: .13em;
    text-transform: uppercase; color: var(--psp-brand-darker); white-space: nowrap;
}

body.psp-topbar p.version {
    margin: 0; padding: 11px 22px 0 0;
    font-size: 12px; color: var(--psp-ink-soft);
}
body.psp-topbar p.version a { color: var(--psp-danger) !important; font-weight: 600; }
body.psp-topbar p.version a font { color: inherit !important; }

/* Kill the black strip the nav sat on. */
body.psp-topbar table[border="0"] > tbody > tr > td[style*="background-color: black"],
body.psp-topbar td[style*="background-color: black"] {
    background-color: transparent !important;
}

body.psp-topbar #sddm { margin: 6px 0 0; padding: 0; list-style: none; display: flex; gap: 2px; }
body.psp-topbar #sddm li { position: relative; float: none; }

body.psp-topbar #sddm a.menulink {
    display: block;
    padding: 9px 15px;
    font-size: 13px; font-weight: 600;
    color: var(--psp-ink) !important;
    background: transparent !important;
    border: 0; border-radius: var(--psp-radius-sm);
    text-decoration: none; white-space: nowrap;
    transition: background .13s, color .13s;
}
body.psp-topbar #sddm a.menulink:hover {
    background: var(--psp-brand-tint) !important;
    color: var(--psp-brand-darker) !important;
}

/* Dropdown panels. Positioning only - visibility stays with js-menu.js. */
body.psp-topbar #sddm div.menulink {
    position: absolute;
    left: 0; top: 100%;
    min-width: 190px;
    padding: 5px;
    background: var(--psp-surface) !important;
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius);
    box-shadow: var(--psp-shadow);
}
body.psp-topbar #sddm div.menulink a.menulink {
    padding: 8px 12px; font-weight: 500; border-radius: var(--psp-radius-sm);
}

@media (max-width: 900px) {
    .psp-topbar__brand span { display: none; }
    body.psp-topbar #sddm { flex-wrap: wrap; }
}

/* ===========================================================================
   Data tables - the APS/status/doctors lists
   ---------------------------------------------------------------------------
   These are the classes FormHandler/ViewHandler actually emit. An earlier pass
   here restyled bgcolor_002..005 instead, which turned out to be the collapsible
   SEARCH panel - the lists never used them. Confirmed against the live DOM.

   The row colors are SEMANTIC: they tell staff the state of an order at a
   glance. Every one is remapped to a calmer tone, but each remains clearly
   distinguishable from the others and keeps its original meaning. Nobody should
   have to relearn what a color means.
   =========================================================================== */

body.psp-2026 .tableHeader {
    background: var(--psp-brand) !important;
    color: #fff !important;
    font-family: var(--psp-font);
    font-size: 11.5px;
    font-weight: 600;
    letter-spacing: .03em;
    padding: 9px 8px !important;
    border-right: 1px solid rgba(255,255,255,.18) !important;
    border-bottom: 0 !important;
    vertical-align: middle;
}
body.psp-2026 .tableHeader a { color: #fff !important; text-decoration: none; }

body.psp-2026 .tableBody,
body.psp-2026 .tableBodyLeft,
body.psp-2026 .tableBodyRight {
    background-color: var(--psp-surface) !important;
    font-family: var(--psp-font);
    font-size: 12.5px;
    color: var(--psp-ink);
    padding: 9px 8px !important;
    border-bottom: 1px solid var(--psp-border) !important;
    border-right: 1px solid #EDF1F4 !important;
}
body.psp-2026 .tableDivider { background-color: var(--psp-border) !important; }

/* --- semantic row states -------------------------------------------------- */
/* was #ff0000 pure red - kept unmistakable, no longer shouting */
body.psp-2026 .NewAPS {
    background-color: #D93A2B !important;
    color: #fff !important;
    font-weight: 600;
}
/* was #f5f2e6 cream - "needs chasing", now a clear amber */
body.psp-2026 .FollowUp,
body.psp-2026 .Row            { background-color: #FDF4E3 !important; }
/* was moccasin - "done", now reads as done */
body.psp-2026 .CompletedOrder,
body.psp-2026 .CompletedExam  { background-color: #E7F4EC !important; }

/* routing states: three distinct hue families, as before */
body.psp-2026 .StatusAgent             { background-color: #FBF3CF !important; }  /* was #ffffae */
body.psp-2026 .StatusAgency            { background-color: #DDEAF0 !important; }  /* unchanged: already on-brand */
body.psp-2026 .StatusInsuranceCompany  { background-color: #FBE1E1 !important; }  /* was #ffd9d9 */
body.psp-2026 .OnlineFlag              { background-color: #FFE0CC !important; }  /* was lightsalmon */

body.psp-2026 .SelectedRow            { background-color: #FFF4D6 !important; }
body.psp-2026 .HighlightedRow         { background-color: #FBEAEA !important; }
body.psp-2026 .HighlightedSelectedRow { background-color: #F0D5D5 !important; }

/* chrome strips: were lavender #E7DFFF */
body.psp-2026 .Title,
body.psp-2026 .TitleTopNote,
body.psp-2026 .Header,
body.psp-2026 .Footer,
body.psp-2026 .Pager,
body.psp-2026 .form_head {
    background-color: var(--psp-brand-tint) !important;
    font-family: var(--psp-font);
    color: var(--psp-brand-darker) !important;
}
body.psp-2026 .form_head_red { background-color: var(--psp-danger) !important; color:#fff !important; }

/* search / filter strip above each list */
body.psp-2026 .viewhandler_filter_td1 {
    background-color: var(--psp-brand-tint) !important;
    border: 1px solid var(--psp-brand-line) !important;
}
body.psp-2026 .viewhandler_table2_td3 { font-family: var(--psp-font); font-size: 12px; }

/* edit / add / delete forms */
body.psp-2026 .editform_table1,
body.psp-2026 .editform_table4_td1,
body.psp-2026 .addform_table1,
body.psp-2026 .editform_table5_td1,
body.psp-2026 .editform_table7_td1,
body.psp-2026 .epayment_conf_table { background-color: var(--psp-brand-tint) !important; }
body.psp-2026 .editform_table2,
body.psp-2026 .delform_table2_td1   { background-color: var(--psp-surface) !important; }
body.psp-2026 .editform_table3_td1  { background-color: var(--psp-border) !important; }

body.psp-2026 .form_input_text,
body.psp-2026 .form_input_select,
body.psp-2026 .form_input_textarea,
body.psp-2026 .form_enter { background-color: #fff !important; }
body.psp-2026 .form_input_span { background-color: #FFF9D9 !important; }

/* the search panel's own palette (bgcolor_00X) - kept in step with the rest */
body.psp-2026 .bgcolor_004 { background-color: var(--psp-brand) !important; }
body.psp-2026 .bgcolor_002 { background-color: var(--psp-brand-dark) !important; }
body.psp-2026 .bgcolor_003 { background-color: var(--psp-surface) !important; }
body.psp-2026 .bgcolor_005 { background-color: var(--psp-brand-tint) !important; }
body.psp-2026 .fontstyle_003 {
    font-family: var(--psp-font) !important; font-size: 11px !important;
    font-weight: 600 !important; color: #fff !important;
}
body.psp-2026 .fontstyle_002,
body.psp-2026 .fontstyle_searchoptions {
    font-family: var(--psp-font) !important; font-size: 12.5px !important;
}

body.psp-2026 .SmallText { font-family: var(--psp-font); font-size: 11px; color: var(--psp-ink-soft); }

/* Informational notice - a normal, expected event (an idle sign-out) must not
   be dressed as an error. Red for a session that simply timed out teaches
   people to ignore red. */
.psp-alert--info {
    background: var(--psp-brand-tint);
    border-color: var(--psp-brand-line);
    color: var(--psp-brand-darker);
}

/* ===========================================================================
   Idle-session warning
   =========================================================================== */
#psp-idle { position: fixed; inset: 0; z-index: 2147483000; }
.psp-idle__backdrop {
    position: absolute; inset: 0;
    background: rgba(28,43,54,.55);
}
.psp-idle__box {
    position: relative;
    max-width: 400px;
    margin: 14vh auto 0;
    background: var(--psp-surface);
    border-radius: var(--psp-radius);
    box-shadow: 0 18px 48px rgba(28,43,54,.28);
    padding: 26px 26px 22px;
    font-family: var(--psp-font);
    text-align: center;
}
.psp-idle__title {
    margin: 0 0 10px;
    font-size: 18px; font-weight: 600; color: var(--psp-brand-darker);
}
.psp-idle__body { margin: 0 0 20px; font-size: 14px; line-height: 1.55; color: var(--psp-ink); }
.psp-idle__body strong {
    font-variant-numeric: tabular-nums;   /* stop the countdown jittering */
    color: var(--psp-brand-darker);
}
.psp-idle__actions { display: flex; gap: 10px; justify-content: center; }
.psp-idle__btn {
    flex: 1 1 auto;
    padding: 10px 16px;
    font: inherit; font-weight: 600; font-size: 14px;
    color: #fff; background: var(--psp-brand);
    border: 1px solid var(--psp-brand-dark);
    border-radius: var(--psp-radius-sm); cursor: pointer;
}
.psp-idle__btn:hover { background: var(--psp-brand-dark); }
.psp-idle__btn--ghost {
    color: var(--psp-ink-soft); background: transparent; border-color: var(--psp-border);
}
.psp-idle__btn--ghost:hover { background: var(--psp-bg); color: var(--psp-ink); }
.psp-idle__btn:focus-visible { outline: 3px solid rgba(84,132,168,.45); outline-offset: 2px; }

/* Footer / top-bar links out to the public site. */
.psp-foot a, .psp-topbar__site {
    color: var(--psp-brand-dark);
    text-decoration: none;
    font-weight: 600;
}
.psp-foot a:hover, .psp-topbar__site:hover { text-decoration: underline; }
.psp-foot__sep, .psp-topbar__sep { margin: 0 8px; color: var(--psp-border); }
body.psp-topbar p.version a { color: var(--psp-brand-dark) !important; }
body.psp-topbar p.version a[href*="logout"] { color: var(--psp-danger) !important; }


/* ===========================================================================
   Application shell - replaces the HTML 4 <FRAMESET>
   =========================================================================== */

.psp-skip {
    position: absolute; left: -9999px;
    padding: 10px 16px; background: var(--psp-brand); color: #fff;
    border-radius: 0 0 var(--psp-radius-sm) 0; z-index: 100;
}
.psp-skip:focus { left: 0; top: 0; }

body.psp-shell {
    margin: 0;
    height: 100vh;
    display: flex;
    flex-direction: column;
    background: var(--psp-bg);
    font-family: var(--psp-font);
    color: var(--psp-ink);
    overflow: hidden;                       /* the content region scrolls, not the shell */
}

.psp-shell__bar {
    display: flex;
    align-items: center;
    gap: 22px;
    padding: 0 20px;
    height: 60px;
    flex: 0 0 auto;
    background: var(--psp-surface);
    border-bottom: 1px solid var(--psp-border);
    box-shadow: 0 1px 2px rgba(28,43,54,.04);
}

.psp-shell__brand {
    display: flex; align-items: center; gap: 10px;
    text-decoration: none; flex: 0 0 auto;
}
.psp-shell__brand img { height: 32px; width: auto; }
.psp-shell__brand span {
    font-size: 13px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--psp-brand-darker); white-space: nowrap;
}

.psp-shell__nav { display: flex; gap: 2px; flex: 1 1 auto; min-width: 0; overflow-x: auto; }
.psp-shell__nav::-webkit-scrollbar { height: 0; }

.psp-shell__link {
    padding: 8px 14px;
    font-size: 13.5px; font-weight: 500;
    color: var(--psp-ink-soft); text-decoration: none;
    border-radius: var(--psp-radius-sm);
    white-space: nowrap;
    transition: background .13s, color .13s;
}
.psp-shell__link:hover { background: var(--psp-brand-tint); color: var(--psp-brand-darker); }
.psp-shell__link.is-active {
    background: var(--psp-brand-tint);
    color: var(--psp-brand-darker);
    font-weight: 600;
    box-shadow: inset 0 -2px 0 var(--psp-brand);
}

.psp-shell__user { display: flex; align-items: center; gap: 14px; flex: 0 0 auto; }
.psp-shell__who {
    display: flex; align-items: center; gap: 8px;
    font-size: 13px; color: var(--psp-ink);
}
.psp-shell__avatar {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; border-radius: 50%;
    background: var(--psp-brand); color: #fff;
    font-size: 11px; font-weight: 700; letter-spacing: .02em;
}
.psp-shell__signout {
    font-size: 13px; font-weight: 600; color: var(--psp-ink-soft);
    text-decoration: none; padding: 7px 12px;
    border: 1px solid var(--psp-border); border-radius: var(--psp-radius-sm);
}
.psp-shell__signout:hover { background: var(--psp-bg); color: var(--psp-danger); border-color: #E9C6C3; }

.psp-shell__main { flex: 1 1 auto; min-height: 0; }
.psp-shell__main iframe { display: block; width: 100%; height: 100%; border: 0; }

@media (max-width: 760px) {
    .psp-shell__bar { height: auto; flex-wrap: wrap; padding: 10px 14px; gap: 10px; }
    .psp-shell__brand span { display: none; }
    .psp-shell__nav { order: 3; width: 100%; }
    .psp-shell__who { display: none; }
}

/* Footer inside content pages. */
.psp-appfoot {
    margin-top: 26px; padding: 14px 0;
    border-top: 1px solid var(--psp-border);
    font-size: 12px; color: var(--psp-ink-soft); text-align: center;
}
.psp-appfoot a { color: var(--psp-brand-dark); text-decoration: none; font-weight: 600; }
.psp-appfoot a:hover { text-decoration: underline; }
.psp-appfoot__sep { margin: 0 8px; color: var(--psp-border); }

/* Content pages now sit inside the shell rather than a frame: give them room. */
body.psp-2026 { padding: 20px 22px 30px; box-sizing: border-box; }


/* ===========================================================================
   List views, second pass
   ---------------------------------------------------------------------------
   The first pass recoloured the tables but left them as dense as they were:
   narrow action columns forced header words to wrap one letter per line, cells
   had no padding, and the header scrolled away on long lists. These rules fix
   the density without touching the markup FormHandler emits.
   =========================================================================== */

/* The list header sticks, so column meaning survives scrolling a long list. */
body.psp-2026 .tableHeader {
    position: sticky;
    top: 0;
    z-index: 5;
    padding: 11px 10px !important;
    font-size: 11px !important;
    text-transform: uppercase;
    letter-spacing: .05em;
    text-align: left;
    vertical-align: middle;
}

/* The legacy markup rotates the action-column headings with
   <font style="writing-mode: tb-rl">, to fit "To Physician" into 44 pixels.
   Sideways text is slow to read and is one of the things that dates this
   interface hardest. Un-rotate them and let the columns take the width they
   need - there is room, because the borders between every cell are gone. */
body.psp-2026 .tableHeader font[style*="writing-mode"] {
    writing-mode: horizontal-tb !important;
    -webkit-writing-mode: horizontal-tb !important;
    text-orientation: mixed !important;
    display: inline-block;
    /* Just wide enough for a two-word label on two lines. Wider than this and
       the narrow action columns steal room from Status, which is the column
       people actually read. */
    max-width: 74px;
    white-space: normal;
    line-height: 1.2;
}

body.psp-2026 .tableBody,
body.psp-2026 .tableBodyLeft,
body.psp-2026 .tableBodyRight {
    padding: 12px 10px !important;
    line-height: 1.45;
    vertical-align: middle;
}

/* Row separation carries the eye across; borders between every cell do not. */
body.psp-2026 .tableBody { border-right: 0 !important; }

/* Multi-value cells (a doctor's address, a stacked status) nest a small table
   inside one grid cell. Those inner cells must NOT inherit the grid-row chrome -
   the border and 12px padding meant for a top-level row turn a single value into
   a ladder of boxed sub-rows. Strip it so the value reads as one clean cell. */
body.psp-2026 td.tableBody table,
body.psp-2026 td.tableBody table tr,
body.psp-2026 td.tableBody table td,
body.psp-2026 td.tableBody table td.tableBody {
    border: 0 !important;
    background: transparent !important;
    padding: 1px 0 !important;
    font-size: inherit;
    line-height: 1.4;
}
/* Let the value-table fill its cell instead of collapsing to the width of the
   longest word - otherwise a wide Address column still wraps one word per line. */
body.psp-2026 td.tableBody > table { width: 100%; }

/* Action columns hold a single icon: let them be narrow without squeezing text. */
body.psp-2026 td.tableBody img { vertical-align: middle; }

/* The record-count line above each list. */
body.psp-2026 .viewhandler_table2_td3 {
    padding: 4px 2px 12px !important;
    font-size: 12px; font-weight: 600;
    color: var(--psp-ink-soft);
    letter-spacing: .02em;
}

/* Search row. */
body.psp-2026 .viewhandler_filter_td1 {
    padding: 10px !important;
    border-radius: var(--psp-radius) !important;
}

/* The collapsible search panel trigger, which floated unanchored at the top. */
body.psp-2026 .toggle_hide2show,
body.psp-2026 .toggle_menu {
    display: inline-flex; align-items: center; gap: 7px;
    padding: 8px 14px; margin: 0 0 14px;
    font-size: 13px; font-weight: 600;
    color: var(--psp-brand-darker);
    background: var(--psp-surface);
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm);
    cursor: pointer; text-decoration: none;
}
body.psp-2026 .toggle_hide2show:hover,
body.psp-2026 .toggle_menu:hover { background: var(--psp-brand-tint); }

/* Give the whole list a card edge so it reads as one object. */
body.psp-2026 table.viewhandler_table2,
body.psp-2026 table[class*="viewhandler"] { border-collapse: separate; border-spacing: 0; }

/* Status cell: the longest column, and the one people actually read. */
body.psp-2026 td.tableBody { font-size: 12.5px; }

/* Links inside rows should look like the actions they are. */
body.psp-2026 td.tableBody a { font-weight: 600; text-decoration: none; }
body.psp-2026 td.tableBody a:hover { text-decoration: underline; }

/* Legacy icon GIFs are small and low-contrast against the new palette. */
body.psp-2026 td.tableBody img[src*="Images"] { opacity: .82; transition: opacity .12s; }
body.psp-2026 td.tableBody img[src*="Images"]:hover { opacity: 1; }




/* Column priorities. The legacy table has 13 columns and no width guidance, so
   the browser shares space evenly and the longest, most-read column - Status -
   ends up as narrow as an icon column. These give the important ones room. */
body.psp-grid-aps table td.tableHeader:nth-child(9),
body.psp-grid-aps table td.tableBody:nth-child(9)  { min-width: 210px; }   /* Status    */
body.psp-grid-aps table td.tableHeader:nth-child(7),
body.psp-grid-aps table td.tableBody:nth-child(7)  { min-width: 230px; }   /* Applicant */
body.psp-grid-aps table td.tableHeader:nth-child(8),
body.psp-grid-aps table td.tableBody:nth-child(8)  { min-width: 150px; }   /* Physician */

body.psp-grid-aps table td.tableHeader:nth-child(4),
body.psp-grid-aps table td.tableBody:nth-child(4)  { min-width: 130px; }   /* Member    */
body.psp-grid-aps table td.tableHeader:nth-child(5),
body.psp-grid-aps table td.tableBody:nth-child(5)  { min-width: 96px; }    /* APS Date  */
body.psp-grid-aps table td.tableHeader:nth-child(6),
body.psp-grid-aps table td.tableBody:nth-child(6)  { min-width: 104px; }   /* Policy#   */
body.psp-grid-aps table td.tableHeader:nth-child(3),
body.psp-grid-aps table td.tableBody:nth-child(3)  { min-width: 108px; }   /* Files     */

/* A date broken across lines as "08/2 2/20 26" is unreadable, and dates are how
   people scan this list. Never wrap them. Same for the reference numbers. */
body.psp-grid-aps table td.tableBody:nth-child(2),
body.psp-grid-aps table td.tableBody:nth-child(5) { white-space: nowrap; }

/* Long values wrap inside their cell rather than forcing the column wider,
   but words are only broken when they genuinely cannot fit. */
body.psp-2026 td.tableBody { word-break: normal; overflow-wrap: break-word; }



/* Which application am I in?
   Members/ and Control/ are separate applications with separate session
   cookies, and a signed-in user can be in both at once. A visible label and a
   different accent stop the two being mistaken for one another. */
.psp-shell__portal {
    margin-left: 10px; padding: 3px 9px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .09em;
    text-transform: uppercase; border-radius: 999px;
    background: var(--psp-brand-tint); color: var(--psp-brand-darker);
    border: 1px solid var(--psp-brand-line);
}
/* Staff side runs a deeper accent, so a glance tells you which you are in. */
.psp-shell.is-staff { --psp-brand: #3E6C8E; --psp-brand-dark: #2C5170; }
.psp-shell.is-staff .psp-shell__portal { background: #E4EDF3; }

/* ===========================================================================
   Content pages: security, settings
   =========================================================================== */
.psp-page { max-width: 720px; margin: 0 auto; }
.psp-page__title { margin: 4px 0 6px; font-size: 22px; font-weight: 600; color: var(--psp-brand-darker); }
.psp-page__lead  { margin: 0 0 22px; font-size: 14px; color: var(--psp-ink-soft); }

.psp-panel {
    background: var(--psp-surface);
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius);
    padding: 22px 24px;
    margin-bottom: 18px;
}
.psp-panel--warn { border-color: #E8D3A8; background: #FFFBF2; }
.psp-panel__title { margin: 0 0 12px; font-size: 15px; font-weight: 600; color: var(--psp-brand-darker); }
.psp-panel p { margin: 0 0 12px; font-size: 14px; line-height: 1.6; }

.psp-status { display: inline-block; font-size: 13px; font-weight: 600; margin: 0 0 10px; }
.psp-status--on::before  { content: "● "; color: var(--psp-ok); }
.psp-status--off::before { content: "○ "; color: var(--psp-ink-soft); }
.psp-status--on  { color: var(--psp-ok); }
.psp-status--off { color: var(--psp-ink-soft); }

.psp-steps { margin: 0; padding-left: 22px; }
.psp-steps > li { margin-bottom: 24px; font-size: 14px; line-height: 1.6; }
.psp-steps > li::marker { font-weight: 700; color: var(--psp-brand); }

.psp-qr {
    display: inline-block; margin: 14px 0 10px; padding: 12px;
    background: #fff; border: 1px solid var(--psp-border); border-radius: var(--psp-radius);
}
.psp-qr img { display: block; width: 176px; height: 176px; }

.psp-details { margin-top: 6px; font-size: 13px; }
.psp-details summary { cursor: pointer; color: var(--psp-brand-dark); font-weight: 600; }
.psp-key {
    display: inline-block; margin-top: 8px; padding: 9px 12px;
    font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 13px; letter-spacing: .08em;
    background: var(--psp-brand-tint); border: 1px solid var(--psp-brand-line);
    border-radius: var(--psp-radius-sm); color: var(--psp-brand-darker); word-break: break-all;
}

.psp-confirm { display: flex; gap: 10px; margin: 12px 0 8px; }
.psp-code-input {
    width: 150px; padding: 11px 14px;
    font-family: 'SF Mono', Menlo, Consolas, monospace;
    font-size: 20px; letter-spacing: .22em; text-align: center;
    border: 1px solid var(--psp-border); border-radius: var(--psp-radius-sm);
}
.psp-code-input:focus { outline: none; border-color: var(--psp-brand); box-shadow: 0 0 0 3px rgba(84,132,168,.18); }

.psp-btn--quiet {
    width: auto; color: var(--psp-ink-soft); background: transparent;
    border: 1px solid var(--psp-border);
}
.psp-btn--quiet:hover { background: var(--psp-bg); color: var(--psp-danger); border-color: #E9C6C3; }
.psp-panel .psp-btn { width: auto; }

.psp-codes {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 8px; list-style: none; margin: 14px 0; padding: 0;
}
.psp-codes li {
    padding: 10px 12px; text-align: center;
    font-family: 'SF Mono', Menlo, Consolas, monospace; font-size: 14px; letter-spacing: .06em;
    background: #fff; border: 1px solid var(--psp-border); border-radius: var(--psp-radius-sm);
}
.psp-muted { color: var(--psp-ink-soft); font-size: 13px; }

/* ===========================================================================
   Modern grid
   ---------------------------------------------------------------------------
   Works with psp-grid.js, which copies each column heading onto its cells as
   data-label and restructures the status cell. Everything here degrades: with
   JavaScript off the earlier table rules still apply.
   =========================================================================== */

body.psp-2026 table.psp-grid {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--psp-surface);
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius);
    overflow: hidden;
}

body.psp-2026 table.psp-grid td.tableHeader {
    background: var(--psp-brand) !important;
    border-right: 0 !important;
}

body.psp-2026 table.psp-grid td.tableBody {
    border-right: 0 !important;
    border-bottom: 1px solid #EDF1F4 !important;
}
body.psp-2026 table.psp-grid tr:last-child td.tableBody { border-bottom: 0 !important; }

/* Row hover across the whole row, not per cell. */
body.psp-2026 table.psp-grid tr:hover td.tableBody { background: #F7FAFC !important; }

/* An empty action cell should read as "nothing to do here", not missing data. */
body.psp-2026 td.tableBody.is-empty::after {
    content: "-"; color: #C8D6E0; font-size: 13px;
}

/* --- sortable headings ---------------------------------------------------- */
body.psp-2026 .psp-sortable { cursor: pointer; user-select: none; position: relative; }
body.psp-2026 .psp-sortable:hover { background: var(--psp-brand-dark) !important; }
body.psp-2026 .psp-sortable::after {
    content: "↕"; margin-left: 6px; opacity: .35; font-size: 10px;
}
body.psp-2026 .psp-sortable[data-sort="asc"]::after  { content: "↑"; opacity: 1; }
body.psp-2026 .psp-sortable[data-sort="desc"]::after { content: "↓"; opacity: 1; }
body.psp-2026 .psp-sortable:focus-visible { outline: 2px solid #fff; outline-offset: -3px; }

/* --- status cell ---------------------------------------------------------- */
body.psp-2026 .psp-cell-status { line-height: 1.45; }

body.psp-2026 .psp-badge {
    display: inline-block;
    padding: 3px 9px;
    font-size: 11px; font-weight: 700; letter-spacing: .03em;
    border-radius: 999px;
    white-space: nowrap;
}
body.psp-2026 .psp-badge--done      { background: #E3F3E9; color: #1B6B44; }
body.psp-2026 .psp-badge--active    { background: #E4EEF6; color: #2C5170; }
body.psp-2026 .psp-badge--new       { background: #EDE6FA; color: #4B3A80; }
body.psp-2026 .psp-badge--hold      { background: #FBF0D8; color: #7A5A12; }
body.psp-2026 .psp-badge--cnr       { background: #FCE9DC; color: #8A4B18; }
body.psp-2026 .psp-badge--canceled { background: #F6E3E1; color: #8C2F26; }
body.psp-2026 .psp-badge--other     { background: var(--psp-bg); color: var(--psp-ink-soft); }

body.psp-2026 .psp-when {
    display: block; margin-top: 5px;
    font-size: 11.5px; color: var(--psp-ink-soft);
}
body.psp-2026 .psp-note {
    display: block; margin-top: 3px;
    font-size: 12.5px; color: var(--psp-ink);
}

/* --- responsive: rows become cards --------------------------------------- */
@media (max-width: 900px) {
    body.psp-2026 table.psp-grid,
    body.psp-2026 table.psp-grid tbody,
    body.psp-2026 table.psp-grid tr,
    body.psp-2026 table.psp-grid td.tableBody { display: block; width: auto !important; }

    body.psp-2026 table.psp-grid tr:has(td.tableHeader) { display: none; }

    body.psp-2026 table.psp-grid tr {
        margin: 0 0 12px;
        border: 1px solid var(--psp-border);
        border-radius: var(--psp-radius);
        background: var(--psp-surface);
        overflow: hidden;
    }

    body.psp-2026 table.psp-grid td.tableBody {
        display: grid;
        grid-template-columns: 116px 1fr;
        gap: 10px;
        min-width: 0 !important;
        padding: 9px 13px !important;
        border-bottom: 1px solid #F1F5F8 !important;
    }
    /* The heading, carried down by psp-grid.js, becomes the row label. */
    body.psp-2026 table.psp-grid td.tableBody::before {
        content: attr(data-label);
        font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
        text-transform: uppercase; color: var(--psp-ink-soft);
        padding-top: 2px;
    }
    body.psp-2026 table.psp-grid td.tableBody.is-empty { display: none; }
    body.psp-2026 { overflow-x: hidden; }
}

/* Two-factor code entry. */
.psp-login__hint { margin: 0 0 18px; font-size: 13.5px; color: var(--psp-ink-soft); line-height: 1.55; }
.psp-code-input--wide { width: 100%; box-sizing: border-box; }

/* ===========================================================================
   Performance dashboard
   =========================================================================== */
.psp-page--wide { max-width: 1080px; }

.psp-page__head {
    display: flex; align-items: flex-end; justify-content: space-between;
    gap: 20px; flex-wrap: wrap; margin-bottom: 20px;
}

.psp-tabs { display: flex; gap: 4px; }
.psp-tab {
    padding: 8px 15px; font-size: 13px; font-weight: 600;
    color: var(--psp-ink-soft); text-decoration: none;
    background: var(--psp-surface);
    border: 1px solid var(--psp-border); border-radius: var(--psp-radius-sm);
}
.psp-tab:hover { background: var(--psp-brand-tint); color: var(--psp-brand-darker); }
.psp-tab.is-active {
    background: var(--psp-brand); border-color: var(--psp-brand-dark); color: #fff;
}

.psp-tiles {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px; margin-bottom: 18px;
}
.psp-tile {
    background: var(--psp-surface); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius); padding: 16px 18px;
}
.psp-tile__n {
    display: block; font-size: 26px; font-weight: 650; line-height: 1.1;
    color: var(--psp-brand-darker);
    font-variant-numeric: tabular-nums;   /* numbers should not jiggle between views */
}
.psp-tile__n small { font-size: 14px; font-weight: 500; color: var(--psp-ink-soft); margin-left: 2px; }
.psp-tile__l {
    display: block; margin-top: 5px; font-size: 12px; color: var(--psp-ink-soft);
    letter-spacing: .01em;
}
/* Only the number that means "someone should look at this" is tinted. If every
   tile were colored, none of them would carry a signal. */
.psp-tile--warn { border-color: #E8D3A8; background: #FFFBF2; }
.psp-tile--warn .psp-tile__n { color: #8A6410; }

.psp-chart { width: 100%; height: auto; display: block; margin: 6px 0 10px; }
.psp-chart rect { transition: fill .12s; }
.psp-chart rect:hover { fill: var(--psp-brand-darker); }

table.psp-kpi { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.psp-kpi th {
    text-align: left; padding: 9px 10px;
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--psp-ink-soft); border-bottom: 1px solid var(--psp-border); white-space: nowrap;
}
table.psp-kpi td { padding: 10px; border-bottom: 1px solid #EDF1F4; }
table.psp-kpi tr:last-child td { border-bottom: 0; }
table.psp-kpi tr:hover td { background: #F7FAFC; }
table.psp-kpi .n { text-align: right; font-variant-numeric: tabular-nums; }
table.psp-kpi th.n { text-align: right; }
table.psp-kpi a { color: var(--psp-brand-dark); font-weight: 600; text-decoration: none; }
table.psp-kpi a:hover { text-decoration: underline; }

.psp-meter {
    display: block; height: 7px; min-width: 90px;
    background: var(--psp-bg); border-radius: 999px; overflow: hidden;
}
.psp-meter > span { display: block; height: 100%; background: var(--psp-brand); border-radius: 999px; }
/* The delay meter is amber rather than brand blue: it measures time lost, and
   painting it the same color as a healthy workload bar would read as progress. */
.psp-meter--warn > span { background: #C9922B; }

/* Period-over-period change.
 *
 * Color follows whether the movement is GOOD, not whether the number went up
 * - a rising turnaround is red and a falling one green, which is the reverse
 * of the completions tile. The template decides the polarity; this only paints
 * what it is told. The arrow still points in the direction of the number, so
 * the two channels together say "turnaround rose, and that is bad" rather than
 * relying on color alone, which a red/green color-blind reader cannot use. */
.psp-delta {
    display: inline-block; margin-top: 8px;
    font-size: 11.5px; font-weight: 650; letter-spacing: .01em;
    font-variant-numeric: tabular-nums;
    padding: 2px 7px; border-radius: 999px;
}
.psp-delta--good { color: #1F6B41; background: #E7F4ED; }
.psp-delta--bad  { color: #A3372C; background: #FBEDEB; }
.psp-delta--flat { color: var(--psp-ink-soft); background: var(--psp-bg); font-weight: 550; }

/* A tile with nothing to compare against still needs the same vertical rhythm,
   or the row of tiles ends up ragged. This note fills that space with something
   worth reading instead of padding. */
.psp-tile__note {
    display: inline-block; margin-top: 8px; padding: 2px 0;
    font-size: 11.5px; color: var(--psp-ink-soft);
}
.psp-tiles__foot { margin: -8px 0 18px; font-size: 12px; }

/* Error notice. Deliberately quiet: an error page that shouts in red makes a
   routine "you can't open that" feel like a system failure, and the reader's
   next move is a support call rather than the back button. */
.psp-notice { max-width: 620px; margin: 32px auto; text-align: center; }
.psp-notice__title { margin: 0 0 10px; font-size: 19px; font-weight: 650; color: var(--psp-ink); }
.psp-notice__msg   { margin: 0 0 20px; color: var(--psp-ink-soft); font-size: 14px; line-height: 1.55; }
.psp-notice__act   { margin: 0; }

/* Cell emphasis. --warn marks a figure that should pull the eye; --soft pushes
   the supporting activity counts back so the workload columns stay the subject
   of the table. */
td.psp-cell--warn { color: #8A6410; font-weight: 650; }
td.psp-cell--soft { color: var(--psp-ink-soft); }

/* Facility-adjusted performance: the delay-decomposition bar, the +/- deltas
   in the fair scorecard, and the pairing hint. */
.psp-split { display: flex; height: 34px; border-radius: 8px; overflow: hidden;
    margin: 4px 0 12px; font-weight: 650; font-size: 13px; }
.psp-split__seg { display: flex; align-items: center; justify-content: center;
    color: #fff; min-width: 0; }
.psp-split__seg--base  { background: var(--psp-brand); }
.psp-split__seg--var   { background: #9DB4C2; color: #1F3540; }
.psp-split__seg--stuck { background: #1C7A4C; }
.psp-split__key { list-style: none; margin: 0 0 10px; padding: 0;
    display: flex; flex-direction: column; gap: 6px; font-size: 13px; color: var(--psp-ink-soft); }
.psp-split__key li { display: flex; align-items: baseline; }
.psp-split__key strong { color: var(--psp-ink); }
.psp-sw { flex: 0 0 auto; width: 11px; height: 11px; border-radius: 2px; margin-right: 8px; position: relative; top: 1px; }
.psp-sw--base  { background: var(--psp-brand); }
.psp-sw--var   { background: #9DB4C2; }
.psp-sw--stuck { background: #1C7A4C; }
.psp-vs { font-weight: 700; font-variant-numeric: tabular-nums; }
.psp-vs--pos { color: #1C7A4C; }
.psp-vs--neg { color: #B02A21; }
.psp-pairhint { background: #EAF1F6; border: 1px solid #CBDDE8; border-radius: 8px;
    padding: 10px 14px; font-size: 13px; color: var(--psp-ink); margin: 4px 0 10px; }
.psp-pairhint strong { color: var(--psp-brand-d, var(--psp-brand)); }

/* Per-page help: a "?" fixed bottom-right that opens a short "what/why" card. */
.psp-help-btn { position: fixed; right: 18px; bottom: 18px; z-index: 4000;
    width: 38px; height: 38px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--psp-brand); color: #fff; font: 700 19px/1 Georgia, serif;
    box-shadow: 0 2px 8px rgba(20,40,60,.28); transition: transform .12s, background .12s; }
.psp-help-btn:hover { background: var(--psp-brand-darker, #1f4d64); transform: translateY(-1px); }
.psp-help-btn:focus-visible { outline: 3px solid #9DC3D8; outline-offset: 2px; }
.psp-help-pop { position: fixed; right: 18px; bottom: 66px; z-index: 4001;
    width: min(360px, calc(100vw - 36px));
    background: #fff; border: 1px solid var(--psp-border, #dbe4ea); border-radius: 12px;
    box-shadow: 0 12px 34px rgba(20,40,60,.22);
    padding: 14px 16px 16px; font-family: var(--psp-sans, -apple-system, Arial, sans-serif);
    color: var(--psp-ink, #152029); font-size: 13px; line-height: 1.5; }
.psp-help-pop[hidden] { display: none; }
.psp-help-pop__hd { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.psp-help-pop__eyebrow { font: 600 9.5px/1 var(--psp-mono, "IBM Plex Mono", monospace);
    letter-spacing: .1em; text-transform: uppercase; color: var(--psp-brand, #2c6987); }
.psp-help-pop__x { border: 0; background: none; font-size: 20px; line-height: 1; cursor: pointer;
    color: var(--psp-ink-soft, #5b7180); padding: 0 2px; }
.psp-help-pop__title { margin: 7px 0 8px; font-size: 17px; font-weight: 700;
    color: var(--psp-brand-darker, #1f4d64); letter-spacing: -.01em; }
.psp-help-pop p { margin: 0 0 8px; }
.psp-help-pop b { color: var(--psp-ink, #152029); }
.psp-help-pop__tip { margin-top: 4px; padding: 8px 10px; border-radius: 8px;
    background: #EAF1F6; color: #1f3540; font-size: 12.5px; }
.psp-help-pop__who { font-size: 12px; color: var(--psp-ink-soft, #5b7180); margin: 0 0 9px; }
.psp-help-pop__who b { color: var(--psp-brand-darker, #1f4d64); }
.psp-help-pop__lbl { font: 600 9.5px/1 var(--psp-mono, "IBM Plex Mono", monospace);
    letter-spacing: .1em; text-transform: uppercase; color: var(--psp-brand, #2c6987);
    margin: 2px 0 5px; }
.psp-help-pop__do { margin: 0 0 10px; padding: 0; list-style: none; }
.psp-help-pop__do li { position: relative; padding: 0 0 4px 16px; font-size: 12.5px; line-height: 1.45; }
.psp-help-pop__do li::before { content: "\2192"; position: absolute; left: 0; top: 0;
    color: var(--psp-brand, #2c6987); font-weight: 700; }
/* First-visit nudge: a gentle pulse until the button is opened once. */
.psp-help-btn--new { animation: psp-help-pulse 2.4s ease-out 3; }
@keyframes psp-help-pulse {
    0%   { box-shadow: 0 2px 8px rgba(20,40,60,.28), 0 0 0 0 rgba(44,105,135,.55); }
    70%  { box-shadow: 0 2px 8px rgba(20,40,60,.28), 0 0 0 12px rgba(44,105,135,0); }
    100% { box-shadow: 0 2px 8px rgba(20,40,60,.28), 0 0 0 0 rgba(44,105,135,0); }
}
@media (prefers-reduced-motion: reduce) { .psp-help-btn--new { animation: none; } }
@media print { .psp-help-btn, .psp-help-pop { display: none !important; } }

@media (max-width: 700px) {
    .psp-page__head { flex-direction: column; align-items: stretch; }
    .psp-tabs { overflow-x: auto; }
    table.psp-kpi { font-size: 12.5px; }
}


/* ===========================================================================
   Page containment, icons, and the list header
   ---------------------------------------------------------------------------
   The order list has thirteen columns and was pushing the whole document
   sideways - measured at 347px of horizontal overflow, so the top bar and the
   search panel scrolled away with it. The table now scrolls INSIDE its own
   container and the page itself never does.
   =========================================================================== */

body.psp-2026 {
    overflow-x: hidden;
    padding: 22px 24px 34px;
    box-sizing: border-box;
}

/* Every wide table gets a scroll container of its own. */
.psp-scroller {
    width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    border-radius: var(--psp-radius);
    -webkit-overflow-scrolling: touch;
}
/* A visible edge, so it is obvious there is more to the right. */
.psp-scroller::-webkit-scrollbar { height: 10px; }
.psp-scroller::-webkit-scrollbar-track { background: var(--psp-bg); border-radius: 99px; }
.psp-scroller::-webkit-scrollbar-thumb { background: #C3D3DE; border-radius: 99px; }
.psp-scroller::-webkit-scrollbar-thumb:hover { background: var(--psp-brand); }

/* --- icons ---------------------------------------------------------------- */
.psp-ico {
    width: 17px; height: 17px;
    display: block;
    color: var(--psp-brand-dark);
    transition: color .12s, transform .12s;
}
.psp-ico-wrap { display: inline-flex; align-items: center; justify-content: center; }
a:hover .psp-ico { color: var(--psp-brand-darker); transform: scale(1.08); }
td.tableBody .psp-ico-wrap { justify-content: center; width: 100%; }

/* --- list header ---------------------------------------------------------- */
.psp-listhead {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0 2px 14px !important;
}
.psp-listhead__title {
    font-size: 19px; font-weight: 600; letter-spacing: -.01em;
    color: var(--psp-brand-darker); text-transform: none;
}
.psp-listhead__count {
    padding: 3px 10px;
    font-size: 12px; font-weight: 600;
    background: var(--psp-brand-tint); color: var(--psp-brand-darker);
    border: 1px solid var(--psp-brand-line); border-radius: 999px;
}

/* --- search panel --------------------------------------------------------- */
/* The toggle sat in a bordered box of its own, orphaned above the list. */
body.psp-2026 .toggle_menu,
body.psp-2026 .toggle_hide2show {
    border: 0 !important; background: transparent !important;
    padding: 0 !important; margin: 0 0 12px !important;
    color: var(--psp-brand-dark) !important;
}
body.psp-2026 .toggle_menu:hover,
body.psp-2026 .toggle_hide2show:hover { background: transparent !important; text-decoration: underline; }

/* The bare search input and button above each list. */
body.psp-2026 input[type=text][name*="filter"],
body.psp-2026 .searchhandler_table1 input[type=text] {
    min-width: 260px;
}

/* Nested tables inside a cell (the Applicant column) should not draw a box. */
body.psp-2026 td.tableBody table { border: 0 !important; background: transparent !important; }
body.psp-2026 td.tableBody table td { border: 0 !important; padding: 1px 0 !important; }

/* The APS# column carries a sort control; keep it tight. */
body.psp-2026 table.psp-grid td.tableHeader:first-child,
body.psp-2026 table.psp-grid td.tableBody:first-child { width: 44px; }

/* The page-level scroller holds the entire legacy layout table, so nothing
   inside it needs its own width cap - and the document never scrolls sideways. */
body.psp-2026 .psp-scroller--page { padding-bottom: 4px; }
body.psp-2026 .psp-scroller > table { max-width: none !important; }

/* ===========================================================================
   FORMS - add, edit, delete, settings, search
   ---------------------------------------------------------------------------
   Every data-entry screen is a two-column layout table: .tableBodyLeft holds
   the label, .tableBodyRight holds the control, and section headings reuse
   .tableBodyRight with italic text. The legacy palette gave the label column a
   honeydew (pale green) background, buttons a GIF and ridge borders, and hint
   text 10px bold red - which on a blank form reads as an error on every field.

   These rules restyle those classes in place. No form markup changes, so every
   field name, handler and submit path is exactly as it was.
   =========================================================================== */

/* --- the form container --------------------------------------------------- */
body.psp-2026 table.addform_table1,
body.psp-2026 table.editform_table8,
body.psp-2026 table.editform_table1,
body.psp-2026 table.delform_table4,
body.psp-2026 table.delform_table5 {
    width: 100%;
    max-width: 940px;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--psp-surface) !important;
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius);
    overflow: hidden;
    margin: 0 0 20px;
}

/* --- label column --------------------------------------------------------- */
body.psp-2026 td.tableBodyLeft {
    width: 34%;
    padding: 13px 16px !important;
    font-family: var(--psp-font) !important;
    font-size: 13px !important;
    font-weight: 500;
    color: var(--psp-ink-soft) !important;
    background: transparent !important;    /* was honeydew */
    border-bottom: 1px solid #EDF1F4 !important;
    vertical-align: middle;
}

/* --- field column --------------------------------------------------------- */
body.psp-2026 td.tableBodyRight {
    padding: 11px 16px !important;
    font-family: var(--psp-font) !important;
    font-size: 13.5px !important;
    color: var(--psp-ink) !important;
    background: transparent !important;
    border-bottom: 1px solid #EDF1F4 !important;
    vertical-align: middle;
}

/* Section headings reuse the field cell with italic text ("APS Information",
   "Applicant Information"). Promote them to real headings. */
body.psp-2026 td.tableBodyRight > i,
body.psp-2026 td.tableBodyRight > em,
body.psp-2026 td.tableBodyRight > b > i {
    display: block;
    font-style: normal !important;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: var(--psp-brand-darker);
}
body.psp-2026 tr:has(> td.tableBodyRight > i),
body.psp-2026 tr:has(> td.tableBodyRight > em) {
    background: var(--psp-brand-tint);
}
body.psp-2026 tr:has(> td.tableBodyRight > i) td,
body.psp-2026 tr:has(> td.tableBodyRight > em) td {
    padding-top: 14px !important;
    padding-bottom: 12px !important;
    border-top: 1px solid var(--psp-brand-line) !important;
    border-bottom: 1px solid var(--psp-brand-line) !important;
}

/* --- controls ------------------------------------------------------------- */
body.psp-2026 .form_input_text,
body.psp-2026 .form_input_select,
body.psp-2026 .form_input_textarea,
body.psp-2026 input[type=text],
body.psp-2026 input[type=password],
body.psp-2026 input[type=email],
body.psp-2026 input[type=number],
body.psp-2026 input[type=date],
body.psp-2026 select,
body.psp-2026 textarea {
    font-family: var(--psp-font) !important;
    font-size: 13.5px !important;
    padding: 8px 11px !important;
    color: var(--psp-ink) !important;
    background: #fff !important;
    border: 1px solid var(--psp-border) !important;
    border-radius: var(--psp-radius-sm) !important;
    box-shadow: none !important;
    transition: border-color .13s, box-shadow .13s;
    max-width: 100%;
    box-sizing: border-box;
}
body.psp-2026 input[type=text]:focus,
body.psp-2026 input[type=password]:focus,
body.psp-2026 select:focus,
body.psp-2026 textarea:focus,
body.psp-2026 .form_input_text:focus,
body.psp-2026 .form_input_select:focus,
body.psp-2026 .form_input_textarea:focus {
    outline: none !important;
    border-color: var(--psp-brand) !important;
    box-shadow: 0 0 0 3px rgba(84,132,168,.17) !important;
}
body.psp-2026 input:disabled,
body.psp-2026 select:disabled,
body.psp-2026 textarea:disabled {
    background: var(--psp-bg) !important;
    color: var(--psp-ink-soft) !important;
    cursor: not-allowed;
}
body.psp-2026 textarea { min-height: 84px; line-height: 1.5; resize: vertical; }
body.psp-2026 select { min-width: 190px; cursor: pointer; }

/* Checkboxes and radios: the browser defaults are tiny and hard to hit. */
body.psp-2026 input[type=checkbox],
body.psp-2026 input[type=radio] {
    width: 16px; height: 16px;
    accent-color: var(--psp-brand);
    cursor: pointer;
    vertical-align: middle;
}

/* --- buttons -------------------------------------------------------------- */
/* .cssbutton_big carried a GIF background and 2px ridge borders. */
body.psp-2026 .cssbutton,
body.psp-2026 .cssbutton_big,
body.psp-2026 .form_input_button,
body.psp-2026 input[type=submit],
body.psp-2026 input[type=button],
/* :not(.psp-reveal) - the show/hide password toggle is a <button> but is not a
   button in the visual sense, and every declaration in this rule is !important,
   so it could not be overridden from a later rule without starting an
   !important war. Excluding it here is the honest fix and keeps the next
   in-field control from hitting the same wall. */
body.psp-2026 button:not(.psp-reveal) {
    font-family: var(--psp-font) !important;
    font-size: 13.5px !important;
    font-weight: 600 !important;
    padding: 9px 18px !important;
    color: #fff !important;
    background: var(--psp-brand) !important;
    background-image: none !important;      /* drop back_button.gif */
    border: 1px solid var(--psp-brand-dark) !important;
    border-radius: var(--psp-radius-sm) !important;
    cursor: pointer;
    transition: background .13s;
    width: auto !important;
}
body.psp-2026 .cssbutton:hover,
body.psp-2026 .cssbutton_big:hover,
body.psp-2026 .form_input_button:hover,
body.psp-2026 input[type=submit]:hover,
body.psp-2026 input[type=button]:hover,
body.psp-2026 button:hover { background: var(--psp-brand-dark) !important; }
body.psp-2026 input[type=submit]:focus-visible,
body.psp-2026 button:focus-visible {
    outline: 3px solid rgba(84,132,168,.45); outline-offset: 2px;
}
body.psp-2026 .form_input_button_disabled,
body.psp-2026 input[type=submit]:disabled {
    background: var(--psp-border) !important;
    border-color: var(--psp-border) !important;
    color: var(--psp-ink-soft) !important;
    cursor: not-allowed;
}

/* --- hints and required markers ------------------------------------------- */
/* .liens was 10px bolder #cc0033 - used 51 times on a single form, which turns
   a blank form into a wall of red. Hints are grey; the asterisk stays red
   because that is the one thing that genuinely means "you must fill this in". */
body.psp-2026 .liens {
    font-family: var(--psp-font) !important;
    font-size: 11.5px !important;
    font-weight: 400 !important;
    color: var(--psp-ink-soft) !important;
    display: inline-block;
    margin-top: 3px;
}
body.psp-2026 td.tableBodyLeft:has(+ td) { position: relative; }
/* The label text carries a literal "*" for required fields. */
body.psp-2026 .form_error,
body.psp-2026 .error { color: var(--psp-danger) !important; font-size: 12.5px; }

/* --- the jQuery UI date picker -------------------------------------------- */
body.psp-2026 .ui-datepicker {
    font-family: var(--psp-font) !important;
    font-size: 13px;
    border: 1px solid var(--psp-border) !important;
    border-radius: var(--psp-radius) !important;
    box-shadow: var(--psp-shadow);
    padding: 6px;
    /* Float above the sticky list header (z-index 5) and the quick-filter/search
       chrome - jQuery UI's own computed z-index was leaving the calendar behind
       the blue header bar, hiding its first two rows. */
    z-index: 3000 !important;
}
body.psp-2026 .ui-datepicker .ui-datepicker-header {
    background: var(--psp-brand) !important;
    border: 0 !important;
    border-radius: var(--psp-radius-sm) !important;
    color: #fff !important;
}
body.psp-2026 .ui-datepicker td a { border-radius: var(--psp-radius-sm); }
body.psp-2026 .ui-state-highlight,
body.psp-2026 .ui-state-active {
    background: var(--psp-brand) !important; color: #fff !important; border-color: var(--psp-brand-dark) !important;
}

/* --- buttons, second generation ------------------------------------------- */
/* Real <button> elements with an inline SVG icon, replacing the <input
   type=image> controls whose GIFs are missing. */
.psp-btn2 {
    display: inline-flex; align-items: center; gap: 8px;
    padding: 9px 17px;
    font-family: var(--psp-font); font-size: 13.5px; font-weight: 600;
    border-radius: var(--psp-radius-sm);
    cursor: pointer; white-space: nowrap;
    transition: background .13s, border-color .13s, color .13s;
}
.psp-btn__ico { width: 16px; height: 16px; flex: 0 0 auto; }

.psp-btn2--primary {
    color: #fff; background: var(--psp-brand); border: 1px solid var(--psp-brand-dark);
}
.psp-btn2--primary:hover { background: var(--psp-brand-dark); }

.psp-btn2--ghost {
    color: var(--psp-ink-soft); background: var(--psp-surface);
    border: 1px solid var(--psp-border);
}
.psp-btn2--ghost:hover { background: var(--psp-bg); color: var(--psp-ink); }

.psp-btn2--danger {
    color: var(--psp-danger); background: var(--psp-surface); border: 1px solid #E9C6C3;
}
.psp-btn2--danger:hover { background: var(--psp-danger); color: #fff; border-color: var(--psp-danger); }

.psp-btn2:focus-visible { outline: 3px solid rgba(84,132,168,.45); outline-offset: 2px; }

/* Buttons usually sit in their own row at the foot of a form. */
body.psp-2026 td:has(> .psp-btn2) { padding-top: 16px !important; padding-bottom: 16px !important; }

/* Show/hide password toggle. Sits inside the field rather than beside it, so it
   cannot be pushed onto its own line by the twenty-year-old table layouts these
   forms are built from. */
/* display:block, not inline-block. An inline-block wrapper shrinks to its
   content, and the field inside sizes itself at 100% OF THAT - so wrapping a
   344px-wide password box collapsed it to 172px while the username box beside
   it stayed full width. */
.psp-reveal-wrap { position: relative; display: block; width: 100%; }
.psp-reveal-wrap > input { padding-right: 34px; width: 100%; box-sizing: border-box; }

/* `body.psp-2026 button.psp-reveal`, matching the specificity of the rule that
   was beating it - which turned out to be THIS stylesheet's own
   `body.psp-2026 button` (0,2,1), not a legacy sheet. `button.psp-reveal` is
   only (0,1,1) and lost, so the toggle rendered as a solid brand-blue submit
   button beside the field instead of a grey glyph inside it. Equal specificity
   plus a later position wins. Every inherited property is reset explicitly. */
body.psp-2026 button.psp-reveal {
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%);
    display: inline-flex; align-items: center; justify-content: center;
    width: 26px; height: 26px; min-width: 0; padding: 0; margin: 0;
    background: none; background-image: none; border: 0; box-shadow: none;
    border-radius: 6px; cursor: pointer; line-height: 1;
    color: var(--psp-ink-soft); font: inherit;
}
body.psp-2026 button.psp-reveal:hover { color: var(--psp-brand-dark); background: var(--psp-bg); }
body.psp-2026 button.psp-reveal:focus-visible { outline: 2px solid var(--psp-brand); outline-offset: 1px; }

/* ---------------------------------------------------------------------------
 * The worklist.
 *
 * Given prominence over the measurement panels because the job this screen
 * exists to support is moving cases through, and no count of last month's
 * throughput moves one. It gets the strong background so the eye lands here
 * first and the statistics read as context underneath.
 * ------------------------------------------------------------------------- */
.psp-work {
    background: var(--psp-surface);
    border: 1px solid var(--psp-border);
    border-top: 3px solid var(--psp-brand);
    border-radius: var(--psp-radius);
    padding: 20px 22px 18px;
    margin-bottom: 26px;
}
.psp-work__head  { margin-bottom: 14px; }
.psp-work__title { margin: 0; font-size: 17px; font-weight: 650; color: var(--psp-ink); }
.psp-work__sub   { margin: 4px 0 0; font-size: 12.5px; }

.psp-work__cards {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 10px; margin-bottom: 14px;
}

/* Each card is a link to the same page with a different bucket selected, so the
   choice survives a refresh and can be sent to someone. No script involved. */
.psp-workcard {
    display: block; padding: 13px 15px; text-decoration: none;
    background: var(--psp-bg); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm);
    transition: border-color .12s, background .12s;
}
.psp-workcard:hover { border-color: var(--psp-brand); background: #fff; }
.psp-workcard__n {
    display: block; font-size: 24px; font-weight: 700; line-height: 1.1;
    color: var(--psp-brand-darker); font-variant-numeric: tabular-nums;
}
.psp-workcard__l {
    display: block; margin-top: 4px; font-size: 12px; color: var(--psp-ink-soft);
}
/* The selected card is filled rather than merely outlined: an outline alone is
   easy to miss when three cards sit together and one of them is already hovered. */
.psp-workcard.is-active {
    background: var(--psp-brand); border-color: var(--psp-brand-dark);
}
.psp-workcard.is-active .psp-workcard__n,
.psp-workcard.is-active .psp-workcard__l { color: #fff; }
.psp-workcard.is-active .psp-workcard__l { opacity: .88; }

/* An empty bucket is good news, so it is not tinted like a warning. */
.psp-workcard.is-empty .psp-workcard__n { color: var(--psp-ink-soft); }

.psp-work__note  { margin: 0 0 12px; font-size: 12.5px; color: var(--psp-ink-soft); }
.psp-work__empty { margin: 8px 0 0; }
.psp-work__more  { margin: 10px 0 0; font-size: 12px; }
.psp-work__table { margin-top: 2px; }

/* The row action. Right-aligned so the eye can run down a single column of
   them rather than hunting along each row. */
.psp-go {
    display: inline-block; padding: 3px 10px; font-size: 12px; font-weight: 600;
    color: var(--psp-brand-dark); background: var(--psp-bg);
    border: 1px solid var(--psp-border); border-radius: 999px; text-decoration: none;
    white-space: nowrap;
}
.psp-go:hover { background: var(--psp-brand); border-color: var(--psp-brand-dark); color: #fff; text-decoration: none; }

/* Section divider for the measurement half of the page. */
.psp-page__section      { margin: 0 0 12px; }
.psp-page__sectiontitle { margin: 0; font-size: 15px; font-weight: 650; color: var(--psp-ink); }
.psp-page__sectionsub   { margin: 3px 0 0; font-size: 12.5px; }

/* ---------------------------------------------------------------------------
 * Header: the work in the bar, your account behind your name.
 *
 * The bar previously listed ten items in one flat row - the daily screens, the
 * reference data, your own settings and a support module with seventeen tickets
 * in it, all weighted identically. At normal widths the last two wrapped out of
 * sight, so the row also lied about what was there.
 * ------------------------------------------------------------------------- */

/* A hairline between the daily screens and the reference ones. Grouping without
   adding another label to read. */
.psp-shell__sep {
    width: 1px; align-self: center; height: 18px;
    background: rgba(255,255,255,.28); margin: 0 6px; flex: 0 0 auto;
}
/* Reference screens are real, just not daily. Slightly recessed so the eye
   lands on the work first. */
.psp-shell__link--ref { opacity: .82; }
.psp-shell__link--ref:hover { opacity: 1; }

/* The one action a member is here to take. */
.psp-shell__link--cta {
    background: rgba(255,255,255,.16);
    border: 1px solid rgba(255,255,255,.34);
    border-radius: 999px; padding-left: 13px; padding-right: 13px;
}
.psp-shell__link--cta:hover { background: rgba(255,255,255,.26); }

/* ---------------------------------------------------------------------------
 * Account menu.
 *
 * <details>/<summary>, so it opens and closes with no JavaScript at all: no
 * inline handler to permit, nothing to fail if a script is blocked, and it is
 * keyboard-operable for free because <summary> is already a button.
 * ------------------------------------------------------------------------- */
.psp-usermenu { position: relative; flex: 0 0 auto; }

.psp-usermenu__button {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 10px 5px 5px; border-radius: 999px; cursor: pointer;
    color: #fff; font-size: 13px; list-style: none; white-space: nowrap;
}
/* Safari still paints the default disclosure triangle without this. */
.psp-usermenu__button::-webkit-details-marker { display: none; }
.psp-usermenu__button::marker { content: ''; }
.psp-usermenu__button:hover      { background: rgba(255,255,255,.14); }
.psp-usermenu__button:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }

.psp-usermenu__name { font-weight: 600; }
.psp-usermenu__chev { font-size: 10px; opacity: .8; }
.psp-usermenu[open] .psp-usermenu__chev { transform: rotate(180deg); }

.psp-usermenu__panel {
    position: absolute; right: 0; top: calc(100% + 8px); z-index: 60;
    min-width: 210px; padding: 6px;
    background: var(--psp-surface); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius); box-shadow: 0 10px 28px rgba(16,32,45,.16);
}
.psp-usermenu__panel a {
    display: block; padding: 9px 12px; border-radius: var(--psp-radius-sm);
    color: var(--psp-ink); font-size: 13px; text-decoration: none;
}
.psp-usermenu__panel a:hover { background: var(--psp-bg); color: var(--psp-brand-darker); }
/* Divider between "your account" items and the reference/admin screens moved
   under the name from the bar. */
.psp-usermenu__sep { display: block; height: 1px; margin: 5px 8px;
    background: var(--psp-border); }

/* Signing out leaves the application, so it is separated from the settings
   above it - the one item here with a consequence. */
.psp-usermenu__out {
    margin-top: 4px; border-top: 1px solid var(--psp-border);
    border-radius: 0 0 var(--psp-radius-sm) var(--psp-radius-sm);
    color: var(--psp-ink-soft) !important;
}

@media (max-width: 760px) {
    .psp-usermenu__name { display: none; }   /* the avatar is enough */
    .psp-shell__sep     { display: none; }
}

/* A stored value that predates the current format rules.
 *
 * Amber, not red: the record still saves, nothing is blocked, and this is a
 * "worth fixing when you are here" rather than an error. Red would send people
 * to support over a phone number typed in 2011. */
.psp-legacy {
    display: inline-block; margin-left: 8px; padding: 2px 8px;
    font-size: 11.5px; line-height: 1.5;
    color: #8A6410; background: #FFFBF2;
    border: 1px solid #E8D3A8; border-radius: 999px;
    vertical-align: middle;
}

/* A masked social security number. Looks clickable, because it is - the full
   number is fetched on demand and the request is recorded. */
.psp-ssn {
    cursor: pointer; border-bottom: 1px dotted var(--psp-ink-soft);
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.psp-ssn:hover { border-bottom-color: var(--psp-brand); color: var(--psp-brand-darker); }
.psp-ssn:focus-visible { outline: 2px solid var(--psp-brand); outline-offset: 2px; }
.psp-ssn.is-shown { border-bottom-style: solid; border-bottom-color: var(--psp-brand); }

/* Inline "add one of these" form at the foot of a management panel. */
.psp-inline-form {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--psp-border);
}
.psp-inline-form label { font-size: 12.5px; color: var(--psp-ink-soft); }

/* Result of an action. Green states what happened; amber says why it did not.
   Neither is red: nothing on this screen is an emergency. */
.psp-flash {
    margin: 0 0 16px; padding: 11px 14px; border-radius: var(--psp-radius-sm);
    font-size: 13.5px; border: 1px solid;
}
.psp-flash--ok  { color: #1F6B41; background: #E7F4ED; border-color: #BFE3CE; }
.psp-flash--bad { color: #8A6410; background: #FFFBF2; border-color: #E8D3A8; }

/* Status report: what was found, and where it stands. */
table.psp-report td { vertical-align: top; padding: 13px 10px; }
.psp-report__what   { width: 68%; }
.psp-report__why    { margin-top: 4px; font-size: 12.5px; line-height: 1.5; }
.psp-report__state  { text-align: right; white-space: normal; }
.psp-report__detail { margin-top: 5px; font-size: 12px; }

.psp-badge {
    display: inline-block; padding: 3px 10px; border-radius: 999px;
    font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.psp-badge--ok   { color: #1F6B41; background: #E7F4ED; }
.psp-badge--part { color: #2A5C86; background: #E8F0F7; }
.psp-badge--todo { color: #6B6357; background: #F1EFEA; }
.psp-badge--bad  { color: #A3372C; background: #FBEDEB; }

/* Email preview. */
.psp-mailwhy     { margin: 12px 0 16px; }
.psp-mailsubject { margin: 0 0 8px; font-size: 15px; font-weight: 600; color: var(--psp-ink); }
.psp-mailframe {
    width: 100%; height: 520px; border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm); background: #fff;
}
.psp-mailtext {
    margin: 0; padding: 14px; max-height: 320px; overflow: auto;
    background: var(--psp-bg); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm);
    font-size: 12.5px; line-height: 1.55; white-space: pre-wrap;
}

/* Page-level download actions. Deliberately not .psp-go, which is the small
   pill used for a row action inside a table - reusing it here would make
   "Download PDF" the same visual weight as a link in the twentieth row of a
   list, when it is one of the two things this page is for. */
/* Written as `body.psp-2026 a.psp-download` rather than `.psp-download`, and
   the reason is worth stating: line 168 sets `body.psp-2026 a` - which is
   specificity (0,1,1) and therefore BEATS a lone class at (0,1,0). A plain
   .psp-download rule lost the colour and drew this label in the same blue as
   its own background, so the button came out as a solid blue rectangle with
   invisible text. Scoping it wins on specificity honestly; !important here
   would only start the next argument. */
.psp-page__actions { display: flex; gap: 8px; flex-wrap: wrap; }
body.psp-2026 a.psp-download {
    display: inline-block; padding: 8px 16px; font-size: 13px; font-weight: 600;
    color: #fff; background: var(--psp-brand-dark);
    border: 1px solid var(--psp-brand-darker); border-radius: var(--psp-radius-sm);
    text-decoration: none; white-space: nowrap;
}
body.psp-2026 a.psp-download:hover {
    background: var(--psp-brand-darker); color: #fff; text-decoration: none;
}
body.psp-2026 a.psp-download--soft {
    color: var(--psp-brand-dark); background: var(--psp-surface);
    border-color: var(--psp-border);
}
body.psp-2026 a.psp-download--soft:hover {
    background: var(--psp-brand-tint); color: var(--psp-brand-darker);
}
.psp-apihint { margin: -8px 0 20px; font-size: 12.5px; line-height: 1.6; max-width: 70ch; }

/* API reference. */
.psp-apiintro p  { margin: 0 0 12px; font-size: 13.5px; line-height: 1.6; }
.psp-apiintro h4 { margin: 16px 0 6px; font-size: 13px; font-weight: 650; color: var(--psp-ink); }
.psp-apiurl      { margin: 0 0 6px; }

.psp-endpoint {
    border: 1px solid var(--psp-border); border-radius: var(--psp-radius-sm);
    margin-bottom: 8px; background: var(--psp-surface);
}
.psp-endpoint > summary {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    padding: 11px 14px; cursor: pointer; list-style: none;
}
.psp-endpoint > summary::-webkit-details-marker { display: none; }
.psp-endpoint > summary::marker { content: ''; }
.psp-endpoint[open] > summary { border-bottom: 1px solid var(--psp-border); }
.psp-endpoint__path { font-size: 13px; font-weight: 600; color: var(--psp-ink); }
.psp-endpoint__sum  { font-size: 12.5px; color: var(--psp-ink-soft); }
.psp-endpoint__desc,
.psp-endpoint__ctype,
.psp-endpoint__resp,
.psp-endpoint__exlabel { padding: 0 14px; }
.psp-endpoint__desc p  { margin: 10px 0; font-size: 13px; line-height: 1.6; }
.psp-endpoint table    { margin: 6px 0 12px; }
.psp-endpoint__resp    { margin: 10px 0 4px; font-size: 13px; }
.psp-endpoint pre      { margin: 0 14px 12px; }

.psp-verb {
    display: inline-block; padding: 2px 9px; border-radius: 4px;
    font-size: 11px; font-weight: 700; letter-spacing: .04em; color: #fff;
}
.psp-verb--get  { background: #2A7A52; }
.psp-verb--post { background: var(--psp-brand-dark); }

/* Test clock notice. Deliberately loud: every date on the screen is wrong by
   design while this is showing, and somebody reading a follow-up date needs to
   know that before they act on it. */
.psp-clockbar {
    padding: 7px 16px;
    font-size: 12.5px; font-weight: 600; line-height: 1.5;
    color: #4a3208; background: #FDF0D5;
    border-bottom: 1px solid #E4C77A;
    text-align: center;
}
.psp-clockbar strong { font-weight: 700; }

/* Sortable headings on the REPORTING tables.
   The rule above was written for the legacy grid, whose header row is dark, so
   its hover paints the cell brand-dark and its focus ring is white. Both are
   wrong against these headers, which are light. Same affordance, colours that
   belong to this table. */
body.psp-2026 table.psp-kpi th.psp-sortable:hover {
    background: var(--psp-brand-tint) !important;
    color: var(--psp-brand-darker);
}
body.psp-2026 table.psp-kpi th.psp-sortable:focus-visible {
    outline: 2px solid var(--psp-brand-dark); outline-offset: -3px;
}
body.psp-2026 table.psp-kpi th.psp-sortable[data-sort]::after { color: var(--psp-brand-dark); }

/* The row-count line under a work list. */
.psp-work__more { margin: 12px 2px 0; font-size: 12.5px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* ===========================================================================
   Dialogs and toasts
   Replacing the browser's alert() and confirm(), which cannot be styled, stop
   the page dead, and look like something the BROWSER said rather than
   something this application said.
   =========================================================================== */
.psp-dlg__back {
    position: fixed; inset: 0; z-index: 9999;
    display: flex; align-items: center; justify-content: center;
    padding: 24px;
    background: rgba(28, 43, 54, .45);
    animation: psp-dlg-in .12s ease-out;
}
@keyframes psp-dlg-in { from { opacity: 0 } to { opacity: 1 } }

.psp-dlg {
    width: min(30rem, 100%);
    background: var(--psp-surface);
    border-radius: var(--psp-radius);
    box-shadow: var(--psp-shadow);
    padding: 22px 24px 18px;
    border-top: 3px solid var(--psp-brand-dark);
}
.psp-dlg--danger { border-top-color: var(--psp-danger); }

.psp-dlg__title {
    margin: 0 0 8px; font-size: 15.5px; font-weight: 700; color: var(--psp-ink);
}
.psp-dlg__body {
    margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--psp-ink-soft);
    white-space: pre-line;          /* the old messages carry their own line breaks */
}
.psp-dlg__actions { display: flex; justify-content: flex-end; gap: 8px; }

body.psp-2026 .psp-dlg__btn,
body.psp-topbar .psp-dlg__btn {
    padding: 8px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
    color: var(--psp-brand-dark); background: var(--psp-surface);
    border: 1px solid var(--psp-border); border-radius: var(--psp-radius-sm);
}
body.psp-2026 .psp-dlg__btn:hover { background: var(--psp-bg); }
body.psp-2026 .psp-dlg__btn--go {
    color: #fff; background: var(--psp-brand-dark); border-color: var(--psp-brand-darker);
}
body.psp-2026 .psp-dlg__btn--go:hover { background: var(--psp-brand-darker); }
body.psp-2026 .psp-dlg__btn--danger {
    background: var(--psp-danger); border-color: var(--psp-danger);
}
body.psp-2026 .psp-dlg__btn--danger:hover { background: #8f1e17; }
.psp-dlg__btn:focus-visible { outline: 2px solid var(--psp-brand-dark); outline-offset: 2px; }

/* Toast: something worth saying that needs no answer. */
.psp-toast {
    position: fixed; z-index: 9998; left: 50%; bottom: 28px; transform: translateX(-50%);
    max-width: min(34rem, calc(100% - 32px));
    padding: 11px 18px; border-radius: var(--psp-radius-sm);
    font-size: 13px; font-weight: 500; line-height: 1.5;
    color: #fff; background: var(--psp-ink);
    box-shadow: var(--psp-shadow);
    animation: psp-toast-in .16s ease-out;
}
.psp-toast--error { background: var(--psp-danger); }
.psp-toast--ok    { background: var(--psp-ok); }
.psp-toast.is-going { opacity: 0; transition: opacity .55s ease; }
@keyframes psp-toast-in { from { opacity: 0; transform: translate(-50%, 8px) } }

/* Quick filters: the same few questions, on every list. */
.psp-quickfilter {
    display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 10px 12px;
    background: var(--psp-surface); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm);
}
.psp-quickfilter__label {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: var(--psp-ink-soft); margin-right: 2px;
}
body.psp-2026 a.psp-chip {
    display: inline-block; padding: 4px 12px; border-radius: 999px;
    font-size: 12.5px; font-weight: 600; text-decoration: none; white-space: nowrap;
    color: var(--psp-brand-dark); background: var(--psp-bg);
    border: 1px solid var(--psp-border);
}
body.psp-2026 a.psp-chip:hover { background: var(--psp-brand-tint); text-decoration: none; }
body.psp-2026 a.psp-chip.is-on {
    color: #fff; background: var(--psp-brand-dark); border-color: var(--psp-brand-darker);
}
body.psp-2026 a.psp-chip--clear { color: var(--psp-ink-soft); background: transparent; border-style: dashed; }

/* ===========================================================================
   2026 refinement pass
   ---------------------------------------------------------------------------
   The rule for everything below: NOTHING MOVES. Same screens, same columns in
   the same order, same words, same place on the page. People know where things
   are and relearning a layout costs them real time.

   What changes is the finish - the parts that still read as a 2005 web page
   even after the colours were replaced: hard 1px boxes around every input,
   text that sits tight against its edges, rows that give no feedback under the
   pointer, buttons that look like the operating system drew them. None of it
   is decoration for its own sake; each one is a thing a person notices while
   using the screen all day.
   =========================================================================== */

/* --- inputs: room to breathe, and a focus ring you can actually see ------- */
body.psp-2026 .form_input_text,
body.psp-2026 .form_input_select,
body.psp-2026 .form_input_textarea,
body.psp-2026 input[type="text"],
body.psp-2026 input[type="password"],
body.psp-2026 input[type="email"],
body.psp-2026 input[type="number"],
body.psp-2026 select,
body.psp-2026 textarea {
    padding: 7px 10px;
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm);
    font-family: var(--psp-font);
    font-size: 13.5px;
    color: var(--psp-ink);
    background-color: #fff;
    transition: border-color .12s, box-shadow .12s;
}
body.psp-2026 .form_input_text:hover,
body.psp-2026 select:hover,
body.psp-2026 textarea:hover { border-color: var(--psp-brand); }

/* A ring rather than the browser's default outline: the default sits ON the
   border and is invisible against a dark header row. */
body.psp-2026 .form_input_text:focus,
body.psp-2026 .form_input_select:focus,
body.psp-2026 .form_input_textarea:focus,
body.psp-2026 input:focus,
body.psp-2026 select:focus,
body.psp-2026 textarea:focus {
    outline: none;
    border-color: var(--psp-brand-dark);
    box-shadow: 0 0 0 3px rgba(84, 132, 168, .22);
}

/* --- rows: say which one the pointer is on ------------------------------- */
body.psp-2026 tr:hover > td.tableBody { background-color: #F5F9FC !important; }

/* Keep the striping, but softer - the old one was strong enough to read as a
   status colour, which on a list of medical requests it is not. */
body.psp-2026 .tableBody { transition: background-color .1s; }

/* --- buttons: one shape, everywhere -------------------------------------- */
body.psp-2026 input[type="submit"],
body.psp-2026 input[type="button"],
body.psp-2026 button:not(.psp-dlg__btn):not(.psp-reveal):not(.psp-sortable) {
    padding: 7px 15px;
    border-radius: var(--psp-radius-sm);
    border: 1px solid var(--psp-brand-darker);
    background: var(--psp-brand-dark);
    color: #fff;
    font-family: var(--psp-font);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: background-color .12s;
}
body.psp-2026 input[type="submit"]:hover,
body.psp-2026 input[type="button"]:hover,
body.psp-2026 button:not(.psp-dlg__btn):not(.psp-reveal):not(.psp-sortable):hover {
    background: var(--psp-brand-darker);
}
body.psp-2026 input[type="submit"]:focus-visible,
body.psp-2026 button:focus-visible {
    outline: 2px solid var(--psp-brand-darker); outline-offset: 2px;
}

/* --- panels: lift the content off the page ------------------------------- */
body.psp-2026 .toppage_maintable,
body.psp-2026 .form_table {
    border-radius: var(--psp-radius);
    overflow: hidden;
}

/* --- the pointer says what is clickable ---------------------------------- */
body.psp-2026 a[href] img { transition: opacity .12s; }
body.psp-2026 a[href]:hover img { opacity: .72; }

/* --- density: the old grid crowded every cell ---------------------------- */
body.psp-2026 td.tableBody { padding: 8px 8px; line-height: 1.45; }

/* --- respect a reduced-motion preference --------------------------------- */
@media (prefers-reduced-motion: reduce) {
    body.psp-2026 *,
    body.psp-2026 *::before,
    body.psp-2026 *::after { transition: none !important; animation: none !important; }
}

/* --- the search panel's comparison operators ------------------------------
   Each of these cells is a radio button followed by its symbol - ">", "> =",
   "=". Giving the text inputs room in the refinement pass widened the first
   column enough to squeeze these, and the symbol wrapped onto a second line
   underneath its own radio: a column of bare circles with a row of stray
   ">" and "=" below them, which is what a broken form looks like.

   The radio and the symbol it labels are one thing and must not be split. */
body.psp-2026 .fontstyle_searchoptions {
    white-space: nowrap;
    padding: 4px 6px;
    vertical-align: middle;
}
body.psp-2026 .fontstyle_searchoptions input[type="radio"] {
    margin: 0 3px 0 0;
    vertical-align: middle;
}
/* The search panel's own text inputs stay compact: this is a dense grid of
   twelve rows, and the roomier sizing belongs on the edit forms, not here. */
body.psp-2026 .fontstyle_searchoptions input[type="text"],
body.psp-2026 .bgcolor_005 input[type="text"] {
    padding: 4px 7px;
    font-size: 13px;
}
/* Labels in the left column were wrapping mid-phrase - "Applicant Full / Name",
   "Medical Record / Number" - because the column had no minimum. */
body.psp-2026 .bgcolor_004,
body.psp-2026 .bgcolor_002 { min-width: 9.5rem; }

/* A search kept in the session stays applied to paging, sorting, and to the
   list next time somebody opens it - invisibly. This is the sign that says so,
   with the way out beside it. Amber rather than red: it is a state to notice,
   not a fault. */
.psp-searchnotice {
    display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
    margin: 0 0 12px; padding: 9px 14px;
    background: #FFF8E6; border: 1px solid #E8D9A8;
    border-radius: var(--psp-radius-sm);
    font-size: 13px; color: #6B5518;
}
.psp-searchnotice__tag {
    font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
    color: #8A6D1B;
}
.psp-searchnotice__what { flex: 1 1 auto; }
body.psp-2026 a.psp-searchnotice__clear {
    padding: 4px 12px; border-radius: 999px; text-decoration: none;
    font-size: 12.5px; font-weight: 600; white-space: nowrap;
    color: #6B5518; background: #fff; border: 1px solid #E8D9A8;
}
body.psp-2026 a.psp-searchnotice__clear:hover { background: #FFF1CC; text-decoration: none; }

/* --- search field widths --------------------------------------------------
   Every box on the search panel was the same size, so a surname and a fee and
   a date looked equally likely to need the same input. Width is the cheapest
   signal a form has about what belongs in a field, and it was unused. */
body.psp-2026 .psp-sf--short { width: 8rem; }
body.psp-2026 .psp-sf--mid   { width: 12rem; }
body.psp-2026 .psp-sf--wide  { width: 100%; max-width: 22rem; }

body.psp-2026 .fontstyle_searchoptions input[type="text"]::placeholder,
body.psp-2026 .bgcolor_005 input[type="text"]::placeholder {
    color: #9AAAB5; font-style: normal;
}

/* The row label column: right-aligned against its field, so the eye runs down
   one edge instead of a ragged one. */
body.psp-2026 .bgcolor_004,
body.psp-2026 .bgcolor_002 {
    text-align: left; padding: 8px 12px; vertical-align: middle;
    font-size: 12.5px; line-height: 1.3;
}

/* The panel breathes: it was a dense grid with cells touching. */
body.psp-2026 .bgcolor_005 { padding: 6px 10px; }

/* On a narrow screen the operator choices are the first thing to overflow, so
   let that one region scroll rather than the whole page. */
@media (max-width: 900px) {
    body.psp-2026 .bgcolor_005 > table { display: block; overflow-x: auto; }
}

/* --- the search panel, made compact ---------------------------------------
   Twelve rows of one field each, every row as tall as a form field plus its
   padding, pushed the Search button below the fold and the results off the
   screen entirely. A search panel is scanned, not read: the whole point is to
   see every field at once, decide which one you want, and type in it.

   These are the row heights, not the field sizes - the boxes stay comfortable
   to type in. */
body.psp-2026 .searchhandler_table1 td { padding-top: 3px; padding-bottom: 3px; }
body.psp-2026 .searchhandler_table1 .bgcolor_004,
body.psp-2026 .searchhandler_table1 .bgcolor_002 {
    padding: 4px 12px; font-size: 12px; line-height: 1.25;
}
body.psp-2026 .searchhandler_table1 .bgcolor_005 { padding: 3px 8px; }
body.psp-2026 .searchhandler_table1 input[type="text"],
body.psp-2026 .searchhandler_table1 select {
    padding: 5px 9px; font-size: 13px;
}
body.psp-2026 .searchhandler_table1 .fontstyle_searchoptions { padding: 2px 6px; }

/* The operator choices sit closer to each other than to the next column, so a
   row reads as one thing rather than five loose circles. */
body.psp-2026 .searchhandler_table1 .fontstyle_searchoptions input[type="radio"] {
    margin: 0 2px 0 0;
}

/* Give the whole panel a frame so it reads as one region rather than as the
   page having sprouted a second table. */
body.psp-2026 .searchhandler_table1 {
    border-radius: var(--psp-radius); overflow: hidden;
    box-shadow: var(--psp-shadow);
}

/* The quick-find row: box and button on one line.
   Making the box full width pushed the button onto a second line and gave a
   one-field form two rows of height, directly above a list that wants the
   space. */
body.psp-2026 .psp-quickfind {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
body.psp-2026 input[name="filterprefix"] {
    flex: 1 1 22rem; max-width: 34rem; margin: 0;
}
body.psp-2026 .psp-quickfind button { margin: 0; }

/* ===========================================================================
   The search panel, redesigned
   ---------------------------------------------------------------------------
   Everything above this point tidied the old table: tighter rows, sensible
   widths, hints in the boxes. It was still a 2005 form - a grid of dark blue
   blocks down the left, hairlines between every cell, and four naked radio
   buttons per row.

   The MARKUP is untouched, deliberately. It is a <table> emitted by shared
   framework code that every list screen uses, and the search behaviour is
   covered by tests that post to it. Rewriting that markup to modernise one
   panel would risk the behaviour on every screen to change how one looks. So
   this is done entirely in CSS, over the structure that is already there.
   =========================================================================== */

/* The panel is a card, not a table lying on the page. */
body.psp-2026 table.searchhandler_table1 {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    background: var(--psp-surface);
    border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius);
    box-shadow: var(--psp-shadow);
    overflow: hidden;
}

/* Labels: quiet, right-aligned against their field, on the page's own
   background. The dark blue blocks were the single loudest thing on a screen
   whose actual content is the list underneath. */
body.psp-2026 table.searchhandler_table1 .bgcolor_004,
body.psp-2026 table.searchhandler_table1 .bgcolor_002 {
    background: transparent !important;
    width: 13rem; min-width: 0;
    padding: 7px 16px 7px 18px;
    text-align: right;
    vertical-align: middle;
    border: 0;
    border-right: 1px solid var(--psp-border);
}
body.psp-2026 table.searchhandler_table1 .fontstyle_003 {
    color: var(--psp-ink-soft) !important;
    font-family: var(--psp-font) !important;
    font-size: 12.5px !important;
    font-weight: 600 !important;
    letter-spacing: 0 !important;
    text-transform: none !important;
}

/* Field side: one flat surface, no stripes, no hairlines between cells. */
body.psp-2026 table.searchhandler_table1 .bgcolor_005,
body.psp-2026 table.searchhandler_table1 .bgcolor_003 {
    background: transparent !important;
    border: 0;
    padding: 5px 14px;
}
body.psp-2026 table.searchhandler_table1 tr + tr .bgcolor_004,
body.psp-2026 table.searchhandler_table1 tr + tr .bgcolor_002,
body.psp-2026 table.searchhandler_table1 tr + tr .bgcolor_005 {
    border-top: 1px solid #EDF2F6;
}
body.psp-2026 table.searchhandler_table1 tr:hover .bgcolor_005 { background: #FAFCFE !important; }

/* Inner tables the framework nests inside a cell carry their own borders. */
body.psp-2026 table.searchhandler_table1 table,
body.psp-2026 table.searchhandler_table1 table td {
    border: 0 !important; background: transparent !important;
}

/* The match modes read as a set of choices rather than loose circles. */
body.psp-2026 table.searchhandler_table1 .fontstyle_searchoptions {
    color: var(--psp-ink-soft) !important;
    font-family: var(--psp-font) !important;
    font-size: 12.5px !important;
    white-space: nowrap;
    padding: 3px 10px 3px 2px;
}
body.psp-2026 table.searchhandler_table1 input[type="radio"],
body.psp-2026 table.searchhandler_table1 input[type="checkbox"] {
    accent-color: var(--psp-brand-dark);
    width: 14px; height: 14px;
    margin: 0 5px 0 0;
    vertical-align: -2px;
    cursor: pointer;
}

/* Fields: one consistent control, and a focus ring that is actually visible. */
body.psp-2026 table.searchhandler_table1 input[type="text"],
body.psp-2026 table.searchhandler_table1 select {
    background: var(--psp-bg);
    border: 1px solid transparent;
    border-radius: var(--psp-radius-sm);
    padding: 6px 10px;
    font-size: 13px;
    transition: background .12s, border-color .12s, box-shadow .12s;
}
body.psp-2026 table.searchhandler_table1 input[type="text"]:hover,
body.psp-2026 table.searchhandler_table1 select:hover { border-color: var(--psp-border); }
body.psp-2026 table.searchhandler_table1 input[type="text"]:focus,
body.psp-2026 table.searchhandler_table1 select:focus {
    background: #fff;
    border-color: var(--psp-brand-dark);
    box-shadow: 0 0 0 3px rgba(84,132,168,.18);
    outline: none;
}

/* The action row sits apart from the fields. */
body.psp-2026 table.searchhandler_table1 tr:last-child .bgcolor_005,
body.psp-2026 table.searchhandler_table1 tr:last-child .bgcolor_004 {
    background: #FBFDFE !important;
    padding-top: 12px; padding-bottom: 12px;
    border-top: 1px solid var(--psp-border);
}

/* The stray "Search APS" caption the old layout parks beside the panel. */
body.psp-2026 .tohide > center { display: block; }


/* ===========================================================================
   Search panel: force off any decoration, and style the new dropdowns
   ---------------------------------------------------------------------------
   Reported as underlined text throughout the panel in Chrome, while the same
   Chromium engine inspected here computes text-decoration: none on every
   element - which means a stale cached rule on the reporting machine. Rather
   than hunt a rule that is not in the live CSS, this forces the decoration off
   for everything inside the panel, unconditionally, so no cached or inherited
   underline can survive. The leading "_" people saw before each box was an
   underlined &nbsp;; it goes with the underline.
   =========================================================================== */
body.psp-2026 table.searchhandler_table1,
body.psp-2026 table.searchhandler_table1 * {
    text-decoration: none !important;
}
body.psp-2026 table.searchhandler_table1 td,
body.psp-2026 table.searchhandler_table1 font,
body.psp-2026 table.searchhandler_table1 input {
    border-bottom-style: none;
}

/* The match-mode / operator dropdowns that replace the radio groups. */
body.psp-2026 table.searchhandler_table1 select.psp-sf-mode {
    min-width: 8.5rem;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    color: var(--psp-ink);
    background-color: var(--psp-bg);
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'><path d='M2 4l4 4 4-4' fill='none' stroke='%2356707F' stroke-width='1.6'/></svg>");
    background-repeat: no-repeat;
    background-position: right 9px center;
    border: 1px solid transparent;
    border-radius: var(--psp-radius-sm);
    -webkit-appearance: none; -moz-appearance: none; appearance: none;
    cursor: pointer;
}
body.psp-2026 table.searchhandler_table1 select.psp-sf-mode:hover { border-color: var(--psp-border); }
body.psp-2026 table.searchhandler_table1 select.psp-sf-mode:focus {
    background-color: #fff; border-color: var(--psp-brand-dark);
    box-shadow: 0 0 0 3px rgba(84,132,168,.18); outline: none;
}
/* With the operators collapsed to one control, the field cell can take the room. */
body.psp-2026 table.searchhandler_table1 .bgcolor_005 { white-space: nowrap; }

/* ==========================================================================
   Grid density + header cleanup - 2026 pass 2
   Tighter rows, single-line headers, and a crisp sort caret in place of the
   low-res legacy arrow GIFs. Placed last so it wins the cascade.
   ========================================================================== */

/* Denser rows: the 12px padding made every list twice as tall as it needed. */
body.psp-2026 .tableHeader { padding: 8px 11px !important; white-space: nowrap; }
body.psp-2026 .tableBody,
body.psp-2026 .tableBodyLeft,
body.psp-2026 .tableBodyRight { padding: 7px 11px !important; }

/* Headers read left-to-right on one line - no more "APS / INVOICES" splits. */
body.psp-2026 .tableHeader font { white-space: nowrap; }

/* Drop the low-res legacy sort-arrow GIFs entirely - they were the messiest
   thing in the header row. Sorting still works: the whole label is a link. */
body.psp-2026 .tableHeader a img { display: none !important; }
body.psp-2026 .tableHeader a { white-space: nowrap; }

/* Size each data grid to its content so columns sit tight and the space between
   them is not padded out to fill 95% of the page. Only the table that directly
   holds the header row is a grid; the layout/wrapper tables are left untouched.
   A max-width keeps a wide grid (APS) from overflowing the card. */
body.psp-2026 table:has(> tbody > tr > td.tableHeader) {
    width: auto !important;
    max-width: 100%;
    table-layout: auto;
    margin-left: 0 !important;        /* pack tight to the left, not centered */
    margin-right: auto !important;
}

/* ==========================================================================
   Per-grid column widths - 2026 pass 3
   Fixed layout with explicit proportions, so columns are tight and the leftover
   width is shared sensibly instead of pooling in one empty column. Scoped to a
   per-page body class (set in the page before header.tpl renders).
   ========================================================================== */

/* Billing / APS batches - 9 columns; dates are date-only now. */
body.psp-grid-billing table:has(> tbody > tr > td.tableHeader) {
    width: 100% !important; table-layout: fixed;
}
body.psp-grid-billing td.tableHeader:nth-child(1) { width: 5%; }    /* Edit      */
body.psp-grid-billing td.tableHeader:nth-child(2) { width: 8%; }    /* Batch #   */
body.psp-grid-billing td.tableHeader:nth-child(3) { width: 11%; }   /* Requests  */
body.psp-grid-billing td.tableHeader:nth-child(4) { width: 13%; }   /* From date */
body.psp-grid-billing td.tableHeader:nth-child(5) { width: 13%; }   /* To date   */
body.psp-grid-billing td.tableHeader:nth-child(6) { width: 12%; }   /* Invoices  */
body.psp-grid-billing td.tableHeader:nth-child(7) { width: 16%; }   /* Export    */
body.psp-grid-billing td.tableHeader:nth-child(8) { width: 22%; }   /* Remarks   */

/* Members - 11 columns; Title and Name are the text columns. */
body.psp-grid-members table:has(> tbody > tr > td.tableHeader) {
    width: 100% !important; table-layout: fixed;
}
body.psp-grid-members td.tableHeader:nth-child(1)  { width: 4%; }   /* Edit        */
body.psp-grid-members td.tableHeader:nth-child(2)  { width: 4%; }   /* D           */
body.psp-grid-members td.tableHeader:nth-child(3)  { width: 9%; }   /* Username    */
body.psp-grid-members td.tableHeader:nth-child(4)  { width: 16%; }  /* Title       */
body.psp-grid-members td.tableHeader:nth-child(5)  { width: 11%; }  /* Group       */
body.psp-grid-members td.tableHeader:nth-child(6)  { width: 13%; }  /* Name        */
body.psp-grid-members td.tableHeader:nth-child(7)  { width: 12%; }  /* Creation    */
body.psp-grid-members td.tableHeader:nth-child(8)  { width: 12%; }  /* Last Login  */
body.psp-grid-members td.tableHeader:nth-child(9)  { width: 8%; }   /* Edit Role   */
body.psp-grid-members td.tableHeader:nth-child(10) { width: 5%; }   /* 2FA         */
body.psp-grid-members td.tableHeader:nth-child(11) { width: 6%; }   /* Delete      */

/* --- API page: MCP connect section ---------------------------------------- */
body.psp-2026 .psp-mcp__step { margin: 18px 0 6px; font-size: 13px;
    color: var(--psp-brand-darker); font-weight: 700; letter-spacing: .02em; }
body.psp-2026 .psp-mcpform { display: flex; gap: 10px; align-items: center;
    margin: 4px 0 8px; flex-wrap: wrap; }
body.psp-2026 .psp-input { font: inherit; padding: 9px 12px; min-width: 260px;
    color: var(--psp-ink); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm); background: #fff; }
body.psp-2026 .psp-btn { font: inherit; font-weight: 600; padding: 9px 18px;
    cursor: pointer; color: #fff; background: var(--psp-brand); border: 0;
    border-radius: var(--psp-radius-sm); }
body.psp-2026 .psp-btn:hover { background: var(--psp-brand-dark); }
body.psp-2026 .psp-mcp__token { border: 1px solid var(--psp-brand);
    background: var(--psp-brand-tint); font-weight: 600; }

/* --- Requests row-colour key: small, readable, at the top ------------------ */
body.psp-2026 .psp-legend {
    display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
    margin: 0 0 10px; padding: 6px 12px;
    background: var(--psp-surface); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius-sm); font-size: 12px; color: var(--psp-ink-soft);
}
body.psp-2026 .psp-legend__lbl {
    font-weight: 700; font-size: 10px; letter-spacing: .07em;
    text-transform: uppercase; color: var(--psp-brand-darker);
}
body.psp-2026 .psp-legend__item { display: inline-flex; align-items: center; gap: 7px; font-weight: 600; color: var(--psp-ink); }
body.psp-2026 .psp-legend__sw { width: 14px; height: 14px; border-radius: 3px; border: 1px solid rgba(0,0,0,.22); flex: 0 0 auto; }
/* Saturated, legible chips - the row tints are deliberately pale, so the key
   uses a bolder version of each colour rather than the near-white background. */
body.psp-2026 .psp-legend__sw--followup  { background: #F0C24E; border-color: #C08F1F; }
body.psp-2026 .psp-legend__sw--completed { background: #57B683; border-color: #2F8659; }
body.psp-2026 .psp-legend__sw--new       { background: #D93A2B; border-color: #A82A1E; }

/* The state tint sits on the ROW, but the cells were painting over it with the
   surface colour (!important), so the colour-coding never actually showed. Let
   the row tint through by clearing the cell background on tinted rows. */
body.psp-2026 tr.FollowUp td.tableBody,
body.psp-2026 tr.FollowUp td.tableBodyLeft,
body.psp-2026 tr.FollowUp td.tableBodyRight,
body.psp-2026 tr.NewAPS td.tableBody,
body.psp-2026 tr.CompletedOrder td.tableBody,
body.psp-2026 tr.CompletedExam td.tableBody { background: transparent !important; }

/* Paired records: a request that has a linked billing/medical counterpart for
   the same case carries this chip, coloured from the policy so the two match.
   Clicking it opens the paired order. No policy number ever appears in the URL. */
body.psp-2026 .psp-pair {
    display: inline-block; width: 11px; height: 11px; border-radius: 3px;
    vertical-align: middle; margin-right: 5px; cursor: pointer;
    background: hsl(var(--h, 205), 68%, 45%);
    border: 1px solid rgba(0,0,0,.28); text-decoration: none;
}
body.psp-2026 .psp-pair:hover { outline: 2px solid hsl(var(--h,205), 68%, 45%); outline-offset: 1px; }

/* Star AI by Pro Scan Partners: product name in the bars and on sign-in */
.psp-login__brand h1 span { display: block; margin-top: 4px; font-size: 13px; font-weight: 500; color: var(--psp-ink-soft); }
.psp-login__brand .psp-login__portal { margin-top: 10px; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; }
.psp-shell__brand em, .psp-topbar__brand em { font-style: normal; font-weight: 400; opacity: .8; }

/* ---- Customer vs staff: unmistakable at a glance ---------------------------
   Customer = brand blue.  Staff = deep purple with a dark bar. Same app, two
   doors; the color, the label and the tab switcher all say which one you are in. */
body:has(.psp-login--staff)    { background: #EFEAF8; }
body:has(.psp-login--customer) { background: #EAF2F8; }
.psp-switch { display:flex; max-width:380px; margin:0 auto 22px; padding:4px; gap:4px; background:rgba(28,43,54,.08); border-radius:999px; }
.psp-switch__tab { flex:1; text-align:center; padding:10px 14px; border-radius:999px; font-size:13px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; text-decoration:none; color:var(--psp-ink-soft); }
.psp-switch__tab:hover { color:var(--psp-ink); }
.psp-switch__tab--customer.is-active { background:#5484A8; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.psp-switch__tab--staff.is-active    { background:#6A4BB3; color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.2); }
.psp-login__brand .psp-login__portal { display:inline-block; padding:5px 14px; border-radius:999px; color:#fff; font-weight:700; letter-spacing:.1em; }
.psp-login--customer .psp-login__portal { background:#5484A8; }
.psp-login--staff .psp-login__portal    { background:#6A4BB3; }
.psp-login__brand .psp-login__who { margin-top:8px; font-size:13px; color:var(--psp-ink-soft); }
.psp-login--staff .psp-card { border-top:4px solid #6A4BB3; }
.psp-login--customer .psp-card { border-top:4px solid #5484A8; }
/* in-app bar */
.psp-shell__bar--customer { border-top:4px solid #5484A8; }
.psp-shell__bar--staff { border-top:4px solid #6A4BB3; background:#F6F3FC; }
.psp-shell__bar--staff .psp-shell__brand span { color:#42307A; }
.psp-shell__bar--staff .psp-shell__link:hover, .psp-shell__bar--staff .psp-shell__link.is-active { background:#EAE3F8; color:#42307A; box-shadow:none; }
.psp-shell__bar--staff .psp-shell__link.is-active { box-shadow:inset 0 -2px 0 #6A4BB3; }
.psp-shell__bar--customer .psp-shell__portal { background:#5484A8; color:#fff; }
.psp-shell__bar--staff .psp-shell__portal    { background:#6A4BB3; color:#fff; }

/* AI straight-through message on the sign-in pages */
.psp-login__ai { max-width:420px; margin:18px auto 0; padding:14px 16px; text-align:left; border-radius:14px;
  background:linear-gradient(135deg,rgba(60,143,214,.10),rgba(108,92,240,.12)); border:1px solid rgba(108,92,240,.25); }
.psp-login__ai b { display:flex; align-items:center; gap:8px; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--psp-brand-darker); }
.psp-login__ai b::before { content:""; width:7px; height:7px; border-radius:50%; background:#2BC4B4; box-shadow:0 0 8px #2BC4B4; animation:psp-ai-pulse 2s infinite; }
@keyframes psp-ai-pulse { 50% { opacity:.35; } }
.psp-login__brand .psp-login__ai p { margin:6px 0 0; font-size:13.5px; line-height:1.45; color:var(--psp-ink); }
.psp-login__chips { display:flex; flex-wrap:wrap; gap:6px; margin-top:10px; }
.psp-login__chips span { font-size:11.5px; padding:4px 10px; border-radius:999px; background:rgba(255,255,255,.7); border:1px solid var(--psp-brand-line); color:var(--psp-brand-darker); }
@media (prefers-reduced-motion:reduce){ .psp-login__ai b::before{animation:none} }