/*
   Keyboard-aware viewport height. --safe-keyboard-height is kept in sync by the
   MAUI host (visualViewport script + iOS native UIKeyboard observers). Full-height
   containers use this instead of raw 100dvh so the layout shrinks from the bottom
   when the soft keyboard opens, keeping inputs visible without pushing the app up.
*/
:root {
    --nw-viewport-height: calc(100dvh - var(--safe-keyboard-height, 0px));
    /* Reserved space scrollable content behind the floating BottomActions pill must pad out —
       keep in sync with BottomActions.razor.css's bar height/margin. */
    --bottom-actions-safe-space: calc(var(--safe-bottom) + 5.5rem);
}

#blazor-error-ui
{
    background: var(--s-gray-100);
    bottom: var(--safe-bottom,0);
    border: 1px solid var(--s-red-500);
    border-radius: 0.5rem;
    box-sizing: border-box;
    display: none;
    left: 0;
    padding: 1rem;
    position: fixed;
    width: calc(100% - 3rem);
    z-index: 10000;
    margin: 1.5rem;
}

#blazor-error-ui .dismiss
{
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
    color: var(--s-main-500);

}


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



/* CV doc preview */
.cv-doc-preview {
    flex: 1;
    min-height: 0;
    width: 100%;
    border-radius: 0.75rem;
    object-fit: contain;
    display: block;
    overflow: hidden;
    border: 1px solid var(--s-gray-100);
    background: var(--s-main-900);
    user-select: none;
    -webkit-user-select: none;
}

/* PDF canvas: sized to its own fitted content (see pdfPreview.js), not stretched to the box —
   the flex parent centers it, so there's no manual letterbox/offset math to get wrong. */
.cv-doc-preview--pdf {
    flex: none;
    width: auto;
    height: auto;
    max-width: 100%;
    max-height: 100%;
}

/* Photo preview: three stacked layers — main-900 fill (base rule above), a cover/blurred/
   almost-transparent copy of the same photo filling the frame, and the crisp original on top
   at object-fit:contain. Keeps the chip, carousel and full preview visually consistent even
   when a photo's aspect ratio doesn't match its box. */
.cv-doc-preview--photo {
    position: relative;
}

.cv-doc-preview-blur {
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    filter: blur(2rem);
    opacity: 0.5;
    transform: scale(1.15); /* hides the blur's soft edge from peeking past the frame */
}

.cv-doc-preview-sharp {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    user-select: none;
    -webkit-user-select: none;
}

.cv-docx-preview {
    object-fit: unset;
    background: var(--app-page-back);
    overflow: hidden;
    padding: 0;
    height: 100%;
}

.cv-doc-plain {
    background: var(--app-page-back);
}

.cv-scan-doc-preview {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    z-index: 0;
}

/* docx-preview library overrides */
.docx-preview-content {
    width: 100% !important;
    min-height: unset !important;
    box-shadow: none !important;
    margin: 0 !important;
    padding: 0.75rem !important;
    box-sizing: border-box !important;
    background: var(--app-page-back) !important;
    user-select: none !important;
    -webkit-user-select: none !important;
}

/* The wordmark is black + purple; swap in the white variant on dark. One rule here instead
   of a <picture> at every usage. */
[theme=dark] img[src$="logo-light.svg"] {
    content: url("/assets/img/logo-dark.svg");
}

/* Text colors for the page surface (WCAG AA, 4.5:1) in both themes. The --s-<hue> steps are tuned
   as fills, so reusing them as text fails on one side: main-500 4.05:1 / red-600 2.4:1 on the dark
   page; blue-500 4.5:1, green-700 4.1:1 and gray-500 (#B8B8B8) 2:1 on the light one. */
:root {
    --app-text-main: var(--s-main-500);
    --app-text-red: var(--s-red-600);
    --app-text-blue: var(--s-blue-600);
    --app-text-green: var(--s-green-800);
    --app-text-muted: var(--s-gray-700);
}

[theme=dark] {
    --app-text-main: var(--s-main-400);
    --app-text-red: var(--s-red-400);
    --app-text-blue: var(--s-blue-500);
    --app-text-green: var(--s-green-700);
    --app-text-muted: var(--s-gray-500);
}

.app-text-muted {
    color: var(--app-text-muted);
}

