/* ─────────────────────────────────────────────────────────────
   LogistiFactor — app.html visual redesign (Tracker page first).
   Pure additive CSS layer: no JS/markup/IDs touched, nothing here
   changes behavior — only typography, color, and motion.
   Unifies with the /tms/ "Relay" look: Poppins + JetBrains Mono,
   orange accent (#e9620c) on near-black.
───────────────────────────────────────────────────────────── */

/* ── Global design-token override ────────────────────────────
   style.css defines --accent/--display/--mono/etc. and nearly every
   page (including the inline-styled ones: Hub, Risk, 3PL) reads them
   via var(--accent) etc. Overriding the tokens here recolors/refonts
   the WHOLE app consistently without touching any app.js logic. */
:root {
  --accent: #e9620c;
  --accent2: #3b8fe8;
  --accent3: #4be89a;
  --display: 'Space Grotesk', 'DM Sans', sans-serif;
  --mono: 'JetBrains Mono', 'DM Mono', monospace;
}
html.light {
  --accent: #c9490a;
  --display: 'Space Grotesk', 'DM Sans', sans-serif;
  --mono: 'JetBrains Mono', 'DM Mono', monospace;
}

:root {
  --lf-accent: #e9620c;
  --lf-accent-ink: #ffffff;
  --lf-bg: #05070a;
  --lf-card: #0d1118;
  --lf-card-2: #121722;
  --lf-border: rgba(255,255,255,.08);
  --lf-ink: #e8edf2;
  --lf-ink-2: #9aa7b4;
  --lf-ink-3: #6b7784;
  --lf-font-display: 'Space Grotesk', 'DM Sans', sans-serif;
  --lf-font-mono: 'JetBrains Mono', 'DM Mono', monospace;
}

body {
  background-color: var(--lf-bg) !important;
  font-family: 'DM Sans', sans-serif;
}

/* ── Top nav ─────────────────────────────────────────────── */
.nav-brand {
  font-family: var(--lf-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.nav-tabs { gap: 2px; }

.nav-tab {
  position: relative;
  font-family: var(--lf-font-display);
  font-size: 13.5px;
  transition: color .2s ease, background .2s ease;
  border-radius: 8px;
}
.nav-tab::after {
  content: '';
  position: absolute;
  left: 10px; right: 10px; bottom: 2px;
  height: 2px;
  background: var(--lf-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .25s cubic-bezier(.17,.84,.44,1);
}
.nav-tab.active::after { transform: scaleX(1); }
.nav-tab.active { color: var(--lf-accent-ink) !important; background: var(--lf-accent) !important; }
.nav-tab:hover:not(.active) { background: rgba(255,255,255,.06); }

/* ── KPI stat bar ────────────────────────────────────────── */
/* ── Tracker page — same photo-hero + ambient glow as Dashboard ── */
#trackerPage {
  position: relative;
  isolation: isolate;
  padding-top: 112px;
}
#trackerPage::after {
  content: '';
  position: absolute;
  top: -60px; right: -10%;
  width: 55%; height: 300px;
  background: radial-gradient(ellipse at center, rgba(233,98,12,.18), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
#trackerPage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 92px;
  border-radius: 16px;
  background:
    linear-gradient(100deg, rgba(5,7,10,.92) 15%, rgba(5,7,10,.4) 65%, rgba(5,7,10,.1) 100%),
    url('/media/hero-port.jpg') center 35% / cover no-repeat;
  box-shadow: 0 16px 40px -24px rgba(0,0,0,.6);
  z-index: -1;
}
@media (max-width: 900px) {
  #trackerPage { padding-top: 90px; }
  #trackerPage::before { height: 72px; }
}

/* ── All Shipments (table) page ─────────────────────────── */
#overviewPage {
  position: relative;
  isolation: isolate;
  padding-top: 112px;
}
#overviewPage::after {
  content: '';
  position: absolute;
  top: -60px; left: -10%;
  width: 55%; height: 300px;
  background: radial-gradient(ellipse at center, rgba(233,98,12,.16), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}
#overviewPage::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 92px;
  border-radius: 16px;
  background:
    linear-gradient(100deg, rgba(5,7,10,.92) 15%, rgba(5,7,10,.4) 65%, rgba(5,7,10,.1) 100%),
    url('/media/warehouse.jpg') center 40% / cover no-repeat;
  box-shadow: 0 16px 40px -24px rgba(0,0,0,.6);
  z-index: -1;
}
@media (max-width: 900px) {
  #overviewPage { padding-top: 90px; }
  #overviewPage::before { height: 72px; }
}

