/*! normalize.css v3.0.2 | MIT License | git.io/normalize */

/**
 * 1. Set default font family to sans-serif.
 * 2. Prevent iOS text size adjust after orientation change, without disabling
 *    user zoom.
 */

html {
  font-family: sans-serif; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}

/**
 * Remove default margin.
 */

body {
  margin: 0;
}

/* HTML5 display definitions
   ========================================================================== */

/**
 * Correct `block` display not defined for any HTML5 element in IE 8/9.
 * Correct `block` display not defined for `details` or `summary` in IE 10/11
 * and Firefox.
 * Correct `block` display not defined for `main` in IE 11.
 */

article,
aside,
details,
figcaption,
figure,
footer,
header,
hgroup,
main,
menu,
nav,
section,
summary {
  display: block;
}

/**
 * 1. Correct `inline-block` display not defined in IE 8/9.
 * 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
 */

audio,
canvas,
progress,
video {
  display: inline-block; /* 1 */
  vertical-align: baseline; /* 2 */
}

/**
 * Prevent modern browsers from displaying `audio` without controls.
 * Remove excess height in iOS 5 devices.
 */

audio:not([controls]) {
  display: none;
  height: 0;
}

/**
 * Address `[hidden]` styling not present in IE 8/9/10.
 * Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
 */

[hidden],
template {
  display: none;
}

/* Links
   ========================================================================== */

/**
 * Remove the gray background color from active links in IE 10.
 */

a {
  background-color: transparent;
}

/**
 * Improve readability when focused and also mouse hovered in all browsers.
 */

a:active,
a:hover {
  outline: 0;
}

/* Text-level semantics
   ========================================================================== */

/**
 * Address styling not present in IE 8/9/10/11, Safari, and Chrome.
 */

abbr[title] {
  border-bottom: 1px dotted;
}

/**
 * Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
 */

b,
strong {
  font-weight: bold;
}

/**
 * Address styling not present in Safari and Chrome.
 */

dfn {
  font-style: italic;
}

/**
 * Address variable `h1` font-size and margin within `section` and `article`
 * contexts in Firefox 4+, Safari, and Chrome.
 */

h1 {
  font-size: 2em;
  margin: 0.67em 0;
}

/**
 * Address styling not present in IE 8/9.
 */

mark {
  background: #ff0;
  color: #000;
}

/**
 * Address inconsistent and variable font size in all browsers.
 */

small {
  font-size: 80%;
}

/**
 * Prevent `sub` and `sup` affecting `line-height` in all browsers.
 */

sub,
sup {
  font-size: 75%;
  line-height: 0;
  position: relative;
  vertical-align: baseline;
}

sup {
  top: -0.5em;
}

sub {
  bottom: -0.25em;
}

/* Embedded content
   ========================================================================== */

/**
 * Remove border when inside `a` element in IE 8/9/10.
 */

img {
  border: 0;
}

/**
 * Correct overflow not hidden in IE 9/10/11.
 */

svg:not(:root) {
  overflow: hidden;
}

/* Grouping content
   ========================================================================== */

/**
 * Address margin not present in IE 8/9 and Safari.
 */

figure {
  margin: 1em 40px;
}

/**
 * Address differences between Firefox and other browsers.
 */

hr {
  -moz-box-sizing: content-box;
  box-sizing: content-box;
  height: 0;
}

/**
 * Contain overflow in all browsers.
 */

pre {
  overflow: auto;
}

/**
 * Address odd `em`-unit font size rendering in all browsers.
 */

code,
kbd,
pre,
samp {
  font-family: monospace, monospace;
  font-size: 1em;
}

/* Forms
   ========================================================================== */

/**
 * Known limitation: by default, Chrome and Safari on OS X allow very limited
 * styling of `select`, unless a `border` property is set.
 */

/**
 * 1. Correct color not being inherited.
 *    Known issue: affects color of disabled elements.
 * 2. Correct font properties not being inherited.
 * 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
 */

button,
input,
optgroup,
select,
textarea {
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  margin: 0; /* 3 */
}

/**
 * Address `overflow` set to `hidden` in IE 8/9/10/11.
 */

button {
  overflow: visible;
}

/**
 * Address inconsistent `text-transform` inheritance for `button` and `select`.
 * All other form control elements do not inherit `text-transform` values.
 * Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
 * Correct `select` style inheritance in Firefox.
 */

button,
select {
  text-transform: none;
}

/**
 * 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
 *    and `video` controls.
 * 2. Correct inability to style clickable `input` types in iOS.
 * 3. Improve usability and consistency of cursor style between image-type
 *    `input` and others.
 */

button,
html input[type="button"], /* 1 */
input[type="reset"],
input[type="submit"] {
  -webkit-appearance: button; /* 2 */
  cursor: pointer; /* 3 */
}

/**
 * Re-set default cursor for disabled elements.
 */

button[disabled],
html input[disabled] {
  cursor: default;
}

/**
 * Remove inner padding and border in Firefox 4+.
 */

button::-moz-focus-inner,
input::-moz-focus-inner {
  border: 0;
  padding: 0;
}

/**
 * Address Firefox 4+ setting `line-height` on `input` using `!important` in
 * the UA stylesheet.
 */

input {
  line-height: normal;
}

/**
 * It's recommended that you don't attempt to style these elements.
 * Firefox's implementation doesn't respect box-sizing, padding, or width.
 *
 * 1. Address box sizing set to `content-box` in IE 8/9/10.
 * 2. Remove excess padding in IE 8/9/10.
 */

input[type="checkbox"],
input[type="radio"] {
  box-sizing: border-box; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Fix the cursor style for Chrome's increment/decrement buttons. For certain
 * `font-size` values of the `input`, it causes the cursor style of the
 * decrement button to change from `default` to `text`.
 */

input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  height: auto;
}

/**
 * 1. Address `appearance` set to `searchfield` in Safari and Chrome.
 * 2. Address `box-sizing` set to `border-box` in Safari and Chrome
 *    (include `-moz` to future-proof).
 */

input[type="search"] {
  -webkit-appearance: textfield; /* 1 */
  -moz-box-sizing: content-box;
  -webkit-box-sizing: content-box; /* 2 */
  box-sizing: content-box;
}

/**
 * Remove inner padding and search cancel button in Safari and Chrome on OS X.
 * Safari (but not Chrome) clips the cancel button when the search input has
 * padding (and `textfield` appearance).
 */

input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
  -webkit-appearance: none;
}

/**
 * Define consistent border, margin, and padding.
 */

fieldset {
  border: 1px solid #c0c0c0;
  margin: 0 2px;
  padding: 0.35em 0.625em 0.75em;
}

/**
 * 1. Correct `color` not being inherited in IE 8/9/10/11.
 * 2. Remove padding so people aren't caught out if they zero out fieldsets.
 */

legend {
  border: 0; /* 1 */
  padding: 0; /* 2 */
}

/**
 * Remove default vertical scrollbar in IE 8/9/10/11.
 */

textarea {
  overflow: auto;
}

/**
 * Don't inherit the `font-weight` (applied by a rule above).
 * NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
 */

optgroup {
  font-weight: bold;
}

/* Tables
   ========================================================================== */

/**
 * Remove most spacing between table cells.
 */

table {
  border-collapse: collapse;
  border-spacing: 0;
}

td,
th {
  padding: 0;
}body {
    font-family: "Roboto", sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 16.41px;
    color: #333;
}

#template-topbar {
    background: #000000;
    color: #ffffff
}

/* ========================================================================
 * Miscellaneous stylings
 */

h1, h2, h3, h4, h5, h6 { margin: 0px 0px; font-weight: 700; }

.search-box { width: 400px; }


input[type="checkbox"] {
    width: 24px;
    height: 24px;
}

input:not([type="color"]), select {
    background: #FFFFFF;
    border: 1px solid #BDBDBD;
    border-radius: 4px;
    padding: 14px 16px;
}

/* General rule for error condition */
.error { border: 4px solid #ff0000; }

/* A more specific rule for error conditions on input widgets */
input:not([type="color"]).error,
select.error {
    border: 4px solid #ff0000;
}

button, .button, .button-primary {
    display: inline-block;
    background: #ffffff;
    border-radius: 4px;
    padding: 14px 16px;
    color: #00233a;
    font-weight: 700;
    font-size: 15px;
    line-height: 18px;
    border: 1.5px solid #00233A;
}

button:hover, .button:hover {
    text-decoration: underline;
}

.button-primary {
    background: #00233A;
    color: #ffffff;
}

.button-primary:hover {
    background: #f5e5e5;
    color: #00233a;
}

#undelete-job-button {
    max-width: 12em;
}

