/*
 * GliderOps site-wide stylesheet.
 *
 * The app is otherwise Bootstrap 3 defaults plus per-template <style> blocks.
 * Two things belong here rather than in an inline block: anything that applies
 * on every page (the brand tokens, the navbar, the focus ring), and the CSS
 * for a page being lifted off the stock Bootstrap look. A same-origin file
 * satisfies the CSP and is one step toward dropping 'unsafe-inline' from
 * style-src, which an inline <style> in base.html would not be.
 *
 * Page sections are marked with a `---- <page> ----` rule and stay in one
 * block; take colours from the tokens below, never from a raw hex.
 */

/* ---- Brand tokens ------------------------------------------------------ */
/* Straight from gliderops-brand.md, which the marketing site and the invoice
   PDF also read. Declared here so a page being refreshed off Bootstrap 3's
   stock palette has one place to take its colours from — reference the token,
   never the hex. The brand's Inter/Poppins are deliberately NOT loaded: the
   CSP is origin-tight and Google Fonts is an external host, so the fallback
   stack is what ships. */
:root {
  --go-navy: #1E40AF;
  --go-navy-dark: #1E3A8A;
  --go-sky: #0EA5E9;
  --go-surface: #F8FAFC;
  --go-surface-alt: #F1F5F9;
  --go-border: #E2E8F0;
  --go-text: #1F2937;
  --go-text-secondary: #4B5563;
  --go-text-muted: #9CA3AF;
  --go-success: #16A34A;
  --go-warning: #D97706;
  --go-danger: #DC2626;
}

/* ---- Navbar brand: logo mark + club short name ------------------------ */

.navbar-brand {
  display: flex;
  align-items: center;
  font-weight: 600;
}

.navbar-brand > img {
  height: 28px;
  margin-right: 9px;
  /* The logo artwork is replaced per club deployment and is typically
     dark-on-light (GHSA's eagle is #1E40AF), which would vanish on the
     dark navbar. Render whatever file is present as a white mark instead
     of requiring every club to supply a second, light variant. */
  filter: brightness(0) invert(1);
}

/* Bootstrap's navbar-inverse renders the brand in the same grey as the
   links; white plus the heavier weight above makes it the anchor of the
   bar. */
.navbar-inverse .navbar-brand,
.navbar-inverse .navbar-brand:hover,
.navbar-inverse .navbar-brand:focus {
  color: #fff;
}

/* ---- Collapse to the hamburger below 1200px --------------------------- */
/* Bootstrap 3 hard-codes its mobile collapse at 768px. An all-roles admin
   sees eight top-level items (~1150px including brand and user menu), so
   between 768px and ~1200px the user menu wraps onto a second navbar row.
   Mirror Bootstrap's own <768px rules up to 1199px so those widths get the
   hamburger instead. This file loads after bootstrap.css, so the
   equal-specificity overrides here win on source order. */
