/* =========================================================
   status_bar.css — Single unified bottom bar
   - LEFT: trade date + prepay model
   - CENTER: © Niels Rom (clickable if you make it a link)
   - RIGHT: Disclaimer
   - IMPORTANT FIX:
       Make LEFT “value” text use the exact same ink as center (Niels Rom)
       even though .status-item forces teal as the base color.
   ========================================================= */

:root{
  --statusbar-h: 34px;

  /* “Disclaimer” accent (teal) */
  --status-ink: rgba(85, 182, 211, 0.92);
  --status-ink-dim: rgba(85, 182, 211, 0.78);

  /* Center / “Niels Rom” ink (THIS is what you want to match) */
  --status-center-ink: rgba(230, 245, 255, 0.70);
}

.status-bar{
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: var(--statusbar-h);
  z-index: 5200;

  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;

  padding: 0 10px;

  background: linear-gradient(
    to top,
    rgba(6, 18, 40, 0.72),
    rgba(6, 18, 40, 0.42)
  );
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);

  border-top: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 -6px 16px rgba(0, 0, 0, 0.22);

  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
  font-size: 12px;
  letter-spacing: 0.1px;

  color: var(--status-ink-dim);
  cursor: default;
}

.status-bar:hover{
  border-top-color: rgba(85, 182, 211, 0.14);
}

/* Regions */
.status-left{
  grid-column: 1;
  justify-self: start;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

.status-center{
  grid-column: 2;
  justify-self: center;
  min-width: 0;
  color: var(--status-center-ink);
}

.status-right{
  grid-column: 3;
  justify-self: end;
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Center text */
.status-copy{
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* If you make the center a clickable .status-item (link/button),
   force it to remain the center ink (NOT teal). */
.status-center .status-item{
  color: var(--status-center-ink) !important;
}

/* =========================================================
   Clickable items
   - Base color stays teal (accent)
   - BUT the “value” text is forced to the center ink (exact match)
   ========================================================= */

.status-item{
  appearance: none !important;
  -webkit-appearance: none !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;

  font: inherit !important;
  color: var(--status-ink) !important;

  display: inline-flex;
  align-items: center;
  gap: 8px;

  height: var(--statusbar-h);
  padding: 0 10px;
  margin: 0;

  cursor: pointer;
  user-select: none;

  text-decoration: none !important;
  border-radius: 8px;
}

.status-item:hover{
  background: rgba(255, 255, 255, 0.035) !important;
  text-decoration: none !important;
}

.status-item:focus-visible{
  outline: 2px solid rgba(85, 182, 211, 0.35);
  outline-offset: -2px;
}

.status-label{
  opacity: 0.95;
  font-weight: 700;
}

/* ✅ This is the key: the date + “Book v1” should match center ink */
.status-value{
  font-weight: 800;
  color: var(--status-center-ink) !important;
  text-shadow: none;
}

/* Divider */
.status-sep{
  width: 1px;
  height: 16px;
  margin: 0 8px;

  background: rgba(255, 255, 255, 0.10);
  box-shadow: -1px 0 0 rgba(0,0,0,0.20) inset;
  border-radius: 1px;

  flex: 0 0 auto;
  pointer-events: none;
}

/* Links in status bar should not look like web links */
.status-link,
.status-link:visited,
.status-link:hover,
.status-link:active{
  color: var(--status-ink) !important;
  text-decoration: none !important;
}

/* =========================================================
   Popover link contrast fix (avoid purple visited links)
   ========================================================= */

.ui-popover a,
.ui-popover a:visited{
  color: rgba(140, 200, 255, 0.92);
  text-decoration: none;
  font-weight: 700;
}

.ui-popover a:hover{
  color: rgba(85, 182, 211, 1);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ui-popover a:focus-visible{
  outline: 2px solid rgba(85, 182, 211, 0.45);
  outline-offset: 2px;
  border-radius: 6px;
}

.ui-popover .ui-mono{
  color: rgba(230, 245, 255, 0.90);
}

.ui-popover .ui-sub{
  color: rgba(230, 245, 255, 0.78);
}

.ui-popover #contactEmailLink,
.ui-popover #contactEmailLink:visited{
  color: rgba(230, 245, 255, 0.92) !important;
}

.ui-popover #contactEmailLink:hover{
  color: rgba(85, 182, 211, 1) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* On tiny screens, drop the center copyright if space is tight */
@media (max-width: 520px){
  .status-center{ display: none; }
  .status-bar{ grid-template-columns: 1fr 1fr; }
  .status-left{ grid-column: 1; }
  .status-right{ grid-column: 2; }
}

/* Ensure page content never sits under the fixed status bar */
body{
  padding-bottom: var(--statusbar-h);
}