/* ==========================================================================
   AOCMS – gcap_v8.css  (modernised)
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Reset & base
   -------------------------------------------------------------------------- */

*, *::before, *::after {
  box-sizing: border-box;
}

html {
  height: 100%;
  background: #eef3f8;
}

body {
  margin: 0;
  padding: 0;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  font-size: 14px;
  color: #1a1a2e;
  background: #eef3f8;
  min-height: 100%;
}

/* --------------------------------------------------------------------------
   2. Layout
   -------------------------------------------------------------------------- */

div.mainDiv {
  display: block;
  width: 100%;
  text-align: center;   /* mirrors the old <center> wrapper */
}

div.contentDiv {
  margin-top: 0;
  padding: 12px 16px;
  text-align: left;     /* reset: only layout-level things should centre */
}

.pageTitle {
  font-size: 16px;
  font-weight: 500;
  color: #1a1a2e;
  margin: 0 0 16px 0;
}

/* --------------------------------------------------------------------------
   3. Primary navigation
   -------------------------------------------------------------------------- */

.topMenuDiv {
  background: #1a4a8a;
  width: 100%;
  position: sticky;
  top: 0;
  z-index: 100;
}

/* navBar is the <nav> element rendered by main_menu.html.ep.
   It sits inside .navInner (a flex container from default.html.ep),
   so flex:1 makes it fill the full width. */
nav.navBar {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 44px;
  padding: 0 16px;
  box-sizing: border-box;
  gap: 0;
}

.navInner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.subMenuBar .navInner {
  flex-direction: row;
  align-items: center;
  min-height: 38px;
  padding: 0 16px;
  gap: 2px;
  flex-wrap: wrap;
}

/* Brand / logo text */
.navBrand {
  color: #fff;
  font-size: 17px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-right: 20px;
  flex-shrink: 0;
  text-decoration: none;
}

/* Page links group */
.navLinks {
  display: flex;
  align-items: center;
  height: 44px;
  flex: 1;
}

/* All navbar page-link anchors */
a.linkMenuBar {
  color: rgba(255,255,255,0.72);
  text-decoration: none;
  font-size: 15px;
  padding: 0 11px;
  height: 44px;
  display: inline-flex;
  align-items: center;
  border-bottom: 4px solid transparent;
  white-space: nowrap;
  transition: color 0.15s, border-color 0.15s;
}

a.linkMenuBar:hover {
  color: #fff;
}

/* Active page — server sets class="linkMenuBar current" */
a.linkMenuBar.current {
  color: #fff;
  border-bottom-color: #ffd060;
}

/* Meta group — username + logout — pushed right by navLinks flex:1 */
.navMeta {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

/* Username label */
.navUser {
  font-size: 13px;
  font-weight: 500;
  color: rgba(255,255,255,0.85);
  white-space: nowrap;
}

/* Separator dot between username and Logout */
.navUser::after {
  content: ' ·';
  color: rgba(255,255,255,0.35);
  margin-left: 6px;
}

/* Logout link in navMeta */
.navMeta a.linkMenuBar {
  font-size: 13px;
  color: rgba(255,255,255,0.55);
  height: 44px;
  padding: 0 8px;
  border-bottom: none;
}

.navMeta a.linkMenuBar:hover {
  color: rgba(255,255,255,0.9);
}

/* "Viewing <pilot>" / "Viewing <base>" indicator */
a.viewMenuBar {
  color: rgba(255,255,255,0.9);
  font-size: 12px;
  text-decoration: none;
  padding: 2px 8px;
  border-radius: 4px;
  background: rgba(255,255,255,0.08);
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}

a.viewMenuBar:hover {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.9);
}

/* --------------------------------------------------------------------------
   4. Secondary navigation (submenus)
   -------------------------------------------------------------------------- */

/* subMenuBar is the outer <div> rendered by each *_submenu.html.ep */
.subMenuBar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  width: 100%;
}

/* Subnav links share the same linkMenuBar class as the top nav.
   Override it here for the white-bar context. */
.subMenuBar a.linkMenuBar {
  color: #475569;
  font-size: 14px;
  height: auto;
  padding: 5px 10px;
  border-radius: 6px;
  border-bottom: none;
  transition: background 0.12s, color 0.12s;
}

.subMenuBar a.linkMenuBar:hover {
  background: #f1f5f9;
  color: #1a1a2e;
}

.subMenuBar a.linkMenuBar.current {
  background: #e6f1fb;
  color: #185fa5;
  font-weight: 500;
  border-bottom: none;
}

/* Company name separator label */
.companyLabel {
  color: #94a3b8;
  font-size: 12px;
  font-weight: 500;
  padding: 0 6px;
  white-space: nowrap;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  border-left: 1px solid #e2e8f0;
  margin-left: 6px;
  padding-left: 10px;
}

/* --------------------------------------------------------------------------
   5. Table wrapper — horizontal scroll on small screens
   -------------------------------------------------------------------------- */