h1 { font-size: 40px; line-height: 46.88px; }
h2 { font-size: 32px; line-height: 37.5px; }
h3 { font-size: 24px; line-height: 28.13px; }
h4 { font-size: 18px; line-height: 21.09px; }
h5 { font-size: 15px; line-height: 17.58px; }
h6 { font-size: 13px; line-height: 15.23px; }

input:not([type="color"])  { height: 18px; }

textarea {
    width: 480px;
    height: 10em;
}

.icon-span {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}

.icon { height: 16px; }
.icon19 { height: 19px; }

.flat-button {
    font-weight: 500;
    font-size: 13px;
    line-height: 15px;
    display: inline-block;
    border: 0px;
    background-color: transparent;
    cursor: pointer;
}

a, a:visited {
    color: #00739e;
    font-weight: 400;
    text-decoration: none;
}

a:hover {
    text-decoration: underline;
}

.titleblock {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

#bcbar-buttons {
    display: flex;
    gap: 24px;
    align-items: center;
}

/* ========================================================================
 * Map tools styles
 */

.map-properties-dialog {
    background: #fff;
    border: 1px solid black;
    padding: 0.5em;
}

.map-properties-dialog button {
    margin-right: 0.5em;
}

.map-toolbar button {
    margin-top: 0.5em;
    margin-left: 0.5em;
    pointer-events: auto;
}

.map-toolbar button:not(.button-primary) {
    background: #ffffff;
}

.map-toolbar {
    position: absolute;
    zIndex: 1;
    left: 0px;
    top: 0px;
    pointer-events: none;
}

.map-toolbar-sub {
    pointer-events: auto;
}

.map-urbar {
    position: absolute;
    zIndex: 1;
    left: 0px;
    bottom: 0px;
}

.map-urbar button {
    margin-left: 0.5em;
    margin-bottom: 0.5em;
    width: 38px;
    height: 38px;
    background: #ffffff;
    padding: 0;
    font-size: 120%;
}

.map-zoombar {
    position: absolute;
    zIndex: 1;
    right: 0px;
    bottom: 0px;
}

/* The div that holds the top level of the on-map menu */
#map-menu-div {
  position: absolute;
  z-index: 1;
  top: 0;
  right: 0.5em;
  background-color: white;
  overflow-x: hidden;
  transition: 0.5s;
  margin: 0.5em;
  opacity: 100%;
  display: flex;
  flex-direction: column
}

.map-menu-container-div button {
    /* On map menu close buttons are smaller */
    padding:0.5em;
}

.map-menu-default-width {
    width:16em;
}

#map-layers-close-btn, #map-menu-open-btn, #map-zones-open-btn {
    opacity:100%;
}


#map-menu-open-btn {
  background-color: #dbd9d7;
}


.on-map-menu-close-btn {
    position:absolute;
    top:0;
    right:0;
    margin:0.5em;
}

.map-menu-button {
    margin: 0.5em;
    margin-right: 4em;
    padding: 0.5em;
}

/* The layers dialogue */
.map-menu-container-div {
    color: black;
    background: white;
    padding-right: 1em;
    padding-bottom: 1em;
    padding-left: 1em;

    border-radius: 10px;

    position: absolute;
    margin:0.5em;

    /* Ensure there is space for the buttons (full screen, zoom in/out)
       down the right hand side */
    right: 3em;

    /* Ensure the display (rate and area totas) are not obscured */
    max-height: calc(100% - 21em);

    /* Ensure the close buttin is fully visible in empty menu */
    min-width: 2.5em;

    /* Ensure the menu is below the main menu div */
    top: 11em;

    overflow-y: auto;
}

#map-menu-basemaps-set {
    display: inline-flex;
    flex-direction: column;
}

.onmap-menu-header{
  align-items: center;
  background-color: #fff;
  border-bottom: 1px solid green;
  display: flex;
  justify-content: space-between;
  position: sticky;
  top: 0;
  width: 100%;
  z-index: 10;
}

.onmap-menu-header .on-map-menu-close-btn {
    position:relative;
    float:right;
}

.onmap-menu-header span {
    /* legible menu titles */
    font-size:x-large;
    text-align: center;
    flex-grow: 1;
}


.map-field-set {
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
    max-height:50vh;
}

.map-menu-item {
    cursor: pointer;
}

.map-zoombar button {
    margin-right: 0.5em;
    margin-bottom: 0.5em;
    background: #ffffff;
    display: block;
    width: 38px;
    height: 38px;
    padding: 0;
}

.map-menubar button {
    margin-top: 0.5em;
}

.map-label {
    color: #fc8;
    font-weight: bold;
    text-stroke: 1px solid #000;
    display: inline-block;
    white-space: nowrap;
}

.map-area-quantity {
    /* zIndex: 1; */
    align-items: center;
    background: #fff;
    border-radius: 4px;
    bottom: 0px;
    display: flex;
    font-size: larger;
    font-weight: bold;
    height: 38px;
    justify-content: center;
    left: 50%;
    margin-bottom: 0.5em;
    padding-left:0.5em;
    padding-right:0.5em;
    position: absolute;
    transform: translateX(-50%);
    white-space: nowrap;
    zIndex: 1;
}

/* Styling for a spinner that spins in an HTMLElement while we wait */
.spinner {
  width: 3em;
  height: 3em;
  animation: rotate 1s linear infinite;
}

@keyframes rotate {
  100% {
    transform: rotate(360deg);
  }
}
/* ========================================================================
 * Client picker styles
 */

.clientpick-title {
    font-size: 20px;
    font-weight: 700;
}

.clientpick-summary {
    background: #f6f6f6;
    padding: 20px;
}

/*
 * Styles for clients page header
*/
#all-clients-label {
    font-size: large;
    font-weight: bold;
}

#client-search {
    padding-right:2em;
}
/* ========================================================================
 * Map picker styles
 */

.mappicker-item {
    display: inline-block;
    margin-right: 1em;
    vertical-align: top;
}

.mappicker-thumbnail {
    margin-top: 1em;
    width: 15em;
    height: 15em;
    cursor: pointer;
    border: 2px solid rgba(0, 0, 0, 0);
}

.mappicker-selected {
    border: 2px solid red;
}

/* ========================================================================
 * Search picker styles
 */

.searchpick > input {
    margin-bottom: 0;
}

.searchpick-list {
    overflow-y: scroll;
    width: 20em;
    height: 10em;
    border: 1px solid black;
    background: #fff;
}

.searchpick-row {
    cursor: pointer;
    padding: 0.25em;
}

.searchpick-row:hover { background: #99e1f8; }

/* ========================================================================
 * Column-list styles
 */

td, th {
    padding: 1px 12px;
    font-size: 16px;
    line-height: 24px;
    text-align: left;
}

thead {
    background: #F6F6F6;
}

th {
    font-weight: 700;
}

.clist-flip-y {
    transform: scaleY(-1);
}
.clist-row:nth-child(odd) {
  background-color: #fff9f9; /* Apply background color to odd rows */
}

.clist-row:nth-child(even) {
  background-color: #ffffff; /* Apply background color to even rows */
}

.clist-row:hover {
    background: #00233A;
    color: #ffffff;
}

.clist-href-1st {
    color: #00739E;
    font-weight: 700;
}

.clist-href-1st:hover {
    color: #ffffff;
    text-decoration: underline;
}

.clist a, .clist a:visited { text-decoration: none; color: #333333; }

/* ========================================================================
 * Layout utilities
 */

html, body {
    width: 100%;
    height: 100%;
}

.body-print {
    width: 750px;
    margin-left: auto;
    margin-right: auto;
}

.scrollable {
    overflow: auto;
    width: 100%;
    height: 100%;
}

.vbox-gap, .hbox-gap {
    gap: 24px;
}

.vbox {
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: auto;
    align-items: stretch;
}

.hbox {
    width: 100%;
    height: 100%;
    display: flex;
    overflow: auto;
    align-items: stretch;
}

.box-grow2 {
    flex: 2;
    overflow: auto;
}

.box-grow {
    flex: 1;
    overflow: auto;
}

.hspread {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

/* The title on the "Manage" page */
#manage-title-span{
  display: flex;
  align-items: center;
}
#manage-title-span input {
    margin-left: 0.5em;
}

.stack {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 100%;
}

.stack-layer {
    position: absolute;
    width: 100%;
    height: 100%;
    left: 0px;
    top: 0px;
}

/* ========================================================================
 * Root template
 */

#template-logo { height: 50px; }

#template-topbar {
    font-weight: 700;
    padding: 16px 40px;
}

