/* style.css — thème radar professionnel (inspiration client contrôleur classique :
   surfaces plates, gris neutres, datablocks verts, police fixe partout) */

:root {
  --bg: #000000;
  --chrome: #2e3236;        /* barres et panneaux, gris ES */
  --chrome2: #24272a;
  --btn: #3a3f44;
  --btn-hi: #4a5056;
  --line: #17191b;
  --text: #d8dcdf;
  --dim: #8f979e;
  --green: #3fd23f;         /* datablocks / assumed */
  --green-dim: #2a8f2a;
  --white: #ffffff;
  --amber: #e8b23d;
  --red: #e04f4f;
  --cyan: #58c6e8;
  --sel: #ffffff;
}

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

body {
  background: var(--bg);
  color: var(--text);
  height: 100vh;
  overflow: hidden;
  font-family: 'Consolas', 'Lucida Console', monospace;
  font-size: 13px;
}

h1 { font-size: 18px; letter-spacing: 2px; font-weight: 700; }
h2 {
  font-size: 12px; color: var(--dim); margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: 2px;
  border-bottom: 1px solid var(--btn); padding-bottom: 4px;
}

button {
  background: var(--btn);
  border: 1px solid #1c1e20;
  border-top-color: #565c62;
  border-left-color: #565c62;
  color: var(--text);
  padding: 5px 12px;
  cursor: pointer;
  font-family: inherit;
  font-size: 12px;
  border-radius: 0;
}
button:hover { background: var(--btn-hi); }
button:active { border-top-color: #1c1e20; border-left-color: #1c1e20; border-bottom-color: #565c62; border-right-color: #565c62; }
button.primary { background: #2f5e2f; border-top-color: #4f8f4f; border-left-color: #4f8f4f; color: #d8ffd8; }
button.small { padding: 2px 8px; font-size: 11px; }
button.active { background: #1f3f1f; color: var(--green); }
button.danger { color: #ffb0b0; }

select, input[type="text"], textarea {
  background: #0e1012;
  border: 1px solid #1c1e20;
  border-top-color: #000;
  color: var(--text);
  padding: 6px 8px;
  font-family: inherit;
  font-size: 12px;
  width: 100%;
  border-radius: 0;
}
textarea { resize: vertical; }
label { color: var(--dim); font-size: 11px; display: block; margin: 10px 0 3px; text-transform: uppercase; letter-spacing: 1px; }

.hidden { display: none !important; }

/* ---------- setup ---------- */
#setup {
  max-width: 720px;
  margin: 0 auto;
  padding: 66px 24px 40px;
  height: 100vh;
  overflow-y: auto;
}
/* SaaS header — fixed full-width bar (only visible on the setup screen) */
.setup-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 30;
  height: 46px; display: flex; align-items: center; gap: 14px; padding: 0 16px;
  background: linear-gradient(#20252a, #181c20);
  border-bottom: 2px solid #000;
}
.setup-nav .sn-home { display: flex; align-items: center; gap: 12px; text-decoration: none; }
.setup-nav .sn-brand { color: var(--green); font-weight: 700; letter-spacing: 2px; font-size: 13px; }
.setup-nav .sn-back { color: var(--dim); font-size: 11px; }
.setup-nav .sn-home:hover .sn-back { color: var(--text); }
.setup-nav .sn-spacer { flex: 1; }
@media (max-width: 480px) { .setup-nav .sn-back { display: none; } }
#setup header { margin-bottom: 20px; }
#setup header p { color: var(--dim); margin-top: 6px; font-size: 12px; }
.card {
  background: var(--chrome2);
  border: 1px solid #1c1e20;
  border-top-color: #3a3f44;
  padding: 14px 16px;
  margin-bottom: 12px;
}
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.checks { display: flex; gap: 16px; margin-top: 6px; }
.checks label { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: var(--text); text-transform: none; }
.metar-raw { color: var(--green); font-size: 12px; margin-top: 8px; word-break: break-all; }
.atis-feedback { font-size: 12px; margin-top: 8px; }
.atis-feedback ul { margin: 4px 0 0 18px; color: var(--amber); }
.footer-note { color: #5a6168; font-size: 10px; margin-top: 16px; text-align: center; line-height: 1.6; }

/* ---------- session ---------- */
#session { display: flex; flex-direction: column; height: 100vh; }

#topbar {
  display: flex;
  align-items: stretch;
  gap: 1px;
  background: var(--chrome);
  border-bottom: 2px solid #000;
  flex-wrap: wrap;
  padding: 0;
}
#topbar > * { display: flex; align-items: center; }
#topbar .cell {
  padding: 6px 10px;
  background: var(--chrome);
  color: var(--text);
  font-size: 12px;
  border-right: 1px solid #1c1e20;
  white-space: nowrap;
}
#topbar .cell.dim { color: var(--dim); }
#topbar .cell b { color: var(--green); margin-left: 4px; }
#topbar .spacer { flex: 1; background: var(--chrome); }
#topbar button { border-radius: 0; height: 100%; }

#main { flex: 1; display: flex; min-height: 0; }

#canvasWrap { flex: 1; position: relative; background: var(--bg); border-right: 2px solid var(--chrome); }
#radar { width: 100%; height: 100%; display: block; cursor: crosshair; }
#zoomCtl {
  position: absolute; right: 8px; top: 8px;
  display: flex; flex-direction: column; gap: 1px;
}

#sidebar {
  width: 420px;
  display: flex;
  flex-direction: column;
  background: var(--chrome2);
  min-height: 0;
}

