/* ===========================================================================
   Star AI by Pro Scan Partners - design system layer
   ---------------------------------------------------------------------------
   Loaded AFTER psp2026.css on every page. psp2026.css already routes nearly
   all color through --psp-* variables, so re-pointing those variables is what
   re-themes the whole app. The rest of this file does three things:

     1. TOKENS      light + dark, Staff (violet) and Customer (blue)
     2. SHELL       the left sidebar that replaces the top bar
     3. COMPONENTS  tables, cards, buttons, fields, badges, dialogs

   The old stylesheet marks many rules !important, so the overrides here are
   scoped `html body.psp-2026 ...` and carry !important where the old rule did.
   Nothing here changes markup, field names or behavior.
   =========================================================================== */

/* ---------------------------------------------------------------- 1. TOKENS */
:root {
    color-scheme: light;

    /* neutrals */
    --psp-bg:        #F4F6FB;
    --psp-surface:   #FFFFFF;
    --star-surface2: #F8FAFD;
    --star-raise:    #FFFFFF;
    --psp-border:    #E3E8F1;
    --star-line2:    #EDF0F6;
    --psp-ink:       #0F1B2D;
    --psp-ink-soft:  #5A6A82;
    --star-mute:     #8896AB;

    /* brand: Customer blue (default) */
    --psp-brand:        #2F6FE0;
    --psp-brand-dark:   #2559BD;
    --psp-brand-darker: #1B438F;
    --psp-brand-tint:   #EDF3FD;
    --psp-brand-line:   #CFDEF8;
    --star-accent:      #22C7B5;                 /* cyan highlight */
    --star-grad:        linear-gradient(135deg, #2F6FE0 0%, #6C5CF0 100%);
    --star-glow:        rgba(47, 111, 224, .35);

    --psp-danger:       #D12C22;
    --psp-danger-tint:  #FDEEEC;
    --psp-ok:           #14815A;
    --star-warn:        #B7791F;

    /* semantic row tones, as translucent hues so they work on any surface */
    --star-row-follow:  rgba(245, 173, 55, .17);
    --star-row-done:    rgba(40, 180, 120, .14);
    --star-row-agent:   rgba(235, 200, 40, .17);
    --star-row-agency:  rgba(60, 140, 220, .14);
    --star-row-ins:     rgba(235, 90, 90, .13);
    --star-row-online:  rgba(250, 130, 60, .17);
    --star-row-hover:   rgba(47, 111, 224, .06);

    --star-th-bg:       #F1F4FA;
    --star-th-ink:      #5A6A82;

    --psp-radius:    14px;
    --psp-radius-sm: 9px;
    --psp-shadow:    0 1px 2px rgba(15,27,45,.04), 0 8px 28px rgba(15,27,45,.07);
    --star-shadow-lg:0 2px 4px rgba(15,27,45,.05), 0 18px 50px rgba(15,27,45,.12);
    --star-ring:     0 0 0 3px rgba(47,111,224,.22);

    --star-side-bg:  #FFFFFF;
    --star-side-w:   252px;
    --star-page-img: radial-gradient(900px 380px at 100% -80px, rgba(108,92,240,.07), transparent 70%),
                     radial-gradient(800px 340px at 0% -100px, rgba(34,199,181,.06), transparent 70%);

    --psp-font: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Helvetica Neue", Arial, sans-serif;
}

/* Staff: violet */
:root[data-portal="staff"] {
    --psp-brand:        #6A4BD0;
    --psp-brand-dark:   #5538B0;
    --psp-brand-darker: #3F2A8A;
    --psp-brand-tint:   #F2EEFC;
    --psp-brand-line:   #DACFF6;
    --star-grad:        linear-gradient(135deg, #6A4BD0 0%, #2F6FE0 100%);
    --star-glow:        rgba(106, 75, 208, .35);
    --star-row-hover:   rgba(106, 75, 208, .06);
    --star-ring:        0 0 0 3px rgba(106,75,208,.24);
}

/* Dark */
:root[data-theme="dark"] {
    color-scheme: dark;

    --psp-bg:        #0A0F1C;
    --psp-surface:   #111A2C;
    --star-surface2: #0E1626;
    --star-raise:    #16213A;
    --psp-border:    #223150;
    --star-line2:    #1A2640;
    --psp-ink:       #E6EDF8;
    --psp-ink-soft:  #93A4BE;
    --star-mute:     #6D7F9B;

    --psp-brand:        #5B98FF;
    --psp-brand-dark:   #4A86EE;
    --psp-brand-darker: #A9C8FF;
    --psp-brand-tint:   rgba(91,152,255,.12);
    --psp-brand-line:   rgba(91,152,255,.30);
    --star-glow:        rgba(91,152,255,.35);

    --psp-danger:       #FF7068;
    --psp-danger-tint:  rgba(255,112,104,.12);
    --psp-ok:           #46E3A2;
    --star-warn:        #FFC857;

    --star-row-follow:  rgba(255, 190, 70, .16);
    --star-row-done:    rgba(70, 227, 162, .12);
    --star-row-agent:   rgba(255, 220, 80, .14);
    --star-row-agency:  rgba(90, 160, 255, .14);
    --star-row-ins:     rgba(255, 110, 110, .14);
    --star-row-online:  rgba(255, 150, 80, .15);
    --star-row-hover:   rgba(120, 160, 255, .08);

    --star-th-bg:       #16213A;
    --star-th-ink:      #93A4BE;

    --psp-shadow:    0 1px 2px rgba(0,0,0,.35), 0 10px 32px rgba(0,0,0,.35);
    --star-shadow-lg:0 2px 6px rgba(0,0,0,.4), 0 22px 60px rgba(0,0,0,.5);
    --star-ring:     0 0 0 3px rgba(91,152,255,.30);

    --star-side-bg:  #0C1424;
    --star-page-img: radial-gradient(900px 420px at 100% -80px, rgba(108,92,240,.16), transparent 70%),
                     radial-gradient(800px 380px at 0% -100px, rgba(34,199,181,.10), transparent 70%);
}
:root[data-theme="dark"][data-portal="staff"] {
    --psp-brand:        #9C86F5;
    --psp-brand-dark:   #8A72EE;
    --psp-brand-darker: #D0C4FF;
    --psp-brand-tint:   rgba(156,134,245,.13);
    --psp-brand-line:   rgba(156,134,245,.32);
    --star-glow:        rgba(156,134,245,.35);
    --star-row-hover:   rgba(156,134,245,.09);
    --star-ring:        0 0 0 3px rgba(156,134,245,.32);
}

/* ------------------------------------------------------------- 2. PAGE BASE */
html { background: var(--psp-bg); }
html body.psp-2026,
html body.psp-shell {
    background: var(--psp-bg) !important;
    background-image: var(--star-page-img) !important;
    background-repeat: no-repeat !important;
    color: var(--psp-ink);
    font-family: var(--psp-font);
}
html body.psp-2026 { font-size: 14px; letter-spacing: -.003em; padding: 26px 30px 40px; }
html body.psp-2026 ::selection { background: var(--psp-brand); color: #fff; }
html body.psp-2026 a { color: var(--psp-brand-dark); }
html[data-theme="dark"] body.psp-2026 a { color: var(--psp-brand); }
html body.psp-2026 h1, html body.psp-2026 h2, html body.psp-2026 h3 { letter-spacing: -.02em; color: var(--psp-ink); }

/* thin, quiet scrollbars */
html * { scrollbar-width: thin; scrollbar-color: var(--psp-border) transparent; }
html *::-webkit-scrollbar { width: 10px; height: 10px; }
html *::-webkit-scrollbar-thumb { background: var(--psp-border); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
html *::-webkit-scrollbar-thumb:hover { background: var(--star-mute); background-clip: padding-box; border: 2px solid transparent; }

/* ---------------------------------------------------------------- 3. SHELL */
html body.psp-shell { display: block; height: 100vh; overflow: hidden; padding: 0; }
.star-app { display: grid; grid-template-columns: var(--star-side-w) minmax(0, 1fr); height: 100vh; transition: grid-template-columns .22s ease; }
body.star-collapsed .star-app { grid-template-columns: 76px minmax(0, 1fr); }
.star-app .psp-shell__main { min-width: 0; min-height: 0; height: 100vh; background: transparent; }
.star-app .psp-shell__main iframe { background: transparent; color-scheme: normal; }

.star-side {
    position: relative; display: flex; flex-direction: column; gap: 6px;
    padding: 16px 14px 14px; min-height: 0; overflow: hidden;
    background: var(--star-side-bg);
    border-right: 1px solid var(--psp-border);
}
.star-side::before {                                  /* gradient accent at the very top */
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--star-grad);
}
html[data-theme="dark"] .star-side {
    background: linear-gradient(180deg, rgba(20,30,52,.92), rgba(10,16,30,.96));
    box-shadow: inset -1px 0 0 rgba(255,255,255,.03);
}

.star-side__top { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 4px 4px 2px; }
.star-brand { display: flex; align-items: center; gap: 11px; text-decoration: none; min-width: 0; }
.star-brand img { height: 34px; width: auto; flex: 0 0 auto; }
.star-brand__txt { display: flex; flex-direction: column; line-height: 1.1; white-space: nowrap; }
.star-brand__txt b {
    font-size: 17px; font-weight: 800; letter-spacing: -.02em;
    background: var(--star-grad); -webkit-background-clip: text; background-clip: text; color: transparent;
}
.star-brand__txt small { font-size: 9.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--psp-ink-soft); margin-top: 3px; }

.star-iconbtn {
    display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; cursor: pointer;
    background: transparent; border: 1px solid transparent; color: var(--psp-ink-soft); flex: 0 0 auto;
}
.star-iconbtn:hover { background: var(--psp-brand-tint); color: var(--psp-brand); }
.star-ico { width: 18px; height: 18px; flex: 0 0 auto; }

.star-portal {
    align-self: flex-start; margin: 8px 6px 6px; padding: 4px 11px; border-radius: 999px;
    font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
    color: #fff; background: var(--star-grad); box-shadow: 0 4px 14px var(--star-glow);
}

.star-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; padding: 2px 0; }
.star-nav__label { margin: 16px 12px 6px; font-size: 10.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--star-mute); white-space: nowrap; }

