/* ============================================
   TABLE STYLES - Reusable Data Table Theme
   ============================================ */

.data-table-card {
  background: rgba(8, 24, 56, 0.5);
  border: 1px solid rgba(173, 205, 255, 0.2);
  color: var(--app-text);

  > .card-body {
    background: var(--app-bg-elevated);
  }
}

.data-table-header {
  background: rgba(27, 56, 108, 0.45);
  border-bottom: 1px solid rgba(173, 205, 255, 0.2);
  color: var(--app-text);
  font-weight: 600;
}

.data-table-body {
  background: var(--app-bg-elevated);
  height: 100%;
  min-height: 0;
}

.data-table-scroll {
  height: 100%;
  max-height: 100%;
  overflow-y: auto;
}

.data-table {
  color: var(--app-text);

  thead th {
    position: sticky;
    top: 0;
    z-index: 2;
    background: rgba(13, 36, 82, 0.95);
    border-color: rgba(173, 205, 255, 0.18);
    color: var(--app-text);
  }

  td {
    border-color: rgba(173, 205, 255, 0.12);
    vertical-align: middle;
    cursor: pointer;
  }

  tr.is-selected td {
    background: rgba(102, 157, 255, 0.34);
    color: #f2f7ff;
  }

  tr.is-selected a,
  tr.is-selected a:hover {
    color: var(--app-accent-yellow);
  }

  tr:hover td {
    background: rgba(102, 157, 255, 0.08);
    color: var(--app-text);
  }

  tr:hover .callsign {
    color: var(--app-accent-yellow);
    background-color: var(--app-blue-dark);
    border-color: var(--app-accent-yellow);
  }

}
