html, body {
    font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
}

a, .btn-link {
    color: #006bb7;
}

.btn-primary {
    color: #fff;
    background-color: #1b6ec2;
    border-color: #1861ac;
}

.btn:focus, .btn:active:focus, .btn-link.nav-link:focus, .form-control:focus, .form-check-input:focus {
    /*box-shadow: 0 0 0 0.1rem white, 0 0 0 0.25rem #258cfb;*/
}

.e-input-group .e-input-group-icon, .e-input-group.e-control-wrapper .e-input-group-icon {
    font-size: 12px;
}

.e-page {
    font-size: 12px;
}
.content {
    padding-top: 1.1rem;
}

h1:focus {
    outline: none;
}

.alert {
    margin-top: 10px;
    margin-left: 10px;
}
.valid.modified:not([type=checkbox]) {
    outline: 1px solid #26b050;
}

.invalid {
    outline: 1px solid #e50000;
}

/*
.validation-message {
    color: #e50000;
}
*/

.blazor-error-boundary {
    background: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNTYiIGhlaWdodD0iNDkiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIG92ZXJmbG93PSJoaWRkZW4iPjxkZWZzPjxjbGlwUGF0aCBpZD0iY2xpcDAiPjxyZWN0IHg9IjIzNSIgeT0iNTEiIHdpZHRoPSI1NiIgaGVpZ2h0PSI0OSIvPjwvY2xpcFBhdGg+PC9kZWZzPjxnIGNsaXAtcGF0aD0idXJsKCNjbGlwMCkiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0yMzUgLTUxKSI+PHBhdGggZD0iTTI2My41MDYgNTFDMjY0LjcxNyA1MSAyNjUuODEzIDUxLjQ4MzcgMjY2LjYwNiA1Mi4yNjU4TDI2Ny4wNTIgNTIuNzk4NyAyNjcuNTM5IDUzLjYyODMgMjkwLjE4NSA5Mi4xODMxIDI5MC41NDUgOTIuNzk1IDI5MC42NTYgOTIuOTk2QzI5MC44NzcgOTMuNTEzIDI5MSA5NC4wODE1IDI5MSA5NC42NzgyIDI5MSA5Ny4wNjUxIDI4OS4wMzggOTkgMjg2LjYxNyA5OUwyNDAuMzgzIDk5QzIzNy45NjMgOTkgMjM2IDk3LjA2NTEgMjM2IDk0LjY3ODIgMjM2IDk0LjM3OTkgMjM2LjAzMSA5NC4wODg2IDIzNi4wODkgOTMuODA3MkwyMzYuMzM4IDkzLjAxNjIgMjM2Ljg1OCA5Mi4xMzE0IDI1OS40NzMgNTMuNjI5NCAyNTkuOTYxIDUyLjc5ODUgMjYwLjQwNyA1Mi4yNjU4QzI2MS4yIDUxLjQ4MzcgMjYyLjI5NiA1MSAyNjMuNTA2IDUxWk0yNjMuNTg2IDY2LjAxODNDMjYwLjczNyA2Ni4wMTgzIDI1OS4zMTMgNjcuMTI0NSAyNTkuMzEzIDY5LjMzNyAyNTkuMzEzIDY5LjYxMDIgMjU5LjMzMiA2OS44NjA4IDI1OS4zNzEgNzAuMDg4N0wyNjEuNzk1IDg0LjAxNjEgMjY1LjM4IDg0LjAxNjEgMjY3LjgyMSA2OS43NDc1QzI2Ny44NiA2OS43MzA5IDI2Ny44NzkgNjkuNTg3NyAyNjcuODc5IDY5LjMxNzkgMjY3Ljg3OSA2Ny4xMTgyIDI2Ni40NDggNjYuMDE4MyAyNjMuNTg2IDY2LjAxODNaTTI2My41NzYgODYuMDU0N0MyNjEuMDQ5IDg2LjA1NDcgMjU5Ljc4NiA4Ny4zMDA1IDI1OS43ODYgODkuNzkyMSAyNTkuNzg2IDkyLjI4MzcgMjYxLjA0OSA5My41Mjk1IDI2My41NzYgOTMuNTI5NSAyNjYuMTE2IDkzLjUyOTUgMjY3LjM4NyA5Mi4yODM3IDI2Ny4zODcgODkuNzkyMSAyNjcuMzg3IDg3LjMwMDUgMjY2LjExNiA4Ni4wNTQ3IDI2My41NzYgODYuMDU0N1oiIGZpbGw9IiNGRkU1MDAiIGZpbGwtcnVsZT0iZXZlbm9kZCIvPjwvZz48L3N2Zz4=) no-repeat 1rem/1.8rem, #b32121;
    padding: 1rem 1rem 1rem 3.7rem;
    color: white;
}

