/* ============ SHARED OPERATOR DATA ============
   Two screens' worth of styling: the banner a pilot sees when their operator has changed the
   fleet, weights, limits or tanks; and the fleet editor inside the admin dashboard.

   The banner uses the warn palette rather than the accent. That is deliberate — what it
   reports is a figure that moved under a pilot without them asking, which is worth a second's
   attention even when the change is routine. It is not an error, so it is not `bad`. */

/* ---------- THE PILOT'S BANNER ---------- */
.org-banner {
  margin: 10px 12px 0;
  padding: 10px 12px;
  border: 1px solid var(--warn);
  border-left-width: 4px;
  border-radius: 8px;
  background: var(--warnbg);
  color: var(--ink);
  box-shadow: var(--shadow);
}
.org-banner[hidden] { display: none; }

.org-banner-head {
  display: flex;
  align-items: center;
  gap: 8px;
}
.org-banner-title {
  font-weight: 600;
  color: var(--warn);
}
.org-banner-close {
  margin-left: auto;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: 20px;
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
}
.org-banner-close:hover { color: var(--ink); }

.org-banner-list {
  margin: 6px 0 0;
  padding-left: 20px;
  /* A long list is scrolled rather than allowed to push the planner off the screen. An
     operator republishing a whole fleet can produce dozens of lines, and the tabs underneath
     must stay reachable without scrolling past all of them. */
  max-height: 30vh;
  overflow-y: auto;
}
.org-banner-list li {
  margin: 2px 0;
  /* Figures line up under each other so "1372 → 1380" is scannable down the column. */
  font-variant-numeric: tabular-nums;
}
.org-banner-note {
  margin-top: 6px;
  color: var(--muted);
  font-size: 12px;
}

/* Never on paper. The banner is a notice about the app, not part of a nav log, and a printed
   flight plan carrying "empty mass 1372 → 1380 kg" across the top would be confusing at best
   in a cockpit. */
@media print { .org-banner { display: none !important; } }


/* ---------- THE ORGANIZATION PANEL'S TABS ---------- */
.admin-tabs {
  display: flex;
  gap: 4px;
  margin: 0 0 14px;
  border-bottom: 1px solid var(--line);
}
.admin-tab {
  display: flex;
  align-items: baseline;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid transparent;
  border-bottom: 0;
  border-radius: 6px 6px 0 0;
  margin-bottom: -1px;
  background: transparent;
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  cursor: pointer;
}
.admin-tab:hover { color: var(--ink); }
.admin-tab.selected {
  border-color: var(--line);
  background: var(--panel);
  color: var(--ink);
}
/* The word under each tab — "3 pilots", "published". It is what lets an admin answer "has this
   operator got a fleet out yet" without clicking, which is the question they most often open
   this screen for. */
.admin-tab-meta {
  font-size: 11px;
  font-weight: 400;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}
.admin-tab-meta.fleet-published { color: var(--good, var(--accent)); }
.admin-tab-meta.fleet-draft { color: var(--warn); }

/* ---------- STARTING A FLEET ---------- */
.fleet-start {
  padding: 24px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  text-align: center;
}
.fleet-start h3 { margin: 0 0 6px; }
.fleet-start p { margin: 0 auto 14px; max-width: 52ch; color: var(--muted); }
.fleet-start-actions {
  display: flex;
  gap: 8px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

/* ---------- THE EDITOR'S HEADER ---------- */
.fleet-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.fleet-name { flex: 1 1 260px; }
/* "Saved. Not published yet." — the sentence that makes an autosave trustworthy. Given room on
   its own rather than tucked under the name field, because an admin who cannot see it will
   press Publish just to be sure. */
.fleet-status {
  flex: 0 1 auto;
  min-height: 1.2em;
  color: var(--muted);
  font-size: 12px;
}

.fleet-state {
  margin-bottom: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  font-size: 13px;
}
.fleet-state-meta { color: var(--muted); font-size: 12px; }
.fleet-state-none { color: var(--muted); }
.fleet-state-diff { margin-top: 4px; color: var(--warn); }

/* ---------- ONE SECTION ---------- */
.fleet-sec {
  margin-bottom: 18px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
}
/* An unshared section is dimmed rather than hidden. Hiding it would make "we do not share
   equipment weights" indistinguishable from "this version has no equipment weights". */
.fleet-sec.off { opacity: .72; }
.fleet-sec-head {
  margin-bottom: 6px;
  /* The tick and title on the left, whatever the section offers on the right. */
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
}
.fleet-sec-btn { margin-left: auto; flex: none; }
.fleet-sec-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  cursor: pointer;
}
/* The global `input{width:100%}` in forms.css is written for text fields. Left to apply here it
   stretches this checkbox across the whole header, which centres its glyph in the middle of the
   row and shoves the section title out to the far right — the box then reads as belonging to
   nothing. Size it explicitly so it sits immediately left of its title, where a tick belongs. */