#template-topbar a {
    color: #ffffff;
}

/* ========================================================================
 * Auth: sidebar
 */

.auth-padwrap {
    /* Bottom strip trimmed to give tab content more vertical room; height
     * calc tracks the top+bottom padding (40 top + 45 bottom = 85). */
    padding: 40px 40px 45px;
    width: calc(100% - 80px);
    height: calc(100% - 85px);
    overflow: auto;
}

#auth-sidebar {
    width: 233px;
    background: #f6f6f6;

    flex-direction: column;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

#auth-sidebar > div {
    width: 100%;
}

.auth-sidebar-item {
    display: block;
    padding: 16px;
    border-bottom: 1px solid #dddddd;
}

.auth-sidebar-selected {
    background: #ffffff;
}

.auth-sidebar-item label {
    font-weight: 700;
    font-size: 16px;
    line-height: 19px;
    color: #00233a;
    padding-left: 12px;
}

#auth-sidebar a:hover { text-decoration: none; }

#auth-powered-by {
    color: #757575;
    padding: 32px;
    display: none;
}

#auth-powered-by span {
    display: block;
    font-size: 12px;
    line-height: 14px;
    margin-bottom: 8px;
}

#auth-powered-by img {
    width: 100%;
}

/* ========================================================================
 * Maps/jobs: details view
 */

#details { background: #eee; }

.job-edit-qrow {
    display: inline-flex;
    flex-direction: row;
    gap: 12px;
    width: 100%;
    justify-content: left;
}

.job-edit-qrow input {
    width: 64px;
}

/* ========================================================================
 * Jobs: navigation topbar
 */

.navbar {
    display: flex;
    gap: 32px;
    border-bottom: 1px solid #BDBDBD;
}

.navbar-item {
    display: inline-block;
    cursor: pointer;
    font-weight: 700;
    font-size: 18px;
    line-height: 21px;
    color: #00739E;
}

a.navbar-item:hover { text-decoration: none; }

.navbar-selected {
    color: #333333 !important;
    border-bottom: 3px solid #333333;
}

/* ========================================================================
 * Proof of Application report UI
 */

/* ========================================================================
 * job_edit/Export tab — two-column card layout
 */

.export-tab-page {
    max-width: none;
    box-sizing: border-box;
}

.export-tab-content {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

.export-tab-message {
    color: #666;
}

.export-tab-columns {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: 1em;
    align-items: stretch;
}

.export-tab-col {
    min-width: 0;
}

.export-tab-col-stack {
    display: flex;
    flex-direction: column;
    gap: 1em;
}

/* PoA card stretches to match the combined height of the left column. */
.export-tab-col-poa {
    display: flex;
    flex-direction: column;
}

#div-poa-ui {
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.export-tab-card {
    background: #ffffff;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 1em 1.15em;
    box-sizing: border-box;
}

.export-tab-heading {
    font-size: 16px;
    font-weight: 700;
    margin: 0 0 0.25em 0;
}

.export-tab-subtitle {
    font-size: 13px;
    color: #666;
    margin: 0 0 0.75em 0;
    line-height: 1.35;
}

.export-tab-download-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.6em;
}

.export-tab-download-card {
    display: flex;
    align-items: center;
    text-decoration: none;
    color: inherit;
    background: #fafafa;
    border: 1px solid #ddd;
    border-radius: 6px;
    padding: 0.65em 1.75em 0.65em 0.75em;
    box-sizing: border-box;
    min-height: 3.75em;
    position: relative;
}

.export-tab-download-card:hover {
    border-color: #999;
    background: #f3f3f3;
    text-decoration: none;
}

.export-tab-download-card::after {
    content: '\203A';
    position: absolute;
    right: 0.6em;
    top: 50%;
    transform: translateY(-50%);
    font-size: 1.15em;
    color: #999;
    font-weight: 700;
}

.export-tab-download-body {
    min-width: 0;
}

.export-tab-download-title {
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 0.15em;
}

.export-tab-download-desc {
    font-size: 12px;
    color: #666;
    line-height: 1.3;
}

.export-tab-fje-row {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    gap: 0.6em;
    align-items: center;
}

.export-tab-fje-row .button-primary {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 14px;
}

.export-tab-fje-url {
    width: 100%;
    min-width: 0;
    height: 32px;
    padding: 0 0.6em;
    font-size: 13px;
    box-sizing: border-box;
    border: 1px solid #ccc;
    border-radius: 4px;
    background: #fff;
    color: #333;
}

.export-tab-fje-copy {
    white-space: nowrap;
    padding: 10px 14px;
    font-size: 14px;
}

.export-tab-poa-body {
    display: flex;
    flex-direction: column;
    gap: 0.65em;
    flex: 1 1 auto;
    min-height: 0;
    padding-top: 0.35em;
    border-top: 1px solid #eee;
}

.export-tab-poa-body.waiting {
    cursor: wait;
}

.export-tab-poa-label {
    display: block;
    font-weight: 700;
    font-size: 13px;
    margin-bottom: 0.3em;
}

.export-tab-poa-thickness-row {
    display: flex;
    align-items: center;
    gap: 0.5em;
    flex-wrap: wrap;
    font-size: 13px;
    color: #666;
}

#line_thickness {
    width: 4em;
    height: 32px;
    padding: 0 0.4em;
    font-size: 14px;
    box-sizing: border-box;
    margin: 0;
}

.export-tab-poa-body .button-primary,
.export-tab-poa-body #download_poa_button {
    width: 100%;
    box-sizing: border-box;
    padding: 10px 14px;
    font-size: 14px;
    text-align: center;
}

.export-tab-poa-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.75em;
    margin-top: auto;
    padding-top: 0.65em;
    border-top: 1px solid #eee;
}

.export-tab-poa-badge {
    display: inline-block;
    padding: 0.3em 0.65em;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: #eef1f4;
    color: #555;
}

.export-tab-poa-badge-waiting {
    background: #fff3cd;
    color: #856404;
}

.export-tab-poa-badge-ready {
    background: #d4edda;
    color: #155724;
}

.export-tab-poa-badge-error {
    background: #f8d7da;
    color: #721c24;
}

#download_poa_button.inactive_colour {
    opacity: 0.55;
}

.export-tab-poa-hint {
    font-size: 12px;
    color: #888;
    text-align: right;
}

/* ========================================================================
 * Airstrip list (job/map pages): card layout + two-column details
 */