@media (max-width: 1199px) {
  .navbar-header { float: none; }
  .navbar-left, .navbar-right { float: none !important; }
  .navbar-toggle { display: block; }
  .navbar-collapse {
    border-top: 1px solid transparent;
    box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.1);
  }
  .navbar-collapse.collapse { display: none !important; }
  .navbar-collapse.collapse.in { display: block !important; }
  .navbar-nav { float: none !important; margin: 7.5px -15px; }
  .navbar-nav > li { float: none; }
  .navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; }

  /* Open dropdowns render inline (Bootstrap's stacked-mobile treatment)
     instead of as floating white popovers over the dark menu. */
  .navbar-nav .open .dropdown-menu {
    position: static;
    float: none;
    width: auto;
    margin-top: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
  }
  .navbar-nav .open .dropdown-menu > li > a,
  .navbar-nav .open .dropdown-menu .dropdown-header {
    padding: 5px 15px 5px 25px;
  }
  .navbar-nav .open .dropdown-menu > li > a { line-height: 20px; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a { color: #9d9d9d; }
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:hover,
  .navbar-inverse .navbar-nav .open .dropdown-menu > li > a:focus {
    color: #fff;
    background-color: transparent;
  }
  .navbar-inverse .navbar-nav .open .dropdown-menu .dropdown-header { color: #9d9d9d; }
}

/* Dispatch "Queue Flights" Pilot box: text typed but no member resolved
   behind it. The hidden #pilot_id is what actually saves, so an unresolved
   box queues a flight with no pilot -- billed for the tow, no glider rental,
   attributable to nobody. Flagged rather than silently blanked. */
#pilot_name.pilot-unresolved {
  border-color: #a94442;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
}

/* ---- Flight-log time fields + their "Now" button ---------------------- */
/* The stamp used to be right-click only (click_on_time.js tests e.which == 3
   on mouseup), so on the tablet a dispatcher actually holds at the flight
   line the core gesture of the page did not exist, and no keyboard could
   reach it either. The button beside each field is that action made visible.
   Sized for a real finger rather than matched to the 30px inputs around it —
   this is the control that gets pressed on every flight, outdoors, in a
   hurry. */
.time-field {
  display: flex;
  align-items: stretch;
  gap: 2px;
}

.time-field .time {
  flex: 1 1 auto;
  min-width: 0;
}

.time-field .time-now {
  flex: 0 0 auto;
  min-height: 34px;
  padding: 2px 8px;
  font-size: 12px;
  line-height: 1.4;
}

/* Touch and coarse pointers: the flight line, essentially. Give the button a
   full 44px target and stop iOS zooming the page when the field takes focus,
   which it does for any input under 16px. */
@media (pointer: coarse) {
  .time-field { gap: 4px; }
  .time-field .time { font-size: 16px; }
  .time-field .time-now {
    min-height: 44px;
    min-width: 44px;
    font-size: 14px;
  }
}

/* ---- Visible keyboard focus ------------------------------------------- */
/* Bootstrap 3 leans on the browser default, which several templates then
   remove with `outline: none`. :focus-visible keeps the ring for keyboard
   users without drawing it on every mouse click. */
:focus-visible {
  outline: 2px solid #337ab7;
  outline-offset: 1px;
}

/* ---- /scheduling front door ------------------------------------------- */
/* The band above the month grid: what this member has coming up, and where
   they could help. Quiet by design -- it sits above the page's real content
   and must not compete with it. */
.you-band {
  margin-bottom: 18px;
}

.you-card {
  border: 1px solid #ddd;
  border-left: 3px solid #337ab7;
  border-radius: 3px;
  padding: 10px 14px;
  margin-bottom: 10px;
  background: #fbfbfb;
}

.you-card-title {
  margin: 0 0 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #777;
}

.you-card-line {
  margin: 0;
  font-size: 17px;
  line-height: 1.35;
}

.you-card-meta {
  margin: 2px 0 0;
  font-size: 13px;
  color: #777;
}

.you-help {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #e6dcc3;
  border-radius: 3px;
  background: #fdf9ef;
}

.you-help-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #8a6d3b;
  margin-right: 4px;
}

.you-help-day {
  display: inline-block;
  padding: 3px 10px;
  border: 1px solid #e6dcc3;
  border-radius: 12px;
  background: #fff;
  font-size: 13px;
  color: #333;
  text-decoration: none;
}

.you-help-day:hover,
.you-help-day:focus {
  border-color: #8a6d3b;
  color: #333;
  text-decoration: none;
}

.you-help-gaps {
  color: #8a6d3b;
  margin-left: 4px;
}

/* First run: no days have ever been scheduled. */
.you-empty {
  text-align: center;
  padding: 40px 20px;
  margin-bottom: 20px;
  border: 1px dashed #ccc;
  border-radius: 4px;
  background: #fbfbfb;
}

.you-empty h3 {
  margin-top: 0;
}

