/* ── WO list actions (open the New WO / Bulk Upload modals) ── */
.wo-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.wo-actions .btn-primary { margin-top: 0; }

/* queue inside the Bulk Upload modal — caps height, scrolls past ~5 files */
.bulk-queue-list { max-height: 300px; overflow-y: auto; }

/* ── WO list toolbar (search / sort / filters) ── */
.wo-toolbar {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 10px; flex-wrap: wrap;
}
.wo-toolbar-tabs { display: flex; gap: 8px; flex-shrink: 0; }

.wo-search, .wo-sort {
  padding: 7px 9px;
  border: 1px solid var(--border-hi); border-radius: 4px;
  font-size: 13px; font-family: 'Saira', sans-serif;
  background: var(--bg-input); color: var(--txt);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.wo-search { flex: 1 1 180px; min-width: 0; }
.wo-sort   { flex: 0 0 auto; cursor: pointer; }
.wo-search:focus, .wo-sort:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}
.wo-search::placeholder { color: var(--txt-muted); }

.wo-filters-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; flex-shrink: 0;
  background: var(--bg-card); color: var(--txt-muted);
  border: 1px solid var(--border-hi); border-radius: 4px;
  font-family: 'Saira Condensed', sans-serif;
  font-size: 11px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase;
  cursor: pointer; transition: all 0.15s;
}
.wo-filters-btn:hover { color: var(--txt); border-color: var(--accent); }
.wo-filters-btn-on { color: var(--accent); border-color: var(--accent); }
.wo-filters-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px;
  background: var(--accent); color: var(--bg);
  font-size: 10px; line-height: 1;
}

.wo-list-count {
  margin-left: auto; flex-shrink: 0;
  font-family: 'Saira Condensed', sans-serif;
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  color: var(--txt-muted);
}

.wo-filters-panel {
  display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap;
  margin-bottom: 12px; padding: 10px 12px;
  background: var(--bg-card); border: 1px solid var(--border); border-radius: 4px;
}
.wo-filter-field { display: flex; flex-direction: column; gap: 5px; }
.wo-filter-field > span {
  font-family: 'Saira Condensed', sans-serif;
  font-size: 10px; font-weight: 700; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--txt-muted);
}
.wo-filter-field select {
  padding: 7px 9px; min-width: 200px;
  border: 1px solid var(--border-hi); border-radius: 4px;
  font-size: 13px; font-family: 'Saira', sans-serif;
  background: var(--bg-input); color: var(--txt); cursor: pointer;
}
.wo-filter-field select:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-dim);
}

/* ── WO list cards ── */
#woTable { display: flex; flex-direction: column; gap: 8px; }

.wo-card {
  display: grid;
  grid-template-columns: minmax(68px, auto) 1fr;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wo-card:hover { border-color: var(--border-hi); background: var(--bg-hover); }

.wo-card-rail {
  position: relative;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: 2px;
  padding: 12px 10px;
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}
.wo-card-rail::before {
  content: '';
  position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--accent);
}
.wo-card-rail-label {
  font-family: 'Saira Condensed', sans-serif;
  font-size: var(--fs-sm);
  font-weight: 600;
  letter-spacing: 2px;
  line-height: 1;
  text-transform: uppercase;
  color: var(--txt-dim);
}
.wo-card-rail-num {
  font-family: 'Saira Condensed', sans-serif;
  font-size: 24px;
  font-weight: 700;
  letter-spacing: 0.5px;
  line-height: 0.95;
  color: var(--txt);
}

.wo-card-body {
  display: flex; flex-direction: column;
  gap: 6px;
  padding: 10px 14px;
  min-width: 0;
}
.wo-card-main {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--sp-6);
}
.wo-card-ident { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.wo-card-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 2px 10px;
  flex: none;
  font-family: 'Courier Prime', monospace;
  font-size: var(--fs-sm);
}
.wo-fact-k {
  align-self: center;
  font-family: 'Saira Condensed', sans-serif;
  font-size: var(--fs-xs);
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--txt-dim);
  white-space: nowrap;
}
.wo-fact-v { text-align: right; white-space: nowrap; color: var(--txt-muted); }