.blazor-error-boundary::after {
    content: "An error has occurred."
}

/* Issue #659: moved here verbatim from Components/Layout/MainLayout.razor.css (which is a SCOPED stylesheet,
   so these rules only ever applied inside MainLayout - a layout no production page uses). The markup moved to
   Components/App.razor, outside every layout; this is its styling, in the one stylesheet App.razor loads
   unconditionally and first, so the banner is styled on every page no matter which layout rendered.
   Note this is NOT the same thing as .blazor-error-boundary directly above: that class is the opt-in
   <ErrorBoundary> component's, for a scoped render-tree exception. #blazor-error-ui is matched BY ID by the
   Blazor client runtime and revealed on a fatal circuit error or a failed reconnect - the case where the whole
   page has stopped responding. display:none is what keeps it hidden until the runtime reveals it; without it
   the banner would sit on every screen permanently. */
#blazor-error-ui {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    /* Issue #659: raised from the template's 1000. Being present in the document is not enough if the app's own
       chrome paints over it, and three rules in stylesheets that load AFTER this one do exactly that:
       css/styles.css .loading-overlay is a FIXED, full-screen, 90%-opaque white cover at 9999; css/shell.css
       #live-activity-toast is 10020 !important; css/material-syncfusion-overrides.css .e-grid .e-spinner-pane
       is 12000. The .loading-overlay case is the likely one, not a corner case - a circuit that dies mid-load
       leaves the spinner cover up forever, which is precisely when the user needs to be told to reload, and at
       1000 the banner would render underneath it. Syncfusion also assigns dialog/popup z-indexes at runtime.
       This is a fatal-error banner over a dead page, so it takes the top of the stack outright. */
    z-index: 2147483647;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

.darker-border-checkbox.form-check-input {
    border-color: #929292;
}

/* ADDED: Support project selector layout and ignore toggle alignment. */
.project-selector {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-left: 15px;
    /*margin-bottom: 12px;*/
}

.project-selector .project-spinner {
    width: 24px;
    height: 24px;
}

.ignore-project-container {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 15px;
    margin-right: 12px;
}

.ignore-project-switch {
    min-width: 90px;
}

/* ADDED: Project page layout styles */
.project-detail-container {
    position: relative;
    padding: 16px;
}

.project-speed-dial {
    position: absolute;
    top: 0;
    right: 0;
    z-index: 5;
}

.project-detail-loading {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 200px;
}

.project-tab-toolbar {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 8px;
    gap: 8px;
}

.project-link-actions {
    display: flex;
    justify-content: center;
    gap: 6px;
    align-items: center;
}

/* Subtle status pill: faint colour tint + thin coloured border + coloured text — quiet, not a solid block.
   Toned down 2026-07-05 per owner (lighter border/weight, no blur) so it reads as understated like the buttons. */
.status-pill {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 70px;
    min-height: 24px;
    padding: 3px 12px;
    border-radius: 8px;
    font-size: 0.75rem;
    line-height: 1;
    font-weight: 500;
    letter-spacing: 0.1px;
    white-space: nowrap;
    text-align: center;
    vertical-align: middle;
    border: 1px solid transparent;
}

.status-active {
    color: #2f9e57;
    background-color: rgba(34, 197, 94, 0.05);
    border-color: rgba(34, 197, 94, 0.30);
}

.status-inactive {
    color: #c8574d;
    background-color: rgba(220, 38, 38, 0.05);
    border-color: rgba(220, 38, 38, 0.28);
}

/* Dynamic status pill: colour driven by the StatusCode.Color hex via the --status-c variable (Requisitions).
   color-mix darkens the text so even light codes (e.g. cyan #00ffff) stay readable on the faint tint. */