.you-empty p {
  max-width: 34em;
  margin: 0 auto 18px;
  color: #777;
}

/* ---- print_invoices: the send-emails confirm panel --------------------- */
/* The only bulk outbound-email action in the app. Coloured as a warning, not
   as a result, because it is the step BEFORE anything is sent. */
.email-confirm {
  border: 1px solid #e6dcc3;
  border-left: 4px solid #8a6d3b;
  border-radius: 3px;
  background: #fdf9ef;
  padding: 16px 20px;
  margin-bottom: 20px;
}

.email-confirm-title {
  margin-top: 0;
}

.email-confirm-period {
  font-size: 15px;
}

.email-confirm-skipped-title {
  margin-top: 14px;
}

.email-confirm-skipped {
  margin: 0 0 12px;
  color: #8a6d3b;
}

.email-confirm-actions {
  margin-top: 16px;
  display: flex;
  gap: 10px;
  align-items: center;
}

/* ---- Flight-log row action buttons ------------------------------------ */
/* Update / Repeat / Delete sit in narrow cells at btn-xs. On the tablet used
   at the flight line that is a ~22px target next to two others, which is how
   a dispatcher deletes a flight meaning to repeat it. */
.repeat {
  margin-left: 4px;
}

/* Update and Repeat share one unsized column, so two text labels did not fit
   side by side: the cell wrapped and every row in the log grew to two lines.
   Repeat is an icon for that reason -- it is the narrowest control that keeps
   the action visible -- and this stops the pair wrapping again if either label
   grows. The column widens instead, inside .table-responsive's scroller. */
.flight-row-actions {
  white-space: nowrap;
}

@media (pointer: coarse) {
  .update,
  .repeat,
  .delete {
    min-height: 40px;
    min-width: 56px;
    padding: 8px 10px;
    font-size: 14px;
  }
  /* An icon needs less width than a word, and this column is nowrap now --
     every pixel here is one the rest of an already-wide row loses. Still past
     the 44px touch target. */
  .repeat {
    min-width: 44px;
  }
  /* Delete is destructive and sits beside two non-destructive controls;
     give it its own row rather than a shared edge with Repeat. */
  .delete {
    margin-top: 4px;
  }
}

/* ---- Booking-table glider filter -------------------------------------- */
/* Flex rather than Bootstrap's .btn-group: the number of pills is the number
   of gliders flying that day, and btn-group's negative margins do not wrap --
   at six gliders on a phone the row would run off the side. */
.booking-filter {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 10px;
}

.booking-filter-label {
  color: #777;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-right: 2px;
}

/* Bootstrap 3 paints .badge on a light button as white-on-grey, which is the
   one part of the pill people are reading. */
.booking-filter .btn .badge {
  background-color: #ddd;
  color: #333;
  margin-left: 2px;
}

.booking-filter .btn.active .badge {
  background-color: #fff;
  color: #333;
}

@media (pointer: coarse) {
  /* Same reasoning as the flight-log row buttons above: the day page is run
     from a tablet at the flight line. */
  .booking-filter .btn {
    min-height: 40px;
    padding: 9px 14px;
    font-size: 14px;
  }
}

/* ---- /myInvoices ------------------------------------------------------- */
/* A member's own statements. The page this replaced was Bootstrap *2* markup
   (`span4`, `offset2`) on a Bootstrap 3 stylesheet, so none of its grid
   classes resolved and the whole thing rendered as a single unstyled column —
   plus a `tbody { position: absolute }` block that lifted the charge rows out
   of the table. */

.invoices-heading h2 {
  margin-top: 10px;
}

.invoices-heading p {
  max-width: 46em;
}

/* The live balance, above the historical documents. */
.invoice-account {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  margin-bottom: 22px;
  border: 1px solid var(--go-border);
  border-left: 4px solid var(--go-text-muted);
  border-radius: 4px;
  background: var(--go-surface);
}