.wo-card-foot {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--sp-3);
  margin-top: 2px;
  padding-top: var(--sp-2);
  border-top: 1px solid var(--border);
}
.wo-card-indicators { display: flex; align-items: center; gap: var(--sp-1); }
.wo-card-actions { display: flex; gap: 6px; flex-shrink: 0; }

.wo-wf-pill {
  font-family: 'Saira Condensed', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.5px;
  padding: 2px 5px;
  border-radius: 3px;
  background: var(--neutral-dim);
  color: var(--txt-muted);
  border: 1px solid var(--border);
  line-height: 1.4;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.wo-wf-pill:hover { color: var(--txt); border-color: var(--border-hi); }

.wo-wf-pill-on {
  background: var(--green-dim);
  color: var(--green);
  border-color: var(--green-border);
}
.wo-wf-pill-on:hover { color: var(--green); border-color: var(--green); }

.wo-mileage-icon {
  width: 13px;
  height: 13px;
  color: var(--blue);
  margin-left: 2px;
}

.wo-card-aircraft {
  font-family: 'Saira Condensed', sans-serif;
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: 0.5px;
  color: var(--txt);
}
.wo-card-vendor {
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: 6px;
  font-size: var(--fs-base);
}
.wo-vendor-name { color: var(--txt); }
.wo-vendor-sub  { font-size: var(--fs-sm); color: var(--txt-muted); }

/* ── Core Tags ──
   The Tag Information header, the parts column and the snapshots panel all
   inherit --panel-sm (720px), but the parts row needs 760px and its two flex
   children can't shrink. That left the preview hanging 40px past the header
   and put a horizontal scrollbar on the page. Widen the three blocks to the
   row's real width so their edges line up; the preview itself is untouched.

   min-width, not max-: these are block elements already filling the column, so
   a larger max-width alone does nothing — the width has to be forced. Above the
   768px breakpoint only; below it mobile.css stacks .part-row and both children
   go full width. `screen` is load-bearing: an unqualified width query also
   matches during print, and print.css reuses .parts-container for the label
   sheet — a forced 760px there would push the 4x6 label off the page. */
@media screen and (min-width: 769px) {
  #wo-tab-coreTags .shared-panel,
  #wo-tab-coreTags .parts-container,
  #wo-tab-coreTags .snapshot-panel {
    max-width: var(--panel-tag);
    min-width: var(--panel-tag);
  }
}

/* ── Log Book (markup rendered by logbook.js) ── */
/* One stacked column, in order: page size + engine data across the top, the
   work description, RTS, the live preview, then the signing block and the
   print button. All share one edge.

   --panel-md rather than the .shared-panel default of --panel-sm: with the
   preview moved below the form instead of alongside it, the column had 470px
   sitting unused and the line inputs read cramped. The panels are overridden
   to fill it below. */
.lb-stack {
  display: flex; flex-direction: column; gap: 12px;
  max-width: var(--panel-md); margin: 0 auto;
}
/* .shared-panel caps itself at --panel-sm; inside the stack the stack governs. */
.lb-stack .shared-panel { max-width: none; }
#logbook-form-col    { display: flex; flex-direction: column; gap: 12px; }
#logbook-preview-col { width: 100%; }
/* Past ~816px the preview page stops scaling up (scale caps at 1), so centre it
   rather than letting it hug the left edge of a wider panel. Container only —
   the rendered page itself is untouched. */
