/* QPS.Web — custom styles for the pieces MudBlazor doesn't own (the Kanban board) plus a couple
   small helpers. Colours use MudBlazor palette CSS variables (with light fallbacks) so the board,
   cards, history and changelog adapt automatically to light/dark mode. */

/* ── Quikrete brand accents ─────────────────────────────────────────────────── */
.mud-appbar { border-bottom: 3px solid #FFB81C; }            /* yellow accent under the black app bar */
/* SVG brand lockup — built for the dark app bar (yellow wordmark + white slogan), no chip needed.
   If you switch to the official PNG (black outlines/slogan on white), add back a white chip:
   background:#fff; padding:4px 9px; border-radius:5px; */
.brand-logo { height: 46px; width: auto; margin-right: 12px; }
.brand-fallback { color: #FFB81C; font-weight: 600; font-size: 1.25rem; letter-spacing: .3px; }
.brand-title { color: #FFFFFF; font-weight: 500; font-size: 1.2rem; letter-spacing: .3px; }
/* Yellow (Primary) filled buttons need dark text for contrast */
.mud-button-filled-primary,
.mud-button-filled-primary .mud-icon-root { color: #1E1E1E !important; }

/* AHK 2026-06-11: Workspace/role pill — brand gold bg + dark text, adapts to both modes. */
.pill {
    background: #FFB81C;
    color: #1E1E1E;
    border-radius: 10px;
    padding: 2px 10px;
    font-size: 13px;
}

.col-count {
    float: right;
    background: rgba(255, 255, 255, .25);
    border-radius: 10px;
    padding: 0 8px;
    font-size: 12px;
}

/* Card drag affordance + "picked-up" feedback */
.ticket { cursor: grab; transition: box-shadow .12s ease, opacity .12s ease; }
.ticket:active { cursor: grabbing; }
.mud-drop-item-dragging { opacity: .45; box-shadow: 0 6px 18px rgba(0, 0, 0, .25) !important; }

/* Board drop-target feedback while a card is held: valid columns lift, invalid (virtual) dim,
   and the column directly under the cursor gets a dashed highlight. */
.board-col-body.zone-candrop { background: rgba(26, 188, 156, 0.07); }
.board-col-body.zone-nodrop { opacity: .4; }
.board-col-body.mud-drop-zone-drag-block-inprogress {
    outline: 2px dashed var(--mud-palette-primary, #FFB81C);
    outline-offset: -5px;
    background: rgba(26, 188, 156, 0.15);
    border-radius: 0 0 6px 6px;
}

/* ── Kanban board ───────────────────────────────────────────────────────────── */
.board {
    display: flex;
    gap: 12px;
    align-items: stretch;     /* columns share the board height so each drop zone is full-height */
    /* Fixed-height pane: the horizontal scrollbar stays on screen (no scrolling the page to the
       bottom to reach other columns); each column scrolls its own cards vertically inside. */
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(100vh - 330px);
    min-height: 320px;
}

.board-col {
    background: rgba(128, 128, 128, 0.12);
    border-radius: 6px;
    width: 270px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
}

.board-col-head {
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    padding: 8px 12px;
    border-radius: 6px 6px 0 0;
    flex: 0 0 auto;
}

/* The MudDropZone — fill the entire remaining column height so a card dropped anywhere
   under the title (not just the top strip) lands inside the zone and is accepted. */
.board-col-body {
    padding: 8px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex: 1 1 auto;
    min-height: 0;        /* allow the body to shrink so its cards scroll instead of growing the page */
    overflow-y: auto;     /* tall columns scroll their cards internally */
}

.prio-head {
    color: #fff;
    font-size: 13px;
    padding: 4px 10px;
    border-radius: 4px;
}

.ticket {
    background: var(--mud-palette-surface, #fff);
    border: 1px solid var(--mud-palette-lines-default, #e1e4e8);
    border-radius: 5px;
    padding: 9px 10px;
    box-shadow: 0 1px 2px rgba(0, 0, 0, .06);
}

.ticket:hover {
    border-color: var(--mud-palette-primary, #b9c2cc);
    box-shadow: 0 2px 6px rgba(0, 0, 0, .12);
}

.ticket-title { font-size: 14px; line-height: 1.25; margin-bottom: 6px; color: var(--mud-palette-text-primary, #222); }
.ticket-meta { display: flex; justify-content: space-between; color: var(--mud-palette-text-secondary, #8a93a0); font-size: 11px; margin-bottom: 6px; }
.ticket-tags { display: flex; flex-wrap: wrap; gap: 4px; }
.tag { background: rgba(128, 128, 128, 0.16); color: var(--mud-palette-text-primary, #3a4252); border-radius: 3px; padding: 1px 6px; font-size: 11px; }
.tag-like { background: #fdeaea; color: #c0392b; }

/* Ticket history timeline (detail dialog) */
.ticket-history {
    max-height: 320px;
    overflow: auto;
    border: 1px solid var(--mud-palette-lines-default, #eceef1);
    border-radius: 4px;
    padding: 6px 8px;
    background: rgba(128, 128, 128, 0.06);
}
.hist-entry { padding: 6px 4px; border-bottom: 1px solid var(--mud-palette-divider, #f0f2f4); }
.hist-entry:last-child { border-bottom: none; }
.hist-text { font-size: 13px; color: var(--mud-palette-text-primary, #222); }
.hist-date { font-size: 11px; color: var(--mud-palette-text-secondary, #8a93a0); }

/* Reports changelog — preserve the indentation/bullets from the ported GetCRLog text */
.report-changelog {
    white-space: pre-wrap;
    font-family: Consolas, 'Courier New', monospace;
    font-size: 12.5px;
    line-height: 1.5;
    max-height: 360px;
    overflow: auto;
    background: var(--mud-palette-surface, #fafbfc);
    border: 1px solid var(--mud-palette-lines-default, #eceef1);
    border-radius: 4px;
    padding: 10px 12px;
    color: var(--mud-palette-text-primary, #222);
}

/* ── Priority Queue tables ──────────────────────────────────────────────────── */
.pq-table {
    margin-bottom: 18px;
    border: 1px solid var(--mud-palette-lines-default, #e1e4e8);
    border-radius: 6px;
    overflow: hidden;
}
.pq-title { color: #fff; font-weight: 600; padding: 6px 12px; font-size: 14px; }
/* Capped, dual-scroll viewport so each table's horizontal scrollbar stays on screen (reach all
   columns without scrolling the page down) and rows scroll vertically under a sticky header. */
.pq-scroll { overflow: auto; max-height: 400px; }
.pq-head, .pq-row {
    display: grid;
    grid-template-columns: 28px 40px 200px 240px 95px 130px 100px 100px 110px 120px 110px 55px 110px;
    align-items: center;
    min-width: 1338px;
}
.pq-head {
    position: sticky;
    top: 0;
    z-index: 2;
    /* opaque (surface + grey overlay) so scrolling rows don't show through the sticky header */
    background-color: var(--mud-palette-surface, #fff);
    background-image: linear-gradient(rgba(128, 128, 128, 0.14), rgba(128, 128, 128, 0.14));
    border-bottom: 1px solid var(--mud-palette-lines-default, #e1e4e8);
    font-size: 12px;
    font-weight: 600;
    color: var(--mud-palette-text-secondary, #4a5568);
    padding: 6px 0;
}
.pq-head > span, .pq-row > span { padding: 0 8px; }
.pq-row {
    font-size: 13px;
    min-height: 30px;
    border-top: 1px solid var(--mud-palette-divider, #f0f2f4);
    cursor: grab;
    color: var(--mud-palette-text-primary, #222);
}
.pq-row:hover { background: var(--mud-palette-action-default-hover, rgba(0,0,0,.045)); }
.pq-row:active { cursor: grabbing; }
.mud-drop-item-dragging.pq-row, .mud-drop-item-dragging .pq-row { opacity: .5; box-shadow: 0 6px 18px rgba(0,0,0,.25); }
.pq-grip { cursor: grab; text-align: center; user-select: none; color: var(--mud-palette-text-secondary, #9aa3ad); }
.pq-ell { white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.pq-zone { min-height: 16px; }
.pq-empty { padding: 12px; color: var(--mud-palette-text-secondary, #8a93a0); font-size: 13px; min-width: 1338px; }

/* ── Pipe Pricing (CMP) ─────────────────────────────────────────────────────── */
/* Option checkbox groups (Corrugation / Grade / Gauge / Diameter) */
.opt-group {
    padding: 8px 0;
    border-top: 1px solid var(--mud-palette-divider, #f0f2f4);
}
.opt-group:first-child { border-top: none; }
.opt-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 2px 14px;
    margin-top: 2px;
}
.opt-chips .mud-input-control { margin: 0; }

/* Low/High price stat cards */
.price-stat {
    min-width: 150px;
    padding: 12px 18px;
    border-radius: 8px;
    background: rgba(128, 128, 128, 0.10);
    border: 1px solid var(--mud-palette-lines-default, #e1e4e8);
}
.price-stat-hi {
    background: rgba(255, 184, 28, 0.14);            /* Quikrete amber tint for the top of the range */
    border-color: rgba(255, 184, 28, 0.5);
}
.price-stat-label {
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: .5px;
    color: var(--mud-palette-text-secondary, #8a93a0);
}
.price-stat-value {
    font-size: 26px;
    font-weight: 700;
    line-height: 1.2;
    color: var(--mud-palette-text-primary, #222);
}
.price-stat-note { display: flex; align-items: flex-end; max-width: 240px; }

/* Quote-cart Freight input: right-align the number so it lines up under Subtotal / Quote total */
.freight-amount-field input { text-align: right; }

/* 7-column margin matrix (the legacy range-pricing grid) */
.price-matrix-wrap { overflow-x: auto; max-height: 460px; overflow-y: auto; border: 1px solid var(--mud-palette-lines-default, #e1e4e8); border-radius: 6px; }
.price-matrix { border-collapse: collapse; width: 100%; font-size: 13px; }
.price-matrix th, .price-matrix td { padding: 5px 10px; border-bottom: 1px solid var(--mud-palette-divider, #f0f2f4); white-space: nowrap; color: var(--mud-palette-text-primary, #222); }
.price-matrix thead th {
    position: sticky; top: 0; z-index: 2; font-weight: 600;
    background-color: var(--mud-palette-surface, #fff);
    border-bottom: 1px solid var(--mud-palette-lines-default, #e1e4e8);
}
.price-matrix .num { text-align: right; font-variant-numeric: tabular-nums; }
/* the entered-CM (center) column gets a yellow accent */
.price-matrix thead th.center { border-bottom: 2px solid #FFB81C; }
.price-matrix td.center { box-shadow: inset 2px 0 0 rgba(255,184,28,.5), inset -2px 0 0 rgba(255,184,28,.5); }
/* clickable price cells */
.price-cell { cursor: pointer; }
.price-cell:hover { outline: 2px solid #FFB81C; outline-offset: -2px; font-weight: 600; }
/* heat shading by margin sensor: 1 = red (low), 2 = orange (mid), 3 = green (good) */
.price-matrix td.heat-1 { background: rgba(221, 0, 0, 0.12); }
.price-matrix td.heat-2 { background: rgba(255, 145, 0, 0.14); }
.price-matrix td.heat-3 { background: rgba(60, 160, 60, 0.12); }
.price-matrix thead th.heat-1 { background-image: linear-gradient(rgba(221, 0, 0, 0.20), rgba(221, 0, 0, 0.20)); }
.price-matrix thead th.heat-2 { background-image: linear-gradient(rgba(255, 145, 0, 0.22), rgba(255, 145, 0, 0.22)); }
.price-matrix thead th.heat-3 { background-image: linear-gradient(rgba(60, 160, 60, 0.20), rgba(60, 160, 60, 0.20)); }

/* Print: show only the report area */
@media print {
    .mud-appbar, .mud-drawer, .mud-tabs-toolbar, .sm-header, .sm-actions { display: none !important; }
    .mud-main-content { margin: 0 !important; padding: 0 !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   3D / DIMENSIONAL UI  — glassmorphism, neumorphism, depth, motion
   ═══════════════════════════════════════════════════════════════════ */

/* ── App bar: deep shadow + animated gold shimmer line ─────────── */
.mud-appbar {
    box-shadow: 0 4px 24px rgba(0,0,0,0.45), 0 1px 0 rgba(255,184,28,0.5) !important;
    position: relative;
    overflow: visible;
}
.mud-appbar::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, transparent 0%, #FFB81C 40%, #fff8 52%, #FFB81C 64%, transparent 100%);
    background-size: 200% 100%;
    animation: appbar-shimmer 3.5s ease-in-out infinite;
    pointer-events: none;
}
@keyframes appbar-shimmer {
    0%   { background-position: 120% 0; opacity: 0.7; }
    50%  { background-position: -20% 0; opacity: 1; }
    100% { background-position: 120% 0; opacity: 0.7; }
}

/* ── Nav drawer: deeper shadow + left-rail accent on hover/active ─ */
.mud-drawer {
    box-shadow: 4px 0 28px rgba(0,0,0,0.55) !important;
}
.mud-nav-link {
    transition: background 0.18s ease, box-shadow 0.18s ease !important;
}
.mud-nav-link:hover {
    background: rgba(255,184,28,0.13) !important;
    box-shadow: inset 3px 0 0 rgba(255,184,28,0.7) !important;
}
.mud-nav-link.active,
.mud-nav-link[aria-current] {
    box-shadow: inset 3px 0 0 #FFB81C !important;
    background: rgba(255,184,28,0.1) !important;
}

/* ── Kanban board columns: lift on hover ──────────────────────── */
.board-col {
    box-shadow: 0 2px 10px rgba(0,0,0,0.18), 0 1px 3px rgba(0,0,0,0.1);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.board-col:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(0,0,0,0.26), 0 3px 8px rgba(0,0,0,0.14);
}

/* ── Column header: embossed text + inner top highlight ───────── */
.board-col-head {
    text-shadow: 0 1px 3px rgba(0,0,0,0.55), 0 -1px 0 rgba(255,255,255,0.1);
    letter-spacing: 0.35px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* ── Column ticket-count chip: debossed (pressed-in look) ──────── */
.col-count {
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.28), 0 1px 0 rgba(255,255,255,0.08);
}

/* ── Neumorphic ticket cards ───────────────────────────────────── */
.ticket {
    background: var(--mud-palette-surface, #f4f4f4) !important;
    border: none !important;
    border-radius: 8px !important;
    box-shadow:
        4px 5px 12px rgba(0,0,0,0.13),
        -2px -2px 7px rgba(255,255,255,0.55),
        inset 0 1px 0 rgba(255,255,255,0.45);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.ticket:hover {
    border: none !important;
    transform: translateY(-3px);
    box-shadow:
        6px 10px 20px rgba(0,0,0,0.19),
        -2px -2px 7px rgba(255,255,255,0.55),
        inset 0 1px 0 rgba(255,255,255,0.45);
}

/* ── Dragged card: full lift + slight tilt ─────────────────────── */
.mud-drop-item-dragging .ticket,
.mud-drop-item-dragging.ticket {
    transform: translateY(-8px) scale(1.03) rotate(1.5deg) !important;
    box-shadow: 0 22px 44px rgba(0,0,0,0.35), 0 8px 14px rgba(0,0,0,0.2) !important;
    opacity: 1 !important;
    border: none !important;
}

/* ── Workspace/role pill: debossed badge ───────────────────────── */
.pill {
    box-shadow:
        inset 0 2px 5px rgba(0,0,0,0.22),
        inset 0 -1px 0 rgba(255,255,255,0.18),
        0 1px 3px rgba(0,0,0,0.12);
}

/* ── Price stat cards: raised with coloured glow on hover ──────── */
.price-stat {
    border-radius: 12px !important;
    box-shadow:
        0 4px 16px rgba(0,0,0,0.11),
        0 1px 4px rgba(0,0,0,0.07),
        inset 0 1px 0 rgba(255,255,255,0.55);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.price-stat:hover {
    transform: translateY(-4px);
    box-shadow:
        0 10px 28px rgba(0,0,0,0.16),
        0 3px 8px rgba(0,0,0,0.09),
        inset 0 1px 0 rgba(255,255,255,0.55);
}
.price-stat-hi {
    box-shadow:
        0 4px 16px rgba(255,184,28,0.18),
        0 1px 4px rgba(255,184,28,0.1),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;
}
.price-stat-hi:hover {
    box-shadow:
        0 10px 28px rgba(255,184,28,0.28),
        0 3px 8px rgba(255,184,28,0.14),
        inset 0 1px 0 rgba(255,255,255,0.55) !important;
}

/* ── Priority queue rows: slide-right depth on hover ──────────── */
.pq-row {
    transition: transform 0.12s ease, box-shadow 0.12s ease, background 0.12s ease;
}
.pq-row:hover {
    transform: translateX(3px);
    box-shadow: 3px 0 10px rgba(0,0,0,0.09);
}

/* ── Price matrix: header depth + glow on active column ───────── */
.price-matrix thead th {
    text-shadow: 0 1px 1px rgba(0,0,0,0.12);
}
.price-matrix thead th.center {
    box-shadow: 0 3px 8px rgba(255,184,28,0.25);
}

/* ── Global MudCard depth uplift ──────────────────────────────── */
.mud-card {
    box-shadow: 0 4px 20px rgba(0,0,0,0.1), 0 1px 5px rgba(0,0,0,0.07) !important;
    transition: box-shadow 0.2s ease, transform 0.2s ease;
}
.mud-card:hover {
    box-shadow: 0 8px 32px rgba(0,0,0,0.15), 0 2px 8px rgba(0,0,0,0.09) !important;
    transform: translateY(-1px);
}

/* ── Projects screen cards ──────────────────────────────────────────
   AHK 2026-06-13: Fixed-size project cards. Every card uses one compact
   height instead of growing to fit its text, so the grid is uniform; the
   actions row stays pinned at the bottom and each text line is clipped to
   a single line with an ellipsis so nothing spills past the card edge.
   Adjust the height value below to make the cards taller/shorter. */
.project-card {
    height: 140px;
    display: flex;
    flex-direction: column;
    overflow: hidden;            /* clip anything that would extend past the card */
}
.project-card .mud-card-content {
    flex: 1 1 auto;
    min-height: 0;               /* let the content clip instead of stretching the card */
    overflow: hidden;
}
.project-card .mud-card-actions {
    flex: 0 0 auto;              /* design-count / date row keeps its height at the bottom */
}
/* Truncate each line of card text to one line + ellipsis (no wrap, no overflow) */
.project-card .mud-card-content .mud-typography {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}
/* The title shares its row with the optional "Archived" chip, so it must be
   allowed to shrink inside that flex row for the ellipsis to take effect. */
.project-card .pcard-name {
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Page entry animation ──────────────────────────────────────── */
@keyframes qps-page-enter {
    from { opacity: 0; transform: translateY(14px) scale(0.992); }
    to   { opacity: 1; transform: none; }
}
.page-content {
    /* AHK 2026-06-13: fill-mode is `backwards`, NOT `both`. With `both`/`forwards` the browser RETAINS the
       end keyframe and resolves the transform to an identity matrix(1,0,0,1,0,0) — and any transform other
       than the literal `none` establishes a containing block, which trapped position:fixed descendants: the
       Projects detail MudDrawer was sized to the page content (~340-492px) instead of the viewport, so most
       of a project's designs fell below the fold. `backwards` keeps the clean entry (starts at the `from`
       state, no flash) but lets transform revert to a true `none` after the animation — no containing block. */
    animation: qps-page-enter 0.28s cubic-bezier(0.25, 0.46, 0.45, 0.94) backwards;
}

/* ── Home page hero banner ─────────────────────────────────────── */
.home-hero {
    position: relative;
    border-radius: 14px;
    overflow: hidden;
    margin-bottom: 28px;
    background: linear-gradient(135deg, #1E1E1E 0%, #2a2a2a 55%, #1E1E1E 100%);
    box-shadow: 0 10px 36px rgba(0,0,0,0.32), 0 2px 8px rgba(0,0,0,0.18);
}
.home-hero::before {
    content: '';
    position: absolute;
    inset: 0;
    /* AHK 2026-06-15: the counter-glow was off-brand red; the QUIKRETE Brand Guidelines V5 palette has no
       red (Yellow/Black/Gray only), so it is now a subtle QUIKRETE Gray glow. The warm glow stays Yellow. */
    background:
        radial-gradient(ellipse at 18% 60%, rgba(255,184,28,0.17) 0%, transparent 58%),
        radial-gradient(ellipse at 82% 40%, rgba(168,177,183,0.10) 0%, transparent 55%);
    animation: hero-breathe 5s ease-in-out infinite alternate;
    pointer-events: none;
}
@keyframes hero-breathe {
    from { opacity: 0.65; }
    to   { opacity: 1; }
}
.home-hero::after {
    content: '';
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 18px,
        rgba(255,255,255,0.015) 18px,
        rgba(255,255,255,0.015) 19px
    );
    pointer-events: none;
}
.home-hero-content {
    position: relative;
    z-index: 1;
    padding: 28px 32px 26px;
}
.home-hero-tiles {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
}
.home-hero-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    background: rgba(255,255,255,0.07);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid rgba(255,255,255,0.11);
    border-radius: 11px;
    padding: 16px 26px;
    min-width: 140px;
    text-decoration: none !important;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22), inset 0 1px 0 rgba(255,255,255,0.09);
    transition: transform 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
    cursor: pointer;
}
.home-hero-tile:hover {
    transform: translateY(-4px);
    background: rgba(255,184,28,0.12);
    box-shadow: 0 10px 28px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,184,28,0.3), inset 0 1px 0 rgba(255,255,255,0.12);
}
.home-hero-tile-label {
    font-size: 12px;
    color: rgba(255,255,255,0.6);
    text-transform: uppercase;
    letter-spacing: 0.55px;
    font-weight: 500;
}

/* ── Light mode overrides ────────────────────────────────────────────────────
   AHK 2026-06-11: Scoped via .qps-light on <MudLayout> when dark mode is off.
   AHK 2026-06-15: brand-compliance pass — matches WPF LightTheme.xaml on the official QUIKRETE palette
   (Brand Guidelines V5): White / Light Gray surfaces, QUIKRETE Black #1E1E1E text, Yellow 100 #FFB81C accent.
   The home-hero banner intentionally stays dark (QUIKRETE Black) in both modes. */

/* App bar text: palette sets --mud-palette-appbar-text to #1E1E1E; hardcoded white needs override */
.qps-light .brand-title  { color: var(--mud-palette-appbar-text, #1E1E1E); }
.qps-light .brand-fallback { color: var(--mud-palette-primary, #FFB81C); }

/* App bar: much softer shadow on the light gray bar; shimmer stays gold, skip the white flash */
.qps-light .mud-appbar {
    box-shadow: 0 2px 10px rgba(0,0,0,0.10), 0 1px 0 rgba(255,184,28,0.45) !important;
}
.qps-light .mud-appbar::after {
    background: linear-gradient(90deg, transparent 0%, #FFB81C 38%, rgba(255,255,255,0.4) 50%, #FFB81C 62%, transparent 100%) !important;
    background-size: 200% 100% !important;
    opacity: 0.5;
}

/* Drawer: lighter shadow on the slate bg */
.qps-light .mud-drawer {
    box-shadow: 4px 0 16px rgba(0,0,0,0.09) !important;
}

/* Nav links: gold hover/active accent still works well on light gray */
.qps-light .mud-nav-link:hover {
    background: rgba(255,184,28,0.15) !important;
    box-shadow: inset 3px 0 0 rgba(255,184,28,0.85) !important;
}
.qps-light .mud-nav-link.active,
.qps-light .mud-nav-link[aria-current] {
    background: rgba(255,184,28,0.13) !important;
    box-shadow: inset 3px 0 0 #FFB81C !important;
}