/* Owing money is the state that needs acting on; a credit is worth seeing but
   is not a call to action. */
.invoice-account-due {
  border-left-color: var(--go-navy);
}

.invoice-account-credit {
  border-left-color: var(--go-success);
}

.invoice-account-main {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 10px;
}

.invoice-account-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--go-text-secondary);
}

.invoice-account-figure {
  font-size: 26px;
  line-height: 1.1;
  color: var(--go-text);
}

.invoice-account-figure small {
  font-size: 14px;
  color: var(--go-text-secondary);
}

/* First run: nothing has been invoiced yet. Same treatment as .you-empty on
   the scheduling front door, so the two read as one product. */
.invoice-empty {
  text-align: center;
  padding: 40px 20px;
  border: 1px dashed var(--go-border);
  border-radius: 4px;
  background: var(--go-surface);
}

.invoice-empty h3 {
  margin-top: 0;
}

.invoice-empty p {
  max-width: 34em;
  margin: 0 auto;
  color: var(--go-text-secondary);
}

/* ---- Picker ------------------------------------------------------------ */

.invoice-years {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.invoice-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  border: 1px solid var(--go-border);
  border-radius: 4px;
  overflow: hidden;
}

.invoice-list-item {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--go-border);
  color: var(--go-text);
  text-decoration: none;
}

.invoice-list li:last-child .invoice-list-item {
  border-bottom: 0;
}

.invoice-list-item:hover,
.invoice-list-item:focus {
  background: var(--go-surface-alt);
  color: var(--go-text);
  text-decoration: none;
}

/* The selected statement. A left bar rather than a filled row: the amounts in
   this list are the thing being compared, and a solid navy block makes one of
   them unreadable. */
.invoice-list-item.active,
.invoice-list-item.active:hover,
.invoice-list-item.active:focus {
  background: var(--go-surface);
  box-shadow: inset 3px 0 0 var(--go-navy);
  font-weight: 600;
}

.invoice-list-period {
  white-space: nowrap;
}

.invoice-list-amount {
  color: var(--go-text-secondary);
  font-variant-numeric: tabular-nums;
}

.invoice-list-item.active .invoice-list-amount {
  color: var(--go-text);
}

/* ---- The statement ----------------------------------------------------- */

.invoice-statement-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.invoice-statement-title h3 {
  margin: 0;
  font-size: 21px;
}

.invoice-statement-title p {
  margin: 2px 0 0;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.invoice-statement-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.invoice-meta {
  margin-bottom: 4px;
}

.invoice-meta-label {
  display: block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--go-text-secondary);
  margin-bottom: 4px;
}

.invoice-meta-list {
  margin: 0;
}

.invoice-meta-list dt {
  float: left;
  clear: left;
  width: 10em;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--go-text-secondary);
  line-height: 1.6;
}

.invoice-meta-list dd {
  margin-left: 11em;
  line-height: 1.6;
}

/* Prior + charges − payments = the closing balance, in the order they apply.
   Only the two balances are stored; the middle pair is what the page adds. */
.invoice-summary {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 18px 0 4px;
}

.invoice-summary-tile {
  flex: 1 1 140px;
  padding: 10px 14px;
  border: 1px solid var(--go-border);
  border-radius: 4px;
  background: var(--go-surface);
}

.invoice-summary-total {
  border-color: var(--go-navy);
  background: #fff;
}

.invoice-summary-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--go-text-secondary);
}

.invoice-summary-value {
  display: block;
  margin-top: 3px;
  font-size: 19px;
  line-height: 1.2;
  color: var(--go-text);
  font-variant-numeric: tabular-nums;
}

.invoice-summary-total .invoice-summary-value {
  font-size: 23px;
  font-weight: 600;
  color: var(--go-navy);
}

.money-payment {
  color: var(--go-success);
}

.invoice-note {
  margin-top: 16px;
  margin-bottom: 0;
}