.status-pill-dynamic {
    color: var(--status-c, #555);
    color: color-mix(in srgb, var(--status-c, #555) 60%, #2a2a2a);
    background-color: color-mix(in srgb, var(--status-c, #555) 5%, transparent);
    border-color: color-mix(in srgb, var(--status-c, #555) 30%, transparent);
}

/* Project-count pill (Candidates/Requisitions/Companies grids) — replaces the plain Bootstrap badge.
   Shared markup across all 3: <button class="...project-badge"><span class="badge bg-info">{count}</span></button>.
   Subtle neutral chip (matches the grid's quiet palette, not the maroon glass); softens a touch on hover
   to signal it's clickable -> Manage Projects. Reverted from the maroon-glass look 2026-07-05 per owner. */
.project-badge {
    padding: 0 !important;
    border: 0 !important;
    background: none !important;
    line-height: 1 !important;
}

.project-badge .badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 28px;
    height: 22px;
    padding: 0 8px;
    border-radius: 11px;
    font-size: 0.72rem;
    font-weight: 600;
    color: #5A6474 !important;
    background-color: #EEF1F6 !important;
    border: 1px solid #D8DFEA !important;
    box-shadow: none;
    transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.project-badge:hover .badge {
    background-color: #E4E9F1 !important;
    border-color: #C7D0DE !important;
    color: #3A4250 !important;
}

/* Soft brand-blend backdrop for the grid header bar — gives the frosted switch/buttons something to refract
   (glassmorphism only shows what's behind it). Low alpha keeps the dark brand colours gentle; for a plain
   soft tint instead, drop one stop, e.g. background: rgb(var(--color-sf-secondary), 0.14). */
#divHeader {
    background: linear-gradient(120deg, rgb(var(--color-sf-primary), 0.13), rgb(var(--color-sf-secondary), 0.40));
    /*border-radius: 14px;*/
    /*padding: 10px 14px;*/
}

/* ===== iOS 26 "Liquid Glass" top-level grid buttons (GridHeader .e-topButton) — accent fill + glass sheen.
   Scoped to #divHeader so the ID specificity beats the CDN material3 .e-primary rules without !important. */
#divHeader .e-btn.e-topButton {
    color: #333;
    background-color: rgb(var(--color-sf-primary), 0.45);
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.85), rgba(255, 255, 255, 0.12));
    border: 1px solid rgba(255, 255, 255, 0.9);
    border-radius: 20px;
    padding: 8px 18px;
    font-weight: 700;
    letter-spacing: 0.2px;
    text-transform: none;
    backdrop-filter: blur(16px) saturate(180%);
    -webkit-backdrop-filter: blur(16px) saturate(180%);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(0, 0, 0, 0.06);
    transition: transform 0.15s ease, box-shadow 0.2s ease, background-color 0.2s ease, filter 0.2s ease;
    margin-left: 7px;
}

.project-selector input, .dropAlphabet input {
    margin-left: 10px !important;
}

#divHeader .e-btn.e-topButton .e-btn-icon {
    color: #333;
    font-size: 16px;
}

/* Hover KEEPS the base gloss (no background-image override -> inherits the 0.85 sheen); feedback is a gentle
   brighten + lift + stronger shadow, so it no longer darkens/flattens on hover. */
#divHeader .e-btn.e-topButton:hover {
    background-color: rgb(var(--color-sf-primary), 0.45);
    filter: brightness(1.07);
    box-shadow: 0 9px 24px rgba(0, 0, 0, 0.26),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    inset 0 -2px 4px rgba(0, 0, 0, 0.06);
    transform: translateY(-1px);
}

#divHeader .e-btn.e-topButton:active {
    background-color: rgb(var(--color-sf-primary), 0.45);
    filter: brightness(0.96);
    transform: translateY(0) scale(0.96);
    box-shadow: 0 3px 10px rgba(0, 0, 0, 0.20),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 2px 4px rgba(0, 0, 0, 0.10);
}

#divHeader .e-btn.e-topButton:focus,
#divHeader .e-btn.e-topButton:focus-visible {
    outline: none;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.22),
    0 0 0 1px rgba(0, 0, 0, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.95),
    0 0 0 4px rgb(var(--color-sf-primary), 0.30);
}

