/*
Custom UX Color Scheme CSS
Colors:
- #00A1DE - Headers and footers
- #003C71 - Headings, links, and call-to-action text
- #545F66 - Running text
*/

/* Header and Footer styles - #00A1DE */
.header-main,
#page-topbar,
.navbar-header,
.aside-main .aside-header {
    background-color: #00A1DE !important;
    border-color: #00A1DE !important;
}

/* Sidebar background */
.aside-main {
    background-color: #00A1DE !important;
}

/* Footer styles */
footer,
.footer,
.control-panel-footer {
    background-color: #00A1DE !important;
    color: white !important;
}

/* Headings, links, and call-to-action text - #003C71 */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
    color: #003C71 !important;
}

/* Links */
a,
.aside-main a,
.list-group-item-action,
.dropdown-item {
    color: #003C71 !important;
}

a:hover,
a:focus,
.aside-main a:hover,
.list-group-item-action:hover,
.dropdown-item:hover {
    color: #002751 !important; /* Darker shade for hover */
}

/* Buttons and CTA elements */
.btn-primary,
.btn-warning,
.btn-next,
.btn-add,
.btn-rates,
.pi_bookButtons {
    background-color: #003C71 !important;
    border-color: #003C71 !important;
    color: white !important;
}

.btn-primary:hover,
.btn-warning:hover,
.btn-next:hover,
.btn-add:hover,
.btn-rates:hover,
.pi_bookButtons:hover {
    background-color: #002751 !important;
    border-color: #002751 !important;
}

/* Page titles and section headers */
.control-panel h1,
.page-content h1,
.hero h1,
.box-title h3,
.ftitlew {
    color: #003C71 !important;
}

/* Navigation items */
.accordion-button,
.nav-link,
.navbar-nav .nav-link {
    color: #003C71 !important;
}

/* Running text - #545F66 */
body,
p,
.text-muted,
.form-control,
.table,
.content p,
.informSucces p {
    color: #545F66 !important;
}

/* Form labels */
label,
.form-label {
    color: #545F66 !important;
}

/* Table text */
.table th {
    color: #003C71 !important;
}

.table td {
    color: #545F66 !important;
}

/* Sidebar text - override for white text on blue background */
.aside-main,
.aside-main p,
.aside-main .list-group-item-action,
.aside-main .accordion-button {
    color: white !important;
}

.aside-main .list-group-item-action:hover,
.aside-main .accordion-button:hover {
    /*color: #f0f0f0 !important;*/
}

/* Alert and notification text */
.alert,
.notification-item {
    color: #545F66 !important;
}

/* Form control focus states */
.form-control:focus {
    border-color: #003C71 !important;
    box-shadow: 0 0 0 0.2rem rgba(0, 60, 113, 0.25) !important;
}

/* Active navigation states */
.nav-link.active,
.accordion-button:not(.collapsed) {
    /*background-color: #003C71 !important;
    color: white !important;*/
}

/* Dropdown menus */
.dropdown-menu {
    border-color: #003C71 !important;
}

/* Shipment summary footer (bottom bar in Create) */
.aside-pullout--shipment .aside-pullout__footer {
    background-color: #00A1DE !important; /* brand header/footer blue */
}
.aside-pullout--shipment .aside-pullout__footer p,
.aside-pullout--shipment .aside-pullout__footer strong {
    color: #FFFFFF !important; /* ensure contrast on blue */
}

/* Toggle (rates YES/NO) to brand CTA blue when checked */
.switch-box input:checked + label {
    background-color: #003C71 !important;
}


/* Card headers */
.card-header,
.box-header {
    background-color: #00A1DE !important;
    color: white !important;
}

.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.box-header h1,
.box-header h2,
.box-header h3,
.box-header h4,
.box-header h5,
.box-header h6 {
    color: white !important;
}

/* SVG icons in sidebar - keep white for visibility */
.aside-main svg path {
    fill: white !important;
}