.panelTitle {
  background: var(--chrome);
  color: var(--dim);
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  padding: 3px 8px;
  border-top: 1px solid #3a3f44;
  border-bottom: 1px solid #000;
  user-select: none;
}

#strips {
  max-height: 30%;
  overflow-y: auto;
  background: #0b0d0e;
}
table.list { width: 100%; border-collapse: collapse; font-size: 11px; }
table.list td {
  padding: 2px 6px;
  border-bottom: 1px solid #17191b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
table.list tr { cursor: pointer; }
table.list tr:hover td { background: #16191c; }
table.list tr.sel td { background: #223126; }
table.list td.cs { color: var(--green); font-weight: 700; width: 68px; }
table.list tr.arr td.cs { color: var(--cyan); }
table.list td.ty { color: var(--dim); width: 46px; }
table.list td.st { color: var(--text); }
table.list td.sta { color: var(--amber); width: 38px; text-align: right; }
table.list tr.pending td.st { color: var(--amber); animation: blink 1.2s infinite; }
table.list tr.rberr td.st::after { content: ' RB?'; color: var(--red); font-weight: 700; }
@keyframes blink { 50% { opacity: 0.45; } }
.emptyList { color: #4a5158; font-size: 11px; padding: 6px 8px; }

#quickbar {
  padding: 6px;
  background: var(--chrome2);
  border-bottom: 1px solid #000;
  min-height: 58px;
}
#quickbar .who { color: var(--green); font-size: 12px; font-weight: 700; margin-bottom: 5px; }
#quickbar .who .info { color: var(--dim); font-weight: 400; }
#quickbar .btns { display: flex; flex-wrap: wrap; gap: 4px; }
#quickbar .btns button { font-size: 11px; padding: 4px 8px; }
#quickbar .btns button.rb { color: #ffb0b0; }
#quickbar .hint { color: #4a5158; font-size: 10px; margin-top: 5px; }

#radioLog {
  flex: 1;
  overflow-y: auto;
  padding: 6px 8px;
  font-size: 12px;
  line-height: 1.5;
  background: #0b0d0e;
}
#radioLog .pilot { color: var(--text); }
#radioLog .pilot.offfreq { color: #4d565e; } /* transmission sur une autre fréquence */
#radioLog .user { color: var(--cyan); }
#radioLog .auto { color: #5f6a72; font-style: italic; }
#radioLog .event-warn { color: var(--amber); }
#radioLog .event-severe { color: var(--red); font-weight: 700; }
#radioLog .event-good { color: var(--green); }
#radioLog .t { color: #3d444a; margin-right: 6px; }

#inputBar { padding: 6px; background: var(--chrome2); border-top: 1px solid #3a3f44; }
#cmdFeedback { font-size: 11px; color: var(--dim); margin-top: 4px; min-height: 14px; }
#cmdFeedback .good { color: var(--green); }
#cmdFeedback .warn { color: var(--amber); }
#cmdFeedback .bad { color: var(--red); }

#cheatsheet {
  font-size: 11px;
  color: var(--dim);
  padding: 6px 8px;
  border-top: 1px solid #000;
  display: none;
  line-height: 1.6;
  max-height: 170px;
  overflow-y: auto;
  background: #0b0d0e;
}
#cheatsheet.open { display: block; }
#cheatsheet b { color: var(--green); }

/* ---------- scénarios & progression ---------- */
#scenarioList { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.scen {
  background: #0e1012;
  border: 1px solid #1c1e20;
  padding: 8px 10px;
  cursor: pointer;
}
.scen:hover { border-color: var(--dim); }
.scen.sel { border-color: var(--green); background: #10190f; }
.scen .scenTitle { color: var(--green); font-weight: 700; font-size: 12px; }
.scen .scenDesc { color: var(--dim); font-size: 11px; margin: 3px 0; line-height: 1.4; }
.scen .scenMeta { color: #5a6168; font-size: 10px; }
.scenGoals { font-size: 11px; color: var(--dim); margin-top: 8px; }
.scenGoals ul { margin: 4px 0 0 18px; }
#historyBox { font-size: 11px; }
#historyBox table.list td { color: var(--dim); }
#historyBox table.list td:first-child { color: var(--text); }

/* ---------- PDC ---------- */
#pdcPanel {
  position: absolute;
  left: 8px; top: 8px;
  width: 360px;
  max-height: calc(100% - 16px);
  overflow-y: auto;
  background: var(--chrome2);
  border: 1px solid #3a3f44;
  z-index: 10;
  font-size: 11px;
}
#pdcPanel .pdcTitle {
  background: var(--chrome);
  padding: 4px 8px;
  color: var(--green);
  font-weight: 700;
  letter-spacing: 2px;
  display: flex;
  justify-content: space-between;
}
#pdcPanel .pdcTitle button { padding: 0 6px; font-size: 11px; }
.pdcItem { border-bottom: 1px solid #17191b; padding: 6px 8px; }
.pdcItem .pdcHead { color: var(--green); font-weight: 700; margin-bottom: 4px; }
.pdcItem .pdcHead .dim { color: var(--dim); font-weight: 400; }
.pdcForm { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; margin-bottom: 5px; }
.pdcForm label { margin: 0; display: inline; font-size: 10px; }
.pdcForm input { width: 58px; padding: 2px 4px; font-size: 11px; }
.pdcForm input[data-f="atis"] { width: 26px; text-transform: uppercase; }
.pdcForm input[data-f="squawk"] { width: 44px; }
.pdcPreview {
  background: #0b0d0e;
  border: 1px solid #17191b;
  color: #9fb6a4;
  padding: 5px 7px;
  white-space: pre;
  font-size: 10px;
  line-height: 1.45;
  margin-top: 4px;
}
.pdcErr { color: var(--red); font-size: 10px; margin-top: 3px; }
.pdcSentItem { color: #5f6a72; padding: 3px 8px; border-bottom: 1px solid #141618; }
.pdcEmpty { color: #4a5158; padding: 8px; }
button.alert { background: #4a2020; color: #ffb0b0; border-top-color: #7a3a3a; border-left-color: #7a3a3a; }

/* ---------- debrief ---------- */
#debriefModal {
  position: fixed; inset: 0;
  background: rgba(0, 0, 0, 0.82);
  display: flex; align-items: center; justify-content: center;
  z-index: 50;
}
#debriefCard {
  background: var(--chrome2);
  border: 1px solid #3a3f44;
  width: 640px;
  max-height: 85vh;
  overflow-y: auto;
  padding: 22px;
}
.gradeRow { display: flex; align-items: center; gap: 18px; margin-bottom: 14px; }
.gradeBig {
  font-size: 46px; font-weight: 800; width: 78px; height: 78px;
  display: flex; align-items: center; justify-content: center;
  background: #0b0d0e; border: 2px solid var(--green);
}
.gradeBig.A, .gradeBig.B { color: var(--green); border-color: var(--green); }
.gradeBig.C { color: var(--amber); border-color: var(--amber); }
.gradeBig.D, .gradeBig.F { color: var(--red); border-color: var(--red); }
.scoreGrid { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 6px; margin-bottom: 14px; }
.scoreGrid .cell { background: #0b0d0e; padding: 8px; text-align: center; border: 1px solid #17191b; }
.scoreGrid .cell .v { font-size: 18px; font-weight: 700; color: var(--green); }
.scoreGrid .cell .k { font-size: 10px; color: var(--dim); text-transform: uppercase; }
#debriefCard h3 { font-size: 11px; color: var(--dim); margin: 12px 0 6px; text-transform: uppercase; letter-spacing: 2px; }
#debriefCard ul { margin-left: 18px; font-size: 12px; line-height: 1.6; }
#debriefCard li.sev { color: var(--red); }
#debriefCard li.warn { color: var(--amber); }
.worstCmd { color: var(--dim); font-size: 11px; }