/* ============================================================================
   grid-refresh.css  —  Light-modern SfGrid restyle (2026 UI refresh).
   Loads AFTER material-syncfusion-overrides2.css so it wins (equal specificity +
   !important where the base uses it). Colours/typography only — no row-height
   forcing (that upsets Syncfusion's row measurement). Brand-aware via --color-sf-*.
   ============================================================================ */

/* ---- Header: distinct cool-slate band + firm underline (was charcoal #3f3f3f;
   the earlier #F5F7FA was too faint and got lost between the warm bands + white rows) --- */
.e-grid .e-gridheader {
    background-color: #E9EDF4 !important;
    border-color: #D3DAE5 !important;
    border-top: none !important;
}

.e-gridheader thead tr {
    background: #E9EDF4 !important;
    color: #5A6474 !important;
}

.e-grid .e-headercell, .e-grid .e-detailheadercell {
    background-color: transparent !important;
    border-color: #D3DAE5 !important;
}

.e-grid .e-gridheader tr th {
    border-bottom: 2px solid #C7D0DE !important;
}

.e-grid .e-headercell .e-headertext {
    color: #5A6474 !important;
    font-weight: 700 !important;
    font-size: 12.75px !important;
    text-transform: uppercase;
    letter-spacing: .04em;
}

/* header sort/menu icons muted (were white on the dark header) */
.e-grid .e-gridheader .e-icons:not(.e-icon-hide):not(.e-check):not(.e-stop) {
    color: #98A2B3 !important;
}

.e-grid th.e-headercell[aria-sort=ascending] .e-headertext,
.e-grid th.e-headercell[aria-sort=descending] .e-headertext,
.e-grid th.e-headercell[aria-sort=ascending] .e-sortfilterdiv,
.e-grid th.e-headercell[aria-sort=descending] .e-sortfilterdiv {
    color: rgb(var(--color-sf-primary)) !important;
}

/* ---- Rows: ink text, hairline separators ------------------------------------ */
.e-grid .e-rowcell {
    color: #21262E !important;
    border-color: #EEF1F6 !important;
}

.e-grid .e-rowcell, .e-grid .e-detailrowcollapse, .e-grid .e-detailrowexpand {
    border-color: #EEF1F6 !important;
}

.e-grid .e-altrow .e-rowcell {
    background-color: #ffffff;
}

/* hover — subtle brand tint */
.e-grid .e-content .e-row:hover .e-rowcell {
    background-color: rgb(var(--color-sf-primary), 0.045) !important;
}

/* selection — brand tint + ink text (replaces the pink) */
.e-grid .e-row .e-rowcell.e-selectionbackground,
.e-grid .e-row.e-active .e-rowcell,
.e-grid td.e-selectionbackground {
    background-color: rgb(var(--color-sf-primary), 0.09) !important;
    color: #141A24 !important;
}

/* row links keep the brand accent */
.e-grid .e-rowcell a {
    color: rgb(var(--color-sf-primary));
}

/* ---- Toolbar buttons: REFINED glass (frosted; echoes the top-bar glass controls;
   restrained — NOT the old heavy tan liquid-glass: subtle translucency, thin bright
   border, a whisper of blur + inner sheen, modest radius). --- */
#divHeader .e-btn.e-topButton {
    color: #2B3A4E !important;
    background-color: rgba(255, 255, 255, 0.86) !important; /* near-solid frosted white so it pops off the band */
    background-image: none !important;
    backdrop-filter: blur(7px) saturate(1.1) !important;
    -webkit-backdrop-filter: blur(7px) saturate(1.1) !important;
    border: 1px solid rgba(255, 255, 255, 0.95) !important;
    border-radius: 9px !important;
    box-shadow: 0 2px 6px rgba(20, 26, 36, .16), 0 1px 2px rgba(20, 26, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .9) !important;
    font-weight: 600 !important;
}

#divHeader .e-btn.e-topButton .e-btn-icon {
    color: #5A6474 !important;
    font-size: 15px !important;
}

#divHeader .e-btn.e-topButton:hover {
    background-color: rgba(255, 255, 255, 0.98) !important;
    filter: none !important;
    transform: translateY(-1px) !important;
    box-shadow: 0 5px 14px rgba(20, 26, 36, .20), 0 2px 4px rgba(20, 26, 36, .12), inset 0 1px 0 rgba(255, 255, 255, .95) !important;
}

#divHeader .e-btn.e-topButton:active {
    background-color: rgba(255, 255, 255, 0.90) !important;
    filter: none !important;
    transform: translateY(0) !important;
    box-shadow: 0 1px 3px rgba(20, 26, 36, .14), inset 0 1px 2px rgba(20, 26, 36, .07) !important;
}

#divHeader .e-btn.e-topButton:focus, #divHeader .e-btn.e-topButton:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgb(var(--color-sf-primary), .25) !important;
}

