/*
 * DHL Brand Theme Overrides
 * This file is conditionally loaded server-side ONLY for DHL/SSO users,
 * so all rules here apply exclusively to DHL users with no body-class prefix needed.
 *
 * DHL Brand Colors:
 *   Red:    #D40511
 *   Yellow: #FFCC00
 *   Black:  #000000
 *   White:  #FFFFFF
 */

/* =============================================
   CSS Variable Overrides
   ============================================= */
:root {
    --timeless-teal: #D40511;       /* Replaces Inmar teal with DHL red for accents */
    --deep-plum: #000000;           /* Replaces Inmar deep plum with DHL black */
    --summer-goldenrod: #FFCC00;    /* Already matches DHL yellow */
    --fiery-sunset: #D40511;        /* Replace orange accent with DHL red */
}

/* =============================================
   Navigation Bar
   ============================================= */

.portalnav {
    background-color: #FFCC00 !important;
}

.portalnav .portalnav__title {
    background-color: #FFCC00 !important;
}

/* DHL logo sizing */
.portalnav__title__logo > img {
    width: 6rem !important;
    margin-top: 22px !important;
    margin-left: 16px !important;
    margin-bottom: 22px !important;
}

.portalnav__title__text {
    border-left: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #000000 !important;
}

.portalnav__title__text,
.portalnav__title__text h1 {
    color: #000000 !important;
}

/* html prefix raises specificity to beat App_Themes (loaded after this file) */
html .text-timeless-teal {
    color: #D40511 !important;
}

html .text-fiery-sunset {
    color: #D40511 !important;
}

.portalnav > div.portalnav__content {
    background-color: #FFCC00 !important;
}

.portalnav > div.portalnav__content::after {
    background-color: #FFCC00 !important;
    border-left-color: #D40511 !important;
}

.portalnav > div.portalnav__content::before {
    background-color: #e6b800 !important;
    border-left-color: #FFCC00 !important;
    border-right-color: #D40511 !important;
}

.portalnav-user,
.portalnav-user.text-crisp-white {
    color: #000000 !important;
}

.portalnav__logout a,
.portalnav__logout .inm-button {
    color: #FFFFFF !important;
}

/* =============================================
   Navigation Menu
   ============================================= */
.menu-selected > a,
.menu .menu-selected > a:hover {
    background-color: #FFCC00 !important;
    color: #000000 !important;
}

.menu-item > a:hover {
    background-color: rgba(255, 204, 0, 0.2) !important;
    color: #000000 !important;
}

/* =============================================
   Grid Special Item (summary/total rows)
   ============================================= */
.GridSpecialItem,
div.GridSpecialItem {
    background-color: #D40511 !important;
    color: #FFFFFF !important;
}

span.GridSpecialItem {
    background-color: transparent !important;
    color: #FFFFFF !important;
}

/* =============================================
   Grid Header Item
   Must use higher specificity than App_Themes (injected after this file).
   Adding 'html' prefix raises specificity by 1 element to beat the base rules.
   Two selector variants needed:
   - table.Grid (grids with CssClass="Grid" e.g. MyVendors.aspx)
   - bare tr.GridHeaderItem (grids without CssClass="Grid" e.g. VendorList.aspx)
   ============================================= */
html tr.GridHeaderItem th,
html table.Grid tr.GridHeaderItem th {
    background-color: #F5F5F5 !important;
    color: #000000 !important;
    border-bottom: 2px solid #FFCC00 !important;  /* yellow accent line instead of full bg */
}

html tr.GridHeaderItem th a:link,
html tr.GridHeaderItem th a:visited,
html table.Grid tr.GridHeaderItem th a:link,
html table.Grid tr.GridHeaderItem th a:visited {
    color: #000000 !important;
}

html tr.GridHeaderItem th a:hover:not([disabled]),
html table.Grid tr.GridHeaderItem th a:hover:not([disabled]) {
    background-color: #D40511 !important;
    color: #FFFFFF !important;
}

/* =============================================
   Primary Buttons
   Used a.inm-button (specificity 0,1,1) to beat
   a:visited/a:link (0,1,0) colour rules below
   ============================================= */
