/* Royal Air Fuel Ops — Application Styles
   Design system: Figma UI kit (eDL9oy2QZvt21YPDpRrkfx) + live backoffice.royalair.com
   Figma color names used as comments; live-site values used for sidebar/topbar navy.
   Fonts: DM Sans (Google Fonts) — confirmed on live back office site
*/

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,400;0,9..40,500;0,9..40,700;1,9..40,400&display=swap');

:root {
  /* ── Brand / Primary palette (Figma: Primary-*) ── */
  --gold:      #FFB11A;          /* Primary-500 — main accent, active nav */
  --gold-dark: #CC8800;          /* Primary-600 — hover / pressed gold */
  --gold-400:  #FFC34D;          /* Primary-400 */
  --gold-300:  #FFD480;          /* Primary-300 */
  --gold-200:  #FFE5B3;          /* Primary-200 */
  --gold-bg:   #FFF8EA;          /* Primary-100 — amber badge background */

  /* ── Navigation / chrome (from live backoffice.royalair.com inspection) ── */
  --navy:      #001529;          /* sidebar / topbar background */
  --navy2:     #002140;          /* sidebar hover state */
  --navy3:     #003159;          /* sidebar border / divider */

  /* ── Content colors (Figma: Black-*) ── */
  --white:     #ffffff;          /* White */
  --body-bg:   #F3F2F2;          /* Figma BG-400 — page background */
  --text:      #222222;          /* Black/500 (Title) — primary text */
  --text-400:  #404040;          /* Black/400 */
  --text-body: #595959;          /* Black/300 (Body) */
  --text-muted: rgb(205, 209, 216); /* inactive nav links (from live site) */

  /* ── Gray / background scale (Figma: BG-*) ── */
  --gray50:    #FAFAFA;          /* BG-200 */
  --gray100:   #F5F5F5;          /* BG-300 */
  --gray200:   #E9E8E8;          /* BG-500 (Line) — row separators */
  --gray300:   #D6D6D6;          /* Secondary-100 */
  --gray400:   #A8A8A8;          /* Secondary-200 */
  --gray600:   #595959;          /* Black/300 */
  --gray800:   #222222;          /* Black/500 */

  /* ── Status colors (Figma: Success / Error / Info) ── */
  --green:     #0F9E60;          /* Success-500 */
  --green-bg:  #EFFFF6;          /* Success-100 */
  --amber:     #FFB11A;          /* Primary-500 (same as gold) */
  --amber-bg:  #FFF8EA;          /* Primary-100 */
  --red:       #E73232;          /* Error-500 */
  --red-bg:    #FFF0F2;          /* Error-100 */
  --blue:      #1A5AFF;          /* Information-500 */
  --blue-bg:   #EAF7FF;          /* Information-100 */
  --purple:    #9259F1;          /* Figma: Tail Number/Purple (repurposed for HOME badge) */
  --purple-bg: #CCAEFF26;        /* Light purple tint */

  /* ── Layout ── */
  --sidebar-w: 210px;
  --header-h:  56px;

  /* ── Shape & shadow ── */
  --radius:      6px;
  --radius-pill: 40px;           /* status badge radius — from back office */
  --radius-btn:  32px;           /* button radius — from back office */
  --shadow:      0 1px 3px rgba(0,0,0,0.08);
  --shadow-md:   0 4px 12px rgba(0,0,0,0.12);

  /* ── Typography ── */
  --font:     'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-size: 14px;
  color: var(--text);
  background: var(--body-bg);
  display: flex;
  min-height: 100vh;
}

/* ── Sidebar ─────────────────────────────────────────────────── */

.sidebar {
  width: var(--sidebar-w);
  min-height: 100vh;
  background: var(--navy);
  color: var(--white);
  display: flex;
  flex-direction: column;
  position: fixed;
  left: 0; top: 0; bottom: 0;
  z-index: 100;
}

.sidebar-logo {
  padding: 15px 20px;
  border-bottom: 1px solid var(--navy3);
}

.sidebar-logo .brand {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--gold);
  letter-spacing: 0.5px;
  line-height: 1;
}

.sidebar-logo .tagline {
  font-size: 10px;
  color: var(--text-muted);
  margin-top: 2px;
  opacity: 0.7;
  line-height: 1;
}

.sidebar-nav {
  flex: 1;
  padding: 14px 0;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px 12px 28px;
  color: var(--text-muted);
  text-decoration: none;
  font-size: 16px;
  font-weight: 400;
  transition: all 0.15s;
  border-radius: 0;
}

.nav-item:hover {
  color: var(--white);
  background: var(--navy2);
}

.nav-item.active {
  color: var(--gold);
  background: rgba(255, 177, 26, 0.10);
  font-weight: 500;
  border-left: 3px solid var(--gold);
}

.nav-item .icon { font-size: 15px; width: 18px; text-align: center; }