/* ---- Toolbar band (top) + Footer (bottom): softened brand-secondary wash so they
   bracket the grid together again (was the saturated maroon→gold gradient on both). --- */
#divHeader {
    background: rgb(var(--color-sf-secondary), 0.30) !important;
    border-bottom: 1px solid rgba(20, 26, 36, .08) !important;
}

#divMainGrid > #divFooter {
    background: rgb(var(--color-sf-secondary), 0.30) !important;
    border-top: 1px solid rgba(20, 26, 36, .08) !important;
}

/* ---- Matches action buttons (Analyze / Submit): TONAL (soft brand/green tint so they sit quiet in
   the grid rows) — not glass, not heavy solid. + a small gap between the two. (was .matchActionBtn glass in app.css) --- */
.matchActionBtn.e-btn {
    border-radius: 8px !important;
    padding: 6px 13px !important;
    margin: 0 !important;
    font-weight: 600 !important;
    text-transform: none !important;
    background-image: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    box-shadow: none !important;
    transition: background-color .14s ease, color .14s ease, border-color .14s ease !important;
}

.matchActionBtn + .matchActionBtn {
    margin-left: 7px !important;
}

/* gap between Analyze + Submit */

.matchActionBtn.e-primary {
    background-color: rgb(var(--color-sf-primary), 0.10) !important;
    color: rgb(var(--color-sf-primary)) !important;
    border: 1px solid rgb(var(--color-sf-primary), 0.22) !important;
}

.matchActionBtn.e-primary .e-btn-icon {
    color: rgb(var(--color-sf-primary)) !important;
    font-size: 12px !important;
}

.matchActionBtn.e-primary:hover {
    background-color: rgb(var(--color-sf-primary), 0.16) !important;
}

.matchActionBtn.e-success {
    background-color: rgba(23, 147, 106, 0.12) !important;
    color: #0F7A50 !important;
    border: 1px solid rgba(23, 147, 106, 0.30) !important;
}

.matchActionBtn.e-success .e-btn-icon {
    color: #0F7A50 !important;
    font-size: 12px !important;
}

.matchActionBtn.e-success:hover {
    background-color: rgba(23, 147, 106, 0.20) !important;
}

/* disabled Submit — clean light-gray tonal (was the muted grey pill) */
.matchActionBtn.e-btn:disabled, .matchActionBtn.e-btn.e-disabled {
    background-color: #F0F2F6 !important;
    color: #A6AEBB !important;
    border-color: #E4E8EF !important;
}

.matchActionBtn.e-btn:disabled .e-btn-icon, .matchActionBtn.e-btn.e-disabled .e-btn-icon {
    color: #A6AEBB !important;
}

/* ============================================================================
   components-refresh.css  —  Shared Syncfusion component restyle (2026 UI refresh).
   Home for the component-by-component pass (SpeedDial + dropdowns now; tabs / inputs
   / pills to follow). Loads LAST so it wins. Brand-aware via --color-sf-*.
   ============================================================================ */

/* SpeedDial restyle reverted 2026-07-05 (owner: "let's revert back and it be as it was") — the FAB + popup
   menu are back at the Syncfusion Material default. Dropdown styling below is kept. */

/* ===== Dropdown popups (SfDropDownList / ComboBox / AutoComplete lists) ===== */
.e-popup.e-ddl {
    border-radius: 10px !important;
    box-shadow: 0 8px 26px rgba(20, 26, 36, .16) !important;
    border: 1px solid #E6EAF1 !important;
    overflow: hidden;
}

.e-dropdownbase .e-list-item, .e-ddl.e-popup .e-list-item {
    color: #21262E !important;
}

.e-dropdownbase .e-list-item.e-hover,
.e-dropdownbase .e-list-item:hover,
.e-ddl.e-popup .e-list-item.e-hover {
    background-color: rgb(var(--color-sf-primary), 0.07) !important;
    color: rgb(var(--color-sf-primary)) !important;
}

.e-dropdownbase .e-list-item.e-active,
.e-dropdownbase .e-list-item.e-active.e-hover,
.e-ddl.e-popup .e-list-item.e-active {
    background-color: rgb(var(--color-sf-primary), 0.12) !important;
    color: rgb(var(--color-sf-primary)) !important;
    font-weight: 600 !important;
}

/* ===== Pager (grid footer) — compact 12px chrome (2026 refresh) =====
   Scoped to .e-pager so nothing else moves. Shrinks the page-size dropdown box + its
   pop-open arrow, and sets 12px on the dropdown value, the popup options, the "Items per
   page" label and the "N of M pages (items)" messages. */

/* page-size dropdown box — smaller footprint. Theme centres the 32px box with margin-top:-18px
   (material3.css); for the 24px box the equivalent lift is -14px (-18 + (32-24)/2). */