#overviewGrid table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}
#overviewGrid thead th {
  font-family: var(--lf-font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lf-ink-3);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#overviewGrid tbody tr {
  transition: background .15s ease;
}
#overviewGrid tbody tr:hover {
  background: rgba(233,98,12,.06);
}
#overviewGrid tbody tr td {
  border-bottom: 1px solid rgba(255,255,255,.05);
}
#overviewGrid tbody tr:last-child td { border-bottom: none; }

/* ── Costs / Trash / Reports — same table-grid treatment ── */
#costsGrid table, #trashGrid table, #reportContent table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  background: rgba(255,255,255,.03);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: 14px;
  overflow: hidden;
}
#costsGrid thead th, #trashGrid thead th, #reportContent thead th {
  font-family: var(--lf-font-mono);
  font-size: 10.5px;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--lf-ink-3);
  background: rgba(255,255,255,.02);
  border-bottom: 1px solid rgba(255,255,255,.08);
}
#costsGrid tbody tr, #trashGrid tbody tr, #reportContent tbody tr { transition: background .15s ease; }
#costsGrid tbody tr:hover, #trashGrid tbody tr:hover, #reportContent tbody tr:hover { background: rgba(233,98,12,.06); }
#costsGrid tbody tr td, #trashGrid tbody tr td, #reportContent tbody tr td { border-bottom: 1px solid rgba(255,255,255,.05); }
#costsGrid tbody tr:last-child td, #trashGrid tbody tr:last-child td, #reportContent tbody tr:last-child td { border-bottom: none; }

#costsPage, #trashPage, #reportsPage {
  position: relative;
  isolation: isolate;
  padding-top: 56px;
}
#costsPage::after, #trashPage::after, #reportsPage::after {
  content: '';
  position: absolute;
  top: -40px; right: -10%;
  width: 50%; height: 220px;
  background: radial-gradient(ellipse at center, rgba(233,98,12,.13), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* ── Users page — team cards ─────────────────────────────── */
.um-card {
  background: rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 16px !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  opacity: 0;
  transform: translateY(10px);
  animation: lfReveal .45s cubic-bezier(.17,.84,.44,1) forwards;
}
.um-card:nth-of-type(1) { animation-delay: .03s; }
.um-card:nth-of-type(2) { animation-delay: .08s; }
.um-card:nth-of-type(3) { animation-delay: .13s; }
.um-card:nth-of-type(4) { animation-delay: .18s; }
.um-card:hover {
  border-color: rgba(233,98,12,.35) !important;
  box-shadow: 0 16px 36px -20px rgba(0,0,0,.6);
  transform: translateY(-2px);
}
.role-badge { font-family: var(--lf-font-mono); font-size: 10.5px; letter-spacing: .04em; }

.kpi {
  position: relative;
  overflow: hidden;
  background: rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.09);
  border-radius: 16px;
  transition: box-shadow .25s ease, border-color .25s ease, transform .2s ease;
  opacity: 0;
  animation: lfReveal .5s cubic-bezier(.17,.84,.44,1) forwards;
}
.kpi::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.28), transparent);
}
.kpi:hover {
  border-color: rgba(233,98,12,.35);
  box-shadow: 0 0 0 1px rgba(233,98,12,.08), 0 20px 48px -24px rgba(0,0,0,.7);
  transform: translateY(-2px);
}
.kpi:nth-of-type(1) { animation-delay: .02s; }
.kpi:nth-of-type(2) { animation-delay: .07s; }
.kpi:nth-of-type(3) { animation-delay: .12s; }
.kpi:nth-of-type(4) { animation-delay: .17s; }
.kpi:nth-of-type(5) { animation-delay: .22s; }
.kpi:nth-of-type(6) { animation-delay: .27s; }