.fleet-sec-toggle input[type="checkbox"] {
  flex: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}
.fleet-sec-title { font-size: 15px; font-weight: 600; }
.fleet-sec-note {
  margin: 0 0 8px;
  color: var(--muted);
  font-size: 12px;
  max-width: 80ch;
}
.fleet-sec-note.off { margin: 0; }
.fleet-sec-note.carried { margin-top: 8px; font-style: italic; }
.fleet-sub {
  margin: 14px 0 4px;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
}

/* ---------- THE TABLES ----------
   Ten columns of aircraft do not fit a laptop, let alone the iPad an admin may be holding. The
   wrapper scrolls sideways rather than letting the row wrap: an empty mass that has wrapped
   under a maximum weight is worse than one that is off-screen, because it looks like it is in
   a column it is not. */
.fleet-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: 6px;
  margin-bottom: 8px;
}
.fleet-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.fleet-table th {
  padding: 6px 8px;
  text-align: left;
  white-space: nowrap;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  background: var(--panel2);
}
.fleet-unit { text-transform: none; letter-spacing: 0; opacity: .8; }
.fleet-table td {
  padding: 3px 4px;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.fleet-table tr:last-child td { border-bottom: 0; }
.fleet-empty {
  padding: 10px !important;
  text-align: center;
  color: var(--muted);
}
.fleet-rowact { width: 34px; text-align: center; }
/* The left-hand cell of the fuel tank column-name table: the app's own word for the column,
   which is what says WHICH column the box beside it names. Padded to sit on the same line as
   that box, which is an input and carries its own padding. */
/* ---------- RENAMING THE FUEL TANK COLUMNS ----------
   Sits directly above the table it renames, so the headings an admin is changing are in view
   while they type. Boxed inputs rather than the bare ones the data tables use: those are cells
   in a grid where the border would be noise, this is a short form where it is the affordance. */
.fleet-cols {
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 10px 12px 12px;
  margin-bottom: 10px;
  background: var(--panel2);
}
.fleet-cols-lead { margin: 0 0 10px; font-size: 12px; color: var(--muted); line-height: 1.5; }
.fleet-cols-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 8px 12px;
  margin-bottom: 10px;
  /* One of these labels carries a second line saying its column is worked out on the pilot's
     tablet. Bottom-aligned so that does not leave its box sitting lower than the other five. */
  align-items: end;
}
.fleet-col-field { display: block; }
.fleet-col-field > span {
  display: block;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--muted);
  margin-bottom: 3px;
}
/* Said quietly, because it answers a question an admin only asks once: why is there a box for
   a column the table below does not have? */
.fleet-col-note { display: block; text-transform: none; letter-spacing: 0; font-size: 10px; opacity: .75; }
.fleet-in.boxed { border-color: var(--line); background: var(--panel); }

.fleet-in {
  width: 100%;
  min-width: 74px;
  box-sizing: border-box;
  padding: 4px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 13px;
}
/* The border only appears on hover and focus. A grid of a hundred boxed inputs reads as noise;
   what matters at a glance is the figures, and the box is what confirms the cell you are in. */
