@import 'css/auth.css';
@import 'css/quotation.css';

/* Reset only — no color/font customization. Everything else in the app renders as bare Radzen. */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Blazor's enhanced navigation focuses the page's h1 (tabindex="-1" + .focus()) after every
   navigation so screen readers announce the page change. Suppressing the outline here only hides
   the visual ring; the element is still focused, so the accessibility behavior is unaffected. */
h1:focus {
    outline: none;
}

/* The Humanistic Radzen theme's own body background is what shows through its
   semi-transparent/glassmorphic cards. Overriding it here (with !important, since the active
   theme stylesheet is swapped in dynamically per-user and can load after this file) replaces
   that look with the app's own background image while keeping all Humanistic component styling.
   The image itself is busy/detailed — a blur alone still left enough contrast/color variation to
   hurt text readability, so instead it's heavily muted with a translucent white wash (painted as a
   gradient layered on top of the image in the same background) rather than blurred. */
html {
    background: none !important;
}

body {
    background: transparent !important;
    position: relative;
}

body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: -1;
    background:
        linear-gradient(rgba(255, 255, 255, 0.88), rgba(255, 255, 255, 0.88)),
        url('images/AppBackground.png') center/cover no-repeat fixed;
}

/* Dark mode is set explicitly via html[data-theme="dark"] (portavia.js), or falls back to the OS
   preference in 'auto' mode (no data-theme attribute) — the wash needs to match either path. */
html[data-theme="dark"] body::before {
    background:
        linear-gradient(rgba(24, 26, 32, 0.88), rgba(24, 26, 32, 0.88)),
        url('images/AppBackground.png') center/cover no-repeat fixed;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) body::before {
        background:
            linear-gradient(rgba(24, 26, 32, 0.88), rgba(24, 26, 32, 0.88)),
            url('images/AppBackground.png') center/cover no-repeat fixed;
    }
}

/* .rz-layout is the outer grid wrapper for the whole app (header+sidebar+body+footer), sized to
   100dvh, with its own opaque theme background-color — it fully covers body::before before .rz-body
   is even reached. .rz-body itself also has a theme background-color layered on top of that. Both
   must be made transparent for the wallpaper to show through the main content area. */
.rz-layout {
    background-color: transparent !important;
}

.rz-body {
    background-color: transparent !important;
}

/* Destructive context-menu item: error-colored icon/text (no fill) so it reads as distinct from the
   rest of the menu. The default hover state paints the item's usual blue selection background, which
   clashes with red text — keep the text red and swap the hover fill for a light danger tint instead. */
.pv-ctx-delete .rz-navigation-item-link,
.pv-ctx-delete .rz-navigation-item-icon,
.pv-ctx-delete .rz-navigation-item-text {
    color: var(--rz-danger) !important;
}

.pv-ctx-delete .rz-navigation-item-wrapper:hover,
.pv-ctx-delete .rz-navigation-item-wrapper-active {
    background-color: var(--rz-danger-lighter, rgba(220, 53, 69, 0.12)) !important;
}

/* RadzenNumeric values are always quantities/currency — right-aligned everywhere in the app.
   Needs !important: the component's default rz-text-align-left class (same specificity, loaded
   later via the theme stylesheet) would otherwise win the cascade. */
.rz-numeric-input {
    text-align: right !important;
}

/* Autocomplete/dropdown/datepicker popups are positioned absolute but the base theme gives them
   no z-index, so a later sibling row in the same form (itself just static-flow content) can paint
   over the open popup instead of the popup sitting on top of it. Force these popups above ordinary
   page content everywhere, while staying below dialogs/tooltips (--rz-dialog-zindex is much higher). */
.rz-autocomplete-panel,
.rz-dropdown-panel,
.rz-datepicker-popup-container {
    z-index: 1050 !important;
}

/* The real cause of popups being clipped/hidden behind later content: the input WRAPPER itself
   (.rz-autocomplete, .rz-dropdown) is "overflow: hidden" in the base theme — meant to round off the
   input box's own corners — but the suggestion/option popup renders as an absolutely-positioned CHILD
   of that same wrapper. Overflow clipping applies to all descendants regardless of position, so the
   popup gets sliced off at the wrapper's tiny input-sized bounds no matter what z-index it has. The
   z-index rule above is still needed for genuine stacking-order cases (e.g. RadzenDatePicker, which
   has no such wrapper), but this is what actually stops the popup from being invisible/clipped.
   overflow:visible has no visible effect on the input's own rounded corners since border-radius still
   clips its own background/border painting independently of the (now unclipped) popup descendant. */
.rz-autocomplete,
.rz-dropdown {
    overflow: visible !important;
}

/* Base theme makes RadzenDataGrid's tfoot sticky to the bottom of its scroll container, same as the
   header. Column footer totals should scroll away with the last row instead of staying pinned. */
.rz-grid-table tfoot,
.rz-grid-table tfoot td {
    position: static !important;
}

/* Shared full-screen loading overlay (Components/Shared/LoadingOverlay.razor). Sits above ordinary
   page content and dialogs' backdrop, but stays below the dialogs themselves (--rz-dialog-zindex)
   so an in-flight dialog save spinner isn't hidden behind it. */
.pv-loading-overlay {
    position: fixed;
    inset: 0;
    z-index: 1100;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(0, 0, 0, 0.35);
}

.pv-loading-overlay-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 2rem 2.5rem;
    min-width: 160px;
}

/* Drag-and-drop file upload zone (wired via portavia.enableFileDrop in portavia.js). Used by
   AddDocumentDialog and the Quotation Documents tab so both share one look/feel. */
.pv-drop-zone {
    border: 2px dashed var(--rz-border);
    border-radius: var(--rz-border-radius);
    padding: 2rem;
    text-align: center;
    transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pv-drop-zone.pv-drop-active {
    border-color: var(--rz-primary);
    background-color: var(--rz-primary-lighter, rgba(0, 120, 212, 0.06));
}