.kpi-label {
  font-family: var(--lf-font-mono);
  font-size: 10.5px;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--lf-ink-3);
}
.kpi-value {
  font-family: var(--lf-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  transition: color .2s ease;
}
.kpi-sub {
  font-family: var(--lf-font-mono);
  font-size: 11.5px;
  color: var(--lf-ink-2);
}

@keyframes lfReveal {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Country / status pill filters ──────────────────────── */
.cc, .sc {
  font-family: var(--lf-font-mono);
  font-size: 12px;
  letter-spacing: .02em;
  transition: background .2s ease, color .2s ease, border-color .2s ease, transform .15s ease;
}
.cc:hover, .sc:hover { transform: translateY(-1px); }
.cc.active, .cc-all.active, .cc-uae.active, .cc-ksa.active, .cc-eg.active, .cc-mea.active {
  background: var(--lf-accent) !important;
  border-color: var(--lf-accent) !important;
  color: var(--lf-accent-ink) !important;
  box-shadow: 0 0 20px -4px rgba(233,98,12,.5);
}

/* ── Shipment list / cards in the Tracker sidebar ───────── */
.tracker-body, .sidebar, .page, .content {
  animation: lfFadeIn .35s ease forwards;
}
@keyframes lfFadeIn { from { opacity: 0; } to { opacity: 1; } }

.shipment-card {
  background: rgba(255,255,255,.03) !important;
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,.08) !important;
  border-radius: 14px !important;
  transition: border-color .2s ease, box-shadow .2s ease, transform .15s ease;
  opacity: 0;
  transform: translateY(10px);
  animation: lfReveal .4s cubic-bezier(.17,.84,.44,1) forwards;
}
.shipment-card:nth-of-type(1) { animation-delay: .03s; }
.shipment-card:nth-of-type(2) { animation-delay: .08s; }
.shipment-card:nth-of-type(3) { animation-delay: .13s; }
.shipment-card:nth-of-type(4) { animation-delay: .18s; }
.shipment-card:hover {
  border-color: rgba(233,98,12,.3) !important;
  box-shadow: 0 10px 28px -16px rgba(0,0,0,.6);
  transform: translateY(-2px);
}
.shipment-card.active {
  border-color: var(--lf-accent) !important;
  box-shadow: 0 0 0 1px rgba(233,98,12,.25);
}
.card-po { font-family: var(--lf-font-display); font-weight: 600; }

.gold { color: var(--lf-accent) !important; }

/* Buttons */
.btn-hdr, .btn-save {
  font-family: var(--lf-font-display);
  font-weight: 500;
  transition: box-shadow .25s ease, transform .15s ease, background .2s ease;
}
.btn-hdr:hover, .btn-save:hover {
  box-shadow: 0 0 22px 2px rgba(233,98,12,.4);
  transform: translateY(-1px);
}

/* Search input focus motion */
.search-inp {
  transition: box-shadow .2s ease, border-color .2s ease;
}
.search-inp:focus {
  border-color: var(--lf-accent) !important;
  box-shadow: 0 0 0 3px rgba(233,98,12,.15);
}

/* Modals — smooth entrance */
.modal-overlay { animation: lfFadeIn .2s ease forwards; }
.modal {
  animation: lfModalIn .25s cubic-bezier(.17,.84,.44,1) forwards;
  font-family: 'DM Sans', sans-serif;
}
@keyframes lfModalIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.modal-title { font-family: var(--lf-font-display); font-weight: 600; }

/* Alerts — subtle attention pulse instead of a hard flash */
.alert { animation: lfAlertIn .3s ease forwards; }
@keyframes lfAlertIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: translateX(0); } }

