/* ========================================================================== 
   EWER 2.0 CMS — FULL HRC BACKGROUND + TRANSLUCENT FORMS v33 (v1.0.68)

   Approved visual scope only:
   - one complete, centred HRC watermark behind every website page;
   - cool white/light-blue page canvas without pink colouring;
   - slightly translucent form surfaces and controls;
   - preserve the v1.0.67 login/dashboard screen-isolation contract;
   - no authentication, API, database, reporting or navigation changes.
   ========================================================================== */

:root {
    --ewer-page-cool-top: #fbfdff;
    --ewer-page-cool-mid: #edf4fd;
    --ewer-page-cool-bottom: #e4edf8;
    --ewer-watermark-opacity: 0.20;
    --ewer-form-surface: rgba(255, 255, 255, 0.82);
    --ewer-control-surface: rgba(255, 255, 255, 0.91);
    --ewer-card-border: rgba(37, 87, 214, 0.15);
    --ewer-card-shadow: 0 18px 46px rgba(23, 58, 112, 0.10);
}

html,
body {
    min-height: 100%;
    background-color: var(--ewer-page-cool-mid) !important;
}

body {
    position: relative;
    isolation: isolate;
    background-image: linear-gradient(
        155deg,
        var(--ewer-page-cool-top) 0%,
        var(--ewer-page-cool-mid) 50%,
        var(--ewer-page-cool-bottom) 100%
    ) !important;
    background-repeat: no-repeat !important;
    background-size: cover !important;
    background-attachment: fixed !important;
}

/* Disable older pseudo-element map/logo layers. The real fixed layer below is SSOT. */
body::before,
body::after {
    content: none !important;
    display: none !important;
    background-image: none !important;
    animation: none !important;
}

.bg-orb {
    display: none !important;
}

/* A real fixed DOM layer avoids conflicts with older body::before rules. */
#ewerGlobalWatermark.ewer-global-watermark {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 0 !important;
    pointer-events: none !important;
    user-select: none !important;
    background-image: url('/static/images/hrc-watermark.png') !important;
    background-repeat: no-repeat !important;
    background-position: center center !important;
    background-size: min(94vw, 94vh, 1180px) min(94vw, 94vh, 1180px) !important;
    opacity: var(--ewer-watermark-opacity) !important;
    filter: saturate(0.58) contrast(0.88) brightness(1.03) !important;
    animation: none !important;
}

/* Every page uses the one system background instead of its own opaque canvas. */
#authScreen,
.auth-container,
#verify2faScreen,
#appScreen,
#appMain,
.app-main,
#appScreen .app-shell,
#appScreen > .app-shell,
.container,
.view,
.view-section {
    position: relative;
    z-index: 1;
    background-color: transparent !important;
    background-image: none !important;
}

/* Critical v1.0.67 state contract: hidden screens always remain hidden. */
#authScreen.hidden,
#verify2faScreen.hidden,
#appScreen.hidden,
.auth-experience.hidden {
    display: none !important;
}

body.ewer-gateway-mode {
    overflow: hidden !important;
}

body.ewer-gateway-mode #appScreen {
    display: none !important;
}

body.ewer-app-mode #authScreen,
body.ewer-app-mode #verify2faScreen {
    display: none !important;
}

#authScreen.auth-experience:not(.hidden),
#verify2faScreen:not(.hidden) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    height: 100dvh !important;
    min-height: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain !important;
    padding: clamp(0.8rem, 2.5vw, 1.5rem) !important;
    background: transparent !important;
    z-index: 1200 !important;
}

#authScreen.auth-experience:not(.hidden) {
    display: grid !important;
    place-items: center !important;
}

#authScreen.auth-experience .auth-shell {
    width: min(100%, 560px) !important;
    min-height: 0 !important;
    margin: auto !important;
    display: block !important;
    overflow: visible !important;
    border: 0 !important;
    border-radius: 28px !important;
    background: transparent !important;
    box-shadow: none !important;
}

#authScreen.auth-experience .auth-information-panel {
    display: none !important;
}

#authScreen.auth-experience .auth-card.auth-card-premium {
    width: 100% !important;
    max-width: 560px !important;
    min-height: 0 !important;
    margin: 0 auto !important;
    padding: clamp(1.25rem, 3.7vw, 2.4rem) !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    overflow: visible !important;
    border: 1px solid rgba(255, 255, 255, 0.74) !important;
    border-radius: 28px !important;
    background: rgba(255, 255, 255, 0.84) !important;
    box-shadow: 0 24px 70px rgba(26, 57, 105, 0.17) !important;
}

#authScreen.auth-experience .auth-mobile-brand {
    width: 100% !important;
    margin: 0 0 1.2rem !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
}

#authScreen.auth-experience .auth-mobile-brand > div:last-child {
    display: none !important;
}