.e-pager .e-pagesizes .e-pagerdropdown {
    height: 24px !important;
    width: 58px !important;
    margin-top: -10px !important;
}

/* numeric page links + first/prev/next/last — nudge down so the row reads vertically centred in the bar */
.e-pager .e-pagercontainer {
    position: relative;
    top: 3px;
}

.e-pager .e-pagerdropdown .e-input-group,
.e-pager .e-pagerdropdown .e-input-group.e-control-wrapper {
    height: 24px !important;
    /*min-height: 24px !important;*/
}

.e-pager .e-pagerdropdown input.e-input,
.e-pager .e-pagerdropdown .e-dropdownlist {
    height: 16px !important;
    font-size: 12px !important;
    /*line-height: 24px !important;*/
    padding-top: 0 !important;
    padding-bottom: 0 !important;
}

/* pop-open arrow — 16px round box, dead-centre in the 24px input (PAGER-scoped: an unscoped
   .e-input-group-icon rule here would shrink every combobox/datepicker icon app-wide). */
.e-pager .e-pagerdropdown .e-input-group-icon.e-ddl-icon {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    align-self: center !important;
    height: 16px !important;
    width: 16px !important;
    min-height: 16px !important;
    min-width: 16px !important;
    padding: 0 !important;
    margin: 0 4px 0 0 !important;
    border-radius: 50%;
    font-size: 10px !important;
    line-height: 1 !important;
}

/* page-size popup options — 12px, compact. The popup is portaled to <body> on open, so no
   .e-pager-scoped selector can reach it (that was the earlier specificity dead-end). Fingerprint it
   by content instead: only the pager's page-size list carries both a 10 and a 75 item
   (GridHeader.razor SfPager PageSizes {10,25,50,75,100}). :has() lifts specificity well above the
   global 13px .e-dropdownbase rule. If PageSizes ever changes, update the two data-values here. */
.e-popup.e-ddl:has(.e-list-item[data-value="10"]):has(.e-list-item[data-value="75"]) .e-list-item {
    font-size: 12px !important;
    line-height: 26px !important;
    min-height: 26px !important;
}

/* "Items per page" label — 12px + pulled down to vertical centre (theme floats it up
   with margin-bottom:5px; kill that and nudge like the numeric row). */
.e-pager .e-pagerconstant {
    margin-bottom: 0 !important;
    position: relative;
    top: 2px;
}

.e-pager .e-pagerconstant .e-constant {
    font-size: 12px !important;
}

/* "1 of 145 pages" + "(3,616 items)" */
.e-pager .e-parentmsgbar .e-pagenomsg,
.e-pager .e-parentmsgbar .e-pagecountmsg {
    font-size: 12px !important;
}

/* ===== Form controls — 13px (2026 refresh; theme default is 14px) =====
   The theme puts font-size:14px on the .e-input-group WRAPPER (material3.css:3468) and every input
   inside uses font:inherit — so one wrapper rule re-sizes TextBox, DropDownList, ComboBox,
   AutoComplete, MultiSelect, NumericTextBox, Date/TimePicker, MaskedTextBox alike. The rest of the
   rules catch controls that size themselves outside the wrapper inheritance. */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-float-input,
.e-float-input.e-control-wrapper {
    font-size: 13px !important;
}

/* standalone inputs/textareas not wrapped in a group */
input.e-input,
textarea.e-input {
    font-size: 13px !important;
}

/* float labels track the smaller input */
.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text {
    font-size: 13px !important;
}

/* MultiSelect: delimiter text + box-mode chip text */
.e-multi-select-wrapper .e-delim-values,
.e-multi-select-wrapper .e-chips .e-chipcontent {
    font-size: 13px !important;
}

/* CheckBox / RadioButton / Switch label text (e-label; Switch on/off captions where themed) */
.e-checkbox-wrapper .e-label,
.e-radio + label .e-label,
.e-switch-wrapper .e-switch-on,
.e-switch-wrapper .e-switch-off {
    font-size: 13px !important;
}

/* SfDataForm field labels follow the controls */
.e-form-label {
    font-size: 13px !important;
}

/* ===== Radio (SfRadioButton) — selectable chip instead of a bare dot (2026 refresh) =====
   :has() lets the whole wrapper react to the inner input's checked state (e.g. Advanced Search
   "All / My Candidates"). Global — the app has few radios and they all read better this way. */
.e-radio-wrapper {
    display: inline-flex;
    align-items: center;
    padding: 6px 14px 6px 10px;
    border-radius: 9px;
    margin-right: 10px;
    border: 1px solid transparent;
    cursor: pointer;
    transition: background-color .14s ease, border-color .14s ease;
}

.e-radio-wrapper:hover {
    background: rgb(var(--color-sf-primary), 0.05);
}