.tableWrap {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* --------------------------------------------------------------------------
   6. Crew table
   -------------------------------------------------------------------------- */

table.crewTable {
  border-collapse: collapse;
  font-size: 13px;
  width: 100%;
  white-space: nowrap;
}

/* Column widths */
table.crewTable .colEdit  { width: 34px; }
table.crewTable .colName  { width: 130px; min-width: 110px; }
table.crewTable .colRole  { width: 58px; }
table.crewTable .colBase  { width: 80px; }
table.crewTable .colCaa   { width: 66px; }
table.crewTable .colCheck { width: 160px; }
table.crewTable .colNum   { width: 46px; }
table.crewTable .colAct   { width: 36px; }
table.crewTable .colNotes { width: 100px; }

/* Header rows */
table.crewTable thead {
  background: #1a4a8a;
}

table.crewTable th {
  background: transparent;
  color: rgba(255,255,255,0.82);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.03em;
  text-align: left;
  padding: 5px 6px;
  white-space: nowrap;
}

table.crewTable th.colNum {
  text-align: right;
  padding-right: 4px;
}

table.crewTable th.colAct {
  text-align: center;
}

table.crewTable th.groupHeader {
  text-align: center;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  font-size: 10px;
  padding-bottom: 3px;
}

table.crewTable th.clickable {
  cursor: pointer;
}

table.crewTable th.clickable::after          { content: ' ▲▼'; opacity: 0.6; font-size: 0.85em; }
table.crewTable th.clickable.sorted-asc::after  { content: ' ▲'; opacity: 1; font-size: 1em; }
table.crewTable th.clickable.sorted-desc::after { content: ' ▼'; opacity: 1; font-size: 1em; }
table.crewTable th.clickable.filtered::after    { content: none; }

table.crewTable th.clickable:hover {
  background: rgba(255,255,255,0.08);
}

/* Body rows */
table.crewTable tbody tr {
  transition: background 0.1s;
}

table.crewTable tbody tr:last-child td {
  border-bottom: none;
}

table.crewTable td {
  padding: 3px 6px;
  border-bottom: 1px solid #f1f5f9;
  color: #1a1a2e;
  vertical-align: middle;
}

/* Alternating rows */
table.crewTable tr.odd td {
  background: #f0f6ff;
}

table.crewTable tr.even td {
  background: #ffffff;
}

/* Current user row */
table.crewTable tr.currentodd td,
table.crewTable tr.currenteven td {
  background: #fff8e1;
}

/* Hover */
table.crewTable tbody tr:hover td {
  background: #ddeef8;
}

/* Number cells — td.right is server-rendered class, td.numCell used in modern HTML */
table.crewTable td.numCell,
table.crewTable td.right {
  text-align: right;
  padding-right: 4px;
  font-variant-numeric: tabular-nums;
  color: #1e3a6e;
  font-weight: 500;
}

/* Notes cell */
table.crewTable td.notes {
  color: #64748b;
  font-size: 13px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100px;
}

/* Centre-aligned cells */
table.crewTable td.center {
  text-align: center;
}

/* Dash cells (no data) */
td.dash {
  color: #cbd5e1;
  font-size: 11px;
  text-align: center;
}

/* Status text */
.statusOk   { color: #3b6d11; font-size: 11px; }
.statusWarn { color: #a32d2d; font-size: 11px; }

/* --------------------------------------------------------------------------
   7. Role badges
   -------------------------------------------------------------------------- */

.badge {
  display: inline-block;
  padding: 2px 7px;
  border-radius: 20px;
  font-size: 10px;
  font-weight: 500;
  white-space: nowrap;
}

.badgePilot, .badge-p {
  background: #1e6abf;
  color: #ffffff;
}

.badgeAdmin, .badge-a {
  background: #6d3eb7;
  color: #ffffff;
}

.badgeCrew, .badge-c {
  background: #64748b;
  color: #ffffff;
}

/* --------------------------------------------------------------------------
   8. Icon buttons (E / F / L / T / S)
   -------------------------------------------------------------------------- */

.btnIcon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  border: 1px solid #cbd5e1;
  background: transparent;
  cursor: pointer;
  color: #64748b;
  font-size: 10px;
  font-weight: 600;
  font-family: inherit;
  line-height: 1;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
  padding: 0;
}

.btnIcon:hover {
  background: #f1f5f9;
  color: #1a1a2e;
  border-color: #94a3b8;
}

.btnIcon.btnEdit {
  border-color: #93c5fd;
  color: #185fa5;
}

.btnIcon.btnEdit:hover {
  background: #e6f1fb;
  border-color: #185fa5;
}

/* Inline forms used to wrap submit buttons */
table.crewTable td form {
  display: inline;
  margin: 0;
  padding: 0;
}

/* "You" label on current-user row */
.youTag {
  font-size: 10px;
  color: #185fa5;
  margin-left: 3px;
}

/* --------------------------------------------------------------------------
   9. Legacy / shared utility classes (kept for compatibility)
   -------------------------------------------------------------------------- */

div.loginDiv {
  margin: 0 auto;
  width: 200px;
}

div.left80  { width: 80%; float: left; }
div.left50  { width: 50%; float: left; }
div.right50 { width: 50%; float: right; }
div.right20 { width: 20%; float: right; }
div.rightDiv { float: right; }
div.leftDiv  { float: left; }
div.inlineDiv { display: inline-block; }
div.displayRow { display: inline-block; width: 100%; }
div.centreDiv { text-align: center; }

/* Alignment utility classes (server-rendered on divs/spans) */
.left   { text-align: left; }
.right  { text-align: right; }
.center { text-align: center; }
.leftMargin { margin-left: 20px; }

/* Visibility */
.hidden { display: none !important; }
.submit-hidden { display: none; } /* no !important — allows JS inline style to show the element */

/* Inline layout */
.inlineDiv { display: inline-block; }

/* Span utilities */
span.title2 { font-size: 20px; color: #1a2b4a; font-weight: 500; }
span.message { color: #1a1a2e; background: #e6e0f8; }
span.warning { color: #7a1515; font-size: 12px; background: #fde8c8; }

/* Textarea warning */
textarea.warning {
  resize: none;
  color: #7a1515;
  overflow: hidden;
  border-width: 0;
  background-color: transparent;
  outline: none;
  height: auto;
}

/* Misc td classes */
td.colourtd  { width: 20px; height: 20px; }
td.button    { width: 70px; height: 17px; background: #e6e0f8; margin: 0; padding: 0; }
td.button a  { height: 17px; width: 70px; color: #1e6abf; }
td.button a:hover { background: #c8bbee; }


/* Accept / Reject action divs (invite workflow) */
.acceptDiv {
  margin: auto;
  width: 250px;
  background: linear-gradient(135deg, #22c55e, #16a34a);
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  border: 1px solid #15803d;
  cursor: pointer;
  transition: filter 0.12s;
}
.acceptDiv:hover { filter: brightness(0.92); }

.rejectDiv {
  margin: auto;
  width: 250px;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 8px;
  padding: 6px;
  text-align: center;
  border: 1px solid #b91c1c;
  cursor: pointer;
  transition: filter 0.12s;
}
.rejectDiv:hover { filter: brightness(0.92); }

/* Email block divs (email settings page + discretion report FOI/managers pickers) */
.emailContainerDiv {
  margin: 0 auto;
  max-width: 650px;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-start;
  gap: 8px;
}

.emailBlockDiv {
  display: inline-block;
  background: linear-gradient(to bottom, #ffffff, #e8eef6);
  border: 1px solid #a8bdd6;
  border-radius: 8px;
  padding: 2px 8px;
  font-weight: 600;
  text-align: center;
  cursor: pointer;
  transition: filter 0.12s;
}
.emailBlockDiv:hover { filter: brightness(0.94); }

/* Check block div (training check display) */
.checkBlockDiv {
  margin: 1px;
  width: 350px;
  border-radius: 5px;
  padding: 3px;
  text-align: center;
}

h3 {
  font-family: inherit;
  font-size: 15px;
  font-weight: 500;
  color: #1a1a2e;
}

.field-with-error {
  border-width: 2px;
  border-color: #e24b4a;
  border-style: solid;
}

input:read-only {
  background: #f1f5f9;
}

/* --------------------------------------------------------------------------
   Control blocks — fieldset.search / style_form / export / date_search
   -------------------------------------------------------------------------- */

/* Wrapper row — used in logbook, duty, training pages */
div.row {
  display: inline-flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 10px;
}

/* All control fieldsets — base styles shared across types */
fieldset.edit,
fieldset.search,
fieldset.roster_steps,
fieldset.audit,
fieldset.settings,
fieldset.outerSettings {
  background: #f4f7fb;
  border: 1px solid #c8d6e8;
  border-radius: 10px;
  box-shadow: 0 1px 4px rgba(30,58,110,0.07);
  display: inline-block;
  padding: 10px 14px 12px;
  margin: 0;
  vertical-align: top;
  text-align: left;
}

/* Legend — label above each block */
fieldset legend {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #4a6285;
  padding: 0 6px;
  margin-left: -2px;
}

/* styledButton — used for Data layout, CSV/TAB/JSON, year buttons, date shortcuts */
input.styledButton,
button.styledButton {
  appearance: none;
  -webkit-appearance: none;
  display: inline-block;
  padding: 4px 10px;
  margin: 2px 2px;
  font-size: 12px;
  font-family: inherit;
  font-weight: 500;
  color: #1e3a6e;
  background: linear-gradient(to bottom, #ffffff, #e8eef6);
  border: 1px solid #a8bdd6;
  border-radius: 6px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.08), inset 0 1px 0 rgba(255,255,255,0.7);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s, border-color 0.12s, box-shadow 0.12s;
  vertical-align: middle;
}

input.styledButton:hover,
button.styledButton:hover {
  background: linear-gradient(to bottom, #e8f0fb, #d0dff5);
  border-color: #7099c8;
  box-shadow: 0 2px 4px rgba(30,58,110,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  color: #143060;
}

input.styledButton:active,
button.styledButton:active {
  background: linear-gradient(to bottom, #c8d8f0, #b8cce8);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.15);
}

/* Active/selected state (toggled by JS — class="styledButton current") */
input.styledButton.current,
button.styledButton.current {
  background: linear-gradient(to bottom, #2a4f8a, #1e3a6e);
  color: #ffffff;
  border-color: #1e3a6e;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* styledButton inside a table cell — remove margin so row height stays consistent */
td input.styledButton {
  margin: 0;
}

/* Date picker input fields inside the date range block */
fieldset.search input.datepicker,
fieldset.search input[type="text"] {
  padding: 4px 7px;
  border: 1px solid #a8bdd6;
  border-radius: 6px;
  font-size: 13px;
  font-family: inherit;
  color: #1a1a2e;
  background: #fff;
  vertical-align: middle;
  width: 90px;
}

/* "Set range" label inside the date block */
fieldset.search br + * {
  margin-top: 6px;
}

/* a.black — used on the outer anchor wrapping the "User's current settings" panel
   in usersettings/current.html.ep; must not show link styling */
a.black {
  color: inherit;
  text-decoration: none;
  display: inline-block;
}

/* --------------------------------------------------------------------------
   Settings page layout
   outerSettings is the outer wrapper; settings are the child blocks.
   -------------------------------------------------------------------------- */

fieldset.outerSettings {
  display: block;
  background: #eef3f8;
  border: 1px solid #c8d6e8;
  border-radius: 12px;
  box-shadow: 0 1px 4px rgba(30,58,110,0.07);
  padding: 16px;
  margin: 0;
  text-align: left;
}

/* Child settings blocks sit in a wrapping row, sized to their content */
fieldset.outerSettings > fieldset,
fieldset.outerSettings fieldset.settings {
  display: inline-block;
  vertical-align: top;
  margin: 6px;
  box-sizing: border-box;
  text-align: left;
}

/* Labels in settings tables — readable, no-wrap */
fieldset.settings table td:first-child,
fieldset.outerSettings table td:first-child {
  padding-right: 10px;
  white-space: nowrap;
  font-size: 13px;
  color: #2d3f55;
}

fieldset.settings table td + td,
fieldset.outerSettings table td + td {
  text-align: center;
  width: 32px;
}

/* --------------------------------------------------------------------------
   Can-fly aircraft type pills (aircraftchecks/can_fly.html.ep)
   -------------------------------------------------------------------------- */

.canflyContainerDiv {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  justify-content: center;
  margin: 4px 0;
}

/* The <a> wrapping each pill — strip all link styling */
.canflyContainerDiv a {
  text-decoration: none;
  color: inherit;
  display: inline-block;
}

.canflyBlockDiv {
  display: inline-block;
  padding: 5px 18px;
  border-radius: 20px;
  font-size: 13px;
  font-weight: 500;
  white-space: nowrap;
  color: #fff;
  /* default — overridden by .red/.green below */
  background: #64748b;
}

.canflyBlockDiv.green {
  background: #2d7a3a;
  color: #fff;
}

.canflyBlockDiv.red {
  background: #c0392b;
  color: #fff;
}

/* --------------------------------------------------------------------------
   Home page — company & base selector blocks
   -------------------------------------------------------------------------- */

/* Company buttons — centred, fixed width, look like buttons */
.companyBlockDiv {
  position: relative;
  display: block;
  width: 340px;
  margin: 6px auto;
  padding: 10px 16px;
  border-radius: 8px;
  border: 2px solid #b0bec5;
  background: linear-gradient(to bottom, #f4f6f8, #dde3ea);
  box-shadow: 0 2px 4px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

.companyBlockDiv:hover {
  border-color: #5b8fc9;
  background: linear-gradient(to bottom, #e8f2fd, #c8dcf5);
  box-shadow: 0 3px 8px rgba(30,58,110,0.18), inset 0 1px 0 rgba(255,255,255,0.6);
}

/* Active / selected company */
.companyBlockDiv.currentDiv {
  border-color: #1e3a6e;
  background: linear-gradient(to bottom, #d0e6fa, #a8c8f0);
  box-shadow: 0 2px 6px rgba(30,58,110,0.25), inset 0 1px 0 rgba(255,255,255,0.5);
}

/* Non-selected company */
.companyBlockDiv.notCurrentDiv {
  border-color: #b0bec5;
  background: linear-gradient(to bottom, #f4f6f8, #dde3ea);
}

/* The allClickable span sits absolute inside the div, making the whole block clickable.
   The <a> wraps it; both need to cover the full block area. */
.companyBlockDiv a {
  position: absolute;
  inset: 0;
  display: block;
  border-radius: 8px;
  color: inherit;
  text-decoration: none;
  z-index: 1;
}

.companyBlockDiv .allClickable {
  display: block;
  width: 100%;
  height: 100%;
}

/* Base blocks: the <a> wraps the <div>, so style the anchor itself */
/* Container for all base option blocks */
.baseContainerDiv {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 8px auto 4px;
  padding: 0 8px;
  justify-content: center;
  max-width: 760px;
}

/* The <a> that wraps each baseBlockDiv */
.baseContainerDiv a {
  text-decoration: none;
  display: inline-block;
  color: #1a1a2e;
}

/* When the wrapped div is the selected base, the anchor text must be white */
.baseContainerDiv a:has(.currentBaseDiv) {
  color: #ffffff;
}

/* Individual base option — styled on the div */
.baseBlockDiv {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 6px;
  border: 1px solid #b0bec5;
  background: linear-gradient(to bottom, #f4f6f8, #dde3ea);
  box-shadow: 0 1px 3px rgba(0,0,0,0.12), inset 0 1px 0 rgba(255,255,255,0.6);
  font-size: 13px;
  font-weight: 500;
  color: #1a1a2e;
  cursor: pointer;
  white-space: nowrap;
  transition: border-color 0.12s, background 0.12s, box-shadow 0.12s;
}

.baseContainerDiv a:hover .baseBlockDiv {
  border-color: #5b8fc9;
  background: linear-gradient(to bottom, #e8f2fd, #c8dcf5);
  box-shadow: 0 2px 5px rgba(30,58,110,0.15), inset 0 1px 0 rgba(255,255,255,0.6);
  color: #1e3a6e;
}

/* Selected base — dark navy fill, white text */
.baseBlockDiv.currentBaseDiv {
  border-color: #1e3a6e;
  background: linear-gradient(to bottom, #2a4f8a, #1e3a6e);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.25);
  color: #ffffff !important;
}

/* Ensure the <b> tag inside also goes white */
.baseBlockDiv.currentBaseDiv b,
.baseBlockDiv.currentBaseDiv * {
  color: #ffffff !important;
}

.baseContainerDiv a:hover .baseBlockDiv.currentBaseDiv {
  background: linear-gradient(to bottom, #2e5898, #243f78);
  color: #ffffff;
}

.baseBlockDiv.notCurrentBaseDiv {
  border-color: #b0bec5;
  background: linear-gradient(to bottom, #f4f6f8, #dde3ea);
  color: #1a1a2e;
}

/* Colour utility classes (kept for server-rendered cell colouring) */
.red        { background: #fdd;     color: #7a1515; }
.green      { background: #d4edda; color: #155724; }
.orange     { background: #fde8c8; color: #7a3800; }
.darkorange { background: #fcd9b0; color: #6b2e00; }
.gray       { background: #e8ecf0; color: #3d4f60; }

/* --------------------------------------------------------------------------
   Generic table rules — apply to ALL table.border instances (31 templates).
   table.crewTable rules in section 6 refine these for the crew list only.
   -------------------------------------------------------------------------- */

table.border {
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  border-spacing: 0;
  overflow: hidden;
  font-size: 13px;
  width: 100%;
}

/* border-radius on a collapsed table needs a wrapper trick;
   apply it to a wrapping div where used, or via outline */
table.border thead tr:first-child th:first-child { border-top-left-radius: 7px; }
table.border thead tr:first-child th:last-child  { border-top-right-radius: 7px; }



table.floating {
  float: left;
  display: inline-block;
  border-collapse: collapse;
  border: 1px solid #e2e8f0;
  vertical-align: top;
  font-size: 13px;
}

/* --- Header cells — same navy as the top navbar --- */
th {
  background: #1a4a8a;
  color: rgba(255,255,255,0.85);
  font-size: 12px;
  font-weight: 500;
  padding: 7px 8px;
  text-align: left;
  white-space: nowrap;
  border-bottom: 1px solid rgba(255,255,255,0.1);
}

/* --- Recency tables (logbook/recency.html.ep, logbook/other_recency.html.ep) ---
   After the bare th{} rule so the cascade is won without extra specificity
   tricks — except background/color which need !important to beat
   tr.odd td / tr.even td row-stripe rules on the pill cells. */
table.border.recency {
  background: #f4f7fb !important;
}

table.border.recency th {
  background: #f4f7fb !important;
  color: #1e3a6e !important;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.03em;
  border-bottom: 1px solid #c8d6e8 !important;
}

table.border.recency td {
  font-size: 12px;
  white-space: nowrap;
}

table.border.recency tr.odd td,
table.border.recency tr.even td,
table.border.recency tr.odd th,
table.border.recency tr.even th {
  background: #f4f7fb !important;
}

table.border.recency td:not(:first-child) {
  text-align: center;
}

.recencyDot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 5px;
}

.recencyDot--ok   { background: #639922; }
.recencyDot--warn { background: #E24B4A; }

.recencyPill {
  display: inline-block;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

.recencyPill--ok   { background: #EAF3DE !important; color: #27500A !important; }
.recencyPill--warn { background: #FCEBEB !important; color: #791F1F !important; }

/* --- Totals row inputs in logbook thead ---
   Disabled inputs used to display JS-calculated totals. Strip box appearance
   entirely; force text dark enough to read against the white td background. */
thead input[disabled],
thead input:disabled {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  outline: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  color: #1e3a6e !important;
  -webkit-text-fill-color: #1e3a6e !important;
  font-weight: 600;
  font-size: 12px;
  opacity: 1;
  padding: 0;
  text-align: center;
  width: 100%;
  cursor: default;
}

thead input#grandTotal {
  font-weight: 700;
  width: auto;
  text-align: left;
}

/* Logbook column headers — centre-align numeric columns (DP1 onwards,
   i.e. from the 10th th) to match the centre-aligned data cells beneath.
   Date/Type/Reg/From/To/Cap/Crew/Start/Stop stay left-aligned. */
#logbookTable thead tr:last-child th:nth-child(n+10) {
  text-align: center;
}

th.clickable {
  background: #22437e;
  cursor: pointer;
}

th.clickable:hover {
  background: #284f92;
}

th.clickable::after {
  content: ' ▲▼';
  opacity: 0.6;
  font-size: 0.85em;
}

th.clickable.sorted-asc::after  { content: ' ▲'; opacity: 1; font-size: 1em; }
th.clickable.sorted-desc::after { content: ' ▼'; opacity: 1; font-size: 1em; }
th.clickable.filtered::after    { content: none; }

th.clickable.filtered {
  background: #1a3a6e;
}

th.clickable .filterPill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 1px 6px;
  background: #f59e0b;
  color: #1a1a1a;
  border-radius: 999px;
  font-size: 0.78em;
  font-weight: bold;
  white-space: nowrap;
  cursor: pointer;
  vertical-align: middle;
}

th.clickable .filterPill .pillX {
  font-weight: 900;
  font-size: 1.1em;
  line-height: 1;
  opacity: 0.7;
}

th.clickable .filterPill:hover .pillX {
  opacity: 1;
}

th.right {
  text-align: right;
}

/* --- Body cells --- */
td {
  font-size: 13px;
  padding: 4px 8px;
  border-bottom: 1px solid #f1f5f9;
  vertical-align: middle;
  color: #1a1a2e;
}

/* --- Row colours --- */
tr.odd  td { background: #f0f6ff; }   /* soft blue tint — matches original design intent */
tr.even td { background: #ffffff; }

tr.selectedodd  td { background: #f0fdf4; }
tr.selectedeven td { background: #dcfce7; }

tr.currentodd  td,
tr.currenteven td { background: #fff8e1; }

tr.odd:hover  td,
tr.even:hover td { background: #ddeef8; }

/* Row-level status colours (server sets class on <tr>) */
tr.red        td { background: #fdd;     }
tr.darkorange td { background: #fcd9b0; }
tr.orange     td { background: #fde8c8; }
tr.green      td { background: #d4edda; }

/* --- Cell-level status colours (server sets class on <td>) ---
   Written as tr td.X so specificity matches tr.odd td and always wins.
   Backgrounds are intentionally visible — the background carries the signal,
   text stays dark and calm rather than vivid. */
tr td.red        { background: #f8c8c8; color: #7a1515; }   /* clear rose */
tr td.green      { background: #c3e6cb; color: #155724; }   /* clear sage */
tr td.orange     { background: #fde8c8; color: #7a3800; }   /* warm amber */
tr td.darkorange { background: #fcd9b0; color: #6b2e00; }   /* deeper amber */
tr td.gray       { background: #dde3ea; color: #3d4f60; }   /* cool slate */

/* --- Alignment utilities (server-rendered class names) --- */
td.right,
td.numCell {
  text-align: right;
  font-variant-numeric: tabular-nums;
  color: #1e3a6e;
  font-weight: 500;
}

/* When a cell is both right-aligned AND a status colour (e.g. class="right orange") */
tr td.right.red,    tr td.numCell.red    { color: #7a1515; background: #f8c8c8; }
tr td.right.orange, tr td.numCell.orange { color: #7a3800; background: #fde8c8; }
tr td.right.darkorange                   { color: #6b2e00; background: #fcd9b0; }
tr td.right.green,  tr td.numCell.green  { color: #155724; background: #c3e6cb; }
tr td.right.gray,   tr td.numCell.gray   { color: #3d4f60; background: #dde3ea; }

td.center,
td.centre,
th.center { text-align: center; }

td.left { text-align: left; }

/* --- Tick / cross cells --- */
.ticktext { color: #16a34a; font-size: 14px; }
.redtext  { color: #dc2626; font-size: 14px; }

a.dateLink {
  display: inline-block;
  padding: 1px 8px;
  border: 1px solid #a8bdd6;
  border-radius: 999px;
  text-decoration: none;
  white-space: nowrap;
  font-size: 0.88em;
  color: #1e3a6e;
  background: #eef2f8;
}

a.dateLink:hover {
  background: #dce6f4;
  border-color: #7099c8;
}

a.dateLink.green {
  background: #eaf3de;
  border-color: #a3c97a;
  color: #27500a;
}

a.dateLink.orange {
  background: #fff7e6;
  border-color: #f5c97a;
  color: #92400e;
}

a.dateLink.darkorange {
  background: #fef0d9;
  border-color: #e8a84a;
  color: #7a3800;
}

a.dateLink.red {
  background: #fff1f1;
  border-color: #f5a0a0;
  color: #dc2626;
}

/* --- Training checks tables (non_type_specific, type_specific) --- */
table.border.training-checks th,
table.border.training-checks thead th {
  text-align: center;
}

/* Aircraft type row header in type-specific checks — light style, not navy */
table.border.training-checks tbody th {
  background: #f4f7fb !important;
  color: #1e3a6e !important;
  font-weight: 600;
  border-bottom: 1px solid #c8d6e8 !important;
}

table.border.training-checks td {
  text-align: center;
}
.blacktext { color: #1a1a2e; }
.whitetext { color: #ffffff; }

/* --- Discretion button (status-coloured link) --- */
a.discretionButton {
  display: inline-block;
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 500;
  text-decoration: none;
  white-space: nowrap;
}
a.discretionButton.green  { background: #f0faf0; color: #14532d; border: 1px solid #bbf7d0; }
a.discretionButton.orange { background: #fff7e6; color: #92400e; border: 1px solid #fed7aa; }
a.discretionButton.red    { background: #fff1f1; color: #991b1b; border: 1px solid #fecaca; }
a.discretionButton.gray   { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }

/* --- Discretion expanded panel (duty edit page, desktop) --- */
a.discr-flag {
  display: inline-block;
  padding: 5px 14px;
  border-radius: 20px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
}
a.discr-flag--red    { background: #fee2e2; color: #7f1d1d; border: 1px solid #fca5a5; }
a.discr-flag--orange { background: #fff7e6; color: #78350f; border: 1px solid #fed7aa; }
a.discr-flag--green  { background: #f0faf0; color: #14532d; border: 1px solid #bbf7d0; }
a.discr-flag--gray   { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
a.discr-flag:hover   { opacity: 0.85; }

/* --- Link button (compact text link styled as button) --- */
a.linkButton {
  display: inline-block;
  padding: 3px 8px;
  background: #f1f5f9;
  color: #185fa5;
  border: 1px solid #cbd5e1;
  border-radius: 5px;
  text-decoration: none;
  font-size: 12px;
  transition: background 0.12s;
}
a.linkButton:hover { background: #e2e8f0; }

/* Green action button (legacy pages) */
.greenButton {
  appearance: none;
  background: #16a34a;
  border: none;
  color: #fff;
  cursor: pointer;
  border-radius: 5px;
  padding: 3px 8px;
  font-size: 11px;
  font-family: inherit;
  transition: background 0.12s;
}

.greenButton:hover {
  background: #15803d;
}

/* Link buttons */
a.linkBlueButton {
  padding: 5px 10px;
  background: #185fa5;
  color: #fff;
  border-radius: 6px;
  text-decoration: none;
  display: inline-block;
}

a.linkBlueButton:hover {
  background: #1a6fbd;
}

a.disabledLinkButton {
  background: #94a3b8;
  color: #e2e8f0;
  border-radius: 6px;
  padding: 5px 10px;
  text-decoration: none;
  display: inline-block;
  cursor: not-allowed;
}

/* Settings nav (sidebar) */
#settingsNav {
  position: fixed;
  top: 5px;
  left: 0;
  text-align: center;
  border-radius: 6px;
}

#settingsNav ul {
  list-style: none;
  margin: 0;
  padding: 0;
}

#settingsNav ul li {
  position: relative;
  float: left;
  margin: 0;
  padding: 0;
  width: 100px;
}

#settingsNav ul li:hover {
  background: #185fa5;
  transition: background 0.2s;
}

#settingsNav ul ul {
  display: none;
  background: #e6f1fb;
}

#settingsNav ul ul li { float: none; }

#settingsNav ul li:hover > ul { display: block; }

/* Footer */
#footer {
  position: fixed;
  bottom: 0;
  left: 0;
}

/* Misc */
.curved {
  border-radius: 8px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}

canvas.white { background: #fff; }

input.styledButton.highlightButton,
button.styledButton.highlightButton { border: 2px solid #e24b4a; color: #e24b4a; }
input.styledButton.highlightButton:hover,
button.styledButton.highlightButton:hover { background: #e24b4a; border-color: #e24b4a; color: #ffffff; }

/* Select button on company pilot page */
button.styledButton.btn-select {
  background: linear-gradient(to bottom, #2e7d4f, #235e3c);
  color: #ffffff;
  border-color: #1d5233;
  box-shadow: 0 1px 2px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.15);
  font-weight: 600;
}
button.styledButton.btn-select:hover {
  background: linear-gradient(to bottom, #3a9960, #2a7048);
  border-color: #1d5233;
  box-shadow: 0 2px 4px rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,255,255,0.15);
}
button.styledButton.btn-select:active {
  background: linear-gradient(to bottom, #1d5233, #163e27);
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.2);
}

/* Pilot name as edit link on company page */
a.pilot-name-link {
  color: #1a2b4a;
  text-decoration: none;
  font-weight: 500;
}
a.pilot-name-link:hover {
  color: #1a4a8a;
  text-decoration: underline;
}

.roundButton {
  cursor: pointer;
  border-radius: 50%;
  font-size: 12px;
}

/* ── Form rows: label + control layout (used in _form.html.ep fieldsets) ── */
.form-row {
  margin-bottom: 8px;
}

.form-row label {
  font-weight: 600;
}

.form-row__control {
  margin-top: 3px;
}

.form-row--checkbox {
  display: flex;
  align-items: flex-start;
  gap: 6px;
  margin-bottom: 8px;
}

.form-row--checkbox input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.form-row--checkbox label {
  font-weight: normal;
}

input.checkboxColoured {
  -webkit-appearance: none;
  font-size: 16px;
}

input.checkboxColoured::after {
  color: #e24b4a;
  content: '✘';
  cursor: pointer;
  background-color: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.1);
}

input.checkboxColoured:checked::after {
  color: #16a34a;
  content: '✓';
}

/* Rotated table headers */
.table-header-rotated th.row-header { width: auto; }

.table-header-rotated td {
  width: 40px;
  border-top: 1px solid #e2e8f0;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  vertical-align: middle;
  text-align: center;
}

.table-header-rotated th.rotate-45 {
  height: 80px;
  width: 40px;
  min-width: 40px;
  max-width: 40px;
  position: relative;
  vertical-align: bottom;
  padding: 0;
  font-size: 11px;
  line-height: 0.8;
}

.table-header-rotated th.rotate-45 > div {
  position: relative;
  top: 0;
  left: 40px;
  height: 100%;
  transform: skew(-45deg, 0deg);
  overflow: hidden;
  border-left: 1px solid #e2e8f0;
  border-right: 1px solid #e2e8f0;
  border-top: 1px solid #e2e8f0;
}

.table-header-rotated th.rotate-45 span {
  transform: skew(45deg, 0deg) rotate(315deg);
  position: absolute;
  bottom: 30px;
  left: -25px;
  display: inline-block;
  width: 85px;
  text-align: left;
}

/* Fixed-width utility classes */
.fixed180  { width: 180px; }
.fixed200  { width: 200px; }
.fixed400  { width: 400px; }
.fixed500  { width: 500px; }
.fixed600  { width: 600px; }
.fixed800  { width: 800px; }
.fixed1000 { width: 1000px; }
.fixed1200 { width: 1200px; }

.height100pc { height: 100%; }
.height800   { height: 800px; }
.height1000  { height: 1000px; }
.height1200  { height: 1200px; }

/* --------------------------------------------------------------------------
   10. Print — keep existing print.css separate, this handles overrides only
   -------------------------------------------------------------------------- */

@media print {
  .topMenuDiv, nav.navBar, .subMenuBar { display: none !important; }
  .contentDiv { margin-top: 0 !important; padding: 0 !important; }
  .tableWrap { border: none; box-shadow: none; overflow: visible; }
  table.crewTable { font-size: 10px; }
}

/* --------------------------------------------------------------------------
   11. Responsive / mobile
   -------------------------------------------------------------------------- */

/* --- Hamburger button — hidden on desktop --- */
.navToggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 36px;
  height: 36px;
  padding: 6px;
  margin-left: auto;
  background: transparent;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}

.navToggle span {
  display: block;
  height: 2px;
  width: 100%;
  background: rgba(255,255,255,0.85);
  border-radius: 2px;
  transition: transform 0.2s, opacity 0.2s;
  transform-origin: center;
}

/* Animate into X when open */
.navToggle--open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navToggle--open span:nth-child(2) { opacity: 0; }
.navToggle--open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --- Tables: always allow horizontal scroll so content isn't zoomed --- */
/* Any table not already in a .tableWrap gets this behaviour via its parent */
.contentDiv {
  overflow-x: hidden;  /* prevent full-page horizontal scroll */
}

/* Ensure all bare tables can scroll rather than forcing page zoom */
.contentDiv > table,
.contentDiv > div > table,
.contentDiv > form > table {
  max-width: 100%;
}

/* Wrap tables that aren't already in a .tableWrap */
table.border,
table.crewTable,
table.floating {
  min-width: 0;  /* allow shrinking within a scroll container */
}

/* navMobileMeta: mobile-only second row — hidden on desktop */
.navMobileMeta {
  display: none;
}

/* Layout toggle — only shown in navMobileMeta, hidden elsewhere */
.navLayoutBtn { display: none; }

/* layout-mobile: force card view regardless of screen width */
body.layout-mobile .crew-wide-table,
body.layout-mobile .duty-wide-table,
body.layout-mobile .discr-wide-table,
body.layout-mobile .logbook-wide-table,
body.layout-mobile .summary-wide-table,
body.layout-mobile .summary-admin-wide-table,
body.layout-mobile .training-qual-wide-table,
body.layout-mobile .training-check-wide-table,
body.layout-mobile .logbook-company-wide-table,
body.layout-mobile .showpilot-wide-table,
body.layout-mobile .settings-wide-table,
body.layout-mobile .pilot-show-wide-table,
body.layout-mobile .scheme-wide-table,
body.layout-mobile .ts-wide-table,
body.layout-mobile .nts-wide-table,
body.layout-mobile .invite-wide-table {
  display: none !important;
}

body.layout-mobile .crew-card-list,
body.layout-mobile .duty-card-list,
body.layout-mobile .discr-card-list,
body.layout-mobile .logbook-card-list,
body.layout-mobile .logbook-cards-mobile,
body.layout-mobile .pilot-summary-mobile,
body.layout-mobile .summary-admin-card-list,
body.layout-mobile .training-card-list,
body.layout-mobile .showpilot-card-list,
body.layout-mobile .settings-card-list,
body.layout-mobile .pilot-show-mobile,
body.layout-mobile .scheme-card-list,
body.layout-mobile .ts-card-list,
body.layout-mobile .nts-card-list,
body.layout-mobile .invite-card-list {
  display: block !important;
}

/* layout-desktop: disable all card/mobile overrides so desktop view is restored */
body.layout-desktop .crew-wide-table,
body.layout-desktop .duty-wide-table,
body.layout-desktop .discr-wide-table,
body.layout-desktop .logbook-wide-table,
body.layout-desktop .summary-wide-table,
body.layout-desktop .summary-admin-wide-table,
body.layout-desktop .training-qual-wide-table,
body.layout-desktop .training-check-wide-table,
body.layout-desktop .logbook-company-wide-table,
body.layout-desktop .showpilot-wide-table,
body.layout-desktop .settings-wide-table,
body.layout-desktop .pilot-show-wide-table,
body.layout-desktop .scheme-wide-table,
body.layout-desktop .ts-wide-table,
body.layout-desktop .nts-wide-table,
body.layout-desktop .invite-wide-table {
  display: block !important;
}

body.layout-desktop .crew-card-list,
body.layout-desktop .duty-card-list,
body.layout-desktop .discr-card-list,
body.layout-desktop .logbook-card-list,
body.layout-desktop .logbook-cards-mobile,
body.layout-desktop .pilot-summary-mobile,
body.layout-desktop .summary-admin-card-list,
body.layout-desktop .training-card-list,
body.layout-desktop .showpilot-card-list,
body.layout-desktop .settings-card-list,
body.layout-desktop .pilot-show-mobile,
body.layout-desktop .scheme-card-list,
body.layout-desktop .ts-card-list,
body.layout-desktop .nts-card-list,
body.layout-desktop .invite-card-list {
  display: none !important;
}

@media (max-width: 480px) {

  /* --- No hamburger needed — navMobileMeta handles mobile controls --- */
  .navToggle {
    display: none;
  }

  nav.navBar {
    flex-wrap: wrap;
    height: auto;
    min-height: 44px;
    padding: 0 8px;
    align-items: center;
  }

  .navBrand {
    flex-shrink: 0;
    font-size: 15px;
    margin-right: 8px;
  }

  /* Nav links: always visible as a compact inline row */
  .navLinks {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    height: auto;
    min-height: 44px;
    flex: 1;
    gap: 0;
  }

  /* All links visible — compact size */
  .navLinks a.linkMenuBar,
  .navLinks a.linkMenuBar:not(.current) {
    display: inline-flex;
    height: 44px;
    padding: 0 7px;
    font-size: 12px;
    border-bottom: 3px solid transparent;
    white-space: nowrap;
  }

  /* Active link gets the gold underline */
  .navLinks a.linkMenuBar.current {
    display: inline-flex;
    height: 44px;
    padding: 0 7px;
    border-bottom: 3px solid #ffd060;
    font-size: 12px;
    color: #fff;
  }

  /* Hamburger open: navLinks unchanged (already showing) */
  .navLinks.navLinks--open {
    flex-direction: row;
    flex-wrap: wrap;
    height: auto;
    width: auto;
    padding: 0;
    order: unset;
  }

  .navLinks.navLinks--open a.linkMenuBar,
  .navLinks.navLinks--open a.linkMenuBar:not(.current) {
    display: inline-flex;
    height: 44px;
    padding: 0 7px;
    border-bottom: 3px solid transparent;
    font-size: 12px;
  }

  .navLinks.navLinks--open a.linkMenuBar.current {
    border-bottom: 3px solid #ffd060;
  }


  /* --- Submenus: wrap onto multiple lines, stay tappable --- */
  .subMenuBar .navInner {
    flex-wrap: wrap;
    min-height: 0;
    padding: 4px 8px;
    gap: 2px 0;
  }

  .subMenuBar a.linkMenuBar {
    font-size: 13px;
    padding: 7px 8px;
  }

  .companyLabel {
    width: 100%;
    margin: 3px 0 1px;
    border-left: none;
    padding-left: 0;
  }

  /* --- Tables: scroll horizontally instead of forcing zoom --- */
  /* Wrap bare tables in a scroll container */
  .contentDiv table.border,
  .contentDiv table.crewTable,
  .contentDiv table.floating {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    /* Restore table layout inside the block container */
    width: max-content;
  }

  /* .tableWrap already handles its own scroll — just ensure it fills width */
  .tableWrap {
    width: 100%;
  }

  /* Fieldsets containing tables should also scroll */
  fieldset.edit,
  fieldset.search,
  fieldset.settings,
  fieldset.outerSettings {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* Prevent fixed-width utility classes from blowing out the page */
  .fixed1200, .fixed1000, .fixed800, .fixed600, .fixed500, .fixed400 {
    width: 100% !important;
    max-width: 100%;
  }

  /* Base font size: keep at 14px — don't let browser auto-inflate */
  body {
    font-size: 14px;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }
}

/* ── Flash message bar ─────────────────────────────────────────────────── */
.flash-bar {
  width: 100%;
  padding: 9px 20px;
  font-weight: 600;
  font-size: 0.95rem;
  box-sizing: border-box;
  border-top: 1px solid transparent;
  border-bottom: 3px solid transparent;
  margin-bottom: 8px;
}
.flash-info    { background: #dbeafe; color: #1e3a6e; border-top-color: #bfdbfe; border-bottom-color: #93c5fd; }
.flash-success { background: #dcfce7; color: #14532d; border-top-color: #bbf7d0; border-bottom-color: #86efac; }
.flash-warning { background: #fef9c3; color: #713f12; border-top-color: #fef08a; border-bottom-color: #fde047; }
.flash-error   { background: #fee2e2; color: #7f1d1d; border-top-color: #fecaca; border-bottom-color: #fca5a5; }

/* ── What's New panel (login page) ─────────────────────────────────────── */
.whats-new {
  clear: both;
  margin: 24px auto 16px auto;
  max-width: 680px;
  border: 1px solid #c8d6e8;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.9rem;
}
.whats-new h2 {
  margin: 0;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  background: #1a4a8a;
  letter-spacing: 0.03em;
}
.whats-new h3 {
  margin: 12px 16px 4px 16px;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a4a8a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.whats-new ul {
  margin: 0 16px 10px 16px;
  padding-left: 18px;
}
.whats-new li {
  margin-bottom: 4px;
  color: #1a1a2e;
  line-height: 1.4;
}
.whats-new a {
  color: #1a4a8a;
  font-weight: 600;
}

/* ── Login page layout ──────────────────────────────────────────────────── */
.login-info-panel {
  clear: both;
  margin: 16px auto 0 auto;
  max-width: 680px;
}
.login-disclaimer {
  border: 1px solid #c8d6e8;
  border-radius: 6px;
  overflow: hidden;
  font-size: 0.9rem;
  margin-bottom: 16px;
}
.login-disclaimer h2 {
  margin: 0;
  padding: 8px 16px;
  font-size: 0.95rem;
  font-weight: 700;
  color: #ffffff;
  background: #1a4a8a;
  letter-spacing: 0.03em;
}
.login-disclaimer ul {
  margin: 8px 16px 10px 16px;
  padding-left: 18px;
}
.login-disclaimer li {
  margin-bottom: 4px;
  color: #1a1a2e;
  line-height: 1.4;
}
.login-disclaimer a {
  color: #1a4a8a;
}

/* ── Login remind page ──────────────────────────────────────────────────── */
.login-remind-intro {
  font-size: 0.9rem;
  color: #475569;
  margin: 0 0 16px 0;
}
.login-remind-section {
  font-size: 0.85rem;
  font-weight: 700;
  color: #1a2b4a;
  margin: 0 0 4px 0;
}
.login-remind-desc {
  font-size: 0.85rem;
  color: #475569;
  margin: 0 0 10px 0;
  line-height: 1.5;
}
.login-remind-divider {
  border: none;
  border-top: 1px solid #dce8f5;
  margin: 20px 0;
}
.login-remind-back {
  text-align: center;
  font-size: 0.85rem;
  margin: 4px 0 16px 0;
}
.login-remind-back a {
  color: #1a4a8a;
  text-decoration: none;
}
.login-remind-back a:hover {
  text-decoration: underline;
}
.login-index-header {
  text-align: center;
  font-size: 0.9rem;
  color: #475569;
  margin: 8px 0 4px 0;
}

/* ── Login page card ────────────────────────────────────────────────────── */
.login-page-wrap {
  max-width: 680px;
  margin: 0 auto;
}
.login-card {
  border: 1px solid #a8bdd6;
  border-radius: 6px;
  overflow: hidden;
  margin: 16px 0 20px 0;
  box-shadow: 0 2px 8px rgba(26,74,138,0.10);
}
.login-card__header {
  background: #1a4a8a;
  color: #ffffff;
  font-size: 1.05rem;
  font-weight: 700;
  padding: 10px 16px;
  letter-spacing: 0.03em;
}
.login-card__body {
  padding: 16px 20px 18px 20px;
  background: #f9fbfd;
}
.login-label {
  display: block;
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a2b4a;
  margin-bottom: 3px;
  margin-top: 10px;
}
.login-label:first-child {
  margin-top: 0;
}
.login-input {
  display: block;
  width: 100%;
  max-width: 320px;
  padding: 7px 10px;
  font-size: 0.95rem;
  font-family: inherit;
  border: 1px solid #a8bdd6;
  border-radius: 5px;
  box-sizing: border-box;
  background: #ffffff;
  color: #1a1a2e;
}
.login-input:focus {
  outline: none;
  border-color: #1a4a8a;
  box-shadow: 0 0 0 2px rgba(26,74,138,0.15);
}
.login-submit-row {
  margin-top: 14px;
  text-align: center;
}
.login-btn {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 28px;
  font-size: 0.95rem;
  font-family: inherit;
  font-weight: 700;
  color: #ffffff;
  background: #1a4a8a;
  border: 1px solid #142e5a;
  border-radius: 5px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,0.25);
  transition: background 0.12s, box-shadow 0.12s;
}
.login-btn:hover {
  background: #1e5aa0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}
.login-btn:active {
  background: #102840;
  box-shadow: inset 0 1px 3px rgba(0,0,0,0.3);
}

.login-btn--secondary {
  background: var(--colour-bg, #fff);
  color: var(--nav-bg, #1a4a8a);
  border: 2px solid var(--nav-bg, #1a4a8a);
  box-shadow: none;
}

.login-btn--secondary:hover {
  background: #e8f0fa;
  box-shadow: none;
}

.login-btn--passkey {
  background: var(--colour-bg, #fff);
  color: var(--colour-text, #222);
  border: 2px solid var(--colour-border, #ccc);
  box-shadow: none;
  width: 100%;
}

.login-btn--passkey:hover {
  background: var(--colour-bg-alt, #f5f5f5);
  border-color: var(--nav-bg, #1a4a8a);
  color: var(--nav-bg, #1a4a8a);
  box-shadow: none;
}

.login-divider {
  text-align: center;
  margin: 14px 0 10px;
  font-size: 0.85rem;
  color: var(--colour-muted, #888);
  position: relative;
}

.login-divider::before,
.login-divider::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 42%;
  height: 1px;
  background: var(--colour-border, #ccc);
}

.login-divider::before { left: 0; }
.login-divider::after  { right: 0; }

.login-magic-note {
  font-size: 0.78rem;
  color: var(--colour-muted, #888);
  margin: 4px 0 0;
  text-align: center;
}

.login-forgot {
  font-size: 0.82rem;
  margin: 10px 0 0;
  text-align: center;
  color: var(--colour-muted, #888);
}

.login-forgot a {
  color: var(--nav-bg, #1a4a8a);
}

/* Passkey section on settings/newpw page */
.passkey-info,
.passkey-note,
.passkey-loading {
  font-size: 0.9rem;
  color: var(--colour-muted, #555);
  margin: 0 0 8px;
}

.styledButton--danger {
  background: #c0392b;
  color: #fff;
  border: none;
}

/* ==========================================================================
   PWA & MOBILE ENHANCEMENTS
   ========================================================================== */

/* ── PWA: safe-area insets for notched phones ──────────────────────────────── */
.topMenuDiv {
  padding-top: env(safe-area-inset-top);
}

body {
  padding-bottom: env(safe-area-inset-bottom);
}

/* ── iOS install nudge banner ───────────────────────────────────────────────── */
.pwa-nudge {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 999;
  background: #1a4a8a;
  color: #fff;
  padding: 10px 12px calc(10px + env(safe-area-inset-bottom)) 12px;
  box-shadow: 0 -2px 12px rgba(0,0,0,0.25);
}

.pwa-nudge__inner {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 640px;
  margin: 0 auto;
}

.pwa-nudge__icon {
  font-size: 20px;
  flex-shrink: 0;
}

.pwa-nudge__text {
  flex: 1;
  font-size: 13px;
  line-height: 1.4;
}

.pwa-nudge__text svg {
  color: #ffd060;
}

.pwa-nudge__close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  font-size: 16px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}

.pwa-nudge__install {
  background: #fff;
  color: #1a4a8a;
  border: none;
  border-radius: 4px;
  font-size: 13px;
  font-weight: 600;
  padding: 5px 12px;
  cursor: pointer;
  flex-shrink: 0;
  white-space: nowrap;
}

/* ── Offline page ────────────────────────────────────────────────────────────── */
.offline-page {
  text-align: center;
  padding: 60px 24px 40px;
}

.offline-icon {
  font-size: 64px;
  margin-bottom: 16px;
  opacity: 0.5;
}

.offline-page h2 {
  font-size: 22px;
  color: #1a1a2e;
  margin: 0 0 12px;
}

.offline-page p {
  color: #555;
  margin: 0 0 24px;
  max-width: 380px;
  margin-left: auto;
  margin-right: auto;
}

body.dark .offline-page h2 { color: #e2e8f0; }
body.dark .offline-page p  { color: #94a3b8; }
@media (prefers-color-scheme: dark) {
  body:not(.light):not(.dark) .offline-page h2 { color: #e2e8f0; }
  body:not(.light):not(.dark) .offline-page p  { color: #94a3b8; }
}


/* ==========================================================================
   CARD ELEMENT STYLES (global — not media-query-scoped)
   These apply whenever cards are visible, regardless of breakpoint.
   Show/hide switching is handled by the 768px media block below.
   ========================================================================== */

/* ── Duty cards ──────────────────────────────────────────────────────────── */
.duty-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.duty-card__date {
  font-weight: 700;
  font-size: 14px;
  color: #1a4a8a;
  margin-bottom: 6px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.duty-card__date a {
  color: #1a4a8a;
  text-decoration: none;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 2px 10px;
  font-size: 13px;
  white-space: nowrap;
}

.duty-card__row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
  margin-bottom: 4px;
}

.duty-card__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #eef3f8;
  border-radius: 5px;
  padding: 3px 8px;
  min-width: 52px;
}

.duty-card__chip-label {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  line-height: 1.2;
}

.duty-card__chip-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
  line-height: 1.3;
}

.duty-card__chip-value.green  { color: #166534; }
.duty-card__chip-value.orange { color: #92400e; }
.duty-card__chip-value.red    { color: #991b1b; }

.duty-card__notes {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
  font-style: italic;
}

.duty-card__discretion {
  margin-top: 5px;
}

body.dark .duty-card {
  background: #1e2a3a;
  border-color: #2d3f55;
}

body.dark .duty-card__chip {
  background: #162030;
}

body.dark .duty-card__chip-value { color: #e2e8f0; }
body.dark .duty-card__chip-label { color: #94a3b8; }

@media (prefers-color-scheme: dark) {
  body:not(.light):not(.dark) .duty-card        { background: #1e2a3a; border-color: #2d3f55; }
  body:not(.light):not(.dark) .duty-card__chip  { background: #162030; }
  body:not(.light):not(.dark) .duty-card__chip-value { color: #e2e8f0; }
  body:not(.light):not(.dark) .duty-card__chip-label { color: #94a3b8; }
}

/* ── Logbook cards ───────────────────────────────────────────────────────── */
.logbook-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.logbook-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
}

.logbook-card__date {
  font-weight: 700;
  font-size: 13px;
  color: #1a4a8a;
}

.logbook-card__date a {
  color: #1a4a8a;
  text-decoration: none;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 2px 10px;
  white-space: nowrap;
}

.logbook-card__type {
  font-size: 12px;
  color: #555;
  font-weight: 600;
}

.logbook-card__route {
  font-size: 13px;
  color: #1a1a2e;
  margin-bottom: 5px;
}

.logbook-card__route span.arr {
  color: #888;
  margin: 0 3px;
}

.logbook-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.logbook-card__chip {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  background: #eef3f8;
  border-radius: 5px;
  padding: 3px 7px;
  min-width: 44px;
}

.logbook-card__chip-label {
  font-size: 10px;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.logbook-card__chip-value {
  font-size: 13px;
  font-weight: 600;
  color: #1a1a2e;
}

body.dark .logbook-card {
  background: #1e2a3a;
  border-color: #2d3f55;
}

body.dark .logbook-card__chip {
  background: #162030;
}

body.dark .logbook-card__chip-value { color: #e2e8f0; }
body.dark .logbook-card__chip-label { color: #94a3b8; }
body.dark .logbook-card__type       { color: #94a3b8; }
body.dark .logbook-card__route      { color: #e2e8f0; }

@media (prefers-color-scheme: dark) {
  body:not(.light):not(.dark) .logbook-card         { background: #1e2a3a; border-color: #2d3f55; }
  body:not(.light):not(.dark) .logbook-card__chip   { background: #162030; }
  body:not(.light):not(.dark) .logbook-card__chip-value { color: #e2e8f0; }
  body:not(.light):not(.dark) .logbook-card__chip-label { color: #94a3b8; }
  body:not(.light):not(.dark) .logbook-card__type   { color: #94a3b8; }
  body:not(.light):not(.dark) .logbook-card__route  { color: #e2e8f0; }
}

/* ── Pilot summary card (home page) ─────────────────────────────────────── */
.pilot-summary-mobile {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  padding: 14px 14px;
  margin-bottom: 12px;
}

.pilot-summary-mobile__name {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin-bottom: 4px;
}

.pilot-summary-mobile__meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 12px;
}

.pilot-summary-mobile__hours {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.pilot-summary-mobile__check {
  font-size: 13px;
  padding: 6px 0 0;
  border-top: 1px solid #e2e8f0;
}

body.dark .pilot-summary-mobile {
  background: #1e2a3a;
  border-color: #2d3f55;
}

body.dark .pilot-summary-mobile__name  { color: #e2e8f0; }
body.dark .pilot-summary-mobile__meta  { color: #94a3b8; }
body.dark .pilot-summary-mobile__check { border-color: #2d3f55; }

@media (prefers-color-scheme: dark) {
  body:not(.light):not(.dark) .pilot-summary-mobile              { background: #1e2a3a; border-color: #2d3f55; }
  body:not(.light):not(.dark) .pilot-summary-mobile__name        { color: #e2e8f0; }
  body:not(.light):not(.dark) .pilot-summary-mobile__meta        { color: #94a3b8; }
  body:not(.light):not(.dark) .pilot-summary-mobile__check       { border-color: #2d3f55; }
}

/* ── Admin FTL summary cards ─────────────────────────────────────────────── */
.summary-admin-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.summary-admin-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
}

.summary-admin-card__name {
  font-weight: 700;
  font-size: 15px;
  color: #1a2540;
}

.summary-admin-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

/* ── Training cards ──────────────────────────────────────────────────────── */
.training-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.training-card__header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 8px;
}

.training-card__title {
  font-size: 15px;
  font-weight: 700;
  color: #1a1a2e;
}

.training-card__title a {
  color: inherit;
  text-decoration: underline;
}

.training-card__type {
  font-size: 12px;
  color: #666;
  flex-shrink: 0;
  margin-left: 8px;
}

.training-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 8px;
}

/* ── Scheme cards ────────────────────────────────────────────────────────── */
.scheme-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.scheme-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 2px;
}
.scheme-card__title {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2e4a;
}
.scheme-card__short {
  font-size: 0.8rem;
  color: #475569;
  margin-bottom: 8px;
}
.scheme-card__group-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  margin: 6px 0 3px;
}
.scheme-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 4px;
}
.scheme-card__chip {
  display: flex;
  flex-direction: column;
  align-items: center;
  background: #f1f5f9;
  border-radius: 6px;
  padding: 3px 7px;
  min-width: 40px;
}
.scheme-card__chip-label {
  font-size: 9px;
  color: #64748b;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-weight: 600;
}
.scheme-card__chip-value {
  font-size: 0.85rem;
  font-weight: 600;
  color: #1a2e4a;
}
.scheme-card__flags {
  display: flex;
  flex-wrap: wrap;
  gap: 3px 10px;
  font-size: 0.75rem;
  color: #475569;
  margin: 6px 0 8px;
  border-top: 1px solid #f1f5f9;
  padding-top: 6px;
}
.scheme-card__flag { white-space: nowrap; }
.scheme-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.8rem;
  border-top: 1px solid #e2e8f0;
  padding-top: 6px;
}
.scheme-card__archived {
  font-style: italic;
  color: #94a3b8;
}

/* ── Invite cards ────────────────────────────────────────────────────────── */
.invite-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}
.invite-card__header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 8px;
  margin-bottom: 6px;
}
.invite-card__name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #1a2e4a;
}
.invite-card__status {
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 999px;
  white-space: nowrap;
}
.invite-card__status--green  { background: #f0faf0; color: #14532d; border: 1px solid #bbf7d0; }
.invite-card__status--red    { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.invite-card__status--orange { background: #fff7e6; color: #92400e; border: 1px solid #fed7aa; }
.invite-card__status--gray   { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.invite-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.invite-card__footer {
  margin-top: 8px;
  border-top: 1px solid #e2e8f0;
  padding-top: 8px;
}
body.dark .invite-card       { background: #1e2a3a; border-color: #2d3f55; }
body.dark .invite-card__name { color: #e2e8f0; }
body.dark .invite-card__footer { border-color: #2d3f55; }
@media (prefers-color-scheme: dark) {
  body:not(.light):not(.dark) .invite-card       { background: #1e2a3a; border-color: #2d3f55; }
  body:not(.light):not(.dark) .invite-card__name { color: #e2e8f0; }
  body:not(.light):not(.dark) .invite-card__footer { border-color: #2d3f55; }
}

/* ── Crew cards ──────────────────────────────────────────────────────────── */
.crew-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  padding: 12px 14px;
  margin-bottom: 10px;
}

.crew-card--current {
  border-color: #1a2540;
  border-width: 2px;
}

.crew-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.crew-card__name {
  font-weight: 700;
  font-size: 15px;
  color: #1a2540;
}

.crew-card__meta {
  font-size: 12px;
  color: #666;
  margin-bottom: 6px;
}

.crew-card__email {
  font-size: 12px;
  color: #475569;
  margin-bottom: 6px;
}

.crew-card__check {
  font-size: 13px;
  margin-bottom: 8px;
  padding: 4px 8px;
  border-radius: 4px;
  background: rgba(0,0,0,0.04);
}

.crew-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 10px;
}

.crew-card__actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 4px;
}

.crew-card__select-btn {
  background: #1a2540;
  color: #fff;
  border: none;
  border-radius: 6px;
  padding: 8px 20px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  min-height: 40px;
}

.crew-card__select-btn:active {
  background: #2d3f55;
}

.crew-card__selected-label {
  font-size: 13px;
  font-weight: 600;
  color: #1a7a3c;
}

/* ── Settings permission chips ───────────────────────────────────────────── */
.settings-card__perm {
  font-size: 11px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 4px;
  display: inline-block;
}
.settings-card__perm--on  { background: #dcfce7; color: #14532d; }
.settings-card__perm--off { background: #f1f5f9; color: #94a3b8; }

/* ── Discretion form mobile table styles ─────────────────────────────────── */
fieldset.edit table.discret-table tr.discret-header { display: none; }

fieldset.edit table.discret-info-table {
  width: 100%;
  border-collapse: collapse;
}
fieldset.edit table.discret-info-table td {
  display: block;
  padding: 2px 0;
}
fieldset.edit table.discret-info-table td:first-child {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  padding-top: 8px;
}
fieldset.edit table.discret-info-table td input[type="text"] {
  border: none;
  background: transparent;
  font-size: 15px;
  font-weight: 600;
  color: #1a2e4a;
  padding: 0;
  width: 100%;
}

fieldset.edit table.discret-table td {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

fieldset.edit table.discret-table td::before {
  content: attr(data-label);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #94a3b8;
  min-width: 52px;
  flex-shrink: 0;
}

fieldset.edit table.discret-table td input[type="text"] {
  width: auto !important;
  min-width: 0;
  flex: 1;
}

fieldset.edit table.discret-table td:first-child {
  font-weight: 600;
  font-size: 13px;
  color: #1a2e4a;
  padding-top: 10px;
}

fieldset.edit table.discret-table td:first-child::before {
  display: none;
}

li.discret-hint-li {
  list-style: none;
  margin: 4px -4px 6px -4px;
  padding: 6px 10px;
  background: #fde8c8;
  color: #7a3800;
  border-left: 4px solid #f59e0b;
  border-radius: 3px;
  font-weight: 600;
}

.discret-warning {
  margin: 8px 0 0 0;
  padding: 8px 12px;
  background: #fff1f1;
  color: #991b1b;
  border: 1px solid #fecaca;
  border-radius: 4px;
  font-size: 0.875rem;
  font-weight: 500;
}
.discret-warning[style*='display:none'] {
  margin: 0;
  padding: 0;
  border: none;
}

/* ==========================================================================
   MOBILE LAYOUT — 768px and below
   Covers tablets in portrait + all phones
   ========================================================================== */

/* ==========================================================================
   CARD / TABLE VISIBILITY DEFAULTS (desktop: show tables, hide cards)
   Overridden inside media queries for mobile.
   ========================================================================== */
.duty-wide-table             { display: block; }
.duty-card-list              { display: none; }
.discr-wide-table            { display: block; }
.discr-card-list             { display: none; }
.logbook-wide-table          { display: block; }
.discr-card {
  background: #fff;
  border: 1px solid #d1d9e6;
  border-radius: 8px;
  margin-bottom: 8px;
  padding: 10px 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}
.discr-card__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}
.discr-card__date-link {
  font-weight: 700;
  font-size: 13px;
  color: #1a4a8a;
  text-decoration: none;
  background: #eff6ff;
  border: 1px solid #bfdbfe;
  border-radius: 10px;
  padding: 2px 10px;
  white-space: nowrap;
}
.discr-card__status {
  font-size: 11px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.discr-card__status--green  { background: #f0faf0; color: #14532d; border: 1px solid #bbf7d0; }
.discr-card__status--orange { background: #fff7e6; color: #92400e; border: 1px solid #fed7aa; }
.discr-card__status--gray   { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
.discr-card__pilot {
  font-weight: 600;
  font-size: 13px;
  color: #1a2540;
  margin-bottom: 3px;
}
.discr-card__scheme {
  font-size: 11px;
  color: #64748b;
  margin-bottom: 6px;
}
.discr-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 4px;
}
.discr-card__chips .duty-card__chip {
  flex: 0 0 auto;
}
.discr-card__actual-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #888;
  margin: 4px 0 2px;
}
.discr-card__statement {
  font-size: 11px;
  color: #555;
  margin-top: 5px;
  font-style: italic;
  border-top: 1px solid #e8edf3;
  padding-top: 5px;
}
.discr-card__statement-label {
  font-style: normal;
  font-weight: 600;
  color: #444;
}
.discr-card__flags {
  display: flex;
  gap: 5px;
  flex-wrap: wrap;
  margin-top: 6px;
}
.discr-card__flag {
  font-size: 10px;
  font-weight: 600;
  padding: 1px 7px;
  border-radius: 8px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.discr-card__flag--green { background: #f0faf0; color: #14532d; border: 1px solid #bbf7d0; }
.discr-card__flag--blue  { background: #eff6ff; color: #1e40af; border: 1px solid #bfdbfe; }
.discr-card__flag--gray  { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
body.dark .discr-card            { background: #1e2a3a; border-color: #2d3f55; }
body.dark .discr-card__date-link { color: #93c5fd; }
body.dark .discr-card__pilot     { color: #e2e8f0; }
body.dark .discr-card__scheme    { color: #94a3b8; }
body.dark .discr-card__actual-label { color: #64748b; }
body.dark .discr-card__statement { color: #94a3b8; border-color: #2d3f55; }
@media (prefers-color-scheme: dark) {
  body:not(.light):not(.dark) .discr-card            { background: #1e2a3a; border-color: #2d3f55; }
  body:not(.light):not(.dark) .discr-card__date-link { color: #93c5fd; }
  body:not(.light):not(.dark) .discr-card__pilot     { color: #e2e8f0; }
  body:not(.light):not(.dark) .discr-card__scheme    { color: #94a3b8; }
  body:not(.light):not(.dark) .discr-card__statement { color: #94a3b8; border-color: #2d3f55; }
}
.logbook-card-list           { display: none; }
.logbook-cards-mobile        { display: none; }
.crew-wide-table             { display: block; }
.crew-card-list              { display: none; }
.summary-wide-table          { display: block; }
.pilot-summary-mobile        { display: none; }
.summary-admin-wide-table    { display: block; }
.summary-admin-card-list     { display: none; }
.training-card-list          { display: none; }
.training-qual-wide-table    { display: block; }
.training-check-wide-table   { display: block; }
.ts-wide-table               { display: block; }
.ts-card-list                { display: none; }
.nts-wide-table              { display: block; }
.nts-card-list               { display: none; }
.logbook-company-wide-table  { display: block; }
.showpilot-wide-table        { display: block; }
.showpilot-card-list         { display: none; }
.settings-wide-table         { display: block; }
.settings-card-list          { display: none; }
.pilot-show-wide-table       { display: block; }
.pilot-show-mobile           { display: none; }
.scheme-wide-table           { display: block; }
.scheme-card-list            { display: none; }
.invite-wide-table           { display: block; }
.invite-card-list            { display: none; }

/* ── Pilot show page — name/role/base/email header above the table ──────── */
.pilot-show-header {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 10px 0 12px;
}
.pilot-show-header__name {
  font-size: 1.1rem;
  font-weight: 600;
}
.pilot-show-header__meta {
  font-size: 0.9rem;
  color: #475569;
}
.pilot-show-header__email {
  font-size: 0.9rem;
  color: #475569;
}

@media (max-width: 768px) {

  /* ── Content padding ─────────────────────────────────────────────────────── */
  div.contentDiv {
    padding: 10px 10px;
  }

  /* ── Date search form: stack fields vertically ───────────────────────────── */
  .dateSearchForm,
  .dateSearchForm table,
  .dateSearchForm tbody,
  .dateSearchForm tr {
    display: block;
    width: 100%;
  }

  .dateSearchForm td {
    display: inline-block;
    padding: 2px 4px 2px 0;
    vertical-align: middle;
  }

  /* ── Style/export button rows: wrap neatly ───────────────────────────────── */
  .styleForm,
  .exportForm {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-bottom: 6px;
  }

  /* ── fieldsets: full width, no overflow ─────────────────────────────────── */
  fieldset.edit,
  fieldset.search,
  fieldset.settings,
  fieldset.outerSettings,
  fieldset.pdfReports {
    max-width: 100%;
    box-sizing: border-box;
  }


  /* ── Page title ──────────────────────────────────────────────────────────── */
  .pageTitle {
    font-size: 15px;
  }

  /* ── user_info block: stack vertically ───────────────────────────────────── */
  .user-info-row {
    flex-wrap: wrap;
    gap: 4px;
  }

  /* ── Recency / summary side panels: stack below main table ──────────────── */
  .row {
    display: block;
  }

  div.inlineDiv.leftDiv,
  div.inlineDiv.rightDiv {
    display: block;
    width: 100%;
    margin-bottom: 8px;
  }

  /* ── Make all bordered/crew/floating tables scroll horizontally ──────────── */
  /* This is the key rule for wide FTL and logbook tables:
     the table itself stays at natural width and the wrapper scrolls */
  .contentDiv table.border,
  .contentDiv table.crewTable,
  .contentDiv table.floating,
  .contentDiv table#logbookTable,
  .contentDiv table#dutyTable {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
    width: max-content;
  }

  .tableWrap {
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* ── Duty table: card view on small screens ──────────────────────────────── */
  /* We hide the wide table and show a card-per-day instead.
     The card view is a separate partial loaded on mobile via CSS. */
  .duty-card-list {
    display: block;
  }

  .duty-wide-table {
    display: none;
  }

  .discr-card-list  { display: block; }
  .discr-wide-table { display: none; }

  /* ── All other card/table pairs ─────────────────────────────────────────── */
  .logbook-wide-table          { display: none; }
  .logbook-card-list           { display: block; }
  .logbook-cards-mobile        { display: block; }
  .logbook-company-wide-table  { display: none; }
  .crew-wide-table             { display: none; }
  .crew-card-list              { display: block; }
  .showpilot-wide-table        { display: none; }
  .showpilot-card-list         { display: block; }
  .settings-wide-table         { display: none; }
  .settings-card-list          { display: block; }
  .pilot-show-wide-table       { display: none; }
  .pilot-show-mobile           { display: block; }
  .summary-wide-table          { display: none; }
  .pilot-summary-mobile        { display: block; }
  .summary-admin-wide-table    { display: none; }
  .summary-admin-card-list     { display: block; }
  .training-qual-wide-table    { display: none; }
  .training-check-wide-table   { display: none; }
  .training-card-list          { display: block; }
  .scheme-wide-table           { display: none; }
  .scheme-card-list            { display: block; }
  .invite-wide-table           { display: none; }
  .invite-card-list            { display: block; }
  .ts-wide-table               { display: none; }
  .ts-card-list                { display: block; }
  .nts-wide-table              { display: none; }
  .nts-card-list               { display: block; }

  /* ── Form rows: label + control pairs ───────────────────────────────────── */
  .form-row {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 10px;
  }

  .form-row label {
    font-weight: 600;
    font-size: 13px;
  }

  .form-row__control {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
  }

  /* Checkbox rows: inline label beside the checkbox */
  .form-row--checkbox {
    flex-direction: row;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 10px;
  }

  .form-row--checkbox input[type="checkbox"] {
    margin-top: 2px;
    flex-shrink: 0;
  }

  .form-row--checkbox label {
    font-weight: normal;
    font-size: 13px;
  }

  /* ── Home page summary table: make it a clean card ──────────────────────── */
  table.border.pilot-summary-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    width: max-content;
    max-width: 100%;
  }

  /* ── PDF reports panel: stack buttons ───────────────────────────────────── */
  fieldset.pdfReports .linkButton,
  fieldset.pdfReports a.linkButton {
    display: block;
    width: 100%;
    margin: 4px 0;
    box-sizing: border-box;
    text-align: center;
  }

  /* ── Logbook: tighten cell padding so more fits before scrolling ─────────── */
  table#logbookTable th,
  table#logbookTable td {
    padding: 4px 4px;
    font-size: 12px;
  }

  /* ── Duty table: tighten cells ───────────────────────────────────────────── */
  table.border th,
  table.border td {
    padding: 4px 5px;
    font-size: 12px;
  }

  /* ── Training table ─────────────────────────────────────────────────────── */
  table.trainingTable th,
  table.trainingTable td {
    padding: 5px 5px;
    font-size: 12px;
  }

  /* ── Buttons: minimum tap target 44px ───────────────────────────────────── */
  a.linkButton,
  button.linkButton,
  input[type="submit"],
  button[type="submit"] {
    min-height: 40px;
    padding: 8px 14px;
  }

  /* ── Form inputs: full width on mobile ──────────────────────────────────── */
  input[type="text"],
  input[type="date"],
  input[type="time"],
  input[type="number"],
  select,
  textarea {
    max-width: 100%;
  }

  /* ── Edit forms: stack label/input pairs ────────────────────────────────── */
  table.edit td:first-child {
    font-weight: 600;
    padding-top: 10px;
  }

  /* ── Nav: hide desktop meta row, show mobile meta row ───────────────────── */
  .navMeta {
    display: none !important;
  }

  .navMobileMeta {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    order: 3;
    padding: 3px 4px 4px;
    border-top: 1px solid rgba(255,255,255,0.12);
    gap: 0;
    flex-wrap: wrap;
    min-height: 34px;
  }

  .navMobileBtn {
    background: none;
    border: none;
    cursor: pointer;
    padding: 4px 8px;
    font-size: 15px;
    color: rgba(255,255,255,0.7);
    line-height: 1;
    flex-shrink: 0;
  }

  a.navMobileLogout {
    color: rgba(255,255,255,0.6);
    text-decoration: none;
    font-size: 12px;
    padding: 4px 8px;
    white-space: nowrap;
  }

  a.navMobileViewing {
    color: rgba(255,255,255,0.9);
    text-decoration: none;
    font-size: 12px;
    padding: 4px 8px 4px 4px;
    white-space: nowrap;
    font-weight: 500;
  }
}

/* ==========================================================================
   NARROW PHONE — 480px and below
   Additional refinements on top of the 768px block above.
   Card element styles and show/hide rules live above this block.
   ========================================================================== */

@media (max-width: 480px) {

  /* ── Flash bar: slightly smaller padding ─────────────────────────────────── */
  .flash-bar {
    padding: 8px 12px;
    font-size: 0.875rem;
  }

  /* ── Training check table: ensure scrollable ─────────────────────────────── */
  .contentDiv table {
    max-width: 100%;
  }

  /* ── Edit forms: improve tap targets and layout ──────────────────────────── */
  fieldset.edit table td {
    display: block;
    width: 100%;
    padding: 2px 0;
  }

  fieldset.edit table tr {
    display: block;
    margin-bottom: 8px;
  }

  fieldset.edit table {
    width: 100%;
  }

  fieldset.edit input[type="text"],
  fieldset.edit input[type="number"],
  fieldset.edit input[type="email"],
  fieldset.edit textarea,
  fieldset.edit select {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px; /* prevents iOS auto-zoom */
    min-height: 40px;
    padding: 6px 8px;
  }

  /* Time inputs (4-char) — compact, side by side, not full width */
  fieldset.edit input.time-input {
    width: 72px !important;
    min-height: 40px;
    font-size: 16px;
    padding: 6px 8px;
    box-sizing: border-box;
    display: inline-block;
    margin-right: 6px;
  }

  /* Scheme numeric inputs — compact, don't go full-width */
  fieldset.edit input.scheme-num {
    width: 80px !important;
    min-height: 40px;
    font-size: 16px;
    padding: 6px 8px;
    box-sizing: border-box;
    display: inline-block;
  }

  /* Time-based limits table — keep columns side by side */
  fieldset.edit table.scheme-time-table,
  fieldset.edit table.scheme-time-table tr,
  fieldset.edit table.scheme-time-table td,
  fieldset.edit table.scheme-time-table th {
    display: revert;
    width: auto;
  }
  fieldset.edit table.scheme-time-table td,
  fieldset.edit table.scheme-time-table th {
    padding: 4px 8px;
  }

  fieldset.edit label {
    font-weight: 600;
    font-size: 13px;
    display: block;
    margin-bottom: 2px;
  }

  /* radio/checkbox groups: space them out for easy tapping */
  fieldset.edit input[type="radio"],
  fieldset.edit input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 6px;
    vertical-align: middle;
  }

  fieldset.edit textarea {
    width: 100%;
    box-sizing: border-box;
    font-size: 16px;
    min-height: 100px;
    padding: 6px 8px;
  }

  /* FOI / managers email pickers: one per row on very narrow screens —
     a single FOI item still centres via the container's justify-content,
     multiple manager items stack instead of being squeezed into pairs */
  .emailBlockDiv {
    flex: 1 1 100%;
  }

} /* end @media (max-width: 480px) */


/* ── Alphabet scrubber ────────────────────────────────────────────────────── */
.crew-alpha-scrubber {
  display: none; /* hidden by default; shown by layout class or media query below */
  position: fixed;
  right: 4px;
  top: 120px;
  bottom: 90px;
  width: 22px;
  z-index: 150;
  flex-direction: column;
  align-items: stretch;
  justify-content: stretch;
  gap: 0;
  padding: 4px 1px;
  overflow: hidden;
  background: rgba(255,255,255,0.88);
  border: 1px solid #d1d9e6;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  user-select: none;
  -webkit-user-select: none;
  touch-action: none;
}
body.layout-mobile .crew-alpha-scrubber { display: flex; }
body.layout-desktop .crew-alpha-scrubber { display: flex; }
@media (max-width: 480px) { .crew-alpha-scrubber { display: flex; } }

/* Short viewports (mobile landscape) — the 120px/90px offsets that work fine
   on tall portrait/desktop screens eat half a ~400px-tall landscape viewport.
   Shrink them so the scrubber still gets the vast majority of the height. */
@media (max-height: 500px) {
  .crew-alpha-scrubber {
    top: 56px;
    bottom: 8px;
  }
}

.crew-alpha-scrubber__letter {
  display: flex;
  flex: 1 1 0;
  min-height: 0;
  width: 100%;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 600;
  color: #1a2540;
  border-radius: 9999px;
  cursor: pointer;
  line-height: 1;
  overflow: hidden;
}
.crew-alpha-scrubber__letter--empty {
  color: #bcc5d3;
  cursor: default;
  font-weight: 400;
}
.crew-alpha-scrubber__letter--current { position: relative; }
.crew-alpha-scrubber__letter--current::after {
  content: '';
  position: absolute;
  bottom: 1px;
  left: 50%;
  transform: translateX(-50%);
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: #f5c400;
}
.crew-alpha-scrubber__letter--active { background: #1a2540; color: #fff; }
.crew-alpha-scrubber__letter--active::after { display: none; }

/* Anchor divs mark the start of each letter group for the scrubber.
   Always in the DOM and visible so scrollIntoView works on both mobile and desktop. */
.crew-alpha-anchor { height: 0; overflow: hidden; margin: 0; padding: 0; }

body.layout-mobile .crew-card-list { padding-right: 36px; }
@media (max-width: 480px) { .crew-card-list { padding-right: 36px; } }
body.layout-mobile .logbook-card-list { padding-right: 36px; }
@media (max-width: 480px) { .logbook-card-list { padding-right: 36px; } }

/* ── Error pages ──────────────────────────────────────────────────────────── */
.errorPage {
  max-width: 520px;
  margin: 60px auto;
  padding: 40px;
  text-align: center;
  background: var(--card-bg, #fff);
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.08);
}
.errorPage__code {
  font-size: 5rem;
  font-weight: 700;
  color: var(--nav-bg, #1a4a8a);
  line-height: 1;
  margin-bottom: 8px;
  opacity: 0.15;
}
.errorPage__title {
  font-size: 1.4rem;
  margin: 0 0 12px;
  color: var(--text, #222);
}
.errorPage__message {
  color: var(--text-muted, #555);
  margin-bottom: 24px;
}
.errorPage__actions {
  margin-bottom: 24px;
}
.errorPage__ref {
  font-size: 0.85rem;
  color: var(--text-muted, #777);
}
.errorPage__ref code {
  background: var(--table-stripe, #f4f4f4);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8rem;
  word-break: break-all;
}


/* ==========================================================================
   Show pages — disabled fieldset inputs styled as clean read-only display
   values rather than browser-default greyed-out form controls.
   ========================================================================== */

fieldset[disabled] input[type="text"],
fieldset[disabled] input[type="number"],
fieldset[disabled] input[type="email"],
fieldset[disabled] input[type="date"],
fieldset[disabled] textarea {
  background: rgba(255,255,255,0.55);
  border: 1px solid rgba(0,0,0,0.12);
  color: #1a2535;
  -webkit-text-fill-color: #1a2535;
  opacity: 1;
  cursor: default;
  box-shadow: none;
}

fieldset[disabled] input[type="radio"],
fieldset[disabled] input[type="checkbox"] {
  opacity: 0.75;
  cursor: default;
}

fieldset[disabled] label {
  color: inherit;
  opacity: 1;
}

fieldset[disabled] legend {
  opacity: 1;
}


/* ==========================================================================
   User Settings display layout
   ========================================================================== */

/* User settings display — mobile first, stacks vertically */
.us-display-grid,
.us-display-left,
.us-display-right,
.us-display-row {
  display: flex;
  flex-direction: column;
  gap: 0.5em;
}

/* Force all child fieldsets to block + full width, overriding inline-block default */
.us-display-left > fieldset,
.us-display-right fieldset {
  display: block !important;
  width: auto !important;
  max-width: 100%;
  box-sizing: border-box;
}

/* Scheme value — don't wrap */
.us-display-row fieldset td:last-child {
  white-space: nowrap;
}

/* Inputs inside display/edit fieldsets can't blow out their container */
.us-display-left fieldset input,
.us-display-left fieldset.settings input,
.us-display-right fieldset input,
.us-display-right fieldset.settings input,
.us-display-left fieldset select,
.us-display-right fieldset select {
  max-width: 100%;
  box-sizing: border-box;
}

/* Desktop: two-column grid, rows side-by-side */
@media (min-width: 768px) {
  .us-display-grid {
    display: grid;
    grid-template-columns: auto 1fr;
    align-items: start;
  }

  .us-display-row {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: start;
  }

  .us-display-row > fieldset {
    flex: 1 1 auto;
  }
}

/* ==========================================================================
   INLINE STYLE REPLACEMENTS — Session 48
   Classes to replace inline style= attributes across templates.
   ========================================================================== */

/* .input-td: stretches the input cell in a two-column label/input table,
   so the input fills available space without making the whole fieldset block-width */
fieldset.edit td.input-td {
  width: 100%;
}
fieldset.edit td.input-td input[type="email"],
fieldset.edit td.input-td input[type="text"] {
  width: 100%;
  box-sizing: border-box;
}

/* fieldset.edit--block: forces fieldset to full-width block with top spacing
   (fieldset.edit is inline-block by default) */
fieldset.edit.edit--block {
  display: block;
  margin-top: 0.5em;
}

/* .fieldset-hint: descriptive text inside a fieldset, above the form fields */
.fieldset-hint {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: #475569;
}

/* .crew-name-wrap: flex row for crew name + inline form button */
.crew-name-wrap {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* .duty-card__no-flying: muted label shown when no flying on a duty day */
.duty-card__no-flying {
  font-size: 11px;
  color: #888;
  font-weight: 400;
}

/* .pilot-card__notes: notes text on pilot show/summary cards */
.pilot-card__notes {
  font-size: 13px;
  margin-top: 8px;
  color: #555;
}

/* .pilot-card__no-ftl: muted text shown for non-flying roles on summary cards */
.pilot-card__no-ftl {
  font-size: 13px;
  color: #888;
  margin-top: 4px;
}

/* .logbook-card__capacity: muted capacity label on logbook mobile cards */
.logbook-card__capacity {
  color: #888;
  font-size: 12px;
}

/* .logbook-card__crewnames: crew names line on company logbook mobile cards */
.logbook-card__crewnames {
  font-size: 12px;
  color: #666;
  margin-top: 6px;
}

/* .logbook-card__notes: notes line on logbook mobile cards */
.logbook-card__notes {
  font-size: 12px;
  color: #555;
  margin-top: 4px;
}

/* .logbook-date__sub: aircraft type/reg subtitle on logbook date view */
.logbook-date__sub {
  font-size: 12px;
  color: #555;
  font-weight: 400;
  margin-left: 6px;
}

/* .flash-bar--spaced: adds bottom margin to a flash bar (e.g. login index warning) */
.flash-bar--spaced {
  margin-bottom: 12px;
}

/* .flash-bar__action-link: action link inside a flash bar */
.flash-bar__action-link {
  color: inherit;
  font-weight: bold;
  margin-left: 8px;
}

/* .training-card__section: top-margin spacer for sections within training cards */
.training-card__section {
  margin-top: 8px;
}

/* .filterable: inline elements (spans) that trigger a filter on click */
.filterable {
  cursor: pointer;
}

/* .pdf-reports-hint: muted hint text in PDF reports panel */
.pdf-reports-hint {
  font-size: 0.9em;
  color: #666;
}