/* --app-page-back: "the page surface" of this app (backgrounds, fade gradients, sticky bars, the dark chrome). An app-level token on purpose:
   it is NOT a NwoorkUI variable, so nothing from the library is redefined (the app used to re-point --s-gray-50, which made that name lie and
   changed every library component reading it). Light: soft gray (gray-100, #F7F7F7) with white cards; dark: the page is gray-950, the chrome (sidebar, headers, sheets) gray-900 and the cards gray-800.
   Reusable: any other Nwoork app (PartnerApp, ClientApp, BackofficeApp) can adopt the same name and define its own tone for each theme, so a page
   background is one token per app. Once NwoorkUI ships a real page-background token (it has --nw-page-back with other values), this variable
   becomes an alias of it and the definition moves out of here.
   EXPERIMENT part: the tones and white cards. Revert by changing the values below. */
:root {
    --app-page-back: var(--p-gray-100);
    --app-card-back: var(--p-gray-50);
    --nw-card-back: var(--app-card-back);
    /* Gray icon halo on a card: one step off the card tone in each theme (in dark the card is gray-100 itself,
       so a gray-100 halo vanished). */
    --app-halo-gray-back: var(--s-gray-300);
    /* Profile photo placeholder: off the ring around it (the page tone), which is what draws its edge. In light the page is gray-100,
       so gray-100 vanished into it. */
    --app-avatar-back: var(--s-gray-300);
    --app-avatar-fore: var(--p-gray-600);
    /* Inside .nw-card, inputs read --nw-card-back-swap: the page gray over the white card (and, in
       dark, the page black over the gray card). */
    --nw-card-back-swap: var(--app-page-back);
    /* Floating chrome (headers, bottom bars) sits above the page: white in light. */
    --app-chrome-back: var(--p-gray-50);
    /* Full-bleed gradient screens (congratulations, welcome...) end on the purest white / black (NwoorkUI's
       .bg-surface tone), not on the gray page. */
    --app-solid-back: var(--nw-surface-back);
    /* Panel of the opportunity detail's Details card: solid white in light; in dark it stays a soft gray, as white would
       sink the (light) text. */
    --app-detail-panel-back: rgba(255, 255, 255, 1);
}

/* Light only: inputs on the gray page (.bg-page) are white (the dark input fill is already lighter than the page).
   On a .bg-surface view (white) and inside a card they take a soft gray (gray-100) instead, not the heavier page gray. */
[theme=light] {
    --nw-input-back: var(--p-gray-50);
    --nw-page-input-back: var(--p-gray-50);
    --nw-card-input-back: var(--p-gray-100);
    --nw-surface-input-back: var(--p-gray-100);
}

[theme=dark] {
    --app-page-back: var(--nw-page-back);
    /* Sidebar, headers and sheets: one step above the page (gray-950). */
    --app-chrome-back: var(--p-gray-900);
    --app-card-back: var(--s-gray-200);
    --nw-card-back: var(--app-card-back);
    --app-halo-gray-back: var(--s-gray-300);
    --app-avatar-back: var(--s-gray-200);
    --nw-card-back-swap: var(--app-page-back);
    --nw-card-input-back: var(--nw-card-back-swap);
    --app-detail-panel-back: color-mix(in srgb, var(--app-page-back) 80%, transparent);
}

.nw-mobile-header {
    background: var(--app-chrome-back);
}

/* Screens whose full-bleed gradient ends on the solid white/black: the safe-area footer takes that tone too,
   instead of the chrome one (which is gray-ish in dark and shows as a strip under the gradient). */
:root:has(.nw-survey-exam) {
    --app-footer-back: var(--app-solid-back);
}

/* Location pin: the text colour at 0.8 opacity. */
:root {
    --app-pin-color: color-mix(in srgb, var(--s-gray-900) 80%, transparent);
}

/* Icon + one line of detail (location, salary...): same size, gap and tones as the Agenda cards' rows. */
.nw-info-row {
    display: flex;
    align-items: center;
    gap: 0.5rem;
}

.nw-info-row__text {
    color: var(--s-gray-700);
    font-family: var(--nw-font-secondary);
    font-size: 0.75rem;
}

.nw-info-row--on-dark .nw-info-row__text {
    color: white;
}