@media (prefers-reduced-motion: reduce) {
  .kpi, .tracker-body, .sidebar, .page, .content, .modal, .modal-overlay, .alert {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ═══════════════════════════════════════════════════════════
   DASHBOARD — glass cards + photo hero + ambient glow
   Scoped to .dash-body and its children only.
═══════════════════════════════════════════════════════════ */

.dash-body {
  position: relative;
  isolation: isolate;
  padding-top: 148px;
}

/* Ambient glow blobs behind everything (pure CSS, no new elements) */
.dash-body::after {
  content: '';
  position: absolute;
  top: -80px; left: -10%;
  width: 60%; height: 360px;
  background: radial-gradient(ellipse at center, rgba(233,98,12,.22), transparent 70%);
  filter: blur(40px);
  z-index: -1;
  pointer-events: none;
}

/* Photo hero band — reuses the site's own port photo */
.dash-body::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 128px;
  border-radius: 20px;
  background:
    linear-gradient(100deg, rgba(5,7,10,.92) 15%, rgba(5,7,10,.45) 60%, rgba(5,7,10,.15) 100%),
    url('/media/hero-port.jpg') center 35% / cover no-repeat;
  box-shadow: 0 20px 50px -24px rgba(0,0,0,.6);
  z-index: -1;
}

.dash-title {
  font-family: var(--lf-font-display);
  font-weight: 600;
  letter-spacing: -0.01em;
  color: #fff !important;
}
.dash-sub { color: var(--lf-ink-2); font-family: var(--lf-font-mono); font-size: 12.5px; }

/* Glass card base, shared by every dashboard tile */
.dash-kpi, .cb, .chart-card, .b-card {
  background: rgba(255,255,255,.035) !important;
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
  border: 1px solid rgba(255,255,255,.09) !important;
  border-radius: 18px !important;
  position: relative;
  overflow: hidden;
  opacity: 0;
  transform: translateY(14px);
  animation: lfReveal .5s cubic-bezier(.17,.84,.44,1) forwards;
  transition: border-color .25s ease, box-shadow .25s ease, transform .2s ease;
}
.dash-kpi::before, .cb::before, .chart-card::before, .b-card::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.35), transparent);
}
.dash-kpi:hover, .cb:hover, .chart-card:hover, .b-card:hover {
  border-color: rgba(233,98,12,.4) !important;
  box-shadow: 0 0 0 1px rgba(233,98,12,.1), 0 24px 48px -24px rgba(0,0,0,.65);
  transform: translateY(-3px);
}

.dash-kpi-row .dash-kpi:nth-child(1) { animation-delay: .02s; }
.dash-kpi-row .dash-kpi:nth-child(2) { animation-delay: .06s; }
.dash-kpi-row .dash-kpi:nth-child(3) { animation-delay: .10s; }
.dash-kpi-row .dash-kpi:nth-child(4) { animation-delay: .14s; }
.dash-kpi-row .dash-kpi:nth-child(5) { animation-delay: .18s; }
.dash-kpi-row .dash-kpi:nth-child(6) { animation-delay: .22s; }
.dash-kpi-row .dash-kpi:nth-child(7) { animation-delay: .26s; }

.charts-row .chart-card:nth-child(1) { animation-delay: .08s; }
.charts-row .chart-card:nth-child(2) { animation-delay: .14s; }
.charts-row .chart-card:nth-child(3) { animation-delay: .20s; }
.charts-row .chart-card:nth-child(4) { animation-delay: .26s; }

.dk-val, .cr-v {
  font-family: var(--lf-font-display);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.dk-label, .ch-title {
  font-family: var(--lf-font-mono);
  font-size: 10.5px;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--lf-ink-3);
}

.cr-bar-w { border-radius: 999px; overflow: hidden; }
.cr-bar { transition: width .6s cubic-bezier(.17,.84,.44,1); }

@media (prefers-reduced-motion: reduce) {
  .dash-kpi, .cb, .chart-card, .b-card {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (max-width: 900px) {
  .dash-body { padding-top: 120px; }
  .dash-body::before { height: 100px; }
}