.airstrip-list-widget .airstrip-items {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.airstrip-add-row {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-top: 1.25em;
    min-width: 0;
}

/* Same width as .airstrip-minus so the picker lines up with the cards. */
.airstrip-add-spacer {
    flex: 0 0 32px;
    width: 32px;
}

.airstrip-add-row .field-pair {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.airstrip-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    min-width: 0;
}

/* Match the worklog editor minus button (32×32). */
.airstrip-list-widget .airstrip-minus {
    flex: 0 0 auto;
    height: 32px;
    min-width: 32px;
    padding: 0 4px;
    margin: 0;
    font-size: 14px;
    line-height: 1.2;
    box-sizing: border-box;
}

.airstrip-card {
    flex: 1 1 auto;
    min-width: 0;
    background: #f6f6f6;
    border: 2px solid #ccc;
    border-radius: 4px;
    padding: 12px 16px;
    box-sizing: border-box;
}

.airstrip-cols {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 0.25em 1.5em;
    align-items: start;
}

.airstrip-col {
    display: flex;
    flex-direction: column;
    gap: 0.25em;
    min-width: 0;
}

.airstrip-line {
    display: grid;
    grid-template-columns: 8em minmax(0, 1fr);
    column-gap: 0.5em;
    align-items: baseline;
}

.airstrip-key {
    font-weight: bold;
}

.airstrip-value {
    word-break: break-word;
}

.airstrip-rate-row {
    grid-template-columns: 8em minmax(4em, auto) minmax(0, 1fr);
    align-items: center;
    column-gap: 0.5em;
}

.airstrip-rate-row input:not([type="checkbox"]),
.airstrip-rate-row select {
    height: 28px;
    min-height: 28px;
    padding: 2px 6px;
    box-sizing: border-box;
}

.airstrip-rate-row input:not([type="checkbox"]) {
    width: 5em;
    min-width: 0;
}

.airstrip-rate-row select {
    min-width: 0;
}

/* Legacy class kept for any older markup still referencing it. */
.airstrip-list-cell {
    display: inline-block;
    vertical-align: top;
}

.airstrip-content {
    display: inline-block;
    vertical-align: top;
}

/* ========================================================================
 * Simple set selector widget: item strips
 */

.set-selector-strip {
    display: inline-flex;
    align-items: center;
    gap: 12px;
    width: 30%;
    overflow: hidden;
}

/* Assignments tab: toggle buttons instead of checkboxes. */
.assign-selector {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75em;
    align-items: stretch;
}

.assign-selector .set-selector-strip {
    width: auto;
    gap: 0;
    overflow: visible;
}

.assign-selector .set-selector-btn {
    box-sizing: border-box;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    font-size: 12px;
    line-height: 1.2;
    font-weight: 700;
    padding: 0.35em 0.5em;
    border: 1.5px solid #00233A;
    border-radius: 4px;
    background: #ffffff;
    color: #00233A;
    cursor: pointer;
}

.assign-selector .set-selector-btn:hover:not(:disabled) {
    text-decoration: underline;
}

.assign-selector .set-selector-btn.set-selector-selected {
    background: #00233A;
    color: #ffffff;
}

.assign-selector .set-selector-btn:disabled {
    opacity: 0.55;
    cursor: not-allowed;
}

.assign-selector-pilot .set-selector-btn,
.assign-selector-aircraft .set-selector-btn {
    box-sizing: border-box;
    width: 100%;
    height: 100%;
    min-width: 0;
    min-height: 0;
    padding: 0.25em;
    overflow: hidden;
}

.assign-selector-pilot .set-selector-strip,
.assign-selector-aircraft .set-selector-strip {
    width: 5.25em;
    height: 5.25em;
    flex: 0 0 5.25em;
    display: flex;
}

/* Pilots/aircraft beside the section title: two rows, fill down then across. */
.scrolltabs-title-body .assign-selector-pilot,
.scrolltabs-title-body .assign-selector-aircraft {
    display: grid;
    grid-template-rows: repeat(2, 5.25em);
    grid-auto-flow: column;
    grid-auto-columns: 5.25em;
    gap: 0.85em;
    flex: 1 1 auto;
    min-width: 0;
    justify-content: start;
    align-content: start;
    align-items: start;
}

.scrolltabs-title-body .assign-selector-device {
    flex: 1 1 auto;
    min-width: 0;
    align-content: start;
}

#assignments-div .scrolltabs-inline .scrolltabs-title {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    margin-bottom: 0;
    gap: 1em;
}

#assignments-div .scrolltabs-inline .scrolltabs-title > span:first-child {
    flex: 0 0 9em;
    width: 9em;
}

.scrolltabs-inline .scrolltabs-title {
    align-items: flex-start;
    margin-bottom: 0;
    gap: 1em;
}

.scrolltabs-title-body {
    flex: 1 1 auto;
    min-width: 0;
}

.assign-selector-device .set-selector-btn {
    min-width: 9em;
    height: 2.35em;
    padding: 0 0.75em;
    font-family: "Roboto Mono", monospace, sans-serif;
    font-size: 13px;
    letter-spacing: 0.02em;
}

.set-selector-btn-label {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 0.1em;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
}

.set-selector-btn-line1,
.set-selector-btn-line2 {
    display: block;
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.set-selector-btn-line1 {
    font-size: 11px;
}

.set-selector-btn-line2 {
    font-weight: 400;
    font-size: 10px;
}

/* ========================================================================
 * Labelled fields
 */

.field-set {
    display: inline-flex;
    flex-direction: column;
    gap: 20px;
}

.field-span {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

.field-pair {
    display: inline-flex;
    flex-direction: column;
    gap: 8px;
}

.field-label {
    display: inline-block;
    font-size: 13px;
    line-height: 15px;
    font-weight: 700;
}

/* ========================================================================
 * Scrolltabs
 */

.scrolltabs-outer hr {
    margin-top: 24px;
    margin-bottom: 24px;
}

.scrolltabs-page {
    margin-bottom: 12px; /* will collapse */
}

.scrolltabs-title {
    margin-bottom: 12px;
}

/* ========================================================================
 * Report header
 */

.report-header {
    padding: 16px;
}

.report-key {
    width: 30%;
    display: inline-block;
    font-weight: bold;
}

.report-value {
    width: 70%;
    display: inline-block;
}

.report-pair {
    width: 50%;
    display: inline-block;
}

.report-dkey {
    width: 15%;
    display: inline-block;
    font-weight: bold;
}

.report-dvalue {
    width: 85%;
    display: inline-block;
}

.report-dpair {
    width: 100%;
    display: inline-block;
}

/* ========================================================================
 * Scrolltabs
 */

/* Matches with <h4> */
.scrolltabs-collapser {
    font-size: 2.4rem;
    line-height: 1.35;
    cursor: pointer;
}

/* ========================================================================
 * Misc. styles
 */

.small-button {
    padding-left: 1rem;
    padding-right: 1rem;
    margin-right: 0.5em;
}

.input-small {
    width: 4em;
}

/* Colouring the "Save" buttons
   When the button is not going to do anything (!dirty)
   Make inactive
*/

.inactive_colour {
    background: #B9C1C6;
}

.active_colour {
    background: #00233A;
}

/* For widgets that display data that is possibly inactive */
.inactive {
    text-decoration: line-through;
    color: #a7a7c7;
}

/* Farmer's Login */
#farmer_login_div {
    display: flex;
    flex-direction: column;
    justify-content: center;
 }

/* Hiding elements not available to the farmer when logged in */
.hidden_element {
    display: none !important;
}

#add_farmer_login_button,#cancel_login_button,#edit_farmer_login_button,#cancel_farmer_login_button
{
    float:left;
}


#farmer_login_div {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    border-radius: 10px;
    padding: 20px;
}

#fl_label_span{
    padding-bottom:1em;
}

#fl_button_span {
    padding-top: 1em;
}

#fl_login_span {
    margin-bottom: 1em;
}

#fl_label_span,
#fl_login_span,
#fl_pw_span
 {
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
    width: 62%; /* An odd value */
}

#fl_button_span {
    margin-bottom: 1em;
    display: flex;
    justify-content: space-between;
}

.flbutton{
    margin:1em;
}

#fl_login_span label,
#fl_pw_span label {
    align-self: flex-end;
}

#fl_login_span input,
#fl_pw_span input {
    align-self: flex-start;
}


/* ========================================================================
 * job_edit/Invoice tab — 2-column panel layout (matches Order tab tokens)
 */

.invoice-tab-outer {
    /* Match boxlayout.addLabeledRow (8em label column, 0.5em gap) so the
     * Invoice note input lines up with Price/Discount/Work nature/etc. */
    --invoice-tab-label-width: 8em;
    --invoice-tab-row-gap: 6px;
    --invoice-tab-col-gap: 0.5em;
    --invoice-tab-card-gap: 12px;
    --invoice-tab-card-pad-y: 12px;
    --invoice-tab-card-pad-x: 16px;
    --invoice-tab-control-height: 28px;
    --invoice-tab-card-bg: #f6f6f6;
    --invoice-tab-card-border: 2px solid #ccc;
    --invoice-tab-card-radius: 4px;
    /* Width of the right-hand column shared by the Price/Units (button)
     * and Discount/Quoted-Price rows. Fixing it keeps the left 1fr
     * column — and thus the Price, Units and Discount boxes — the same
     * width across both rows. */
    --invoice-tab-aux-col: 9.5em;

    /* .invoice-tab-outer is the SwitchTabs page element (a .stack-layer:
     * position:absolute, height:100% of the .stack). It therefore already has
     * a definite height equal to the real space below the tab strip. We anchor
     * the whole layout to that via a height:100% chain (matching the Order
     * tab) rather than a viewport calc(); a calc() guess overshoots the stack
     * height, so the cards run off-screen and .stack's overflow:hidden clips
     * them with no scrollbar. We must NOT put display:flex here either, since
     * SwitchTabs sets an inline display:block that would override it. */
    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}