.sidebar-footer {
  padding: 14px 20px;
  border-top: 1px solid var(--navy3);
  font-size: 10px;
  color: var(--text-muted);
  opacity: 0.6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.home-fuel-widget {
  background: rgba(255,255,255,0.06);
  border: 1px solid var(--navy3);
  border-radius: var(--radius);
  padding: 10px 14px;
  margin: 0 14px 14px;
  font-size: 12px;
}

.home-fuel-widget .label { color: var(--text-muted); font-size: 11px; }
.home-fuel-widget .price { color: var(--gold); font-weight: 700; font-size: 16px; margin-top: 2px; }

/* ── Main layout ─────────────────────────────────────────────── */

.main-wrap {
  margin-left: var(--sidebar-w);
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

/* Topbar matches back office — dark navy same as sidebar */
.topbar {
  height: var(--header-h);
  background: var(--navy);
  display: flex;
  align-items: center;
  padding: 0 24px;
  gap: 16px;
  position: sticky;
  top: 0;
  z-index: 50;
  border-bottom: 1px solid var(--navy3);
}

.topbar-title {
  font-size: 15px;
  font-weight: 500;
  color: var(--white);
  flex: 1;
}

.topbar-subtitle {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 400;
}

.synced-label        { font-size: 11px; opacity: 0.75; }
.synced-label.amber  { color: var(--gold-dark); opacity: 1; font-weight: 500; }
.synced-label.red    { color: var(--red);       opacity: 1; font-weight: 600; }

/* ── Sync button — gold sweep ring + spinning icon ───────────────── */
@property --ring-angle {
  syntax: '<angle>';
  inherits: false;
  initial-value: 0deg;
}
@keyframes ring-sweep {
  0%   { --ring-angle: 0deg; }
  100% { --ring-angle: 360deg; }
}

.btn-syncing {
  border-color: transparent !important;
  position: relative;
}
.btn-syncing::before {
  content: '';
  position: absolute;
  inset: -2px;
  border-radius: 34px;   /* var(--radius-btn) 32px + 2px for inset */
  padding: 2px;
  background: conic-gradient(
    from var(--ring-angle),
    transparent           0deg,
    transparent          50deg,
    rgba(255,177,26,.20) 90deg,
    rgba(255,177,26,.75) 150deg,
    #FFB11A              200deg,
    #FFB11A              240deg,
    rgba(255,177,26,.75) 270deg,
    rgba(255,177,26,.15) 300deg,
    transparent          330deg,
    transparent          360deg
  );
  -webkit-mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  mask:
    linear-gradient(#fff 0 0) content-box,
    linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  animation: ring-sweep 1.4s linear infinite;
  pointer-events: none;
}
.btn-syncing .sync-spin {
  animation: spin .9s linear infinite;
}

.page-content {
  flex: 1;
  padding: 24px;
  width: 100%;
  min-width: 0;   /* prevents flex overflow on narrow screens */
}

/* ── Buttons ─────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 20px;
  border-radius: var(--radius-btn);   /* 32px — from back office */
  font-family: var(--font);
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border: 1px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
  letter-spacing: 0.2px;
}

.btn-primary {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}
.btn-primary:hover { background: var(--navy2); }

.btn-gold {
  background: var(--gold);
  color: var(--navy);
  border-color: var(--gold);
  font-weight: 600;
}
.btn-gold:hover { background: var(--gold-dark); }

.btn-outline {
  background: var(--white);
  color: var(--text);
  border-color: var(--gray200);
}
.btn-outline:hover { background: var(--gray50); border-color: var(--gray400); }

.btn-sm  { padding: 4px 14px; font-size: 12px; }
.btn-xs  { padding: 2px 10px; font-size: 11px; letter-spacing: 1.5px; text-transform: uppercase; }

.btn-danger { background: var(--red-bg); color: var(--red); border-color: #fca5a5; }
.btn-danger:hover { background: var(--red); color: var(--white); }

/* ── Lucide icon sizing ──────────────────────────────────────── */
/* Lucide replaces <i data-lucide> with <svg class="lucide …"> — target the svg */
i[data-lucide], svg.lucide { display: inline-flex; align-items: center; vertical-align: middle; flex-shrink: 0; }
.icon-xs  svg.lucide, svg.lucide.icon-xs  { width: 12px !important; height: 12px !important; stroke-width: 2; }
.icon-sm  svg.lucide, svg.lucide.icon-sm  { width: 14px !important; height: 14px !important; stroke-width: 2; }
.icon-md  svg.lucide, svg.lucide.icon-md  { width: 16px !important; height: 16px !important; stroke-width: 2; }
.icon-lg  svg.lucide, svg.lucide.icon-lg  { width: 20px !important; height: 20px !important; stroke-width: 1.75; }
/* Nav icons */
.sidebar-nav .icon svg.lucide { width: 15px !important; height: 15px !important; }
/* Sidebar brand icon — match topbar height */
.sidebar-logo .brand svg.lucide { width: 13px !important; height: 13px !important; stroke-width: 2; }

/* ── Status badges ───────────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;             /* matches back office pill padding */
  border-radius: var(--radius-pill);   /* 40px */
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

/* KEEP — green completed style (Figma Success palette) */
.badge.keep    { background: var(--green-bg); color: var(--green); }

/* SWITCH — amber/gold pending style (Figma Primary-100 / Primary-500) */
.badge.switch  { background: var(--amber-bg); color: var(--gold-dark); }

/* SUGGEST — blue */
.badge.suggest { background: var(--blue-bg);  color: var(--blue); }

/* HOME — navy with gold text (home base = Royal Air branding) */
.badge.home    { background: rgba(0,21,41,0.08); color: var(--navy); border: 1px solid rgba(0,21,41,0.15); }

/* NO DATA — error red (Figma Error palette) */
.badge.nodata  { background: var(--red-bg);    color: var(--red); }

/* LOADING/PENDING — muted on dashboard (unanalyzed leg) */
.badge.pending { background: var(--amber-bg);  color: var(--gold-dark); }

/* FEES NEEDED — orange: SWITCH likely but fee data missing for comparison */
.badge.fees-pending { background: #fff3e0; color: #e65100; border: 1px solid #ffb74d; }

/* Fee status badges */
.badge.current        { background: var(--green-bg);  color: var(--green); }
.badge.low-confidence { background: var(--red-bg);    color: var(--red); }
.badge.stale          { background: var(--amber-bg);  color: var(--gold-dark); }
.badge.error          { background: var(--red-bg);    color: var(--red); }
.badge.preferred      { background: var(--navy);      color: var(--gold); }

/* ── Trip group cards ────────────────────────────────────────── */

.section-title {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 1.5px;
  text-transform: uppercase;
  color: var(--gray400);
  margin: 24px 0 10px;
}

.trip-group {
  background: var(--white);
  border-radius: var(--radius);
  margin-bottom: 10px;
  overflow: hidden;
  box-shadow: var(--shadow);
  border: none;
}

.trip-header {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  grid-template-rows: auto auto;
  align-items: end;
  gap: 0 12px;
  padding: 12px 20px;
  background: var(--white);
  border-bottom: 0.667px solid var(--gray200);  /* back office row separator */
  cursor: pointer;
  text-decoration: none;
  color: inherit;
  transition: background 0.12s;
}

.trip-header:hover { background: var(--gray50); }

.trip-date-badge {
  grid-column: 1;
  grid-row: 1;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--white);
  background: var(--navy);
  padding: 4px 10px;
  border-radius: var(--radius);
  white-space: nowrap;
}

.trip-meta-number {
  grid-column: 2;
  grid-row: 1;
  font-size: 13px;
}

.trip-number { font-weight: 600; color: var(--text); }
.trip-tail   { color: var(--gray400); font-size: 12px; }
.trip-route  {
  grid-column: 1 / -1;
  grid-row: 2;
  font-size: 12px;
  color: var(--gray400);
  margin-top: 2px;
  padding-top: 3px;
}

.trip-cost {
  grid-column: 3;
  grid-row: 1;
  align-self: end;
  text-align: right;
  font-size: 12px;
  color: var(--gray600);
}

.trip-cost .amount  { font-size: 15px; font-weight: 700; color: var(--text); }
.trip-cost .savings { color: var(--green); font-size: 11px; }

.trip-arrow {
  grid-column: 4;
  grid-row: 1;
  align-self: end;
}

/* ── Leg rows ─────────────────────────────────────────────────── */

.leg-row {
  display: grid;
  grid-template-columns: 100px 120px 80px 1fr 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px 20px;
  border-bottom: 0.667px solid var(--gray200);
  font-size: 13px;
  transition: background 0.1s;
}

.leg-row:last-child { border-bottom: none; }
.leg-row:hover { background: var(--gray50); }

.leg-date   { color: var(--gray600); font-size: 12px; }
.leg-route  { font-weight: 600; font-family: 'DM Mono', 'Courier New', monospace; letter-spacing: 0.5px; }
.leg-tail   { color: var(--gray400); font-size: 12px; }

.leg-fbo    { font-size: 13px; }
.leg-fbo .fbo-name   { font-weight: 500; color: var(--text); }
.leg-fbo .fbo-detail { font-size: 11px; color: var(--gray400); margin-top: 2px; }

/* Dep / Arr FBO pair rows inside .leg-fbo */
.fbo-pair-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  line-height: 1.5;
}
.fbo-pair-row + .fbo-pair-row { margin-top: 2px; }
.fbo-dir-label {
  font-size: 10px;
  font-weight: 600;
  color: var(--gray400);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  min-width: 24px;
  flex-shrink: 0;
}

.leg-best   { font-size: 13px; }
.leg-best .fbo-name  { font-weight: 500; color: var(--gold); }
.leg-best .fbo-detail{ font-size: 11px; color: var(--gray400); margin-top: 2px; }

.leg-savings {
  text-align: right;
  font-size: 12px;
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
}

/* ── Tables ──────────────────────────────────────────────────── */

.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.data-table th {
  text-align: left;
  padding: 10px 16px;
  background: var(--gray50);
  border-bottom: 0.667px solid var(--gray200);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray400);
  white-space: nowrap;
}

.data-table td {
  padding: 14px 16px;            /* back office uses 24px 16px; slightly tighter for density */
  border-bottom: 0.667px solid var(--gray200);
  vertical-align: middle;
}

.data-table tr:last-child td { border-bottom: none; }
.data-table tr:hover td { background: var(--gray50); }

.data-table .num  { text-align: right; font-variant-numeric: tabular-nums; }
.data-table .mono { font-family: 'DM Mono', monospace; }

.preferred-star { color: var(--gold); margin-right: 4px; }

/* ── FBO options table (trip detail) ─────────────────────────── */

.fbo-options-wrap {
  border-radius: var(--radius);
  overflow: hidden;
  margin-top: 8px;
  border: 0.667px solid var(--gray200);
}

.fbo-rank {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px; height: 24px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: 700;
}

.fbo-rank.best { background: var(--navy); color: var(--gold); }
.fbo-rank.alt  { background: var(--gray100); color: var(--gray600); }

/* Waiver-applicable fee cell highlight */
.fee-waivable { color: #2e7d32; font-weight: 600; }

/* ── Fees page — tab bar ─────────────────────────────────────── */

.fees-tab-bar {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--gray200);
  margin-bottom: 20px;
}

.fees-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 500;
  color: var(--navy, #0a1628);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  cursor: pointer;
  transition: border-color 0.15s;
  white-space: nowrap;
}
.fees-tab:hover { border-bottom-color: var(--gray300); }
.fees-tab.active {
  color: var(--navy, #0a1628);
  border-bottom-color: var(--gold, #c9a84c);
  font-weight: 600;
}

/* Tab panels — no height constraint needed; search-first pattern limits visible content */
.fees-tab-panel {}


/* ── App modal (dialog-based) ────────────────────────────────── */

.app-modal {
  border: none;
  border-radius: 10px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  padding: 0;
  width: min(640px, 95vw);
  max-height: 90vh;
  overflow: hidden;
  /* display is controlled by [open] — don't set it here or it overrides
     the browser's native dialog hidden state */
}

.app-modal[open] {
  display: flex;
  flex-direction: column;
  /* Force true viewport centering regardless of scroll position */
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  margin: 0;
}

.app-modal-wide {
  width: min(840px, 95vw);
}

.app-modal::backdrop {
  background: rgba(0,0,0,.35);
  backdrop-filter: blur(2px);
}

.app-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray200);
  font-weight: 600;
  font-size: 14px;
  flex-shrink: 0;
  gap: 8px;
}

.app-modal-body {
  padding: 20px 18px;
  overflow-y: auto;
  flex: 1;
}


/* ── FBO accordion (fee manager) ────────────────────────────── */

.fbo-accordion {
  border-bottom: 0.667px solid var(--gray200);
}
.fbo-accordion:last-child { border-bottom: none; }

.fbo-accordion > summary {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 11px 16px;
  cursor: pointer;
  list-style: none;
  user-select: none;
  font-size: 13px;
}
.fbo-accordion > summary::-webkit-details-marker { display: none; }
.fbo-accordion > summary::marker { display: none; }
.fbo-accordion > summary:hover { background: var(--gray50); }
.fbo-accordion[open] > summary { background: var(--gray50); }

.fbo-acc-arrow {
  color: var(--gray400);
  font-size: 9px;
  width: 12px;
  flex-shrink: 0;
  display: inline-block;
  transition: transform 0.15s ease;
}
.fbo-accordion[open] .fbo-acc-arrow { transform: rotate(90deg); }

.fbo-acc-name  {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 600;
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fbo-acc-count {
  flex: 0 0 90px;
  font-size: 11px;
  color: var(--gray400);
}
.fbo-acc-fee   {
  flex: 0 0 130px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text);
  text-align: right;
}
.fbo-acc-status {
  flex: 0 0 110px;
}

/* Nested per-aircraft table */
.fbo-nested-wrap {
  padding: 0 16px 12px 40px;
  background: var(--gray50);
}
.fbo-nested-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  border-radius: var(--radius);
  overflow: hidden;
}
.fbo-nested-table th {
  text-align: left;
  padding: 4px 10px;
  background: var(--gray100);
  border-bottom: 0.667px solid var(--gray200);
  font-size: 10px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--gray400);
}
.fbo-nested-table td {
  padding: 5px 10px;
  border-bottom: 0.667px solid var(--gray200);
  vertical-align: middle;
  line-height: 1.35;
}

