/* =====================================================
   FONT — pakai Google Fonts + fallback sistem aman WebView
   ===================================================== */
@import url('https://fonts.googleapis.com/css2?family=Barlow:wght@400;500;600;700;800&family=Barlow+Condensed:wght@500;600;700;800&display=swap');

:root{
  --navy:#1e2d3d;--navy2:#2a3f55;
  --gold:#c8a84b;--goldl:#e8c96a;--goldp:#f5edcf;
  --bg:#eef0f4;--border:#d1d5db;--alt:#f8f9fb;
  --font-body:'Barlow','Trebuchet MS',Arial,sans-serif;
  --font-head:'Barlow Condensed','Arial Narrow',Arial,sans-serif;
}

/* =====================================================
   RESET — penting untuk normalisasi lintas WebView
   ===================================================== */
*{box-sizing:border-box;margin:0;padding:0;-webkit-text-size-adjust:100%;text-size-adjust:100%;}
html{-webkit-tap-highlight-color:transparent;}
body{font-family:var(--font-body);font-size:14px;background:var(--bg);color:#1a1a2e;min-height:100vh;-webkit-font-smoothing:antialiased;}

/* =====================================================
   NAV — touch-action:manipulation kunci responsivitas
   ===================================================== */
.nav{
  display:-webkit-flex;display:flex;
  -webkit-justify-content:center;justify-content:center;
  gap:6px;padding:10px 12px;
  background:var(--navy);
  position:sticky;position:-webkit-sticky;top:0;z-index:999;
  -webkit-flex-wrap:wrap;flex-wrap:wrap;
  box-shadow:0 2px 12px rgba(0,0,0,.3);
}
.nav-btn{
  padding:10px 18px;
  background:rgba(255,255,255,.1);
  color:rgba(255,255,255,.8);
  border:1px solid rgba(255,255,255,.25);
  border-radius:20px;
  font-size:13px;font-family:var(--font-body);font-weight:600;
  cursor:pointer;
  min-height:44px;min-width:90px;
  /* Kunci: touch-action manipulation = respons instan, tidak delay 300ms */
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
  outline:none;
  /* Hapus highlight biru/abu saat disentuh di Android */
  -webkit-tap-highlight-color:transparent;
  /* Pastikan tombol terlihat bisa diklik */
  position:relative;
  -webkit-appearance:none;appearance:none;
}
.nav-btn.on{background:var(--gold);color:var(--navy);border-color:var(--gold);font-weight:700;}
.nav-btn:active{opacity:.75;-webkit-transform:scale(.97);transform:scale(.97);}

/* =====================================================
   PAGE CONTAINER
   ===================================================== */
.pg{background:#fff;max-width:820px;margin:12px auto 16px;border-radius:10px;overflow:hidden;box-shadow:0 4px 20px rgba(0,0,0,.12);}

/* =====================================================
   HEADER
   ===================================================== */
.hdr{background:var(--navy);padding:12px 16px 10px;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;gap:10px;}
.hdr-l h1{font-family:var(--font-head);font-size:22px;font-weight:800;letter-spacing:2px;color:#fff;line-height:1;}
.hdr-l .sub{font-size:10px;color:var(--gold);letter-spacing:2.5px;font-weight:600;margin-top:3px;}
.hdr-r img{height:44px;width:auto;object-fit:contain;}

/* =====================================================
   BODY PADDING
   ===================================================== */
.body{padding:12px 14px 14px;}

/* =====================================================
   STATION
   ===================================================== */
.station{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;background:var(--goldp);border:1px solid var(--gold);border-radius:6px;padding:6px 12px;margin-bottom:10px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.station label{font-weight:700;font-size:11px;letter-spacing:1.5px;color:var(--navy);white-space:nowrap;}
.station input{font-weight:700;font-size:14px;color:var(--navy);border:none;background:transparent;outline:none;font-family:var(--font-body);-webkit-flex:1;flex:1;min-width:100px;}

/* =====================================================
   SECTION TITLES
   ===================================================== */
.st{background:var(--navy);color:#fff;font-family:var(--font-head);font-size:12px;font-weight:700;letter-spacing:2px;padding:6px 12px;margin:10px 0 0;border-radius:4px 4px 0 0;}
.sst{background:var(--navy2);color:var(--goldl);font-size:10px;font-weight:700;letter-spacing:1.5px;padding:4px 12px;}

/* =====================================================
   TABLE SCROLL WRAPPER — kunci tabel 7 kolom mobile
   ===================================================== */
.tbl-scroll{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tbl-scroll table{min-width:460px;}

/* =====================================================
   TABLES
   ===================================================== */
table{width:100%;border-collapse:collapse;border:1px solid var(--border);}
.tbl-scroll+.st,.tbl-scroll+.sst,table+.st,table+.sst{margin-top:10px;}
th{background:linear-gradient(135deg,var(--navy2),var(--navy));color:#fff;font-size:10px;font-weight:700;letter-spacing:.8px;padding:6px 7px;text-align:center;border:1px solid rgba(255,255,255,.1);}
th.left{text-align:left;}
td{border:1px solid var(--border);padding:5px 6px;vertical-align:middle;font-size:12px;}
tr:nth-child(even) td{background:var(--alt);}

/* FLIGHT INFO */
.fi-head th{font-size:9px;}
.fi-sub th{background:rgba(200,168,75,.12);color:var(--navy);font-size:9px;font-weight:600;letter-spacing:.6px;border:1px solid var(--border);border-top:1px solid var(--gold);}

/* =====================================================
   FLIGHT INFO — RESPONSIVE LAYOUT (screen only)
   ACFT REG / FLIGHT NO / BAY / FLIGHT ROUTE / ETD / DATE
   Shared by view.php and create.php (both load this file) so the
   two pages always match. Desktop table layout above is untouched.

   Both breakpoints stay below the 780px width used by the "Save as
   PDF" capture (see doPdf()/A4_PX_W in view.php) and are "screen"-
   scoped, so PDF export and browser print always keep the original
   desktop table — see the @media print reset further down.
   ===================================================== */

/* Tablet: 2-column card grid, label above value */
@media screen and (max-width:768px) and (min-width:481px){
  .fi-table thead{display:none;}
  .tbl-scroll{overflow-x:visible;}
  .fi-table, .fi-table tbody, .fi-table tbody tr{width:100%;min-width:0;}
  .fi-table tbody tr{
    display:grid;grid-template-columns:1fr 1fr;
    border:1px solid var(--border);border-radius:6px;overflow:hidden;
  }
  .fi-table tbody td{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    border:none;border-right:1px solid var(--border);border-bottom:1px solid var(--border);
    padding:8px 10px;
  }
  .fi-table tbody td:nth-child(even){border-right:none;}
  .fi-table tbody td:last-child{border-bottom:none;}
  .fi-table tbody td::before{
    content:attr(data-label);
    font-family:var(--font-head);font-size:10px;font-weight:700;
    letter-spacing:.8px;color:var(--navy);white-space:nowrap;text-transform:uppercase;
  }
  .fi-table tbody td input{width:100%;text-align:left;min-width:0;}
}

/* Mobile phones: single column, one field per row */
@media screen and (max-width:480px){
  .fi-table thead{display:none;}
  .tbl-scroll{overflow-x:visible;}
  .fi-table, .fi-table tbody, .fi-table tbody tr{width:100%;min-width:0;}
  .fi-table tbody tr{
    display:flex;flex-direction:column;
    border:1px solid var(--border);border-radius:6px;overflow:hidden;
  }
  .fi-table tbody td{
    display:flex;flex-direction:column;align-items:flex-start;gap:4px;
    width:100%;border:none;border-bottom:1px solid var(--border);
    padding:8px 10px;
  }
  .fi-table tbody td:last-child{border-bottom:none;}
  .fi-table tbody td::before{
    content:attr(data-label);
    font-family:var(--font-head);font-size:10px;font-weight:700;
    letter-spacing:.8px;color:var(--navy);white-space:nowrap;text-transform:uppercase;
  }
  .fi-table tbody td input{width:100%;text-align:left;min-width:0;}
}

/* =====================================================
   INPUTS — min-height 32px penting untuk touch
   ===================================================== */
td input[type=text],td input[type=time],td input[type=date]{
  width:100%;border:none;background:transparent;
  font-family:var(--font-body);font-size:12px;font-weight:500;
  color:var(--navy);padding:3px 3px;
  border-bottom:1.5px solid #ddd;outline:none;
  min-height:32px;
  /* Cegah iOS auto-zoom saat font < 16px */
  font-size:16px;
}
/* Override ke 12px setelah cegah zoom — pakai transform trick */
td input[type=text],td input[type=time],td input[type=date]{font-size:12px;}
@media screen and (max-width:768px){
  td input[type=text],td input[type=time],td input[type=date]{font-size:16px;}
}
td input:focus{border-bottom:2px solid var(--gold);background:var(--goldp);border-radius:3px;}
td input::placeholder{color:#bbb;font-weight:400;}

/* =====================================================
   LABEL CELLS
   ===================================================== */
.vlab{background:var(--navy2);color:#fff;font-family:var(--font-head);font-weight:700;font-size:11px;letter-spacing:2px;text-align:center;writing-mode:vertical-rl;text-orientation:mixed;-webkit-transform:rotate(180deg);transform:rotate(180deg);width:28px;padding:6px 2px;}
.rlab{background:#f0f3f7;font-weight:700;font-size:11px;color:var(--navy);letter-spacing:.3px;}
.unit{font-size:10px;color:#888;font-weight:600;white-space:nowrap;text-align:center;width:48px;}
.manual{display:inline-block;font-size:9px;background:var(--goldp);color:var(--navy);border:1px solid var(--gold);border-radius:3px;padding:1px 4px;font-weight:600;margin-left:4px;}

/* =====================================================
   MERGE ROWS
   ===================================================== */
.merge-cell{padding:0!important;}
.merge-inner{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
.merge-label{-webkit-flex:0 0 40%;flex:0 0 40%;padding:5px 8px;font-weight:600;font-size:12px;border-right:1px solid var(--border);}
.merge-val{-webkit-flex:1;flex:1;padding:5px 8px;}
.merge-val input{width:100%;border:none;background:transparent;font-family:var(--font-body);font-size:12px;color:var(--navy);padding:2px 3px;border-bottom:1.5px solid #ddd;outline:none;min-height:30px;}
.merge-val input:focus{border-bottom:2px solid var(--gold);background:var(--goldp);}

/* =====================================================
   REMARKS
   ===================================================== */
.rmk{border:1.5px solid var(--border);border-radius:0 0 6px 6px;overflow:hidden;}
.rmk textarea{width:100%;padding:8px 10px;font-family:var(--font-body);font-size:13px;border:none;outline:none;resize:none;min-height:56px;color:var(--navy);background:#fafbfc;}
.rmk textarea:focus{background:var(--goldp);}

/* =====================================================
   SIGNATURE
   ===================================================== */
.sigs{display:-webkit-flex;display:flex;gap:10px;margin-top:12px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.sigbox{-webkit-flex:1;flex:1;min-width:200px;border:1.5px solid var(--border);border-radius:8px;padding:8px;background:#fafbfc;}
.sigrole{font-size:10px;font-weight:700;letter-spacing:1.5px;color:var(--navy);display:block;margin-bottom:6px;padding-bottom:4px;border-bottom:2px solid var(--gold);text-transform:uppercase;}
canvas{border:1px dashed #ccc;border-radius:4px;width:100%;touch-action:none;background:#fff;display:block;cursor:crosshair;}
.signame input{margin-top:5px;width:100%;font-size:13px;font-family:var(--font-body);padding:4px 5px;border:none;border-bottom:1.5px solid #ddd;outline:none;background:transparent;color:var(--navy);min-height:32px;}
.signame input:focus{border-bottom:2px solid var(--gold);}
.sigctl{display:-webkit-flex;display:flex;gap:6px;margin-top:5px;-webkit-flex-wrap:wrap;flex-wrap:wrap;-webkit-align-items:center;align-items:center;}
.btn-clr,.btn-up{
  font-size:11px;padding:6px 12px;
  border:none;border-radius:4px;cursor:pointer;
  font-family:var(--font-body);font-weight:600;min-height:36px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  -webkit-appearance:none;appearance:none;
  position:relative;
}
.btn-clr{background:#ef4444;color:#fff;}
.btn-up{display:-webkit-inline-flex;display:inline-flex;-webkit-align-items:center;align-items:center;background:var(--gold);color:#fff;}
.btn-clr:active,.btn-up:active{opacity:.75;}
.up-inp{display:none;position:absolute;width:0;height:0;opacity:0;}
.sigprev{width:100%;max-height:75px;object-fit:contain;display:none;border:1px solid #ddd;border-radius:4px;margin-top:4px;background:#fff;}
.sigprev.show{display:block;}

/* =====================================================
   FOOTER
   ===================================================== */
.pgfoot{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;-webkit-align-items:center;align-items:center;margin-top:10px;padding-top:7px;border-top:1px solid var(--border);}
.pgbrand{font-size:10px;color:var(--gold);font-weight:700;letter-spacing:1px;}
.pgnum{font-size:10px;color:#888;font-weight:600;}

/* GAP */
.gap{height:10px;}

/* =====================================================
   TOMBOL SIMPAN PDF
   ===================================================== */
.print-wrap{padding:0 14px 20px;max-width:820px;margin:0 auto;}
.btn-pdf{
  display:block;width:100%;padding:16px;
  background:linear-gradient(135deg,#1a6e3e,#155932);
  color:#fff;border:none;border-radius:8px;
  font-size:16px;font-weight:700;font-family:var(--font-body);letter-spacing:1px;
  cursor:pointer;
  box-shadow:0 4px 12px rgba(26,110,62,.35);
  min-height:54px;
  -webkit-tap-highlight-color:transparent;
  touch-action:manipulation;
  -webkit-user-select:none;user-select:none;
  outline:none;
  -webkit-appearance:none;appearance:none;
  /* Pastikan tidak ada z-index atau overflow yang memblokir klik */
  position:relative;z-index:1;
}
.btn-pdf:active{opacity:.8;-webkit-transform:scale(.99);transform:scale(.99);}

/* MODAL PETUNJUK MOBILE PDF */
.modal-overlay{display:none;position:fixed;top:0;left:0;width:100%;height:100%;background:rgba(0,0,0,.6);z-index:9999;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;}
.modal-overlay.show{display:-webkit-flex;display:flex;}
.modal-box{background:#fff;border-radius:12px;padding:24px 20px;max-width:320px;width:90%;text-align:center;box-shadow:0 8px 32px rgba(0,0,0,.3);}
.modal-box h3{font-family:var(--font-head);font-size:18px;font-weight:700;color:var(--navy);margin-bottom:10px;letter-spacing:1px;}
.modal-box p{font-size:13px;color:#444;line-height:1.6;margin-bottom:8px;}
.modal-box .step{background:var(--goldp);border-left:3px solid var(--gold);padding:8px 10px;border-radius:4px;font-size:13px;text-align:left;margin:6px 0;color:var(--navy);font-weight:600;}
.modal-close{margin-top:16px;padding:10px 28px;background:var(--navy);color:#fff;border:none;border-radius:6px;font-size:14px;font-weight:700;cursor:pointer;font-family:var(--font-body);touch-action:manipulation;-webkit-tap-highlight-color:transparent;-webkit-appearance:none;appearance:none;}
.modal-close:active{opacity:.8;}

/* =====================================================
   CHECKBOX
   ===================================================== */
input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:var(--navy);touch-action:manipulation;}

/* =====================================================
   RESPONSIVE MOBILE
   ===================================================== */
@media(max-width:480px){
  .sigs{-webkit-flex-direction:column;flex-direction:column;}
  .body{padding:10px 10px 12px;}
  .hdr-l h1{font-size:18px;}
  .hdr-l .sub{font-size:9px;letter-spacing:2px;}
  .hdr-r img{height:34px;}
  .pg{margin:8px auto 12px;border-radius:8px;}
  .nav-btn{padding:9px 12px;font-size:12px;min-width:80px;}
  th{font-size:9px;padding:5px 4px;}
  td{padding:4px 4px;font-size:11px;}
  .st{font-size:11px;}
  .vlab{width:24px;font-size:10px;}
  .merge-label{font-size:11px;}
  .btn-pdf{font-size:14px;}
}

/* =====================================================
   ✨ ANIMATIONS
   ===================================================== */

/* --- Keyframes --- */
@keyframes fadeInUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes slideInLeft{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:translateX(0)}}
@keyframes shimmerSweep{0%{background-position:-400px 0}100%{background-position:400px 0}}
@keyframes navPulse{0%,100%{box-shadow:0 2px 12px rgba(0,0,0,.3)}50%{box-shadow:0 2px 24px rgba(200,168,75,.25)}}
@keyframes goldPing{0%{box-shadow:0 0 0 0 rgba(200,168,75,.5)}70%{box-shadow:0 0 0 8px rgba(200,168,75,0)}100%{box-shadow:0 0 0 0 rgba(200,168,75,0)}}
@keyframes logoFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-3px)}}
@keyframes btnGlow{0%,100%{box-shadow:0 4px 12px rgba(26,110,62,.35)}50%{box-shadow:0 6px 24px rgba(26,110,62,.6),0 0 0 3px rgba(26,110,62,.15)}}
@keyframes rowFadeIn{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:translateX(0)}}
@keyframes sectionPop{from{opacity:0;transform:scaleX(.97)}to{opacity:1;transform:scaleX(1)}}
@keyframes checkBounce{0%{transform:scale(1)}40%{transform:scale(1.35)}70%{transform:scale(.9)}100%{transform:scale(1)}}
@keyframes bgShift{0%,100%{background-color:#eef0f4}50%{background-color:#e8ecf2}}
@keyframes navBarIn{from{transform:translateY(-100%);opacity:0}to{transform:translateY(0);opacity:1}}
@keyframes pgIn{from{opacity:0;transform:translateY(16px) scale(.99)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes stationGlow{0%,100%{border-color:var(--gold);box-shadow:0 0 0 0 rgba(200,168,75,0)}60%{box-shadow:0 0 0 4px rgba(200,168,75,.18)}}
@keyframes titleSlide{from{opacity:0;letter-spacing:4px}to{opacity:1;letter-spacing:2px}}
@keyframes spinnerRing{from{transform:rotate(0deg)}to{transform:rotate(360deg)}}

/* --- Background subtle animation --- */
body{animation:bgShift 8s ease-in-out infinite;}

/* --- Nav entrance --- */
.nav{animation:navBarIn .45s cubic-bezier(.22,1,.36,1) both;animation:navPulse 4s ease-in-out infinite;}

/* --- Nav buttons hover --- */
.nav-btn{transition:background .22s,color .22s,border-color .22s,transform .15s,box-shadow .22s;}
.nav-btn:hover{background:rgba(200,168,75,.25);border-color:rgba(200,168,75,.5);color:#fff;box-shadow:0 0 0 2px rgba(200,168,75,.2);}
.nav-btn.on{animation:goldPing .6s ease-out;}

/* --- Page container entrance --- */
.pg{animation:pgIn .5s cubic-bezier(.22,1,.36,1) both;}
.pg.page-enter{animation:pgIn .4s cubic-bezier(.22,1,.36,1) both;}
.pg.page-exit{animation:fadeIn .15s ease reverse both;}

/* --- Header logo float --- */
.hdr-r img{animation:logoFloat 4s ease-in-out infinite;}

/* --- Header animated gold accent line --- */
.hdr{position:relative;overflow:hidden;}
.hdr::after{
  content:'';position:absolute;bottom:0;left:0;height:2px;width:100%;
  background:linear-gradient(90deg,transparent 0%,var(--gold) 30%,var(--goldl) 50%,var(--gold) 70%,transparent 100%);
  background-size:400px 2px;
  animation:shimmerSweep 3s linear infinite;
}

/* --- Station bar pulse --- */
.station{animation:stationGlow 3.5s ease-in-out infinite;}

/* --- Section titles entrance via IntersectionObserver class --- */
.st{transform-origin:left;transition:all .3s;}
.st.anim-visible{animation:sectionPop .4s ease both;}

/* --- Table rows stagger --- */
tbody tr{opacity:0;animation:rowFadeIn .4s ease both;}
tbody tr:nth-child(1){animation-delay:.05s}
tbody tr:nth-child(2){animation-delay:.1s}
tbody tr:nth-child(3){animation-delay:.15s}
tbody tr:nth-child(4){animation-delay:.2s}
tbody tr:nth-child(5){animation-delay:.25s}
tbody tr:nth-child(6){animation-delay:.3s}
tbody tr:nth-child(7){animation-delay:.35s}
tbody tr:nth-child(8){animation-delay:.4s}
tbody tr:nth-child(9){animation-delay:.45s}
tbody tr:nth-child(10){animation-delay:.5s}

/* --- Input focus ripple --- */
td input[type=text],td input[type=time],td input[type=date]{
  transition:border-color .2s,background .2s,box-shadow .2s;}
td input:focus{
  border-bottom:2px solid var(--gold);background:var(--goldp);border-radius:3px;
  box-shadow:0 2px 8px rgba(200,168,75,.18);}

/* --- Signature box hover glow --- */
.sigbox{transition:box-shadow .25s,transform .2s;}
.sigbox:hover{box-shadow:0 4px 18px rgba(200,168,75,.25);transform:translateY(-2px);}

/* --- Save PDF button shimmer + pulse --- */
.btn-pdf{
  overflow:hidden;
  animation:btnGlow 2.5s ease-in-out infinite;
  transition:transform .15s,opacity .15s;
}
.btn-pdf::after{
  content:'';position:absolute;top:0;left:-100%;width:60%;height:100%;
  background:linear-gradient(120deg,transparent 0%,rgba(255,255,255,.18) 50%,transparent 100%);
  animation:shimmerSweep 2.8s ease-in-out infinite;
}
.btn-pdf:hover{transform:translateY(-2px);box-shadow:0 8px 28px rgba(26,110,62,.5);}

/* --- Checkbox bounce on check --- */
input[type=checkbox]:checked{animation:checkBounce .35s ease both;}

/* --- Loading spinner for PDF generation --- */
.pdf-spinner{
  display:inline-block;width:18px;height:18px;
  border:2.5px solid rgba(255,255,255,.35);
  border-top-color:#fff;border-radius:50%;
  animation:spinnerRing .7s linear infinite;
  vertical-align:middle;margin-right:8px;
}

/* =====================================================
   CAPTURING — freeze animations for html2canvas
   ===================================================== */
body.capturing *{
  animation:none!important;
  transition:none!important;
  opacity:1!important;
  transform:none!important;
  box-shadow:none!important;
}
body.capturing .nav,
body.capturing .print-wrap{display:none!important;}
body.capturing .pg{
  display:block!important;
  box-shadow:none!important;
  margin:0 auto 20px!important;
  border-radius:0!important;
  max-width:100%!important;
}
body.capturing body{background:#fff!important;}
body.capturing .hdr::after{display:none!important;}
body.capturing .btn-pdf::after{display:none!important;}

/* =====================================================
   PRINT (Desktop Chrome/Safari)
   ===================================================== */
@media print{
  body{background:#fff;}
  .pg{box-shadow:none;margin:0;border-radius:0;max-width:100%;display:block!important;}
  .nav,.print-wrap,.btn-clr,.btn-up,.modal-overlay{display:none!important;}
  canvas{border:1px solid #ccc;}
  .sigprev.show{display:block!important;}
  .tbl-scroll{overflow:visible;}
  @page{margin:8mm;}

  /* Belt-and-suspenders: force the original ACFT REG / FLIGHT NO / BAY /
     FLIGHT ROUTE / ETD / DATE table row back on for print, regardless of
     the tablet/mobile stacking rules above (those are screen-only, but
     this guarantees it even if a browser evaluates print layout using
     the device's viewport width). */
  .fi-table thead{display:table-header-group!important;}
  .fi-table tbody tr{display:table-row!important;}
  .fi-table tbody td{
    display:table-cell!important;border:1px solid var(--border)!important;
    padding:5px 6px!important;
  }
  .fi-table tbody td::before{content:none!important;}
  .fi-table tbody td input{width:100%!important;text-align:inherit!important;}
}

/* Same guarantee for the html2canvas-based "Save as PDF" capture, which
   adds .capturing to <body> while rendering at a fixed desktop width
   (see doPdf()/A4_PX_W in view.php) — kept in sync with @media print
   above in case that capture width is ever changed. */
body.capturing .fi-table thead{display:table-header-group!important;}
body.capturing .fi-table tbody tr{display:table-row!important;}
body.capturing .fi-table tbody td{
  display:table-cell!important;border:1px solid var(--border)!important;
  padding:5px 6px!important;
}
body.capturing .fi-table tbody td::before{content:none!important;}
body.capturing .fi-table tbody td input{width:100%!important;text-align:inherit!important;}