.e-radio-wrapper:has(.e-radio:checked) {
    background: rgb(var(--color-sf-primary), 0.10);
    border-color: rgb(var(--color-sf-primary), 0.24);
}

.e-radio-wrapper:has(.e-radio:checked) .e-label {
    color: rgb(var(--color-sf-primary));
    font-weight: 600;
}

/* ===== Native checkboxes (plain <input type=checkbox> — e.g. Forward Resume Include Original/Formatted) =====
   These aren't Syncfusion SfCheckBox, so they had zero styling. accent-color brands the tick natively;
   the label rules give them layout + a disabled cue. */
.emailResumeChecks {
    display: flex;
    gap: 22px;
    align-items: center;
    margin-top: 4px;
}

.emailCheck {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #2B3A4E;
    cursor: pointer;
    user-select: none;
}

.emailCheck input[type="checkbox"] {
    width: 17px;
    height: 17px;
    accent-color: rgb(var(--color-sf-primary));
    cursor: pointer;
    margin: 0;
}

.emailCheck input[type="checkbox"]:disabled {
    cursor: not-allowed;
}

.emailCheck:has(input:disabled) {
    color: #A6AEBB;
    cursor: not-allowed;
}

/* ===== Re-parse / Update-from-Parsed action buttons (EditCandidate) — side-by-side tonal chips =====
   Were full-width stacked bars (dark e-primary + gold e-secondary). Now the app's tonal language:
   Re-parse = brand tint (primary action), Update = neutral ghost. */
.parseActionRow {
    display: flex;
    gap: 8px;
    margin-top: 8px;
}

.parseActionBtn.e-btn {
    width: auto !important;
    flex: 0 0 auto;
    border-radius: 8px !important;
    padding: 6px 14px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    background-image: none !important;
    box-shadow: none !important;
    transition: background-color .14s ease, border-color .14s ease, color .14s ease !important;
}

.parseActionBtn.e-primary {
    background: rgb(var(--color-sf-primary), 0.10) !important;
    color: rgb(var(--color-sf-primary)) !important;
    border: 1px solid rgb(var(--color-sf-primary), 0.22) !important;
}

.parseActionBtn.e-primary:hover {
    background: rgb(var(--color-sf-primary), 0.16) !important;
}

.parseActionBtn.e-secondary {
    background: transparent !important;
    color: #5A6474 !important;
    border: 1px solid #D8DFEA !important;
}

.parseActionBtn.e-secondary:hover {
    background: #EEF1F6 !important;
    border-color: #C7D0DE !important;
    color: #3A4250 !important;
}

.parseActionBtn.e-btn .e-btn-icon {
    font-size: 13px !important;
    color: inherit !important;
}

/* ===== Dialogs — light & airy re-skin (2026 refresh) =====
   Covers BOTH kinds (centre modal + right slide-in share .dialogPopup) plus confirm/alert.
   Replaces: solid-maroon 50px header + 24px uppercase white title, maroon->gold stdFooter
   gradient, solid gold/gray footer pills, 21px maroon group titles. Light surfaces, hairlines,
   tonal buttons — brand identity kept as a 3px accent line on the top edge. */

/* container: soft corners, float on a big soft shadow, thin brand accent on top */
.e-dialog.dialogPopup,
.e-dialog.e-confirm-dialog,
.e-dialog.e-alert-dialog {
    border-radius: 14px;
    border: none;
    border-top: 3px solid rgb(var(--color-sf-primary));
    overflow: hidden;
    box-shadow: 0 18px 50px rgba(20, 26, 36, .20), 0 4px 12px rgba(20, 26, 36, .08);
}

/* overlay: lighter scrim + a whisper of blur so the page recedes instead of blacking out */
.e-dlg-overlay {
    background-color: rgba(20, 26, 36, 0.32);
    backdrop-filter: blur(2.5px);
    -webkit-backdrop-filter: blur(2.5px);
}

/* header: soft cool gray + hairline so it reads as its own zone against the white content
   (was the solid maroon block; plain white blended into the body) */
.dialogPopup .e-dlg-header-content,
.e-confirm-dialog .e-dlg-header-content,
.e-alert-dialog .e-dlg-header-content {
    background: #F1F4F9;
    border-bottom: 1px solid #E2E8F0;
    border-radius: 0;
}

/* title: ink small-caps (echoes the grid header language; was 24px uppercase white) */
.e-dlg-header, .e-dlg-header *, .e-dialog .e-dlg-header {
    color: #2B3A4E;
    font-size: 15px;
    font-weight: 700;
    letter-spacing: .05em;
}

.e-dialog .e-dlg-header-content .e-icon-dlg-close {
    color: #5A6474 !important;
}

.e-dlg-content {
    color: #21262E;
}