.fleet-in:hover { border-color: var(--line); }
.fleet-in:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--panel);
}
.fleet-in.num {
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* Spinners take a third of a narrow numeric cell and nobody nudges an empty mass by one. */
.fleet-in.num::-webkit-outer-spin-button,
.fleet-in.num::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.fleet-in.num { -moz-appearance: textfield; appearance: textfield; }

/* ---------- PUBLISHING ---------- */
.fleet-publish {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  align-items: center;
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
}
.fleet-publish-note { color: var(--muted); font-size: 12px; }
/* Pushes "Stop sharing" away from Publish. They sit in the same row and one of them is the
   destructive one; a gap is cheaper than a confirmation nobody reads. */
.fleet-publish .spacer { flex: 1 1 auto; }

/* ---------- THE DOCUMENT LIBRARY EDITOR ----------
   The Documents tab (public/js/admin-docs.js). It edits the same draft the fleet does, but a
   form is a TREE — documents hold sections, sections hold blocks, blocks hold labelled rows —
   and the nesting has to be visible or an admin cannot tell what they are about to delete.
   Depth is shown with a left border and a background one step lighter at each level, rather
   than with indentation alone, which disappears the moment a section is wide. */

/* The library itself: one chip per document, the open one marked. Short list, so chips rather
   than a sidebar — a list of two documents does not deserve a column of the screen. */
.doc-list { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; margin: 10px 0 14px; }
.doc-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  text-align: left;
  padding: 7px 12px;
  cursor: pointer;
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 8px;
  font: inherit;
}
.doc-chip:hover { background: var(--btnhover); }
.doc-chip.selected { border-color: var(--accent); background: var(--liftbg); }
.doc-chip-name { font-weight: 600; font-size: 13px; }
.doc-chip-meta { font-size: 11px; color: var(--muted); }
.doc-list-actions { display: flex; gap: 8px; align-items: center; }

/* ---- one document ---- */
.doc-editor {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
  background: var(--panel2);
}
.doc-editor-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 10px 16px;
  margin-bottom: 12px;
}
.doc-editor-head .admin-field { flex: 1 1 200px; }
.doc-note-field { flex: 2 1 320px !important; }

/* ---- a section ---- */
.doc-sec {
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: 8px;
  background: var(--panel);
  padding: 10px;
  margin-bottom: 10px;
}
.doc-sec-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
/* THE HEADING IS THE ONLY THING IN THIS ROW THAT MAY GIVE WAY. "Can repeat", the two arrows
   and the ✕ are each exactly as wide as they are — they are words and glyphs, not boxes to
   type in — but they sit beside a heading box that asks for 200px and may shrink to nothing,
   so on a tablet, where the dashboard has a few hundred pixels less than a laptop, they were
   squeezed instead: "Can repeat" broke over two lines with the arrows drawn across it.
   Nailing them to their own size makes the heading the thing that narrows, which is what a
   box for typing in is for. */