/* ===== Light SfSwitch (GLOBAL — every Syncfusion switch) ============================================
   2026 refresh: quiet neutral track + crisp white thumb; ON = brand track with readable on-label
   (replaces the frosted-glass pass). !important overrides the CDN material3 switch theme. */
.e-switch-wrapper .e-switch-inner {
    background-color: #E4E9F1 !important;
    background-image: none !important;
    border: 1px solid #D0D9E4 !important;
    box-shadow: none !important;
}

.e-switch-wrapper .e-switch-inner.e-switch-active {
    background-color: rgb(var(--color-sf-primary), 0.88) !important;
    background-image: none !important;
    border-color: rgb(var(--color-sf-primary), 0.55) !important;
}

.e-switch-wrapper .e-switch-handle {
    background-color: #FFFFFF !important;
    background-image: none !important;
    border: 1px solid rgba(20, 26, 36, 0.10) !important;
    box-shadow: 0 1px 3px rgba(20, 26, 36, 0.25) !important;
}

.e-switch-wrapper:hover .e-switch-inner:not(.e-switch-active) {
    border-color: #B6C2D4 !important;
    box-shadow: none !important;
}

/* on/off captions (YES/NO, ZIP/STATE …) stay readable on both tracks */
.e-switch-wrapper .e-switch-on {
    color: #FFFFFF !important;
}

.e-switch-wrapper .e-switch-off {
    color: #5A6474 !important;
}

/* Glass dialog-footer buttons REMOVED 2026-07-05 — superseded by the light & airy dialog re-skin
   (tonal primary / ghost cancel) in grid-refresh.css. The old maroon/gold 0.55 glass pills here were
   all-!important and silently out-muscled the new footer button rules. */

/* ===== "Show Resume" buttons (Candidates Resume tab — .original / .formatted) ==================
   2026 refresh: tonal brand chips (same language as the dialog-footer primary + Matches buttons) —
   replaces the maroon liquid-glass pills. !important beats the material override's .original/.formatted
   #3f3f3f gradient + maroon-solid :hover (that file loads after app.css) and any e-primary theme fill. */
.original.e-btn, .formatted.e-btn {
    color: rgb(var(--color-sf-primary)) !important;
    background-color: rgb(var(--color-sf-primary), 0.10) !important;
    background-image: none !important;
    border: 1px solid rgb(var(--color-sf-primary), 0.25) !important;
    border-radius: 9px !important;
    padding: 7px 18px !important;
    font-weight: 600 !important;
    letter-spacing: 0.1px !important;
    text-transform: none !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    box-shadow: none !important;
    transition: background-color 0.15s ease, border-color 0.15s ease !important;
}

.original.e-btn .e-btn-icon, .formatted.e-btn .e-btn-icon {
    color: rgb(var(--color-sf-primary)) !important;
}

.original.e-btn:hover, .formatted.e-btn:hover {
    background-color: rgb(var(--color-sf-primary), 0.17) !important;
    border-color: rgb(var(--color-sf-primary), 0.38) !important;
    color: rgb(var(--color-sf-primary)) !important;
    filter: none;
    transform: none;
    box-shadow: none !important;
}

.original.e-btn:active, .formatted.e-btn:active {
    background-color: rgb(var(--color-sf-primary), 0.22) !important;
    filter: none;
    transform: none;
}

.original.e-btn:focus, .formatted.e-btn:focus,
.original.e-btn:focus-visible, .formatted.e-btn:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 3px rgb(var(--color-sf-primary), 0.20) !important;
}

.original.e-btn:disabled, .formatted.e-btn:disabled {
    background-color: #F0F2F6 !important;
    border-color: #E4E8EF !important;
    color: #A6AEBB !important;
}

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

/* ===== Glass Matches action buttons (Analyze / Submit) — Cand<->Req Matches grids ==================
   Compact frosted pills with an IcoFont glyph; Analyze = maroon glass (e-primary), Submit = green glass
   (e-success). !important overrides the material3 small/flat/primary/success button theme. */
.matchActionBtn.e-btn {
    color: #333 !important;
    border-radius: 16px !important;
    padding: 6px 12px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    border: 1px solid rgba(255, 255, 255, 0.7) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.10)) !important;
    backdrop-filter: blur(10px) saturate(170%);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.matchActionBtn.e-primary {
    background-color: rgb(var(--color-sf-primary), 0.50) !important; /* Analyze — maroon glass */
}