.invoice-tab-page {
    width: 100%;
    height: 100%;
    overflow: hidden;
    padding: var(--invoice-tab-card-gap);
    box-sizing: border-box;
}

.invoice-tab-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: minmax(16em, 38%) minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr);
    gap: var(--invoice-tab-card-gap);
    align-items: stretch;
    overflow: hidden;
    box-sizing: border-box;
}

.invoice-tab-card {
    background: var(--invoice-tab-card-bg);
    border: var(--invoice-tab-card-border);
    border-radius: var(--invoice-tab-card-radius);
    padding: var(--invoice-tab-card-pad-y) var(--invoice-tab-card-pad-x);
    box-sizing: border-box;
}

.invoice-tab-left {
    display: flex;
    flex-direction: column;
    gap: var(--invoice-tab-row-gap);
    min-height: 0;
    overflow: auto;
    padding-top: calc(var(--invoice-tab-card-pad-y) + 8px);
}

.invoice-tab-right {
    display: flex;
    flex-direction: column;
    gap: 0.1em;
    min-height: 0;
    min-width: 0;
    overflow: auto;
    background: #f6f6f6;
    border: 2px solid #ccc;
    border-radius: 4px;
    padding: 8px;
    box-sizing: border-box;
}

.invoice-tab-labeled-row {
    display: grid;
    grid-template-columns: var(--invoice-tab-label-width) minmax(0, 1fr);
    column-gap: var(--invoice-tab-col-gap);
    row-gap: var(--invoice-tab-row-gap);
    align-items: center;
}

.invoice-tab-note-row {
    align-items: stretch;
    flex: 1 1 auto;
    min-height: 8em;
}

.invoice-tab-note-row .invoice-tab-control-wrap {
    display: flex;
    height: 100%;
    min-height: 0;
}

.invoice-tab-note-row .invoice-tab-control-wrap > span {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
}

.invoice-tab-control-wrap {
    width: 100%;
    min-width: 0;
}

.invoice-tab-control-wrap > span,
.invoice-tab-control-wrap > span > input:not([type="checkbox"]),
.invoice-tab-control-wrap > span > textarea,
.invoice-tab-control-wrap > span > select,
.invoice-tab-control-wrap select {
    width: 100%;
    box-sizing: border-box;
}

.invoice-tab-control-wrap > span > input[type="checkbox"] {
    width: auto;
    margin: 0;
}

#quoted-price-checkbox {
    display: inline-block;
    width: auto;
}

.invoice-tab-control-wrap input:not([type="checkbox"]):not([type="color"]),
.invoice-tab-control-wrap select {
    height: var(--invoice-tab-control-height);
    min-height: var(--invoice-tab-control-height);
    padding: 2px 6px;
}

.invoice-tab-note-input {
    flex: 1 1 auto;
    min-height: 4.5em;
    width: 100%;
    height: 100%;
    padding: 4px 6px;
    resize: none;
    box-sizing: border-box;
}

/* Price + Units rows on the left, Calculate Rate button on the right,
 * stretched to the combined height of the two rows. */
.invoice-tab-price-units {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--invoice-tab-aux-col);
    column-gap: var(--invoice-tab-col-gap);
    align-items: stretch;
}

.invoice-tab-pu-fields {
    display: flex;
    flex-direction: column;
    gap: var(--invoice-tab-row-gap);
    min-width: 0;
}

#button-invoice-calc-rate {
    border-radius: 10px;
    background-color: black;
    color: white;
}

.invoice-tab-price-units > #button-invoice-calc-rate {
    align-self: stretch;
    height: 100%;
    margin: 0;
    white-space: normal;
}

/* Discount (label + box) on the left, Quoted Price (label + tickbox) on
 * the right. Same outer grid as .invoice-tab-price-units so the discount
 * box lines up with, and matches the width of, the Price/Units boxes. */
.invoice-tab-discount-quoted {
    display: grid;
    grid-template-columns: minmax(0, 1fr) var(--invoice-tab-aux-col);
    column-gap: var(--invoice-tab-col-gap);
    align-items: center;
}

.invoice-tab-quoted-cell {
    display: flex;
    align-items: center;
    gap: 0.5em;
    white-space: nowrap;
}

/* Size the tickbox to the discount box height so the two boxes align. */
#quoted-price-checkbox input[type="checkbox"] {
    width: 1.9em;
    height: 1.9em;
    margin: 0;
}

.invoice-tab-summary-card {
    padding: 0.25em 0.5em;
    background: transparent;
    border: none;
    border-radius: 0;
}

.invoice-tab-summary-card h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 0.25em 0;
}

.invoice-tab-tables h3,
.invoice-tab-people-col h3 {
    font-size: 14px;
    font-weight: 700;
    margin: 0.05em 0 0.1em 0;
}

.invoice-tab-tables h3:first-child {
    margin-top: 0;
}

.invoice-tab-summary-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 2px;
}

.invoice-tab-summary-col {
    display: flex;
    flex-direction: column;
    gap: 0.05em;
}

.invoice-tab-kv-row {
    display: grid;
    grid-template-columns: minmax(6em, 42%) minmax(0, 1fr);
    gap: 0.25em;
    align-items: baseline;
}

.invoice-tab-kv-label {
    font-weight: 700;
    font-size: 13px;
    line-height: 1.2;
}

.invoice-tab-kv-value {
    line-height: 1.2;
}

.invoice-tab-note-preview {
    margin-top: 0.75em;
    padding-top: 0.5em;
    line-height: 1.4;
    white-space: pre-wrap;
    word-break: break-word;
}

.invoice-tab-note-preview:empty {
    display: none;
}

.invoice-tab-people-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--invoice-tab-card-gap);
    align-items: start;
}

.invoice-tab-people-col {
    min-width: 0;
}

.invoice-tab-tables table,
.invoice-tab-people-col table {
    width: 100%;
    border-collapse: collapse;
    margin: 0 0 1px 0;
}

.invoice-tab-tables th,
.invoice-tab-tables td,
.invoice-tab-people-col th,
.invoice-tab-people-col td {
    border: 1px solid #ccc;
    padding: 1px 4px;
    line-height: 1.2;
    text-align: center !important;
    vertical-align: middle;
}

.invoice-tab-tables th,
.invoice-tab-people-col th {
    font-size: 13px;
    font-weight: 700;
    background: #f3f3f3;
}

.invoice-tab-tables td,
.invoice-tab-people-col td {
    font-size: 14px;
    font-weight: 400;
}

.invoice-tab-tables th:first-child,
.invoice-tab-tables td:first-child,
.invoice-tab-people-col th:first-child,
.invoice-tab-people-col td:first-child {
    text-align: left !important;
}

#strip-fees-table tr:last-child td,
#aircraft-revenue-table tr:last-child td {
    background: #fafafa;
}


/* Multi job styles */
#div-map-tab-client-list   {
    overflow:auto;
}
#client-set-selector {
    max-height: 20em; /* 20 lines of client names */
    overflow:auto; /* Scroll for more */
    border: 2px inset #7d0707;
    border-radius: 0.5em;
}

/* For use in front/jobs.ts lists where there can be too many clients to show */
.multijob-placeholder {
    color:red;
}

#sub-job-list-inactive-header {
  background-color: beige;
  text-align: center;
  padding: 1em;
  margin: 0 auto;
}

#sub-job-list-inactive-header h3,
#sub-job-list-inactive-header h4 {
    /* some vertical spacing between elements headings*/
    margin: 0.5em 0;
}

/* The checkboxes for selecting sub-jobs on the Map tab */
/* Visual indicator that the check box is disabled for the label*/
.sub-job-checkbox:disabled + label {
    opacity: 0.5;
    cursor: not-allowed;
}
/* Change cursor for the checkbox when disabled */
.custom-checkbox:disabled {
    cursor: not-allowed;
}

/* ---------------- */
/* Debugging map tiles */

/* Borders around each tile
Slightly transparent map
*/
.dbg-tile{
    border: 2px inset #7d0707;
    border-radius: 0.5em;
    opacity:0.2;
}

/* Slippy refs printed on screen */
.dbg-label {
    border: 1px solid red;
}
/* ---------------- */

/* ========================================================================
 * Tracking page: right-hand device sidebar
 *
 * The map keeps `box-grow` so it consumes remaining width; the sidebar
 * is a fixed-width column that scrolls independently when the device
 * list grows long.
 */

.tracking-pane {
    /* `auth-padwrap` handles outer padding; we just need both children
       to share the available space. */
    min-height: 0;
}

