/* Planner-specific styles (uses airspeed-e6b-dashboard.css as a base) */

/* ========================================================================== */
/* WEB / SCREEN                                                               */
/* ========================================================================== */

/* Desktop-only gate: hide the app UI on touch-first devices (phones/tablets)
   AND on viewports narrower than 1800px. Height is not a limiting factor.
   Keeps print rules untouched because it's screen-only. */
@media screen and ((hover: none) and (pointer: coarse)),
  screen and (max-width: 1799px) {
  body::before {
    content: "This Flight Planner is available on desktop monitors only.\AMinimum required window width: 1800px.";
    position: fixed;
    inset: 0;
    display: grid;
    place-items: center;
    padding: 24px;
    text-align: center;
    white-space: pre-line;
    background: #f8fafc;
    color: #0f172a;
    font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif;
    font-size: 16px;
    font-weight: 800;
    line-height: 1.35;
    z-index: 2147483647;
  }

  .page,
  .modal {
    display: none !important;
  }
}

/* Use full width so the table has more room (reduces horizontal scrolling). */
.planner.card {
  max-width: none;
  margin-left: 0;
  margin-right: 0;
}

/* Consistent focus treatment (matches icon button focus ring) */
.planner input:focus-visible,
.planner select:focus-visible,
.planner textarea:focus-visible,
.planner button:focus-visible {
  outline: none;
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Keep invalid state visually dominant when focused */
.planner .is-invalid:focus-visible {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.22);
}

.planner .card-header {
  justify-content: flex-start;
  flex-wrap: wrap;
  row-gap: 10px;
}

.planner .titles {
  min-width: 240px;
  flex: 1 1 320px;
}

/* Uppercase all text entries */
.planner input[type="text"],
.planner textarea {
  text-transform: uppercase;
}

.planner-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin-left: auto;
}

.planner-actions button {
  padding: 8px 10px;
  border-radius: 6px;
  border: 1px solid #cfd4da;
  background: #f1f3f5;
  color: #1f2d3d;
  font-weight: 700;
  cursor: pointer;
  transition: background 120ms ease, border-color 120ms ease, transform 60ms ease;
}

.visit-counter {
  margin-left: 6px;
  padding: 6px 8px;
  border-radius: 999px;
  border: 1px solid #e1e6ee;
  background: #ffffff;
  color: #334155;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  user-select: text;
}

/* Input with an icon button (used for declination map picker) */
.input-with-icon {
  position: relative;
  display: block;
}

.input-with-icon input {
  display: block;
  width: 100%;
  padding-right: 40px;
  box-sizing: border-box;
}

.input-icon-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  margin: 0;
  padding: 0;
  border: none;
  border-radius: 6px;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 900;
  color: #1f2d3d;
  line-height: 1;
}

.input-icon-btn:hover {
  background: rgba(15, 23, 42, 0.06);
}

.input-icon-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Modal */
.modal {
  position: fixed;
  inset: 0;
  display: none;
  z-index: 9999;
}

.modal.is-open {
  display: block;
}

.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
}

.modal-panel {
  position: relative;
  width: min(980px, calc(100vw - 28px));
  max-height: calc(100vh - 28px);
  margin: 14px auto;
  border-radius: 14px;
  background: #fff;
  border: 1px solid #e1e6ee;
  overflow: hidden;
  display: grid;
  grid-template-rows: auto 1fr;
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  background: #f3f5f7;
  border-bottom: 1px solid #e1e6ee;
}

.modal-title {
  font-weight: 900;
  color: #1f2d3d;
}

.modal-body {
  padding: 12px;
  overflow: auto;
}

.modal-hint {
  font-size: 12px;
  color: #5b6775;
  margin-bottom: 8px;
}

.modal-info {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  font-size: 12px;
  color: #1f2d3d;
  margin-bottom: 10px;
}

#fp_declModal.is-mode-checkpoint .map-info-decl {
  display: none;
}

.decl-map {
  width: 100%;
  height: 520px;
  border-radius: 12px;
  border: 1px solid #e1e6ee;
}

@media (max-width: 700px) {
  .decl-map { height: 420px; }
}

.planner-actions button:hover {
  background: #e7ebf0;
}

.planner-actions button:active {
  transform: translateY(1px);
}

.meta-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 10px;
  margin-top: 10px;
}

.meta-item {
  display: grid;
  gap: 6px;
}

.meta-item label {
  font-weight: 700;
  font-size: 12px;
  color: #334155;
}

.meta-item input,
.meta-item select {
  width: 100%;
}

.planner .is-invalid {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.18);
}

.planner-hint {
  margin-top: 10px;
  font-size: 12px;
  color: #5b6775;
}

.planner-summary {
  margin-top: 12px;
  padding: 12px;
  border: 1px solid #e1e6ee;
  border-radius: 12px;
  background: #fff;
}

.summary-grid {
  display: grid;
  grid-template-columns: repeat(6, minmax(160px, 1fr));
  gap: 10px;
}

.summary-item {
  display: grid;
  gap: 6px;
}

.summary-item label {
  font-weight: 800;
  font-size: 12px;
  color: #334155;
}

.summary-item label.label-with-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
}

.summary-item label.label-with-meta .label-meta {
  font-size: 11px;
  font-weight: 800;
  color: #64748b;
  line-height: 1;
  white-space: nowrap;
}

.summary-item.calc input {
  background: #ffe08a;
}


