:root {
  /* FIDS (Flight Information Display System) Colors */
  --bg-dark: #050505;
  --bg-panel: #0a0a0a;
  --row-even: #111111;
  --row-odd: #0a0a0a;
  --border: #333333;

  --led-yellow: #ffcc00;
  /* Flight Numbers / Time */
  --led-cyan: #00ffff;
  /* Destination */
  --led-white: #ffffff;
  /* General Info */
  --led-green: #33ff33;
  /* Safe / On Time */
  --led-red: #ff3333;
  /* Cancelled / Alert */
  --led-orange: #ff9900;
  /* Delayed / Boarding */
  --led-dim: #666666;
  /* Departed / Landed */
}

@font-face {
  font-family: 'DepartureMono';
  src: local('Consolas'), local('Monaco'), local('Courier New');
}

html,
body {
  margin: 0;
  padding: 0;
  background-color: var(--bg-dark);
  color: var(--led-white);
  font-family: 'DepartureMono', monospace;
  height: 100%;
  overflow: hidden;
}

header {
  background: var(--bg-panel);
  border-bottom: 3px solid var(--border);
  padding: 10px 20px;
  position: relative;
  z-index: 100;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.8);
}

.title-area {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10px;
}

h1 {
  margin: 0;
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--led-cyan);
  text-transform: uppercase;
}

.controls {
  display: flex;
  gap: 15px;
  align-items: center;
}

button {
  background: #222;
  border: 1px solid var(--border);
  color: var(--led-white);
  padding: 6px 12px;
  cursor: pointer;
  font-family: inherit;
  font-weight: bold;
  transition: all 0.2s;
  text-transform: uppercase;
  font-size: 12px;
}

button:hover {
  background: #333;
  border-color: var(--led-cyan);
}

button.primary {
  border-color: var(--led-yellow);
  color: var(--led-yellow);
}

button.active {
  background: var(--led-yellow);
  color: black;
}

.head {
  display: flex;
  background: #1a1a1a;
  padding: 8px 10px;
  border-bottom: 2px solid var(--border);
  font-weight: bold;
  color: var(--led-dim);
  text-transform: uppercase;
  font-size: 11px;
}

.row {
  display: flex;
  padding: 10px;
  border-bottom: 1px solid #111;
  align-items: center;
  font-size: 14px;
  letter-spacing: 1px;
}

.row:nth-child(even) {
  background: var(--row-even);
}

.row:nth-child(odd) {
  background: var(--row-odd);
}

.row.departed {
  opacity: 0.4;
  color: var(--led-dim);
}

/* Column Widths */
.cell-time {
  width: 55px;
  color: var(--led-yellow);
  font-weight: bold;
}

.cell-airport {
  width: 50px;
  color: var(--led-white);
  font-size: 12px;
}

.cell-dest {
  flex: 1;
  color: var(--led-cyan);
  font-weight: 900;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.cell-flight {
  width: 90px;
  color: var(--led-yellow);
  text-align: center;
}

.cell-status {
  width: 100px;
  text-align: right;
}

/* Status Styles */
.status-text {
  font-weight: bold;
  text-transform: uppercase;
  font-size: 11px;
  border: 1px solid transparent;
  padding: 2px 4px;
  border-radius: 2px;
}

.st-scheduled {
  color: var(--led-white);
  border-color: #444;
}

.st-active {
  color: var(--led-green);
  border-color: var(--led-green);
}

.st-landed {
  color: var(--led-dim);
  border-color: var(--led-dim);
}

.st-cancelled {
  color: var(--led-red);
  border-color: var(--led-red);
}

.st-delayed {
  color: var(--led-orange);
  border-color: var(--led-orange);
}

.meta-info {
  display: flex;
  gap: 20px;
  font-size: 12px;
  color: var(--led-dim);
}

.meta-info b {
  color: var(--led-white);
}