.tabPop > .e-content {
    height: calc(100% - 30px);
}
.e-rating-container .e-rating-item-container .e-rating-icon {
    background: linear-gradient(0deg, rgba(var(--color-sf-primary), 0.11), rgba(var(--color-sf-primary), 0.11)), rgba(var(--color-sf-primary), 0.1);
}

.matchActionBtn.e-success {
    background-color: rgba(34, 197, 94, 0.50) !important; /* Submit — green glass */
}

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

.matchActionBtn.e-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

.matchActionBtn.e-btn:active {
    filter: brightness(0.96);
    transform: translateY(0) scale(0.97);
}

/* Disabled Submit (shown until Analyze runs): the colored-glass !important rules above otherwise make a disabled
   button look identical to an active one. Drop the glass to an inert muted grey + not-allowed cursor so it clearly
   reads as unavailable. Covers both :disabled (native attr) and .e-disabled (Syncfusion class). Shared by the
   Requisitions and Candidates Matches grids. */
.matchActionBtn.e-btn:disabled,
.matchActionBtn.e-btn.e-disabled,
.matchActionBtn.e-success:disabled,
.matchActionBtn.e-success.e-disabled {
    color: #9aa0a6 !important;
    background-color: rgba(0, 0, 0, 0.04) !important;
    background-image: none !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
    box-shadow: none !important;
    opacity: 0.65 !important;
    cursor: not-allowed !important;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
}

/* JD parse-assist on the Requisition ADD dialog: a collapsed-by-default <details> accordion so this optional
   "paste/upload a JD and pre-fill" feature doesn't push the form down. Only the thin summary bar shows until opened. */
.jdParseAccordion {
    margin: 0 0 14px 0;
    border: 1px solid rgba(255, 255, 255, 0.55);
    border-radius: 12px;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.45), rgba(255, 255, 255, 0.10));
    backdrop-filter: blur(12px) saturate(160%);
    -webkit-backdrop-filter: blur(12px) saturate(160%);
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.10), inset 0 1px 0 rgba(255, 255, 255, 0.70);
    overflow: hidden;
}

.jdParseAccordion .jdParseSummary {
    cursor: pointer;
    padding: 10px 14px;
    font-weight: 600;
    color: #444;
    list-style: none;          /* drop the default disclosure marker (Firefox) */
    user-select: none;
    display: flex;
    align-items: center;
    gap: 8px;
}

.jdParseAccordion .jdParseSummary::-webkit-details-marker {
    display: none;             /* drop the default disclosure triangle (WebKit/Chromium) */
}

.jdParseAccordion .jdParseSummary::before {
    content: "\25B8";          /* ▸ collapsed */
    display: inline-block;
    color: #0078d4;
    font-size: 0.9em;
    transition: transform 0.15s ease;
}

.jdParseAccordion[open] .jdParseSummary::before {
    transform: rotate(90deg);  /* ▾ expanded */
}

.jdParseAccordion .jdParseSummary:hover {
    background: rgba(0, 120, 212, 0.06);
}

.jdParseAccordion .jdParseAssist {
    padding: 4px 14px 14px 14px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.jdParseAccordion .jdParseLabel {
    display: block;
    margin: 8px 0;
    font-weight: 500;
}

.jdParseAccordion .jdParseRow {
    display: flex;
    align-items: center;        /* Parse & Fill button vertically centered to the (bare) upload box */
    gap: 12px;
    margin-top: 8px;
}

.jdParseAccordion .jdParseRow .e-upload {
    flex: 1 1 auto;
}

.jdParseAccordion .jdParseHint {
    margin-top: 8px;
    font-size: 0.85em;
    color: #555;
}

/* Parse & Fill — liquid-glass primary button (same frosted recipe as the Matches action pills). */
.jdParseFillBtn.e-btn {
    color: #333 !important;
    border-radius: 16px !important;
    padding: 8px 18px !important;
    font-weight: 600 !important;
    text-transform: none !important;
    white-space: nowrap;
    flex: 0 0 auto;
    border: 1px solid rgba(255, 255, 255, 0.70) !important;
    background-color: rgb(var(--color-sf-primary), 0.42) !important;
    background-image: linear-gradient(180deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.10)) !important;
    backdrop-filter: blur(10px) saturate(170%);
    -webkit-backdrop-filter: blur(10px) saturate(170%);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15),
    inset 0 1px 0 rgba(255, 255, 255, 0.85) !important;
    transition: transform 0.15s ease, box-shadow 0.2s ease, filter 0.2s ease !important;
}