.summary-warn {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 800;
  color: #b42318;
  min-height: 16px;
}

.flight-warn {
  display: none;
  margin-top: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid #fda29b;
  background: #fee4e2;
  color: #b42318;
  font-weight: 900;
  font-size: 12px;
  cursor: pointer;
  user-select: none;
}

.flight-warn.is-visible {
  display: block;
}

.planner-table-wrap {
  margin-top: 12px;
  border: 1px solid #e1e6ee;
  border-radius: 10px;
  overflow: auto;
  background: #fff;
  padding-right: 8px;
}

.planner-table {
  width: 100%;
  border-collapse: collapse;
  min-width: 0;
}

@media (min-width: 1601px) {
  .planner-table {
    table-layout: fixed;
  }

  .planner-table thead th:nth-child(2),
  .planner-table tbody td.checkpoint-cell {
    width: 400px;
  }

  .planner-table thead th:nth-child(1) { width: 64px; }
  .planner-table thead th:nth-child(3),
  .planner-table thead th:nth-child(4),
  .planner-table thead th:nth-child(5),
  .planner-table thead th:nth-child(6),
  .planner-table thead th:nth-child(8),
  .planner-table thead th:nth-child(9),
  .planner-table thead th:nth-child(10) { width: 72px; }

  .planner-table thead th:nth-child(7) { width: 86px; }
  .planner-table thead th:nth-child(11) { width: 92px; }
  .planner-table thead th:nth-child(12) { width: 72px; }
  .planner-table thead th:nth-child(13) { width: 86px; }
  .planner-table thead th:nth-child(14) { width: 96px; }
  .planner-table thead th:nth-child(15) { width: 76px; }
  .planner-table thead th:nth-child(16) { width: 92px; }
  .planner-table thead th:nth-child(17) { width: 92px; }
  .planner-table thead th:last-child { width: 76px; }
}

/* Web: allow Fuel / Hr to be a bit narrower (so Time can grow) */
.planner-table input[data-f="ff"] {
  min-width: 60px;
}

.planner-table th,
.planner-table td {
  border-bottom: 1px solid #eef2f7;
  border-right: 1px solid #eef2f7;
  padding: 8px;
  vertical-align: top;
  white-space: nowrap;
}

.planner-table th:last-child,
.planner-table td:last-child {
  border-right: none;
}

.planner-table thead th {
  position: sticky;
  top: 0;
  background: #f3f5f7;
  z-index: 2;
  font-size: 12px;
  font-weight: 800;
  color: #1f2d3d;
  white-space: normal;
  line-height: 1.15;
  word-break: break-word;
}

/* Give long headers a bit more room */
.planner-table thead th:nth-child(11),
  .planner-table thead th:nth-child(15),
  .planner-table thead th:nth-child(16),
  .planner-table thead th:nth-child(17) {
  font-size: 11px;
}

/* Wind: unify Dir+Spd into one column */
.planner-table td.wind-cell .wind-stack {
  display: grid;
  gap: 4px;
}

.planner-table td.wind-cell input {
  width: 100%;
  min-width: 0;
  max-width: none;
  margin: 0;
}

/* Totals: show unit as a suffix inside the cell */
.suffix-wrap {
  position: relative;
  display: block;
  width: 100%;
}

.suffix-wrap input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  padding-right: 60px;
}

.suffix-wrap .fp-suffix {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  font-weight: 800;
  color: #56606a;
  pointer-events: none;
  text-transform: uppercase;
}

.planner-table tbody tr:hover {
  background: #fafbfc;
}

/* Web: highlight rows that have flight errors (without destroying the green/yellow cell colors) */
.planner-table tbody tr.is-flight-error td.index input {
  border-color: #b42318;
  background: #fee4e2;
  font-weight: 900;
}

.planner-table tbody tr.is-flight-error td {
  box-shadow: inset 4px 0 0 #b42318;
}

.planner-table tbody tr.is-flight-error input {
  border-color: #fda29b;
}

.planner-table tbody tr.is-flight-error--focus td {
  outline: 2px solid rgba(180, 35, 24, 0.35);
  outline-offset: -2px;
}

.planner-table input {
  width: 100%;
  min-width: 0;
  max-width: none;
  padding: 7px 8px;
  border-radius: 6px;
  border: 1px solid #cfd4da;
  font-size: 14px;
  outline: none;
}

/* Center values inside numeric/time cells (keep Checkpoint left-aligned) */
.planner-table td:not(.checkpoint-cell) input {
  display: block;
  margin-left: auto;
  margin-right: auto;
  text-align: center;
  font-variant-numeric: tabular-nums;
}

.planner-table td.checkpoint-cell input {
  display: block;
  margin: 0;
  text-align: left;
}

/* Two-line table headers */
.planner-table thead th .th-top {
  display: block;
}

.planner-table thead th .th-sub {
  display: block;
  font-size: 10px;
  font-weight: 700;
  opacity: 0.9;
}

/* Keep space for in-field unit suffixes inside the planner table (padding shorthand above would otherwise override it). */
.planner-table .suffix-wrap input {
  padding-right: 60px;
}

.planner-table .narrow input { width: 80px; }
.planner-table .wide input { width: 160px; }

.planner-table td.index input {
  width: 44px;
  min-width: 44px;
  max-width: 44px;
  text-align: center;
}

/* Color coding */
.planner-table td.manual input {
  background: #bfe7bf; /* green */
}

