/* ============================
   Global Reset + Body Styling
   ============================ */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: #111;
  color: #eee;
  font-family: 'JetBrains Mono', monospace;
  line-height: 1.4;
  /*overflow: hidden;  Prevents horizontal scrollbars */
  overflow-y: scroll;
}

.page-title {
  text-align: center;
  padding: 16px 0;
}

/* Set the gap width here (adjust as needed) */
:root {
  --ticker-gap: 2rem;
}

/* ============================
   TICKER BAR STYLES (with gap)
   ============================ */
/* 1) The outer wrapper hides overflow so we only ever see 100vw worth of content */
.ticker-wrapper {
  width: 100%;
  overflow: hidden;
  background: #FEFFF9;
  border-top: 1px solid #333;
  border-bottom: 1px solid #333;
  height: 50px;
  display: flex;
  align-items: center;
}

/* 
   2) .ticker is exactly (100vw + gap) × 2 wide. We animate it left by (100vw + gap).
      That ensures after one “sequence” scrolls off, there’s a fixed gap, then the next sequence begins.
*/
.ticker {
  position: relative;
 /* width: 100%;*/
  height: 100%;
}

/* 
   3) Each .sequence is (100vw + gap) wide, but we add padding-right: var(--ticker-gap) 
      so that the content area where items are spaced is exactly 100vw.
      justify-content: space-between then distributes items evenly in that 100vw region.
*/
.sequence {
  position: absolute;
  top: 0;
  left: 0;
  display: flex;
  white-space: nowrap;
  will-change: transform;
  align-items: center;
  height: 100%;
  /* Remove CSS animation for JS-driven transform scroll */
}

/* 4) Style for each item inside the ticker */
.ticker-item {
  white-space: nowrap;     /* Prevent wrapping */
  font-size: 0.95rem;
  padding-left: 1.5rem; /* Small left padding for spacing */
    padding-right: 1.5rem; /* Small right padding for spacing */
  display: flex;
  align-items: center;
  height: 100%;
  color: #000000;
}

.ticker-logo { /* Adjust logo size */
  height: 24px; /* Adjust logo size */
  margin-right: 1.0rem; /* Space between logo and text */
  margin-left: 1.0rem;
  filter: invert(1); /* Invert colors for dark mode */
}

/* 5) Keyframe: move .ticker from 0 → −(100vw + gap). That shift reveals the second copy 
      precisely after one copy plus the gap has scrolled off. */
@keyframes ticker-scroll {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(calc(-100vw - var(--ticker-gap)));
  }
}

@keyframes ticker-scroll-linear {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* 6) Optional: pause the ticker on hover */
.ticker-wrapper:hover .ticker {
  animation-play-state: paused;
}

/* ============================
   END of TICKER‐BAR styles.css
   ============================ */

/* ============================
   TABLE STYLES (STATIC HEADER)
   ============================ */
table {
  border-collapse: separate;
  border-spacing: 0;
  min-width: 100%;
  table-layout: fixed;
  margin-top: 8px; /* small gap below ticker */
}

/* Static thead row */
thead {
  background: #181818;
  position: sticky;   /* if you want it to “stick” when the page scrolls vertically */
  top: 0;             /* sticks to the top of the viewport */
  z-index: 5;
}

th {
  padding: 8px 12px;
  text-align: left;
  border-bottom: 1px solid #181818;
 /*white-space: nowrap;*/
  font-size: 0.95rem;
  border-right: solid 1px #2a2a2a; 
  border-left: solid 1px #2a2a2a;
}

/* Leave tbody as normal table rows so columns line up */
tbody tr:nth-child(even) {
  background: #181818;
}

tbody tr:nth-child(odd) {
  background: #000000;
}


td {
  padding: 8px 12px;
  text-align: left;
  /*border-bottom: 1px solid #333;*/
  white-space: nowrap !important;
  font-size: 0.9rem;
  border-right: solid 1px #2a2a2a; 
  border-left: solid 1px #2a2a2a;
  border-top: solid 1px #2a2a2a;
  border-bottom: solid 1px #2a2a2a;
  font-weight: 300;
}

