/* ===== Trip Sheet – Globals ===== */
:root{
  --bg:#f2f3f5;
  --panel:#fff;
  --ink:#1b1d21;
  --muted:#6b7280;
  --line:#d7dbe1;
  --line-strong:#b8bec8;
  --head-bg:#2e3239;     /* header band */
  --head-fg:#ffffff;
  --subhead-bg:#f4f6f8;
  --row-alt:#fafbfc;
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace;
  --ui: system-ui,"Segoe UI",Roboto,Arial,sans-serif;
}

*{box-sizing:border-box}
body{background:var(--bg); color:var(--ink); font:14px/1.35 var(--ui)}

/* ===== Day Wrapper =====
   If you can, wrap each day in <section class="trip-day">...</section>
   If not, this still works when applied to a main container. */
.trip-day, .trip-day-wrapper {
  background:var(--panel);
  border:1px solid var(--line-strong);
  border-radius:6px;
  overflow:hidden;
  margin:18px 0;
  box-shadow:0 1px 0 rgba(0,0,0,.02);
}

/* ===== Header (Date left, Bid code right) =====
   Markup suggestion:
   <header class="day-header"><div class="day-title">Sunday Aug 24, 2025</div><div class="bid-code">CZN2</div></header>
*/
.day-header {
    display:flex;
    justify-content:space-between;
    align-items:flex-start;
    padding: 8px;
    background:#2e3239;
    color:#fff;
  }

  .day-title, p {
    font-weight:700;
    align-self:flex-start;
    margin:0;
    line-height:1.1;
  }

  .bid-code {
    font-weight:600;
    opacity:.9;
    align-self:flex-start;
    margin:0
  }

/* Optional small meta row (FAR/2, Duty Period, Flight Time) */
.day-meta{
  display:flex; gap:18px; align-items:baseline;
  padding:6px 12px; background:#3a3f46; color:#e8eaed;
  font-variant-numeric:tabular-nums;
}
.day-meta strong{font-weight:700}

/* ===== Flight Legs Table =====
   Apply class="leg-table" to your legs table; or target the first table after .day-header. */
.leg-table, .trip-day table.legs, .trip-day table:first-of-type{
  width:100%; border-collapse:separate; border-spacing:0; table-layout:fixed;
  font-variant-numeric:tabular-nums;
}
.leg-table thead th,
.trip-day table.legs thead th,
.trip-day table:first-of-type thead th{
  background:var(--subhead-bg);
  color:#2f3540;
  font-weight:700;
  padding:8px 10px;
  border-bottom:1px solid var(--line-strong);
  border-right:1px solid var(--line);
  white-space:nowrap;
}
.leg-table thead th:last-child{border-right:0}

.leg-table tbody td,
.trip-day table.legs tbody td,
.trip-day table:first-of-type tbody td{
  padding:7px 10px;
  border-bottom:1px solid var(--line);
  border-right:1px solid var(--line);
  background:#fff;
  white-space:nowrap;
}
.leg-table tbody tr:nth-child(even) td{background:var(--row-alt)}
.leg-table tbody td:last-child{border-right:0}
.leg-table tbody tr:last-child td{border-bottom:1px solid var(--line-strong)}

tfoot td {
  text-align:right;
  font-weight:bold;
  font-family:var(--mono, monospace);
}

/* Column helpers (add these classes to your <th>/<td>) */
.col-idx{width:38px; color:var(--muted); text-align:left}
.col-time{text-align:center; font-family:var(--mono)}
.col-num{text-align:right; font-family:var(--mono)}
.col-text{text-align:center}

/* Local + UTC stacked in a cell (optional) */
.time{line-height:1.05}
.time .utc{font-size:.85em; opacity:.75}
.tz{font-variant-numeric:tabular-nums}

/* ===== Duty/Footer strip =====
   Markup suggestion:
   <footer class="day-footer"><div class="kv"><span class="k">Report:</span><span class="v">15:00 MDT · 21:00Z</span></div>...</footer>
*/
.day-footer{
  display:grid;
  grid-template-columns: repeat(7, minmax(120px, 1fr));
  gap:0;
  padding:10px 12px;
  background:#f7f8fa;
  border-top:1px solid var(--line-strong);
}
.day-footer .kv{
  border-right:1px solid var(--line);
  padding:4px 8px;
  display:flex; gap:6px; align-items:baseline;
  font-variant-numeric:tabular-nums;
}
.day-footer .kv:last-child{border-right:0}
.day-footer .k{color:var(--muted); min-width:64px}
.day-footer .v{font-weight:600; font-family:var(--mono)}
.day-footer .grow{grid-column:span 2}

/* ===== Toggle: UTC-only view (optional) =====
   Add a checkbox that toggles body.utc-only */
body.utc-only .time .local{display:none}
body.utc-only .time .utc{font-size:1em; opacity:1}

/* ===== Utilities ===== */
.right{text-align:right}
.center{text-align:center}

/* ===== Compact & Print ===== */
@media (max-width: 920px){
  .day-meta{gap:12px; font-size:13px}
  .day-footer{grid-template-columns:repeat(3, 1fr); row-gap:6px}
  .day-footer .grow{grid-column:span 3}
  .col-idx{width:28px}
}
@media print{
  body{background:#fff}
  .trip-day, .trip-day-wrapper{box-shadow:none; margin:10px 0; page-break-inside:avoid}
  .day-header, .day-meta{-webkit-print-color-adjust:exact; print-color-adjust:exact}
}