/* --------------------------------------------------------------
   Reset (keep it simple)
-------------------------------------------------------------- */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --------------------------------------------------------------
   Global basics
-------------------------------------------------------------- */
html { font-size: 100%; }

body {
  font-family: Arial, Helvetica, sans-serif;
  margin: 0;
  padding: 0;
  line-height: 1.5;
  color: #e0e0ff;                /* primary text */
  background: #1e1e2f;           /* dark‑mode base */
}

/* --------------------------------------------------------------
   Wave background container – fixed, full‑screen, behind content
-------------------------------------------------------------- */
.wave-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100vh;
  background: #1e1e2f;           /* keep same base as body */
  overflow: hidden;
  z-index: -1;
  pointer-events: none;
}

/* --------------------------------------------------------------
   Individual wave layers (unchanged – you can keep the original
   opacities/animations; they’ll now sit on a darker canvas)
-------------------------------------------------------------- */
.wave-bg .air {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100px;
  background-image: url(
    https://media.badgumby.com/images/wave.png
  );
  background-size: 1000px 100px;
}
.wave-bg .air1 { animation: wave 30s linear infinite; z-index: 1000; opacity: 1; }
.wave-bg .air2 { animation: wave2 15s linear infinite; z-index: 999; opacity: 0.5; animation-delay: -5s; bottom: 10px; }
.wave-bg .air3 { animation: wave 30s linear infinite; z-index: 998; opacity: 0.2; animation-delay: -2s; bottom: 15px; }
.wave-bg .air4 { animation: wave2 5s linear infinite; z-index: 997; opacity: 0.7; animation-delay: -5s; bottom: 20px; }

@keyframes wave  { from { background-position-x: 0; } to { background-position-x: 1000px; } }
@keyframes wave2 { from { background-position-x: 0; } to { background-position-x: -1000px; } }

/* --------------------------------------------------------------
   Layout wrapper (flex column)
-------------------------------------------------------------- */
.wrapper {
  position: relative;   /* ensures it sits above the wave bg */
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  max-width: 960px;
  margin: 0 auto;
  padding: 0 1rem;
}

/* --------------------------------------------------------------
   Search box
-------------------------------------------------------------- */
#search {
  width: 100%;
  max-width: 480px;
  padding: 0.75rem 1rem;
  font-size: 1rem;
  border: 1px solid #4db6ac;          /* accent border */
  border-radius: 4px;
  background: #2a2a3d;                /* dark input bg */
  color: #e0e0ff;
  box-sizing: border-box;
}
#search::placeholder { color: #a0a0c0; }
#search:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(77,182,172,.4);   /* teal glow */
}

/* --------------------------------------------------------------
   Table container (horizontal scroll)
-------------------------------------------------------------- */
.table-wrapper {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------
   Table styling
-------------------------------------------------------------- */
#mediaTable {
  min-width: 600px;
  width: 100%;
  border-collapse: collapse;
}

/* Header */
th {
  background: rgba(77,182,172,.15);   /* subtle teal */
  color: #e0e0ff;
  border: 1px solid #44475a;
  padding: 0.75rem;
  text-align: left;
}

/* Body cells */
td {
  border: 1px solid #44475a;
  padding: 0.75rem;
  color: #e0e0ff;
}

/* Row hover / active */
tr:hover,
tr:active {
  background: rgba(77,182,172,.08);
}

/* Hidden rows (filtering) */
tr.hidden { display: none; }

/* --------------------------------------------------------------
   Responsive tweaks
-------------------------------------------------------------- */
@media (max-width: 480px) {
  th, td {
    padding: 0.5rem;
    font-size: 0.9rem;
  }
}
@media (max-width: 360px) {
  h1 { font-size: 1.5rem; }
}

/* --------------------------------------------------------------
   Accessibility – minimum touch target size
-------------------------------------------------------------- */
button,
.icon {
  min-width: 44px;
  min-height: 44px;
  line-height: 44px;
}

/* --------------------------------------------------------------
   Optional – nice subtle text‑shadow for extra depth
-------------------------------------------------------------- */
body { text-shadow: 1px 1px 2px rgba(0,0,0,.4); }