.jdParseFillBtn.e-btn .e-btn-icon {
    color: #333 !important;
}

.jdParseFillBtn.e-btn:hover {
    filter: brightness(1.07);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.20),
    inset 0 1px 0 rgba(255, 255, 255, 0.90) !important;
}

.jdParseFillBtn.e-btn:active {
    filter: brightness(0.96);
    transform: translateY(0) scale(0.97);
}

.jdParseFillBtn.e-btn:disabled,
.jdParseFillBtn.e-btn.e-disabled {
    opacity: 0.6 !important;
    filter: none;
    box-shadow: none !important;
    cursor: not-allowed !important;
}

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

/* No hover lift / active press feedback on the disabled button. */
.matchActionBtn.e-btn:disabled:hover,
.matchActionBtn.e-btn.e-disabled:hover,
.matchActionBtn.e-btn:disabled:active,
.matchActionBtn.e-btn.e-disabled:active {
    filter: none !important;
    transform: none !important;
    box-shadow: none !important;
}

/* Glass "Sign Out" button in the maroon app-bar (PageHeader, next to Welcome) — white frosted pill on the dark bar. */
.logout-btn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin-left: 16px;
    padding: 5px 14px;
    border-radius: 16px;
    font-size: 13px;
    font-weight: 600;
    color: #fff;
    background-color: rgba(255, 255, 255, 0.15);
    border: 1px solid rgba(255, 255, 255, 0.5);
    backdrop-filter: blur(8px) saturate(150%);
    -webkit-backdrop-filter: blur(8px) saturate(150%);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.25),
    0 2px 6px rgba(0, 0, 0, 0.15);
    cursor: pointer;
    transition: background-color 0.15s ease, transform 0.15s ease, box-shadow 0.2s ease;
}

.logout-btn .icofont {
    font-size: 15px;
    color: #fff;
}

.logout-btn:hover {
    background-color: rgba(255, 255, 255, 0.28);
    transform: translateY(-1px);
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.35),
    0 4px 10px rgba(0, 0, 0, 0.20);
}

.logout-btn:active {
    transform: translateY(0) scale(0.97);
}

/* Clickable grid cell (Matches Title/Code/Name -> read-only preview). Looks identical to other cells; only the
   cursor changes to a hand to signal it's clickable. */
.link-cell {
    cursor: pointer;
}

/* Forward Resume — Include Original / Include Formatted checkboxes (EmailDialog) */
.emailResumeChecks {
    display: flex;
    gap: 24px;
    align-items: center;
    padding: 4px 0;
}

.emailCheck {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0;
    font-weight: 500;
    cursor: pointer;
}

.emailCheck input[disabled] {
    cursor: not-allowed;
    opacity: 0.5;
}

/* Read-only preview dialogs — scroll container for the Resume text tab. All data tabs
   (Skills / Education / Experience / Notes) reuse the live SfGrid panels, so no custom
   table/card CSS lives here anymore — the grids inherit the app-wide grid theme. */
.preview-list {
    padding: 14px 18px;
    overflow-y: auto;
    height: 100%;
}

.project-search-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.project-editor-form {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

.project-editor-active {
    display: flex;
    align-items: center;
    gap: 12px;
}

.project-editor-active label {
    font-size: 0.85rem;
    color: #555;
}

.project-remove-dialog {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding-top: 8px;
}

.project-remove-warning {
    display: flex;
    gap: 8px;
    align-items: center;
    color: #c94d46;
    font-size: 0.85rem;
}

.switch-label {
    font-size: 13px;
    color: #4a4a4a;
    margin-right: 5px;
}

\n /* ADDED: Page-level title styling for header bar (2025-10-14) */
.main-appbar {
    position: relative;
}

.main-appbar .page-title-inline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    font-size: 28px;
    font-weight: 600;
    text-transform: uppercase;
    color: #ffffff;
    pointer-events: none;
}