/* ==========================================================================
   Evolution brand chrome - header + horizontal navigation

   Champagne gold on graphite, taken from the EvolveWMS design system
   (EvolveWMS\src\EvolveWMS.Web\wwwroot\css\evolve.css), which is the current
   source of truth for the brand.

   TWO RULES TRAVEL WITH THIS PALETTE:
     1. Gold ALWAYS carries dark type. White on #c9a961 is 2.25:1 and
        unreadable; --ev-ink on gold is 8.02:1.
     2. The metal bevel gradient is for brand MARKS only. Buttons, pills and
        active states take flat --ev-gold, the way .btn-primary does in the
        source system.

   This file is an OVERRIDE. It must stay linked AFTER the Vuexy stylesheets
   in _Layout.cshtml or none of it wins. Selectors deliberately mirror the
   vendor ones from
   app-assets/css/core/menu/menu-types/horizontal-menu.css so that equal
   specificity plus later source order settles it, rather than a wall of
   !important. Where !important does appear it is because the vendor rule is
   more specific, not as a shortcut.

   Scope note: only the two chrome bars are restyled. Page content below them
   stays on the light theme - a dark nav over light content is the intended
   look, not a half-finished dark mode.
   ========================================================================== */

:root {
    --ev-gold: #c9a961;
    --ev-gold-dim: #a4823c;
    --ev-ink: #1a160c;
    --ev-metal: linear-gradient(135deg, #e0c88c 0%, #c9a961 50%, #96762f 100%);

    --ev-bar: #15181c;
    --ev-bar-2: #1d2127;
    --ev-bar-3: #272c33;
    --ev-line: #2e343b;

    --ev-text: #e9ebed;
    --ev-text-muted: #a2a8af;   /* the platinum of the mark */
    --ev-text-dim: #858d96;
}

/* --------------------------------------------------------------------------
   Top header bar (brand + user menu)
   -------------------------------------------------------------------------- */
.horizontal-layout .header-navbar.navbar-fixed,
.horizontal-layout .header-navbar.navbar-brand-center {
    background: var(--ev-bar) !important;
    border-bottom: 1px solid var(--ev-line);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.32);
}

.horizontal-layout .header-navbar .navbar-brand .brand-text {
    color: var(--ev-gold) !important;
    font-weight: 700;
    letter-spacing: -0.01em;
}

.horizontal-layout .header-navbar .nav-link,
.horizontal-layout .header-navbar .nav-link i,
.horizontal-layout .header-navbar .nav-link svg {
    color: var(--ev-text-muted) !important;
}

.horizontal-layout .header-navbar .nav-link:hover,
.horizontal-layout .header-navbar .nav-link:hover i,
.horizontal-layout .header-navbar .nav-link:hover svg {
    color: var(--ev-gold) !important;
}

.horizontal-layout .header-navbar .user-nav .user-name {
    color: var(--ev-text) !important;
}

.horizontal-layout .header-navbar .user-nav .user-status {
    color: var(--ev-text-dim) !important;
}

/* The avatar is a brand mark, so it gets the bevel and a gold ring. */
.horizontal-layout .header-navbar .dropdown-user .avatar img {
    border: 2px solid var(--ev-gold);
    background: var(--ev-metal);
}

/* --------------------------------------------------------------------------
   Floating horizontal menu
   -------------------------------------------------------------------------- */

/* The wrapper paints a white gradient that fades the floating bar into the
   page. Neutralised: against a graphite bar it reads as a grey smear. */
.horizontal-layout.navbar-floating .horizontal-menu-wrapper {
    background: transparent;
}

.horizontal-menu .header-navbar.navbar-horizontal.floating-nav,
.horizontal-menu .header-navbar.navbar-horizontal {
    background: var(--ev-bar) !important;
    border: 1px solid var(--ev-line);
    border-radius: 10px;
    box-shadow: 0 6px 24px rgba(0, 0, 0, 0.3);
}