/* section titles (BASIC INFORMATION / KEYWORDS…): quiet slate small-caps, was 21px maroon */
.e-data-form .e-group-title {
    color: #5A6474;
    font-size: 13px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .05em;
}

/* field labels: soft ink 600, was bold black */
.e-data-form .e-form-label {
    color: #2B3A4E;
    font-weight: 600;
}

/* footer: same soft gray as the header so the two bracket the white content
   (was the maroon->gold gradient / gold wash) */
.e-dialog .e-footer-content,
.dialogPopup.stdFooter .e-footer-content,
.matchAnalysisDialog .e-footer-content {
    background: #F1F4F9;
    border-top: 1px solid #E2E8F0;
    padding: 12px 20px;
    margin: 0;
    text-align: right;
}

/* footer buttons — same refined-glass language as the grid top buttons (frosted white, soft
   shadow, lift on hover) so they pop off the gray band instead of melting into it. Primary keeps
   a maroon tint + maroon text on the same elevation; success = green tint. Scoped to the footer
   so the FAB/grid buttons are untouched. */
.e-dialog .e-footer-content .e-btn {
    border-radius: 9px;
    padding: 7px 18px;
    font-weight: 600;
    text-transform: none;
    background-color: rgba(255, 255, 255, 0.92);
    background-image: none;
    border: 1px solid rgba(255, 255, 255, 0.95);
    color: #2B3A4E;
    box-shadow: 0 2px 6px rgba(20, 26, 36, .14), 0 1px 2px rgba(20, 26, 36, .08), inset 0 1px 0 rgba(255, 255, 255, .9);
    transition: transform .15s ease, box-shadow .2s ease, background-color .2s ease;
}

.e-dialog .e-footer-content .e-btn:hover {
    background-color: #FFFFFF;
    border-color: rgba(255, 255, 255, 1);
    color: #1F2733;
    transform: translateY(-1px);
    box-shadow: 0 5px 14px rgba(20, 26, 36, .18), 0 2px 4px rgba(20, 26, 36, .10), inset 0 1px 0 rgba(255, 255, 255, .95);
}

.e-dialog .e-footer-content .e-btn:active {
    transform: translateY(0);
    box-shadow: 0 1px 3px rgba(20, 26, 36, .14), inset 0 1px 2px rgba(20, 26, 36, .07);
}

.e-dialog .e-footer-content .e-btn.e-primary {
    background-color: rgb(var(--color-sf-primary), 0.12);
    border-color: rgb(var(--color-sf-primary), 0.25);
    color: rgb(var(--color-sf-primary));
}

.e-dialog .e-footer-content .e-btn.e-primary:hover {
    background-color: rgb(var(--color-sf-primary), 0.18);
    border-color: rgb(var(--color-sf-primary), 0.38);
    color: rgb(var(--color-sf-primary));
}

.e-dialog .e-footer-content .e-btn.e-success {
    background-color: rgba(23, 147, 106, 0.12);
    border-color: rgba(23, 147, 106, 0.30);
    color: #0F7A50;
}

.e-dialog .e-footer-content .e-btn.e-success:hover {
    background-color: rgba(23, 147, 106, 0.20);
    border-color: rgba(23, 147, 106, 0.40);
    color: #0F7A50;
}

.e-dialog .e-footer-content .e-btn .e-btn-icon {
    color: inherit;
    font-size: 13px;
}

.e-dialog .e-footer-content .e-btn:disabled,
.e-dialog .e-footer-content .e-btn.e-disabled {
    background: #F0F2F6;
    border-color: #E4E8EF;
    color: #A6AEBB;
}

/* ===== Tabs — light underline style (2026 refresh) =====
   Replaces the e-fill solid-maroon active block + white text: header on a hairline base,
   slate labels, active = brand text + 3px brand underline, faint brand tint on hover.
   Tab action icons (refresh etc.) flip from white-on-maroon back to brand. */

.e-tab .e-tab-header {
    background: transparent;
    border-bottom: 1px solid #E2E8F0;
}

/* kill the maroon fill behind the active tab (e-fill mode paints .e-tab-wrap + a ::before layer) */
.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap,
.e-tab .e-tab-header .e-toolbar-items .e-toolbar-item.e-active::before,
.e-tab.e-fill.e-focused .e-tab-header .e-toolbar-item.e-active .e-tab-wrap:focus {
    background: transparent;
}

/* labels: slate, 600; active goes brand */
.e-tab .e-tab-header .e-toolbar-item .e-tab-wrap,
.e-tab .e-tab-header .e-toolbar-item .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item .e-tab-icon {
    color: #5A6474 !important;
}