.planner-table td.manual input.is-locked {
  background: #d1fae5; /* softer green */
  cursor: not-allowed;
}

.planner-table td.checkpoint-cell {
  white-space: normal;
}

.planner-table td.checkpoint-cell input {
  width: 100%;
  max-width: none;
}

/* Coordinate checkpoints: show place description inline inside the input */
.planner-table td.checkpoint-cell .input-with-icon {
  position: relative;
}

.planner-table td.checkpoint-cell .input-with-icon input[data-f="name"].is-coord {
  padding-right: 220px; /* room for inline description + map icon */
}

.planner-table td.checkpoint-cell .coord-inline {
  position: absolute;
  right: 44px; /* before the map icon */
  top: 50%;
  transform: translateY(-50%);
  max-width: calc(100% - 160px);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 700;
  color: #475569;
  pointer-events: none;
  text-transform: none;
}

.planner-table td.checkpoint-cell input.freq {
  margin-top: 4px;
  padding: 5px 8px;
  font-size: 12px;
  min-width: 0;
}

.planner-table td.time-cell {
  white-space: normal;
}

.planner-table .time-stack {
  display: grid;
  gap: 4px;
}

.planner-table input.eta {
  font-size: 12px;
  font-weight: 800;
  opacity: 0.9;
}

/* Remove number input spinners (keyboard entry only) */
input[type="number"] {
  -moz-appearance: textfield;
  appearance: textfield;
}