#logbook-preview { display: flex; justify-content: center; }
/* Equal halves, and min-width:0 so a long button label can't push one wider */
.lb-top-row { display: flex; gap: 12px; align-items: stretch; }
.lb-top-row > * { flex: 1 1 0; min-width: 0; }
.lb-label {
  font-size: 10px; font-weight: 600;
  font-family: 'Saira Condensed', sans-serif;
  text-transform: uppercase; letter-spacing: 1px; color: var(--txt-muted);
}
.lb-id-value     { font-size: 14px; font-weight: 600; color: var(--txt); }
.lb-id-value.dim { color: var(--txt-dim); }
.lb-rts-item {
  background: var(--bg-card); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 8px 10px; cursor: pointer;
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
}
.lb-rts-item.active { background: var(--accent-faint); border-color: var(--accent); }
.lb-rts-text { font-size: 12px; color: var(--txt); line-height: 1.5; flex: 1; }
.lb-rts-del {
  background: none; border: none; color: var(--txt-dim); cursor: pointer;
  font-size: 14px; padding: 0; flex-shrink: 0;
}
.lb-rts-del:hover { color: var(--red); }
.lb-textarea {
  background: var(--bg-input); border: 1px solid var(--border-hi); color: var(--txt);
  border-radius: var(--radius); font-family: 'Saira', sans-serif;
  transition: border-color 0.15s;
}
.lb-textarea:focus { outline: none; border-color: var(--accent); }
.lb-rts-input  { flex: 1; padding: 8px; font-size: 12px; resize: vertical; min-height: 60px; }
/* overflow-y:auto, not hidden. lbAutoResize() pins the height to scrollHeight,
   so normally there is nothing to scroll and this shows no bar. But the height
   is a fixed px value measured once; if that measurement is ever short — a
   webfont swapping in after layout, a paste that outpaces the resize — hidden
   made the extra text unreachable, with resize:none leaving no way out. */
.lb-line-input { flex: 1; padding: 7px 10px; font-size: 13px; resize: none; line-height: 1.45; overflow-y: auto; }
.lb-line-num {
  font-family: 'Courier Prime', monospace; font-size: 12px;
  color: var(--accent); font-weight: 700; min-width: 20px;
  padding-top: 9px; text-align: right; flex-shrink: 0;
}
.lb-warn {
  margin-top: 10px; font-size: 11px; color: var(--accent);
  font-family: 'Saira Condensed', sans-serif; letter-spacing: 0.5px;
}
/* Inside the preview panel the warning sits between the panel head and the
   sheets, so it needs the panel's own padding rather than a stacked margin. */
.lb-warn--preview {
  margin: 0; padding: 10px 14px;
  border-bottom: 1px solid var(--border);
}
.lb-save-status {
  font-size: 11px; color: var(--green);
  font-family: 'Saira Condensed', sans-serif; letter-spacing: 0.5px;
}
.lb-preview-panel { margin: 0; padding: 0; overflow: hidden; }
.lb-preview-head {
  padding: 10px 14px; border-bottom: 1px solid var(--border);
  display: flex; justify-content: space-between; align-items: center;
}
.lb-preview-title {
  font-family: 'Saira Condensed', sans-serif; font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 2px; color: var(--accent);
}

/* ── WO detail ── */
#det_internalWO {
  background: var(--bg-card);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  padding: 9px 12px;
  color: var(--accent);
  font-family: 'Courier Prime', monospace;
  font-size: 15px;
  font-weight: 700;
}

/* ── Settings ── */
.settings-note {
  margin: 10px 0 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--txt-muted);
}

/* ── Mileage tables (global + WO-scoped) ──────────────────
   Each row is a card on the panel surface, matching .wo-card.
   Scoped to .mil-table so the Year Summary and the Documents and
   Vendors tables keep their .data-table look. */
.mil-table {
  width: 100%;
  border-collapse: separate;   /* required — lets rows have gaps and radii */
  border-spacing: 0 8px;       /* the 8px gap between cards */
  font-size: var(--fs-base);
}

/* Header: bare labels above the cards, not a bar */
.mil-table thead th {
  font-family: 'Saira Condensed', sans-serif;
  font-size: var(--fs-sm); font-weight: 600;
  letter-spacing: 1.5px; text-transform: uppercase;
  color: var(--txt-dim);
  text-align: left; padding: 0 12px 2px;
  white-space: nowrap; background: none; border: none;
}
.mil-table thead th:first-child { padding-left: 15px; }
.mil-table thead th.col-right { text-align: right; }