.star-link {
    position: relative; display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 11px;
    font-size: 14px; font-weight: 550; color: var(--psp-ink-soft); text-decoration: none; white-space: nowrap;
    transition: background .15s, color .15s, transform .15s;
}
.star-link:hover { background: var(--psp-brand-tint); color: var(--psp-ink); }
html body .star-link.is-active { background: var(--psp-brand-tint); color: var(--psp-brand-darker); font-weight: 650; box-shadow: none; }
html[data-theme="dark"] body .star-link.is-active { color: var(--psp-ink); }
.star-link.is-active::before { content: ""; position: absolute; left: -14px; top: 9px; bottom: 9px; width: 4px; border-radius: 0 4px 4px 0; background: var(--star-grad); }
.star-link.is-active .star-ico { color: var(--psp-brand); }
.star-link--cta { margin-top: 4px; color: #fff; background: var(--star-grad); box-shadow: 0 6px 18px var(--star-glow); }
.star-link--cta:hover { color: #fff; background: var(--star-grad); filter: brightness(1.07); transform: translateY(-1px); }
html body .star-link--cta.is-active { background: var(--star-grad); color: #fff; }
.star-link--cta.is-active::before { display: none; }
.star-link--cta .star-ico, .star-link--cta.is-active .star-ico { color: #fff; }

.star-side__foot { display: flex; flex-direction: column; gap: 8px; padding-top: 10px; border-top: 1px solid var(--psp-border); }
.star-theme {
    display: flex; align-items: center; gap: 12px; width: 100%; padding: 9px 12px; border-radius: 11px; cursor: pointer;
    background: transparent; border: 0; font: inherit; font-size: 13.5px; font-weight: 550; color: var(--psp-ink-soft); text-align: left;
}
.star-theme:hover { background: var(--psp-brand-tint); color: var(--psp-ink); }
.star-theme .star-ico { width: 18px; height: 18px; }
.star-theme__moon { display: none; }
html[data-theme="dark"] .star-theme__sun { display: none; }
html[data-theme="dark"] .star-theme__moon { display: inline-flex; }
.star-theme__sun, .star-theme__moon { display: inline-flex; }
html:not([data-theme="dark"]) .star-theme__moon { display: none; }
.star-theme__txt { white-space: nowrap; }

.star-user { position: relative; }
.star-user summary {
    list-style: none; display: flex; align-items: center; gap: 11px; padding: 8px 10px; border-radius: 12px; cursor: pointer;
    border: 1px solid var(--psp-border); background: var(--star-surface2);
}
.star-user summary::-webkit-details-marker { display: none; }
.star-user summary:hover { border-color: var(--psp-brand-line); }
.star-avatar {
    display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; flex: 0 0 auto;
    font-size: 11.5px; font-weight: 800; color: #fff; background: var(--star-grad);
}
.star-user__name { flex: 1 1 auto; min-width: 0; font-size: 13.5px; font-weight: 600; color: var(--psp-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.star-user__chev { color: var(--psp-ink-soft); display: grid; transition: transform .2s; }
.star-user[open] .star-user__chev { transform: rotate(180deg); }
.star-user__panel {
    position: absolute; left: 0; right: 0; bottom: calc(100% + 8px); z-index: 30; padding: 6px;
    background: var(--star-raise); border: 1px solid var(--psp-border); border-radius: 14px; box-shadow: var(--star-shadow-lg);
}
html body .star-user__panel a { display: flex; align-items: center; gap: 11px; padding: 9px 11px; border-radius: 9px; font-size: 13.5px; font-weight: 550; color: var(--psp-ink); text-decoration: none; }
html body .star-user__panel a:hover { background: var(--psp-brand-tint); }
html body .star-user__panel a.star-user__out { color: var(--psp-danger); }
html body .star-user__panel a.star-user__out:hover { background: var(--psp-danger-tint); }
.star-user__sep { display: block; height: 1px; margin: 5px 6px; background: var(--psp-border); }

/* collapsed rail */
body.star-collapsed .star-brand__txt,
body.star-collapsed .star-portal,
body.star-collapsed .star-nav__label,
body.star-collapsed .star-link span,
body.star-collapsed .star-theme__txt,
body.star-collapsed .star-user__name,
body.star-collapsed .star-user__chev { display: none; }
body.star-collapsed .star-side { padding-inline: 12px; }
body.star-collapsed .star-side__top { flex-direction: column; gap: 10px; }
body.star-collapsed .star-nav { padding-top: 10px; }
body.star-collapsed .star-link, body.star-collapsed .star-theme { justify-content: center; padding-inline: 0; }
body.star-collapsed .star-link.is-active::before { left: -12px; }
body.star-collapsed .star-user summary { justify-content: center; padding: 8px 0; }
body.star-collapsed .star-user__panel { left: 100%; right: auto; bottom: 0; margin-left: 10px; min-width: 210px; }

/* narrow screens: the sidebar becomes a horizontal bar */
@media (max-width: 860px) {
    .star-app, body.star-collapsed .star-app { grid-template-columns: 1fr; grid-template-rows: auto minmax(0, 1fr); }
    .star-app .psp-shell__main { height: auto; }
    .star-side, body.star-collapsed .star-side {
        flex-direction: row; align-items: center; flex-wrap: wrap; gap: 8px; padding: 10px 12px; border-right: 0; border-bottom: 1px solid var(--psp-border);
    }
    .star-collapse, .star-portal, .star-nav__label { display: none; }
    .star-side__top { padding: 0; }
    .star-nav { flex-direction: row; overflow-x: auto; overflow-y: hidden; order: 3; width: 100%; padding: 0; }
    .star-link, body.star-collapsed .star-link { padding: 8px 12px; flex: 0 0 auto; }
    body.star-collapsed .star-link span { display: inline; }
    .star-link.is-active::before { display: none; }
    .star-side__foot { flex-direction: row; border: 0; padding: 0; margin-left: auto; }
    .star-theme__txt, .star-user__name, .star-user__chev { display: none; }
    .star-user__panel { bottom: auto; top: calc(100% + 8px); left: auto; right: 0; min-width: 210px; }
}

/* ------------------------------------------------------------ 4. COMPONENTS */

/* cards and panels */
html body.psp-2026 .psp-card,
html body.psp-2026 .psp-panel,
html body.psp-2026 .psp-dash-card {
    background: var(--psp-surface); border: 1px solid var(--psp-border);
    border-radius: var(--psp-radius); box-shadow: var(--psp-shadow);
}

/* buttons */
html body.psp-2026 .psp-btn,
html body.psp-2026 .psp-btn2--primary,
html body.psp-2026 input.psp-btn {
    background: var(--star-grad) !important; color: #fff !important; border: 0 !important;
    border-radius: 10px !important; font-weight: 650; letter-spacing: -.005em;
    box-shadow: 0 4px 14px var(--star-glow); transition: filter .15s, transform .15s, box-shadow .15s;
}
html body.psp-2026 .psp-btn:hover,
html body.psp-2026 .psp-btn2--primary:hover { filter: brightness(1.08); transform: translateY(-1px); box-shadow: 0 8px 22px var(--star-glow); }
html body.psp-2026 .psp-btn2:not(.psp-btn2--primary) {
    background: var(--psp-surface) !important; color: var(--psp-ink) !important;
    border: 1px solid var(--psp-border) !important; border-radius: 10px !important; box-shadow: none;
}
html body.psp-2026 .psp-btn2:not(.psp-btn2--primary):hover { border-color: var(--psp-brand-line) !important; background: var(--psp-brand-tint) !important; }

/* fields */
html body.psp-2026 .form_input_text,
html body.psp-2026 .form_input_select,
html body.psp-2026 .form_input_textarea,
html body.psp-2026 .form_enter,
html body.psp-2026 input[type="text"],
html body.psp-2026 input[type="password"],
html body.psp-2026 input[type="email"],
html body.psp-2026 input[type="search"],
html body.psp-2026 input[type="number"],
html body.psp-2026 input[type="date"],
html body.psp-2026 select,
html body.psp-2026 textarea {
    background-color: var(--star-surface2) !important; color: var(--psp-ink) !important;
    border: 1px solid var(--psp-border) !important; border-radius: 9px !important;
    transition: border-color .15s, box-shadow .15s, background-color .15s;
}
html body.psp-2026 input::placeholder, html body.psp-2026 textarea::placeholder { color: var(--star-mute); }
html body.psp-2026 .form_input_text:focus,
html body.psp-2026 .form_input_select:focus,
html body.psp-2026 .form_input_textarea:focus,
html body.psp-2026 input:focus, html body.psp-2026 select:focus, html body.psp-2026 textarea:focus {
    outline: none !important; border-color: var(--psp-brand) !important; background-color: var(--psp-surface) !important; box-shadow: var(--star-ring) !important;
}
html body.psp-2026 .form_input_span { background-color: var(--star-row-agent) !important; }

/* tables: quiet headers, hairline rows, soft hover; the SEMANTIC row tones stay */
html body.psp-2026 .tableHeader {
    background: var(--star-th-bg) !important; color: var(--star-th-ink) !important;
    font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
    border-right: 0 !important; border-bottom: 1px solid var(--psp-border) !important; padding: 11px 10px !important;
}
html body.psp-2026 .tableHeader a { color: var(--star-th-ink) !important; }
html body.psp-2026 .tableBody,
html body.psp-2026 .tableBodyLeft,
html body.psp-2026 .tableBodyRight {
    background-color: var(--psp-surface) !important; color: var(--psp-ink);
    border-right: 0 !important; border-bottom: 1px solid var(--star-line2) !important;
}
html body.psp-2026 tr:hover > .tableBody:not(.NewAPS) { background-image: linear-gradient(var(--star-row-hover), var(--star-row-hover)); }
html body.psp-2026 .tableDivider { background-color: var(--psp-border) !important; }

html body.psp-2026 .NewAPS         { background-color: #D93A2B !important; color: #fff !important; }
html body.psp-2026 .FollowUp,
html body.psp-2026 .Row            { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-follow), var(--star-row-follow)); }
html body.psp-2026 .CompletedOrder,
html body.psp-2026 .CompletedExam  { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-done), var(--star-row-done)); }
html body.psp-2026 .StatusAgent    { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-agent), var(--star-row-agent)); }
html body.psp-2026 .StatusAgency   { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-agency), var(--star-row-agency)); }
html body.psp-2026 .StatusInsuranceCompany { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-ins), var(--star-row-ins)); }
html body.psp-2026 .OnlineFlag     { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-online), var(--star-row-online)); }
html body.psp-2026 .SelectedRow    { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-follow), var(--star-row-follow)); }
html body.psp-2026 .HighlightedRow,
html body.psp-2026 .HighlightedSelectedRow { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-ins), var(--star-row-ins)); }