.inm-button,
a.inm-button,
a.inm-button:link,
a.inm-button:visited,
a.inm-button:active,
input[type="submit"].inm-button,
input[type="submit"]:not([class]),
button.inm-button {
    background-color: #D40511 !important;
    border-color: #D40511 !important;
    color: #FFFFFF !important;
}

.inm-button:hover,
a.inm-button:hover,
input[type="submit"].inm-button:hover,
input[type="submit"]:not([class]):hover,
button.inm-button:hover {
    background-color: #a8040d !important;
    border-color: #a8040d !important;
    color: #FFFFFF !important;
}

.inm-button-secondary,
a.inm-button-secondary,
a.inm-button-secondary:link,
a.inm-button-secondary:visited,
a.inm-button-secondary:active {
    background-color: #FFFFFF !important;
    border: 2px solid #D40511 !important;
    color: #000000 !important;
}

a.inm-button-secondary:hover {
    background-color: #FFCC00 !important;
    color: #000000 !important;
}

#btnSSORegister {
    background-color: #FFCC00 !important;
    border-color: #FFCC00 !important;
    color: #000000 !important;
}

/* =============================================
   Content Text Color - DHL Black (#000000)
   Overrides hardcoded Inmar deep-plum (#303584)
   and teal (#03878C) hex fallbacks in base CSS
   ============================================= */

/* Base body text */
body {
    color: #000000 !important;
    background-color: #F5F5F5 !important;
}

/* Bold text */
b, strong {
    color: #000000 !important;
}

/* Links - use DHL red instead of Inmar plum */
a,
a:visited,
a:link,
a:active {
    color: #D40511 !important;
}

a:hover:not(.inm-button):not(.menu-item):not([disabled]) {
    color: #a8040d !important;
}

h1, h2, h3, h4, h5, h6, legend {
    color: #000000 !important;
}

/* Form inputs */
input:not([type=submit]):not([type=button]),
select {
    color: #000000 !important;
}

.inm-label,
[class^='inm-label--'],
[class*=' inm-label--'],
.inm-label__checkbox,
.smallType {
    color: #000000 !important;
}

/* =============================================
   Checkbox / Radio Colors
   Override all interactive states with DHL-neutral equivalents.
   ============================================= */
html input[type="checkbox"]:hover,
html input[type="radio"]:hover,
html input[type="checkbox"]:focus,
html input[type="radio"]:focus {
    background: #F5F5F5 !important;
    border-color: #CCCCCC !important;
    color: #000000 !important;
}

html input[type="checkbox"]:active,
html input[type="radio"]:active {
    background: #E0E0E0 !important;
    border-color: #AAAAAA !important;
    box-shadow: 0 0 0 0.1rem #AAAAAA inset !important;
    color: #000000 !important;
}

/* Replace the Inmar deep-plum SVG checkmark with a DHL-red version */
html input[type="checkbox"]:checked:before {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg version=%221.1%22 xmlns=%22http://www.w3.org/2000/svg%22 xmlns:xlink=%22http://www.w3.org/1999/xlink%22 x=%220%22 y=%220%22 viewBox=%220 0 35 35%22%3E %3Cpath fill=%22%23D40511%22 d=%22M31.1,0H3.9C1.7,0,0,1.7,0,3.9v27.2C0,33.3,1.7,35,3.9,35h27.2c2.1,0,3.9-1.7,3.9-3.9V3.9C35,1.7,33.3,0,31.1,0 z M27.3,13.6l-9.3,11.7c0,0,0,0.1-0.1,0.1c-0.2,0.2-0.5,0.3-0.7,0.3c-0.3,0-0.5-0.1-0.7-0.3c0,0-0.1-0.1-0.1-0.1l-6.3-5.7 c-0.4-0.4-0.4-1,0-1.4c0.4-0.4,1.1-0.4,1.6,0l5.5,5.2l8.6-11.2c0.4-0.4,1.1-0.4,1.5,0C27.7,12.5,27.7,13.2,27.3,13.6z%22/%3E %3C/svg%3E") !important;
    background-color: transparent !important;
    box-shadow: none !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    background-position: 50% 50% !important;
}

/* =============================================
   Page / Form Accent Colors
   ============================================= */
/* Use html prefix (+1 element specificity) so border-bottom shorthand beats App_Themes */
/* Only .pageName (outer container) gets the border; .pageNameLabel is the inner label
   and has no border in App_Themes — applying border to both causes a double line. */