/* Top bar icons */
.header-main .btn,
.header-main .dropdown-toggle {
    color: white !important;
}

.header-main h1 {
    color: white !important;
}

/* Breadcrumb and navigation elements */
.breadcrumb-item a {
    color: #003C71 !important;
}

/* Hero section text on blue background */
.hero h1,
.hero p {
    color: white !important;
}

/* Price section headings */
.price__section h1 {
    color: #003C71 !important;
}

/* ---------- Brand Theme Layer (no structural changes) ---------- */
:root{
  /* Brand bases (client-specified) */
  --brand-struct: #00A1DE;       /* header/footer, structural */
  --brand-accent: #003C71;       /* headings/links/CTAs */
  --text-body:    #545F66;       /* running text */

  /* Derived tints/shades (allowed) */
  --brand-struct-600: #008DC0;   /* shade (~15%) for hovers/gradients */
  --brand-struct-200: #33B4E4;   /* tint (~20%) for subtle fills */
  --brand-struct-50:  #E5F6FB;   /* very light tint for info panels */

  --brand-accent-600: #004F94;   /* lighter hover for accent */

  /* Neutrals (allowed) */
  --neutral-50:  #F8FAFB;        /* page bg / zebra rows */
  --neutral-200: #EAEAEA;        /* borders/dividers */
  /* Success palette for completion states */
  --success-bg:    #EAF7F0;      /* subtle green bg */
  --success-border:#BFE8D1;      /* green border */
  --success-fg:    #0F5132;      /* readable green text/icon */

  /* Utility */
  --white: #FFFFFF;
  --focus-accent-rgb: 0, 60, 113; /* rgb of #003C71 */
}

