/*
    eCanteen portal theme, after awesome-design/apple/DESIGN.md: one blue (#0066cc) for everything clickable,
    near-black text, white cards on a light grey page, pill buttons, hairline borders, no decorative shadows.

    Loaded LAST by MasterPageXHRMS.master and Login.aspx (Error.aspx carries the same look inline, as it must
    work on its own), so it only restyles what CoreUI
    (css/style.css), css/mobile.css and the DevExpress themes draw. No markup or behaviour depends on it:
    removing its <link> lines brings the old look back.

    DevExpress controls on these pages use eight different themes (Office365, iOS, Glass, BlackGlass, ...), so
    they are matched by class prefix ([class*="dxgvHeader"]) rather than one theme's names. Only colours, fonts,
    borders and corners are changed on them, not their widths or positioning, which their scripts measure. The
    one size set here is the height of editors on DevExpress's unstyled default, the same height pages already
    give such editors in their markup.
*/

:root {
    --ec-blue: #0066cc;
    --ec-blue-hover: #0071e3;
    --ec-focus: #0071e3;
    --ec-ink: #1d1d1f;
    --ec-muted: #6e6e73;
    --ec-page: #f5f5f7;
    --ec-pearl: #fafafc;
    --ec-hover: #e8e8ed;
    --ec-line: #e0e0e0;
    --ec-line-soft: #f0f0f0;
    --ec-hair: rgba(0, 0, 0, 0.08);
    --ec-field: rgba(0, 0, 0, 0.16);
    --ec-ok-bg: #eaf6ec;  --ec-ok: #1d6b34;
    --ec-warn-bg: #fff4e5; --ec-warn: #6b3d00;
    --ec-err-bg: #fdecea;  --ec-err: #b3261e;
    --ec-info-bg: #eef5fd; --ec-info: #0b4f9e;
    --ec-font: "SF Pro Text", -apple-system, BlinkMacSystemFont, Inter, "Segoe UI", "Helvetica Neue", Arial,
               "PingFang SC", "Microsoft YaHei", "Hiragino Sans", "Yu Gothic UI", Meiryo,
               "Leelawadee UI", "Thonburi", "Noto Sans Thai", Tahoma, sans-serif; /* the last row for Thai */

    /* CoreUI / Bootstrap */
    --cui-primary: #0066cc;
    --cui-primary-rgb: 0, 102, 204;
    --cui-link-color: #0066cc;
    --cui-link-hover-color: #0071e3;
    --cui-body-color: #1d1d1f;
    --cui-body-bg: #f5f5f7;
    --cui-border-color: #e0e0e0;
}

html { -webkit-text-size-adjust: 100%; }

body {
    font-family: var(--ec-font);
    color: var(--ec-ink);
    background-color: var(--ec-page);
    -webkit-font-smoothing: antialiased;
    letter-spacing: -0.01em;
}

a { color: var(--ec-blue); }
a:hover { color: var(--ec-blue-hover); }

h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { font-weight: 600; letter-spacing: -0.02em; color: var(--ec-ink); }

.text-medium-emphasis { color: var(--ec-muted) !important; }
.bg-light { background-color: var(--ec-page) !important; }

:focus-visible { outline: 2px solid var(--ec-focus); outline-offset: 2px; }

/* ---------- Side menu ---------- */

#sidebar.sidebar {
    --cui-sidebar-bg: var(--ec-page);
    --cui-sidebar-color: var(--ec-ink);
    --cui-sidebar-brand-bg: #000000;
    --cui-sidebar-brand-color: #ffffff;
    --cui-sidebar-nav-title-color: var(--ec-muted);
    --cui-sidebar-nav-link-color: var(--ec-ink);
    --cui-sidebar-nav-link-icon-color: var(--ec-muted);
    --cui-sidebar-nav-link-hover-color: var(--ec-ink);
    --cui-sidebar-nav-link-hover-bg: var(--ec-hover);
    --cui-sidebar-nav-link-hover-icon-color: var(--ec-ink);
    --cui-sidebar-nav-link-active-color: var(--ec-blue);
    --cui-sidebar-nav-link-active-bg: #ffffff;
    --cui-sidebar-nav-link-active-icon-color: var(--ec-blue);
    --cui-sidebar-toggler-bg: transparent;
    --cui-sidebar-toggler-hover-bg: var(--ec-hover);
    background: var(--ec-page);
    color: var(--ec-ink);
    border-right: 1px solid var(--ec-hair);
    box-shadow: none;
}