/* Loading placeholder */
.loading-cell {
  text-align: center;
  padding: 24px;
  font-style: italic;
}

/* Color classes for “Daily Swing” cell */
.swing-up {
  color: #0f0;
}

.swing-down {
  color: #f33;
}

.floating-pill-btn {
  position: fixed;
  bottom: 20px;              /* 20px above the bottom of the viewport */
  left: 50%;                 /* center horizontally */
  transform: translateX(-50%);
  background-color: #fff;    /* solid white background */
  color: #000;               /* black text */
  font-family: 'JetBrains Mono', monospace; /* or your preferred font */
  font-size: 1.0rem;        /* adjust font size as needed */
  font-weight: 600;
  line-height: 1;            /* ensures correct vertical centering */
  padding: 12px 32px;        /* 12px top/bottom, 32px left/right */
  border: 2px solid #007AFF; /* iOS‐style blue border; adjust hex if you have a specific blue */
  border-radius: 9999px;     /* makes it fully pill-shaped */
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* subtle drop shadow */
  cursor: pointer;
  z-index: 999;              /* ensure it sits above other content */
  transition: background-color 0.2s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease;
}

/* Hover state: raise slightly and darken the border */
.floating-pill-btn:hover {
  background-color: #f9f9f9;          /* very light gray on hover */
  transform: translateX(-50%) translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border-color: #005BBB;             /* slightly darker blue on hover */
}

/* Active (pressed) state: press back down */
.floating-pill-btn:active {
  background-color: #f1f1f1;
  transform: translateX(-50%) translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-color: #004C99;
}

/* ============================
   OPTIONAL SCROLLBAR FOR TALL TABLES
   ============================ */
/* 
   If your table’s body becomes taller than the viewport and you want 
   a vertical scrollbar on <tbody> alone, you can do something like:

tbody {
  display: block;
  max-height: 60vh;
  overflow-y: auto;
}

tbody tr {
  display: table;
  width: 100%;
  table-layout: auto;
}
*/

.table-container {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

.footer-fixed {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  padding: 12px 0 8px 0;
  display: grid;
  justify-items: center;
  row-gap: 6px;
  pointer-events: none; /* ensures background content isn't blocked */
}

.footer-fixed > * {
  pointer-events: auto; /* re-enable interactivity for children */
}

.footer-button {
  background-color: #fff;
  color: #000;
  font-family: 'JetBrains Mono', monospace;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1;
  padding: 12px 32px;
  border: 2px solid #ffffff;
  border-radius: 9999px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: background-color 0.2s ease,
              transform 0.2s ease,
              box-shadow 0.2s ease;
}

.footer-button:hover {
  background-color: #d2d2d2;
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25);
  border-color: #b8b8b8;
}

.footer-button:active {
  background-color: #f1f1f1;
  transform: translateY(0);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
  border-color: #ffffff;
}

.footer-links {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  color: #696969;
}

.footer-links a {
  color: #494949;
  text-decoration: none;
}

.footer-links a:hover {
  text-decoration: underline;
}

/* ============================
   END OF styles.css
   ============================ */
@media only screen 
  and (max-width: 768px) /* you can adjust “768px” if you want a stricter mobile cutoff */
  and (orientation: portrait) {
    body {
    background: #111;
    color: #eee;
    font-family: 'JetBrains Mono', monospace;
    line-height: 1.4;
    overflow: scroll; /* Prevents horizontal scrollbars */
    }
}

.img-invert {
  filter: invert(1);
}

/* Styling for the Drop button */
.drop-button {
  background-color: #ff4d4d; /* Red background */
  color: white; /* White text */
  border: none; /* Remove default border */
  border-radius: 4px; /* Rounded corners */
  padding: 8px 12px; /* Padding for size */
  cursor: pointer; /* Pointer cursor on hover */
  font-size: 14px; /* Font size */
  transition: background-color 0.3s ease; /* Smooth hover effect */
}

.drop-button:hover {
  background-color: #e60000; /* Darker red on hover */
}