input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* ========================================================================== */
/* PRINT (generated navlog sheet)                                              */
/* Single authority: base print rules + fine overrides for A4 / A5 / A4Mix.    */
/* Column widths MUST be defined only here (via colgroup + CSS variables).     */
/* ========================================================================== */
@media print {
  html,
  body {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #000 !important;
  }

  /* Print only the generated sheet */
  .page,
  .modal,
  .report-note {
    display: none !important;
  }

  body.print-mode .print-sheet {
    display: block !important;
  }

  .print-sheet {
    display: none;
    font-family: system-ui, sans-serif;
    font-size: 9px;
    line-height: 1.25;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
    position: relative;
  }

  .print-sheet .ps-page {
    break-after: page;
    break-inside: avoid;
    page-break-inside: avoid;
    position: relative;
    z-index: 1;
  }

  /* A4 Mix: print 2x A5 pages on one A4 sheet */
  body.print-a4mix .print-sheet .ps-page {
    break-after: auto;
  }

  body.print-a4mix .print-sheet .ps-spread {
    position: relative;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4mm;
    align-items: start;
    break-after: page;
    break-inside: avoid;
    page-break-inside: avoid;
    z-index: 1;
  }

  body.print-a4mix .print-sheet .ps-spread:last-child {
    break-after: auto;
  }

  body.print-a4mix .print-sheet .ps-spread::before {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    transform: translateX(-0.5px);
    background: repeating-linear-gradient(
      to bottom,
      rgba(0, 0, 0, 0.35) 0,
      rgba(0, 0, 0, 0.35) 3mm,
      transparent 3mm,
      transparent 6mm
    );
    pointer-events: none;
  }

  /* Fit A5 content nicely in the two-up A4 area */
  body.print-a4mix .print-sheet .ps-page {
    zoom: 0.95;
  }

  .print-sheet .ps-watermark {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10mm;
    text-align: center;
    font-weight: 900;
    letter-spacing: 1px;
    text-transform: uppercase;
    color: rgba(0, 0, 0, 0.12);
    font-size: 40px;
    line-height: 1.05;
    transform: rotate(-16deg);
    white-space: pre-line;
    pointer-events: none;
    z-index: 0;
  }

  /* A4Mix (2-up): show watermark centered within each half, not across the gutter */
  body.print-a4mix .print-sheet .ps-watermark.ps-watermark--left,
  body.print-a4mix .print-sheet .ps-watermark.ps-watermark--right {
    inset: auto;
    top: 0;
    bottom: 0;
    width: calc(50% - 2mm);
  }

  body.print-a4mix .print-sheet .ps-watermark.ps-watermark--left {
    left: 0;
  }

  body.print-a4mix .print-sheet .ps-watermark.ps-watermark--right {
    left: calc(50% + 2mm);
  }

  .print-sheet .ps-watermark.ps-watermark--error {
    color: rgba(180, 35, 24, 0.18);
  }

  .print-sheet .ps-watermark.ps-watermark--fuel {
    color: rgba(180, 83, 9, 0.20);
  }

  /* A5 has tighter printable area; keep watermark inside the page */
  body.print-a5 .print-sheet .ps-watermark {
    font-size: 30px;
    letter-spacing: 0.8px;
    padding: 8mm;
    transform: rotate(-14deg);
  }

  .print-sheet .ps-header,
  .print-sheet .ps-meta,
  .print-sheet .ps-table {
    position: relative;
    z-index: 1;
  }

  .print-sheet .ps-page:last-child {
    break-after: auto;
  }

  /* Extra guard: do not split a leg row when printing */
  .print-sheet tr {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  .print-sheet .ps-header {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: 10px;
    padding-bottom: 4px;
    border-bottom: 1px solid #888;
    margin-bottom: 8px;
  }

  .print-sheet .ps-brand {
    display: flex;
    align-items: center;
    gap: 10px;
    min-width: 0;
  }

  .print-sheet .ps-logo {
    width: auto;
    height: 14mm;
    max-height: 14mm;
    object-fit: contain;
  }

  /* A4: slightly smaller logo to reclaim vertical space */
  body.print-a4 .print-sheet .ps-logo {
    height: 12mm;
    max-height: 12mm;
  }

  .print-sheet .ps-header.ps-header--cont {
    margin-bottom: 6px;
    border-bottom: none;
    padding-bottom: 0;
  }

  .print-sheet .ps-cont {
    font-weight: 800;
    font-size: 0.9em;
  }

  .print-sheet .ps-title {
    font-weight: 900;
    font-size: 13px;
    letter-spacing: 0.2px;
  }

  .print-sheet .ps-sub {
    font-size: 10px;
    color: #333;
  }

  .print-sheet .ps-route {
    margin-top: 2px;
    font-size: 16px;
    font-weight: 1000;
    letter-spacing: 0.2px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Print header (right block): compact ORIGIN → DESTINATION line */
  .print-sheet .ps-route-mini {
    font-size: 10px;
    font-weight: 950;
    letter-spacing: 0.2px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-bottom: 2px;
  }

  .print-sheet .ps-route-mini .ps-route-from {
    font-weight: 1000;
  }

  .print-sheet .ps-route-mini .ps-route-to {
    font-weight: 850;
  }

  .print-sheet .ps-route-arrow {
    font-weight: 1100;
  }

  .print-sheet .ps-trunc {
    margin-top: 2px;
    font-size: 9px;
    font-weight: 900;
    color: #b42318;
  }

  .print-sheet .ps-right {
    text-align: right;
    white-space: nowrap;
  }

  /* Print: page numbering (overlay; must not affect layout) */
  .print-sheet .ps-pageno {
    position: absolute;
    right: 0;
    top: auto;
    bottom: -10px;
    font-size: 7px;
    line-height: 1;
    font-weight: 900;
    letter-spacing: 0.2px;
    opacity: 0.65;
    pointer-events: none;
  }

  .print-sheet .ps-meta {
    display: grid;
    grid-template-columns: repeat(10, minmax(0, 1fr));
    gap: 6px 10px;
    margin-bottom: 8px;
  }

  /* A4: meta gets cramped; split into 2 rows/blocks with more breathing room */
  body.print-a4 .print-sheet .ps-meta {
    font-size: 1.1em;
    line-height: 1.15;
    gap: 6px 14px;
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  body.print-a4 .print-sheet .ps-meta.ps-meta--row1,
  body.print-a4 .print-sheet .ps-meta.ps-meta--row2,
  body.print-a4 .print-sheet .ps-meta.ps-meta--row3 {
    grid-template-columns: repeat(7, minmax(0, 1fr));
  }

  body.print-a4 .print-sheet .ps-meta.ps-meta--row1,
  body.print-a4 .print-sheet .ps-meta.ps-meta--row2 {
    margin-bottom: 4px;
  }

  body.print-a4 .print-sheet .ps-meta.ps-meta--row3 {
    margin-bottom: 6px;
  }

  /* A4: add breathing room between meta menu and table headers */
  body.print-a4 .print-sheet .ps-page--first .ps-table {
    margin-top: 25px;
  }

  /* A5 / A4 Mix: add breathing room between meta and table headers */
  body.print-a5 .print-sheet .ps-page--first .ps-table,
  body.print-a4mix .print-sheet .ps-page--first .ps-table {
    margin-top: 25px;
  }

  body.print-a4 .print-sheet .ps-meta .ps-meta-spacer {
    visibility: hidden;
  }

  body.print-a4 .print-sheet .ps-sub {
    font-size: 9px;
    line-height: 1.05;
  }

  body.print-a4 .print-sheet .ps-route {
    font-size: 15px;
  }

  body.print-a4mix .print-sheet .ps-route {
    font-size: 12px;
  }

  .print-sheet .ps-meta > div {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .print-sheet .ps-meta > div.ps-meta-wide {
    grid-column: span 2;
    overflow: visible;
    text-overflow: clip;
  }

  .print-sheet table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
  }

  /* Print: neutralize any fixed input sizing so colgroup % controls columns. */
  .print-sheet input,
  .print-sheet select,
  .print-sheet textarea {
    width: 100% !important;
    min-width: 0 !important;
    max-width: none !important;
    box-sizing: border-box;
  }

  /* Print column widths: single authority via variables so % tweaks always take effect */
  .print-sheet {
    --col-idx: 3%;
    --col-checkpoint: 31%;
    --col-tc: 5%;
    --col-mh: 5%;
    --col-alt: 5%;
    --col-ias: 4%;
    --col-tas: 4%;
    --col-gs: 4%;
    --col-wind: 6%;
    --col-dist: 5%;
    --col-ete: 5.5%;
    --col-eta: 6.5%;
    --col-used: 8%;
    --col-rem: 8%;
  }

  .print-sheet col.col-idx { width: var(--col-idx); }
  .print-sheet col.col-checkpoint { width: var(--col-checkpoint); }
  .print-sheet col.col-tc { width: var(--col-tc); }
  .print-sheet col.col-mh { width: var(--col-mh); }
  .print-sheet col.col-alt { width: var(--col-alt); }
  .print-sheet col.col-ias { width: var(--col-ias); }
  .print-sheet col.col-tas { width: var(--col-tas); }
  .print-sheet col.col-gs { width: var(--col-gs); }
  .print-sheet col.col-wind { width: var(--col-wind); }
  .print-sheet col.col-dist { width: var(--col-dist); }
  .print-sheet col.col-ete { width: var(--col-ete); }
  .print-sheet col.col-eta { width: var(--col-eta); }
  .print-sheet col.col-used { width: var(--col-used); }
  .print-sheet col.col-rem { width: var(--col-rem); }

  /* A5 / A4 Mix: fine adjustments only (do not redefine everything) */
  body.print-a5 .print-sheet,
  body.print-a4mix .print-sheet {
    --col-checkpoint: 28.5%;
    --col-eta: 10.5%;
    --col-used: 6.5%;
    --col-rem: 6.5%;
    /* Velocidades: ajustables por porcentaje en print */
    --col-ias: 4.5%;
    --col-tas: 4.5%;
    --col-gs: 4.5%;
  }
  /* Print: make th-sub (gal) under REM smaller and less intrusive */
  .print-sheet th .th-top {
    font-weight: 900;
    font-size: 8px;
    letter-spacing: 0.1px;
    display: block;
  }
  .print-sheet th .th-sub {
    display: block;
    font-size: 7px;
    font-weight: 900;
    opacity: 0.8;
    line-height: 1.1;
    margin-top: 0px;
    margin-bottom: -2px;
    letter-spacing: 0.1px;
  }

  .print-sheet th,
  .print-sheet td {
    padding: 1px 2px;
    vertical-align: top;
    overflow: hidden;
  }

  /* Hard reset: never show vertical borders in the print table */
  .print-sheet thead th,
  .print-sheet tbody td {
    border-left: none !important;
    border-right: none !important;
  }

  /* Print: add a single separator between # and Checkpoint */
  .print-sheet thead th:first-child,
  .print-sheet tbody td:first-child {
    border-right: 1px solid rgba(0, 0, 0, 0.35) !important;
  }

  /* Make 15 legs/page use the full height better on A4 */
  body.print-a4 .print-sheet tbody tr {
    height: 8mm;
  }

  /* Zebra stripe sizing (match row heights) */
  body.print-a4 .print-sheet .ps-page {
    --ps-row-h: 8mm;
  }

  /* A5 needs a smaller logo and row height */
  body.print-a5 .print-sheet .ps-logo {
    height: 8mm;
    max-height: 8mm;
  }

  /* A5: increase row height so 15 rows/page fill the sheet better */
  body.print-a5 .print-sheet tbody tr {
    height: 11.4mm;
  }

  body.print-a5 .print-sheet .ps-page {
    --ps-row-h: 11.4mm;
  }

  /* First page includes meta blocks; keep rows a touch shorter */
  body.print-a5 .print-sheet .ps-page--first tbody tr {
    height: 11.1mm;
  }

  body.print-a5 .print-sheet .ps-page--first {
    --ps-row-h: 11.1mm;
  }

  /* Continuation pages have a smaller header (no meta), so rows can be taller */
  body.print-a5 .print-sheet .ps-page--cont tbody tr {
    height: 12.0mm;
  }

  body.print-a5 .print-sheet .ps-page--cont {
    --ps-row-h: 12.0mm;
  }

  /* Simple (no boxes): just a light baseline */
  .print-sheet thead th {
    border-bottom: 1px solid #666;
    font-weight: 900;
    font-size: 8px;
  }

  .print-sheet tbody td {
    border-bottom: 1px solid #ddd;
  }

  /* Filler rows (A4 only): keep the grid but make them visually lighter */
  body.print-a4 .print-sheet tbody tr.ps-empty-row td {
    color: transparent;
    background: #fff !important;
    font-weight: 400;
    border-bottom: none !important;
  }

  /* Filler rows (A5): keep the vertical fill but hide the lines */
  body.print-a5 .print-sheet tbody tr.ps-empty-row td {
    color: transparent;
    background: #fff !important;
    font-weight: 400;
    border-bottom: none !important;
  }

  /* A4 Mix: keep the vertical fill and keep the grid lines visible */
  body.print-a4mix .print-sheet tbody tr.ps-empty-row td {
    border-bottom: 1px solid #ddd !important;
  }

  /* Zebra striping (subtle) for easier row tracking.
     Use a single background painted on tbody to avoid per-cell seams in print. */
  .print-sheet:not(.ps-incomplete) .ps-page .ps-table tbody {
    background-image: repeating-linear-gradient(
      to bottom,
      transparent 0,
      transparent var(--ps-row-h),
      rgba(0, 0, 0, 0.055) var(--ps-row-h),
      rgba(0, 0, 0, 0.055) calc(var(--ps-row-h) + var(--ps-row-h))
    );
  }

  .print-sheet:not(.ps-incomplete) .ps-page .ps-table tbody tr,
  .print-sheet:not(.ps-incomplete) .ps-page .ps-table tbody td {
    background: transparent !important;
  }

  /* A5: keep zebra only under # + Checkpoint (avoid gray behind value columns) */
  body.print-a5 .print-sheet:not(.ps-incomplete) .ps-page .ps-table tbody {
    background-image: none;
  }

  body.print-a5 .print-sheet:not(.ps-incomplete) .ps-page .ps-table tbody tr:nth-child(even) {
    background-image: linear-gradient(
      to right,
      rgba(0, 0, 0, 0.055) 0,
      rgba(0, 0, 0, 0.055) 30.5%,
      transparent 30.5%,
      transparent 100%
    );
  }

  /* Highlight flight errors on the specific leg row */
  .print-sheet tbody tr.is-flight-error td {
    background: rgba(180, 35, 24, 0.12) !important;
    font-weight: 900;
  }

  .print-sheet td.c { text-align: center; }
  .print-sheet td.l {
    text-align: left;
    white-space: normal;
    word-break: break-word;
  }

  .print-sheet .cp-name {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.05;
    font-weight: 600;
  }

  .print-sheet .cp-name .cp-from {
    font-weight: 1000;
  }

  .print-sheet .cp-name .cp-to {
    font-weight: 600;
  }

  .print-sheet .cp-name .cp-arrow {
    font-weight: 700;
  }

  .print-sheet .cp-name .cp-inline {
    font-size: 7px;
    font-weight: 700;
    color: #333;
    opacity: 0.9;
  }

  /* Visually separate ETE and ETA subtly */
  body.print-a4 .print-sheet thead th:nth-child(11),
  body.print-a4 .print-sheet tbody td:nth-child(11) {
    padding-right: 6px;
  }

  body.print-a4 .print-sheet thead th:nth-child(12),
  body.print-a4 .print-sheet tbody td:nth-child(12) {
    padding-left: 6px;
  }

  /* A5 / A4 Mix: keep uniform column spacing (don't spend width on extra padding) */
  body.print-a5 .print-sheet thead th:nth-child(11),
  body.print-a5 .print-sheet tbody td:nth-child(11),
  body.print-a5 .print-sheet thead th:nth-child(12),
  body.print-a5 .print-sheet tbody td:nth-child(12),
  body.print-a4mix .print-sheet thead th:nth-child(11),
  body.print-a4mix .print-sheet tbody td:nth-child(11),
  body.print-a4mix .print-sheet thead th:nth-child(12),
  body.print-a4mix .print-sheet tbody td:nth-child(12) {
    padding-left: 2px;
    padding-right: 2px;
  }

  /* Highlight ETA column on A5 only */
  body.print-a5 .print-sheet thead th:nth-child(12),
  body.print-a5 .print-sheet tbody td:nth-child(12) {
    font-weight: 900;
  }

  .print-sheet .sub {
    font-size: 7px;
    color: #444;
    margin-top: 0;
    padding-top: 1px;
    line-height: 1.05;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .print-sheet .sub.sub-freq {
    color: #111;
    opacity: 0.95;
  }

  .print-sheet .sub.sub-coord {
    color: #222;
    opacity: 0.9;
  }

  /* On A5 / A4Mix, allow the coordinate location to wrap to avoid truncation */
  body.print-a5 .print-sheet .sub.sub-coord,
  body.print-a4mix .print-sheet .sub.sub-coord {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.1;
  }

  /* Same idea for leg direction lines that include coordinates ("→ <lat,lon>") */
  body.print-a5 .print-sheet .sub.sub-to-coord,
  body.print-a4mix .print-sheet .sub.sub-to-coord {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.1;
  }

  /* Presets */
  body.print-a4 .print-sheet {
    zoom: 1;
  }

  /* A4: allow the 15-leg pages to use more vertical space */
  body.print-a4 .print-sheet .ps-header {
    margin-bottom: 5px;
    padding-bottom: 3px;
  }

  body.print-a4 .print-sheet .ps-meta {
    margin-bottom: 5px;
    gap: 4px 8px;
  }

  body.print-a4 .print-sheet .ps-title {
    font-size: 18px;
  }

  body.print-a4 .print-sheet thead th {
    font-size: 11px;
  }

  body.print-a4 .print-sheet .sub {
    font-size: 9px;
  }

  body.print-a4 .print-sheet.ps-big {
    font-size: 13px;
    line-height: 1.3;
  }

  body.print-a4 .print-sheet.ps-big tbody tr {
    height: 11.4mm;
  }

  body.print-a4 .print-sheet.ps-big .ps-page {
    --ps-row-h: 11.4mm;
  }

  /* First page has meta block; keep rows shorter so 15 fit */
  body.print-a4 .print-sheet.ps-big .ps-page--first tbody tr {
    height: 10.45mm;
  }

  body.print-a4 .print-sheet.ps-big .ps-page--first {
    --ps-row-h: 10.45mm;
  }

  /* Continuation pages have a smaller header (no meta), so rows can be taller */
  body.print-a4 .print-sheet.ps-big .ps-page--cont tbody tr {
    height: 11.8mm;
  }

  body.print-a4 .print-sheet.ps-big .ps-page--cont {
    --ps-row-h: 11.8mm;
  }

  body.print-a4 .print-sheet.ps-big th,
  body.print-a4 .print-sheet.ps-big td {
    padding: 2px 3px;
  }

  body.print-a4 .print-sheet.ps-med {
    font-size: 12.5px;
    line-height: 1.28;
  }

  body.print-a4 .print-sheet.ps-med tbody tr {
    height: 11.3mm;
  }

  body.print-a4 .print-sheet.ps-med .ps-page {
    --ps-row-h: 11.3mm;
  }

  /* First page has meta block; keep rows shorter so 15 fit */
  body.print-a4 .print-sheet.ps-med .ps-page--first tbody tr {
    height: 10.35mm;
  }

  body.print-a4 .print-sheet.ps-med .ps-page--first {
    --ps-row-h: 10.35mm;
  }

  /* Continuation pages have a smaller header (no meta), so rows can be taller */
  body.print-a4 .print-sheet.ps-med .ps-page--cont tbody tr {
    height: 11.9mm;
  }

  body.print-a4 .print-sheet.ps-med .ps-page--cont {
    --ps-row-h: 11.9mm;
  }

  body.print-a4 .print-sheet.ps-med th,
  body.print-a4 .print-sheet.ps-med td {
    padding: 2px 3px;
  }

  body.print-a4 .print-sheet.ps-small {
    font-size: 11px;
    line-height: 1.25;
  }

  body.print-a4 .print-sheet.ps-small tbody tr {
    height: 8mm;
  }

  body.print-a4 .print-sheet.ps-small .ps-page {
    --ps-row-h: 8mm;
  }

  body.print-a5 .print-sheet {
    font-size: 9.4px;
    line-height: 1.2;
    zoom: 1;
  }

  body.print-a5 .print-sheet .ps-header {
    margin-bottom: 5px;
    padding-bottom: 3px;
  }

  body.print-a5 .print-sheet .ps-title {
    font-size: 12.5px;
  }

  body.print-a5 .print-sheet .ps-sub {
    font-size: 8.6px;
  }

  body.print-a5 .print-sheet .ps-route {
    font-size: 13px;
  }

  body.print-a5 .print-sheet .ps-meta {
    gap: 3px 6px;
    margin-bottom: 4px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.print-a5 .print-sheet .ps-meta.ps-meta--row1,
  body.print-a5 .print-sheet .ps-meta.ps-meta--row2,
  body.print-a5 .print-sheet .ps-meta.ps-meta--row3 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
  }

  body.print-a5 .print-sheet .ps-meta.ps-meta--row1,
  body.print-a5 .print-sheet .ps-meta.ps-meta--row2 {
    margin-bottom: 3px;
  }

  body.print-a5 .print-sheet .ps-meta.ps-meta--row3 {
    margin-bottom: 3px;
  }

  body.print-a5 .print-sheet .ps-meta .ps-meta-spacer {
    visibility: hidden;
  }

  body.print-a5 .print-sheet thead th {
    font-size: 9px;
  }

  body.print-a5 .print-sheet thead th:nth-child(2) {
    font-size: 8px;
  }
  body.print-a5 .print-sheet th,
  body.print-a5 .print-sheet td {
    padding: 2px 3px;
  }

  body.print-a5 .print-sheet.ps-big {
    font-size: 10px;
    line-height: 1.22;
  }

  body.print-a5 .print-sheet.ps-med {
    font-size: 9.6px;
    line-height: 1.2;
  }

  body.print-a5 .print-sheet.ps-small {
    font-size: 9.2px;
    line-height: 1.18;
  }

  /* Emphasize numeric cells on A5 */
  body.print-a5 .print-sheet td.c {
    font-weight: 400;
    font-size: 10.2px;
    font-variant-numeric: tabular-nums;
  }

  body.print-a5 .print-sheet .sub {
    font-size: 7.2px;
    margin-top: 0;
    padding-top: 1px;
  }

  /* Repeat header on each printed page (if it spills) */
  .print-sheet thead {
    display: table-header-group;
  }
}

/* ========================================================================== */
/* END PRINT                                                                   */
/* ========================================================================== */

.planner-table .to-preview {
  margin-top: 4px;
  font-size: 12px;
  font-weight: 800;
  color: #5b6775;
  line-height: 1.1;
}

.planner-table .coord-desc {
  display: none !important;
}

.planner-table .checkpoint-error {
  margin-top: 3px;
  font-size: 12px;
  font-weight: 800;
  color: #b42318;
  line-height: 1.1;
}

.planner-table .checkpoint-error:empty {
  display: none;
}

.planner-table .to-preview.is-final {
  color: #0f5132;
}

/* Make 3-digit headings compact so the Checkpoint column can breathe */
@media (min-width: 900px) {
  .planner-table td[data-label="TC (°)"] input,
  .planner-table td[data-label="MC (°)"] input,
  .planner-table td[data-label="TH (°)"] input,
  .planner-table td[data-label="MH (°)"] input,
  .planner-table td[data-label="IAS (kt)"] input,
  .planner-table td[data-label="TAS (kt)"] input,
  .planner-table td[data-label="GS (kt)"] input,
  .planner-table td.wind-cell input[data-f="windDir"],
  .planner-table td.wind-cell input[data-f="windSpd"] {
    width: 56px;
    min-width: 56px;
    max-width: 56px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .planner-table td[data-label="Alt (ft)"] input {
    width: 64px;
    min-width: 64px;
    max-width: 64px;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }
}

.planner-table td.calc input {
  background: #ffe08a; /* yellow */
}

.planner-table td.calc input[readonly] {
  color: #1f2d3d;
}

.totals-label {
  text-align: right;
  font-weight: 900;
  color: #1f2d3d;
  background: #f3f5f7;
}

.planner-table tfoot td {
  background: #f3f5f7;
}

.row-actions {
  display: flex;
  gap: 6px;
}

/* Keep the + / - buttons contained within the Actions cell (prevents overlap). */
.planner-table tbody td:last-child {
  padding-left: 4px;
  padding-right: 4px;
  overflow: visible;
}

.planner-table tbody td:last-child .row-actions {
  display: flex;
  flex-direction: column;
  gap: 6px;
  align-items: center;
}

.planner-table tbody td:last-child .icon-btn {
  width: 36px;
  min-width: 36px;
  padding: 6px 0;
  box-sizing: border-box;
}

.icon-btn {
  padding: 6px 8px;
  border-radius: 6px;
  border: 1px solid #cfd4da;
  background: #f1f3f5;
  cursor: pointer;
  font-weight: 800;
}

.icon-btn:hover {
  background: #e7ebf0;
}

@media (max-width: 1100px) {
  .planner .card-header {
    align-items: flex-start;
  }

  .meta-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .summary-grid {
    grid-template-columns: repeat(2, minmax(160px, 1fr));
  }

  .planner-actions {
    width: 100%;
    margin-left: 0;
    justify-content: flex-start;
    flex-wrap: wrap;
  }

  .planner-actions button {
    flex: 1 1 150px;
  }
}

/* iPad mini portrait (≈768px): avoid horizontal squeeze/overflow */
@media (max-width: 820px) {
  .planner.card {
    padding: 12px;
  }

  .planner .card-header {
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 10px;
    padding-bottom: 8px;
    margin-bottom: 8px;
  }

  .planner .titles {
    min-width: 0;
    flex: 1 1 260px;
  }

  .planner-actions {
    width: 100%;
    justify-content: flex-start;
    gap: 6px;
  }

  .planner-actions button {
    flex: 1 1 132px;
    font-size: 11.5px;
    padding: 7px 8px;
  }

  .meta-grid,
  .summary-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
  }

  .planner-summary {
    padding: 10px;
    margin-top: 10px;
  }

  .planner-table-wrap {
    margin-top: 10px;
  }

  .decl-map {
    height: 420px;
  }

  /* Compact table cards: one column per row so fields don't get cramped */
  .planner-table tbody tr,
  .planner-table tfoot tr {
    grid-template-columns: minmax(0, 1fr);
    gap: 8px;
    padding: 10px;
    margin: 8px;
  }

  .planner-table tbody td,
  .planner-table tfoot td {
    gap: 4px;
  }

  .planner-table input {
    min-width: 0;
    max-width: none;
    font-size: 13px;
    padding: 6px 8px;
  }

  /* Make row action buttons easier to tap on iPad */
  .row-actions {
    gap: 8px;
    justify-content: flex-end;
  }

  .row-actions .icon-btn {
    padding: 8px 10px;
    min-width: 40px;
  }

  /* Avoid overlap inside suffix inputs on narrow widths */
  .suffix-wrap input {
    padding-right: 48px;
  }

  .suffix-wrap .fp-suffix {
    right: 8px;
    font-size: 11px;
  }

  /* Coordinate checkpoints: don't render the place name inside the input on tablets */
  .planner-table td.checkpoint-cell .input-with-icon input[data-f="name"].is-coord {
    padding-right: 40px;
  }

  .planner-table td.checkpoint-cell .coord-inline {
    position: static;
    transform: none;
    display: block;
    margin-top: 4px;
    max-width: 100%;
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
}

/* Tight table mode: keep the table layout but reduce spacing so it fits better on mid-size screens. */
@media (max-width: 1600px) {
  .planner-table th,
  .planner-table td {
    padding: 6px;
  }

  .planner-table thead th {
    font-size: 11px;
  }

  .planner-table input {
    font-size: 13px;
    padding: 6px 7px;
  }

  .planner-table td.index input {
    width: 42px;
    min-width: 42px;
    max-width: 42px;
  }
}

/* Mid-size desktop widths: let Checkpoint breathe, but not at the expense of horizontal scroll. */
@media (min-width: 900px) and (max-width: 1600px) {
  .planner-table {
    table-layout: fixed;
  }

  .planner-table th,
  .planner-table td {
    min-width: 0;
  }

  .planner-table thead th:nth-child(2),
  .planner-table tbody td.checkpoint-cell {
    width: clamp(240px, 22vw, 320px);
  }

  .planner-table thead th:nth-child(3),
  .planner-table thead th:nth-child(4),
  .planner-table thead th:nth-child(5),
  .planner-table thead th:nth-child(6),
  .planner-table thead th:nth-child(8),
  .planner-table thead th:nth-child(9),
  .planner-table thead th:nth-child(10) {
    width: clamp(56px, 4vw, 68px);
  }

  .planner-table thead th:nth-child(7) { width: clamp(70px, 5vw, 82px); }
  .planner-table thead th:nth-child(11) { width: clamp(76px, 6vw, 92px); }
  .planner-table thead th:nth-child(12) { width: clamp(60px, 4.5vw, 74px); }
  .planner-table thead th:nth-child(13) { width: clamp(70px, 5vw, 86px); }
  .planner-table thead th:nth-child(14) { width: clamp(84px, 6vw, 96px); }
  .planner-table thead th:nth-child(15) { width: clamp(68px, 5vw, 76px); }

  /* Fuel Used / Fuel Rem can otherwise collapse too much and inputs spill/overlap */
  .planner-table thead th:nth-child(16) { width: clamp(84px, 7vw, 104px); }
  .planner-table thead th:nth-child(17) { width: clamp(84px, 7vw, 104px); }

  /* Actions column */
  .planner-table thead th:last-child { width: 76px; }
}

/* Note: card layout disabled; planner stays in table mode on all supported screens. */