#sidebar .sidebar-brand {
    flex: 0 0 52px;
    justify-content: flex-start;
    padding: 0 20px;
    /* "Blue hour": a deep navy glow in the corner fading to the black of the top bar */
    background: radial-gradient(130% 160% at 0% 0%, #0b3a6b 0%, #06182d 45%, #000000 80%);
    color: #ffffff;
}
#sidebar .sidebar-brand h4 { margin: 0; font-size: 17px; font-weight: 600; letter-spacing: -0.2px; color: #ffffff; }

#sidebar .sidebar-nav { padding: 6px 10px 16px; }
/* SimpleBar's stylesheet makes every [data-simplebar] box wrap. Until its script (loaded at the end of the page) has
   wrapped the menu, the menu's items flowed into a second column while the page loaded: keep one full-width column. */
#sidebar .sidebar-nav[data-simplebar] { flex-wrap: nowrap; align-items: stretch; }
#sidebar .sidebar-nav .nav-title {
    padding: 18px 10px 6px;
    margin-top: 0;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: #d40511;
}
#sidebar .sidebar-nav .nav-item { margin: 1px 0; }
#sidebar .sidebar-nav .nav-link {
    min-height: 40px;
    padding: 8px 10px;
    border-radius: 8px;
    font-size: 14px;
    white-space: normal;
    line-height: 1.3;
    color: var(--ec-ink);
}
#sidebar .sidebar-nav .nav-link:hover { background: var(--ec-hover); color: var(--ec-ink); }
#sidebar .sidebar-nav .nav-link.active { background: #ffffff; color: var(--ec-blue); font-weight: 600; box-shadow: 0 0 0 1px var(--ec-hair); }
#sidebar .sidebar-nav .nav-icon { flex: 0 0 34px; height: 18px; font-size: 18px; color: var(--ec-muted); text-align: left; }
#sidebar .sidebar-nav .nav-link:hover .nav-icon { color: var(--ec-ink); }
#sidebar .sidebar-nav .nav-link.active .nav-icon { color: var(--ec-blue); }
#sidebar .sidebar-toggler { flex: 0 0 40px; background-color: transparent; border-top: 1px solid var(--ec-hair); }
#sidebar .sidebar-toggler::before { filter: brightness(0.35); }
.sidebar-backdrop.show { opacity: 0.32; }

/* ---------- Top bar and page title (each page's own <header>) ---------- */

.wrapper > .header {
    min-height: 0;
    padding: 0;
    margin-bottom: 24px !important;
    background: var(--ec-page);
    border-bottom: none;
    box-shadow: none;
    flex-direction: column;
    align-items: stretch;
    flex-wrap: nowrap;
}

/* First row: the black bar (first-of-type: a few pages put a <style> or <script> in the header before it) */
.wrapper > .header > .container-fluid:first-of-type {
    position: relative;
    min-height: 52px;
    padding: 0 16px 0 12px;
    background: #000000;
    color: #ffffff;
}
/* A blue light running left to right along the bar's bottom edge. The gradient moves inside a full-width line, so
   nothing spills out of the bar and the account menu is not clipped. */