.invoice-lines {
  margin-bottom: 0;
}

.invoice-lines td,
.invoice-lines th {
  vertical-align: middle;
}

.invoice-lines td.text-right,
.invoice-lines th.text-right {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.invoice-lines-date {
  white-space: nowrap;
  color: var(--go-text-secondary);
}

.invoice-lines tfoot td {
  border-top: 2px solid var(--go-border);
  background: var(--go-surface);
}

.invoice-lines-empty {
  border-top: 1px solid var(--go-border);
}

/* The Type column repeats what the description usually already says; it earns
   its width on a desktop (telling an online card payment from a check) and
   loses on a phone, where the description is what wraps. */
@media (max-width: 767px) {
  .invoice-lines-type {
    display: none;
  }

  .invoice-account-figure {
    font-size: 22px;
  }
}

/* ---- Printing a statement ---------------------------------------------- */
/* The PDF is the club's document; this is the quick copy from the browser. It
   is a separate rule set from styles/print.css, which hides the whole body and
   reveals a `.to_print` element — that inverted approach cannot show a page
   that was not built around it. */
@media print {
  .invoices-page .navbar,
  .invoices-page .invoice-picker,
  .invoice-statement-actions,
  .invoice-account-action {
    display: none !important;
  }

  .invoices-page .col-md-8,
  .invoices-page .col-lg-9 {
    width: 100%;
    float: none;
  }

  .invoice-statement {
    border-color: #000;
    box-shadow: none;
  }

  /* Bootstrap's .table-responsive keeps `overflow-x: auto` at every width, and
     an overflow container prints only what fits its box — the columns past the
     fold vanish silently and the sheet looks complete. */
  .invoice-statement .table-responsive {
    overflow: visible !important;
    width: auto !important;
    border: 0 !important;
  }
}

/* ---- Report downloader pages ------------------------------------------- */
/* The frame in templates/_report_page.html, shared by the "pick parameters,
   download a file" pages under /admin/db/billing/reports. Each of those used
   to lay its fields out in a `<table cellspacing="20">` with a jQuery-UI
   `ui-button` submit — a class this stylesheet does not define, so the most
   important control on the page rendered as an unstyled grey box. */

.report-head h2 {
  margin-top: 10px;
}

.report-head p {
  max-width: 52em;
}

.report-card {
  max-width: 52em;
}

/* Fields side by side, wrapping on a narrow screen. Bootstrap's .form-inline
   would do this only above 768px and cannot wrap a field with its label. */
.report-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 24px;
}

.report-field {
  flex: 0 1 auto;
  min-width: 12em;
}

/* Bootstrap gives .form-group a 15px bottom margin, which double-spaces a row
   that is already gapped. */
.report-field .form-group {
  margin-bottom: 0;
}

.report-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--go-border);
}

.report-format {
  font-size: 13px;
}

.report-back {
  margin-top: 18px;
}

/* ---- Admin working pages: filters above, results below ----------------- */
/* Create Single Invoice, Create Batch Invoices, Print & Email Invoices, the
   Activity Viewer. Each of these opened with an `<h1 style="text-align:center">`
   and then dropped its form fields straight into the page with no layout at
   all -- so the controls ran across the full width of a desktop in one line
   and stacked into a column of unrelated boxes on anything narrower. Two of
   them also carried a `<body>` tag inside a Jinja block and a container that
   was never closed. */

.admin-page-head h2 {
  margin-top: 10px;
}

.admin-page-head p {
  max-width: 56em;
}

/* The parameters, in a card, so it is clear where the query ends and the
   results begin. */
.filter-card {
  background: var(--go-surface);
}

.filter-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 4px 22px;
}

.filter-field {
  flex: 0 1 auto;
  min-width: 11em;
}

/* Bootstrap gives .form-group a 15px bottom margin, which double-spaces a row
   that is already gapped. */
.filter-field .form-group {
  margin-bottom: 0;
}