/* When the pane goes fullscreen (button in the map zoombar), the
   browser strips its surrounding layout and paints whatever is behind
   the `:fullscreen` element black.  We need an explicit background
   here, plus to claim the full viewport so the flex layout (sidebar +
   map) gets the correct dimensions.  These two rules MUST stay split
   into separate blocks: a single unrecognised pseudo-class invalidates
   the whole selector list, so combining `:fullscreen` and the WebKit
   prefix would break both. */
.tracking-pane:fullscreen {
    background: #ffffff;
    width: 100vw;
    height: 100vh;
    padding: 0;
    gap: 0;
}

.tracking-pane:-webkit-full-screen {
    background: #ffffff;
    width: 100vw;
    height: 100vh;
    padding: 0;
    gap: 0;
}

.tracking-sidebar {
    flex: 0 0 320px;
    display: flex;
    flex-direction: column;
    background: #f6f6f6;
    border-radius: 6px;
    overflow: hidden;
    min-height: 0;
}

.tracking-sidebar-list {
    flex: 1;
    overflow-y: auto;
    padding: 6px;
    display: flex;
    flex-direction: column;
    /* Tight gap so 20-ish collapsed cards fit on a typical screen. */
    gap: 3px;
}

.tracking-sidebar-empty {
    color: #888;
    font-style: italic;
    padding: 8px;
    text-align: center;
}

/* Cards are collapsed to a single line by default for density.  The
   header (id + job + status pill) is the only always-visible content;
   clicking the card body expands it to show details and controls. */