html, body{
  background: var(--neutral-50);
  color: var(--text-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Header & Footer */
.app-header, header.site, .navbar-primary{
  background: linear-gradient(180deg, var(--brand-struct), var(--brand-struct-600));
  color: var(--white);
}
.app-header a, .navbar-primary a{
  color: var(--white);
}
.app-footer, footer.site{
  background: var(--brand-struct);
  color: var(--white);
}

/* Create page bottom totals bar */
.footer-main{
  background: var(--brand-struct-50);
  border-top: 1px solid var(--neutral-200);
  padding: .5rem 1rem;
}
.footer-main h2{ font-size: 14px; font-weight: 500; color: var(--text-body); }
.footer-main p{ font-size: 14px; }
.footer-main p strong{ color: var(--brand-accent); font-weight: 600; }
.footer-main .ml-3 h2{ color: var(--text-body); }

/* Sidebar */
.sidebar, .nav-vertical{
  background: var(--brand-struct);
  color: var(--white);
}
.sidebar .nav-link, .nav-vertical .nav-link{
  color: var(--white);
}
.sidebar .nav-link:hover, .nav-vertical .nav-link:hover{
  background: var(--brand-struct-600);
}
.sidebar .nav-link.active{
  background: var(--white);
  color: var(--brand-accent);
  border-radius: .5rem;
}

/* Headings & Links */
h1, h2, h3, h4, h5, h6,
.section-title, .card-title{
  color: var(--brand-accent) !important;
}
a, .link, .table a{
  color: var(--brand-accent) !important;
  text-decoration: none;
}
a:hover, .link:hover, .table a:hover{
  color: var(--brand-accent-600) !important; /* replace previous #002751 */
  text-decoration: underline;
}
a:focus-visible{
  outline: 2px solid rgba(var(--focus-accent-rgb), .35);
  outline-offset: 2px;
}

/* Cards / Panels */
.card, .panel, .widget{
  background: var(--white);
  border: 1px solid var(--neutral-200);
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(var(--focus-accent-rgb), .06);
}
.card-header{
  background: linear-gradient(180deg, var(--neutral-50), var(--white));
  border-bottom: 1px solid var(--neutral-200);
}
.stat .value, .metric .value{
  color: var(--brand-accent);
  font-weight: 700;
}

/* Tabs */
.nav-tabs .nav-link{
  color: var(--brand-accent);
  border: none;
}
.nav-tabs .nav-link:hover{
  color: var(--brand-accent-600);
}
.nav-tabs .nav-link.active{
  border-bottom: 3px solid var(--brand-accent);
  background: var(--neutral-50);
  color: var(--brand-accent);
}

/* Buttons */
.btn-primary, .btn-cta, .button-primary{
  background: var(--brand-accent) !important;
  color: var(--white) !important;
  border: 1px solid var(--brand-accent) !important;
}
.btn-primary:hover, .btn-cta:hover, .button-primary:hover{
  background: var(--brand-accent-600) !important;
  border-color: var(--brand-accent-600) !important;
}
.btn-outline-primary{
  color: var(--brand-accent) !important;
  border: 1px solid var(--brand-accent) !important;
  background: transparent !important;
}
.btn-outline-primary:hover{
  background: var(--brand-accent) !important;
  color: var(--white) !important;
}
.btn-struct{
  background: var(--brand-struct) !important;
  color: var(--white) !important;
  border: 1px solid var(--brand-struct-600) !important;
}
.btn-struct:hover{
  background: var(--brand-struct-600) !important;
}
.btn:disabled, .btn.disabled{ opacity: .65; pointer-events:none; }

/* Focus states (accessible) */
:focus-visible, .btn:focus, .form-control:focus, .nav-link:focus{
  outline: 2px solid rgba(var(--focus-accent-rgb), .35) !important;
  outline-offset: 2px !important;
  box-shadow: 0 0 0 3px rgba(var(--focus-accent-rgb), .25) !important;
}

/* Forms */
.form-control, .input, input[type="text"], input[type="search"], select, textarea{
  color: var(--text-body);
  background: var(--white);
}
.form-control:focus{ border-color: var(--brand-accent) !important; }

/* Select2: improve readability and selection states */
.select2-container--default .select2-results__option{ color: var(--text-body); }
/* Selected item inside dropdown (persisted selection) */
.select2-container .select2-results__option[aria-selected=true]{
  background-color: var(--brand-struct) !important; /* #00A1DE */
  color: var(--white) !important;
}
/* Hover/focus item while navigating the list */
.select2-container--default .select2-results__option--highlighted{
  background-color: var(--brand-accent) !important; /* #003C71 */
  color: var(--white) !important;
}
/* Closed selection text color */
.select2-container--default .select2-selection--single .select2-selection__rendered{
  color: var(--text-body) !important;
}
/* Placeholder tone inside selection */
.select2-container--default .select2-selection--single .select2-selection__placeholder{
  color: #6B7280 !important; /* neutral gray for placeholders */
}

/* Tables */
.table thead th{
  color: var(--brand-accent);
  border-bottom: 2px solid var(--neutral-200);
  font-weight: 600;
  background: var(--white);
}
.table tbody tr:nth-child(odd),
.table.table-striped tbody tr:nth-child(odd){ background: var(--neutral-50); }
.table-hover tbody tr:hover{ background: var(--neutral-50); }
.table td, .table th{ color: var(--text-body); border-color: var(--neutral-200); }
/* First column (icon + number) readability */
#card-latest-shipment .dashboard-table td,
#card-latest-invoices .dashboard-table td{ color: var(--text-body) !important; }
#card-latest-shipment .dashboard-table td:first-child span,
#card-latest-invoices .dashboard-table td:first-child span{
  color: var(--text-body) !important;
  font-weight: 400 !important;
}
#card-latest-shipment .dashboard-table td:first-child .btn.btn-primary,
#card-latest-invoices .dashboard-table td:first-child .btn.btn-primary{
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent-600) !important;
  color: var(--white) !important;
}
#card-latest-shipment .dashboard-table td:first-child .btn.btn-primary i,
#card-latest-invoices .dashboard-table td:first-child .btn.btn-primary i{ color: var(--white) !important; }