.wrapper > .header > .container-fluid:first-of-type::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 3px;
    pointer-events: none;
    /* a near-white core inside the blue, with a wide glow, so it shows clearly on the black bar */
    background-image: linear-gradient(90deg, rgba(41, 151, 255, 0) 0%, #2997ff 25%, #ffffff 50%, #2997ff 75%, rgba(41, 151, 255, 0) 100%);
    background-size: 35% 100%;
    background-repeat: no-repeat;
    filter: drop-shadow(0 0 4px #2997ff) drop-shadow(0 0 12px #2997ff);
    animation: ec-topbar-light 3s linear infinite;
}
/* Hidden whenever nothing is loading or working (js/busy-light.js) */
html.ec-idle .wrapper > .header > .container-fluid:first-of-type::after { display: none; }
@keyframes ec-topbar-light {
    from { background-position: -43% 0; }   /* just off the left edge */
    to { background-position: 143% 0; }     /* just off the right edge */
}
@media (prefers-reduced-motion: reduce) {
    .wrapper > .header > .container-fluid:first-of-type::after {
        animation: none;
        background-image: linear-gradient(90deg, rgba(41, 151, 255, 0.3), rgba(41, 151, 255, 0.85), rgba(41, 151, 255, 0.3));
        background-size: 100% 100%;
    }
}
.wrapper > .header .header-toggler {
    color: #ffffff;
    min-width: 44px;
    min-height: 44px;
    border-radius: 8px;
}
.wrapper > .header .header-toggler:hover { background: rgba(255, 255, 255, 0.12); }
.wrapper > .header .header-toggler .icon { color: #ffffff; }
.wrapper > .header .header-brand,
.wrapper > .header .header-brand h4 { margin: 0; color: #ffffff; font-size: 17px; font-weight: 600; text-decoration: none; }
.wrapper > .header .header-nav .nav-link { color: #ffffff; }
.wrapper > .header .avatar-md { width: 32px; height: 32px; font-size: 13px; }
/* Pending approvals bell beside the avatar, with a red count when something waits */
.wrapper > .header .ec-bell { position: relative; display: inline-flex; align-items: center; opacity: 0.9; }
.wrapper > .header .ec-bell:hover, .wrapper > .header .ec-bell:focus { opacity: 1; }
.ec-bell-badge { position: absolute; top: -7px; right: -4px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
                 background: #ff3b30; color: #ffffff; font: 600 11px/18px var(--ec-font); text-align: center; box-shadow: 0 0 0 2px #000000; }
.wrapper > .header .avatar-img { width: 32px; height: 32px; background: #ffffff; border-radius: 9999px; }

.wrapper > .header .dropdown-menu {
    border: 1px solid var(--ec-hair);
    border-radius: 12px;
    padding: 6px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.14);
    overflow: hidden;
}
.wrapper > .header .dropdown-header { background: transparent !important; color: var(--ec-muted); font-size: 12px; }
.wrapper > .header .dropdown-item { border-radius: 8px; padding: 9px 12px; font-size: 14px; color: var(--ec-ink); }
.wrapper > .header .dropdown-item:hover { background: var(--ec-page); }

.wrapper > .header .header-divider { display: none; }

/* Second row: breadcrumb above a large page title */
.wrapper > .header > .container-fluid:last-of-type:not(:first-of-type) { padding: 24px 24px 0; background: transparent; }
.wrapper > .header .breadcrumb {
    flex-wrap: wrap;
    align-items: baseline;
    margin: 0 !important;
    font-size: 12px;
    color: var(--ec-muted);
}
.wrapper > .header .breadcrumb-item,
.wrapper > .header .breadcrumb-item a { color: var(--ec-muted); }
.wrapper > .header .breadcrumb-item.active {
    flex: 0 0 100%;
    padding-left: 0;
    margin-top: 2px;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.2;
    letter-spacing: -0.374px;
    color: var(--ec-ink);
}
.wrapper > .header .breadcrumb-item.active::before { display: none; }
/* A page opened from another one: the title starts with its parent, which goes back to it */
.wrapper > .header .breadcrumb-item.active a.ec-crumb-parent { color: var(--ec-blue); text-decoration: none; border-radius: 6px; }
.wrapper > .header .breadcrumb-item.active a.ec-crumb-parent:hover { color: var(--ec-blue-hover); text-decoration: underline; text-underline-offset: 4px; }
.wrapper > .header .breadcrumb-item.active a.ec-crumb-parent:focus-visible { outline: 2px solid var(--ec-blue); outline-offset: 2px; }
.wrapper > .header .ec-crumb-sep { margin: 0 .3em; color: var(--ec-muted); font-weight: 400; }

/* ---------- Page body ---------- */

.wrapper { background: var(--ec-page); }
.wrapper > .body { padding-left: 24px !important; padding-right: 24px !important; }
.wrapper .container-lg { max-width: 1400px; padding-left: 0; padding-right: 0; }

/* The footer used to be fixed over the page; it now ends the page instead */
.wrapper > .footer {
    position: static;
    height: auto;
    min-height: 0;
    margin: auto 0 0;
    padding: 20px 24px;
    background: transparent;
    border-top: 1px solid var(--ec-hair);
    color: var(--ec-muted);
    font-size: 12px;
}

/* ---------- Cards ---------- */

.card {
    background: #ffffff;
    border: 1px solid var(--ec-hair);
    border-radius: 18px;
    box-shadow: none;
    margin-bottom: 24px;
}
.card-header {
    padding: 20px 24px 4px;
    background: transparent;
    border-bottom: none;
    font-size: 19px;
    font-weight: 600;
    letter-spacing: -0.2px;
    color: var(--ec-ink);
}
.card-header:first-child { border-radius: 18px 18px 0 0; }
.card-body { padding: 20px 24px 24px; }
.card-footer { background: transparent; border-top: 1px solid var(--ec-line-soft); }

/* ---------- Alerts ---------- */

.alert { border: none; border-radius: 11px; padding: 12px 16px; font-size: 14px; line-height: 1.45; }
.alert-danger { background: var(--ec-err-bg); color: var(--ec-err); }
.alert-success { background: var(--ec-ok-bg); color: var(--ec-ok); }
.alert-warning { background: var(--ec-warn-bg); color: var(--ec-warn); }
.alert-info { background: var(--ec-info-bg); color: var(--ec-info); }
/* An empty message box shows nothing (several pages render it empty and only hide it later) */
.alert:empty { display: none; }

/* ---------- Buttons ---------- */

.btn {
    --cui-btn-padding-y: 0.55rem;
    --cui-btn-padding-x: 1.4rem;
    border-radius: 9999px;
    font-weight: 400;
    letter-spacing: -0.01em;
    box-shadow: none;
    transition: background-color 0.15s, color 0.15s, transform 0.1s;
}
.btn:active { transform: scale(0.97); }

/* The main action (Search, Login, Add New, ...) */
.btn-warning, .btn-primary, .btn-outline-success.active {
    --cui-btn-bg: var(--ec-blue);
    --cui-btn-border-color: var(--ec-blue);
    --cui-btn-color: #ffffff;
    --cui-btn-hover-bg: var(--ec-blue-hover);
    --cui-btn-hover-border-color: var(--ec-blue-hover);
    --cui-btn-hover-color: #ffffff;
    --cui-btn-active-bg: #0058b0;
    --cui-btn-active-border-color: #0058b0;
    --cui-btn-active-color: #ffffff;
    --cui-btn-disabled-bg: var(--ec-blue);
    --cui-btn-disabled-border-color: var(--ec-blue);
    --cui-btn-disabled-color: #ffffff;
    background-color: var(--ec-blue);
    border-color: var(--ec-blue);
    color: #ffffff;
}

/* The second action (Export to Excel, ...) */
.btn-success {
    --cui-btn-bg: #ffffff;
    --cui-btn-border-color: var(--ec-blue);
    --cui-btn-color: var(--ec-blue);
    --cui-btn-hover-bg: #eef5fd;
    --cui-btn-hover-border-color: var(--ec-blue);
    --cui-btn-hover-color: var(--ec-blue);
    --cui-btn-active-bg: #dceafb;
    --cui-btn-active-border-color: var(--ec-blue);
    --cui-btn-active-color: var(--ec-blue);
    background-color: #ffffff;
    border-color: var(--ec-blue);
    color: var(--ec-blue);
}

.btn-danger {
    --cui-btn-bg: #ffffff;
    --cui-btn-border-color: var(--ec-err);
    --cui-btn-color: var(--ec-err);
    --cui-btn-hover-bg: var(--ec-err-bg);
    --cui-btn-hover-border-color: var(--ec-err);
    --cui-btn-hover-color: var(--ec-err);
}

/* DevExpress buttons (ASPxButton in the Moderno, Glass, iOS, ... themes) */
div[class*="dxbButton"],
td[class*="dxbButton"] {
    background: var(--ec-blue) none !important;
    border: 1px solid var(--ec-blue) !important;
    border-radius: 9999px !important;
    color: #ffffff !important;
    box-shadow: none !important;
    text-shadow: none !important;
    font-family: var(--ec-font) !important;
}
div[class*="dxbButton"] *,
td[class*="dxbButton"] * { color: #ffffff !important; text-shadow: none !important; }
div[class*="dxbButton"]:hover,
td[class*="dxbButton"]:hover { background-color: var(--ec-blue-hover) !important; border-color: var(--ec-blue-hover) !important; }
div[class*="dxbButton"][class*="dxbDisabled"],
td[class*="dxbButton"][class*="dxbDisabled"],
div[class*="dxbDisabled"] {
    background: #ffffff !important;
    border-color: var(--ec-line) !important;
}
div[class*="dxbDisabled"] *,
td[class*="dxbDisabled"] * { color: #8e8e93 !important; }

/* ---------- Form fields ---------- */

.col-form-label, .form-label { font-size: 14px; font-weight: 600; color: var(--ec-ink); }

.form-control, .form-select {
    min-height: 44px;
    border: 1px solid var(--ec-field);
    border-radius: 11px;
    background-color: #ffffff;
    color: var(--ec-ink);
    font-size: 16px;
}
.form-control:focus, .form-select:focus {
    border-color: var(--ec-focus);
    box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.22);
}
.form-control.is-invalid { border-color: var(--ec-err); }
.input-group-text { background: var(--ec-pearl); border: 1px solid var(--ec-field); color: var(--ec-muted); border-radius: 11px; }
.form-check-input:checked { background-color: var(--ec-blue); border-color: var(--ec-blue); }

/* DevExpress text boxes, date and combo boxes: border colour and corners only */
table[class*="dxeTextBox"],
table[class*="dxeButtonEdit"],
table[class*="dxeMemo"],
div[class*="dxeTextBox"],
div[class*="dxeButtonEdit"] {
    border-color: var(--ec-field) !important;
    border-radius: 11px;
    background-color: #ffffff;
}
table[class*="dxeFocused"],
div[class*="dxeFocused"] { border-color: var(--ec-focus) !important; box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18); }
input[class*="dxeEditArea"], .dxeEditArea, [class*="dxeEditArea_"] { font-family: var(--ec-font) !important; color: var(--ec-ink); }
td[class*="dxeButtonEditButton"],
td[class*="dxeButton_"] { background: transparent !important; border: none !important; }
/* Editors left on DevExpress's built-in style (no Theme, plain class name) are only 22px tall: same height as Backlog Sales' */
table.dxeButtonEdit, table.dxeTextBox { height: 37px; }

/* List boxes (the report filters' tick lists) */
table[class*="dxeListBox"], div[class*="dxeListBox"] { border-color: var(--ec-field) !important; border-radius: 11px; overflow: hidden; }
[class*="dxeListBoxItem"] { font-family: var(--ec-font) !important; color: var(--ec-ink) !important; background: #ffffff !important; border-color: var(--ec-line-soft) !important; }
[class*="dxeListBoxItemHover"] { background: var(--ec-page) !important; }
[class*="dxeListBoxItemSelected"] { background: #eef5fd !important; }
/* List search boxes stay open (opened on load); hide the arrow that would close them, as their open button does not show in this theme */
.dxeLBFEButtonSys { display: none !important; }

/* Drop-down lists and calendars that open over the page */
[class*="dxpcDropDown"], [class*="dxeCalendar"], [class*="dxpc-mainDiv"], [class*="dxpcLite"] .dxpc-mainDiv {
    font-family: var(--ec-font) !important;
}
[class*="dxeCalendarDaySelected"] { background-color: var(--ec-blue) !important; color: #ffffff !important; }
[class*="dxeCalendarToday"] { color: var(--ec-blue) !important; }

/* Upload boxes */
[class*="dxucControl"], [class*="dxucTextBox"] { font-family: var(--ec-font) !important; }
[class*="dxucTextBox"] { border-color: var(--ec-field) !important; border-radius: 11px 0 0 11px; }
[class*="dxucBrowseButton"], [class*="dxucButton"] {
    background: var(--ec-pearl) !important;
    color: var(--ec-ink) !important;
    border-color: var(--ec-field) !important;
}
[class*="dxucBrowseButton"] *, [class*="dxucButton"] * { color: var(--ec-ink) !important; }

/* ---------- Grids (ASPxGridView, every theme) ---------- */

table[class*="dxgvControl"],
div[class*="dxgvControl"] {
    font-family: var(--ec-font) !important;
    border-color: var(--ec-line-soft) !important;
    color: var(--ec-ink);
}
[class*="dxgvTable"] { font-family: var(--ec-font) !important; border-color: var(--ec-line-soft) !important; }
td[class*="dxgvHeader"] {
    background: var(--ec-pearl) none !important;
    color: var(--ec-muted) !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    border-color: var(--ec-line) !important;
}
td[class*="dxgvHeader"] * { color: var(--ec-muted) !important; }
/* Text colour goes on the row, not the cells: pages colour a row by its status (inactive in red) and cells inherit it */
tr[class*="dxgvDataRow"] { color: var(--ec-ink); }
tr[class*="dxgvDataRow"] > td,
tr[class*="dxgvDataRow"] > td.dxgv { border-color: var(--ec-line-soft) !important; }
tr[class*="dxgvDataRowAlt"] > td { background: #ffffff; }
tr[class*="dxgvDataRowHover"] > td,
tr[class*="dxgvDataRow"]:hover > td { background: var(--ec-pearl) !important; }
tr[class*="dxgvSelectedRow"] > td,
tr[class*="dxgvFocusedRow"] > td { background: #eef5fd !important; }
tr[class*="dxgvFilterRow"] > td { background: #ffffff !important; border-color: var(--ec-line-soft) !important; }
tr[class*="dxgvFooter"] > td, tr[class*="dxgvGroupFooter"] > td { background: var(--ec-pearl) !important; font-weight: 600; border-color: var(--ec-line) !important; }
tr[class*="dxgvGroupRow"] > td { background: var(--ec-page) !important; font-weight: 600; }
tr[class*="dxgvEditingErrorRow"] > td { background: var(--ec-err-bg) !important; color: var(--ec-err) !important; }
tr[class*="dxgvInlineEditRow"] > td, tr[class*="dxgvEditFormDisplayRow"] > td, [class*="dxgvEditForm"] { background: var(--ec-pearl) !important; }
td[class*="dxgvCommandColumn"] img { opacity: 0.85; }
/* The action icons (images/icons, 24px) stay on one line, a little apart */
td[class*="dxgvCommandColumn"] { white-space: nowrap; }
td[class*="dxgvCommandColumn"] img[src*="images/icons/"] { opacity: 1; margin: 0 3px; vertical-align: middle; }
[class*="dxgvEmptyDataRow"] td, tr[class*="dxgvEmptyDataRow"] > td { color: var(--ec-muted) !important; }
[class*="dxgvGroupPanel"] { color: var(--ec-muted) !important; background: transparent !important; }
[class*="dxgvSearchPanel"] { background: transparent !important; }
[class*="dxgvSearchPanel"] a, [class*="dxgvSearchPanel"] a span { color: var(--ec-blue) !important; }
[class*="dxgvPagerBottomPanel"], [class*="dxgvPagerTopPanel"] { background: transparent !important; border-color: var(--ec-line-soft) !important; }

/* Pager */
[class*="dxpLite"], [class*="dxpControl"] { font-family: var(--ec-font) !important; color: var(--ec-muted) !important; }
[class*="dxpLite"] .dxp-num, [class*="dxpLite"] .dxp-button { border-radius: 9999px; color: var(--ec-ink) !important; }
[class*="dxpLite"] .dxp-current {
    background: var(--ec-blue) !important;
    color: #ffffff !important;
    border-color: var(--ec-blue) !important;
    border-radius: 9999px;
}

/* ---------- Report toolbar and viewer ---------- */

/* ---------- Bootstrap tables, progress bars ---------- */

.table { --cui-table-border-color: var(--ec-line-soft); color: var(--ec-ink); }
.table > thead th { background: var(--ec-pearl); color: var(--ec-muted); font-size: 12px; font-weight: 600; border-bottom-color: var(--ec-line); }
.progress { border-radius: 9999px; background: var(--ec-hover); }
.progress-bar { background-color: var(--ec-blue); }

/* ---------- Tablet and phone ---------- */

/* Tablet: CoreUI docks the 256px side menu from 768px, which leaves a portrait tablet ~560px for the page.
   Below 992px it slides in over the page instead, as it does on phones: these are CoreUI's own phone rules
   (style.css, max-width 767.98px), extended. --cui-is-mobile is what CoreUI's script reads to treat the menu
   as a phone menu (backdrop, close on tap). */
@media (min-width: 768px) and (max-width: 991.98px) {
    #sidebar.sidebar {
        --cui-is-mobile: true;
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        z-index: 1031;
    }
    #sidebar.sidebar ~ * { --cui-sidebar-occupy-start: 0 !important; }
    #sidebar.sidebar:not(.show) { margin-left: calc(-1 * var(--cui-sidebar-width)); }
    #sidebar .sidebar-toggler { display: none; }
    .sidebar-backdrop {
        position: fixed;
        top: 0;
        left: 0;
        z-index: 1030;
        width: 100vw;
        height: 100vh;
        background-color: #000000;
        transition: opacity 0.15s linear;
    }
    .sidebar-backdrop.fade { opacity: 0; }
    .sidebar-backdrop.fade.show { opacity: 0.32; }
}

/* A grid wider than its card scrolls sideways in its own box instead of running past the card or making the whole
   page wider (which made phones zoom the page out). The grid is a <table>, which cannot scroll itself: its parent
   box scrolls instead. */
div:has(> table[class*="dxgvControl"]),
div:has(> div[class*="dxgvControl"]) {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Phone and tablet: bigger touch targets */
@media (max-width: 991.98px) {
    #sidebar .sidebar-nav .nav-link { min-height: 44px; }
    .wrapper > .header .breadcrumb-item.active { font-size: 26px; }
}

/* Phone */
@media (max-width: 767.98px) {
    .wrapper > .body { padding-left: 12px !important; padding-right: 12px !important; }
    .wrapper > .header { margin-bottom: 16px !important; }
    /* The whole header stays at the top while scrolling, so it is kept short on a phone */
    .wrapper > .header > .container-fluid:first-of-type { min-height: 48px; }
    .wrapper > .header > .container-fluid:last-of-type:not(:first-of-type) { padding: 10px 16px 8px; }
    .wrapper > .header .breadcrumb { font-size: 11px; }
    .wrapper > .header .breadcrumb-item.active { font-size: 21px; margin-top: 0; }
    .card { border-radius: 14px; margin-bottom: 16px; }
    .card-header { padding: 16px 16px 2px; font-size: 17px; }
    .card-body { padding: 14px 16px 18px; }
    .btn { --cui-btn-padding-y: 0.6rem; min-height: 44px; }
    .wrapper > .footer { padding: 16px; }
}

/* ---------- Login page (Login.aspx: body.ec-login) ---------- */

body.ec-login {
    background: #272729 url("../images/background.jpg") center / cover no-repeat fixed;
}
body.ec-login .ec-login-row { min-height: 100vh; }
body.ec-login .container { max-width: none; padding: 0; margin: 0; }
body.ec-login .container > .row { margin: 0; justify-content: flex-end; }
body.ec-login .container > .row > .col { display: none; }
body.ec-login .container > .row > .col-lg-5 { flex: 0 0 auto; width: 460px; max-width: 100%; padding: 0; }
body.ec-login .card-group, body.ec-login .card-group > .card { margin: 0; }
body.ec-login .card-group > .card {
    width: 100%;
    min-height: 100vh;
    flex: 1 1 auto;
    justify-content: center;
    padding: 48px 32px !important;
    border: none;
    border-radius: 0;
    background: #ffffff;
}
body.ec-login .card-body { padding: 0; }
body.ec-login .card-body > a img { max-height: 72px; width: auto; margin: 0 0 20px !important; }
body.ec-login h1 { font-size: 40px; font-weight: 600; letter-spacing: -0.4px; margin-bottom: 4px; }
body.ec-login .card-body > .text-medium-emphasis:first-of-type { font-size: 19px; }
body.ec-login #languageChoice { display: flex; flex-wrap: wrap; gap: 8px; font-size: 0; margin: 18px 0 20px !important; }
body.ec-login #languageChoice a {
    display: inline-flex;
    align-items: center;
    min-height: 36px;
    padding: 0 14px;
    border: 1px solid var(--ec-line);
    border-radius: 9999px;
    font-size: 14px;
    color: var(--ec-ink);
    text-decoration: none;
}
body.ec-login #languageChoice a[style*="bold"] { border: 2px solid var(--ec-focus); padding: 0 13px; font-weight: 600 !important; }
body.ec-login #languageChoice a { gap: 8px; }
body.ec-login #languageChoice .lang-sep { display: none; }
/* Tablet and desktop: a slightly wider panel and tighter pills, so the four languages fit on one line (phones still wrap) */
@media (min-width: 768px) {
    body.ec-login .container > .row > .col-lg-5 { width: 520px; }
    body.ec-login #languageChoice { gap: 6px; }
    body.ec-login #languageChoice a { padding: 0 11px; gap: 6px; }
    body.ec-login #languageChoice a[style*="bold"] { padding: 0 10px; }
}

/* Country flags beside the language names (login page and the Account menu); the hairline keeps Japan's white flag visible */
.lang-flag { width: 20px; height: 14px; object-fit: cover; border-radius: 2px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.14); flex: 0 0 auto; vertical-align: middle; }
.lang-tick { flex: 0 0 12px; text-align: center; }
body.ec-login .input-group { flex-wrap: nowrap; }
body.ec-login .input-group .form-control { min-height: 46px; }
body.ec-login #btLogin { min-width: 160px; min-height: 46px; font-size: 17px; }

@media (max-width: 767.98px) {
    /* phone: photo is a short band at the top, the white panel follows straight after it (no gap, form above the fold) */
    body.ec-login { background: #ffffff; }
    body.ec-login::before {
        content: "";
        position: absolute;
        top: 0; left: 0; right: 0;
        height: 30vh; height: 30svh;
        background: #272729 url("../images/background.jpg") center / cover no-repeat;
    }
    body.ec-login .ec-login-row { position: relative; z-index: 1; min-height: 0 !important; align-items: flex-start !important; }
    body.ec-login .container > .row > .col-lg-5 { width: 100%; }
    body.ec-login .card-group > .card {
        min-height: 0;
        margin-top: calc(30vh - 18px) !important;
        margin-top: calc(30svh - 18px) !important;
        padding: 24px 20px 32px !important;
        border-radius: 18px 18px 0 0;
    }
    body.ec-login .card-body > a img { max-height: 48px; margin-bottom: 12px !important; }
    body.ec-login h1 { font-size: 32px; }
    body.ec-login .card-body > .text-medium-emphasis:first-of-type { font-size: 17px; }
    body.ec-login #languageChoice { margin: 14px 0 16px !important; }
}