.footer-col-right {
    visibility: hidden;
}

.navbar-light {
    visibility: hidden;
}

.navbar-home img {
    /* Aspect-preserving: fix height, let width follow, so the (square) Evernorth
       logo stays round. The old `width:50px` + core `height:32px` forced a
       non-square 50x32 box = oval. */
    height: 36px !important;
    width: auto !important;
    max-height: none !important;
    object-fit: contain !important;
}

.for-email-login .page-card-head img,
.for-forgot .page-card-head img,
.for-login .page-card-head img,
.for-signup .page-card-head img {
    max-height: 150px !important;
}

/* Works on Chrome, Edge, and Safari */
*::-webkit-scrollbar {
    width: 6px;
}

*::-webkit-scrollbar-track {
    background: var(--scroll-bg);
}

*::-webkit-scrollbar-thumb {
    background-color: var(--scroll-color);
    border-radius: 20px;
}

* {
    scrollbar-width: thin;
    scrollbar-color: var(--scroll-color) var(--scroll-bg);
}

.awesomplete .input-with-feedback {
    border: 1px solid var(--border-color);
}

.form-control {
    border: 1px solid var(--border-color);
}

.search-bar .awesomplete input {
    background-color: var(--bg-color)
}

.modal-backdrop {
    background-color: #2c436b !important;
}

#freeze {
    z-index: -1 !important;
}

.widget .widget-head .widget-title {
    font-size: var(--text-base);
}

.comment-box .comment-input-header,
.form-dashboard-section .section-head,
.form-section .section-head,
.head-title {
    font-size: var(--text-base);
    font-weight: 600;
}

.comment-box .comment-input-container .ql-editor {
    border: 1px solid var(--border-color);
}

.duration-picker .duration-input {
    background-color: var(--bg-color);
    border: 1px solid var(--border-color);
}

.control-label {
    font-weight: 500;
}

[data-theme="dark"] {
    --bg-color: var(--gray-900);
    --disabled-control-bg: var(--gray-900);
    --border-color: #1c2126;
    --margin-lg: 15px;
    --text-bold: 600;
    --scroll-bg: #161a1f;
    --scroll-color: #1c2126;
}

[data-theme="light"] {
    --bg-color: #f2f5fa;
    --text-bold: 600;
    --control-bg: #fff;
    --control-bg-on-gray: #d4dcea;
    --disabled-control-bg: #f2f5fa;
    --heading-color: #333;
    --border-color: #e3e8f1;
    --avatar-frame-bg: #dde2ea;
    --margin-lg: 15px;
    --sidebar-select-color: #d4dcea;
    --awesomplete-hover-bg: #d4dcea;
    --scroll-bg: #eef1f5;
    --scroll-color: #d9dfe6;
}


:root {

    --page-bottom-margin: 0px !important;

}

.for-login .page-card .page-card-body .forgot-password-message>*, .for-forgot .page-card .page-card-body .forgot-password-message>*, .for-login-with-email-link .page-card .page-card-body .forgot-password-message>*, .for-signup .page-card .page-card-body .forgot-password-message>*, .for-email-login .page-card .page-card-body .forgot-password-message>* {
    color: var(--red-500) !important;
    font-weight: var(--weight-bold) !important;
}

/* ---- Post-login splash (Evernorth Marine Group) -------------------------
   The logo used to sit behind the whole desk as a fixed watermark. It was
   removed 2026-08-21: on a working screen it is visual noise behind the data
   people are actually reading, and it had already needed an exception to keep
   it off list views for exactly that reason.

   It now plays ONCE, as a full-screen splash on the first page after a
   successful sign-in, and is then gone. Armed on the login form's submit and
   consumed by public/js/login_splash.js -- see that file for the handshake.

   The ground is deliberately light in both themes: the wordmark is dark navy
   with blue accents and disappears on a dark field. This is a brand moment,
   not a working screen, so it commits to one look rather than following the
   desk theme.

   `prefers-reduced-motion` drops the movement and the splash simply fades;
   an entrance animation is decoration, and for anyone with vestibular
   sensitivity it is the kind of decoration that costs them something. */