/* Right rail / lists */
.aside, .right-rail{ background: var(--white); border: 1px solid var(--neutral-200); border-radius: 12px; }
.list-row{ border-bottom: 1px solid var(--neutral-200); }
.list-row:last-child{ border-bottom: 0; }

/* Sidebar text hover cleanup (remove disallowed grey) */
.aside-main .list-group-item-action:hover,
.aside-main .accordion-button:hover{
    /*color: var(--brand-accent) !important;*/
}

/* Tracking widget: replace green with brand-aligned tint */
    .dashboard-wrapper .col-xl-5 > .card.bg-primary{
  background: var(--brand-struct-50) !important;
  border-left: 4px solid var(--brand-struct) !important;
  border-radius: 12px !important;
}
.dashboard-wrapper .col-xl-5 > .card.bg-primary .text-white{
  color: var(--brand-accent) !important;
}
#trackOrderWidgetBtn{
  background: var(--brand-accent) !important;
  border-color: var(--brand-accent) !important;
  color: var(--white) !important;
}

/* Pills / badges */
.badge-primary{ background: var(--brand-accent) !important; color: var(--white) !important; }

/* Pagination */
.pagination .page-link{ color: var(--brand-accent); border-color: var(--neutral-200); background: var(--white); }
.pagination .page-link:hover{ color: var(--brand-accent-600); background: var(--neutral-50); }
.pagination .page-item.active .page-link{ color: var(--white) !important; background: var(--brand-accent); border-color: var(--brand-accent); }

/* Dropdowns */
.dropdown-menu{ border: 1px solid var(--neutral-200); border-radius: 12px; }
.dropdown-item{ color: var(--text-body); }
.dropdown-item:hover, .dropdown-item:focus{ color: var(--brand-accent); background: var(--neutral-50); }

/* Page-level spacing polish */
.section + .section{ margin-top: 1.25rem; }
/* Remove generic card stacking margin to avoid breaking dashboard layouts */
.card + .card{ margin-top: 0; }

/* Icons spacing */
i, .icon{ vertical-align: middle; }
.btn i:first-child{ margin-right: .5rem; }

/* Ensure the big “Send Shipment” menu item reads as active CTA */
.sidebar .cta{ background: var(--white); color: var(--brand-accent); font-weight: 600; border-radius: .75rem; }
.sidebar .cta:hover{ background: var(--neutral-50); }

/* ---------- Clarity-first (light sidebar) overrides ---------- */
.main-shell{ background: var(--neutral-50); }

/* Turn sidebar light while header/footer carry brand weight */
.aside-main, .sidebar, .nav-vertical{
  background: var(--white) !important;
  color: var(--brand-accent) !important;
  border-right: 1px solid var(--neutral-200) !important;
}
.aside-main .logo, .aside-main .brand,
.sidebar .logo, .sidebar .brand{ color: var(--brand-struct) !important; }

.aside-main .nav-link, .sidebar .nav-link, .nav-vertical .nav-link{
  color: var(--brand-accent) !important;
  border-radius: 10px !important;
  padding: .6rem .9rem !important;
}
.aside-main .nav-link:hover, .sidebar .nav-link:hover, .nav-vertical .nav-link:hover{
  background: var(--neutral-50) !important;
}
.aside-main .nav-link.active, .sidebar .nav-link.active, .nav-vertical .nav-link.active{
  background: var(--brand-struct-50) !important;
  border-left: 3px solid var(--brand-struct) !important;
  color: var(--brand-accent) !important;
}

/* Ensure sidebar text/icons use accent on light canvas */
.aside-main, .aside-main p,
.aside-main .list-group-item-action,
.aside-main .accordion-button{ color: var(--brand-accent) !important; }
.aside-main svg path{ fill: var(--brand-accent) !important; }

/* Header alias if markup uses .header */
.header{
  background: linear-gradient(180deg, var(--brand-struct), var(--brand-struct-600));
  color: var(--white);
}