.e-tab .e-tab-header .e-toolbar-item .e-tab-text {
    font-weight: 600;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap {
    box-shadow: inset 0 -3px 0 rgb(var(--color-sf-primary));
}

.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-icon,
.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-text,
.e-tab.e-fill .e-tab-header .e-toolbar-item.e-active .e-tab-wrap .e-tab-icon {
    color: rgb(var(--color-sf-primary)) !important;
}

/* hover on inactive tabs: faint brand tint + brand text */
.e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover {
    background: rgb(var(--color-sf-primary), 0.05);
}

.e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover .e-tab-text,
.e-tab .e-tab-header .e-toolbar-item:not(.e-active) .e-tab-wrap:hover .e-tab-icon {
    color: rgb(var(--color-sf-primary)) !important;
}

/* tab action icons (matches refresh / panel actions) — were white on the maroon block;
   on the light active tab they follow the brand like the label */
.e-tab .e-tab-header .e-toolbar-item.e-active .matchTabRefresh,
.e-tab .e-tab-header .e-toolbar-item.e-active .tabActionIcon {
    color: rgb(var(--color-sf-primary)) !important;
    border-color: rgb(var(--color-sf-primary), 0.55) !important;
}

.e-tab .e-tab-header .e-toolbar-item.e-active .matchTabRefresh:hover,
.e-tab .e-tab-header .e-toolbar-item.e-active .tabActionIcon:hover {
    color: rgb(var(--color-sf-primary)) !important;
    border-color: rgb(var(--color-sf-primary)) !important;
    background-color: rgb(var(--color-sf-primary), 0.10) !important;
}

/* content panel frames: hairline gray instead of 50% maroon */
div#tabCompany div[id^="e-content-tabCompany"],
div#tabCandidates div[id^="e-content-tabCandidates"],
div#tabRequisition div[id^="e-content-tabRequisition"],
div#tabDashboard div[id^="e-content-tabDashboard"] {
    border: 1px solid #E2E8F0;
}

/* ===== Inputs — light pass (2026 refresh) =====
   Sections: [1] text underlines/focus  [2] placeholders + wrapper icons  [3] multiselect chips
   [4] uploader  [5] RTE frame. Switch lives in app.css (replaced the glass block in place).
   Error state (.e-error) is deliberately left to the theme — validation must stay loud. */

/* [1] resting underline: hairline slate (was near-black); hover one step firmer; focus bar = brand */
.e-input-group:not(.e-error):not(.e-disabled),
.e-input-group.e-control-wrapper:not(.e-error):not(.e-disabled),
.e-float-input:not(.e-error):not(.e-disabled),
input.e-input:not(.e-error),
textarea.e-input:not(.e-error) {
    border-bottom-color: #C9D3E0 !important;
}

.e-input-group:hover:not(.e-error):not(.e-disabled):not(.e-input-focus),
.e-input-group.e-control-wrapper:hover:not(.e-error):not(.e-disabled):not(.e-input-focus),
.e-float-input:hover:not(.e-error):not(.e-disabled) {
    border-bottom-color: #A9B7C9 !important;
}

.e-input-group:not(.e-error)::before,
.e-input-group:not(.e-error)::after,
.e-float-input:not(.e-error) .e-float-line::before,
.e-float-input:not(.e-error) .e-float-line::after,
.e-input-group:not(.e-error) .e-float-line::before,
.e-input-group:not(.e-error) .e-float-line::after {
    background: rgb(var(--color-sf-primary)) !important;
}

/* [2] quiet placeholders + slate wrapper icons (dropdown arrows, clear, calendar …) */
.e-input-group input.e-input::placeholder,
.e-input-group textarea.e-input::placeholder,
input.e-input::placeholder,
textarea.e-input::placeholder {
    color: #A6AEBB !important;
    opacity: 1;
}

.e-input-group .e-input-group-icon,
.e-input-group.e-control-wrapper .e-input-group-icon {
    color: #5A6474;
}

/* [3] multiselect chips: soft brand tint (was solid maroon blocks) — text-fill overrides needed
   because the base rules paint via -webkit-text-fill-color, which beats plain color */
.e-multi-select-wrapper .e-chips,
.e-multi-select-wrapper .e-chips.e-chip-selected {
    background: rgb(var(--color-sf-primary), 0.10) !important;
    border: 1px solid rgb(var(--color-sf-primary), 0.22);
    border-radius: 8px;
}

.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips:hover,
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover {
    background-color: rgb(var(--color-sf-primary), 0.16) !important;
}

.e-multiselect .e-multi-select-wrapper .e-chips .e-chipcontent,
.e-multiselect:not(.e-disabled) .e-multi-select-wrapper .e-chips.e-chip-selected:hover .e-chipcontent {
    color: rgb(var(--color-sf-primary));
    -webkit-text-fill-color: rgb(var(--color-sf-primary));
}