.en-splash {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 2000;
    /* Solid colour FIRST: if the gradient is ever unsupported the splash must
       still be opaque -- a see-through overlay would sit on top of the desk
       and swallow clicks. */
    background-color: #f2f6fb;
    background-image: radial-gradient(120% 120% at 50% 38%,
        #ffffff 0%, #f2f6fb 52%, #dde7f4 100%);
    opacity: 1;
    transition: opacity 420ms ease;
}

.en-splash.en-splash-out {
    opacity: 0;
    pointer-events: none;
}

/* Centred by absolute positioning rather than flexbox: it costs one wrapper
   element and works in every renderer, including the wkhtmltoimage harness
   used to check this layout before deploying. */
.en-splash-inner {
    position: absolute;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    width: 440px;
    max-width: 64vw;
    text-align: center;
}

.en-splash-logo {
    display: block;
    width: 100%;
    height: auto;
    animation: en-splash-in 1000ms cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes en-splash-in {
    from { opacity: 0; transform: scale(0.93) translateY(14px); filter: blur(10px); }
    to   { opacity: 1; transform: none;                         filter: blur(0); }
}

@media (prefers-reduced-motion: reduce) {
    .en-splash-logo {
        animation: none;
    }
}


/* ---- Zebra-striped list rows -------------------------------------------
   Alternating row tint so rows are easier to scan. Uses Frappe's theme var
   --subtle-fg (same shade as the list header), so it's visible and auto-adjusts
   for dark mode. The row's right segment (.level-right) carries its own opaque
   --bg-color, so it must be restriped too or the stripe stops at the right edge.
   Hover/selection still paint on top. */
.list-row-container:nth-child(even),
.list-row-container:nth-child(even) .list-row .level-right {
    background-color: var(--subtle-fg) !important;
}


/* ---- Sidebar-header app logo: keep it square (was rendering oval) --------
   The sidebar-header is a flexbox; its logo box has no flex-shrink:0, so in the
   narrow collapsed rail (auto-expand-on-hover) the flex squeezes the logo's
   WIDTH while height stays 32px -> a vertical oval. Core's img also has
   width/height:100% with no object-fit, so it stretches to the squished box.
   Pin the box (no shrink) and contain the image so the round EN logo stays
   round in both the collapsed rail and the expanded sidebar. */
.sidebar-header .sidebar-item-icon,
.sidebar-header .header-logo {
    flex: 0 0 auto !important;
    width: 32px !important;
    height: 32px !important;
}
.sidebar-header .header-logo img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
}


/* ---- Login page: hide the 'Login to <app>' heading (keep the logo) ------- */
.for-login .page-card-head h4 {
    display: none !important;
}


/* ---- Work Order list: highlight rows changed in the last 15 min yellow ---
   Mirrors the dispatch board's "recently changed" cue. Toggled per render by
   listview_settings.refresh in work_order_quick_form.js. */
.list-row-container.wo-recently-updated {
    background: #fff7d6 !important;
    box-shadow: inset 4px 0 0 #f0a500;
}
.list-row-container.wo-recently-updated:hover {
    background: #fff0b8 !important;
}


/* ---- Non-production environment marker: full-width bar across the top ----
   Placed by public/js/env_marker.js on the desk and by env_marker.py's
   `body_include` on the website (login page). Rendered ONLY when the site sets
   the `environment_marker` key in site_config.json -- see env_marker.py.

   FIXED, not scrolled away: the desk's scroll container is `.main-section`
   (height 100vh, overflow: scroll), not the document, so a bar in normal flow
   would scroll out of the pane it is warning about. Fixed to the viewport it is
   readable at any scroll position, which is the whole point of the marker.

   IT DISPLACES, IT DOES NOT COVER. The v16 desk lays `body` out as a flex ROW
   of `.body-sidebar-container` and `.main-section`, each 100vh tall; the navbar
   and `.page-head` are sticky INSIDE `.main-section`. A bar merely painted on
   top would therefore hide the navbar's left edge and the sidebar's first
   button. So the bar's height is taken off both columns and given back as
   padding on `body`: total is still exactly 100vh, nothing is covered, and no
   vertical scrollbar appears. On the website (login) `body` is ordinary flow,
   so the same `padding-top` is all that is needed.

   The `:has()` selector is what ties the two together: the displacement applies
   precisely when a marker element exists, on either half, with no class for the
   two renderers to keep in sync and nothing at all on a site without the key.

   No horizontal scrollbar by construction: `left: 0; right: 0` cannot exceed
   the viewport, and the text is a single clipped line, so neither a narrow
   window nor a long configured string can widen the document.

   Colours are fixed rather than themed: the bar is opaque red with white text,
   so it reads the same in the light and dark desk themes. No icon --
   FontAwesome ships in the DESK bundle only, so an `fa` glyph would render as a
   missing-character box on the login page. */
:root {
    --hd-env-bar-height: 26px;
}
.hd-env-banner {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--hd-env-bar-height);
    display: flex;
    align-items: center;
    justify-content: center;
    /* Light green, with DARK text. White on this ground is 1.2:1 -- illegible --
       so the two colours move together or not at all. This pairing is 7.6:1,
       above the 4.5:1 AA floor and better than the bar it replaces. Both are
       literals, not theme tokens, so the bar reads the same in either theme. */
    background: #d9f0dc;
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
    /* Above the sidebar (1020) and the sticky navbar (1019), below frappe's
       modal layer (1050) and its toast container (2000). */
    z-index: 1030;
    /* Nothing to click, and it must never swallow a click meant for the page. */
    pointer-events: none;
}
.hd-env-banner-text {
    display: block;
    max-width: 100%;
    padding: 0 12px;
    color: #14532d;
    font-size: 12px;
    font-weight: 600;
    line-height: 1;
    letter-spacing: 0.04em;
    text-align: center;
    /* One line, clipped: a longer marker string than this site's must not be
       able to change the bar's height, which the displacement below assumes. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The displacement. Both halves render the bar as a direct child of `body`.

   Frappe 16.51 added a third column: the app rail `.dock`, pinned in flow to
   the left of the sidebar (`body.dock-pinned`), also 100dvh. It is displaced
   the same way. Unpinned, it is a fixed tray centred on the viewport and
   needs nothing.

   Website (login): `body` is ordinary flow, so its own padding moves the page.

   Desk: this padding is INERT there -- frappe's desk bundle ships
   `body { margin: 0; padding: 0 !important }` -- which is why the desk's two
   columns carry their own `margin-top` below. Measured, not assumed: with the
   padding alone the rendered navbar and breadcrumb still sat under the bar. */
body:has(> .hd-env-banner) {
    padding-top: var(--hd-env-bar-height);
}
body:has(> .hd-env-banner) > .main-section,
body:has(> .hd-env-banner) > .body-sidebar-container,
body.dock-pinned:has(> .hd-env-banner) > .dock {
    margin-top: var(--hd-env-bar-height);
}
/* ... and are shortened by the same amount, so bar + column is exactly 100vh
   and the desk gains no scrollbar of its own. */
body:has(> .hd-env-banner) > .main-section,
body:has(> .hd-env-banner) > .body-sidebar-container,
body.dock-pinned:has(> .hd-env-banner) > .dock,
body:has(> .hd-env-banner) > .body-sidebar-container .body-sidebar,
body:has(> .hd-env-banner) > .body-sidebar-container .body-sidebar-placeholder {
    height: calc(100vh - var(--hd-env-bar-height));
}