.doc-sec-head > .doc-check,
.doc-sec-head > .doc-move,
.doc-sec-head > .btn { flex: 0 0 auto; }
.doc-sec-head > .doc-check { white-space: nowrap; }
.doc-sec-title {
  flex: 1 1 200px;
  min-width: 0;
  padding: 5px 8px;
  font: inherit;
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .5px;
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.doc-sec-title:focus { outline: 2px solid var(--accent); outline-offset: -1px; }

/* ---- the blocks in a section ----
   Side by side, wrapping, in the same proportion they will have on the pilot's screen —
   so the editor looks approximately like the form it is building. */
.doc-blocks { display: flex; flex-wrap: wrap; gap: 8px; }
.doc-block {
  flex: 1 1 240px;
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--panel2);
  padding: 8px;
}
.doc-block-head { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-bottom: 6px; }
.doc-block-type {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 20px;
  padding: 1px 8px;
  white-space: nowrap;
}
.doc-block-title {
  flex: 1 1 120px;
  min-width: 0;
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.doc-block-title:focus, .doc-row input:focus, .doc-w input:focus, .doc-minrows input:focus {
  outline: 2px solid var(--accent);
  outline-offset: -1px;
}
.doc-w, .doc-minrows { display: flex; align-items: center; gap: 5px; font-size: 10.5px; color: var(--muted); }
.doc-w span, .doc-minrows span { text-transform: uppercase; letter-spacing: .4px; }
.doc-w input { width: 54px; }
.doc-minrows input { width: 90px; }
.doc-w input, .doc-minrows input, .doc-row input {
  padding: 4px 6px;
  font: inherit;
  font-size: 12.5px;
  background: var(--panel);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.doc-row input { flex: 1 1 auto; min-width: 0; }

.doc-table-opts {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 8px;
  padding: 6px 8px;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: 5px;
  font-size: 12px;
}
.doc-check { display: flex; align-items: center; gap: 6px; cursor: pointer; }
/* THE SAME TRAP AS .fleet-sec-toggle ABOVE, and worth reading that note first: the global
   `input{width:100%}` in forms.css is written for text fields, and a checkbox left to it
   stretches across its label.

   IT DOES NOT LOOK BROKEN ON A DESKTOP BROWSER, which is why this was missed. The label is
   shrink-to-fit, so a percentage width inside it has nothing definite to resolve against and
   comes out as the checkbox's own size. On the iPad it resolves, the tick takes the whole
   label, and "Can repeat" is pushed past the end of it — where, being a plain overflow, it is
   painted UNDER the arrows and the ✕ that come after it in the row. The section heading on
   every tablet in the company read "Can" with a button drawn across the rest of it.

   `flex: none` alone does not fix it: flex-basis:auto reads the width, so the width has to go
   as well. */
.doc-check input[type="checkbox"] {
  flex: none;
  width: auto;
  min-width: 0;
  margin: 0;
  padding: 0;
}

.doc-rows { display: flex; flex-direction: column; gap: 5px; }
.doc-rows-empty { margin: 0 0 4px; font-size: 12px; color: var(--muted); font-style: italic; }
/* The sentence under "Fill in from" on a table that fills itself in. Its own line across the
   whole strip rather than another item in the row, because it is a note about the boxes below
   it and not a third setting beside the two above. */
.doc-source-note {
  flex: 1 0 100%;
  margin: 2px 0 0;
  font-size: 11px;
  line-height: 1.4;
  color: var(--muted);
}
.doc-rows-cap {
  margin: 10px 0 2px;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: .5px;
  color: var(--muted);
}
.doc-rowlabels { border-top: 1px dashed var(--line); padding-top: 2px; }
.doc-row { display: flex; align-items: center; gap: 4px; }

/* Up and down sit together and are quiet: they are used once while a form is being shaped and
   never again, so they must not compete with the labels beside them. */
.doc-move { display: inline-flex; gap: 2px; }
.doc-move .btn { padding: 2px 7px; line-height: 1.3; }
.doc-move .btn[disabled] { opacity: .35; cursor: default; }

.doc-block-add { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.doc-type-pick {
  padding: 4px 8px;
  font: inherit;
  font-size: 12.5px;
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 6px;
}
.doc-type-pick option { background: var(--panel2); color: var(--ink); }

/* The column-to-tank-field picker, shown only on a table that is filled in from somewhere. */
.doc-from-pick {
  flex: 0 0 auto;
  max-width: 132px;
  padding: 3px 5px;
  font: inherit;
  font-size: 11.5px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.doc-from-pick option { background: var(--panel2); color: var(--ink); }

/* Which way a column's contents are set. Sized and coloured like the picker above rather than
   like the width box beside it: both of these are quiet choices made once while a form is
   being shaped, and neither should draw the eye the way a figure the pilot reads does. */
.doc-colalign { flex: 0 0 auto; display: flex; align-items: center; }
.doc-colalign select {
  max-width: 96px;
  padding: 3px 5px;
  font: inherit;
  font-size: 11.5px;
  background: var(--panel);
  color: var(--muted);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.doc-colalign select option { background: var(--panel2); color: var(--ink); }
.doc-table-opts select {
  padding: 3px 6px;
  font: inherit;
  font-size: 12px;
  background: var(--panel2);
  color: var(--ink);
  border: 1px solid var(--line);
  border-radius: 5px;
}
.doc-table-opts select option { background: var(--panel2); color: var(--ink); }

/* Under a column box that the FUEL tab is heading instead. Its own line, and quiet: it tells
   an administrator what is already true rather than asking them to do anything. */
.doc-col-shown {
  margin: -1px 0 2px 6px;
  font-size: 11px;
  font-style: italic;
  color: var(--muted);
}