/* "Include: [x] Flights [x] Charges" -- a query term, not a preference, so it
   reads as one line rather than two stacked checkbox form-groups. */
.filter-toggles {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 18px;
  margin-top: 14px;
}

.filter-toggles-label,
.filter-note {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--go-text-secondary);
}

.filter-note {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
  font-size: 13px;
}

.filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  font-weight: 400;
  cursor: pointer;
}

.filter-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--go-border);
}

.admin-results-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 26px 0 10px;
}

.admin-results-head h3 {
  margin: 0;
}

.admin-results-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

/* Nothing selected yet. Distinct from "nothing matched", which the results
   table says in its own empty row. */
.admin-empty {
  padding: 32px 20px;
  margin-top: 22px;
  text-align: center;
  border: 1px dashed var(--go-border);
  border-radius: 4px;
  background: var(--go-surface);
}

.admin-empty p {
  max-width: 34em;
  margin: 0 auto;
}

.admin-empty-cell {
  padding: 24px !important;
}

.admin-preview-hint {
  margin: 22px 0 10px;
}

.admin-back {
  margin-top: 22px;
}

.invoice-help {
  margin-top: 12px;
}

/* ---- Print & Email Invoices: the selection table ----------------------- */

.invoice-select-table td,
.invoice-select-table th {
  vertical-align: middle;
}