html .pageName {
    border-bottom: .3rem solid #FFCC00 !important;
}

html .pageName,
html .pageNameLabel {
    color: #D40511 !important;
}

/* HR - App_Themes renders as background-color (border: none + height).
   Override background-color to DHL yellow with html prefix for specificity. */
html hr {
    background-color: #FFCC00 !important;
}

/* =============================================
   Modal Popup
   ============================================= */
html .modalpopup {
    color: #000000 !important;
    border-color: #CCCCCC !important;
}

html .modalBackground {
    background-color: #000000 !important;
}

/* =============================================
   Invoice Header Table (InvoiceHeader.master)
   ============================================= */
html table.invoice-header tr td {
    color: #000000 !important;
}

html table.invoice-header tr:first-of-type {
    background-color: #F5F5F5 !important;
    color: #000000 !important;
}

/* .highlight used for "invoices waiting authorization" banner —
   App_Themes sets fiery-sunset (Inmar orange). Use DHL red instead. */
html .highlight {
    color: #D40511 !important;
}

/* =============================================
   Tab Component Colors
   App_Themes uses var(--summer-goldenrod) for active tab top bar and
   var(--deep-plum) for hover tab top bar. :root overrides do not work
   because App_Themes :root loads after and resets the variables.
   Use html prefix + !important to win explicitly.
   ============================================= */

html .inm-tab-container {
    color: #000000 !important;
}

html .inm-tab-container .inm-tab-header a.inm-tab.selected::before,
html div.inm-tab-container .ajax__tab_active .ajax__tab_outer::before {
    border-top: 7px solid #FFCC00 !important;
    border-bottom: 3px solid #FFFFFF !important;
}

html .inm-tab-container .inm-tab-header a.inm-tab:hover::before,
html div.inm-tab-container .ajax__tab_hover .ajax__tab_outer::before {
    border-top: 7px solid #D40511 !important;
}

html div.inm-tab-container .ajax__tab_body,
html .inm-tab-container .ajax__tab_body {
    border-color: #CCCCCC !important;
}

html .inm-tab-container .inm-tab-header a.inm-tab::before,
html div.inm-tab-container .ajax__tab_header .ajax__tab_outer::before {
    border-top-color: #CCCCCC !important;
    border-left-color: #CCCCCC !important;
    border-right-color: #CCCCCC !important;
}

/* =============================================
   Login Page Layout - DHL
   Sticky footer pattern: stretch body→form chain
   to full viewport, wrapper fills remaining space.
   ============================================= */

/* Stretch body and the ASP.NET form to full viewport height */
html, body {
    height: 100% !important;
}

#aspnetForm {
    display: flex !important;
    flex-direction: column !important;
    min-height: 100% !important;
}

/* Nav stays its natural height */
.portalnav {
    flex-shrink: 0 !important;
}

#wrapper {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
    min-height: 0 !important;      /* prevent overflow */
}

table.content-card {
    flex: 1 !important;
}

table.content-card > tbody > tr > td:only-child,
table.content-card > tbody > tr > td:first-child:last-child {
    text-align: center !important;
    vertical-align: top !important;
    padding: 2rem 1rem !important;
}

/* Splash page uses the same table.content-card but should be left-aligned */
form#splash table.content-card > tbody > tr > td:only-child,
form#splash table.content-card > tbody > tr > td:first-child:last-child {
    text-align: left !important;
}

table.content-card > tbody > tr > td:only-child fieldset#login,
table.content-card > tbody > tr > td:first-child:last-child fieldset#login {
    display: inline-block !important;
    text-align: left !important;
}

/* =============================================
   Login Screen - SSO panel wrapper
   ============================================= */
.sso-login-container {
    border-top: 4px solid #D40511;
}

.dhl-sso-logo {
    color: #D40511;
}

/* =============================================
   Footer
   ============================================= */

/* Hide the Inmar branded footer */
.common-inmar-footer {
    display: none !important;
}

/* Show the DHL branded footer */
.common-dhl-footer {
    display: block !important;
}

/* =============================================
   SSO Migration Banner - DHL color override
   ============================================= */
#pnlSSOMigrationBanner div {
    background: linear-gradient(135deg, #D40511, #FFCC00) !important;
    color: #000000 !important;
}