/* ============================================================================
   Modern polish — ADDITIVE overrides. Loaded AFTER styles.css. Layout/positions
   are left to Greg's CSS; this only refines type, depth, glass, motion, and adds
   the FDM road→rail panel styling.
   ============================================================================ */
:root { --fdm-teal:#37cabb; --fdm-teal2:#5fe0d2; }

body { font-family:'Inter','Segoe UI',system-ui,sans-serif !important; -webkit-font-smoothing:antialiased; }

/* floating panels → glassmorphism + depth */
.esri-panel, .basemap-widget, .od-flow-card, .esri-toolbar {
  backdrop-filter: blur(11px) saturate(1.12);
  box-shadow: 0 16px 48px rgba(0,0,0,.5), 0 2px 10px rgba(0,0,0,.3);
  border-radius: 15px !important;
}
.navbar { backdrop-filter: blur(9px); box-shadow: 0 2px 24px rgba(0,0,0,.4); }
.brand-logo { box-shadow: 0 4px 14px rgba(55,202,187,.28); }

/* buttons → smoother, lifted hover */
.overlay-btn, .esri-tool-btn, .esri-action-icon-btn, .esri-layer-more-btn {
  transition: transform .18s ease, background .18s ease, border-color .18s ease, color .18s ease;
  border-radius: 9px;
}
.overlay-btn:hover, .esri-tool-btn:hover { transform: translateY(-1px); }
.esri-layer-row { transition: background .18s ease; border-radius: 8px; }
.esri-layer-row:hover { background: rgba(255,255,255,.04); }

/* KPI cards → subtle lift */
.kpi-card { transition: transform .2s ease, border-color .2s ease; border-radius: 12px; }
.kpi-card:hover { border-color: var(--fdm-teal); transform: translateY(-2px); }

/* sleeker scrollbars */
*::-webkit-scrollbar { width: 9px; height: 9px; }
*::-webkit-scrollbar-thumb { background: rgba(148,163,184,.3); border-radius: 6px; }
*::-webkit-scrollbar-thumb:hover { background: rgba(148,163,184,.55); }

/* drawer open state for the injected FDM layer row */
.esri-layer-drawer.open { display: block; }

/* ---------------------------------------------------------------- FDM panel */
#fdm-shift-panel {
  position: fixed; left: 18px; bottom: 18px; z-index: 1200; width: 302px;
  background: rgba(9,14,22,.87); border: 1px solid rgba(55,202,187,.30); border-radius: 15px;
  color: #e8eef7; font-family:'Inter',system-ui,sans-serif; overflow: hidden;
  backdrop-filter: blur(11px) saturate(1.1);
  box-shadow: 0 16px 48px rgba(0,0,0,.55);
}
#fdm-shift-panel .fdm-head {
  display: flex; justify-content: space-between; align-items: center; padding: 11px 14px;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  background: linear-gradient(90deg, rgba(55,202,187,.16), transparent);
  border-bottom: 1px solid rgba(255,255,255,.07);
}
#fdm-shift-panel .fdm-head button {
  background: none; border: 1px solid rgba(255,255,255,.16); color: #cfe0f0;
  width: 22px; height: 22px; border-radius: 6px; cursor: pointer; line-height: 1; font-size: 14px;
}
#fdm-shift-panel.collapsed .fdm-body { display: none; }
#fdm-shift-panel .fdm-body { padding: 12px 14px 14px; }
.fdm-kpis { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; margin-bottom: 12px; }
.fdm-k { background: rgba(255,255,255,.04); border: 1px solid rgba(255,255,255,.07); border-radius: 9px; padding: 9px 5px; text-align: center; }
.fdm-k b { display: block; font-family:'IBM Plex Mono',ui-monospace,monospace; font-size: 17px; color: var(--fdm-teal2); font-weight: 600; }
.fdm-k span { font-size: 8.5px; color: #93a4bd; letter-spacing: .02em; line-height: 1.2; display:block; margin-top:2px; }
.fdm-sub { font-size: 9.5px; text-transform: uppercase; letter-spacing: .12em; color: #8ba0bb; margin: 4px 0 8px; display: flex; justify-content: space-between; }
.fdm-sub span { color: #5f748f; }
.fdm-bar { display: grid; grid-template-columns: 78px 1fr 30px; gap: 7px; align-items: center; margin: 5px 0; }
.fdm-bn { font-size: 10.5px; color: #cfe0f0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fdm-tr { height: 6px; background: rgba(255,255,255,.07); border-radius: 3px; overflow: hidden; }
.fdm-tr > i { display: block; height: 100%; border-radius: 3px; background: linear-gradient(90deg,#2b8f88,#5fd98d); }
.fdm-bv { font-family:'IBM Plex Mono',monospace; font-size: 10.5px; text-align: right; color: #5fd98d; }
.fdm-note { margin-top: 11px; font-size: 9.5px; line-height: 1.45; color: #8ba0bb; padding-top: 9px; border-top: 1px solid rgba(255,255,255,.06); }
@media (max-width: 820px) { #fdm-shift-panel { display: none; } }

/* ============================================================================
   TIDY LAYOUT + WHITE ICONS  (works with fdm-icons.js)
   ============================================================================ */
/* white monochrome icons that replaced the emoji */
.fdm-ico { display:inline-flex; align-items:center; justify-content:center; flex:none;
  color:#fff; margin-right:5px; vertical-align:-2px; }
.fdm-ico svg { display:block; }

/* --- navbar: tighter, aligned, no crowding --- */
.navbar { padding: 0 20px !important; gap: 16px; }
.header-badges { gap: 8px; }
.badge { padding: 4px 10px !important; font-size: 11px !important; letter-spacing: .01em; }
.nav-tabs { gap: 3px !important; padding: 4px !important; border-radius: 11px !important; flex-wrap: nowrap; }
.nav-tab { padding: 7px 12px !important; font-size: 12px !important; border-radius: 8px !important;
  display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; line-height: 1; }
.nav-tab .fdm-ico { margin-right: 0; color: currentColor; }

/* --- shipments quick-bar: uniform pills --- */
#quick-shipments-bar { gap: 6px !important; align-items: center; }
#quick-shipments-bar .overlay-btn, .overlay-btn {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px !important;
  border-radius: 9px !important; font-size: 12px; white-space: nowrap; line-height: 1; }
.overlay-btn .fdm-ico { margin-right: 0; color: currentColor; }
.basemap-group-label { font-size: 11px; letter-spacing: .04em; opacity: .8; }

/* --- Esri toolbar: centre the (now white) icons --- */
.esri-tool-btn { display: flex; align-items: center; justify-content: center; }
.esri-tool-btn .fdm-ico, .esri-action-icon-btn .fdm-ico { margin: 0; color: currentColor; }

/* --- Layer list: clean, aligned rows --- */
.esri-panel-header { padding: 12px 14px; }
.esri-panel-title { gap: 8px; font-size: 13px; }
.esri-group-header { padding: 9px 12px; }
.esri-layer-row { border-radius: 9px; margin: 1px 4px; }
.esri-layer-main { padding: 8px 10px !important; }
.esri-layer-left { display: flex; align-items: center; gap: 9px !important; min-width: 0; }
.esri-layer-left .fdm-ico { margin-right: 0; color: #cfe0f0; }
.esri-layer-name { font-size: 12.5px !important; line-height: 1.25; overflow: hidden;
  text-overflow: ellipsis; display: flex; align-items: center; gap: 6px; }
.esri-eye-btn { width: 22px; height: 22px; display: inline-flex; align-items: center;
  justify-content: center; opacity: .82; padding: 0; }
.esri-eye-btn:hover { opacity: 1; }
.esri-eye-btn.disabled { opacity: .32; }
.esri-eye-btn .fdm-ico { margin: 0; }
.esri-layer-swatch, .esri-layer-swatch-circle { flex: none; }
.esri-layer-more-btn { opacity: .6; }
.esri-layer-more-btn:hover { opacity: 1; }

/* legend panel: consistent spacing */
#esri-legend-panel .layer-section-title { margin: 14px 0 8px; }

/* ---------------------------------------------------------------- clean dock */
/* declutter: hide the top-left shipments toggles (the bottom dock replaces them),
   but keep the container so the sidebar-expand button still works */
#quick-shipments-bar { background: transparent !important; border: none !important;
  box-shadow: none !important; padding: 0 !important; backdrop-filter: none !important; }
#quick-shipments-bar .overlay-btn,
#quick-shipments-bar .basemap-group-label,
#quick-shipments-bar .basemap-divider { display: none !important; }

/* bottom-centre bubble dock */
.fdm-dock {
  position: absolute; bottom: 22px; left: 50%; transform: translateX(-50%);
  z-index: 1000; display: flex; align-items: center; gap: 9px;
  padding: 9px 13px; border-radius: 999px;
  background: rgba(9,14,22,.82); border: 1px solid rgba(255,255,255,.09);
  backdrop-filter: blur(13px) saturate(1.1);
  box-shadow: 0 16px 46px rgba(0,0,0,.55), inset 0 1px 0 rgba(255,255,255,.05);
}
.fdm-bub {
  --c: #37cabb; width: 44px; height: 44px; border-radius: 50%; cursor: pointer;
  display: grid; place-items: center; color: #fff; position: relative;
  border: 1.5px solid rgba(255,255,255,.14); background: rgba(255,255,255,.045);
  transition: transform .16s ease, box-shadow .18s ease, background .18s ease, border-color .18s ease, opacity .18s ease;
}
.fdm-bub svg { display: block; }
.fdm-bub:hover { transform: translateY(-3px); }
.fdm-bub.on { border-color: var(--c); color: #fff;
  background: color-mix(in srgb, var(--c) 20%, transparent);
  box-shadow: 0 0 16px -2px var(--c); }
.fdm-bub.off { opacity: .42; }
.fdm-bub.off:hover { opacity: .8; }
.fdm-bub-more { border-style: dashed; opacity: .8; }
/* tooltip */
.fdm-bub[data-tip]:hover::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 10px); left: 50%;
  transform: translateX(-50%); white-space: nowrap; pointer-events: none;
  background: rgba(9,14,22,.95); color: #e8eef7; font-size: 11px; font-weight: 500;
  padding: 5px 9px; border-radius: 7px; border: 1px solid rgba(255,255,255,.1);
  box-shadow: 0 6px 18px rgba(0,0,0,.5);
}
@media (max-width: 900px) { .fdm-dock { gap: 6px; padding: 7px 9px; } .fdm-bub { width: 38px; height: 38px; } }