/* ============================================
   NXRC Track Day - Custom/Legacy Styles
   Most styles have been moved to:
   - tokens.css
   - base.css
   - components.css
   - layout.css
   - utilities.css
   ============================================ */

/* Add specific unique overrides here if absolutely necessary */
/* currently empty as all components are verified migrated */

/* ==========================================================================
   Results Page Styles & Responsive Tables
   ========================================================================== */
@keyframes pulse {

   0%,
   100% {
      opacity: 1;
   }

   50% {
      opacity: 0.5;
   }
}

.result-row {
   transition: background-color 0.3s;
}

.result-row.new-entry {
   animation: highlight 2s;
}

@keyframes highlight {
   0% {
      background-color: rgba(0, 255, 0, 0.2);
   }

   100% {
      background-color: transparent;
   }
}

/* RESPONSIVE TABLE (CARD VIEW) - Mobile Optimization */
@media screen and (max-width: 768px) {
   .container {
      padding: 1rem 0 !important;
   }

   h1 {
      font-size: 2rem !important;
   }

   /* Force table to not be like tables anymore */
   table,
   thead,
   tbody,
   th,
   td,
   tr {
      display: block;
   }

   /* Hide table headers (but not display: none;, for accessibility) */
   thead tr {
      position: absolute;
      top: -9999px;
      left: -9999px;
   }

   tr.result-row {
      border: 1px solid rgba(255, 255, 255, 0.1);
      border-radius: 12px;
      margin-bottom: 1rem;
      background: rgba(255, 255, 255, 0.03);
      padding: 1rem;
      box-shadow: 0 4px 10px rgba(0, 0, 0, 0.2);
   }

   td {
      /* Behave  like a "row" */
      border: none;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      position: relative;
      padding-left: 40% !important;
      text-align: right;
      min-height: 40px;
      display: flex;
      align-items: center;
      justify-content: flex-end;
   }

   td:last-child {
      border-bottom: 0;
   }

   td:before {
      /* Now like a table header */
      position: absolute;
      /* Top/left values mimic padding */
      left: 10px;
      width: 35%;
      padding-right: 10px;
      white-space: nowrap;
      text-align: left;
      font-weight: bold;
      color: #888;
      content: attr(data-label);
   }

   /* Specific overrides */
   td[data-label="#"] {
      padding-left: 10px !important;
      justify-content: flex-start;
      font-size: 1.5rem;
      font-weight: bold;
      border-bottom: none;
      margin-bottom: -10px;
   }

   td[data-label="#"]:before {
      display: none;
   }

   .grid-3 {
      grid-template-columns: 1fr !important;
   }

   .btn-share-facebook span {
      display: inline !important;
      /* Force show text on mobile card */
   }
}