.e-multi-select-wrapper .e-chips .e-chips-close::before {
    color: rgb(var(--color-sf-primary));
    -webkit-text-fill-color: rgb(var(--color-sf-primary));
}

/* [4] uploader: soft dashed drop zone */
.e-upload {
    border: 1px dashed #C9D3E0;
    border-radius: 10px;
}

.e-upload .e-upload-files {
    border-top-color: #E2E8F0;
}

.e-upload .e-upload-files .e-upload-file-list {
    border-bottom-color: #EEF1F6;
}

/* [5] rich text editor frame follows the hairline language */
.e-rte-container {
    border-color: #E2E8F0;
}

/* ===== Grid-load spinner anchor (warm-up fix) =====
   #divGrid (GridHeader's grid slot) becomes the positioning context for the declarative
   grid-load SfSpinner overlay (Candidates GridSpinner) — its .e-spinner-pane/.spinnerHeight is
   absolute+100%, so without this it would size against some higher positioned ancestor. */
#divGrid {
    position: relative;
}

/* ===== SfSpeedDial FAB anchor (2026-08-06) =====
   The FAB is `position: absolute` with `top`/`right` offsets (theme: .e-fab.e-btn), so it anchors to its
   nearest positioned ANCESTOR. Without this rule that ancestor was #divGrid immediately above, and the FAB
   detached from the detail tab and pinned to the top-right of the whole grid. Making the detail cell
   positioned hands the FAB a containing block whose box IS the tab area, on all five entity pages at once.

   Two things that do NOT work, already tried — do not repeat them:
   - `position: relative` on #tabCandidates / #tabCompany / #tabRequisition. The SfSpeedDial is a SIBLING
     rendered just before the SfTab, not a descendant, so a positioned sibling is irrelevant to it.
   - `position: relative` on the FAB itself. It lands visually but keeps the FAB IN FLOW, so it still
     reserves its ~56px box and opens a gap above the tab.
   `Target="#tab..."` is NOT what positions the FAB (placement is pure CSS) — but keep it: it scopes the
   modal overlay. The paired `top`/`right` offsets live in material-syncfusion-overrides.css. */
.e-grid .e-detailcell {
    position: relative;
}

/* Why a disabled control in the user dialog is disabled. Without this the switch just looks broken. */
.protected-account-note {
    color: #663C00;
    font-size: 0.8125rem;
    margin-top: 4px;
}

/* ===== PDF viewer — neutral light canvas (2026 refresh) =====
   The theme paints the viewer with a brand-14% GRADIENT (background shorthand — the old 0.05
   background-color override never removed it → the pink wash hiding the scrollbar) and frames it
   with --color-sf-outline-variant (the teal). Neutral gray canvas + hairline instead. */
/* Issue #480: .e-de-background is the SfDocumentEditor canvas and it carries the identical construct
   this block was written to kill — rgba(var(--color-sf-primary), 0.05) over the surface, i.e. the maroon
   wash. The Word branch of the viewer is the same surface as the PDF branch, so it is neutralised by the
   same declaration rather than by a second one that would drift. */
.e-pdfviewer .e-pv-viewer-container,
.e-pv-viewer-container,
.e-pv-viewer-main-container,
.e-pv-page-container,
.e-de-background {
    background: #EDEFF3 !important;
    border-color: #E2E8F0 !important;
}

/* Issue #480: .doc-view-toolbar is the hand-rolled button row above SfDocumentEditor (that component
   ships no toolbar of its own). It shares this declaration with the PDF viewer's toolbar deliberately —
   the two viewers sit in the same dialog and a user switching between a .docx and a .pdf must not see
   the strip change colour. */
.e-pdfviewer .e-pv-toolbar,
.doc-view-toolbar {
    background: #F1F4F9 !important;
    border-bottom: 1px solid #E2E8F0 !important;
}

/* Layout for that row. The buttons are e-flat so they read as toolbar icons rather than as form
   buttons — the first cut left them as default SfButtons, which drew a border and a fill around every
   icon and looked nothing like the PDF toolbar beside it. */
.doc-view-toolbar {
    align-items: center;
    display: flex;
    gap: 2px;
    min-height: 42px;
    padding: 3px 8px;
}

.doc-view-toolbar .e-btn.e-flat {
    background: transparent;
    border: none;
    box-shadow: none;
    height: 32px;
    min-width: 32px;
    padding: 0;
    width: 32px;
}

.doc-view-toolbar .e-btn.e-flat:hover {
    background: #E2E8F0;
}

.doc-view-toolbar .e-btn.e-flat .e-btn-icon {
    color: #334155;
    font-size: 16px;
    margin: 0;
    width: auto;
}

/* Fixed width so the buttons either side do not shuffle as the percentage changes length. */
.doc-view-zoom {
    color: #475569;
    font-size: 0.8125rem;
    min-width: 3.25rem;
    text-align: center;
}

