/*
 * vh-overrides.css — VanHack skins over THEME components (wave 11 sweep).
 *
 * vh-tokens.css holds the tokens + utility classes (Documentation/design-system.md);
 * this file holds the few targeted overrides where a LeptonX/Blazorise component
 * must match the legacy verbatim and cannot be reached from page-scoped CSS.
 *
 * 1) ABP/Blazorise MessageService dialogs (Message.Confirm / Info / Success...).
 *    The LeptonX theme paints the confirm button with its default theme brand;
 *    in the legacy every modal confirmation button uses --vh-primary and the
 *    Cancel is a gray text button (design-system.md §2, legacy-reject-modal.png).
 *    Selector targets ONLY the MessageProvider footer — Blazorise renders it as
 *    "modal-footer d-flex justify-content-center" (centered buttons), which no
 *    feature modal or ABP chrome modal uses — so the theme stays everywhere else.
 */

/* Classic ABP/Blazorise content cards use the same flat-surface contract as
   VanHack cards. Floating layers keep their own popover/modal elevation. */
body .card,
body .card:hover {
    border-color: var(--vh-line);
    box-shadow: var(--vh-shadow-surface);
}

/* LeptonX uses the same shadow token for structural chrome and floating
   context menus. Flatten only the page containers in Classic; menu elevation
   remains controlled by the theme and --vh-shadow-pop. */
body :is(.lpx-content-container, .lpx-topbar-container, .lpx-footbar-container),
body #lpx-wrapper.hover-trigger .lpx-content-container {
    box-shadow: var(--vh-shadow-surface);
}

/* Functional elevation for the framework primitives in Classic. Feature-level
   dialogs and menus may refine geometry, but they inherit the same depth tier. */
body :is(.modal-content, .offcanvas) {
    box-shadow: var(--vh-shadow-modal);
}

body :is(.dropdown-menu, .popover, .toast) {
    box-shadow: var(--vh-shadow-pop);
}

.modal .modal-footer.justify-content-center .btn-primary {
    /* Bootstrap 5 buttons are CSS-var driven — override the vars so hover/active/
       focus states ride the stock machinery... */
    --bs-btn-bg: var(--vh-primary);
    --bs-btn-border-color: var(--vh-primary);
    --bs-btn-hover-bg: var(--vh-primary-hover);
    --bs-btn-hover-border-color: var(--vh-primary-hover);
    --bs-btn-active-bg: var(--vh-primary-active);
    --bs-btn-active-border-color: var(--vh-primary-active);
    --bs-btn-disabled-bg: var(--vh-primary);
    --bs-btn-disabled-border-color: var(--vh-primary);
    /* ...and set the properties directly in case the theme bypasses the vars. */
    background-color: var(--vh-primary);
    border-color: var(--vh-primary);
    color: var(--vh-on-primary);
    border-radius: var(--vh-radius-sm);   /* legacy modal action buttons: 3px */
    font-family: var(--vh-font-secondary); /* Roboto (legacy VHButton) */
    font-weight: 500;
}
.modal .modal-footer.justify-content-center .btn-primary:hover {
    background-color: var(--vh-primary-hover);
    border-color: var(--vh-primary-hover);
}
.modal .modal-footer.justify-content-center .btn-primary:active {
    background-color: var(--vh-primary-active);
    border-color: var(--vh-primary-active);
}

/* Cancel of the confirm dialog (Blazorise renders it as btn-outline-primary):
   legacy modal Cancel = gray text button, no border (--vh-gray-90, hover gray-10). */
.modal .modal-footer.justify-content-center .btn-outline-primary {
    --bs-btn-color: var(--vh-gray-90);
    --bs-btn-border-color: var(--vh-transparent);
    --bs-btn-hover-bg: var(--vh-gray-10);
    --bs-btn-hover-color: var(--vh-gray-90);
    --bs-btn-hover-border-color: var(--vh-transparent);
    --bs-btn-active-bg: var(--vh-gray-20);
    --bs-btn-active-color: var(--vh-gray-90);
    --bs-btn-active-border-color: var(--vh-transparent);
    background-color: var(--vh-transparent);
    border-color: var(--vh-transparent);
    color: var(--vh-gray-90);
    border-radius: var(--vh-radius-sm);
    font-family: var(--vh-font-secondary);
}
.modal .modal-footer.justify-content-center .btn-outline-primary:hover {
    background-color: var(--vh-gray-10);
    border-color: var(--vh-transparent);
    color: var(--vh-gray-90);
}
.modal .modal-footer.justify-content-center .btn-outline-primary:active {
    background-color: var(--vh-gray-20);
    border-color: var(--vh-transparent);
    color: var(--vh-gray-90);
}

