/* ============================================================
   MAIN.CSS — Base styles, layout, animations, responsive
   Airbus A350 cockpit theme
   ============================================================ */

/* ── Google Fonts ── */
@import url('https://fonts.googleapis.com/css2?family=B612:ital,wght@0,400;0,700;1,400&family=B612+Mono:ital,wght@0,400;0,700;1,400&display=swap');

/* ── Custom properties ── */
:root {
  --bg:          #6b7388;
  --surface:     #0d1017;
  --border:      #1a2d45;
  --border-dim:  #0f1e2d;
  --accent:      #00b4ff;
  --green:       #00ff6a;
  --green-dim:   #00c44f;
  --magenta:     #ff2fff;
  --amber:       #D3C83B;
  --red:         #ff3333;
  --white:       #e8f0f8;
  --muted:       #3a5068;
  --separator:   #2a3d55;
  --text-muted:  #7a8a9e;
  --inset:       #1a1e28;
  --mono:        'B612 Mono', monospace;
  --sans:        'B612', sans-serif;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

a, button, [role="button"], .fms-tab, .fpln-row, .perf-row,
[style*="cursor: pointer"], [onclick] {
  cursor: url('../gfx/cursor.svg') 16 16, pointer !important;
}

html, body {
  height: 100%;
  background: linear-gradient(180deg, #78808e 0%, #505a6e 50%, #3e4758 100%);
  color: var(--white);
  font-family: var(--mono);
  overflow-x: hidden;
  cursor: url('../gfx/cursor.svg') 16 16, crosshair;
}

/* ── Page layout ── */
.page {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  display: grid;
  grid-template-rows: auto 1fr auto;
}

/* ============================================================
   TOP BAR
   ============================================================ */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  padding: .5rem 1.5rem;
  border-bottom: 1px solid var(--border);
  background: rgba(11, 15, 20, .95);
  font-size: .92rem;
  letter-spacing: .12em;
  color: var(--muted);
  gap: 1rem;
  flex-wrap: wrap;
}

.topbar .callsign {
  color: var(--surface);
  background-color: var(--white);
  font-weight: 700;
  letter-spacing: .22em;
  font-size: 1.3rem;
  padding: 3px 6px;
}

.topbar .status {
  display: flex; gap: 1.4rem; align-items: center;
}

.topbar .status .dot {
  display: inline-block; width: 6px; height: 6px; border-radius: 50%;
  background: var(--green); margin-right: .4em;
  box-shadow: 0 0 6px var(--green);
  animation: blink 2s ease-in-out infinite;
}

.topbar .ap-label {
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: .1rem .4rem;
  font-size: .6rem;
  letter-spacing: .15em;
}

.topbar .clock { color: var(--white); }
.topbar .topbar-route { color: var(--white); letter-spacing: .1em; }

@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.25} }

/* ============================================================
   MAIN LAYOUT
   ============================================================ */
main {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2rem 1rem 2rem;
  gap: 2rem;
}

/* ============================================================
   FOOTER
   ============================================================ */
footer {
  border-top: 1px solid var(--border);
  background: rgba(11, 15, 20, .9);
  padding: .6rem 1.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .58rem;
  letter-spacing: .1em;
  color: var(--muted);
  flex-wrap: wrap;
  gap: .4rem;
  margin-top: auto;
}

footer .freq { color: var(--amber); }

/* ============================================================
   ANIMATIONS
   ============================================================ */
@keyframes fadein {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

.pfd-container { animation: fadein .8s .1s ease both; }
.apps-section { animation: fadein .8s .3s ease both; }

/* ============================================================
   RESPONSIVE
   ============================================================ */

/* ── Tablet / small desktop ── */
@media (max-width: 640px) {
  main { padding: 1rem .5rem; gap: 1.2rem; }

  /* PFD scales down on mobile */
  .pfd-container { max-width: 100%; }

  /* FMS strip adapts */
  .fms-strip { max-width: 100%; }

  .fms-tab {
    font-size: .6rem;
    padding: .3rem .2rem;
    letter-spacing: .08em;
  }

  .fms-data-row { flex-wrap: wrap; }

  .fms-cell {
    flex: 1 1 30%;
    padding: .3rem .4rem;
    font-size: .85rem;
  }

  .fms-label { font-size: .55rem; }
  .fms-value { font-size: .8rem; }

  .fma-row { font-size: .48rem; }

  .apps-grid { grid-template-columns: 1fr 1fr; }
}

/* ── Mobile ── */
@media (max-width: 400px) {
  main { padding: .8rem .4rem; gap: 1rem; }

  .fms-tab {
    font-size: .52rem;
    padding: .25rem .1rem;
    letter-spacing: .06em;
  }

  .fms-cell { flex: 1 1 45%; }
  .fms-value { font-size: .72rem; }

  .apps-grid { grid-template-columns: 1fr; }
  .topbar .status { gap: .7rem; font-size: .58rem; }
}