.invoice-select-table td.text-right,
.invoice-select-table th.text-right {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* Clicking a row opens its note modal, so the whole row is a control. */
.invoice-select-table tbody tr {
  cursor: pointer;
}

.invoice-select-table tbody tr:hover {
  background: var(--go-surface-alt);
}

/* "This invoice carries a note." Was an inline red style on a bare "N". */
.noteFlag {
  display: inline-block;
  margin-left: 4px;
  padding: 0 5px;
  border-radius: 8px;
  background: var(--go-warning);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  line-height: 16px;
}

/* The checkboxes are the point of this table on a touch screen, and Bootstrap
   3 leaves them at the browser default. */
@media (pointer: coarse) {
  .invoice-select-table input[type="checkbox"] {
    width: 22px;
    height: 22px;
  }
}

/* ---- Activity Viewer --------------------------------------------------- */

.activity-table td,
.activity-table th {
  vertical-align: middle;
}

.activity-table td.text-right,
.activity-table th.text-right {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

/* ---- Flight Posting: the log table and its editors ---------------------
   Moved here verbatim from an inline <style> block in post_flights.html. It
   is page CSS either way, but a same-origin file is one fewer thing standing
   between this app and dropping 'unsafe-inline' from style-src -- which is on
   the known-follow-ups list and cannot be done while templates carry <style>.

   Everything below .fe-toolbar is scoped under .flight-editor deliberately:
   the page renders one modal PER LISTED FLIGHT, and these rules must not
   reach any other modal the base template or a future include brings in. */

  table.dataTable thead .sorting:after,
  table.dataTable thead .sorting:before,
  table.dataTable thead .sorting_asc:after,
  table.dataTable thead .sorting_asc:before,
  table.dataTable thead .sorting_asc_disabled:after,
  table.dataTable thead .sorting_asc_disabled:before,
  table.dataTable thead .sorting_desc:after,
  table.dataTable thead .sorting_desc:before,
  table.dataTable thead .sorting_desc_disabled:after,
  table.dataTable thead .sorting_desc_disabled:before {
  bottom: .5em;
  }

  /* "Flights" heading and the Add Flight button on one line. */
  .fe-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 15px 12px;
  }
  .fe-toolbar h3 { margin: 0; }

  /* ---- Flight Log Editor modal ---------------------------------------
     Everything is scoped under .flight-editor: the page renders one modal
     per listed flight, and these rules must not reach any other modal the
     base template or a future include brings in. */
  .flight-editor .modal-content {
    border: 0;
    border-radius: 6px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, .35);
    overflow: hidden;
  }

  /* js/draggable_modal.js drags the dialog by its header, so say so. */
  .flight-editor .modal-header {
    background: #243447;
    border-bottom: 0;
    padding: 14px 20px;
    cursor: move;
  }

  .flight-editor .modal-title {
    color: #fff;
    font-size: 18px;
    font-weight: 600;
    margin: 0;
  }

  .flight-editor .fe-sub {
    display: block;
    margin-top: 4px;
    color: rgba(255, 255, 255, .65);
    font-size: 12px;
    font-weight: 400;
  }

  .flight-editor .modal-header .close {
    color: #fff;
    cursor: pointer;
    font-size: 26px;
    line-height: 20px;
    opacity: .55;
    text-shadow: none;
  }
  .flight-editor .modal-header .close:hover,
  .flight-editor .modal-header .close:focus { color: #fff; opacity: 1; }

  /* Capped so a short viewport scrolls the fields rather than pushing the
     footer -- and its Save button -- off-screen. */
  .flight-editor .modal-body {
    padding: 18px 20px 6px;
    max-height: 68vh;
    overflow-y: auto;
  }

  .flight-editor .fe-section + .fe-section { margin-top: 18px; }
  .flight-editor .fe-section-title {
    margin: 0 0 12px;
    padding-bottom: 6px;
    border-bottom: 1px solid #e6eaee;
    color: #8a94a0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }

  .flight-editor .form-group { margin-bottom: 14px; }
  .flight-editor .control-label {
    display: block;
    margin-bottom: 4px;
    color: #4a5561;
    font-size: 12px;
    font-weight: 600;
  }
  .flight-editor .form-control {
    height: 34px;
    border-color: #cfd6dd;
    border-radius: 4px;
    box-shadow: none;
  }
  .flight-editor textarea.form-control { height: auto; }
  .flight-editor .form-control:focus {
    border-color: #3d7ebf;
    box-shadow: 0 0 0 3px rgba(61, 126, 191, .15);
  }
  .flight-editor .form-control[readonly] {
    background: #eef1f4;
    color: #6b7580;
    cursor: not-allowed;
  }
  /* form2.id is an IntegerField, so WTForms renders type="number" -- the
     spinner arrows still draw on a readonly input and invite a click that
     does nothing. */
  .flight-editor input[type="number"][readonly] { -moz-appearance: textfield; }
  .flight-editor input[type="number"][readonly]::-webkit-inner-spin-button,
  .flight-editor input[type="number"][readonly]::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
  }
  .flight-editor .input-group-addon {
    min-width: 38px;
    background: #eef1f4;
    border-color: #cfd6dd;
    color: #6b7580;
  }
  .flight-editor .fe-mono {
    font-family: Menlo, Consolas, "Courier New", monospace;
    letter-spacing: .02em;
  }
  .flight-editor .help-block { margin: 4px 0 0; font-size: 11px; }
  .flight-editor .has-error .help-block { font-weight: 600; }
  .flight-editor .fe-form-alert { padding: 9px 12px; font-size: 13px; }

  .flight-editor .modal-footer {
    padding: 12px 20px;
    background: #f7f8fa;
    border-top: 1px solid #e6eaee;
  }
  .flight-editor .fe-footer-note {
    float: left;
    max-width: 55%;
    color: #8a94a0;
    font-size: 12px;
    line-height: 34px;
    text-align: left;
  }
  .flight-editor .modal-footer .btn { min-width: 104px; }

  @media (max-width: 767px) {
    .flight-editor .fe-footer-note {
      float: none;
      display: block;
      max-width: none;
      margin-bottom: 10px;
      line-height: 1.5;
    }
  }

/* Pushes the destructive Post button away from the two safe controls beside
   it, so a fast click on "View flight log" cannot land on the one that writes
   a charge for every flight on the page. */
.filter-actions-spacer {
  flex: 1 1 auto;
  min-width: 12px;
}