/* Airy sidebar logo tile */
.sidebar-brand,
.aside-main .aside-header{
  background: var(--white) !important;
  padding: 1rem 1.25rem !important;
  border-bottom: 1px solid var(--neutral-200) !important;
}
.sidebar-brand img,
.sidebar-brand .logo,
.aside-main .aside-header .logo{
  height: 28px;
  display: block;
}

/* ---------- Dashboard-specific fixes ---------- */
/* Top tab strip card should blend into page canvas */
.dashboard-wrapper > .row > .col-12 > .card{
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
.card-body-gray{
    background: var(--neutral-50) !important; /* match page bg */
}

/* Ensure tab panes don’t overlap; rely on Bootstrap behavior if present */
.tab-content > .tab-pane{ display: none; }
.tab-content > .active, .tab-content > .show.active{ display: block; }

/* Latest Shipments: remove artificial scroll/height limits */
#card-latest-shipment .table-responsive[data-simplebar]{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}

/* Invoices: present as a section, not a nested scroll panel */
#card-latest-invoices .table-responsive[data-simplebar]{
  max-height: none !important;
  height: auto !important;
  overflow: visible !important;
}
#card-latest-invoices{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* Manifest: flatten the inner card visuals */
#manifest .card.bookDetails__content-body{
  border: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

/* ---------- Palette enforcement and header cleanup ---------- */
/* Ensure all card headers are white with visible text per palette */
.card-header, .box-header{
  background: var(--white) !important;
  color: var(--text-body) !important;
}
.card-header .card-title,
.card-header h1, .card-header h2, .card-header h3, .card-header h4, .card-header h5, .card-header h6,
.box-header h1, .box-header h2, .box-header h3, .box-header h4, .box-header h5, .box-header h6{
  color: var(--brand-accent) !important; /* headings in headers */
}

/* Page canvas should remain light; avoid white wrappers overriding it */
.page-content, .content, .main-content, .app-content{
  background: var(--neutral-50) !important;
}

/* Reduce visual layering inside dashboard card decks */
.dashboard-wrapper .card-deck > .card{
  box-shadow: none !important;
}

/* ---------- Invoice status badges (outline by default; accent stripe + shadow for Open) ---------- */
#card-latest-invoices .badge{ border-radius: 999px; padding: .35rem .6rem; font-weight: 600; background: #FFFFFF !important; }
/* Default: accent outline */
#card-latest-invoices .badge{ border: 1px solid var(--brand-accent) !important; color: var(--brand-accent) !important; }
/* Paid: structural outline */
#card-latest-invoices .badge-success{ border-color: var(--brand-struct-200) !important; color: var(--brand-accent) !important; box-shadow: none !important; }
/* Open/Outstanding: accent outline + thin left stripe + subtle shadow/underline (brand-only) */
#card-latest-invoices .badge-danger,
#card-latest-invoices .badge-warning{ position: relative; border-color: var(--brand-accent) !important; color: var(--brand-accent) !important; box-shadow: 0 1px 0 rgba(var(--focus-accent-rgb), .15), 0 0 0 2px rgba(var(--focus-accent-rgb), .05); }
#card-latest-invoices .badge-danger::before,
#card-latest-invoices .badge-warning::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-accent-600); border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
#card-latest-invoices .badge-danger,
#card-latest-invoices .badge-warning{ box-shadow: inset 0 -2px 0 0 var(--brand-accent-600), 0 1px 0 rgba(var(--focus-accent-rgb), .15), 0 0 0 2px rgba(var(--focus-accent-rgb), .05); }

/* Extra-specific override in the Invoices tab to ensure it wins */
#invoices .badge{ background: #FFFFFF !important; border: 1px solid var(--brand-accent) !important; color: var(--brand-accent) !important; border-radius: 999px; padding: .35rem .6rem; position: relative; }
#invoices .badge-danger, #invoices .badge-warning{ padding-left: .9rem !important; }
#invoices .badge-danger::before, #invoices .badge-warning::before{ content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand-accent-600); border-top-left-radius: 999px; border-bottom-left-radius: 999px; }
#invoices .badge-danger::after, #invoices .badge-warning::after{ content: ""; position: absolute; left: .6rem; right: .6rem; bottom: 2px; height: 2px; background: var(--brand-accent-600); opacity: .35; border-radius: 1px; }

