:root {
  --accent: #0d6efd;
  --card-radius: 12px;
}

body { background: #f0f2f5; }
body.dark-mode { background: #0b1220; color: #e5e7eb; }
body.dark-mode .card { background: #111827; border-color: #1f2937; color: #e5e7eb; }
body.dark-mode .table { color: #e5e7eb; }
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > * { background-color: #0f172a; color: #e5e7eb; }
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > * { background-color: #111827; color: #e5e7eb; }
body.dark-mode .table thead th { background: #1e3a5f; color: #f9fafb; }
body.dark-mode .form-control, body.dark-mode .form-select { background: #1f2937; color: #e5e7eb; border-color: #374151; }
body.dark-mode .navbar { background: #111827 !important; }
body.dark-mode .navbar-brand { color: #f9fafb !important; }
body.dark-mode .text-muted { color: #cbd5e1 !important; }

.placeholder-text { color: #64748b; font-weight: 500; }
body.dark-mode .placeholder-text { color: #cbd5e1; }

.navbar-brand { font-weight: 700; font-size: 1.3rem; letter-spacing: -.5px; }
.card { border-radius: var(--card-radius); border: 1px solid #e5e7eb; }
.section-title { font-size: 1rem; font-weight: 700; margin-bottom: .75rem; }
.refresh-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #22c55e; margin-right: 5px; animation: blink 2s infinite; }
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }
.table thead th { font-size: .82rem; text-transform: uppercase; letter-spacing: .03em; }
.table td { font-size: .88rem; vertical-align: middle; }
.countdown { font-size: .78rem; color: #6b7280; }
.name-subline { font-size: .76rem; color: #64748b; margin-top: 1px; }
body.dark-mode .name-subline { color: #94a3b8; }

.flight-row { cursor: pointer; }
.flight-row > td { transition: background-color .18s ease; }
.flight-row:hover > * { background-color: #e8eefc !important; }
body.dark-mode .flight-row:hover > * { background-color: #1d2a44 !important; }
.flight-row.active > * { background-color: #dce8ff !important; }
body.dark-mode .flight-row.active > * { background-color: #22314f !important; }

.flight-detail-cell { padding: .6rem .75rem !important; }
.flight-detail-box {
  border: 1px solid #dbe7ff;
  background: linear-gradient(145deg, #f8fbff, #eef4ff);
  border-radius: 10px;
  padding: .7rem;
  color: #334155;
}
.flight-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: .45rem;
}
.detail-item {
  background: rgba(255, 255, 255, .72);
  border: 1px solid #dbeafe;
  border-radius: 8px;
  padding: .42rem .52rem;
  min-height: 54px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.detail-label {
  font-size: .66rem;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: #64748b;
  margin-bottom: .1rem;
}
.detail-value {
  font-size: .83rem;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.2;
  word-break: break-word;
}
.detail-value.mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  font-size: .78rem;
}
.detail-value.alert {
  color: #b91c1c;
}
body.dark-mode .flight-detail-box {
  background: linear-gradient(145deg, #0f172a, #111b31);
  border-color: #263449;
  color: #cbd5e1;
}
body.dark-mode .detail-item {
  background: rgba(15, 23, 42, .85);
  border-color: #334155;
}
body.dark-mode .detail-label {
  color: #94a3b8;
}
body.dark-mode .detail-value {
  color: #e2e8f0;
}
body.dark-mode .detail-value.alert {
  color: #fca5a5;
}

.detail-row { display: none; }
.detail-row.open { display: table-row; }