.tracking-card {
    background: #fff;
    border: 1px solid #d8d8d8;
    border-left: 4px solid #d8d8d8;
    border-radius: 3px;
    padding: 4px 8px;
    cursor: pointer;
    user-select: none;
    /* Stack header above the (optional) expanded body. */
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.tracking-card:hover {
    background: #fbfbfb;
}

.tracking-card:focus-visible {
    outline: 2px solid #00739e;
    outline-offset: -2px;
}

/* Card with an active coverage overlay gets a coloured left edge so the
   user can see at a glance which cards are contributing overlays. */
.tracking-card-coverage-on {
    border-left-color: #ff8000;
    background: #fffaf2;
}

.tracking-card-coverage-on:hover {
    background: #fff5e8;
}

/* The card whose device is currently being followed on the map gets a
   distinct blue left edge so the operator can quickly find it in the
   list (sidebar order is independent of follow status). */
.tracking-card-followed {
    border-left-color: #1f7ad6;
}

/* Hidden devices stay listed but are visually demoted. */
.tracking-card-hidden {
    opacity: 0.55;
}

.tracking-card-header {
    display: flex;
    align-items: center;
    gap: 8px;
    /* Subtle chevron on the right hints at expandability. */
    position: relative;
}

.tracking-card-header::after {
    content: '\25BE'; /* down-pointing small triangle */
    color: #aaa;
    font-size: 10px;
    margin-left: 2px;
    transform: rotate(-90deg);
    transition: transform 100ms ease-out;
}

.tracking-card-expanded .tracking-card-header::after {
    transform: rotate(0deg);
}

.tracking-card-id {
    font-weight: 700;
    font-family: "Roboto Mono", monospace, sans-serif;
    letter-spacing: 0.5px;
    font-size: 13px;
}

/* Job number sits between id and the speed/pill, takes the slack,
   ellipsises if ever too long.  When no job is assigned the slot is
   blank but reserved so the columns line up across cards. */
.tracking-card-job {
    flex: 1;
    color: #555;
    font-size: 12px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

/* Current speed slot, shown right of the job and left of the pill on
   the always-visible header line.  Right-aligned within its own width
   for tidy column-style scanning down the list. */
.tracking-card-speed {
    color: #666;
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    flex-shrink: 0;
    min-width: 50px;
    text-align: right;
}

.tracking-card-pill {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    padding: 1px 6px;
    border-radius: 999px;
    line-height: 1.4;
    flex-shrink: 0;
    /* Fixed width + centred text so Active / Idle / Hidden all occupy
       the same pill footprint.  The speed slot sits immediately to the
       left of the pill, so when the pill width is constant the speed
       column lines up neatly across cards. */
    box-sizing: border-box;
    min-width: 56px;
    text-align: center;
}

/* Active = matches the orange marker rule (formatTimeAgo === undefined,
   i.e. tracking sample under ~60 s old).  Idle = anything older.
   Hidden takes precedence when the user has stashed the device — they
   need to see "this is hidden" without expanding the card. */
.tracking-card-pill-active {
    background: #ff8000;
    color: #fff;
}

.tracking-card-pill-idle {
    background: #e0e0e0;
    color: #555;
}

.tracking-card-pill-hidden {
    background: #888;
    color: #fff;
}

/* Expanded body block — only present when the user has clicked the
   card open.  Holds comment line, speed/seen line, optional "no job"
   note, and the three control buttons. */
.tracking-card-body {
    display: flex;
    flex-direction: column;
    gap: 4px;
    /* Visually separate the body from the header so the click target
       boundaries are obvious. */
    border-top: 1px solid #ececec;
    padding-top: 6px;
    margin-top: 2px;
}

.tracking-card-comment {
    font-size: 12px;
    color: #555;
}

.tracking-card-row {
    font-size: 12px;
    color: #333;
}

.tracking-card-meta {
    color: #666;
}

.tracking-card-muted {
    color: #999;
    font-style: italic;
}

.tracking-card-ctrls {
    display: flex;
    gap: 4px;
    margin-top: 2px;
}

.tracking-card-btn {
    flex: 1;
    background: #fff;
    border: 1px solid #bdbdbd;
    border-radius: 3px;
    padding: 4px 4px;
    font-size: 11px;
    font-weight: 700;
    color: #00233a;
    cursor: pointer;
    line-height: 1.2;
}

.tracking-card-btn:hover:not(:disabled) {
    background: #f0f7fb;
}

.tracking-card-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

/* Pressed/on state for any card button (toggle look, not a momentary
   click).  `aria-pressed` carries the same info for assistive tech. */
.tracking-card-btn-on {
    background: #00233a;
    color: #fff;
    border-color: #00233a;
}

.tracking-card-btn-on:hover:not(:disabled) {
    background: #013a5f;
}

/* Mode banner — bottom-centre of the map, mirroring the
   `.map-area-quantity` placement used on the job map view.  The button
   is hidden entirely in 'auto' mode (the implicit, "everything-is-fine"
   state) and only appears when the user needs to know that the map is
   no longer auto-fitting:

     follow = orange "Follow" — re-centring on a clicked device
     off    = grey   "Manual" — user has panned/wheel-zoomed

   Clicking either form returns to auto-zoom (and so removes the
   banner).  Mounted inside the same `.stack` container as the map
   layers so `position: absolute` resolves against the map area, which
   keeps the banner in place when the user goes fullscreen. */
button.tracking-mode-banner {
    /* Hidden by default; the JS adds a state class when in
       follow / off, which sets `display: flex` and a colour.
       z-index: 200 keeps us safely above the map-viewer's input
       shield (z-index: 100) regardless of which container we end up
       mounted in — defensive, since the banner is currently mounted
       OUTSIDE the shield's stacking context anyway. */
    display: none;
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    margin-bottom: 0.5em;
    z-index: 200;

    align-items: center;
    height: 38px;
    padding: 0 14px;
    border: none;
    border-radius: 4px;
    color: #ffffff;
    font-size: larger;
    font-weight: bold;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
}

button.tracking-mode-banner:hover {
    filter: brightness(0.96);
}

button.tracking-mode-banner.tracking-mode-banner-follow {
    display: flex;
    background: #ff8000;
}

button.tracking-mode-banner.tracking-mode-banner-off {
    display: flex;
    background: #888888;
}

/* Stack sidebar below map on narrow screens. */
@media (max-width: 800px) {
    .tracking-pane {
        flex-direction: column;
    }
    .tracking-sidebar {
        flex: 0 0 240px;
    }
}

/* -------------------------------------------------------------------------
 * Order tab: viewport-locked panel-card grid.
 *
 * 3-column × 2-row CSS grid that fills the viewport (no page scroll;
 * individual cards scroll internally if their content overflows).
 * Each section is a "panel card" with shaded chrome:
 *
 *   sec1 (col 1, both rows)  client + farm + geozone + Order ID
 *   sec2 (col 2, row 1)      product / quantity / app-rate
 *   sec3 (col 3, row 1)      job metadata (name, supplier, ...)
 *   sec4 (cols 2-3, row 2)   notes + customer notes
 *
 * Rows are equal-height (1fr 1fr) so sec2, sec3 and sec4 share the
 * same vertical real-estate.
 *
 * The label/control rows inside every card use `display: contents` so
 * their labels and inputs flow directly into the card's 2-column
 * grid, which means every label in a card lines up in one column
 * regardless of insertion order or wrapping <div>s (e.g. the legacy
 * `#order-tab-qrow` group container).
 * ------------------------------------------------------------------------- */
.order-tab-outer {
    /* Design tokens for the Order tab.  Tweak in one place. */
    --order-tab-label-width: 9em;
    --order-tab-row-gap: 6px;
    --order-tab-col-gap: 0.75em;
    --order-tab-card-gap: 12px;
    --order-tab-card-pad-y: 12px;
    --order-tab-card-pad-x: 16px;
    --order-tab-control-height: 28px;
    --order-tab-card-bg: #f6f6f6;
    --order-tab-card-border: 2px solid #ccc;
    --order-tab-card-radius: 4px;

    width: 100%;
    height: 100%;
    overflow: hidden;
    box-sizing: border-box;
}
.order-tab-page {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    padding: var(--order-tab-card-gap);
    overflow: hidden;
}
.order-tab-grid {
    display: grid;
    width: 100%;
    height: 100%;
    grid-template-columns: 1fr 1fr 1fr;
    /* Top row (sec2/sec3) is allowed to expand up to its natural
     * content height when there's space, so the input-heavy cards
     * don't trigger their internal scrollbars on typical viewports.
     * The notes row keeps at least 8em so the textareas stay
     * usable, but is happy to share the rest with the top row. */
    grid-template-rows: minmax(auto, 1.1fr) minmax(8em, 0.9fr);
    gap: var(--order-tab-card-gap);
    align-items: stretch;
    box-sizing: border-box;
    overflow: hidden;
}

/* Section positioning in the grid. */
.order-tab-sec1 {
    grid-column: 1;
    grid-row: 1 / 3;
    min-width: 0;
    min-height: 0;
}
.order-tab-sec2 {
    grid-column: 2;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
}
.order-tab-sec3 {
    grid-column: 3;
    grid-row: 1;
    min-width: 0;
    min-height: 0;
}
.order-tab-sec4 {
    grid-column: 2 / 4;
    grid-row: 2;
    min-width: 0;
    min-height: 0;
}

/* All four cards: shaded chrome + internal scroll if content overflows
 * the equal-height grid cell. */
.order-tab-sec1,
.order-tab-sec2,
.order-tab-sec3,
.order-tab-sec4 {
    background: var(--order-tab-card-bg);
    border: var(--order-tab-card-border);
    border-radius: var(--order-tab-card-radius);
    padding: var(--order-tab-card-pad-y) var(--order-tab-card-pad-x);
    box-sizing: border-box;
    overflow: auto;
}

/* sec2/sec3 are card-grids: labels left, controls right, all labels
 * aligned in column 1 across the card. */
.order-tab-sec2,
.order-tab-sec3 {
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-content: start;
    align-items: center;
}

/* sec1 is a flex column holding three blocks:
 *   .order-tab-client-block  – Client picker (+ summary)
 *   .order-tab-farm-block    – Farm ID picker (+ summary)  (SAFW only)
 *   .order-tab-bottom-block  – Geozone (SAFW) or Order ID (non-SAFW),
 *                              pinned to the bottom of the card.
 *
 * The client and farm blocks share the remaining vertical space
 * equally (`flex: 1 1 0`), with each block scrolling internally if
 * its summary is taller than the slot.  The bottom block keeps its
 * natural height. */
.order-tab-sec1 {
    display: flex;
    flex-direction: column;
    gap: var(--order-tab-row-gap);
}
.order-tab-client-block,
.order-tab-farm-block {
    flex: 1 1 0;
    min-height: 0;
    overflow: auto;
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-content: start;
    align-items: center;
}
.order-tab-bottom-block {
    flex: 0 0 auto;
    margin-top: auto;
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-items: center;
}

/* Labeled rows (and the legacy `#order-tab-qrow` wrapper) dissolve
 * into their parent card grid via `display: contents`, so each
 * label/control pair flows into the surrounding 2-column grid. */
.order-tab-client-block .order-tab-labeled-row,
.order-tab-farm-block .order-tab-labeled-row,
.order-tab-bottom-block .order-tab-labeled-row,
.order-tab-sec2 .order-tab-labeled-row,
.order-tab-sec3 .order-tab-labeled-row,
.order-tab-sec2 > #order-tab-qrow {
    display: contents;
}

/* Full-width banner (used by the unDelete button when the job has
 * been deleted).  sec1 is a flex column, so just stretch to the
 * card's full width. */
.order-tab-undelete-row {
    flex: 0 0 auto;
    width: 100%;
    margin-bottom: var(--order-tab-row-gap);
}

/* Fallback for `.order-tab-labeled-row` outside a card-grid section,
 * e.g. anywhere `addOrderRow()` is reused in the future. */
.order-tab-labeled-row {
    display: grid;
    grid-template-columns: var(--order-tab-label-width) minmax(0, 1fr);
    column-gap: var(--order-tab-col-gap);
    row-gap: var(--order-tab-row-gap);
    align-items: center;
}

.order-tab-control-wrap {
    width: 100%;
    min-width: 0;
}

/* Pin the immediate child of `.order-tab-control-wrap` (typically the
 * freezable widget's <span> wrapper, which defaults to inline) to
 * block-level so the inner <input> / <select> fills the cell. */
.order-tab-client-block .order-tab-control-wrap > *,
.order-tab-farm-block .order-tab-control-wrap > *,
.order-tab-bottom-block .order-tab-control-wrap > *,
.order-tab-sec2 .order-tab-control-wrap > *,
.order-tab-sec3 .order-tab-control-wrap > * {
    display: block;
    width: 100%;
    min-width: 0;
    box-sizing: border-box;
}

/* Input sizing: consistent 28px control row across every card. */
.order-tab-sec1 input,
.order-tab-sec1 select,
.order-tab-sec2 input:not(.order-tab-date-input),
.order-tab-sec2 select,
.order-tab-sec3 input,
.order-tab-sec3 select {
    width: 100%;
    height: var(--order-tab-control-height);
    padding: 2px 6px;
    box-sizing: border-box;
    min-width: 0;
}

/* searchpick widget (client picker, product picker, farm picker) sits
 * inside a wrap and needs its inner <input> to fill the cell. */
.order-tab-sec1 .searchpick,
.order-tab-sec2 .searchpick,
.order-tab-sec3 .searchpick {
    display: block;
    width: 100%;
}
.order-tab-sec1 .searchpick input,
.order-tab-sec2 .searchpick input,
.order-tab-sec3 .searchpick input {
    width: 100%;
    height: var(--order-tab-control-height);
    box-sizing: border-box;
}

/* Date input: native <input type=date> sizing is browser-specific, so
 * pin the internal parts to a known height. */
.order-tab-date-wrap {
    display: block;
    width: 100%;
}
input.order-tab-date-input {
    width: 100%;
    height: var(--order-tab-control-height);
    margin: 0;
    padding: 0 6px;
    line-height: 1.2;
    text-align: left;
    box-sizing: border-box;
}
input.order-tab-date-input::-webkit-datetime-edit,
input.order-tab-date-input::-webkit-datetime-edit-fields-wrapper {
    padding: 0;
    margin: 0;
    text-align: left;
    line-height: 1.2;
}
input.order-tab-date-input::-webkit-calendar-picker-indicator {
    margin: 0;
    align-self: center;
    vertical-align: middle;
}

/* The Client row in sec1 holds a tall ClientPicker widget (search
 * input plus summary panel); pin its label to the top of the row so
 * the label sits next to the search input rather than centred on the
 * full picker height. */
.order-tab-row-client > label.field-label {
    align-self: start;
    padding-top: 4px;
}

/* The Multijob client set-selector lives inside sec1 too; cap its
 * height so it scrolls instead of pushing the rest of the card. */
#order-tab-sec-client #client-set-selector {
    max-height: 12em;
    overflow: auto;
}