/* ---------- Simple status colors per request (overrides) ---------- */
#invoices .badge{ background:#FFFFFF !important; color: var(--text-body) !important; border-radius:999px; padding:.35rem .6rem; }
#invoices .badge-danger, #invoices .badge-warning{ border:2px solid #DC3545 !important; color: var(--text-body) !important; box-shadow:none !important; }
#invoices .badge-success{ border:2px solid #28A745 !important; color: var(--text-body) !important; box-shadow:none !important; }
#invoices .badge-danger::before, #invoices .badge-warning::before, #invoices .badge-danger::after, #invoices .badge-warning::after{ content:none !important; }
/* Make badge text normal weight */
#invoices .badge{ font-weight: 400 !important; }

/* ---------- Tabs hover/active underline fixes ---------- */
.create-shipment-nav .nav-link,
#nav-tab .nav-link{
  color: var(--brand-accent) !important;
  text-decoration: none !important;
  box-shadow: none !important;
  border-bottom: 0 !important;
  background-image: none !important;
}
.create-shipment-nav .nav-link:hover,
#nav-tab .nav-link:hover{
  color: var(--brand-accent-600) !important;
  box-shadow: inset 0 -2px 0 0 var(--brand-accent) !important; /* brand underline on hover */
}
/* Active tab: brand background with white text; no green line */
.create-shipment-nav .nav-link.active,
#nav-tab .nav-link.active{
  background: var(--brand-accent) !important;
  color: var(--white) !important;
  box-shadow: none !important;
}
/* Nuke any pseudo-element underlines from vendor CSS */
.create-shipment-nav .nav-link::after,
#nav-tab .nav-link::after,
.create-shipment-nav .nav-link::before,
#nav-tab .nav-link::before{ content: none !important; background: transparent !important; box-shadow: none !important; }

/* ---------- Step Pills (Create Shipment wizard) ---------- */
/* Base pill for both new .step-pill and existing .step markup */
.step-pill,
.step-container .step{
  background: var(--neutral-50);
  border: 1px solid var(--neutral-200);
  color: var(--text-body);
  border-radius: 999px;
  padding: .5rem .9rem;
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
}
.step-container{ display:flex; align-items:center; justify-content:center; gap: 12px; }
/* Success/completed state */
.step-pill.is-complete,
.step-container .step.completed{
  background: var(--success-bg);
  border-color: var(--success-border);
  color: var(--success-fg);
}
/* Tick/Icons inside pill */
.step-pill .icon,
.step-container .step .tick-mark{
  width: 20px; height: 20px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--neutral-50);
  color: var(--text-body);
}
.step-pill.is-complete .icon,
.step-container .step.completed .tick-mark{
  background: var(--success-fg);
  color: var(--white);
}
.arrowForNavigation{ color: var(--text-body); opacity:.7; }
.arrowForNavigation::before{ content: '>'; }
/* Back-compat: explicit valid/invalid helpers on tick */
.step-container .step .valid-tick{ background: var(--success-fg); color: var(--white); }
.step-container .step .invalid-tick{ background: var(--neutral-50); color: var(--text-body); }

/* ---------- Card Panel Header (override green legacy) ---------- */
.card-panel .card-panel-header{
  background: var(--brand-struct-50) !important; /* replace #CAE1D5 */
  border-bottom: 3px solid var(--brand-accent) !important; /* replace #50A574 */
}
.card-panel .card-panel-header .numb{
  background-color: var(--brand-accent) !important; /* replace #50A574 */
  color: var(--white) !important;
}
.card-panel .card-panel-header .list a{
  color: var(--brand-accent) !important;
}