/* Shared recruiter candidate-profile modal for Talent Pool and Interview Pipeline —
   much larger than the default dialog (~500px) so the full dossier is comfortable.
   Global (not scoped): Blazorise renders the modal in a .focus-trap outside the host
   component's CSS scope. Scoped to our wrapper class so no other modal is affected. */
.vh-profile-modal-wrap {
    overflow: hidden;
    background: rgb(var(--vh-cobalt-shadow-rgb) / .58);
}
.vh-profile-modal-wrap .modal-dialog {
    max-width: min(1750px, 96vw);
    width: 96vw;
    margin-top: 16px;
    margin-bottom: 16px;
    margin-left: auto;
    margin-right: auto;
}
.vh-profile-modal-wrap .modal-content {
    overflow: hidden;
    border-color: var(--vh-line);
    border-radius: 14px;
    background: var(--vh-surface);
}
.vh-profile-modal-wrap .vh-profile-modal-body {
    max-height: calc(100vh - 32px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-gutter: stable;
    padding: 0 !important;
    background: var(--vh-surface);
}

/* Public Calendly modal — near-full viewport on tablet/desktop. Blazorise
   portals the modal outside the originating component's CSS scope, so the
   dialog shell must be sized in this global sheet. Mobile keeps the standard
   modal chrome and a bounded embedded calendar. */
@media (min-width: 768px) {
    .vhp-public-book-modal .modal-dialog {
        width: calc(100vw - 32px);
        max-width: calc(100vw - 32px);
        height: calc(100vh - 32px);
        margin: 16px auto;
    }

    .vhp-public-book-modal .modal-content {
        height: 100%;
        overflow: hidden;
    }

    .vhp-public-book-modal .modal-body {
        display: flex;
        flex: 1 1 auto;
        min-height: 0;
        padding: 0;
    }

    .vhp-public-book-modal .vhp-public-calendly-wrap,
    .vhp-public-book-modal .vhp-public-calendly {
        height: 100%;
    }
}

/* Matching Prompt is a writing surface, so keep both the dialog and editor tall
   enough for typical prompts without forcing an immediate inner scrollbar. */
.ipb-matching-modal-wrap .modal-dialog {
    margin-left: auto;
    margin-right: auto;
    max-width: min(1000px, calc(100vw - 32px));
    width: min(1000px, calc(100vw - 32px));
}
.ipb-matching-modal-wrap .ipb-matching-prompt {
    min-height: min(60vh, 640px);
    resize: vertical;
}

/* Calendar Setup uses the same portal-based Blazorise modal shell. Keep its
   editor wide enough for time ranges and provider actions without changing
   the default width of unrelated dialogs. */
.cs-modal-wrap .modal-dialog {
    height: min(900px, calc(100vh - 56px));
    height: min(900px, calc(100dvh - 56px));
    margin-left: auto;
    margin-right: auto;
    margin-top: max(28px, calc(50vh - 450px));
    margin-top: max(28px, calc(50dvh - 450px));
    margin-bottom: max(28px, calc(50vh - 450px));
    margin-bottom: max(28px, calc(50dvh - 450px));
    max-width: min(1040px, calc(100vw - 32px));
    min-height: 0;
    width: min(1040px, calc(100vw - 32px));
}
.cs-modal-wrap .cs-modal {
    border-radius: var(--bs-modal-border-radius, 9px);
    height: 100%;
    max-height: 100%;
    min-height: 0;
    overflow: hidden;
}
.cs-modal-wrap .cs-modal .modal-body {
    background: var(--vh-surface);
    block-size: auto;
    box-sizing: border-box;
    max-block-size: none;
    min-block-size: 0;
    overflow-anchor: none;
    overflow-y: auto;
    padding: 0;
    scrollbar-gutter: stable;
}
.cs-modal-wrap .cs-modal .modal-footer {
    align-items: center;
    background: var(--vh-surface);
    border-top: 1px solid var(--vh-line);
    display: flex;
    gap: 10px;
    justify-content: flex-end;
    padding: 14px 22px;
}

@media (max-width: 590px) {
    .cs-modal-wrap .modal-dialog {
        height: calc(100vh - 16px);
        height: calc(100dvh - 16px);
        margin-bottom: 8px;
        margin-top: 8px;
        max-width: calc(100vw - 12px);
        width: calc(100vw - 12px);
    }
    .cs-modal-wrap .cs-modal .modal-footer {
        flex-wrap: wrap;
        padding: 11px 14px;
    }
}

/* ---- Layout chrome (user direction 2026-07-07) ------------------------- */

/* The LeptonX right toolbar rail (avatar / native appearance / settings icons)
   is retired app-wide; account and appearance actions live in the left menu's
   Account group. The content container reclaims the rail's width. */
.lpx-toolbar-container { display: none !important; }
/* The mobile navbar has its own settings tree outside the desktop toolbar.
   Hide its native Light/Dark/Dim picker so the Account selector is authoritative. */
.lpx-mobile-navbar-container [data-lpx-setting-group="appearance"] { display: none !important; }
/* the content container reserved the rail's 72px -- reclaim it */
.lpx-content-container { margin-right: 0 !important; width: auto !important; }

/* Anonymous visitors and external profiles have short, fixed menus. The server
   app shell stamps this class from the exact ABP roles before first paint;
   internal staff and unlisted fallback roles retain LeptonX's native filter. */
body.vh-hide-menu-filter .lpx-menu-filter { display: none !important; }

/* The standalone candidate dossier uses the same white host surface as the
   interview-pipeline modal. :has keeps the override route-scoped without a body
   lifecycle class and applies during the initial profile loading state too. */
.lpx-content-container:has(.vhp-standalone-host) {
    background-color: var(--vh-surface) !important;
}

/* Next Steps leaves the candidate menu once all mandatory steps are done
   (body.vh-ns-done is stamped by CandidateChrome after probing completion). */
body.vh-ns-done a#MenuItem_VanHack_NextSteps { display: none !important; }
body.vh-ns-done li:has(> a#MenuItem_VanHack_NextSteps) { display: none !important; }

/* ---- Form inputs & combos (user direction 2026-07-08) -----------------------
 * LeptonX paints .form-control / .form-select with a grey fill + a
 * near-invisible border, which reads as DISABLED (the "Where" combo, the
 * Advanced-filters inputs, etc. all looked greyed-out). Flip the model:
 *   - ENABLED fields are white with a clear 1px border + a blue focus ring
 *     (design-system Cobalt: --vh-line-strong border, --vh-primary-hover focus).
 *   - The grey fill is now reserved for GENUINELY disabled/readonly fields.
 * background-color carries !important (the core "looks disabled" fix, must beat
 * the theme regardless of load order); border-color stays overridable so
 * Bootstrap validation states (.is-invalid) keep their colour.
 */
.form-control,
.form-select {
    /* --vh-surface is light on Light and flips with the dark token layer. */
    background-color: var(--vh-surface) !important;
    border-color: var(--vh-line-strong) !important;
    color: var(--vh-ink);
}
.form-control::placeholder { color: var(--vh-muted); opacity: 1; }
.form-control:focus,
.form-select:focus {
    border-color: var(--vh-primary-hover) !important;
    box-shadow: 0 0 0 3px rgb(var(--vh-primary-hover-rgb) / 15%) !important;
}
.form-control:disabled, .form-control[readonly],
.form-select:disabled {
    background-color: var(--vh-surface-soft) !important;
    color: var(--vh-muted);
    cursor: not-allowed;
}
/* Bootstrap validation borders must still win (they are more specific than the
   base rule, and carry !important to beat both the theme and the override). */
.form-control.is-invalid, .form-select.is-invalid { border-color: var(--vh-danger) !important; }
.form-control.is-valid, .form-select.is-valid { border-color: var(--vh-success) !important; }

/* Compound search bars (e.g. /jobs "What | Where | Remote") group fields with
   vertical dividers, so the combo inside must read as part of the bar — keep it
   borderless and transparent like its sibling text inputs, not a boxed control. */
.vh-searchbar .lk-input.form-control {
    background-color: var(--vh-transparent) !important;
    border: 0 !important;
    border-radius: 0;
    padding-left: 0;
    padding-right: 0;
    box-shadow: none !important;
}

/*
 * 2) LeptonX 5.x hardcodes its palette in the theme bundles instead of reading
 *    --lpx-brand: .btn-primary ships the default LeptonX blue, .btn-secondary
 *    a violet, and the checked form-switch a pink (with !important). Repaint the
 *    Bootstrap-var driven components with the VanHack palette. body-qualified
 *    (0-1-1) so these outgun the theme's equal-specificity blocks regardless of
 *    stylesheet load order; the switch needs !important because the theme uses it.
 */
body .btn-primary {
    --bs-btn-color: var(--vh-on-primary);
    --bs-btn-bg: var(--vh-primary);
    --bs-btn-border-color: var(--vh-primary);
    --bs-btn-hover-color: var(--vh-on-primary);
    --bs-btn-hover-bg: var(--vh-primary-hover);
    --bs-btn-hover-border-color: var(--vh-primary-hover);
    --bs-btn-active-color: var(--vh-on-primary);
    --bs-btn-active-bg: var(--vh-primary-active);
    --bs-btn-active-border-color: var(--vh-primary-active);
    --bs-btn-disabled-color: var(--vh-disabled-text);
    --bs-btn-disabled-bg: var(--vh-disabled-bg);
    --bs-btn-disabled-border-color: var(--vh-disabled-bg);
}
/* Theme secondary is a loud violet; the app uses Color.Secondary as a NEUTRAL
   action (e.g. talent-pool Load More) — repaint as the legacy quiet gray button
   (tokens flip on dark). The VanHack ORANGE secondary stays exclusive to the
   .vh-btn-secondary utility, as in the legacy. */
body .btn-secondary {
    --bs-btn-color: var(--vh-black-60);
    --bs-btn-bg: var(--vh-black-10);
    --bs-btn-border-color: var(--vh-black-10);
    --bs-btn-hover-color: var(--vh-black-80);
    --bs-btn-hover-bg: var(--vh-black-20);
    --bs-btn-hover-border-color: var(--vh-black-20);
    --bs-btn-active-color: var(--vh-black-80);
    --bs-btn-active-bg: var(--vh-black-20);
    --bs-btn-active-border-color: var(--vh-black-20);
    --bs-btn-disabled-color: var(--vh-disabled-text);
    --bs-btn-disabled-bg: var(--vh-disabled-bg);
    --bs-btn-disabled-border-color: var(--vh-disabled-bg);
}
body .btn-outline-primary {
    --bs-btn-color: var(--vh-primary);
    --bs-btn-border-color: var(--vh-primary);
    --bs-btn-hover-color: var(--vh-on-primary);
    --bs-btn-hover-bg: var(--vh-primary-hover);
    --bs-btn-hover-border-color: var(--vh-primary-hover);
    --bs-btn-active-color: var(--vh-on-primary);
    --bs-btn-active-bg: var(--vh-primary-active);
    --bs-btn-active-border-color: var(--vh-primary-active);
}
body .btn-link { --bs-btn-color: var(--vh-primary); --bs-btn-hover-color: var(--vh-primary-hover); --bs-btn-active-color: var(--vh-primary-active); }

body .form-check-input:checked {
    background-color: var(--vh-primary) !important;
    border-color: var(--vh-primary) !important;
}
body .form-check-input:focus {
    border-color: var(--vh-primary-hover);
    box-shadow: 0 0 0 0.25rem var(--vh-primary-soft);
}

/* Theme-blue surfaces (.bg-primary — e.g. the ABP cookie-consent bar) also
   ship the hardcoded default theme blue: repaint with the VanHack primary. Bootstrap
   paints .bg-primary with !important, so this must too. */
body .bg-primary { background-color: var(--vh-primary) !important; }