/* -------------------------------------------------------------------------
 * sec1: third-party widget internals (ClientPicker, SapFarmPicker).
 *
 * Both widgets default to `inline-flex` (shrink-to-fit) wrappers and to
 * stacked label-above-input pairs inside their own summary panels.
 * Inside an Order-tab card the cell width is fixed, so:
 *
 *   1. Stretch every `.field-set` / `.field-pair` to 100% width.
 *   2. Hide the internal "Client" label inside ClientPicker (the
 *      external "Client" label is provided via addOrderRow).
 *   3. Drop the summary panel's separate shaded chrome (the card
 *      already provides chrome — no need for a second one).
 *   4. Lay each summary detail row out as label-beside-value (5em
 *      label column + flexible value column) instead of stacked.
 * ------------------------------------------------------------------------- */
.order-tab-sec1 .field-set,
.order-tab-sec1 .field-pair {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-width: 0;
    gap: 0;
    box-sizing: border-box;
}

/* Hide the duplicate "Client" label that lives inside ClientPicker's
 * own field-pair wrapper — we already provide one from addOrderRow. */
.order-tab-sec1 #clientpicker-ordertab > .field-pair > .field-label {
    display: none;
}

/* Summary panel (Phone / Email / Address / Notes for either the
 * client or the farm).  The TypeScript moves each summary out of
 * its picker widget and into its own block (`.order-tab-client-block`
 * or `.order-tab-farm-block`), so it becomes a grid item spanning
 * both columns (full block width).  Drop the inherited shaded chrome
 * — the card already provides it. */
.order-tab-client-block > .clientpick-summary,
.order-tab-farm-block > .clientpick-summary {
    grid-column: 1 / -1;
    background: transparent;
    padding: 4px 0 0 0;
    border-top: 1px solid rgba(0,0,0,0.08);
    margin-top: -2px;
    width: 100%;
    box-sizing: border-box;
}
/* Empty summary panel (no client / farm selected) collapses to zero
 * height so it doesn't leave an orphaned separator line. */
.order-tab-client-block > .clientpick-summary:empty,
.order-tab-client-block > .clientpick-summary:has(> .field-set:empty),
.order-tab-farm-block > .clientpick-summary:empty,
.order-tab-farm-block > .clientpick-summary:has(> .field-set:empty) {
    display: none;
}
.order-tab-sec1 .clientpick-summary > .field-set {
    gap: 2px;
}
.order-tab-sec1 .clientpick-title {
    font-size: 14px;
    font-weight: 700;
    margin: 0 0 4px 0;
}

/* Each detail row inside the summary: label on the left (5em column),
 * value on the right.  Replaces the inherited stacked field-pair. */
.order-tab-sec1 .clientpick-summary .field-pair {
    display: grid;
    grid-template-columns: 5em minmax(0, 1fr);
    column-gap: 0.5em;
    align-items: baseline;
    width: 100%;
    margin: 0;
    gap: 0;
}
.order-tab-sec1 .clientpick-summary .field-pair > .field-label {
    font-size: 12px;
    line-height: 1.25;
    margin: 0;
}
.order-tab-sec1 .clientpick-summary .field-pair > div:last-child {
    font-size: 12px;
    line-height: 1.25;
    word-break: break-word;
}
.order-tab-sec1 .clientpick-summary .field-pair p {
    margin: 0;
}

/* sec4 (notes card): two columns side by side, each a flex column with
 * a header label and a <textarea> that grows to fill the column. */
.order-tab-sec4 {
    display: flex;
    flex-direction: column;
    min-height: 0;
}
.order-tab-sec4 .order-tab-notes-box {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: row;
    gap: var(--order-tab-card-gap);
    box-sizing: border-box;
}
.order-tab-notes-col {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    display: flex;
    flex-direction: column;
}
.order-tab-notes-col > .field-label {
    flex: 0 0 auto;
    margin-bottom: var(--order-tab-row-gap);
}
.order-tab-notes-textarea-wrap {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    width: 100%;
    overflow: hidden;
}
.order-tab-notes-textarea-wrap > span {
    flex: 1 1 auto;
    display: flex;
    min-height: 0;
    width: 100%;
}
.order-tab-notes-textarea-wrap textarea {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    resize: none;
    box-sizing: border-box;
}

/* ========================================================================
 * Worklog editor: compact horizontal layout so all columns fit on one
 * row without horizontal scrolling.  Trims the inherited padding on
 * inputs/selects and table cells inside the worklog editor only.
 */
#worklog-editing-widget table {
    width: 100%;
    table-layout: auto;
    /* Collapsed borders keep the header row's labels in a single
     * continuous band (no gaps between adjacent <th>s).  Uniform
     * horizontal spacing between boxes is achieved by giving every
     * cell the same horizontal padding (4px each side -> 8px gap
     * between boxes) and stretching every box to fill its cell. */
    border-collapse: collapse;
}

#worklog-editing-widget td,
#worklog-editing-widget th {
    padding: 2px 4px;
    font-size: 14px;
    line-height: 1.2;
    vertical-align: middle;
}

/* Inputs and selects stretch to fill their cell, so the visible gap
 * between any two adjacent boxes is exactly the 8px of cell padding
 * (4px right of one cell + 4px left of the next).  Min-widths keep
 * the small/date columns readable without locking the box width. */
#worklog-editing-widget input:not([type="color"]),
#worklog-editing-widget select {
    height: 32px;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1.2;
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
}

#worklog-editing-widget .input-small {
    min-width: 3.5em;
}

#worklog-editing-widget input[type="date"] {
    min-width: 7.5em;
}

#worklog-editing-widget select {
    min-width: 5em;
}

/* Date — compact (col 2); min-width on input only, not the header cell. */
#worklog-editing-widget th:nth-child(2),
#worklog-editing-widget td:nth-child(2) {
    width: 1%;
    white-space: nowrap;
}

/* Pilot, Loader, Airstrip — wider than Aircraft (cols 3, 4, 6). */
#worklog-editing-widget th:nth-child(3),
#worklog-editing-widget th:nth-child(4),
#worklog-editing-widget th:nth-child(6),
#worklog-editing-widget td:nth-child(3) select,
#worklog-editing-widget td:nth-child(4) select,
#worklog-editing-widget td:nth-child(6) select {
    min-width: 8em;
}

/* Aircraft — compact (col 5); min-width on select only. */
#worklog-editing-widget th:nth-child(5),
#worklog-editing-widget td:nth-child(5) {
    width: 1%;
    white-space: nowrap;
}

#worklog-editing-widget td:nth-child(5) select {
    min-width: 4em;
}

/* Productive, Sundry, Quantity — equal width (col 7 sets the size). */
#worklog-editing-widget th:nth-child(7),
#worklog-editing-widget th:nth-child(8),
#worklog-editing-widget th:nth-child(9),
#worklog-editing-widget td:nth-child(7),
#worklog-editing-widget td:nth-child(8),
#worklog-editing-widget td:nth-child(9),
#worklog-editing-widget td:nth-child(7) .input-small,
#worklog-editing-widget td:nth-child(8) .input-small,
#worklog-editing-widget td:nth-child(9) .input-small {
    min-width: 4.5em;
}

#worklog-editing-widget th:nth-child(7),
#worklog-editing-widget th:nth-child(8),
#worklog-editing-widget th:nth-child(9),
#worklog-editing-widget td:nth-child(7),
#worklog-editing-widget td:nth-child(8),
#worklog-editing-widget td:nth-child(9) {
    width: 1%;
    white-space: nowrap;
}

/* Trips — unchanged (col 10). */
#worklog-editing-widget th:nth-child(10),
#worklog-editing-widget td:nth-child(10) {
    width: 1%;
    min-width: 3.5em;
    white-space: nowrap;
}

/* Buttons stay at their natural (square) size; their cell shrinks to
 * fit, so the gap to the next box is still the same 8px. */
#worklog-editing-widget button {
    height: 32px;
    padding: 0 6px;
    font-size: 14px;
    line-height: 1.2;
    box-sizing: border-box;
}

#worklog-editing-widget .small-button {
    padding: 0 4px;
    margin-right: 0;
    min-width: 32px;
}

/* The standalone "add row" (+) button sits below the table, so it
 * needs an explicit left/top offset to line up with the (-) buttons
 * inside the first column of the rows above.  4px matches the td
 * horizontal padding so the + button's left edge aligns with the -
 * column above. */
#worklog-editing-widget > .small-button {
    margin-left: 4px;
    margin-top: 4px;
}