#authScreen.auth-experience .auth-mobile-brand .auth-brand-mark {
    width: clamp(92px, 12vw, 116px) !important;
    height: clamp(92px, 12vw, 116px) !important;
    margin: 0 !important;
    padding: 6px !important;
    flex: 0 0 auto !important;
    overflow: hidden !important;
    border-radius: 50% !important;
    background: rgba(255, 255, 255, 0.94) !important;
    border: 1px solid rgba(37, 87, 214, 0.20) !important;
    box-shadow: 0 12px 30px rgba(31, 69, 126, 0.14) !important;
}

#authScreen.auth-experience .auth-mobile-brand .auth-logo {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    border-radius: 50% !important;
}

#authScreen.auth-experience #loginForm .auth-form-heading {
    display: none !important;
}

#authScreen.auth-experience .auth-form,
#authScreen.auth-experience #registerForm.auth-form {
    width: min(100%, 440px) !important;
    margin-inline: auto !important;
    background: transparent !important;
}

#authScreen.auth-experience .auth-primary-action,
#authScreen.auth-experience .auth-secondary-action {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 0.65rem !important;
}

#authScreen.auth-experience .auth-primary-action span,
#authScreen.auth-experience .auth-secondary-action span {
    display: inline-block !important;
    white-space: nowrap !important;
}

#authScreen.auth-experience .auth-system-footer {
    width: min(100%, 480px) !important;
    margin: 1.3rem auto 0 !important;
}

/* Slight translucency only on forms and their established form containers. */
form:not(.auth-form),
.modal,
.modal-body,
.record-form-modal,
.auth-recovery-modal,
.auth-required-update-modal,
.security-settings-card,
.form-card,
.form-section,
.settings-form,
.filter-form,
.report-form,
.pipeline-filter-toolbar,
.ati-table-card {
    background-color: var(--ewer-form-surface) !important;
    border-color: var(--ewer-card-border) !important;
}

form .form-input,
form .form-select,
form .form-control,
form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
form select,
form textarea {
    background-color: var(--ewer-control-surface) !important;
}

.form-card,
.form-section,
.settings-form,
.filter-form,
.report-form,
.security-settings-card,
.record-form-modal,
.auth-recovery-modal,
.auth-required-update-modal {
    box-shadow: var(--ewer-card-shadow);
}

#loadingOverlay.loading-overlay {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: 2147483000 !important;
}

#loadingOverlay.hidden,
.loading-overlay.hidden {
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

html.dark body,
body.dark-mode {
    background-image: linear-gradient(155deg, #101b2d 0%, #132239 52%, #0d1829 100%) !important;
}

html.dark #ewerGlobalWatermark.ewer-global-watermark,
body.dark-mode #ewerGlobalWatermark.ewer-global-watermark {
    opacity: 0.10 !important;
    filter: saturate(0.62) brightness(1.12) !important;
}

html.dark form:not(.auth-form),
body.dark-mode form:not(.auth-form),
html.dark .modal,
body.dark-mode .modal,
html.dark .modal-body,
body.dark-mode .modal-body,
html.dark .record-form-modal,
body.dark-mode .record-form-modal,
html.dark .security-settings-card,
body.dark-mode .security-settings-card,
html.dark .form-card,
body.dark-mode .form-card,
html.dark .form-section,
body.dark-mode .form-section {
    background-color: rgba(15, 27, 46, 0.82) !important;
    border-color: rgba(125, 162, 255, 0.17) !important;
}

html.dark form .form-input,
html.dark form .form-select,
html.dark form .form-control,
html.dark form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
html.dark form select,
html.dark form textarea,
body.dark-mode form .form-input,
body.dark-mode form .form-select,
body.dark-mode form .form-control,
body.dark-mode form input:not([type="checkbox"]):not([type="radio"]):not([type="file"]):not([type="hidden"]),
body.dark-mode form select,
body.dark-mode form textarea {
    background-color: rgba(18, 32, 53, 0.91) !important;
}

html.dark #authScreen.auth-experience .auth-card.auth-card-premium,
body.dark-mode #authScreen.auth-experience .auth-card.auth-card-premium {
    background: rgba(13, 24, 42, 0.86) !important;
    border-color: rgba(125, 162, 255, 0.18) !important;
}

@media (max-width: 640px) {
    body {
        background-attachment: scroll !important;
    }

    #ewerGlobalWatermark.ewer-global-watermark {
        background-size: min(112vw, 92vh, 720px) min(112vw, 92vh, 720px) !important;
    }

    #authScreen.auth-experience:not(.hidden) {
        padding: 0.65rem !important;
        place-items: start center !important;
    }

    #authScreen.auth-experience .auth-shell,
    #authScreen.auth-experience .auth-card.auth-card-premium {
        border-radius: 22px !important;
    }

    #authScreen.auth-experience .auth-card.auth-card-premium {
        padding: 1.15rem !important;
    }

    #authScreen.auth-experience .auth-mobile-brand .auth-brand-mark {
        width: 90px !important;
        height: 90px !important;
    }
}

@media (max-width: 380px) {
    #authScreen.auth-experience .auth-primary-action span,
    #authScreen.auth-experience .auth-secondary-action span {
        font-size: 0.9rem !important;
    }
}