/* strips and chrome that used a fixed pale tint */
html body.psp-2026 .Title, html body.psp-2026 .TitleTopNote, html body.psp-2026 .Header,
html body.psp-2026 .Footer, html body.psp-2026 .Pager, html body.psp-2026 .form_head,
html body.psp-2026 .viewhandler_filter_td1,
html body.psp-2026 .editform_table1, html body.psp-2026 .editform_table4_td1, html body.psp-2026 .addform_table1,
html body.psp-2026 .editform_table5_td1, html body.psp-2026 .editform_table7_td1, html body.psp-2026 .epayment_conf_table {
    background-color: var(--psp-brand-tint) !important; color: var(--psp-brand-darker) !important; border-color: var(--psp-brand-line) !important;
}
html[data-theme="dark"] body.psp-2026 .Title, html[data-theme="dark"] body.psp-2026 .form_head { color: var(--psp-ink) !important; }
html body.psp-2026 .editform_table2, html body.psp-2026 .delform_table2_td1 { background-color: var(--psp-surface) !important; }
html body.psp-2026 .editform_table3_td1 { background-color: var(--psp-border) !important; }
html body.psp-2026 .bgcolor_004 { background-color: var(--psp-brand) !important; }
html body.psp-2026 .bgcolor_002 { background-color: var(--psp-brand-dark) !important; }
html body.psp-2026 .bgcolor_003 { background-color: var(--psp-surface) !important; }
html body.psp-2026 .bgcolor_005 { background-color: var(--psp-brand-tint) !important; }
html[data-theme="dark"] body.psp-2026 .bgcolor_004, html[data-theme="dark"] body.psp-2026 .bgcolor_002 { background-color: #1B2742 !important; }

/* alerts */
html body.psp-2026 .psp-alert--info { background: var(--psp-brand-tint); border-color: var(--psp-brand-line); color: var(--psp-ink); }

/* dialogs (psp-dialog.js) and jQuery-UI popups */
html body .psp-dialog, html body .ui-dialog, html body .ui-autocomplete, html body .ui-datepicker, html body .ui-menu {
    background: var(--star-raise) !important; color: var(--psp-ink) !important; border: 1px solid var(--psp-border) !important;
    border-radius: 14px !important; box-shadow: var(--star-shadow-lg) !important;
}
html body .ui-menu .ui-menu-item-wrapper { color: var(--psp-ink) !important; }
html body .ui-state-active, html body .ui-state-hover, html body .ui-menu-item .ui-state-active { background: var(--psp-brand-tint) !important; border: 0 !important; color: var(--psp-ink) !important; }

/* login + front doors share the tokens */
.psp-login { color: var(--psp-ink); }
html body .psp-foot a, html body .psp-links a { color: var(--psp-brand-dark); }
html[data-theme="dark"] body .psp-foot a, html[data-theme="dark"] body .psp-links a { color: var(--psp-brand); }

/* --- grid: beat the older, more specific psp-grid rules ------------------- */
html body.psp-2026 table.psp-grid {
    background: var(--psp-surface); border: 1px solid var(--psp-border); border-radius: var(--psp-radius);
    box-shadow: var(--psp-shadow); border-collapse: separate; border-spacing: 0; overflow: hidden;
}
html body.psp-2026 table.psp-grid td.tableHeader {
    background: var(--star-th-bg) !important; color: var(--star-th-ink) !important;
    border-right: 0 !important; border-bottom: 1px solid var(--psp-border) !important;
}
html body.psp-2026 table.psp-grid td.tableHeader a,
html body.psp-2026 table.psp-grid td.tableHeader font { color: var(--star-th-ink) !important; }
html body.psp-2026 table.psp-grid td.tableBody { border-right: 0 !important; border-bottom: 1px solid var(--star-line2) !important; }
html body.psp-2026 table.psp-grid tr:hover td.tableBody:not(.NewAPS) { background-color: var(--psp-surface) !important; background-image: linear-gradient(var(--star-row-hover), var(--star-row-hover)); }
html body.psp-2026 .psp-sortable:hover { background: var(--psp-brand-tint) !important; }
html body.psp-2026 .psp-sortable:focus-visible { outline: 2px solid var(--psp-brand); }
html body.psp-2026 td.tableBody.is-empty::after { color: var(--star-mute); opacity: .5; }

/* status pills: tinted, legible in both themes */
html body.psp-2026 .psp-badge { padding: 3px 10px; font-size: 10.5px; letter-spacing: .05em; text-transform: uppercase; }
html body.psp-2026 .psp-badge--done     { background: rgba(40,180,120,.16);  color: #0E7A50; }
html body.psp-2026 .psp-badge--active   { background: rgba(60,140,240,.16);  color: #1F5FBF; }
html body.psp-2026 .psp-badge--new      { background: rgba(130,100,240,.16); color: #5B3FC0; }
html body.psp-2026 .psp-badge--hold     { background: rgba(240,170,40,.20);  color: #8A5A0A; }
html body.psp-2026 .psp-badge--cnr      { background: rgba(250,130,60,.18);  color: #9A4A10; }
html body.psp-2026 .psp-badge--canceled { background: rgba(230,80,80,.16);   color: #B02A20; }
html body.psp-2026 .psp-badge--other    { background: var(--star-th-bg);      color: var(--psp-ink-soft); }
html[data-theme="dark"] body.psp-2026 .psp-badge--done     { color: #5BEBB0; }
html[data-theme="dark"] body.psp-2026 .psp-badge--active   { color: #8DBBFF; }
html[data-theme="dark"] body.psp-2026 .psp-badge--new      { color: #BBA8FF; }
html[data-theme="dark"] body.psp-2026 .psp-badge--hold     { color: #FFD479; }
html[data-theme="dark"] body.psp-2026 .psp-badge--cnr      { color: #FFB27F; }
html[data-theme="dark"] body.psp-2026 .psp-badge--canceled { color: #FF9C94; }

/* --- dashboard + help popover: replace the fixed light colors ------------- */
html body.psp-2026 .psp-tile--warn { background: rgba(245,173,55,.14); border-color: rgba(245,173,55,.45); }
html body.psp-2026 .psp-tile--warn .psp-tile__n,
html body.psp-2026 td.psp-cell--warn { color: var(--star-warn); }
html body.psp-2026 table.psp-kpi td { border-bottom: 1px solid var(--star-line2); }
html body.psp-2026 table.psp-kpi tr:hover td { background: var(--star-row-hover); }
html body.psp-2026 .psp-meter--warn > span { background: var(--star-warn); }
html body.psp-2026 .psp-delta--good { color: var(--psp-ok); background: rgba(40,180,120,.16); }
html body.psp-2026 .psp-delta--bad  { color: var(--psp-danger); background: var(--psp-danger-tint); }
html body.psp-2026 .psp-vs--pos { color: var(--psp-ok); }
html body.psp-2026 .psp-vs--neg { color: var(--psp-danger); }
html body.psp-2026 .psp-pairhint { background: var(--psp-brand-tint); border-color: var(--psp-brand-line); color: var(--psp-ink); }
html body .psp-help-pop { background: var(--star-raise); border-color: var(--psp-border); color: var(--psp-ink); box-shadow: var(--star-shadow-lg); }
html body .psp-help-pop b, html body .psp-help-pop__who b { color: var(--psp-ink); }
html body .psp-help-btn { background: var(--star-grad); box-shadow: 0 6px 18px var(--star-glow); }
html body.psp-2026 .psp-chart rect { fill: var(--psp-brand); rx: 5px; ry: 5px; opacity: .92; }
html body.psp-2026 .psp-chart rect:hover { fill: var(--star-accent); opacity: 1; }
html body.psp-2026 .psp-chart text { fill: var(--psp-ink-soft); }

/* ===========================================================================
   Sign-in pages, themed: same tokens as the app, glass card, gradient accents
   =========================================================================== */
html body:has(.psp-login) { background: var(--psp-bg) !important; background-image: var(--star-page-img) !important; }
html[data-theme="dark"] body:has(.psp-login) {
    background-image: radial-gradient(700px 420px at 15% 0%, rgba(47,111,224,.28), transparent 70%),
                      radial-gradient(700px 420px at 90% 10%, rgba(108,92,240,.26), transparent 70%),
                      radial-gradient(600px 400px at 50% 100%, rgba(34,199,181,.14), transparent 70%) !important;
    background-color: #070B14 !important;
}
.psp-login__brand img { filter: none; }
html[data-theme="dark"] .psp-login__brand img { filter: brightness(1.7) saturate(1.15) drop-shadow(0 6px 22px rgba(91,152,255,.35)); }
.psp-login__brand h1 { color: var(--psp-ink); }
.psp-login__brand h1 span, .psp-login__brand .psp-login__who { color: var(--psp-ink-soft); }
html body .psp-switch { background: var(--star-th-bg); border: 1px solid var(--psp-border); }
html body .psp-switch__tab { color: var(--psp-ink-soft); }
html body .psp-switch__tab:hover { color: var(--psp-ink); }
html body .psp-switch__tab--customer.is-active { background: linear-gradient(135deg, #2F6FE0, #4C8DF5); color: #fff; box-shadow: 0 4px 14px rgba(47,111,224,.4); }
html body .psp-switch__tab--staff.is-active    { background: linear-gradient(135deg, #6A4BD0, #8A6CF0); color: #fff; box-shadow: 0 4px 14px rgba(106,75,208,.4); }
html body .psp-login--customer .psp-login__portal { background: linear-gradient(135deg, #2F6FE0, #4C8DF5); }
html body .psp-login--staff .psp-login__portal    { background: linear-gradient(135deg, #6A4BD0, #8A6CF0); }
html body .psp-login__ai { background: var(--psp-brand-tint); border: 1px solid var(--psp-brand-line); }
html body .psp-login__ai b { color: var(--psp-brand-darker); }
html[data-theme="dark"] body .psp-login__ai b { color: var(--psp-ink); }
html body .psp-login__brand .psp-login__ai p { color: var(--psp-ink); }
html body .psp-login__chips span { background: var(--star-surface2); border: 1px solid var(--psp-border); color: var(--psp-ink-soft); }
html body .psp-login .psp-card { background: var(--psp-surface); border: 1px solid var(--psp-border); border-radius: 18px; box-shadow: var(--star-shadow-lg); overflow: hidden; }
html[data-theme="dark"] body .psp-login .psp-card { background: rgba(17,26,44,.82); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }
html body .psp-login--customer .psp-card { border-top: 0; } html body .psp-login--staff .psp-card { border-top: 0; }
html body .psp-card__head { background: var(--star-grad) !important; color: #fff !important; font-weight: 650; letter-spacing: .02em; }
html body .psp-field label { color: var(--psp-ink-soft); }
html body .psp-foot, html body .psp-foot__sep { color: var(--star-mute); }
html body .psp-alert { background: var(--psp-danger-tint); color: var(--psp-ink); border-color: var(--psp-danger); }
html body .psp-alert--ok { background: rgba(40,180,120,.14); border-color: rgba(40,180,120,.5); }
html body .psp-alert--info { background: var(--psp-brand-tint); border-color: var(--psp-brand-line); }

/* --- last fixed-white surfaces ------------------------------------------- */
html body.psp-2026 table.searchhandler_table1 tr:last-child .bgcolor_005,
html body.psp-2026 table.searchhandler_table1 tr:last-child .bgcolor_004 { background: var(--star-surface2) !important; border-top-color: var(--psp-border); }
html body.psp-2026 .psp-qr, html body.psp-2026 .psp-codes li, html body.psp-2026 .psp-mailframe,
html body.psp-2026 .psp-workcard:hover, html body.psp-2026 .psp-input,
html body.psp-2026 a.psp-searchnotice__clear { background: var(--psp-surface) !important; color: var(--psp-ink); border-color: var(--psp-border); }
html body.psp-2026 .psp-legacy { background: var(--star-surface2); color: var(--psp-ink-soft); }
html body.psp-2026 .psp-searchnotice { background: var(--star-row-agent); color: var(--psp-ink); }
html body.psp-2026 table.searchhandler_table1 select:focus,
html body.psp-2026 table.searchhandler_table1 select.psp-sf-mode:focus { background-color: var(--psp-surface) !important; }

/* --- search button + command palette -------------------------------------- */
.star-search {
    display: flex; align-items: center; gap: 10px; width: 100%; margin: 10px 0 2px; padding: 9px 12px; cursor: pointer;
    border-radius: 12px; border: 1px solid var(--psp-border); background: var(--star-surface2);
    font: inherit; font-size: 13px; color: var(--star-mute); text-align: left; transition: border-color .15s, box-shadow .15s;
}
.star-search:hover { border-color: var(--psp-brand-line); box-shadow: var(--star-ring); color: var(--psp-ink-soft); }
.star-search__txt { flex: 1 1 auto; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.star-search kbd, .star-pal kbd {
    font: 600 10.5px/1 var(--psp-font); padding: 4px 6px; border-radius: 6px; color: var(--psp-ink-soft);
    background: var(--psp-surface); border: 1px solid var(--psp-border); box-shadow: 0 1px 0 var(--psp-border);
}
body.star-collapsed .star-search { justify-content: center; padding: 10px 0; }
body.star-collapsed .star-search__txt, body.star-collapsed .star-search kbd { display: none; }
@media (max-width: 860px) { .star-search { width: auto; margin: 0; } .star-search__txt, .star-search kbd { display: none; } }

.star-pal { position: fixed; inset: 0; z-index: 9000; display: grid; place-items: start center; padding-top: 14vh; }
.star-pal[hidden] { display: none; }
.star-pal__scrim { position: absolute; inset: 0; background: rgba(6,10,20,.55); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); animation: star-fade .15s ease; }
.star-pal__box {
    position: relative; width: min(620px, calc(100vw - 32px)); overflow: hidden; border-radius: 18px;
    background: var(--star-raise); border: 1px solid var(--psp-border); box-shadow: var(--star-shadow-lg), 0 0 0 1px rgba(255,255,255,.02);
    animation: star-pop .18s cubic-bezier(.2,.9,.3,1.2);
}
.star-pal__in {
    width: 100%; box-sizing: border-box; padding: 18px 20px; font: inherit; font-size: 16px; color: var(--psp-ink);
    background: transparent; border: 0; border-bottom: 1px solid var(--psp-border); outline: none;
}
.star-pal__in::placeholder { color: var(--star-mute); }
.star-pal__list { list-style: none; margin: 0; padding: 8px; max-height: 340px; overflow-y: auto; }
.star-pal__item { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; border-radius: 11px; cursor: pointer; font-size: 14px; color: var(--psp-ink); }
.star-pal__item em { font-style: normal; font-size: 11px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--star-mute); }
.star-pal__item.is-sel { background: var(--psp-brand-tint); box-shadow: inset 3px 0 0 var(--psp-brand); }
.star-pal__none { padding: 22px; text-align: center; color: var(--psp-ink-soft); font-size: 14px; }
.star-pal__foot { display: flex; gap: 18px; padding: 10px 18px; border-top: 1px solid var(--psp-border); font-size: 11.5px; color: var(--star-mute); background: var(--star-surface2); }
.star-pal__foot kbd { margin-right: 4px; }
@keyframes star-fade { from { opacity: 0; } }
@keyframes star-pop { from { opacity: 0; transform: translateY(-8px) scale(.97); } }

/* --- motion: quick, quiet, and off for anyone who asks ------------------- */
@keyframes star-in { from { opacity: 0; transform: translateY(6px); } }
html body.psp-2026 > .psp-page, html body.psp-2026 > center, html body.psp-2026 > table, html body.psp-2026 > form { animation: star-in .32s ease both; }
html body.psp-2026 .psp-tile, html body.psp-2026 .psp-dash-card { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
html body.psp-2026 .psp-tile:hover { transform: translateY(-2px); box-shadow: var(--psp-shadow); border-color: var(--psp-brand-line); }
html body.psp-2026 .psp-chip, html body.psp-2026 .psp-btn2 { transition: background .15s, border-color .15s, color .15s, transform .15s; }
html body.psp-2026 .psp-chip:hover { transform: translateY(-1px); }
html body.psp-2026 table.psp-grid tr td.tableBody:first-child { box-shadow: inset 0 0 0 var(--psp-brand); transition: box-shadow .15s; }
html body.psp-2026 table.psp-grid tr:hover td.tableBody:first-child { box-shadow: inset 3px 0 0 var(--psp-brand); }
@media (prefers-reduced-motion: reduce) {
    html body.psp-2026 *, .star-pal__box, .star-pal__scrim, .star-link, .star-side { animation: none !important; transition: none !important; }
}

/* legacy text classes that hard-code a navy: follow the theme instead */
html body.psp-2026 .NormalText, html body.psp-2026 .NormalTextBold, html body.psp-2026 .TextTitle,
html body.psp-2026 .fontstyle_001, html body.psp-2026 .fontstyle_004, html body.psp-2026 .fontstyle_005,
html body.psp-2026 td.NormalText, html body.psp-2026 .BigText { color: var(--psp-ink) !important; }
html body.psp-2026 .psp-quickfilter__label, html body.psp-2026 .psp-legend__lbl { color: var(--psp-ink-soft); }

/* add / edit / delete forms: centered card, comfortable width */
html body.psp-2026 table.addform_table1, html body.psp-2026 table.editform_table1, html body.psp-2026 table.delform_table1 {
    margin: 4px auto 24px !important; max-width: 1000px; width: 100% !important;
    border: 1px solid var(--psp-border); border-radius: var(--psp-radius); overflow: hidden; box-shadow: var(--psp-shadow);
    border-collapse: separate; border-spacing: 0;
}
html body.psp-2026 .addform_table1 .tableBodyLeft, html body.psp-2026 .editform_table1 .tableBodyLeft { color: var(--psp-ink-soft); font-weight: 550; }

/* ===========================================================================
   Star AI screens
   =========================================================================== */
.star-note { margin: 0 0 18px; padding: 14px 18px; border-radius: 14px; font-size: 13.5px; line-height: 1.55;
    background: var(--psp-brand-tint); border: 1px solid var(--psp-brand-line); color: var(--psp-ink); }
.star-status { display: inline-flex; align-items: center; gap: 12px; padding: 8px 8px 8px 16px; border-radius: 999px;
    border: 1px solid var(--psp-border); background: var(--psp-surface); box-shadow: var(--psp-shadow); }
.star-status b { font-size: 13px; letter-spacing: .02em; }
.star-status__dot { width: 9px; height: 9px; border-radius: 50%; background: #22C7B5; box-shadow: 0 0 10px #22C7B5; animation: star-pulse 2s infinite; }
.star-status.is-paused .star-status__dot { background: var(--star-warn); box-shadow: 0 0 10px var(--star-warn); animation: none; }
@keyframes star-pulse { 50% { opacity: .35; } }
.star-inline { display: inline; margin: 0; }
.star-sub { display: block; margin-top: 4px; font-size: 12px; }
a.psp-tile { text-decoration: none; color: inherit; }
a.psp-tile:hover { border-color: var(--psp-brand-line); }
.star-tile--good .psp-tile__n { color: var(--psp-ok); }
.star-tile--warn .psp-tile__n { color: var(--star-warn); }
.star-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 18px; margin-bottom: 0; }
@media (max-width: 900px) { .star-row { grid-template-columns: 1fr; } }
.star-page .psp-panel { margin-bottom: 18px; }
.star-modelist { list-style: none; margin: 12px 0; padding: 0; display: grid; gap: 8px; }
.star-modelist li { font-size: 14px; } .star-modelist em { font-style: normal; color: var(--psp-ink-soft); margin-left: 6px; font-size: 12.5px; }
.star-dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 9px; background: var(--star-mute); }
.star-dot--assist { background: #F0A92B; } .star-dot--auto { background: #22C7B5; }

.star-bars { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 4px; }
.star-bars a { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(80px, 1fr) 64px; gap: 14px; align-items: center; padding: 9px 10px; border-radius: 10px; text-decoration: none; color: var(--psp-ink); font-size: 13.5px; }
.star-bars a:hover, .star-bars a.is-on { background: var(--psp-brand-tint); }
.star-bars__bar { height: 8px; border-radius: 8px; background: var(--star-th-bg); overflow: hidden; }
.star-bars__bar i { display: block; height: 100%; border-radius: 8px; background: var(--star-grad); }
.star-bars__n { text-align: right; font-variant-numeric: tabular-nums; color: var(--psp-ink-soft); }

.star-tabs { display: inline-flex; gap: 4px; padding: 4px; margin-bottom: 14px; border-radius: 12px; background: var(--star-th-bg); border: 1px solid var(--psp-border); }
.star-tabs a { padding: 8px 16px; border-radius: 9px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--psp-ink-soft); }
.star-tabs a.is-on { background: var(--star-grad); color: #fff; box-shadow: 0 4px 14px var(--star-glow); }
.star-filter { margin: 0 0 12px; font-size: 13px; } .star-filter a { margin-left: 8px; }
.star-empty { padding: 28px 0; text-align: center; }
.star-tablewrap { overflow-x: auto; }
.star-table td, .star-table th { vertical-align: top; }
.star-ord { font-weight: 700; text-decoration: none; }
.star-act { text-align: right; white-space: nowrap; }
.star-chip { display: inline-block; margin: 0 6px 6px 0; padding: 4px 10px; border-radius: 999px; font-size: 11.5px; line-height: 1.35; background: rgba(240,169,43,.16); color: var(--star-warn); border: 1px solid rgba(240,169,43,.32); }
.star-chip--ok { background: rgba(40,180,120,.14); color: var(--psp-ok); border-color: rgba(40,180,120,.32); }
.star-chip--taken { background: var(--psp-brand-tint); color: var(--psp-brand-darker); border-color: var(--psp-brand-line); }
html[data-theme="dark"] .star-chip--taken { color: var(--psp-ink); }
.star-mode { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--star-mute); }
.star-mode--assist { color: #F0A92B; } .star-mode--auto { color: #22C7B5; }
.star-pager { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; }
.star-pager .psp-btn2 { margin-left: 6px; text-decoration: none; display: inline-block; }

.star-modetile.is-on { border-color: var(--psp-brand); box-shadow: var(--star-ring); }
.star-modetile--assist .psp-tile__n { color: #D98E10; } .star-modetile--auto .psp-tile__n { color: #14A596; }
.star-search-form { display: flex; gap: 10px; align-items: center; margin-bottom: 16px; flex-wrap: wrap; }
.star-search-form input[type=text] { min-width: 280px; padding: 9px 12px; }
.star-seg { display: inline-flex; gap: 3px; padding: 3px; border-radius: 11px; background: var(--star-th-bg); border: 1px solid var(--psp-border); }
.star-seg__b { padding: 7px 14px; border: 0; border-radius: 8px; cursor: pointer; font: inherit; font-size: 12.5px; font-weight: 650; background: transparent; color: var(--psp-ink-soft); }
.star-seg__b:hover { color: var(--psp-ink); background: var(--psp-brand-tint); }
.star-seg__b.is-on { color: #fff; box-shadow: 0 3px 10px rgba(0,0,0,.18); }
.star-seg__b--manual.is-on { background: #6B7C93; } .star-seg__b--assist.is-on { background: #E09A1F; } .star-seg__b--auto.is-on { background: #14A596; }
.star-log { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; font-size: 13.5px; }
.star-log li span { display: inline-block; min-width: 118px; }
.star-page p { color: var(--psp-ink); } .star-page p.psp-muted { color: var(--psp-ink-soft); }
html body.psp-2026 .star-tabs a.is-on, html[data-theme="dark"] body.psp-2026 .star-tabs a.is-on { color: #fff; }
html body.psp-2026 a.psp-btn2 { color: var(--psp-ink) !important; text-decoration: none; }