/* Body: every cell paints part of the card */
.mil-table tbody td {
  height: 48px; padding: 0 12px;
  vertical-align: middle; white-space: nowrap;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transition: background 0.15s, border-color 0.15s;
}
/* The accent stripe is a real border, not an overlaid ::before, so it follows
   border-radius around the corner. On .wo-card the equivalent 3px ::before is
   clipped by the card's own overflow:hidden; a td has no clipping ancestor, and
   a 3px-wide box can't curve at 6px — the browser scales its radius down to
   3px and the corner reads square next to the cell's. box-sizing is border-box
   globally, so widening 1px -> 3px costs no layout. mobile.css already draws
   this stripe the same way on the flattened row. */
.mil-table tbody td:first-child {
  position: relative; padding-left: 15px;
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-lg) 0 0 var(--radius-lg);
}
.mil-table tbody td:last-child {
  border-right: 1px solid var(--border);
  border-radius: 0 var(--radius-lg) var(--radius-lg) 0;
}
.mil-table tbody tr:hover td {
  background: var(--bg-hover); border-color: var(--border-hi);
}
/* ...but not the accent stripe — border-color above is a four-side shorthand
   and would gray it out on hover. */
.mil-table tbody tr:hover td:first-child { border-left-color: var(--accent); }
.mil-table td.col-right { text-align: right; }

/* The WO # cell is a rail, not another card cell — same dark ground as
   .wo-card-rail on the Work Orders list, so a work order reads the same in
   both places. Keyed to .mil-wo rather than td:first-child on purpose: the
   WO-scoped table has no WO column and its first cell is the date.
   The hover rule above has to be re-beaten, or the rail lightens on hover
   while .wo-card-rail (an opaque child) stays dark. */
.mil-table tbody td.mil-wo,
.mil-table tbody tr:hover td.mil-wo {
  background: var(--bg-sidebar);
  border-right: 1px solid var(--border);
}
/* Sized and centred to match .wo-card-rail's minmax(68px, auto) rather than
   stretching to whatever the header needs — a full-width dark cell reads as a
   slab, not a rail. The header is centred over it to stay aligned. */
.mil-table thead th.th-wo,
.mil-table tbody td.mil-wo {
  /* min-width, not just width: on an auto-layout table a plain width is only a
     suggestion and the browser will squeeze the cell until the text clips.
     The "WO # ⇅" header ends up governing and the column settles at 72px —
     4px over .wo-card-rail's 68, which reads as the same rail. */
  min-width: 68px;
  width: 68px;
  padding-left: 10px; padding-right: 10px;   /* keeps the text off the 3px stripe */
  text-align: center;
}

/* Per-column typography */
.mil-wo   { font-family: 'Saira Condensed', sans-serif; font-size: var(--fs-md); font-weight: 700; letter-spacing: 1px; color: var(--txt); }
.mil-date { font-family: 'Courier Prime', monospace; font-size: 12.5px; color: var(--txt); }
.mil-vwo  { font-family: 'Courier Prime', monospace; font-size: 12px; color: var(--txt-muted); }
.mil-odo  { font-family: 'Courier Prime', monospace; font-size: 12.5px; color: var(--txt-muted); }
.mil-mi   { font-family: 'Courier Prime', monospace; font-size: 13.5px; font-weight: 700; color: var(--txt); }
.mil-leg span { display: block; max-width: 190px; overflow: hidden; text-overflow: ellipsis; }

.mil-rt {
  font-family: 'Saira Condensed', sans-serif;
  font-size: var(--fs-sm); font-weight: 700; letter-spacing: 1px;
  text-transform: uppercase; color: var(--green);
}
.mil-rt-off { color: var(--txt-dim); }

.mil-acts { text-align: right; }
.mil-acts .btn-sm + .btn-sm { margin-left: 6px; }

/* Footer: a summary line under the cards, not a card itself */
.mil-table tfoot td {
  padding: 4px 12px; background: none; border: none;
  font-size: var(--fs-sm);
}
.mil-foot-label {
  text-align: right; text-transform: uppercase;
  font-family: 'Saira Condensed', sans-serif;
  font-weight: 700; letter-spacing: 1px; color: var(--txt-muted);
}
.mil-foot-total {
  text-align: right; font-family: 'Courier Prime', monospace;
  font-weight: 900; font-size: var(--fs-base); color: var(--accent);
}