.doc-view-sep {
    background: #E2E8F0;
    height: 20px;
    margin: 0 4px;
    width: 1px;
}

/* Issue #480: referenced by ViewDoc.razor since #361 but never defined anywhere, which is why
   the inline notice rendered as unstyled body text and users walked straight past it. A refusal is an
   alert dialog now (#479); this is only for the informational cases ("no preview for .xlsx files"). */
.doc-load-error {
    background: #FFF4E5;
    border: 1px solid #FFB74D;
    border-radius: 4px;
    color: #663C00;
    font-size: 0.875rem;
    margin: 8px;
    padding: 10px 14px;
}

/* Issue #656: the shared non-blocking "this load failed" banner for PAGE load paths, where an awaited
   SfDialogService.Alert used to block the method's completion (and the spinner clearing) on the user
   dismissing a modal -- a hazard that had already hung a component test, since nothing clicks "OK".

   It exists as a GLOBAL class because the pattern it copies does not travel: Dash.razor.css's
   .dash-loaderror is Blazor-CSS-isolated to Dash.razor, so every other page that wanted the same banner
   had to either re-declare it in its own scoped sheet or inline the whole style attribute. Five sites
   needed it at once (Candidates, Companies, Leads, Requisitions, Calendar), so one global class beats
   five copies that drift.

   Values are .dash-loaderror's, verbatim, so the banner a user sees on a grid page is identical to the
   one on the dashboard. NOT the same as .doc-load-error above: that one is the document viewer's
   INFORMATIONAL notice ("no preview for .xlsx files"), a different message class in a different shade,
   and conflating them would make a failed load look like an expected limitation. */
.page-load-error {
    align-items: center;
    background: #FDF7E7;
    border: 1px solid #E9B949;
    border-left: 4px solid #E9B949;
    border-radius: 6px;
    color: #6B4E00;
    display: flex;
    font-size: 13px;
    gap: 8px;
    margin: 0 0 12px;
    padding: 10px 14px;
}

/* focus rings: theme hardcodes a 2px BLACK ring on the scroll container + focused page
   (material3.css:56533/56537). The CONTAINER ring is inset, so it draws over the scrollbar gutter
   on Esc/focus (the "black border on the scrollbar") — killed outright per owner. The focused-PAGE
   ring is kept as a subtle brand cue (it's not over the scrollbar, and it aids keyboard paging). */
.e-pv-viewer-container.e-focused {
    box-shadow: none !important;
}

.e-pv-viewer-container .e-pv-page-div.e-focused {
    box-shadow: rgb(var(--color-sf-primary), 0.30) 0 0 0 2px !important;
}

/* ===== Resume tab bands (Show Original/Formatted button strip + content frame) =====
   Follow the dialog-zone gray + hairline (were gold-20% wash + #ccc borders in the overrides). */
.resumeButtonContainer {
    background: #F1F4F9 !important;
    border: 1px solid #E2E8F0 !important;
    border-bottom: none !important;
}

.resumeContentContainer {
    border-color: #E2E8F0 !important;
}

/* ===== Resume templates (Admin) ===== */
/* The default template is applied silently on upload, so it has to be readable at a glance in the grid. */
.template-default-badge {
    background: #E8F1FF;
    border: 1px solid #B6D3F7;
    border-radius: 3px;
    color: #1B4F94;
    font-size: 0.6875rem;
    font-weight: 700;
    letter-spacing: .04em;
    margin-left: 8px;
    padding: 1px 6px;
    vertical-align: middle;
}

/* Explains that an empty upload box on edit is not an error. */
.template-upload-note {
    color: #5F6B7A;
    font-size: 0.8125rem;
    margin-top: 6px;
}

/* A Template-based FormItem loses SfDataForm's own label, so the switch draws its own. Two things are
   being corrected against the plain EditorType="Switch" rows beside it:
     1. SfSwitch renders a BLOCK-level wrapper, so without an explicit flex row the caption drops onto
        the next line.
     2. Without flex the row falls back to BASELINE alignment — the caption sits on the text baseline
        while the taller switch extends above it, so the label reads as low. align-items:center puts the
        two boxes on a shared centre line, which is what SfDataForm does for its own labels.
   Centring rather than a margin nudge on purpose: a fixed margin re-breaks the moment the switch or the
   font size changes. */
.switch-inline-label {
    align-items: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    gap: 10px;
    min-height: 32px;
}

/* The switch ships with its own vertical margin, which offsets the centre line it is being aligned on. */
.switch-inline-label .e-switch-wrapper {
    margin: 0 !important;
    vertical-align: middle;
}

.switch-inline-label > span {
    align-self: center;
    cursor: pointer;
    line-height: 1.2;
    margin: 0;
    user-select: none;
    white-space: nowrap;
}