/* ============================================================
   SkyFiori - OCEAN BLUE PALETTE (shared by all portals)
   #03045E  navy   -> headings, nav background, dark panels
   #0077B6  blue   -> primary buttons, links, active states
   #00B4D8  cyan   -> accent, gradients, highlights
   #90E0EF  sky    -> hover/focus borders, soft badges
   #CAF0F8  ice    -> light fills, selected rows, soft backgrounds
   Loaded AFTER each portal's own CSS. Change a colour once here
   and every portal follows.
   ============================================================ */
:root{
  --pal-navy:#03045E; --pal-blue:#0077B6; --pal-cyan:#00B4D8; --pal-sky:#90E0EF; --pal-ice:#CAF0F8;
  --pal-blue-dark:#005F92;

  --primary:var(--pal-blue);
  --primary-hover:var(--pal-blue-dark);
  --primary-light:#E6F7FC;
  --primary-100:var(--pal-ice);
  --accent:var(--pal-cyan);
  --accent-soft:var(--pal-ice);
  --ink:var(--pal-navy);
  --navbg:var(--pal-navy);
  --bg:#F0F9FC;
  --border:#D3EAF3;
  --border-soft:#E3F1F7;
  --info-card:#F5FBFD;
  --text-main:#0B1F4D;
  --text-muted:#5A7184;
  --text-faint:#8AA2B5;

  /* login page tokens */
  --sky-blue:var(--pal-blue);
  --sky-navy:var(--pal-navy);
  --sky-cyan:var(--pal-cyan);
}

html{ background-color:#E6F7FC; }

/* ---------- PAGE BACKGROUND: ocean wash with a deep-navy touch (all portals except login) ---------- */
@media screen{
  body:not(.login-page){
    background-color:var(--bg);
    background-image:
      radial-gradient(900px 420px at 100% -60px, rgba(0,180,216,.16), transparent 70%),
      radial-gradient(800px 380px at -8% 0, rgba(144,224,239,.40), transparent 70%),
      radial-gradient(1100px 520px at 50% 118%, rgba(3,4,94,.14), transparent 72%),
      linear-gradient(180deg, #DDF4FA 0, #EAF8FC 320px, #D6EAF3 100%);
    background-repeat:no-repeat;
    background-attachment:fixed;
  }
}

/* ---------- TOP NAV BAR: solid sky #90E0EF ---------- */
body .topnav, body .top-navbar{
  background:var(--pal-sky);
  border-bottom:1px solid rgba(3,4,94,.28);
  box-shadow:0 10px 24px -14px rgba(3,4,94,.55);
}

/* ---------- NAV TABS (solid colours, no gradient) ---------- */
body .nav-pill, body .nav-link, body .nav-link-item, body .nav-drop-btn{ color:var(--pal-navy); }
body .nav-pill:not(.active):hover, body .nav-link:not(.active):hover,
body .nav-link-item:not(.active):hover, body .nav-drop-btn:not(.active):hover{
  background:var(--pal-ice);
  color:var(--pal-navy);
  box-shadow:none;
}
/* active navigation tab: solid navy so it stands out on the sky bar */
.nav-pill.active,.nav-link.active,.nav-link-item.active,.nav-drop-item.active{
  background:var(--pal-navy) !important;
  color:#fff !important;
  box-shadow:0 6px 14px -8px rgba(3,4,94,.6);
}

:focus-visible{ outline:2px solid var(--pal-cyan); outline-offset:2px; }
::selection{ background:var(--pal-ice); color:var(--pal-navy); }

/* ============================================================
   TAG / CHIP SHAPE - not fully round (all portals)
   PRO# tags (BCL-0003), company / carrier names, IER, wheels and lane tags
   use a soft rounded rectangle instead of a 999px pill,
   so long names that wrap onto two lines no longer look like a blob.
   Change --chip-radius once to make them rounder (14px) or squarer (6px).
   Status pills and notification count bubbles stay round on purpose.
   ============================================================ */
:root{ --chip-radius:10px; --chip-radius-sm:8px; }
body .badge-pro,
body .ier-badge, body .tracker-ier-badge, body .wheels-badge,
body .badge-lane-green, body .badge-lane-orange, body .badge-lane-red,
body .tc-chip{ border-radius:var(--chip-radius-sm); }
body .badge-carrier{ border-radius:var(--chip-radius); line-height:1.35; max-width:100%; }
body .booking-pro-badge{ border-radius:var(--chip-radius); }