/* Vantage Fee Protect Branding */
:root {
    --vantage-dark-green: #044123;
    --vantage-alt-green: #055C32;
    --vantage-bright-green: #AAFC74;
    --vantage-off-white: #FAFBF2;
    --vantage-charcoal: #252525;
}

/* DR-280: dashboard action tiles — subtle lift on hover, consistent with the card language */
.dashboard-tile {
    transition: box-shadow .15s ease, transform .15s ease;
}
.dashboard-tile:hover {
    box-shadow: 0 4px 16px rgba(4, 65, 35, 0.18);
    transform: translateY(-2px);
}

/* DR-187 / DR-189 / DR-193 (Gemma, 19 Aug): the AddVantage benefit cards were solid dark green,
   which made the partner logos invisible — every one of those assets is dark-on-transparent artwork
   (Vantage HR and Vantage Fee Protect are #044123, ICPA #181818, HMRC navy, YesTax pink). Cards are
   now transparent with dark-green text and a thin dark-green outline, so each logo reads on the
   off-white page background exactly as its brand supplies it. Reuses the .dashboard-tile hover
   language since the cards are clickable. */
.addvantage-card {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    background-color: transparent;
    color: var(--vantage-dark-green);
    border: 1px solid var(--vantage-dark-green);
    transition: box-shadow .15s ease, transform .15s ease;
}

.addvantage-card:hover {
    box-shadow: 0 4px 16px rgba(4, 65, 35, 0.18);
    transform: translateY(-2px);
}

/* DR-226: reduce the orders-list grid text size AND cell padding so all columns fit without
   horizontal overflow/wrapping on smaller-resolution (e.g. 720p) monitors. Scoped to the orders
   grid only. MudBlazor's dense rule ('.mud-table-dense * .mud-table-row .mud-table-cell') sets
   padding-inline-start:16px / padding-inline-end:24px, so we match its specificity and override
   the logical padding, not just left/right. */
.orders-grid-compact.mud-data-grid .mud-table-row .mud-table-cell,
.orders-grid-compact.mud-data-grid .mud-table-head .mud-table-cell {
    font-size: 0.72rem;
    padding: 6px 2px;
    padding-inline-start: 2px;
    padding-inline-end: 2px;
}
.orders-grid-compact.mud-data-grid .mud-table-head .mud-table-cell {
    font-weight: 600;
}

/* DR-226: on narrower viewports (e.g. 720p) let the orders-grid toolbar controls wrap onto
   multiple lines instead of squishing into one fixed-height row. The MudSpacers are only there
   to spread the row on wide screens, so drop them here and flow the controls with a small gap. */
@media (max-width: 1280px) {
    .orders-grid-compact .mud-toolbar {
        flex-wrap: wrap;
        height: auto;
        gap: 8px;
        padding-top: 8px;
        padding-bottom: 8px;
    }
    .orders-grid-compact .mud-toolbar .mud-spacer {
        display: none;
    }
    /* ...except the one before Refresh — keep it so the button stays separated when wrapped. */
    .orders-grid-compact .mud-toolbar .mud-spacer.toolbar-keep-spacer {
        display: block;
        flex-grow: 1;
    }
    /* Keep the filter dropdowns readable when they wrap. */
    .orders-grid-compact .mud-toolbar .mud-select {
        min-width: 200px;
    }
}

/* Headings should be Dark Green on light backgrounds */
.mud-typography-h1,
.mud-typography-h2,
.mud-typography-h3,
.mud-typography-h4,
.mud-typography-h5,
.mud-typography-h6 {
    color: var(--vantage-dark-green);
}

/* Tertiary heading override - ensures headings using Color.Tertiary are dark green on light bg */
.mud-typography-h1.mud-tertiary-text,
.mud-typography-h2.mud-tertiary-text,
.mud-typography-h3.mud-tertiary-text,
.mud-typography-h4.mud-tertiary-text,
.mud-typography-h5.mud-tertiary-text,
.mud-typography-h6.mud-tertiary-text {
    color: var(--vantage-dark-green) !important;
}

/* Tertiary link override - ensures links using Color.Tertiary are dark green on light bg */
.mud-link.mud-tertiary-text {
    color: var(--vantage-dark-green) !important;
}
.mud-link.mud-tertiary-text:hover {
    color: var(--vantage-alt-green) !important;
}

/* Body text on dark backgrounds should be Off White */
.mud-drawer .mud-typography,
.mud-appbar .mud-typography {
    color: var(--vantage-off-white);
}

/* Icons and buttons should use Bright Green hover */
.mud-icon-button:hover {
    background-color: rgba(170, 252, 116, 0.15);
}

/* AddVantage content body - properly contains iframes with absolute positioning */
.AddVantage-content-body {
    position: relative;
    width: 100%;
    min-height: 800px;
}

/* Handle iframes within content body */
.AddVantage-content-body iframe {
    position: relative !important;
    width: 100% !important;
    height: 800px !important;
    left: auto !important;
    top: auto !important;
    border: none;
}

/* Social links bar in drawer */
.mud-drawer .mud-paper {
    background-color: transparent !important;
}

/* DR-187 (Gemma, 19 Aug): drawer social icons back to lime. Lime on the dark-green drawer is the
   intended brand accent; DR-189's illegibility complaint was about lime on LIGHT surfaces. */
.mud-drawer .mud-icon-button {
    color: var(--vantage-bright-green);
}

/* DR-187: nav group headings and sub-headings in lime ("Clients & Policies" → "Clients"/"Orders"/
   "Statements"). MudBlazor renders a group header as .mud-nav-group > .mud-nav-link, so this hits
   every nesting level while leaf links (.mud-nav-item .mud-nav-link) keep the off-white drawer text. */
.mud-drawer .mud-nav-group > .mud-nav-link > .mud-nav-link-text {
    color: var(--vantage-bright-green) !important;
}

/* DR-189: active/selected nav item — off-white text/icon with a subtle translucent highlight so the
   selection is still distinguishable without lime. */
.mud-drawer .mud-nav-link.active,
.mud-drawer .mud-navmenu .mud-nav-link.active {
    color: var(--vantage-off-white) !important;
    background-color: rgba(250, 251, 242, 0.14);
}

.mud-drawer .mud-nav-link.active .mud-nav-link-text,
.mud-drawer .mud-navmenu .mud-nav-link.active .mud-nav-link-text {
    color: var(--vantage-off-white) !important;
    font-weight: 600;
}

/* DR-187: the active row no longer overrides its icon — icons are lime drawer-wide (theme
   DrawerIcon), so the selected item is marked by the bold off-white text + translucent highlight
   above rather than by a different icon colour. */