/* Notes tooltip — shows full note on hover */
.fee-notes-cell {
  max-width: 200px;
  cursor: default;
}
.fee-notes-cell[onclick] { cursor: pointer; }
.fee-notes-cell .fee-notes-short {
  display: inline;
}
.fee-notes-cell .fee-notes-ellipsis {
  color: var(--blue, #1e88e5);
  font-size: 10px;
}
.fee-notes-cell .fee-notes-full {
  display: none;
  white-space: normal;
  word-break: break-word;
}
.fee-notes-cell.expanded .fee-notes-short { display: none; }
.fee-notes-cell.expanded .fee-notes-full  { display: inline; }
.fbo-nested-table tr:last-child td { border-bottom: none; }
.fbo-nested-table .num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}

/* ── Cards ───────────────────────────────────────────────────── */

.card {
  background: var(--white);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.card-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 14px;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── Stats bar ───────────────────────────────────────────────── */

.stats-bar {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.stat-chip {
  background: var(--white);
  border-radius: var(--radius);
  padding: 10px 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  box-shadow: var(--shadow);
}

.stat-chip .stat-label { color: var(--gray400); font-size: 11px; letter-spacing: 0.5px; text-transform: uppercase; }
.stat-chip .stat-value { font-weight: 700; color: var(--text); font-size: 18px; margin-top: 2px; }
.stat-chip.alert .stat-value  { color: var(--red); }
.stat-chip.success .stat-value { color: var(--green); }

/* ── Alerts ──────────────────────────────────────────────────── */

.alert {
  border-radius: var(--radius);
  padding: 10px 16px;
  font-size: 13px;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.alert-amber { background: var(--amber-bg); color: #7a5200; border-left: 3px solid var(--gold); }
.alert-red   { background: var(--red-bg);   color: var(--red);  border-left: 3px solid #fca5a5; }
.alert-green { background: var(--green-bg); color: var(--green); border-left: 3px solid #7ED321; }
.alert-blue  { background: var(--blue-bg);  color: var(--blue); border-left: 3px solid #93c5fd; }

/* Numeric fee inputs — flag a clearly non-numeric entry (e.g. a typo'd letter)
   so bad input is visible before save. Empty stays valid (intentional clear). */
.fee-num:invalid { border-color: var(--red); background: var(--red-bg); }

/* ── Sync / loading ──────────────────────────────────────────── */

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator  { display: inline; }

.spinner {
  width: 14px; height: 14px;
  border: 2px solid var(--navy3);
  border-top-color: var(--gold);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}

@keyframes spin { to { transform: rotate(360deg); } }

/* Spin utility — applies rotation animation to any element (e.g. lucide loader icon) */
.spin { animation: spin 1s linear infinite; display: inline-block; }

/* ── Forms ───────────────────────────────────────────────────── */

.form-group { margin-bottom: 14px; }

.form-label {
  display: block;
  font-size: 12px;
  font-weight: 500;
  color: var(--gray600);
  margin-bottom: 4px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.form-input, .form-select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--gray200);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--white);
}

.form-input:focus, .form-select:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255,177,26,0.15);
}

.gallons-input {
  width: 90px;
  padding: 5px 10px;
  border: 1px solid var(--gray200);
  border-radius: var(--radius);
  font-family: var(--font);
  font-size: 13px;
  text-align: center;
}

.gallons-input:focus {
  outline: none;
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255,177,26,0.15);
}

/* ── Search bar ──────────────────────────────────────────────── */

.search-wrap {
  display: flex;
  gap: 10px;
  margin-bottom: 16px;
  align-items: center;
}

.search-input {
  flex: 1;
  max-width: 360px;
  padding: 8px 14px;
  border: 1px solid var(--gray200);
  border-radius: var(--radius-btn);
  font-family: var(--font);
  font-size: 13px;
  color: var(--text);
  background: var(--white);
}

.search-input:focus {
  outline: none;
  border-color: var(--gold);
}

/* ── Tabs ────────────────────────────────────────────────────── */

.tab-bar {
  display: flex;
  gap: 4px;
  border-bottom: 1px solid var(--gray200);
  margin-bottom: 20px;
}

.tab-btn {
  padding: 8px 18px;
  font-family: var(--font);
  font-size: 13px;
  font-weight: 400;
  color: var(--gray400);
  cursor: pointer;
  border: none;
  background: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -1px;
  transition: all 0.15s;
}

.tab-btn.active { color: var(--gold); border-bottom-color: var(--gold); font-weight: 500; }
.tab-btn:hover  { color: var(--text); }

/* ── SSE connection indicator ────────────────────────────────── */

.sse-indicator {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gray400);
  transition: background 0.3s;
}

.sse-indicator.connected    { background: var(--green); }
.sse-indicator.disconnected { background: var(--red); }

/* ── Loading skeleton ────────────────────────────────────────── */

.skeleton {
  background: linear-gradient(90deg, var(--gray100) 25%, var(--gray200) 50%, var(--gray100) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  height: 14px;
}

@keyframes shimmer { to { background-position: -200% 0; } }

/* ── Utility ─────────────────────────────────────────────────── */

.text-sm      { font-size: 12px; }
.text-xs      { font-size: 11px; }
.text-muted   { color: var(--gray400); }
.text-right   { text-align: right; }
.text-mono    { font-family: 'DM Mono', 'Courier New', monospace; }
.text-green   { color: var(--green); }
.text-amber   { color: var(--amber); }
.text-red     { color: var(--red); }
.text-navy    { color: var(--navy); }
.text-gold    { color: var(--gold); }
.text-purple  { color: var(--purple); }
.fw-bold      { font-weight: 700; }
.fw-600       { font-weight: 600; }
.d-flex       { display: flex; }
.align-center { align-items: center; }
.align-self-center { align-self: center; }
.gap-8        { gap: 8px; }
.gap-12       { gap: 12px; }
.mt-4         { margin-top: 4px; }
.mt-8         { margin-top: 8px; }
.mt-16        { margin-top: 16px; }
.mt-24        { margin-top: 24px; }
.mb-8         { margin-bottom: 8px; }
.mb-16        { margin-bottom: 16px; }

/* ── Price integrity / vendor health ────────────────────────── */

.integrity-section {
  background: var(--white);
  border: 1px solid var(--gray200);
  border-radius: var(--radius);
  padding: 14px 16px;
}

.integrity-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 12px;
}

.integrity-title {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
}

.health-chips-wrap {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* Vendor health chip */
.health-chip {
  border-radius: var(--radius);
  border: 1px solid var(--gray200);
  padding: 10px 14px;
  min-width: 150px;
  background: var(--gray50);
  position: relative;
}

.health-chip.current {
  border-color: var(--green);
  background: var(--green-bg);
}

.health-chip.expiring_soon {
  border-color: var(--gold);
  background: var(--gold-bg);
}

.health-chip.expired {
  border-color: var(--red);
  background: var(--red-bg);
}

.health-chip-vendor {
  font-size: 13px;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 4px;
}

.health-chip-meta {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 500;
  margin-bottom: 4px;
}

.health-chip.current    .health-chip-meta { color: var(--green); }
.health-chip.expiring_soon .health-chip-meta { color: var(--gold-dark); }
.health-chip.expired    .health-chip-meta { color: var(--red); }

.health-chip-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex-shrink: 0;
}
.health-chip.current       .health-chip-status-dot { background: var(--green); }
.health-chip.expiring_soon .health-chip-status-dot { background: var(--gold); }
.health-chip.expired       .health-chip-status-dot { background: var(--red); }

.health-chip-detail {
  font-size: 11px;
  color: var(--text-body);
  line-height: 1.5;
}

/* Tooltip for health chips */
.health-chip-tip {
  cursor: default;
}
.health-chip-tip[data-tip] {
  position: relative;
}
.health-chip-tip[data-tip]::after {
  content: attr(data-tip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--gray800, #1a1a2e);
  color: #fff;
  font-size: 11px;
  font-weight: 400;
  line-height: 1.5;
  white-space: nowrap;
  padding: 6px 10px;
  border-radius: 6px;
  box-shadow: 0 4px 12px rgba(0,0,0,.2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 300;
}
.health-chip-tip[data-tip]::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 3px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: var(--gray800, #1a1a2e);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease;
  z-index: 300;
}
.health-chip-tip[data-tip]:hover::after,
.health-chip-tip[data-tip]:hover::before {
  opacity: 1;
}

/* Expiry pill in price table */
.expiry-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 500;
  white-space: nowrap;
}

.expiry-pill.current {
  background: var(--green-bg);
  color: var(--green);
}

.expiry-pill.expiring-soon {
  background: var(--gold-bg);
  color: var(--gold-dark);
}

.expiry-pill.expired {
  background: var(--red-bg);
  color: var(--red);
}

/* Price table row tinting */
tr.row-expired  { opacity: 0.55; }
tr.row-expiring { background: #FFFDF0; }

/* Manual fee entry form grid */
.fee-form-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px 16px;
}

.fee-form-grid .fee-span-2 { grid-column: span 2; }
.fee-form-grid .fee-span-3 { grid-column: span 3; }

/* Collapsible panel arrow (reused for add-fee-panel) */
details .panel-arrow { display: inline-block; transition: transform 0.15s ease; }
details[open] .panel-arrow { transform: rotate(90deg); }

/* ── Inline contact add/edit form (gap table rows) ───────────────────── */
.contact-form-row td {
  padding: 10px 16px 14px;
  background: #f0f6ff;
  border-left: 3px solid var(--blue300, #93c5fd);
  border-bottom: 1px solid var(--blue200, #bfdbfe);
}

.contact-form-label {
  font-size: 11px;
  font-weight: 600;
  color: var(--gray500, #6b7280);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 8px;
}

.contact-form-banner {
  font-size: 11.5px;
  font-weight: 500;
  padding: 5px 10px;
  border-radius: 4px;
  margin-bottom: 8px;
  display: inline-block;
}

.contact-form-banner--success {
  background: var(--green50, #f0fdf4);
  color: var(--green700, #15803d);
  border: 1px solid var(--green200, #bbf7d0);
}

.contact-form-fields {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  flex-wrap: wrap;
}

.contact-form-actions {
  flex: 0 0 auto;
  align-self: flex-end;
  display: flex;
  gap: 4px;
  flex-wrap: nowrap;
  padding-bottom: 1px;  /* align with inputs */
}

/* gap-contact-btn: "Add Contact" button style */
.gap-contact-btn {
  white-space: nowrap;
}

/* Inline fee edit row */
.fee-edit-row td {
  padding: 0 !important;
}
.fee-edit-row form {
  padding: 10px 14px;
  background: var(--gray50);
  border-top: 1px solid var(--gray200);
  border-bottom: 1px solid var(--gray200);
}
/* Edit pencil button — only visible on row hover */
.fbo-nested-table tr .btn-ghost {
  opacity: 0;
  transition: opacity 0.15s;
}
.fbo-nested-table tr:hover .btn-ghost {
  opacity: 1;
}
/* …but ghost buttons inside an open dialog (e.g. the parking popup's "Add tier"
   / remove "×") are nested in an edit-row <tr>, so the hover-reveal above
   washes them out. Keep dialog buttons fully visible. (0,3,0 beats 0,2,1.) */
.app-modal[open] .btn-ghost { opacity: 1; }

/* Active fee-edit form — it replaces the record's view row in place, so give it
   a clear accent + tint + lift so the record being edited doesn't blend in. */
.fee-edit-box {
  padding: 12px 16px;
  background: var(--blue-bg);
  border-left: 4px solid var(--blue);
  border-top: 1px solid var(--gray200);
  border-bottom: 1px solid var(--gray200);
  box-shadow: 0 6px 16px rgba(0, 21, 41, 0.10);
}
.fee-edit-header {
  display: flex; align-items: center; gap: 6px; margin-bottom: 10px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.6px;
  text-transform: uppercase; color: var(--blue);
}

/* Volume tier pills in price table */
.price-tiers {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
}

.tier-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  font-size: 12px;
  white-space: nowrap;
}

.tier-vol {
  color: var(--gray400);
  font-size: 10px;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  min-width: 60px;
  text-align: right;
}

.tier-price {
  font-weight: 600;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}

/* ── Fuel Price FBO accordion ─────────────────────────────────────── */
.fbo-price-acc {
  border-top: 1px solid var(--gray200);
}
.fbo-price-acc:first-child {
  border-top: none;
}
.fbo-price-acc > summary {
  list-style: none;
  cursor: pointer;
  padding: 0;
  user-select: none;
}
.fbo-price-acc > summary::-webkit-details-marker { display: none; }
.fbo-price-acc > summary::marker { display: none; }
.fbo-price-acc > summary:hover .fbo-price-row-inner {
  background: var(--gray100, #f5f5f5);
}
.fbo-price-acc[open] > summary .fbo-price-row-inner {
  background: var(--gray100, #f5f5f5);
}

.fbo-price-row-inner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  transition: background 0.1s;
}

.fbo-price-name {
  flex: 1 1 0;
  min-width: 0;
  font-weight: 600;
  font-size: 14px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fbo-price-vendors {
  flex: 0 0 180px;
  font-size: 12px;
  color: var(--gray400);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-align: right;
}
.fbo-price-best {
  flex: 0 0 130px;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.fbo-price-status {
  flex: 0 0 100px;
  text-align: right;
}
.fbo-price-chevron {
  flex: 0 0 16px;
  color: var(--gray400);
  transition: transform 0.15s ease;
  display: flex;
  align-items: center;
}
.fbo-price-acc[open] .fbo-price-chevron {
  transform: rotate(90deg);
}

/* ── Responsive ──────────────────────────────────────────────── */

@media (max-width: 768px) {
  .sidebar    { transform: translateX(-100%); }
  .main-wrap  { margin-left: 0; }
  .leg-row    { grid-template-columns: 1fr; gap: 4px; }
}

/* ── Schedule page redesign ──────────────────────────────────────────────── */

/* Stats bar alert state */
.stat-chip.stat-alert { background: var(--amber-pale, #fff8e1); border-color: var(--amber, #FFB11A); }
.stat-chip.stat-alert .stat-label { color: #b45309; }
.stat-chip.stat-alert .stat-value { color: #92400e; }

/* Clickable stat chips with drill-down popover */
[x-cloak] { display: none !important; }
.stat-chip-clickable { cursor: pointer; user-select: none; position: relative; }
.stat-chip-clickable:hover { filter: brightness(0.97); }
.stat-chip-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 200;
  background: var(--white);
  border: 1px solid var(--gray200);
  border-radius: var(--radius);
  box-shadow: 0 4px 16px rgba(0,0,0,.12);
  min-width: 260px;
  max-width: 380px;
  overflow: hidden;
}
.stat-chip-popover-header {
  padding: 8px 12px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  background: var(--gray50);
  border-bottom: 1px solid var(--gray200);
  color: var(--gray600);
}
.stat-chip-popover-item {
  display: flex;
  align-items: baseline;
  gap: 6px;
  padding: 8px 12px;
  text-decoration: none;
  color: var(--text);
  font-size: 12px;
  border-bottom: 1px solid var(--gray100);
  transition: background .1s;
}
.stat-chip-popover-item:last-child { border-bottom: none; }
.stat-chip-popover-item:hover { background: var(--gray50); }
.stat-chip-popover-item .pi-num { font-weight: 700; font-size: 12px; flex-shrink: 0; }
.stat-chip-popover-item .pi-route { color: var(--text); flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-chip-popover-item .pi-date { font-size: 11px; color: var(--gray400); flex-shrink: 0; }

/* Trip card (list view) */
.trip-card { transition: background .12s; }
.trip-card:hover { background: var(--gray50, #f9fafb) !important; }

/* Date pill */
.trip-date-pill {
  width: 46px;
  flex-shrink: 0;
  text-align: center;
  border-radius: 8px;
  padding: 5px 4px;
  background: var(--gray100, #f3f4f6);
}
.trip-date-today {
  background: var(--gold, #FFB11A);
  color: var(--navy, #001529);
}
.trip-date-dow { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; opacity: .7; }
.trip-date-today .trip-date-dow { opacity: 1; }
.trip-date-num { font-size: 20px; font-weight: 800; line-height: 1.1; }

/* Tail number pill */
.tail-pill {
  display: inline-block;
  background: var(--navy, #001529);
  color: var(--gold, #FFB11A);
  font-family: monospace;
  font-size: 12px;
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 4px;
  letter-spacing: .04em;
  white-space: nowrap;
}

/* Schedule status badges */
.sched-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 11px;
  font-weight: 600;
  padding: 2px 7px;
  border-radius: 20px;
  white-space: nowrap;
}
.sched-badge svg { width: 11px; height: 11px; }
.sched-badge-green   { background: #e8f5e9; color: #2e7d32; border: 1px solid #a5d6a7; }
.sched-badge-amber   { background: #fff8e1; color: #b45309; border: 1px solid #fcd34d; }
.sched-badge-red     { background: #fdecea; color: #c62828; border: 1px solid #ef9a9a; }
.sched-badge-outline { background: transparent; color: var(--gray500); border: 1px solid var(--gray300); }
.sched-badge-gray    { background: var(--gray100, #f3f4f6); color: var(--gray500, #6b7280); border: 1px solid var(--gray300, #d1d5db); }

/* ── Week calendar (card-stack, no time grid) ────────────────────────────── */
.cal-week-outer {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 255px);
}

.cal-week-header-row {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  border-bottom: 2px solid var(--gray200);
  background: var(--gray50, #f9fafb);
  flex-shrink: 0;
}
.cal-week-day-hdr {
  padding: 9px 10px;
  font-size: 11px;
  font-weight: 700;
  text-align: left;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray500);
  border-left: 1px solid var(--gray100);
}
.cal-week-day-hdr:first-child { border-left: none; }
.cal-today-hdr {
  color: var(--navy, #001529);
  background: #fff8e1;
}

/* Body: 7 equal columns, stretch to fill remaining card height */
.cal-week-body {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  align-items: stretch;
  flex: 1;
}
.cal-week-day-col {
  border-left: 1px solid var(--gray100);
  padding: 6px 5px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.cal-week-day-col:first-child { border-left: none; }
.cal-today-col { background: #fffef5; }

/* Event card — normal flow, no absolute positioning */
.cal-event {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 11px;
  line-height: 1.35;
  overflow: hidden;
  text-decoration: none;
  transition: opacity .1s, box-shadow .1s;
}
.cal-event:hover { opacity: .88; box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.cal-event-event-green  { background: #e8f5e9; border-left: 3px solid #2e7d32; color: #1b5e20; }
.cal-event-event-amber  { background: #fff8e1; border-left: 3px solid #f59e0b; color: #92400e; }
.cal-event-event-red    { background: #fdecea; border-left: 3px solid #c62828; color: #b71c1c; }

/* Card interior */
.cal-event-top-row {
  display: flex;
  align-items: baseline;
  gap: 5px;
  min-width: 0;
}
.cal-event-time  { font-size: 10px; opacity: .75; white-space: nowrap; flex-shrink: 0; }
.cal-event-tail  { font-weight: 700; font-family: monospace; font-size: 11px;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.cal-event-route { font-size: 10px; opacity: .82; font-family: monospace;
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* ── Month calendar ──────────────────────────────────────────────────────── */
.cal-month-outer {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-height: calc(100vh - 220px);
}

.cal-month-header {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  background: var(--gray50, #f9fafb);
  border-bottom: 1px solid var(--gray200);
}
.cal-month-dow {
  padding: 8px 4px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gray500);
  border-right: 1px solid var(--gray100);
}

.cal-month-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-auto-rows: 1fr;   /* equal-height rows that fill the space */
  flex: 1;
}

.cal-month-cell {
  min-height: 80px;
  padding: 4px 5px 6px;
  border-right: 1px solid var(--gray100);
  border-bottom: 1px solid var(--gray100);
  vertical-align: top;
}
.cal-month-out {
  background: var(--gray50, #f9fafb);
  opacity: .5;
}
.cal-month-today {
  background: #fffef0;
  outline: 2px solid var(--gold, #FFB11A);
  outline-offset: -2px;
}

.cal-month-day-num {
  font-size: 11px;
  font-weight: 700;
  color: var(--gray400);
  text-align: right;
  margin-bottom: 3px;
}
.cal-month-today .cal-month-day-num {
  color: var(--navy, #001529);
  background: var(--gold, #FFB11A);
  border-radius: 50%;
  width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  margin-left: auto;
}

.cal-month-event {
  display: flex;
  align-items: center;
  gap: 4px;
  border-radius: 4px;
  padding: 2px 5px;
  font-size: 10px;
  font-weight: 600;
  margin-bottom: 2px;
  text-decoration: none;
  white-space: nowrap;
  overflow: hidden;
  transition: opacity .1s;
}
.cal-month-event:hover { opacity: .8; }
.cal-month-event-tail { font-family: monospace; flex-shrink: 0; }
.cal-month-event-time { font-size: 9px; opacity: .7; overflow: hidden; text-overflow: ellipsis; }

/* Month event colors — reuse cal-event- classes */
.cal-month-event.cal-event-event-green { background: #e8f5e9; color: #2e7d32; }
.cal-month-event.cal-event-event-amber { background: #fff8e1; color: #92400e; }
.cal-month-event.cal-event-event-red   { background: #fdecea; color: #b71c1c; }

/* Brokered events — muted gray, mirrors the list-view brokered card treatment.
   Defined after the color classes so it wins on equal specificity. */
.cal-event.cal-event-brokered,
.cal-month-event.cal-event-brokered {
  background: var(--gray100, #f3f4f6);
  border-left-color: var(--gray400, #9ca3af);
  color: var(--gray500, #6b7280);
  opacity: .7;
}


/* ── Waiver insight tooltip popover ─────────────────────────────── */
.waiver-tip-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}
.waiver-tip-pop {
  display: none;
  position: absolute;
  right: 0;
  bottom: calc(100% + 8px);
  background: white;
  border: 1px solid var(--gray200);
  border-radius: 8px;
  padding: 12px 14px;
  box-shadow: 0 4px 20px rgba(0,0,0,.13);
  min-width: 260px;
  white-space: nowrap;
  z-index: 300;
  font-weight: normal;
  color: var(--text-primary);
}
/* caret */
.waiver-tip-pop::after {
  content: "";
  position: absolute;
  right: 4px;
  top: 100%;
  border: 6px solid transparent;
  border-top-color: white;
}
.waiver-tip-pop::before {
  content: "";
  position: absolute;
  right: 3px;
  top: 100%;
  margin-top: 1px;
  border: 7px solid transparent;
  border-top-color: var(--gray200);
}
.waiver-tip-wrap:hover .waiver-tip-pop { display: block; }