/* Resting state */
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a {
    color: var(--ev-text-muted);
    border-radius: 8px;
    font-weight: 500;
    transition: background 0.15s ease, color 0.15s ease;
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a i,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > a svg {
    color: var(--ev-text-dim);
    transition: color 0.15s ease;
}

/* Hover: a gold wash, not a fill - the fill is reserved for the active item
   so the two never read as the same state. */
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover > a {
    background: rgba(201, 169, 97, 0.14);
    border-radius: 8px;
    color: var(--ev-gold);
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover > a i,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover > a svg {
    color: var(--ev-gold);
}

/* Active: flat gold with dark ink. The vendor rule is a navy pill with a cyan
   glow; both are replaced outright rather than tinted. */
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a {
    background: var(--ev-gold) !important;
    background-color: var(--ev-gold) !important;
    color: var(--ev-ink) !important;
    font-weight: 700;
    border-radius: 8px;
    box-shadow: 0 2px 10px rgba(201, 169, 97, 0.35);
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a i,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a svg {
    color: var(--ev-ink) !important;
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active:hover > a {
    background: var(--ev-gold-dim) !important;
    background-color: var(--ev-gold-dim) !important;
}

/* The caret is a background-image SVG with its stroke colour BAKED INTO the data
   URI, so it does NOT inherit `color`. Left alone it stays vendor grey (#6e6b7b),
   which is almost invisible on graphite and plain wrong on the gold pill. Each
   state therefore gets its own copy of the same feather chevron. */
.horizontal-menu .header-navbar.navbar-horizontal .nav-link.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23a2a8af' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
    opacity: 1;
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li:hover > a.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23c9a961' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li.active > a.dropdown-toggle::after {
    background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a160c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'></polyline></svg>");
}

/* --------------------------------------------------------------------------
   Dropdown panels
   -------------------------------------------------------------------------- */
.horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu,
.horizontal-layout .header-navbar .dropdown-menu {
    background: var(--ev-bar-2);
    border: 1px solid var(--ev-line);
    border-radius: 10px;
    box-shadow: 0 12px 34px rgba(0, 0, 0, 0.45);
    padding: 6px;
}

/* The little arrow the vendor draws above an open panel. */
.horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu::before {
    background: var(--ev-bar-2);
    border-color: var(--ev-line);
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a,
.horizontal-layout .header-navbar .dropdown-menu .dropdown-item {
    color: var(--ev-text-muted);
    border-radius: 7px;
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a i,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a svg {
    color: var(--ev-text-dim);
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a:hover,
.horizontal-layout .header-navbar .dropdown-menu .dropdown-item:hover {
    background-color: rgba(201, 169, 97, 0.14) !important;
    color: var(--ev-gold) !important;
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a:hover i,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu a:hover svg {
    color: var(--ev-gold);
}

/* Current page inside an open menu: a gold left rail plus gold type. Kept as a
   rail rather than a second gold fill so it cannot be confused with the active
   top-level pill. */
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu .active > a {
    background: rgba(201, 169, 97, 0.16);
    color: var(--ev-gold);
    font-weight: 700;
    box-shadow: inset 3px 0 0 var(--ev-gold);
}

.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu .active > a i,
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu .active > a svg {
    color: var(--ev-gold);
}

/* Vendor rule re-colours an OPEN active parent back to grey body text. */
.horizontal-menu .header-navbar.navbar-horizontal ul#main-menu-navigation > li > .dropdown-menu .open.active > a {
    color: var(--ev-text-muted);
}

.horizontal-menu .header-navbar.navbar-horizontal .dropdown-menu .dropdown-divider,
.horizontal-layout .header-navbar .dropdown-menu .dropdown-divider {
    border-top-color: var(--ev-line);
}

/* --------------------------------------------------------------------------
   Mobile / collapsed menu
   -------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
    .horizontal-menu .header-navbar.navbar-horizontal .navbar-container,
    .horizontal-menu .horizontal-menu-wrapper .header-navbar {
        background: var(--ev-bar) !important;
    }

    .horizontal-menu .header-navbar .navbar-header .brand-text {
        color: var(--ev-gold) !important;
    }

    .horizontal-menu .header-navbar .modern-nav-toggle i,
    .horizontal-menu .header-navbar .modern-nav-toggle svg {
        color: var(--ev-gold) !important;
    }
}

/* ==========================================================================
   Tables and data grids

   Two table families exist in this app and they had drifted apart:

     1. NonFactors Mvc.Grid - 35 list screens (`.Grid(Model)` in the view,
        rendered by Views/Shared/MvcGrid/_Grid.cshtml, wrapped in a
        `div.mvc-grid`). Paged, sortable, column-filterable.
     2. Hand-rolled `<table class="table table-hover ...">` - the Projects,
        Invoice, Quote, SLA and Order lists plus every Edit* tab.

   They looked different because the grid tables never carried Bootstrap's
   `table` class, so they got only mvc-grid.css: a navy header, a 1px box
   around every cell, BOLD body text and 10px type. The views now append
   `table table-hover` and this section finishes the job, so both families
   land on one design: graphite header band, gold rule, quiet white body.

   ORDER TRAP - READ BEFORE ADDING A RULE HERE.
   mvc-grid.css is linked at the BOTTOM OF <body> in _Layout.cshtml, which is
   AFTER this file in the head. So for anything it also styles, source order
   is against us and every selector below must WIN ON SPECIFICITY, not
   position. Each one deliberately carries one step more than the vendor rule
   it replaces (`.mvc-grid table th` beats `.mvc-grid th`, and so on). Write a
   bare `.mvc-grid th { ... }` here and it will silently do nothing.

   The Vuexy rules are the mirror image: bootstrap-extended.css loads BEFORE
   this file, so that selector is copied EXACTLY and wins on source order.
   That is why the `:not()` chain below looks redundant - it is there to match
   (0,4,2) specificity, not to filter anything out.

   Scope: the header band is dark, the body stays light. Same decision as the
   nav - this is brand chrome on a light page, not a dark mode.
   ========================================================================== */

:root {
    /* Light-side companions to the graphite tokens above. Rows sit on a white
       card, so these are measured against white, not against the bar. */
    --ev-row-line: #ebe9f1;                     /* Vuexy's own table border */
    --ev-cell-text: #2f3349;                    /* 12.42:1 on white */
    --ev-cell-muted: #6e6b7b;                   /* 5.18:1 on white */
    --ev-row-hover: rgba(201, 169, 97, 0.15);   /* EvolveWMS --accent-glow */
    --ev-gold-on-light: #7d6229;                /* gold is 2.25:1 on white and
                                                   unusable as text; this is
                                                   the same hue at 5.75:1 */
}

/* --------------------------------------------------------------------------
   Header band - both families
   -------------------------------------------------------------------------- */

/* Selector copied verbatim from bootstrap-extended.css so the specificities
   match and this later file wins. That rule is a LOCAL edit to Vuexy (stock
   Vuexy ships a light grey header); it is what put #001f3f on every table. */
.table:not(.table-dark):not(.table-light) thead:not(.thead-dark) th,
.table:not(.table-dark):not(.table-light) tfoot:not(.thead-dark) th {
    background-color: var(--ev-bar);
    color: var(--ev-text-muted);
}

/* Grids not carrying the `table` class still need covering, and this
   out-specifies mvc-grid.css's own `.mvc-grid th`. */
.mvc-grid table th {
    background-color: var(--ev-bar);
    color: var(--ev-text-muted);
}

/* Shared header typography. Platinum labels rather than gold: gold reads at
   7.91:1 here and would be legible, but a full row of gold capitals competes
   with the nav's single gold pill. The brand accent is the rule underneath. */
.table thead th,
.table tfoot th,
.mvc-grid table th {
    text-align: left;   /* browsers centre <th> by default, so a header sat off
                           its own column. The brand source sets left too. */
    text-transform: uppercase;
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    white-space: nowrap;
    border-top: 0;
    border-bottom: 2px solid var(--ev-gold);
    padding: 0.9rem 1.25rem;
    vertical-align: middle;
}

/* The card has a 0.357rem radius but the dark band is square, so it spills past
   the rounded corner. The grid wrapper solves this by clipping (it is a div);
   a bare table in a card has no wrapper to clip with, so the corner cells round
   themselves. Backgrounds ARE clipped by border-radius under border-collapse,
   even though the collapsed borders are not - which is all that is needed here,
   since the band is a background. */
.card > .table thead tr:first-child th:first-child {
    border-top-left-radius: 0.357rem;
}

.card > .table thead tr:first-child th:last-child {
    border-top-right-radius: 0.357rem;
}

/* --------------------------------------------------------------------------
   Body rows - both families
   -------------------------------------------------------------------------- */

/* mvc-grid.css boxes every cell and sets `font-weight: bold` on TH AND TD, so
   whole grids rendered bold. Rows are separated by a single horizontal rule
   now, the way the hand-rolled lists already were. */
.mvc-grid table td {
    border: 0;
    border-bottom: 1px solid var(--ev-row-line);
    font-weight: 400;
    color: var(--ev-cell-text);
    padding: 0.85rem 1.25rem;
    vertical-align: middle;
}

/* `table-borderless` is excluded deliberately. The Invoice and Quote edit
   screens use it for label/value summary blocks (Account #, Company, Date),
   where a rule under every row is wrong - and those tables have no `tbody` in
   the markup, so it is easy to assume this rule cannot reach them. The browser
   inserts one, and it does. */
.table:not(.table-sm):not(.table-borderless) tbody td {
    border-top: 0;
    border-bottom: 1px solid var(--ev-row-line);
    color: var(--ev-cell-text);
    /* Vuexy's bootstrap.css sets `.table th, .table td { padding: 0.32rem }` -
       4.48px, and only the Projects list overrode it. Leaving the body at 0.32rem
       while the header above moved to 1.25rem put every column heading 13px to the
       right of its own data. These are the Projects list's own values, so that
       screen keeps the look it already had and the rest catch up to it.
       `table-sm` is excluded: a compact table is compact on purpose, and it is
       ALSO more specific than this rule, so it has to be excluded by hand rather
       than left to the cascade. */
    padding: 0.85rem 1.25rem;
    vertical-align: middle;
}

.mvc-grid table tbody tr:last-child td,
.card .table:not(.table-sm):not(.table-borderless) tbody tr:last-child td {
    border-bottom: 0;
}

/* Hover is the gold wash, never a gold fill - a filled row would read as a
   selected state and there is no selected state here. Over white it resolves
   to #f7f2e7, which still gives body text 11.13:1. */
.table-hover tbody tr:hover,
.mvc-grid table tbody tr:hover {
    background-color: var(--ev-row-hover);
}

.mvc-grid table tbody tr:hover td {
    color: var(--ev-cell-text);
}

/* --------------------------------------------------------------------------
   Grid frame
   -------------------------------------------------------------------------- */

/* .mvc-grid already carries `overflow-x: auto`, so a radius on it clips the
   header band's top corners to the card. Done on the wrapper div rather than
   on the cells because `border-radius` is unreliable on a border-collapsed
   table. */
.card > .mvc-grid,
.card > div > .mvc-grid {
    border-radius: 0.357rem;
    overflow: hidden;
}

/* Borders belong to the cells; the outer 1px box is what made these read as a
   spreadsheet. */
.mvc-grid table {
    border: 0;
}

/* Seven list screens append `table-hover-animation`, which lifts a row 4px on
   hover. That works on a free-standing dashboard card, but the grid wrapper
   above clips (overflow: hidden, so the header band's corners round), and a
   lifted top row shears against that edge. The gold wash already marks the
   row, so drop the lift inside a grid only - the class keeps working wherever
   it is used on its own. */
.mvc-grid table.table-hover-animation tbody tr:hover {
    transform: none;
}

.mvc-grid table tbody tr.mvc-grid-empty-row td,
.mvc-grid table tbody tr.mvc-grid-empty-row:hover td {
    padding: 2.5rem 1.25rem;
    text-align: center;
    color: var(--ev-cell-muted);
    font-weight: 400;
    background-color: transparent;
}

.mvc-grid table tbody tr.mvc-grid-empty-row:hover {
    background-color: transparent;
}

/* --------------------------------------------------------------------------
   Sort and filter controls (these live INSIDE the graphite header)
   -------------------------------------------------------------------------- */

/* Vendor paints these white on navy and gives the filter button a dark wash
   that is invisible on graphite. */
.mvc-grid table .mvc-grid-sort,
.mvc-grid table .filterable .mvc-grid-sort,
.mvc-grid table .mvc-grid-filter {
    background-color: transparent;
    color: var(--ev-text-muted);
    border: 0;
}

.mvc-grid table .sortable {
    color: var(--ev-text-muted);
}

.mvc-grid table .mvc-grid-sort:hover,
.mvc-grid table .mvc-grid-filter:hover,
.mvc-grid table .mvc-grid-sort:focus,
.mvc-grid table .mvc-grid-filter:focus,
.mvc-grid table .filterable .mvc-grid-sort:hover,
.mvc-grid table .filterable .mvc-grid-sort:focus {
    background-color: rgba(201, 169, 97, 0.18);
    color: var(--ev-gold);
}

/* An APPLIED filter and the ACTIVE sort direction are state, so they take the
   gold. Without this a filtered column looks identical to a clean one, which
   is the one thing a user needs to see at a glance here. */
.mvc-grid table .mvc-grid-filter.applied {
    color: var(--ev-gold);
}

.mvc-grid table .desc .mvc-grid-sort::after,
.mvc-grid table .asc .mvc-grid-sort::before {
    opacity: 1;
    color: var(--ev-gold);
}

.mvc-grid table .mvc-grid-sort::before,
.mvc-grid table .mvc-grid-sort::after {
    opacity: 0.45;
}

/* Header-mode and row-mode filter inputs sit in the band itself. */
.mvc-grid.mvc-grid-header-mode table .mvc-grid-value,
.mvc-grid table .mvc-grid-row-filters .mvc-grid-value {
    background-color: var(--ev-bar-3);
    border: 1px solid var(--ev-line);
    border-radius: 5px;
    color: var(--ev-text);
    font-weight: 400;
    padding: 0.35rem 0.6rem;
}

.mvc-grid.mvc-grid-header-mode table .mvc-grid-value::placeholder,
.mvc-grid table .mvc-grid-row-filters .mvc-grid-value::placeholder {
    color: var(--ev-text-dim);
}

.mvc-grid table .mvc-grid-row-filters .mvc-grid-filter {
    border: 1px solid var(--ev-line);
    border-radius: 5px;
}

/* --------------------------------------------------------------------------
   Pager
   -------------------------------------------------------------------------- */
.mvc-grid .mvc-grid-pager {
    padding: 0.35rem 0;
}

.mvc-grid .mvc-grid-pager button {
    background-color: transparent;
    border: 1px solid var(--ev-row-line);
    border-radius: 5px;
    color: var(--ev-cell-muted);
    font-weight: 500;
    line-height: 2.1em;
    min-width: 2.1em;
    margin: 0.5em 0.15em;
}

.mvc-grid .mvc-grid-pager button:hover,
.mvc-grid .mvc-grid-pager button:focus {
    background-color: var(--ev-row-hover);
    border-color: var(--ev-gold);
    color: var(--ev-gold-on-light);
}

/* The current page is the one place a solid gold fill is right, and it takes
   dark ink: 8.02:1, against 2.25:1 for white. */
.mvc-grid .mvc-grid-pager .active,
.mvc-grid .mvc-grid-pager .active:focus,
.mvc-grid .mvc-grid-pager .active:hover {
    background-color: var(--ev-gold);
    border-color: var(--ev-gold);
    color: var(--ev-ink);
    font-weight: 700;
}

.mvc-grid .mvc-grid-pager .disabled,
.mvc-grid .mvc-grid-pager .disabled:focus,
.mvc-grid .mvc-grid-pager .disabled:hover {
    background-color: transparent;
    border-color: var(--ev-row-line);
    color: #b9b6c3;
}

.mvc-grid .mvc-grid-page-sizes select,
.mvc-grid .mvc-grid-page-sizes input {
    border: 1px solid var(--ev-row-line);
    border-radius: 5px;
    color: var(--ev-cell-text);
}

/* --------------------------------------------------------------------------
   Filter popup

   NOT a descendant of .mvc-grid - mvc-grid.js appends it to <body> - so these
   cannot be prefixed the way everything above is. Each one instead out-
   specifies the vendor rule by naming the element as well as the class.
   -------------------------------------------------------------------------- */
.mvc-grid-popup {
    border: 1px solid var(--ev-row-line);
    border-radius: 0.357rem;
    box-shadow: 0 5px 25px rgba(34, 41, 47, 0.1);
}

.mvc-grid-popup .popup-content button.mvc-grid-apply,
.mvc-grid-popup .popup-actions button.mvc-grid-apply {
    background-color: var(--ev-gold);
    border-color: var(--ev-gold);
    border-radius: 5px;
    color: var(--ev-ink);
    padding: 0.35em 0.9em;
}

.mvc-grid-popup .popup-content button.mvc-grid-apply:focus,
.mvc-grid-popup .popup-actions button.mvc-grid-apply:focus {
    box-shadow: 0 0 0 0.2em rgba(201, 169, 97, 0.4);
}

/* Cancel drops the vendor red. Dismissing a filter is not destructive, and a
   red button beside a gold one reads as a warning that is not there. */
.mvc-grid-popup .popup-content button.mvc-grid-cancel,
.mvc-grid-popup .popup-actions button.mvc-grid-cancel {
    background-color: transparent;
    border-color: var(--ev-row-line);
    border-radius: 5px;
    color: var(--ev-cell-muted);
    padding: 0.35em 0.9em;
}

.mvc-grid-popup .popup-content button.mvc-grid-cancel:hover,
.mvc-grid-popup .popup-actions button.mvc-grid-cancel:hover {
    background-color: #f8f8f8;
    color: var(--ev-cell-text);
}

.mvc-grid-popup select.mvc-grid-method,
.mvc-grid-popup select.mvc-grid-operator,
.mvc-grid-popup input.mvc-grid-value,
.mvc-grid-popup select.mvc-grid-value {
    border: 1px solid var(--ev-row-line);
    border-radius: 5px;
    color: var(--ev-cell-text);
}

.mvc-grid-popup select.mvc-grid-value:focus,
.mvc-grid-popup input.mvc-grid-value:focus {
    border-color: var(--ev-gold);
    outline: 0;
}

/* --------------------------------------------------------------------------
   Page load bar

   Pace.js rides inside vendors.min.js and draws a 3px bar across the top of
   every page while it loads. Stock Vuexy colours it purple; a LOCAL edit in
   components.css put #073b5e on it - the same navy family as the old table
   header, and the last place that colour was still showing.

   `html .pace .pace-progress` is (0,2,1), so the selector is copied verbatim
   rather than out-specified: this file loads after components.css, and equal
   specificity plus source order settles it.

   It was invisible on the sign in screen until now only because
   _LayoutLogin.cshtml was asking for vendors.min.css at a path that did not
   exist. The JS was always running; only its stylesheet was missing.
   -------------------------------------------------------------------------- */
html .pace .pace-progress {
    background: var(--ev-gold);
    box-shadow: 0 0 10px rgba(201, 169, 97, 0.65);
}

/* ==========================================================================
   App surface

   The sign in screen, continued past the sign in. Two things are happening
   here and they are worth keeping apart:

     1. THE GROUND IS DARK. Graphite, the drifting 45 degree lattice and two
        soft blooms, the same three layers as Content/Styles/evolution-login.css.
     2. THE CARDS STAY LIGHT and float on it.

   That split is the whole design and it is what keeps it cheap. Every form
   control in this app is a light-theme control with a vendor stylesheet
   behind it - .form-control, select2, flatpickr, pickadate, sweetalert2,
   bs-stepper, TinyMCE, the ReportViewer - and every one of them lives INSIDE
   a card. Darkening the ground never reaches them, so not one of them needs
   a dark variant written for it. Do not "finish the job" by darkening cards
   generally; that is a different and much larger piece of work, and the
   dashboard gets it only because it is the one screen with no control on it
   at all (see Content/Styles/evolution-dashboard.css).

   The SVG runners from the sign in screen are deliberately NOT here. A bright
   segment travelling a diagonal is right behind a sign in panel and wrong
   behind someone entering an invoice.

   THE BACKDROP NEEDS MARKUP. `.ev-app-bg` is a div in _Layout.cshtml and
   _LayoutMap.cshtml, because a lattice plus two independently drifting
   blooms is three stacking layers and body has only ::before and ::after. A
   layout without that div gets a flat graphite ground and no atmosphere, and
   nothing will report it.
   ========================================================================== */

body.horizontal-layout {
    background-color: #0d0f12;
}

/* Vuexy paints the ground on several elements between body and the card, and
   every one of them has to let the backdrop through. */
.horizontal-layout .app-content,
.horizontal-layout .content-wrapper,
.horizontal-layout .content-body,
.horizontal-layout .footer.footer-light {
    background: transparent;
}

/* A white-to-transparent gradient Vuexy draws under the fixed header. It was
   invisible on #f8f8f8 and is a smear on graphite. */
.horizontal-layout .header-navbar-shadow {
    background: linear-gradient(180deg,
                rgba(13, 15, 18, 0.95) 44%,
                rgba(13, 15, 18, 0.46) 73%,
                rgba(13, 15, 18, 0) 100%);
}

/* --------------------------------------------------------------------------
   Backdrop layers
   -------------------------------------------------------------------------- */
.ev-app-bg {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    z-index: 0;
    pointer-events: none;
    overflow: hidden;
}

/* Content has to sit above the backdrop. The two chrome bars are already
   fixed or floating and carry their own stacking context. */
.horizontal-layout .app-content,
.horizontal-layout footer.footer {
    position: relative;
    z-index: 1;
}

.ev-app-wash::before,
.ev-app-wash::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    background: radial-gradient(circle closest-side,
                rgba(201, 169, 97, 0.15) 0%,
                rgba(201, 169, 97, 0.055) 45%,
                rgba(201, 169, 97, 0) 72%);
    will-change: transform;
}

.ev-app-wash::before {
    width: 70vw;
    height: 70vw;
    top: -24vw;
    left: -18vw;
    animation: ev-app-drift-a 38s ease-in-out infinite;
}

.ev-app-wash::after {
    width: 56vw;
    height: 56vw;
    right: -16vw;
    bottom: -22vw;
    background: radial-gradient(circle closest-side,
                rgba(201, 169, 97, 0.11) 0%,
                rgba(164, 130, 60, 0.045) 48%,
                rgba(201, 169, 97, 0) 74%);
    animation: ev-app-drift-b 50s ease-in-out infinite;
}

/* Same geometry as the mark - two interlocking rules on the diagonal - one
   step quieter than the sign in screen, because that page is the only thing
   on screen and this one sits behind work. The layer is 200% of the viewport
   and travels by transform, so one lattice cell of movement loops with no
   repaint. */
.ev-app-grid {
    position: absolute;
    top: -50%;
    left: -50%;
    width: 200%;
    height: 200%;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(201, 169, 97, 0) 0 63px,
            rgba(201, 169, 97, 0.062) 63px 64px),
        repeating-linear-gradient(-45deg,
            rgba(201, 169, 97, 0) 0 63px,
            rgba(201, 169, 97, 0.036) 63px 64px);
    -webkit-mask-image: radial-gradient(ellipse 62% 62% at 50% 42%, #000 26%, transparent 80%);
    mask-image: radial-gradient(ellipse 62% 62% at 50% 42%, #000 26%, transparent 80%);
    animation: ev-app-lattice 34s linear infinite;
    will-change: transform;
}

@keyframes ev-app-lattice {
    from { transform: translate3d(0, 0, 0); }
    to   { transform: translate3d(90.5px, 0, 0); }  /* one cell on the diagonal */
}

@keyframes ev-app-drift-a {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
    50%      { transform: translate3d(5vw, 3vw, 0) scale(1.07); }
}

@keyframes ev-app-drift-b {
    0%, 100% { transform: translate3d(0, 0, 0) scale(1.04); }
    50%      { transform: translate3d(-4vw, -3vw, 0) scale(1); }
}

/* --------------------------------------------------------------------------
   Page title

   Type on graphite now, so it takes the sign in screen's own text colour and
   its tagline treatment: uppercase, wide, over a gold hairline that fades out
   at one end.
   -------------------------------------------------------------------------- */
/* The vendor rule is `html .content .content-wrapper .content-header-title` in
   components.css, at (0,3,3), and a LOCAL edit put #001f3f on it - the same navy
   that was in the table headers. A plain `.horizontal-layout .content-header-title`
   is (0,2,0) and loses to it on specificity no matter the source order, so the
   selector is copied verbatim and wins on order instead, the same way the table
   header rules above do. This was caught by reading computed styles; the page
   looked right because the OTHER half of the rule, text-transform, has no vendor
   rule competing with it and was applying. */
html .content .content-wrapper .content-header-title {
    color: var(--ev-text);
    font-size: 0.92rem;
    font-weight: 600;
    letter-spacing: 0.16em;
    text-transform: uppercase;
}

/* The rule is a BLOCK in normal flow, not an absolutely positioned one.

   It was `position: absolute; bottom: 0.35rem` against .content-header-left,
   whose box is only as tall as the title itself - the `mb-2` below it is
   margin, which is outside the box - so 0.35rem up from its bottom edge put a
   2px gold line straight THROUGH the title text and it read as a strikethrough.
   In flow the pseudo-element cannot overlap anything: it takes part in layout
   and the box grows to hold it. */
.horizontal-layout .content-header-title::after {
    content: "";
    display: block;
    width: 132px;
    height: 2px;
    margin-top: 0.45rem;
    background: linear-gradient(90deg,
                var(--ev-gold) 0%,
                rgba(201, 169, 97, 0.55) 55%,
                rgba(201, 169, 97, 0) 100%);
}

.horizontal-layout .breadcrumb,
.horizontal-layout .breadcrumb .breadcrumb-item a {
    color: var(--ev-text-muted);
}

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

   White, but lifted. On graphite a cool 10 percent shadow disappears, so a
   card needs a real drop and a warm hairline to sit ON the ground rather than
   be pasted to it.
   -------------------------------------------------------------------------- */
.horizontal-layout .card {
    border: 1px solid rgba(201, 169, 97, 0.22);
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42),
                0 2px 6px rgba(0, 0, 0, 0.24);
}

/* The fading gold rule from under the sign in tagline, left anchored. It
   marks a card's own title the way the hairline above marks the page. */
.horizontal-layout .card-header .card-title {
    color: #2f3349;
    font-size: 1.05rem;
    font-weight: 600;
}

/* Same correction as the page title above: in flow, not absolute. The title
   carries `mb-25`, so its own box ended barely below its text and a rule
   pinned to `bottom: 0` of an 8.4px padding box landed on the SUBTITLE
   underneath - measured at y=827 against a subtitle spanning 821 to 835. */
.horizontal-layout .card-header .card-title::after {
    content: "";
    display: block;
    width: 74px;
    height: 1px;
    margin-top: 0.5rem;
    background: linear-gradient(90deg,
                rgba(201, 169, 97, 0.9) 0%,
                rgba(201, 169, 97, 0) 100%);
}

/* A subtitle is a label, so it reads as one - the sign in field label, at the
   same weight and tracking.

   `margin-top: 0` is load bearing. Vuexy pulls .card-subtitle UP by 10.5px so
   it tucks under a title that normally carries a large bottom margin. That
   negative pull is what put the gold rule on top of the subtitle text: moving
   the rule into normal flow made the title box taller, and the subtitle simply
   climbed back over it. Cancel the pull and the rule has somewhere to sit. */
.horizontal-layout .card-subtitle {
    display: block;
    margin-top: 0;
    color: var(--ev-cell-muted);
    font-size: 0.68rem;
    font-weight: 600;
    letter-spacing: 0.11em;
    text-transform: uppercase;
}

/* --------------------------------------------------------------------------
   Hero card

   `ev-hero` goes on a card in the view. It is the graphite panel a screen
   opens on, so the first thing after sign in is the last thing before it.
   Glass rather than solid, because on this ground a solid graphite card
   stops reading as a panel at all.
   -------------------------------------------------------------------------- */
.horizontal-layout .card.ev-hero {
    position: relative;
    overflow: hidden;
    border-color: rgba(201, 169, 97, 0.3);
    background: rgba(21, 24, 28, 0.66);
    -webkit-backdrop-filter: blur(16px) saturate(120%);
    backdrop-filter: blur(16px) saturate(120%);
    box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5),
                inset 0 1px 0 rgba(255, 255, 255, 0.045);
}

/* The lattice again, tighter and angled across the card, so the hero carries
   the mark's geometry at its own scale rather than showing a crop of the
   page behind it. */
.horizontal-layout .card.ev-hero::before {
    content: "";
    position: absolute;
    top: -60%;
    left: -10%;
    width: 120%;
    height: 220%;
    pointer-events: none;
    background-image:
        repeating-linear-gradient(45deg,
            rgba(201, 169, 97, 0) 0 47px,
            rgba(201, 169, 97, 0.11) 47px 48px),
        repeating-linear-gradient(-45deg,
            rgba(201, 169, 97, 0) 0 47px,
            rgba(201, 169, 97, 0.06) 47px 48px);
    -webkit-mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 88%);
    mask-image: linear-gradient(100deg, #000 0%, rgba(0, 0, 0, 0.35) 55%, transparent 88%);
}

.horizontal-layout .card.ev-hero::after {
    content: "";
    position: absolute;
    top: -160%;
    right: -6%;
    width: 460px;
    height: 460px;
    border-radius: 50%;
    pointer-events: none;
    background: radial-gradient(circle closest-side,
                rgba(201, 169, 97, 0.2) 0%,
                rgba(201, 169, 97, 0.07) 46%,
                rgba(201, 169, 97, 0) 72%);
}

.horizontal-layout .card.ev-hero > * {
    position: relative;
    z-index: 1;
}

.horizontal-layout .card.ev-hero h1,
.horizontal-layout .card.ev-hero h2,
.horizontal-layout .card.ev-hero h3,
.horizontal-layout .card.ev-hero h4 {
    color: var(--ev-text);
    font-weight: 600;
    letter-spacing: -0.01em;
}

.horizontal-layout .card.ev-hero .card-text,
.horizontal-layout .card.ev-hero .text-muted {
    color: var(--ev-text-dim) !important;
}

/* A pastel badge loses its meaning on graphite, so the one chip a hero
   carries goes gold - with ink on it, never white. */
.horizontal-layout .card.ev-hero .badge {
    background-color: var(--ev-gold) !important;
    color: var(--ev-ink) !important;
    font-weight: 600;
    letter-spacing: 0.04em;
}

/* --------------------------------------------------------------------------
   Statistic labels

   A big number over a small word is a figure and its caption, so the caption
   takes the label treatment rather than being a smaller sentence.
   -------------------------------------------------------------------------- */
.horizontal-layout .card-header > div > .card-text,
.horizontal-layout .card.text-center .card-text,
.horizontal-layout .statistics-body .media-body .card-text {
    color: var(--ev-cell-muted);
    font-size: 0.67rem;
    font-weight: 600;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.horizontal-layout .card-header h2.font-weight-bolder,
.horizontal-layout .card.text-center h2.font-weight-bolder,
.horizontal-layout .statistics-body .media-body h4 {
    color: #2f3349;
    letter-spacing: -0.02em;
}

/* --------------------------------------------------------------------------
   Bare text on the ground

   A LOCAL edit to the vendor sheets sets `p { color: black }` (bootstrap.css)
   and `label { color: black }` (bootstrap-extended.css). Stock Bootstrap sets
   neither. On a white page that is invisible as a problem; on graphite it is
   black on #0d0f12, so a paragraph a view renders OUTSIDE a card disappears
   completely. Confirmed by computed style, not by looking - the text is there,
   it just cannot be seen.

   Rather than hunt every view that puts text outside a card, the default for
   the content area flips to light and the CARD restores the old value. A card
   is then the thing that says "dark type here", which is exactly what it now
   means. Both pairs are (0,2,1), so the restoring rule wins by sitting later.
   -------------------------------------------------------------------------- */
.horizontal-layout .content-body p,
.horizontal-layout .content-body label {
    color: var(--ev-text-muted);
}

.horizontal-layout .card p,
.horizontal-layout .card label {
    color: #000;
}

/* EEVO is a fully self-themed component with its own light and dark palettes,
   so it is handed back to itself rather than given a colour from here.
   `inherit` resolves to whatever .eevo-container set, in either theme.

   Note this also repairs something that was already broken: .markdown-body
   colours its headings but not its paragraphs, so an assistant reply has been
   taking `black` from that same vendor edit - which is black on a dark surface
   whenever the chat is in dark theme. */
.horizontal-layout .eevo-container p,
.horizontal-layout .eevo-container label {
    color: inherit;
}

/* --------------------------------------------------------------------------
   Focus

   The gold ring from the sign in fields, on every control in the app.
   -------------------------------------------------------------------------- */
.horizontal-layout .form-control:focus,
.horizontal-layout .custom-select:focus {
    border-color: var(--ev-gold);
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.16);
}

/* --------------------------------------------------------------------------
   Progress bars
   -------------------------------------------------------------------------- */
.horizontal-layout .progress {
    background-color: rgba(201, 169, 97, 0.14);
}

.horizontal-layout .progress .progress-bar {
    background: linear-gradient(90deg, var(--ev-gold-dim), var(--ev-gold));
}

/* --------------------------------------------------------------------------
   Footer and scroll-top
   -------------------------------------------------------------------------- */
.horizontal-layout .footer.footer-light {
    box-shadow: none;
}

.horizontal-layout .scroll-top.btn-primary {
    background-color: var(--ev-gold) !important;
    border-color: var(--ev-gold) !important;
    color: var(--ev-ink) !important;
    box-shadow: 0 6px 18px rgba(201, 169, 97, 0.32);
}


/* ==========================================================================
   Primary buttons

   The primary action goes gold, to match the sign in screen's own submit
   button. Before this it was #001f3f - the same navy that kept turning up in
   the table headers and the Pace bar, from a LOCAL edit to colors.css that
   replaced Vuexy's purple wholesale. Next to champagne it read as unstyled.

   ONLY the primary BUTTON moves. Do NOT be tempted to repoint the whole
   `primary` colour: gold is 2.25:1 on white and unusable as text, so
   .text-primary, .badge-primary and the rest cannot take it. A button has its
   own fill, which is the entire reason this one can.

   Gold carries INK, never white - 8.02:1 against 2.25:1.

   EVERY DECLARATION HERE NEEDS !important, and that is not defensive.
   colors.css sets `border-color`, `background-color` and `color` on
   .btn-primary with !important already, so an ordinary rule loses to it no
   matter how specific or how late. Each selector below is also written at the
   specificity of the rule it answers, listed in the comment above it, because
   this file loads after colors.css and equal specificity then settles it.
   ========================================================================== */

/* Answers colors.css `.btn-primary` (0,1,0) !important. */
.btn-primary {
    border-color: var(--ev-gold) !important;
    background-color: var(--ev-gold) !important;
    color: var(--ev-ink) !important;
    font-weight: 500;
}

/* Answers bootstrap.css `.btn-primary:hover` (0,2,0), which sets a purple this
   app has never shown because the !important above always beat it. */
.btn-primary:hover {
    border-color: #dcc07f !important;
    background-color: #dcc07f !important;
    color: var(--ev-ink) !important;
}

/* Answers colors.css `.btn-primary:focus, :active, .active` (0,2,0)
   !important, which sets #3497bd - a blue, from no palette in this app. */
.btn-primary:focus,
.btn-primary:active,
.btn-primary.active {
    border-color: #dcc07f !important;
    background-color: #dcc07f !important;
    color: var(--ev-ink) !important;
}

/* Answers colors.css `.btn-primary:hover:not(.disabled):not(:disabled)`
   (0,4,0), which carries a navy glow. */
.btn-primary:hover:not(.disabled):not(:disabled) {
    box-shadow: 0 8px 25px -8px rgba(201, 169, 97, 0.85) !important;
}

/* Answers bootstrap.css `.btn-primary:focus, .btn-primary.focus` (0,2,0) for
   the ring, and colors.css
   `.btn-primary:not(:disabled):not(.disabled):active:focus` (0,4,0), which
   removes it entirely. Keyboard focus must stay visible, so the ring is on
   :focus-visible and the plain :focus case drops it - a mouse press should not
   leave a halo behind. */
.btn-primary:focus,
.btn-primary.focus {
    box-shadow: none !important;
}

.btn-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.4) !important;
}

.btn-primary:not(:disabled):not(.disabled):active {
    transform: translateY(1px);
}

/* Answers bootstrap.css `.btn-primary.disabled, :disabled` (0,2,0). A disabled
   control must not read as a live gold call to action, so it drops to the dim
   gold and keeps ink on it. */
.btn-primary.disabled,
.btn-primary:disabled {
    border-color: var(--ev-gold-dim) !important;
    background-color: var(--ev-gold-dim) !important;
    color: rgba(26, 22, 12, 0.62) !important;
    box-shadow: none !important;
}

/* --------------------------------------------------------------------------
   Outline

   Used on five screens, always INSIDE a card, i.e. on white - the VisionKraft
   dashboard pairs it with .btn-primary as an unselected/selected toggle. So
   the text takes --ev-gold-on-light (#7d6229, 5.75:1) rather than true gold,
   which would be 2.25:1 and unreadable. The BORDER stays true gold; a 1px rule
   is not text and does not carry a text contrast requirement.
   -------------------------------------------------------------------------- */

/* Answers colors.css `.btn-outline-primary` (0,1,0), whose border is
   !important while its colour is not. */
.btn-outline-primary {
    border: 1px solid var(--ev-gold) !important;
    background-color: transparent;
    color: var(--ev-gold-on-light);
}

/* Answers (0,4,0). The vendor wash here is rgba(115, 103, 240, ...) - stock
   Vuexy purple, left behind when the hex colours were repointed to navy and
   the rgba ones were not. */
.btn-outline-primary:hover:not(.disabled):not(:disabled) {
    background-color: rgba(201, 169, 97, 0.1);
    color: var(--ev-gold-on-light);
}

.btn-outline-primary:not(:disabled):not(.disabled):active,
.btn-outline-primary:not(:disabled):not(.disabled).active,
.btn-outline-primary:not(:disabled):not(.disabled):focus {
    background-color: rgba(201, 169, 97, 0.2);
    color: var(--ev-gold-on-light);
}

.btn-outline-primary:focus-visible {
    box-shadow: 0 0 0 3px rgba(201, 169, 97, 0.3);
}

@media (prefers-reduced-motion: reduce) {
    .btn-primary:not(:disabled):not(.disabled):active {
        transform: none;
    }
}

/* --------------------------------------------------------------------------
   Motion

   All of the above is decoration, so all of it stops. The lattice and the
   blooms stay on screen at their first frame - the page must not lose its
   ground for someone who asked for less movement.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .ev-app-grid,
    .ev-app-wash::before,
    .ev-app-wash::after {
        animation: none;
    }
}